:root{
  --page:#0d0f12;
  --panel:#181b20;
  --raised:#1f2329;
  --raised-2:#262b32;
  --line:rgba(255,255,255,0.08);
  --line-strong:rgba(255,255,255,0.14);
  --ink:#f2f4f7;
  --ink-2:#b3bac4;
  --ink-3:#8a94a0;
  --brand:#f07f1a;
  --brand-deep:#e2580c;
  --understand:#3987e5;
  --decide:#c98500;
  --act:#0ca30c;
  --learn:#9085e9;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Oswald","Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--page);
  color:var(--ink);
  font-family:var(--sans);
  font-size:13px;
  line-height:1.45;
  overflow-x:hidden;
}
.app{
  display:flex;flex-direction:column;gap:10px;
  padding:14px 16px 16px;
  min-height:100dvh;max-width:2100px;margin:0 auto;
}

/* ---------- header ---------- */
header{
  display:flex;align-items:center;gap:18px;flex-wrap:nowrap;min-width:0;
  padding:2px 4px;
}
.logo{color:#e8ebef;display:flex;align-items:center}
.logo svg{height:17px;width:auto;display:block}
.head-divider{width:1px;height:26px;background:var(--line-strong)}
.head-title{display:flex;align-items:baseline;gap:10px}
.head-title h1{
  font-family:var(--display);font-weight:500;font-size:19px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
}
.head-title .sub{color:var(--ink-3);font-size:12px;font-weight:500}
.head-spacer{flex:1}
.loop-legend{display:flex;gap:11px;align-items:center;margin-left:auto}
.loop-legend .stage{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:.09em;color:var(--ink-2)}
.loop-legend .stage .dot{width:8px;height:8px;border-radius:50%}
.loop-legend .arrow{color:var(--ink-3);font-size:10px}
.clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.clock .time{font-family:var(--mono);font-size:15px;color:var(--ink)}
.clock .shift{font-size:10.5px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.live-pill{
  display:flex;align-items:center;gap:7px;
  border:1px solid var(--line-strong);border-radius:999px;
  padding:4px 12px;font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--ink-2)
}
.live-pill .beacon{width:8px;height:8px;border-radius:50%;background:var(--brand);animation:beacon 1.6s ease-out infinite}
@keyframes beacon{0%{box-shadow:0 0 0 0 rgba(240,127,26,.55)}70%{box-shadow:0 0 0 7px rgba(240,127,26,0)}100%{box-shadow:0 0 0 0 rgba(240,127,26,0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
}

/* ---------- KPI strip ---------- */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.kpi{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px 10px;display:flex;flex-direction:column;gap:2px;
  position:relative;overflow:hidden;
}
.kpi .label{font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.04em}
.kpi .row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.kpi .value{
  font-family:var(--display);font-weight:500;font-size:30px;line-height:1.1;
  color:var(--ink);white-space:nowrap;
}
.kpi .unit{font-size:13px;color:var(--ink-3);font-family:var(--sans);font-weight:500;margin-left:2px}
.kpi .note{font-size:10.5px;color:var(--ink-3)}
.kpi .note b{color:#3fbf3f;font-weight:600}
.kpi canvas{display:block}
.kpi.flash::after{
  content:"";position:absolute;inset:0;border-radius:10px;
  border:1px solid rgba(240,127,26,.65);animation:kpiflash .9s ease-out forwards;pointer-events:none;
}
@keyframes kpiflash{from{opacity:1}to{opacity:0}}

/* ---------- main grid ---------- */
.main{
  display:grid;gap:10px;flex:1;min-height:0;
  grid-template-columns:minmax(300px,3.4fr) minmax(380px,4.6fr) minmax(340px,4fr);
}
.col{display:flex;flex-direction:column;gap:10px;min-height:0;min-width:0}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.panel-head{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;border-bottom:1px solid var(--line);flex:none;
}
.panel-head .icon{color:var(--brand);display:flex}
.panel-head .icon svg{width:13px;height:13px}
.panel-head h2{
  font-family:var(--display);font-weight:500;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.panel-head .tag{margin-left:auto;font-size:10px;color:var(--ink-3);letter-spacing:.05em}
.panel-body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#333941 transparent}
.panel-body::-webkit-scrollbar{width:8px}
.panel-body::-webkit-scrollbar-thumb{background:#2c313a;border-radius:4px}

/* ---------- perception: cameras ---------- */
.cams{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
.cam{
  position:relative;aspect-ratio:16/10;border-radius:7px;overflow:hidden;
  background:
    repeating-linear-gradient(45deg,#20242b 0 14px,#1b1f25 14px 28px);
  border:1px solid var(--line);
}
.cam .ph{
  position:absolute;left:0;right:0;top:24px;display:flex;justify-content:center;
  color:#525a66;font-size:9px;font-weight:600;letter-spacing:.08em;text-align:center;
  text-transform:uppercase;padding:0 12px;
}
.cam .chrome{
  position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:6px;
  padding:5px 7px;font-family:var(--mono);font-size:9px;color:#cfd5dc;
  background:linear-gradient(rgba(10,12,15,.75),rgba(10,12,15,0));
}
.cam .rec{width:6px;height:6px;border-radius:50%;background:#e34948;animation:rec 1.4s steps(2,jump-none) infinite}
@keyframes rec{50%{opacity:.25}}
.cam .foot{
  position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  padding:4px 7px;font-family:var(--mono);font-size:9px;color:#9aa3ae;
  background:linear-gradient(rgba(10,12,15,0),rgba(10,12,15,.8));
}
.cam .cam-img{
  position:absolute;left:-5%;top:-5%;width:110%;height:110%;object-fit:cover;
  filter:saturate(.8) contrast(1.06) brightness(.9);
  animation:drift1 22s ease-in-out infinite alternate;
}
#cam2 .cam-img{animation:drift2 26s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(2.5%,1.5%) scale(1.07)}}
@keyframes drift2{from{transform:scale(1.05) translate(1.5%,0)}to{transform:scale(1) translate(-1%,1%)}}
.cam .grain{
  position:absolute;inset:-6%;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  animation:grain .9s steps(4) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-1.5%,1%)}
  50%{transform:translate(1%,-1.5%)}
  75%{transform:translate(-1%,1.5%)}
}
.cam .scan{
  position:absolute;left:0;right:0;height:34%;top:-40%;
  background:linear-gradient(rgba(240,127,26,0),rgba(240,127,26,.05) 55%,rgba(240,127,26,.14));
  animation:scan 6.5s linear infinite;
}
@keyframes scan{to{top:120%}}

/* ---------- perception: audio ---------- */
.waves{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 10px 10px}
.wave{
  background:var(--raised);border:1px solid var(--line);border-radius:7px;
  padding:7px 8px 5px;
}
.wave .wlabel{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;color:var(--ink-3);margin-bottom:3px}
.wave .wlabel .db{color:var(--ink-2)}
.wave canvas{width:100%;height:34px;display:block}

/* ---------- perception: comms + data feeds ---------- */
.feed{display:flex;flex-direction:column;padding:6px 0}
.feed-item{
  display:flex;gap:8px;padding:6px 12px;align-items:flex-start;
  border-bottom:1px solid rgba(255,255,255,0.04);
  animation:slidein .45s ease-out;
}
@keyframes slidein{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.kind{
  flex:none;font-size:8.5px;font-weight:700;letter-spacing:.1em;
  padding:2px 6px;border-radius:4px;margin-top:1px;
  border:1px solid var(--line-strong);color:var(--ink-2);
  font-family:var(--mono);min-width:44px;text-align:center;
}
.kind.sms{border-color:rgba(57,135,229,.5);color:#7db2ef}
.kind.email{border-color:rgba(144,133,233,.5);color:#b0a8f0}
.kind.radio{border-color:rgba(201,133,0,.6);color:#e0a83a}
.kind.erp{border-color:rgba(12,163,12,.5);color:#4fc24f}
.kind.mes{border-color:rgba(227,73,72,.5);color:#ee8a89}
.kind.eye{border-color:rgba(240,127,26,.55);color:#f2984a}
.feed-item .txt{min-width:0}
.feed-item .who{font-size:10.5px;font-weight:600;color:var(--ink-2)}
.feed-item .who .dir{color:var(--ink-3);font-weight:500}
.feed-item .msg{font-size:11px;color:var(--ink-3);overflow-wrap:break-word}
.feed-item .msg em{color:var(--ink-2);font-style:normal}
.feed-item.outbound .who{color:#f2984a}

/* radio item with mini waveform */
.radio-wave{display:inline-flex;align-items:flex-end;gap:1.5px;height:10px;margin-right:5px;vertical-align:-1px}
.radio-wave i{width:2px;background:#e0a83a;border-radius:1px;animation:rwave 1s ease-in-out infinite}
@keyframes rwave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* ---------- event stream ---------- */
.stream{padding:4px 0}
.evt{
  display:flex;gap:10px;padding:8px 14px;align-items:flex-start;
  border-bottom:1px solid rgba(255,255,255,0.045);
  animation:slidein .5s ease-out;position:relative;
}
.evt::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--stage);
  opacity:.85;
}
.evt .stagepill{
  flex:none;display:flex;align-items:center;gap:6px;min-width:96px;margin-top:1px;
}
.evt .stagepill .dot{width:8px;height:8px;border-radius:50%;background:var(--stage);flex:none}
.evt.fresh .stagepill .dot{animation:evtpulse 1.8s ease-out}
@keyframes evtpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--stage) 60%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
.evt .stagepill .sname{
  font-size:9.5px;font-weight:700;letter-spacing:.11em;color:var(--stage);
  font-family:var(--mono);
}
.evt .body{min-width:0;flex:1}
.evt .body .etext{font-size:12px;color:var(--ink);overflow-wrap:break-word}
.evt .body .etext .dim{color:var(--ink-3)}
.evt .etime{flex:none;font-family:var(--mono);font-size:9.5px;color:var(--ink-3);margin-top:2px}
.evt[data-stage=understand]{--stage:var(--understand)}
.evt[data-stage=decide]{--stage:var(--decide)}
.evt[data-stage=act]{--stage:var(--act)}
.evt[data-stage=learn]{--stage:var(--learn)}

/* working indicator at top of stream */
.thinking{
  display:flex;align-items:center;gap:9px;padding:8px 14px;
  border-bottom:1px solid var(--line);color:var(--ink-3);font-size:11px;flex:none;
}
.thinking .dots{display:inline-flex;gap:3px}
.thinking .dots i{width:4px;height:4px;border-radius:50%;background:var(--brand);animation:think 1.2s ease-in-out infinite}
.thinking .dots i:nth-child(2){animation-delay:.15s}
.thinking .dots i:nth-child(3){animation-delay:.3s}
@keyframes think{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}

/* ---------- subagents ---------- */
.agent-head-extra{margin-left:auto;display:flex;align-items:center;gap:8px}
.status-chip{
  font-size:9px;font-weight:700;letter-spacing:.1em;font-family:var(--mono);
  padding:2.5px 8px;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink-3);
  text-transform:uppercase;transition:all .3s;
}
.status-chip.observing{border-color:rgba(57,135,229,.55);color:#7db2ef}
.status-chip.thinking{border-color:rgba(201,133,0,.6);color:#e0a83a;animation:chipglow 1.6s ease-in-out infinite}
.status-chip.acting{border-color:rgba(12,163,12,.6);color:#4fc24f}
@keyframes chipglow{50%{box-shadow:0 0 8px rgba(201,133,0,.35)}}
.cot{padding:8px 4px 10px 0;font-size:11.5px}
.cot-line{
  display:flex;gap:9px;padding:4.5px 12px 4.5px 14px;color:var(--ink-2);
  animation:slidein .4s ease-out;
}
.cot-line .gutter{
  flex:none;width:10px;display:flex;justify-content:center;position:relative;
}
.cot-line .gutter::before{
  content:"";position:absolute;top:-9px;bottom:-9px;width:1px;background:var(--line-strong);left:50%;
}
.cot-line .gutter .node{
  position:relative;width:7px;height:7px;border-radius:50%;
  background:var(--raised-2);border:1.5px solid var(--ink-3);margin-top:4px;flex:none;
}
.cot-line:first-child .gutter::before{top:8px}
.cot-line.tool .gutter .node{border-color:var(--brand);background:rgba(240,127,26,.2)}
.cot-line.tool .cot-text{font-family:var(--mono);font-size:10.5px;color:#f2984a}
.cot-line.done .gutter .node{border-color:var(--act);background:rgba(12,163,12,.25)}
.cot-text{overflow-wrap:break-word;min-width:0}
.cot-text .cursor{
  display:inline-block;width:7px;height:12px;background:var(--brand);
  vertical-align:-1.5px;margin-left:2px;animation:blink 1s steps(2,jump-none) infinite;
}
@keyframes blink{50%{opacity:0}}
.agent-panel{flex:1}

/* ---------- chat ---------- */
.chat-panel{flex:none;max-height:55%}
.chat-log{padding:10px 12px;display:flex;flex-direction:column;gap:9px}
.chat-msg{max-width:94%;font-size:11.5px;line-height:1.5;animation:slidein .35s ease-out}
.chat-msg.user{
  align-self:flex-end;background:var(--raised-2);border:1px solid var(--line);
  padding:6px 11px;border-radius:10px 10px 2px 10px;color:var(--ink);
}
.chat-msg.bot{align-self:flex-start;color:var(--ink-2);width:94%}
.chat-msg.bot .botname{
  font-size:9px;letter-spacing:.12em;font-weight:700;color:var(--brand);
  font-family:var(--mono);display:block;margin-bottom:3px;
}
.chat-suggest{display:flex;gap:6px;padding:2px 12px 8px;flex-wrap:wrap;flex:none}
.chip{
  font-size:10px;color:var(--ink-2);border:1px solid var(--line-strong);border-radius:999px;
  padding:3.5px 11px;cursor:pointer;background:none;font-family:var(--sans);
}
.chip:hover{border-color:rgba(240,127,26,.55);color:var(--ink)}
.chat-input{display:flex;gap:8px;padding:9px 12px;border-top:1px solid var(--line);flex:none}
.chat-input input{
  flex:1;background:var(--raised);border:1px solid var(--line-strong);border-radius:7px;
  color:var(--ink);font:500 12px var(--sans);padding:7px 11px;outline:none;min-width:0;
}
.chat-input input::placeholder{color:var(--ink-3)}
.chat-input input:focus{border-color:rgba(240,127,26,.5)}
.chat-input button{
  background:var(--brand);border:none;border-radius:7px;color:#181b20;
  font-weight:800;padding:0 15px;cursor:pointer;font-size:13px;font-family:var(--sans);
}
.chat-input button:hover{background:#f79340}
.chat-input .chat-mic{
  background:var(--raised);border:1px solid var(--line-strong);color:var(--ink-3);
  width:34px;flex:none;padding:0;display:grid;place-items:center;border-radius:7px;
}
.chat-input .chat-mic svg{width:15px;height:15px}
.chat-input .chat-mic:hover{background:var(--raised-2);color:var(--ink)}
.chat-input .chat-mic.listening{
  background:rgba(227,73,72,.14);border-color:rgba(227,73,72,.55);color:#ee8a89;
  animation:mic-pulse 1.4s ease-in-out infinite;
}
@keyframes mic-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(227,73,72,.35)}
  50%{box-shadow:0 0 0 5px rgba(227,73,72,0)}
}

/* report card inside chat */
.report{background:var(--raised);border:1px solid var(--line);border-radius:8px;padding:11px 11px 5px;margin-top:8px}
.report h3{
  font-family:var(--display);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);font-weight:500;margin-bottom:9px;
}
.rkpis{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.rkpi .rv{font-family:var(--display);font-size:15px;color:var(--ink);display:flex;align-items:center;gap:5px}
.rkpi .rv .sdot{width:7px;height:7px;border-radius:50%;flex:none}
.rkpi .rl{font-size:9px;color:var(--ink-3)}
.rtable{width:100%;border-collapse:collapse;font-size:10px;table-layout:fixed}
.rtable th{
  color:var(--ink-3);font-weight:600;text-align:right;padding:3px 6px;
  border-bottom:1px solid var(--line);font-size:9.5px;
}
.rtable th.crew{text-align:center;color:var(--ink-2);font-size:10px;border-bottom:none;padding-bottom:0}
.rtable th.mat,.rtable td.mat{
  text-align:left;color:var(--ink-2);font-weight:600;font-family:var(--sans);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rtable td{
  padding:3.5px 6px;text-align:right;font-family:var(--mono);font-size:9.5px;
  color:var(--ink-2);border-bottom:1px solid rgba(255,255,255,.05);
}
.rtable tr.sumrow td{font-weight:600;color:var(--ink)}
.diffcell{display:inline-flex;align-items:center;gap:4px}
.dbar{height:7px;border-radius:2px;background:#5a6472;display:inline-block}

/* ---------- footer strip ---------- */
.foot-note{
  display:flex;justify-content:space-between;align-items:center;color:var(--ink-3);
  font-size:10px;padding:0 4px;letter-spacing:.04em;
}
.foot-note .arch{display:flex;gap:6px;align-items:center;font-weight:600}
.foot-note .arch span{color:var(--ink-2)}

/* ---------- responsive ---------- */
@media (min-width:1251px){
  /* control-room mode: lock to viewport, panels scroll internally */
  .app{height:100dvh;overflow:hidden}
  .main{overflow:hidden}
}
@media (max-width:1500px){
  .kpi .value{font-size:26px}
}
@media (max-width:1250px){
  .main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .col.right{grid-column:1/-1;flex-direction:row}
  .col.right .panel{flex:1}
  .panel-body{max-height:420px}
}
@media (max-width:920px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpis .kpi:first-child{grid-column:1/-1}
  .main{grid-template-columns:1fr}
  .col.right{flex-direction:column}
  .head-title .sub{display:none}
}

/* ---------- top nav ---------- */
.topnav{display:flex;gap:2px;margin-left:6px}
.topnav a{
  color:var(--ink-3);text-decoration:none;font-size:11.5px;font-weight:600;
  padding:5px 12px;border-radius:7px;letter-spacing:.03em;
}
.topnav a:hover{color:var(--ink);background:var(--raised)}
.topnav a.active{color:var(--ink);background:var(--raised-2)}

/* ---------- header icon button + settings popover ---------- */
.icon-btn{
  background:none;border:1px solid var(--line-strong);border-radius:8px;
  color:var(--ink-3);width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
}
.icon-btn:hover{color:var(--ink);border-color:rgba(240,127,26,.5)}
.icon-btn[hidden]{display:none}
.icon-btn svg{width:15px;height:15px}
.settings-pop{
  position:fixed;top:52px;right:16px;z-index:50;width:320px;
  background:var(--raised);border:1px solid var(--line-strong);border-radius:10px;
  padding:14px;display:none;box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.settings-pop.open{display:block}
.settings-pop h4{
  font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);font-weight:500;margin-bottom:10px;
}
.set-label{display:block;font-size:10.5px;color:var(--ink-3);font-weight:600;margin-bottom:7px}
.set-opt{
  display:flex;gap:9px;align-items:flex-start;padding:8px 9px;border-radius:8px;cursor:pointer;
  border:1px solid transparent;font-size:11.5px;color:var(--ink-2);
}
.set-opt:hover{background:var(--raised-2)}
.set-opt:has(input:checked){border-color:rgba(240,127,26,.5);background:rgba(240,127,26,.06)}
.set-opt input{accent-color:var(--brand);margin-top:2px}
.set-opt small{color:var(--ink-3);line-height:1.35;display:block;margin-top:2px}
.set-foot{font-size:9.5px;color:var(--ink-3);margin-top:9px;letter-spacing:.03em}

/* ---------- recipe control page ---------- */
.main.recipes{grid-template-columns:minmax(340px,3.6fr) minmax(340px,3.2fr) minmax(320px,3.2fr)}

.summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sum-tile{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 14px 9px;
}
.sum-tile .label{font-size:11px;font-weight:600;color:var(--ink-3)}
.sum-tile .val{
  font-family:var(--display);font-weight:500;font-size:20px;color:var(--ink);
  line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sum-tile .val small{font-size:12px;color:var(--ink-3);font-family:var(--sans)}
.sum-tile .val.ok{color:#4fc24f}
.sum-tile .val.warn{color:#e0a83a}

/* active recipe */
.recipe-status{padding:10px 12px;border-bottom:1px solid var(--line);flex:none}
.change-banner{
  border:1px solid rgba(201,133,0,.45);background:rgba(201,133,0,.08);border-radius:8px;
  padding:9px 11px;font-size:11px;color:var(--ink-2);
}
.change-banner .cb-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.change-banner .cb-title{font-weight:700;color:#e0a83a;font-size:11.5px}
.change-banner .cb-meta{color:var(--ink-3);font-size:10.5px}
.change-banner .cb-prog{display:flex;align-items:center;gap:8px;margin-top:7px}
.change-banner .cb-bar{flex:1;height:5px;border-radius:3px;background:var(--raised-2);overflow:hidden}
.change-banner .cb-bar i{display:block;height:100%;background:#e0a83a;border-radius:3px;transition:width .6s}
.change-banner .cb-rem{font-family:var(--mono);font-size:10px;color:#e0a83a;white-space:nowrap}
.default-banner{
  border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:11px;color:var(--ink-3);
  display:flex;align-items:center;gap:8px;
}
.default-banner .dot{width:8px;height:8px;border-radius:50%;background:var(--act);flex:none}
.btn{
  background:var(--raised-2);border:1px solid var(--line-strong);border-radius:7px;color:var(--ink-2);
  font:600 10.5px var(--sans);padding:5px 11px;cursor:pointer;
}
.btn:hover{border-color:rgba(240,127,26,.55);color:var(--ink)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#181b20}
.btn.primary:hover{background:#f79340}

.mix-table{width:100%;border-collapse:collapse;font-size:11px}
.mix-table th{
  text-align:right;color:var(--ink-3);font-weight:600;font-size:9.5px;letter-spacing:.05em;
  padding:6px 10px;border-bottom:1px solid var(--line);text-transform:uppercase;
}
.mix-table th:first-child{text-align:left}
.mix-table td{
  padding:5.5px 10px;text-align:right;font-family:var(--mono);font-size:10.5px;color:var(--ink-2);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.mix-table td.mat{text-align:left;font-family:var(--sans);font-weight:600;color:var(--ink-2)}
.mix-table td .mixbar{
  display:inline-block;height:7px;border-radius:2px;background:var(--brand);opacity:.75;
  vertical-align:middle;margin-right:6px;
}
.mix-table tr.total td{border-top:1px solid var(--line-strong);color:var(--ink);font-weight:600}
.mix-table td.delta-up{color:#4fc24f}
.mix-table td.delta-down{color:#ee8a89}
.mix-table input{
  width:52px;background:var(--raised);border:1px solid var(--line-strong);border-radius:5px;
  color:var(--ink);font:500 10.5px var(--mono);padding:3px 6px;text-align:right;outline:none;
}
.mix-table input:focus{border-color:rgba(240,127,26,.6)}
.mix-table input.dirty{border-color:rgba(201,133,0,.6);background:rgba(201,133,0,.07)}
.editor-foot{display:flex;gap:8px;align-items:center;padding:10px 12px;border-top:1px solid var(--line);flex:none}
.editor-foot .note{font-size:10px;color:var(--ink-3);margin-left:auto}

/* pre-approved recipe cards */
.recipe-card{
  border-bottom:1px solid rgba(255,255,255,.05);padding:10px 12px;display:flex;gap:10px;align-items:flex-start;
}
.recipe-card .rc-body{min-width:0;flex:1}
.recipe-card .rc-name{font-size:11.5px;font-weight:700;color:var(--ink)}
.recipe-card .rc-name .rc-id{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);font-weight:500;margin-left:6px}
.recipe-card .rc-note{font-size:10.5px;color:var(--ink-3);margin:2px 0 6px}
.recipe-card .rc-mix{display:flex;height:8px;border-radius:3px;overflow:hidden;gap:1px}
.recipe-card .rc-mix i{display:block;height:100%}
.recipe-card.active-card{background:rgba(240,127,26,.05)}
.recipe-card .btn{flex:none;margin-top:2px}
.rc-live{font-size:9px;font-weight:700;letter-spacing:.1em;color:#4fc24f;font-family:var(--mono);flex:none;margin-top:6px}

/* change log */
.log-item{
  padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.05);font-size:10.5px;color:var(--ink-3);
  display:flex;gap:9px;align-items:flex-start;
}
.log-item .li-dot{width:7px;height:7px;border-radius:50%;margin-top:3px;flex:none}
.log-item b{color:var(--ink-2)}
.log-item .li-meta{font-family:var(--mono);font-size:9px;color:var(--ink-3);display:block;margin-top:2px}
.log-status{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;padding:1.5px 6px;border-radius:4px;border:1px solid var(--line-strong);margin-left:6px}
.log-status.active{color:#e0a83a;border-color:rgba(201,133,0,.5)}
.log-status.reverted{color:var(--ink-3)}
.log-status.auto{color:#4fc24f;border-color:rgba(12,163,12,.4)}

/* cost attribution */
.attr-row{display:flex;align-items:center;gap:9px;padding:5px 12px;font-size:10.5px;color:var(--ink-2)}
.attr-row .ar-label{width:132px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attr-row .ar-bar{flex:1;height:9px;border-radius:2px;background:var(--raised-2);overflow:hidden}
.attr-row .ar-bar i{display:block;height:100%;border-radius:2px;background:#5a89c9}
.attr-row.crane .ar-bar i{background:#e0a83a}
.attr-row .ar-val{font-family:var(--mono);font-size:9.5px;color:var(--ink-2);width:48px;text-align:right;flex:none}
.attr-note{font-size:9.5px;color:var(--ink-3);padding:7px 12px 10px;line-height:1.4}

@media (max-width:1250px){
  .main.recipes{grid-template-columns:1fr 1fr}
  .summary-strip{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:920px){
  .main.recipes{grid-template-columns:1fr}
}

/* ---------- heat queue (recipe control) ---------- */
.queue-row{
  display:flex;align-items:center;gap:10px;padding:7px 12px;
  border-bottom:1px solid rgba(255,255,255,.05);font-size:11px;
}
.queue-row.in-change{background:rgba(201,133,0,.05)}
.q-status{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid;border-radius:4px;padding:1.5px 6px;flex:none;width:58px;text-align:center;
}
.q-heat{font-family:var(--mono);font-size:10.5px;color:var(--ink);flex:none}
.q-recipe{color:var(--ink-2);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-recipe .q-id{font-family:var(--mono);font-weight:500;font-size:9px;color:var(--ink-3);margin-left:6px}
.queue-row.in-change .q-recipe{color:#e0a83a}
.q-eta{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--ink-3);flex:none}
.queue-revert{
  padding:5px 12px;font-size:10px;color:var(--ink-3);border-bottom:1px solid rgba(255,255,255,.05);
  background:rgba(201,133,0,.03);font-weight:600;
  box-shadow:inset 3px 0 0 rgba(201,133,0,.35);
}

/* ---------- compliance page ---------- */
.main.compliance{grid-template-columns:minmax(320px,3fr) minmax(420px,4.4fr) minmax(300px,2.9fr)}

.seg-toggle{display:inline-flex;border:1px solid var(--line-strong);border-radius:6px;overflow:hidden;margin-left:auto}
.seg-toggle button{
  background:none;border:none;color:var(--ink-3);font:600 9.5px var(--sans);
  padding:3.5px 10px;cursor:pointer;letter-spacing:.04em;
}
.seg-toggle button.on{background:var(--raised-2);color:var(--ink)}

/* crew leaderboard */
.crew-row{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.05)}
.crew-row .cr-head{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
.crew-row .cr-name{font-family:var(--display);font-size:14px;color:var(--ink);letter-spacing:.04em}
.crew-row .cr-you{font-size:8.5px;font-weight:700;color:var(--brand);font-family:var(--mono);letter-spacing:.08em}
.crew-row .cr-cost{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink)}
.crew-row .cr-bar{display:flex;height:9px;border-radius:2px;overflow:hidden;gap:1px;margin-bottom:5px}
.crew-row .cr-bar i{display:block;height:100%}
.crew-row .cr-meta{font-size:9.5px;color:var(--ink-3)}
.crew-row .cr-meta b{color:var(--ink-2);font-weight:600}
.legend-strip{display:flex;gap:11px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--line)}
.legend-strip .lg{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--ink-3);font-weight:600}
.legend-strip .lg i{width:8px;height:8px;border-radius:2px}

/* heats table */
.heat-row{
  display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.05);font-size:11px;
}
.heat-row:hover{background:var(--raised)}
.heat-row .h-no{font-family:var(--mono);font-size:10.5px;color:var(--ink);width:66px;flex:none}
.heat-row .h-time{font-family:var(--mono);font-size:9px;color:var(--ink-3);width:76px;flex:none}
.h-status{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid;border-radius:4px;padding:1.5px 6px;flex:none;width:56px;text-align:center;
}
.h-status.tapped{color:#8a94a0;border-color:rgba(255,255,255,.18)}
.h-status.melting{color:#e0a83a;border-color:rgba(201,133,0,.5);animation:chipglow 1.6s ease-in-out infinite}
.h-status.loading{color:#3987e5;border-color:rgba(57,135,229,.5)}
.heat-row .h-bars{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pa-bar{display:flex;height:6px;border-radius:2px;overflow:hidden;gap:1px}
.pa-bar i{display:block;height:100%}
.pa-bar.plan{opacity:.45}
.heat-row .h-diff{font-family:var(--mono);font-size:10px;width:44px;text-align:right;flex:none}
.heat-row .h-dev{font-size:9.5px;color:var(--ink-3);width:110px;flex:none;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.heat-row .h-dev b{font-weight:600}
.heat-row .h-caret{color:var(--ink-3);font-size:9px;flex:none;transition:transform .2s}
.heat-row.open .h-caret{transform:rotate(90deg)}
.heat-detail{border-bottom:1px solid rgba(255,255,255,.05);background:var(--raised);padding:6px 12px 10px}
.heat-detail table{width:100%;border-collapse:collapse;font-size:10px}
.heat-detail th{color:var(--ink-3);font-weight:600;font-size:9px;text-align:right;padding:3px 8px;border-bottom:1px solid var(--line)}
.heat-detail th:first-child{text-align:left}
.heat-detail td{padding:3px 8px;text-align:right;font-family:var(--mono);font-size:9.5px;color:var(--ink-2);border-bottom:1px solid rgba(255,255,255,.04)}
.heat-detail td.mat{text-align:left;font-family:var(--sans);font-weight:600}
.heat-detail td.pos{color:#ee8a89}
.heat-detail td.neg{color:#4fc24f}
.plan-change-divider{
  display:flex;align-items:flex-start;gap:9px;padding:8px 12px;
  border-left:3px solid #e0a83a;background:rgba(201,133,0,.07);
  border-bottom:1px solid rgba(255,255,255,.05);font-size:10.5px;color:var(--ink-2);
}
.plan-change-divider .pcd-icon{color:#e0a83a;flex:none;margin-top:1px}
.plan-change-divider b{color:#e0a83a}
.plan-change-divider .pcd-diff{font-family:var(--mono);font-size:9px;color:var(--ink-3);display:block;margin-top:2px}

@media (max-width:1250px){
  .main.compliance{grid-template-columns:1fr 1fr}
}
@media (max-width:920px){
  .main.compliance{grid-template-columns:1fr}
}

/* ---------- ScrapChef rail (app shell) ---------- */
body{display:flex;align-items:stretch}
.app{flex:1;min-width:0}
#sc-rail{
  width:360px;flex:none;background:var(--panel);border-left:1px solid var(--line);
  max-width:100vw;display:flex;flex-direction:column;height:100dvh;position:sticky;top:0;
}
.rail-backdrop{display:none}
.rail-head{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);flex:none}
.rail-head .icon{color:var(--brand);display:flex}
.rail-head .icon svg{width:14px;height:14px}
.rail-head h2{
  font-family:var(--display);font-weight:500;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.rail-head .rail-collapse{margin-left:auto;width:26px;height:26px;border:none}
.rail-head .rail-collapse svg{width:13px;height:13px}
.rail-body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#333941 transparent}
.rail-body::-webkit-scrollbar{width:8px}
.rail-body::-webkit-scrollbar-thumb{background:#2c313a;border-radius:4px}
#sc-rail .chat-suggest{padding:8px 12px 6px}
body.rail-collapsed #sc-rail{display:none}
#sc-rail-tab{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:40;
  writing-mode:vertical-rl;background:var(--brand);color:#181b20;border:none;
  border-radius:8px 0 0 8px;padding:14px 5px;font:700 9.5px var(--sans);
  letter-spacing:.14em;cursor:pointer;display:none;
}
#sc-rail-tab:hover{background:#f79340}
body.rail-collapsed #sc-rail-tab{display:block}
body:not(.rail-collapsed) .settings-pop{right:376px}
@media (max-width:1100px){
  #sc-rail{position:fixed;right:0;top:0;z-index:60;box-shadow:-16px 0 40px rgba(0,0,0,.55);height:100dvh}
  .rail-resize{display:none}
  body:not(.rail-collapsed) .rail-backdrop{
    display:block;position:fixed;inset:0;z-index:55;border:0;background:rgba(3,5,7,.68);cursor:pointer;
  }
  body:not(.rail-collapsed) .settings-pop{right:16px}
}
@media (max-width:480px){
  #sc-rail{width:100vw !important}
  .rail-head{padding-left:12px;padding-right:10px}
}

/* two-column grids now that chat lives in the rail */
.main.recipes{grid-template-columns:minmax(380px,1.12fr) minmax(340px,1fr)}
.main.compliance{grid-template-columns:minmax(320px,1fr) minmax(430px,1.5fr)}
@media (max-width:1250px){
  .main.recipes,.main.compliance{grid-template-columns:1fr}
}

/* header space management: compress instead of wrapping when zoomed / rail open */
@media (max-width:1500px){
  header{gap:10px}
  .logo svg{height:14px}
  .topnav a,.nav-drop-btn{padding:6px 10px;font-size:12px}
  .clock .time{font-size:13px}
  .clock .shift{font-size:9.5px}
}
header .topnav a,header .nav-drop-btn,.clock .shift,.clock .time{white-space:nowrap}
@media (max-width:1330px){ .clock .shift{display:none} }
@media (max-width:1250px) and (min-width:1101px){ .live-pill{display:none} }
@media (max-width:1800px){ .head-title .sub{display:none} .head-divider{display:none} }
@media (max-width:1100px){ .loop-legend{display:none} }

/* heat status refinements */
.h-status{width:auto;min-width:56px;white-space:nowrap}
.q-crane{
  font-family:var(--mono);font-size:8.5px;color:#7db2ef;border:1px solid rgba(57,135,229,.4);
  border-radius:4px;padding:1px 5px;flex:none;letter-spacing:.05em;
}
.queue-end{
  padding:6px 12px;font-size:9.5px;color:var(--ink-3);letter-spacing:.05em;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.queue-row .q-status{animation:none}

/* ---------- grade group tabs + queue tags ---------- */
.gg-tabs{display:flex;gap:6px;padding:10px 12px 0;flex-wrap:wrap;flex:none}
.gg-tab{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  background:var(--raised);border:1px solid var(--line);border-radius:8px 8px 0 0;
  padding:7px 12px 6px;cursor:pointer;font:600 11px var(--sans);color:var(--ink-2);
  border-bottom:none;position:relative;
}
.gg-tab .gg-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px}
.gg-tab.on{background:var(--raised-2);color:var(--ink);border-color:var(--line-strong)}
.gg-tab .gg-sub{font:500 9px var(--mono);color:var(--ink-3);letter-spacing:.03em}
.gg-flag{
  position:absolute;top:-7px;right:8px;font:700 8px var(--mono);letter-spacing:.06em;
  padding:1px 6px;border-radius:99px;text-transform:uppercase;
}
.gg-flag.changed{background:rgba(201,133,0,.9);color:#181b20}
.gg-flag.dirty{background:var(--raised-2);border:1px solid rgba(201,133,0,.6);color:#e0a83a}
.q-gg{
  font-family:var(--mono);font-size:8px;letter-spacing:.07em;border:1px solid;
  border-radius:4px;padding:1px 5px;flex:none;width:44px;text-align:center;
}

/* ---------- embedded editor chat (recipes page) ---------- */
.editor-chat{
  border-top:1px solid var(--line);display:flex;flex-direction:column;
  flex:1.1;min-height:200px;
}
.editor-chat-head{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);flex:none}
.editor-chat-head .icon{color:var(--brand);display:flex}
.editor-chat-head .icon svg{width:13px;height:13px}
.editor-chat-head h2{
  font-family:var(--display);font-weight:500;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.editor-chat-head .tag{margin-left:auto;font-size:10px;color:var(--ink-3);letter-spacing:.05em}
.editor-chat-scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#333941 transparent}
.editor-chat-scroll::-webkit-scrollbar{width:8px}
.editor-chat-scroll::-webkit-scrollbar-thumb{background:#2c313a;border-radius:4px}

/* settings popover offset only applies when the rail exists */
body[data-no-rail] .settings-pop{right:16px}

/* heat queue headings + full grade names */
.queue-head{
  display:flex;gap:10px;padding:7px 12px;flex:none;
  font-size:8.5px;font-weight:700;color:var(--ink-3);letter-spacing:.09em;text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.queue-head span:last-child{margin-left:auto}
.q-heat{width:58px;flex:none}
.q-gg{
  display:flex;align-items:center;gap:5px;width:126px;flex:none;
  font-size:9.5px;font-weight:600;color:var(--ink-2);border:none;padding:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sans);
}
.q-gg i{width:7px;height:7px;border-radius:50%;flex:none}

/* ---------- spreadsheet-style recipe editor ---------- */
.mix-table.sheet th{border-right:1px solid rgba(255,255,255,.04)}
.mix-table.sheet td{border-right:1px solid rgba(255,255,255,.04)}
.mix-table.sheet th:last-child,.mix-table.sheet td:last-child{border-right:none}
.mix-table.sheet tr:hover td{background:rgba(255,255,255,.02)}
.mix-table.sheet td.editable{padding:0;background:rgba(57,135,229,.045)}
.mix-table.sheet td.editable:focus-within{outline:1.5px solid var(--brand);outline-offset:-1.5px;background:rgba(240,127,26,.08)}
.cell-input{
  width:100%;background:transparent;border:none;outline:none;
  font:500 10.5px var(--mono);color:var(--ink);text-align:right;
  padding:5.5px 10px;appearance:textfield;
}
.cell-input::-webkit-inner-spin-button,.cell-input::-webkit-outer-spin-button{-webkit-appearance:none}
.cell-input.dirty{color:#e0a83a;font-weight:700}
.delta-chg{color:#e0a83a !important;font-weight:600}

/* pinned edit-summary message in chat */
.chat-msg.edit-summary{
  border:1px dashed rgba(201,133,0,.5);border-radius:8px;
  padding:7px 11px;background:rgba(201,133,0,.06);width:94%;
}
.es-line i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}
.es-hint{display:block;margin-top:4px;color:var(--ink-3);font-size:10px}

/* recipe editor: table gets its full height, chat takes the remainder */
.main.recipes #active-body{flex:0 0 auto;overflow:visible}
.main.recipes .editor-chat{flex:1;min-height:150px}
.main.recipes .mix-table td{padding:3.5px 10px}
.main.recipes .cell-input{padding:3.5px 10px}
.main.recipes .mix-table th{padding:5px 10px}

/* ---------- editor toolbar (layering modes) ---------- */
.editor-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 12px 0;flex:none;
}
.editor-toolbar .tb-note{font-size:10px;color:var(--ink-3)}
.table-hint{
  font-size:9.5px;color:var(--ink-3);text-align:left !important;
  font-family:var(--sans) !important;padding-top:6px !important;border-bottom:none !important;
}

/* ---------- layering modal ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:100;background:rgba(6,8,10,.7);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.modal-overlay[hidden]{display:none}
.modal{
  background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;
  width:min(780px,94vw);max-height:88vh;display:flex;flex-direction:column;
  box-shadow:0 24px 64px rgba(0,0,0,.6);
}
.modal-head{display:flex;align-items:center;gap:10px;padding:13px 16px 4px}
.modal-head h3{
  font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);flex:1;
}
.modal-head .icon-btn{border:none;font-size:13px}
.modal-sub{font-size:10px;color:var(--ink-3);padding:0 16px 10px;border-bottom:1px solid var(--line)}
.modal-body{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px 16px;
  overflow-y:auto;min-height:0;
}
.modal-foot{
  display:flex;justify-content:flex-end;gap:8px;padding:11px 16px;border-top:1px solid var(--line);
}
.charge-col{background:var(--raised);border:1px solid var(--line);border-radius:9px;padding:9px;align-self:start}
.charge-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);padding:2px 4px 8px;
}
.charge-head span{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);text-transform:none;letter-spacing:0}
.layer-row{
  display:flex;align-items:center;gap:7px;padding:4px 4px;
  border-top:1px solid rgba(255,255,255,.05);
}
.layer-weight-readout{display:inline-flex;align-items:center;justify-content:flex-end;gap:9px;margin-left:auto}
.layer-weight-readout .l-lbs{min-width:80px;text-align:right}
.layer-weight-bar{width:72px;height:8px;gap:0;background:var(--raised-2);flex:none}
.layer-weight-bar i{border-radius:2px}
.layer-row .l-select+.layer-weight-bar{width:46px;flex:none}
.l-num{
  font-family:var(--mono);font-size:9px;color:var(--ink-3);width:16px;text-align:right;flex:none;
}
.l-mat{flex:1;font-size:11px;font-weight:600;color:var(--ink-2)}
.l-lbs{font-family:var(--mono);font-size:10.5px;color:var(--ink)}
.l-select{
  flex:1;background:var(--raised-2);border:1px solid var(--line);border-radius:5px;
  color:var(--ink);font:500 10.5px var(--sans);padding:4px 6px;outline:none;min-width:0;
}
.l-select:focus{border-color:rgba(240,127,26,.6)}
.l-lbs-in{
  width:70px !important;flex:none;background:var(--raised-2);border:1px solid var(--line);
  border-radius:5px;
}
.l-acts{display:flex;gap:2px;flex:none}
.l-acts button{
  background:none;border:1px solid var(--line);border-radius:5px;color:var(--ink-3);
  width:22px;height:22px;cursor:pointer;font-size:10px;padding:0;
}
.l-acts button:hover{color:var(--ink);border-color:rgba(240,127,26,.55)}
.l-acts button:disabled{opacity:.28;cursor:not-allowed;color:var(--ink-3);border-color:var(--line)}
.add-layer{margin-top:8px;width:100%}
.layer-empty{padding:10px;font-size:10.5px;color:var(--ink-3);text-align:center}
@media (max-width:700px){ .modal-body{grid-template-columns:1fr} }

/* layer drag & drop + multi-charge */
.modal{width:min(1000px,94vw)}
.modal-body{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.layer-row[draggable]{cursor:grab}
.layer-row.dragging{opacity:.4}
.layer-row.drop-above{box-shadow:0 -2px 0 var(--brand)}
.layer-row.drop-below{box-shadow:0 2px 0 var(--brand)}
.charge-col.drop-into{outline:1.5px dashed rgba(240,127,26,.6);outline-offset:-1.5px}
.drag-handle{color:var(--ink-3);font-size:12px;flex:none;letter-spacing:-2px}
.charge-col.add-col{
  display:flex;align-items:center;justify-content:center;background:none;
  border-style:dashed;min-height:120px;
}
.l-acts-del{
  background:none;border:1px solid var(--line);border-radius:5px;color:var(--ink-3);
  width:18px;height:18px;cursor:pointer;font-size:9px;padding:0;margin-left:6px;
}
.l-acts-del:hover{color:#ee8a89;border-color:rgba(227,73,72,.5)}

/* ---------- recipe editor layout rework (A/C/D/E) ---------- */
.main.recipes{grid-template-columns:minmax(620px,1.4fr) minmax(340px,1fr)}

/* A: single control row — tabs left, mode/layering right */
.tabs-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px 8px;flex-wrap:wrap;flex:none;border-bottom:1px solid var(--line);
}
.tabs-row .gg-tabs{padding:0}
.tabs-row .editor-toolbar{padding:0;flex:none;justify-content:flex-end}
.tabs-row .gg-tab{border-radius:8px;border-bottom:1px solid var(--line)}
.tabs-row .gg-tab.on{border-color:var(--line-strong)}
.recipe-status:empty{display:none}

/* D: table left, chat right, both full height */
.editor-split{display:flex;flex:1;min-height:0}
.editor-left{flex:1.15;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--line)}
.main.recipes #active-body{flex:1;overflow-y:auto}
.editor-split .editor-chat{flex:1;min-width:0;min-height:0;border-top:none}

/* C: sticky unsaved-edits bar under the table */
.edit-bar{
  display:flex;align-items:center;gap:9px;padding:8px 12px;flex:none;flex-wrap:wrap;
  border-top:1px solid rgba(201,133,0,.45);background:rgba(201,133,0,.07);
  font-size:10.5px;color:var(--ink-2);
}
.edit-bar[hidden]{display:none}
.edit-bar .eb-text{flex:1 1 240px;min-width:0;overflow-wrap:break-word;line-height:1.5}
.edit-bar button{flex:none}
.edit-bar .es-line i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}

/* E: snug numeric columns */
.mix-table.sheet{table-layout:fixed}
.mix-table.sheet th:nth-child(2),.mix-table.sheet th:nth-child(3){width:96px}
.mix-table.sheet th:nth-child(4){width:64px}

@media (max-width:1250px){
  .main.recipes{grid-template-columns:1fr}
  .editor-split{flex-direction:column}
  .editor-left{border-right:none;border-bottom:1px solid var(--line)}
  .editor-split .editor-chat{min-height:260px}
}

/* steel grade column sits right after the heat id */
.q-grade{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);width:80px;flex:none}

/* ---------- type scale bump (~+1px, readability at 100% zoom) ---------- */
body{font-size:14px}
.head-title .sub{font-size:13px}
.topnav a{font-size:12.5px}
.clock .time{font-size:16px}
.clock .shift,.live-pill{font-size:11.5px}
.panel-head h2{font-size:13px}
.panel-head .tag{font-size:11px}
.sum-tile .label,.kpi .label{font-size:12px}
.sum-tile .val{font-size:21px}
.gg-tab{font:600 12px var(--sans)}
.gg-tab .gg-sub{font-size:10px}
.seg-toggle button{font-size:10.5px}
.btn{font-size:11.5px}
.tb-note{font-size:11px}
.change-banner{font-size:12px}
.change-banner .cb-title{font-size:12.5px}
.change-banner .cb-meta{font-size:11.5px}
.change-banner .cb-rem{font-size:11px}
.mix-table{font-size:12px}
.mix-table th{font-size:10.5px}
.mix-table td{font-size:11.5px}
.cell-input{font-size:11.5px}
.table-hint{font-size:10.5px}
.edit-bar{font-size:11.5px}
.queue-head{font-size:9.5px}
.queue-row{font-size:12px}
.q-heat{font-size:11.5px}
.q-status,.h-status{font-size:9.5px}
.q-gg{font-size:10.5px}
.q-recipe .q-id{font-size:10px}
.q-crane{font-size:9.5px}
.queue-revert,.queue-end{font-size:10.5px}
.log-item{font-size:11.5px}
.log-item .li-meta{font-size:10px}
.log-status{font-size:9.5px}
.editor-chat-head h2{font-size:13px}
.chat-msg{font-size:12.5px}
.chat-msg.bot .botname{font-size:10px}
.chip{font-size:11px}
.chat-input input{font:500 13px var(--sans)}
.evt .body .etext{font-size:13px}
.evt .stagepill .sname{font-size:10.5px}
.evt .etime{font-size:10.5px}
.feed-item .who{font-size:11.5px}
.feed-item .msg{font-size:12px}
.kind{font-size:9.5px}
.cot{font-size:12.5px}
.cot-line.tool .cot-text{font-size:11.5px}
.thinking{font-size:12px}
.crew-row .cr-meta,.attr-row{font-size:11.5px}
.attr-note{font-size:10.5px}
.legend-strip .lg{font-size:10px}
.heat-row{font-size:12px}
.heat-row .h-no{font-size:11.5px}
.heat-row .h-dev{font-size:10.5px}
.heat-detail table{font-size:11px}
.heat-detail td{font-size:10.5px}
.plan-change-divider{font-size:11.5px}
.rkpi .rl{font-size:10px}
.rtable{font-size:11px}
.rtable td{font-size:10.5px}
.charge-head{font-size:12px}
.charge-head span{font-size:10.5px}
.l-mat{font-size:12px}
.l-lbs{font-size:11.5px}
.l-select{font:500 11.5px var(--sans)}
.l-num{font-size:10px}
.modal-sub{font-size:11px}
.settings-pop .set-opt{font-size:12.5px}
.set-label{font-size:11.5px}

/* ---------- type scale bump 2 — comfortable at 100% zoom ---------- */
body{font-size:15px}
.head-title .sub{font-size:14px}
.topnav a{font-size:13.5px}
.clock .time{font-size:17px}
.clock .shift,.live-pill{font-size:12px}
.panel-head h2,.editor-chat-head h2{font-size:13.5px}
.panel-head .tag{font-size:11.5px}
.sum-tile .label,.kpi .label{font-size:12.5px}
.sum-tile .val{font-size:22px}
.gg-tab{font:600 13px var(--sans)}
.gg-tab .gg-sub{font-size:10.5px}
.seg-toggle button{font-size:11.5px}
.btn{font-size:12.5px}
.tb-note{font-size:12px}
.change-banner{font-size:13px}
.change-banner .cb-title{font-size:13.5px}
.change-banner .cb-meta{font-size:12.5px}
.change-banner .cb-rem{font-size:12px}
.mix-table{font-size:13px}
.mix-table th{font-size:11.5px}
.mix-table td{font-size:12.5px;padding:5px 10px}
.main.recipes .mix-table td{padding:5px 10px}
.cell-input{font-size:12.5px;padding:4.5px 10px}
.table-hint{font-size:11.5px}
.edit-bar{font-size:12.5px}
.queue-head{font-size:10.5px}
.queue-row{font-size:13px;padding:8px 12px}
.q-heat{font-size:12.5px}
.q-status,.h-status{font-size:10.5px}
.q-gg{font-size:11.5px;width:134px}
.q-grade{font-size:11.5px}
.q-recipe .q-id{font-size:10.5px}
.q-crane{font-size:10.5px}
.queue-revert,.queue-end{font-size:11.5px}
.log-item{font-size:12.5px;padding:9px 12px}
.log-item .li-meta{font-size:10.5px}
.log-status{font-size:10px}
.chat-msg{font-size:13.5px}
.chat-msg.bot .botname{font-size:10.5px}
.chip{font-size:12px;padding:4.5px 12px}
.chat-input input{font:500 14px var(--sans)}
.evt .body .etext{font-size:14px}
.evt .stagepill .sname{font-size:11px}
.evt .etime{font-size:11px}
.feed-item .who{font-size:12.5px}
.feed-item .msg{font-size:13px}
.kind{font-size:10.5px}
.cot{font-size:13.5px}
.cot-line.tool .cot-text{font-size:12.5px}
.thinking{font-size:13px}
.crew-row .cr-meta,.attr-row{font-size:12.5px}
.attr-note{font-size:11.5px}
.legend-strip .lg{font-size:11px}
.heat-row{font-size:13px}
.heat-row .h-no{font-size:12.5px}
.heat-row .h-dev{font-size:11.5px}
.heat-detail table{font-size:12px}
.heat-detail td{font-size:11.5px}
.plan-change-divider{font-size:12.5px}
.rkpi .rl{font-size:10.5px}
.rtable{font-size:12px}
.rtable td{font-size:11.5px}
.charge-head{font-size:13px}
.charge-head span{font-size:11.5px}
.l-mat{font-size:13px}
.l-lbs{font-size:12.5px}
.l-select{font:500 12.5px var(--sans)}
.l-lbs-in{width:80px !important}
.l-num{font-size:10.5px}
.modal-sub{font-size:12px}
.settings-pop .set-opt{font-size:13.5px}
.set-label{font-size:12.5px}

/* ---------- compliance: scrapeye-style monthly view ---------- */
.page-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4px 0;flex:none}
.page-title h1{
  font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);
}
.pt-sub{font-size:12.5px;color:var(--ink-3)}
.month-stepper{
  display:flex;align-items:center;gap:2px;background:var(--panel);
  border:1px solid var(--line-strong);border-radius:9px;padding:3px;
}
.month-stepper button{
  background:none;border:none;color:var(--ink-2);width:30px;height:28px;border-radius:6px;
  cursor:pointer;font-size:16px;line-height:1;
}
.month-stepper button:hover:not(:disabled){background:var(--raised-2);color:var(--ink)}
.month-stepper button:disabled{opacity:.3;cursor:default}
.month-stepper span{
  font:600 13px var(--sans);color:var(--ink);min-width:118px;text-align:center;
}

.comp-top{display:grid;grid-template-columns:minmax(360px,2fr) minmax(420px,3fr);gap:10px;flex:none}
.mtd-body{display:flex;align-items:center;gap:20px;padding:14px 18px}
.donut-wrap{position:relative;width:190px;height:190px;flex:none}
.donut-wrap svg{width:100%;height:100%}
.donut-center{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
}
.dc-val{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--ink)}
.dc-label{font-size:11px;color:var(--ink-3)}
.donut-legend{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.dl-row{
  display:flex;align-items:center;gap:9px;background:var(--raised);border:1px solid var(--line);
  border-radius:8px;padding:8px 12px;font-size:12.5px;color:var(--ink-2);
}
.dl-row i,.dl-dot{width:9px;height:9px;border-radius:3px;flex:none;display:inline-block}
.dl-dot{margin-right:7px;vertical-align:-1px}
.dl-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-val{font-family:var(--mono);font-size:12.5px;color:var(--ink)}

.trend-delta{margin-left:auto;font-size:12px;color:var(--ink-3)}
.trend-delta b{font-family:var(--mono);font-size:13px}
.trend-body{padding:10px 14px 0}
.trend-body svg{width:100%;height:190px;display:block}
.trend-x{
  display:flex;justify-content:space-between;padding:4px 14px 10px 44px;
  font-family:var(--mono);font-size:10px;color:var(--ink-3);flex:none;
}

.comp-table{flex:1;min-height:220px}
.card-tabs{
  display:flex;align-items:center;gap:2px;padding:8px 12px 0;border-bottom:1px solid var(--line);flex:none;
}
.card-tabs button[data-tab]{
  background:none;border:none;border-bottom:2px solid transparent;color:var(--ink-3);
  font:600 13px var(--sans);padding:8px 14px;cursor:pointer;
}
.card-tabs button[data-tab]:hover{color:var(--ink-2)}
.card-tabs button[data-tab].on{color:var(--ink);border-bottom-color:var(--brand)}
.card-tabs .seg-toggle{margin-left:auto;margin-bottom:6px}

.lb-head{
  display:flex;gap:14px;padding:9px 16px;font-size:10.5px;font-weight:700;color:var(--ink-3);
  letter-spacing:.09em;text-transform:uppercase;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--panel);z-index:2;
}
.lb-row{
  display:flex;align-items:center;gap:14px;padding:11px 16px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.05);font-size:13px;
}
.lb-row:hover{background:var(--raised)}
.lb-row.static{cursor:default}
.lb-row .h-caret{transition:transform .2s;text-align:center}
.lb-row.open .h-caret{transform:rotate(90deg)}
.lb-crew{font-weight:700;color:var(--ink);display:flex;align-items:center;gap:7px}
.lb-cell{display:flex;align-items:center;gap:9px;min-width:0}
.lb-cell b{font-family:var(--mono);font-weight:600;font-size:12.5px;color:var(--ink);white-space:nowrap}
.lb-num{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.lb-track{
  flex:1;max-width:150px;height:12px;border-radius:3px;background:var(--raised-2);
  overflow:hidden;display:flex;gap:1px;min-width:60px;
}
.lb-track.tall{max-width:none;height:14px}
.lb-track i{display:block;height:100%}
.lb-spark{width:84px;height:24px;flex:none}
.lb-detail{
  padding:8px 16px 12px;background:var(--raised);border-bottom:1px solid rgba(255,255,255,.05);
}
.lb-detail .attr-row{padding:4px 0}
.lb-detail .attr-note{padding:7px 0 0}

@media (max-width:1100px){
  .comp-top{grid-template-columns:1fr}
}
.lb-crew{white-space:nowrap}

/* wider chat rail on analytics pages */
body.wide-rail #sc-rail{width:480px}
@media (max-width:1500px){ body.wide-rail #sc-rail{width:400px} }

/* ---------- crew x material matrix ---------- */
.matrix-table{width:100%;border-collapse:collapse}
.matrix-table th.mx-crew{
  text-align:center;font:600 12.5px var(--sans);color:var(--ink);padding:11px 8px 3px;
}
.matrix-table th.mx-sub{
  text-align:right;font:700 10px var(--sans);letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);padding:4px 12px 8px;border-bottom:1px solid var(--line);
}
.matrix-table th.mx-mat{
  text-align:left;font:700 10px var(--sans);letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);padding:4px 14px 8px;border-bottom:1px solid var(--line);vertical-align:bottom;
}
.matrix-table td{
  padding:7px 12px;text-align:right;font-family:var(--mono);font-size:12px;color:var(--ink-2);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.matrix-table td.mx-mat{
  font-family:var(--sans);font-weight:600;font-size:12.5px;color:var(--ink-2);text-align:left;padding-left:14px;
}
.matrix-table .gs{border-left:1px solid var(--line)}
.matrix-table .mx-sum td{text-align:center;font-weight:600;color:var(--ink);font-size:12.5px}
.matrix-table .mx-sum td.mx-mat{text-align:left}
.matrix-table .mx-sum:first-of-type td{border-top:1px solid var(--line-strong)}

/* matrix summary: factor bar + trend sparkline */
.mx-cell{display:inline-flex;align-items:center;gap:9px;vertical-align:middle}
.mx-bar{
  display:inline-flex;width:110px;height:12px;border-radius:3px;background:var(--raised-2);
  overflow:hidden;gap:1px;flex:none;
}
.mx-bar i{display:block;height:100%}
.mx-spark{width:80px;height:22px;flex:none}
.matrix-table .mx-sum .mx-cell b{font-family:var(--mono);font-size:12.5px}

/* diverging diff bars: left = under plan, right = over plan */
.dpm{display:inline-flex;align-items:center;width:70px;flex:none}
.dpm .h{flex:1;display:flex;height:8px;overflow:hidden}
.dpm .h.l{justify-content:flex-end}
.dpm .h i{display:block;height:100%;border-radius:2px;background:#5a6472}
.dpm .axis{width:1px;height:13px;background:var(--line-strong);flex:none}
.dv{min-width:30px;text-align:right;font-weight:500}
.trend-body svg{height:190px}

/* ---------- heat queue v2: selectable grid ---------- */
.qgrid{
  display:grid;gap:10px;align-items:center;padding:8px 14px;
  grid-template-columns:26px 84px 84px 92px 66px 100px 122px 96px 66px 66px 96px 86px 70px;
  min-width:max-content;
}
.queue-scroll{overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:#333941 transparent}
.queue-scroll .qhead{position:sticky;top:0;z-index:2;background:var(--panel)}
.queue-scroll:focus-visible{outline:1.5px solid rgba(240,127,26,.7);outline-offset:-2px}
.qhead{
  font-size:10.5px;font-weight:700;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--line);flex:none;padding-top:9px;padding-bottom:9px;
}
.qhead>span{line-height:1.25}
.qgrid .num{text-align:right}
.qrow{border-bottom:1px solid rgba(255,255,255,.05);font-size:13px}
.qrow[data-selectable="true"]{cursor:pointer}
.qrow[data-selectable="true"]:hover{background:var(--raised)}
.qrow.sel{background:rgba(240,127,26,.08)}
.qrow.sel:hover{background:rgba(240,127,26,.11)}
.qrow.in-change{box-shadow:inset 3px 0 0 rgba(201,133,0,.6)}
.qrow.inelig{opacity:.45}
.qcheck{accent-color:var(--brand);width:14px;height:14px;cursor:pointer}
.qcheck:disabled{cursor:default;opacity:.4}
.q-state{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.18);border-radius:4px;padding:1.5px 7px;color:#8a94a0;
}
.q-state.chg{color:#e0a83a;border-color:rgba(201,133,0,.55)}
.q-cranes{font-size:12px;color:var(--ink-3)}
.q-num{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.q-time{font:500 11.5px var(--mono);color:var(--ink-3);white-space:nowrap}
.q-pva{display:flex;justify-content:flex-end}
.q-cost-factor{display:inline-flex;flex-direction:column;align-items:flex-end;gap:3px;white-space:nowrap}
.q-cost-factor .mx-bar{width:64px;height:7px;flex:none}
.q-cost-factor b{text-align:right;font:600 11.5px var(--mono);line-height:1}
/* keep the queue quiet: the factor bar carries the signal, the value stays neutral */
.q-cost-factor b.cost-up,.q-cost-factor b.cost-down,.q-cost-factor b.cost-flat{color:var(--ink-2) !important}
.q-cost-pending{color:var(--ink-3);font-size:11.5px}
.q-disclose{
  width:23px;height:23px;display:grid;place-items:center;background:transparent;border:1px solid transparent;
  border-radius:5px;color:var(--ink-3);font:500 19px/1 var(--sans);cursor:pointer;transition:transform .18s,border-color .18s,color .18s;
}
.q-disclose:hover,.q-disclose:focus-visible{border-color:var(--line-strong);color:var(--ink)}
.qrow.open .q-disclose{transform:rotate(90deg);color:var(--brand)}
.q-video-btn{
  display:inline-grid;place-items:center;width:30px;height:27px;margin-left:auto;border:1px solid var(--line-strong);
  border-radius:6px;background:var(--raised);color:var(--ink-2);cursor:pointer;
}
.q-video-btn:hover,.q-video-btn:focus-visible{border-color:rgba(240,127,26,.55);color:var(--brand)}
.q-video-btn svg{width:15px;height:15px}
.queue-history-toggle{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-width:1268px;padding:7px 14px;
  border:0;border-bottom:1px solid var(--line);background:rgba(255,255,255,.018);color:var(--ink-3);
  font:600 11.5px var(--sans);cursor:pointer;
}
.queue-history-toggle:hover,.queue-history-toggle:focus-visible{background:var(--raised);color:var(--ink)}
.queue-history-toggle span{color:var(--brand);font:600 15px var(--mono)}
.queue-change-event,.queue-revert,.queue-shift-event{
  display:flex;align-items:center;gap:10px;min-width:1268px;padding:7px 14px;font-size:12px;font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.queue-change-event{
  color:#e0a83a;background:rgba(201,133,0,.055);
  box-shadow:inset 3px 0 0 rgba(201,133,0,.6);
}
.queue-change-event b{color:var(--ink)}
.qce-icon{color:#e0a83a;font-weight:700;flex:none}
.qce-sentence{color:var(--ink-2);font-weight:500}
.qce-sentence b{font-weight:600}
.qce-sentence .cost-up,.qce-sentence .cost-down,.qce-sentence .cost-flat{font-family:var(--mono)}
.qce-sentence .event-warn{color:#ee8a89}
.queue-shift-event{color:#7db2ef;background:rgba(57,135,229,.055);border-top:1px solid rgba(57,135,229,.22);border-bottom-color:rgba(57,135,229,.22)}
.queue-shift-event b{color:var(--ink)}
.queue-shift-event span:last-child{color:var(--ink-2)}
.event-clear{color:#4fc24f}.event-warn{color:#ee8a89}
.queue-heat-detail{min-width:1268px;padding:12px 14px 14px 42px;background:var(--raised);border-bottom:1px solid var(--line)}
.qhd-table{width:840px;table-layout:fixed}
.qhd-table th.mx-mat,.qhd-table td.mx-mat{width:30%}
.qhd-table td.mx-mat i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:8px}
.qhd-table .mx-num{font-family:var(--mono)}
.qhd-weight-cell{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px}
.qhd-weight-cell b{min-width:31px;text-align:right;font-weight:500}
.qhd-weight-bar{display:block;width:62px;height:8px;border-radius:2px;background:rgba(90,100,114,.12);overflow:hidden}
.qhd-weight-bar i{display:block;height:100%;border-radius:2px;background:#5a6472}
.qhd-table .dpm{width:64px}
.qhd-table .qhd-total td{border-top:1px solid var(--line-strong);border-bottom:0;text-align:right}
.qhd-table .qhd-total td.mx-mat{text-align:left}

/* shimmer on live statuses */
.q-status.melting,.q-status.loading{position:relative;overflow:hidden}
.q-status.melting::after,.q-status.loading::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.28) 50%,transparent 75%);
  background-size:220% 100%;animation:shim 1.9s linear infinite;
}
@keyframes shim{from{background-position:190% 0}to{background-position:-90% 0}}

/* ---------- edit / suggestion modal ---------- */
.modal.em{width:min(1280px,96vw);max-height:92vh}
.em-sub{font-size:12px;color:var(--ink-3);margin-right:auto;padding-left:4px}
.em-body{display:flex;flex:1;min-height:0}
.em-content{flex:1;min-width:0;overflow-y:auto;padding:14px 18px 18px;scrollbar-width:thin}
.em-chat{
  width:330px;flex:none;border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;
}
.em-evidence{position:relative;border-radius:9px;overflow:hidden;margin-bottom:12px;border:1px solid var(--line)}
.em-evidence img{width:100%;height:170px;object-fit:cover;display:block;filter:saturate(.8) brightness(.9)}
.em-evidence .ev-cap{
  position:absolute;left:0;right:0;bottom:0;padding:6px 10px;
  font-family:var(--mono);font-size:10.5px;color:#f2984a;letter-spacing:.05em;
  background:linear-gradient(rgba(10,12,15,0),rgba(10,12,15,.88));
}
.em-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.em-layers-head{
  font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);margin:16px 0 8px;font-weight:500;
}
.em-layers-head span{
  font-family:var(--sans);font-size:10.5px;color:var(--ink-3);text-transform:none;letter-spacing:0;margin-left:10px;
}
.em-layers{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.em-layers.is-rebuilding{pointer-events:none;min-height:140px}
.em-layers.is-rebuilding::after{
  content:"Rebuilding layers";position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  padding-top:46px;border-radius:9px;background:rgba(16,19,24,.76);color:var(--ink-2);
  font:600 11px var(--sans);letter-spacing:.04em;backdrop-filter:blur(1.5px);
}
.em-layers.is-rebuilding::before{
  content:"";position:absolute;z-index:3;left:50%;top:50%;width:24px;height:24px;margin:-22px 0 0 -12px;
  border:2px solid rgba(255,255,255,.16);border-top-color:var(--brand);border-radius:50%;animation:layerSpin .65s linear infinite;
}
@keyframes layerSpin{to{transform:rotate(360deg)}}

/* live cost + feasibility assessment in the recipe editor */
.em-impact{display:block;margin-top:14px}
.impact-card{border:1px solid var(--line);border-radius:9px;background:var(--raised);padding:12px 14px;min-width:0}
.impact-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:11.5px;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.impact-head strong{font:600 16px var(--mono);letter-spacing:0;text-transform:none;color:var(--ink)}
.cost-up{color:#e0a83a !important}.cost-down{color:#4fc24f !important}.cost-flat{color:var(--ink-3) !important}
.cost-compare{display:flex;align-items:center;gap:9px;margin-top:11px;color:var(--ink-2);font-size:12.5px}
.cost-compare b{font-family:var(--mono);color:var(--ink);font-weight:600}
.cost-arrow{color:var(--ink-3)}
.impact-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.impact-meta span{border:1px solid var(--line);border-radius:999px;padding:3px 8px;font:500 11.5px var(--mono);color:var(--ink-2)}
.constraint-impact.has-violations{border-color:rgba(227,73,72,.4);background:rgba(227,73,72,.045)}
.constraint-impact.has-violations .impact-head strong{color:#ee8a89}
.constraint-icon{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(227,73,72,.15);color:#ee8a89;font:700 11px var(--mono);flex:none}
tr.viol.soft .constraint-icon{background:rgba(201,133,0,.15);color:#e0a83a}

/* quiet all-clear strip */
.constraint-strip{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:8px 13px;border:1px solid var(--line);border-radius:9px;background:var(--raised);
}
.cs-status{display:flex;align-items:center;gap:8px;font:600 12px var(--sans);color:var(--ink-2);white-space:nowrap}
.cs-tick{color:#4fc24f;font-weight:700}

/* violated / near-limit constraint table */
.constraint-impact.has-near{border-color:rgba(201,133,0,.4);background:rgba(201,133,0,.04)}
.constraint-impact.has-near .impact-head strong{color:#e0a83a}
.ct-wrap{margin-top:10px;max-height:224px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#333941 transparent}
.ct{width:100%;border-collapse:collapse}
.ct td{padding:6.5px 9px;font-size:12.5px;border-top:1px solid rgba(255,255,255,.06);vertical-align:middle}
.ct tr:first-child td{border-top:0}
.ct tr.viol td{background:rgba(227,73,72,.055)}
.ct tr.viol.soft td{background:rgba(201,133,0,.055)}
.ct tr.near td{background:rgba(201,133,0,.03)}
.ct-st{width:28px}
.ct tr.near .constraint-icon{background:rgba(201,133,0,.15);color:#e0a83a}
.ct-name{color:var(--ink);font-weight:600;line-height:1.25}
.ct-name small{display:block;font-size:10.5px;font-weight:500;color:var(--ink-3)}
.ct-band{padding:5px 12px 6px}
.ct-bullet{display:flex;align-items:flex-end;gap:9px}
.ct-lo,.ct-hi{font:500 10.5px var(--mono);font-style:normal;color:var(--ink-3);white-space:nowrap;padding-bottom:1px}
.ct-lo{min-width:44px;text-align:right}
.ct-hi{min-width:64px;text-align:left}
.ct-rail{position:relative;width:170px;height:25px;flex:none}
.ct-rail::before{content:"";position:absolute;left:0;right:0;bottom:1px;height:7px;background:var(--raised-2);border-radius:3px}
.ct-allowed{position:absolute;bottom:1px;height:7px;background:rgba(255,255,255,.15);border-radius:3px}
.ct-mark{position:absolute;bottom:-1px;height:11px;width:2.5px;border-radius:2px;background:#aab3c0;transform:translateX(-50%)}
.ct-mark.off{width:auto;transform:none;font:700 11px/11px var(--mono);background:none;color:#aab3c0}
.ct-vlab{
  position:absolute;top:0;transform:translateX(-50%);
  font:600 10.5px var(--mono);line-height:1;color:#aab3c0;text-decoration:none;white-space:nowrap;
}
.ct tr.near .ct-mark{background:#e0a83a}
.ct tr.viol .ct-mark{background:#ee6a68}
.ct tr.viol.soft .ct-mark{background:#e0a83a}
.ct tr.near .ct-mark.off,.ct tr.viol.soft .ct-mark.off{background:none;color:#e0a83a}
.ct tr.viol .ct-mark.off{background:none;color:#ee6a68}
.ct tr.near .ct-vlab,.ct tr.viol.soft .ct-vlab{color:#e0a83a}
.ct tr.viol .ct-vlab{color:#ee6a68}
.ct tr.viol.soft .ct-vlab{color:#e0a83a}
.ct-binary,.ct-txt{font:500 11.5px var(--mono);color:var(--ink-3);white-space:nowrap}
.ct-txt{display:none}
.ct-tag{text-align:right;white-space:nowrap}
.ct-chip{
  display:inline-block;border-radius:999px;padding:2.5px 9px;
  font:600 9.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;
}
.ct-chip.hard{background:rgba(227,73,72,.14);color:#ee8a89}
.ct-chip.soft{background:rgba(201,133,0,.14);color:#e0a83a}
.ct-chip.near{border:1px solid rgba(201,133,0,.4);color:#e0a83a}

/* transposed totals table */
.tt{width:100%;border-collapse:collapse;table-layout:fixed}
.tt th{
  font:700 10px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);
  padding:5px 6px;text-align:right;border-bottom:1px solid var(--line);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tt th.tt-lab,.tt td.tt-lab{
  text-align:left;width:92px;font:600 11.5px var(--sans);color:var(--ink-2);
  text-transform:none;letter-spacing:0;
}
.tt td{
  padding:5px 6px;text-align:right;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.tt td.editable{padding:0;background:rgba(57,135,229,.05)}
.tt td.editable:focus-within{outline:1.5px solid var(--brand);outline-offset:-1.5px;background:rgba(240,127,26,.08)}
.tt-in{width:100%;text-align:right;font-size:11.5px !important;padding:5px 6px}
.tt tr.tt-diff td{color:var(--ink-3)}
.tt th.tt-cost,.tt td.tt-cost{width:118px;border-left:1px solid var(--line-strong);white-space:nowrap}
.tt tr.tt-diff td.tt-cost{font-weight:700}

/* pre-approved recipe cards */
.em-approved{display:flex;gap:8px;flex-wrap:wrap}
.ap-card{
  display:flex;flex-direction:column;gap:2px;background:var(--raised);border:1px solid var(--line);
  border-radius:8px;padding:8px 12px;cursor:pointer;min-width:150px;
}
.ap-card input{display:none}
.ap-card:hover{border-color:var(--line-strong)}
.ap-card.on{border-color:rgba(240,127,26,.6);background:rgba(240,127,26,.06)}
.ap-name{font:700 12.5px var(--sans);color:var(--ink)}
.ap-meta{font:500 10.5px var(--mono);color:var(--ink-3)}

/* ---------- recipe page readability pass ---------- */
.qgrid{grid-template-columns:28px 90px 90px 104px 86px 110px 130px 102px 74px 74px 80px 84px 72px;gap:10px}
.q-recipe-cell .q-state{margin-left:5px}
.qrow{font-size:13.5px;padding-top:10px;padding-bottom:10px}
.qhead{font-size:11px}
.qrow .q-heat{font-size:13px;width:auto}
.qrow .q-grade{font-size:12px;width:auto}
.qrow .q-gg{font-size:12.5px;width:auto}
.qrow .q-num{font-size:12.5px}
.qrow .q-status{font-size:10.5px;padding:3px 9px}
.q-state{font-size:10.5px;padding:3px 9px}
.qrow .q-crane{font-size:10.5px;padding:2px 7px}
.queue-revert,.queue-end,.queue-shift-event{font-size:12px;padding:7px 14px}
.queue-revert,.queue-end,.queue-shift-event{min-width:1268px}

/* Analytics · Heats: shift log (fewer columns than the live queue) */
.qgrid-h{grid-template-columns:28px 90px 64px 64px 86px 110px 74px 88px 84px 84px 80px 84px 72px;gap:10px}
.heats-scroll .queue-change-event,.heats-scroll .queue-revert,.heats-scroll .queue-shift-event,
.heats-scroll .queue-heat-detail{min-width:1162px}
.shift-head b{font-size:13px}
.shift-head .sh-sum{margin-left:auto;color:var(--ink-2);font-weight:500;white-space:nowrap}
.shift-head .sh-sum b{font-family:var(--mono);font-size:12px}

/* ScrapEye video review */
.scrapeye-modal{width:min(920px,94vw);height:auto;max-height:92vh}
.scrapeye-player{position:relative;aspect-ratio:16/8.3;overflow:hidden;background:#090b0e}
.scrapeye-player img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.7) contrast(1.08) brightness(.82);animation:cameraDrift 10s ease-in-out infinite alternate}
.scrapeye-player::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 4px)}
@keyframes cameraDrift{from{transform:scale(1.02) translateX(-.3%)}to{transform:scale(1.055) translateX(.5%)}}
.camera-hud{position:absolute;z-index:1;left:14px;right:14px;top:12px;display:flex;justify-content:space-between;color:#fff;font:600 10.5px var(--mono);text-shadow:0 1px 4px #000}
.camera-hud span{display:flex;align-items:center;gap:7px}.camera-hud i{width:7px;height:7px;border-radius:50%;background:#e34948;box-shadow:0 0 0 3px rgba(227,73,72,.2)}
.video-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(9,11,14,.62);color:#fff;font:600 18px var(--sans);cursor:pointer;backdrop-filter:blur(4px)}
.video-play:hover,.video-play:focus-visible{background:rgba(240,127,26,.75);border-color:var(--brand)}
.video-controls{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:500 10.5px var(--mono);color:var(--ink-3)}
.video-control{width:28px;height:26px;border:1px solid var(--line-strong);border-radius:5px;background:var(--raised);color:var(--ink);cursor:pointer}
.video-track{height:4px;flex:1;border-radius:3px;background:var(--raised-2);overflow:hidden}.video-track i{display:block;height:100%;width:14%;background:var(--brand);border-radius:3px;transition:width .3s linear}
.video-speed{border:1px solid var(--line);border-radius:4px;padding:2px 5px;color:var(--ink-2)}
.video-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
.video-meta span{display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:var(--panel)}
.video-meta small{font-size:9.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}.video-meta b{font:600 12px var(--mono);color:var(--ink)}.video-meta b.ok{color:#4fc24f}

/* modal typography */
.modal-head h3{font-size:14px}
.em-sub{font-size:12.5px}
.em-evidence .ev-cap{font-size:11px}
.tt th{font-size:11px;padding:6px 8px}
.tt td{font-size:12.5px;padding:6.5px 8px}
.tt th.tt-lab,.tt td.tt-lab{font-size:12.5px;width:106px}
.tt-in{font-size:12.5px !important;padding:6.5px 8px}
.ap-name{font-size:13.5px}
.ap-meta{font-size:11px}
.em-layers-head{font-size:12.5px}
.em-layers-head span{font-size:11.5px}
.charge-head{font-size:13.5px}
.charge-head span{font-size:12px}
.layer-row{padding:5px 4px;gap:8px}
.l-mat{font-size:13.5px}
.l-lbs{font-size:13px}
.l-num{font-size:11px}
.l-select{font:500 13px var(--sans)}
.l-lbs-in{font-size:13px !important}

/* bigger edit modal — use the screen */
.modal.em{width:min(1560px,97vw);height:min(900px,94vh);max-height:94vh}
.em-chat{width:380px}
.em-layers{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.em-content{padding:16px 22px 22px}
.tt td{font-size:13px;padding:7.5px 9px}
.tt th{font-size:11.5px;padding:7px 9px}
.tt th.tt-lab,.tt td.tt-lab{font-size:13px}
.tt-in{font-size:13px !important;padding:7.5px 9px}

@media (max-width:760px){
  .modal-overlay{padding:0}
  .modal.em{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
  .scrapeye-modal{width:100vw;max-height:100dvh;border-radius:0}
  .video-meta{grid-template-columns:repeat(2,1fr)}
  .ct-bullet{display:none}
  .ct-txt{display:inline}
  .em-body{flex-direction:column}
  .em-content{padding:12px;min-height:50vh}
  .em-chat{width:100%;min-height:280px;border-left:0;border-top:1px solid var(--line)}
  .em-sub{display:none}
  .modal-head{padding:11px 12px 8px}
  .em-impact{grid-template-columns:1fr}
}

/* ---------- subnav ---------- */
.subnav{display:flex;gap:2px;padding:0 4px;flex:none}
.subnav a{
  color:var(--ink-3);text-decoration:none;font:600 12.5px var(--sans);
  padding:6px 14px;border-radius:8px;
}
.subnav a:hover{color:var(--ink);background:var(--raised)}
.subnav a.on{color:var(--brand);background:rgba(240,127,26,.09)}

/* ---------- placeholder pages ---------- */
.ph-page{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;color:var(--ink-3);padding:40px;text-align:center;
}
.ph-page svg{width:44px;height:44px;opacity:.4}
.ph-page h2{
  font-family:var(--display);font-size:18px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);font-weight:500;
}
.ph-page p{font-size:13.5px;max-width:440px;line-height:1.55}

/* ---------- consistent metric tile heights ---------- */
.kpi,.sum-tile{min-height:92px}
.sum-tile{display:flex;flex-direction:column;justify-content:center;gap:3px}

/* ---------- rail resize + history ---------- */
#sc-rail{position:sticky}
.rail-resize{position:absolute;left:-3px;top:0;bottom:0;width:7px;cursor:col-resize;z-index:30}
.rail-resize:hover{background:rgba(240,127,26,.3)}
body.rail-resizing{user-select:none;cursor:col-resize}
.rail-tool{border:none;width:26px;height:26px}
.rail-tool svg{width:13px;height:13px}
.rail-head .rail-tool:first-of-type{margin-left:auto}
.rail-head .rail-collapse{margin-left:0}
.rail-histpop{
  position:absolute;top:46px;left:10px;right:10px;z-index:40;display:none;
  background:var(--raised);border:1px solid var(--line-strong);border-radius:10px;
  padding:8px;box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.rail-histpop.open{display:block}
.rail-histpop h4{
  font-family:var(--display);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;padding:4px 8px 8px;
}
.hist-item{
  display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;
  background:none;border:none;border-radius:7px;padding:7px 9px;cursor:pointer;
}
.hist-item:hover{background:var(--raised-2)}
.hi-title{font:600 12.5px var(--sans);color:var(--ink-2)}
.hi-when{font:500 10.5px var(--mono);color:var(--ink-3)}

/* subnav lives inside the header row */
header .subnav{display:flex;align-items:center;gap:2px;padding:0}
header .subnav::before{content:"";width:1px;height:18px;background:var(--line-strong);margin:0 10px 0 4px;flex:none}
header .subnav a{font:600 12px var(--sans);padding:5px 11px}
@media (max-width:1250px){ header .subnav::before{display:none} }

/* ---------- dropdown nav (replaces subnav rows) ---------- */
.nav-drop{position:relative}
.nav-drop-btn{
  display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  color:var(--ink-3);font:600 13.5px var(--sans);padding:6px 12px;border-radius:7px;letter-spacing:.03em;
}
.nav-drop-btn:hover{color:var(--ink);background:var(--raised)}
.nav-drop-btn.active{color:var(--ink);background:var(--raised-2)}
.nav-drop-btn .chev{width:11px;height:11px;color:var(--ink-3);margin-top:1px}
.nav-menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:172px;z-index:60;display:none;
  background:var(--raised);border:1px solid var(--line-strong);border-radius:10px;padding:6px;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.nav-drop.open .nav-menu{display:block}
.nav-menu a{
  display:block;padding:7.5px 12px;border-radius:7px;color:var(--ink-2);
  font:600 12.5px var(--sans);text-decoration:none;
}
.nav-menu a:hover{background:var(--raised-2);color:var(--ink)}
.nav-menu a.on{color:var(--brand)}

/* factor · sub-factor breakdown */
.sf-sub{font-weight:500;color:var(--ink-3)}

/* collapsible material breakdown in the crew matrix */
.mx-toggle td{text-align:center;padding:9px;border-bottom:1px solid rgba(255,255,255,.05)}
.mx-toggle .btn{font-size:12px;padding:5px 14px}

/* section break between crew summary and material breakdown */
.mx-break td{height:18px;border-bottom:1px solid var(--line-strong);background:transparent;padding:0}
.matrix-table .mx-break + tr th{padding-top:14px}

/* ---------- Recipes · Crane: cab view ---------- */
.ck-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;flex:none}
.ck-kpi{
  display:flex;flex-direction:column;gap:5px;padding:13px 16px;min-width:0;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
}
.ck-label{font-size:12.5px;font-weight:700;color:var(--ink-3);letter-spacing:.07em;text-transform:uppercase}
.ck-big{font:600 34px/1.05 var(--mono);color:var(--ink);white-space:nowrap}
.ck-kpi small{font-size:13.5px;color:var(--ink-3)}
.ck-loadbar{height:9px;border-radius:5px;background:var(--raised-2);overflow:hidden;margin-top:4px}
.ck-loadbar i{display:block;height:100%;background:var(--brand);border-radius:4px;transition:width .6s}
.ck-main{display:flex;gap:12px;flex:1;min-height:0}
.ck-side{display:flex;flex-direction:column;gap:12px;width:470px;flex:none;min-height:0}
.ck-layers{display:flex;flex-direction:column;gap:8px;padding:14px 16px}
.ck-layer{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:10px;
  background:var(--raised);border:1px solid var(--line);position:relative;
}
.ck-drop{
  position:absolute;right:400px;top:-11px;pointer-events:none;z-index:2;
  font:700 17px var(--mono);color:var(--brand);text-shadow:0 1px 6px rgba(0,0,0,.7);
  animation:ck-drop-float 1.7s ease-out forwards;
}
@keyframes ck-drop-float{
  0%{opacity:0;transform:translateY(0)}
  12%{opacity:1}
  70%{opacity:1}
  100%{opacity:0;transform:translateY(-22px)}
}
.ck-layer.done{opacity:.62}
.ck-layer.active{border-color:rgba(240,127,26,.65);background:rgba(240,127,26,.07);box-shadow:0 0 0 1px rgba(240,127,26,.25)}
.ck-lnum{
  display:grid;place-items:center;width:33px;height:33px;flex:none;border-radius:8px;
  background:var(--raised-2);font:600 15.5px var(--mono);color:var(--ink-3);
}
.ck-layer.active .ck-lnum{background:var(--brand);color:#181b20}
.ck-lmat{font:600 18.5px var(--sans);color:var(--ink);min-width:250px}
.ck-dep-flag{font:600 16px var(--sans);color:#e0a83a;margin-left:8px;white-space:nowrap}
.ck-lbar-wrap{flex:1;min-width:80px;display:flex;align-items:center}
.ck-lbar-note{font:600 12.5px var(--mono);font-style:normal;color:#e0a83a;white-space:nowrap;margin-left:9px}
/* loaded = green; remainder grey while loading; shortfall/excess orange once the layer is done.
   The tick at the bar's right edge marks the planned amount. */
.ck-lbar{display:block;position:relative;height:12px;border-radius:6px;background:var(--raised-2)}
.ck-lbar::after{content:"";position:absolute;right:-1.5px;top:-6px;bottom:-6px;width:3px;border-radius:1.5px;background:#aab3c0;box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.ck-lbar i{display:block;height:100%;background:#4a9c4a;border-radius:5px;transition:width .6s}
.ck-layer.short .ck-lbar{background:rgba(224,168,58,.5)}
.ck-over{display:block;height:12px;flex:none;background:#e0a83a;border-radius:0 6px 6px 0;opacity:.85}
.ck-verified.offplan,.ck-loading-now.offplan{color:#e0a83a}
.ck-llbs{font:500 15.5px var(--mono);color:var(--ink-2);min-width:185px;text-align:right;white-space:nowrap}
.ck-verified{font:600 14.5px var(--sans);color:#4fc24f;min-width:190px;white-space:nowrap}
.ck-loading-now{font:700 14.5px var(--sans);color:var(--brand);min-width:190px;white-space:nowrap}
.ck-upnext{font:500 14.5px var(--sans);color:var(--ink-3);min-width:190px;white-space:nowrap}
.ck-pick{display:flex;flex-direction:column;gap:7px;padding:11px 12px}
.ck-opt{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;text-align:left;
  padding:11px 13px;border-radius:9px;background:var(--raised);border:1px solid var(--line);
  color:var(--ink-2);cursor:pointer;font:500 14px var(--sans);
}
.ck-opt b{font:600 15.5px var(--mono);color:var(--ink)}
.ck-opt em{font-style:normal;font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.ck-opt em.loading{color:#3987e5}
.ck-opt:hover{border-color:var(--line-strong)}
.ck-opt.on{border-color:rgba(240,127,26,.6);background:rgba(240,127,26,.07)}
.ck-deps{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:11px 12px;scrollbar-width:thin}
.ck-deps-empty{font-size:13.5px;color:var(--ink-3);line-height:1.55;padding:2px 2px}
.ck-dep{display:flex;gap:9px;padding:9px 11px;border-radius:8px;background:rgba(201,133,0,.06);border:1px solid rgba(201,133,0,.3)}
.ck-dep-icon{color:#e0a83a}
.ck-dep-copy{display:flex;flex-direction:column;gap:3px;font-size:14px;color:var(--ink)}
.ck-dep-copy small{font-size:12.5px;color:var(--ink-3)}
.ck-dep-btn{
  margin:0 12px 12px;padding:13px;font-size:15px;border-color:rgba(201,133,0,.45);color:#e0a83a;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.ck-dep-btn svg{width:18px;height:18px;flex:none}
.ck-dep-btn:hover{background:rgba(201,133,0,.1)}
.ck-dep-btn.listening{
  border-color:rgba(227,73,72,.55);color:#ee8a89;background:rgba(227,73,72,.1);
  animation:mic-pulse 1.4s ease-in-out infinite;
}
.ck-rec{
  display:flex;align-items:flex-start;gap:9px;margin:0 12px 10px;padding:9px 11px;
  border:1px solid rgba(227,73,72,.4);border-radius:8px;background:rgba(227,73,72,.06);
  font:500 14px var(--sans);color:var(--ink);line-height:1.5;
}
.ck-rec[hidden]{display:none}
.ck-prompt{
  display:flex;flex-direction:column;gap:9px;margin:0 12px 10px;padding:11px 13px;
  border:1px solid rgba(57,135,229,.45);border-radius:9px;background:rgba(57,135,229,.07);
  font:500 14px var(--sans);color:var(--ink);line-height:1.5;
}
.ck-prompt[hidden]{display:none}
.ck-prompt-eye{
  display:flex;align-items:center;gap:7px;font:700 10.5px var(--sans);
  letter-spacing:.1em;text-transform:uppercase;color:#7db2ef;
}
.ck-prompt-eye i{width:8px;height:8px;border-radius:50%;background:#3987e5;animation:mic-pulse 1.6s ease-in-out infinite}
.ck-prompt-btns{display:flex;gap:8px}
.ck-prompt-btns .btn{padding:8px 13px;font-size:13.5px}
.ck-rec i{
  width:8px;height:8px;border-radius:50%;background:#ee6a68;flex:none;margin-top:4px;
  animation:mic-pulse 1.4s ease-in-out infinite;
}
@media (max-width:1250px){
  .ck-kpis{grid-template-columns:repeat(2,1fr)}
  .ck-lmat{min-width:165px;font-size:16.5px}
  .ck-llbs{min-width:150px;font-size:14px}
  .ck-verified,.ck-loading-now,.ck-upnext{min-width:120px;font-size:13px}
  .ck-drop{right:250px}
}
@media (max-width:1020px){
  .ck-main{flex-direction:column}
  .ck-main>.panel{flex:none !important;min-height:auto !important}
  .ck-side{width:100%}
}