[hidden],.sg-empty[hidden]{display:none !important}
/* LandingGen Pro · Magenta Spark Deck · logo/mjbdada pink-purple-red */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* void plank with warm violet undertone — matches logo glow */
  --bg-void: #0a0410; --bg-deck: #120818; --bg-panel: #1a0c1e; --bg-panel-2: #221028;
  --bg-panel-3: #2c1534; --bg-inset: #0d0512; --bg-hover: #2a1432; --bg-active: #3b1548;
  --border-1: rgba(236,72,153,0.10); --border-2: rgba(192,132,252,0.18); --border-3: rgba(244,114,182,0.36);
  --border-hot: rgba(251,113,133,0.6); --hairline: rgba(244,114,182,0.08);
  --text-hi: #fdf2f8; --text: #f5e1ef; --text2: #d8b4c8; --text3: #9f7a92; --text-dim: #6b4e62;
  /* brand: pink dominant · purple support · red edge */
  --red: #e11d48; --red-hot: #fb7185; --red-glow: rgba(225,29,72,0.48);
  --orange: #ec4899; --orange-hot: #f9a8d4; --orange-glow: rgba(236,72,153,0.48);
  --amber: #fda4af; --ok: #34d399; --ok-hot: #6ee7b7; --ok-glow: rgba(52,211,153,0.35);
  --warn: #fbbf24; --info: #c084fc; --info-glow: rgba(192,132,252,0.45);
  --blue: #a855f7; --blue-hot: #d8b4fe; --blue-glow: rgba(168,85,247,0.42);
  --violet: #a855f7; --violet-hot: #e9d5ff; --violet-glow: rgba(168,85,247,0.42);
  --magenta: #d946ef; --magenta-hot: #f0abfc; --magenta-glow: rgba(217,70,239,0.4);
  --pink: #ec4899; --pink-hot: #f472b6; --pink-glow: rgba(236,72,153,0.45);
  --grad-fire: linear-gradient(135deg,#9f1239 0%,#db2777 32%,#c026d3 68%,#a855f7 100%);
  --grad-panel: linear-gradient(180deg,var(--bg-panel-2) 0%,var(--bg-panel) 100%);
  --grad-deck: radial-gradient(ellipse at 15% 0%,rgba(236,72,153,0.22),transparent 50%),radial-gradient(ellipse at 90% 100%,rgba(168,85,247,0.18),transparent 52%),radial-gradient(ellipse at 50% 50%,rgba(225,29,72,0.08),transparent 65%),var(--bg-void);
  --grad-scanline: repeating-linear-gradient(180deg,transparent 0,transparent 2px,rgba(236,72,153,0.02) 2px,rgba(236,72,153,0.02) 3px);
  --grad-grid: linear-gradient(var(--hairline) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,var(--hairline) 1px,transparent 1px) 0 0/32px 32px;
  --grad-neon: linear-gradient(90deg,#e11d48,#ec4899,#a855f7,#f472b6);
  --shadow-1: 0 2px 6px rgba(0,0,0,0.5); --shadow-2: 0 8px 28px rgba(20,0,24,0.65);
  --shadow-panel: 0 0 0 1px var(--border-1),0 8px 32px rgba(20,0,24,0.55);
  --shadow-live: 0 0 0 1px rgba(236,72,153,0.5),0 0 32px var(--orange-glow),0 0 48px rgba(168,85,247,0.18);
  --glow-inset: inset 0 1px 0 rgba(255,255,255,0.05);
  --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px;
  --font-mono: "JetBrains Mono","Fira Code","Cascadia Code",ui-monospace,monospace;
  --font-ui: "Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-9: 10px; --fs-10: 11px; --fs-11: 12px; --fs-12: 13px; --fs-13: 14px; --fs-14: 15px; --fs-16: 18px; --fs-20: 24px; --fs-24: 32px;
  --ease: cubic-bezier(0.4,0.2,0.2,1); --ease-snap: cubic-bezier(0.25,1,0.4,1);
  --dur-fast: 0.12s; --dur: 0.2s; --dur-slow: 0.36s;
  --sidebar: 248px; --topbar: 56px; --actionbar: 64px;
  --bg-0: var(--bg-void); --bg-1: var(--bg-deck); --bg-2: var(--bg-panel); --bg-3: var(--bg-panel-2);
  --line: var(--border-1); --line-2: var(--border-2); --muted: var(--text2); --muted-2: var(--text3);
  --gold: var(--orange); --gold-2: var(--orange-hot); --gold-soft: rgba(236,72,153,0.14); --gold-glow: var(--orange-glow);
  --purple: var(--violet); --purple-soft: rgba(168,85,247,0.14); --cyan: var(--pink-hot);
  --green: var(--ok); --green-soft: rgba(52,211,153,0.12); --radius: var(--r-md); --radius-sm: var(--r-sm);
  --radius-xs: var(--r-xs); --radius-pill: 4px; --shadow: var(--shadow-2); --shadow-sm: var(--shadow-1);
  --spring: var(--ease-snap); --font: var(--font-ui); --mono: var(--font-mono);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-ui);background:var(--grad-deck);color:var(--text);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--grad-grid);opacity:0.9;pointer-events:none}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:var(--grad-scanline);pointer-events:none;opacity:0.9}
a{color:var(--orange-hot);text-decoration:none;transition:color var(--dur-fast) var(--ease)}
a:hover{color:var(--amber)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
code,.mono{font-family:var(--font-mono);font-size:0.9em}

.bracketed,.card,.login-card,.preview-shell,.tool-card,.result-box,.gen-modal{position:relative}
.bracketed::before,.bracketed::after,.card::before,.card::after,.login-card::before,.login-card::after,.preview-shell::before,.preview-shell::after,.tool-card::before,.tool-card::after,.gen-modal::before,.gen-modal::after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--orange);pointer-events:none;z-index:2}
.bracketed::before,.card::before,.login-card::before,.preview-shell::before,.tool-card::before,.gen-modal::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.bracketed::after,.card::after,.login-card::after,.preview-shell::after,.tool-card::after,.gen-modal::after{bottom:-1px;right:-1px;border-left:none;border-top:none}

/* ========== LOGIN / AUTH HUD ========== */
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;background:var(--grad-deck);overflow:hidden}
.login-orbs{display:none}
.auth-rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:0}
.auth-rings .ring{position:absolute;border-radius:50%;border:1px dashed rgba(236,72,153,0.12);animation:ringPulse 7s ease-in-out infinite}
.auth-rings .r1{width:min(52vw,720px);height:min(52vw,720px)}
.auth-rings .r2{width:min(38vw,520px);height:min(38vw,520px);border-style:dotted;animation-delay:-3s;opacity:0.7}
.auth-rings .r3{width:min(24vw,320px);height:min(24vw,320px);border-color:rgba(219,39,119,0.18);animation-delay:-4.2s}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:0.55}50%{transform:scale(1.03);opacity:0.9}}
.auth-scan{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 0%,rgba(236,72,153,0.04) 50%,transparent 100%);background-size:100% 220%;animation:scanMove 5s linear infinite;z-index:0;mix-blend-mode:screen}
@keyframes scanMove{0%{background-position:0 -100%}100%{background-position:0 200%}}
.auth-tele{position:absolute;z-index:2;font-family:var(--font-mono);font-size:var(--fs-9);letter-spacing:0.12em;text-transform:uppercase;color:var(--text2);background:rgba(10,13,19,0.72);border:1px solid var(--border-1);padding:10px 12px;backdrop-filter:blur(8px);min-width:168px}
.auth-tele.left{top:20px;left:20px}
.auth-tele.right{top:20px;right:20px;text-align:right}
.auth-tele.bottom{left:20px;bottom:20px;min-width:280px;letter-spacing:0.06em;text-transform:none;font-size:var(--fs-10)}
.tele-row{display:flex;justify-content:space-between;gap:20px;padding:3px 0}
.tele-k{color:var(--text3)}
.tele-v{color:var(--text-hi);font-weight:500}
.tele-v.ok{color:var(--ok-hot)}
.tele-v.hot{color:var(--orange-hot)}
.boot-line{display:flex;gap:8px;padding:2px 0;color:var(--text2)}
.boot-line .boot-bullet{color:var(--orange)}
.boot-line.live .boot-msg{color:var(--text-hi)}
.login-card{width:min(440px,100%);position:relative;z-index:3;background:linear-gradient(180deg,rgba(21,26,36,0.96),rgba(10,13,19,0.98));border:1px solid var(--border-2);border-radius:var(--r-md);padding:0;box-shadow:var(--shadow-live),var(--shadow-2);animation:deckIn var(--dur-slow) var(--ease-snap) both;overflow:hidden}
@keyframes deckIn{from{opacity:0;transform:translateY(14px) scale(0.98)}to{opacity:1;transform:none}}
.login-card-hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--hairline);background:rgba(0,0,0,0.25)}
.login-card-hdr .hdr-left{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:var(--fs-10);letter-spacing:0.14em;text-transform:uppercase;color:var(--text2)}
.login-card-hdr .hdr-left .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange-glow);animation:pulseDot 1.8s infinite}
.login-card-hdr .hdr-left b{color:var(--text-hi);font-weight:600}
.login-card-hdr .clr-tag{font-family:var(--font-mono);font-size:var(--fs-9);letter-spacing:0.12em;color:var(--orange-hot);border:1px solid var(--border-3);padding:4px 8px;border-radius:var(--r-xs)}
.login-card-body{padding:28px 28px 22px}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:26px;text-align:center}
.brand-mark{width:56px;height:56px;border-radius:50%;border:1px solid rgba(236,72,153,0.35);display:grid;place-items:center;position:relative;margin-bottom:8px;background:radial-gradient(circle at center,rgba(236,72,153,0.12),transparent 70%);box-shadow:0 0 0 8px rgba(236,72,153,0.04),0 0 28px rgba(236,72,153,0.12)}
.brand-mark::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px dashed rgba(236,72,153,0.2);animation:spin 12s linear infinite}
.brand-mark svg{width:22px;height:22px;color:var(--orange-hot)}
.login-brand h1{font-family:var(--font-mono);font-size:28px;font-weight:600;letter-spacing:0.28em;color:var(--text-hi);margin-left:0.28em}
.login-brand p{font-family:var(--font-mono);font-size:var(--fs-9);letter-spacing:0.18em;text-transform:uppercase;color:var(--text2)}
.field-num{font-family:var(--font-mono);font-size:var(--fs-9);letter-spacing:0.16em;text-transform:uppercase;color:var(--orange);margin:0 0 8px;display:flex;align-items:baseline;gap:8px}
.field-num span{color:var(--text2);letter-spacing:0.14em}
.login-card .field{position:relative;margin-bottom:14px}
.login-card .field .cli-prefix{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-family:var(--font-mono);color:var(--orange);font-size:var(--fs-12);pointer-events:none;z-index:1}
.login-card .field input,.login-card .field .control{width:100%;padding:12px 14px 12px 30px;border-radius:var(--r-sm);border:1px solid var(--border-2);background:var(--bg-inset);color:var(--text-hi);font-family:var(--font-mono);font-size:var(--fs-12);transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast)}
.login-card .field input:focus,.login-card .field .control:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 1px var(--orange),0 0 18px var(--orange-glow);background:#140818}
.btn-login,.btn-fire{width:100%;margin-top:18px;padding:13px 16px;border-radius:var(--r-sm);font-family:var(--font-mono);font-weight:700;font-size:var(--fs-11);letter-spacing:0.2em;text-transform:uppercase;color:#fff;background:var(--grad-fire);box-shadow:0 0 0 1px rgba(219,39,119,0.35),0 10px 28px var(--red-glow);transition:transform var(--dur-fast) var(--ease-snap),box-shadow var(--dur),filter var(--dur);position:relative;overflow:hidden}
.btn-login:hover,.btn-fire:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 0 0 1px rgba(219,39,119,0.5),0 14px 36px var(--red-glow)}
.btn-login:active,.btn-fire:active{transform:translateY(0) scale(0.99)}
.login-card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--hairline);background:rgba(0,0,0,0.22);font-family:var(--font-mono);font-size:var(--fs-9);letter-spacing:0.1em;text-transform:uppercase;color:var(--text3)}
.login-card-foot .sec-dot{display:inline-block;width:6px;height:6px;background:var(--orange);margin:0 6px;vertical-align:middle}
.login-card-foot a{color:var(--text2);letter-spacing:0.08em}
.login-card-foot a:hover{color:var(--orange-hot)}
.login-foot{display:none}

/* ========== APP SHELL ========== */
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh;transition:grid-template-columns var(--dur-slow) var(--ease)}
.app.sidebar-collapsed{--sidebar:72px}
.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#160a1c 0%,#0d0612 100%);border-right:1px solid var(--border-1);display:flex;flex-direction:column;z-index:40}
.sidebar-head{display:flex;align-items:center;gap:12px;padding:16px 14px;border-bottom:1px solid var(--hairline)}
.sidebar-logo{width:36px;height:36px;border-radius:var(--r-sm);flex-shrink:0;background:var(--grad-fire);display:grid;place-items:center;box-shadow:0 0 18px var(--red-glow)}
.sidebar-logo svg{width:18px;height:18px;color:#fff}
.sidebar-titles{min-width:0;overflow:hidden}
.sidebar-titles strong{display:block;font-family:var(--font-mono);font-size:var(--fs-11);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-hi);white-space:nowrap}
.sidebar-titles span{display:block;font-family:var(--font-mono);font-size:var(--fs-9);color:var(--text3);letter-spacing:0.1em;white-space:nowrap}
.app.sidebar-collapsed .sidebar-titles,.app.sidebar-collapsed .nav-label,.app.sidebar-collapsed .nav-meta,.app.sidebar-collapsed .user-meta{opacity:0;width:0;overflow:hidden;pointer-events:none}
.sidebar-nav{flex:1;padding:12px 8px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.nav-section{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-dim);padding:14px 10px 6px;white-space:nowrap}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);color:var(--text2);font-family:var(--font-mono);font-weight:500;font-size:var(--fs-11);letter-spacing:0.06em;text-transform:uppercase;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);position:relative;border:1px solid transparent}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:0.8}
.nav-item:hover{background:var(--bg-hover);color:var(--text-hi);border-color:var(--border-1)}
.nav-item.active{background:linear-gradient(90deg,rgba(236,72,153,0.14),rgba(219,39,119,0.06));border-color:var(--border-2);color:var(--text-hi)}
.nav-item.active::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:2px;background:var(--grad-fire);box-shadow:0 0 8px var(--orange-glow)}
.nav-badge{margin-left:auto;font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:0.08em;background:rgba(236,72,153,0.1);color:var(--orange-hot);border:1px solid var(--border-2);padding:2px 6px;border-radius:var(--r-xs)}
.app.sidebar-collapsed .nav-badge{display:none}
.app.sidebar-collapsed .nav-item{justify-content:center;padding:12px}
.sidebar-foot{border-top:1px solid var(--hairline);padding:10px;display:flex;flex-direction:column;gap:8px}
.user-chip{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r-sm);background:var(--bg-inset);border:1px solid var(--border-1)}
.user-av{width:30px;height:30px;border-radius:var(--r-xs);flex-shrink:0;background:var(--grad-fire);display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:var(--fs-10);color:#fff}
.user-meta strong{display:block;font-family:var(--font-mono);font-size:var(--fs-10);color:var(--text-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-meta span{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3)}

/* ========== MAIN / TOPBAR ========== */
.main{min-width:0;display:flex;flex-direction:column;min-height:100vh}
.topbar{position:sticky;top:0;z-index:30;height:var(--topbar);display:flex;align-items:center;gap:12px;padding:0 18px;background:rgba(5,7,11,0.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-1)}
.icon-btn{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;border:1px solid var(--border-1);background:var(--bg-panel);color:var(--text2);transition:var(--dur-fast) var(--ease)}
.icon-btn:hover{color:var(--text-hi);border-color:var(--border-3);background:var(--bg-hover)}
.icon-btn svg{width:16px;height:16px}
.topbar-title{min-width:0;flex:1}
.topbar-title h2{font-family:var(--font-mono);font-size:var(--fs-12);font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-hi);display:flex;align-items:center;gap:8px}
.topbar-title h2::before{content:"";width:6px;height:6px;background:var(--orange);box-shadow:0 0 8px var(--orange-glow)}
.topbar-title p{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;color:var(--text3);margin-top:1px}
.topbar-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:var(--r-xs);font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;background:var(--bg-panel);border:1px solid var(--border-1);color:var(--text2);white-space:nowrap}
.chip b{color:var(--orange-hot);font-weight:600}
.chip.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(34,197,94,0.55);animation:pulseDot 1.8s infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(34,197,94,0.55)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.content{padding:18px;padding-bottom:calc(var(--actionbar) + 24px);animation:fadeUp var(--dur-slow) var(--ease-snap) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ========== CARDS / GRID ========== */
.grid-studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,420px);gap:14px;align-items:start}
@media(max-width:1180px){.grid-studio{grid-template-columns:1fr}}
.card{background:var(--grad-panel);border:1px solid var(--border-1);border-radius:var(--r-md);padding:0;box-shadow:var(--shadow-panel),var(--glow-inset);overflow:hidden;animation:fadeUp 0.4s var(--ease-snap) both}
.card+.card{margin-top:12px}
.card.full{grid-column:1/-1}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--hairline);background:rgba(0,0,0,0.18)}
.card-head h3{font-family:var(--font-mono);font-size:var(--fs-11);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-hi);display:flex;align-items:center;gap:8px}
.card-head h3 .tk{color:var(--orange)}
.card-head p{font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;color:var(--text3);margin-top:3px}
.card>form,.card>.card-body,.card>.section,.card>.niche-grid,.card>.tpl-grid,.card>.field-grid,.card>.stats,.card>.preview-shell,.card>.btn-row,.card>.help-text,.card>.empty-state,.card>.table-wrap,.card>.file-list,.card>.result-meta{margin-left:16px;margin-right:16px}
.card>form{padding:14px 0 18px}
.card>.stats{margin-top:14px}
.card>.preview-shell{margin:0 16px 14px}
.card>.btn-row{margin:0 16px 14px}
.card>.help-text{margin:0 16px 14px}
.card>.empty-state{margin:0}
.card>.table-wrap{margin:0 16px 16px;width:calc(100% - 32px)}
.panel-sticky{position:sticky;top:calc(var(--topbar) + 14px)}
.mode-switcher{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px 16px}
.mode-opt{display:block;padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--border-1);background:var(--bg-inset);color:var(--text2);text-decoration:none;transition:var(--dur) var(--ease);position:relative;overflow:hidden}
.mode-opt:hover{border-color:var(--border-3);color:var(--text-hi);background:var(--bg-hover);transform:translateY(-1px)}
.mode-opt.active{border-color:var(--border-3);background:linear-gradient(135deg,rgba(236,72,153,0.12),rgba(219,39,119,0.08));color:var(--text-hi);box-shadow:var(--shadow-live)}
.mode-opt strong{display:block;font-family:var(--font-mono);font-size:var(--fs-11);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:4px}
.mode-opt small{display:block;font-size:var(--fs-10);color:var(--text3);line-height:1.45;letter-spacing:0.02em}
.mode-opt .mo-icon{width:32px;height:32px;border-radius:var(--r-xs);margin-bottom:10px;display:grid;place-items:center;background:var(--bg-panel);border:1px solid var(--border-1);color:var(--text2)}
.mode-opt .mo-icon svg{width:16px;height:16px}
.mode-opt.active .mo-icon{background:var(--grad-fire);color:#fff;border-color:transparent;box-shadow:0 4px 14px var(--red-glow)}
.section{margin-top:18px;padding-top:16px;border-top:1px solid var(--hairline)}
.section:first-of-type,form>.section:first-child{margin-top:0;padding-top:0;border-top:0}
.section-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.section-label h4{font-family:var(--font-mono);font-size:var(--fs-9);font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--orange);display:flex;align-items:center;gap:8px}
.section-label h4 .num{width:20px;height:20px;border-radius:var(--r-xs);display:inline-grid;place-items:center;background:rgba(236,72,153,0.1);border:1px solid var(--border-2);color:var(--orange-hot);font-size:9px;font-family:var(--font-mono)}
.field-grid{display:grid;gap:12px}
.field-grid.cols-2{grid-template-columns:1fr 1fr}
.field-grid.cols-3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:720px){.field-grid.cols-2,.field-grid.cols-3{grid-template-columns:1fr}}
label.lbl,.field-label{display:block;font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--text2);margin-bottom:6px}
label.lbl .req{color:var(--red-hot);margin-left:2px}
label.lbl .hint-right{float:right;text-transform:none;letter-spacing:0.06em;font-family:var(--font-mono);color:var(--orange);font-weight:600}
.control,select.control,textarea.control,input.control{width:100%;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--border-1);background:var(--bg-inset);color:var(--text-hi);font-family:var(--font-mono);font-size:var(--fs-11);transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast)}
textarea.control{min-height:88px;resize:vertical;line-height:1.55;font-family:var(--font-mono)}
textarea.list-box{min-height:150px;font-family:var(--font-mono);font-size:var(--fs-10);line-height:1.55}
.control:hover{border-color:var(--border-2)}
.control:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 1px var(--orange),0 0 16px rgba(236,72,153,0.18);background:#140818}
.control::placeholder{color:var(--text-dim)}
select.control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23958d7b' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.help-text{font-family:var(--font-mono);font-size:10px;color:var(--text3);margin-top:7px;line-height:1.55;letter-spacing:0.02em}
.help-text code{color:var(--orange-hot);background:rgba(236,72,153,0.08);padding:1px 5px;border-radius:var(--r-xs);border:1px solid var(--border-1)}
.seg{display:inline-flex;padding:3px;background:var(--bg-inset);border:1px solid var(--border-1);border-radius:var(--r-sm);gap:2px;flex-wrap:wrap}
.seg label{margin:0;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-xs);font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3);transition:var(--dur-fast) var(--ease)}
.seg label:hover span{color:var(--text)}
.seg input:checked+span{background:var(--grad-fire);color:#fff;box-shadow:0 4px 12px var(--red-glow)}
.mode-block{display:none;margin-top:10px;animation:fadeUp 0.25s var(--ease)}
.mode-block.on{display:block}
.niche-grid,.tpl-grid{display:grid;gap:8px}
.niche-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.tpl-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.tile{position:relative;cursor:pointer;border:1px solid var(--border-1);border-radius:var(--r-sm);background:var(--bg-inset);padding:11px 8px;text-align:center;transition:var(--dur) var(--ease);overflow:hidden}
.tile input{position:absolute;opacity:0;pointer-events:none}
.tile:hover{transform:translateY(-2px);border-color:var(--border-3);background:var(--bg-hover);box-shadow:var(--shadow-1)}
.tile.active,.tile:has(input:checked){border-color:var(--border-3);background:linear-gradient(160deg,rgba(236,72,153,0.14),rgba(219,39,119,0.08));box-shadow:var(--shadow-live);color:var(--text-hi)}
.tile .ti{width:30px;height:30px;margin:0 auto 7px;border-radius:var(--r-xs);display:grid;place-items:center;background:var(--bg-panel);border:1px solid var(--border-1)}.tile .ti svg{width:16px;height:16px;color:var(--text2)}.tile.active .ti svg,.tile:has(input:checked) .ti svg{color:#fff}
.tile.active .ti,.tile:has(input:checked) .ti{background:var(--grad-fire);color:#fff;border-color:transparent;box-shadow:0 4px 12px var(--red-glow)}
.tile strong{display:block;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;line-height:1.3}
.tile small{display:block;font-size:9px;color:var(--text3);margin-top:3px;font-family:var(--font-mono)}
.tpl-swatch{height:40px;border-radius:var(--r-xs);margin-bottom:8px;border:1px solid var(--hairline);position:relative;overflow:hidden}
.tpl-swatch::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,0.4))}
.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:720px){.media-grid{grid-template-columns:1fr}}
.thumb{margin-top:8px;height:68px;border-radius:var(--r-sm);background:var(--bg-inset) center/cover no-repeat;border:1px dashed var(--border-2);transition:var(--dur-fast)}
.thumb.has{border-style:solid;border-color:var(--border-3)}
.thumb.logo{height:52px;width:130px;background-size:contain}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:var(--r-sm);font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;border:1px solid transparent;transition:transform var(--dur-fast) var(--ease-snap),box-shadow var(--dur),background var(--dur),border-color var(--dur);text-decoration:none;white-space:nowrap;cursor:pointer;position:relative;overflow:hidden}
.btn svg{width:14px;height:14px;flex-shrink:0}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(0.99)}
.btn:disabled{opacity:0.5;pointer-events:none}
.btn-primary{color:#fff;background:var(--grad-fire);box-shadow:0 0 0 1px rgba(219,39,119,0.3),0 8px 22px var(--red-glow)}
.btn-primary:hover{box-shadow:0 0 0 1px rgba(219,39,119,0.45),0 12px 30px var(--red-glow);filter:brightness(1.06)}
.btn-secondary{color:var(--text);background:var(--bg-panel);border-color:var(--border-2)}
.btn-secondary:hover{background:var(--bg-hover);border-color:var(--border-3);color:var(--text-hi)}
.btn-success{color:#042f1a;background:linear-gradient(135deg,#4ade80,var(--ok));box-shadow:0 8px 20px var(--ok-glow)}
.btn-ghost{color:var(--orange-hot);background:transparent;border-color:var(--border-3)}
.btn-ghost:hover{background:rgba(236,72,153,0.08)}
.btn-danger{color:var(--red-hot);background:rgba(219,39,119,0.1);border-color:rgba(219,39,119,0.35);padding:6px 10px;font-size:10px;border-radius:var(--r-xs)}
.btn-danger:hover{background:rgba(219,39,119,0.18);transform:none}
.btn-sm{padding:8px 12px;font-size:10px}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}
.btn-row .btn{flex:1 1 auto;min-width:120px}
.btn .shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,0.28) 50%,transparent 65%);transform:translateX(-120%)}
.btn-primary:hover .shine{animation:shine 0.85s var(--ease)}
@keyframes shine{to{transform:translateX(120%)}}
.action-bar{position:fixed;left:var(--sidebar);right:0;bottom:0;z-index:35;height:var(--actionbar);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;background:rgba(5,7,11,0.9);backdrop-filter:blur(12px);border-top:1px solid var(--border-1);transition:left var(--dur-slow) var(--ease);box-shadow:0 -8px 32px rgba(0,0,0,0.4)}
.app.sidebar-collapsed .action-bar{left:72px}
.action-bar .ab-info strong{display:block;font-family:var(--font-mono);font-size:var(--fs-11);letter-spacing:0.12em;text-transform:uppercase;color:var(--text-hi)}
.action-bar .ab-info span{font-family:var(--font-mono);font-size:10px;color:var(--text3);letter-spacing:0.06em}
.action-bar .ab-actions{display:flex;gap:8px;flex-wrap:wrap}
.alert{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-radius:var(--r-sm);margin-bottom:14px;font-family:var(--font-mono);font-size:var(--fs-11);border:1px solid;border-top-width:2px;animation:fadeUp 0.3s var(--ease-snap);background:var(--bg-panel)}
.alert svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.alert.ok{border-color:var(--border-1);border-top-color:var(--ok);color:var(--ok-hot);box-shadow:0 0 16px rgba(34,197,94,0.12)}
.alert.err{border-color:var(--border-1);border-top-color:var(--red);color:var(--red-hot);box-shadow:0 0 16px var(--red-glow)}
.alert.info{border-color:var(--border-1);border-top-color:var(--info);color:var(--info)}
.toast-host{position:fixed;top:16px;right:16px;z-index:100;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:400px}
.toast{pointer-events:auto;min-width:260px;padding:12px 14px;border-radius:var(--r-sm);background:var(--bg-panel);border:1px solid var(--border-2);border-top:2px solid var(--orange);box-shadow:var(--shadow-panel),0 0 20px var(--orange-glow);backdrop-filter:blur(8px);display:flex;gap:10px;align-items:flex-start;animation:toastIn 0.35s var(--ease-snap);font-family:var(--font-mono);font-size:var(--fs-11);color:var(--text)}
.toast.ok{border-top-color:var(--ok);box-shadow:var(--shadow-panel),0 0 18px var(--ok-glow)}
.toast.err{border-top-color:var(--red);box-shadow:var(--shadow-panel),0 0 18px var(--red-glow)}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.toast.out{animation:toastOut 0.28s var(--ease) forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
@media(max-width:600px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--bg-panel);border:1px solid var(--border-1);border-radius:var(--r-sm);padding:10px;text-align:left;transition:var(--dur-fast) var(--ease);position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;top:0;left:0;width:2px;height:100%;background:var(--orange);opacity:0.6}
.stat:hover{border-color:var(--border-3)}
.stat b{display:block;color:var(--text-hi);font-size:var(--fs-14);font-weight:600;font-family:var(--font-mono);letter-spacing:0.04em;padding-left:4px}
.stat span{font-family:var(--font-mono);font-size:9px;color:var(--text2);text-transform:uppercase;letter-spacing:0.14em;font-weight:500;padding-left:4px}
.preview-shell{border:1px solid var(--border-1);border-radius:var(--r-md);background:var(--bg-void);overflow:hidden;box-shadow:var(--shadow-panel)}
.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-bottom:1px solid var(--hairline);background:var(--bg-panel)}
.preview-dots{display:flex;gap:5px}
.preview-dots i{width:8px;height:8px;border-radius:50%;display:block;background:var(--text-dim)}
.preview-dots i:nth-child(1){background:var(--red)}
.preview-dots i:nth-child(2){background:var(--amber)}
.preview-dots i:nth-child(3){background:var(--ok)}
.device-seg .seg span{padding:5px 9px}
.preview-url{flex:1;min-width:0;text-align:center;font-family:var(--font-mono);font-size:10px;color:var(--text2);background:var(--bg-inset);border:1px solid var(--border-1);border-radius:var(--r-xs);padding:5px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0.04em}
.preview-stage{position:relative;background:#0d0512;display:flex;justify-content:center;min-height:500px;transition:var(--dur-slow) var(--ease)}
.preview-stage iframe{width:100%;height:540px;border:0;background:#05070b;transition:width var(--dur-slow) var(--ease),height var(--dur-slow) var(--ease)}
.preview-stage[data-device="mobile"] iframe{width:390px;max-width:100%;height:660px;border-left:1px solid var(--border-1);border-right:1px solid var(--border-1)}
.preview-loading{position:absolute;inset:0;display:none;place-items:center;background:rgba(5,7,11,0.78);backdrop-filter:blur(3px);z-index:2}
.preview-loading.on{display:grid}
.spinner{width:32px;height:32px;border-radius:50%;border:2px solid rgba(236,72,153,0.15);border-top-color:var(--orange);animation:spin 0.7s linear infinite}
.result-box{margin-top:14px;padding:16px;border-radius:var(--r-md);background:var(--grad-panel);border:1px solid var(--border-2);box-shadow:var(--shadow-panel);animation:fadeUp 0.35s var(--ease-snap)}
.result-box h4{color:var(--ok-hot);font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.result-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 12px}
@media(max-width:600px){.result-meta{grid-template-columns:1fr}}
.result-meta div{background:var(--bg-inset);border:1px solid var(--border-1);border-radius:var(--r-sm);padding:10px;position:relative;overflow:hidden}
.result-meta div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--orange);opacity:0.5}
.result-meta b{display:block;font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.12em;color:var(--text2);margin-bottom:4px;padding-left:6px}
.result-meta span{font-family:var(--font-mono);font-size:11px;word-break:break-all;color:var(--text-hi);padding-left:6px}
.file-list{max-height:280px;overflow:auto;margin-top:8px;border:1px solid var(--border-1);border-radius:var(--r-sm);background:var(--bg-inset)}
.file-list a{display:flex;gap:8px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--hairline);color:var(--text2);font-family:var(--font-mono);font-size:11px;transition:var(--dur-fast)}
.file-list a:last-child{border-bottom:0}
.file-list a:hover{background:var(--bg-hover);color:var(--orange-hot)}
.table-wrap{overflow:auto;border:1px solid var(--border-1);border-radius:var(--r-md)}
table.data{width:100%;border-collapse:collapse;font-size:var(--fs-11);font-family:var(--font-mono)}
table.data th,table.data td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--hairline)}
table.data th{font-size:9px;text-transform:uppercase;letter-spacing:0.14em;color:var(--text2);background:var(--bg-panel);font-weight:600;position:sticky;top:0}
table.data tbody tr:hover{background:var(--bg-panel-2)}
table.data td a{font-weight:600}
.pill{display:inline-flex;align-items:center;padding:2px 7px;border-radius:var(--r-xs);font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;background:var(--bg-panel);border:1px solid var(--border-1);color:var(--text2);font-family:var(--font-mono)}
.pill.gold{color:#fff;background:var(--grad-fire);border:0}
.bulk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bulk-grid-5{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
@media(max-width:900px){.bulk-grid{grid-template-columns:1fr}}
.empty-state{text-align:center;padding:48px 20px;color:var(--text3);font-family:var(--font-mono)}
.empty-state .ei{width:56px;height:56px;margin:0 auto 14px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--bg-inset);border:1px solid var(--border-1)}
.empty-state .ei svg{width:24px;height:24px;opacity:0.7;color:var(--orange)}
.empty-state h4{color:var(--text-hi);margin-bottom:6px;font-size:var(--fs-12);letter-spacing:0.12em;text-transform:uppercase}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.tool-card{padding:18px;border-radius:var(--r-md);border:1px solid var(--border-1);background:var(--grad-panel);box-shadow:var(--shadow-panel);transition:var(--dur) var(--ease)}
.tool-card:hover{transform:translateY(-2px);border-color:var(--border-3);box-shadow:var(--shadow-live)}
.tool-card .tc-icon{width:40px;height:40px;border-radius:var(--r-sm);margin-bottom:12px;display:grid;place-items:center;background:rgba(236,72,153,0.1);border:1px solid var(--border-2)}
.tool-card .tc-icon svg{width:18px;height:18px;color:var(--orange-hot)}
.tool-card h3{font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:0.12em;text-transform:uppercase;color:var(--text-hi);margin-bottom:6px}
.tool-card p{font-size:var(--fs-11);color:var(--text2);margin-bottom:14px;line-height:1.55}
#genOverlay{position:fixed;inset:0;z-index:90;display:none;place-items:center;background:rgba(5,7,11,0.78);backdrop-filter:blur(6px)}
#genOverlay.on{display:grid;animation:fadeUp 0.2s}
.gen-modal{width:min(360px,92vw);text-align:center;background:var(--bg-panel-2);border:1px solid var(--border-2);border-radius:var(--r-md);padding:28px 24px;box-shadow:var(--shadow-2),var(--shadow-live)}
.gen-modal .ring{width:48px;height:48px;margin:0 auto 14px;border-radius:50%;border:2px solid rgba(236,72,153,0.15);border-top-color:var(--orange);animation:spin 0.75s linear infinite}
.gen-modal h4{font-family:var(--font-mono);font-size:var(--fs-13);letter-spacing:0.14em;text-transform:uppercase;color:var(--text-hi);margin-bottom:6px}
.gen-modal p{font-family:var(--font-mono);font-size:var(--fs-10);color:var(--text2);letter-spacing:0.06em}
.progress-track{margin-top:16px;height:3px;border-radius:99px;background:var(--bg-inset);overflow:hidden;border:1px solid var(--border-1)}
.progress-track i{display:block;height:100%;width:30%;background:var(--grad-fire);border-radius:99px;animation:prog 1.4s ease-in-out infinite}
@keyframes prog{0%{transform:translateX(-100%);width:30%}50%{width:55%}100%{transform:translateX(350%);width:30%}}
.sidebar-backdrop{display:none;position:fixed;inset:0;z-index:39;background:rgba(5,7,11,0.72);backdrop-filter:blur(2px)}
@media(max-width:980px){.app{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;width:min(270px,86vw);transform:translateX(-105%);transition:transform var(--dur-slow) var(--ease)}.app.sidebar-open .sidebar{transform:translateX(0)}.app.sidebar-open .sidebar-backdrop{display:block}.action-bar{left:0!important}.auth-tele.left,.auth-tele.right{display:none}.auth-tele.bottom{left:12px;right:12px;min-width:0}}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(236,72,153,0.18);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(236,72,153,0.35);background-clip:padding-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.flex{display:flex}.gap-8{gap:8px}.items-center{align-items:center}.justify-between{justify-content:space-between}.w-full{width:100%}.muted{color:var(--text2)}.text-sm{font-size:var(--fs-11)}.hidden{display:none!important}
.color-field{display:flex;gap:8px;align-items:center}
.color-field input[type="color"]{width:42px;height:40px;padding:3px;border-radius:var(--r-sm);border:1px solid var(--border-1);background:var(--bg-inset);cursor:pointer}
.color-field input[type="text"]{flex:1}
.stagger>*{animation:fadeUp 0.45s var(--ease-snap) both}
.stagger>*:nth-child(1){animation-delay:0.02s}
.stagger>*:nth-child(2){animation-delay:0.05s}
.stagger>*:nth-child(3){animation-delay:0.08s}
.stagger>*:nth-child(4){animation-delay:0.11s}
.stagger>*:nth-child(5){animation-delay:0.14s}
.stagger>*:nth-child(6){animation-delay:0.17s}
/* reduced-motion handled in v4.4 block */


/* ============================================================
   v4.4 LIVE OPS MOTION — multi-color futuristic FX layer
   ============================================================ */
:root{
  --cyan:#ec4899; --cyan-hot:#f9a8d4; --cyan-glow:rgba(236,72,153,0.35);
  --magenta:#e879f9; --magenta-hot:#f0abfc; --magenta-glow:rgba(244,114,182,0.3);
  --violet:#8b5cf6; --violet-glow:rgba(168,85,247,0.28);
  --amber:#fbbf24; --amber-glow:rgba(251,191,36,0.3);
  --grad-aurora:linear-gradient(120deg,rgba(236,72,153,.55),rgba(219,39,119,.45),rgba(244,114,182,.4),rgba(236,72,153,.4));
  --grad-neon:linear-gradient(90deg,var(--orange),var(--magenta),var(--cyan));
  --mx:50%; --my:50%;
}

/* cursor follow spotlight on any fx-ready page */
.fx-ready{--mx:50%;--my:50%}
body.fx-ready::before{
  background:
    radial-gradient(600px 400px at var(--mx) var(--my), rgba(236,72,153,0.08), transparent 55%),
    radial-gradient(420px 320px at calc(var(--mx) + 12%) calc(var(--my) - 8%), rgba(236,72,153,0.05), transparent 50%),
    var(--grad-grid);
  animation:gridDrift 28s linear infinite;
  opacity:1;
}
@keyframes gridDrift{
  0%{background-position:0 0,0 0,0 0}
  100%{background-position:0 0,40px 20px,64px 64px}
}

/* FX stage */
.fx-stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx-stage.app-fx{z-index:0;opacity:.85}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fx-canvas.dim{opacity:.55}
.fx-aurora{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;mix-blend-mode:screen;will-change:transform}
.fx-aurora.a1{width:48vw;height:48vw;left:-10vw;top:-12vh;background:radial-gradient(circle,rgba(219,39,119,.55),transparent 68%);animation:auroraFloat 10s ease-in-out infinite}
.fx-aurora.a2{width:40vw;height:40vw;right:-8vw;bottom:-10vh;background:radial-gradient(circle,rgba(236,72,153,.4),transparent 68%);animation:auroraFloat 12s ease-in-out infinite reverse;animation-delay:-4s}
.fx-aurora.a3{width:34vw;height:34vw;left:40vw;top:55vh;background:radial-gradient(circle,rgba(244,114,182,.35),transparent 68%);animation:auroraFloat 11s ease-in-out infinite;animation-delay:-5s}
.fx-aurora.soft{opacity:.22;filter:blur(80px)}
@keyframes auroraFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(4vw,-3vh,0) scale(1.08)}
  66%{transform:translate3d(-3vw,4vh,0) scale(.94)}
}
.fx-grid{position:absolute;inset:-20%;background:
  linear-gradient(rgba(236,72,153,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(236,72,153,.04) 1px,transparent 1px);
  background-size:48px 48px;transform:perspective(600px) rotateX(58deg) translateY(-10%);
  transform-origin:center top;animation:gridRide 20s linear infinite;mask-image:linear-gradient(180deg,#000 0%,transparent 78%);opacity:.55}
@keyframes gridRide{to{background-position:0 48px,48px 0}}
.fx-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(5,7,11,.78) 100%)}
.fx-cursor{position:fixed;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;pointer-events:none;z-index:5;
  background:radial-gradient(circle,rgba(236,72,153,.16) 0%,rgba(244,114,182,.08) 35%,transparent 68%);
  mix-blend-mode:screen;opacity:0;transition:opacity .3s;will-change:transform;left:0;top:0}
.fx-ready:hover .fx-cursor{opacity:1}
.login-page,.app-page{position:relative;z-index:1}
.login-page > .login-card{position:relative;z-index:5}
.login-page > .auth-tele{z-index:6}
.login-page > .auth-rings,
.login-page > .auth-scan,
.login-page > .auth-scan-h{position:absolute;inset:0;z-index:1;pointer-events:none}

/* rings + radar */
.auth-rings{z-index:1}
.auth-rings .ring{border-color:rgba(236,72,153,.14);box-shadow:0 0 40px rgba(236,72,153,.04),inset 0 0 40px rgba(236,72,153,.03)}
.auth-rings .r1{animation:ringSpin 40s linear infinite, ringPulse 7s ease-in-out infinite}
.auth-rings .r2{animation:ringSpin 18s linear infinite reverse, ringPulse 7s ease-in-out infinite;animation-delay:-3s, -3s;border-color:rgba(236,72,153,.16)}
.auth-rings .r3{animation:ringSpin 15s linear infinite, ringPulse 7s ease-in-out infinite;animation-delay:-4.2s, -4.2s;border-color:rgba(244,114,182,.18)}
.auth-rings .r4{width:min(16vw,200px);height:min(16vw,200px);border:1px solid rgba(236,72,153,.22);animation:ringSpin 8.5s linear infinite reverse, ringPulse 4.2s ease-in-out infinite}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.ring-spoke{position:absolute;width:min(52vw,720px);height:min(52vw,720px);border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 8%,rgba(236,72,153,.15) 10%,transparent 12% 100%);
  animation:ringSpin 12s linear infinite;opacity:.55;mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px))}
.ring-spoke.s2{width:min(38vw,520px);height:min(38vw,520px);animation-duration:8.5s;animation-direction:reverse;
  background:conic-gradient(from 120deg,transparent 0 6%,rgba(236,72,153,.18) 8%,transparent 10% 100%)}
.reticle{position:absolute;width:88px;height:88px;opacity:.55}
.reticle span{position:absolute;width:18px;height:18px;border-color:var(--orange);border-style:solid}
.reticle span:nth-child(1){top:0;left:0;border-width:2px 0 0 2px}
.reticle span:nth-child(2){top:0;right:0;border-width:2px 2px 0 0}
.reticle span:nth-child(3){bottom:0;left:0;border-width:0 0 2px 2px}
.reticle span:nth-child(4){bottom:0;right:0;border-width:0 2px 2px 0}
.reticle::before,.reticle::after{content:"";position:absolute;background:rgba(236,72,153,.35)}
.reticle::before{left:50%;top:20%;bottom:20%;width:1px;transform:translateX(-50%)}
.reticle::after{top:50%;left:20%;right:20%;height:1px;transform:translateY(-50%)}
.auth-scan-h{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(236,72,153,.03) 50%,transparent);
  background-size:200% 100%;animation:scanH 6.5s linear infinite;mix-blend-mode:screen}
@keyframes scanH{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* floating telemetry */
.auth-tele{animation:teleIn .5s var(--ease-snap) both;transition:border-color .25s,box-shadow .25s,transform .4s}
.auth-tele:hover{border-color:var(--border-3);box-shadow:0 0 24px rgba(236,72,153,.12)}
.auth-tele.left{animation-delay:.15s}
.auth-tele.right{animation-delay:.25s}
.auth-tele.bottom{animation-delay:.4s}
.float-y{animation:teleIn .5s var(--ease-snap) both, floatY 4.2s ease-in-out infinite}
.float-y.dly{animation-delay:.25s, 1.2s}
@keyframes teleIn{from{opacity:0;translate:0 -10px}to{opacity:1;translate:0 0}}
@keyframes floatY{0%,100%{translate:0 0}50%{translate:0 -6px}}
.tele-v.ok{text-shadow:0 0 12px var(--ok-glow)}
.tele-v.hot{text-shadow:0 0 12px var(--orange-glow)}
.boot-line{opacity:0;transform:translateX(-6px);animation:bootIn .35s var(--ease-snap) forwards}
.boot-line .boot-msg{position:relative}
.boot-line.live .boot-msg::after{content:"_";margin-left:2px;color:var(--cyan-hot);animation:blink 1s step-end infinite}
@keyframes bootIn{to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:0}}

/* login card — multi energy beam border */
.login-card{overflow:visible;transform-style:preserve-3d;transition:transform .15s ease-out,box-shadow .3s;
  background:linear-gradient(180deg,rgba(16,20,30,.92),rgba(8,10,16,.96));
  box-shadow:var(--shadow-live),var(--shadow-2),0 0 80px rgba(219,39,119,.08)}
.login-card:hover{box-shadow:0 0 0 1px rgba(236,72,153,.5),0 0 40px rgba(236,72,153,.18),0 20px 60px rgba(0,0,0,.55)}
.card-beam{position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:0;pointer-events:none;
  background:conic-gradient(from var(--beam-a,0deg),var(--orange),var(--red),var(--magenta),var(--cyan),var(--orange));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.85;animation:beamSpin 4s linear infinite}
@keyframes beamSpin{to{--beam-a:360deg}}
@property --beam-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.login-card-hdr,.login-card-body,.login-card-foot{position:relative;z-index:1}
.login-card-hdr .hdr-left .dot{background:var(--orange);box-shadow:0 0 0 0 rgba(236,72,153,.6);animation:pulseDotOrange 1.6s infinite}
@keyframes pulseDotOrange{0%{box-shadow:0 0 0 0 rgba(236,72,153,.55)}70%{box-shadow:0 0 0 8px rgba(236,72,153,0)}100%{box-shadow:0 0 0 0 rgba(236,72,153,0)}}
.pulse-tag{animation:tagPulse 2.4s ease-in-out infinite;border-color:rgba(236,72,153,.45)!important}
@keyframes tagPulse{0%,100%{box-shadow:0 0 0 0 rgba(236,72,153,0);color:var(--orange-hot)}50%{box-shadow:0 0 12px rgba(236,72,153,.25);color:#fff}}

/* brand with dual orbit */
.brand-mark{position:relative;overflow:visible}
.brand-mark::before{border-color:rgba(236,72,153,.28);animation:spin 10s linear infinite}
.brand-orbit{position:absolute;inset:-16px;border-radius:50%;border:1px dashed rgba(236,72,153,.25);animation:spin 7s linear infinite reverse}
.brand-orbit.o2{inset:-24px;border-color:rgba(244,114,182,.22);animation-duration:11s;animation-direction:normal}
.brand-mark svg{filter:drop-shadow(0 0 8px rgba(236,72,153,.55));animation:iconBob 2.8s ease-in-out infinite}
@keyframes iconBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* AUTH glitch title */
.login-brand h1.glitch{position:relative;font-size:34px;letter-spacing:.32em;background:linear-gradient(90deg,#fff 20%,var(--orange-hot) 50%,var(--cyan-hot) 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:hueShift 8s linear infinite}
.login-brand h1.glitch::before,.login-brand h1.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;
  background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.7;pointer-events:none}
.login-brand h1.glitch::before{transform:translate(1px,0);text-shadow:-1px 0 var(--cyan);animation:glitch1 3.2s infinite linear alternate-reverse;clip-path:inset(0 0 55% 0)}
.login-brand h1.glitch::after{transform:translate(-1px,0);text-shadow:1px 0 var(--magenta);animation:glitch2 2.4s infinite linear alternate-reverse;clip-path:inset(45% 0 0 0)}
@keyframes glitch1{0%{clip-path:inset(20% 0 60% 0);transform:translate(-2px,0)}20%{clip-path:inset(60% 0 10% 0);transform:translate(2px,0)}40%{clip-path:inset(10% 0 50% 0)}60%{clip-path:inset(40% 0 30% 0);transform:translate(1px,0)}80%{clip-path:inset(80% 0 5% 0)}100%{clip-path:inset(30% 0 40% 0);transform:translate(-1px,0)}}
@keyframes glitch2{0%{clip-path:inset(60% 0 10% 0);transform:translate(2px,0)}25%{clip-path:inset(15% 0 55% 0);transform:translate(-2px,0)}50%{clip-path:inset(50% 0 20% 0)}75%{clip-path:inset(5% 0 70% 0);transform:translate(1px,0)}100%{clip-path:inset(40% 0 30% 0)}}
@keyframes hueShift{to{filter:hue-rotate(25deg)}}
.login-brand p{animation:fadeUp .6s .2s both}

/* fields */
.fx-field{position:relative}
.fx-field .field-glow{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:linear-gradient(90deg,rgba(236,72,153,.0),rgba(236,72,153,.35),rgba(236,72,153,.35),rgba(236,72,153,.0));
  background-size:200% 100%;animation:glowSlide 2.2s linear infinite;z-index:0;border-radius:var(--r-sm);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
.fx-field:focus-within .field-glow{opacity:1}
.fx-field input{position:relative;z-index:1}
.login-card .field input:focus{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange),0 0 22px rgba(236,72,153,.25),0 0 40px rgba(236,72,153,.08);
  animation:inputBreathe 2.2s ease-in-out infinite}
@keyframes inputBreathe{0%,100%{box-shadow:0 0 0 1px var(--orange),0 0 18px rgba(236,72,153,.22)}50%{box-shadow:0 0 0 1px var(--cyan),0 0 26px rgba(236,72,153,.2)}}
@keyframes glowSlide{to{background-position:200% 0}}
.field-num .fn{display:inline-grid;place-items:center;min-width:22px;height:16px;padding:0 4px;border-radius:2px;
  background:rgba(236,72,153,.12);border:1px solid rgba(236,72,153,.3);color:var(--orange-hot);font-size:9px;margin-right:4px}

/* ENGAGE button — alive */
.btn-login,.btn-fire{
  background:linear-gradient(105deg,#e11d48 0%,#db2777 40%,#ec4899 70%,#818cf8 100%);
  background-size:200% 200%;
  animation:fireShift 4s ease infinite, firePulse 2.2s ease-in-out infinite;
  box-shadow:0 0 0 1px rgba(219,39,119,.4),0 10px 28px rgba(219,39,119,.4),0 0 40px rgba(236,72,153,.18);
  letter-spacing:.24em;
}
.btn-login .btn-core,.btn-fire .btn-core{position:relative;z-index:2}
.btn-login .btn-sheen,.btn-fire .btn-sheen,.btn .btn-sheen{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 62%);
  transform:translateX(-130%);z-index:1}
.btn-login:hover .btn-sheen,.btn-fire:hover .btn-sheen,.btn-primary:hover .btn-sheen{animation:shine 0.9s var(--ease)}
@keyframes fireShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes firePulse{0%,100%{box-shadow:0 0 0 1px rgba(219,39,119,.4),0 10px 28px rgba(219,39,119,.4),0 0 30px rgba(236,72,153,.15)}
  50%{box-shadow:0 0 0 1px rgba(236,72,153,.55),0 14px 36px rgba(219,39,119,.55),0 0 50px rgba(236,72,153,.28)}}
.btn-login:hover,.btn-fire:hover{filter:brightness(1.1) saturate(1.1)}
.magnetic{will-change:transform}
.live-sq{display:inline-block;width:7px;height:7px;background:var(--orange);margin:0 2px;vertical-align:middle;
  box-shadow:0 0 8px var(--orange-glow);animation:sqBlink 1.1s step-end infinite}
@keyframes sqBlink{50%{opacity:.25;background:var(--cyan)}}

/* ripple */
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.35);animation:ripple .6s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(12);opacity:0}}

/* APP shell motion extras */
.app{position:relative;z-index:2}
.sidebar-logo{animation:logoPulse 3s ease-in-out infinite}
@keyframes logoPulse{0%,100%{box-shadow:0 0 18px var(--red-glow)}50%{box-shadow:0 0 28px rgba(236,72,153,.55),0 0 40px rgba(244,114,182,.2)}}
.nav-item{overflow:hidden}
.nav-item::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(236,72,153,.08),transparent);
  transform:translateX(-100%);transition:none;pointer-events:none}
.nav-item:hover::after{animation:navSweep .6s var(--ease)}
@keyframes navSweep{to{transform:translateX(100%)}}
.nav-item.active{box-shadow:inset 0 0 24px rgba(236,72,153,.06)}
.chip.live{animation:chipGlow 2.5s ease-in-out infinite}
@keyframes chipGlow{0%,100%{box-shadow:none}50%{box-shadow:0 0 14px rgba(34,197,94,.25)}}
.tile{transition:transform .25s var(--ease-snap),border-color .25s,box-shadow .25s,background .25s}
.tile:hover{transform:translateY(-4px) scale(1.02);border-color:rgba(236,72,153,.35);box-shadow:0 8px 24px rgba(236,72,153,.12),0 0 0 1px rgba(236,72,153,.2)}
.tile.active,.tile:has(input:checked){animation:tileSelect .45s var(--ease-snap)}
@keyframes tileSelect{0%{transform:scale(.96)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.card{transition:transform .25s,box-shadow .3s,border-color .25s}
.card:hover{border-color:rgba(236,72,153,.28);box-shadow:var(--shadow-panel),0 0 28px rgba(236,72,153,.08)}
.tool-card:hover{border-color:rgba(236,72,153,.3);box-shadow:0 0 0 1px rgba(236,72,153,.2),0 12px 32px rgba(0,0,0,.4)}
.btn-primary{
  background:linear-gradient(105deg,#e11d48 0%,#db2777 45%,#f472b6 100%);
  background-size:180% 180%;
  animation:fireShift 5s ease infinite;
}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);
  transform:translateX(-120%);pointer-events:none}
.btn-primary:hover::after{animation:shine .85s var(--ease)}
.mode-opt{transition:transform .2s,box-shadow .25s,border-color .2s}
.mode-opt:hover{transform:translateY(-2px)}
.mode-opt.active{animation:tileSelect .4s var(--ease-snap)}
.topbar .chip.live::before{animation:pulseDot 1.4s infinite}
.content .card{animation:fadeUp .45s var(--ease-snap) both}
.content .card:nth-child(1){animation-delay:.04s}
.content .card:nth-child(2){animation-delay:.1s}
.content .card:nth-child(3){animation-delay:.16s}

/* gen overlay more alive */
.gen-modal .ring{border-top-color:var(--orange);border-right-color:var(--magenta);box-shadow:0 0 20px rgba(236,72,153,.3)}
.progress-track i{background:linear-gradient(90deg,var(--red),var(--orange),var(--cyan),var(--magenta));background-size:200% 100%;animation:prog 1.4s ease-in-out infinite, glowSlide 1.6s linear infinite}

/* selection + scroll accent */
::selection{background:rgba(236,72,153,.35);color:#fff}
body{scrollbar-color:rgba(236,72,153,.35) transparent}

/* data-tilt state */
.tilt-card.is-tilt{transition:transform .08s linear}

@media (max-width:980px){
  .fx-aurora{opacity:.28}
  .ring-spoke,.reticle{display:none}
  .fx-cursor{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fx-canvas,.fx-aurora,.fx-grid,.fx-cursor,.card-beam,.ring-spoke{display:none!important}
  body.fx-ready::before{animation:none}
}

/* FIXED TELEMETRY CORNERS — no stack mopping */
.login-page .auth-tele{position:fixed!important;z-index:20;margin:0}
.login-page .auth-tele.left{top:20px!important;left:20px!important;right:auto!important;bottom:auto!important}
.login-page .auth-tele.right{top:20px!important;right:20px!important;left:auto!important;bottom:auto!important;text-align:right}
.login-page .auth-tele.bottom{left:20px!important;bottom:20px!important;right:auto!important;top:auto!important;max-width:min(360px,calc(100vw - 40px))}
.login-page .auth-tele.float-y{animation:teleIn .5s var(--ease-snap) both!important}
.login-page .auth-rings{z-index:1}
.login-page .login-card{z-index:10}
.login-page .fx-stage{z-index:0}
/* null conflicting translate float that nukes absolute */
.login-page .float-y{transform:none!important}
@media(max-width:980px){
  .login-page .auth-tele.left,.login-page .auth-tele.right{display:none!important}
  .login-page .auth-tele.bottom{left:12px!important;right:12px!important;bottom:12px!important;max-width:none}
}


/* ===== v4.6.1 CYBER EXTRA FX ===== */
.login-page{background:
  radial-gradient(ellipse 80% 50% at 50% -10%, rgba(219,39,119,.18), transparent 55%),
  radial-gradient(ellipse 60% 40% at 100% 100%, rgba(168,85,247,.12), transparent 50%),
  radial-gradient(ellipse 50% 40% at 0% 80%, rgba(236,72,153,.1), transparent 50%),
  var(--bg-void)!important}
.auth-rings .ring{border-color:rgba(236,72,153,.2)!important}
.auth-rings .r2{border-color:rgba(192,132,252,.22)!important}
.auth-rings .r3{border-color:rgba(165,243,252,.25)!important}
.auth-scan{background:linear-gradient(180deg,transparent 0%,rgba(236,72,153,.06) 50%,transparent 100%)!important}
.login-card{
  border:1px solid rgba(236,72,153,.28)!important;
  box-shadow:0 0 0 1px rgba(236,72,153,.2),0 0 60px rgba(219,39,119,.15),0 20px 50px rgba(0,0,0,.55)!important;
  background:linear-gradient(180deg,rgba(10,18,36,.96),rgba(10,4,16,.98))!important;
}
.card-beam{
  background:conic-gradient(from var(--beam-a,0deg),#db2777,#ec4899,#818cf8,#a78bfa,#ec4899,#db2777)!important;
  animation:beamSpin 3.2s linear infinite!important;
  opacity:.95!important;
}
.login-brand h1.glitch{
  font-size:clamp(18px,3.2vw,28px)!important;
  letter-spacing:.14em!important;
  margin-left:0!important;
  background:linear-gradient(90deg,#fff 10%,#f9a8d4 40%,#a855f7 70%,#a78bfa 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;
  filter:drop-shadow(0 0 18px rgba(236,72,153,.35));
  animation:cyberHue 4.2s linear infinite, glitchKick 3.6s infinite!important;
}
@keyframes cyberHue{0%{filter:drop-shadow(0 0 18px rgba(236,72,153,.35)) hue-rotate(0deg)}100%{filter:drop-shadow(0 0 18px rgba(236,72,153,.35)) hue-rotate(40deg)}}
@keyframes glitchKick{
  0%,90%,100%{transform:none;opacity:1}
  91%{transform:translate(-2px,1px);opacity:.85}
  92%{transform:translate(2px,-1px)}
  93%{transform:none}
}
.brand-mark{
  border-color:rgba(236,72,153,.45)!important;
  background:radial-gradient(circle at center,rgba(236,72,153,.18),transparent 70%)!important;
  box-shadow:0 0 0 8px rgba(236,72,153,.06),0 0 36px rgba(236,72,153,.25)!important;
}
.brand-mark svg{color:#f9a8d4!important;filter:drop-shadow(0 0 10px rgba(236,72,153,.7))}
.btn-login,.btn-fire,.btn-primary{
  background:linear-gradient(105deg,#9f1239 0%,#db2777 35%,#ec4899 70%,#818cf8 100%)!important;
  background-size:200% 200%!important;
  animation:fireShift 4s ease infinite, firePulse 2.2s ease-in-out infinite!important;
  box-shadow:0 0 0 1px rgba(236,72,153,.45),0 10px 32px rgba(219,39,119,.45),0 0 40px rgba(236,72,153,.2)!important;
  color:#fce7f3!important;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.btn-login:hover,.btn-primary:hover{filter:brightness(1.12) saturate(1.15)!important}
.nav-item.active{
  background:linear-gradient(90deg,rgba(236,72,153,.14),rgba(219,39,119,.06))!important;
}
.sidebar-logo{background:var(--grad-fire)!important;box-shadow:0 0 22px rgba(236,72,153,.45)!important}
.tile.active,.tile:has(input:checked){
  border-color:rgba(236,72,153,.45)!important;
  background:linear-gradient(160deg,rgba(236,72,153,.16),rgba(168,85,247,.1))!important;
  box-shadow:0 0 0 1px rgba(236,72,153,.35),0 0 24px rgba(236,72,153,.15)!important;
}
.mode-opt.active{border-color:rgba(236,72,153,.4)!important;box-shadow:0 0 0 1px rgba(236,72,153,.3),0 0 20px rgba(236,72,153,.12)!important}
.chip.live::before{background:#ec4899!important;box-shadow:0 0 0 0 rgba(236,72,153,.55)}
.seg input:checked+span{box-shadow:0 4px 14px rgba(219,39,119,.45)!important}
/* hologram rain bars */
.fx-rain{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.35}
.fx-rain i{position:absolute;top:-20%;width:1px;background:linear-gradient(180deg,transparent,rgba(236,72,153,.6),transparent);
  animation:rainFall linear infinite;opacity:.5}
@keyframes rainFall{0%{transform:translateY(0);opacity:0}10%{opacity:.7}100%{transform:translateY(120vh);opacity:0}}
/* data stream top bar */
.fx-stream{position:absolute;top:0;left:0;right:0;height:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(236,72,153,.0),#ec4899,rgba(129,140,248,.8),transparent);
  background-size:40% 100%;animation:streamRun 2.2s linear infinite;opacity:.7}
@keyframes streamRun{0%{background-position:-40% 0}100%{background-position:140% 0}}
/* hex grid pulse ring behind card */
.login-card::after{content:"";position:absolute;inset:-24px;border-radius:12px;border:1px solid rgba(236,72,153,.08);
  box-shadow:0 0 40px rgba(236,72,153,.08),inset 0 0 40px rgba(236,72,153,.03);
  animation:cardHalo 2s ease-in-out infinite;pointer-events:none;z-index:-1}
@keyframes cardHalo{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}}
/* scanline thicker on login */
.login-page::after{opacity:1!important;
  background:repeating-linear-gradient(180deg,transparent 0,transparent 3px,rgba(236,72,153,0.025) 3px,rgba(236,72,153,0.025) 4px)!important}
/* typing cursor stronger */
.boot-line.live .boot-msg::after{color:#f9a8d4!important;text-shadow:0 0 8px #ec4899}
/* field cyber glow */
.login-card .field input:focus{
  border-color:#ec4899!important;
  box-shadow:0 0 0 1px #ec4899,0 0 24px rgba(236,72,153,.3),0 0 40px rgba(168,85,247,.1)!important;
  animation:inputBreathe 2s ease-in-out infinite!important}
@keyframes inputBreathe{
  0%,100%{box-shadow:0 0 0 1px #ec4899,0 0 18px rgba(236,72,153,.25)}
  50%{box-shadow:0 0 0 1px #818cf8,0 0 28px rgba(129,140,248,.25)}
}
/* aurora more blue */
.fx-aurora.a1{background:radial-gradient(circle,rgba(219,39,119,.55),transparent 68%)!important}
.fx-aurora.a2{background:radial-gradient(circle,rgba(236,72,153,.45),transparent 68%)!important}
.fx-aurora.a3{background:radial-gradient(circle,rgba(129,140,248,.4),transparent 68%)!important}
.fx-cursor{background:radial-gradient(circle,rgba(236,72,153,.2) 0%,rgba(129,140,248,.1) 35%,transparent 68%)!important}
/* sidebar tint */
.sidebar{background:linear-gradient(180deg,#06101f 0%,#030814 100%)!important;border-right-color:rgba(236,72,153,.1)!important}
.app-page{background:var(--grad-deck)}
/* dismiss borders that still read warm */
.border-hot, .btn-danger{/* keep danger red */}
.btn-danger{color:#f87171!important;background:rgba(248,113,113,.1)!important;border-color:rgba(248,113,113,.35)!important}



/* ============== v4.6.1 EXTRA CYBER ALIVE FX ============== */

/* Cursor spotlight inside login card */
.login-card {
  --mx: 50%;
  --my: 50%;
}
.login-card .card-spotlight {
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(250px circle at var(--mx) var(--my), rgba(236,72,153,0.08), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
}
.login-card:hover .card-spotlight { opacity: 1; }

/* Animated corner brackets */
.login-card .card-corners {
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--r-lg) + 1px);
  pointer-events: none;
  z-index: 2;
}
.login-card .card-corners::before,
.login-card .card-corners::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: rgba(236,72,153,0.7);
  border-style: solid;
  transition: all .25s ease;
  animation: cornerPulse 2.8s ease-in-out infinite;
}
.login-card .card-corners::before {
  top: 10px; left: 10px;
  border-width: 2px 0 0 2px;
  border-top-left-radius: 4px;
}
.login-card .card-corners::after {
  bottom: 10px; right: 10px;
  border-width: 0 2px 2px 0;
  border-bottom-right-radius: 4px;
  animation-delay: 1.4s;
}
.login-card:hover .card-corners::before,
.login-card:hover .card-corners::after {
  width: 26px;
  height: 26px;
  border-color: rgba(103,232,249,0.95);
  box-shadow: 0 0 14px rgba(236,72,153,0.35);
}
@keyframes cornerPulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

/* Brand subtitle decode shimmer */
.login-brand .brand-sub {
  position: relative;
  display: inline-block;
  font-family: var(--font-mono);
  letter-spacing: .18em;
  color: var(--text2);
  min-height: 18px;
  transition: color .25s;
}
.login-brand .brand-sub::after {
  content: '\258B';
  display: inline-block;
  margin-left: 6px;
  color: var(--orange);
  animation: blink 1.1s steps(1) infinite;
}
.login-brand:hover .brand-sub {
  color: var(--text-hi);
}

/* 3D tilt state helper */
.tilt-card {
  transform-style: preserve-3d;
  perspective: 1000px;
}
.login-card.is-tilt {
  transition: transform .08s linear;
}

/* Extra brand orbit pulse rings */
.brand-mark {
  position: relative;
  z-index: 1;
}
.brand-mark::before,
.brand-mark::after {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px solid rgba(236,72,153,0.18);
  pointer-events: none;
  animation: ringExpand 1.6s ease-out infinite;
}
.brand-mark::after {
  inset: -30px;
  border-color: rgba(219,39,119,0.12);
  animation-delay: 1.3s;
}
@keyframes ringExpand {
  0% { transform: scale(0.85); opacity: 0; }
  40% { opacity: .7; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* Connection mesh helper for app canvas */
.app-fx .fx-canvas.dim {
  opacity: .55;
}


/* ============================================================
   v4.6.1 DIGITALGOKIL brand + live deck motion
   ============================================================ */

/* Real logo (replace lightning bolt) */
.brand-mark.has-logo,
.sidebar-logo.has-logo{
  overflow:visible;
  background:
    radial-gradient(circle at 35% 30%, rgba(103,232,249,.28), transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(219,39,119,.18), transparent 60%),
    #071018;
  border:1px solid rgba(244,114,182,.45);
  box-shadow:
    0 0 0 1px rgba(219,39,119,.15),
    0 0 28px rgba(236,72,153,.28),
    inset 0 0 18px rgba(219,39,119,.12);
}
.brand-mark.has-logo{
  width:68px;height:68px;
  border-radius:20px;
  animation:logoFloat 2.8s ease-in-out infinite;
}
.brand-mark.has-logo svg{display:none}
.brand-logo-img,
.sidebar-logo-img{
  width:78%;height:78%;
  object-fit:contain;
  border-radius:10px;
  display:block;
  position:relative;z-index:2;
  filter:drop-shadow(0 0 10px rgba(236,72,153,.45));
  animation:logoShine 2.2s ease-in-out infinite;
}
.sidebar-logo.has-logo{
  width:40px;height:40px;
  border-radius:12px;
  padding:0;
  display:grid;place-items:center;
}
.sidebar-logo.has-logo svg{display:none}
.sidebar-logo-img{width:72%;height:72%;border-radius:8px;animation:none}
@keyframes logoFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-4px) scale(1.03)}
}
@keyframes logoShine{
  0%,100%{filter:drop-shadow(0 0 8px rgba(236,72,153,.35)) brightness(1)}
  50%{filter:drop-shadow(0 0 16px rgba(103,232,249,.7)) brightness(1.08)}
}

/* Longer brand wordmark fits */
.login-brand h1.glitch{
  font-size:clamp(1.35rem,4.2vw,1.85rem);
  letter-spacing:0.08em;
  line-height:1.1;
  max-width:100%;
  word-break:break-word;
}
.sidebar-titles strong{
  font-size:11px;
  letter-spacing:0.1em;
}

/* Live stats */
.stats-live .stat{
  cursor:default;
  transition:transform .28s var(--ease-snap), border-color .25s, box-shadow .3s, background .25s;
}
.stats-live .stat::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(236,72,153,.08) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:none;pointer-events:none;
}
.stats-live .stat:hover{
  transform:translateY(-3px);
  border-color:rgba(244,114,182,.4);
  box-shadow:0 10px 28px rgba(2,8,23,.45), 0 0 0 1px rgba(236,72,153,.2);
  background:linear-gradient(160deg,rgba(219,39,119,.12),rgba(2,8,23,.4));
}
.stats-live .stat:hover::after{animation:statSweep .7s ease}
.stats-live .stat b{
  background:linear-gradient(90deg,#fce7f3,#f9a8d4,#f472b6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:letter-spacing .25s;
}
.stats-live .stat:hover b{letter-spacing:.04em}
@keyframes statSweep{to{transform:translateX(120%)}}

/* Dashboard cards more alive */
.app .card{
  transition:transform .35s var(--ease-snap), box-shadow .35s, border-color .3s;
}
.app .card:hover{
  transform:translateY(-2px);
  border-color:rgba(244,114,182,.32);
  box-shadow:var(--shadow-panel),0 16px 40px rgba(2,132,199,.12),0 0 0 1px rgba(236,72,153,.12);
}
.app .card-head h3{
  position:relative;
}
.nav-item{
  transition:transform .2s var(--ease), background .2s, border-color .2s, color .2s, box-shadow .25s;
}
.nav-item:hover{
  transform:translateX(3px);
}
.nav-item.active{
  box-shadow:inset 3px 0 0 var(--orange-hot), inset 0 0 28px rgba(236,72,153,.08);
}
.mode-opt{
  transition:transform .28s var(--ease-snap), border-color .25s, box-shadow .3s, background .25s;
}
.mode-opt:hover{transform:translateY(-3px) scale(1.01)}
.mode-opt.active{animation:modePulse 2.8s ease-in-out infinite}
@keyframes modePulse{
  0%,100%{box-shadow:var(--shadow-live)}
  50%{box-shadow:0 0 0 1px rgba(244,114,182,.35),0 0 28px rgba(236,72,153,.22)}
}

/* Topbar chips breathe */
.topbar-actions .chip{
  transition:transform .2s, border-color .2s, box-shadow .25s, color .2s;
}
.topbar-actions .chip:hover{
  transform:translateY(-1px);
  border-color:rgba(244,114,182,.4);
  color:var(--text-hi);
  box-shadow:0 0 16px rgba(236,72,153,.15);
}
.topbar-actions .chip.live b{
  animation:onlineBlink 1.6s ease-in-out infinite;
}
@keyframes onlineBlink{
  0%,100%{opacity:1;text-shadow:0 0 8px rgba(34,197,94,.5)}
  50%{opacity:.55;text-shadow:0 0 2px rgba(34,197,94,.2)}
}

/* ---------- LIVE PREVIEW device frame ---------- */
.preview-shell{
  border:1px solid rgba(236,72,153,.18)!important;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(219,39,119,.08), transparent 55%),
    linear-gradient(180deg,#060b14,#03060d)!important;
  box-shadow:
    inset 0 1px 0 rgba(148,163,184,.06),
    0 18px 48px rgba(0,0,0,.45),
    0 0 0 1px rgba(236,72,153,.06)!important;
}
.preview-toolbar{
  backdrop-filter:blur(8px);
  background:linear-gradient(180deg,rgba(40,16,48,.92),rgba(8,12,20,.88))!important;
}
.preview-stage{
  position:relative;
  background:
    radial-gradient(circle at 50% 0%, rgba(219,39,119,.07), transparent 42%),
    repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(236,72,153,.03) 24px),
    repeating-linear-gradient(90deg, transparent, transparent 23px, rgba(236,72,153,.03) 24px),
    #0a0410!important;
  min-height:560px;
  padding:18px 14px 22px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  overflow:auto;
}
.preview-frame-wrap{
  position:relative;
  width:100%;
  max-width:100%;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:
    0 0 0 1px rgba(236,72,153,.22),
    0 20px 50px rgba(0,0,0,.55),
    0 0 40px rgba(219,39,119,.12);
  transition:width .45s var(--ease), max-width .45s var(--ease), height .45s var(--ease), box-shadow .3s;
  animation:previewIn .5s var(--ease-snap) both;
}
@keyframes previewIn{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}
}
.preview-stage iframe{
  width:100%!important;
  height:560px!important;
  border:0!important;
  display:block;
  background:#fff;
  transition:height .45s var(--ease);
}
.preview-stage[data-device="mobile"]{
  padding-top:24px;
  padding-bottom:28px;
}
.preview-stage[data-device="mobile"] .preview-frame-wrap{
  width:min(390px,100%);
  max-width:390px;
  border-radius:28px;
  box-shadow:
    0 0 0 10px #140818,
    0 0 0 12px rgba(244,114,182,.35),
    0 24px 60px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
.preview-stage[data-device="mobile"] .preview-frame-wrap::before{
  content:"";
  position:absolute;top:8px;left:50%;
  transform:translateX(-50%);
  width:72px;height:6px;border-radius:99px;
  background:rgba(40,16,48,.55);
  z-index:3;pointer-events:none;
}
.preview-stage[data-device="mobile"] iframe{
  height:680px!important;
}
.preview-loading{
  position:absolute;inset:0;z-index:5;
  display:none;place-items:center;gap:12px;flex-direction:column;
  background:rgba(10,4,16,.72);
  backdrop-filter:blur(4px);
  color:var(--cyan-hot);
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.preview-loading.on{display:grid}
.preview-loading .spinner,
.preview-loading .spinner{
  width:36px;height:36px;border-radius:50%;
  border:2px solid rgba(236,72,153,.15);
  border-top-color:var(--orange-hot);
  animation:spin .5s linear infinite;
  margin:0 auto 8px;
}
.preview-url{
  font-family:var(--font-mono);
  color:var(--cyan-hot)!important;
  letter-spacing:.04em;
}

/* Login form fields more reactive */
.login-card .fx-field{
  transition:transform .2s, box-shadow .25s, border-color .2s;
}
.login-card .fx-field.focused{
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(244,114,182,.45), 0 0 24px rgba(236,72,153,.18);
}
.btn-login{
  transition:transform .2s var(--ease-snap), box-shadow .25s, filter .2s!important;
}
.btn-login:hover{
  box-shadow:0 0 0 1px rgba(103,232,249,.4), 0 12px 32px rgba(219,39,119,.35)!important;
  filter:brightness(1.05);
}
.btn-login:active{transform:scale(.98)!important}

/* Stagger entrance for dashboard content */
.app .content > .card,
.app .content > .grid-studio,
.app .content > .alert{
  animation:fadeUp .45s var(--ease-snap) both;
}
.app .content > .card:nth-child(1){animation-delay:.04s}
.app .content > .card:nth-child(2){animation-delay:.08s}
.app .content > .grid-studio{animation-delay:.1s}
.studio-main .card{animation:fadeUp .4s var(--ease-snap) both}
.studio-main .card:nth-child(1){animation-delay:.06s}
.studio-main .card:nth-child(2){animation-delay:.12s}
.studio-main .card:nth-child(3){animation-delay:.18s}
.panel-sticky .card{animation:fadeUp .5s var(--ease-snap) .14s both}

/* Interactive table rows */
table.data tbody tr{
  transition:background .2s, transform .15s;
}
table.data tbody tr:hover{
  background:rgba(219,39,119,.08)!important;
}
table.data tbody tr:hover td:first-child{
  box-shadow:inset 2px 0 0 var(--orange-hot);
}

/* Generate overlay richer */
.gen-modal{
  animation:deckIn .35s var(--ease-snap);
  overflow:hidden;
}
.gen-modal::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 40%,rgba(236,72,153,.08) 50%,transparent 60%);
  animation:genSheen 1.8s linear infinite;
  pointer-events:none;
}
@keyframes genSheen{to{transform:translateX(40%)}}

/* Scroll reveal helper */
.is-reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease), transform .55s var(--ease-snap);
}
.is-reveal.in{
  opacity:1;transform:none;
}

@media (prefers-reduced-motion: reduce){
  .brand-mark.has-logo,
  .brand-logo-img,
  .stats-live .stat,
  .mode-opt.active,
  .topbar-actions .chip.live b,
  .app .card,
  .app .content > .card,
  .preview-frame-wrap{
    animation:none!important;
    transition:none!important;
  }
}

/* ===== v4.6.2 SMOOTH PARALLAX + CALM CTA ===== */
.btn-login,.btn-fire,.btn-primary{
  animation:none!important;
  background:linear-gradient(105deg,#9f1239 0%,#db2777 45%,#f472b6 100%)!important;
  background-size:100% 100%!important;
  box-shadow:0 0 0 1px rgba(236,72,153,.35),0 8px 24px rgba(219,39,119,.28)!important;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, filter .35s ease!important;
  letter-spacing:.18em!important;
  will-change:transform;
}
.btn-login:hover,.btn-fire:hover,.btn-primary:hover{
  filter:brightness(1.06)!important;
  box-shadow:0 0 0 1px rgba(103,232,249,.45),0 14px 36px rgba(219,39,119,.32)!important;
  transform:translateY(-1px)!important;
}
.btn-login:active,.btn-fire:active,.btn-primary:active{
  transform:translateY(0) scale(.995)!important;
  filter:brightness(.98)!important;
}
.btn-login .btn-sheen,.btn-fire .btn-sheen,.btn .btn-sheen{
  opacity:.55!important;
  animation:none!important;
  transform:translateX(-130%)!important;
  transition:transform .7s cubic-bezier(.22,1,.36,1)!important;
}
.btn-login:hover .btn-sheen,.btn-fire:hover .btn-sheen,.btn-primary:hover .btn-sheen{
  animation:none!important;
  transform:translateX(130%)!important;
}
.tilt-card,.login-card{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .4s ease!important;
}
.tilt-card.is-tilt,.login-card.is-tilt{
  transition:transform .18s cubic-bezier(.22,1,.36,1)!important;
}
.login-card .login-brand,
.login-card .login-card-hdr,
.login-card form,
.login-card .login-card-foot{
  transition:transform .5s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.parallax-layer{will-change:transform;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.login-page .fx-stage,
.login-page .auth-rings,
.login-page .fx-aurora{
  transition:transform .6s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.app .card,.app .mode-opt,.app .tile,
.panel-sticky .card,.preview-shell{
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .3s ease!important;
  transform-style:preserve-3d;
}
.app .card.is-parallax-hover,
.panel-sticky .card.is-parallax-hover,
.preview-shell.is-parallax-hover{
  transition:transform .12s linear!important;
}
.login-brand h1.glitch{
  /* v4.7.6: keep login brand glitch — scoped re-enable at file end */
  filter:drop-shadow(0 0 14px rgba(236,72,153,.28))!important;
}
.mode-opt.active{animation:none!important}
.tile:hover{transform:translateY(-2px)!important}
.stats-live .stat:hover{transform:translateY(-2px)!important}
.login-page::before{
  content:"";
  position:fixed;inset:-8%;
  pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 50% 40% at 30% 20%, rgba(219,39,119,.10), transparent 60%),
    radial-gradient(ellipse 45% 35% at 75% 70%, rgba(168,85,247,.08), transparent 55%);
  transition:transform .7s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.login-page{position:relative}
@media (prefers-reduced-motion:reduce){
  .btn-login,.btn-fire,.btn-primary,
  .tilt-card,.login-card,
  .app .card,.parallax-layer{transition:none!important;transform:none!important;animation:none!important}
}

/* ===== MANUAL MODE FIELDS ===== */
.mode-block{
  display:none;
  margin-top:12px;
  padding:14px 14px 12px;
  border-radius:12px;
  border:1px solid rgba(236,72,153,.18);
  background:linear-gradient(180deg,rgba(219,39,119,.08),rgba(8,14,30,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  animation:fadeUp .28s cubic-bezier(.22,1,.36,1);
}
.mode-block.on{display:block}
.mode-block[hidden]{display:none!important}
.mode-block .control{
  width:100%;
  margin-top:6px;
}
.mode-block textarea.control{
  min-height:96px;
  resize:vertical;
  line-height:1.5;
}
.mode-block .help-text{margin-top:8px;opacity:.75}
.mode-block .lbl{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mode-block .hint-right{
  font-family:var(--font-mono, ui-monospace, monospace);
  font-size:11px;
  letter-spacing:.04em;
  color:rgba(125,211,252,.85);
  white-space:nowrap;
}
.mode-block .hint-right.warn{color:#fbbf24}
.mode-block .hint-right.ok{color:#34d399}
.seg{display:inline-flex;gap:0;padding:3px;border-radius:12px;border:1px solid rgba(236,72,153,.18);background:rgba(6,12,28,.72)}
.seg label{position:relative;cursor:pointer;margin:0}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:9px;
  font-family:var(--font-mono, ui-monospace, monospace);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(186,230,253,.55);transition:all .22s ease;
}
.seg label:hover span{color:rgba(224,242,254,.9)}
.seg input:checked + span{
  color:#fdf2f8;
  background:linear-gradient(105deg,#f472b6,#db2777);
  box-shadow:0 4px 16px rgba(219,39,119,.35);
}

/* ===== v4.7 CYBER-FUTURE + SEO PARALLAX FX ===== */

/* --- Cyber perspective floor (login) --- */
.fx-cyber-floor{
  position:fixed;left:50%;bottom:-10%;width:200%;height:55vh;
  transform:translateX(-50%) perspective(420px) rotateX(68deg);
  transform-origin:center bottom;
  background:
    linear-gradient(rgba(236,72,153,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(236,72,153,.08) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(180deg,transparent 0%,#000 35%,#000 80%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 35%,#000 80%,transparent 100%);
  animation:floorRide 5s linear infinite;
  z-index:0;pointer-events:none;opacity:.6;will-change:background-position
}
@keyframes floorRide{to{background-position:0 52px,52px 0}}

/* --- Data ribbons disabled (was noisy plaintext stream) --- */
.fx-ribbons,.fx-ribbon{display:none!important}

/* --- Clean status chips (iconic SEO/cyber HUD pills) --- */
.fx-status-chips{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.fx-chip{
  position:absolute;display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px 6px 8px;border-radius:999px;
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(186,230,253,.85);
  background:linear-gradient(135deg,rgba(6,18,36,.72),rgba(8,24,48,.55));
  border:1px solid rgba(236,72,153,.28);
  box-shadow:0 0 0 1px rgba(219,39,119,.08),0 0 22px rgba(219,39,119,.18),inset 0 0 12px rgba(236,72,153,.05);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;animation:chipIn .6s ease forwards, chipFloat 4.8s ease-in-out infinite;
  animation-delay:var(--i,0s), calc(var(--i,0s) + .6s);
  will-change:transform,opacity
}
.fx-chip::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:rgba(236,72,153,.9);box-shadow:0 0 10px rgba(236,72,153,.8);
  animation:chipDot 1.4s ease-in-out infinite
}
.fx-chip .ck{color:rgba(103,232,249,.55);font-weight:600}
.fx-chip .cv{color:rgba(240,249,255,.92);text-shadow:0 0 12px rgba(236,72,153,.35)}
.fx-chip[data-side="right"]{flex-direction:row-reverse}
.app-page .fx-chip{opacity:.9;font-size:9px;padding:5px 9px}
@keyframes chipIn{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:.88;transform:translateY(0) scale(1)}}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes chipDot{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.25)}}

/* --- Holographic card shimmer --- */
.card-holo{
  position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;z-index:1;
  background:linear-gradient(
    115deg,
    transparent 25%,
    rgba(236,72,153,.06) 38%,
    rgba(129,140,248,.08) 45%,
    rgba(244,114,182,.05) 52%,
    rgba(236,72,153,.06) 60%,
    transparent 72%
  );
  background-size:300% 300%;
  transition:opacity .4s ease;
  mix-blend-mode:screen
}
.card:hover .card-holo,.mode-opt:hover .card-holo,.tile:hover .card-holo{
  opacity:1;animation:holoShift 1.1s ease-in-out infinite
}
@keyframes holoShift{
  0%{background-position:0% 0%}
  50%{background-position:100% 100%}
  100%{background-position:0% 0%}
}

/* --- Border beam (light traveling along card edge) --- */
.card-beam-line{
  position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:2;overflow:hidden
}
.card-beam-line::before{
  content:"";position:absolute;
  top:-2px;left:-60%;width:35%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(103,232,249,.9),transparent);
  box-shadow:0 0 12px rgba(236,72,153,.6);
  animation:beamTravel 2.4s linear infinite;
  animation-delay:var(--beam-delay,0s)
}
@keyframes beamTravel{
  0%{left:-60%;top:-2px}
  24%{left:100%;top:-2px}
  25%{left:100%;top:-2px;transform:rotate(90deg);transform-origin:top right}
  49%{left:100%;top:100%;transform:rotate(90deg)}
  50%{left:100%;top:100%;transform:rotate(180deg);transform-origin:bottom right}
  74%{left:-60%;top:100%;transform:rotate(180deg)}
  75%{left:-60%;top:100%;transform:rotate(270deg);transform-origin:bottom left}
  99%{left:-60%;top:-2px;transform:rotate(270deg)}
  100%{left:-60%;top:-2px;transform:rotate(360deg)}
}

/* --- Stat glitch flicker --- */
.stat-glitch{position:relative}
.stat-glitch.glitching{
  animation:statGlitch .3s steps(2,end)!important
}
@keyframes statGlitch{
  0%{transform:translate(0);text-shadow:none;filter:none}
  20%{transform:translate(-2px,1px);text-shadow:2px 0 #f0abfc,-2px 0 #f9a8d4;filter:hue-rotate(40deg)}
  40%{transform:translate(2px,-1px);text-shadow:-2px 0 #f0abfc,2px 0 #f9a8d4}
  60%{transform:translate(-1px,0);text-shadow:1px 0 #a78bfa,-1px 0 #ec4899}
  80%{transform:translate(1px,0);text-shadow:none}
  100%{transform:translate(0);text-shadow:none;filter:none}
}

/* --- SEO pulse bars --- */
.seo-pulse-bars{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.seo-bar-row{display:flex;align-items:center;gap:10px}
.seo-bar-label{
  font-family:var(--font-mono);font-size:9px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text3);
  min-width:90px;flex-shrink:0
}
.seo-bar-track{
  flex:1;height:6px;border-radius:3px;
  background:rgba(236,72,153,.06);
  overflow:hidden;position:relative
}
.seo-bar-fill{
  height:100%;border-radius:3px;
  background:linear-gradient(90deg,#db2777,#ec4899,#f9a8d4);
  box-shadow:0 0 8px rgba(236,72,153,.4);
  width:0%;transition:width 1.2s cubic-bezier(.22,1,.36,1);
  position:relative
}
.seo-bar-fill::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:20px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5));
  animation:barShimmer 1.2s ease-in-out infinite
}
@keyframes barShimmer{0%,100%{opacity:0}50%{opacity:1}}
.seo-bar-val{
  font-family:var(--font-mono);font-size:9px;font-weight:700;
  color:var(--orange-hot);min-width:36px;text-align:right
}

/* --- Neon circuit traces (login) --- */
.neon-circuit{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:.35;mix-blend-mode:screen
}
.neon-circuit svg{width:100%;height:100%}
.neon-circuit path{
  fill:none;stroke:rgba(236,72,153,.3);stroke-width:1;
  stroke-dasharray:200;stroke-dashoffset:200;
  animation:traceDraw 2.5s ease-in-out infinite
}
.neon-circuit path:nth-child(2){animation-delay:1.2s;stroke:rgba(129,140,248,.25)}
.neon-circuit path:nth-child(3){animation-delay:2.4s;stroke:rgba(244,114,182,.2)}
.neon-circuit path:nth-child(4){animation-delay:.42s;stroke:rgba(244,114,182,.25)}
@keyframes traceDraw{
  0%{stroke-dashoffset:200;opacity:0}
  20%{opacity:1}
  60%{stroke-dashoffset:0;opacity:1}
  80%{opacity:.3}
  100%{stroke-dashoffset:-200;opacity:0}
}

/* --- 3D scroll reveal enhancement --- */
.is-reveal{
  opacity:0;transform:perspective(800px) rotateX(8deg) translateY(24px);
  transform-origin:center top
}
.is-reveal.in{
  opacity:1;
  transform:perspective(800px) rotateX(0) translateY(0);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),
             transform .6s cubic-bezier(.22,1,.36,1)
}

/* --- App page ambient parallax layers --- */
.app-page .fx-stage,.app-page .fx-aurora{
  transition:transform .8s cubic-bezier(.22,1,.36,1);
  will-change:transform
}

/* --- Cyber corner accents on cards --- */
.card-cyber-corner{
  position:absolute;width:12px;height:12px;
  border:1px solid rgba(236,72,153,.4);
  pointer-events:none;z-index:2;opacity:0;
  transition:opacity .3s ease
}
.card:hover .card-cyber-corner{opacity:1}
.card-cyber-corner.tl{top:6px;left:6px;border-right:none;border-bottom:none}
.card-cyber-corner.tr{top:6px;right:6px;border-left:none;border-bottom:none}
.card-cyber-corner.bl{bottom:6px;left:6px;border-right:none;border-top:none}
.card-cyber-corner.br{bottom:6px;right:6px;border-left:none;border-top:none}

/* --- Engage button cyber pulse ring --- */
.btn-login::after,.btn-fire::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;
  border:1px solid rgba(236,72,153,.4);opacity:0;
  pointer-events:none
}
.btn-login:hover::after,.btn-fire:hover::after{
  animation:cyberPulseRing 2.5s ease-out infinite
}
@keyframes cyberPulseRing{
  0%{opacity:.6;transform:scale(1)}
  100%{opacity:0;transform:scale(1.08)}
}

/* --- Scanline sweep on login card --- */
.login-card-scan{
  position:absolute;left:0;right:0;height:2px;top:0;
  background:linear-gradient(90deg,transparent,rgba(103,232,249,.6),transparent);
  box-shadow:0 0 10px rgba(236,72,153,.4);
  animation:cardScan 2.2s ease-in-out infinite;
  pointer-events:none;z-index:5
}
@keyframes cardScan{
  0%{top:0;opacity:0}
  10%{opacity:.7}
  90%{opacity:.7}
  100%{top:100%;opacity:0}
}

/* --- Keyword cloud orbit (SEO themed) --- */
.kw-orbit{
  position:absolute;width:100%;height:100%;top:0;left:0;
  pointer-events:none;z-index:1
}
.kw-orbit .kw-node{
  position:absolute;font-family:var(--font-mono);
  font-size:9px;font-weight:600;letter-spacing:.1em;
  color:rgba(236,72,153,.3);text-transform:uppercase;
  white-space:nowrap;opacity:0;
  animation:kwFloat linear infinite
}
@keyframes kwFloat{
  0%{opacity:0;transform:translateY(20px) scale(.8)}
  15%{opacity:.4}
  85%{opacity:.4}
  100%{opacity:0;transform:translateY(-60px) scale(1.1)}
}

/* ===== v4.7.2 ICONIC CYBER / SEO / CODE FX ===== */

/* Code glyph rain (coding + SEO symbols) */
.fx-code-rain{
  position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden
}
.fx-code-rain .cg{
  position:absolute;top:-40px;
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.08em;color:rgba(236,72,153,.42);
  text-shadow:0 0 12px rgba(236,72,153,.4);
  white-space:nowrap;opacity:0;
  animation:codeRainFall linear infinite
}
.fx-code-rain .cg.seo{color:rgba(167,139,250,.55);text-shadow:0 0 12px rgba(167,139,250,.45)}
.fx-code-rain .cg.ht{color:rgba(244,114,182,.3)}
.app-page .fx-code-rain .cg{opacity:.55;font-size:10px}
@keyframes codeRainFall{
  0%{transform:translateY(0) translateX(0);opacity:0}
  8%{opacity:.55}
  85%{opacity:.4}
  100%{transform:translateY(110vh) translateX(12px);opacity:0}
}

/* Radar sweep wave (cyber icon) */
.fx-radar{
  position:fixed;width:480px;height:480px;border-radius:50%;
  pointer-events:none;z-index:0;opacity:.55;
  border:1px solid rgba(236,72,153,.12);
  box-shadow:0 0 40px rgba(219,39,119,.08) inset;
  overflow:hidden
}
.fx-radar.r1{right:-80px;bottom:-60px}
.fx-radar.r2{left:-100px;top:12%;width:280px;height:280px;opacity:.22}
.app-page .fx-radar.r1{right:-40px;top:18%;bottom:auto;width:320px;height:320px;opacity:.22}
.app-page .fx-radar.r2{left:auto;right:12%;bottom:8%;top:auto;width:200px;height:200px}
.fx-radar::before{
  content:"";position:absolute;inset:18%;border-radius:50%;
  border:1px solid rgba(236,72,153,.1)
}
.fx-radar::after{
  content:"";position:absolute;inset:36%;border-radius:50%;
  border:1px solid rgba(236,72,153,.08)
}
.fx-radar .radar-beam{
  position:absolute;left:50%;top:50%;width:50%;height:2px;
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(236,72,153,.55),transparent);
  animation:radarSpin 2.4s linear infinite;
  box-shadow:0 0 18px rgba(236,72,153,.35)
}
.fx-radar .radar-dot{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:rgba(103,232,249,.7);box-shadow:0 0 10px rgba(236,72,153,.8);
  animation:radarBlink 1.4s ease-in-out infinite
}
@keyframes radarSpin{to{transform:rotate(360deg)}}
@keyframes radarBlink{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}

/* Hex / binary constellation nodes */
.fx-constellation{
  position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden
}
.fx-constellation canvas{width:100%;height:100%;display:block;opacity:.78}
.app-page .fx-constellation canvas{opacity:.48}

/* Floating code frames (JSON-LD / meta / tags) */
.fx-code-frames{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.fx-code-frame{
  position:absolute;padding:12px 14px;border-radius:10px;
  background:rgba(6,18,36,.72);
  border:1px solid rgba(236,72,153,.32);
  box-shadow:0 0 28px rgba(219,39,119,.22),inset 0 0 24px rgba(236,72,153,.06),0 0 0 1px rgba(236,72,153,.08);
  font-family:var(--font-mono);font-size:10px;line-height:1.55;
  color:rgba(186,230,253,.78);white-space:pre;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;animation:frameDrift linear infinite
}
.fx-code-frame .cf-h{color:rgba(236,72,153,.7);font-weight:700;margin-bottom:4px;letter-spacing:.12em}
.fx-code-frame .cf-k{color:rgba(167,139,250,.75)}
.fx-code-frame .cf-s{color:rgba(52,211,153,.7)}
.fx-code-frame .cf-n{color:rgba(251,191,36,.7)}
@keyframes frameDrift{
  0%{transform:translate3d(0,20px,0) rotate(-2deg);opacity:0}
  12%{opacity:.72}
  88%{opacity:.65}
  100%{transform:translate3d(18px,-40px,0) rotate(2deg);opacity:0}
}
.app-page .fx-code-frame{opacity:.85;font-size:8px}

/* Terminal stream ticker (left/right edges) */
.fx-term-stream{
  position:fixed;z-index:2;pointer-events:none;
  width:200px;max-height:28vh;overflow:hidden;
  font-family:var(--font-mono);font-size:9px;line-height:1.7;
  color:rgba(236,72,153,.32);opacity:.55;
  mask-image:linear-gradient(180deg,transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent, #000 15%, #000 85%, transparent)
}
.login-page .fx-term-stream.left{left:18px;bottom:14%;top:auto;text-align:left}
.login-page .fx-term-stream.right{right:18px;top:28%;bottom:auto;text-align:right}
.app-page .fx-term-stream.left{left:auto;right:18px;bottom:10%;top:auto;opacity:.7}
.app-page .fx-term-stream.right{display:none}
.fx-term-stream .tl{
  opacity:0;transform:translateY(8px);
  animation:termLine .5s ease forwards
}
.fx-term-stream .tl .p{color:rgba(52,211,153,.65)}
.fx-term-stream .tl .w{color:rgba(251,191,36,.7)}
.fx-term-stream .tl .e{color:rgba(248,113,113,.7)}
.fx-term-stream .tl .i{color:rgba(129,140,248,.75)}
@keyframes termLine{to{opacity:1;transform:translateY(0)}}

/* Hexagon grid overlay (future skin) */
.fx-hex-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.14;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(236,72,153,.35) 1px, transparent 1.5px),
    linear-gradient(30deg, transparent 48%, rgba(236,72,153,.08) 49%, rgba(236,72,153,.08) 51%, transparent 52%),
    linear-gradient(-30deg, transparent 48%, rgba(236,72,153,.06) 49%, rgba(236,72,153,.06) 51%, transparent 52%);
  background-size:28px 48px, 48px 84px, 48px 84px;
  animation:hexShift 10s linear infinite;
  mask-image:radial-gradient(ellipse at center, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 20%, transparent 75%)
}
.app-page .fx-hex-grid{opacity:.08;animation-duration:12s}
@keyframes hexShift{to{background-position:28px 48px, 48px 0, -48px 0}}

/* Floating rank badges (SEO #1 #2) */
.fx-rank-badges{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.fx-rank{
  position:absolute;padding:6px 10px;border-radius:8px;
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.14em;color:rgba(165,243,252,.9);
  border:1px solid rgba(236,72,153,.4);
  background:linear-gradient(135deg,rgba(219,39,119,.22),rgba(129,140,248,.14));
  box-shadow:0 0 22px rgba(236,72,153,.28),inset 0 0 12px rgba(236,72,153,.08);
  opacity:0;animation:rankFloat linear infinite
}
.fx-rank .rk{color:rgba(251,191,36,.85)}
@keyframes rankFloat{
  0%{transform:translateY(10px) scale(.9);opacity:0}
  15%{opacity:.75}
  85%{opacity:.7}
  100%{transform:translateY(-50px) scale(1.05);opacity:0}
}

/* Cursor caret blink bars floating */
.fx-carets{position:fixed;inset:0;z-index:1;pointer-events:none}
.fx-caret{
  position:absolute;width:2px;height:12px;
  background:rgba(236,72,153,.55);box-shadow:0 0 8px rgba(236,72,153,.6);
  animation:caretBlink .65s steps(1) infinite, caretDrift linear infinite
}
@keyframes caretBlink{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes caretDrift{
  0%{transform:translateY(0);opacity:0}
  20%{opacity:.8}
  100%{transform:translateY(-80px);opacity:0}
}

/* Dashboard parallax layer spreadsheet */
.app-page .fx-stage{will-change:transform}
.app-page .fx-parallax-layer{
  position:absolute;inset:-8%;pointer-events:none;will-change:transform
}
.app-page .parallax-deep{z-index:0}
.app-page .parallax-mid{z-index:1}
.app-page .parallax-near{z-index:2}

/* Dashboard cyber floor (lighter) */
.app-page .fx-cyber-floor{
  height:42vh;opacity:.32;bottom:-5%;
  animation-duration:7s
}
.login-page .fx-cyber-floor{opacity:.55;height:48vh}

/* Stronger keyword orbit on both pages */
.kw-orbit .kw-node{
  color:rgba(103,232,249,.42);
  text-shadow:0 0 14px rgba(236,72,153,.35);
  border:1px solid rgba(236,72,153,.12);
  padding:2px 6px;border-radius:4px;
  background:rgba(6,18,36,.25)
}
.app-page .kw-orbit .kw-node{color:rgba(129,140,248,.32)}
@keyframes kwFloat{
  0%{opacity:0;transform:translateY(24px) scale(.85) rotate(-4deg)}
  12%{opacity:.55}
  50%{opacity:.45;transform:translateY(-20px) scale(1) rotate(2deg)}
  88%{opacity:.4}
  100%{opacity:0;transform:translateY(-70px) scale(1.12) rotate(6deg)}
}

/* Speed-tuned ribbon path remains faster via JS duration */

@media(max-width:768px){
  .fx-cyber-floor{display:none}
  .fx-ribbon{display:none}
  .neon-circuit{display:none}
  .fx-code-rain,.fx-radar,.fx-constellation,
  .fx-code-frames,.fx-term-stream,.fx-hex-grid,
  .fx-rank-badges,.fx-carets,.fx-status-chips,
  .fx-code-editor,.fx-brackets,.fx-cascade,.fx-code-trail,.fx-cursor-pulse{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .fx-cyber-floor,.fx-ribbon,.neon-circuit,.card-holo,
  .card-beam-line,.seo-bar-fill::after,.kw-orbit,
  .login-card-scan,.btn-login::after,.btn-fire::after,
  .fx-code-rain,.fx-radar,.fx-constellation,
  .fx-code-frames,.fx-term-stream,.fx-hex-grid,
  .fx-rank-badges,.fx-carets,.fx-status-chips,
  .fx-code-editor,.fx-brackets,.fx-cascade,.fx-code-trail,.fx-cursor-pulse{
    animation:none!important;display:none!important
  }
  .is-reveal{opacity:1!important;transform:none!important}
  .card-holo{display:none}
}


/* ===== v4.7.3 REAL CODING ANIMATIONS (no plain-text spam) ===== */

/* hard-kill leftover spam classes */
.fx-cascade,.fx-brackets,.fx-code-rain{display:none!important}

/* Matrix canvas rain */
.fx-matrix{
  position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden;
  opacity:.55;
  mask-image:radial-gradient(ellipse at 50% 42%, #000 18%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 42%, #000 18%, transparent 78%);
}
.fx-matrix.is-app{opacity:.32}
.fx-matrix canvas{width:100%;height:100%;display:block}

/* Premium IDE panel */
.fx-code-editor{
  position:fixed; z-index:3; pointer-events:none;
  width:min(340px,36vw);
  right:3%; bottom:11%;
  border-radius:14px; overflow:hidden;
  background:
    linear-gradient(165deg,rgba(7,18,36,.94),rgba(4,10,22,.9));
  border:1px solid rgba(236,72,153,.4);
  box-shadow:
    0 0 0 1px rgba(219,39,119,.12),
    0 24px 60px rgba(0,0,0,.5),
    0 0 50px rgba(219,39,119,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transform-style:preserve-3d; perspective:900px;
  opacity:.95;
  --mx:50%; --my:40%;
  font-family:var(--font-mono);
  transition: box-shadow .35s, border-color .35s;
}
.fx-code-editor.ce-switch{
  border-color:rgba(167,139,250,.7);
  box-shadow:0 0 0 1px rgba(167,139,250,.25),0 24px 60px rgba(0,0,0,.5),0 0 60px rgba(167,139,250,.28);
}
.fx-code-editor::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(236,72,153,.16), transparent 55%);
}
.fx-code-editor::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:repeating-linear-gradient(
    180deg,
    transparent 0 2px,
    rgba(0,0,0,.08) 2px 3px
  );
  opacity:.35; mix-blend-mode:multiply;
}
.fx-code-editor.is-app{
  width:min(300px,30vw); right:auto; left:2%; bottom:8%; opacity:.82;
}
.fx-code-editor .ce-chrome{position:relative; z-index:4}
.fx-code-editor .ce-bar{
  display:flex; align-items:center; gap:6px;
  padding:9px 12px 6px;
  background:linear-gradient(180deg,rgba(12,28,52,.9),rgba(8,18,36,.75));
  font-size:10px; letter-spacing:.1em; color:rgba(148,163,184,.85)
}
.fx-code-editor .ce-dot{width:9px;height:9px;border-radius:50%;box-shadow:0 0 6px currentColor}
.fx-code-editor .ce-dot.r{background:#f87171;color:#f87171}
.fx-code-editor .ce-dot.y{background:#fbbf24;color:#fbbf24}
.fx-code-editor .ce-dot.g{background:#34d399;color:#34d399}
.fx-code-editor .ce-title{margin-left:8px;color:rgba(103,232,249,.9);flex:1;font-weight:600}
.fx-code-editor .ce-tab{
  padding:2px 8px; border-radius:6px;
  background:rgba(236,72,153,.12); color:rgba(186,230,253,.85);
  border:1px solid rgba(236,72,153,.22); font-size:9px; letter-spacing:.04em
}
.fx-code-editor .ce-live{
  display:inline-flex; align-items:center; gap:5px;
  color:rgba(52,211,153,.95); font-size:9px; font-weight:700; letter-spacing:.14em
}
.fx-code-editor .ce-live i{
  width:6px;height:6px;border-radius:50%;background:#34d399;
  box-shadow:0 0 10px #34d399; animation:ceLive 1.1s ease-in-out infinite
}
@keyframes ceLive{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.fx-code-editor .ce-path{
  padding:0 12px 7px; font-size:9px; color:rgba(100,116,139,.85);
  border-bottom:1px solid rgba(236,72,153,.12);
  background:rgba(6,14,28,.55)
}
.fx-code-editor .ce-work{
  position:relative; z-index:4;
  display:grid; grid-template-columns:28px 1fr 22px;
  min-height:148px; max-height:190px;
}
.fx-code-editor .ce-gutter{
  padding:10px 0; text-align:right;
  background:rgba(4,12,24,.55);
  border-right:1px solid rgba(236,72,153,.08);
  font-size:10px; line-height:1.6; color:rgba(100,116,139,.7);
  user-select:none
}
.fx-code-editor .ce-gutter span{display:block; padding-right:8px}
.fx-code-editor .ce-gutter span.on{color:rgba(103,232,249,.95); text-shadow:0 0 8px rgba(236,72,153,.6)}
.fx-code-editor .ce-body{
  position:relative; margin:0; padding:10px 10px 14px 8px;
  font-size:11.5px; line-height:1.6;
  color:rgba(186,230,253,.88); overflow:hidden;
}
.fx-code-editor .ce-ln{display:block; white-space:pre; border-radius:3px; padding:0 4px; margin:0 -4px}
.fx-code-editor .ce-ln.is-active{
  background:linear-gradient(90deg,rgba(236,72,153,.12),rgba(236,72,153,.02));
  box-shadow:inset 2px 0 0 rgba(236,72,153,.75)
}
.fx-code-editor .ce-k{color:#c4b5fd}
.fx-code-editor .ce-s{color:#6ee7b7}
.fx-code-editor .ce-c{color:#b08aa4;font-style:italic}
.fx-code-editor .ce-n2{color:#fbbf24}
.fx-code-editor .ce-caret{
  display:inline-block; width:7px; height:14px; margin-left:1px;
  background:rgba(236,72,153,.95); box-shadow:0 0 12px rgba(236,72,153,.85);
  animation:ceCaret .65s steps(1) infinite; vertical-align:-2px
}
@keyframes ceCaret{0%,50%{opacity:1}51%,100%{opacity:0}}
.fx-code-editor .ce-map{
  display:flex; flex-direction:column; gap:3px; justify-content:flex-start;
  padding:10px 5px; background:rgba(4,12,24,.4);
  border-left:1px solid rgba(236,72,153,.08)
}
.fx-code-editor .ce-map i{
  display:block; height:3px; border-radius:2px;
  animation:mapPulse 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i,0) * .1s)
}
.fx-code-editor .ce-map i:nth-child(odd){animation-duration:1.8s}
@keyframes mapPulse{0%,100%{opacity:.35}50%{opacity:1}}
.fx-code-editor .ce-status{
  position:relative; z-index:4;
  display:flex; justify-content:space-between; gap:8px;
  padding:5px 10px; font-size:9px; letter-spacing:.06em;
  color:rgba(148,163,184,.8);
  background:rgba(6,16,32,.85);
  border-top:1px solid rgba(236,72,153,.12)
}
.fx-code-editor .ce-ok{color:rgba(52,211,153,.9)}
.fx-code-editor .ce-ok b{color:#f9a8d4; font-weight:700}
.fx-code-editor .ce-rank{
  color:#fde68a; text-shadow:0 0 10px rgba(251,191,36,.45); font-weight:700
}
.fx-code-editor .ce-scan{
  position:absolute; left:0; right:0; height:28%; z-index:5; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(236,72,153,.07),transparent);
  animation:ceScan 3.6s ease-in-out infinite;
  mix-blend-mode:screen
}
@keyframes ceScan{
  0%{top:-30%; opacity:0}
  15%{opacity:1}
  85%{opacity:.6}
  100%{top:100%; opacity:0}
}

/* Terminal HUD window */
.fx-term-hud{
  position:fixed; z-index:3; pointer-events:none;
  width:min(320px,34vw);
  left:3%; bottom:12%;
  border-radius:12px; overflow:hidden;
  background:linear-gradient(160deg,rgba(4,14,28,.92),rgba(2,8,18,.88));
  border:1px solid rgba(52,211,153,.35);
  box-shadow:0 20px 50px rgba(0,0,0,.48),0 0 40px rgba(16,185,129,.12);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transform-style:preserve-3d;
  font-family:var(--font-mono); opacity:.93
}
.fx-term-hud.is-app{
  left:auto; right:2.5%; bottom:9%; width:min(280px,28vw); opacity:.8
}
.fx-term-hud .th-bar{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-bottom:1px solid rgba(52,211,153,.14);
  background:rgba(6,20,36,.75); font-size:10px; color:rgba(148,163,184,.85)
}
.fx-term-hud .th-dots{display:flex; gap:5px}
.fx-term-hud .th-dots i{width:8px;height:8px;border-radius:50%}
.fx-term-hud .th-dots i:nth-child(1){background:#f87171}
.fx-term-hud .th-dots i:nth-child(2){background:#fbbf24}
.fx-term-hud .th-dots i:nth-child(3){background:#34d399}
.fx-term-hud .th-title{flex:1; color:rgba(110,231,183,.85); letter-spacing:.08em}
.fx-term-hud .th-pill{
  padding:2px 7px; border-radius:999px; font-size:8px; letter-spacing:.12em;
  border:1px solid rgba(52,211,153,.35); color:rgba(167,243,208,.9);
  background:rgba(16,185,129,.1); animation:ceLive 1.4s ease-in-out infinite
}
.fx-term-hud .th-body{
  padding:10px 12px 12px; min-height:120px; max-height:150px; overflow:hidden;
  font-size:11px; line-height:1.55; color:rgba(186,230,253,.78)
}
.fx-term-hud .th-ln{margin:0 0 4px; white-space:pre-wrap; word-break:break-all}
.fx-term-hud .th-ln.cmd{color:rgba(226,232,240,.92)}
.fx-term-hud .th-ln.out{
  color:rgba(110,231,183,.9); text-shadow:0 0 10px rgba(52,211,153,.25);
  padding-left:14px; animation:thOut .35s ease
}
@keyframes thOut{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.fx-term-hud .th-p{color:#34d399; font-weight:700; margin-right:4px}
.fx-term-hud .th-path{color:#f9a8d4; margin-right:6px}
.fx-term-hud .th-care{
  display:inline-block; width:7px; height:12px; margin-left:2px;
  background:#6ee7b7; box-shadow:0 0 8px #34d399;
  animation:ceCaret .6s steps(1) infinite; vertical-align:-1px
}

/* Short neon glyph chips (badges, not bare text) */
.fx-code-chips{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.fx-chip-g{
  position:absolute; left:0; top:0;
  padding:5px 9px; border-radius:8px;
  font-family:var(--font-mono); font-weight:700; font-size:12px;
  letter-spacing:.06em;
  color:rgba(103,232,249,.92);
  background:rgba(6,18,36,.55);
  border:1px solid rgba(236,72,153,.35);
  box-shadow:0 0 18px rgba(219,39,119,.22), inset 0 0 12px rgba(236,72,153,.06);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  text-shadow:0 0 12px rgba(236,72,153,.45);
  will-change:transform; opacity:.88
}
.fx-chip-g.hot{
  color:rgba(167,243,208,.95); border-color:rgba(52,211,153,.4);
  box-shadow:0 0 20px rgba(16,185,129,.25), inset 0 0 12px rgba(52,211,153,.08);
  text-shadow:0 0 12px rgba(52,211,153,.5)
}
.fx-chip-g.vio{
  color:rgba(196,181,253,.95); border-color:rgba(167,139,250,.4);
  box-shadow:0 0 20px rgba(168,85,247,.25), inset 0 0 12px rgba(167,139,250,.08);
  text-shadow:0 0 12px rgba(167,139,250,.5)
}

/* cursor trail pills */
.fx-code-trail{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.fx-trail-tok{
  position:absolute; font-family:var(--font-mono); font-size:10px; font-weight:700;
  padding:3px 7px; border-radius:6px;
  color:rgba(103,232,249,.95); letter-spacing:.06em;
  background:rgba(6,18,36,.7); border:1px solid rgba(236,72,153,.4);
  box-shadow:0 0 14px rgba(236,72,153,.35);
  animation:trailPop .78s ease forwards;
  transform:translate(-50%,-50%);
  pointer-events:none
}
.fx-trail-tok.hot{
  color:rgba(244,114,182,.95); border-color:rgba(244,114,182,.45);
  box-shadow:0 0 14px rgba(244,114,182,.4)
}
@keyframes trailPop{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.55)}
  18%{opacity:1}
  100%{opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(.8)}
}

/* cursor pulse */
.fx-cursor-pulse{
  position:fixed; left:0; top:0; z-index:4; pointer-events:none;
  width:0; height:0; opacity:0; transition:opacity .25s; margin:0
}
.fx-cursor-pulse.on{opacity:1}
.fx-cursor-pulse i{
  position:absolute; left:0; top:0; width:14px; height:14px;
  margin:-7px 0 0 -7px; border-radius:50%;
  border:1px solid rgba(236,72,153,.5);
  box-shadow:0 0 14px rgba(236,72,153,.3);
  animation:cPulse 1.5s ease-out infinite
}
.fx-cursor-pulse i:nth-child(2){animation-delay:.32s; border-color:rgba(167,139,250,.45)}
.fx-cursor-pulse i:nth-child(3){animation-delay:.64s; border-color:rgba(52,211,153,.4)}
@keyframes cPulse{
  0%{transform:scale(.35); opacity:.75}
  100%{transform:scale(4.8); opacity:0}
}

/* live code frames flash */
.fx-code-frame.cf-flash{
  border-color:rgba(167,139,250,.7)!important;
  box-shadow:0 0 36px rgba(168,85,247,.35),inset 0 0 24px rgba(167,139,250,.1)!important
}
.fx-code-frame:nth-child(odd){animation-timing-function:ease-in-out}
.fx-code-frame:nth-child(even){filter:hue-rotate(14deg)}
.fx-rank:nth-child(3n){border-color:rgba(167,139,250,.45)}
.fx-rank:nth-child(3n+1){border-color:rgba(52,211,153,.4)}
.fx-chip:nth-child(odd)::before{background:rgba(167,139,250,.9); box-shadow:0 0 10px rgba(167,139,250,.7)}
.fx-chip:nth-child(3n)::before{background:rgba(52,211,153,.9); box-shadow:0 0 10px rgba(52,211,153,.7)}

/* responsive */
@media(max-width:1100px){
  .fx-code-editor{width:min(280px,34vw)}
  .fx-code-editor .ce-body{font-size:10.5px}
  .fx-term-hud{width:min(270px,32vw)}
}
@media(max-width:900px){
  .fx-code-editor,.fx-term-hud{display:none!important}
  .fx-matrix{opacity:.4}
}
@media(max-width:768px){
  .fx-matrix,.fx-code-chips,.fx-code-trail,.fx-cursor-pulse{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .fx-matrix,.fx-code-editor,.fx-term-hud,.fx-code-chips,.fx-code-trail,.fx-cursor-pulse,
  .fx-cascade,.fx-brackets,.fx-code-rain{
    animation:none!important; display:none!important
  }
}

.app-page .fx-stage.app-fx{opacity:.92}
.app-page .fx-code-editor,.app-page .fx-term-hud{z-index:2}
.login-page .fx-code-editor,.login-page .fx-term-hud{z-index:3}

/* ===== v4.7.7 ZERO GLITCH DASH + 90FPS + CURSOR CODE TRAIL ===== */

/* --- Total glitch purge (all pages) --- */
.glitch::before,
.glitch::after,
h1.glitch::before,
h1.glitch::after,
.login-brand h1.glitch::before,
.login-brand h1.glitch::after,
.login-page .login-brand h1.glitch::before,
.login-page .login-brand h1.glitch::after{
  content:none!important;
  display:none!important;
  animation:none!important;
  opacity:0!important
}
.glitch,
h1.glitch,
.login-brand h1.glitch,
.login-page .login-brand h1.glitch,
.stat-glitch,
.stat-glitch.glitching,
.glitching{
  animation:none!important;
  transform:none!important;
  clip-path:none!important;
  text-shadow:none!important;
  filter:drop-shadow(0 0 14px rgba(236,72,153,.32))!important
}

/* Login DIGITALGOKIL — static premium gradient */
.login-page .login-brand h1.glitch{
  position:relative!important;
  background:linear-gradient(90deg,#fff 8%,#f9a8d4 38%,#a855f7 68%,#a78bfa 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  filter:drop-shadow(0 0 16px rgba(236,72,153,.4))!important;
  animation:none!important;
  transform:none!important;
  opacity:1!important
}

/* Logo static */
.brand-mark,
.brand-mark.has-logo,
.brand-mark::before,
.brand-mark::after,
.brand-orbit,
.brand-orbit.o2,
.brand-mark svg,
.brand-logo-img,
.brand-mark.has-logo .brand-logo,
.brand-mark.has-logo img,
.sidebar-logo,
.sidebar-logo.has-logo,
.sidebar-logo-img,
.login-page .brand-mark,
.login-page .brand-mark.has-logo,
.login-page .brand-mark::before,
.login-page .brand-mark::after,
.login-page .brand-orbit,
.login-page .brand-mark svg,
.login-page .brand-logo-img{
  animation:none!important
}
.login-page .brand-mark.has-logo,
.login-page .brand-logo-img{
  filter:drop-shadow(0 0 12px rgba(236,72,153,.4))!important
}
.login-page .brand-mark::before,
.login-page .brand-mark::after{
  opacity:.4!important;
  transform:none!important
}

/* Dashboard: kill remaining glitchy / strobing bits */
.app-page .fx-caret,
.app-page .fx-carets,
.fx-caret,
.fx-carets{
  display:none!important;
  animation:none!important
}
.app-page .card-holo,
.card-holo,
.card:hover .card-holo,
.mode-opt:hover .card-holo,
.tile:hover .card-holo{
  animation:none!important;
  opacity:0!important;
  display:none!important
}
.app-page .neon-circuit,
.neon-circuit,
.neon-circuit path{
  animation:none!important;
  display:none!important
}
.app-page .card-beam-line,
.app-page .card-beam-line::before,
.card-beam-line,
.card-beam-line::before,
.card-scan,
.login-card-scan,
.radar-blip,
.radar-beam,
.fx-radar,
.kw-orbit,
.map-pulse{
  animation:none!important;
  display:none!important
}
.mode-opt.active,
.online-dot,
.live-sq,
.pulse-tag,
.chip.live::before,
.topbar .chip.live::before,
.login-card-hdr .hdr-left .dot,
.sidebar-logo,
.sq-blink,
.fx-rank,
.app-page .fx-rank{
  animation:none!important
}
.app-page .fx-rank{
  opacity:.72!important;
  transform:none!important
}

.btn-login,
.btn-fire,
.btn-primary,
.fx-term-hud .th-pill,
.fx-code-editor .ce-live i,
.fx-code-editor .ce-scan,
.fx-code-frame.cf-flash,
.auth-scan,
.auth-scan-h,
.brand-sub::after,
.login-brand .brand-sub::after,
[class*="glitch"]{
  animation:none!important
}
.login-brand .brand-sub::after,
.brand-sub::after{
  content:none!important;
  display:none!important
}

.btn-login,.btn-fire,.btn-primary{
  animation:none!important;
  background:linear-gradient(105deg,#9f1239 0%,#db2777 40%,#ec4899 72%,#818cf8 100%)!important;
  background-size:100% 100%!important;
  box-shadow:0 0 0 1px rgba(236,72,153,.4),0 10px 28px rgba(219,39,119,.4)!important;
  filter:none!important;
  transition:filter .18s ease, transform .18s ease, box-shadow .18s ease!important
}
.btn-login:hover,.btn-fire:hover,.btn-primary:hover{
  filter:brightness(1.08)!important;
  transform:translateY(-1px)
}
.auth-rings .ring,
.auth-rings .r1,.auth-rings .r2,.auth-rings .r3,.auth-rings .r4,
.card-beam{
  animation:none!important
}
.card-beam{opacity:.7!important}

.fx-code-editor .ce-caret,
.fx-code-editor .ce-scan,
.fx-term-hud .th-cursor{
  animation:none!important;
  opacity:.85!important
}
.fx-matrix{opacity:.78}
.app-page .fx-matrix{opacity:.42}
.fx-rain,.fx-stream,.fx-cursor-pulse{display:none!important}

/* Cursor CODE trail restored */
.fx-code-trail{
  display:block!important;
  position:fixed!important;
  inset:0!important;
  z-index:6!important;
  pointer-events:none!important;
  overflow:hidden!important
}
.fx-trail-tok{
  position:fixed!important;
  left:0!important;top:0!important;
  margin:0!important;
  padding:3px 7px!important;
  border-radius:6px!important;
  font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;
  letter-spacing:.04em!important;
  color:#fbcfe8!important;
  background:rgba(6,24,42,.78)!important;
  border:1px solid rgba(236,72,153,.4)!important;
  box-shadow:0 0 14px rgba(236,72,153,.22)!important;
  pointer-events:none!important;
  will-change:transform,opacity!important;
  animation:lgTrailFly .7s cubic-bezier(.16,.84,.28,1) forwards!important;
  backface-visibility:hidden!important
}
.fx-trail-tok.hot{
  color:#f5d0fe!important;
  border-color:rgba(244,114,182,.45)!important;
  box-shadow:0 0 16px rgba(167,139,250,.28)!important
}
@keyframes lgTrailFly{
  0%{
    opacity:.95;
    transform:translate3d(var(--x,0px),var(--y,0px),0) scale(1)
  }
  100%{
    opacity:0;
    transform:translate3d(
      calc(var(--x,0px) + var(--dx,12px)),
      calc(var(--y,0px) + var(--dy,-28px)),
      0
    ) rotate(var(--r,0deg)) scale(.88)
  }
}

.login-card.is-tilt,
.login-card.is-tilt .login-brand,
.login-card.is-tilt .login-card-hdr,
.login-card.is-tilt form,
.login-card.is-tilt .login-card-foot,
.fx-code-editor,
.fx-term-hud,
.fx-code-chips .fx-chip-g,
.fx-matrix,
.login-page .fx-stage > *,
.app-page .fx-stage > *,
.parallax-layer,
.login-page .fx-stage,
.login-page .auth-rings,
.login-page .fx-aurora,
.app-page .fx-stage,
.app-page .fx-aurora{
  transition:none!important
}
.fx-code-editor,
.fx-term-hud,
.fx-matrix{
  will-change:transform;
  backface-visibility:hidden;
  transform:translateZ(0)
}

.fx-hex-grid,.fx-cyber-floor{opacity:.5}
.app-page .fx-hex-grid,.app-page .fx-cyber-floor{opacity:.32}
.login-card,.app .card{transform:translateZ(0)}
.app-page .fx-status-chips,
.app-page .fx-rank-badges{opacity:.7}

/* Override media-query hide of trail on wide desktop: only hide below 900px which already exists earlier */
@media (min-width:901px){
  .fx-code-trail{display:block!important}
}


/* v4.7.7b — harden dash calm: kill remaining blinky/glitchy continuous anims */
.app-page .online-dot,
.app-page b.online,
.app-page .chip.live,
.app-page .chip.live::before,
.app-page .topbar .chip,
.app-page [class*="online"],
.app-page .map-pulse,
.app-page i.map-pulse,
.app-page .fx-code-frame,
.app-page .fx-chip,
.app-page .fx-status-chips .fx-chip,
.app-page .tileSelect,
.app-page .mode-opt.active{
  animation:none!important
}
/* keep entrance fade once but freeze looping ambients that feel like stutter */
.app-page .fx-aurora,
.app-page .fx-grid,
.app-page .fx-cyber-floor,
.app-page .fx-hex-grid{
  animation:none!important
}
.app-page .th-ln,
.app-page .tl,
.app-page .term-line{
  animation-duration:1.2s!important
}
/* softer chipGlow if any remains */
@keyframes onlineBlink{0%,100%{opacity:1}50%{opacity:1}}
@keyframes chipGlow{0%,100%{box-shadow:none;opacity:1}50%{box-shadow:none;opacity:1}}
@keyframes mapPulse{0%,100%{opacity:.5}50%{opacity:.5}}
@keyframes chipFloat{0%,100%{transform:none}50%{transform:none}}
@keyframes frameDrift{0%,100%{transform:none}50%{transform:none}}
@keyframes hexShift{0%,100%{transform:none}50%{transform:none}}
@keyframes floorRide{0%,100%{transform:none}50%{transform:none}}
@keyframes gridRide{0%,100%{transform:none}50%{transform:none}}
@keyframes auroraFloat{0%,100%{transform:none;opacity:.5}50%{transform:none;opacity:.5}}

/* force no-blink on known dash glitch selectors */
.topbar-actions .chip.live b,
.app-page .chip.live b,
.fx-code-editor .ce-map i,
.app-page .fx-code-editor .ce-map i,
.fx-code-editor .ce-caret,
.app-page .fx-code-editor .ce-status .spin,
.live-sq{
  animation:none!important;
  opacity:1!important;
  text-shadow:none!important
}



/* ========== CODE EDITOR · VS Code Dark+ v4.8.3 ========== */
body.editor-mode .fx-stage,
body.editor-mode .fx-cursor,
body.editor-mode .page-hero-chips,
body.editor-mode .seo-rail,
body.editor-mode .floating-code-chips{display:none!important}
body.editor-mode .app,
body.editor-mode .main{background:#1e1e1e}
body.editor-mode .topbar{
  background:#3c3c3c;border-bottom:1px solid #252526;
  min-height:35px;padding:0 10px;box-shadow:none;
}
body.editor-mode .topbar-title h2{font-size:13px;font-weight:500;letter-spacing:0;color:#ccc}
body.editor-mode .topbar-title p{display:none}
body.editor-mode .topbar-actions .chip{background:#2d2d2d;border-color:#3c3c3c;color:#bbb;font-size:11px}
body.editor-mode .topbar-actions .chip:not(.chip-ver){display:none}
body.editor-mode .content.content-editor{
  padding:0!important;margin:0!important;max-width:none!important;
  height:calc(100vh - 48px);display:flex;flex-direction:column;
  min-height:0;overflow:hidden;
}
body.editor-mode .sidebar{background:#252526;border-right:1px solid #1e1e1e}
body.editor-mode .sidebar-head,body.editor-mode .sidebar-foot{border-color:#2b2b2b}
body.editor-mode .nav-item.active{
  background:rgba(255,255,255,.08);border-color:transparent;box-shadow:none;color:#fff
}

.ced-shell{
  --ced-bg:#1e1e1e;
  --ced-side:#252526;
  --ced-act:#181818;
  --ced-tab:#2d2d2d;
  --ced-tab-active:#1e1e1e;
  --ced-border:#1e1e1e;
  --ced-border2:#3c3c3c;
  --ced-text:#cccccc;
  --ced-muted:#858585;
  --ced-hover:#2a2d2e;
  --ced-active:#37373d;
  --ced-focus:#86198f;
  --ced-accent:#db2777;
  --ced-accent2:#9d174d;
  --ced-selection:#a21caf;
  --ced-line:#2a2d2e;
  --ced-guide:#404040;
  --ced-font:Consolas,"Cascadia Code","Courier New",ui-monospace,monospace;
  --ced-fs:13px;
  --ced-lh:20px;
  /* VS Code Dark+ tokens */
  --tok-tag:#808080;
  --tok-name:#569cd6;
  --tok-attr:#9cdcfe;
  --tok-str:#ce9178;
  --tok-cmt:#6a9955;
  --tok-kw:#c586c0;
  --tok-num:#b5cea8;
  --tok-punct:#d4d4d4;
  --tok-php:#569cd6;
  --tok-entity:#d7ba7d;
  --tok-var:#9cdcfe;
  --tok-fn:#dcdcaa;
  --tok-plain:#d4d4d4;
  display:grid;
  grid-template-columns:48px 260px 1fr;
  height:100%;min-height:0;
  background:var(--ced-bg);color:var(--ced-text);
  border:0;border-radius:0;box-shadow:none;
  overflow:hidden;position:relative;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.ced-shell.sidebar-collapsed{grid-template-columns:48px 0 1fr}
.ced-shell.sidebar-collapsed .ced-sidebar{width:0;overflow:hidden;border:0;opacity:0;pointer-events:none}

/* Activity bar */
.ced-activity{
  background:var(--ced-act);
  display:flex;flex-direction:column;align-items:center;
  padding:6px 0 8px;gap:2px;border-right:1px solid #2b2b2b;
  z-index:2;
}
.ced-act{
  width:48px;height:48px;display:grid;place-items:center;
  border:0;background:transparent;color:#858585;cursor:pointer;
  position:relative;border-radius:0;transition:color .12s ease;
}
.ced-act:hover{color:#fff}
.ced-act.on{color:#fff}
.ced-act.on::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;
  background:#fff;border-radius:0 2px 2px 0;
}
.ced-act-spacer{flex:1;min-height:12px}

.ced-sidebar{
  background:var(--ced-side);
  border-right:1px solid var(--ced-border);
  display:flex;flex-direction:column;min-width:0;min-height:0;
  transition:opacity .15s ease;
}
.ced-side-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 8px 8px 16px;height:35px;box-sizing:border-box;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);
}
.ced-side-title{
  font-size:11px;font-weight:700;letter-spacing:.08em;
  color:#bbb;text-transform:uppercase;
}
.ced-side-actions{display:flex;gap:2px}
.ced-ico{
  width:24px;height:24px;display:inline-grid;place-items:center;
  border-radius:4px;color:var(--ced-text);
  border:0;background:transparent;padding:0;cursor:pointer;opacity:.9;
  font-size:14px;line-height:1;color:#ccc;
}
.ced-ico:hover{background:rgba(255,255,255,.1);color:#fff}
.ced-side-section{border-bottom:1px solid #2b2b2b;padding-bottom:4px;max-height:140px;overflow:auto}
.ced-folder{flex:1;overflow:auto;min-height:0;padding:0 0 8px}
.ced-folder-label{
  display:flex;align-items:center;gap:4px;
  padding:6px 8px 4px;font-size:11px;font-weight:700;letter-spacing:.03em;
  color:#ccc;text-transform:uppercase;user-select:none;cursor:default;
}
.ced-folder-ico{flex:0 0 auto;opacity:.95}
.ced-chev{width:12px;font-size:10px;color:#ccc;display:inline-block}
.ced-files{list-style:none;margin:0;padding:0}
.ced-empty{padding:8px 16px;color:var(--ced-muted);font-size:12px;line-height:1.45}
.ced-empty.soft{padding:4px 16px 8px;font-size:11px;opacity:.85}
.ced-file{
  width:100%;display:flex;align-items:center;gap:6px;
  padding:2px 10px 2px 16px;text-align:left;color:var(--ced-text);
  border:0;background:transparent;cursor:pointer;
  font-size:13px;font-family:inherit;line-height:22px;position:relative;
  border-radius:0;
}
.ced-file:hover{background:var(--ced-hover)}
.ced-file.active{background:var(--ced-active);color:#fff}
.ced-file.active::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ced-accent);
}
.ced-file.dirty .ced-file-name{font-style:italic}
.ced-file-ico{
  flex:0 0 16px;width:16px;height:16px;border-radius:3px;
  background:linear-gradient(145deg,#e37933 0%,#c55a11 55%,#a0450e 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;
  position:relative;
}
.ced-file-ico::after{
  content:"</>";position:absolute;inset:0;display:grid;place-items:center;
  font-size:7px;font-weight:800;color:#1e1e1e;letter-spacing:-.5px;
  font-family:var(--ced-font);
}
.ced-file-ico.ext-php{
  background:linear-gradient(145deg,#9aa3d9 0%,#6c77b4 45%,#4f5b93 100%);
}
.ced-file-ico.ext-php::after{content:"php";font-size:6px;color:#fff;font-weight:700}
.ced-file-ico.ext-txt{
  background:linear-gradient(145deg,#c8c8c8 0%,#9a9a9a 55%,#6b6b6b 100%);
}
.ced-file-ico.ext-txt::after{content:"txt";font-size:6px;color:#1e1e1e}
.ced-file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ced-side-foot{
  padding:6px 12px;border-top:1px solid #2b2b2b;
  font-size:11px;color:var(--ced-muted);
  background:rgba(0,0,0,.15);
}

.ced-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--ced-bg)}
.ced-tabbar{
  display:flex;align-items:stretch;
  background:var(--ced-tab);border-bottom:1px solid #252526;
  min-height:35px;flex:0 0 auto;
}
.ced-tabs{display:flex;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none}
.ced-tabs::-webkit-scrollbar{display:none}
.ced-tabbar-actions{
  display:flex;align-items:center;gap:2px;padding:0 6px;
  border-left:1px solid #252526;background:#2d2d2d;
}
.ced-tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:0 12px;height:35px;border:0;border-right:1px solid #252526;
  background:var(--ced-tab);color:rgba(255,255,255,.5);
  font-size:13px;font-family:inherit;cursor:pointer;position:relative;
  max-width:200px;flex:0 0 auto;
}
.ced-tab.empty{cursor:default;color:var(--ced-muted)}
.ced-tab:hover{color:rgba(255,255,255,.8);background:#2a2a2a}
.ced-tab.active{
  background:var(--ced-tab-active);color:#fff;
  box-shadow:inset 0 -1px 0 var(--ced-bg);
}
.ced-tab.active::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#db2777,#3794ff);
}
.ced-tab-ico{
  width:14px;height:14px;border-radius:2px;flex:0 0 auto;
  background:linear-gradient(145deg,#e37933,#c55a11);
  box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;
}
.ced-tab-ico.ext-php{background:linear-gradient(145deg,#9aa3d9,#4f5b93)}
.ced-tab-ico.ext-txt{background:linear-gradient(145deg,#c8c8c8,#6b6b6b)}
.ced-tab-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.ced-tab-dot{width:8px;height:8px;border-radius:50%;background:transparent;flex:0 0 auto}
.ced-tab.dirty .ced-tab-dot{background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.ced-tab-close{
  opacity:0;width:18px;height:18px;display:inline-grid;place-items:center;
  border-radius:4px;font-size:14px;line-height:1;color:rgba(255,255,255,.55);flex:0 0 auto;
  font-family:system-ui,sans-serif;
}
.ced-tab:hover .ced-tab-close,.ced-tab.active .ced-tab-close{opacity:1}
.ced-tab-close:hover{background:rgba(255,255,255,.12);color:#fff}

.ced-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:34px;padding:0 10px;flex:0 0 auto;
  background:linear-gradient(180deg,#2a2a2b 0%,#252526 100%);
  border-bottom:1px solid #2b2b2b;
}
.ced-bread{
  display:flex;align-items:center;gap:6px;min-width:0;
  font-size:12px;color:#bbb;
}
.ced-bread-root{
  color:#9cdcfe;padding:1px 6px;border-radius:3px;
  background:rgba(156,220,254,.08);
}
.ced-bread-sep{color:#666}
.ced-bread-file{color:#e0e0e0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ced-toolbar-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.ced-fmt{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;color:#999;text-transform:uppercase;letter-spacing:.04em;
  margin-right:4px;
}
.ced-select{
  height:24px;padding:0 8px;border-radius:3px;
  background:#3c3c3c;border:1px solid #555;color:#ddd;
  font-size:12px;outline:none;cursor:pointer;
}
.ced-select:focus{border-color:var(--ced-accent);box-shadow:0 0 0 1px rgba(0,122,204,.35)}
.ced-tool{
  height:26px;padding:0 10px;border-radius:3px;border:0;
  background:transparent;color:var(--ced-text);font-size:12px;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;
  transition:background .12s ease,color .12s ease;
}
.ced-tool:hover{background:rgba(255,255,255,.08);color:#fff}
.ced-tool.primary{
  background:linear-gradient(180deg,#db2777 0%,#9d174d 100%);
  color:#fff;font-weight:500;
  box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;
}
.ced-tool.primary:hover{background:linear-gradient(180deg,#ec4899 0%,#be185d 100%)}
.ced-tool.on{
  background:rgba(14,99,156,.45);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,122,204,.55);
}
.ced-tool:disabled{opacity:.45;cursor:not-allowed}

.ced-find{
  display:flex;flex-direction:column;gap:6px;padding:8px 12px;
  background:#252526;border:1px solid var(--ced-border2);border-radius:0 0 6px 6px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  position:absolute;top:72px;right:14px;z-index:30;
  width:min(420px,calc(100% - 24px));
}
.ced-find[hidden]{display:none!important}
.ced-find-row{display:flex;align-items:center;gap:6px}
.ced-find-input{
  flex:1;min-width:0;height:26px;padding:0 8px;
  background:#3c3c3c;border:1px solid transparent;border-radius:3px;
  color:#ccc;font-family:var(--ced-font);font-size:13px;outline:none;
}
.ced-find-input:focus{border-color:var(--ced-accent)}
.ced-find-count{font-size:12px;color:var(--ced-muted);min-width:70px;text-align:right}

.ced-workspace{flex:1;display:flex;min-height:0;min-width:0;position:relative}
.ced-workspace.no-preview .ced-preview,
.ced-workspace.no-preview .ced-split{display:none!important}
.ced-workspace.no-preview .ced-editor{flex:1 1 auto!important;width:100%}
.ced-editor{
  flex:1 1 55%;display:flex;min-width:0;min-height:0;
  background:var(--ced-bg);position:relative;
}
.ced-gutter{
  flex:0 0 52px;overflow:hidden;
  background:var(--ced-bg);color:#858585;
  font-family:var(--ced-font);font-size:var(--ced-fs);line-height:var(--ced-lh);
  text-align:right;padding:10px 10px 10px 0;user-select:none;
  font-variant-numeric:tabular-nums;white-space:pre;box-sizing:border-box;
  border-right:1px solid transparent;
}
.ced-ln{display:block;padding-right:4px;color:#858585}
.ced-ln.on{color:#c6c6c6}

.ced-code-wrap{
  flex:1;min-width:0;min-height:0;position:relative;overflow:hidden;
}
.ced-line-hl{
  position:absolute;left:0;right:0;height:var(--ced-lh);
  background:var(--ced-line);
  border-left:2px solid transparent;
  pointer-events:none;z-index:0;opacity:1;
  transition:opacity .08s linear;
}
.ced-guides{
  position:absolute;inset:0;margin:0;padding:10px 14px 10px 0;
  overflow:hidden;pointer-events:none;z-index:0;
}
.ced-guide{
  position:absolute;top:0;bottom:0;width:1px;
  background:repeating-linear-gradient(
    to bottom,
    var(--ced-guide) 0,
    var(--ced-guide) 2px,
    transparent 2px,
    transparent 4px
  );
  opacity:.55;
}
.ced-highlight{
  position:absolute;inset:0;margin:0;padding:10px 14px 10px 0;
  overflow:hidden;pointer-events:none;z-index:1;
  font-family:var(--ced-font);font-size:var(--ced-fs);line-height:var(--ced-lh);
  white-space:pre;tab-size:2;color:#d4d4d4;
  background:transparent;
}
.ced-highlight.wrap,.ced-code.wrap{white-space:pre-wrap;word-break:break-word}
.ced-highlight code{font:inherit;display:block;min-height:100%}
.ced-code{
  position:absolute;inset:0;resize:none;border:0;outline:none;
  background:transparent;color:transparent;caret-color:#aeafad;
  font-family:var(--ced-font);font-size:var(--ced-fs);line-height:var(--ced-lh);
  padding:10px 14px 10px 0;tab-size:2;white-space:pre;overflow:auto;
  letter-spacing:0;z-index:2;
  -webkit-text-fill-color:transparent;
}
.ced-code::placeholder{color:#5a5a5a;-webkit-text-fill-color:#5a5a5a}
.ced-code::selection{background:var(--ced-selection);color:#fff;-webkit-text-fill-color:#fff}
@supports not (-webkit-text-fill-color: transparent){
  .ced-code{color:#d4d4d4}
}

/* token styles — stronger VS Dark+ contrast */
.tok-tag{color:var(--tok-tag)}
.tok-name{color:var(--tok-name)}
.tok-attr{color:var(--tok-attr)}
.tok-str{color:var(--tok-str)}
.tok-cmt{color:var(--tok-cmt);font-style:italic}
.tok-kw{color:var(--tok-kw)}
.tok-num{color:var(--tok-num)}
.tok-punct{color:var(--tok-punct)}
.tok-php{color:var(--tok-php);font-weight:600}
.tok-entity{color:var(--tok-entity)}
.tok-var{color:var(--tok-var)}
.tok-fn{color:var(--tok-fn)}
.tok-plain{color:var(--tok-plain)}

.ced-split{
  flex:0 0 5px;cursor:col-resize;background:#1e1e1e;position:relative;z-index:2;
}
.ced-split::after{
  content:"";position:absolute;inset:0 1px;background:transparent;
}
.ced-split:hover,.ced-split:hover::after,body.ced-resizing .ced-split{
  background:var(--ced-accent);
}
body.ced-resizing{cursor:col-resize;user-select:none}
.ced-preview{
  flex:1 1 45%;min-width:0;min-height:0;
  display:flex;flex-direction:column;background:#fff;
  border-left:1px solid var(--ced-border2);
}
.ced-preview[hidden]{display:none!important}
.ced-preview-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 8px;height:28px;background:#252526;
  border-bottom:1px solid var(--ced-border2);font-size:12px;color:var(--ced-text);flex:0 0 auto;
}
.ced-preview-title{display:inline-flex;align-items:center;gap:6px}
.ced-dot{
  width:8px;height:8px;border-radius:50%;background:#89d185;
  box-shadow:0 0 0 2px rgba(137,209,133,.2),0 0 8px rgba(137,209,133,.35);
}
.ced-preview-actions{display:flex;gap:2px}
.ced-preview iframe{flex:1;width:100%;border:0;background:#fff;min-height:0}

.ced-status{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0;height:22px;
  background:linear-gradient(90deg,#db2777 0%,#9d174d 55%,#a855f7 100%);
  color:#fff;font-size:12px;flex:0 0 auto;
}
.ced-status-l,.ced-status-r{display:flex;align-items:center;gap:0;min-width:0}
.ced-status span{
  white-space:nowrap;padding:0 8px;height:22px;display:inline-flex;align-items:center;
  border-right:1px solid rgba(255,255,255,.08);
}
.ced-status-l span{border-right:0;border-left:0}
.ced-status-chip{
  background:rgba(0,0,0,.12)!important;
  font-weight:500;
}
.ced-status-r span:hover{background:rgba(255,255,255,.12)}

.ced-modal{
  position:absolute;inset:0;z-index:50;display:grid;place-items:start center;
  padding-top:8vh;background:rgba(0,0,0,.38);
  backdrop-filter:blur(1.5px);
}
.ced-modal[hidden]{display:none!important}
.ced-modal-card{
  width:min(540px,92vw);background:#252526;border:1px solid #454545;
  border-radius:6px;box-shadow:0 18px 50px rgba(0,0,0,.55);overflow:hidden;
}
.ced-quick-input{
  width:100%;height:36px;padding:0 12px;border:0;outline:none;box-sizing:border-box;
  background:#3c3c3c;color:#ccc;font-size:14px;border-bottom:1px solid #2b2b2b;
}
.ced-quick-input:focus{outline:1px solid var(--ced-accent);outline-offset:-1px}
.ced-quick-list{list-style:none;margin:0;padding:4px 0;max-height:280px;overflow:auto}
.ced-quick-item{
  padding:6px 12px;font-size:13px;color:var(--ced-text);cursor:pointer;
  display:flex;align-items:center;gap:8px;
}
.ced-quick-item:hover,.ced-quick-item.on{background:var(--ced-focus);color:#fff}
.ced-empty-li{padding:14px;color:var(--ced-muted);font-size:12px;text-align:center}
.ced-modal-hint{
  padding:6px 12px;border-top:1px solid #2b2b2b;font-size:11px;color:var(--ced-muted);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.ced-modal-hint kbd{
  background:#3c3c3c;border:1px solid #555;border-radius:3px;padding:0 5px;font-size:10px;color:#ddd;
}
.ced-new-card,.ced-goto-card{padding:14px}
.ced-new-title{font-size:14px;font-weight:600;color:#fff;margin-bottom:12px}
.ced-new-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.ced-new-field > span{font-size:11px;color:#999;text-transform:uppercase;letter-spacing:.06em}
.ced-new-field .ced-quick-input{border:1px solid #3c3c3c;border-radius:4px;border-bottom:1px solid #3c3c3c}
.ced-new-formats{display:flex;gap:8px;margin-bottom:14px}
.ced-fmt-btn{
  flex:1;height:40px;border-radius:5px;border:1px solid #3c3c3c;
  background:#1e1e1e;color:#ccc;font-size:13px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:border-color .12s,background .12s,color .12s;
}
.ced-fmt-btn:hover{border-color:#555;color:#fff}
.ced-fmt-btn.on{border-color:var(--ced-accent);background:var(--ced-focus);color:#fff}
.ced-fmt-dot{
  width:10px;height:10px;border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.3) inset;
}
.ced-fmt-dot.html{background:#e37933}
.ced-fmt-dot.php{background:#8892bf}
.ced-fmt-dot.txt{background:#a0a0a0}
.ced-new-actions{display:flex;justify-content:flex-end;gap:8px}

@media (max-width:900px){
  .ced-shell{grid-template-columns:1fr;height:auto;min-height:70vh}
  .ced-activity{display:none}
  .ced-sidebar{max-height:180px;border-right:0;border-bottom:1px solid var(--ced-border)}
  body.editor-mode .content.content-editor{height:auto;min-height:calc(100vh - 48px);overflow:auto}
  .ced-workspace:not(.no-preview){flex-direction:column}
  .ced-split{display:none!important}
  .ced-preview{min-height:240px;border-left:0;border-top:1px solid var(--ced-border2)}
  .ced-toolbar{flex-wrap:wrap;height:auto;padding:6px 8px}
}


/* ========== SCRIPT GENERATOR v4.9.0 ========== */
.sg-shell{display:flex;flex-direction:column;gap:16px;max-width:1280px}
.sg-hero{
  display:flex;justify-content:space-between;gap:20px;align-items:stretch;
  padding:20px 22px;border:1px solid rgba(103,232,249,.18);
  background:
    radial-gradient(720px 180px at 10% -20%, rgba(14,99,156,.35), transparent 60%),
    radial-gradient(520px 160px at 90% 0%, rgba(244,63,94,.18), transparent 55%),
    linear-gradient(180deg, rgba(40,16,48,.95), rgba(8,12,22,.98));
}
.sg-hero-main{min-width:0;flex:1}
.sg-kicker{
  font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;letter-spacing:.14em;
  color:#f9a8d4;margin-bottom:6px;font-weight:700;
}
.sg-hero h3{margin:0 0 8px;font-size:22px;color:#f8fafc}
.sg-hero p{margin:0;color:#d8b4c8;line-height:1.55;max-width:62ch}
.sg-hero p b{color:#fce7f3}
.sg-flow{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sg-pill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
  font-size:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#f5e1ef;
}
.sg-pill i{width:8px;height:8px;border-radius:50%;display:inline-block;background:#b08aa4}
.sg-pill.good i{background:#34d399;box-shadow:0 0 10px rgba(52,211,153,.55)}
.sg-pill.bad i{background:#f43f5e;box-shadow:0 0 10px rgba(244,63,94,.55)}
.sg-pill.dns i{background:#f472b6;box-shadow:0 0 10px rgba(244,114,182,.5)}
.sg-hero-side{display:flex;flex-direction:column;gap:8px;min-width:120px}
.sg-stat{
  padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.08);
  background:rgba(10,4,16,.45);text-align:right;
}
.sg-stat span{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#b08aa4}
.sg-stat b{font-size:16px;color:#f8fafc}
.sg-grid{
  display:grid;grid-template-columns:minmax(280px,0.95fr) minmax(320px,1.2fr);
  gap:16px;align-items:start;
}
.sg-form-card .sg-fields{display:flex;flex-direction:column;gap:14px;padding:4px 2px 8px}
.sg-field{display:flex;flex-direction:column;gap:6px}
.sg-label{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12px;font-weight:600;color:#fce7f3;
}
.sg-label em{font-style:normal;font-weight:500;color:#b08aa4;font-size:11px}
.sg-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.sg-dot.good{background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.15)}
.sg-dot.bad{background:#f43f5e;box-shadow:0 0 0 3px rgba(244,63,94,.15)}
.sg-field small{color:#b08aa4;font-size:11px;line-height:1.4}
.sg-field code,.sg-help code{
  font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;
  background:rgba(148,163,184,.12);padding:1px 5px;border-radius:4px;color:#d8b4fe;
}
.sg-check{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.08);
  background:rgba(40,16,48,.55);color:#f5e1ef;font-size:13px;
}
.sg-check input{margin-top:2px;accent-color:#db2777}
.sg-actions{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0 4px}
.sg-msg{
  margin-top:10px;padding:10px 12px;border-radius:8px;font-size:13px;
  border:1px solid transparent;
}
.sg-msg.ok{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.35);color:#6ee7b7}
.sg-msg.err{background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.35);color:#fda4af}
.sg-code-card{min-width:0;display:flex;flex-direction:column}
.sg-code-head{align-items:flex-start}
.sg-code-tools{display:flex;gap:6px;flex-wrap:wrap}
.sg-code-wrap{
  border:1px solid rgba(255,255,255,.08);border-radius:10px;overflow:hidden;
  background:#140818;box-shadow:inset 0 0 0 1px rgba(244,114,182,.05);
}
.sg-code{
  width:100%;min-height:420px;max-height:min(62vh,640px);resize:vertical;
  border:0;outline:none;padding:14px 16px;box-sizing:border-box;
  background:transparent;color:#fce7f3;
  font:12.5px/1.55 Consolas,"Cascadia Code",ui-monospace,monospace;
  white-space:pre;tab-size:2;overflow:auto;
}
.sg-code-foot{
  display:flex;flex-direction:column;gap:4px;margin-top:10px;
  font-size:11px;color:#b08aa4;word-break:break-all;
}
.sg-code-foot b{color:#d8b4c8;font-weight:600}
.sg-help ol.sg-steps{margin:0;padding:0 0 4px 18px;color:#d8b4c8;line-height:1.65}
.sg-help ol.sg-steps li{margin-bottom:6px}
.sg-help ol.sg-steps b{color:#fce7f3}
@media (max-width:980px){
  .sg-grid{grid-template-columns:1fr}
  .sg-hero{flex-direction:column}
  .sg-hero-side{flex-direction:row;flex-wrap:wrap}
  .sg-stat{flex:1;min-width:90px;text-align:left}
}

/* === v5.0.0 · Script Catalog === */
.sg-layout{
  display:grid;
  grid-template-columns:minmax(300px,420px) 1fr;
  gap:16px;align-items:start;
}
.sg-catalog-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.sg-config-col{display:flex;flex-direction:column;gap:16px;min-width:0}

.sg-catalog-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:0 2px 8px;
}
.sg-catalog-head h4{margin:0;font-size:13px;font-weight:700;color:#fce7f3;letter-spacing:.02em}
.sg-search{
  width:160px;padding:5px 10px;font-size:12px;border-radius:8px;
  border:1px solid rgba(255,255,255,.1);background:rgba(10,4,16,.5);color:#fce7f3;
}
.sg-search:focus{border-color:rgba(244,114,182,.5);outline:none;box-shadow:0 0 0 2px rgba(244,114,182,.15)}
.sg-search::placeholder{color:#9f7a92}

.sg-catalog{
  display:flex;flex-direction:column;gap:8px;
  max-height:min(70vh,620px);overflow-y:auto;
  padding:2px 4px 2px 2px;
  scrollbar-width:thin;scrollbar-color:#3b1d48 transparent;
}
.sg-catalog::-webkit-scrollbar{width:6px}
.sg-catalog::-webkit-scrollbar-thumb{background:#3b1d48;border-radius:3px}
.sg-catalog::-webkit-scrollbar-track{background:transparent}

.sg-card{
  position:relative;cursor:pointer;
  padding:14px 16px;border-radius:12px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(40,16,48,.55);
  transition:border-color .18s,background .18s,transform .12s,box-shadow .18s;
  overflow:hidden;
  flex:0 0 auto; /* prevent flex shrink collapsing text under overflow:hidden */
  min-height:min-content;
}
.sg-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:3px 0 0 3px;opacity:.5;transition:opacity .18s,width .18s;
}
.sg-card:hover{
  border-color:rgba(244,114,182,.3);background:rgba(40,16,48,.8);
  transform:translateX(2px);
}
.sg-card:hover::before{opacity:1;width:4px}
.sg-card.active{
  border-color:rgba(244,114,182,.55);background:rgba(88,28,68,.6);
  box-shadow:0 0 0 1px rgba(244,114,182,.25),0 4px 20px rgba(244,114,182,.1);
}
.sg-card.active::before{opacity:1;width:4px}

.sg-card-top{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.sg-badge{
  font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;
  background:rgba(244,114,182,.15);color:#f9a8d4;border:1px solid rgba(244,114,182,.2);
}
.sg-tag{
  font-size:9px;font-weight:600;letter-spacing:.04em;
  padding:2px 6px;border-radius:5px;
  background:rgba(148,163,184,.12);color:#d8b4c8;
}
.sg-card-name{font-size:14px;font-weight:700;color:#fdf2f8;margin-bottom:4px;line-height:1.3;display:block}
.sg-card-desc{font-size:12px;color:#d8b4c8;line-height:1.55;margin-bottom:8px;display:block}
.sg-card-id{font-size:10px;color:#b08aa4;display:block}
.sg-card-id code{font-family:var(--font-mono,ui-monospace,monospace);font-size:10px;background:rgba(148,163,184,.1);padding:1px 5px;border-radius:3px;color:#b08aa4}

/* color variants — left bar */
.sg-color-red::before{background:#f43f5e}
.sg-color-orange::before{background:#fb923c}
.sg-color-purple::before{background:#a78bfa}
.sg-color-blue::before{background:#c084fc}
.sg-color-cyan::before{background:#ec4899}
.sg-color-green::before{background:#34d399}
.sg-color-teal::before{background:#2dd4bf}
.sg-color-yellow::before{background:#facc15}
.sg-color-slate::before{background:#d8b4c8}
.sg-color-pink::before{background:#f472b6}
.sg-color-gray::before{background:#6b7280}
.sg-color-lime::before{background:#a3e635}

/* badge color in form header */
.sg-color-chip-red{background:rgba(244,63,94,.15);color:#fda4af;border:1px solid rgba(244,63,94,.2)}
.sg-color-chip-orange{background:rgba(251,146,60,.15);color:#fdba74;border:1px solid rgba(251,146,60,.2)}
.sg-color-chip-purple{background:rgba(167,139,250,.15);color:#c4b5fd;border:1px solid rgba(167,139,250,.2)}
.sg-color-chip-blue{background:rgba(192,132,252,.15);color:#d8b4fe;border:1px solid rgba(192,132,252,.2)}
.sg-color-chip-cyan{background:rgba(236,72,153,.15);color:#f9a8d4;border:1px solid rgba(236,72,153,.2)}
.sg-color-chip-green{background:rgba(52,211,153,.15);color:#6ee7b7;border:1px solid rgba(52,211,153,.2)}
.sg-color-chip-teal{background:rgba(45,212,191,.15);color:#5eead4;border:1px solid rgba(45,212,191,.2)}
.sg-color-chip-yellow{background:rgba(250,204,21,.15);color:#fde047;border:1px solid rgba(250,204,21,.2)}
.sg-color-chip-slate{background:rgba(148,163,184,.15);color:#f5e1ef;border:1px solid rgba(148,163,184,.2)}
.sg-color-chip-pink{background:rgba(244,114,182,.15);color:#f9a8d4;border:1px solid rgba(244,114,182,.2)}
.sg-color-chip-gray{background:rgba(107,114,128,.15);color:#d1d5db;border:1px solid rgba(107,114,128,.2)}
.sg-color-chip-lime{background:rgba(163,230,53,.15);color:#bef264;border:1px solid rgba(163,230,53,.2)}

/* empty state */
.sg-empty{
  text-align:center;padding:60px 24px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.sg-empty-icon{font-size:40px;opacity:.5;filter:grayscale(.3)}
.sg-empty h3{margin:0;font-size:15px;color:#d8b4c8;font-weight:600}
.sg-empty p{margin:0;font-size:13px;color:#9f7a92;max-width:300px;line-height:1.5}

/* responsive */
@media (max-width:980px){
  .sg-layout{grid-template-columns:1fr}
  .sg-catalog{max-height:320px}
  .sg-search{width:120px}
}

/* ========== Image CDN v5.1.0 ========== */
.cdn-wrap{display:flex;flex-direction:column;gap:16px}
.cdn-upload-area{
  border:2px dashed rgba(236,72,153,.35);border-radius:14px;
  padding:40px 20px;text-align:center;cursor:pointer;
  transition:border-color .2s,background .2s;
  background:rgba(236,72,153,.04);
}
.cdn-upload-area:hover,.cdn-upload-area.drag-over{
  border-color:rgba(236,72,153,.7);
  background:rgba(236,72,153,.08);
}
.cdn-upload-inner{display:flex;flex-direction:column;align-items:center;gap:4px}
.cdn-upload-inner h3{margin:8px 0 0;font-size:16px;color:#f5e1ef}
.cdn-upload-inner p{margin:0;font-size:13px;color:#9f7a92}
.cdn-upload-progress{
  margin-top:12px;padding:8px 16px;border-radius:8px;
  background:rgba(236,72,153,.12);color:#f9a8d4;font-size:13px;
}
.cdn-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 4px;
}
.cdn-info{font-size:13px;color:#9f7a92}
.cdn-info span{color:#ec4899;font-weight:600}
.cdn-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;
}
.cdn-empty{
  grid-column:1/-1;text-align:center;padding:48px 20px;
  color:#9f7a92;font-size:14px;
}
.cdn-card{
  border:1px solid rgba(236,72,153,.15);border-radius:12px;
  overflow:hidden;background:rgba(20,12,20,.6);
  transition:border-color .2s,transform .15s;
}
.cdn-card:hover{border-color:rgba(236,72,153,.4);transform:translateY(-2px)}
.cdn-thumb{
  width:100%;height:160px;overflow:hidden;
  background:#0d0a0d;display:flex;align-items:center;justify-content:center;
}
.cdn-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.cdn-meta{padding:12px}
.cdn-name{
  font-size:13px;font-weight:600;color:#f5e1ef;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px;
}
.cdn-stats{font-size:11px;color:#9f7a92;margin-bottom:10px}
.cdn-url-row{display:flex;gap:6px;margin-bottom:10px}
.cdn-url-input{
  flex:1;min-width:0;padding:4px 8px;font-size:11px;
  background:rgba(0,0,0,.3);border:1px solid rgba(236,72,153,.2);
  border-radius:6px;color:#d8b4c8;outline:none;
}
.cdn-url-input:focus{border-color:rgba(236,72,153,.5)}
.cdn-actions{display:flex;gap:6px}
.btn-xs{font-size:11px;padding:4px 10px;border-radius:5px}
.cdn-copy-btn{white-space:nowrap}

/* ========== Image CDN folders v5.1.1 ========== */
.cdn-layout{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.cdn-folders{
  position:sticky;top:12px;
  border:1px solid rgba(236,72,153,.18);
  border-radius:14px;
  background:rgba(18,10,18,.72);
  overflow:hidden;
}
.cdn-folders-head{padding:14px 14px 10px;border-bottom:1px solid rgba(236,72,153,.12)}
.cdn-folders-head h3{margin:0;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#f5e1ef}
.cdn-folders-head p{margin:4px 0 0;font-size:11px;color:#9f7a92}
.cdn-folder-list{display:flex;flex-direction:column;padding:8px;gap:4px;max-height:min(70vh,640px);overflow:auto}
.cdn-folder-btn{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;border:1px solid transparent;background:transparent;
  color:#d8b4c8;border-radius:10px;padding:10px 12px;cursor:pointer;
  font:inherit;text-align:left;transition:background .15s,border-color .15s,color .15s;
}
.cdn-folder-btn:hover{background:rgba(236,72,153,.08);border-color:rgba(236,72,153,.18);color:#fce7f3}
.cdn-folder-btn.active{
  background:rgba(236,72,153,.14);
  border-color:rgba(236,72,153,.4);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(236,72,153,.15);
}
.cdn-folder-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.cdn-folder-count{
  min-width:22px;height:20px;padding:0 6px;border-radius:999px;
  font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);color:#f9a8d4;
}
.cdn-folder-btn.active .cdn-folder-count{background:rgba(236,72,153,.35);color:#fff}
.cdn-active-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:12px;
  border:1px solid rgba(236,72,153,.18);
  background:linear-gradient(135deg,rgba(236,72,153,.12),rgba(20,12,20,.5));
}
.cdn-active-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#9f7a92}
.cdn-active-name{font-size:18px;font-weight:700;color:#fce7f3;margin-top:2px}
.cdn-active-path{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;color:#f9a8d4;background:rgba(0,0,0,.28);
  border:1px solid rgba(236,72,153,.2);border-radius:8px;padding:8px 12px;
}
.cdn-info-hint{margin-left:6px;color:#9f7a92}
.cdn-info-hint code{color:#f9a8d4}
.cdn-thumb{position:relative}
.cdn-badge{
  position:absolute;top:8px;right:8px;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:3px 7px;border-radius:999px;
  backdrop-filter:blur(6px);
}
.cdn-badge.webp{background:rgba(56,189,248,.22);color:#7dd3fc;border:1px solid rgba(56,189,248,.35)}
.cdn-badge.gif{background:rgba(250,204,21,.2);color:#fde047;border:1px solid rgba(250,204,21,.4)}
@media (max-width:900px){
  .cdn-layout{grid-template-columns:1fr}
  .cdn-folders{position:static}
  .cdn-folder-list{flex-direction:row;flex-wrap:wrap;max-height:none}
  .cdn-folder-btn{width:auto}
}

/* ========== Shortlink v5.2.0 ========== */
.sl-layout{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.sl-brands{
  position:sticky;top:12px;
  border:1px solid rgba(56,189,248,.18);
  border-radius:14px;
  background:rgba(10,16,28,.72);
  overflow:hidden;
}
.sl-brands-head{padding:14px 14px 10px;border-bottom:1px solid rgba(56,189,248,.12)}
.sl-brands-head h3{margin:0;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#e0f2fe}
.sl-brands-head p{margin:4px 0 0;font-size:11px;color:#7dd3fc99}
.sl-add-brand{
  display:flex;flex-direction:column;gap:8px;
  padding:10px 12px;border-bottom:1px solid rgba(56,189,248,.1);
}
.sl-brand-list{display:flex;flex-direction:column;padding:8px;gap:4px;max-height:min(62vh,560px);overflow:auto}
.sl-brand-btn{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;border:1px solid transparent;background:transparent;
  color:#bae6fd;border-radius:10px;padding:10px 12px;cursor:pointer;
  font:inherit;text-align:left;transition:background .15s,border-color .15s;
}
.sl-brand-btn:hover{background:rgba(56,189,248,.08);border-color:rgba(56,189,248,.2)}
.sl-brand-btn.active{
  background:rgba(56,189,248,.14);
  border-color:rgba(56,189,248,.42);
  color:#fff;
}
.sl-brand-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.sl-brand-count{
  min-width:22px;height:20px;padding:0 6px;border-radius:999px;
  font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);color:#7dd3fc;
}
.sl-brand-btn.active .sl-brand-count{background:rgba(56,189,248,.35);color:#fff}
.sl-main{display:flex;flex-direction:column;gap:14px}
.sl-active-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:12px;
  border:1px solid rgba(56,189,248,.18);
  background:linear-gradient(135deg,rgba(56,189,248,.12),rgba(12,18,30,.55));
}
.sl-active-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#7dd3fc99}
.sl-active-name{font-size:18px;font-weight:700;color:#e0f2fe;margin-top:2px}
.sl-add-card{
  border:1px solid rgba(56,189,248,.16);
  border-radius:14px;padding:14px 16px;
  background:rgba(10,16,28,.55);
}
.sl-add-title{font-size:13px;font-weight:700;color:#e0f2fe;margin-bottom:10px}
.sl-add-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,.4fr) auto;gap:8px}
.sl-input{
  width:100%;box-sizing:border-box;
  padding:9px 12px;border-radius:8px;border:1px solid rgba(56,189,248,.22);
  background:rgba(0,0,0,.28);color:#e0f2fe;font:inherit;outline:none;
}
.sl-input:focus{border-color:rgba(56,189,248,.55)}
.sl-input::placeholder{color:#7dd3fc66}
.sl-input-lg{font-size:13px}
.sl-add-msg{margin-top:10px;font-size:12px;padding:8px 10px;border-radius:8px}
.sl-add-msg.ok{background:rgba(34,197,94,.12);color:#86efac}
.sl-add-msg.err{background:rgba(239,68,68,.12);color:#fca5a5}
.sl-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 2px}
.sl-info{font-size:13px;color:#7dd3fc99}
.sl-info span{color:#38bdf8;font-weight:700}
.sl-info code{color:#7dd3fc}
.sl-list{display:flex;flex-direction:column;gap:10px}
.sl-empty,.sl-empty-mini{
  padding:36px 16px;text-align:center;color:#7dd3fc88;font-size:13px;
  border:1px dashed rgba(56,189,248,.2);border-radius:12px;
}
.sl-empty-mini{padding:16px;font-size:12px}
.sl-item{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:12px;
  border:1px solid rgba(56,189,248,.14);
  background:rgba(10,16,28,.6);
  transition:border-color .15s,transform .12s;
}
.sl-item:hover{border-color:rgba(56,189,248,.35);transform:translateY(-1px)}
.sl-item-main{min-width:0;flex:1}
.sl-item-url{
  display:block;font-size:13px;font-weight:600;color:#7dd3fc;
  word-break:break-all;text-decoration:none;
}
.sl-item-url:hover{color:#e0f2fe;text-decoration:underline}
.sl-item-note{margin-top:4px;font-size:12px;color:#bae6fdcc}
.sl-item-meta{margin-top:6px;font-size:11px;color:#7dd3fc66}
.sl-item-actions{display:flex;gap:6px;flex-shrink:0}
@media (max-width:900px){
  .sl-layout{grid-template-columns:1fr}
  .sl-brands{position:static}
  .sl-add-row{grid-template-columns:1fr}
  .sl-item{flex-direction:column}
}

/* ===== v5.3.0 — Locked nav + Feature checkboxes + Popup + Modal ===== */

/* Locked nav items */
.nav-item.nav-locked{
  opacity:.5;
  cursor:pointer;
}
.nav-item.nav-locked:hover{
  opacity:.7;
}
.nav-item.nav-locked .nav-badge{
  display:none;
}
.lock-icon{
  width:14px;height:14px;
  margin-left:auto;
  opacity:.6;
  flex-shrink:0;
}

/* Feature checkbox grid */
.feat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:8px;
  margin-top:8px;
}
.feat-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(56,189,248,.15);
  background:rgba(10,16,28,.5);
  cursor:pointer;
  user-select:none;
  transition:border-color .15s,background .15s;
}
.feat-chip:hover{
  border-color:rgba(56,189,248,.35);
  background:rgba(10,16,28,.8);
}
.feat-chip.feat-sys{
  border-color:rgba(251,191,36,.12);
}
.feat-chip.feat-sys:hover{
  border-color:rgba(251,191,36,.3);
}
.feat-chip input[type="checkbox"]{
  position:absolute;
  opacity:0;
  width:0;height:0;
}
.feat-chip-box{
  width:18px;height:18px;
  border-radius:5px;
  border:2px solid rgba(56,189,248,.3);
  background:rgba(10,16,28,.6);
  flex-shrink:0;
  position:relative;
  transition:all .15s;
}
.feat-chip input:checked + .feat-chip-box{
  background:#0ea5e9;
  border-color:#0ea5e9;
}
.feat-chip input:checked + .feat-chip-box::after{
  content:'';
  position:absolute;
  left:5px;top:1px;
  width:5px;height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.feat-chip.feat-disabled{
  opacity:.5;
  cursor:not-allowed;
}
.feat-chip.feat-disabled .feat-chip-box{
  background:rgba(56,189,248,.15);
  border-color:rgba(56,189,248,.2);
}
.feat-chip-label{
  font-size:13px;
  font-weight:500;
  color:#e0f2fe;
}

/* Locked feature popup — Magenta Spark Deck match */
.locked-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%, rgba(236,72,153,.16), transparent 55%),
    radial-gradient(ellipse 60% 50% at 30% 70%, rgba(168,85,247,.14), transparent 50%),
    radial-gradient(ellipse 40% 40% at 75% 25%, rgba(225,29,72,.10), transparent 45%),
    rgba(10,4,16,.86);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  animation:lockedFadeIn .28s ease;
  overflow:hidden;
}
@keyframes lockedFadeIn{
  from{opacity:0}
  to{opacity:1}
}
.locked-orbs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.locked-orb{
  position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;
  animation:lockedOrbFloat 8s ease-in-out infinite;
}
.locked-orb.o1{width:280px;height:280px;left:10%;top:15%;background:rgba(236,72,153,.28)}
.locked-orb.o2{width:320px;height:320px;right:8%;bottom:10%;background:rgba(168,85,247,.24);animation-delay:-3s}
.locked-orb.o3{width:180px;height:180px;left:45%;top:60%;background:rgba(217,70,239,.18);animation-delay:-5s}
@keyframes lockedOrbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(20px,-24px) scale(1.08)}
}
.locked-box{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  width:min(420px,100%);
  padding:36px 32px 30px;
  border-radius:24px;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(160deg, rgba(26,12,30,.98) 0%, rgba(18,8,24,.99) 45%, rgba(34,16,40,.98) 100%);
  border:1px solid transparent;
  background-clip:padding-box;
  box-shadow:
    0 0 0 1px rgba(236,72,153,.28),
    0 0 40px rgba(236,72,153,.22),
    0 0 80px rgba(168,85,247,.16),
    0 28px 80px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(244,114,182,.1);
  animation:lockedSlideUp .42s cubic-bezier(.22,1,.36,1);
}
.locked-box::before{
  content:'';
  position:absolute;inset:-1px;border-radius:24px;z-index:-1;padding:1px;
  background:conic-gradient(from var(--locked-angle,0deg),
    #ec4899, #d946ef, #a855f7, #e11d48, #f472b6, #ec4899);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:lockedBorderSpin 4s linear infinite;
}
@property --locked-angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}
@keyframes lockedBorderSpin{
  to{--locked-angle:360deg}
}
@keyframes lockedSlideUp{
  from{transform:translateY(28px) scale(.9);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}
.locked-shine{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:24px;
}
.locked-shine::after{
  content:'';
  position:absolute;top:-40%;left:-60%;width:40%;height:180%;
  background:linear-gradient(100deg, transparent, rgba(244,114,182,.12), transparent);
  transform:skewX(-20deg);
  animation:lockedShine 3.2s ease-in-out infinite;
}
@keyframes lockedShine{
  0%,40%{left:-60%;opacity:0}
  50%{opacity:1}
  100%{left:140%;opacity:0}
}
.locked-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.14em;
  color:#fdf2f8;
  background:linear-gradient(135deg,rgba(236,72,153,.28),rgba(168,85,247,.22));
  border:1px solid rgba(244,114,182,.45);
  box-shadow:0 0 20px rgba(236,72,153,.28), inset 0 1px 0 rgba(255,255,255,.08);
  animation:lockedBadgePulse 2.2s ease-in-out infinite;
}
.locked-badge svg{color:#f472b6;filter:drop-shadow(0 0 4px rgba(236,72,153,.7))}
@keyframes lockedBadgePulse{
  0%,100%{box-shadow:0 0 16px rgba(236,72,153,.2), inset 0 1px 0 rgba(255,255,255,.08)}
  50%{box-shadow:0 0 28px rgba(236,72,153,.5), inset 0 1px 0 rgba(255,255,255,.1)}
}
.locked-logo-wrap{
  position:relative;
  width:120px;height:120px;
  display:grid;place-items:center;
  margin:6px 0 2px;
}
.locked-ring{
  position:absolute;border-radius:50%;pointer-events:none;
  border:1.5px solid transparent;
}
.locked-ring.r1{
  inset:-6px;
  border-color:rgba(236,72,153,.5);
  box-shadow:0 0 18px rgba(236,72,153,.3);
  animation:lockedRingPulse 2s ease-out infinite;
}
.locked-ring.r2{
  inset:-18px;
  border-color:rgba(217,70,239,.35);
  animation:lockedRingPulse 2s ease-out .4s infinite;
}
.locked-ring.r3{
  inset:-30px;
  border-color:rgba(168,85,247,.22);
  animation:lockedRingPulse 2s ease-out .8s infinite;
}
@keyframes lockedRingPulse{
  0%{transform:scale(.92);opacity:.85}
  70%{transform:scale(1.08);opacity:0}
  100%{transform:scale(1.12);opacity:0}
}
.locked-logo-glow{
  position:absolute;inset:8px;border-radius:22px;
  background:radial-gradient(circle, rgba(236,72,153,.5), rgba(168,85,247,.25) 50%, transparent 70%);
  filter:blur(10px);
  animation:lockedGlow 2.4s ease-in-out infinite alternate;
}
@keyframes lockedGlow{
  from{opacity:.55;transform:scale(.95)}
  to{opacity:1;transform:scale(1.08)}
}
.locked-logo{
  position:relative;z-index:1;
  width:96px;height:96px;
  border-radius:22px;
  object-fit:cover;
  box-shadow:
    0 0 0 3px rgba(18,8,24,.95),
    0 0 0 5px rgba(236,72,153,.55),
    0 12px 30px rgba(0,0,0,.5);
}
.locked-lock-badge{
  position:absolute;z-index:2;
  right:-4px;bottom:-4px;
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:50%;
  color:#fdf2f8;
  background:linear-gradient(145deg,#f472b6,#ec4899 45%,#a855f7 100%);
  border:3px solid #120818;
  box-shadow:0 4px 16px rgba(236,72,153,.55), 0 0 20px rgba(217,70,239,.4);
  animation:lockedLockBob 1.6s ease-in-out infinite;
}
@keyframes lockedLockBob{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-4px) rotate(4deg)}
}
.locked-copy{position:relative;z-index:1;padding:0 4px}
.locked-text{
  margin:0;
  font-size:clamp(20px,4.5vw,26px);
  font-weight:800;
  line-height:1.25;
  letter-spacing:.01em;
  background:linear-gradient(105deg,#fdf2f8 0%,#f9a8d4 25%,#ec4899 45%,#d946ef 65%,#c084fc 85%,#f472b6 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(236,72,153,.5));
  animation:lockedTextShine 3s linear infinite;
}
@keyframes lockedTextShine{
  to{background-position:200% center}
}
.locked-sub{
  margin:8px 0 0;
  font-size:14px;
  font-weight:600;
  color:#d8b4c8;
  letter-spacing:.02em;
}
.locked-sparks{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:24px;
}
.locked-sparks i{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:#f472b6;box-shadow:0 0 8px #ec4899;
  animation:lockedSpark 2.8s ease-in-out infinite;
  opacity:0;
}
.locked-sparks i:nth-child(1){left:12%;top:22%;animation-delay:0s}
.locked-sparks i:nth-child(2){left:82%;top:18%;animation-delay:.4s;background:#d946ef;box-shadow:0 0 8px #d946ef}
.locked-sparks i:nth-child(3){left:18%;top:78%;animation-delay:.8s}
.locked-sparks i:nth-child(4){left:76%;top:72%;animation-delay:1.1s;background:#a855f7;box-shadow:0 0 8px #a855f7}
.locked-sparks i:nth-child(5){left:50%;top:10%;animation-delay:1.5s;background:#fb7185;box-shadow:0 0 8px #e11d48}
.locked-sparks i:nth-child(6){left:58%;top:88%;animation-delay:1.9s;background:#f0abfc;box-shadow:0 0 8px #d946ef}
@keyframes lockedSpark{
  0%{opacity:0;transform:scale(.4) translateY(0)}
  30%{opacity:1;transform:scale(1) translateY(-6px)}
  100%{opacity:0;transform:scale(.2) translateY(-18px)}
}
.locked-btn{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  margin-top:6px;
  min-width:180px;
  padding:13px 28px;
  border:none;border-radius:14px;
  cursor:pointer;
  font-size:13px;font-weight:800;letter-spacing:.12em;
  color:#fdf2f8;
  background:linear-gradient(135deg,#db2777 0%,#ec4899 35%,#c026d3 70%,#a855f7 100%);
  box-shadow:
    0 0 0 1px rgba(244,114,182,.45),
    0 8px 28px rgba(236,72,153,.45),
    0 0 40px rgba(168,85,247,.28),
    inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.locked-btn:hover{
  transform:translateY(-2px) scale(1.03);
  filter:brightness(1.08);
  box-shadow:
    0 0 0 1px rgba(244,114,182,.65),
    0 12px 36px rgba(236,72,153,.55),
    0 0 56px rgba(168,85,247,.4),
    inset 0 1px 0 rgba(255,255,255,.3);
}
.locked-btn:active{transform:translateY(0) scale(.98)}
.locked-btn svg{transition:transform .18s ease}
.locked-btn:hover svg{transform:translateX(3px)}
@media (max-width:480px){
  .locked-box{padding:28px 20px 24px;border-radius:20px}
  .locked-logo{width:84px;height:84px}
  .locked-logo-wrap{width:104px;height:104px}
  .locked-ring.r3{display:none}
}

/* Edit user modal */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:99998;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(6px);
  animation:lockedFadeIn .2s ease;
}
.modal-box{
  width:90%;
  max-width:560px;
  max-height:85vh;
  overflow-y:auto;
  padding:24px 28px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(26,12,30,.98),rgba(18,8,24,.98));
  border:1px solid rgba(236,72,153,.22);
  box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 40px rgba(236,72,153,.1);
  animation:lockedSlideUp .25s ease;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
.modal-head h3{
  margin:0;
  font-size:18px;
  color:#fdf2f8;
}
.modal-close{
  background:none;
  border:none;
  color:var(--text3);
  font-size:24px;
  cursor:pointer;
  line-height:1;
  padding:0 4px;
  transition:color .15s;
}
.modal-close:hover{
  color:#fdf2f8;
}

/* Pill variants */
.pill-creator{
  background:linear-gradient(135deg,#ec4899,#a855f7);
  color:#fdf2f8;
  font-weight:700;
}
.pill-tag{
  background:rgba(236,72,153,.15);
  color:#f9a8d4;
  border:1px solid rgba(244,114,182,.28);
}

/* Small button */
.btn-sm{
  padding:4px 10px;
  font-size:12px;
}

/* ===== Tools · SEO Sitemap/Robots live generator ===== */
.seo-gen-card .card-head{align-items:flex-start}
.seo-gen-card .pill-ok{background:rgba(52,211,153,.15);color:#6ee7b7;border:1px solid rgba(52,211,153,.3)}
.seo-gen-card .pill-warn{background:rgba(251,113,133,.15);color:#fb7185;border:1px solid rgba(251,113,133,.3)}
.seo-gen-card .pill-live{background:rgba(236,72,153,.15);color:#f9a8d4;border:1px solid rgba(244,114,182,.35);animation:seoPulse 1.6s ease-in-out infinite}
@keyframes seoPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(236,72,153,0)}
  50%{box-shadow:0 0 12px rgba(236,72,153,.35)}
}
.seo-gen-grid{
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(320px,1.15fr);
  gap:18px;
  padding:4px 2px 8px;
}
@media (max-width:960px){
  .seo-gen-grid{grid-template-columns:1fr}
}
.seo-url-row{
  display:flex;
  gap:8px;
  align-items:stretch;
}
.seo-url-row .control{flex:1;min-width:0}
.seo-url-row .btn{
  display:inline-flex;align-items:center;gap:8px;
  white-space:nowrap;flex-shrink:0;
}
.seo-opts{
  display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;
}
.seo-opts .chk-inline{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;color:var(--text);cursor:pointer;user-select:none;
}
.seo-opts .chk-inline input{accent-color:var(--pink)}
.seo-freq{display:flex;align-items:center;gap:8px}
.seo-gen-out{
  display:flex;flex-direction:column;gap:10px;
  min-height:320px;
}
.seo-tabs{
  display:flex;gap:6px;
  padding:4px;
  border-radius:12px;
  background:rgba(10,4,16,.45);
  border:1px solid var(--border-1);
}
.seo-tab{
  flex:1;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;
  border:none;border-radius:9px;
  background:transparent;
  color:var(--text2);
  font-family:var(--font-mono);
  font-size:12px;font-weight:600;letter-spacing:.04em;
  cursor:pointer;
  transition:background .15s,color .15s,box-shadow .15s;
}
.seo-tab:hover{color:var(--text-hi);background:rgba(236,72,153,.08)}
.seo-tab.active{
  color:#fdf2f8;
  background:linear-gradient(135deg,rgba(236,72,153,.28),rgba(168,85,247,.22));
  box-shadow:0 0 0 1px rgba(244,114,182,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.seo-badge{
  display:inline-grid;place-items:center;
  min-width:22px;height:18px;padding:0 6px;
  border-radius:999px;
  font-size:10px;font-weight:700;
  background:rgba(0,0,0,.35);
  color:var(--pink-hot);
}
.seo-tab.active .seo-badge{background:rgba(236,72,153,.35);color:#fdf2f8}
.seo-preview-wrap{flex:1;min-height:0}
.seo-preview{
  width:100%;
  min-height:280px;
  height:100%;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.55;
  resize:vertical;
  white-space:pre;
  background:var(--bg-inset) !important;
  border-color:var(--border-2) !important;
  color:var(--text-hi);
}
.seo-actions{flex-wrap:wrap;gap:8px}
.seo-gen-form .req{color:var(--pink-hot)}

/* ===== Tools · Display:None Generator ===== */
.dn-gen-card .dn-gen-grid{
  display:grid;
  grid-template-columns:minmax(300px,1.15fr) minmax(280px,1fr);
  gap:18px;
  padding:4px 2px 8px;
}
@media (max-width:1100px){
  .dn-gen-card .dn-gen-grid{grid-template-columns:1fr}
}
.dn-lists{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}
@media (max-width:720px){
  .dn-lists{grid-template-columns:1fr}
}
.dn-list-col{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  border-radius:14px;
  background:rgba(10,4,16,.4);
  border:1px solid var(--border-1);
  min-height:220px;
}
.dn-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.dn-list-head strong{
  font-size:13px;
  letter-spacing:.04em;
  color:var(--text-hi);
}
.dn-add-row{
  display:flex;
  gap:6px;
}
.dn-add-row .control{flex:1;min-width:0}
.dn-chip-box{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-content:flex-start;
  max-height:220px;
  overflow:auto;
  padding:4px 2px;
  scrollbar-width:thin;
}
.dn-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  max-width:100%;
  padding:5px 8px 5px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  line-height:1.2;
  color:#fdf2f8;
  background:linear-gradient(135deg,rgba(236,72,153,.22),rgba(168,85,247,.18));
  border:1px solid rgba(244,114,182,.28);
  word-break:break-word;
}
.dn-chip .dn-x{
  display:inline-grid;
  place-items:center;
  width:16px;height:16px;
  margin:0;padding:0;
  border:none;border-radius:50%;
  background:rgba(0,0,0,.28);
  color:#f9a8d4;
  font-size:12px;line-height:1;
  cursor:pointer;
  flex-shrink:0;
  transition:background .12s,color .12s;
}
.dn-chip .dn-x:hover{
  background:rgba(244,63,94,.55);
  color:#fff;
}
.dn-gen-out{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:360px;
}
.dn-out-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.dn-out-head strong{
  font-size:13px;
  color:var(--text-hi);
}
.dn-preview{
  min-height:340px !important;
  flex:1;
}

/* ===== Portal Gate v5.6.1 — smooth, GPU-only ===== */
.portal-gate{
  position:fixed;inset:0;z-index:99999;
  display:grid;place-items:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,visibility .18s ease;
  contain:layout style paint;
  will-change:opacity;
}
.portal-gate.show{
  opacity:1;visibility:visible;pointer-events:auto;
}
.portal-gate.hide{
  opacity:0;visibility:hidden;
}
.portal-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 72% 55% at 50% 46%,rgba(36,14,48,.96) 0%,rgba(6,3,12,.985) 70%,#050308 100%);
}
.portal-orb{
  position:relative;
  width:min(120px,30vw);height:min(120px,30vw);
  display:grid;place-items:center;
  z-index:1;
}
.portal-ring{
  display:none;
}
.portal-ring.r1{
  display:block;position:absolute;inset:0;margin:auto;
  width:100%;height:100%;border-radius:50%;
  border:1.5px solid rgba(244,114,182,.42);
  opacity:0;
  transform:scale(.85);
  will-change:transform,opacity;
}
.portal-core{
  width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fdf2f8,#ec4899 55%,#a855f7 100%);
  box-shadow:0 0 14px rgba(236,72,153,.45);
  opacity:0;
  transform:scale(.7);
  z-index:2;
  will-change:transform,opacity;
}
.portal-copy{
  position:absolute;left:50%;top:calc(50% + min(88px,20vw));
  transform:translateX(-50%);
  text-align:center;z-index:2;width:min(240px,86vw);
}
.portal-text{
  font-family:var(--font-mono);
  font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:#fce7f3;opacity:0;
  transform:translateY(4px);
  will-change:opacity,transform;
}
.portal-sub{
  margin-top:5px;
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text2);opacity:0;
}
.portal-bar{
  margin:12px auto 0;width:96px;height:2px;
  border-radius:999px;background:rgba(255,255,255,.07);
  overflow:hidden;opacity:0;
}
.portal-bar i{
  display:block;height:100%;width:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#db2777,#ec4899,#a855f7);
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform;
}

/* single pulse — warp */
.portal-gate.warp.show .portal-ring.r1{
  animation:pgPulse .42s cubic-bezier(.22,.82,.28,1) both;
}
.portal-gate.warp.show .portal-core{
  animation:pgDot .42s cubic-bezier(.22,.82,.28,1) both;
}
.portal-gate.warp.show .portal-text,
.portal-gate.warp.show .portal-sub,
.portal-gate.warp.show .portal-bar{
  animation:pgFade .22s ease .02s both;
}

/* single pulse — enter */
.portal-gate.enter.show .portal-ring.r1{
  animation:pgPulseIn .28s cubic-bezier(.22,.82,.28,1) both;
}
.portal-gate.enter.show .portal-core{
  animation:pgDotIn .28s cubic-bezier(.22,.82,.28,1) both;
}
.portal-gate.enter.show .portal-text,
.portal-gate.enter.show .portal-sub,
.portal-gate.enter.show .portal-bar{
  animation:pgFade .18s ease both;
}

@keyframes pgPulse{
  0%{opacity:0;transform:scale(.8)}
  50%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.28)}
}
@keyframes pgPulseIn{
  0%{opacity:0;transform:scale(1.22)}
  55%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.78)}
}
@keyframes pgDot{
  0%{opacity:0;transform:scale(.55)}
  45%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.45)}
}
@keyframes pgDotIn{
  0%{opacity:0;transform:scale(1.35)}
  45%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.5)}
}
@keyframes pgFade{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

.login-page.portal-warping .login-card{
  transition:opacity .2s ease,transform .28s cubic-bezier(.4,0,.2,1);
  transform:scale(.985);
  opacity:0;
  pointer-events:none;
}
.login-page.portal-warping .auth-tele{
  transition:opacity .16s ease;
  opacity:0;
}

.app-page.portal-entering #appShell{
  animation:appSoftIn .26s ease .03s both;
}
@keyframes appSoftIn{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .portal-gate,.portal-ring,.portal-core,.portal-text,.portal-sub,.portal-bar,
  .portal-gate *{animation:none!important;transition:none!important}
  .portal-gate.show{opacity:1;visibility:visible}
  .app-page.portal-entering #appShell{animation:none!important;opacity:1}
  .portal-bar i{transform:scaleX(1)!important}
}