/* Owner 10.11.2026: the small things wear the look — the «Торгівля» knob, the «done» moment, loading bars, the pull sign
   on the phone, toasts, status badges and the bell. Loaded last, so it can sit on top of the base and phone styles. */

/* ── the «Торгівля» knob ─────────────────────────────────────────────────────── */
.tradeswitch .ts-knob{display:grid;place-items:center}
.ts-glyph{display:block;width:64%;height:64%;fill:none;stroke:var(--kg,#7d8899);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s cubic-bezier(.34,1.45,.55,1),opacity .3s}
.ts-glyph > g{display:none}
html[data-theme=newyear] .kg-snow,html[data-theme=emerald] .kg-coin,html[data-theme=midnight] .kg-moon,html[data-theme=sand] .kg-sun,html[data-theme=bank] .kg-check,html[data-theme=graphite] .kg-power,html[data-theme=dark] .kg-bolt{display:inline}
.tradeswitch:not(.on) .ts-glyph{--kg:var(--bg);opacity:.7;transform:rotate(-120deg) scale(.82)}
.tradeswitch.on .ts-glyph{--kg:var(--ok)}
html[data-theme=newyear] .tradeswitch.on .ts-glyph{--kg:#4f86d6}
html[data-theme=midnight] .kg-moon path{fill:var(--kg);fill-opacity:.28}
html[data-theme=midnight] .tradeswitch.on .ts-glyph{--kg:#4f74cf}
html[data-theme=sand] .tradeswitch.on .ts-glyph{--kg:#d1862e}
html[data-theme=dark] .kg-bolt path{fill:var(--kg);fill-opacity:.25}
/* «Смарагд»: the knob is a gold coin */
html[data-theme=emerald] .tradeswitch .ts-knob{background:radial-gradient(circle at 34% 30%,#fff3c4,#e2bf63 50%,#9a7428)!important;box-shadow:0 2px 6px rgba(0,0,0,.35),inset 0 0 0 1px rgba(122,90,28,.5)!important}
html[data-theme=emerald] .ts-glyph{--kg:#6e5016!important;stroke-width:1.8}
html[data-theme=emerald] .tradeswitch:not(.on) .ts-knob{filter:grayscale(.7) brightness(.85)}
html[data-theme=emerald] .tradeswitch:not(.on) .ts-glyph{opacity:.8}

/* ── the «done» moment (looks.js celebrate) ──────────────────────────────────── */
.cel{position:fixed;left:var(--x);top:var(--y);z-index:400;pointer-events:none}
.cel-stamp{display:grid;place-items:center;gap:2px;padding:10px 24px 8px;border:4px double #2f6fe4;border-radius:12px;color:#2f6fe4;background:rgba(255,255,255,.55);font:800 30px/1 var(--font);letter-spacing:.14em;rotate:-9deg;animation:celstamp 1.7s cubic-bezier(.2,1.4,.4,1) both}
.cel-stamp small{font-size:10px;letter-spacing:.32em;font-weight:700}
@keyframes celstamp{0%{transform:translate(-50%,-50%) scale(2.3);opacity:0}16%{transform:translate(-50%,-50%) scale(1);opacity:.95}22%{transform:translate(-50%,-50%) scale(1.04)}28%,72%{transform:translate(-50%,-50%) scale(1);opacity:.95}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.cel-term{display:grid;gap:5px;transform:translate(-50%,-50%);padding:14px 18px;border-radius:8px;background:#0d0e10;border:1px solid #2c2f34;color:#c9d1d9;font:500 16px/1.35 var(--mono);box-shadow:0 24px 60px rgba(0,0,0,.55);animation:celfade 2.3s ease both}
.cel-term span{overflow:hidden;white-space:nowrap;width:0;animation:celtype .75s steps(21) .1s forwards}
.cel-term b{color:var(--ok);opacity:0;animation:celshow .01s .95s forwards}
@keyframes celtype{to{width:21ch}}@keyframes celshow{to{opacity:1}}
@keyframes celfade{0%{opacity:0}8%,80%{opacity:1}100%{opacity:0}}
.cel-wave i{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid var(--accent);box-shadow:0 0 22px var(--accent-glow),inset 0 0 14px var(--accent-glow);opacity:0;animation:celwave 1.4s cubic-bezier(.2,.7,.3,1) forwards}
.cel-wave i:nth-child(2){animation-delay:.16s}.cel-wave i:nth-child(3){animation-delay:.32s}
@keyframes celwave{0%{transform:scale(.3);opacity:.95}100%{transform:scale(10);opacity:0}}

/* ── loading bars ─────────────────────────────────────────────────────────────── */
html[data-theme=newyear] .skel i{background:linear-gradient(100deg,var(--line) 30%,rgba(214,234,255,.3) 50%,var(--line) 70%);background-size:220% 100%}
html[data-theme=emerald] .skel i{background:linear-gradient(100deg,var(--line) 30%,rgba(226,191,99,.32) 50%,var(--line) 70%);background-size:220% 100%}
html[data-theme=midnight] .skel i{background:linear-gradient(100deg,var(--line) 30%,rgba(122,162,255,.26) 50%,var(--line) 70%);background-size:220% 100%}
html[data-theme=sand] .skel i{background:linear-gradient(100deg,var(--line) 30%,#fbf4e6 50%,var(--line) 70%);background-size:220% 100%}
html[data-theme=bank] .skel i{background:linear-gradient(100deg,var(--line) 30%,rgba(47,111,228,.12) 50%,var(--line) 70%);background-size:220% 100%}
html[data-theme=graphite] .skel i{background:linear-gradient(180deg,transparent 44%,rgba(225,230,238,.2) 50%,transparent 56%) 0 0/100% 320% no-repeat,var(--line);animation:skscan 1.7s linear infinite}
@keyframes skscan{from{background-position:0 115%}to{background-position:0 -15%}}

/* ── the pull sign on the phone ───────────────────────────────────────────────── */
#mptr .ptr-g{display:none}
html:is([data-theme=newyear],[data-theme=sand],[data-theme=midnight],[data-theme=emerald]) #mptr i{display:none}
html:is([data-theme=newyear],[data-theme=sand],[data-theme=midnight],[data-theme=emerald]) #mptr .ptr-g{display:block;position:absolute;inset:5px;width:22px;height:22px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ptr-g > g{display:none}
html[data-theme=newyear] .pg-snow,html[data-theme=sand] .pg-glass,html[data-theme=midnight] .pg-moon,html[data-theme=emerald] .pg-coin{display:inline}
#mptr.ready .ptr-g{stroke:var(--accent)}
html[data-theme=newyear] #mptr.spin .ptr-g{animation:mspin 1.3s linear infinite}
.pg-glass{transform-box:fill-box;transform-origin:center;transform:rotate(calc(var(--pull,0) * 180deg))}
.pg-glass .pgs{fill:var(--accent);stroke:none}
#mptr.spin .pg-glass{animation:hgflip 1.3s ease-in-out infinite}
@keyframes hgflip{0%,30%{transform:rotate(0)}50%,80%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
.pg-moon .pml{fill:#eef2ff;stroke:none}.pg-moon .pmd{fill:var(--glass-strong);stroke:none;transform:translateX(calc(var(--pull,0) * 15px))}
#mptr.spin .pmd{animation:moonphase 1.6s ease-in-out infinite}
@keyframes moonphase{0%{transform:translateX(0)}50%{transform:translateX(15px)}50.01%{transform:translateX(-15px)}100%{transform:translateX(0)}}
.pg-coin{transform-box:fill-box;transform-origin:center}.pg-coin ellipse{fill:#e2bf63;stroke:#9a7428;stroke-width:1.4}.pg-coin path{stroke:#6e5016}
#mptr.spin .pg-coin{animation:coinflip .8s ease-in-out infinite}
@keyframes coinflip{50%{transform:scaleX(.08)}}

/* ── toasts ───────────────────────────────────────────────────────────────────── */
.ticon svg.tglyph{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[data-theme=midnight] .toast.ok .tglyph{fill:currentColor;fill-opacity:.25}
html[data-theme=newyear] .toast.ok .ticon{color:#cfe6ff;background:rgba(160,200,255,.16)}
html[data-theme=newyear] .toast.show{animation:tsnow .9s cubic-bezier(.3,1.25,.5,1)}
@keyframes tsnow{0%{transform:translateY(-28px) rotate(-3deg);opacity:0}60%{transform:translateY(3px) rotate(1.4deg);opacity:1}100%{transform:none}}
html[data-theme=midnight] .toast.show{animation:tglow 1.3s ease}
@keyframes tglow{0%{opacity:0;box-shadow:0 0 0 0 rgba(122,162,255,0)}40%{opacity:1;box-shadow:0 0 34px 4px rgba(122,162,255,.45)}}
html[data-theme=emerald] .toast.show::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,240,200,.3) 50%,transparent 70%);transform:translateX(-100%);animation:tsheen 1.1s .15s ease forwards}
html[data-theme=emerald] .toast.ok .ticon{color:#e2bf63;background:rgba(226,191,99,.16)}
@keyframes tsheen{to{transform:translateX(100%)}}
html[data-theme=sand] .toast.show{animation:twind .7s cubic-bezier(.2,.8,.2,1)}
@keyframes twind{from{transform:translateX(-46px);filter:blur(4px);opacity:0}to{transform:none;filter:none;opacity:1}}
html[data-theme=graphite] .toast{font-family:var(--mono);border-radius:6px}
html[data-theme=graphite] .toast.show .tmsg{animation:ttype .6s steps(24)}
@keyframes ttype{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
/* «Банк»: a little receipt that prints, with a torn edge */
html[data-theme=bank] .toast{border-radius:6px 6px 0 0;background:#fff;color:#0f1b2d;padding-bottom:20px}
html.m[data-theme=bank] #toasts > .toast{border-radius:8px 8px 0 0!important;background:#fff!important;padding-bottom:20px!important}
html[data-theme=bank] .toast::after{content:'';position:absolute;left:0;right:0;bottom:0;height:8px;background:linear-gradient(-45deg,var(--bg) 4px,transparent 0) 0 100%/10px 8px repeat-x,linear-gradient(45deg,var(--bg) 4px,transparent 0) 0 100%/10px 8px repeat-x}
html[data-theme=bank] .toast .tbar{bottom:9px;height:1px;opacity:.5}
html[data-theme=bank] .toast.show{animation:tprint .8s steps(7)}
@keyframes tprint{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}

/* ── status badges ────────────────────────────────────────────────────────────── */
html[data-theme=bank] .badge{border-radius:4px;background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--bc) 70%,transparent);text-transform:uppercase;letter-spacing:.07em;font-size:10px;font-weight:800;padding:3px 7px;rotate:-1.5deg}
html[data-theme=bank] .badge::before{display:none}
html[data-theme=graphite] .badge{font-family:var(--mono);text-transform:uppercase;letter-spacing:.02em;background:none;box-shadow:none;border-radius:0;padding:2px 0;gap:1px;font-size:11px}
html[data-theme=graphite] .badge::before{content:'[';width:auto;height:auto;background:none;border-radius:0;animation:none;opacity:.6}
html[data-theme=graphite] .badge::after{content:']';opacity:.6}
html:is([data-theme=newyear],[data-theme=midnight]) .badge.live::before{box-shadow:0 0 7px currentColor}
html[data-theme=emerald] .badge{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--bc) 34%,transparent)}

/* ── the bell ─────────────────────────────────────────────────────────────────── */
.bell.ring svg{transform-origin:50% 10%;animation:bellswing 1.2s ease}
@keyframes bellswing{15%{transform:rotate(17deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}100%{transform:none}}
.bellcount.ring{animation:bcpop .5s cubic-bezier(.34,1.6,.5,1)!important}
@keyframes bcpop{0%{transform:scale(.4)}60%{transform:scale(1.28)}100%{transform:scale(1)}}
html[data-theme=newyear] .bellcount.ring{animation:bcsnow .7s cubic-bezier(.3,1.3,.5,1)!important}
@keyframes bcsnow{0%{transform:translateY(-12px) rotate(-20deg) scale(.6);opacity:0}100%{transform:none;opacity:1}}
html[data-theme=bank] .bellcount.ring{animation:bcstamp .45s cubic-bezier(.2,1.5,.4,1)!important}
@keyframes bcstamp{0%{transform:scale(1.9) rotate(-14deg);opacity:0}100%{transform:none;opacity:1}}
html[data-theme=newyear] .bellcount.on{box-shadow:0 0 0 2px var(--bg),0 0 12px rgba(255,207,107,.65)!important}
html[data-theme=midnight] .bellcount.on{box-shadow:0 0 0 2px var(--bg),0 0 12px rgba(122,162,255,.75)!important}
html[data-theme=emerald] .bellcount.on{background:linear-gradient(135deg,#fff1c2,#e2bf63 50%,#b8933d)!important;color:#2a1f05!important}
html[data-theme=graphite] .bellcount.on{border-radius:3px!important;font-family:var(--mono)!important}

html.calm .bell.ring svg,html.calm .bellcount.ring,html.calm .toast.show,html.calm .toast.show::after,html.calm .toast.show .tmsg{animation:none!important}
@media(prefers-reduced-motion:reduce){.bell.ring svg,.bellcount.ring,.toast.show,.toast.show::after,.toast.show .tmsg,.cel,.cel *,#mptr.spin .ptr-g,#mptr.spin .ptr-g *{animation:none!important}}
.ticon svg.tglyph{stroke-dasharray:none;stroke-dashoffset:0;animation:tgpop .5s cubic-bezier(.34,1.6,.5,1)}
@keyframes tgpop{from{transform:scale(.3) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}

/* ── entering the cabinet (owner 10.11.2026) — the veil with the logo; the motion itself is Web Animations in app.js ── */
#enter{position:fixed;inset:0;z-index:600;display:grid;place-items:center;background:var(--bg);pointer-events:none}
#enter .en-logo{grid-area:1/1;width:76px;height:76px;display:grid;place-items:center}
#enter .en-logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 30px var(--accent-glow,rgba(47,230,200,.35)))}
#enter .en-ring{grid-area:1/1;width:118px;height:118px;border-radius:50%;border:2px solid color-mix(in oklab,var(--accent) 22%,transparent);border-top-color:var(--accent);animation:enspin 1s linear infinite;opacity:0;animation-delay:.35s;animation-fill-mode:both}
@keyframes enspin{from{transform:rotate(0);opacity:1}to{transform:rotate(360deg);opacity:1}}
html.calm #enter .en-ring{animation-duration:2.4s}
/* «Ключі»: how long the PayChain token has left (owner 11.11.2026) */
.tokleft{display:block;margin-top:3px;font-size:.78rem;color:var(--muted)}.tokleft.warn{color:var(--warn)}.tokleft.bad{color:var(--bad);font-weight:600}

/* ── status icons (owner 15.11.2026): an icon instead of the dot, quiet motion on live statuses only ─────────── */
.badge.s-ic::before{display:none}
.badge.s-ic{gap:5px;padding-left:7px}
.badge .bi{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.badge .bi *{transform-box:view-box;transform-origin:12px 12px}
.badge .bi-track{opacity:.28}
.badge .bi-min{animation:bi-spin 6s linear infinite}
.badge .bi-arc{animation:bi-spin 1.8s linear infinite}
.badge .bi-chk{stroke-dasharray:1;animation:bi-chk 3.6s ease-out infinite}
.badge .bi-look{animation:bi-look 3.2s ease-in-out infinite}
.badge .bi-ex{animation:bi-blink 1.8s ease-in-out infinite}
.badge .bi-done{stroke-width:2.6}
.badge.urgent .bi{stroke-width:2;fill:currentColor;fill-opacity:.22}
.badge.urgent .bi-bolt{animation:bi-flash 2.6s ease-in-out infinite}
@keyframes bi-spin{to{transform:rotate(360deg)}}
@keyframes bi-chk{0%{stroke-dashoffset:1}22%,100%{stroke-dashoffset:0}}
@keyframes bi-look{0%,100%{transform:translate(0,0)}25%{transform:translate(1.2px,-.8px)}50%{transform:translate(0,-1.4px)}75%{transform:translate(-1.2px,-.6px)}}
@keyframes bi-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes bi-flash{0%,62%,100%{opacity:1;filter:none}68%{opacity:.35}72%{opacity:1;filter:drop-shadow(0 0 3px currentColor)}78%{opacity:.55}84%{opacity:1;filter:drop-shadow(0 0 2px currentColor)}}
html.calm .badge .bi *{animation:none!important}
@media (prefers-reduced-motion:reduce){.badge .bi *{animation:none!important}}
/* the terminal look keeps its [brackets] and no pictures */
html[data-theme=graphite] .badge.s-ic::before{display:inline}
html[data-theme=graphite] .badge .bi{display:none}
html[data-theme=bank] .badge .bi{width:11px;height:11px;translate:0 -1.5px}