/* Valmier — iOS 27 design system (2026-10-17, owner: "everything iOS 27, not a mix of old and new").
   Replaces fx.css + glass.css. Loaded LAST, after app.css and theme.css, and re-maps their tokens, so every page
   (reseller, customer, owner, login) speaks one language:
   - system grouped backgrounds, inset cards, hairline separators, Vazirmatn everywhere (no display font)
   - one tint colour (Valmier crimson-pink), iOS status colours, capsule controls, iOS switches
   - Liquid Glass (iOS 27 material: diffusion, edge refraction, darkened contour, bright specular rim) ONLY on floating
     chrome: tab bar, the separate + button, sheets, toasts, the wallet card's fact chips. Clarity slider → --lg-clarity.
   Rules are prefixed html[data-theme] so they beat theme.css's light-mode rules by order, not by !important. */

/* ================================================================ tokens */
html[data-theme] {
  --bg: #000000; --bg-2: #1C1C1E; --bg-3: #2C2C2E; --bg-4: #3A3A3C;
  --fill: rgb(118 118 128 / .24); --fill-2: rgb(118 118 128 / .32); --fill-3: rgb(118 118 128 / .18);
  --sep: rgb(84 84 88 / .55);
  --label: #FFFFFF; --label-2: rgb(235 235 245 / .62); --label-3: rgb(235 235 245 / .32);
  --tint: #FF375F; --tint-2: #D7264A; --money: #FF9F0A;
  --green: #30D158; --red: #FF453A; --orange: #FF9F0A; --purple: #BF5AF2; --blue: #0A84FF;

  /* old token names → iOS values (app.css + theme.css read these) */
  --abyss: var(--bg); --stone: var(--bg); --night: var(--bg-2); --night-2: var(--bg-2); --night-3: var(--bg-3);
  --line: var(--sep); --line-2: var(--fill-2);
  --bone: var(--label); --ash: var(--label-2); --ash-dim: var(--label-3);
  --ember: var(--tint); --crimson: var(--tint); --soul: var(--money); --dusk: var(--bg-3); --violet: var(--purple);
  --sky: var(--tint); --sky-soft: rgb(255 55 95 / .16);
  --ok: var(--green); --ok-bg: rgb(48 209 88 / .16); --bad: var(--red); --bad-bg: rgb(255 69 58 / .16);
  --warn: var(--orange); --warn-bg: rgb(255 159 10 / .16); --vio: var(--purple); --vio-bg: rgb(191 90 242 / .16);
  --display: var(--text);
  --r: 22px; --r-sm: 12px;

  /* Liquid Glass */
  --lg-clarity: 0.72;
  --lg-blur: calc(10px + (1 - var(--lg-clarity)) * 50px);
  --lg-saturate: 180%; --lg-contrast: .90; --lg-brightness: 1.26;
  --lg-tint: 255 255 255; --lg-tint-a: calc(.10 + (1 - var(--lg-clarity)) * .26);
  --lg-spec-a: .78; --lg-contour: 0 0 0 .5px rgb(0 0 0 / .55); --lg-shadow: 0 6px 22px rgb(0 0 0 / .45);
  --lg-sel: rgb(0 0 0 / .34);
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #F2F2F7; --bg-2: #FFFFFF; --bg-3: #F2F2F7; --bg-4: #E5E5EA;
  --fill: rgb(118 118 128 / .12); --fill-2: rgb(118 118 128 / .20); --fill-3: rgb(118 118 128 / .08);
  --sep: rgb(60 60 67 / .22);
  --label: #000000; --label-2: rgb(60 60 67 / .62); --label-3: rgb(60 60 67 / .32);
  --tint: #FF2D55; --tint-2: #D9163E; --money: #E07800;
  --green: #34C759; --red: #FF3B30; --orange: #FF9500; --purple: #AF52DE; --blue: #007AFF;
  --ok-bg: rgb(52 199 89 / .14); --bad-bg: rgb(255 59 48 / .12); --warn-bg: rgb(255 149 0 / .14); --vio-bg: rgb(175 82 222 / .12);
  --sky-soft: rgb(255 45 85 / .10);
  --lg-tint-a: calc(.14 + (1 - var(--lg-clarity)) * .42); --lg-brightness: 1.06; --lg-contrast: .94;
  --lg-spec-a: .95; --lg-contour: 0 0 0 .5px rgb(0 0 0 / .18); --lg-shadow: 0 4px 16px rgb(0 0 0 / .10);
  --lg-sel: rgb(0 0 0 / .07);
  color-scheme: light;
}

/* ================================================================ base */
html[data-theme] body {
  font: 15px/1.55 var(--text); letter-spacing: 0; color: var(--label);
  /* a quiet wallpaper so the glass has something to bend */
  background:
    radial-gradient(70vw 50vh at 85% -10%, rgb(255 55 95 / .16), transparent 70%),
    radial-gradient(60vw 45vh at 0% 0%, rgb(94 92 230 / .12), transparent 70%),
    var(--bg) fixed;
}
html[data-theme="light"] body {
  background:
    radial-gradient(70vw 50vh at 85% -10%, rgb(255 45 85 / .09), transparent 70%),
    radial-gradient(60vw 45vh at 0% 0%, rgb(88 86 214 / .07), transparent 70%),
    var(--bg) fixed;
}
html[data-theme] a { color: var(--tint); }
html[data-theme] a:hover { color: var(--tint); opacity: .8; }
html[data-theme] ::selection { background: rgb(255 55 95 / .35); }
html[data-theme] :focus-visible { outline: 2px solid var(--tint); }
html[data-theme] .money, html[data-theme] .stat .v.money { color: var(--money); }

/* ================================================================ shell */
html[data-theme] .side { background: var(--bg-2); border: 0; border-inline-start: .5px solid var(--sep); }
html[data-theme] .side::after { display: none; }
html[data-theme] .brand span { font: 700 21px/1.15 var(--text); color: var(--label); background: none; -webkit-text-fill-color: currentColor; }
html[data-theme] .brand img { box-shadow: none; border-radius: 12px; }
html[data-theme] .nav-group { font-size: 12.5px; font-weight: 500; color: var(--label-2); padding: 16px 12px 6px; }
html[data-theme] .side nav a { border-radius: 11px; color: var(--label); font-weight: 500; padding: 9px 12px; }
html[data-theme] .side nav a .ico { color: var(--tint); }
html[data-theme] .side nav a:hover { background: var(--fill-3); transform: none; }
html[data-theme] .side nav a.on { background: var(--tint); color: #fff; box-shadow: none; }
html[data-theme] .side nav a.on .ico { color: #fff; }
html[data-theme] .side nav a.on::after { display: none; }
html[data-theme] .me { background: var(--fill-3); border: 0; border-radius: 14px; }
html[data-theme] .avatar { background: var(--tint); border-radius: 50%; }
html[data-theme] .count { background: var(--red); }

html[data-theme] .topbar { background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: .5px solid var(--sep);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); min-height: 60px; }
html[data-theme] .topbar::after { display: none; }
html[data-theme] .topbar h1 { font: 700 20px/1.3 var(--text); color: var(--label); background: none; -webkit-text-fill-color: currentColor; }
html[data-theme] .topbar-logo img { border-radius: 9px; }
html[data-theme] .icon-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--fill); border: 0; color: var(--tint); }
html[data-theme] .icon-btn:hover { background: var(--fill-2); color: var(--tint); transform: none; }
html[data-theme] .icon-btn.sm { width: 32px; height: 32px; }
html[data-theme] .icon-btn .count { position: absolute; top: -3px; inset-inline-start: 22px; min-width: 17px; height: 17px; line-height: 17px; font-size: 10px; padding: 0 4px; }

/* ================================================================ cards & lists (inset grouped) */
html[data-theme] .card, html[data-theme] .stat, html[data-theme] .tile, html[data-theme] .login .login-card {
  background: var(--bg-2); border: 0; border-radius: 22px; box-shadow: none;
}
html[data-theme] .card { overflow: hidden; margin-bottom: 20px; }
html[data-theme] .card:hover, html[data-theme] .stat:hover, html[data-theme] .tile:hover { box-shadow: none; transform: none; }
html[data-theme] .card.hl { background: linear-gradient(0deg, rgb(255 159 10 / .10), rgb(255 159 10 / .10)), var(--bg-2); }
html[data-theme] .card.danger { background: linear-gradient(0deg, rgb(255 69 58 / .10), rgb(255 69 58 / .10)), var(--bg-2); }
html[data-theme] .card-head { border-bottom: .5px solid var(--sep); padding: 14px 18px; min-height: 54px; }
html[data-theme] .card-head h2 { font: 700 16.5px/1.35 var(--text); color: var(--label); }
html[data-theme] .card-head h2 .ico { color: var(--tint); filter: none; }
html[data-theme] .card-head .sub { font-size: 12.5px; color: var(--label-2); }
html[data-theme] .card-body { padding: 16px 18px; }

html[data-theme] .stat { padding: 16px; }
html[data-theme] .stat .s-ico { border-radius: 50%; border: 0; background: var(--sky-soft); color: var(--tint); box-shadow: none; }
html[data-theme] .stat .s-ico.ok { background: var(--ok-bg); color: var(--green); }
html[data-theme] .stat .s-ico.warn { background: var(--warn-bg); color: var(--orange); }
html[data-theme] .stat .s-ico.vio { background: var(--vio-bg); color: var(--purple); }
html[data-theme] .stat .k { color: var(--label-2); font-size: 13px; }
html[data-theme] .stat .v { font: 700 22px/1.3 var(--text); color: var(--label); background: none; -webkit-text-fill-color: currentColor; }

html[data-theme] thead th, html[data-theme] tr.th th { background: transparent; color: var(--label-2); font: 500 12.5px var(--text); border-bottom: .5px solid var(--sep); }
html[data-theme] tbody td { border-bottom: .5px solid var(--sep); }
html[data-theme] tbody tr:hover td { background: var(--fill-3); }
html[data-theme] tbody tr td:first-child::after { display: none; }
html[data-theme] .sub { color: var(--label-2); }
html[data-theme] .mono { color: var(--label-2); }
html[data-theme] .empty .ico { color: var(--label-3); }
html[data-theme] .kv dt, html[data-theme] .kv dd { border-bottom: .5px solid var(--sep); }
html[data-theme] .kv dt { color: var(--label-2); }

/* ================================================================ wallet card (hero) — like Apple Wallet */
html[data-theme] .hero {
  border-radius: 26px; padding: 22px; color: #fff; min-height: 0; isolation: isolate;
  background: radial-gradient(120% 90% at 100% 0%, #FF6A88 0%, transparent 55%), linear-gradient(150deg, #FF375F 0%, #C81E4C 45%, #6E1E5A 100%);
  box-shadow: 0 20px 44px -24px rgb(255 55 95 / .75);
}
html[data-theme] .hero::before, html[data-theme] .hero::after { display: none; }
html[data-theme] .hero .fx-scene, html[data-theme] .hero .fx-embers { display: none; }
html[data-theme] .hero .label { color: rgb(255 255 255 / .82); font-size: 13.5px; }
html[data-theme] .hero .label b { color: #fff !important; }
html[data-theme] .hero .amount { font: 700 clamp(36px, 9vw, 46px)/1.1 var(--text); color: #fff; background: none; -webkit-text-fill-color: #fff;
  filter: none; text-shadow: none; letter-spacing: -.5px; }
html[data-theme] .hero .amount small { font: 500 15px var(--text); -webkit-text-fill-color: rgb(255 255 255 / .85); }
html[data-theme] .hero .btn.light { background: #fff; color: #000; box-shadow: none; }
html[data-theme] .hero .btn.ghost { background: rgb(255 255 255 / .20) !important; border: 0 !important; color: #fff; }
html[data-theme] .hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
html[data-theme] .hero-facts > div { color: rgb(255 255 255 / .82); font-size: 12px; padding: 10px 12px; border-radius: 16px; }
html[data-theme] .hero-facts b { color: #fff; font-size: 15px; }

/* ================================================================ controls */
html[data-theme] .btn {
  border-radius: 999px; padding: 11px 20px; font: 700 15px/1.3 var(--text); background: var(--tint); color: #fff; box-shadow: none; overflow: hidden;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), background .2s, opacity .2s; position: relative;
}
html[data-theme] .btn::after { display: none; }
html[data-theme] .btn:hover { filter: none; background: var(--tint-2); color: #fff; box-shadow: none; }
html[data-theme] .btn:active { transform: scale(.96); }
html[data-theme] .btn.small { padding: 8px 14px; font-size: 13.5px; border-radius: 999px; }
html[data-theme] .btn.ghost { background: var(--fill); color: var(--tint); border: 0; font-weight: 600; }
html[data-theme] .btn.ghost:hover { background: var(--fill-2); color: var(--tint); }
html[data-theme] .btn.light { background: var(--bg-2); color: var(--label); }
html[data-theme] .btn.soul { background: var(--orange); color: #fff; }
html[data-theme] .btn.danger { background: var(--bad-bg); color: var(--red); border: 0; }
html[data-theme] .btn.danger:hover { background: rgb(255 69 58 / .26); color: var(--red); }
html[data-theme] .btn[disabled] { opacity: .55; }
html[data-theme] .btn.loading { pointer-events: none; color: transparent !important; }
html[data-theme] .btn.loading::before { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgb(255 255 255 / .35); border-top-color: #fff; animation: ios-spin .7s linear infinite; }
html[data-theme] :is(.btn.ghost, .btn.light, .btn.danger).loading::before { border-color: var(--fill-2); border-top-color: var(--tint); }
@keyframes ios-spin { to { transform: rotate(360deg); } }

html[data-theme] input, html[data-theme] select, html[data-theme] textarea {
  background: var(--fill-3); border: 0; border-radius: 12px; color: var(--label); padding: 11px 14px; font: 400 15px var(--text);
}
html[data-theme] input:hover, html[data-theme] select:hover, html[data-theme] textarea:hover { border: 0; }
html[data-theme] input:focus, html[data-theme] select:focus, html[data-theme] textarea:focus { box-shadow: 0 0 0 2px var(--tint); background: var(--fill-3); }
html[data-theme] input::placeholder, html[data-theme] textarea::placeholder { color: var(--label-3); }
html[data-theme] .field label, html[data-theme] label { color: var(--label-2); }
html[data-theme] .field label b, html[data-theme] label b { color: var(--label); }
html[data-theme] .addon { border-radius: 12px; overflow: hidden; }
html[data-theme] .addon > span { background: var(--fill); color: var(--label-2); border: 0; }
html[data-theme] .search { background: var(--fill-3); border: 0; border-radius: 12px; color: var(--label-2); }
html[data-theme] .search input { background: transparent; }

/* segmented control (capsule, raised thumb) */
html[data-theme] .seg { background: var(--fill); border: 0; border-radius: 999px; padding: 3px; gap: 2px; }
html[data-theme] .seg button { border-radius: 999px; color: var(--label); font: 500 13px var(--text); padding: 6px 13px; }
html[data-theme] .seg button.on { background: var(--bg-4); color: var(--label); box-shadow: 0 2px 6px rgb(0 0 0 / .25); }
html[data-theme="light"] .seg button.on { background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .12), 0 0 0 .5px rgb(0 0 0 / .04); }
html[data-theme] .seg .n { color: var(--label-2); }

html[data-theme] .chip { border: 0; background: var(--fill); color: var(--label); border-radius: 999px; padding: 6px 14px; font: 500 13.5px var(--text); }
html[data-theme] .chip:hover { border: 0; background: var(--fill-2); color: var(--label); }
html[data-theme] .chip.on { background: var(--tint); color: #fff; box-shadow: none; }

/* iOS switch: 51×31, green when on */
html[data-theme] .switch, html[data-theme] input.sw { width: 51px; height: 31px; border-radius: 999px; background: var(--fill-2); box-shadow: none; }
html[data-theme] .switch::after, html[data-theme] input.sw::after { top: 2px; inset-inline-end: 2px; width: 27px; height: 27px;
  box-shadow: 0 3px 8px rgb(0 0 0 / .15), 0 3px 1px rgb(0 0 0 / .06); transition: inset-inline-end .25s cubic-bezier(.3, 1.3, .5, 1), width .2s; }
html[data-theme] .switch.on, html[data-theme] input.sw:checked { background: var(--green); box-shadow: none; }
html[data-theme] .switch.on::after, html[data-theme] input.sw:checked::after { inset-inline-end: 22px; }
html[data-theme] .switch:active::after { width: 33px; }

html[data-theme] .tag { border: 0; border-radius: 999px; height: 26px; padding: 0 11px; font: 600 12.5px/1 var(--text); background: var(--fill); }
html[data-theme] .tag.dot::before { box-shadow: none; }
html[data-theme] .tag.green { color: var(--green); background: var(--ok-bg); }
html[data-theme] .tag.red { color: var(--red); background: var(--bad-bg); }
html[data-theme] .tag.amber { color: var(--orange); background: var(--warn-bg); }
html[data-theme] .tag.violet { color: var(--purple); background: var(--vio-bg); }
html[data-theme] .tag.gray { color: var(--label-2); }
html[data-theme] .tag.crimson { color: #fff; background: var(--tint); }

html[data-theme] .option { border: 0; background: var(--fill-3); border-radius: 16px; }
html[data-theme] .option:hover { border: 0; background: var(--fill); transform: none; }
html[data-theme] .option:has(input:checked) { background: var(--sky-soft); box-shadow: inset 0 0 0 2px var(--tint); border: 0; }
html[data-theme] .option .tick { border-color: var(--label-3); }
html[data-theme] .option:has(input:checked) .tick { background: var(--tint); }

html[data-theme] .note { border: 0; border-radius: 16px; background: var(--warn-bg); color: var(--label); }
html[data-theme] .note .ico { color: var(--orange); }
html[data-theme] .note.info { background: var(--fill-3); color: var(--label-2); }
html[data-theme] .note.info .ico { color: var(--label-2); }
html[data-theme] .note.err { background: var(--bad-bg); color: var(--label); }
html[data-theme] .note.err .ico { color: var(--red); }
html[data-theme] .cashback-bar, html[data-theme] .trial-bar { border: 0; border-radius: 16px; background: var(--ok-bg); }
html[data-theme] .trial-bar { background: var(--warn-bg); }

html[data-theme] .bar { height: 6px; background: var(--fill); }
html[data-theme] .bar i { background: var(--tint); box-shadow: none; animation: ios-grow .8s cubic-bezier(.2, .8, .2, 1) .1s both; transform-origin: right center; }
@keyframes ios-grow { from { transform: scaleX(0); } }
html[data-theme] .ring .track { stroke: var(--fill); }
html[data-theme] .ring .fill { stroke: var(--tint); filter: none; transition: stroke-dasharray 1s cubic-bezier(.2, .8, .2, 1); }
html[data-theme] .ring.ok .fill { stroke: var(--green); } html[data-theme] .ring.warn .fill { stroke: var(--orange); } html[data-theme] .ring.vio .fill { stroke: var(--purple); }
html[data-theme] .ring-in b { font: 700 20px var(--text); color: var(--label); }
html[data-theme] .wiz-n { background: var(--tint); }
html[data-theme] .vip-price, html[data-theme] .doc h1 { font-family: var(--text); font-weight: 700; }
html[data-theme] .cardno { font-family: var(--mono); }

/* ================================================================ Liquid Glass material (floating chrome only) */
@property --lg-angle { syntax: "<angle>"; initial-value: 135deg; inherits: true; }
html[data-theme] :is(.tabbar, .tab-fab, dialog.modal, .toast, .hero-facts > div) {
  isolation: isolate;
  background: rgb(var(--lg-tint) / var(--lg-tint-a));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast)) brightness(var(--lg-brightness));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast)) brightness(var(--lg-brightness));
  box-shadow: var(--lg-contour), var(--lg-shadow);
  border: 0;
  transition: --lg-angle .35s ease-out;
}
@supports (backdrop-filter: url(#lg-lens)) {
  html[data-theme] :is(.tabbar, .tab-fab, dialog.modal) {
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast)) brightness(var(--lg-brightness)) url(#lg-lens);
  }
}
html[data-theme] :is(.tabbar, .tab-fab, dialog.modal, .toast, .hero-facts > div)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--lg-angle, 135deg),
    rgb(255 255 255 / var(--lg-spec-a)) 0deg, rgb(255 255 255 / .05) 68deg, rgb(255 255 255 / .30) 150deg,
    rgb(255 255 255 / .03) 228deg, rgb(255 255 255 / calc(var(--lg-spec-a) * .85)) 318deg, rgb(255 255 255 / var(--lg-spec-a)) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
html[data-theme] :is(.tabbar, .tab-fab, dialog.modal)::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom, rgb(255 255 255 / .16), rgb(255 255 255 / .03) 36%, transparent 60%);
}
html[data-theme] .hero-facts > div { position: relative; --lg-tint: 255 255 255; --lg-tint-a: .12; --lg-brightness: .92; --lg-saturate: 110%; --lg-spec-a: .55; }
html[data-theme] .hero-facts > div > * { position: relative; z-index: 3; }

/* sheets: glass, tinted enough for QR codes and forms */
html[data-theme] dialog.modal { position: fixed; border-radius: 34px; padding: 22px; color: var(--label); --lg-tint-a: .0; background: rgb(30 30 32 / .84); }
html[data-theme="light"] dialog.modal { background: rgb(255 255 255 / .88); }
html[data-theme] dialog.modal > * { position: relative; z-index: 3; }
html[data-theme] dialog.modal::backdrop { background: rgb(0 0 0 / .45); backdrop-filter: none; }
html[data-theme] dialog.modal[open] { animation: ios-sheet .4s cubic-bezier(.2, .9, .25, 1.1); }
@keyframes ios-sheet { from { opacity: 0; transform: translateY(24px) scale(.96); } }
html[data-theme] dialog.modal .qr { background: #fff; border-radius: 18px; }

/* toast: glass capsule from the top */
html[data-theme] .toast { border-radius: 999px; padding: 11px 20px; color: var(--label); animation: ios-toast .5s cubic-bezier(.3, 1.4, .5, 1); }
html[data-theme] .toast > * { position: relative; z-index: 3; }
html[data-theme] .toast .ico { color: var(--green); } html[data-theme] .toast.err .ico { color: var(--red); }
@keyframes ios-toast { from { opacity: 0; transform: translate(-50%, -20px) scale(.92); } }

/* ================================================================ phone: floating glass tab bar + separate + button (iOS 27) */
.tab-fab { display: none; }
@media (max-width: 900px) {
  html[data-theme] .tabbar {
    position: fixed; z-index: 30; display: flex; align-items: center; gap: 2px;
    inset: auto 12px max(12px, env(safe-area-inset-bottom)) 84px; padding: 6px; border-radius: 999px;
  }
  html[data-theme] .tabbar > * { position: relative; z-index: 3; }
  html[data-theme] .tabbar a, html[data-theme] .tabbar button { flex: 1; padding: 6px 0 5px; border-radius: 999px; color: var(--label); font: 600 10.5px var(--text);
    transition: background .25s, transform .18s cubic-bezier(.2, .8, .2, 1); gap: 2px; }
  html[data-theme] .tabbar .ico { width: 23px; height: 23px; color: var(--label); }
  html[data-theme] .tabbar a.on { background: var(--lg-sel); color: var(--tint); }
  html[data-theme] .tabbar a.on .ico { color: var(--tint); animation: none; }
  html[data-theme] .tabbar a:active, html[data-theme] .tabbar button:active { transform: scale(.92); }
  html[data-theme] .tabbar .count { top: 2px; inset-inline-start: 54%; }
  html[data-theme] .tabbar::before { display: block; }
  html[data-theme] .tab-fab {
    display: grid; place-items: center; position: fixed; z-index: 31; inset: auto auto max(12px, env(safe-area-inset-bottom)) 12px;
    width: 62px; height: 62px; border-radius: 50%; color: #fff;
    background: rgb(255 55 95 / .82) !important; --lg-spec-a: .9;
    transition: transform .18s cubic-bezier(.2, .8, .2, 1), --lg-angle .35s;
  }
  html[data-theme] .tab-fab .ico { width: 26px; height: 26px; position: relative; z-index: 3; stroke-width: 2.4; }
  html[data-theme] .tab-fab:active { transform: scale(.92); }
  html[data-theme] .tab-fab.on { background: var(--tint) !important; }
  html[data-theme] .page { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

  html[data-theme] .topbar { min-height: 54px; padding-block: 8px; }
  html[data-theme] .topbar h1 { font-size: 17px; }
  html[data-theme] .topbar-logo img { width: 30px; height: 30px; }
  html[data-theme] .topbar-actions:not(:has(> .btn, > form, > .tag, > span)) { flex: none; order: 0; }

  /* list rows: iOS cells */
  html[data-theme] table.rtable tr { border-bottom: .5px solid var(--sep); }
  html[data-theme] table.rtable td.actions .btn.small { padding: 10px 6px; }
  html[data-theme] .hero { padding: 20px; border-radius: 24px; }
}

/* ================================================================ dashboard connector map */
html[data-theme] .net { position: relative; height: calc(var(--n, 5) * 58px + 10px); min-height: 190px; }
html[data-theme] .net svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html[data-theme] .net .wire { fill: none; stroke: rgb(255 55 95 / .14); stroke-width: 6; stroke-linecap: round; filter: blur(2px); vector-effect: non-scaling-stroke; }
html[data-theme] .net .draw { fill: none; stroke: var(--label-3); stroke-width: 1.5; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: net-draw 1s cubic-bezier(.3, .7, .2, 1) calc(.15s + var(--k) * .12s) forwards; }
html[data-theme] .net .flow { fill: none; stroke: url(#net-grad); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: .14 .86; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgb(255 55 95 / .9));
  animation: net-flow 2.6s linear calc(var(--k) * -.45s) infinite; }
html[data-theme] .net .off .flow { display: none; }
html[data-theme] .net .off .draw { stroke: rgb(255 69 58 / .55); stroke-dasharray: .02 .025; animation: none; stroke-dashoffset: 0; }
@keyframes net-flow { to { stroke-dashoffset: 0; } }
@keyframes net-draw { to { stroke-dashoffset: 0; } }
html[data-theme] .node { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 13px 7px 9px; border-radius: 999px; font: 600 13px var(--text); color: var(--label); background: var(--bg-3);
  box-shadow: 0 0 0 .5px var(--sep), 0 6px 16px -8px rgb(0 0 0 / .6);
  animation: node-pop .5s cubic-bezier(.3, 1.5, .5, 1) calc(.4s + var(--k, 0) * .12s) backwards; }
html[data-theme="light"] .node { background: #fff; }
html[data-theme] .node .flag { width: 20px; height: 14px; border-radius: 3px; }
html[data-theme] .node .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
html[data-theme] .node.off .dot { background: var(--red); }
html[data-theme] .node.off { color: var(--label-2); }
html[data-theme] .node.src { padding: 10px 16px; font-size: 14px; color: #fff; background: var(--tint); box-shadow: 0 10px 24px -10px rgb(255 55 95 / .9); animation-delay: .1s; }
html[data-theme] .node.src::before { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 1.5px solid rgb(255 55 95 / .5); animation: src-ring 2.4s ease-out infinite; }
@keyframes node-pop { from { opacity: 0; scale: .6; } }
@keyframes src-ring { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 1.35; } }
html[data-theme] .net-foot { display: flex; justify-content: space-between; gap: 10px; color: var(--label-2); font-size: 12.5px; margin-top: 6px; }

/* ================================================================ login */
html[data-theme] .login::before { background: radial-gradient(60% 50% at 50% 0%, rgb(255 55 95 / .30), transparent 70%); }
html[data-theme] .login::after { display: none; }
html[data-theme] .login-brand { font: 700 28px/1.1 var(--text); }
html[data-theme] .login-brand img { box-shadow: 0 14px 32px -12px rgb(255 55 95 / .8); border-radius: 18px; }

/* ================================================================ details used across pages */
html[data-theme] .sub-settings > summary { list-style: none; cursor: pointer; }
html[data-theme] .sub-settings > summary::-webkit-details-marker { display: none; }
html[data-theme] .sw-lab { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--label-2); cursor: pointer; }
html[data-theme] .clarity { width: 100%; accent-color: var(--tint); }
html[data-theme] .clarity-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--label-2); }
html[data-theme] .pulse { background: var(--green); box-shadow: none; }

/* ================================================================ accessibility + calm */
@media (prefers-reduced-transparency: reduce) {
  html[data-theme] :is(.tabbar, .tab-fab, dialog.modal, .toast, .hero-facts > div) { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-3); }
}
@media (prefers-contrast: more) { html[data-theme] { --lg-clarity: .15; } }
html.calm .net .flow { display: none; }
html.calm .net .draw { stroke-dashoffset: 0; }
html.calm *, html.calm *::before, html.calm *::after { animation: none !important; transition: none !important; }

/* fixes after the first look (2026-10-17) */
html[data-theme] .search { display: flex; align-items: center; gap: 8px; padding-inline: 12px; }
html[data-theme] .search input { padding-inline: 0; box-shadow: none !important; }
html[data-theme] .search .ico { flex: none; color: var(--label-3); position: static; transform: none; }
html[data-theme] td.name a { color: var(--label); font-weight: 600; }
@media (max-width: 900px) {
  html[data-theme] table.rtable td { border-bottom: 0; }
}

/* ================================================================ v2 "grown-up" (owner 2026-10-17: "looks cartoonish / funky —
   the iOS nav bar is great, the rest feels childish"). Neutral first: black/white primary actions, graphite balance card,
   tighter radii, accent colour only for small details (active tab, links, a dot). The tab bar + «+» stay as they are. */
html[data-theme] {
  --tint: #F43F5E; --tint-2: #E11D48;
  --accent-ink: var(--label);
  --primary-bg: #F5F5F7; --primary-fg: #000;
  --r: 16px; --r-sm: 10px;
}
html[data-theme="light"] { --tint: #E11D48; --tint-2: #BE123C; --primary-bg: #111113; --primary-fg: #fff; }
html[data-theme] body { background: var(--bg) fixed; }

/* type: quieter weights */
html[data-theme] .topbar h1 { font-weight: 600; }
html[data-theme] .card-head h2 { font: 600 15.5px/1.35 var(--text); }
html[data-theme] .card-head h2 .ico, html[data-theme] .side nav a .ico { color: var(--label-2); }
html[data-theme] .side nav a.on { background: var(--fill-2); color: var(--label); }
html[data-theme] .side nav a.on .ico { color: var(--label); }
html[data-theme] .avatar { background: var(--bg-4); color: var(--label); }

/* surfaces: less round */
html[data-theme] .card, html[data-theme] .stat, html[data-theme] .tile, html[data-theme] .login .login-card { border-radius: 16px; }
html[data-theme] .card { box-shadow: 0 0 0 .5px var(--sep); }
html[data-theme="light"] .card { box-shadow: 0 0 0 .5px rgb(0 0 0 / .06), 0 1px 2px rgb(0 0 0 / .04); }

/* balance card: graphite, like a premium bank card — no pink gradient, no glass chips */
html[data-theme] .hero {
  border-radius: 20px; color: #fff;
  background: radial-gradient(90% 120% at 100% 0%, rgb(244 63 94 / .22), transparent 55%), linear-gradient(160deg, #2A2A2E 0%, #161618 100%);
  box-shadow: 0 0 0 .5px rgb(255 255 255 / .08), 0 18px 40px -24px rgb(0 0 0 / .8);
}
html[data-theme="light"] .hero { background: radial-gradient(90% 120% at 100% 0%, rgb(225 29 72 / .28), transparent 55%), linear-gradient(160deg, #26262A 0%, #0E0E10 100%); }
html[data-theme] .hero .amount { font-weight: 600; letter-spacing: -1px; }
html[data-theme] .hero .label { color: rgb(255 255 255 / .6); }
html[data-theme] .hero .btn.light { background: #fff; color: #000; }
html[data-theme] .hero .btn.ghost { background: rgb(255 255 255 / .12) !important; color: #fff; }
html[data-theme] .hero-facts { gap: 0; margin-top: 20px; padding-top: 16px; border-top: .5px solid rgb(255 255 255 / .14); }
html[data-theme] .hero-facts > div { background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important; border-radius: 0; padding: 0 14px; color: rgb(255 255 255 / .55); font-size: 12px; }
html[data-theme] .hero-facts > div + div { border-inline-start: .5px solid rgb(255 255 255 / .14); }
html[data-theme] .hero-facts > div:first-child { padding-inline-start: 0; }
html[data-theme] .hero-facts > div::after { display: none; }
html[data-theme] .hero-facts b { font-weight: 600; font-size: 15px; color: #fff; }

/* buttons: neutral primary, rounded-rect, not candy pills */
html[data-theme] .btn { border-radius: 12px; font: 600 14.5px/1.3 var(--text); background: var(--primary-bg); color: var(--primary-fg); padding: 11px 18px; }
html[data-theme] .btn:hover { background: var(--primary-bg); color: var(--primary-fg); opacity: .88; }
html[data-theme] .btn.small { border-radius: 10px; padding: 8px 13px; font-size: 13.5px; }
html[data-theme] .btn.ghost { background: var(--fill-3); color: var(--label); box-shadow: inset 0 0 0 .5px var(--sep); }
html[data-theme] .btn.ghost:hover { background: var(--fill); color: var(--label); opacity: 1; }
html[data-theme] .btn.ghost .ico { color: var(--label-2); }
html[data-theme] .btn.danger { background: transparent; color: var(--red); box-shadow: inset 0 0 0 .5px rgb(255 69 58 / .4); }
html[data-theme] .btn.loading::before { border-color: rgb(128 128 128 / .35); border-top-color: var(--primary-fg); }

/* selection controls: monochrome */
html[data-theme] .chip { border-radius: 10px; padding: 6px 12px; background: var(--fill-3); box-shadow: inset 0 0 0 .5px var(--sep); }
html[data-theme] .chip.on { background: var(--primary-bg); color: var(--primary-fg); box-shadow: none; }
html[data-theme] .seg { border-radius: 10px; }
html[data-theme] .seg button { border-radius: 8px; }
html[data-theme] .option { border-radius: 12px; box-shadow: inset 0 0 0 .5px var(--sep); }
html[data-theme] .option:has(input:checked) { background: var(--fill-3); box-shadow: inset 0 0 0 1.5px var(--label); }
html[data-theme] .option:has(input:checked) .tick { background: var(--label); color: var(--bg); }
html[data-theme] .wiz-n, html[data-theme] .card-head .wiz-n { background: var(--fill); color: var(--label); }
html[data-theme] input, html[data-theme] select, html[data-theme] textarea { border-radius: 10px; box-shadow: inset 0 0 0 .5px var(--sep); }
html[data-theme] input:focus, html[data-theme] select:focus, html[data-theme] textarea:focus { box-shadow: inset 0 0 0 1.5px var(--label-2); }
html[data-theme] .addon, html[data-theme] .search { border-radius: 10px; }

/* switch: smaller, iOS green kept but calmer */
html[data-theme] .switch, html[data-theme] input.sw { width: 42px; height: 25px; }
html[data-theme] .switch::after, html[data-theme] input.sw::after { width: 21px; height: 21px; }
html[data-theme] .switch.on::after, html[data-theme] input.sw:checked::after { inset-inline-end: 19px; }
html[data-theme] .switch.on, html[data-theme] input.sw:checked { background: #30B455; }

/* status tags: small, flat */
html[data-theme] .tag { border-radius: 7px; height: 22px; padding: 0 8px; font: 500 12px/1 var(--text); }
html[data-theme] .bar { height: 4px; }
html[data-theme] .bar i { background: var(--label-2); }
html[data-theme] .ring .fill { stroke: var(--label); }

/* connector map: monochrome lines, one accent light */
html[data-theme] .net .wire { stroke: var(--fill-3); filter: none; stroke-width: 1; }
html[data-theme] .net .draw { stroke: var(--label-3); stroke-width: 1.2; }
html[data-theme] .net .flow { stroke-width: 2; filter: none; }
html[data-theme] .node { border-radius: 10px; font-weight: 500; box-shadow: 0 0 0 .5px var(--sep); }
html[data-theme] .node.src { background: var(--primary-bg); color: var(--primary-fg); box-shadow: none; }
html[data-theme] .node.src::before { border-color: var(--label-3); }
html[data-theme] .icon-btn { color: var(--label); }
html[data-theme] .icon-btn:hover { color: var(--label); }
html[data-theme] .node.src::before { display: none; }
html[data-theme] label.option, html[data-theme] .option { color: var(--label); }
html[data-theme] .option .o-txt small { color: var(--label-2); }
html[data-theme] input[type=range] { background: none; box-shadow: none !important; padding: 0; height: 28px; accent-color: var(--label); }

/* ================================================================ v3 "Vormir" colour (owner 2026-10-17: "too colourless, the panel feels
   dead — pick a colour that fits planet Vormir"). docs/BRAND.md palette, done grown-up: wine-black ground, crimson→ember
   for primary actions, dusk violet in the balance card, amber Soul-Stone glow for money and highlights. Shapes from v2 stay. */
html[data-theme] {
  --bg: #0C0608; --bg-2: #180D12; --bg-3: #23131A; --bg-4: #301B24;
  --fill: rgb(201 160 170 / .16); --fill-2: rgb(201 160 170 / .24); --fill-3: rgb(201 160 170 / .08);
  --sep: rgb(244 236 230 / .10);
  --label: #F4ECE6; --label-2: rgb(244 236 230 / .62); --label-3: rgb(244 236 230 / .34);
  --tint: #F0503A; --tint-2: #E0382B; --money: #F5A04A;
  --crimson-btn: linear-gradient(135deg, #D8283E 0%, #A3163A 100%);
  --primary-bg: #D02A3C; --primary-fg: #fff;
  --sky-soft: rgb(224 56 43 / .16);
}
html[data-theme="light"] {
  --bg: #F6F0F1; --bg-2: #FFFFFF; --bg-3: #F3EAEC; --bg-4: #E9DDE1;
  --fill: rgb(74 30 58 / .09); --fill-2: rgb(74 30 58 / .15); --fill-3: rgb(74 30 58 / .05);
  --sep: rgb(58 18 34 / .12);
  --label: #2A0F19; --label-2: rgb(42 15 25 / .62); --label-3: rgb(42 15 25 / .34);
  --tint: #C42136; --tint-2: #A3163A; --money: #C2621A;
  --primary-bg: #B91C33; --primary-fg: #fff;
}
html[data-theme] body {
  background: radial-gradient(80vw 40vh at 50% -12%, rgb(122 44 102 / .22), transparent 70%), var(--bg) fixed;
}
html[data-theme="light"] body { background: radial-gradient(80vw 40vh at 50% -12%, rgb(196 22 58 / .07), transparent 70%), var(--bg) fixed; }

/* primary actions: crimson, with a hairline of light on top — solid, not candy */
html[data-theme] .btn { background: var(--crimson-btn, var(--primary-bg)); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .16); }
html[data-theme="light"] .btn { background: linear-gradient(135deg, #C8233A, #95163A); }
html[data-theme] .btn:hover { background: var(--crimson-btn, var(--primary-bg)); color: #fff; opacity: .9; }
html[data-theme] .btn.ghost { background: var(--fill-3); color: var(--label); box-shadow: inset 0 0 0 .5px var(--sep); }
html[data-theme] .btn.ghost .ico { color: var(--tint); }
html[data-theme] .btn.loading::before { border-color: rgb(255 255 255 / .35); border-top-color: #fff; }
html[data-theme] :is(.btn.ghost, .btn.light, .btn.danger).loading::before { border-color: var(--fill-2); border-top-color: var(--tint); }

/* selection: crimson */
html[data-theme] .chip.on { background: var(--primary-bg); color: #fff; }
html[data-theme] .option:has(input:checked) { background: var(--sky-soft); box-shadow: inset 0 0 0 1.5px var(--tint); }
html[data-theme] .option:has(input:checked) .tick { background: var(--tint); color: #fff; }
html[data-theme] .wiz-n, html[data-theme] .card-head .wiz-n { background: var(--sky-soft); color: var(--tint); }
html[data-theme] input:focus, html[data-theme] select:focus, html[data-theme] textarea:focus { box-shadow: inset 0 0 0 1.5px var(--tint); }
html[data-theme] input[type=range] { accent-color: var(--tint); }

/* icons + nav get their colour back */
html[data-theme] .card-head h2 .ico { color: var(--tint); }
html[data-theme] .side nav a .ico { color: var(--label-2); }
html[data-theme] .side nav a.on { background: var(--crimson-btn, var(--primary-bg)); color: #fff; }
html[data-theme] .side nav a.on .ico { color: #fff; }
html[data-theme] .icon-btn { color: var(--label); }
html[data-theme] .bar i { background: linear-gradient(270deg, #F0503A, #A3163A); }
html[data-theme] .ring .fill { stroke: var(--tint); }

/* balance card: Vormir at dusk — violet sky into blood red, the Soul Stone glowing on the horizon */
html[data-theme] .hero, html[data-theme="light"] .hero {
  background:
    radial-gradient(60% 55% at 50% 118%, rgb(245 160 74 / .55), rgb(242 134 42 / .18) 45%, transparent 70%),
    linear-gradient(170deg, #2C1032 0%, #5A1530 42%, #8E1B2E 72%, #3A0C16 100%);
  box-shadow: 0 0 0 .5px rgb(255 255 255 / .08), 0 22px 44px -26px rgb(196 22 58 / .7);
}
html[data-theme] .hero .amount { color: #FFF4E8; -webkit-text-fill-color: #FFF4E8; }
html[data-theme] .hero .label b { color: #FFD3A6 !important; }
html[data-theme] .hero .btn.light { background: #FFF4E8; color: #2A0F19; box-shadow: none; }
html[data-theme] .hero .btn.ghost { background: rgb(255 255 255 / .12) !important; box-shadow: none; }
html[data-theme] .hero .btn.ghost .ico { color: #fff; }
html[data-theme] .hero-facts { border-top-color: rgb(255 255 255 / .16); }

/* connector map: amber Soul-Stone light along crimson wires */
html[data-theme] .net .draw { stroke: rgb(224 56 43 / .45); }
html[data-theme] .node.src { background: var(--crimson-btn, var(--primary-bg)); color: #fff; }
html[data-theme="light"] .node.src { background: linear-gradient(135deg, #C8233A, #95163A); }

/* the floating «+» beside the tab bar: crimson glass */
@media (max-width: 900px) {
  html[data-theme] .tab-fab { background: rgb(200 36 58 / .86) !important; }
  html[data-theme] .tabbar a.on, html[data-theme] .tabbar a.on .ico { color: var(--tint); }
}
html[data-theme] .tag.crimson { background: var(--primary-bg); }

/* 2026-10-17 visual audit: amber (.btn.soul) buttons carried white text at ~2.1:1 — barely legible on
   #FF9F0A. Amber means money; keep the amber face but put the original dark ink back (8:1+), and make the
   loading ring visible on it too. */
html[data-theme] .btn.soul,
html[data-theme] .btn.soul:hover,
html[data-theme] .btn.soul:active { background: var(--orange); color: #2A1206; }
html[data-theme] .btn.soul .ico { color: currentColor; }
html[data-theme] .btn.soul.loading::before { border-color: rgb(42 18 6 / .3); border-top-color: #2A1206; }
@media (max-width: 900px) { html[data-theme] .tab-fab.on { background: rgb(200 36 58 / .96) !important; } }

/* ================================================================ v4 "refinement" (2026-10-17, owner: "enhance the panel — what it is
   right now is damn great; add great things to its looks, don't change the whole thing").
   ADDITIVE ONLY: no new layout, no new motion, no new colours. Same Vormir palette, same v2 shapes (16px cards, rounded-rect
   buttons, flat small tags), same v3 accents (crimson actions, amber money). This layer adds the things that were lost when
   fx.css/glass.css were deleted and the finishing touches a UI needs to feel expensive:
     - real elevation: hairline + top light + soft ambient shadow instead of a flat 0 0 0 .5px ring
     - iOS-style inset list separators (desktop) + a row hover accent
     - hover/press affordances on every interactive surface, and a visible focus ring with breathing room
     - tabular figures everywhere numbers matter (money columns stop jittering)
     - quiet thin scrollbars, a finished empty state, accented callouts
     - .topbar.scrolled — fx.js has toggled that class since the first build and nothing styled it
   Every rule has a light-theme counterpart. Nothing animates on its own, so calm mode stays calm. */

/* ---- depth: cards, stats and tiles read as raised objects ---- */
html[data-theme] .card,
html[data-theme] .stat,
html[data-theme] .tile,
html[data-theme] .login .login-card {
  box-shadow: 0 0 0 .5px var(--sep), inset 0 1px 0 rgb(255 255 255 / .045), 0 20px 40px -34px rgb(0 0 0 / .95);
}
html[data-theme="light"] .card,
html[data-theme="light"] .stat,
html[data-theme="light"] .tile,
html[data-theme="light"] .login .login-card {
  box-shadow: 0 0 0 .5px rgb(58 18 34 / .07), inset 0 1px 0 rgb(255 255 255 / .9), 0 18px 36px -32px rgb(58 18 34 / .45);
}
html[data-theme] .stat:hover, html[data-theme] a.stat:hover, html[data-theme] .tile:hover {
  box-shadow: 0 0 0 .5px var(--fill-2), inset 0 1px 0 rgb(255 255 255 / .06), 0 22px 44px -34px rgb(0 0 0 / 1);
}
html[data-theme] .card:last-child { margin-bottom: 0; }

/* ---- lists: iOS inset separators on desktop, and a hover accent on the leading cell ---- */
@media (min-width: 901px) {
  html[data-theme] table.rtable tbody td { border-bottom: 0; }
  html[data-theme] table.rtable tbody tr { position: relative; }
  html[data-theme] table.rtable tbody tr::after {
    content: ""; position: absolute; inset-inline: 18px; bottom: 0; height: .5px; background: var(--sep); pointer-events: none;
  }
  html[data-theme] table.rtable tbody tr:last-child::after { display: none; }
  html[data-theme] table.rtable tbody td:first-child { padding-inline-start: 18px; }
  html[data-theme] table.rtable tbody td:last-child { padding-inline-end: 18px; }
  /* the panel is RTL: the inline-start edge is the right one */
  html[data-theme] table.rtable tbody tr:hover td:first-child { box-shadow: inset -2px 0 0 var(--tint); }
}
html[data-theme] thead th, html[data-theme] tr.th th { letter-spacing: .02em; padding-block: 12px; }

/* ---- empty state: a quiet tinted medallion instead of a floating grey glyph ---- */
html[data-theme] .empty { color: var(--label-2); padding: 46px 18px !important; }
html[data-theme] .empty .ico {
  width: 22px; height: 22px; padding: 14px; box-sizing: content-box; border-radius: 50%; margin: 0 auto 14px;
  background: var(--fill-3); box-shadow: inset 0 0 0 .5px var(--sep); color: var(--label-3); stroke-width: 1.6;
}

/* ---- buttons: keep the v2/v3 faces, add depth, hover glow and a real focus ring ---- */
html[data-theme] .btn {
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), background .2s, opacity .2s, box-shadow .2s;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 10px 22px -16px rgb(216 40 62 / .9);
}
html[data-theme] .btn:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 14px 26px -16px rgb(224 56 43 / 1); }
html[data-theme] .btn:active { transform: scale(.97); }
html[data-theme] .btn.ghost { box-shadow: inset 0 0 0 .5px var(--sep); }
html[data-theme] .btn.ghost:hover { box-shadow: inset 0 0 0 .5px var(--fill-2); }
html[data-theme] .btn.light { box-shadow: none; }
html[data-theme] .btn.danger { box-shadow: inset 0 0 0 .5px rgb(255 69 58 / .4); }
html[data-theme] .btn.soul { box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 10px 22px -16px rgb(245 160 74 / .9); }
html[data-theme] :focus-visible { outline-offset: 2px; }
html[data-theme] .icon-btn { box-shadow: inset 0 0 0 .5px var(--sep); }
html[data-theme] .icon-btn:hover { box-shadow: inset 0 0 0 .5px var(--fill-2); }
html[data-theme="light"] .icon-btn { box-shadow: inset 0 0 0 .5px rgb(58 18 34 / .07); }

/* ---- fields: finished file pickers and calmer labels ---- */
/* No blanket input:hover / input:focus fill on purpose: the search pill, the range slider, the iOS switch and
   the checkboxes all paint their own background, and a broad rule repaints them. The focus ring below is untouched. */
html[data-theme] .field label, html[data-theme] label { letter-spacing: .01em; }
html[data-theme] input[type=file]::file-selector-button {
  border: 0; border-radius: 8px; padding: 7px 13px; background: var(--fill); color: var(--label); font: 600 13px var(--text);
}
html[data-theme] input[type=file]::file-selector-button:hover { background: var(--fill-2); }

/* ---- sidebar: the active pill gets a rim, section labels get room ---- */
html[data-theme] .side nav a { transition: background .18s, color .18s; }
html[data-theme] .side nav a.on { box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 8px 18px -12px rgb(216 40 62 / .9); }
html[data-theme] .nav-group { letter-spacing: .04em; }
html[data-theme] .me { box-shadow: inset 0 0 0 .5px var(--sep); }

/* ---- the missing scrolled edge: fx.js toggles .scrolled, nothing styled it ---- */
html[data-theme] .topbar { transition: box-shadow .25s ease; }
html[data-theme] .topbar.scrolled { box-shadow: 0 14px 30px -26px rgb(0 0 0 / .95); }
html[data-theme="light"] .topbar.scrolled { box-shadow: 0 14px 30px -26px rgb(58 18 34 / .5); }

/* ---- balance card: keep the Vormir dusk, add a rim and a top light ---- */
html[data-theme] .hero {
  box-shadow: 0 0 0 .5px rgb(255 255 255 / .09), inset 0 1px 0 rgb(255 255 255 / .14), 0 22px 44px -26px rgb(196 22 58 / .7);
}

/* ---- money and metrics: tabular figures so columns stop jittering ---- */
html[data-theme] .hero .amount,
html[data-theme] .stat .v,
html[data-theme] .summary .total,
html[data-theme] .vip-price,
html[data-theme] .cardno,
html[data-theme] .kv dd,
html[data-theme] .tag { font-variant-numeric: tabular-nums; }
html[data-theme] .stat .v, html[data-theme] .hero .amount { letter-spacing: -.01em; }
html[data-theme] .tag { letter-spacing: .01em; }
html[data-theme] .hint, html[data-theme] .note p, html[data-theme] .doc p { text-wrap: pretty; }

/* ---- callouts, banners and rows: an accent edge and a hover response ---- */
html[data-theme] .note { border-inline-start: 3px solid var(--orange); }
html[data-theme] .note.info { border-inline-start-color: var(--label-3); }
html[data-theme] .note.err { border-inline-start-color: var(--red); }
html[data-theme] .cashback-bar, html[data-theme] .trial-bar { box-shadow: inset 0 0 0 .5px var(--sep); }
html[data-theme] .feed li { transition: background .15s; }
html[data-theme] .feed li:hover { background: var(--fill-3); }
html[data-theme] .kv dt, html[data-theme] .kv dd { padding-block: 11px; }
html[data-theme] .cardno { background: var(--bg-2); box-shadow: inset 0 0 0 .5px var(--sep); }
html[data-theme] .steps-v li::before { background: var(--fill); color: var(--label-2); box-shadow: inset 0 0 0 .5px var(--sep); }
html[data-theme] .steps-v li.now::before { background: var(--primary-bg); color: #fff; box-shadow: none; }

/* ---- api docs page ---- */
html[data-theme] .doc pre { background: var(--bg-2); box-shadow: inset 0 0 0 .5px var(--sep); border: 0; }
html[data-theme] .doc code { background: var(--fill); color: var(--label); }
html[data-theme] .doc-table { border: 0; box-shadow: inset 0 0 0 .5px var(--sep); }

/* ---- login: the card floats on the dusk instead of sitting flat on it ---- */
html[data-theme] .login .login-card {
  background: color-mix(in srgb, var(--bg-2) 84%, transparent);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
}
html[data-theme] .login-brand img { box-shadow: 0 18px 40px -14px rgb(216 40 62 / .85); }
@media (prefers-reduced-transparency: reduce) {
  html[data-theme] .login .login-card { background: var(--bg-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---- phone: keep the tab bar and «+» exactly as they are, finish the section tabs ---- */
@media (max-width: 900px) {
  html[data-theme] .ptabs button { border-radius: 10px; }
  html[data-theme] .ptabs button.on { background: var(--primary-bg); color: #fff; }
}

/* ---- legibility: measured, not guessed. The 2026-10-17 headless-Chrome audit found the panel's secondary
   and dim text was the only text below WCAG (light theme worst at 1.87:1, dark at 2.63:1) because --label-2/--label-3
   were mixed at .62/.34 — and the light-theme status pills put bright iOS greens/ambers on pale tints (1.97:1).
   Same three-step hierarchy, just readable: dark 8.8:1 / 4.6:1, light 6.6:1 / 4.5:1. The amber money button keeps its
   amber face (only the pill text is darkened), so nothing that means money changes colour. */
html[data-theme] { --label-2: rgb(244 236 230 / .72); --label-3: rgb(244 236 230 / .48); }
html[data-theme="light"] { --label-2: rgb(42 15 25 / .78); --label-3: rgb(42 15 25 / .64); }
html[data-theme="light"] .tag.green { color: #0F7A3D; }
html[data-theme="light"] .tag.red { color: #B3261E; }
html[data-theme="light"] .tag.amber { color: #8A4A00; }
html[data-theme="light"] .tag.violet { color: #7A2E9E; }
html[data-theme="light"] .count { background: #E0241C; }

/* ---- scrollbars: thin and themed (both properties inherit, so html is enough) ---- */
html[data-theme] { scrollbar-width: thin; scrollbar-color: var(--fill-2) transparent; }
html[data-theme] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme] ::-webkit-scrollbar-track, html[data-theme] ::-webkit-scrollbar-corner { background: transparent; }
html[data-theme] ::-webkit-scrollbar-thumb {
  background: var(--fill-2); background-clip: content-box; border: 3px solid transparent; border-radius: 99px;
}

/* ================================================================ product surfaces (2026-10-19)
   The reseller product rail/tiles, the «آی‌پی ثابت» page and the customer shop were built with app.css
   cards; here they join the iOS 27 language: inset grouped cards, hairline separators, circular tint
   badges, capsule rail, and one money colour. Loaded last, so no !important is needed. */
html[data-theme] .pstrip, html[data-theme] .panchors {
  background: var(--fill-3); border: 0; border-radius: 999px; padding: 3px; gap: 2px;
}
html[data-theme] .panchors { background: transparent; padding: 0; gap: 8px; }
html[data-theme] .pstrip a, html[data-theme] .panchors a {
  border-radius: 999px; padding: 8px 14px; font: 600 13.5px var(--text); color: var(--label-2);
  gap: 6px; transition: background .18s, color .18s;
}
html[data-theme] .pstrip a .ico, html[data-theme] .panchors a .ico { color: currentColor; opacity: 1; width: 17px; height: 17px; }
html[data-theme] .pstrip a.on { background: var(--tint); color: #fff; box-shadow: 0 4px 14px rgb(255 55 95 / .38); }
html[data-theme] .pstrip a.on .ico { color: #fff; }
html[data-theme] .pstrip a:active, html[data-theme] .panchors a:active { transform: scale(.97); }
html[data-theme] .panchors a { background: var(--bg-2); color: var(--label-2); }
html[data-theme] .panchors a:hover, html[data-theme] .panchors a.on { background: var(--fill); color: var(--label); }

/* dashboard product tiles: one inset grouped card with hairline rows, like iOS Settings */
html[data-theme] .pmini { display: block; background: var(--bg-2); border-radius: 22px; overflow: hidden; gap: 0; }
html[data-theme] .pmini > a { position: relative; display: flex; align-items: center; gap: 13px; padding: 13px 16px;
  background: transparent; border: 0; border-radius: 0; color: var(--label); min-height: 62px; }
html[data-theme] .pmini > a + a::before { content: ""; position: absolute; inset-inline-start: 63px; top: 0; height: .5px;
  background: var(--sep); inset-inline-end: 16px; }
html[data-theme] .pmini > a:active { background: var(--fill-3); }
html[data-theme] .pmini .pi { width: 36px; height: 36px; border-radius: 11px; background: var(--fill); color: var(--label); }
html[data-theme] .pmini .pi .ico { width: 19px; height: 19px; }
html[data-theme] .pmini .pi:not(.ok):not(.vio) { background: var(--sky-soft); color: var(--tint); }
html[data-theme] .pmini .pi.ok { background: var(--ok-bg); color: var(--green); }
html[data-theme] .pmini .pi.vio { background: var(--vio-bg); color: var(--purple); }
html[data-theme] .pmini .pt b { font: 600 15.5px/1.35 var(--text); color: var(--label); }
html[data-theme] .pmini .pt small { font: 400 12.5px/1.35 var(--text); color: var(--label-2); }
html[data-theme] .pmini .chev { width: 13px; height: 13px; color: var(--label-3); }

/* fixed-IP facts: a grouped 3-up band with hairlines, not coloured paragraphs */
html[data-theme] .fx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 20px;
  background: var(--bg-2); border: 0; border-radius: 22px; overflow: hidden; }
html[data-theme] .fx-facts > div { background: transparent; padding: 13px 15px; }
html[data-theme] .fx-facts > div + div { border-inline-start: .5px solid var(--sep); }
html[data-theme] .fx-facts span { color: var(--label-2); font: 400 12px var(--text); }
html[data-theme] .fx-facts b { font: 700 clamp(15px, 4.2vw, 20px)/1.4 var(--text); color: var(--money); letter-spacing: -.2px; }
html[data-theme] .fx-facts > div:nth-child(2) b { color: var(--label); }
html[data-theme] .fx-facts > div:nth-child(3) b { color: var(--green); }
html[data-theme] .fx-facts b small { color: var(--label-3); font-weight: 500; }

/* product cards (customer shop + reseller fixed page) */
html[data-theme] .prod-card { background: var(--bg-2); border: 0; border-radius: 22px; }
html[data-theme] .prod-card-head { padding: 14px 16px; border-bottom: .5px solid var(--sep); }
html[data-theme] .prod-card-head h2 { font: 700 16.5px/1.35 var(--text); color: var(--label); }
html[data-theme] .prod-badge { width: 38px; height: 38px; border-radius: 50%; background: var(--sky-soft); color: var(--tint); }
html[data-theme] .prod-badge .ico { width: 19px; height: 19px; }
html[data-theme] .prod-badge.ok { background: var(--ok-bg); color: var(--green); }
html[data-theme] .prod-badge.vio { background: var(--vio-bg); color: var(--purple); }
html[data-theme] .prod-card-body { padding: 16px; }
html[data-theme] .prod-price b { font: 700 clamp(26px, 6.4vw, 32px)/1.2 var(--text); color: var(--money); letter-spacing: -.6px; }
html[data-theme] .prod-price span { color: var(--label-2); font-size: 12.5px; }
html[data-theme] .prod-desc { color: var(--label-2); font-size: 13.5px; }
html[data-theme] .prod-cost { background: var(--fill-3); border: 0; border-radius: 14px; color: var(--label-2); }
html[data-theme] .prod-cost b { color: var(--money); font-size: 16px; }
html[data-theme] .prod-note { color: var(--label-3); }
html[data-theme] .prod-note-box { border: 0; border-radius: 14px; background: var(--warn-bg); color: var(--label-2); }
html[data-theme] .prod-bar { border: 0; border-radius: 22px; background: var(--bg-2); padding: 14px 16px; }
html[data-theme] .prod-bar-ico { border-radius: 50%; background: var(--warn-bg); color: var(--money); }
html[data-theme] .prod-bar-txt span { color: var(--label-2); }
html[data-theme] .prod-bar-txt b { color: var(--money); font: 700 20px/1.4 var(--text); }
html[data-theme] .prod-dev { background: var(--bg-2); border: 0; border-radius: 22px; padding: 15px; }
html[data-theme] .prod-dev-name b { font: 600 15px var(--text); color: var(--label); }
html[data-theme] .prod-dev-facts b { font: 700 15px var(--text); color: var(--label); }
html[data-theme] .prod-devsec-head h2 { font: 700 16.5px var(--text); }
html[data-theme] .prod-devsec-head h2 .ico { color: var(--tint); }
html[data-theme] .prod-conf pre { background: var(--bg-3); border: 0; border-radius: 14px; }
html[data-theme] .prod-conf code { color: var(--label-2); }
html[data-theme] .copy input, html[data-theme] .copy input[readonly] { background: var(--fill-3); border: 0; }

/* wallet top-up: one big editable amount (any value ≥ 50,000) + the sum the gateway will charge */
html[data-theme] .tp-card #tpAmt { font: 700 21px/1.3 var(--text); letter-spacing: .3px; text-align: center;
  -moz-appearance: textfield; appearance: textfield; }
html[data-theme] .tp-card #tpAmt::-webkit-outer-spin-button,
html[data-theme] .tp-card #tpAmt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
html[data-theme] .tp-total { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 4px 0 12px; padding: 12px 14px; border-radius: 16px; background: var(--fill-3); }
html[data-theme] .tp-total span { color: var(--label-2); font-size: 13px; }
html[data-theme] .tp-total b { color: var(--money); font: 700 19px/1.3 var(--text); }
html[data-theme] .tp-card .chips { flex-wrap: wrap; justify-content: center; gap: 8px; }
html[data-theme] .tp-card .chip { flex: 0 0 auto; min-width: 84px; justify-content: center; }
html[data-theme] .tp-card .hint { color: var(--label-3); }
html[data-theme] .tp-card .chip.on { background: var(--tint); color: #fff; }