@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Exo+2:ital,wght@0,300;0,400;0,600;0,700;0,900;1,400&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:    8px;
  --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; }

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;
}
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);
}

/* ══════════════════════════════════════════
   FORM ELEMENTS
   ══════════════════════════════════════════ */
input[type='text'], input[type='password'], input[type='file'], select, textarea {
  width: 100%;
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 8px 11px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.3s;
}
:root:not(.light) input[type='text'],
:root:not(.light) input[type='password'],
:root:not(.light) input[type='file'],
:root:not(.light) select,
:root:not(.light) textarea { background: rgba(0,0,0,0.4); }
input[type='text']:focus, input[type='password']:focus, select:focus, textarea:focus {
  border-color: var(--accent2);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
input[aria-invalid='true'], textarea[aria-invalid='true'] { border-color: var(--danger); }
input[aria-invalid='true']:focus, textarea[aria-invalid='true']:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255,63,92,0.15); }
input[type='file'] { padding: 6px 10px; cursor: pointer; }
input::placeholder { color: var(--muted); }
select { cursor: pointer; }
select option { background: var(--s2); color: var(--text); }
textarea { resize: vertical; min-height: 80px; }
input:disabled, select:disabled { opacity: 0.4; cursor: not-allowed; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ══════════════════════════════════════════
   PORTAL LAYOUT
   ══════════════════════════════════════════ */
.portal {
  position: relative; z-index: 1;
  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%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(120,40,200,0.04) 0%, transparent 70%),
    var(--bg);
  min-height: 100vh;
  transition: background 0.3s;
}
.main { max-width: 1000px; margin: 0 auto; padding: 2rem 1.5rem 3rem; }
@media (max-width: 640px) { .main { padding: 1rem 1rem 2rem; } }
.footer {
  border-top: 1px solid rgba(140,60,255,0.2);
  text-align: center;
  padding: 1.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  box-shadow: 0 -1px 20px rgba(120,40,200,0.06);
}
.footer a { color: var(--accent); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════
   BACKGROUND FX
   ══════════════════════════════════════════ */
.bgfx { position: absolute; inset: 0; z-index: -1; 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)} }

/* ══════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════ */
.site-header { position: sticky; top: 0; z-index: 200; background: rgba(7,11,16,0.93); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
:root.light .site-header { background: rgba(240,244,248,0.93); }
.hdr-inner { max-width: 1000px; margin: 0 auto; padding: 0 1.5rem; height: 60px; display: flex; align-items: center; }
.hdr-center { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; }
.hdr-logo { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 1rem; color: var(--accent); letter-spacing: 0.05em; white-space: nowrap; text-decoration: none; }
.hdr-logo-img { width: 52px; height: 52px; border-radius: 7px; flex-shrink: 0; object-fit: contain; }
.hdr-logo-text { font-weight: 700; }
@media (max-width: 480px) { .hdr-logo-text { display: none; } }
.hdr-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hdr-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hdr-tag { font-family: var(--mono); font-size: 0.65rem; background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.3); color: var(--accent); padding: 3px 9px; border-radius: 4px; }
.hdr-tag-warn { background: rgba(255,170,0,0.1); border-color: rgba(255,170,0,0.35); color: var(--warn); }
.hdr-disc-link { color: var(--accent); font-size: 0.75rem; text-decoration: none; font-family: var(--mono); transition: color 0.15s; }
.hdr-disc-link:hover { text-decoration: underline; }

/* Notice bar */
.hdr-notice { background: linear-gradient(90deg,rgba(0,112,243,0.12) 0%,rgba(0,212,255,0.08) 100%); border-top: 2px solid var(--accent2); border-bottom: 1px solid var(--border); padding: 9px 1.5rem; text-align: center; font-size: 0.78rem; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.hdr-notice a { color: var(--accent); text-decoration: none; }
.hdr-notice a:hover { text-decoration: underline; }
.hdr-notice-danger { color: var(--danger); font-weight: 700; }

/* 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; transition: border-color 0.2s, background 0.2s; color: var(--text); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; }
.hdr-theme-btn:hover { border-color: var(--accent); background: rgba(var(--glow-rgb),0.06); }
.hdr-theme-track { width: 38px; 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(18px); }
.hdr-theme-label { color: var(--muted); user-select: none; }

/* Lang switcher */
.hdr-lang { display: flex; align-items: center; }
.lcd { position: relative; display: inline-block; }
.lcd summary { list-style: none; display: block; }
.lcd summary::-webkit-details-marker { display: none; }
.lcd-summary { display: flex; align-items: center; gap: 6px; min-width: 62px; justify-content: center; background: linear-gradient(180deg, rgba(var(--glow-rgb),0.12), rgba(var(--glow-rgb),0.05)); border: 1px solid rgba(var(--glow-rgb),0.35); border-radius: 8px; color: var(--text); font-family: var(--mono); font-size: 0.72rem; font-weight: 700; padding: 5px 9px; cursor: pointer; transition: color .15s, border-color .15s, background .15s, box-shadow .15s, transform .12s; white-space: nowrap; user-select: none; }
.lcd-summary:hover { color: var(--text); border-color: var(--accent); background: linear-gradient(180deg, rgba(var(--glow-rgb),0.16), rgba(var(--glow-rgb),0.08)); box-shadow: 0 0 0 2px rgba(var(--glow-rgb),0.12); }
.lcd-summary:active { transform: translateY(1px); }
.lcd-summary:focus-visible { outline: none; border-color: var(--accent2); box-shadow: 0 0 0 3px var(--focus-ring); }
.lcd.lcd-open .lcd-summary svg { transform: rotate(180deg); }
.lcd-summary svg { transition: transform .15s; }
.lcd-menu { display: none; position: absolute; top: calc(100% + 7px); left: 0; background: #0c1520; border: 1px solid var(--border2); border-radius: 10px; padding: 5px; z-index: 9999; box-shadow: 0 12px 30px rgba(0,0,0,.35); min-width: 112px; transform-origin: top left; animation: lcdDrop .12s ease-out; }
:root.light .lcd-menu { background: #ffffff; }
.lcd.lcd-open .lcd-menu { display: block; }
.lcd-menu form { margin: 0; display: block; }
.lcd-item { display: flex; align-items: center; gap: 7px; width: 100%; background: transparent !important; border: none; color: var(--text); font-family: var(--mono); font-size: 0.72rem; font-weight: 700; padding: 6px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; box-sizing: border-box; appearance: none; -webkit-appearance: none; }
.lcd-item:hover { background: rgba(var(--glow-rgb),.14); color: var(--text); }
.lcd-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent2); }
.lcd-item-active { color: var(--accent); background: rgba(var(--glow-rgb),.2); }
.lcd-item img { display: block; flex-shrink: 0; }
@keyframes lcdDrop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 640px) {
  .lcd-summary { min-width: 58px; padding: 4px 8px; }
  .lcd-menu { left: -2px; min-width: 104px; }
}

/* 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 { 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; }
.hdr-scheme-trigger.open .hdr-scheme-chevron { transform: rotate(180deg); }
.hdr-scheme-dropdown { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); 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.35); 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); }

/* ══════════════════════════════════════════
   SECTION CARDS
   ══════════════════════════════════════════ */
.sec-card { position: relative; margin-bottom: 1.5rem; border-radius: 12px; background: var(--s1); overflow: visible; box-shadow: 0 0 0 1px rgba(var(--glow-rgb),0.25), 0 0 12px rgba(var(--glow-rgb),0.08); transition: box-shadow 0.4s ease, transform 0.3s ease; }
.sec-card::before { content: ''; position: absolute; inset: -1px; border-radius: 13px; background: linear-gradient(135deg,rgba(var(--glow-rgb),0.18) 0%,rgba(var(--glow-rgb),0.06) 40%,transparent 70%); pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.4s ease; }
.sec-card::after { content: ''; position: absolute; top: -1px; left: 10%; right: 10%; height: 1px; border-radius: 1px; background: linear-gradient(90deg,transparent,rgba(var(--glow-rgb),0.7) 30%,var(--glow-bright) 50%,rgba(var(--glow-rgb),0.7) 70%,transparent); opacity: 0; transition: opacity 0.4s ease, left 0.4s ease, right 0.4s ease; filter: blur(0.5px); }
.sec-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(var(--glow-rgb),0.5), 0 0 24px rgba(var(--glow-rgb),0.25), 0 0 60px rgba(var(--glow-rgb),0.12), 0 8px 32px rgba(0,0,0,0.25); }
.sec-card:hover::before { opacity: 1; }
.sec-card:hover::after { opacity: 1; left: 5%; right: 5%; }
.sec-card:focus-within { box-shadow: 0 0 0 1px rgba(var(--glow-rgb),0.6), 0 0 30px rgba(var(--glow-rgb),0.3), 0 0 70px rgba(var(--glow-rgb),0.15), 0 8px 40px rgba(0,0,0,0.3); transform: translateY(-2px); }
.sec-card:focus-within::before { opacity: 1; }
.sec-card:focus-within::after { opacity: 1; left: 5%; right: 5%; }
:root.light .sec-card { box-shadow: 0 0 0 1px rgba(var(--glow-rgb),0.2), 0 2px 12px rgba(var(--glow-rgb),0.06); }
:root.light .sec-card:hover { box-shadow: 0 0 0 1px rgba(var(--glow-rgb),0.45), 0 0 20px rgba(var(--glow-rgb),0.15), 0 8px 32px rgba(var(--glow-rgb),0.08); }
:root.light .sec-card:focus-within { box-shadow: 0 0 0 1px rgba(var(--glow-rgb),0.5), 0 0 24px rgba(var(--glow-rgb),0.18), 0 8px 32px rgba(var(--glow-rgb),0.1); }
.sec-card-inner { position: relative; z-index: 1; border-radius: 12px; overflow: hidden; }
.sec-card-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--s2); border-bottom: 1px solid rgba(var(--glow-rgb),0.15); cursor: pointer; user-select: none; transition: background 0.2s; position: relative; }
.sec-card-head:hover { background: var(--s3); }
.sec-card-head::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(var(--glow-rgb),0.05),transparent); opacity:0; transition:opacity 0.3s; pointer-events:none; }
.sec-card:hover .sec-card-head::after { opacity: 1; }
.sec-card-icon { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; box-shadow: 0 2px 8px rgba(0,0,0,0.3); transition: box-shadow 0.3s, transform 0.3s; }
.sec-card:hover .sec-card-icon { box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 12px rgba(var(--glow-rgb),0.3); transform: scale(1.06); }
.sec-card-title { flex: 1; text-align: center; }
.sec-card-title h3 { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.02em; transition: color 0.2s; }
.sec-card:hover .sec-card-title h3 { color: var(--glow-title); }
.sec-card-title p { font-size: 0.68rem; color: var(--muted); margin-top: 2px; font-weight: 400; }
.sec-chevron { color: var(--muted); font-size: 0.6rem; transition: transform 0.25s, color 0.2s; }
.sec-chevron.open { transform: rotate(180deg); }
.sec-card:hover .sec-chevron { color: rgba(var(--glow-rgb),0.8); }
.sec-card-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.sec-card-body.collapsed { display: none; }

/* ══════════════════════════════════════════
   LAYOUT UTILITIES
   ══════════════════════════════════════════ */
.g2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.g5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
@media (max-width: 900px) { .g4, .g5 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { .g2,.g3,.g4,.g5 { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-family: var(--mono); font-size: 0.67rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.input-wrap { position: relative; }
.input-wrap::after { content: attr(data-hint); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--s2); color: var(--text); font-size: 0.72rem; line-height: 1.4; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--border2); box-shadow: 0 4px 14px rgba(0,0,0,0.35); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s, transform 0.15s; z-index: 100; }
.input-wrap:hover::after, .input-wrap:focus-within::after { opacity: 1; transform: translateX(-50%) translateY(0); }

.divider { height: 1px; background: var(--border); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 20px; 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; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
.btn-primary { background: linear-gradient(135deg,var(--accent2),var(--accent)); color: #ffffff; box-shadow: 0 2px 12px rgba(0,112,243,0.25); }
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); box-shadow: 0 4px 18px rgba(0,112,243,0.4); }
.btn-primary:active { transform: translateY(0); }
:root.light .btn-primary { background: linear-gradient(135deg,#1a7fff,#0055cc); color: #ffffff; box-shadow: 0 2px 10px rgba(0,85,204,0.3); }
:root.light .btn-primary:hover { box-shadow: 0 4px 16px rgba(0,85,204,0.45); }
.btn-danger { background: rgba(255,63,92,0.10); border: 1px solid rgba(255,63,92,0.35); color: var(--danger); }
.btn-danger:hover { background: rgba(255,63,92,0.18); }
:root.light .btn-danger { background: rgba(217,43,75,0.08); border-color: rgba(217,43,75,0.4); }
:root.light .btn-danger:hover { background: rgba(217,43,75,0.15); }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Actions row */
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.ml-auto { margin-left: auto; }

/* Add row button */
.add-row { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: transparent; border: 1px dashed rgba(0,112,243,0.35); border-radius: 5px; color: var(--accent); font-family: var(--mono); font-size: 0.73rem; cursor: pointer; transition: all 0.15s; }
.add-row:hover { background: rgba(0,112,243,0.07); border-color: var(--accent); }
.add-row-danger { border-color: rgba(255,63,92,0.3); color: var(--danger); }
.add-row-danger:hover { background: rgba(255,63,92,0.07); border-color: var(--danger); }

/* Advanced options */
.advanced { border-top: 1px dashed var(--border); padding-top: 6px; }
.advanced-toggle { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: none; color: var(--muted); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; cursor: pointer; padding: 4px 0; transition: color 0.15s; user-select: none; }
.advanced-toggle:hover { color: var(--accent); }
.advanced-chevron { display: inline-block; font-size: 0.6rem; transition: transform 0.2s; color: var(--muted); }
.advanced-chevron.open { transform: rotate(90deg); }
.advanced-body { padding-top: 12px; }
.advanced-body.hidden { display: none; }

/* Toggle */
.toggles { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; padding: 2px 0; }
.tgl { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.tgl-track { width: 40px; height: 22px; border-radius: 11px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); position: relative; transition: background 0.2s, border-color 0.2s; flex-shrink: 0; }
.tgl-track::after { content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:var(--muted); top:2px; left:2px; transition:transform 0.2s, background 0.2s; }
.tgl.on .tgl-track { background: rgba(0,212,255,0.18); border-color: var(--accent); }
.tgl.on .tgl-track::after { transform: translateX(18px); background: var(--accent); }
.tgl.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.tgl-label { font-size: 0.8rem; }

/* Result message */
.result { font-size: 0.82rem; font-weight: 700; padding: 8px 12px; border-radius: 6px; }
.result-ok { background: rgba(0,170,102,0.1); color: #00aa66; border: 1px solid rgba(0,170,102,0.25); }
.result-err { background: rgba(255,63,92,0.1); color: var(--danger); border: 1px solid rgba(255,63,92,0.25); }

/* Progress bar */
@keyframes progressSlide { 0%{transform:translateX(-100%)} 100%{transform:translateX(400%)} }
.progress-bar { height: 2px; border-radius: 2px; overflow: hidden; background: rgba(0,112,243,0.12); margin-top: 8px; position: relative; }
.progress-bar::after { content:""; position:absolute; inset:0; width:25%; background:linear-gradient(90deg,transparent,var(--accent),var(--accent2,#00d4ff),transparent); animation: progressSlide 1.2s ease-in-out infinite; }

/* Info table */
.info-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.info-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
.info-table td:first-child { width: 40%; }
.info-table tr:last-child td { border-bottom: none; }
.info-key { color: var(--accent); font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
.info-val { color: var(--text); font-size: 0.82rem; line-height: 1.45; word-break: break-word; }
.info-val-status { font-weight: 700; }
.info-val-status.is-ok { color: var(--accent3); }
.info-val-status.is-bad { color: var(--danger); }

/* Playlist info */
.pi-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; max-width: 860px; }
.pi-row .field { min-width: 0; }
.pi-check-btn { height: 36px; align-self: end; white-space: nowrap; }
.pi-result { margin-top: 6px; }
.pi-status { display: inline-block; }
.pi-timeout { position: relative; margin-top: 8px; height: 16px; border: 1px solid var(--border2); border-radius: 999px; background: rgba(var(--glow-rgb), 0.08); overflow: hidden; }
.pi-timeout-fill { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width 0.12s linear; }
.pi-timeout-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.64rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); pointer-events: none; }
.pi-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.pi-panel { background: var(--s2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 10px rgba(0,0,0,0.18); }
.pi-panel-title { padding: 10px 12px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: rgba(var(--glow-rgb), 0.06); }
@media (max-width: 640px) {
  .pi-row { grid-template-columns: 1fr; }
  .pi-check-btn { width: 100%; }
  .info-table td { padding: 7px 8px; }
  .info-key { font-size: 0.68rem; }
  .info-val { font-size: 0.78rem; }
}

/* Inline row */
.inline-row { display: grid; grid-template-columns: repeat(3,1fr) auto; gap: 12px; align-items: end; }
@media (max-width: 900px) { .inline-row { grid-template-columns: repeat(2,1fr); } .inline-row .btn-aligned { grid-column: span 2; } }
@media (max-width: 640px) { .inline-row { grid-template-columns: 1fr; } .inline-row .btn-aligned { grid-column: span 1; } }
.btn-aligned { margin-bottom: 0; height: 36px; align-self: end; }

/* Cookie banner */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 24px; background: rgba(7,11,16,0.96); border-top: 1px solid var(--accent); backdrop-filter: blur(16px); box-shadow: 0 -4px 24px rgba(0,180,255,0.08); }
.cookie-banner.hidden { display: none; }
.cookie-text { flex: 1; min-width: 200px; margin: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
.cookie-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cookie-link:hover { opacity: 0.8; }

/* ══════════════════════════════════════════
   DOWNLOADS PAGE
   ══════════════════════════════════════════ */
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.dp-root { animation: fadeIn 0.2s ease; }
.dp-page-header { display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 1.75rem; }
.dp-back-btn { display: flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--border2); border-radius: var(--radius); color: var(--accent); font-family: var(--mono); font-size: 0.78rem; font-weight: 600; padding: 0.4rem 0.8rem; cursor: pointer; white-space: nowrap; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; flex-shrink: 0; margin-top: 4px; }
.dp-back-btn:hover { border-color: var(--accent); background: rgba(var(--glow-rgb),0.06); box-shadow: 0 0 10px rgba(var(--glow-rgb),0.15); }
.dp-title { font-size: 1.35rem; font-weight: 700; color: var(--glow-title); letter-spacing: -0.01em; text-shadow: 0 0 18px rgba(var(--glow-rgb),0.35); }
.dp-subtitle { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); margin-top: 0.25rem; }
.dp-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); margin-bottom: 1.25rem; }
.dp-breadcrumb-item { display: flex; align-items: center; gap: 0.4rem; }
.dp-breadcrumb button { background: none; border: none; color: var(--accent); cursor: pointer; font-family: var(--mono); font-size: inherit; padding: 0; transition: color 0.15s; }
.dp-breadcrumb button:hover { color: var(--glow-bright); text-decoration: underline; }
.dp-sep { color: var(--border2); }
.dp-current { color: var(--text); }
.dp-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.dp-folder-card { background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 0.75rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.1s; }
.dp-folder-card:hover { border-color: var(--accent); background: var(--s2); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(var(--glow-rgb),0.12); }
.dp-folder-icon { font-size: 2rem; }
.dp-folder-name { font-family: var(--mono); font-size: 0.8rem; font-weight: 600; color: var(--text); word-break: break-all; }
.dp-badge { font-family: var(--mono); font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; }
.dp-badge-free { background: rgba(var(--glow-rgb),0.1); border: 1px solid rgba(var(--glow-rgb),0.25); color: var(--accent); }
.dp-badge-pro { background: rgba(255,170,0,0.1); border: 1px solid rgba(255,170,0,0.25); color: var(--warn); }
.dp-badge-ver { background: rgba(var(--glow-rgb),0.08); border: 1px solid rgba(var(--glow-rgb),0.2); color: var(--accent2); }
.dp-file-list { display: flex; flex-direction: column; gap: 0.5rem; }
.dp-file-row { background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem 1rem; display: flex; align-items: center; gap: 1rem; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.dp-file-row:hover { border-color: var(--accent); background: var(--s2); box-shadow: 0 2px 14px rgba(var(--glow-rgb),0.1); }
.dp-file-icon { font-size: 1.4rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.dp-file-icon-android { color: #3ddc84; }
.dp-file-icon-android svg { width: 22px; height: 22px; display: block; }
.dp-file-info { flex: 1; min-width: 0; }
.dp-file-name { font-family: var(--mono); font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-file-meta { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }
.dp-arch-badge { font-family: var(--mono); font-size: 0.68rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 5px; background: var(--s2); border: 1px solid var(--border2); color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.dp-dl-btn { display: flex; align-items: center; gap: 0.4rem; background: linear-gradient(135deg,var(--accent2),var(--accent)); color: #fff; border: none; border-radius: 6px; padding: 0.45rem 0.9rem; font-family: var(--mono); font-size: 0.78rem; font-weight: 600; cursor: pointer; text-decoration: none; letter-spacing: 0.03em; flex-shrink: 0; transition: opacity 0.15s, box-shadow 0.15s; }
.dp-dl-btn:hover { opacity: 0.88; box-shadow: 0 0 14px rgba(var(--glow-rgb),0.35); }
.dp-state-box { text-align: center; padding: 4rem 1rem; color: var(--muted); font-family: var(--mono); }
.dp-state-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.dp-state-box p { font-size: 0.875rem; }
.dp-retry-btn { margin-top: 1rem; background: var(--s2); border: 1px solid var(--border2); color: var(--text); padding: 0.5rem 1.25rem; border-radius: 7px; cursor: pointer; font-family: var(--mono); font-size: 0.8rem; transition: border-color 0.15s; }
.dp-retry-btn:hover { border-color: var(--accent); }