/* FALCONS.AI Model Surgeon — application styles.
   Split from index.html at V4.0 (debt paydown): markup in index.html,
   styles here, logic in app.js. */

  :root{--cyan:#33E0FF;--amber:#FFB454;--mint:#7CF7C4;--magenta:#FF4438; --errsoft:#FF6B66;--violet:#B78CFF;
    --steel:#8FA3B8;--ink:#D9E6F2;--dim:#7A8FA6;--line:rgba(51,224,255,.16);
    --bg:#070B14;--panel:#0C1220;--panel2:#0A0F1C;
    --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;}
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:
      radial-gradient(1100px 560px at 72% -8%,rgba(51,224,255,.06),transparent 60%),
      radial-gradient(800px 480px at 8% 18%,rgba(255,61,174,.05),transparent 55%),var(--bg);
    color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1.5;overflow:hidden}

  /* V6.5: tracer rotates a painted layer via transform (compositor-only);
     the old version animated a conic-gradient angle, re-rasterizing the
     whole frame every frame — 99% iGPU on an EMPTY page. */
  .shell{position:fixed;inset:14px;background:rgba(9,13,24,.72);border:1px solid rgba(94,114,136,.28);
    border-radius:14px;display:flex;flex-direction:column;padding:18px 22px 14px;backdrop-filter:blur(3px)}
  .tracer{position:absolute;inset:-3px;border-radius:17px;padding:3px;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    overflow:hidden;pointer-events:none}
  .tracer::before{content:'';position:absolute;left:50%;top:50%;
    width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;
    background:conic-gradient(from 0deg,transparent 0deg 314deg,
      rgba(255,32,26,.05) 322deg,rgba(255,42,34,.7) 342deg,
      rgba(255,72,60,.95) 350deg,rgba(255,32,26,.1) 358deg,transparent 360deg);
    animation:sweep 10s linear infinite;will-change:transform}
  @keyframes sweep{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion: reduce){ .tracer::before{animation:none} }

  /* ---------- header ---------- */
  /* rc20 OPERATOR DIRECTIVE: logo + title compacted and top-aligned
     with the tray buttons; the ~70px reclaimed flows to the stage
     automatically (flex column). */
  .hd{display:flex;align-items:flex-start;gap:14px;flex:0 0 auto}
  .hd .brand{display:flex;align-items:flex-start;gap:12px}
  .hd .brand img{height:64px}
  .hd h1{margin:0;font-size:16px;font-weight:700;letter-spacing:.28em;text-transform:uppercase}
  .hd h1 small{color:var(--dim);letter-spacing:.28em}
  .hd .ul{display:block;width:88px;height:3px;background:var(--amber);border-radius:2px;margin-top:5px}
  .badges{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 8px}
  .b{display:inline-block;padding:5px 13px;border-radius:8px;font:600 11px var(--mono);
    letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--dim);color:var(--dim)}
  .b.amber{border-color:var(--amber);color:var(--amber)}
  .b.mint{border-color:var(--mint);color:var(--mint)}
  .b.magenta{border-color:var(--magenta);color:var(--magenta)}
  .b.cyan{border-color:var(--cyan);color:var(--cyan)}
  .b.violet{border-color:var(--violet);color:var(--violet)}
  .b.click{cursor:pointer}
  .b.click:hover{filter:brightness(1.35)}
  /* audit find (V6.36): JS has toggled .off since the push modal
     shipped, but the class was never defined — the disable was a
     no-op. Now real. */
  .off{opacity:.45;pointer-events:none;filter:saturate(.5)}

  /* ---------- main grid ---------- */
  .main{flex:1;display:grid;grid-template-columns:1fr 340px;gap:16px;min-height:0;
    transition:grid-template-columns .28s ease}
  .main.collapsed{grid-template-columns:1fr 30px}
  .sidewrap{position:relative;display:flex;min-height:0}
  .sidetoggle{flex:0 0 22px;display:flex;align-items:center;justify-content:center;cursor:pointer;
    border:1px solid rgba(94,114,136,.35);border-radius:8px;color:var(--dim);font-size:11px;
    margin-right:8px;user-select:none;transition:.15s}
  .sidetoggle:hover{color:var(--cyan);border-color:var(--cyan)}
  .main.collapsed .side{display:none}
  .main.collapsed .sidetoggle{margin-right:0}
  .stage{position:relative;border:1px solid rgba(94,114,136,.3);border-radius:10px;overflow:hidden;
    background:#04070C}
  .scan{position:absolute;inset:0;pointer-events:none;z-index:1;
    background:repeating-linear-gradient(0deg,rgba(151,196,220,.028) 0 1px,transparent 1px 4px)}
  #view3d{position:absolute;inset:0}
  .hint{position:absolute;right:12px;bottom:10px;color:var(--dim);font-size:11px;text-align:right;pointer-events:none}

  /* ---------- upload overlay ---------- */
  .drop{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;z-index:5;background:rgba(7,11,20,.55);transition:.25s}
  .drop.hide{opacity:0;pointer-events:none}
  .drop .zone{border:1px dashed rgba(51,224,255,.4);border-radius:14px;padding:44px 60px;text-align:center;
    cursor:pointer;transition:.2s;background:rgba(12,18,32,.6)}
  .drop .zone:hover,.drop .zone.over{border-color:var(--cyan);box-shadow:0 0 40px rgba(51,224,255,.15)}
  .drop .zone .big{font-size:15px;letter-spacing:.2em;color:var(--cyan);text-transform:uppercase;margin-bottom:8px}
  .drop .zone .fmt{color:var(--dim);font-size:11px;letter-spacing:.08em}
  .drop .prog{width:340px;height:4px;border-radius:2px;background:rgba(94,114,136,.25);overflow:hidden;display:none}
  .drop .prog i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),var(--magenta));transition:width .2s}
  .drop .stat{color:var(--dim);font-size:11px;letter-spacing:.1em;min-height:16px}
  /* T49: cap refusal renders LARGER + RED (user styling directive) */
  .drop .stat.refusal{color:var(--magenta);font-size:14px;font-weight:600;letter-spacing:.04em;line-height:1.45}
  /* T51: drop-area controls genuinely lock while a load is in flight */
  .lockout{pointer-events:none;opacity:.45}

  /* ---------- library drawer ---------- */
  .lib{position:absolute;left:12px;top:12px;bottom:12px;width:300px;z-index:7;display:flex;flex-direction:column;
    background:rgba(10,15,28,.94);border:1px solid var(--line);border-radius:12px;padding:14px;
    transform:translateX(-330px);transition:transform .28s}
  .lib.open{transform:none}
  .lib h2{margin:0 0 10px;font-size:12px;letter-spacing:.22em;color:var(--cyan);text-transform:uppercase}
  .lib input{background:var(--panel2);border:1px solid rgba(94,114,136,.35);border-radius:8px;color:var(--ink);
    font:12px var(--mono);padding:8px 10px;width:100%;outline:none;margin-bottom:10px}
  .lib input:focus{border-color:var(--cyan)}
  .cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
  .cats span{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:6px;
    border:1px solid rgba(94,114,136,.4);color:var(--dim);cursor:pointer}
  .cats span.on{color:var(--bg);font-weight:700}
  .complist{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px}
  .comp{border:1px solid rgba(94,114,136,.3);border-radius:9px;padding:10px 12px;cursor:pointer;transition:.15s;
    background:rgba(12,18,32,.5)}
  .comp:hover{border-color:var(--cyan)}
  .comp.rec{border-color:rgba(124,247,196,.75);
    box-shadow:0 0 12px rgba(124,247,196,.28), inset 0 0 8px rgba(124,247,196,.07);
    animation:recpulse 2.6s ease-in-out infinite}
  @keyframes recpulse{50%{box-shadow:0 0 18px rgba(124,247,196,.42), inset 0 0 10px rgba(124,247,196,.12)}}
  .recbanner{border:1px solid rgba(124,247,196,.5);border-radius:8px;padding:7px 10px;margin-bottom:10px;
    font-size:10px;line-height:1.5;color:var(--mint);background:rgba(124,247,196,.05)}
  .recbanner b{letter-spacing:.12em}
  /* V6.3: Main Tray slides down from the stage's top right (kit-style) */
  .surgdrop{position:absolute;right:12px;top:12px;width:380px;z-index:8;
    background:rgba(8,12,22,.97);border:1px solid rgba(255,68,56,.4);border-radius:12px;
    padding:14px 16px;max-height:calc(100% - 24px);overflow-y:auto;text-align:left;
    transform:translateY(calc(-100% - 24px));transition:transform .28s;visibility:hidden}
  .surgdrop.open{transform:none;visibility:visible}
  @media (prefers-reduced-motion: reduce){ .surgdrop{transition:none} }
  .info{color:var(--dim);cursor:pointer;font-size:11px;margin-left:6px;font-weight:400}
  .info:hover{color:var(--cyan)}
  .kit{position:absolute;right:12px;top:12px;bottom:12px;width:400px;z-index:7;
    background:rgba(10,15,28,.94);border:1px solid rgba(51,224,255,.35);border-radius:12px;
    padding:14px 16px 12px;transform:translateX(430px);transition:transform .28s;
    display:flex;flex-direction:column;overflow:hidden}
  .kit.open{transform:none}
  .kit h2{margin:0;font-size:12px;letter-spacing:.22em;color:var(--cyan);text-transform:uppercase}
  .kit .body{flex:1;overflow-y:auto;margin-top:10px;padding-right:4px}
  .kit details{border:1px solid rgba(94,114,136,.3);border-radius:10px;margin-bottom:10px;
    background:rgba(12,18,32,.5)}
  .kit summary{cursor:pointer;padding:10px 12px;font-size:12px;font-weight:700;
    letter-spacing:.1em;color:var(--ink);list-style:none;display:flex;gap:8px;align-items:center}
  .kit summary::after{content:'▸';margin-left:auto;color:var(--dim);transition:.15s}
  .kit details[open] summary::after{transform:rotate(90deg)}
  .kit .sec{padding:2px 12px 12px;font-size:11px;color:var(--steel);line-height:1.5}
  .kit .sec .note{color:var(--dim);font-size:10px;margin:4px 0 8px}
  .kit select,.kit input[type=file],.kit textarea{width:100%;background:var(--panel2);
    border:1px solid rgba(94,114,136,.4);border-radius:7px;color:var(--ink);
    font:11px var(--mono);padding:6px 8px;margin:4px 0}
  .kit textarea{resize:vertical;min-height:44px}
  .kit .stat-row{display:flex;justify-content:space-between;font-size:10.5px;
    padding:3px 0;border-bottom:1px dashed rgba(94,114,136,.2)}
  .kit .mrow2{display:flex;gap:8px;align-items:center;margin:6px 0}
  .kit .alrow{display:flex;gap:6px;align-items:center;font-size:10px;
    padding:4px 0;border-bottom:1px dashed rgba(94,114,136,.18)}
  .kit .alrow .nm2{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
  .kit .alrow button{font-size:9px;padding:3px 7px}
  .kit .heat{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}
  .probe-banner{border:1px solid rgba(255,180,84,.55);background:rgba(255,180,84,.06);
    border-radius:8px;padding:8px 10px;font-size:10.5px;color:var(--amber);
    line-height:1.5;margin-top:8px;cursor:pointer}
  .delta-pos{color:var(--mint)} .delta-neg{color:#FF6B66}
  .comp .nm{font-weight:700;font-size:12.5px;display:flex;justify-content:space-between;gap:8px}
  .comp .nm em{font-style:normal;font-size:9px;letter-spacing:.1em;padding:2px 6px;border-radius:4px;align-self:flex-start;white-space:nowrap}
  .comp .ds{color:var(--dim);font-size:10.5px;margin-top:4px;line-height:1.45}
  .comp .pf{color:var(--steel);font-size:9.5px;margin-top:4px}
  .libtoggle{position:absolute;left:12px;top:12px;z-index:3}

  /* ---------- right column ---------- */
  .side{display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto;padding-right:2px}
  .panel{background:rgba(12,18,32,.55);border:1px solid rgba(94,114,136,.22);border-radius:10px;padding:12px 14px;flex:0 0 auto}
  .panel h2{margin:0 0 6px;font-size:10.5px;letter-spacing:.24em;color:var(--dim);text-transform:uppercase;font-weight:600}
  .kv{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
  .kv b{color:var(--ink);font-weight:700}
  .kv .v{color:var(--cyan)}
  .arch{color:var(--cyan);font-weight:700;font-size:13px}
  .conf{color:var(--dim);font-size:10.5px}
  .tags{display:flex;flex-direction:column;gap:3px;margin-top:6px}
  .tags span{color:var(--amber);font-size:10.5px}
  #vitalsCanvas{width:100%;height:130px;display:block}
  .tree{max-height:260px;overflow-y:auto;font-size:12px}
  .row{display:flex;justify-content:space-between;gap:8px;padding:2.5px 6px;border-radius:5px;cursor:pointer;white-space:nowrap}
  .row:hover{background:rgba(51,224,255,.08)}
  .row.sel{background:rgba(255,61,174,.14);outline:1px solid rgba(255,61,174,.5)}
  .row .n{color:var(--cyan);overflow:hidden;text-overflow:ellipsis}
  .row.t .n{color:var(--ink)}
  .row.add .n{color:var(--mint)}
  .row .p{color:var(--dim)}
  .ops{display:flex;gap:8px;flex-wrap:wrap}
  /* QA-F-020 (UAT round 1, HIGH — "greyed yet functional"): the base .op
     colour WAS the dim token, so a live Undo/Redo/CLOSE looked disabled and
     a locked one looked the same. Law: ENABLED = solid border + bright ink;
     DISABLED = faded + dashed border + the reason on hover; a lock reason
     also carries a padlock glyph (data-lock, set by accountLock). */
  button.op{background:transparent;border:1px solid var(--steel);color:var(--ink);border-radius:8px;
    font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;cursor:pointer;transition:.15s}
  button.op:hover:not(:disabled){filter:brightness(1.5)}
  button.op:disabled{opacity:.28;cursor:not-allowed;border-style:dashed;filter:grayscale(1)}
  button.op:disabled[data-lock]{opacity:.55;filter:none;color:var(--dim);border-color:var(--dim)}
  button.op:disabled[data-lock]::before{content:"🔒 ";font-size:10px}
  button.op.cyan{border-color:var(--cyan);color:var(--cyan)}
  button.op.mint{border-color:var(--mint);color:var(--mint)}
  button.op.amber{border-color:var(--amber);color:var(--amber)}
  button.op.magenta{border-color:var(--magenta);color:var(--magenta)}
  .log{max-height:110px;overflow-y:auto;font-size:10.5px;color:var(--steel)}
  /* D-4b (V7.01): the prior surgery's operations — collapsed, read-only, dim */
  .log details.prior{border:1px dashed rgba(94,114,136,.35);border-radius:6px;padding:2px 6px;margin-bottom:4px;color:var(--dim)}
  .log details.prior summary{cursor:pointer;color:var(--violet);font-size:10px;letter-spacing:.06em}
  .log details.prior .opp{color:var(--dim)}
  .log div{padding:1px 0}
  .log .opx{color:var(--magenta)} .log .opg{color:var(--mint)} .log .opt{color:var(--amber)}

  /* ---------- controls / footer ---------- */
  .ctrl{display:flex;gap:8px;align-items:center;margin-top:12px;flex:0 0 auto}
  .ctrl button{background:transparent;border:1px solid rgba(94,114,136,.5);color:var(--ink);border-radius:8px;
    font:600 12px var(--mono);padding:7px 13px;cursor:pointer}
  .ctrl button:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan)}
  /* QA-F-054 (ruled `faded` 2026-09-04): the QA-F-020 law on the stage row —
     DISABLED = faded + dashed, no glyph (these are view-only, free). */
  .ctrl button:disabled{opacity:.28;cursor:not-allowed;border-style:dashed;filter:grayscale(1)}
  .ctrl .sp{flex:1}
  .foot{color:var(--dim);font-size:10.5px;letter-spacing:.1em;display:flex;justify-content:space-between;margin-top:8px}
  /* V6.57: the SEO identity sentence lives on its OWN full-width line —
     inside the flex footer it wrapped and interleaved with the version
     and links (operator screenshot, "mess at the bottom"). */
  .tagline{color:var(--dim);font-size:10.5px;letter-spacing:.06em;margin-top:10px;max-width:960px}


  /* Tier 2 #3 ① (2026-09-01): the Practitioner call-to-action is a green
     outlined BUTTON with a shimmer that plays when the account panel makes
     it visible — a CSS animation on the element (display none→shown
     restarts it), never a timer. Palette token only, per style-audit law.
     The <details> disclosure is kept: the plan comparison expands in
     place. Free path pointed at Practitioner, never shamed. */
  .upg-summary{cursor:pointer;color:var(--mint);list-style:none}
  .upg-summary::-webkit-details-marker{display:none}
  .upg-cta{display:inline-block;list-style:none;cursor:pointer;
    border:1px solid var(--mint);color:var(--mint);border-radius:8px;
    padding:21px 28px;min-width:260px;box-sizing:border-box;text-align:center;
    font:600 16px var(--mono);letter-spacing:.08em;   /* V6.85 ruled A: ×2 tall, ×2 wide · V6.88: larger text (ruled) */
    position:relative;overflow:hidden}
  .upg-cta::-webkit-details-marker{display:none}
  .upg-cta::after{content:"";position:absolute;top:0;bottom:0;width:45%;
    left:-60%;background:linear-gradient(105deg,transparent,
    color-mix(in srgb, var(--mint) 28%, transparent),transparent);
    animation:upgShimmer 1.4s ease .25s 2}
  @keyframes upgShimmer{to{left:130%}}
  @media (prefers-reduced-motion: reduce){ .upg-cta::after{animation:none} }
  /* ---------- modal ---------- */
  .modal{position:fixed;inset:0;background:rgba(5,8,15,.7);display:none;align-items:center;justify-content:center;z-index:20}
  .modal.on{display:flex}
  .mbox{width:420px;max-width:92vw;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px}
  .mbox h2{margin:0 0 4px;font-size:13px;letter-spacing:.18em;color:var(--cyan);text-transform:uppercase}
  .mbox .d{color:var(--dim);font-size:11px;margin-bottom:12px}
  .hpgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
  .hp label{display:block;color:var(--dim);font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
  .hp input{width:100%;background:var(--panel2);border:1px solid rgba(94,114,136,.4);border-radius:7px;color:var(--ink);
    font:12px var(--mono);padding:7px 9px;outline:none}
  .hp input:focus{border-color:var(--mint)}
  .hp input:disabled{opacity:.35;border-style:dashed;cursor:not-allowed}   /* QA-F-069 (V7.06): the code field greys at 0:00 */
  .mrow{display:flex;gap:10px;justify-content:flex-end}
  pre.report{background:var(--panel2);border:1px solid rgba(94,114,136,.3);border-radius:8px;padding:12px;
    font-size:11px;white-space:pre-wrap;max-height:300px;overflow-y:auto;color:var(--ink)}
  .wm{display:none;margin:-2px 0 12px;padding:9px 14px;border:1px solid var(--amber);
    border-radius:9px;background:rgba(255,180,84,.06);font-size:11.5px;line-height:1.5}
  .wm.on{display:block}
  .wm b{color:var(--amber);letter-spacing:.14em;text-transform:uppercase;font-size:10.5px}
  .wm .t{color:var(--ink);word-break:break-all}
  .wm .s{color:var(--dim);font-size:10px}
  .anat .path{color:var(--dim);font-size:10px;letter-spacing:.06em;word-break:break-all;margin-bottom:8px}
  .anat .abadges{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
  .anat .abadges span{font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:5px;border:1px solid var(--dim);color:var(--dim)}
  .anat h5{margin:12px 0 4px;font-size:9.5px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase;font-weight:600}
  .anat .fx{color:var(--amber);font-size:11.5px;background:var(--panel2);border:1px solid rgba(255,180,84,.25);border-radius:7px;padding:7px 10px}
  .anat .expl{font-size:12px;line-height:1.65;color:var(--ink)}
  .anat .facts{display:grid;grid-template-columns:1fr 1fr;gap:3px 14px;font-size:11px}
  .anat .facts span b{color:var(--cyan);font-weight:600}
  /* rc28: the WEIGHT FORENSICS dialog reuses .stat-row, which was styled
     only inside .kit — its rows rendered unstyled ("tensors scanned2130",
     operator screenshot). Scoped row styling for modal bodies. */
  .mbox .stat-row{display:flex;justify-content:space-between;gap:14px;font-size:11px;padding:2px 0}
  .toast{position:fixed;left:50%;bottom:64px;transform:translateX(-50%);background:var(--panel);
    border:1px solid var(--cyan);border-radius:10px;padding:10px 18px;font-size:12px;color:var(--cyan);
    z-index:30;opacity:0;transition:.3s;pointer-events:none}
  .toast.on{opacity:1}
  ::-webkit-scrollbar{width:8px;height:8px}
  ::-webkit-scrollbar-thumb{background:rgba(94,114,136,.4);border-radius:4px}
  ::-webkit-scrollbar-track{background:transparent}

/* V4.0: tree copy-path icon */
.tree .cp{color:transparent;cursor:pointer;font-size:10px;padding:0 4px;flex:0 0 auto}
.tree .row:hover .cp{color:var(--dim)}
.tree .cp:hover{color:var(--cyan)}

/* V4.1: floating stage search — semi-transparent, top-center of the render */
#stageSearchWrap{display:flex}
.stagesearch{
  width:270px;background:rgba(8,12,22,.55);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(51,224,255,.35);border-radius:20px;color:var(--ink);
  font:11px var(--mono);padding:7px 14px;outline:none;transition:.18s}
.stagesearch::placeholder{color:rgba(143,163,184,.75)}
.stagesearch:focus{background:rgba(8,12,22,.85);border-color:var(--cyan);
  box-shadow:0 0 14px rgba(51,224,255,.25);width:320px}

/* ===== V5.1 ===== */
@media (prefers-reduced-motion: reduce){
  .shell::before{animation:none !important}
  .lib,.kit,.surgdrop{transition:none !important}
}
#stageTools{position:absolute;left:12px;bottom:12px;z-index:5;display:flex;gap:6px}
.stool{cursor:pointer;font-size:13px;background:rgba(8,12,22,.6);border:1px solid rgba(94,114,136,.4);
  border-radius:8px;padding:4px 8px;user-select:none;transition:.15s;font-family:var(--mono);color:var(--steel)}
.stool:hover{border-color:var(--cyan)}
.stool.on{border-color:var(--amber);color:var(--amber)}
#tutBox{position:fixed;inset:0;z-index:120;pointer-events:none}
#tutHalo{position:absolute;border:2px solid var(--amber);border-radius:12px;
  box-shadow:0 0 0 4000px rgba(4,7,14,.72), 0 0 22px rgba(255,180,84,.8);transition:all .35s ease}
#tutCard{position:absolute;width:290px;background:rgba(10,15,28,.98);border:1px solid var(--amber);
  border-radius:12px;padding:14px;pointer-events:auto;transition:all .35s ease}

  /* ---------- V5.9: stylized file pickers ---------- */
  .filebtn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    max-width:100%;min-width:0}
  .filebtn .fb-btn{flex:0 0 auto;border:1px solid var(--cyan);color:var(--cyan);
    border-radius:7px;padding:5px 11px;font:600 10.5px var(--mono);
    letter-spacing:.08em;white-space:nowrap;transition:.16s;user-select:none}
  .filebtn:hover .fb-btn{background:rgba(51,224,255,.12);
    box-shadow:0 0 12px rgba(51,224,255,.18)}
  .filebtn:active .fb-btn{transform:translateY(1px)}
  .filebtn:focus-within .fb-btn{outline:1px solid var(--cyan);outline-offset:2px}
  .filebtn .fb-name{flex:1 1 auto;min-width:0;color:var(--dim);font-size:10px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .filebtn .fb-name.has{color:var(--mint)}

/* V6.21 maintenance banner */
#maintBanner{position:fixed;top:0;left:0;right:0;z-index:4000;
  background:#2A1F0A;color:#FFB454;border-bottom:1px solid #FFB454;
  padding:10px 44px 10px 16px;font-size:14px;text-align:center}
#maintBanner b{letter-spacing:.04em}
#maintDismiss{position:absolute;right:10px;top:6px;background:none;
  border:1px solid #FFB454;color:#FFB454;border-radius:6px;
  cursor:pointer;padding:2px 9px}
#maintBanner.final{background:#2A0F0A;color:#FF4438;
  border-bottom-color:#FF4438}
#maintBanner.final #maintDismiss{display:none}

/* T71: password managers autofill-repaint inputs white over the
   theatre. Pin autofilled inputs to the house style. */
input:-webkit-autofill, input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 40px var(--panel2) inset;
  caret-color:var(--ink);
  border:1px solid rgba(94,114,136,.4);
}

/* V6.54 QA-001/002: former h5 sublevels (now h3) + visible keyboard focus */
.mbox h3{margin:8px 0 4px;font-size:11px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
.row:focus-visible,.cp:focus-visible,.info:focus-visible,#bell:focus-visible,button:focus-visible{outline:1px solid var(--cyan);outline-offset:2px}