@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}
:root{
  /* Clean dialer look: white panels on a cool grey ground, one blue for actions. */
  --bg:#F3F5F9; --surface:#FFFFFF; --surface-2:#F6F8FB; --ink:#0F1B33; --muted:#5B6B85; --line:#DCE3EE;
  --brand:#1F5EEA; --brand-ink:#FFFFFF; --brand-soft:#E8EFFE; --head:#FFFFFF; --head-ink:#0F1B33;
  --turmeric:#E4A824; --turmeric-soft:#FDF3DA; --turmeric-ink:#5A3B00;
  --t-neutral:#1E9E55; --t-yellow:#EFC12E; --t-orange:#EA842A; --t-red:#D2352C; --t-blue:#1F5EEA; --t-grey:#7A879C;
  --danger:#D23B33; --danger-soft:#FDECEB; --ok:#1E9E55; --ok-soft:#E3F5EA; --focus:#1F5EEA; --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1320; --surface:#151D2E; --surface-2:#1A2337; --ink:#E6ECF7; --muted:#9AA8C0; --line:#28344D;
    --brand:#5B8CFF; --brand-ink:#0B1222; --brand-soft:#1C2A4A; --head:#151D2E; --head-ink:#E6ECF7;
    --turmeric:#E9B743; --turmeric-soft:#3A2F12; --turmeric-ink:#FFF4D6;
    --danger:#F0675F; --danger-soft:#3A1715; --ok:#4CC27E; --ok-soft:#173326; --focus:#7AA7FF; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1320; --surface:#151D2E; --surface-2:#1A2337; --ink:#E6ECF7; --muted:#9AA8C0; --line:#28344D;
  --brand:#5B8CFF; --brand-ink:#0B1222; --brand-soft:#1C2A4A; --head:#151D2E; --head-ink:#E6ECF7;
  --turmeric:#E9B743; --turmeric-soft:#3A2F12; --turmeric-ink:#FFF4D6;
  --danger:#F0675F; --danger-soft:#3A1715; --ok:#4CC27E; --ok-soft:#173326; --focus:#7AA7FF; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.4}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
.app{display:flex;flex-direction:column;height:100%}

.top{display:flex;align-items:center;gap:18px;padding:10px 16px;background:var(--head);color:var(--head-ink);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand::before{content:'';display:inline-block;width:22px;height:22px;margin-right:8px;vertical-align:-5px;background:var(--brand);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='3' y='13' width='4' height='7' rx='1.5'/%3E%3Crect x='17' y='13' width='4' height='7' rx='1.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='3' y='13' width='4' height='7' rx='1.5'/%3E%3Crect x='17' y='13' width='4' height='7' rx='1.5'/%3E%3C/svg%3E") center/contain no-repeat}
.brand{font-weight:700;font-size:16px;margin-right:auto}
.top .item{display:flex;flex-direction:column;line-height:1.15}
.top .k{font-size:11px;color:var(--muted)}
.top .v{font-weight:700;font-variant-numeric:tabular-nums}
.top a,.top .link{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 12px;text-decoration:none;font-weight:700}
.top a:hover,.top .link:hover{border-color:var(--brand);color:var(--brand)}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-weight:700}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.card h2{font-size:13px;margin:0 0 8px;color:var(--muted);font-weight:700}
.stack{display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:8px 10px;text-align:center}
.btn:hover:not(:disabled){border-color:var(--brand)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--brand);color:var(--brand-ink);border-color:var(--brand);font-weight:700}
.btn.danger{background:var(--danger-soft);color:var(--danger);border-color:transparent;font-weight:700}
.btn.big{padding:12px;font-size:15px;font-weight:700}
.btn.on{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn.full{width:100%}
.btn.small{padding:5px 8px;font-size:13px}
input.btn,select.btn{text-align:left}

.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{border:1px solid var(--line);border-radius:8px;padding:7px 8px;cursor:pointer;display:flex;justify-content:space-between;gap:6px;background:var(--surface-2)}
.seg input:checked + label{background:var(--brand-soft);border-color:var(--brand);font-weight:700}
.seg input:focus-visible + label{outline:2px solid var(--focus);outline-offset:2px}
.seg input:disabled + label{opacity:.5;cursor:not-allowed}
.count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

.field{display:flex;flex-direction:column;gap:3px;min-width:0}
.field label{font-size:12px;color:var(--muted)}
.field label b{color:var(--danger);font-weight:700}
.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:8px;padding:7px 9px;background:var(--surface);min-width:0;width:100%}
.field textarea{resize:vertical;min-height:38px}
.field input[readonly]{background:var(--surface-2);color:var(--muted)}
.invalid{border-color:var(--danger)!important;background:var(--danger-soft)!important}
.note{font-size:12px;color:var(--muted)}
.empty{color:var(--muted)}
.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;background:var(--surface-2);border:1px solid var(--line);white-space:nowrap}
.chip.new{background:var(--turmeric-soft);border-color:var(--turmeric);color:var(--turmeric-ink)}
.chip.ops{background:var(--brand-soft);border-color:var(--brand);color:var(--ink)}
.chip.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ink)}
.chip.bad{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;padding:16px;z-index:20}
.modal.show{display:flex}
.dialog{background:var(--surface);color:var(--ink);border-radius:12px;max-width:520px;width:100%;padding:18px;border:1px solid var(--line);max-height:90%;overflow:auto}
.dialog h3{margin:0 0 10px;font-size:17px}
.toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:30;max-width:92vw}
.toast.show{opacity:1}

table.data{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.data th,table.data td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.data th{font-size:12px;color:var(--muted);font-weight:700;background:var(--surface-2);position:sticky;top:0}
.scroll{overflow:auto}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 12px}
.tabs button[aria-selected="true"]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand);font-weight:700}
.page{flex:1;min-height:0;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:12px}
.history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.history li{border-left:3px solid var(--turmeric);padding:4px 10px;background:var(--surface-2);border-radius:0 6px 6px 0}
.history .d{font-size:12px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
