@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Exo+2:wght@300;400;600;700;900&display=swap');

/* ══════════════════════════════════════════
   CSS VARIABLES — DARK (default)
   ══════════════════════════════════════════ */
:root {
  --bg:        #070b10;
  --s1:        #0c1520;
  --s2:        #101c2c;
  --s3:        #0f2035;
  --border:    #1b3352;
  --border2:   #254a72;
  --accent:    #00d4ff;
  --accent2:   #0070f3;
  --accent3:   #00aa66;
  --text:      #c0d8f0;
  --muted:     #90b4d8;
  --danger:    #ff3f5c;
  --warn:      #ffaa00;
  --mono:      'Share Tech Mono', monospace;
  --sans:      'Exo 2', sans-serif;
  --radius:    12px;
  --scanline:  rgba(0,0,0,0.04);
  --grad-a:    rgba(0,112,243,0.12);
  --grad-b:    rgba(0,212,255,0.07);
  --glow-rgb:    0, 180, 255;
  --glow-bright: rgba(100,230,255,1);
  --glow-title:  rgba(140,220,255,0.95);
  --focus-ring:  rgba(0,112,243,0.18);
}

/* ── Light theme ── */
:root.light {
  --bg:        #f0f4f8;
  --s1:        #ffffff;
  --s2:        #e8eef5;
  --s3:        #dde5ee;
  --border:    #adbfd6;
  --border2:   #7a97b5;
  --accent:    #0070f3;
  --accent2:   #005bcc;
  --accent3:   #00885a;
  --text:      #0f1f2e;
  --muted:     #3d5a75;
  --danger:    #d92b4b;
  --warn:      #b37200;
  --scanline:  rgba(0,0,0,0.015);
  --grad-a:    rgba(0,112,243,0.06);
  --grad-b:    rgba(0,180,255,0.04);
  --glow-rgb:    0, 130, 210;
  --glow-bright: rgba(60,190,255,1);
  --glow-title:  rgba(0,100,180,0.95);
  --focus-ring:  rgba(0,92,204,0.15);
}

/* ── Ember ── */
:root[data-scheme="ember"] { --accent:#ff7030;--accent2:#dd4000;--accent3:#ff9900;--grad-a:rgba(220,80,10,0.12);--grad-b:rgba(255,120,40,0.07);--glow-rgb:220,80,10;--glow-bright:rgba(255,190,80,1);--glow-title:rgba(255,200,130,0.95);--focus-ring:rgba(220,80,10,0.18); }
:root.light[data-scheme="ember"] { --accent:#c83000;--accent2:#a02000;--accent3:#805000;--grad-a:rgba(180,60,10,0.07);--grad-b:rgba(220,100,30,0.04);--glow-rgb:190,60,10;--glow-bright:rgba(230,150,60,1);--glow-title:rgba(160,50,10,0.95);--focus-ring:rgba(180,50,10,0.15); }

/* ── Matrix ── */
:root[data-scheme="matrix"] { --accent:#00ff88;--accent2:#00cc55;--accent3:#00ddaa;--grad-a:rgba(0,200,80,0.12);--grad-b:rgba(0,255,140,0.07);--glow-rgb:0,200,80;--glow-bright:rgba(100,255,160,1);--glow-title:rgba(140,255,180,0.95);--focus-ring:rgba(0,200,80,0.18); }
:root.light[data-scheme="matrix"] { --accent:#007700;--accent2:#005500;--accent3:#006644;--grad-a:rgba(0,120,50,0.07);--grad-b:rgba(0,180,80,0.04);--glow-rgb:0,140,50;--glow-bright:rgba(60,200,100,1);--glow-title:rgba(0,100,40,0.95);--focus-ring:rgba(0,120,50,0.15); }

/* ── Violet ── */
:root[data-scheme="violet"] { --accent:#d87bff;--accent2:#9c40f0;--accent3:#ff6bdd;--grad-a:rgba(160,40,240,0.12);--grad-b:rgba(220,120,255,0.07);--glow-rgb:200,60,255;--glow-bright:rgba(255,180,255,1);--glow-title:rgba(240,180,255,0.95);--focus-ring:rgba(156,64,240,0.18); }
:root.light[data-scheme="violet"] { --accent:#7c3aed;--accent2:#5b21b6;--accent3:#be185d;--grad-a:rgba(100,30,180,0.07);--grad-b:rgba(160,60,220,0.04);--glow-rgb:130,40,210;--glow-bright:rgba(190,100,255,1);--glow-title:rgba(100,30,160,0.95);--focus-ring:rgba(100,30,180,0.15); }

/* ── Ocean ── */
:root[data-scheme="ocean"] { --accent:#00c9a7;--accent2:#0077b6;--accent3:#48cae4;--grad-a:rgba(0,119,182,0.12);--grad-b:rgba(0,201,167,0.07);--glow-rgb:0,180,150;--glow-bright:rgba(80,240,210,1);--glow-title:rgba(120,240,220,0.95);--focus-ring:rgba(0,180,150,0.18); }
:root.light[data-scheme="ocean"] { --accent:#007a65;--accent2:#005f8a;--accent3:#006f8f;--grad-a:rgba(0,90,130,0.07);--grad-b:rgba(0,160,130,0.04);--glow-rgb:0,120,100;--glow-bright:rgba(40,190,160,1);--glow-title:rgba(0,90,80,0.95);--focus-ring:rgba(0,110,100,0.15); }

/* ── Crimson ── */
:root[data-scheme="crimson"] { --accent:#e63946;--accent2:#c1121f;--accent3:#ff6b6b;--grad-a:rgba(193,18,31,0.12);--grad-b:rgba(230,57,70,0.07);--glow-rgb:220,40,50;--glow-bright:rgba(255,130,130,1);--glow-title:rgba(255,160,160,0.95);--focus-ring:rgba(220,40,50,0.18); }
:root.light[data-scheme="crimson"] { --accent:#b01020;--accent2:#8a0010;--accent3:#c84040;--grad-a:rgba(160,10,20,0.07);--grad-b:rgba(200,40,50,0.04);--glow-rgb:180,20,30;--glow-bright:rgba(230,100,100,1);--glow-title:rgba(140,10,20,0.95);--focus-ring:rgba(160,10,20,0.15); }

/* ── Toxic ── */
:root[data-scheme="toxic"] { --accent:#b8ff00;--accent2:#7acc00;--accent3:#e0ff80;--grad-a:rgba(130,200,0,0.12);--grad-b:rgba(184,255,0,0.07);--glow-rgb:155,220,0;--glow-bright:rgba(210,255,80,1);--glow-title:rgba(220,255,120,0.95);--focus-ring:rgba(155,220,0,0.18); }
:root.light[data-scheme="toxic"] { --accent:#5a8800;--accent2:#406600;--accent3:#6aa000;--grad-a:rgba(80,130,0,0.07);--grad-b:rgba(110,170,0,0.04);--glow-rgb:90,140,0;--glow-bright:rgba(160,220,40,1);--glow-title:rgba(70,110,0,0.95);--focus-ring:rgba(80,130,0,0.15); }

/* ── Plasma ── */
:root[data-scheme="plasma"] { --accent:#df80ff;--accent2:#9b30ff;--accent3:#ff40cc;--grad-a:rgba(155,48,255,0.12);--grad-b:rgba(223,128,255,0.07);--glow-rgb:200,60,255;--glow-bright:rgba(240,160,255,1);--glow-title:rgba(245,180,255,0.95);--focus-ring:rgba(155,48,255,0.18); }
:root.light[data-scheme="plasma"] { --accent:#8800cc;--accent2:#6600aa;--accent3:#cc0099;--grad-a:rgba(120,0,180,0.07);--grad-b:rgba(170,40,220,0.04);--glow-rgb:140,0,200;--glow-bright:rgba(200,80,255,1);--glow-title:rgba(110,0,160,0.95);--focus-ring:rgba(120,0,180,0.15); }

/* ── Gold ── */
:root[data-scheme="gold"] { --accent:#d4a800;--accent2:#a87800;--accent3:#e8c040;--grad-a:rgba(200,140,0,0.12);--grad-b:rgba(220,180,40,0.07);--glow-rgb:200,150,0;--glow-bright:rgba(255,220,100,1);--glow-title:rgba(255,230,140,0.95);--focus-ring:rgba(200,140,0,0.18); }
:root.light[data-scheme="gold"] { --accent:#8a6000;--accent2:#6a4800;--accent3:#7a5a00;--grad-a:rgba(140,90,0,0.07);--grad-b:rgba(180,130,20,0.04);--glow-rgb:150,100,0;--glow-bright:rgba(220,170,50,1);--glow-title:rgba(120,80,0,0.95);--focus-ring:rgba(140,90,0,0.15); }

/* ── Rose ── */
:root[data-scheme="rose"] { --accent:#ff6eb0;--accent2:#e83580;--accent3:#ff9999;--grad-a:rgba(230,50,120,0.12);--grad-b:rgba(255,110,170,0.07);--glow-rgb:230,50,120;--glow-bright:rgba(255,180,210,1);--glow-title:rgba(255,200,225,0.95);--focus-ring:rgba(230,53,128,0.18); }
:root.light[data-scheme="rose"] { --accent:#be185d;--accent2:#9d174d;--accent3:#991b1b;--grad-a:rgba(170,20,80,0.07);--grad-b:rgba(220,60,120,0.04);--glow-rgb:190,40,100;--glow-bright:rgba(240,120,170,1);--glow-title:rgba(150,20,80,0.95);--focus-ring:rgba(170,30,90,0.15); }

/* ══════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s, color 0.3s;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* scanline overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--scanline) 2px, var(--scanline) 4px);
}

.global-loader {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 8, 14, 0.62);
  backdrop-filter: blur(3px);
}

.hidden { display: none; }

.global-loader.hidden {
  display: none;
}

.global-loader-card {
  min-width: 180px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border2);
  background: var(--s2);
  box-shadow: 0 0 0 1px rgba(var(--glow-rgb),0.12), 0 12px 28px rgba(0,0,0,0.35);
}

.global-loader-text {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════
   CONFIRM MODAL
   ══════════════════════════════════════════ */
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 8, 14, 0.72);
  backdrop-filter: blur(4px);
  animation: confirm-fade-in 0.12s ease;
}
.confirm-modal.hidden { display: none; }
@keyframes confirm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.confirm-modal-card {
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 22px 24px 18px;
  width: min(360px, calc(100vw - 32px));
  box-shadow: 0 0 0 1px rgba(var(--glow-rgb),0.12), 0 16px 40px rgba(0,0,0,0.45);
  animation: confirm-card-in 0.15s cubic-bezier(0.34,1.4,0.64,1);
}
@keyframes confirm-card-in {
  from { transform: scale(0.92) translateY(8px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);   opacity: 1; }
}
.confirm-modal-text {
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 20px;
}
.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ══════════════════════════════════════════
   BACKGROUND BLOBS
   ══════════════════════════════════════════ */
.bgfx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bgfx-blob1,
.bgfx-blob2,
.bgfx-blob3 { position: absolute; border-radius: 50%; background: rgba(var(--glow-rgb), 1); will-change: transform; }
.bgfx-blob1 { width: min(60vw,640px); height: min(60vw,640px); top: 2%; left: 2%; filter: blur(100px); opacity: 0.22; animation: drift1 12s ease-in-out infinite alternate; }
.bgfx-blob2 { width: min(50vw,540px); height: min(50vw,540px); bottom: 8%; right: 3%; filter: blur(90px); opacity: 0.18; animation: drift2 16s ease-in-out infinite alternate; }
.bgfx-blob3 { width: min(40vw,440px); height: min(40vw,440px); top: 38%; left: 32%; filter: blur(110px); opacity: 0.14; animation: drift3 10s ease-in-out infinite alternate; }
:root.light .bgfx-blob1 { opacity: 0.08; }
:root.light .bgfx-blob2 { opacity: 0.06; }
:root.light .bgfx-blob3 { opacity: 0.05; }
@keyframes drift1 { 0%{transform:translate(0,0) scale(1)} 30%{transform:translate(8vw,12vh) scale(1.08)} 60%{transform:translate(18vw,4vh) scale(0.93)} 100%{transform:translate(5vw,20vh) scale(1.05)} }
@keyframes drift2 { 0%{transform:translate(0,0) scale(1)} 30%{transform:translate(-12vw,-8vh) scale(1.12)} 60%{transform:translate(-4vw,-18vh) scale(0.94)} 100%{transform:translate(-17vw,-4vh) scale(1.07)} }
@keyframes drift3 { 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(-13vw,-10vh) scale(1.16)} 66%{transform:translate(10vw,-6vh) scale(0.87)} 100%{transform:translate(-3vw,14vh) scale(1.09)} }

/* ══════════════════════════════════════════
   APP SHELL
   ══════════════════════════════════════════ */
.app-shell {
  position: relative;
  z-index: 1;
  width: 70vw;
  max-width: 1200px;
  background:
    radial-gradient(ellipse 70% 40% at 15% -5%, var(--grad-a) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 85% 105%, var(--grad-b) 0%, transparent 70%),
    var(--s1);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(var(--glow-rgb),0.15), 0 24px 64px rgba(0,0,0,0.4);
  overflow: hidden;
  transition: background 0.3s, border-color 0.3s;
}

/* ══════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px;
  height: 58px;
  border-bottom: 1px solid var(--border);
  background: rgba(7,19,31,0.55);
  backdrop-filter: blur(12px);
  transition: background 0.3s;
}

:root.light .topbar { background: rgba(240,244,248,0.85); }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  color: var(--text);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.brand-logo {
  height: 28px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--glow-rgb),0.9);
  flex-shrink: 0;
  transition: background 0.3s, box-shadow 0.3s;
}

.badge {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
  border: 1px solid var(--border2);
  border-radius: 999px;
  padding: 3px 9px;
  background: rgba(var(--glow-rgb),0.06);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.topbar-auth {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Nav links ── */
.nav-link {
  color: var(--muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.84rem;
  font-family: var(--mono);
  transition: color 0.15s;
}
.nav-link:hover { color: var(--accent); }

.nav-user {
  color: var(--muted);
  font-size: 0.82rem;
  font-family: var(--mono);
  padding: 0 4px;
}

/* ── Theme toggle ── */
.hdr-theme-btn { display: flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px 4px 4px; cursor: pointer; color: var(--text); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; transition: border-color 0.2s, background 0.2s; }
.hdr-theme-btn:hover { border-color: var(--accent); background: rgba(var(--glow-rgb),0.06); }
.hdr-theme-track { width: 36px; height: 20px; border-radius: 10px; background: var(--s3); border: 1px solid var(--border2); position: relative; transition: background 0.3s; flex-shrink: 0; }
.hdr-theme-track.dark { background: rgba(0,100,200,0.3); }
.hdr-theme-thumb { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--s1); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.hdr-theme-track.dark .hdr-theme-thumb { transform: translateX(16px); }
.hdr-theme-label { color: var(--muted); user-select: none; }

/* ── Lang switcher ── */
.hdr-lang { display: flex; align-items: center; }
.hdr-lang-select {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 5px 24px 5px 8px;
  min-width: 68px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.hdr-lang-select:hover {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(var(--glow-rgb),0.06);
}
.hdr-lang-select:focus {
  outline: none;
  border-color: var(--accent2);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.hdr-lang-select option {
  background: var(--s1);
  color: var(--text);
}

/* ── Scheme picker ── */
.hdr-scheme { position: relative; }
.hdr-scheme-trigger { display: flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; cursor: pointer; color: var(--text); font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; transition: border-color 0.15s, background 0.15s; }
.hdr-scheme-trigger:hover, .hdr-scheme-trigger.open { border-color: var(--accent); background: rgba(var(--glow-rgb),0.06); }
.hdr-scheme-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; pointer-events: none; }
.hdr-scheme-chevron { color: var(--muted); flex-shrink: 0; transition: transform 0.2s; font-size: 0.6rem; }
.hdr-scheme-trigger.open .hdr-scheme-chevron { transform: rotate(180deg); }
.hdr-scheme-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: var(--s1); border: 1px solid var(--border2); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 1px; z-index: 300; box-shadow: 0 8px 24px rgba(0,0,0,0.4); min-width: 120px; }
.hdr-scheme-dropdown.hidden { display: none; }
.hdr-scheme-option { display: flex; align-items: center; gap: 8px; background: transparent; border: none; border-radius: 5px; padding: 5px 10px; cursor: pointer; color: var(--muted); font-family: var(--mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; width: 100%; text-align: left; transition: background 0.12s, color 0.12s; }
.hdr-scheme-option:hover { background: rgba(var(--glow-rgb),0.1); color: var(--text); }
.hdr-scheme-option.active { color: var(--accent); background: rgba(var(--glow-rgb),0.12); }

/* ══════════════════════════════════════════
   CONTENT & HERO
   ══════════════════════════════════════════ */
.content {
  padding: 24px;
  display: grid;
  gap: 16px;
}

.hero h1 {
  font-size: clamp(1.5rem, 2.7vw, 2.1rem);
  line-height: 1.1;
  color: var(--glow-title);
  transition: color 0.3s;
}

.hero p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ══════════════════════════════════════════
   PANEL
   ══════════════════════════════════════════ */
.panel {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: 0 0 0 1px rgba(var(--glow-rgb),0.08);
  transition: background 0.3s, border-color 0.3s;
}

.panel-title {
  color: var(--accent3);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-weight: 600;
}

/* ══════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════ */
.form-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

label {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"] {
  width: 100%;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.85rem;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.3s;
}

:root.light input[type="text"],
:root.light input[type="email"],
:root.light input[type="password"],
:root.light input[type="url"] { background: rgba(0,0,0,0.04); }

input::placeholder { color: var(--muted); }

input:focus {
  border-color: var(--accent2);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════ */
button, .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: none;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  text-decoration: none;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  color: #ffffff;
  box-shadow: 0 2px 12px rgba(var(--glow-rgb),0.25);
}

button:hover, .btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(var(--glow-rgb),0.4);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
}

.btn-secondary {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.btn-secondary:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ══════════════════════════════════════════
   RESULT / ALERTS
   ══════════════════════════════════════════ */
.result {
  margin-top: 12px;
  border: 1px solid rgba(var(--glow-rgb),0.35);
  background: rgba(var(--glow-rgb),0.06);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 0.3s, background 0.3s;
}

.result-code {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.result-code-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.result-code-label::after {
  content: ":";
  margin-left: 4px;
}

.result-code-value {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--glow-title);
  letter-spacing: 0.06em;
  word-break: break-all;
}

.result-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.result-link {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
  font-family: var(--mono);
  font-size: 0.88rem;
  flex: 1;
  min-width: 0;
}
.result-link:hover { text-decoration: underline; }

/* Small ghost button variant */
.btn-sm {
  padding: 5px 10px !important;
  font-size: 0.72rem !important;
  gap: 5px !important;
  flex-shrink: 0;
}

.btn-ghost {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}
.btn-ghost:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.btn-ghost.btn-active { border-color: var(--accent) !important; color: var(--accent) !important; background: rgba(var(--glow-rgb),0.1) !important; }

.qr-area {
  margin-top: 14px;
}
.qr-area.hidden { display: none; }

.qr-img {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  display: block;
  image-rendering: auto;
}

.error, .text-danger, .field-validation-error {
  color: var(--danger) !important;
  font-size: 0.82rem;
  font-family: var(--mono);
  margin-top: 3px;
}

.validation-summary-errors ul {
  margin: 0;
  padding-left: 16px;
  color: var(--danger);
  font-size: 0.82rem;
  font-family: var(--mono);
}

/* ══════════════════════════════════════════
   LINKS LIST
   ══════════════════════════════════════════ */
.links-list { display: grid; gap: 10px; }

.bulk-domain-form {
  margin-bottom: 14px;
}
.bulk-domain-form.hidden { display: none; }

.utility-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.tabs-row {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  text-decoration: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.tab-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

.tab-btn-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--glow-rgb), 0.16);
}

.tab-panel.hidden {
  display: none;
}

.mylinks-search-row {
  margin: 2px 0 12px;
}

.mylinks-search-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mylinks-search-input {
  width: 100%;
  max-width: 480px;
}

.account-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
}

.account-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-menu-btn {
  width: 100%;
  justify-content: flex-start;
}

.account-menu-btn-active {
  border: 1px solid var(--accent) !important;
  background: rgba(var(--glow-rgb), 0.14) !important;
  color: var(--accent) !important;
}

.account-main {
  min-width: 0;
}

.account-section.hidden {
  display: none;
}

.bulk-domain-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}

.bulk-domain-input {
  min-width: 0;
}

.link-card {
  --actions-col: 370px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--s3);
  box-shadow: 0 0 0 1px rgba(var(--glow-rgb),0.06);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}
.link-card:hover { border-color: var(--border2); box-shadow: 0 0 0 1px rgba(var(--glow-rgb),0.2), 0 4px 16px rgba(var(--glow-rgb),0.1); }

.link-card .short { font-family: var(--mono); color: var(--accent); font-size: 0.9rem; word-break: break-all; text-decoration: none; }
.link-card .short:hover { text-decoration: underline; }
.link-card .original {
  color: var(--muted);
  font-size: 0.83rem;
  margin-top: 4px;
  max-width: calc(100% - var(--actions-col));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-card .meta { color: var(--border2); font-size: 0.72rem; margin-top: 5px; font-family: var(--mono); }
.link-card .lc-code { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 1.05rem; font-weight: 700; color: var(--accent); margin-bottom: 6px; letter-spacing: 0.01em; }

/* ── Link card internals ── */
.link-card .lc-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
}

.link-card .lc-top .short {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lc-actions {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.btn-danger-ghost {
  color: var(--danger) !important;
  border-color: rgba(var(--danger), 0.3) !important;
}
.btn-danger-ghost:hover {
  border-color: var(--danger) !important;
  background: rgba(255,63,92,0.08) !important;
}

.lc-edit { margin-top: 2px; display: block; }
.lc-edit.hidden { display: none !important; }
.lc-view.hidden { display: none !important; }

.lc-edit-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}

.lc-edit-input {
  width: 100%;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--accent2);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.83rem;
  padding: 8px 10px;
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
:root.light .lc-edit-input { background: rgba(0,0,0,0.04); }

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.page-btn:hover { border-color: var(--accent); color: var(--accent); }
.page-active {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(var(--glow-rgb), 0.1) !important;
}

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
.footer-note {
  color: var(--border2);
  font-size: 0.75rem;
  font-family: var(--mono);
  border-top: 1px solid var(--border);
  padding: 12px 20px;
  text-align: center;
  transition: border-color 0.3s;
}
.footer-sep {
  margin: 0 8px;
  color: var(--border2);
}
.footer-link-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--accent) !important;
  text-decoration: underline;
  font-size: 0.75rem !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline !important;
}
.footer-link-btn:hover {
  color: var(--text) !important;
}

.cookie-banner {
  position: fixed;
  inset: auto 0 18px 0;
  z-index: 1300;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.cookie-banner.hidden {
  display: none;
}
.cookie-banner-card {
  pointer-events: auto;
  width: min(940px, calc(100vw - 26px));
  border: 1px solid var(--border2);
  border-radius: 10px;
  background: var(--s2);
  box-shadow: 0 0 0 1px rgba(var(--glow-rgb),0.1), 0 12px 26px rgba(0,0,0,0.35);
  padding: 12px 14px;
}
.cookie-banner-title {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--accent3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.cookie-banner-text {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}
.cookie-banner-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════
   LOADING SPINNER
   ══════════════════════════════════════════ */
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Inline loader shown below the form-row ── */
.shorten-loader {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.shorten-loader.hidden { display: none; }

.loader-ring {
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(var(--glow-rgb), 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  flex-shrink: 0;
}

.loader-text {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════
   404 NOT FOUND
   ══════════════════════════════════════════ */
.nf-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nf-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.nf-code {
  display: flex;
  align-items: center;
  gap: 0.05em;
  font-family: var(--sans);
  font-size: clamp(5rem, 18vw, 14rem);
  font-weight: 900;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 40px rgba(var(--glow-rgb),.55), 0 0 90px rgba(var(--glow-rgb),.2);
  letter-spacing: -0.02em;
  margin-bottom: 0.35em;
  user-select: none;
}
.nf-digit { display: inline-block; }
.nf-zero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.72em;
  height: 1em;
  border: 0.055em solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(var(--glow-rgb),.35), inset 0 0 18px rgba(var(--glow-rgb),.08);
  overflow: hidden;
}
.nf-logo {
  width: 58%;
  height: 58%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(var(--glow-rgb),.7));
}
.nf-msg {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}
.nf-home {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-bottom: 1px solid var(--border2);
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.nf-home:hover { color: var(--accent); border-color: var(--accent); }

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 860px) {
  .app-shell { width: 100%; max-width: 100%; }
  .form-row  { grid-template-columns: 1fr; }
  .topbar    { padding: 0 14px; gap: 6px; }
  .topbar-right { flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
  .brand { min-width: 0; flex-shrink: 1; }
  .panel button, .panel .btn { width: 100%; justify-content: center; }
  .badge { display: none; }

  .link-card { --actions-col: 0px; }
  .link-card .lc-top { grid-template-columns: minmax(0, 1fr) auto; }
  .link-card .original {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .lc-actions button,
  .lc-actions .btn {
    width: auto;
    justify-content: center;
  }
  .lc-edit-row {
    grid-template-columns: 1fr;
  }
  .bulk-domain-row {
    grid-template-columns: 1fr;
  }
  .account-layout {
    grid-template-columns: 1fr;
  }
  .cookie-banner-actions {
    justify-content: stretch;
  }
}

/* Mobile auth bar — hidden on desktop */
.mobile-auth {
  display: none;
}

@media (max-width: 1100px) {
  /* Hide auth in topbar, show mobile bar instead */
  .topbar-auth { display: none; }
  .mobile-auth {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(7,19,31,0.55);
    backdrop-filter: blur(12px);
  }
  :root.light .mobile-auth { background: rgba(240,244,248,0.85); }
  .mobile-auth .btn,
  .mobile-auth button { width: auto; }
}

@media (max-width: 600px) {
  .hero h1 { font-size: 1.1rem; }

  .brand span:first-of-type {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hdr-theme-label { display: none; }
  .hdr-scheme-trigger span:not(.hdr-scheme-swatch):not(.hdr-scheme-chevron) { display: none; }
}

@media (max-width: 480px) {
  .hdr-lang-select { min-width: 52px; }
  .brand span:first-of-type { max-width: 100px; }
}

@media (max-width: 520px) {
  .link-card {
    padding: 10px;
  }
  .lc-actions {
    gap: 5px;
  }
}

/* ══════════════════════════════════════════
   ── Utility classes (replaces inline styles)
   ══════════════════════════════════════════ */

/* Layout */
.panel--narrow  { max-width: 420px; margin-left: auto; margin-right: auto; }
.panel--account { max-width: 940px; margin-left: auto; margin-right: auto; }
.panel--privacy { max-width: 860px; margin-left: auto; margin-right: auto; }
.panel--mt      { margin-top: 12px; }

/* Spacing */
.mt-0  { margin-top: 0; }
.mt-6  { margin-top: 6px; }
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mb-8  { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mt-4  { margin-top: 4px; }

/* Display */
.d-inline { display: inline; }

/* Text */
.muted-sm   { color: var(--muted); font-size: .9rem; }
.hint-text  { font-size: 0.82em; color: #888; font-family: var(--mono); }
.select-all { user-select: all; }

/* Login spinner */
.spinner-wrap { display: none; margin-top: 10px; align-items: center; gap: 8px; }

/* Login progress / cooldown bar */
.progress-wrap  { display: none; margin-top: 8px; }
.progress-track { height: 4px; background: rgba(128,128,128,0.2); border-radius: 2px; overflow: hidden; }
.progress-bar   { height: 100%; border-radius: 2px; width: 0%; background: var(--accent, #00d4ff); }
.progress-label { font-size: 0.82em; margin-top: 5px; color: #888; }

/* MFA lockout bar */
.lockout-wrap  { margin-bottom: 16px; }
.lockout-track { height: 6px; background: #e0e0e0; border-radius: 3px; overflow: hidden; }
.lockout-bar   { height: 100%; background: #e53; border-radius: 3px; width: 100%; }
.lockout-label { font-size: 0.85em; margin-top: 6px; color: #888; }
.btn--locked   { opacity: 0.5; cursor: not-allowed; }