:root{
  --green-900:#0a2e1f; --green-800:#0f3d28; --green-700:#155c38; --green-600:#1d7a47;
  --green-500:#2aa35e; --green-400:#37c46e; --green-300:#7be8a6;
  --bg:#f4f7f5; --panel:#ffffff; --ink:#11261c; --ink-soft:#4a5d52; --line:#dde8e1;
  --term-bg:#06120c; --term-green:#37c46e; --term-amber:#f0b429; --term-red:#ff5a5a;
  --radius:12px; --shadow:0 1px 3px rgba(10,46,31,.08),0 8px 24px rgba(10,46,31,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
small{font-size:.78em;opacity:.85}
button{font-family:inherit;cursor:pointer}

/* ===== TOPBAR ===== */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 24px;background:linear-gradient(100deg,var(--green-900),var(--green-700));
  color:#fff;position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:30px;height:30px;color:var(--green-300)}
.brand-title{font-weight:800;font-size:1.02rem;letter-spacing:.2px}
.brand-sub{font-size:.72rem;opacity:.8}
.topnav{display:flex;gap:8px}
.nav-btn{background:var(--green-500);color:#fff;border:none;padding:8px 14px;border-radius:8px;
  font-weight:600;font-size:.85rem;transition:.15s}
.nav-btn:hover{background:var(--green-400)}
.nav-btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.35)}
.nav-btn.ghost:hover{background:rgba(255,255,255,.12)}

/* ===== SCREEN ===== */
.screen{max-width:1340px;margin:0 auto;padding:28px 24px 60px}

/* ===== CATALOG ===== */
.catalog-head h1{font-size:1.7rem;font-weight:800;margin:.2em 0 .3em}
.lead{max-width:760px;color:var(--ink-soft);margin:0 0 20px}
.progress-wrap{margin:14px 0 6px}
.progress-label{font-size:.85rem;font-weight:600;margin-bottom:6px}
.progress-bar{height:12px;border-radius:8px;background:var(--line);overflow:hidden;position:relative}
.progress-bar::after{content:"";position:absolute;inset:0;width:var(--pct,0%);
  background:linear-gradient(90deg,var(--green-600),var(--green-400));transition:width .4s ease}
.status-line{font-size:.82rem;color:var(--ink-soft);margin-bottom:22px}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sec-badge{background:var(--green-800);color:#fff;font-size:.72rem;font-weight:700;
  padding:3px 9px;border-radius:6px}
.state-badge{font-size:.66rem;font-weight:700;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px}
.state-rec{background:#fff4d6;color:#8a6400;border:1px solid #f0d588}
.state-plan{background:#eef2f0;color:#5a6b62;border:1px solid var(--line)}
.state-done{background:#dff5e7;color:var(--green-700);border:1px solid var(--green-300)}
.card h3{margin:.1em 0;font-size:1.12rem;font-weight:700}
.card .cdesc{color:var(--ink-soft);font-size:.9rem;flex:1}
.card-meta{font-size:.78rem;color:var(--ink-soft);display:flex;gap:14px;flex-wrap:wrap}
.card-ref{font-size:.74rem;color:var(--ink-soft);font-style:italic}
.card-actions{display:flex;gap:8px;margin-top:6px}
.card-actions button{flex:1;padding:9px;border-radius:8px;font-weight:600;font-size:.85rem;border:1px solid var(--line)}
.btn-brief{background:#fff;color:var(--ink)}
.btn-brief:hover{background:#f0f5f2}
.btn-go{background:var(--green-700);color:#fff;border-color:var(--green-700)}
.btn-go:hover{background:var(--green-600)}

/* ===== TRAINER LAYOUT ===== */
.trainer-layout{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start}
.task-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);position:sticky;top:78px;max-height:calc(100vh - 96px);overflow:auto}
.stage-indicator{font-size:.72rem;font-weight:700;color:var(--green-700);letter-spacing:.5px;
  background:#eafaf0;display:inline-block;padding:4px 10px;border-radius:6px}
.task-panel h2{font-size:1.18rem;margin:.5em 0 .3em}
.task-problem{background:#f3f7f4;border:1px solid var(--line);border-radius:8px;padding:11px;
  font-size:.86rem;color:var(--ink-soft)}
.cur-step-box{margin:14px 0;border:1.5px solid var(--green-700);border-radius:8px;padding:10px 12px;background:#f7fffb}
.cur-step-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft)}
.cur-step-name{font-weight:700;font-size:.92rem;margin-top:2px}
.block-head{font-size:.72rem;font-weight:700;letter-spacing:.5px;color:var(--ink-soft);
  text-transform:uppercase;margin:16px 0 8px;display:flex;justify-content:space-between;align-items:center}
.counter{background:var(--green-700);color:#fff;font-size:.72rem;padding:2px 9px;border-radius:20px}
.steps-list,.criteria-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.steps-list li,.criteria-list li{display:flex;gap:9px;align-items:flex-start;font-size:.86rem}
.chk{width:18px;height:18px;border-radius:5px;border:2px solid var(--line);flex:0 0 auto;margin-top:1px;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#fff;transition:.15s}
.steps-list li.done .chk{background:var(--green-500);border-color:var(--green-500)}
.steps-list li.done .chk::after{content:"✓"}
.steps-list li.cur{font-weight:600}
.steps-list li .opt{font-size:.7rem;color:var(--ink-soft)}
.crit-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;margin-top:3px;transition:.15s}
.criteria-list li.met .crit-dot{background:var(--green-500);border-color:var(--green-500)}
.manual-ref{font-size:.76rem;font-style:italic;color:var(--ink-soft);margin-top:14px}
.complete-msg{margin-top:14px;background:#dff5e7;border:1.5px solid var(--green-300);
  border-radius:8px;padding:11px;font-size:.84rem;color:var(--green-800);font-weight:600}

.hint-tools{display:flex;gap:7px;margin-top:16px;flex-wrap:wrap}
.tool-btn{background:#eef2f0;border:1px solid var(--line);padding:7px 11px;border-radius:7px;
  font-size:.8rem;font-weight:600;color:var(--ink)}
.tool-btn:hover{background:#e2ebe5}
.cmd-cards{margin-top:12px}
.cmd-note{font-size:.74rem;color:var(--ink-soft);margin-bottom:8px}
.cmd-card{border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin-bottom:7px;
  cursor:pointer;transition:.15s;background:#fafdfb}
.cmd-card:hover{border-color:var(--green-500);background:#f0fbf4}
.cmd-card .cc-label{font-size:.74rem;color:var(--ink-soft)}
.cmd-card .cc-cmd{font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:500}
.cmd-card.done{border-color:var(--green-400);background:#f0fbf4}
.cmd-card.done .cc-cmd{text-decoration:line-through;color:var(--green-600)}
.cmd-card.hwcard{cursor:default;opacity:.92}
.cmd-card.hwcard:hover{border-color:var(--line);background:#fafdfb}

.next-stage-btn{margin-top:18px;width:100%;padding:12px;border:none;border-radius:9px;
  font-weight:700;font-size:.92rem;background:#cfd9d3;color:#7d8c83;transition:.2s}
.next-stage-btn:not(:disabled){background:var(--green-900);color:#fff;cursor:pointer}
.next-stage-btn:not(:disabled):hover{background:var(--green-700)}

/* ===== WORK AREA ===== */
.work-area{display:flex;flex-direction:column;gap:18px}

/* ===== BENCH ===== */
.bench{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
.bench-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;
  background:#f3f7f4;border-bottom:1px solid var(--line)}
.bench-title{font-weight:700;font-size:.92rem}
.bench-power{font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:20px;background:#fdecec;color:#b23c3c}
.bench-power.on{background:#dff5e7;color:var(--green-700)}

.board{position:relative;margin:18px;border-radius:14px;height:440px;
  background:
    radial-gradient(circle at 30% 20%,rgba(55,196,110,.08),transparent 40%),
    linear-gradient(145deg,var(--green-900),var(--green-800));
  border:2px solid #0c3a25;
  box-shadow:inset 0 0 40px rgba(0,0,0,.4)}
.board::before{content:"";position:absolute;inset:14px;border:1px dashed rgba(123,232,166,.12);border-radius:10px;pointer-events:none}

.mcu{position:absolute;left:42%;top:50%;transform:translate(-50%,-50%);
  width:96px;height:96px;border-radius:8px;background:linear-gradient(160deg,#1a1a1a,#333);
  color:#cfe;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:700;text-align:center;border:2px solid #444;
  box-shadow:0 4px 14px rgba(0,0,0,.5)}
.ftdi{position:absolute;left:24px;bottom:26px;width:54px;height:40px;border-radius:6px;
  background:#1b3a8a;color:#cfe;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700}

.conn{position:absolute;width:78px;min-height:42px;border-radius:7px;border:2px solid #2c6b48;
  background:rgba(8,30,20,.85);color:#9fe9bd;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:.7rem;font-weight:600;cursor:pointer;transition:.15s;line-height:1.15}
.conn:hover{border-color:var(--green-400);box-shadow:0 0 0 3px rgba(55,196,110,.2)}
.conn.active{border-color:var(--green-300);background:rgba(45,163,94,.35);color:#eafff2;box-shadow:0 0 14px rgba(55,196,110,.5)}
.conn-xs1{top:14px;left:50%;transform:translateX(-50%)}
.conn-xs2{bottom:14px;left:50%;transform:translateX(-50%)}
.conn-xp6{left:18px;top:46%;transform:translateY(-50%)}

.led{position:absolute;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.62rem;color:#bfe9cf;font-weight:600}
.led .led-dot{width:18px;height:18px;border-radius:50%;background:#1d3b2b;border:1px solid #2c6b48;transition:.15s}
.led-name{text-align:center;line-height:1.05}
.ld1{right:150px;top:18px}
.ld1.on .led-dot{background:var(--green-400);box-shadow:0 0 14px var(--green-400),0 0 4px #fff}
.ld2{right:96px;top:18px}
.ld2.on .led-dot{background:#fff;box-shadow:0 0 16px #fff,0 0 5px #cfe}

.sbtn{position:absolute;width:46px;height:46px;border-radius:50%;border:2px solid #2c6b48;
  background:radial-gradient(circle at 35% 30%,#2e6,#185);color:#04140c;font-size:.6rem;font-weight:700;
  text-align:center;line-height:1.05;transition:.1s;box-shadow:0 3px 0 #0c3a25}
.sbtn:hover{filter:brightness(1.1)}
.sbtn:active{transform:translateY(2px);box-shadow:0 1px 0 #0c3a25}
.sbtn.reset{background:radial-gradient(circle at 35% 30%,#f88,#c44);color:#fff}
#sb1{left:96px;bottom:24px}
#sb2{left:150px;bottom:24px}

.jumper-group{position:absolute;background:rgba(6,22,15,.7);border:1px solid #2c6b48;border-radius:8px;padding:8px}
.jg-title{font-size:.62rem;color:#9fe9bd;font-weight:700;text-align:center;margin-bottom:6px;line-height:1.1}
.xp11{right:18px;top:72px;width:104px}
.pwr-sel{display:flex;flex-direction:column;gap:4px}
.pwr-opt{font-size:.66rem;font-weight:700;padding:4px;border-radius:5px;border:1px solid #2c6b48;
  background:#0a2417;color:#7fd8a3;transition:.12s}
.pwr-opt:hover{border-color:var(--green-400)}
.pwr-opt.active{background:var(--green-500);color:#04140c;border-color:var(--green-300)}

.xp1{right:18px;top:200px;width:120px}
.jumpers{display:flex;flex-direction:column;gap:4px}
.jumper{display:flex;justify-content:space-between;align-items:center;font-size:.66rem;font-weight:700;
  padding:3px 8px;border-radius:5px;border:1px solid #2c6b48;background:#0a2417;color:#7fd8a3;transition:.12s}
.jumper:hover{border-color:var(--green-400)}
.jumper.set{background:var(--green-500);color:#04140c;border-color:var(--green-300)}
.jumper .pin-state{font-size:.6rem;opacity:.8}
.jumper.set .pin-state{opacity:1}
.boot-code{margin-top:6px;font-size:.64rem;color:#9fe9bd;text-align:center;font-family:'JetBrains Mono',monospace}
#boot-mode{color:var(--green-300);font-weight:700}

.cable{position:absolute;width:48px;height:30px;border-radius:5px;background:#222;color:#ddd;
  font-size:.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px solid #555;left:50%;top:-40px;transform:translateX(-50%)}

.bench-controls{display:flex;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.bench-btn{padding:9px 16px;border:none;border-radius:8px;font-weight:700;font-size:.85rem}
.bench-btn.power{background:var(--green-700);color:#fff}
.bench-btn.power:hover{background:var(--green-600)}
.bench-btn.power.on{background:#c0392b}
.bench-btn.power.on:hover{background:#a93226}
.bench-hint{font-size:.74rem;color:var(--ink-soft);flex:1}

/* ===== TERMINAL ===== */
.terminal{background:var(--term-bg);border-radius:var(--radius);overflow:hidden;
  border:1px solid #0c3a25;box-shadow:var(--shadow)}
.term-head{display:flex;align-items:center;gap:12px;padding:9px 14px;background:#0a1c12;border-bottom:1px solid #11301f}
.dots{display:flex;gap:6px}
.dots i{width:11px;height:11px;border-radius:50%;display:block}
.dots i:nth-child(1){background:#ff5f57}.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840}
.term-title{color:#6f9c82;font-size:.74rem;font-family:'JetBrains Mono',monospace;flex:1}
.term-sid{color:#456b56;font-size:.72rem;font-family:'JetBrains Mono',monospace}
.term-body{font-family:'JetBrains Mono',monospace;font-size:.84rem;line-height:1.5;color:var(--term-green);
  padding:14px;height:300px;overflow:auto;white-space:pre-wrap;word-break:break-word}
.term-body .t-cmd{color:#cfe}
.term-body .t-amber{color:var(--term-amber)}
.term-body .t-red{color:var(--term-red)}
.term-body .t-dim{color:#5a8a6e}
.term-body .t-sep{color:#3f6b51;margin:6px 0;display:block}
.term-body .t-badge{display:inline-block;background:var(--green-700);color:#eafff2;font-size:.72rem;
  padding:1px 8px;border-radius:10px;margin-left:6px}
.term-input-row{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid #11301f}
.term-prompt{font-family:'JetBrains Mono',monospace;color:var(--term-green);font-size:.86rem}
.term-input{flex:1;background:transparent;border:none;outline:none;color:#cfe;
  font-family:'JetBrains Mono',monospace;font-size:.86rem}
.term-input:disabled{opacity:.4}
.term-input::placeholder{color:#3f6b51}

/* ===== MODAL ===== */
[hidden]{display:none !important}
.modal-overlay{position:fixed;inset:0;background:rgba(8,24,16,.6);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal{background:#fff;border-radius:14px;max-width:640px;width:100%;max-height:86vh;overflow:auto;
  position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:1.7rem;color:#888;line-height:1}
.modal-body{padding:28px 30px 10px}
.modal-body h2{margin:0 0 4px;font-size:1.3rem}
.modal-body .m-sec-badge{background:var(--green-800);color:#fff;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:6px}
.modal-body h4{margin:18px 0 6px;font-size:.78rem;letter-spacing:.5px;color:var(--green-700);text-transform:uppercase}
.modal-body ul{margin:0;padding-left:20px}
.modal-body li{margin:5px 0;font-size:.9rem}
.modal-body .m-why{color:var(--ink-soft);font-size:.92rem;margin:8px 0}
.modal-body .m-ref{font-size:.78rem;font-style:italic;color:var(--ink-soft);margin-top:16px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:16px 30px 24px}

/* ===== TOAST ===== */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120%);
  background:var(--green-900);color:#fff;padding:12px 20px;border-radius:10px;font-size:.88rem;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:200;transition:transform .3s ease;max-width:90vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.warn{background:#b23c3c}

/* ===== RESPONSIVE ===== */
@media(max-width:980px){
  .trainer-layout{grid-template-columns:1fr}
  .task-panel{position:static;max-height:none}
}
@media(max-width:640px){
  .topbar{flex-wrap:wrap;gap:8px;padding:10px 14px}
  .topnav{flex-wrap:wrap;gap:6px;width:100%}
  .nav-btn{font-size:.78rem;padding:6px 10px}
  .brand-sub{font-size:.66rem}
  .ld1{right:120px;top:14px}
  .ld2{right:74px;top:14px}
  .xp11{top:64px;width:92px;padding:6px}
  .xp1{top:178px;width:108px;padding:6px}
  .conn-xs1{top:10px}
  .jg-title{font-size:.58rem}
  .pwr-opt,.jumper{font-size:.62rem;padding:3px 6px}
}