/* ==========================================================================
   theme.css — the single source of colour/shape tokens for every page.

   Two independent axes live on <html>:
     data-theme = light | dark                       (mode)
     data-skin  = nobat | glass | apple | oneui | hyperos | soft | hacker

   "nobat" is the house look (new-ui-ux). The other six are the skins of the
   mobile-shop-ui kit. Every skin defines a light and a dark palette.

   Pages use three historic token vocabularies; all of them are fed from the
   one set below so every panel follows the active skin:
     uiux.css      --bg --sf --s2 --ink --mu --ln --br --bs --ac --ok ...
     booknetic.css --bk-*   (public booking wizard)
     inline/legacy --mut --tx --soft --text --muted ...
   This file is linked AFTER the page stylesheets so equal-specificity rules
   here win; skin selectors carry extra attribute specificity.
   ========================================================================== */

/* --------------------------------------------------------------- nobat */
:root {
  --bg: #F3F6FB; --sf: #fff; --s2: #EBF0F8; --ink: #0F1F3A; --mu: #5B6B85;
  --ln: #DCE4EF; --br: #1F5FBF; --bs: #DDE8FA; --ac: #F2A93B;
  --ok: #12844B; --okb: #DDF3E7; --wn: #9A6408; --wnb: #FCEFD3; --bd: #C8323A; --bdb: #FBE3E4;
  --ob: #fff; --hl: rgba(255,255,255,.8); --sh: 0 12px 32px rgba(15,31,58,.09);
  --sh-sm: 0 1px 2px rgba(15,31,58,.06), 0 2px 8px rgba(15,31,58,.05);
  --r-sm: 10px; --r: 14px; --r-lg: 20px;
  --font: Vazirmatn, Tahoma, "Segoe UI", sans-serif;
  --blob1: var(--br); --blob2: var(--ac); --blob3: var(--br);
  --glass-blur: 0px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0A1220; --sf: #101A2C; --s2: #16233A; --ink: #E8EEF9; --mu: #93A5C0;
  --ln: #22314A; --br: #6CA2FF; --bs: #14294D; --ac: #F2A93B;
  --ok: #4CC88A; --okb: #0F2F22; --wn: #EDB955; --wnb: #33280F; --bd: #F27C82; --bdb: #3A1719;
  --ob: #06152E; --hl: rgba(255,255,255,.08); --sh: 0 12px 32px rgba(0,0,0,.45);
  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  color-scheme: dark;
}

/* --------------------------------------------------------------- glass */
:root[data-skin="glass"]:not([data-theme="dark"]) {
  --bg: #EDEFFB; --sf: rgba(255,255,255,.62); --s2: rgba(255,255,255,.42); --ink: #201F3A; --mu: #66638C;
  --ln: rgba(255,255,255,.65); --br: #6D5BFF; --bs: rgba(109,91,255,.14); --ac: #FF7AC6;
  --ok: #0E9A64; --okb: rgba(20,184,121,.16); --wn: #B47400; --wnb: rgba(245,165,36,.18); --bd: #E0315A; --bdb: rgba(244,67,108,.14);
  --ob: #fff; --hl: rgba(255,255,255,.9); --sh: 0 12px 34px rgba(76,64,170,.16);
  --r-sm: 12px; --r: 18px; --r-lg: 24px;
  --blob1: #A5B4FC; --blob2: #FBCFE8; --blob3: #99F6E4; --glass-blur: 18px;
}
:root[data-skin="glass"][data-theme="dark"] {
  --bg: #14121F; --sf: rgba(38,34,64,.58); --s2: rgba(50,45,82,.7); --ink: #F1EEFF; --mu: #A9A3D4;
  --ln: rgba(255,255,255,.1); --br: #8E7CFF; --bs: rgba(142,124,255,.18); --ac: #5EEAD4;
  --ok: #34D399; --okb: rgba(52,211,153,.14); --wn: #FBBF24; --wnb: rgba(251,191,36,.14); --bd: #FB7185; --bdb: rgba(251,113,133,.14);
  --ob: #fff; --hl: rgba(255,255,255,.1); --sh: 0 14px 36px rgba(0,0,0,.45);
  --r-sm: 12px; --r: 18px; --r-lg: 24px;
  --blob1: #4C1D95; --blob2: #155E75; --blob3: #831843; --glass-blur: 18px;
}

/* --------------------------------------------------------------- apple */
:root[data-skin="apple"]:not([data-theme="dark"]) {
  --bg: #F5F5F7; --sf: #fff; --s2: #FBFBFD; --ink: #1D1D1F; --mu: #6E6E73;
  --ln: #E5E5EA; --br: #0A84FF; --bs: #E3F0FF; --ac: #FF9F0A;
  --ok: #248A3D; --okb: #E3F7E8; --wn: #A05A00; --wnb: #FFF1DC; --bd: #D70015; --bdb: #FFE5E7;
  --ob: #fff; --hl: rgba(255,255,255,.9); --sh: 0 8px 28px rgba(0,0,0,.07);
  --r-sm: 10px; --r: 16px; --r-lg: 22px;
  --font: -apple-system, "SF Pro Text", Vazirmatn, Tahoma, sans-serif;
}
:root[data-skin="apple"][data-theme="dark"] {
  --bg: #000; --sf: #1C1C1E; --s2: #242426; --ink: #F5F5F7; --mu: #98989D;
  --ln: #38383A; --br: #0A84FF; --bs: #0A2A4D; --ac: #FF9F0A;
  --ok: #30D158; --okb: #0E2E17; --wn: #FFD60A; --wnb: #332B05; --bd: #FF453A; --bdb: #3A1412;
  --ob: #fff; --hl: rgba(255,255,255,.06); --sh: 0 8px 28px rgba(0,0,0,.6);
  --r-sm: 10px; --r: 16px; --r-lg: 22px;
  --font: -apple-system, "SF Pro Text", Vazirmatn, Tahoma, sans-serif;
}

/* --------------------------------------------------------------- oneui */
:root[data-skin="oneui"]:not([data-theme="dark"]) {
  --bg: #F2F3F7; --sf: #fff; --s2: #F7F8FB; --ink: #17181C; --mu: #6B6E76;
  --ln: #E7E8ED; --br: #1259C3; --bs: #E1ECFB; --ac: #6E42E5;
  --ok: #138A5F; --okb: #DDF6EC; --wn: #A86A00; --wnb: #FEF0D6; --bd: #D92F3E; --bdb: #FDE4E6;
  --ob: #fff; --hl: rgba(255,255,255,.9); --sh: 0 6px 22px rgba(23,24,28,.06);
  --r-sm: 16px; --r: 24px; --r-lg: 30px;
}
:root[data-skin="oneui"][data-theme="dark"] {
  --bg: #0B0B0C; --sf: #1D1E20; --s2: #242527; --ink: #F1F1F3; --mu: #9B9CA3;
  --ln: #2C2D30; --br: #6FA8FF; --bs: #13284A; --ac: #B49CFF;
  --ok: #4AD8A2; --okb: #0F2E22; --wn: #F7C15C; --wnb: #33280F; --bd: #FF6B78; --bdb: #3A1519;
  --ob: #05142B; --hl: rgba(255,255,255,.05); --sh: 0 6px 22px rgba(0,0,0,.6);
  --r-sm: 16px; --r: 24px; --r-lg: 30px;
}

/* ------------------------------------------------------------- hyperos */
:root[data-skin="hyperos"]:not([data-theme="dark"]) {
  --bg: #F4F4F2; --sf: #fff; --s2: #FAFAF8; --ink: #1B1B1A; --mu: #7A7873;
  --ln: #EBEAE6; --br: #FF6A00; --bs: #FFEBDC; --ac: #2E7DFF;
  --ok: #1B8A59; --okb: #DFF4EA; --wn: #9A6D00; --wnb: #FFF2CF; --bd: #D23232; --bdb: #FCE3E3;
  --ob: #fff; --hl: rgba(255,255,255,.9); --sh: 0 6px 20px rgba(27,27,26,.06);
  --r-sm: 10px; --r: 16px; --r-lg: 20px;
}
:root[data-skin="hyperos"][data-theme="dark"] {
  --bg: #121210; --sf: #1E1E1B; --s2: #26251F; --ink: #F2F1ED; --mu: #A2A099;
  --ln: #2C2B26; --br: #FF8A3D; --bs: #3A2310; --ac: #5B9BFF;
  --ok: #3FC088; --okb: #10291D; --wn: #F0B429; --wnb: #33280F; --bd: #F1614E; --bdb: #3A1915;
  --ob: #201400; --hl: rgba(255,255,255,.05); --sh: 0 6px 20px rgba(0,0,0,.55);
  --r-sm: 10px; --r: 16px; --r-lg: 20px;
}

/* ---------------------------------------------------------------- soft */
:root[data-skin="soft"]:not([data-theme="dark"]) {
  --bg: #E7E8EF; --sf: #E7E8EF; --s2: #E0E1EA; --ink: #3C3E58; --mu: #83869E;
  --ln: rgba(60,62,88,.09); --br: #6C7BFF; --bs: #DCDFFB; --ac: #FF9BD2;
  --ok: #2E9E6E; --okb: #D7EFE4; --wn: #A8701A; --wnb: #F2E5CF; --bd: #D2506A; --bdb: #F1DADF;
  --ob: #fff; --hl: rgba(255,255,255,.9);
  --neu-out: 8px 8px 18px rgba(163,173,206,.55), -8px -8px 18px rgba(255,255,255,.9);
  --neu-sm: 4px 4px 9px rgba(163,173,206,.5), -4px -4px 9px rgba(255,255,255,.85);
  --neu-in: inset 4px 4px 9px rgba(163,173,206,.5), inset -4px -4px 9px rgba(255,255,255,.85);
  --sh: var(--neu-out);
  --r-sm: 14px; --r: 20px; --r-lg: 26px;
}
:root[data-skin="soft"][data-theme="dark"] {
  --bg: #292B38; --sf: #292B38; --s2: #2F3140; --ink: #E9E9F2; --mu: #9698B0;
  --ln: rgba(255,255,255,.05); --br: #8B95FF; --bs: #333764; --ac: #FFA8DB;
  --ok: #57D3A0; --okb: #213A33; --wn: #EDB75F; --wnb: #3A3324; --bd: #F08197; --bdb: #3E2A33;
  --ob: #12132A; --hl: rgba(255,255,255,.05);
  --neu-out: 8px 8px 18px rgba(15,16,22,.65), -8px -8px 18px rgba(58,61,80,.55);
  --neu-sm: 4px 4px 9px rgba(15,16,22,.6), -4px -4px 9px rgba(58,61,80,.5);
  --neu-in: inset 4px 4px 9px rgba(15,16,22,.6), inset -4px -4px 9px rgba(58,61,80,.5);
  --sh: var(--neu-out);
  --r-sm: 14px; --r: 20px; --r-lg: 26px;
}

/* -------------------------------------------------------------- hacker */
:root[data-skin="hacker"][data-theme="dark"] {
  --bg: #060907; --sf: #0B120C; --s2: #0F1A10; --ink: #4CFF7A; --mu: #2E8C4A;
  --ln: #163420; --br: #39FF6A; --bs: #0E2A15; --ac: #21E6D6;
  --ok: #39FF6A; --okb: #0E2A15; --wn: #F4E04D; --wnb: #2A2709; --bd: #FF4D5E; --bdb: #2E0C10;
  --ob: #04170A; --hl: rgba(57,255,106,.06); --sh: 0 0 0 1px #163420, 0 0 22px rgba(57,255,106,.08);
  --r-sm: 3px; --r: 5px; --r-lg: 7px;
  --font: "JetBrains Mono", "Fira Code", Consolas, Vazirmatn, monospace;
}
:root[data-skin="hacker"]:not([data-theme="dark"]) {
  --bg: #EEF3EC; --sf: #fff; --s2: #E5EFE3; --ink: #0C5A22; --mu: #4B7A57;
  --ln: #C8DBC6; --br: #0C8A32; --bs: #D9EDDC; --ac: #0E8E86;
  --ok: #0C8A32; --okb: #D9EDDC; --wn: #A67A00; --wnb: #F5ECCB; --bd: #C23B3B; --bdb: #F7DEDE;
  --ob: #fff; --hl: rgba(255,255,255,.8); --sh: 0 0 0 1px #C8DBC6;
  --r-sm: 3px; --r: 5px; --r-lg: 7px;
  --font: "JetBrains Mono", "Fira Code", Consolas, Vazirmatn, monospace;
}

/* -------------------------------------- vocabulary bridges (one source) */
:root, :root[data-theme], :root[data-skin] {
  /* booknetic wizard */
  --bk-bg: var(--bg); --bk-card: var(--sf); --bk-soft: var(--s2);
  --bk-line: var(--ln); --bk-border: var(--ln); --bk-text: var(--ink); --bk-muted: var(--mu);
  --bk-primary: var(--br);
  --bk-primary-strong: var(--br);
  --bk-primary-600: color-mix(in srgb, var(--br) 84%, #000);
  --bk-primary-700: color-mix(in srgb, var(--br) 70%, #000);
  --bk-primary-tint: var(--bs);
  --bk-primary-glass: color-mix(in srgb, var(--br) 9%, transparent);
  --bk-success: var(--ok); --bk-success-tint: var(--okb);
  --bk-warn: var(--wn); --bk-warn-tint: var(--wnb);
  --bk-danger: var(--bd); --bk-danger-tint: var(--bdb);
  --bk-info: var(--br); --bk-info-tint: var(--bs);
  --bk-radius: var(--r-sm); --bk-radius-lg: var(--r); --bk-radius-xl: var(--r-lg);
  --bk-shadow-sm: var(--sh-sm); --bk-shadow: var(--sh); --bk-shadow-lg: var(--sh);
  /* legacy aliases seen in inline page CSS */
  --mut: var(--mu); --tx: var(--ink); --soft: var(--s2); --text: var(--ink); --muted: var(--mu);
  --primary: var(--br); --surface: var(--sf); --border: var(--ln);
}

/* ------------------------------------------------------- base & shapes */
html[data-skin] body { font-family: var(--font); background: var(--bg); color: var(--ink); }
html[data-skin] body.bk-page { font-family: var(--font); }
.card, .cal, .gbox, .empty, .chk .row, .fs { border-radius: var(--r); }
.fr, .hero, .mkt-hero { border-radius: var(--r-lg); }
.btn, .fi, .fbtn, .ic, .tab, .seg, .slot, .day, textarea, .side a, .dnav a { border-radius: var(--r-sm); }
.seg button { border-radius: calc(var(--r-sm) - 3px); }
.btn.p, .fbtn.p { color: var(--ob); }
.fbtn.p, .fab { background: var(--br); border-color: var(--br); }
.hero { background: linear-gradient(135deg, var(--br), color-mix(in srgb, var(--br) 62%, #000)); }
.hero .btn.w, .btn.w { color: color-mix(in srgb, var(--br) 70%, #000); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--br); }
::selection { background: color-mix(in srgb, var(--br) 30%, transparent); }
.ux-modal { background: color-mix(in srgb, #000 55%, transparent); }
select.fi, input.fi, textarea.fi { min-height: 40px; }

/* Solid-surface skins: switch off the frosted gradient backdrop of nobat. */
html[data-skin="apple"] body:before, html[data-skin="oneui"] body:before,
html[data-skin="hyperos"] body:before, html[data-skin="soft"] body:before,
html[data-skin="hacker"] body:before { display: none; }
html[data-skin="apple"] :is(.fr, .card, .cal, .gbox, .tkt, .fs, .slot, header),
html[data-skin="oneui"] :is(.fr, .card, .cal, .gbox, .tkt, .fs, .slot, header),
html[data-skin="hyperos"] :is(.fr, .card, .cal, .gbox, .tkt, .fs, .slot, header),
html[data-skin="soft"] :is(.fr, .card, .cal, .gbox, .tkt, .fs, .slot, header),
html[data-skin="hacker"] :is(.fr, .card, .cal, .gbox, .tkt, .fs, .slot, header) {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-skin="apple"] :is(.fr, .card, .cal, .gbox, .tkt, .fs, .slot),
html[data-skin="oneui"] :is(.fr, .card, .cal, .gbox, .tkt, .fs, .slot),
html[data-skin="hyperos"] :is(.fr, .card, .cal, .gbox, .tkt, .fs, .slot),
html[data-skin="hacker"] :is(.fr, .card, .cal, .gbox, .tkt, .fs, .slot) {
  background: var(--sf); border-color: var(--ln);
}
html[data-skin="apple"] header, html[data-skin="oneui"] header, html[data-skin="hyperos"] header,
html[data-skin="hacker"] header { background: var(--bg); }
html[data-skin] :is(.fs, .slot)[aria-pressed="true"] { background: var(--bs); border-color: var(--br); }

/* glass — frosted panes over coloured blobs */
html[data-skin="glass"] body:before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(560px 420px at 88% 8%, var(--blob1), transparent 70%),
    radial-gradient(520px 400px at 6% 46%, var(--blob2), transparent 70%),
    radial-gradient(640px 480px at 60% 100%, var(--blob3), transparent 70%);
  opacity: .75;
}
html[data-skin="glass"] :is(.fr, .card, .cal, .gbox, .tkt, .fs, .slot, .mkt-card, .mkt-sec, .mkt-hero, .s-card, .bk-panel, .bk-card, .bk-modal, .drawer, .ux-modal .card) {
  background: var(--sf); border-color: var(--ln);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  box-shadow: var(--sh), inset 0 1px 0 var(--hl);
}
html[data-skin="glass"] header { background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
html[data-skin="glass"] .btn.p, html[data-skin="glass"] .fbtn.p, html[data-skin="glass"] .btn-primary {
  background: linear-gradient(135deg, var(--br), var(--ac)); border-color: transparent;
}

/* apple — crisp hairlines, pill buttons */
html[data-skin="apple"] .btn, html[data-skin="apple"] .fbtn, html[data-skin="apple"] .btn-primary { border-radius: 999px; }
html[data-skin="apple"] .card, html[data-skin="apple"] .fr { box-shadow: var(--sh); }

/* oneui — big rounded tiles, no borders on cards */
html[data-skin="oneui"] :is(.card, .cal, .gbox, .mkt-card, .mkt-sec) { border-color: transparent; box-shadow: var(--sh); }
html[data-skin="oneui"] .btn, html[data-skin="oneui"] .fbtn { border-radius: 999px; padding-inline: 18px; }
html[data-skin="oneui"] .main h2 { font-size: 22px; }

/* hyperos — flat, warm, orange accents */
html[data-skin="hyperos"] .card, html[data-skin="hyperos"] .fr { box-shadow: none; }
html[data-skin="hyperos"] .side a.on, html[data-skin="hyperos"] .dnav a.on { box-shadow: none; background: var(--bs); }

/* soft — neumorphism */
html[data-skin="soft"] :is(.fr, .card, .cal, .gbox, .tkt, .fs, .mkt-card, .mkt-sec, .mkt-hero, .s-card, .bk-card, .bk-panel) {
  background: var(--sf); border-color: transparent; box-shadow: var(--neu-out);
}
html[data-skin="soft"] :is(.btn, .fbtn, .chip, .slot, .day, .ic, .theme-toggle, .bk-btn) { border-color: transparent; box-shadow: var(--neu-sm); }
html[data-skin="soft"] :is(.btn, .fbtn, .slot, .day):active,
html[data-skin="soft"] :is(.slot, .day, .chip)[aria-pressed="true"], html[data-skin="soft"] .chip.on { box-shadow: var(--neu-in); }
html[data-skin="soft"] :is(.fi, textarea, input:not([type]), input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"], select, .bk-input, .bk-select) {
  background: var(--sf); border-color: transparent; box-shadow: var(--neu-in);
}
html[data-skin="soft"] .side, html[data-skin="soft"] .drawer { background: var(--sf); }
html[data-skin="soft"] .side a.on, html[data-skin="soft"] .dnav a.on { box-shadow: var(--neu-in); background: var(--sf); }

/* hacker — terminal */
html[data-skin="hacker"] body:after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2147483000;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.08) 3px);
  mix-blend-mode: multiply;
}
html[data-skin="hacker"]:not([data-theme="dark"]) body:after { opacity: .35; }
html[data-skin="hacker"][data-theme="dark"] :is(.btn.p, .fbtn.p, .btn-primary, .bk-btn-primary) {
  box-shadow: 0 0 14px color-mix(in srgb, var(--br) 45%, transparent);
}
html[data-skin="hacker"][data-theme="dark"] :is(h1, h2, h3, .logo) { text-shadow: 0 0 8px color-mix(in srgb, var(--br) 45%, transparent); }
html[data-skin="hacker"] .logo b { border-radius: 2px; }

/* --------------------------------------------- booknetic wizard surfaces */
html[data-theme="dark"] .bk-mobile-nav, html[data-skin] .bk-mobile-nav { background: color-mix(in srgb, var(--sf) 92%, transparent); }
.bk-btn-primary, .bk-step.bk-current .bk-step-num, .bk-cal-day.selected, .bk-time-btn.selected, .cp-slot.on, .bk-msg.me, .cp-bubble.me {
  background: linear-gradient(135deg, var(--br), color-mix(in srgb, var(--br) 80%, #000)); color: var(--ob);
}
.bk-input, .bk-select, .bk-textarea { background: var(--sf); color: var(--ink); border-color: var(--ln); }

/* ------------------------------------------- generic form controls dark */
:root[data-theme="dark"] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  color: var(--ink); border-color: var(--ln);
}
:root[data-theme="dark"] select option { background: var(--sf); color: var(--ink); }

/* ------------------------------------------------------- OnTime logo */
/* Pin + clock + check (web/_logo.html). Colours are skin tokens only. */
.ot-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); direction: ltr; flex: none; }
.ot-mark { width: 34px; height: 34px; flex: none; overflow: visible; filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--br) 32%, transparent)); transition: transform .25s cubic-bezier(.2,.8,.25,1); }
.ot-face { fill: var(--ob, #fff); }
.ot-check { fill: none; stroke: var(--br); stroke-width: 2.9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 0; }
.ot-dot { fill: var(--ac); }
.ot-word { font-family: Vazirmatn, var(--font); font-size: 20px; font-weight: 800; letter-spacing: -.4px; line-height: 1; color: var(--ink); }
.ot-on { color: var(--br); font-weight: 900; }
.ot-logo:hover .ot-mark { transform: translateY(-2px) rotate(-4deg); }
.ot-logo:hover .ot-check { animation: ot-draw .7s ease; }
@keyframes ot-draw { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
html[data-skin="glass"] .ot-on { background: linear-gradient(135deg, var(--br), var(--ac)); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-skin="hacker"] .ot-word { font-family: var(--font); letter-spacing: 0; }
html[data-skin="hacker"][data-theme="dark"] .ot-mark { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--br) 55%, transparent)); }
.ot-powered { display: inline-flex; align-items: center; gap: 6px; }
.ot-powered .ot-mark { width: 22px; height: 22px; }
.ot-powered .ot-word { font-size: 14px; }
.ux-login-card .ot-logo { margin-bottom: 6px; }
html[data-skin="soft"] .ot-mark { filter: drop-shadow(3px 3px 5px rgba(0,0,0,.18)) drop-shadow(-2px -2px 4px color-mix(in srgb, var(--hl) 80%, transparent)); }

/* ------------------------------------- passkeys (fingerprint / face sign-in) */
.ux-pk-login { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 48px;
  border: 1.5px solid color-mix(in srgb, var(--br) 45%, var(--ln)); background: color-mix(in srgb, var(--br) 9%, var(--sf));
  color: var(--br); border-radius: var(--r, 14px); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; transition: background .15s, transform .15s; }
.ux-pk-login:hover { background: color-mix(in srgb, var(--br) 15%, var(--sf)); }
.ux-pk-login:active { transform: scale(.98); }
.ux-pk-login .ic-svg { width: 24px; height: 24px; }
.ux-or { display: flex; align-items: center; gap: 10px; color: var(--mu); font-size: 12px; }
.ux-or:before, .ux-or:after { content: ""; flex: 1; height: 1px; background: var(--ln); }
.ux-pk { display: grid; gap: 12px; }
.ux-pk-hd { display: flex; gap: 14px; align-items: flex-start; }
.ux-pk-hd h3 { margin: 0 0 4px; font-size: 16px; }
.ux-pk-hd p { margin: 0; line-height: 1.9; }
.ux-pk-ic { flex: none; display: grid; grid-auto-flow: column; gap: 2px; padding: 10px; border-radius: 16px; color: var(--br);
  background: color-mix(in srgb, var(--br) 12%, var(--sf)); }
.ux-pk-ic .ic-svg { width: 24px; height: 24px; }
.ux-pk-list { display: grid; gap: 8px; }
.ux-pk-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ln); border-radius: var(--r-sm, 12px); background: var(--bg); }
.ux-pk-row > div:not(.ux-pk-acts) { flex: 1; min-width: 0; }
.ux-pk-dev { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--okb); color: var(--ok); }
.ux-pk-acts { display: flex; gap: 4px; }
.ux-pk-acts .btn { padding: 7px; }
.ux-pk-ft { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ux-pk-ft .btn { display: inline-flex; align-items: center; gap: 6px; }
.ux-pk-note:empty { display: none; }
.ux-pk-note { color: var(--wn); }

/* ------------------------------------- sign in with Bale / Telegram */
.ux-login-card [hidden] { display: none !important; }
.ux-quick { display: grid; gap: 10px; }
.ux-quick:empty { display: none; }
.ux-bot-logins { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.ux-bot-login { --bc: #2aabee; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
  border: 1.5px solid color-mix(in srgb, var(--bc) 45%, var(--ln)); background: color-mix(in srgb, var(--bc) 9%, var(--sf));
  color: color-mix(in srgb, var(--bc) 78%, var(--ink)); border-radius: var(--r, 14px); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  transition: background .15s, transform .15s; }
.ux-bot-login.bale { --bc: #20a77b; }
.ux-bot-login:hover { background: color-mix(in srgb, var(--bc) 16%, var(--sf)); }
.ux-bot-login:active { transform: scale(.98); }
.ux-bot-login .ic-svg { width: 22px; height: 22px; }
.ux-botwait { display: grid; gap: 12px; justify-items: center; text-align: center; }
.ux-botwait > b { font-size: 16px; }
.ux-botwait p { margin: 0; line-height: 1.9; }
.ux-botwait-ic { width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; color: var(--br); background: color-mix(in srgb, var(--br) 12%, var(--sf)); }
.ux-botwait-ic .ic-svg { width: 32px; height: 32px; }
.ux-botwait > .btn { display: inline-flex; align-items: center; gap: 7px; }
.ux-botwait .st-link { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--ln); border-radius: var(--r-sm, 12px); background: var(--bg); }
.ux-botwait .st-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-size: 13px; background: none; }
.ux-botwait .st-link .btn { display: inline-flex; align-items: center; gap: 5px; }
.ux-botwait-alt { text-align: center; }
.ux-botwait-st { display: flex; align-items: center; gap: 8px; color: var(--mu); font-size: 13px; }
.ux-botwait-st.end { color: var(--wn); font-weight: 700; }

/* -------------------------------------------------- sprite line icons */
.ic-svg { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.2em;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-svg.fill { fill: currentColor; }
.uxmap-mk .pin .ic-svg { color: #fff; width: 17px; height: 17px; stroke-width: 2; }

/* -------------------------------------------- theme toggle + skin picker */
.theme-toggle, .skin-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--ln); background: var(--sf); color: var(--ink);
  border-radius: var(--r-sm); padding: 6px 12px; min-height: 36px;
  font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; flex: none;
  transition: background .15s, border-color .15s, color .15s;
}
.theme-toggle:hover, .skin-btn:hover { background: var(--s2); }
.theme-toggle__icon { font-size: 15px; line-height: 1; }
.skin-btn { padding: 6px 9px; }
.skin-btn i { width: 16px; height: 16px; border-radius: 50%; display: block; background: var(--skin-sw, linear-gradient(135deg, var(--br), var(--ac))); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.skin-pop {
  position: fixed; z-index: 2147483100; width: min(330px, calc(100vw - 24px));
  background: var(--sf); color: var(--ink); border: 1px solid var(--ln);
  border-radius: var(--r); box-shadow: 0 18px 48px rgba(0,0,0,.25); padding: 14px;
  font-family: var(--font); font-size: 13px; direction: rtl;
}
html[data-skin="glass"] .skin-pop { background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.skin-pop h4 { margin: 0 0 10px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.skin-pop h4 button { border: 0; background: none; color: var(--mu); font-size: 18px; cursor: pointer; padding: 0 4px; }
.skin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.skin-opt {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; text-align: start;
  border: 1.5px solid var(--ln); background: var(--bg); color: var(--ink);
  border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
}
.skin-opt i { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.skin-opt[aria-checked="true"] { border-color: var(--br); background: var(--bs); color: var(--ink); }
.skin-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ln); }
.skin-modes button { border: 1px solid var(--ln); background: var(--bg); color: var(--ink); border-radius: var(--r-sm); padding: 7px 4px; font: inherit; font-size: 12.5px; cursor: pointer; }
.skin-modes button[aria-checked="true"] { background: var(--br); border-color: var(--br); color: var(--ob); font-weight: 700; }
.skin-pop__t, .skin-modes button, .skin-pop h4 button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.theme-toggle__icon { display: inline-flex; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 640px) {
  .theme-toggle__label { display: none; }
  .theme-toggle { padding: 6px 10px; }
  header .bar { gap: 8px; flex-wrap: wrap; }
  header .bar .tabs { order: 9; flex-basis: 100%; }
  .fr { margin: 12px 0 22px; border-radius: var(--r); }
  .kp b { font-size: 24px; }
  .ux-modal .card { width: 100% !important; max-width: 100% !important; max-height: 88vh; overflow-y: auto; }
  .rw { font-size: 13px; }
  table { display: block; overflow-x: auto; max-width: 100%; }
  .g4 { grid-template-columns: 1fr 1fr; }
  .s-nav .s-auth .btn-primary { padding: 9px 12px; font-size: 13px; }
}
@media (max-width: 380px) {
  .g4, .kp { grid-template-columns: 1fr; }
  .kp > div { border-inline-start: 0 !important; padding-inline-start: 0 !important; }
}
img, svg, video { max-width: 100%; }
.main, .card, .pg { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { transition: none !important; animation: none !important; }
}

.ux-botwait [dir="ltr"], .ux-login-card [dir="ltr"] { unicode-bidi: isolate; }
.ux-botwait-st .spin { width: 16px; height: 16px; border: 2px solid var(--ln); border-top-color: var(--br); border-radius: 50%; display: inline-block; animation: uxspin .7s linear infinite; }

/* ------------------------------------- header account: bell + avatar menu (UX.account) */
.ux-acc { display: flex; align-items: center; gap: 6px; flex: none; }
.ux-acc-w { position: relative; }
.ux-acc-bell, .ux-acc-me { position: relative; width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--ln); background: var(--sf); color: var(--ink); cursor: pointer; transition: border-color .15s, transform .15s; }
.ux-acc-me { border-radius: 50%; padding: 2px; }
.ux-acc-bell:hover, .ux-acc-me:hover, .ux-acc-bell[aria-expanded="true"], .ux-acc-me[aria-expanded="true"] { border-color: var(--br); }
.ux-acc-bell .ic-svg { width: 21px; height: 21px; }
.ux-acc-n { position: absolute; top: -5px; inset-inline-end: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--bd); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }
.ux-acc-n[hidden] { display: none; }
.ux-acc-av { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 900; font-size: 15px;
  color: var(--ob, #fff); background: linear-gradient(135deg, var(--br), color-mix(in srgb, var(--br) 55%, var(--ac))); }
.ux-acc-av img { width: 100%; height: 100%; object-fit: cover; }
.ux-acc-av.lg { width: 46px; height: 46px; flex: none; font-size: 18px; }
.ux-acc-pop { position: absolute; top: calc(100% + 10px); inset-inline-start: 0; z-index: 60; width: min(360px, calc(100vw - 24px));
  background: var(--sf); border: 1px solid var(--ln); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.22); overflow: hidden;
  animation: uxAccIn .16s ease-out; }
.ux-acc-pop[hidden] { display: none; }
@keyframes uxAccIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ux-acc-menu { width: min(280px, calc(100vw - 24px)); padding: 6px; }
.ux-acc-head { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; color: var(--ink); text-decoration: none; margin-bottom: 4px;
  background: color-mix(in srgb, var(--br) 8%, var(--sf)); }
.ux-acc-head span:last-child { display: grid; gap: 2px; min-width: 0; }
.ux-acc-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-acc-head small { color: var(--mu); text-align: right; }
.ux-acc-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none;
  color: var(--ink); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; text-align: start; }
.ux-acc-item:hover { background: var(--s2); }
.ux-acc-item .ic-svg { width: 18px; height: 18px; color: var(--mu); }
.ux-acc-item.out { color: var(--bd); border-top: 1px solid var(--ln); border-radius: 0 0 10px 10px; margin-top: 4px; }
.ux-acc-item.out .ic-svg { color: var(--bd); transform: scaleX(-1); }
.ux-acc-ph { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--ln); }
.ux-acc-list { max-height: min(420px, 60vh); overflow: auto; }
.ux-acc-n-item { display: flex; gap: 10px; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--ln); background: none;
  color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.ux-acc-n-item:hover { background: var(--s2); }
.ux-acc-n-item .dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; flex: none; background: transparent; }
.ux-acc-n-item.new .dot { background: var(--br); }
.ux-acc-n-item.new { background: color-mix(in srgb, var(--br) 5%, var(--sf)); }
.ux-acc-n-item .tx { display: grid; gap: 2px; min-width: 0; }
.ux-acc-n-item .tx b { font-size: 13.5px; }
.ux-acc-n-item .tx span { color: var(--mu); font-size: 12.5px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ux-acc-n-item .tx small { color: var(--mu); font-size: 11px; }
.ux-acc-none { display: grid; justify-items: center; gap: 8px; padding: 28px 14px; color: var(--mu); }
.ux-acc-none .ic-svg { width: 30px; height: 30px; }
.ux-acc-all { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px; color: var(--br); font-weight: 700; text-decoration: none; }
.ux-acc-all .ic-svg { transform: scaleX(-1); }
@media (max-width: 560px) {
  .ux-acc-w { position: static; }
  .ux-acc-pop { position: fixed; top: 64px; inset-inline: 12px; width: auto; }
  .ux-acc-bell, .ux-acc-me { width: 36px; height: 36px; }
}
/* map markers scale with zoom around their point (UX.map sets --mk-s) */
.uxmap-mk .mk-in { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: scale(var(--mk-s, 1)); transform-origin: 0 0; transition: transform .22s ease; }