:root{
  --bg:#f6f5f1; --card:#ffffff; --ink:#1c1b19; --muted:#6b6560;
  --line:#e2ddd4; --accent:#b3441e; --accent-ink:#ffffff;
  --ok:#3d7a4d; --warn:#b3441e; --pill:#efe9dd; --focus:#2f6f8f;
  --locked:#dfe7df;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#171512; --card:#221f1b; --ink:#f1ede4; --muted:#a89f92;
    --line:#3a3530; --accent:#e07a4a; --accent-ink:#1c1b19;
    --ok:#7fbf8f; --warn:#e07a4a; --pill:#2c2823; --focus:#7ec1de;
    --locked:#243024;
  }
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- Hero ---------- */
.hero{
  position:relative; height:46vh; min-height:320px; max-height:520px;
  background-image:url('../images/hero.jpeg');
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,14,20,.35) 0%, rgba(10,14,20,.55) 55%, rgba(10,14,20,.85) 100%);
}
.hero-content{ position:relative; z-index:1; text-align:center; color:#fff; padding:0 20px; max-width:820px; }
.hero-tag{
  display:inline-block; font-size:0.78rem; font-weight:600; letter-spacing:.04em;
  color:#f0916a; text-transform:uppercase; margin-bottom:14px;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.hero-kicker{
  font-size:0.92rem; font-weight:500; color:#d9d4c8; margin:0 0 12px;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.hero-content h1{
  font-weight:700; font-size:clamp(1.8rem, 4.4vw, 2.9rem); margin:0 0 8px; line-height:1.15;
  text-shadow:0 2px 18px rgba(0,0,0,.5);
}
.hero-secondary{
  font-weight:600; font-size:clamp(1rem, 2vw, 1.3rem); color:#f1ede4; margin:0 0 10px;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.hero-sub{ font-size:0.9rem; color:#c9c4b8; margin:0; text-shadow:0 1px 10px rgba(0,0,0,.5); }

/* ---------- Layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:24px 16px 20px;}
.sub{color:var(--muted);font-size:0.9rem;line-height:1.55;margin:0 0 18px;}

.status-bar{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  font-size:0.82rem;color:var(--muted);min-height:20px;margin-top:12px;
}
.status-bar .saving{color:var(--focus);font-weight:600;}
.status-bar .err{color:var(--warn);font-weight:600;}

.summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;margin:0 0 22px;
}
.summary .box{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;
}
.summary .box b{display:block;font-size:1.15rem;}
.summary .box span{font-size:0.78rem;color:var(--muted);}

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; padding-bottom:40px; }

/* ---------- Group cards ---------- */
.group-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column;
}
.group-card.locked{background:var(--locked);}

.card-media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.group-badge{
  position:absolute; top:10px; left:10px; background:rgba(10,14,20,.6);
  color:#fff; font-size:0.75rem; font-weight:600; padding:4px 10px; border-radius:999px;
  backdrop-filter:blur(2px);
}

.card-body{ padding:14px; display:flex; flex-direction:column; gap:9px; }
.technique-name{ font-weight:700; font-size:0.95rem; color:var(--accent); letter-spacing:.01em; }

.title-input{ font-weight:600; }
.role-block{display:flex;flex-direction:column;gap:4px;}
.role-block label{font-size:0.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}

select,input{
  width:100%;padding:7px 8px;border-radius:8px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font-size:0.88rem;font-family:inherit;
}
select:disabled,input:disabled{opacity:0.55;}

.note{font-size:0.72rem;color:var(--muted);}

.lock-row{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:2px;}
.lock-btn{
  font-size:0.78rem;padding:6px 10px;border-radius:8px;border:1px solid var(--accent);
  background:var(--accent);color:var(--accent-ink);cursor:pointer;font-family:inherit;font-weight:600;
}
.lock-btn:disabled{opacity:0.4;cursor:not-allowed;background:var(--pill);color:var(--muted);border-color:var(--line);}
.locked-tag{font-size:0.78rem;color:var(--ok);font-weight:600;}

footer{ text-align:center; color:var(--muted); font-size:0.8rem; padding:8px 16px 40px; }