/* DMS FX layer: futuristic / AI look on top of style.css + app.css.
   Loaded after app.css on every page; page <style> blocks still win at equal specificity.
   Catalogue with snippets: docs/FX.md. Animations touch transform / opacity only and stop under prefers-reduced-motion. */

/* ============ 1. Tokens ============ */
:root{
  --fx-cy:#3CF0FF;                 /* AI / data accent: use sparingly (AI chips, holograms, data viz) */
  --fx-cy-rgb:60,240,255;
  --fx-neon-rgb:57,255,126;
  --fx-lime-rgb:200,255,61;
  --fx-ink:#04210F;                /* text on neon fills */

  /* surfaces (opaque, so gradient hairlines can sit in the border box) */
  --fx-s1:linear-gradient(165deg,#10301F 0%,#0A2116 48%,#071810 100%);
  --fx-s2:linear-gradient(165deg,#143823 0%,#0D281A 100%);
  --fx-s3:linear-gradient(180deg,#183F28 0%,#10301E 100%);
  --fx-glass:rgba(11,32,21,.58);
  --fx-veil:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 42%);

  /* hairline borders (paint in border-box under an opaque padding-box fill) */
  --fx-hair:linear-gradient(140deg,rgba(170,255,205,.50) 0%,rgba(57,255,126,.13) 26%,rgba(57,255,126,.06) 60%,rgba(60,240,255,.26) 100%);
  --fx-hair-soft:linear-gradient(140deg,rgba(170,255,205,.30) 0%,rgba(57,255,126,.08) 34%,rgba(57,255,126,.05) 70%,rgba(57,255,126,.14) 100%);
  --fx-hair-hot:linear-gradient(140deg,rgba(var(--fx-lime-rgb),.85) 0%,rgba(57,255,126,.35) 30%,rgba(57,255,126,.12) 62%,rgba(60,240,255,.55) 100%);
  --fx-hair-ai:linear-gradient(140deg,rgba(60,240,255,.80) 0%,rgba(60,240,255,.16) 30%,rgba(57,255,126,.08) 62%,rgba(var(--fx-lime-rgb),.50) 100%);
  --fx-line-h:linear-gradient(90deg,transparent,rgba(57,255,126,.38) 22%,rgba(60,240,255,.30) 78%,transparent);

  --fx-holo:conic-gradient(from 0deg,#39FF7E,#C8FF3D 18%,#3CF0FF 34%,#39FF7E 50%,#C8FF3D 68%,#3CF0FF 84%,#39FF7E);
  --fx-grad-ai:linear-gradient(100deg,#B6FFF9 0%,#3CF0FF 40%,#39FF7E 100%);

  /* shadows / glows */
  --fx-in:inset 0 1px 0 rgba(255,255,255,.075);
  --fx-drop:0 16px 34px -18px rgba(0,0,0,.85),0 2px 8px rgba(0,0,0,.22);
  --fx-glow-s:0 0 10px rgba(57,255,126,.35);
  --fx-glow-m:0 0 24px rgba(57,255,126,.28),0 0 2px rgba(57,255,126,.7);
  --fx-glow-l:0 0 44px rgba(57,255,126,.26),0 0 4px rgba(57,255,126,.6);
  --fx-glow-ai:0 0 22px rgba(60,240,255,.30),0 0 2px rgba(60,240,255,.7);

  /* textures */
  --fx-grid:linear-gradient(rgba(88,255,150,.06) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,rgba(88,255,150,.06) 1px,transparent 1px) 0 0/26px 26px;
  --fx-circuit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%2339FF7E' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M0 20h28l10 10h30M68 30v24l12 12h40M20 120V86l14-14h22M56 72V46M90 0v18l-8 8M120 96H96l-10 10v14M8 52h22l8 8v18'/%3E%3Cg fill='%2339FF7E' fill-opacity='.32' stroke='none'%3E%3Ccircle cx='68' cy='30' r='2'/%3E%3Ccircle cx='56' cy='46' r='2'/%3E%3Ccircle cx='82' cy='26' r='2'/%3E%3Ccircle cx='86' cy='106' r='2'/%3E%3Ccircle cx='38' cy='78' r='2'/%3E%3C/g%3E%3C/svg%3E");
  --fx-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .7 0 0 0 0 1 0 0 0 0 .85 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

  /* shape + motion */
  --fx-r-xl:22px;--fx-r-l:18px;--fx-r-m:14px;--fx-r-s:10px;
  --fx-ease:cubic-bezier(.2,.8,.2,1);
  --fx-t1:.14s;--fx-t2:.28s;--fx-t3:.6s;
}

/* ============ 2. Atmosphere (fixed, painted once) ============ */
body{isolation:isolate}
body::before,body::after{content:"";position:fixed;top:0;bottom:0;left:50%;width:100%;max-width:var(--app-w);transform:translateX(-50%);pointer-events:none;z-index:-1}
/* circuit grid, fading out downwards */
body::before{background:var(--fx-grid);
  -webkit-mask-image:radial-gradient(120% 70% at 50% 0%,#000 0%,rgba(0,0,0,.45) 55%,transparent 100%);
  mask-image:radial-gradient(120% 70% at 50% 0%,#000 0%,rgba(0,0,0,.45) 55%,transparent 100%)}
/* aurora + scanlines + film grain */
body::after{
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),
    radial-gradient(70% 34% at 92% -4%,rgba(57,255,126,.17),transparent 70%),
    radial-gradient(60% 30% at -12% 34%,rgba(60,240,255,.065),transparent 70%),
    radial-gradient(80% 40% at 110% 92%,rgba(57,255,126,.07),transparent 70%),
    var(--fx-noise);
  opacity:.9}

::selection{background:rgba(57,255,126,.32);color:#fff}
input,textarea{caret-color:var(--neon)}
.num{font-variant-numeric:tabular-nums}

/* ============ 3. Shared chrome upgrades ============ */

/* top bar */
.nav h1{font-weight:700;letter-spacing:.02em;text-shadow:0 0 18px rgba(57,255,126,.18)}
.nav::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:1px;background:var(--fx-line-h);opacity:.55;pointer-events:none}
.ibtn{background:var(--fx-s2) padding-box,var(--fx-hair-soft) border-box;border:1px solid rgba(88,255,150,.08);box-shadow:var(--fx-in),0 6px 14px -8px rgba(0,0,0,.7);transition:transform var(--fx-t1) var(--fx-ease),box-shadow var(--fx-t1);-webkit-tap-highlight-color:transparent}
.ibtn:active{transform:scale(.93);box-shadow:var(--fx-in),0 0 14px rgba(57,255,126,.3)}
.dot{box-shadow:0 0 0 2px #061710,0 0 10px rgba(57,255,126,.9)}

/* cards and lists */
.card,.list{background:var(--fx-veil) padding-box,var(--fx-s1) padding-box,var(--fx-hair) border-box;border:1px solid rgba(88,255,150,.06);box-shadow:var(--fx-in),var(--fx-drop)}
.card.glow{background:var(--fx-veil) padding-box,radial-gradient(90% 70% at 100% 0%,rgba(57,255,126,.14),transparent 60%) padding-box,var(--fx-s1) padding-box,var(--fx-hair-hot) border-box;box-shadow:var(--fx-in),var(--fx-drop),0 0 34px -6px rgba(57,255,126,.25)}
.card.flat{box-shadow:var(--fx-in)}
.card2{background:var(--fx-veil) padding-box,var(--fx-s2) padding-box,var(--fx-hair-soft) border-box;border:1px solid rgba(88,255,150,.06);box-shadow:var(--fx-in)}
.card .shine{opacity:.75}
.hr{background:linear-gradient(90deg,transparent,rgba(88,255,150,.20) 15%,rgba(88,255,150,.20) 85%,transparent)}

.li{border-bottom-color:rgba(88,255,150,.075);transition:background var(--fx-t1)}
a.li:active,.li[href]:active,.li[data-href]:active,.li.tap:active{background:rgba(57,255,126,.06)}
.li .ico{background:linear-gradient(160deg,rgba(57,255,126,.20),rgba(57,255,126,.03) 72%);border-color:rgba(57,255,126,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 12px -4px rgba(57,255,126,.4)}
.li .t b{letter-spacing:.005em}
.li .arr{opacity:.8}

/* section headers */
.sec-h .h2,.sec-h>b:first-child,.sec-h>h2:first-child,.sec-h>h3:first-child{display:inline-flex;align-items:center;gap:8px}
.sec-h .h2::before,.sec-h>b:first-child::before,.sec-h>h2:first-child::before,.sec-h>h3:first-child::before{content:"";width:3px;height:15px;border-radius:2px;background:linear-gradient(180deg,#C8FF3D,#18D86F);box-shadow:0 0 8px rgba(57,255,126,.7);flex:none}
.sec-h .more{transition:color var(--fx-t1)}
.sec-h .more:active{color:var(--neon)}
.h2{letter-spacing:.005em}

/* buttons */
.btn,.pill{position:relative;overflow:hidden;isolation:isolate;transition:transform var(--fx-t1) var(--fx-ease),box-shadow var(--fx-t2),filter var(--fx-t1);-webkit-tap-highlight-color:transparent}
.btn:active,.pill:active{transform:scale(.975)}
.btn:focus-visible,.pill:focus-visible,.ibtn:focus-visible,.chip:focus-visible{outline:2px solid rgba(57,255,126,.75);outline-offset:2px}
.btn.pri,.pill{background:linear-gradient(100deg,#D4FF4E 0%,#64FF72 45%,#18D86F 100%);color:var(--fx-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,70,30,.22),0 10px 24px -10px rgba(57,255,126,.75),0 0 20px rgba(92,255,110,.22)}
.btn.pri:active{filter:brightness(1.06)}
/* light sweep on large primary buttons */
.btn.pri:not(.sm):not(.xs)::after,.pill.fx-sheen::after,.btn.fx-sheen::after{content:"";position:absolute;top:0;bottom:0;left:0;width:42%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);transform:translateX(-140%) skewX(-18deg);animation:fx-sheen 5.2s var(--fx-ease) infinite}
@keyframes fx-sheen{0%,64%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
.btn.sec{background:var(--fx-veil) padding-box,var(--fx-s3) padding-box,var(--fx-hair) border-box;border:1px solid rgba(88,255,150,.08);box-shadow:var(--fx-in),0 8px 18px -12px rgba(0,0,0,.8)}
.btn.out{background:linear-gradient(180deg,rgba(57,255,126,.08),rgba(57,255,126,.02));box-shadow:inset 0 0 14px rgba(57,255,126,.12),0 0 14px -4px rgba(57,255,126,.35);text-shadow:0 0 10px rgba(57,255,126,.4)}
.btn.danger{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 22px -10px rgba(255,77,98,.7)}
.btn.dis,.btn[disabled]{box-shadow:none;filter:saturate(.6)}
.btn[disabled]::after,.btn.dis::after,.btn.loading::after{animation:none;opacity:0}

/* tags / badges */
.tag{letter-spacing:.01em;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.chg{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px -8px rgba(43,234,122,.7)}
.chg.dn{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px -8px rgba(255,77,98,.7)}

/* tabs / segmented / chips */
.tabs{border-bottom-color:rgba(88,255,150,.10)}
.tabs b{transition:color var(--fx-t2)}
.tabs b.on{text-shadow:0 0 16px rgba(57,255,126,.35)}
.tabs b.on:after{height:2px;left:12%;right:12%;background:linear-gradient(90deg,transparent,#C8FF3D 25%,#39FF7E 75%,transparent);box-shadow:0 0 10px rgba(57,255,126,.9),0 0 2px #39FF7E}
.seg{background:linear-gradient(180deg,#04100A,#0A1E14) padding-box,var(--fx-hair-soft) border-box;border:1px solid rgba(88,255,150,.06);box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
.seg b{transition:color var(--fx-t2)}
.seg b.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 14px -4px rgba(57,255,126,.55)}
.chip{background:linear-gradient(180deg,rgba(22,56,36,.75),rgba(12,34,22,.75));border-color:rgba(88,255,150,.13);box-shadow:var(--fx-in);transition:color var(--fx-t1),border-color var(--fx-t1)}
.chip.on{background:linear-gradient(180deg,rgba(57,255,126,.16),rgba(57,255,126,.05));box-shadow:inset 0 0 10px rgba(57,255,126,.14),0 0 12px -2px rgba(57,255,126,.35)}

/* form controls */
.field>label{letter-spacing:.01em}
.input{background:linear-gradient(180deg,rgba(5,18,11,.92),rgba(12,34,22,.88));border-color:rgba(88,255,150,.15);box-shadow:inset 0 2px 8px rgba(0,0,0,.38),inset 0 -1px 0 rgba(255,255,255,.03);transition:border-color var(--fx-t2),box-shadow var(--fx-t2)}
.input:focus-within,.input.focus{border-color:rgba(57,255,126,.78);box-shadow:inset 0 2px 8px rgba(0,0,0,.3),0 0 0 3px rgba(57,255,126,.11),0 0 20px -2px rgba(57,255,126,.3)}
.input.err{box-shadow:inset 0 2px 8px rgba(0,0,0,.3),0 0 0 3px rgba(255,77,98,.10)}
.switch{background:linear-gradient(180deg,#0E2318,#1A3826);box-shadow:inset 0 2px 5px rgba(0,0,0,.5);transition:background var(--fx-t2)}
.switch:after{background:linear-gradient(180deg,#B9CCC2,#71877B);box-shadow:0 2px 4px rgba(0,0,0,.5);transition:left var(--fx-t2) var(--fx-ease)}
.switch.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 14px rgba(92,255,110,.38)}
.switch.on:after{background:radial-gradient(circle at 40% 35%,#14492A,#04210F)}
.check{transition:background var(--fx-t1)}
.check.on{box-shadow:0 0 10px rgba(57,255,126,.45)}
.otp b{background:linear-gradient(180deg,rgba(5,18,11,.92),rgba(12,34,22,.88));box-shadow:inset 0 2px 8px rgba(0,0,0,.38)}
.otp b.on{box-shadow:inset 0 2px 8px rgba(0,0,0,.3),0 0 0 3px rgba(57,255,126,.11),var(--glow)}
.bar{background:linear-gradient(180deg,#0A1F14,#14301F);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}

/* overlays */
.ov{background:radial-gradient(120% 70% at 50% 100%,rgba(57,255,126,.08),transparent 60%),rgba(1,7,4,.74)}
.ov.show{animation:fx-fade var(--fx-t2) ease-out}
.ov.show .sheet{animation:fx-rise .34s var(--fx-ease)}
.sheet{background:var(--fx-veil) padding-box,linear-gradient(180deg,#0F2C1D,#061610 70%) padding-box,linear-gradient(90deg,transparent 4%,rgba(57,255,126,.75) 30%,rgba(60,240,255,.55) 70%,transparent 96%) border-box;
  border:0;border-top:1px solid transparent;box-shadow:0 -18px 50px -10px rgba(57,255,126,.16),0 -1px 0 rgba(255,255,255,.02)}
.sheet .grab{background:linear-gradient(90deg,#2B5040,#4C8A66,#2B5040);box-shadow:0 0 8px rgba(57,255,126,.25)}
.sheet h3{letter-spacing:.01em}
.dlg{background:var(--fx-veil) padding-box,radial-gradient(90% 50% at 50% 0%,rgba(57,255,126,.12),transparent 70%) padding-box,linear-gradient(180deg,#0F2D1D,#071710) padding-box,var(--fx-hair-hot) border-box;border:1px solid rgba(88,255,150,.08);box-shadow:var(--fx-in),0 0 60px rgba(57,255,126,.16),0 24px 60px -20px rgba(0,0,0,.9)}
.ov.show .dlg{animation:fx-fade var(--fx-t2) ease-out}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
@keyframes fx-rise{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}

/* toast */
.toast{background:linear-gradient(180deg,rgba(16,44,29,.98),rgba(6,22,14,.98)) padding-box,var(--fx-hair-hot) border-box;border:1px solid rgba(88,255,150,.06);box-shadow:var(--fx-in),0 0 28px -4px rgba(57,255,126,.35),0 18px 40px -16px rgba(0,0,0,.9);font-weight:500;letter-spacing:.005em}
.toast.err{background:linear-gradient(180deg,rgba(44,16,22,.98),rgba(22,6,10,.98)) padding-box,linear-gradient(140deg,rgba(255,140,150,.8),rgba(255,77,98,.2) 40%,rgba(255,77,98,.5)) border-box;box-shadow:var(--fx-in),0 0 28px -4px rgba(255,77,98,.4)}

/* loading / empty */
.skel{position:relative;overflow:hidden;animation:none;background:rgba(88,255,150,.07)}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(150,255,210,.13) 50%,transparent);transform:translateX(-100%);animation:fx-skel 1.5s ease-in-out infinite}
@keyframes fx-skel{to{transform:translateX(100%)}}
.empty{color:var(--t2);letter-spacing:.005em}
.empty .ea{filter:drop-shadow(0 10px 24px rgba(57,255,126,.12))}
.spin{border-color:rgba(57,255,126,.18);border-top-color:var(--neon);box-shadow:0 0 10px -2px rgba(57,255,126,.5)}

/* bottom tab bar (ui.js) */
body .tabbar{background:linear-gradient(180deg,rgba(9,28,18,.86),rgba(3,12,7,.97));border-top:0;box-shadow:0 -14px 34px -8px rgba(0,0,0,.6)}
body .tabbar::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fx-line-h);pointer-events:none}
body .tabbar a{position:relative;letter-spacing:.01em;-webkit-tap-highlight-color:transparent}
body .tabbar a:not(.mid).on::before{content:"";position:absolute;top:-10px;left:50%;width:24px;height:3px;margin-left:-12px;border-radius:0 0 3px 3px;background:var(--grad);box-shadow:0 0 12px rgba(57,255,126,.95),0 2px 10px rgba(57,255,126,.6)}
body .tabbar a.on svg{filter:drop-shadow(0 0 6px rgba(57,255,126,.55))}
body .tabbar a.mid i{position:relative;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -4px 10px rgba(0,80,30,.35),0 0 0 5px rgba(3,12,7,.96),0 0 0 6px rgba(57,255,126,.28),0 0 32px rgba(57,255,126,.55)}
body .tabbar a.mid i::before{content:"";position:absolute;inset:-7px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 62%,rgba(60,240,255,.85) 80%,#C8FF3D 92%,transparent 93%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  animation:fx-spin 5s linear infinite}
@keyframes fx-spin{to{transform:rotate(360deg)}}

/* ============ 4. Opt-in components (see docs/FX.md) ============ */

/* .fx-k - kicker label above titles */
.fx-k{display:inline-flex;align-items:center;gap:8px;font:600 10.5px/1.3 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--neon)}
.fx-k::before{content:"";width:16px;height:1px;background:linear-gradient(90deg,transparent,currentColor);box-shadow:0 0 6px currentColor}
.fx-k.ai{color:var(--fx-cy)}

/* .fx-h - section header with tick + trailing line */
.fx-h{display:flex;align-items:center;gap:10px;margin:22px 0 12px}
.fx-h>h2,.fx-h>h3,.fx-h>b{display:inline-flex;align-items:center;gap:8px;font:700 17px/1.2 var(--disp);white-space:nowrap}
.fx-h>h2::before,.fx-h>h3::before,.fx-h>b::before{content:"";width:3px;height:15px;border-radius:2px;background:linear-gradient(180deg,#C8FF3D,#18D86F);box-shadow:0 0 8px rgba(57,255,126,.7)}
.fx-h::after{content:"";flex:1;height:1px;min-width:12px;background:linear-gradient(90deg,rgba(88,255,150,.28),transparent);order:1}
.fx-h .more{order:2;font-size:12px;color:var(--t2);display:flex;align-items:center;gap:2px;white-space:nowrap}
.fx-h .more svg{width:14px;height:14px}
[dir=rtl] .fx-h::after{background:linear-gradient(270deg,rgba(88,255,150,.28),transparent)}

/* .glass - translucent panel; add .blur only on 1-2 elements per screen */
.glass{background:var(--fx-veil),var(--fx-glass);border:1px solid rgba(150,255,200,.14);border-radius:var(--r);box-shadow:var(--fx-in),var(--fx-drop)}
.glass.blur{-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}

/* .fx-edge / .fx-edge.hot / .fx-edge.ai - gradient hairline border for any element (needs an opaque fill) */
.fx-edge{background:var(--fx-veil) padding-box,var(--fx-s1) padding-box,var(--fx-hair) border-box;border:1px solid transparent}
.fx-edge.hot{background:var(--fx-veil) padding-box,var(--fx-s1) padding-box,var(--fx-hair-hot) border-box}
.fx-edge.ai{background:var(--fx-veil) padding-box,var(--fx-s1) padding-box,var(--fx-hair-ai) border-box}

/* .hud - corner-bracket frame (uses ::before) */
.hud{position:relative;--hud-c:rgba(57,255,126,.85);--hud-l:12px;--hud-w:1.5px;--hud-i:6px}
.hud::before{content:"";position:absolute;inset:var(--hud-i);pointer-events:none;z-index:1;
  background:
    linear-gradient(var(--hud-c),var(--hud-c)) 0 0/var(--hud-l) var(--hud-w),linear-gradient(var(--hud-c),var(--hud-c)) 0 0/var(--hud-w) var(--hud-l),
    linear-gradient(var(--hud-c),var(--hud-c)) 100% 0/var(--hud-l) var(--hud-w),linear-gradient(var(--hud-c),var(--hud-c)) 100% 0/var(--hud-w) var(--hud-l),
    linear-gradient(var(--hud-c),var(--hud-c)) 0 100%/var(--hud-l) var(--hud-w),linear-gradient(var(--hud-c),var(--hud-c)) 0 100%/var(--hud-w) var(--hud-l),
    linear-gradient(var(--hud-c),var(--hud-c)) 100% 100%/var(--hud-l) var(--hud-w),linear-gradient(var(--hud-c),var(--hud-c)) 100% 100%/var(--hud-w) var(--hud-l);
  background-repeat:no-repeat;filter:drop-shadow(0 0 3px rgba(57,255,126,.6))}
.hud.ai{--hud-c:rgba(60,240,255,.85)}
.hud.out{--hud-i:-5px}

/* .holo - animated holographic border (uses ::before + ::after; fill via --holo-fill) */
.holo{position:relative;isolation:isolate;overflow:hidden;border-color:transparent!important;background:transparent!important;--holo-fill:linear-gradient(165deg,#0F2E1E,#071710 80%)}
.holo::before{content:"";position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;margin:-100% 0 0 -100%;z-index:-2;background:var(--fx-holo);opacity:.85;animation:fx-spin 7s linear infinite;pointer-events:none}
.holo::after{content:"";position:absolute;inset:1px;border-radius:calc(var(--r) - 1px);z-index:-1;background:var(--fx-veil),var(--holo-fill);pointer-events:none}
.holo.slow::before{animation-duration:14s}

/* .ai-chip - small AI badge with a live pulse. Text needs a key: <span class="ai-chip" data-t="common.ai">AI</span> */
.ai-chip{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px 0 7px;border-radius:10px;font:800 10.5px/1 var(--disp);letter-spacing:.08em;color:#CFFFFB;white-space:nowrap;
  background:linear-gradient(180deg,rgba(60,240,255,.20),rgba(60,240,255,.05)) padding-box,linear-gradient(#05171A,#05171A) padding-box,linear-gradient(120deg,rgba(60,240,255,.9),rgba(57,255,126,.5)) border-box;border:1px solid transparent;box-shadow:0 0 12px -2px rgba(60,240,255,.45);text-shadow:0 0 8px rgba(60,240,255,.7)}
.ai-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--fx-cy);box-shadow:0 0 6px var(--fx-cy);animation:fx-blink 2.4s ease-in-out infinite;flex:none}
.ai-chip.lg{height:26px;padding:0 11px 0 9px;font-size:12px;border-radius:13px}
.ai-chip.green{color:#E2FFEA;background:linear-gradient(180deg,rgba(57,255,126,.2),rgba(57,255,126,.05)) padding-box,linear-gradient(#061A0F,#061A0F) padding-box,linear-gradient(120deg,#C8FF3D,rgba(57,255,126,.4)) border-box;box-shadow:0 0 12px -2px rgba(57,255,126,.5);text-shadow:0 0 8px rgba(57,255,126,.6)}
.ai-chip.green::before{background:var(--neon);box-shadow:0 0 6px var(--neon)}
@keyframes fx-blink{0%,100%{opacity:1}50%{opacity:.25}}

/* .ai-panel - AI insight card: header (.ai-h) + body. Uses ::before for the top beam */
.ai-panel{position:relative;overflow:hidden;border-radius:var(--r);padding:14px 16px 16px;
  background:var(--fx-veil) padding-box,radial-gradient(80% 60% at 100% 0%,rgba(60,240,255,.12),transparent 65%) padding-box,radial-gradient(60% 60% at 0% 100%,rgba(57,255,126,.08),transparent 70%) padding-box,var(--fx-s1) padding-box,var(--fx-hair-ai) border-box;
  border:1px solid transparent;box-shadow:var(--fx-in),var(--fx-drop),0 0 30px -10px rgba(60,240,255,.3)}
.ai-panel::before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(60,240,255,.9),transparent);box-shadow:0 0 10px rgba(60,240,255,.8);pointer-events:none}
.ai-panel .ai-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ai-panel .ai-h>b{flex:1;min-width:0;font:700 15px/1.25 var(--disp);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-panel .ai-h>img{width:30px;height:30px;flex:none}
.ai-panel p{font-size:13px;line-height:1.55;color:var(--t2)}
.ai-panel .ai-foot{margin-top:10px;font-size:11px;color:var(--t3)}

/* .scan - vertical scanning sweep (uses ::after; element must clip) */
.scan{position:relative;overflow:hidden}
.scan::after{content:"";position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,transparent 0%,rgba(57,255,126,0) 78%,rgba(57,255,126,.10) 96%,rgba(200,255,220,.55) 99.4%,transparent 100%);
  transform:translateY(-100%);animation:fx-scan 4.2s cubic-bezier(.45,0,.55,1) infinite}
.scan.ai::after{background:linear-gradient(180deg,transparent 0%,rgba(60,240,255,0) 78%,rgba(60,240,255,.10) 96%,rgba(200,250,255,.55) 99.4%,transparent 100%)}
@keyframes fx-scan{0%{transform:translateY(-100%)}70%,100%{transform:translateY(100%)}}

/* .grid-bg / .circuit-bg - textured section backgrounds (replace the element's background) */
.grid-bg{background:radial-gradient(90% 80% at 50% 0%,rgba(57,255,126,.10),transparent 70%),var(--fx-grid),var(--fx-s1)}
.circuit-bg{background:radial-gradient(90% 80% at 80% 0%,rgba(57,255,126,.12),transparent 70%),var(--fx-circuit) 0 0/120px 120px,var(--fx-s1)}
.grid-bg.clear,.circuit-bg.clear{background-color:transparent}
.grid-bg.clear{background:var(--fx-grid)}
.circuit-bg.clear{background:var(--fx-circuit) 0 0/120px 120px}

/* .orb - glowing energy sphere; size with --s */
.orb{--s:64px;width:var(--s);height:var(--s);border-radius:50%;flex:none;position:relative;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.85) 0 4%,rgba(200,255,220,.5) 9%,transparent 26%),radial-gradient(circle at 50% 55%,#39FF7E 0%,#13A85A 45%,#06381E 72%,#03140B 100%);
  box-shadow:0 0 0 1px rgba(150,255,200,.35),0 0 calc(var(--s) * .45) rgba(57,255,126,.45),inset 0 -6px 14px rgba(0,0,0,.45)}
.orb.ai{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.85) 0 4%,rgba(200,250,255,.5) 9%,transparent 26%),radial-gradient(circle at 50% 55%,#3CF0FF 0%,#119AAE 45%,#063540 72%,#03121A 100%);box-shadow:0 0 0 1px rgba(150,240,255,.35),0 0 calc(var(--s) * .45) rgba(60,240,255,.4),inset 0 -6px 14px rgba(0,0,0,.45)}

/* .orbit - tilted rotating rings: <div class="orbit"><i></i><i></i></div>; size with --s */
.orbit{--s:160px;width:var(--s);height:var(--s);position:relative;pointer-events:none;transform:rotate(-14deg) scaleY(.34)}
.orbit>i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(57,255,126,.45);animation:fx-spin 9s linear infinite}
.orbit>i:nth-child(2){inset:12%;border-style:dashed;border-color:rgba(60,240,255,.4);animation-duration:14s;animation-direction:reverse}
.orbit>i::after{content:"";position:absolute;top:50%;right:-4px;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#C8FF3D;box-shadow:0 0 10px #39FF7E}
.orbit>i:nth-child(2)::after{background:var(--fx-cy);box-shadow:0 0 10px var(--fx-cy)}

/* .data-stream - faint falling code strip (decorative, aria-hidden). Width via CSS, e.g. 48px */
.data-stream{position:relative;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 20%,#000 70%,transparent)}
.data-stream::before{content:"";position:absolute;left:0;right:0;top:-96px;height:calc(100% + 96px);opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='96'%3E%3Cg fill='%2339FF7E'%3E%3Crect x='3' y='4' width='3' height='6' opacity='.9'/%3E%3Crect x='3' y='14' width='3' height='3' opacity='.5'/%3E%3Crect x='3' y='40' width='3' height='9' opacity='.3'/%3E%3Crect x='3' y='70' width='3' height='4' opacity='.7'/%3E%3Crect x='15' y='22' width='3' height='3' opacity='.6'/%3E%3Crect x='15' y='30' width='3' height='8' opacity='.25'/%3E%3Crect x='15' y='60' width='3' height='5' opacity='.85'/%3E%3Crect x='27' y='8' width='3' height='10' opacity='.3'/%3E%3Crect x='27' y='48' width='3' height='3' opacity='.9'/%3E%3Crect x='27' y='84' width='3' height='6' opacity='.45'/%3E%3Crect x='39' y='28' width='3' height='5' opacity='.75'/%3E%3Crect x='39' y='54' width='3' height='12' opacity='.2'/%3E%3C/g%3E%3Cg fill='%233CF0FF'%3E%3Crect x='9' y='80' width='3' height='4' opacity='.6'/%3E%3Crect x='33' y='18' width='3' height='3' opacity='.7'/%3E%3Crect x='21' y='88' width='3' height='3' opacity='.5'/%3E%3C/g%3E%3C/svg%3E") 0 0/48px 96px;
  animation:fx-rain 3.2s linear infinite}
@keyframes fx-rain{to{transform:translateY(96px)}}

/* .metric - big number with label and glow */
.metric{display:flex;flex-direction:column;gap:4px;min-width:0}
.metric>small,.metric>label{font-size:11.5px;color:var(--t2);letter-spacing:.04em}
.metric>b{font:800 28px/1.1 var(--disp);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--t1);text-shadow:0 0 22px rgba(57,255,126,.28);white-space:nowrap}
.metric>b em,.metric>b small{font:600 13px/1 var(--sans);font-style:normal;color:var(--t2);margin-inline-start:4px;text-shadow:none}
.metric.grad>b{background:linear-gradient(100deg,#F1FFF6 10%,#9DFFB8 60%,#39FF7E);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 12px rgba(57,255,126,.25))}
.metric.ai>b{text-shadow:0 0 22px rgba(60,240,255,.35)}
.metric.sm>b{font-size:19px}
.metric.lg>b{font-size:36px}

/* .pulse-dot - live indicator */
.pulse-dot{--c:var(--neon);position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);flex:none;vertical-align:middle}
.pulse-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--c);animation:fx-ping 1.8s cubic-bezier(0,.5,.4,1) infinite}
.pulse-dot.ai{--c:var(--fx-cy)}.pulse-dot.warn{--c:var(--warn)}.pulse-dot.down{--c:var(--down)}.pulse-dot.off{--c:var(--t3);box-shadow:none}
.pulse-dot.off::after{display:none}
@keyframes fx-ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}

/* text effects */
.glow-text{text-shadow:0 0 14px rgba(57,255,126,.55),0 0 2px rgba(57,255,126,.6)}
.glow-text.ai{text-shadow:0 0 14px rgba(60,240,255,.55),0 0 2px rgba(60,240,255,.6)}
.ai-text{background:var(--fx-grad-ai);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-cy{color:var(--fx-cy)}

/* .divider-fx - glowing divider with a centre node */
.divider-fx{position:relative;height:1px;margin:16px 0;background:linear-gradient(90deg,transparent,rgba(57,255,126,.4) 30%,rgba(60,240,255,.35) 70%,transparent)}
.divider-fx::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;transform:rotate(45deg);background:#061710;border:1px solid var(--neon);box-shadow:0 0 8px rgba(57,255,126,.8)}

/* .fx-ico - premium icon tile (quick entries); sizes .s / .l */
.fx-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;color:#E8FFF0;
  background:linear-gradient(160deg,rgba(57,255,126,.22),rgba(57,255,126,.03) 70%) padding-box,linear-gradient(#0A2216,#0A2216) padding-box,linear-gradient(150deg,rgba(190,255,215,.55),rgba(57,255,126,.08) 45%,rgba(57,255,126,.25)) border-box;border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 16px -10px rgba(0,0,0,.8),0 0 16px -6px rgba(57,255,126,.45)}
.fx-ico svg,.fx-ico svg.duo{width:24px;height:24px;filter:drop-shadow(0 0 4px rgba(57,255,126,.45))}
.fx-ico.s{width:36px;height:36px;border-radius:11px}.fx-ico.s svg,.fx-ico.s svg.duo{width:19px;height:19px}
.fx-ico.l{width:56px;height:56px;border-radius:17px}.fx-ico.l svg,.fx-ico.l svg.duo{width:28px;height:28px}
.fx-ico.ai{color:#DFFFFD;background:linear-gradient(160deg,rgba(60,240,255,.22),rgba(60,240,255,.03) 70%) padding-box,linear-gradient(#071C1D,#071C1D) padding-box,linear-gradient(150deg,rgba(180,250,255,.6),rgba(60,240,255,.08) 45%,rgba(60,240,255,.3)) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 16px -6px rgba(60,240,255,.5)}
.fx-ico.ai svg{filter:drop-shadow(0 0 4px rgba(60,240,255,.5))}

/* .bot - mascot container: <div class="bot"><img src="assets/img/ai/bot-hero.svg?v=n1" alt="" aria-hidden="true"></div> */
.bot{position:relative;display:inline-block;flex:none;line-height:0;pointer-events:none;user-select:none}
.bot>img{display:block;width:100%;height:auto;animation:fx-float 4.8s ease-in-out infinite}
.bot::after{content:"";position:absolute;left:18%;right:18%;bottom:2%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(57,255,126,.35),transparent);animation:fx-shadow 4.8s ease-in-out infinite;z-index:-1}
.bot.still>img,.bot.still::after{animation:none}
.bot.no-shadow::after{display:none}
.bot.xs{width:40px}.bot.sm{width:72px}.bot.md{width:132px}.bot.lg{width:190px}.bot.xl{width:240px}
@keyframes fx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes fx-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.86);opacity:.6}}

/* .bot-ava - round mascot avatar (bot-head.svg) */
.bot-ava{width:40px;height:40px;border-radius:50%;flex:none;display:block;box-shadow:0 0 0 2px #061710,0 0 14px -2px rgba(57,255,126,.5)}
.bot-ava.s{width:28px;height:28px}.bot-ava.l{width:64px;height:64px}

/* .hero-fx - hero header block: copy on the start side, mascot on the end side */
.hero-fx{position:relative;overflow:hidden;border-radius:var(--fx-r-xl);padding:20px 16px 18px;min-height:190px;display:flex;align-items:center;gap:8px;
  background:radial-gradient(70% 90% at 82% 40%,rgba(57,255,126,.20),transparent 65%) padding-box,radial-gradient(60% 60% at 0% 100%,rgba(60,240,255,.08),transparent 70%) padding-box,var(--fx-grid) padding-box,linear-gradient(135deg,#103320,#06160E 70%) padding-box,var(--fx-hair-hot) border-box;
  border:1px solid transparent;box-shadow:var(--fx-in),var(--fx-drop),0 0 40px -14px rgba(57,255,126,.4)}
.hero-fx .hx-copy{position:relative;z-index:2;flex:1;min-width:0}
.hero-fx h1,.hero-fx h2{font:800 22px/1.2 var(--disp);margin:8px 0 8px;letter-spacing:.005em}
.hero-fx p{font-size:12.5px;line-height:1.5;color:var(--t2);margin-bottom:14px}
.hero-fx .hx-art{position:relative;z-index:1;width:42%;max-width:180px;margin:-10px -6px -14px 0;flex:none}
[dir=rtl] .hero-fx .hx-art{margin:-10px 0 -14px -6px}
.hero-fx.center{flex-direction:column;text-align:center}
.hero-fx.center .hx-art{width:56%;margin:0 auto -6px}

/* .fx-stats - row of metrics with hairline separators */
.fx-stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0}
.fx-stats>*{padding:0 12px;min-width:0}
.fx-stats>*:first-child{padding-inline-start:0}
.fx-stats>*+*{border-inline-start:1px solid rgba(88,255,150,.12)}

/* .fx-reveal - fade-up on enter (added by fx.js to elements with data-vfx="reveal") */
.fx-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--fx-ease),transform .5s var(--fx-ease)}
.fx-reveal.in{opacity:1;transform:none}

/* particles canvas (fx.js, data-vfx="particles") */
.fx-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* ============ 5. Motion safety ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important}
  .fx-reveal{opacity:1;transform:none}
}