/* IBM Plex Sans Arabic (SIL OFL 1.1, IBM release @ibm/plex-sans-arabic 1.1.0); license in fonts/OFL-IBMPlexSansArabic.txt. */
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/IBMPlexSansArabic-Bold.woff2") format("woff2"); }
/* Tokens mirror brand/tokens.json */
:root {
  --bg:#F4F6FB; --surface:#FFFFFF; --surface2:#F1F4FA; --border:#DFE5F0; --borderStrong:#C9D2E3;
  --text:#0E1A33; --muted:#4D5A73; --sidebar:#0C1E4A; --sideText:#EEF2FB; --sideMuted:#AEBBD6; --sideActive:#1A3577;
  --primary:#2355D8; --onPrimary:#FFFFFF; --primaryFill:#2355D8; --cta:#FF8A35; --onCta:#1A1206;
  --success:#15803D; --successBg:#DCFCE7; --error:#B91C1C; --errorBg:#FEE2E2; --warning:#A15C07; --warningBg:#FEF3C7;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0A1122; --surface:#101A30; --surface2:#16223B; --border:#22314F; --borderStrong:#2B3B5C;
    --text:#E7ECF6; --muted:#9EABC3; --sidebar:#070D1C; --sideText:#E6ECF8; --sideMuted:#94A3C0; --sideActive:#172A57;
    --primary:#7096F2; --primaryFill:#2355D8; --success:#4ADE80; --successBg:#0F2A1C; --error:#F87171; --errorBg:#2C1518;
    --warning:#FBBF24; --warningBg:#2A2210; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font: 14px/1.55 "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; }
[hidden] { display:none !important; }
.num, time { font-variant-numeric: tabular-nums; direction:ltr; unicode-bidi:isolate; }
h1 { font-size:22px; margin:0; } h2 { font-size:16px; margin:0 0 12px; }
label { display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:13px; margin-bottom:12px; }
input, select { font:inherit; min-height:44px; padding:0 12px; border-radius:8px; border:1px solid var(--borderStrong); background:var(--surface); color:var(--text); }
input:focus-visible, select:focus-visible, button:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
button { font:inherit; font-weight:600; min-height:40px; padding:0 16px; border-radius:8px; cursor:pointer; border:0; }
.cta { background:var(--cta); color:var(--onCta); }
.primary { background:var(--primaryFill); color:var(--onPrimary); }
.ghost { background:transparent; color:var(--text); border:1px solid var(--borderStrong); }
.ghost.light { color:var(--sideText); border-color:var(--sideActive); }
.small { min-height:34px; padding:0 10px; font-size:13px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px; }
.msg { padding:10px 12px; border-radius:8px; background:var(--successBg); color:var(--text); }
.msg::before { content:"✓ "; color:var(--success); font-weight:700; }
.msg.error { background:var(--errorBg); } .msg.error::before { content:"✕ "; color:var(--error); }
.row { display:flex; gap:10px; flex-wrap:wrap; } .row > label { flex:1 1 140px; } .row.end { justify-content:flex-end; }

.login { min-height:100vh; display:flex; flex-wrap:wrap; }
.login-brand { flex:1 1 360px; background:var(--sidebar); color:#fff; padding:48px; display:flex; flex-direction:column; gap:16px; justify-content:center; }
.login-brand p { color:var(--sideMuted); margin:0; }
.login-form-wrap { flex:1 1 360px; display:flex; align-items:center; justify-content:center; padding:32px 16px; }
.login-form { width:100%; max-width:380px; display:flex; flex-direction:column; }

.shell { display:flex; flex-wrap:wrap; min-height:100vh; }
.side { flex:1 1 220px; max-width:250px; background:var(--sidebar); color:var(--sideText); padding:24px 14px; display:flex; flex-direction:column; gap:20px; }
.wordmark { height:36px; width:auto; align-self:flex-start; margin-inline-start:8px; }
.side nav { display:flex; flex-direction:column; gap:4px; }
.nav { text-align:start; background:transparent; color:var(--sideText); min-height:44px; }
.nav.active { background:var(--sideActive); box-shadow: inset -3px 0 0 var(--cta); }
.who { margin-top:auto; display:flex; flex-direction:column; gap:8px; color:var(--sideMuted); font-size:13px; padding:0 8px; }
main { flex:999 1 560px; min-width:0; padding:24px; display:flex; flex-direction:column; gap:16px; }
main > section { display:flex; flex-direction:column; gap:16px; }
.bar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.grid2 { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }
.table-card { padding:0; overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:start; background:var(--surface2); color:var(--muted); font-weight:600; padding:10px 14px; }
td { padding:10px 14px; border-top:1px solid var(--border); vertical-align:middle; }
.badge { display:inline-flex; gap:4px; align-items:center; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.badge.ok { background:var(--successBg); color:var(--success); } .badge.ok::before { content:"✓"; }
.badge.warn { background:var(--warningBg); color:var(--warning); } .badge.warn::before { content:"⚠"; }
.badge.bad { background:var(--errorBg); color:var(--error); } .badge.bad::before { content:"✕"; }
dialog { border:1px solid var(--border); border-radius:14px; padding:0; background:var(--surface); color:var(--text); width:min(440px, calc(100vw - 32px)); }
dialog::backdrop { background: rgb(7 13 28 / .55); }
.dialog { padding:20px; display:flex; flex-direction:column; }
.details { color:var(--muted); font-size:12px; max-width:420px; overflow-wrap:anywhere; }

.hint { color:var(--muted); margin:0; font-size:13px; }
/* wallet lanes: identity | out | in | balance (shared layout with the Windows app) */
.wallet-grid { display:grid; gap:12px; }
.lane { background:var(--surface); border:1px solid var(--border); border-radius:12px; display:grid; grid-template-columns:minmax(150px,1fr) minmax(210px,1.4fr) minmax(210px,1.4fr) minmax(150px,1fr); }
.lane > * { padding:14px 16px; min-width:0; }
.lane > * + * { border-inline-start:1px solid var(--border); }
.who-wallet { display:grid; align-content:start; justify-items:start; gap:4px; }
.who-wallet h3 { margin:0; font-size:16px; } .who-wallet .num { color:var(--muted); }
.prov { font-size:11px; font-weight:700; color:var(--primary); background:var(--surface2); border-radius:6px; padding:1px 7px; }
.preset { font-size:11.5px; color:var(--warning); }
.flow { display:grid; align-content:start; gap:6px; }
.flow-label { font-size:12px; font-weight:700; }
.flow.out .flow-label { color:var(--cta); } .flow.in .flow-label { color:var(--primary); }
.avail { font-size:22px; font-weight:800; line-height:1.2; } .avail small { font-size:12px; font-weight:600; color:var(--muted); }
.avail.zero { color:var(--error); }
.meter { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:8px; font-size:11.5px; color:var(--muted); }
.track { height:5px; border-radius:5px; background:var(--surface2); overflow:hidden; }
.track i { display:block; height:100%; width:0; border-radius:5px; }
.flow.out .track i { background:var(--cta); } .flow.in .track i { background:var(--primaryFill); }
.track i.full { background:var(--error) !important; }
.binds { font-size:11.5px; color:var(--muted); min-height:0; }
details.more summary { cursor:pointer; font-size:12px; color:var(--muted); }
.facts { display:grid; grid-template-columns:auto 1fr 1fr; gap:2px 10px; font-size:12px; margin-top:6px; }
.facts b { font-weight:600; color:var(--muted); }
.money-col { display:grid; align-content:start; gap:8px; }
.money-col div { display:grid; } .money-col span:first-child { font-size:11.5px; color:var(--muted); } .money-col strong { font-size:15px; }
.gap-flag { color:var(--warning); background:var(--warningBg); border-radius:8px; padding:4px 8px; font-size:12px; }
@media (max-width: 1000px) { .lane { grid-template-columns:1fr 1fr; } .lane > :nth-child(3) { border-inline-start:0; } .lane > :nth-child(n+3) { border-top:1px solid var(--border); } }
@media (max-width: 640px) { .lane { grid-template-columns:1fr; } .lane > * + * { border-inline-start:0; border-top:1px solid var(--border); } }
fieldset { border:1px solid var(--border); border-radius:10px; margin:0 0 12px; padding:10px 12px 0; }
legend { font-weight:700; font-size:13px; padding:0 6px; }

/* devices */
.devices { margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.devices .bar h2 { margin:0; font-size:16px; }
.dev-list { display:flex; flex-direction:column; gap:10px; }
.device { border:1px solid var(--border); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.device h3 { margin:0; font-size:15px; }
.device.revoked { opacity:.65; }
.sims { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.sim { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sim select { min-width:0; flex:1 1 200px; }
.code { font-size:18px; letter-spacing:2px; }
button.danger { color:var(--error); }

.reminders { margin-bottom:16px; border-inline-start:4px solid var(--cta); }
.reminders .fine { margin:4px 0 10px; opacity:.8; font-size:.92em; }
.rem-list { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.rem-list li { display:flex; gap:14px; flex-wrap:wrap; align-items:baseline; padding:8px 10px; border-radius:8px; background:var(--errorBg); }
.rem-list li.warn { background:var(--warningBg); }
.reminders.ok { border-inline-start-color: var(--success); }
dialog.wide { width:min(720px, calc(100vw - 32px)); }
.rc-list { display:flex; flex-direction:column; gap:10px; max-height:60vh; overflow:auto; margin:12px 0; }
.rc-item { padding:12px; display:flex; flex-direction:column; gap:6px; }
.rc-item form label { flex:1; }