/* ICARUS Viewer — design tokens + UI, matched to dac-viewer-v13.html */
:root{
  --bg:#070707; --s1:#0e0e0e; --s2:#141414; --s3:#1b1b1b;
  --b1:#1f1f1f; --b2:#2a2a2a; --b3:#333;
  --accent:#FA9C21; --adim:rgba(250,156,33,.11); --aglow:rgba(250,156,33,.28);
  /* no gray: secondary text is white, section headers go accent-orange (see contrast pass) */
  --text:#ececec; --muted:#ececec; --dim:#ececec;
  --green:#22c55e; --red:#ef4444; --yellow:#eab308;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:var(--font);display:flex;flex-direction:column}

/* HEADER */
.hdr{background:rgba(7,7,7,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--b1);
  padding:0 14px;display:flex;align-items:center;gap:10px;height:48px;flex-shrink:0;z-index:100}
.logo-wrap{display:flex;flex-direction:column;line-height:1.2;flex-shrink:0}
.logo-name{font-size:14px;font-weight:800;color:var(--accent);letter-spacing:2.5px}
.logo-sub{font-size:8px;font-weight:600;color:var(--dim);letter-spacing:1.8px;text-transform:uppercase}
.hsep{width:1px;height:20px;background:var(--b2);flex-shrink:0}
.show-name{font-size:14px;font-weight:700;color:var(--text);flex:1;min-width:120px;max-width:520px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hstats{display:flex;gap:12px}
.hstat{font-size:11px;color:var(--muted)}
.hstat span{color:var(--accent);font-weight:600}
.hbtn{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:500;cursor:pointer;white-space:nowrap;
  border:1px solid var(--b2);background:none;color:var(--muted);transition:all .15s;font-family:var(--font)}
.hbtn:hover,.hbtn.on{color:var(--accent);border-color:var(--accent);background:var(--adim)}
.hbtn.action{border-color:rgba(250,156,33,.5);color:var(--accent);background:var(--adim)}
.hbtn.action:hover{background:rgba(250,156,33,.2)}
.hbtn:disabled{opacity:.4;cursor:default}

/* UPLOAD */
#upload-screen{position:absolute;inset:48px 0 0 0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;z-index:50;background:var(--bg);
  background-image:radial-gradient(circle,#181818 1px,transparent 1px);background-size:26px 26px}
.dz{border:1.5px dashed var(--accent);border-radius:20px;padding:52px 72px;text-align:center;
  max-width:480px;width:90%;cursor:pointer;transition:all .2s;background:var(--adim)}
.dz:hover,.dz.drag{background:rgba(250,156,33,.17);box-shadow:0 0 60px var(--aglow)}
.dz-logo-name{font-size:32px;font-weight:900;color:var(--accent);letter-spacing:5px}
.dz-logo-sub{font-size:9px;font-weight:600;color:var(--dim);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:18px}
.dz h2{font-size:19px;font-weight:700;margin-bottom:8px}
.dz p{font-size:12px;color:var(--muted);margin-bottom:24px;line-height:1.75}
.dzbtn{background:var(--accent);color:#000;border:none;padding:10px 24px;border-radius:8px;
  font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font)}
.dzbtn:hover{opacity:.84}
#fi{display:none}
.dz-error{margin-top:12px;font-size:12px;color:var(--red);min-height:16px}
.dz-hint{margin-top:14px;font-size:11px;color:var(--dim)}

/* VIEWER */
#viewer{flex:1;display:none;flex-direction:column;min-height:0}
#canvas-wrap{flex:1;position:relative;overflow:hidden;min-height:0}
#three-canvas{display:block;width:100%;height:100%}
#gizmo-canvas{position:absolute;bottom:10px;right:12px;width:80px;height:80px;pointer-events:none;z-index:15}

/* INFO PANEL */
#left-overlay{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:8px;z-index:20}
.info-panel{width:190px;background:rgba(5,5,8,.88);backdrop-filter:blur(12px);
  border:1px solid var(--b2);border-radius:10px;padding:11px 13px}
.ip-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--dim);margin-bottom:8px}
.ip-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;border-bottom:1px solid var(--b1)}
.ip-row:last-child{border-bottom:none}
.ip-k{font-size:11px;color:var(--muted)}
.ip-v{font-size:11px;font-weight:600;color:var(--text)}
.ip-v.accent{color:var(--accent)}

/* LOADING */
#loading{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  z-index:200;background:rgba(7,7,8,.92);backdrop-filter:blur(8px)}
.ld-spinner{width:42px;height:42px;border:3px solid var(--b2);border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite;margin-bottom:14px}
@keyframes spin{to{transform:rotate(360deg)}}
.ld-text{font-size:13px;color:var(--text);font-weight:600}
.ld-detail{font-size:11px;color:var(--dim);margin-top:5px}

/* CONTROLS */
.ctrl-bar{background:rgba(7,7,7,.98);backdrop-filter:blur(16px);border-top:1px solid var(--b1);
  padding:8px 14px 9px;display:flex;flex-direction:column;gap:7px;flex-shrink:0;z-index:100}
.ctrl-timeline{display:flex;align-items:center;gap:9px}
.ctrl-btns{display:flex;gap:5px}
.cbtn{width:30px;height:30px;border-radius:7px;border:1px solid var(--b2);background:none;color:var(--muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .15s;
  font-family:var(--font);user-select:none}
.cbtn:hover,.cbtn.active{color:var(--accent);border-color:var(--accent);background:var(--adim)}
.scrubber-wrap{flex:1;position:relative;height:20px;display:flex;align-items:center}
.scrubber-track{position:absolute;width:100%;height:3px;background:var(--b2);border-radius:2px}
.scrubber-fill{position:absolute;height:3px;background:var(--accent);border-radius:2px;width:0%;pointer-events:none}
.scrubber{position:absolute;width:100%;appearance:none;-webkit-appearance:none;background:transparent;
  outline:none;height:20px;cursor:pointer;z-index:2;margin:0}
.scrubber::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--accent);cursor:pointer;border:2px solid #070707;box-shadow:0 0 8px var(--aglow)}
.scrubber::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #070707}
.time-disp{font-size:12px;color:var(--muted);white-space:nowrap;min-width:112px;text-align:right}
.time-disp strong{color:var(--text);font-weight:600}
.ctrl-options{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.opt-group{display:flex;align-items:center;gap:6px;flex-shrink:0}
.opt-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--dim)}
.opt-btn{padding:3px 9px;border-radius:5px;border:1px solid var(--b2);background:none;color:var(--muted);
  font-size:11px;cursor:pointer;font-family:var(--font);transition:all .15s}
.opt-btn:hover{color:var(--text);border-color:var(--b3)}
.opt-btn.on{color:var(--accent);border-color:var(--accent);background:var(--adim)}
.slider{-webkit-appearance:none;appearance:none;height:3px;border-radius:2px;outline:none;cursor:pointer;width:92px;
  background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--p,40%),var(--b2) var(--p,40%))}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--accent);cursor:pointer;border:2px solid #070707}
.slider::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}
.music-name{font-size:11px;color:var(--muted);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* NOTES PANEL */
.notes-panel{position:absolute;top:12px;right:12px;width:230px;max-height:calc(100% - 24px);
  display:flex;flex-direction:column;background:rgba(5,5,8,.9);backdrop-filter:blur(12px);
  border:1px solid var(--b2);border-radius:10px;z-index:22;overflow:hidden}
.notes-hdr{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--b1);flex-shrink:0}
.notes-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--dim);flex:1}
.notes-add{width:22px;height:22px;border-radius:6px;border:1px solid var(--accent);background:var(--adim);
  color:var(--accent);font-size:14px;line-height:1;cursor:pointer;font-family:var(--font);display:flex;align-items:center;justify-content:center}
.notes-add:hover{background:rgba(250,156,33,.22)}
.notes-list{overflow-y:auto;padding:7px;display:flex;flex-direction:column;gap:7px}
.notes-list::-webkit-scrollbar{width:3px}.notes-list::-webkit-scrollbar-thumb{background:var(--b3);border-radius:2px}
.notes-empty{padding:14px 12px;font-size:11px;color:var(--dim);line-height:1.6;text-align:center}
.note-item{background:var(--s2);border:1px solid var(--b1);border-radius:8px;padding:7px 8px}
.note-head{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.note-time{font-size:11px;font-weight:700;color:var(--accent);background:var(--adim);border:1px solid rgba(250,156,33,.3);
  border-radius:5px;padding:1px 7px;cursor:pointer;font-family:var(--font)}
.note-time:hover{background:rgba(250,156,33,.2)}
.note-del{margin-left:auto;background:none;border:none;color:var(--dim);font-size:11px;cursor:pointer;padding:2px 4px}
.note-del:hover{color:var(--red)}
.note-text{width:100%;background:var(--bg);border:1px solid var(--b2);border-radius:6px;color:var(--text);
  font-size:12px;font-family:var(--font);padding:5px 7px;resize:vertical;outline:none;line-height:1.45}
.note-text:focus{border-color:var(--accent)}
.note-ro{font-size:12px;color:var(--text);line-height:1.45;white-space:pre-wrap}

/* timeline note markers */
.note-markers{position:absolute;inset:0;pointer-events:none}
.note-marker{position:absolute;top:7px;width:9px;height:9px;margin:0 0 0 -4.5px;border-radius:50%;
  background:var(--accent);border:1.5px solid #070707;box-shadow:0 0 6px var(--aglow);cursor:pointer;pointer-events:auto;z-index:4}
.note-marker:hover{transform:scale(1.25)}

/* editable note timestamp + mini buttons */
.note-time-in{width:54px;font-size:13px;font-weight:700;color:var(--accent);background:var(--adim);
  border:1px solid rgba(250,156,33,.3);border-radius:5px;padding:2px 6px;font-family:var(--font);text-align:center;outline:none}
.note-time-in:focus{border-color:var(--accent)}
.note-mini{background:none;border:1px solid var(--b2);border-radius:5px;color:var(--muted);font-size:11px;
  cursor:pointer;padding:2px 6px;font-family:var(--font)}
.note-mini:hover{color:var(--accent);border-color:var(--accent)}

/* flight-data toggle panel */
.ip-adv{margin-top:3px;border-top:1px solid var(--b1);padding-top:3px}
.ip-adv-toggle{margin-top:8px;width:100%;background:none;border:1px solid var(--b2);border-radius:6px;
  color:var(--muted);font-size:11px;font-family:var(--font);padding:6px;cursor:pointer;transition:all .15s}
.ip-adv-toggle:hover{color:var(--accent);border-color:var(--accent);background:var(--adim)}

/* draggable music lane on the timeline (clipped so the band never spills over the buttons) */
.music-lane{position:absolute;left:0;right:0;bottom:0;height:11px;pointer-events:none;overflow:hidden;border-radius:3px}
.ip-adv-hdr{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--dim);margin:3px 0 2px}
.music-band{position:absolute;bottom:0;height:11px;background:rgba(250,156,33,.26);border:1px solid var(--accent);
  border-radius:3px;font-size:8px;font-weight:700;color:var(--accent);line-height:9px;padding:0 4px;overflow:hidden;
  white-space:nowrap;cursor:grab;user-select:none;pointer-events:auto;z-index:4}
.music-band:active{cursor:grabbing;background:rgba(250,156,33,.4)}

/* share result toast */
.share-toast{position:fixed;top:58px;right:14px;z-index:600;width:320px;background:rgba(5,5,8,.97);
  backdrop-filter:blur(12px);border:1px solid var(--accent);border-radius:12px;padding:14px;box-shadow:0 8px 40px rgba(0,0,0,.6)}
.st-title{font-size:12px;font-weight:700;color:var(--accent);margin-bottom:9px}
.st-row{display:flex;gap:6px}
.st-url{flex:1;min-width:0;background:var(--bg);border:1px solid var(--b2);border-radius:6px;color:var(--text);
  font-size:12px;font-family:var(--font);padding:6px 8px;outline:none}
.st-copy{background:var(--accent);color:#000;border:none;border-radius:6px;font-size:12px;font-weight:700;
  cursor:pointer;padding:6px 12px;font-family:var(--font)}
.st-open{display:inline-block;margin-top:9px;font-size:11px;color:var(--muted);text-decoration:none}
.st-open:hover{color:var(--accent)}
.st-close{position:absolute;top:10px;right:11px;background:none;border:none;color:var(--dim);cursor:pointer;font-size:12px}
.st-close:hover{color:var(--text)}

/* ── larger, more legible text pass ── */
.show-name{font-size:15px}
.hstat{font-size:13px}
.hbtn{font-size:12.5px;padding:5px 12px}
.ip-title{font-size:10.5px}
.ip-k,.ip-v{font-size:13px}
.time-disp{font-size:14px}
.opt-lbl{font-size:10px}
.opt-btn{font-size:12.5px;padding:4px 11px}
.cbtn{width:32px;height:32px;font-size:14px}
.notes-title{font-size:11px}
.note-text,.note-ro{font-size:14px}
.dz h2{font-size:22px}
.dz p{font-size:14px}
.dz-hint{font-size:12px}
/* taller timeline to fit the music lane below the scrubber */
.scrubber-wrap{height:30px}
.scrubber-track,.scrubber-fill{top:7px}
.scrubber{height:18px;top:0}

/* ── contrast pass: nothing gray. small uppercase section headers go orange ── */
.ip-title,.notes-title,.opt-lbl,.ip-adv-hdr,.dp-hdr{color:var(--accent)}
.logo-sub{color:var(--text)}

/* preset view-plane toolbar */
.view-bar{position:absolute;left:12px;bottom:12px;z-index:20;display:flex;align-items:center;gap:5px;
  background:rgba(5,5,8,.85);backdrop-filter:blur(12px);border:1px solid var(--b2);border-radius:9px;padding:6px 8px}
.view-lbl{font-size:9px;font-weight:700;letter-spacing:.8px;color:var(--accent);margin-right:2px}
.view-btn{padding:4px 9px;border-radius:5px;border:1px solid var(--b2);background:none;color:var(--text);
  font-size:11px;cursor:pointer;font-family:var(--font);transition:all .15s}
.view-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--adim)}

/* editable show name (Studio only) */
.editable-name{cursor:text;border-bottom:1px dashed transparent;outline:none;padding-bottom:1px}
.editable-name:hover{border-bottom-color:var(--b3)}
.editable-name:focus{border-bottom-color:var(--accent)}