/* Salefy — Phase 1 design system. Logical properties only (RTL/LTR native). */
:root{
  --bg:#f5f5f7; --surface:#fff; --surface-2:#f9f9fb; --text:#1d1d1f; --text-2:#5f5f64;
  --line:#e0e0e5; --line-strong:#86868b;
  --accent:#0066cc; --accent-press:#004f9f; --accent-tint:#e8f1fb; --on-accent:#fff;
  --danger:#c1121f; --danger-tint:#fdecee; --success:#1a7339; --success-tint:#e6f4ea;
  --warn:#835000; --warn-tint:#fff3dc; --info-tint:#eef4fb;
  --r-s:8px; --r-m:12px; --r-l:18px; --sp:4px; --tap:44px;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 4px 16px rgba(0,0,0,.06);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Arabic","Segoe UI","Noto Sans Arabic","Geeza Pro",Tahoma,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#000; --surface:#1c1c1e; --surface-2:#242426; --text:#f5f5f7; --text-2:#a6a6ab;
  --line:#38383a; --line-strong:#8e8e93; --accent:#4da3ff; --accent-press:#7bb9ff; --accent-tint:#10263d; --on-accent:#001a33;
  --danger:#ff7b7b; --danger-tint:#3a1518; --success:#53d17a; --success-tint:#12301d;
  --warn:#ffc15a; --warn-tint:#33260a; --info-tint:#14212f; --shadow:none;}}
html[data-theme=dark]{
  --bg:#000; --surface:#1c1c1e; --surface-2:#242426; --text:#f5f5f7; --text-2:#a6a6ab;
  --line:#38383a; --line-strong:#8e8e93; --accent:#4da3ff; --accent-press:#7bb9ff; --accent-tint:#10263d; --on-accent:#001a33;
  --danger:#ff7b7b; --danger-tint:#3a1518; --success:#53d17a; --success-tint:#12301d;
  --warn:#ffc15a; --warn-tint:#33260a; --info-tint:#14212f; --shadow:none;}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.55 var(--font)}
html[lang=ar] body{line-height:1.8}
h1,h2,h3{margin:0;line-height:1.25;letter-spacing:0} html[lang=ar] :is(h1,h2,h3){line-height:1.5}
h1{font-size:28px;font-weight:700} h2{font-size:20px;font-weight:650} h3{font-size:16px;font-weight:650}
p{margin:0} a{color:var(--accent)} button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--text-2)} .small{font-size:14px} .cap{font-size:13px}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block;text-align:start} html[dir=rtl] .ltr{text-align:right}
.num{font-variant-numeric:tabular-nums}
.stack>*+*{margin-block-start:var(--gap,16px)} .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between} .grow{flex:1;min-inline-size:0}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}
html[dir=rtl] .flip,html[dir=ltr] .back{transform:scaleX(-1);display:inline-flex}
.ic{inline-size:20px;block-size:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:240px 1fr;min-block-size:100vh}
.side{background:var(--surface);border-inline-end:1px solid var(--line);padding:20px 12px;position:sticky;inset-block-start:0;block-size:100vh;display:flex;flex-direction:column;gap:20px}
.brand{display:flex;gap:10px;align-items:center;font-weight:700;font-size:19px;padding-inline:10px}
.brand i{inline-size:30px;block-size:30px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:var(--on-accent);font-style:normal;font-size:16px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;gap:12px;align-items:center;min-block-size:var(--tap);padding-inline:12px;border-radius:var(--r-s);color:var(--text);text-decoration:none}
.nav a:hover{background:var(--surface-2)} .nav a[aria-current=page]{background:var(--accent-tint);color:var(--accent);font-weight:600}
.main{min-inline-size:0;display:flex;flex-direction:column}
.top{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 32px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(14px);position:sticky;inset-block-start:0;z-index:5;border-block-end:1px solid var(--line)}
.page{padding:32px;max-inline-size:1080px;inline-size:100%;margin-inline:auto}
.page-head{margin-block-end:24px;display:flex;gap:16px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.page-head p{color:var(--text-2);margin-block-start:4px}
.tabbar{display:none}
@media (max-width:860px){
  .app{grid-template-columns:1fr}.side{display:none}
  .top{padding:10px 16px}.page{padding:20px 16px 96px}h1{font-size:24px}
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;inset-inline:0;inset-block-end:0;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px);border-block-start:1px solid var(--line);z-index:6;padding-block-end:env(safe-area-inset-bottom)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-block-size:56px;font-size:12px;color:var(--text-2);text-decoration:none}
  .tabbar a[aria-current=page]{color:var(--accent);font-weight:600}
}
.auth{min-block-size:100vh;display:grid;place-items:center;padding:24px 16px}
.auth-card{inline-size:min(100%,460px)} .auth .lang{position:fixed;inset-block-start:12px;inset-inline-end:12px}

/* ---------- components ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:24px}
.card.flush{padding:0;overflow:hidden} .card-h{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-block-end:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-block-size:var(--tap);min-inline-size:var(--tap);padding-inline:20px;border-radius:var(--r-m);border:1px solid transparent;background:var(--accent);color:var(--on-accent);font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--accent-press)} .btn.block{inline-size:100%}
.btn.sec{background:var(--accent-tint);color:var(--accent)} .btn.sec:hover{background:color-mix(in srgb,var(--accent) 18%,var(--surface))}
.btn.ghost{background:transparent;color:var(--accent);padding-inline:12px} .btn.ghost:hover{background:var(--accent-tint)}
.btn.line{background:var(--surface);color:var(--text);border-color:var(--line-strong)}
.btn.danger{background:var(--danger)} .btn.danger.sec{background:var(--danger-tint);color:var(--danger)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.btn .spin{inline-size:16px;block-size:16px;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.field{display:flex;flex-direction:column;gap:6px} .field label,.lbl{font-weight:600;font-size:15px}
.field .opt{font-weight:400;color:var(--text-2)} .help{font-size:14px;color:var(--text-2)}
.input,.select,.textarea{min-block-size:var(--tap);padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--r-m);background:var(--surface);inline-size:100%}
.select{appearance:none;padding-inline-end:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
html[dir=rtl] .select{background-position:left 14px center}
.input:focus-visible,.select:focus-visible{outline-offset:0;border-color:var(--accent)}
.field.err .input,.field.err .select{border-color:var(--danger);border-width:2px}
.err-msg{display:flex;gap:6px;color:var(--danger);font-size:14px;font-weight:500}
.input[disabled],.select[disabled]{background:var(--surface-2);color:var(--text-2)}
.form{display:grid;gap:18px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:600px){.grid2{grid-template-columns:1fr}}
.switch{display:inline-flex;align-items:center;gap:12px;min-block-size:var(--tap);cursor:pointer}
.switch input{appearance:none;inline-size:51px;block-size:31px;border-radius:16px;background:var(--line-strong);position:relative;margin:0;cursor:pointer;transition:background .2s}
.switch input::after{content:"";position:absolute;inset-block-start:2px;inset-inline-start:2px;inline-size:27px;block-size:27px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:inset-inline-start .2s}
.switch input:checked{background:var(--success)} .switch input:checked::after{inset-inline-start:22px}
.check{display:inline-flex;gap:10px;align-items:center;min-block-size:var(--tap);cursor:pointer}
.check input{inline-size:22px;block-size:22px;accent-color:var(--accent);margin:0}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:99px;font-size:13px;font-weight:600;background:var(--surface-2);color:var(--text-2);border:1px solid var(--line);white-space:nowrap}
.badge.ok{background:var(--success-tint);color:var(--success);border-color:transparent} .badge.bad{background:var(--danger-tint);color:var(--danger);border-color:transparent}
.badge.warn{background:var(--warn-tint);color:var(--warn);border-color:transparent} .badge.info{background:var(--accent-tint);color:var(--accent);border-color:transparent}
.banner{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-m);background:var(--info-tint);align-items:flex-start}
.banner.bad{background:var(--danger-tint)} .banner.bad .ic{color:var(--danger)} .banner.ok{background:var(--success-tint)} .banner.ok .ic{color:var(--success)}
.banner.warn{background:var(--warn-tint)} .banner.warn .ic{color:var(--warn)} .banner .ic{margin-block-start:2px;color:var(--accent)}
.banner .b-act{margin-inline-start:auto;flex:none}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:56px 24px;max-inline-size:440px;margin-inline:auto}
.empty .ic-big{inline-size:64px;block-size:64px;border-radius:50%;background:var(--accent-tint);color:var(--accent);display:grid;place-items:center}
.empty .ic-big .ic{inline-size:30px;block-size:30px} .empty p{color:var(--text-2)} .empty.bad .ic-big{background:var(--danger-tint);color:var(--danger)}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-m);padding:3px}
.seg a,.seg button{min-block-size:38px;min-inline-size:44px;padding-inline:16px;border:0;background:none;border-radius:9px;color:var(--text);text-decoration:none;display:inline-flex;align-items:center;font-weight:500;cursor:pointer}
.seg [aria-current=true],.seg [aria-pressed=true]{background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.15);font-weight:650}
.tbl-wrap{overflow-x:auto} table{border-collapse:collapse;inline-size:100%}
th{font-size:13px;font-weight:600;color:var(--text-2);text-align:start;padding:10px 16px;background:var(--surface-2);border-block-end:1px solid var(--line);white-space:nowrap}
td{padding:12px 16px;border-block-end:1px solid var(--line);vertical-align:middle;text-align:start} tr:last-child td{border-block-end:0}
td.min,th.min{inline-size:1%;white-space:nowrap}
@media(max-width:700px){.rtable thead{display:none}.rtable,.rtable tbody,.rtable tr,.rtable td{display:block}
  .rtable tr{padding:12px 16px;border-block-end:1px solid var(--line)}.rtable td{border:0;padding:3px 0}
  .rtable td[data-l]::before{content:attr(data-l-cur);display:block;font-size:12px;color:var(--text-2)}}
.stepper{display:flex;gap:8px;list-style:none;margin:0 0 24px;padding:0;counter-reset:s}
.stepper li{flex:1;display:flex;gap:10px;align-items:center;font-size:14px;color:var(--text-2);min-inline-size:0}
.stepper li::before{counter-increment:s;content:counter(s);flex:none;inline-size:28px;block-size:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line-strong);font-weight:600;font-size:13px}
html[lang=ar] .stepper li::before{content:counter(s,arabic-indic)}
.stepper li[aria-current=step]{color:var(--text);font-weight:650}.stepper li[aria-current=step]::before{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.stepper li.done::before{content:"✓";background:var(--success);color:#fff;border-color:var(--success)}
.stepper li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){.stepper li:not([aria-current=step]) span{display:none}.stepper li{flex:none}.stepper li[aria-current=step]{flex:1}}
.drop{border:2px dashed var(--line-strong);border-radius:var(--r-l);padding:48px 24px;text-align:center;background:var(--surface);display:flex;flex-direction:column;align-items:center;gap:10px}
.drop.over{border-color:var(--accent);background:var(--accent-tint);border-style:solid} .drop.bad{border-color:var(--danger);background:var(--danger-tint)}
.progress{block-size:8px;background:var(--line);border-radius:99px;overflow:hidden}.progress>i{display:block;block-size:100%;background:var(--accent);border-radius:inherit}
.progress.indet>i{inline-size:35%;animation:ind 1.2s ease-in-out infinite}
@keyframes ind{from{margin-inline-start:-35%}to{margin-inline-start:100%}}
.skel{background:linear-gradient(90deg,var(--line),var(--surface-2),var(--line));background-size:200% 100%;animation:sh 1.4s infinite;border-radius:6px;block-size:14px}
@keyframes sh{to{background-position:-200% 0}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:16px 18px}
.stat b{display:block;font-size:32px;line-height:1.2;font-variant-numeric:tabular-nums} .stat span{font-size:14px;color:var(--text-2)}
.stat.ok b{color:var(--success)} .stat.warn b{color:var(--warn)} .stat.bad b{color:var(--danger)}
.dlg-back{position:fixed;inset:0;background:rgba(0,0,0,.4);display:grid;place-items:center;padding:16px;z-index:20}
.dlg{background:var(--surface);border-radius:var(--r-l);inline-size:min(100%,520px);max-block-size:90vh;overflow:auto;padding:24px;box-shadow:var(--shadow)}
@media(max-width:600px){.dlg-back{place-items:end center;padding:0}.dlg{border-end-start-radius:0;border-end-end-radius:0;inline-size:100%}}
.toast{position:fixed;inset-block-end:24px;inset-inline-start:50%;transform:translateX(-50%);background:#1d1d1f;color:#fff;padding:12px 18px;border-radius:99px;display:flex;gap:10px;align-items:center;z-index:30;box-shadow:var(--shadow)}
html[dir=rtl] .toast{transform:translateX(50%)} @media(max-width:860px){.toast{inset-block-end:76px}}
.score{--v:0;--c:var(--accent);inline-size:var(--sz,96px);block-size:var(--sz,96px);border-radius:50%;background:conic-gradient(var(--c) calc(var(--v)*1%),var(--line) 0);display:grid;place-items:center;flex:none}
.score::before{content:"";grid-area:1/1;inline-size:calc(100% - 14px);block-size:calc(100% - 14px);border-radius:50%;background:var(--surface)}
.score b{grid-area:1/1;font-size:calc(var(--sz,96px)*.32);font-variant-numeric:tabular-nums;z-index:1}
.score.hi{--c:var(--success)}.score.mid{--c:var(--accent)}.score.lo{--c:var(--line-strong)}
.dl{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:0 16px} .dl dt{color:var(--text-2);padding-block:10px;border-block-end:1px solid var(--line)} .dl dd{margin:0;padding-block:10px;border-block-end:1px solid var(--line);min-inline-size:0;overflow-wrap:anywhere}
.dl dt:last-of-type,.dl dd:last-of-type{border-block-end:0} @media(max-width:600px){.dl{grid-template-columns:1fr}.dl dt{border:0;padding-block-end:0}}
.rule{border:1px solid var(--line);border-radius:var(--r-m);padding:16px;background:var(--surface);display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
.rule.off{background:var(--surface-2)} .rule.off .rbody{opacity:.6} .rule.err{border-color:var(--danger);border-width:2px}
.rbody{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} @media(max-width:700px){.rule{grid-template-columns:auto 1fr}.rbody{grid-template-columns:1fr;grid-column:1/-1}}
.w{inline-size:92px} .bars{display:flex;align-items:flex-end;gap:3px;block-size:96px;direction:ltr}
.bars i{flex:1;background:var(--line-strong);border-radius:3px 3px 0 0;min-block-size:2px} .bars i.q{background:var(--success)}
.range{inline-size:100%;accent-color:var(--accent);min-block-size:var(--tap)}
.sticky-bar{position:sticky;inset-block-end:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow);padding:12px 16px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;z-index:4}
@media(max-width:860px){.sticky-bar{inset-block-end:72px}}
.dev{position:fixed;inset-block-end:0;inset-inline:0;background:#1d1d1f;color:#fff;font:12px/1.4 var(--mono);direction:ltr;padding:6px 10px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;z-index:99}
.dev a{color:#cfe3ff;padding:3px 8px;border-radius:6px;text-decoration:none;border:1px solid #444} .dev a[aria-current=true]{background:#0a84ff;color:#fff;border-color:#0a84ff}
body.has-dev{padding-block-end:72px} [data-show][hidden]{display:none!important}

.lead-grid{grid-template-columns:3fr 2fr;align-items:start}@media(max-width:860px){.lead-grid{grid-template-columns:1fr}.lead-grid aside{position:static!important}}

/* ---- S2 additions ---- */
.nav .grp{font-size:12px;font-weight:600;color:var(--text-2);padding:14px 12px 4px}
.nav .grp:first-child{padding-block-start:0}
.side{overflow-y:auto}
.halt-bar,.sim-bar{display:flex;gap:12px;align-items:center;padding:12px 32px;font-size:14px}
.halt-bar{background:var(--danger);color:#fff;font-size:15px}.halt-bar .ic{inline-size:26px;block-size:26px}
.halt-bar .btn.line{background:transparent;color:#fff;border-color:#fff;margin-inline-start:auto}
.sim-bar{background:var(--warn-tint);color:var(--warn);border-block-end:1px solid var(--line)} .sim-bar .ic{flex:none}
@media(max-width:860px){.halt-bar,.sim-bar{padding:12px 16px;align-items:flex-start}.tabbar a{font-size:11px}}
.subtabs{margin-block-end:20px;overflow-x:auto}
.var{display:inline-flex;align-items:center;min-block-size:32px;padding:2px 10px;border-radius:8px;background:var(--accent-tint);color:var(--accent);font:600 13px var(--mono);direction:ltr;border:0;cursor:pointer}
.var.miss{background:var(--danger-tint);color:var(--danger)}
.bubble{background:var(--surface-2);border:1px solid var(--line);border-radius:18px;border-end-start-radius:6px;padding:12px 16px;max-inline-size:420px;white-space:pre-wrap;overflow-wrap:anywhere}
.bubble.blocked{border-color:var(--danger);border-style:dashed}
.textarea{min-block-size:140px;resize:vertical;line-height:1.7;padding-block:12px;display:block}
.bar{block-size:10px;border-radius:99px;background:var(--line);overflow:hidden;min-inline-size:80px}.bar>i{display:block;block-size:100%;background:var(--accent)}
.bar.ok>i{background:var(--success)}.bar.warn>i{background:var(--warn)}
.dot{inline-size:8px;block-size:8px;border-radius:50%;background:var(--line-strong);display:inline-block}
.dot.ok{background:var(--success)}.dot.bad{background:var(--danger)}.dot.warn{background:var(--warn)}
.tl{list-style:none;margin:0;padding:0}.tl li{display:flex;gap:12px;padding:10px 0;border-block-end:1px solid var(--line)}.tl li:last-child{border:0}
.tl time{color:var(--text-2);font-size:13px;min-inline-size:64px;direction:ltr;text-align:start}
.big-btn{min-block-size:56px;font-size:17px;padding-inline:28px}
.days{display:flex;gap:6px;flex-wrap:wrap}.days label{min-inline-size:48px;min-block-size:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:var(--r-m);cursor:pointer;padding-inline:10px;background:var(--surface)}
.days input{position:absolute;opacity:0}.days label:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}.days label:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.days label:has(input:disabled){background:var(--surface-2);color:var(--text-2);text-decoration:line-through}
.btn[aria-disabled=true]{pointer-events:none}
.country{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media(max-width:860px){.page{padding-block-end:104px}}
.top{flex-wrap:wrap;gap:8px}.top>.btn.line{min-inline-size:0;flex:0 1 auto;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis}
@media(max-width:860px){.top>.btn.line{max-inline-size:60%}}
.seg a,.seg button{white-space:nowrap}.seg.subtabs{display:flex;max-inline-size:100%}

/* ---- S3 additions ---- */
.mode-bar{display:flex;gap:12px;align-items:center;padding:10px 32px;font-size:14px;background:var(--info-tint);color:var(--text);border-block-end:1px solid var(--line)}
.mode-bar .ic{color:var(--accent);flex:none}.mode-bar.demo-bar{background:var(--warn-tint)}.mode-bar.demo-bar .ic{color:var(--warn)}
@media(max-width:860px){.mode-bar{padding:10px 16px;align-items:flex-start}}
.temp{display:inline-flex;gap:4px;align-items:center;padding:2px 10px;border-radius:99px;font-size:13px;font-weight:600;white-space:nowrap}
.temp.hot{background:#fde6dc;color:#9a3300}.temp.warm{background:var(--warn-tint);color:var(--warn)}.temp.cold{background:var(--accent-tint);color:var(--accent)}.temp.stop{background:var(--danger);color:#fff}
@media(prefers-color-scheme:dark){html:not([data-theme=light]) .temp.hot{background:#3d1c0d;color:#ffa070}html:not([data-theme=light]) .temp.stop{color:#1a0000}}
html[data-theme=dark] .temp.hot{background:#3d1c0d;color:#ffa070}html[data-theme=dark] .temp.stop{color:#1a0000}
.conv{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 16px;border-block-end:1px solid var(--line);text-decoration:none;color:inherit;min-block-size:72px}
.conv:last-child{border:0}.conv:hover{background:var(--surface-2)}.conv.unread b.nm::before{content:"";display:inline-block;inline-size:9px;block-size:9px;border-radius:50%;background:var(--accent);margin-inline-end:8px}
.conv .av{inline-size:44px;block-size:44px;border-radius:50%;background:var(--accent-tint);color:var(--accent);display:grid;place-items:center;font-weight:700}
.conv.hotrow{background:color-mix(in srgb,#fde6dc 45%,var(--surface))}
.thread{display:flex;flex-direction:column;gap:10px;padding:20px}
.msg{max-inline-size:min(520px,85%);padding:10px 14px;border-radius:18px;overflow-wrap:anywhere;white-space:pre-wrap}
.msg.in{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);border-end-start-radius:6px}
.msg.out{align-self:flex-end;background:var(--accent-tint);border-end-end-radius:6px}.msg.out.human{background:var(--success-tint)}
.msg .meta{display:block;font-size:12px;color:var(--text-2);margin-block-start:4px;white-space:normal}
.sys{align-self:center;font-size:13px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:4px 14px;text-align:center}
.sys.bad{background:var(--danger-tint);color:var(--danger);border-color:transparent}.sys.warn{background:var(--warn-tint);color:var(--warn);border-color:transparent}
.composer{display:flex;gap:8px;align-items:flex-end;padding:12px 16px;border-block-start:1px solid var(--line)}
.composer .textarea{min-block-size:44px;block-size:44px;padding-block:9px;flex:1}
.suggest{border:2px solid var(--accent);border-radius:var(--r-l);padding:16px;background:var(--surface)}
.qr-box{inline-size:240px;block-size:240px;border:1px solid var(--line);border-radius:var(--r-l);background:#fff;padding:14px;display:grid;place-items:center;position:relative;margin-inline:auto}
.qr-box svg{inline-size:100%;block-size:100%}.qr-box.expired svg{opacity:.12}
.qr-box .over{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;gap:8px;align-content:center}
.thread-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
@media(max-width:1000px){.thread-wrap{grid-template-columns:1fr}.thread-wrap aside{order:-1}}

/* ---- S4 additions ---- */
.avatar{inline-size:48px;block-size:48px;border-radius:14px;display:grid;place-items:center;font-weight:700;font-size:20px;flex:none;color:#fff}
.avatar.a1{background:#0a6bd6}.avatar.a2{background:#7b3fb5}.avatar.a3{background:#1a7339}.avatar.a4{background:#a65200}
.cite{display:inline-flex;gap:4px;align-items:center;min-block-size:28px;padding:2px 10px;border-radius:8px;background:var(--success-tint);color:var(--success);font-size:13px;font-weight:600;text-decoration:none;border:0}
.cite.none{background:var(--warn-tint);color:var(--warn)}
.tool{border:1px solid var(--line);border-radius:var(--r-m);padding:12px 14px;background:var(--surface-2);font-size:14px}
.tool.ok{border-inline-start:4px solid var(--success)}.tool.bad{border-inline-start:4px solid var(--danger)}.tool.blocked{border-inline-start:4px solid var(--warn)}
.untrusted{border:1px dashed var(--line-strong);border-radius:var(--r-s);padding:8px 12px;font-size:13px;color:var(--text-2);background:var(--surface);overflow-wrap:anywhere}
.matrix td,.matrix th{text-align:center}.matrix td:first-child,.matrix th:first-child{text-align:start}
.matrix input[type=checkbox]{inline-size:22px;block-size:22px;accent-color:var(--accent)}
.matrix label{display:inline-flex;min-inline-size:44px;min-block-size:44px;align-items:center;justify-content:center;cursor:pointer}
.claim{background:var(--warn-tint);color:var(--warn);border-radius:6px;padding:0 6px;font-weight:600}
.diff{list-style:none;margin:0;padding:0}.diff li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-block-end:1px solid var(--line)}.diff li:last-child{border:0}
.ph{border:1px dashed var(--line-strong);border-radius:8px;padding:2px 8px;color:var(--text-2);font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.pg{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}@media(max-width:1000px){.pg{grid-template-columns:1fr}}

/* ---- S5 additions ---- */
.fn{display:grid;grid-template-columns:150px minmax(0,1fr) 190px;gap:8px 16px;align-items:center;padding:12px 0;border-block-end:1px solid var(--line)}
.fn:last-child{border:0}.fn .nm{font-weight:600}.fn .bar{block-size:22px;border-radius:6px;background:var(--surface-2);min-inline-size:0}.fn .bar>i{border-radius:6px}
.fn .nums{text-align:end;font-variant-numeric:tabular-nums}.fn .nums b{font-size:20px;display:block;line-height:1.2}
.fn .hatch{block-size:22px;border-radius:6px;background:repeating-linear-gradient(135deg,var(--line) 0 6px,transparent 6px 12px);border:1px dashed var(--line-strong)}
@media(max-width:700px){.fn{grid-template-columns:1fr auto}.fn .bar,.fn .hatch{grid-column:1/-1;order:3}}
.nosig{display:inline-flex;gap:4px;align-items:center;padding:2px 10px;border-radius:99px;font-size:13px;font-weight:600;background:var(--surface-2);color:var(--text-2);border:1px dashed var(--line-strong);white-space:nowrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:16px 18px}
.kpi .v{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.25}.kpi .l{font-size:14px;color:var(--text-2)}.kpi .d{font-size:13px;color:var(--text-2);margin-block-start:6px}
details.how{margin-block-start:6px}details.how summary{cursor:pointer;color:var(--accent);font-size:13px;min-block-size:32px;display:inline-flex;align-items:center}
details.how div{font-size:13px;color:var(--text-2);background:var(--surface-2);border-radius:var(--r-s);padding:8px 12px;margin-block-start:4px}
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-block-end:16px}
.timeline{display:flex;gap:0;align-items:stretch;overflow-x:auto;padding-block:8px}.timeline .st{flex:1;min-inline-size:140px;text-align:center;position:relative;padding:0 8px}
.timeline .st .dotc{inline-size:28px;block-size:28px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;margin:0 auto 6px;font-weight:700;font-size:13px}
.timeline .st.stop .dotc{background:var(--danger);color:#fff}.timeline .st:not(:last-child)::after{content:"";position:absolute;inset-block-start:14px;inset-inline-start:calc(50% + 18px);inline-size:calc(100% - 36px);block-size:2px;background:var(--line-strong)}
.pbar{background:var(--text);color:var(--bg);padding:8px 32px;font-size:13px;display:flex;gap:8px;align-items:center}@media(max-width:860px){.pbar{padding:8px 16px}}
/* follow-up timeline: scrolling region that keyboard users can focus (axe scrollable-region-focusable) */
.timeline-scroll{overflow-x:auto;border-radius:var(--r-s)}
.timeline-scroll:focus-visible{outline:3px solid var(--accent);outline-offset:2px}