:root{
  --ground:#FAF8F4; --surface:#FFFFFF; --ink:#23201A; --muted:#6E675C; --line:#ECE5D8; --line2:#DDD3C2;
  --accent:#F5A20A; --accent-2:#FFB938; --accent-ink:#2A1C00; --accent-text:#A15C00; --soft:#FFF4DC; --soft-2:#FFE8B3;
  --ok:#1F7A47; --ok-soft:#E3F4E9; --bad:#B3261E; --bad-soft:#FCE7E5; --warn:#A15C00; --rec:#D93025;
  --font:"IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --sap-font:"Segoe UI",Tahoma,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6;padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--accent-text)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{font-weight:700;display:flex;align-items:center;gap:8px}
.logo{width:22px;height:22px;border-radius:7px;background:var(--accent);box-shadow:inset 0 -6px 0 var(--accent-2)}
.bar nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap;font-size:14px}
.bar nav a{text-decoration:none;color:var(--ink);padding:5px 10px;border-radius:8px}
.bar nav a[aria-current="page"]{background:var(--soft);color:var(--accent-text);font-weight:700}
.who{color:var(--muted);padding-inline:8px}
.demo{background:var(--soft-2);color:#4A3200;font-size:13px;padding:6px 16px;text-align:center}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:16px;padding-block:16px 48px;display:flex;flex-direction:column;gap:14px}
.wrap.narrow{max-width:720px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
h1{font-size:21px;margin:0;text-wrap:balance} h2{font-size:16px;margin:0} h3{font-size:14.5px;margin:0} h2 small{font-weight:400;font-size:12px}
.muted{color:var(--muted);margin:0} .fine{font-size:12px;color:var(--muted);margin:0}
.stack{display:flex;flex-direction:column;gap:10px} .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .between{justify-content:space-between}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line2);border-radius:9px;padding:8px 10px}
select{max-width:100%}
textarea{width:100%;min-height:110px;resize:vertical;line-height:1.7}
.btn{font:inherit;font-weight:600;border:0;border-radius:10px;padding:10px 16px;cursor:pointer;background:var(--accent);color:var(--accent-ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:40px}
.btn:hover{background:var(--accent-2)}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line2)} .btn.ghost:hover{background:var(--soft)}
.btn.ok{background:var(--ok);color:#fff} .btn.bad{background:var(--surface);color:var(--bad);border:1px solid var(--bad)}
.btn.sm{padding:5px 11px;font-size:13px;min-height:32px} .btn:disabled{opacity:.5;cursor:not-allowed}
.btn.file{cursor:pointer}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.err{color:var(--bad);margin:0} .ok{color:var(--ok);margin:0} .status{min-height:1.4em;margin:0;font-size:14px;color:var(--muted)} .status.err{color:var(--bad)}
.login{max-width:420px;margin:40px auto;width:100%}
code{font-family:var(--mono);font-size:12.5px;background:var(--ground);border:1px solid var(--line);border-radius:4px;padding:0 5px;overflow-wrap:anywhere}
details>summary{cursor:pointer;color:var(--muted);font-size:13px}

/* recorder hero */
.hero{align-items:center;text-align:center;padding:22px 16px}
.hero .muted{max-width:440px}
.recbox{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0}
.recbtn{font:inherit;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:156px;height:156px;border-radius:50%;border:0;cursor:pointer;background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px -10px rgba(245,162,10,.65),inset 0 -10px 0 rgba(0,0,0,.06)}
.recbtn:hover{background:var(--accent-2)}
.recbtn .dotrec{width:26px;height:26px;border-radius:50%;background:var(--rec);border:3px solid #fff}
.recbtn.on{background:var(--rec);color:#fff;animation:pulse 1.4s infinite}
.recbtn.on .dotrec{border-radius:5px;background:#fff}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,48,37,.45)}100%{box-shadow:0 0 0 22px rgba(217,48,37,0)}}
@media (prefers-reduced-motion:reduce){.recbtn.on,.mic.on{animation:none}}
.timer{font-family:var(--mono);font-size:20px;font-variant-numeric:tabular-nums}
audio{width:100%;height:40px}
.steps{display:flex;gap:6px;list-style:none;padding:0;margin:0;flex-wrap:wrap;justify-content:center}
.steps li{font-size:13px;padding:3px 12px;border-radius:999px;background:var(--ground);border:1px solid var(--line);color:var(--muted)}
.steps li.on{background:var(--soft-2);color:var(--accent-ink);border-color:var(--accent)} .steps li.done{background:var(--ok-soft);color:var(--ok);border-color:#BFE3CC} .steps li.fail{background:var(--bad-soft);color:var(--bad)}

/* lists */
.list{display:flex;flex-direction:column;gap:10px}
.item{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.item.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.item.click{cursor:pointer;text-align:start;font:inherit;color:inherit}
.item.click:hover{background:var(--soft)}
.meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--muted)}
.pill{font-size:11.5px;font-weight:600;padding:1px 9px;border-radius:999px;background:var(--ground);border:1px solid var(--line);color:var(--ink)}
.pill.analyzed{background:var(--soft-2);border-color:#F3CF80;color:#5B3D00} .pill.approved{background:var(--ok-soft);border-color:#BFE3CC;color:var(--ok)} .pill.rejected,.pill.error{background:var(--bad-soft);border-color:#F2C2BD;color:var(--bad)}
.pill.late{background:var(--bad-soft);color:var(--bad)} .pill.due{background:var(--soft-2);color:#5B3D00} .pill.stale{background:var(--ground)}
.sum{font-size:14.5px;margin:0}

/* thread (tree of voices + versions) */
.thread{display:flex;flex-direction:column;gap:0;position:relative}
.node{position:relative;padding-inline-start:30px;padding-bottom:14px}
.node::before{content:"";position:absolute;inset-inline-start:11px;top:26px;bottom:0;width:2px;background:var(--line2)}
.node:last-child::before{display:none}
.node .dot{position:absolute;inset-inline-start:0;top:2px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:var(--surface);border:2px solid var(--line2)}
.node.root .dot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.node.reply .dot{border-color:var(--accent)}
.node.ver .dot{width:14px;height:14px;inset-inline-start:5px;top:6px;border-radius:4px;background:var(--soft-2);border-color:var(--accent)}
.node .nh{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13px}
.node .nh b{font-size:13.5px}
.node .tx{font-size:13.5px;color:var(--ink);background:var(--ground);border-radius:10px;padding:8px 10px;margin-top:6px;unicode-bidi:plaintext}
.node.ver .nh{color:var(--muted)}
.vlink{font:inherit;font-size:12.5px;background:none;border:0;color:var(--accent-text);cursor:pointer;padding:0;text-decoration:underline}
.vlink[aria-pressed="true"]{font-weight:700;text-decoration:none}

/* proposals */
.card{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px;display:flex;flex-direction:column;gap:8px}
.card.okd{border-color:#BFE3CC;background:linear-gradient(0deg,var(--surface),var(--surface)) padding-box}
.card .hd{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .card .hd input[type=checkbox]{width:18px;height:18px;accent-color:var(--ok)}
.kind{font-size:11px;padding:1px 8px;border-radius:999px;font-weight:600}
.kind.update{background:#E7EEF6;color:#1D3F5E} .kind.create{background:var(--soft-2);color:#5B3D00} .kind.activity{background:var(--ground);color:var(--ink);border:1px solid var(--line)}
.fl{display:grid;grid-template-columns:110px 1fr;gap:4px 10px;font-size:13.5px} .fl .k{color:var(--muted)}
@media (max-width:520px){.fl{grid-template-columns:1fr}}
.heard{unicode-bidi:plaintext;font-size:12px;color:var(--muted);border-inline-start:2px solid var(--accent);padding-inline-start:8px}
.mat{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;border-radius:6px;padding:2px 8px;border:1px solid var(--line);background:var(--surface)}
.mat.exact{border-color:#9BD3B0} .mat.fuzzy{border-color:#F0C46A;background:var(--soft)} .mat.unknown{border-color:#EFA39B;background:var(--bad-soft)}
.mat .m{font-weight:600} .mat.exact .m{color:var(--ok)} .mat.fuzzy .m{color:var(--warn)} .mat.unknown .m{color:var(--bad)}
.acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border-top:1px dashed var(--line);padding-top:8px}
.okmark{font-size:13px;color:var(--ok);font-weight:600}
.pickrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;background:var(--soft);border-radius:10px;padding:8px}
.pickrow select{flex:1;min-width:180px}
.match{border:1px solid var(--line);border-inline-start:4px solid var(--ok);border-radius:10px;padding:10px 12px;font-size:14px;background:var(--surface)}
.match.warn{border-inline-start-color:var(--accent)}

/* questions */
.qa{border:1px solid #F3D28E;background:var(--soft);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.qa .qt{font-weight:600;font-size:14.5px;display:flex;gap:8px;align-items:flex-start}
.qa .qt .qi{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:12px}
.answered{font-size:13px;color:var(--ok)}
.txtans{display:flex;gap:6px;flex-wrap:wrap} .txtans input{flex:1;min-width:160px}

/* small mic buttons */
.mic{font:inherit;font-weight:600;font-size:13.5px;display:inline-flex;gap:6px;align-items:center;border-radius:999px;border:1px solid var(--accent);background:var(--surface);color:var(--accent-ink);padding:6px 14px;cursor:pointer;min-height:36px}
.mic::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--rec)}
.mic:hover{background:var(--soft-2)}
.mic.on{background:var(--rec);border-color:var(--rec);color:#fff;animation:pulse 1.4s infinite}
.mic.on::before{background:#fff;border-radius:2px}
.speak{font:inherit;font-size:13px;border:1px solid var(--line2);background:var(--surface);border-radius:999px;padding:5px 11px;cursor:pointer;min-height:32px}
.speak:hover{background:var(--soft)}

.chip{font:inherit;font-size:13px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);border-radius:999px;padding:4px 12px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.rv{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:14px;align-items:start}
@media (max-width:900px){.rv{grid-template-columns:1fr}}
.stats{display:flex;gap:10px;flex-wrap:wrap} .stats div{background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:8px 14px;display:flex;gap:6px;align-items:baseline}
.stats b{font-size:20px;font-variant-numeric:tabular-nums}
.sapbtns{display:flex;gap:8px;flex-wrap:wrap}
.toast{position:fixed;inset-inline:16px;bottom:18px;margin-inline:auto;max-width:520px;background:var(--ink);color:#fff;border-radius:12px;padding:10px 14px;font-size:14px;z-index:20;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
/* compact SAP table used inside review */
.sapwrap{overflow-x:auto;border:1px solid #334E68;border-radius:4px;background:#fff;color:#111}
.sapwrap .tb{background:#334E68;color:#fff;padding:5px 8px;font-family:var(--sap-font);font-size:12.5px;direction:ltr}
.sapt{direction:ltr;border-collapse:collapse;width:100%;min-width:720px;font-family:var(--sap-font);font-size:12px}
.sapt th,.sapt td{border:1px solid #D5DADF;padding:3px 6px;text-align:left;white-space:nowrap}
.sapt th{background:#E4E7EA;font-weight:400} .sapt td.num{text-align:right;font-variant-numeric:tabular-nums}
.sapt tr.hit td{background:#FFF1CC} .sapt td.idle{color:#9A3B00;font-weight:600}
.sapt a{color:#1D4F91}
/* reminders */
.rem{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.rem .item{gap:4px}
.rem .item b{font-size:14.5px}
.kpis{display:flex;gap:10px;flex-wrap:wrap}
.kpis div{flex:1;min-width:120px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface)}
.kpis b{display:block;font-size:24px;font-variant-numeric:tabular-nums}
.kpis .late b{color:var(--bad)} .kpis .due b{color:var(--warn)}