/* Themes: Bank, Graphite, Sand (on top of the default "Night terminal"), density, and micro-details. */
@font-face{font-family:Manrope;src:url(/fonts/manrope-cyrillic-wght-normal.woff2) format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url(/fonts/manrope-latin-wght-normal.woff2) format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+20B4,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url(/fonts/inter-cyrillic-wght-normal.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;src:url(/fonts/inter-latin-wght-normal.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+20B4,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';src:url(/fonts/source-sans-3-cyrillic-wght-normal.woff2) format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Source Sans 3';src:url(/fonts/source-sans-3-latin-wght-normal.woff2) format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+20B4,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lora;src:url(/fonts/lora-cyrillic-wght-normal.woff2) format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Lora;src:url(/fonts/lora-latin-wght-normal.woff2) format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+20B4,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';src:url(/fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/fonts/ibm-plex-mono-cyrillic-600-normal.woff2) format('woff2');font-weight:600;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';src:url(/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}

/* ── Theme tokens (html:root beats :root[data-role=…] so a theme keeps one accent for every role) ── */
html:root[data-theme=bank]{
  --bg:#f3f5f8;--text:#0f1b2d;--text-2:#384860;--muted:#5b6b80;--dim:#6f7d90;
  --glass:#ffffff;--glass-2:#ffffff;--glass-strong:#ffffff;
  --line:#e3e8ef;--line-2:#d0d8e2;--field:#f6f8fb;
  --shadow:0 1px 2px rgba(15,27,45,.05),0 10px 28px -14px rgba(15,27,45,.14);--hi:rgba(255,255,255,.8);
  --ok:#0d7f57;--warn:#8f6200;--bad:#c02636;--info:#1d5bd8;--neutral:#5b6b80;
  --accent:#1d5bd8;--accent-2:#1649b0;--on-accent:#ffffff;color-scheme:light;
}
html:root[data-theme=graphite]{
  --bg:#17181a;--text:#ececed;--text-2:#c4c5c8;--muted:#94969b;--dim:#7d8085;
  --glass:#202124;--glass-2:#25272a;--glass-strong:#1c1d20;
  --line:#2f3236;--line-2:#3c3f44;--field:#18191b;
  --shadow:0 1px 0 rgba(0,0,0,.25);--hi:rgba(255,255,255,.03);
  --ok:#6fc497;--warn:#d6b25e;--bad:#e5808a;--info:#9db2dc;--neutral:#94969b;
  --accent:#e4e4e6;--accent-2:#c9c9cc;--on-accent:#141416;color-scheme:dark;
  --r-lg:16px;--r-xl:20px;
}
html:root[data-theme=sand]{
  /* owner 24.10.2026: every theme keeps the brand fonts */
  --bg:#f4ede1;--text:#2b2118;--text-2:#4c3e30;--muted:#6f5e4a;--dim:#7d6b55;
  --glass:#fbf7f0;--glass-2:#fdfaf5;--glass-strong:#fbf7f0;
  --line:#e2d4bf;--line-2:#d2c0a5;--field:#f6efe3;
  --shadow:0 1px 2px rgba(60,40,20,.06),0 12px 28px -18px rgba(60,40,20,.22);--hi:rgba(255,255,255,.6);
  --ok:#4a7535;--warn:#8a5a00;--bad:#ad3029;--info:#3b6787;--neutral:#6f5e4a;
  --accent:#a9491a;--accent-2:#8c3a12;--on-accent:#ffffff;color-scheme:light;
}
/* flat themes: no WebGL field, no glass blur, solid page */
html.flat #fx,html.flat .grain{display:none}
html.flat body{background:var(--bg)}
html.flat .glass{-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-theme=graphite] ::selection{background:#e4e4e6;color:#141416}

/* ── Density: compact ── */
html.dense{font-size:13px}
html.dense td{padding:8px 12px}
html.dense th{padding:9px 12px}
html.dense .pad{padding:14px}
html.dense .panelhead{padding:12px 16px}
html.dense .card{padding:14px 14px 12px}
html.dense .navitem{padding:7px 12px}
html.dense .navgroup{padding:14px 12px 6px}
html.dense input,html.dense select,html.dense textarea{padding:8px 11px}
html.dense .stack{gap:10px}

/* ── Appearance picker (profile) ── */
.themegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.themecard{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border-radius:14px;border:1px solid var(--line-2);background:var(--field);color:var(--text);text-align:left;cursor:pointer;box-shadow:none;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.themecard:hover{transform:translateY(-2px)}
.themecard.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.themecard .tprev{display:flex;height:64px;border-bottom:1px solid var(--line)}
.themecard .tprev i{display:block}
.themecard .tprev .ts{width:30%}
.themecard .tprev .tm{flex:1;display:flex;flex-direction:column;gap:5px;padding:8px}
.themecard .tprev .tb{height:7px;width:50%;border-radius:4px}
.themecard .tprev .tr{height:6px;border-radius:3px}
.themecard .tprev .ta{height:9px;width:34px;border-radius:4px;margin-top:auto;align-self:flex-end}
.copyok{display:inline-flex;align-items:center;gap:6px}
.tp-dark .tprev{background:#040b0a}.tp-dark .ts{background:#0b1a18;border-right:1px solid #1a2e2b}.tp-dark .tb{background:#e5f3ef}.tp-dark .tr{background:#0b1a18;border:1px solid #1a2e2b}.tp-dark .ta{background:#2fe6c8}
.tp-bank .tprev{background:#f3f5f8}.tp-bank .ts{background:#ffffff;border-right:1px solid #e3e8ef}.tp-bank .tb{background:#0f1b2d}.tp-bank .tr{background:#ffffff;border:1px solid #e3e8ef}.tp-bank .ta{background:#1d5bd8}
.tp-graphite .tprev{background:#17181a}.tp-graphite .ts{background:#202124;border-right:1px solid #2f3236}.tp-graphite .tb{background:#ececed}.tp-graphite .tr{background:#202124;border:1px solid #2f3236}.tp-graphite .ta{background:#e4e4e6}
.tp-sand .tprev{background:#f4ede1}.tp-sand .ts{background:#fbf7f0;border-right:1px solid #e2d4bf}.tp-sand .tb{background:#2b2118}.tp-sand .tr{background:#fbf7f0;border:1px solid #e2d4bf}.tp-sand .ta{background:#a9491a}
.themecard .tb{opacity:.8}
.themecard b{display:block;padding:9px 11px 2px;font-size:13px}
.themecard small{display:block;padding:0 11px 10px;font-size:11px;line-height:1.4}

/* ── Micro-details ── */
/* live status pulse */
.livedot{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.livedot::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--ok);animation:livepulse 1.8s cubic-bezier(.16,1,.3,1) infinite}
.livedot.off{background:var(--muted)}.livedot.off::after{display:none}
@keyframes livepulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.8);opacity:0}}
/* timers: amber under 3 min (existing .low), red under 1 min */
.timer.crit,[data-expires].crit{color:var(--bad)}
.tring.low .ring-fg{stroke:var(--warn)}.tring.crit .ring-fg{stroke:var(--bad)}
.ring-fg{transition:stroke-dasharray 1s linear,stroke .4s}
/* copy feedback in place */
button.copied{color:var(--ok)!important;border-color:color-mix(in oklab,var(--ok) 45%,transparent)!important}
button.copied svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:drawcheck .35s var(--ease) forwards}
@keyframes drawcheck{to{stroke-dashoffset:0}}
.popin{animation:popin .32s cubic-bezier(.34,1.45,.55,1)}
@keyframes popin{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.tradeswitch.on .ts-state::before{animation:statuspulse 2.2s cubic-bezier(.16,1,.3,1) infinite}
@keyframes statuspulse{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--accent) 55%,transparent)}70%,100%{box-shadow:0 0 0 6px transparent}}
.setlabel{display:flex;flex-direction:column;gap:3px}
.setlabel small{font-size:11.5px}
html.flat .brand,html.flat .bootmark{font-family:Unbounded,Onest,sans-serif}
/* new rows slide in and flash once */
tr.fresh{animation:rowin .45s var(--ease)}
tr.fresh>td{animation:rowflash 1.8s ease-out}
@keyframes rowin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes rowflash{0%{background:color-mix(in oklab,var(--accent) 16%,transparent)}100%{background:transparent}}
/* skeletons while a section loads */
.skel{display:flex;flex-direction:column;gap:14px;padding:6px 2px}
.skel i{display:block;border-radius:10px;background:linear-gradient(90deg,var(--line) 25%,var(--line-2) 50%,var(--line) 75%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite}
.skel .sk-h{height:34px;width:220px}
.skel .sk-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.skel .sk-row i{height:110px;border-radius:var(--r-lg)}
.skel .sk-panel{height:260px;border-radius:var(--r-lg)}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
/* hover / press */
.themecard:active,.seg button:active{scale:.97}
html.flat .panel{transition:box-shadow .22s var(--ease),border-color .22s}
html.flat .card{transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
html.flat .card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(0,0,0,.3)}
/* tooltips from title-less icon buttons get a soft fade (native titles stay as fallback) */
@media(prefers-reduced-motion:reduce){.tradeswitch.on .ts-state::before,.livedot::after,.skel i{animation:none}tr.fresh,tr.fresh>td{animation:none}html.flat .card:hover,.themecard:hover{transform:none}}
/* auto-take panel */
.panel.autotake{margin-bottom:16px}
.panel.autotake.on{border-color:color-mix(in oklab,var(--ok) 45%,transparent)}
.panel.autotake.on b{color:var(--ok)}
.atbtns{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;box-shadow:none}
.reglink{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;margin:18px 0 0;font-size:12.5px;color:var(--muted)}
/* bell */
.bell{position:relative}
.bellcount{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;font:700 10px/16px var(--font);font-style:normal;text-align:center;background:var(--bad);color:#fff;display:none}
.bellcount.on{display:block;animation:popin .32s cubic-bezier(.34,1.45,.55,1)}
.notelist{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow:auto}
.noteitem{display:grid;gap:2px;text-align:left;width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--text);box-shadow:none;justify-content:stretch}
.noteitem.unread{border-color:color-mix(in oklab,var(--accent) 40%,transparent);background:var(--accent-soft)}
.noteitem small{font-size:12px}

/* advisory receipt check */
.aireview{display:block;margin-top:4px;font-size:.82em;padding:4px 8px;border-radius:8px;background:var(--surface-2,rgba(127,127,127,.08))}
.aireview.ok b{color:var(--ok,#2e9d62)} .aireview.warn b{color:var(--warn,#c98a17)} .aireview.muted b{color:var(--muted,#888)}
.aireview small{display:block;opacity:.85}
/* login: Telegram button, the «або» divider, no empty error gap */
.formcard .error:empty{display:none}
.author{display:flex;align-items:center;gap:12px;margin:18px 0 12px;color:var(--dim);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.author::before,.author::after{content:"";flex:1;height:1px;background:var(--line-2)}
.tglogin{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border-radius:14px;border:1px solid var(--line-2);background:var(--glass);color:var(--text);font-weight:600;font-size:14px;text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
.tglogin:hover{background:rgba(42,171,238,.12);border-color:rgba(42,171,238,.45);transform:translateY(-1px)}
.tglogin .tgicon{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#2aabee;color:#fff}
.tglogin .tgicon svg{width:14px;height:14px;margin-left:-1px}
.reglink .linkbtn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:13px}
.reglink .linkbtn svg{width:14px;height:14px;transition:transform .2s}.reglink .linkbtn:hover svg{transform:translateX(3px)}
.lockpanel{text-align:center}.lockpanel .lockicon svg{width:42px;height:42px;opacity:.6}

/* brand theme in four colours (owner 24.10.2026): the preview's accent */
.tpa-admin .ta{background:#ad94ff}.tpa-merchant .ta{background:#62bcff}.tpa-support .ta{background:#ffc15e}