/* C4VoIP Route Tester — same look as C4VoIP Switch (Sol sun palette, light + dark).
   Tokens copied from 4lite web/admin/style.css; keep them in step when the switch theme changes. */
@font-face { font-family:'Montserrat'; src:url('brand/montserrat.woff2') format('woff2'); font-weight:500 800; font-display:swap; }

:root {
  color-scheme: light;
  --primary:#ea580c; --primary-dark:#c2410c; --primary-text:#c2410c; --accent:#f59e0b;
  --brand-grad:linear-gradient(135deg,#f59e0b 0%,#ea580c 55%,#c2410c 100%);
  --success:#16a34a; --danger:#dc2626; --warning:#f59e0b; --info:#2563eb;
  --bg:#f6f5f2; --card:#ffffff; --surface-2:#f8fafc; --surface-3:#e2e8f0; --tint:#fff7ed;
  --text:#0f172a; --text-2:#475569; --text-muted:#64748b;
  --border:#e2e8f0; --border-strong:#cbd5e1; --input-bg:#ffffff; --hover:#f1f5f9;
  --ok-bg:#ecfdf5; --ok-border:#a7f3d0; --ok-text:#15803d;
  --bad-bg:#fef2f2; --bad-border:#fecaca; --bad-text:#b91c1c;
  --warn-bg:#fffbeb; --warn-border:#fde68a; --warn-text:#92400e;
  --info-bg:#eff6ff; --info-border:#bfdbfe; --info-text:#1d4ed8;
  --mute-bg:#f1f5f9; --mute-border:#e2e8f0; --mute-text:#475569;
  --nav-bg:linear-gradient(90deg,#17162c 0%,#1f1b33 60%,#3a2a2e 100%);
  --auth-bg:radial-gradient(1200px 600px at 10% -10%,#ffe2a8 0%,transparent 60%),
            radial-gradient(900px 500px at 110% 110%,#fed7aa 0%,transparent 55%),#f6f5f2;
  --overlay:rgba(15,23,42,.55);
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(15,23,42,.05),0 4px 18px rgba(15,23,42,.06);
  --shadow-lg:0 20px 60px rgba(15,23,42,.18);
  --focus-ring:0 0 0 3px rgba(234,88,12,.20);
  --us:rgba(234,88,12,.35); --them:rgba(22,163,74,.5);
}
[data-theme="dark"] {
  color-scheme: dark;
  --primary:#f59e0b; --primary-dark:#ea580c; --primary-text:#fbbf24;
  --success:#22c55e; --danger:#ef4444; --info:#60a5fa;
  --bg:#0f0e1d; --card:#17162c; --surface-2:#1d1b36; --surface-3:#2b2846; --tint:#2a2233;
  --text:#ece9f2; --text-2:#cbc6d9; --text-muted:#9b96b0;
  --border:#2b2846; --border-strong:#3c3860; --input-bg:#121125; --hover:#221f3d;
  --ok-bg:rgba(34,197,94,.12); --ok-border:rgba(34,197,94,.35); --ok-text:#86efac;
  --bad-bg:rgba(239,68,68,.12); --bad-border:rgba(239,68,68,.35); --bad-text:#fca5a5;
  --warn-bg:rgba(245,158,11,.12); --warn-border:rgba(245,158,11,.35); --warn-text:#fcd34d;
  --info-bg:rgba(96,165,250,.12); --info-border:rgba(96,165,250,.32); --info-text:#93c5fd;
  --mute-bg:#221f3d; --mute-border:#3c3860; --mute-text:#cbc6d9;
  --nav-bg:linear-gradient(90deg,#0b0a17 0%,#17162c 60%,#2e2028 100%);
  --auth-bg:radial-gradient(1200px 600px at 10% -10%,rgba(245,165,26,.22) 0%,transparent 60%),
            radial-gradient(900px 500px at 110% 110%,rgba(245,124,31,.16) 0%,transparent 55%),#0f0e1d;
  --overlay:rgba(2,6,23,.7);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 18px rgba(0,0,0,.25);
  --shadow-lg:0 20px 60px rgba(0,0,0,.55);
  --focus-ring:0 0 0 3px rgba(245,158,11,.35);
  --us:rgba(245,158,11,.4); --them:rgba(34,197,94,.5);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
html { overflow-x:hidden; -webkit-text-size-adjust:100%; }
body { font-family:'Segoe UI',system-ui,-apple-system,Roboto,'Noto Sans',sans-serif; background:var(--bg); color:var(--text);
       font-size:14px; line-height:1.55; min-height:100vh; }
a { color:var(--primary-text); text-decoration:none; }
a:hover { text-decoration:underline; }
img,svg,audio { max-width:100%; }
h1 { font-size:22px; line-height:1.25; letter-spacing:-.2px; }
h3 { font-size:16px; }
.sub { color:var(--text-muted); margin:4px 0 18px; }
.hint { color:var(--text-muted); font-size:12.5px; font-weight:400; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* ─── Brand + navigation ─────────────────────────────────────────── */
.brand { display:inline-flex; align-items:center; gap:9px; color:#fff; text-decoration:none !important; white-space:nowrap; flex-shrink:0; }
.brand img { width:30px; height:30px; display:block; }
.brand-word { font-family:'Montserrat','Segoe UI',sans-serif; font-weight:800; font-size:17px; letter-spacing:-.2px; color:#fff; }
.brand-word .v { background:linear-gradient(90deg,#ffc93a,#f57c1f); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand-word .s { font-weight:500; margin-left:4px; }
.nav-bar { background:var(--nav-bg); min-height:58px; padding:0 18px; display:flex; align-items:center; gap:6px;
           box-shadow:0 2px 14px rgba(15,23,42,.25); position:sticky; top:0; z-index:50; border-bottom:1px solid rgba(255,255,255,.06); }
.nav-links { display:flex; gap:2px; margin-left:14px; min-width:0; flex:0 1 auto; overflow-x:auto; scrollbar-width:none; }
.nav-links::-webkit-scrollbar { display:none; }
.nav-links a { color:rgba(255,255,255,.78); padding:18px 12px 16px; font-weight:600; font-size:13.5px; border-bottom:2px solid transparent;
               text-decoration:none; white-space:nowrap; }
.nav-links a:hover { color:#fff; }
.nav-links a.on { color:#fff; border-bottom-color:var(--accent); }
.nav-spacer { flex:1; }
.nav-who { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.85); font-size:13px; white-space:nowrap; }
.nav-who .bal { background:rgba(34,197,94,.18); border:1px solid rgba(34,197,94,.45); color:#bbf7d0; padding:2px 9px; border-radius:99px; font-weight:700; font-size:12px; }
.nav-who .bal.low { background:rgba(239,68,68,.2); border-color:rgba(239,68,68,.5); color:#fecaca; }
.nav-who a.out { color:#fecaca; border:1px solid rgba(239,68,68,.5); background:rgba(239,68,68,.18); padding:4px 10px; border-radius:6px;
                 font-weight:600; font-size:12px; text-decoration:none; }
.theme-toggle { width:32px; height:32px; border-radius:8px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);
                color:#fff; font-size:15px; cursor:pointer; line-height:1; }
.theme-toggle:hover { background:rgba(255,255,255,.14); }
.theme-float { position:fixed; top:14px; right:14px; z-index:60; }
.theme-float .theme-toggle { background:var(--card); color:var(--text); border-color:var(--border); box-shadow:var(--shadow); }

@media (max-width:1100px) {
  .nav-who .name, .nav-who .adv { display:none; }
  .nav-links { margin-left:8px; }
  .nav-links a { padding:18px 9px 16px; }
}
/* bottom tab bar on phones (app-style) */
.tabbar { display:none; }
@media (max-width:760px) {
  .nav-links, .nav-who .name, .nav-who .adv { display:none; }
  .nav-bar { padding:0 12px; min-height:54px; }
  .brand-word { font-size:15.5px; }
  .tabbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--card); border-top:1px solid var(--border);
            box-shadow:0 -4px 18px rgba(15,23,42,.08); padding:4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .tabbar a { flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 2px; color:var(--text-muted);
              font-size:11px; font-weight:600; text-decoration:none; border-radius:10px; }
  .tabbar a svg { width:22px; height:22px; }
  .tabbar a.on { color:var(--primary-text); background:var(--tint); }
  main { padding-bottom:92px !important; }
}

/* ─── Layout ─────────────────────────────────────────────────────── */
main { max-width:1200px; margin:0 auto; padding:24px 16px 60px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; }
.card + .card { margin-top:18px; }
.card-h { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.card-h b { font-size:15px; }
.grid2 { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:18px; align-items:start; }
@media (max-width:960px) { .grid2 { grid-template-columns:1fr; } }
.head { display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.head .grow { min-width:220px; }
.grow { flex:1; min-width:0; }
.row { display:flex; gap:10px; flex-wrap:wrap; }
.row > * { flex:1 1 140px; min-width:0; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ─── Forms ──────────────────────────────────────────────────────── */
label.f { display:block; font-weight:600; font-size:13px; margin:14px 0 6px; color:var(--text); }
input,select,textarea { width:100%; padding:10px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--input-bg);
                        color:var(--text); font:inherit; font-size:14px; min-height:42px; }
input[type=checkbox] { width:18px; height:18px; min-height:0; accent-color:var(--primary); }
textarea { min-height:150px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; resize:vertical; line-height:1.6; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--primary); box-shadow:var(--focus-ring); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 16px; min-height:40px; border-radius:var(--radius-sm);
       border:1px solid var(--border-strong); background:var(--card); color:var(--text); font:600 14px 'Segoe UI',system-ui,sans-serif;
       cursor:pointer; white-space:nowrap; text-decoration:none !important; }
.btn:hover { background:var(--hover); }
.btn.primary { background:var(--brand-grad); border-color:transparent; color:#fff; box-shadow:0 2px 10px rgba(234,88,12,.25); }
.btn.primary:hover { filter:brightness(1.06); }
.btn.big { width:100%; min-height:48px; font-size:15.5px; margin-top:18px; }
.btn.danger { color:var(--bad-text); border-color:var(--bad-border); }
.btn.sm { padding:5px 11px; min-height:32px; font-size:12.5px; }
.btn:disabled { opacity:.55; cursor:default; filter:none; }
.msg { margin-top:10px; font-size:13px; min-height:18px; }
.msg.err { color:var(--bad-text); } .msg.ok { color:var(--ok-text); }
.seg { display:flex; gap:6px; background:var(--surface-2); border:1px solid var(--border); padding:4px; border-radius:11px; margin-bottom:6px; }
.seg button { flex:1; border:0; background:transparent; color:var(--text-muted); padding:8px; border-radius:8px; font:600 13.5px 'Segoe UI',system-ui,sans-serif; cursor:pointer; }
.seg button small { display:block; font-weight:400; font-size:11.5px; }
.seg button.on { background:var(--card); color:var(--text); box-shadow:var(--shadow); }

/* ─── Chips, tiles, lists ────────────────────────────────────────── */
.chip { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:700; white-space:nowrap;
        border:1px solid transparent; }
.chip::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.85; }
.c-ok { background:var(--ok-bg); color:var(--ok-text); border-color:var(--ok-border); }
.c-warn { background:var(--warn-bg); color:var(--warn-text); border-color:var(--warn-border); }
.c-fas { background:var(--bad-bg); color:var(--bad-text); border-color:var(--bad-border); }
.c-fail { background:var(--mute-bg); color:var(--mute-text); border-color:var(--mute-border); }
.c-run { background:var(--info-bg); color:var(--info-text); border-color:var(--info-border); }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:16px 0; }
.tile { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); }
.tile b { display:block; font-size:24px; line-height:1.2; font-variant-numeric:tabular-nums; }
.tile span { color:var(--text-muted); font-size:12.5px; }
.tile.ok b { color:var(--ok-text); } .tile.fas b { color:var(--bad-text); } .tile.warn b { color:var(--warn-text); }
.tile.hero { background:var(--brand-grad); border:0; color:#fff; } .tile.hero span { color:rgba(255,255,255,.85); }
@media (max-width:520px) { .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .tile { padding:12px; } .tile b { font-size:20px; } }
.list { display:flex; flex-direction:column; gap:8px; }
.item { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:11px; background:var(--card);
        color:var(--text); text-decoration:none !important; transition:border-color .15s, transform .15s; }
a.item:hover { border-color:var(--primary); }
.item .t { font-weight:700; }
.item .m { color:var(--text-muted); font-size:12.5px; }
.item .end { text-align:right; flex-shrink:0; }
@media (max-width:520px) { .item { flex-wrap:wrap; } .item .end { text-align:left; width:100%; display:flex; gap:8px; align-items:center; flex-wrap:wrap; } }
.empty { color:var(--text-muted); text-align:center; padding:30px 10px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 0 18px; }
.steps div { background:var(--card); border:1px solid var(--border); border-radius:11px; padding:11px 13px; font-size:12.5px; color:var(--text-muted); }
.steps b { display:flex; align-items:center; gap:8px; color:var(--text); font-size:13px; margin-bottom:2px; }
.steps i { font-style:normal; width:22px; height:22px; border-radius:50%; background:var(--brand-grad); color:#fff; display:inline-grid; place-items:center; font-size:12px; }
@media (max-width:760px) { .steps { display:none; } }
.progress { height:8px; background:var(--surface-3); border-radius:99px; overflow:hidden; margin-top:12px; }
.progress div { height:100%; background:var(--brand-grad); transition:width .4s; }

/* outcome bar */
.obar { display:flex; height:12px; border-radius:99px; overflow:hidden; background:var(--surface-3); margin:4px 0 10px; }
.obar span { display:block; height:100%; }
.olegend { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--text-2); }
.olegend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.o-ok { background:var(--success); } .o-warn { background:var(--warning); } .o-fas { background:var(--danger); } .o-fail { background:var(--border-strong); }

/* ─── Results table → cards on phones ────────────────────────────── */
.tablewrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:12px; color:var(--text-muted); font-weight:600; padding:10px; border-bottom:1px solid var(--border); white-space:nowrap;
     text-transform:uppercase; letter-spacing:.3px; }
td { padding:11px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
tr.r { cursor:pointer; } tr.r:hover td { background:var(--hover); }
tr.r.open td { background:var(--tint); }
td.num { font-family:ui-monospace,Menlo,monospace; white-space:nowrap; }
td.n, th.n { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.why { color:var(--text-2); font-size:12.5px; }
.detail > td { background:var(--surface-2); padding:14px; }
@media (max-width:760px) {
  table.cards thead { display:none; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display:block; width:100%; }
  table.cards tr.r { border:1px solid var(--border); border-radius:11px; margin:8px 0; padding:10px 12px; background:var(--card); }
  table.cards tr.r td { border:0; padding:2px 0; }
  table.cards tr.r td.num { font-size:15px; font-weight:700; }
  table.cards tr.r td.n { display:inline-block; width:auto; text-align:left; margin-right:14px; font-size:12.5px; color:var(--text-muted); }
  table.cards tr.r td.n::before { content:attr(data-l) ' '; }
  table.cards tr.detail { margin:-4px 0 10px; }
  table.cards tr.detail > td { border-radius:0 0 11px 11px; border:1px solid var(--border); border-top:0; }
  .card.flush { padding:4px 10px; }
}
.dgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.dgrid h4 { margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); }
.dgrid ul { margin:8px 0 0 18px; }
.said { margin-top:10px; padding:10px 12px; border-left:3px solid var(--accent); background:var(--card); border-radius:0 8px 8px 0; font-size:13px; }
.said small { display:block; color:var(--text-muted); font-size:11.5px; margin-bottom:2px; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:13px; margin-top:10px; }
.kv span:nth-child(odd) { color:var(--text-muted); }
audio { width:100%; height:38px; margin:2px 0 8px; }
.timeline { position:relative; height:46px; background:var(--card); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.timeline .sg { position:absolute; }
.timeline .us { background:var(--us); top:0; bottom:50%; }
.timeline .them { background:var(--them); top:50%; bottom:0; }
.timeline .over { background:rgba(220,38,38,.5); top:50%; bottom:0; }
.legend { font-size:11.5px; color:var(--text-muted); margin-top:4px; }
.ladder { font-family:ui-monospace,Menlo,monospace; font-size:12px; max-height:280px; overflow:auto; background:var(--card); border:1px solid var(--border);
          border-radius:8px; padding:8px 10px; }
.ladder div { padding:2px 0; white-space:nowrap; }
.ladder .out { color:var(--primary-text); } .ladder .in { color:var(--ok-text); }

/* ─── Dialog ─────────────────────────────────────────────────────── */
dialog { border:none; border-radius:16px; padding:0; width:min(480px,calc(100vw - 24px)); max-height:calc(100vh - 24px); background:var(--card);
         color:var(--text); box-shadow:var(--shadow-lg); margin:auto; }
dialog::backdrop { background:var(--overlay); }
dialog .in { padding:22px; }
dialog h3 { margin-bottom:2px; }
@media (max-width:520px) { dialog { margin:auto auto 0; border-radius:16px 16px 0 0; width:100vw; max-width:100vw; } }

/* ─── Auth pages ─────────────────────────────────────────────────── */
body.auth { background:var(--auth-bg); display:grid; place-items:center; padding:20px 16px; }
.auth-box { width:min(420px,100%); background:var(--card); border:1px solid var(--border); border-radius:18px; padding:30px 28px; box-shadow:var(--shadow-lg); }
.auth-logo { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.auth-logo img { width:46px; height:46px; }
.auth-logo .brand-word { color:var(--text); font-size:20px; }
.auth-logo .by { display:block; font-family:Georgia,'Crimson Pro',serif; font-size:13px; color:var(--text-muted); font-weight:500; }
.auth-box .btn.big { margin-top:20px; }
.auth-foot { text-align:center; color:var(--text-muted); font-size:12px; margin-top:18px; }
.offer { background:var(--tint); border:1px solid var(--warn-border); border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:4px; }

/* Buy: credit + plans (Account page) */
.buys { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:10px; }
.buy { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
       display:flex; flex-direction:column; gap:6px; }
.buy .price { font-size:24px; font-weight:700; letter-spacing:-.01em; }
.buy .price small { font-size:13px; font-weight:500; color:var(--text-muted); }
.buy > .btn { margin-top:auto; align-self:flex-start; }
.buy .packs { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px; }
.auth-box .terms { display:flex; gap:8px; align-items:flex-start; margin-top:14px; font-size:13.5px; line-height:1.4; }
.auth-box .terms input { width:auto; margin-top:2px; flex:0 0 auto; }
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.doc { max-width:760px; margin:0 auto; padding:28px 18px 60px; line-height:1.6; }
.doc h1 { margin-bottom:4px; } .doc h2 { margin-top:26px; font-size:18px; }
@media (max-width:520px) { .hide-sm { display:none; } }
/* small phones: Log out moves to the Account page (button there), the top bar keeps brand + credit + theme */
@media (max-width:420px) { .nav-who a.out { display:none; } .nav-who { gap:8px; } }