/* Voice Sandbox: layout and look of the approved mockups (UI_proposed). Logical properties only
   (start/end), so a right-to-left language mirrors the layout without extra rules. */
:root{--bg:#F4F5F7;--fg:#16181D;--muted:#5A6070;--line:#E3E5EA;--line2:#EEF0F3;--field:#C9CDD5;--accent:#2453C8;
  --accent2:#1A3E99;--ok:#1A6B43;--okbg:#E3F4EA;--bad:#A3201A;--badbg:#FBE7E5;--warn:#8A5A00;--warnbg:#FFF3D6}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,"Segoe UI",Roboto,"Noto Sans","Noto Sans Arabic",Tahoma,system-ui,sans-serif;font-size:14px}
a{color:var(--accent)}a:hover{color:var(--accent2)}
.mono,code,pre{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
bdi.mono{unicode-bidi:isolate}
pre{white-space:pre-wrap;word-break:break-word;background:#0F1115;color:#E6E8EE;border-radius:8px;padding:12px;font-size:12px;margin:0;direction:ltr;text-align:start}
.shell{display:flex;flex-direction:column;min-height:100vh}
header.top{min-height:56px;background:#fff;border-block-end:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:8px 20px;gap:12px;flex-wrap:wrap}
header .tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
header .me{color:var(--fg);text-decoration:none}
header form{margin:0}
.health{display:inline-flex;align-items:center;gap:6px;font-size:12px;text-decoration:none;padding:3px 10px;border-radius:999px;font-weight:600}
.health .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.health.ok{color:var(--ok);background:var(--okbg)}.health.warn{color:var(--warn);background:var(--warnbg)}
.health.bad{color:var(--bad);background:var(--badbg)}.health.todo{color:#3A3F4B;background:var(--line2)}
.lang{display:flex;border:1px solid var(--field);border-radius:8px;overflow:hidden;background:#fff}
.lang a,.lang button{padding:5px 10px;font-size:12px;text-decoration:none;color:#3A3F4B;background:#fff;border:0;font:inherit;cursor:pointer}
.lang .on{background:var(--fg);color:#fff;font-weight:600}
.cols{display:flex;flex-wrap:wrap;flex:1}
nav.nav{flex:1 1 200px;max-width:240px;background:#fff;border-inline-end:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:2px}
nav.nav a{display:block;padding:9px 12px;border-radius:6px;color:#3A3F4B;text-decoration:none}
nav.nav a.on{background:#E8EEFB;color:var(--accent2);font-weight:600}
main{flex:999 1 560px;min-width:0;padding:24px;display:flex;flex-direction:column;gap:16px}
h1{margin:0;font-size:22px}h2{margin:0;font-size:16px}
.sub{margin:4px 0 0;color:var(--muted)}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lbl{font-size:12px;color:var(--muted);font-weight:500}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600}
.ok{background:var(--okbg);color:var(--ok)}.bad{background:var(--badbg);color:var(--bad)}.todo{background:var(--line2);color:#3A3F4B}.warn{background:var(--warnbg);color:var(--warn)}
table{border-collapse:collapse;width:100%}th{text-align:start;font-size:12px;color:var(--muted);font-weight:500;padding:8px 10px;border-block-end:1px solid var(--line)}
td{padding:11px 10px;border-block-end:1px solid var(--line2);font-size:13px;vertical-align:top}
td.empty{color:var(--muted);text-align:center}
.btn{height:30px;padding:0 10px;border:1px solid var(--field);background:#fff;border-radius:6px;font:inherit;font-size:12px;cursor:pointer;color:var(--fg);text-decoration:none;display:inline-flex;align-items:center}
.btn[disabled]{opacity:.55;cursor:default}
.primary{height:38px;padding:0 16px;border:0;border-radius:8px;background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.fi{display:flex;flex-direction:column;gap:4px}.fi label{font-size:12px;font-weight:600}
.fi input,.fi select,.fi textarea,input.in,select.in{font:inherit;min-height:38px;border:1px solid var(--field);border-radius:8px;padding:0 10px;background:#fff}
.fi textarea{padding:8px 10px;min-height:110px}
.err{color:var(--bad);font-size:12px}
.fi input.invalid,.fi select.invalid,.fi textarea.invalid{border-color:var(--bad)}
.notice{border-radius:8px;padding:10px 14px;font-size:13px}.notice.info{background:#E8EEFB;color:var(--accent2)}
.notice.error{background:var(--badbg);color:var(--bad)}.notice.success{background:var(--okbg);color:var(--ok)}
.center{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 16px;gap:16px}
.narrow{width:100%;max-width:440px;display:flex;flex-direction:column;gap:16px}.narrow.end{align-items:flex-end}
.logo{width:44px;height:44px;border-radius:10px;background:var(--fg);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.secret{display:flex;gap:8px;align-items:center;background:var(--line2);border-radius:8px;padding:8px 10px;word-break:break-all}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;font-size:15px}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.ev{border:1px solid var(--line);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:6px}
.ev.badsig{border-color:var(--bad)}
.diff .del{background:var(--badbg)}.diff .add{background:var(--okbg)}
.diff div{white-space:pre-wrap;padding:2px 8px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px}
.tabs{display:flex;gap:4px}.tabs .on{background:var(--fg);color:#fff}
.hidden{display:none!important}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px}
.widget-error{color:var(--bad)}
[dir="rtl"] .flip{transform:scaleX(-1);display:inline-block}
/* step 6b/6c pages */
.stack{display:flex;flex-direction:column;gap:12px}
.row.spread{justify-content:space-between}
.inline{display:inline;margin:0}
.scroll{overflow-x:auto}
.info{background:#E8EEFB;color:var(--accent2)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.tile{gap:4px}.big{font-size:22px;font-weight:700}
svg.chart{width:100%;height:80px}svg.chart .bar{fill:#C9D6F5}svg.chart .bar.err{fill:var(--bad)}
svg.hbar{width:100%;height:8px}svg.hbar .track{fill:var(--line2)}svg.hbar .fill{fill:var(--accent)}
[dir="rtl"] svg.hbar,[dir="rtl"] svg.strip,[dir="rtl"] svg.stack{transform:scaleX(-1)}
.wf{display:grid;grid-template-columns:minmax(120px,170px) 1fr 70px;gap:10px;align-items:center;font-size:13px}
svg.strip{width:100%;height:44px;background:var(--line2);border-radius:6px}
svg.strip .seg.bot,.sw.bot{fill:var(--accent);background:var(--accent)}svg.strip .seg.person,.sw.person{fill:var(--ok);background:var(--ok)}
svg.strip .mark{stroke:var(--bad);stroke-width:3}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px}
svg.stack{width:100%;height:18px;border-radius:6px}
.c0{fill:var(--ok);background:var(--ok)}.c1{fill:var(--bad);background:var(--bad)}.c2{fill:#D99A00;background:#D99A00}
.c3{fill:#8A90A0;background:#8A90A0}.c4{fill:var(--accent);background:var(--accent)}.c5{fill:#6B3FA0;background:#6B3FA0}
.line{padding:4px 6px;border-radius:6px;cursor:pointer}.line.playing{background:#E8EEFB}
.step{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:6px 0}
.num{width:26px;height:26px;border-radius:50%;background:var(--line2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.num.done{background:var(--okbg);color:var(--ok)}
.docs{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:16px}
nav.side{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px}
nav.side a{padding:6px 8px;border-radius:6px;text-decoration:none;color:var(--fg);font-size:13px}nav.side a.on{background:#E8EEFB}
.m{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;padding:1px 6px;border-radius:4px}
.m.post{background:var(--okbg);color:var(--ok)}.m.get{background:#E8EEFB;color:var(--accent2)}.m.put,.m.delete{background:var(--warnbg);color:var(--warn)}
textarea.code{font-family:"JetBrains Mono",monospace;font-size:12px;min-height:140px;border:1px solid var(--field);border-radius:8px;padding:8px}
.tabs a{padding:8px 12px;border-radius:6px;text-decoration:none;color:#3A3F4B}
aside.help{flex:0 1 340px;background:#fff;border-inline-start:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:14px;font-size:13px}
aside.help a[data-testid="help-close"]{font-size:20px;text-decoration:none}
aside.help[hidden]{display:none}
aside.help h3{font-size:13px;margin:0 0 4px}aside.help h4{font-size:12px;margin:8px 0 4px}aside.help ul{margin:0;padding-inline-start:18px}aside.help section p{margin:0}
.center-card{align-items:center;text-align:center}
.mic{width:84px;height:84px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.stars{gap:4px}.star input{position:absolute;opacity:0}.star span[aria-hidden]{font-size:26px;color:var(--field);cursor:pointer}
.star input:checked+span,.star:has(~ .star input:checked) span[aria-hidden]{color:#D99A00}
.star input:focus-visible+span{outline:2px solid var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tag{border:1px solid var(--field);border-radius:999px;padding:4px 10px;font-size:12px}
meter{width:100%;height:10px}.meterrow{display:flex;flex-direction:column;gap:4px}
details summary{cursor:pointer}
/* telephony admin pages (Telephony, ServerEdit, TrunkEdit) */
.span-all{grid-column:1/-1}.nowrap{white-space:nowrap}
a.primary.linkbtn{display:inline-flex;align-items:center;text-decoration:none}
.grid.wide{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.grid.wider{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
input.in.short{width:90px;min-width:0}.btn.tall{height:42px;display:inline-flex;align-items:center}
@media (max-width:640px){nav.nav{max-width:none;flex-basis:100%;border-inline-end:0;border-block-end:1px solid var(--line)}main{padding:16px}}