:root{
  --night:#0D1B2A; --deck:#15283A; --glass:#1B3248; --well:#0A1520;
  --ink:#E6EEF5; --ink2:#B7C6D4; --mute:#8FA5BA;
  --card:#0D1B2A; --paper:#15283A; --line:#28445E;
  --blue:#2FD3E6; --blue-d:#7FE6F2; --blue-l:rgba(47,211,230,.13); --on-accent:#05232A;
  --mag:#D63AF9; --green:#3DDC84; --yellow:#FFD24A; --red:#F0524A; --amber:#FFB020;
  --panel:#0A1520; --panel2:#132536;
  --r-s:6px; --r-m:10px; --r-l:14px;
  --f-head:"Saira Semi Condensed","Saira SemiCondensed","Arial Narrow",sans-serif;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{font-family:var(--f-body);color:var(--ink);background:var(--card);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
h1,h2,h3{font-family:var(--f-head);font-weight:700;line-height:1.1;margin:0;letter-spacing:.01em}
h1{font-size:2.6rem} h2{font-size:1.9rem} h3{font-size:1.3rem}
p{margin:.4em 0}
.wrap{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
/* sidebar */
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.brand b{font-family:var(--f-head);font-size:1.45rem;color:#fff;line-height:1}
.brand small{display:block;color:#93A3B3;font-size:.8rem}
.stripe{width:6px;height:38px;border-radius:3px;background:linear-gradient(var(--blue) 0 60%,var(--red) 60%)}
.side .grow{flex:1}
.xpbox{background:#1B2C40;border-radius:var(--r-m);padding:12px;font-size:.88rem;color:#B8C6D4}
.xpbox strong{font-family:var(--f-head);font-size:1.6rem;color:#fff;display:block;line-height:1}
.xpbar{height:6px;background:#2C4058;border-radius:3px;margin-top:8px;overflow:hidden}
.xpbar i{display:block;height:100%;background:var(--green);width:0;transition:width .4s}
main{padding:28px 36px 80px;max-width:1120px;width:100%}
.view{display:none} .view.on{display:block}
.lede{color:var(--ink2);max-width:62ch;margin:.5em 0 1.4em}
/* generic */
.surface{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:22px}
.btn{border:0;background:var(--blue);color:#fff;padding:10px 18px;border-radius:var(--r-m);font-weight:700;display:inline-flex;align-items:center;gap:8px}
.btn:hover{background:var(--blue-d)}
.btn.ghost{background:transparent;color:var(--blue);border:1.5px solid var(--blue)}
.btn.ghost:hover{background:var(--blue-l)}
.btn.small{padding:6px 12px;font-size:.9rem}
.btn:disabled{opacity:.45;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chip{border:1.5px solid var(--line);background:var(--paper);padding:6px 12px;border-radius:999px;font-size:.9rem}
.chip.on{border-color:var(--blue);background:var(--blue-l);color:var(--blue-d);font-weight:700}
.tag{display:inline-block;font-size:.78rem;padding:2px 8px;border-radius:4px;background:var(--blue-l);color:var(--blue-d);font-weight:700}
.muted{color:var(--mute)}
.src{font-size:.82rem;color:var(--mute)}
.ok{color:var(--green)} .bad{color:var(--red)}
/* home */
.hero{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:32px;align-items:center;background:var(--panel);color:#E8EEF3;border-radius:22px;padding:30px;position:relative;overflow:hidden}
.hero h1{color:#fff;font-size:3rem}
.hero p{color:#B6C4D1}
.readout{margin-top:16px;background:var(--panel2);border-radius:var(--r-m);padding:14px 16px;min-height:96px}
.readout .v{font-family:var(--f-head);font-size:2.2rem;color:#fff;line-height:1}
.readout .v small{font-size:1rem;color:#93A3B3;margin-left:6px}
.readout .n{font-weight:700;color:#fff;margin-top:4px}
.readout .d{color:#B6C4D1;font-size:.92rem}
.spdbtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.spdbtns button{background:var(--panel2);color:#DCE4EC;border:1px solid #3A4856;border-radius:6px;padding:4px 9px;font-size:.85rem}
.spdbtns button.on{background:#fff;color:var(--ink);border-color:#fff}
.modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:26px}
.mode{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:18px;text-decoration:none;color:inherit;display:block;border-left:6px solid var(--c,var(--blue))}
.mode:hover{border-color:var(--c,var(--blue))}
.mode h3{margin-bottom:4px}
.mode p{color:var(--ink2);font-size:.93rem;margin:0}
/* dial */
.dial{width:100%;max-width:380px;aspect-ratio:1;touch-action:none;user-select:none}
.dial text{font-family:var(--f-head);fill:#E8EEF3}
/* learn */
.learn{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:start}
.seclist{display:flex;flex-direction:column;gap:4px;position:sticky;top:20px}
.seclist button{text-align:left;border:0;background:transparent;padding:9px 12px;border-radius:var(--r-s);color:var(--ink2)}
.seclist button.on{background:var(--paper);color:var(--ink);font-weight:700;box-shadow:inset 4px 0 0 var(--blue)}
.seclist button span{font-family:var(--f-head);font-weight:600;margin-right:6px;color:var(--mute)}
.block{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:20px 22px;margin-bottom:14px}
.block h3{margin-bottom:8px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.block ul{margin:0;padding-left:1.1em}
.block li{margin:5px 0;padding:2px 6px;border-radius:4px;transition:background .2s}
.block li.speaking{background:#FFF3C4}
.block li b{font-weight:700}
.warnbox{border-left:5px solid var(--red);background:#FCEDEC;padding:10px 14px;border-radius:6px;margin-top:10px;font-size:.95rem}
.notebox{border-left:5px solid var(--blue);background:var(--blue-l);padding:10px 14px;border-radius:6px;margin-top:10px;font-size:.95rem}
.player{position:sticky;top:0;z-index:5;background:var(--ink);color:#fff;border-radius:var(--r-m);padding:10px 14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.player .btn{background:#fff;color:var(--ink)}
.player label{font-size:.88rem;color:#B6C4D1;display:flex;align-items:center;gap:6px}
.player input[type=range]{width:90px}
.iconbtn{border:1.5px solid var(--line);background:var(--paper);border-radius:999px;width:34px;height:34px;display:inline-grid;place-items:center;flex:none}
.iconbtn:hover{border-color:var(--blue)}
.iconbtn svg{width:16px;height:16px}
table.t{border-collapse:collapse;width:100%;font-size:.93rem;margin-top:6px}
table.t th,table.t td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left}
table.t th{font-family:var(--f-head);font-size:1rem;font-weight:600;color:var(--ink2)}
/* sequencer */
.seqgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pool,.built{display:flex;flex-direction:column;gap:8px;min-height:120px}
.tile{border:1.5px solid var(--line);background:var(--paper);border-radius:var(--r-m);padding:10px 14px;text-align:left;font-size:.98rem;transition:transform .1s}
.tile:hover{border-color:var(--blue)}
.tile.done{background:#E8F5EC;border-color:var(--green);cursor:default}
.tile.done b{color:var(--green);font-family:var(--f-head);margin-right:8px}
.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.boldbox{border:3px solid var(--ink);border-radius:6px;padding:4px 10px;font-family:var(--f-head);font-weight:700;display:inline-block;font-size:.9rem}
/* sim */
.cockpit{background:var(--panel);border-radius:var(--r-l);padding:18px;color:#E8EEF3;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.annun{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lamp{border-radius:6px;padding:8px 6px;text-align:center;font-family:var(--f-head);font-weight:700;font-size:.95rem;background:#11181F;color:#4A5866;border:1px solid #3A4856}
.lamp.g{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 0 14px #2E9E5B88}
.lamp.r{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 0 16px #D23B2Faa;animation:blink 1s steps(2) infinite}
.lamp.a{background:var(--amber);color:#fff;border-color:var(--amber);box-shadow:0 0 14px #E58A1F88}
@keyframes blink{50%{opacity:.55}}
.gauges{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:.9rem;color:#B6C4D1}
.gauges b{font-family:var(--f-head);font-size:1.35rem;color:#fff;display:block;line-height:1}
.gauges .hot b{color:#FF7A6E}
.situ{font-size:1.08rem;margin:14px 0}
.choices{display:grid;gap:8px;margin-top:10px}
.choice{text-align:left;border:1.5px solid var(--line);background:var(--paper);border-radius:var(--r-m);padding:11px 14px}
.choice:hover{border-color:var(--blue)}
.choice.right{border-color:var(--green);background:#E8F5EC}
.choice.wrong{border-color:var(--red);background:#FCEDEC}
.log{margin-top:14px;font-size:.93rem}
.log li{margin:3px 0}
/* quiz */
.qcard{max-width:720px}
.qmeta{display:flex;justify-content:space-between;color:var(--mute);font-size:.9rem;margin-bottom:8px}
.qtext{font-size:1.25rem;font-weight:700;margin:6px 0 14px}
.expl{margin-top:12px;padding:12px 14px;border-radius:var(--r-m);background:var(--card);font-size:.95rem}
.progress{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:14px}
.progress i{display:block;height:100%;background:var(--blue);transition:width .3s}
/* flashcards */
.flash{perspective:1200px;max-width:620px;height:300px;margin:10px 0 16px;cursor:pointer}
.flash-in{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.flash.flip .flash-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--r-l);padding:28px;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--line)}
.face.front{background:var(--paper)}
.face.back{background:var(--ink);color:#fff;transform:rotateY(180deg)}
.face .tag{align-self:flex-start}
.face .big{font-size:1.45rem;font-weight:700;line-height:1.3}
.face .hint{position:absolute;bottom:14px;left:28px;font-size:.85rem;color:var(--mute)}
.face.back .hint{color:#93A3B3}
.boxes{display:flex;gap:6px;margin-top:6px}
.boxes span{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:6px;text-align:center;font-size:.82rem}
.boxes b{display:block;font-family:var(--f-head);font-size:1.3rem}
/* oral */
.exam{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.examiner{width:92px;height:92px;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.examiner.talk{animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px #2457A633}}
.mic{width:64px;height:64px;border-radius:50%;border:0;background:var(--red);color:#fff;display:grid;place-items:center}
.mic.live{animation:pulse 1s infinite;background:#A62218}
.mic svg{width:28px;height:28px}
.heard{font-style:italic;color:var(--ink2);min-height:1.5em}
input[type=text],input[type=number]{border:1.5px solid var(--line);border-radius:var(--r-s);padding:9px 12px;background:var(--paper);width:100%}
input[type=number]{width:120px}
/* wb */
.wbgrid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}
.cgbar{position:relative;height:56px;background:var(--card);border-radius:8px;margin:18px 0 26px;border:1px solid var(--line)}
.cgbar .env{position:absolute;top:0;bottom:0;background:#DDF1E4;border-left:2px solid var(--green);border-right:2px solid var(--green)}
.cgbar .mark{position:absolute;top:-6px;bottom:-6px;width:4px;background:var(--ink);border-radius:2px}
.cgbar .lbl{position:absolute;top:60px;font-size:.78rem;color:var(--mute);transform:translateX(-50%)}
.toast{visibility:hidden;position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-weight:700;transition:transform .3s;z-index:50}
.toast.show{visibility:visible;transform:translateX(-50%) translateY(0)}
/* mobile */
@media (max-width:860px){
  .wrap{grid-template-columns:1fr}
  main{padding:18px 16px 110px}
  .hero{grid-template-columns:1fr;padding:20px}
  .hero h1{font-size:2.3rem}
  .learn,.seqgrid,.wbgrid,.exam{grid-template-columns:1fr}
  .seclist{position:static;flex-direction:row;overflow-x:auto}
  .seclist button{white-space:nowrap}
  .cockpit{grid-template-columns:1fr}
  .annun{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- shared controls ---------- */
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--paper)}
.seg button{border:0;background:transparent;padding:7px 13px;font-size:.92rem;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--blue);color:#fff;font-weight:700}
.tog{border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 13px;font-size:.9rem}
.tog.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tog.warn.on{background:var(--red);border-color:var(--red)}
.ctrl-group{margin-bottom:12px}
.ctrl-label{display:block;font-size:.8rem;color:var(--mute);margin:8px 0 4px;font-weight:700}
.slide{display:flex;align-items:center;gap:8px;font-size:.9rem}.slide input{flex:1}.slide b{width:28px;text-align:right}
input[type=range]{accent-color:var(--blue);width:100%}
.info{background:var(--card);border-radius:var(--r-m);padding:12px 14px;margin-top:12px;font-size:.94rem}
.info h3{font-size:1.15rem;margin-bottom:4px}
.gaugebox{display:flex;gap:10px;flex-wrap:wrap;background:var(--panel);border-radius:var(--r-m);padding:12px;margin:10px 0;color:#B6C4D1;font-size:.82rem;align-items:center}
.gaugebox>div{min-width:72px}
.gaugebox b{display:block;font-family:var(--f-head);font-size:1.5rem;color:#fff;line-height:1}
.gaugebox .hot b{color:#FF7A6E}
.gaugebox .lamp{min-width:84px;font-size:.85rem}

/* ---------- systems: 3D ---------- */
.sys3d{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
.viewer{position:relative;height:560px;border-radius:var(--r-l);background:radial-gradient(900px 400px at 50% 20%,#24425E,#0F2132 75%);border:1px solid var(--line);overflow:hidden;touch-action:none}
.viewer canvas{display:block;width:100%;height:100%}
.viewer-views{position:absolute;top:10px;left:10px;display:flex;gap:4px;z-index:2}
.viewer-views button{border:1px solid var(--line);background:#ffffffd9;border-radius:6px;padding:4px 9px;font-size:.82rem}
.viewer-msg{position:absolute;inset:0;display:grid;place-items:center;padding:30px;text-align:center;color:var(--ink2)}
.sys-side{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:16px}
.ctrl-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.stickpad{position:relative;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,#2A3540 0 30%,#1E2730 31%);touch-action:none;cursor:grab;border:2px solid #3A4856}
.stickpad i{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#fff;box-shadow:0 2px 8px #0006;pointer-events:none}
.stickpad span{position:absolute;color:#93A3B3;font-size:.72rem;font-weight:700}
.sp-t{top:6px;left:50%;transform:translateX(-50%)}.sp-b{bottom:6px;left:50%;transform:translateX(-50%)}.sp-l{left:8px;top:50%;transform:translateY(-50%)}.sp-r{right:8px;top:50%;transform:translateY(-50%)}
.defl-t td:last-child{font-family:var(--f-head);font-size:1.05rem;text-align:right}
.wk-k{font-family:var(--f-head);font-size:1.4rem}

/* ---------- systems: schematics ---------- */
.schem{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start}
.schem-svg{width:100%;background:var(--panel);border-radius:var(--r-l)}
.schem-side{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:16px}
.schem-svg .sl{fill:#E8EEF3;font-family:var(--f-head);font-size:17px;font-weight:600}
.schem-svg .ss{fill:#93A3B3;font-family:var(--f-body);font-size:12px}
.schem-svg .comp{cursor:pointer}
.schem-svg .comp rect,.schem-svg .comp circle.knob{fill:#2A3540;stroke:#4A5866;stroke-width:2;transition:stroke .2s,fill .2s}
.schem-svg .comp:hover rect,.schem-svg .comp.sel rect,.schem-svg .comp:focus rect{stroke:#7FB2FF}
.schem-svg .comp.active rect{stroke:#2E9E5B;fill:#24382E}
.schem-svg .comp.fail rect{stroke:var(--red);fill:#3A2422}
.schem-svg .tank{fill:#1A222A!important}
.schem-svg .fuel{fill:#3D8FD9;stroke:none!important;transition:height .3s,y .3s}
.schem-svg .fuel.low{fill:var(--red)}
.schem-svg .pipe-bg{fill:none;stroke:#3A4856;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.schem-svg .pipe-flow{fill:none;stroke:transparent;stroke-width:4;stroke-dasharray:8 12;stroke-linecap:round;stroke-linejoin:round}
.schem-svg .pipe.on .pipe-flow{stroke:#7CC4FF;animation:flow .7s linear infinite}
.schem-svg .pipe.on.ret .pipe-flow{stroke:#5A8FBF;animation-duration:1.4s}
.schem-svg .pipe.on.elec .pipe-flow{stroke:#F5D04A;stroke-dasharray:4 10}
.schem-svg .pipe.on.chg .pipe-flow{animation-direction:reverse}
.schem-svg .pipe.on.air .pipe-flow{stroke:#BFE3FF;stroke-dasharray:2 8}
@keyframes flow{to{stroke-dashoffset:-20}}
.schem-svg .wingline{stroke:#33414E;stroke-width:44;stroke-linecap:round}
.schem-svg .firewall{stroke:#E58A1F;stroke-width:3;stroke-dasharray:12 6}
.schem-svg .thin{stroke:#4A5866;stroke-width:3;fill:none}
.schem-svg .ptr{stroke:#fff;stroke-width:6;stroke-linecap:round;transition:transform .3s}
.schem-svg .bus{fill:#4A5866;cursor:pointer}
.schem-svg .cb{fill:#1A222A;stroke:#93A3B3}
.schem-svg .valve{fill:#1A222A;stroke:#93A3B3;stroke-width:3}.schem-svg .valve.open{fill:#2E9E5B;stroke:#2E9E5B}
.schem-svg .fault{opacity:0;transition:opacity .3s}.schem-svg .fault.on{opacity:1}
.schem-svg .fault circle{fill:#D23B2Fcc;stroke:#fff;stroke-width:2}
.schem-svg .fault text{fill:#fff!important;font-weight:700}

/* ---------- speed dial ---------- */
.sg-wrap{display:grid;grid-template-columns:minmax(300px,520px) 1fr;gap:24px;align-items:start}
.sg-dialbox{background:var(--panel);border-radius:22px;padding:18px;position:relative}
.dial.big{max-width:none}
.sg-bank{position:absolute;right:16px;bottom:16px;width:110px;background:#11181F;border-radius:10px;border:1px solid #3A4856;padding:4px}
.sg-panel .sg-val{font-family:var(--f-head);font-size:2.6rem;line-height:1;min-height:2.6rem}
.sg-timer{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:10px}.sg-timer i{display:block;height:100%;background:var(--amber);width:100%}
#sgTbl tr.hl{background:var(--blue-l)}#sgTbl td.hlc{font-weight:700;color:var(--blue-d)}
.choice:disabled{cursor:default}

@media (max-width:1000px){.sys3d,.schem{grid-template-columns:1fr}.viewer{height:420px}}
@media (max-width:860px){.sg-wrap{grid-template-columns:1fr}}

/* ---------- cockpit trainer ---------- */
.ck-top{margin-bottom:14px}.ck-opt{display:flex;align-items:center;gap:6px;font-size:.92rem}
.ck-wrap{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
.ck-panelbox{background:#0f1418;border-radius:var(--r-l);padding:10px}
#ckSvg{width:100%;display:block;user-select:none;touch-action:none}
#ckSvg text{pointer-events:none}
#ckSvg .hitbg{fill:transparent}
#ckSvg .pnl{fill:#2a2f35;stroke:#14181c;stroke-width:4}
#ckSvg .bezel{fill:#22262b}
#ckSvg .pedestal{fill:#1b1f23;stroke:#14181c;stroke-width:3}
#ckSvg .strip{fill:#1a1d21;stroke:#3a4047}
#ckSvg .plate{fill:#1d2125;stroke:#3a4047;stroke-width:1.5}
#ckSvg .pt{fill:#c9d1d9;font:700 9px var(--f-body);letter-spacing:.04em}
#ckSvg .ps{fill:#aab4be;font:600 8.5px var(--f-body)}
#ckSvg .plac{fill:#e8eef3;font:700 10px var(--f-body)}
#ckSvg .lt{fill:#3b2a26;font:800 9px var(--f-body)}
#ckSvg .lamp2 rect{fill:#241b19;stroke:#4a3530}
#ckSvg .lamp2.g .lt{fill:#20352a}#ckSvg .lamp2.g rect{fill:#18241d;stroke:#2f4a39}
#ckSvg .lamp2.on rect{fill:#ff4b3a;stroke:#ffb0a6;filter:drop-shadow(0 0 6px #ff4b3a)}
#ckSvg .lamp2.a.on rect{fill:#ff8a1c;stroke:#ffd0a0;filter:drop-shadow(0 0 6px #ff8a1c)}
#ckSvg .lamp2.g.on rect{fill:#36d26b;stroke:#b5f3c9;filter:drop-shadow(0 0 6px #36d26b)}
#ckSvg .lamp2.on .lt{fill:#fff}
#ckSvg .lamp2.on.dim rect{opacity:.55}
#ckSvg .btnc{fill:#111;stroke:#596169;stroke-width:2;cursor:pointer}
#ckSvg .btnc.done{stroke:#36d26b}
#ckSvg .tgl-bg{fill:#111418;stroke:#4a5158}
#ckSvg .tgl{fill:#c9d1d9;transition:x .15s,y .15s}
#ckSvg .lever{stroke:#c9d1d9;stroke-width:4;stroke-linecap:round}
#ckSvg .rim{fill:#0c0e10}#ckSvg .face{fill:#15181b;stroke:#3a4047}
#ckSvg .tick{stroke:#cfd6dd;stroke-width:1.5}
#ckSvg .garc{fill:none;stroke-width:5}#ckSvg .garc.g{stroke:#2fae5f}#ckSvg .garc.y{stroke:#e9b824}#ckSvg .garc.r{stroke:#e0402f}
#ckSvg .ndl{stroke:#ff6a3d;stroke-width:3;stroke-linecap:round;transition:transform .25s}
#ckSvg .tomark{fill:#e9b824}
#ckSvg .lcd{fill:#9fb39a}#ckSvg .lcd.lit{fill:#b9e3b0}
#ckSvg .lcdt{fill:#1b2a19;font:700 12px "Courier New",monospace}
#ckSvg .keyc{fill:#c7cdd3;stroke:#7d858c;stroke-width:2}#ckSvg .keyb{fill:#6c747b;transition:transform .2s}
#ckSvg .kp{cursor:pointer}#ckSvg .kphit{fill:transparent}#ckSvg .kpt{fill:#aab4be;font:800 8.5px var(--f-body);text-anchor:middle;pointer-events:none}
#ckSvg .kp.on .kpt{fill:#fff}#ckSvg .kp.on .kphit{fill:#2457A6}
#ckSvg .rocker{fill:#2b3035;stroke:#565e66;stroke-width:1.5;cursor:pointer;transition:fill .15s}
#ckSvg .rocker.on{fill:#3d454c}
#ckSvg .rocker.red{fill:#a8251d}#ckSvg .rocker.red.on{fill:#e0402f}
#ckSvg .rled{fill:#1f3327;pointer-events:none}#ckSvg .rled.on{fill:#36d26b;filter:drop-shadow(0 0 4px #36d26b)}
#ckSvg .rk,#ckSvg .knob,#ckSvg .ctl{cursor:pointer}
#ckSvg .kring{fill:#15181b;stroke:#4a5158;stroke-width:2}#ckSvg .kcap{fill:#c9d1d9;transition:r .15s}#ckSvg .kcap.out{fill:#ffffff;stroke:#2457A6;stroke-width:3}
#ckSvg .kt{fill:#1b1f23;font:800 7.5px var(--f-body);text-anchor:middle;pointer-events:none}
#ckSvg .selface{fill:#d7dbde;stroke:#8a9096;stroke-width:3}#ckSvg .sel{fill:#2457A6;font:800 11px var(--f-head)}
#ckSvg .selptr{fill:#c8261c;transition:transform .25s}#ckSvg .selhub{fill:#c8261c}#ckSvg .selh{fill:#fff;font:800 7px var(--f-body);text-anchor:middle}
#ckSvg .flled{fill:#2b3035;stroke:#565e66}#ckSvg .flled.on{fill:#ffd24a;filter:drop-shadow(0 0 5px #ffd24a)}
#ckSvg .fsw-up,#ckSvg .fsw-dn{fill:#3a4148;cursor:pointer}#ckSvg .fsw-up:active,#ckSvg .fsw-dn:active{fill:#5a646d}
#ckSvg .arr{fill:#c9d1d9;font-size:11px;pointer-events:none}
#ckSvg .slot{fill:#0c0e10;stroke:#3a4047}#ckSvg .thr{fill:#d7dbde;stroke:#555;cursor:grab;transition:y .05s}
#ckSvg .trb{fill:#2b3035;stroke:#565e66;cursor:pointer}#ckSvg .trb:active{fill:#4a545d}
#ckSvg .bez{fill:#0d0f11;stroke:#30363c;stroke-width:2}
#ckSvg .scr-off{fill:#050607}
#ckSvg .sky{fill:#2f7fd1}#ckSvg .gnd{fill:#8a5a2b}#ckSvg .acsym{stroke:#ffd24a;stroke-width:4;fill:none}
#ckSvg .tape{fill:#000a;stroke:#fff}#ckSvg .tapet{fill:#fff;font:700 13px var(--f-head)}
#ckSvg .scrl{fill:#ffffffaa;font:600 9px var(--f-body);text-anchor:middle}
#ckSvg .mdt{fill:#fff;font:700 12px var(--f-head)}
#ckSvg .eis{fill:#0a0c0e}#ckSvg .eisbg{fill:#14181c}#ckSvg .eisl{fill:#9aa6b1;font:600 9px var(--f-body)}#ckSvg .eisv{fill:#7cf29b;font:700 11px var(--f-head)}
#ckSvg .eisrow.warn .eisbg{fill:#a8251d}#ckSvg .eisrow.warn .eisv{fill:#fff}#ckSvg .eisrow.cau .eisv{fill:#ffd24a}
#ckSvg .eisrow.tap{cursor:pointer}#ckSvg .eisrow.tap:hover .eisbg{fill:#20262c}
#ckSvg .map{fill:#5d7d43}#ckSvg .mapl{stroke:#c9a35a;stroke-width:3;fill:none}#ckSvg .mapl2{stroke:#b05ad6;stroke-width:2;fill:none}#ckSvg .mapac{fill:#fff}
#ckSvg .cb2{fill:#0c0e10;stroke:#7d858c;stroke-width:2}#ckSvg .cbt{fill:#aab4be;font:600 6.5px var(--f-body);text-anchor:middle}
#ckSvg .rt{fill:#5b636b;font:700 10px var(--f-body)}#ckSvg .rt.lit{fill:#7cf29b}
#ckSvg .hl{animation:ckpulse 1.1s ease-in-out infinite}
@keyframes ckpulse{0%,100%{filter:drop-shadow(0 0 0 #4FA3FF)}50%{filter:drop-shadow(0 0 9px #4FA3FF) drop-shadow(0 0 3px #fff)}}
.ck-cabin{display:flex;flex-wrap:wrap;gap:6px;padding:10px 4px 2px}
.ck-cabin button{border:1.5px solid #3a4856;background:#1E2730;color:#E8EEF3;border-radius:999px;padding:7px 12px;font-size:.88rem}
.ck-cabin button.flash{background:var(--green);border-color:var(--green)}
.ck-cabin .ck-abort{border-color:var(--red);color:#ffb0a6;margin-left:auto}
.ck-cabin.hl{outline:3px solid #4FA3FF;border-radius:12px;animation:none}
.ck-side{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:16px;position:sticky;top:12px}
.ck-brief{background:var(--card);border-radius:var(--r-m);padding:10px 12px;font-size:.92rem;margin-bottom:12px}
.ck-list{padding-left:1.3em;font-size:.93rem;max-height:340px;overflow:auto;margin:8px 0}
.ck-list li{margin:4px 0;padding:3px 6px;border-radius:5px}
.ck-list li.done{color:var(--mute);text-decoration:line-through}
.ck-list li.cur{background:var(--blue-l);font-weight:700;text-decoration:none}
.ck-baro{background:var(--card);border-radius:var(--r-m);padding:10px;margin-top:10px}.ck-baro b{font-family:var(--f-head);font-size:1.4rem}
@media (max-width:1100px){.ck-wrap{grid-template-columns:1fr}.ck-side{position:static}}
main:has(#v-cockpit.on){max-width:1560px}
.ck-wrap{grid-template-columns:minmax(0,1fr) 310px}
#ckSvg:focus{outline:none}#ckSvg:focus-visible{outline:3px solid var(--blue)}
#ckSvg .eltbtn{fill:#2b3035;stroke:#565e66;cursor:pointer}#ckSvg .eltp{cursor:pointer}#ckSvg .eltp.on .eltbtn{fill:#2457A6;stroke:#7FB2FF}#ckSvg .eltp.on .kpt{fill:#fff}
.ck-cabin .ck-rot{border-color:var(--green);color:#9ff0b9}

/* =================== v5 shell & design refresh =================== */
:root{--sh-1:0 1px 2px rgba(20,32,46,.06),0 2px 8px rgba(20,32,46,.05);--sh-2:0 6px 24px rgba(20,32,46,.12);--ease:cubic-bezier(.2,.7,.2,1)}
body{background:linear-gradient(180deg,#F3F6F9 0,#EAF0F5 100%) fixed}
.surface{box-shadow:var(--sh-1);border-color:#E1E7ED}
.btn{transition:background .15s,transform .1s var(--ease),box-shadow .15s;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.btn:active{transform:translateY(1px)}
.btn.danger{color:var(--red);border-color:var(--red)}
.chip{transition:border-color .15s,background .15s}
.chip:hover{border-color:#AEBCCA}
input,select,textarea{border:1.5px solid var(--line);border-radius:var(--r-s);padding:8px 10px;background:#fff;width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(36,87,166,.15)}
textarea{font:inherit;resize:vertical;margin:10px 0}
.view.on{animation:viewin .28s var(--ease)}
@keyframes viewin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mode{transition:transform .18s var(--ease),box-shadow .18s}
.mode:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}

/* sidebar groups */
.navgrp{font:600 .72rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:#7F93A8;padding:14px 10px 6px}
.xpbox{margin-top:10px}
.topbar,.bottombar,.scrim{display:none}

/* tabs */
.tabs{display:inline-flex;gap:4px;background:#E2E9F0;padding:4px;border-radius:12px;margin:6px 0 16px;flex-wrap:wrap}
.tab{border:0;background:transparent;padding:7px 14px;border-radius:9px;font-weight:700;color:var(--ink2);transition:background .15s,color .15s}
.tab.on{background:#fff;color:var(--blue-d);box-shadow:var(--sh-1)}
.chipgrp{display:flex;flex-wrap:wrap;gap:6px;align-items:center;width:100%;margin-bottom:6px}
.chipgrp-h{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:700;min-width:120px}
#clChips{flex-direction:column;align-items:flex-start}
.notebox{margin-top:10px}

/* planning sheet */
.sheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr);gap:16px;align-items:start}
.sheet-col{display:flex;flex-direction:column;gap:14px}
.pfs{border:1px solid #E1E7ED;border-radius:var(--r-l);background:#fff;padding:12px 14px 14px;margin:0;box-shadow:var(--sh-1)}
.pfs legend{font-family:var(--f-head);font-weight:700;font-size:1.15rem;padding:0 6px}
.pf{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:8px;margin:6px 0;font-size:.92rem}
.pf>span:first-child{color:var(--ink2)}
.pfi{display:flex;align-items:center;gap:6px}.pfi em{font-style:normal;color:var(--mute);font-size:.82rem;min-width:28px}
.pf input,.pf select{padding:6px 8px}
.sheet-out{background:#fff;border:1px solid #E1E7ED;border-radius:var(--r-l);padding:16px;box-shadow:var(--sh-1);position:sticky;top:16px}
.sheet-out h3{margin:16px 0 6px}
.sheet-out .t td,.sheet-out .t th{padding:5px 8px;font-size:.88rem}
.sheet-out .t th.ok{color:var(--green)} .sheet-out .t th.bad,.sheet-out td.bad{color:var(--red)}
.go{font-family:var(--f-head);font-size:1.35rem;font-weight:700;padding:10px 14px;border-radius:var(--r-m);color:#fff}
.go.ok{background:var(--green);color:#fff}.go.no{background:var(--red);color:#fff}
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.8rem;font-weight:700;margin:2px 4px 2px 0}
.badge.ok{background:#E2F4EA;color:#1E7444}.badge.no{background:#FBE5E3;color:#A42A20}
.cgbar.small{height:30px;margin:10px 0}
.cgbar .mark.land{background:var(--blue)!important;opacity:.6}
@media (max-width:1200px){.sheet{grid-template-columns:1fr 1fr}.sheet-out{grid-column:1/-1;position:static}}
@media (max-width:700px){.sheet{grid-template-columns:1fr}}

/* callouts */
.co-card .co-ph{display:inline-block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--amber);margin:4px 0}
.recite{background:var(--blue-l);border-radius:var(--r-m);padding:14px 16px;margin:14px 0;line-height:1.7}
.mic.on{background:var(--red);animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(210,59,47,.18)}}

/* exam */
.examintro,.acctgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.acctgrid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.acctgrid .pf{grid-template-columns:1fr}
.ticks{padding-left:1.1em}.ticks li{margin:6px 0}
.exbar{display:flex;align-items:center;gap:14px;margin-bottom:12px;position:sticky;top:0;background:rgba(243,246,249,.92);backdrop-filter:blur(8px);padding:8px 0;z-index:5}
.exdots{display:flex;flex-wrap:wrap;gap:4px;flex:1}
.exdot{width:14px;height:14px;border-radius:4px;border:1.5px solid #B8C6D4;background:#fff;padding:0}
.exdot.done{background:var(--blue);border-color:var(--blue)}.exdot.cur{outline:2px solid var(--yellow);outline-offset:1px}
.exclock{font:700 1.4rem var(--f-head);min-width:64px;text-align:right}.exclock.low{color:var(--red)}
.choice.picked{border-color:var(--blue);background:var(--blue-l);font-weight:700}
.result{display:flex;gap:22px;align-items:center}
.result .big{font:700 3.4rem/1 var(--f-head);width:130px;height:130px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.result.pass .big{background:var(--green)}.result.fail .big{background:var(--red)}
.rev{margin:8px 0}.empty{text-align:center;padding:36px}

/* certificate */
.certcard{display:grid;gap:14px;margin-bottom:24px}
.cert-face{position:relative;background:#FFFDF7;border-radius:var(--r-l);padding:40px 36px;text-align:center;box-shadow:var(--sh-2);border:1px solid #EADFC4;overflow:hidden}
.cert-face::before{content:"";position:absolute;inset:10px;border:2px solid #D9C48F;border-radius:10px;pointer-events:none}
.cert-face::after{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--blue) 0 60%,var(--red) 60%)}
.cert-k{font:600 .85rem var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:#8A7442}
.cert-n{font:700 2.6rem/1.1 var(--f-head);margin:14px 0 6px}
.cert-t{font-size:1.1rem;color:var(--ink2)}.cert-m{margin-top:16px;color:var(--mute)}.cert-c{font-family:ui-monospace,monospace;margin-top:6px;color:var(--mute);font-size:.9rem}
.cert-act{display:flex;flex-wrap:wrap;gap:8px}
.btn.li{background:#0A66C2}.btn.li:hover{background:#004182}

/* mobile shell */
@media (max-width:860px){
  .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:35;height:54px;padding:0 10px;background:rgba(20,32,46,.94);backdrop-filter:blur(10px);color:#fff}
  .topbar .iconbtn{color:#fff;background:transparent;border:0;width:40px;height:40px;display:grid;place-items:center}
  .topbar svg{width:22px;height:22px}
  .tb-title{flex:1;font:700 1.25rem var(--f-head)}
  .tb-acct{color:#fff;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#2A3E55}
  .tb-acct svg{width:20px;height:20px}
  .tb-acct.in{background:var(--blue)}.tb-acct.in svg{display:none}.tb-acct.in::after{content:attr(data-ini);font-weight:700}
  .scrim{display:block;position:fixed;inset:0;background:rgba(10,16,24,.45);z-index:45}
  .scrim[hidden]{display:none!important}
  .bottombar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .bottombar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.7rem;color:var(--ink2);text-decoration:none;padding:6px 0;border-radius:10px}
  .bottombar a svg{width:22px;height:22px}
  .bottombar a.on{color:var(--blue);font-weight:700;background:var(--blue-l)}
  main{padding:16px 14px 96px}
  .examintro{grid-template-columns:1fr}
  .result{flex-direction:column;text-align:center}
  .cert-face{padding:30px 18px}.cert-n{font-size:2rem}
  .pf{grid-template-columns:1fr 1fr}
  .chipgrp-h{min-width:100%}
}
a.btn,.tb-acct{text-decoration:none}

/* ---------- M&B and Performance Data Sheet: 2-page A4 print ---------- */
#wbPrint{display:none}
@page{size:A4;margin:12mm 14mm 10mm}
@media print{
  html:has(body.print-mb){background:#fff!important;color-scheme:light}
  body.print-mb{background:#fff!important;color-scheme:light}
  body.print-mb>*:not(#wbPrint){display:none!important}
  body.print-mb #wbPrint{display:block}
  #wbPrint{font-family:Helvetica,Arial,sans-serif;color:#000;font-size:10.5pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mb-page{position:relative;height:271mm;break-after:page;page-break-after:always;overflow:hidden}
  .mb-page:last-child{break-after:auto;page-break-after:auto}
  #wbPrint table{border-collapse:collapse}
  #wbPrint td,#wbPrint th{border:.6pt solid #000;padding:3pt 6pt}
  .mb-head{width:100%;margin-bottom:6mm}
  .mb-head td{height:8mm}
  .mb-logo{width:26%;text-align:left}.mb-logo span{vertical-align:middle;display:inline-block}
  .mb-logo b{display:block;font-size:13pt;line-height:1}.mb-logo small{font-size:8.5pt;color:#333}
  .mb-stripe{width:4pt;height:9mm;border-radius:2pt;margin-right:6pt;background:linear-gradient(#2457A6 0 60%,#D23B2F 60%)}
  .mb-title{background:#B4C6E7;text-align:center;font-size:11pt}
  .mb-ctl{width:21%;font-size:8.5pt}
  .mb-arms{margin:0 auto 6mm;width:64%;font-family:"Courier New",monospace;font-size:11.5pt;text-align:center}
  .mb-arms th{background:#D9D9D9}.mb-arms td{padding:4pt}
  .mb-intro{font-family:"Times New Roman",serif;text-align:center;font-size:11.5pt;margin:0 0 4mm}
  .mb-steps{font-family:"Times New Roman",serif;font-size:11pt;margin:0 0 6mm 7mm;padding-left:8mm}
  .mb-cog{width:100%;font-size:10.5pt}
  .mb-cog th{font-weight:700;text-align:center;height:9mm}.mb-cog th.mb-cap{height:10mm;vertical-align:top}
  .mb-cog td{height:6.5mm}.mb-cog td:not(:first-child){text-align:center}.mb-cog tr.tall td{height:15mm}
  .mb-cog td:first-child{width:36%}
  .mb-note{font-size:9pt;margin:2mm 0 4mm}
  .mb-range{width:86%;margin:0 auto;font-size:12.5pt}.mb-range th{background:#D9D9D9;height:8mm}.mb-range th:first-child,.mb-range td:first-child{text-align:left}
  .mb-range td{text-align:center;height:8mm}
  .mb-sheet{width:100%;font-size:10.5pt;line-height:1.15;table-layout:fixed}
  .mb-sheet td,.mb-sheet th{height:7.3mm;padding:0 6pt}
  .mb-sheet td{text-align:center}
  .mb-sheet th.lab{background:#BFBFBF;font-weight:400;text-align:right}.mb-sheet th.lab.l{text-align:left}
  .mb-sheet th.g{background:#BFBFBF;font-weight:400}.mb-sheet th.sec{background:#BFBFBF;font-weight:700}
  .mb-sheet tr.tall td,.mb-sheet tr.tall th{height:11mm}
  .mb-sheet .ind{padding-left:16pt}
  .mb-sheet .eq{font-size:7.5pt;color:#333}
  .mb-foot{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr;font-size:7.5pt}.mb-foot span:nth-child(2){text-align:center}
}


/* =================== Flight Deck theme (v6) =================== */
body{background:radial-gradient(1200px 600px at 80% -10%,#16324A 0,transparent 60%),var(--night) fixed;color:var(--ink)}
h1,h2,h3{font-family:var(--f-head);letter-spacing:0}
h2{font-size:2.1rem}
a{color:var(--blue)}
.wrap{display:block;min-height:100vh}
main{max-width:1280px;margin:0 auto;padding:28px 32px 90px}
.surface,.block,.pfs,.sheet-out,.sys-side,.schem-side,.ck-side{background:var(--paper);border:1px solid var(--line);box-shadow:none}
.btn{background:var(--blue);color:var(--on-accent);border-radius:8px;font-weight:600;box-shadow:none}
.btn:hover{background:var(--blue-d)}
.btn.ghost{background:transparent;color:var(--blue);border:1px solid var(--blue)}
.btn.ghost:hover{background:var(--blue-l)}
.btn.danger{color:var(--red);border-color:var(--red)}
.chip,.tog,.iconbtn,.seg,.choice,.tile,.boxes span{background:var(--well);border-color:var(--line);color:var(--ink)}
.chip:hover{border-color:var(--blue)}
.chip.on{background:var(--blue-l);border-color:var(--blue);color:var(--blue)}
.seg button{color:var(--ink2);border-color:var(--line)}
.seg button.on{background:var(--blue);color:var(--on-accent)}
.tog.on{background:var(--blue);border-color:var(--blue);color:var(--on-accent)}
.tag{background:var(--blue-l);color:var(--blue)}
.ok{color:var(--green)}.bad{color:var(--red)}
.lede{color:var(--ink2)}
input,select,textarea,input[type=text],input[type=number]{background:var(--well);border:1px solid var(--line);color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,211,230,.18)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.expl,.info,.ck-brief,.ck-baro,.cgbar{background:var(--well)}
.choice:hover{border-color:var(--blue)}
.choice.right{border-color:var(--green);background:rgba(61,220,132,.12)}
.choice.wrong{border-color:var(--red);background:rgba(240,82,74,.12)}
.choice.picked{border-color:var(--blue);background:var(--blue-l)}
.tile.done{background:rgba(61,220,132,.12);border-color:var(--green)}
.block li.speaking{background:rgba(255,210,74,.16)}
.warnbox{background:rgba(240,82,74,.10);border-left-color:var(--red)}
.notebox{background:rgba(214,58,249,.08);border-left:4px solid var(--mag);padding:10px 14px;border-radius:6px}
.seclist button{color:var(--ink2)}
.seclist button.on{background:var(--paper);color:var(--ink);box-shadow:inset 3px 0 0 var(--blue)}
.player{background:var(--glass);color:var(--ink);border:1px solid var(--line)}
.player .btn{background:var(--blue);color:var(--on-accent)}
#stopBtn{color:var(--ink)!important;border-color:var(--line)!important}
#voiceSel{color:var(--ink)!important}
.face.front{background:var(--paper)}.face.back{background:var(--glass);color:var(--ink)}
.toast{background:var(--blue);color:var(--on-accent)}
.tabs{background:var(--well);border:1px solid var(--line)}
.tab{color:var(--ink2)}.tab.on{background:var(--glass);color:var(--blue);box-shadow:none}
.cgbar .env{background:rgba(61,220,132,.18)}
.badge.ok{background:rgba(61,220,132,.16);color:var(--green)}.badge.no{background:rgba(240,82,74,.16);color:var(--red)}
.go.ok{background:#1E7A4A}.go.no{background:#A3302A}
.sheet-out .t th.ok{color:var(--green)}
.t th{background:var(--well);color:var(--ink)}.t td,.t th{border-color:var(--line)}
.exbar{background:rgba(13,27,42,.92)}
.exdot{background:var(--well);border-color:var(--line)}.exdot.done{background:var(--blue);border-color:var(--blue)}
.viewer-views button{background:rgba(10,21,32,.85);color:var(--ink);border-color:var(--line)}
.mode{background:var(--paper);border-color:var(--line)}
.spdbtns button{background:var(--well);color:var(--ink2);border:1px solid var(--line)}
.spdbtns button.on{background:var(--blue);color:var(--on-accent);border-color:var(--blue)}
.readout{background:var(--well);border:1px solid var(--line)}
.lamp{border-color:var(--line)}
.src{color:var(--mute)}
.muted{color:var(--mute)}
/* certificate stays on paper */
.cert-face{background:#F6F8FA;color:#0D1B2A;border:0;border-top:6px solid var(--blue)}
.cert-face::after{display:none}.cert-face::before{border-color:#C9D6E2}
.cert-k{color:#516579}.cert-t{color:#33475B}.cert-m,.cert-c{color:#516579}
.btn.li{background:#0A66C2;color:#fff}

/* ---------- header ---------- */
.deck-head{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:22px;padding:10px 32px;background:rgba(13,27,42,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.deck-head .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);padding:0}
.brand-ring{width:14px;height:14px;border:2px solid var(--blue);border-radius:50%;box-shadow:0 0 0 4px rgba(47,211,230,.15);flex:none}
.deck-head .brand b{font:700 1.2rem/1 var(--f-head);color:var(--ink);display:block}
.deck-head .brand small{display:block;color:var(--mute);font-size:.72rem;margin-top:2px}
nav.side{all:unset;display:flex;align-items:center;gap:4px}
nav.side .grp{position:relative}
nav.side .grp-b,nav.side .top{all:unset;cursor:pointer;display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:8px;color:var(--ink2);font:500 .95rem var(--f-body)}
nav.side .top svg{display:none}
nav.side .grp-b:hover,nav.side .top:hover,nav.side .grp:focus-within .grp-b{color:var(--ink);background:rgba(255,255,255,.05)}
nav.side .top.on,nav.side .grp.has-on .grp-b{color:var(--blue)}
nav.side .chev{width:14px;height:14px;opacity:.7}
nav.side .menu{position:absolute;left:0;top:calc(100% + 6px);min-width:300px;background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 24px 60px rgba(0,0,0,.45);display:none}
nav.side .grp:hover .menu,nav.side .grp:focus-within .menu{display:block}
nav.side .grp:hover::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px}
nav.side .menu a{display:grid;grid-template-columns:22px 1fr;column-gap:12px;align-items:center;padding:9px 10px;border-radius:8px;color:var(--ink);text-decoration:none}
nav.side .menu a svg{width:20px;height:20px;color:var(--blue);grid-row:span 2}
nav.side .menu a span{font-weight:600}
nav.side .menu a em{font-style:normal;color:var(--mute);font-size:.82rem;grid-column:2}
nav.side .menu a:hover,nav.side .menu a.on{background:rgba(47,211,230,.10)}
nav.side .sheet-extra{display:none}
nav.side a.on::before{display:none}
.head-tools{margin-left:auto;display:flex;align-items:center;gap:12px}
.xpchip{display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:baseline;padding:5px 12px;border:1px solid var(--line);border-radius:999px;font-size:.76rem;color:var(--mute)}
.xpchip strong{font:700 1rem var(--f-head);color:var(--mag)}
.xpchip .xpbar{grid-column:1/-1;height:3px;background:var(--line);border-radius:2px;margin-top:3px;overflow:hidden}
.xpchip .xpbar i{display:block;height:100%;background:var(--mag)}
.auth-btns{display:flex;gap:8px}
.acct{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:600;padding:4px 10px 4px 4px;border-radius:999px;border:1px solid var(--line)}
.acct .av{width:28px;height:28px;border-radius:50%;background:var(--blue);color:var(--on-accent);display:grid;place-items:center;font-weight:700}
.acct.on{border-color:var(--blue)}
.topbar,.bottombar,.scrim{display:none}

/* ---------- home ---------- */
.deck-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:36px 0 48px}
.deck-hero h1{font:800 clamp(2.4rem,5vw,4.3rem)/.98 var(--f-head);margin:0 0 18px;color:var(--ink)}
.deck-hero p{color:var(--ink2);font-size:1.12rem;max-width:46ch;margin:0 0 26px}
.readouts{display:flex;gap:30px;margin-top:26px;font:600 .9rem var(--f-head);color:var(--mute)}
.readouts b{display:block;font-size:1.7rem;color:var(--mag);line-height:1.1}
.bezel-g3x{background:linear-gradient(#22384D,#14263A);border-radius:18px;padding:14px;box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.bezel-g3x .scr{border-radius:8px;overflow:hidden;background:#000;aspect-ratio:7/5}
.bezel-g3x .pfd{display:block;width:100%;height:100%}
.softkeys{display:flex;justify-content:space-between;padding:10px 6px 2px}
.softkeys span{font:600 .72rem var(--f-head);color:var(--mute);padding:4px 10px;border:1px solid var(--line);border-radius:4px}
.softkeys span.on{color:var(--green);border-color:var(--green)}
.home-h{font-size:2rem;margin:0 0 6px}
.seats{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-bottom:56px}
.seat{grid-column:span 4;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px;text-decoration:none;color:var(--ink);position:relative;min-height:150px;transition:border-color .15s}
.seat:hover{border-color:var(--blue)}
.seat.big{grid-column:span 8;grid-row:span 2;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end;background:linear-gradient(160deg,var(--glass),var(--paper))}
.seat h3{font-size:1.4rem;margin:0 0 6px}.seat p{color:var(--ink2);margin:0;font-size:.95rem}
.seat .k{position:absolute;top:16px;right:16px;font:600 .8rem var(--f-head);color:var(--blue)}
.mini-rk{display:flex;gap:10px;background:#071019;border:1px solid var(--line);border-radius:10px;padding:16px 14px 22px}
.mini-rk i{width:30px;height:52px;border-radius:5px;background:#2B3640;position:relative;box-shadow:inset 0 -20px 0 #1A2229}
.mini-rk i.on{box-shadow:inset 0 20px 0 #1A2229}
.mini-rk i::after{content:"";position:absolute;left:12px;bottom:-12px;width:6px;height:6px;border-radius:50%;background:#333}
.mini-rk i.on::after{background:var(--green);box-shadow:0 0 8px var(--green)}
.home-split{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:center;background:var(--well);border:1px solid var(--line);border-radius:16px;padding:32px;margin-bottom:56px}
.dialbox .dial{width:100%;max-width:380px}
.home-cert{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.cert-face.mini{padding:30px;text-align:left}
.cert-face.mini .cert-n{font-size:2rem;margin:8px 0 4px}
ol.steps{list-style:none;counter-reset:s;padding:0;margin:14px 0 22px;display:grid;gap:12px}
ol.steps li{counter-increment:s;display:flex;gap:12px;color:var(--ink2)}
ol.steps li::before{content:counter(s);font:700 1.1rem var(--f-head);color:var(--blue);min-width:20px}
.gate{text-align:left;max-width:640px}
.gate-ic{width:46px;height:46px;border-radius:12px;background:var(--blue-l);color:var(--blue);display:grid;place-items:center;margin-bottom:12px}
.gate-ic svg{width:24px;height:24px}

@media (max-width:1080px){.deck-hero,.home-cert{grid-template-columns:1fr}.home-split{grid-template-columns:1fr}.seat,.seat.big{grid-column:span 6}.seat.big{grid-row:auto;grid-template-columns:1fr}.xpchip{display:none}}
@media (max-width:860px){
  main{padding:16px 14px 96px}
  .deck-head{display:contents}
  .deck-head .brand,.head-tools{display:none}
  .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:35;height:54px;padding:0 10px;background:rgba(13,27,42,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);color:var(--ink)}
  .topbar .iconbtn{color:var(--ink);background:transparent;border:0}
  .tb-acct{background:var(--glass);color:var(--ink)}
  .tb-acct.in{background:var(--blue);color:var(--on-accent)}
  nav.side{position:fixed;left:0;top:0;bottom:0;width:min(84vw,320px);z-index:50;display:flex;flex-direction:column;align-items:stretch;gap:2px;overflow-y:auto;background:var(--deck);border-right:1px solid var(--line);padding:16px 12px;transform:translateX(-105%);transition:transform .25s ease}
  body.menu-open nav.side{transform:none}
  nav.side .grp-b{pointer-events:none;color:var(--mute);font:600 .72rem var(--f-body);letter-spacing:.08em;padding:14px 10px 4px}
  nav.side .grp-b .chev{display:none}
  nav.side .menu{position:static;display:block;min-width:0;background:none;border:0;box-shadow:none;padding:0}
  nav.side .menu a em{display:none}
  nav.side .menu a{grid-template-columns:22px 1fr}
  nav.side .menu a svg{grid-row:auto}
  nav.side .top{padding:10px}
  nav.side .top svg{display:block;width:20px;height:20px;color:var(--blue)}
  nav.side .grp.single{margin-top:8px}
  nav.side .sheet-extra{display:block;margin-top:auto;border-top:1px solid var(--line);padding-top:8px}
  nav.side .sheet-extra a{display:flex;gap:12px;align-items:center;padding:10px;color:var(--ink);text-decoration:none;border-radius:8px}
  nav.side .sheet-extra svg{width:20px;height:20px;color:var(--blue)}
  .bottombar{display:flex;background:rgba(13,27,42,.96);border-top:1px solid var(--line)}
  .bottombar a{color:var(--mute)}
  .bottombar a.on{color:var(--blue);background:var(--blue-l)}
  .scrim{display:block}
  .seat,.seat.big{grid-column:span 12}
  .home-split{padding:20px}
}
@media (max-width:1100px){.ck-wrap{grid-template-columns:1fr}.ck-side{position:static}}

/* ---------- cockpit: realistic materials (v6) ---------- */
.ck-panelbox{background:#0a0b0c;border:1px solid var(--line);border-radius:var(--r-l);padding:0;overflow:hidden}
#ckSvg .pnl{fill:url(#ckFace);stroke:#0c0d0e;stroke-width:3}
#ckSvg .strip{fill:#141618;stroke:#000;stroke-width:1.5}
#ckSvg .plate{fill:#1b1e21;stroke:#0b0c0d;stroke-width:1.5}
#ckSvg .plate.guard{fill:#151719;stroke:#3a3f44}
#ckSvg .bez{fill:url(#ckBez);stroke:#060707;stroke-width:2}
#ckSvg .skey{fill:#1c1f22;stroke:#33383d}
#ckSvg .pt{fill:#eef1f3;font:700 9px Arial,sans-serif;letter-spacing:.05em}
#ckSvg .ps{fill:#d9dee2;font:700 8px Arial,sans-serif;letter-spacing:.03em}
#ckSvg .brandt{fill:#9aa1a7;font:700 8px Arial,sans-serif;letter-spacing:.2em;text-anchor:middle}
#ckSvg .plaq{fill:#d9dde0;stroke:#8e959b}
#ckSvg .plac{fill:#111;font:700 9px Arial,sans-serif;text-anchor:middle}
#ckSvg .plac2{fill:#333;font:600 8px Arial,sans-serif;text-anchor:middle}
#ckSvg .plw{fill:#fff;font:700 7.5px Arial,sans-serif;text-anchor:middle}
#ckSvg .regp{fill:#111;stroke:#9aa1a7;stroke-width:1.5}#ckSvg .regt{fill:#fff;font:800 15px Arial,sans-serif;text-anchor:middle;letter-spacing:.06em}
#ckSvg .rocker{fill:url(#ckRk);stroke:#0b0c0d;stroke-width:1.5}
#ckSvg .rocker.on{fill:url(#ckRkOn)}
#ckSvg .rocker.red{fill:url(#ckRed)}#ckSvg .rocker.red.on{fill:url(#ckRedOn)}
#ckSvg .rled{fill:#1d2a22}#ckSvg .rled.on{fill:#4cff86;filter:drop-shadow(0 0 4px #4cff86)}
#ckSvg .face{fill:#0e1011;stroke:#2f3438}#ckSvg .rim{fill:#060707}
#ckSvg .tick{stroke:#f2f4f5}
#ckSvg .ndl{stroke:#fff;stroke-width:2.6}
#ckSvg .cb2{fill:#0b0c0d;stroke:#5a6066;stroke-width:2}#ckSvg .cbc{fill:#c9ced2;pointer-events:none}
#ckSvg .cbt{fill:#d9dee2;font:700 6.5px Arial,sans-serif;text-anchor:middle}
#ckSvg .kring{fill:#101214;stroke:#2b2f33;stroke-width:2}
#ckSvg .kcap{fill:url(#ckKnob);stroke:#000}#ckSvg .kcap.chrome{fill:url(#ckChrome)}
#ckSvg .kcap.out{stroke:#2FD3E6;stroke-width:3}
#ckSvg .kt{fill:#e6e9eb;font:800 7px Arial,sans-serif}
#ckSvg .kcap.chrome+text+.kt,#ckSvg .knob .kcap.chrome~.kt{fill:#111}
#ckSvg .lcd{fill:#06120c}#ckSvg .lcd.lit{fill:#0a2416}
#ckSvg .lcd.cmp{fill:#e9e2c9}
#ckSvg .lcdt{fill:#3dff8a;font:700 12px "Courier New",monospace;text-anchor:middle}
#ckSvg #ck-cmp-t{fill:#111}
#ckSvg .scrbar{fill:#fff;font:600 8.5px Arial,sans-serif}
#ckSvg .tapet{fill:#fff;font:700 14px Arial,sans-serif}
#ckSvg .mdt{fill:#fff;font:700 10px Arial,sans-serif}
#ckSvg .mapt{fill:#fff;font:700 10px Arial,sans-serif}
#ckSvg .eis{fill:#05080a}#ckSvg .eisbg{fill:#0d1215}#ckSvg .eisl{fill:#9fb3a8;font:700 8.5px Arial,sans-serif}#ckSvg .eisv{fill:#4cff86;font:700 11px Arial,sans-serif}
#ckSvg .selptr{fill:#c62d22}#ckSvg .selhub{fill:#c62d22;stroke:#7a1a14}
#ckSvg .sel{fill:#111;font:800 10px Arial,sans-serif;text-anchor:middle}
#ckSvg .thr{fill:url(#ckChrome);stroke:#333}
#ckSvg .slot{fill:#050606;stroke:#2b2f33}
#ckSvg .trb{fill:#2a2e32;stroke:#000}
#ckSvg .lamp2 rect{fill:#1b1311;stroke:#000}
#ckSvg .lamp2 .lt{fill:#5a3c34;font:800 8.5px Arial,sans-serif}
#ckSvg .lamp2.g rect{fill:#101a13}#ckSvg .lamp2.g .lt{fill:#2c4a36}
#ckSvg .eltbtn{fill:#26292c;stroke:#000}#ckSvg .eltp.on .eltbtn{fill:#2457A6}
#ckSvg .kpt{fill:#e6e9eb;font:800 8px Arial,sans-serif}
#ckSvg .tgl-bg{fill:#0b0c0d;stroke:#3a3f44}#ckSvg .tgl{fill:url(#ckChrome)}
.ck-cabin{background:#0f1214;border-top:1px solid #1e2226;padding:10px;display:flex;flex-wrap:wrap;gap:6px}
.ck-cabin button{background:#1a1e22;border:1px solid #2c3238;color:var(--ink)}
.ck-cabin button:hover{border-color:var(--blue)}
@media (max-width:860px){
  nav.side .top{color:var(--ink);font:600 1rem var(--f-body);display:flex;gap:12px;padding:9px 10px}
  nav.side .grp.single{margin-top:0}
  .ck-panelbox{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #ckSvg{min-width:920px}
  .ck-panelbox::before{content:"Swipe sideways to see the whole panel";display:block;padding:6px 10px;color:var(--mute);font-size:.8rem}
}