/* =========================================================
   ZORION — CSS principal
   ========================================================= */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  cursor: default;
  transition: background 0.8s ease;
}

.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

/* ===== FUNDO ===== */
.bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #05100b;
  transition: opacity 0.9s ease;
  opacity: 1;
  will-change: opacity;
}
.bg.fade-out { opacity: 0; }

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.6) 100%),
    radial-gradient(ellipse at center, transparent 55%, var(--theme-accent-glow) 100%);
  background-blend-mode: normal, screen;
  transition: background 0.8s ease;
}

.floor-glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18%;
  pointer-events: none;
  background: linear-gradient(to top, var(--theme-floor-glow), transparent);
  transition: background 0.8s ease;
}

/* =========================================================
   TEMAS — variáveis CSS
   ========================================================= */
:root {
  --theme-accent: #3cff8c;
  --theme-accent-soft: rgba(60,255,140,0.55);
  --theme-accent-glow: rgba(60,255,140,0.25);
  --theme-text: #b9ffd8;
  --theme-text-bright: #eafff2;
  --theme-text-shadow-1: rgba(60,255,140,0.55);
  --theme-text-shadow-2: rgba(60,255,140,0.25);
  --theme-card-bg: rgba(4,18,12,0.42);
  --theme-card-bg-hover: rgba(8,32,22,0.6);
  --theme-card-border: rgba(80,255,150,0.18);
  --theme-card-border-hover: rgba(120,255,180,0.55);
  --theme-card-glow: rgba(40,255,140,0.08);
  --theme-card-glow-hover: rgba(60,255,150,0.4);
  --theme-card-inner: rgba(40,255,140,0.06);
  --theme-card-inner-hover: rgba(60,255,150,0.14);
  --theme-line: rgba(120,255,180,0.6);
  --theme-floor-glow: rgba(40,255,140,0.15);
  --theme-icon-bg: rgba(20,22,26,0.55);
  --theme-icon-inset: rgba(255,255,255,0.05);
  --theme-icon-inset-hover: rgba(255,255,255,0.08);

  --icon-gradient-notes: linear-gradient(135deg, #22d3ee, #3b82f6);
  --icon-glow-notes: rgba(34,211,238,0.55);
  --icon-gradient-new:   linear-gradient(135deg, #fbbf24, #f97316);
  --icon-glow-new:       rgba(251,191,36,0.55);
  --icon-gradient-theme: linear-gradient(135deg, #a78bfa, #ec4899);
  --icon-glow-theme:     rgba(168,139,250,0.55);
  --icon-gradient-games: linear-gradient(135deg, #a78bfa, #3b82f6);
  --icon-glow-games:     rgba(167,139,250,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #3b82f6, #ec4899);
  --icon-glow-settings:     rgba(59,130,246,0.55);
}

:root[data-theme="sunset"] {
  --theme-accent: #ffb347;
  --theme-accent-soft: rgba(255,179,71,0.55);
  --theme-accent-glow: rgba(255,179,71,0.25);
  --theme-text: #ffe4bf;
  --theme-text-bright: #fff4e0;
  --theme-text-shadow-1: rgba(255,179,71,0.55);
  --theme-text-shadow-2: rgba(255,140,60,0.25);
  --theme-card-bg: rgba(30,14,4,0.42);
  --theme-card-bg-hover: rgba(50,24,8,0.6);
  --theme-card-border: rgba(255,179,71,0.18);
  --theme-card-border-hover: rgba(255,200,110,0.55);
  --theme-card-glow: rgba(255,140,60,0.08);
  --theme-card-glow-hover: rgba(255,170,80,0.4);
  --theme-card-inner: rgba(255,140,60,0.06);
  --theme-card-inner-hover: rgba(255,170,80,0.14);
  --theme-line: rgba(255,200,110,0.6);
  --theme-floor-glow: rgba(255,140,60,0.15);
  --theme-icon-bg: rgba(30,18,10,0.55);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #fcd34d, #f59e0b);
  --icon-glow-notes:     rgba(252,211,77,0.55);
  --icon-gradient-new:   linear-gradient(135deg, #fb923c, #ef4444);
  --icon-glow-new:       rgba(251,146,60,0.55);
  --icon-gradient-theme: linear-gradient(135deg, #f472b6, #fbbf24);
  --icon-glow-theme:     rgba(244,114,182,0.55);
  --icon-gradient-games: linear-gradient(135deg, #f472b6, #f59e0b);
  --icon-glow-games:     rgba(244,114,182,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #f59e0b, #fbbf24);
  --icon-glow-settings:     rgba(245,158,11,0.55);
}

:root[data-theme="ice"] {
  --theme-accent: #4fc3f7;
  --theme-accent-soft: rgba(79,195,247,0.55);
  --theme-accent-glow: rgba(79,195,247,0.25);
  --theme-text: #c8ecff;
  --theme-text-bright: #eaf7ff;
  --theme-text-shadow-1: rgba(79,195,247,0.55);
  --theme-text-shadow-2: rgba(79,195,247,0.25);
  --theme-card-bg: rgba(4,14,26,0.42);
  --theme-card-bg-hover: rgba(8,24,42,0.6);
  --theme-card-border: rgba(79,195,247,0.2);
  --theme-card-border-hover: rgba(120,220,255,0.55);
  --theme-card-glow: rgba(79,195,247,0.08);
  --theme-card-glow-hover: rgba(100,200,255,0.4);
  --theme-card-inner: rgba(79,195,247,0.06);
  --theme-card-inner-hover: rgba(100,200,255,0.14);
  --theme-line: rgba(120,220,255,0.6);
  --theme-floor-glow: rgba(79,195,247,0.15);
  --theme-icon-bg: rgba(16,22,32,0.55);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #67e8f9, #3b82f6);
  --icon-glow-notes:     rgba(103,232,249,0.55);
  --icon-gradient-new:   linear-gradient(135deg, #a5e3ff, #4fc3f7);
  --icon-glow-new:       rgba(165,227,255,0.55);
  --icon-gradient-theme: linear-gradient(135deg, #818cf8, #22d3ee);
  --icon-glow-theme:     rgba(129,140,248,0.55);
  --icon-gradient-games: linear-gradient(135deg, #818cf8, #3b82f6);
  --icon-glow-games:     rgba(129,140,248,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #3b82f6, #22d3ee);
  --icon-glow-settings:     rgba(59,130,246,0.55);
}

:root[data-theme="jungle"] {
  --theme-accent: #7cf03a;
  --theme-accent-soft: rgba(124,240,58,0.55);
  --theme-accent-glow: rgba(124,240,58,0.25);
  --theme-text: #d8ffb9;
  --theme-text-bright: #eaffd8;
  --theme-text-shadow-1: rgba(124,240,58,0.55);
  --theme-text-shadow-2: rgba(124,240,58,0.25);
  --theme-card-bg: rgba(6,18,4,0.5);
  --theme-card-bg-hover: rgba(12,30,6,0.68);
  --theme-card-border: rgba(124,240,58,0.2);
  --theme-card-border-hover: rgba(160,255,100,0.55);
  --theme-card-glow: rgba(124,240,58,0.08);
  --theme-card-glow-hover: rgba(140,255,80,0.4);
  --theme-card-inner: rgba(124,240,58,0.06);
  --theme-card-inner-hover: rgba(140,255,80,0.14);
  --theme-line: rgba(160,255,100,0.6);
  --theme-floor-glow: rgba(124,240,58,0.15);
  --theme-icon-bg: rgba(14,26,10,0.6);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #4ade80, #16a34a);
  --icon-glow-notes:     rgba(74,222,128,0.55);
  --icon-gradient-new:   linear-gradient(135deg, #baff88, #7cf03a);
  --icon-glow-new:       rgba(186,255,136,0.55);
  --icon-gradient-theme: linear-gradient(135deg, #22c55e, #a3e635);
  --icon-glow-theme:     rgba(34,197,94,0.55);
  --icon-gradient-games: linear-gradient(135deg, #22c55e, #16a34a);
  --icon-glow-games:     rgba(34,197,94,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #16a34a, #a3e635);
  --icon-glow-settings:     rgba(22,163,74,0.55);
}

:root[data-theme="rose"] {
  --theme-accent: #ff9d6c;
  --theme-accent-soft: rgba(255,157,108,0.55);
  --theme-accent-glow: rgba(255,157,108,0.25);
  --theme-text: #ffe1c9;
  --theme-text-bright: #fff2e4;
  --theme-text-shadow-1: rgba(255,157,108,0.55);
  --theme-text-shadow-2: rgba(255,190,140,0.25);
  --theme-card-bg: rgba(26,16,10,0.42);
  --theme-card-bg-hover: rgba(42,26,16,0.6);
  --theme-card-border: rgba(255,157,108,0.2);
  --theme-card-border-hover: rgba(255,190,150,0.55);
  --theme-card-glow: rgba(255,157,108,0.08);
  --theme-card-glow-hover: rgba(255,180,140,0.4);
  --theme-card-inner: rgba(255,157,108,0.06);
  --theme-card-inner-hover: rgba(255,180,140,0.14);
  --theme-line: rgba(255,190,150,0.6);
  --theme-floor-glow: rgba(255,157,108,0.15);
  --theme-icon-bg: rgba(28,18,12,0.55);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #fda4af, #fb7185);
  --icon-glow-notes:     rgba(253,164,175,0.55);
  --icon-gradient-new:   linear-gradient(135deg, #fdba74, #fb923c);
  --icon-glow-new:       rgba(253,186,116,0.55);
  --icon-gradient-theme: linear-gradient(135deg, #f0abfc, #fda4af);
  --icon-glow-theme:     rgba(240,171,252,0.55);
  --icon-gradient-games: linear-gradient(135deg, #f0abfc, #fb7185);
  --icon-glow-games:     rgba(240,171,252,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #fb7185, #fda4af);
  --icon-glow-settings:     rgba(251,113,133,0.55);
}

:root[data-theme="blackbulls"] {
  --theme-accent: #ff7a1a;
  --theme-accent-soft: rgba(255,122,26,0.55);
  --theme-accent-glow: rgba(255,122,26,0.25);
  --theme-text: #ffd9b9;
  --theme-text-bright: #fff0dd;
  --theme-text-shadow-1: rgba(255,122,26,0.55);
  --theme-text-shadow-2: rgba(255,80,20,0.25);
  --theme-card-bg: rgba(20,8,2,0.55);
  --theme-card-bg-hover: rgba(36,14,4,0.7);
  --theme-card-border: rgba(255,122,26,0.22);
  --theme-card-border-hover: rgba(255,160,60,0.6);
  --theme-card-glow: rgba(255,122,26,0.1);
  --theme-card-glow-hover: rgba(255,150,50,0.45);
  --theme-card-inner: rgba(255,122,26,0.08);
  --theme-card-inner-hover: rgba(255,150,50,0.16);
  --theme-line: rgba(255,160,60,0.65);
  --theme-floor-glow: rgba(255,122,26,0.18);
  --theme-icon-bg: rgba(24,12,6,0.6);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #fbbf24, #ea580c);
  --icon-glow-notes:     rgba(251,191,36,0.6);
  --icon-gradient-new:   linear-gradient(135deg, #fb923c, #dc2626);
  --icon-glow-new:       rgba(251,146,60,0.6);
  --icon-gradient-theme: linear-gradient(135deg, #f97316, #7c2d12);
  --icon-glow-theme:     rgba(249,115,22,0.6);
  --icon-gradient-games: linear-gradient(135deg, #f97316, #ea580c);
  --icon-glow-games:     rgba(249,115,22,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #ea580c, #7c2d12);
  --icon-glow-settings:     rgba(234,88,12,0.55);
}

:root[data-theme="sharingan"] {
  --theme-accent: #ff2a2a;
  --theme-accent-soft: rgba(255,42,42,0.55);
  --theme-accent-glow: rgba(255,42,42,0.28);
  --theme-text: #ffc8c8;
  --theme-text-bright: #ffe0e0;
  --theme-text-shadow-1: rgba(255,42,42,0.6);
  --theme-text-shadow-2: rgba(180,0,0,0.3);
  --theme-card-bg: rgba(12,2,2,0.6);
  --theme-card-bg-hover: rgba(26,4,4,0.75);
  --theme-card-border: rgba(255,42,42,0.22);
  --theme-card-border-hover: rgba(255,90,90,0.6);
  --theme-card-glow: rgba(255,42,42,0.12);
  --theme-card-glow-hover: rgba(255,80,80,0.5);
  --theme-card-inner: rgba(255,42,42,0.08);
  --theme-card-inner-hover: rgba(255,80,80,0.16);
  --theme-line: rgba(255,90,90,0.65);
  --theme-floor-glow: rgba(255,42,42,0.18);
  --theme-icon-bg: rgba(20,6,6,0.65);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #ff5c5c, #7f1d1d);
  --icon-glow-notes:     rgba(255,92,92,0.6);
  --icon-gradient-new:   linear-gradient(135deg, #ff9a9a, #dc2626);
  --icon-glow-new:       rgba(255,154,154,0.6);
  --icon-gradient-theme: linear-gradient(135deg, #b91c1c, #1f2937);
  --icon-glow-theme:     rgba(185,28,28,0.6);
  --icon-gradient-games: linear-gradient(135deg, #b91c1c, #7f1d1d);
  --icon-glow-games:     rgba(185,28,28,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #7f1d1d, #1f2937);
  --icon-glow-settings:     rgba(127,29,29,0.55);
}

:root[data-theme="sevensins"] {
  --theme-accent: #ffd54a;
  --theme-accent-soft: rgba(255,213,74,0.55);
  --theme-accent-glow: rgba(255,213,74,0.25);
  --theme-text: #ffeab8;
  --theme-text-bright: #fff7dc;
  --theme-text-shadow-1: rgba(255,213,74,0.55);
  --theme-text-shadow-2: rgba(200,150,20,0.25);
  --theme-card-bg: rgba(20,14,2,0.5);
  --theme-card-bg-hover: rgba(36,26,4,0.68);
  --theme-card-border: rgba(255,213,74,0.2);
  --theme-card-border-hover: rgba(255,230,120,0.55);
  --theme-card-glow: rgba(255,213,74,0.1);
  --theme-card-glow-hover: rgba(255,220,100,0.45);
  --theme-card-inner: rgba(255,213,74,0.07);
  --theme-card-inner-hover: rgba(255,220,100,0.15);
  --theme-line: rgba(255,230,120,0.6);
  --theme-floor-glow: rgba(255,213,74,0.16);
  --theme-icon-bg: rgba(26,20,4,0.6);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #fde047, #eab308);
  --icon-glow-notes:     rgba(253,224,71,0.6);
  --icon-gradient-new:   linear-gradient(135deg, #facc15, #f59e0b);
  --icon-glow-new:       rgba(250,204,21,0.6);
  --icon-gradient-theme: linear-gradient(135deg, #fbbf24, #b45309);
  --icon-glow-theme:     rgba(251,191,36,0.6);
  --icon-gradient-games: linear-gradient(135deg, #fbbf24, #eab308);
  --icon-glow-games:     rgba(251,191,36,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #eab308, #b45309);
  --icon-glow-settings:     rgba(234,179,8,0.55);
}

:root[data-theme="zen"] {
  --theme-accent: #e8c98a;
  --theme-accent-soft: rgba(232,201,138,0.55);
  --theme-accent-glow: rgba(232,201,138,0.25);
  --theme-text: #f0ddb8;
  --theme-text-bright: #f8ecd2;
  --theme-text-shadow-1: rgba(232,201,138,0.5);
  --theme-text-shadow-2: rgba(180,140,80,0.25);
  --theme-card-bg: rgba(16,12,8,0.55);
  --theme-card-bg-hover: rgba(30,22,14,0.72);
  --theme-card-border: rgba(232,201,138,0.2);
  --theme-card-border-hover: rgba(245,220,160,0.55);
  --theme-card-glow: rgba(232,201,138,0.08);
  --theme-card-glow-hover: rgba(240,210,150,0.4);
  --theme-card-inner: rgba(232,201,138,0.06);
  --theme-card-inner-hover: rgba(240,210,150,0.14);
  --theme-line: rgba(245,220,160,0.6);
  --theme-floor-glow: rgba(232,201,138,0.15);
  --theme-icon-bg: rgba(22,16,10,0.6);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #f0ddb8, #b45309);
  --icon-glow-notes:     rgba(240,221,184,0.55);
  --icon-gradient-new:   linear-gradient(135deg, #f5e6c5, #ca8a04);
  --icon-glow-new:       rgba(245,230,197,0.55);
  --icon-gradient-theme: linear-gradient(135deg, #ca8a04, #1c1917);
  --icon-glow-theme:     rgba(202,138,4,0.6);
  --icon-gradient-games: linear-gradient(135deg, #ca8a04, #b45309);
  --icon-glow-games:     rgba(202,138,4,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #b45309, #1c1917);
  --icon-glow-settings:     rgba(180,83,9,0.55);
}

:root[data-theme="shadow"] {
  --theme-accent: #6b8dff;
  --theme-accent-soft: rgba(107,141,255,0.55);
  --theme-accent-glow: rgba(107,141,255,0.3);
  --theme-text: #cdd8ff;
  --theme-text-bright: #e6ecff;
  --theme-text-shadow-1: rgba(107,141,255,0.6);
  --theme-text-shadow-2: rgba(60,80,200,0.3);
  --theme-card-bg: rgba(4,6,22,0.6);
  --theme-card-bg-hover: rgba(8,12,40,0.75);
  --theme-card-border: rgba(107,141,255,0.22);
  --theme-card-border-hover: rgba(150,180,255,0.6);
  --theme-card-glow: rgba(107,141,255,0.12);
  --theme-card-glow-hover: rgba(140,170,255,0.5);
  --theme-card-inner: rgba(107,141,255,0.08);
  --theme-card-inner-hover: rgba(140,170,255,0.16);
  --theme-line: rgba(150,180,255,0.65);
  --theme-floor-glow: rgba(107,141,255,0.18);
  --theme-icon-bg: rgba(10,14,34,0.65);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #a8bdff, #4338ca);
  --icon-glow-notes:     rgba(168,189,255,0.6);
  --icon-gradient-new:   linear-gradient(135deg, #c4b5fd, #6b8dff);
  --icon-glow-new:       rgba(196,181,253,0.6);
  --icon-gradient-theme: linear-gradient(135deg, #7c3aed, #22d3ee);
  --icon-glow-theme:     rgba(124,58,237,0.6);
  --icon-gradient-games: linear-gradient(135deg, #7c3aed, #4338ca);
  --icon-glow-games:     rgba(124,58,237,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #4338ca, #22d3ee);
  --icon-glow-settings:     rgba(67,56,202,0.55);
}

:root[data-theme="demonslayer"] {
  --theme-accent: #ff3b5c;
  --theme-accent-soft: rgba(255,59,92,0.55);
  --theme-accent-glow: rgba(255,59,92,0.28);
  --theme-text: #ffd0da;
  --theme-text-bright: #fff0f3;
  --theme-text-shadow-1: rgba(255,59,92,0.6);
  --theme-text-shadow-2: rgba(120,20,45,0.3);
  --theme-card-bg: rgba(18,4,10,0.55);
  --theme-card-bg-hover: rgba(34,8,18,0.72);
  --theme-card-border: rgba(255,59,92,0.22);
  --theme-card-border-hover: rgba(255,120,150,0.6);
  --theme-card-glow: rgba(255,59,92,0.1);
  --theme-card-glow-hover: rgba(255,110,140,0.48);
  --theme-card-inner: rgba(255,59,92,0.08);
  --theme-card-inner-hover: rgba(255,110,140,0.16);
  --theme-line: rgba(255,120,150,0.65);
  --theme-floor-glow: rgba(255,59,92,0.18);
  --theme-icon-bg: rgba(22,6,12,0.6);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #ff7d94, #7f1d2e);
  --icon-glow-notes:     rgba(255,125,148,0.6);
  --icon-gradient-new:   linear-gradient(135deg, #ff9ab0, #e11d48);
  --icon-glow-new:       rgba(255,154,176,0.6);
  --icon-gradient-theme: linear-gradient(135deg, #3b82f6, #e11d48);
  --icon-glow-theme:     rgba(59,130,246,0.6);
  --icon-gradient-games: linear-gradient(135deg, #3b82f6, #7f1d2e);
  --icon-glow-games:     rgba(59,130,246,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #7f1d2e, #e11d48);
  --icon-glow-settings:     rgba(127,29,46,0.55);
}

/* ===== TEMAS 3D DINÂMICOS ===== */
:root[data-theme="cybergrid"] {
  --theme-accent: #00eaff;
  --theme-accent-soft: rgba(0,234,255,0.55);
  --theme-accent-glow: rgba(0,234,255,0.28);
  --theme-text: #baf6ff;
  --theme-text-bright: #e6fdff;
  --theme-text-shadow-1: rgba(0,234,255,0.6);
  --theme-text-shadow-2: rgba(0,120,180,0.3);
  --theme-card-bg: rgba(2,10,18,0.55);
  --theme-card-bg-hover: rgba(4,20,32,0.72);
  --theme-card-border: rgba(0,234,255,0.22);
  --theme-card-border-hover: rgba(90,245,255,0.6);
  --theme-card-glow: rgba(0,234,255,0.12);
  --theme-card-glow-hover: rgba(90,245,255,0.48);
  --theme-card-inner: rgba(0,234,255,0.08);
  --theme-card-inner-hover: rgba(90,245,255,0.16);
  --theme-line: rgba(90,245,255,0.65);
  --theme-floor-glow: rgba(0,234,255,0.2);
  --theme-icon-bg: rgba(4,14,20,0.6);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #67e8f9, #0e7490);
  --icon-glow-notes:     rgba(103,232,249,0.6);
  --icon-gradient-new:   linear-gradient(135deg, #22d3ee, #0891b2);
  --icon-glow-new:       rgba(34,211,238,0.6);
  --icon-gradient-theme: linear-gradient(135deg, #00eaff, #7c3aed);
  --icon-glow-theme:     rgba(0,234,255,0.6);
  --icon-gradient-games: linear-gradient(135deg, #00eaff, #0e7490);
  --icon-glow-games:     rgba(0,234,255,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #0e7490, #7c3aed);
  --icon-glow-settings:     rgba(14,116,144,0.55);
  --theme-bg-scene: radial-gradient(ellipse at 50% 30%, rgba(0,120,150,0.35), transparent 60%),
                     linear-gradient(to bottom, #030a12 0%, #01050a 55%, #000103 100%);
}

:root[data-theme="novawarp"] {
  --theme-accent: #b26bff;
  --theme-accent-soft: rgba(178,107,255,0.55);
  --theme-accent-glow: rgba(178,107,255,0.3);
  --theme-text: #e3d2ff;
  --theme-text-bright: #f4ecff;
  --theme-text-shadow-1: rgba(178,107,255,0.6);
  --theme-text-shadow-2: rgba(90,20,160,0.3);
  --theme-card-bg: rgba(10,4,22,0.58);
  --theme-card-bg-hover: rgba(20,8,42,0.75);
  --theme-card-border: rgba(178,107,255,0.24);
  --theme-card-border-hover: rgba(205,150,255,0.6);
  --theme-card-glow: rgba(178,107,255,0.14);
  --theme-card-glow-hover: rgba(205,150,255,0.5);
  --theme-card-inner: rgba(178,107,255,0.08);
  --theme-card-inner-hover: rgba(205,150,255,0.16);
  --theme-line: rgba(205,150,255,0.65);
  --theme-floor-glow: rgba(178,107,255,0.2);
  --theme-icon-bg: rgba(14,6,26,0.62);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #d8b4fe, #7e22ce);
  --icon-glow-notes:     rgba(216,180,254,0.6);
  --icon-gradient-new:   linear-gradient(135deg, #f0abfc, #a21caf);
  --icon-glow-new:       rgba(240,171,252,0.6);
  --icon-gradient-theme: linear-gradient(135deg, #b26bff, #ec4899);
  --icon-glow-theme:     rgba(178,107,255,0.6);
  --icon-gradient-games: linear-gradient(135deg, #b26bff, #7e22ce);
  --icon-glow-games:     rgba(178,107,255,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #7e22ce, #ec4899);
  --icon-glow-settings:     rgba(126,34,206,0.55);
  --theme-bg-scene: radial-gradient(ellipse at 50% 42%, rgba(120,40,200,0.4), transparent 60%),
                     linear-gradient(to bottom, #0a0414 0%, #05020a 60%, #010005 100%);
}

:root[data-theme="aurora3d"] {
  --theme-accent: #5ef2c0;
  --theme-accent-soft: rgba(94,242,192,0.5);
  --theme-accent-glow: rgba(94,242,192,0.26);
  --theme-text: #cdfff0;
  --theme-text-bright: #eafffa;
  --theme-text-shadow-1: rgba(94,242,192,0.55);
  --theme-text-shadow-2: rgba(60,180,200,0.25);
  --theme-card-bg: rgba(2,18,16,0.5);
  --theme-card-bg-hover: rgba(4,32,28,0.68);
  --theme-card-border: rgba(94,242,192,0.2);
  --theme-card-border-hover: rgba(150,255,220,0.55);
  --theme-card-glow: rgba(94,242,192,0.1);
  --theme-card-glow-hover: rgba(150,255,220,0.45);
  --theme-card-inner: rgba(94,242,192,0.07);
  --theme-card-inner-hover: rgba(150,255,220,0.15);
  --theme-line: rgba(150,255,220,0.6);
  --theme-floor-glow: rgba(94,242,192,0.18);
  --theme-icon-bg: rgba(4,16,14,0.6);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #6ee7b7, #0d9488);
  --icon-glow-notes:     rgba(110,231,183,0.6);
  --icon-gradient-new:   linear-gradient(135deg, #99f6e4, #14b8a6);
  --icon-glow-new:       rgba(153,246,228,0.6);
  --icon-gradient-theme: linear-gradient(135deg, #5ef2c0, #7c3aed);
  --icon-glow-theme:     rgba(94,242,192,0.6);
  --icon-gradient-games: linear-gradient(135deg, #5ef2c0, #0d9488);
  --icon-glow-games:     rgba(94,242,192,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #0d9488, #7c3aed);
  --icon-glow-settings:     rgba(13,148,136,0.55);
  --theme-bg-scene: radial-gradient(ellipse at 50% 20%, rgba(60,200,170,0.22), transparent 65%),
                     linear-gradient(to bottom, #041814 0%, #020c0a 55%, #000403 100%);
}

:root[data-theme="orbit3d"] {
  --theme-accent: #ffcf5c;
  --theme-accent-soft: rgba(255,207,92,0.5);
  --theme-accent-glow: rgba(255,207,92,0.26);
  --theme-text: #ffedc4;
  --theme-text-bright: #fff8e6;
  --theme-text-shadow-1: rgba(255,207,92,0.55);
  --theme-text-shadow-2: rgba(0,180,220,0.25);
  --theme-card-bg: rgba(10,14,20,0.5);
  --theme-card-bg-hover: rgba(16,24,36,0.68);
  --theme-card-border: rgba(255,207,92,0.2);
  --theme-card-border-hover: rgba(255,225,150,0.55);
  --theme-card-glow: rgba(0,195,255,0.1);
  --theme-card-glow-hover: rgba(255,225,150,0.4);
  --theme-card-inner: rgba(255,207,92,0.07);
  --theme-card-inner-hover: rgba(255,225,150,0.15);
  --theme-line: rgba(255,225,150,0.6);
  --theme-floor-glow: rgba(0,195,255,0.16);
  --theme-icon-bg: rgba(8,12,18,0.6);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #fde68a, #d97706);
  --icon-glow-notes:     rgba(253,230,138,0.6);
  --icon-gradient-new:   linear-gradient(135deg, #7dd3fc, #0284c7);
  --icon-glow-new:       rgba(125,211,252,0.6);
  --icon-gradient-theme: linear-gradient(135deg, #ffcf5c, #0ea5e9);
  --icon-glow-theme:     rgba(255,207,92,0.6);
  --icon-gradient-games: linear-gradient(135deg, #ffcf5c, #d97706);
  --icon-glow-games:     rgba(255,207,92,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #d97706, #0ea5e9);
  --icon-glow-settings:     rgba(217,119,6,0.55);
  --theme-bg-scene: radial-gradient(ellipse at 50% 46%, rgba(0,180,220,0.18), transparent 60%),
                     linear-gradient(to bottom, #060a12 0%, #03050a 55%, #000103 100%);
}

:root[data-theme="obsidian3d"] {
  --theme-accent: #b06bff;
  --theme-accent-soft: rgba(176,107,255,0.5);
  --theme-accent-glow: rgba(176,107,255,0.28);
  --theme-text: #e0d2ff;
  --theme-text-bright: #f2ecff;
  --theme-text-shadow-1: rgba(176,107,255,0.55);
  --theme-text-shadow-2: rgba(60,20,90,0.3);
  --theme-card-bg: rgba(10,6,16,0.6);
  --theme-card-bg-hover: rgba(20,10,30,0.75);
  --theme-card-border: rgba(176,107,255,0.22);
  --theme-card-border-hover: rgba(205,160,255,0.6);
  --theme-card-glow: rgba(176,107,255,0.1);
  --theme-card-glow-hover: rgba(205,160,255,0.45);
  --theme-card-inner: rgba(176,107,255,0.07);
  --theme-card-inner-hover: rgba(205,160,255,0.15);
  --theme-line: rgba(205,160,255,0.6);
  --theme-floor-glow: rgba(176,107,255,0.16);
  --theme-icon-bg: rgba(10,6,14,0.65);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #d8b4fe, #581c87);
  --icon-glow-notes:     rgba(216,180,254,0.6);
  --icon-gradient-new:   linear-gradient(135deg, #e9d5ff, #7e22ce);
  --icon-glow-new:       rgba(233,213,255,0.6);
  --icon-gradient-theme: linear-gradient(135deg, #b06bff, #1e1b2e);
  --icon-glow-theme:     rgba(176,107,255,0.6);
  --icon-gradient-games: linear-gradient(135deg, #b06bff, #581c87);
  --icon-glow-games:     rgba(176,107,255,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #581c87, #1e1b2e);
  --icon-glow-settings:     rgba(88,28,135,0.55);
  --theme-bg-scene: radial-gradient(ellipse at 50% 35%, rgba(90,30,140,0.22), transparent 65%),
                     linear-gradient(to bottom, #0b0512 0%, #050208 55%, #010004 100%);
}

:root[data-theme="biodeep3d"] {
  --theme-accent: #22e6b0;
  --theme-accent-soft: rgba(34,230,176,0.5);
  --theme-accent-glow: rgba(34,230,176,0.28);
  --theme-text: #c4fff0;
  --theme-text-bright: #e6fffa;
  --theme-text-shadow-1: rgba(34,230,176,0.55);
  --theme-text-shadow-2: rgba(0,100,150,0.28);
  --theme-card-bg: rgba(2,14,18,0.55);
  --theme-card-bg-hover: rgba(4,26,32,0.72);
  --theme-card-border: rgba(34,230,176,0.2);
  --theme-card-border-hover: rgba(120,255,220,0.55);
  --theme-card-glow: rgba(34,230,176,0.1);
  --theme-card-glow-hover: rgba(120,255,220,0.45);
  --theme-card-inner: rgba(34,230,176,0.07);
  --theme-card-inner-hover: rgba(120,255,220,0.15);
  --theme-line: rgba(120,255,220,0.6);
  --theme-floor-glow: rgba(34,230,176,0.18);
  --theme-icon-bg: rgba(2,14,16,0.62);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #5eead4, #0891b2);
  --icon-glow-notes:     rgba(94,234,212,0.6);
  --icon-gradient-new:   linear-gradient(135deg, #99f6e4, #0e7490);
  --icon-glow-new:       rgba(153,246,228,0.6);
  --icon-gradient-theme: linear-gradient(135deg, #22e6b0, #0369a1);
  --icon-glow-theme:     rgba(34,230,176,0.6);
  --icon-gradient-games: linear-gradient(135deg, #22e6b0, #0891b2);
  --icon-glow-games:     rgba(34,230,176,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #0891b2, #0369a1);
  --icon-glow-settings:     rgba(8,145,178,0.55);
  --theme-bg-scene: radial-gradient(ellipse at 50% 15%, rgba(0,150,140,0.2), transparent 60%),
                     linear-gradient(to bottom, #021412 0%, #010a09 55%, #000302 100%);
}

:root[data-theme="toxic3d"] {
  --theme-accent: #39ff6a;
  --theme-accent-soft: rgba(57,255,106,0.5);
  --theme-accent-glow: rgba(57,255,106,0.3);
  --theme-text: #c8ffd6;
  --theme-text-bright: #eaffef;
  --theme-text-shadow-1: rgba(57,255,106,0.6);
  --theme-text-shadow-2: rgba(0,80,30,0.3);
  --theme-card-bg: rgba(2,14,6,0.58);
  --theme-card-bg-hover: rgba(4,26,10,0.75);
  --theme-card-border: rgba(57,255,106,0.22);
  --theme-card-border-hover: rgba(140,255,170,0.6);
  --theme-card-glow: rgba(57,255,106,0.12);
  --theme-card-glow-hover: rgba(140,255,170,0.48);
  --theme-card-inner: rgba(57,255,106,0.08);
  --theme-card-inner-hover: rgba(140,255,170,0.16);
  --theme-line: rgba(140,255,170,0.65);
  --theme-floor-glow: rgba(57,255,106,0.2);
  --theme-icon-bg: rgba(3,16,7,0.62);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #86efac, #15803d);
  --icon-glow-notes:     rgba(134,239,172,0.6);
  --icon-gradient-new:   linear-gradient(135deg, #4ade80, #166534);
  --icon-glow-new:       rgba(74,222,128,0.6);
  --icon-gradient-theme: linear-gradient(135deg, #39ff6a, #052e16);
  --icon-glow-theme:     rgba(57,255,106,0.6);
  --icon-gradient-games: linear-gradient(135deg, #39ff6a, #15803d);
  --icon-glow-games:     rgba(57,255,106,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #15803d, #052e16);
  --icon-glow-settings:     rgba(21,128,61,0.55);
  --theme-bg-scene: radial-gradient(ellipse at 50% 50%, rgba(20,90,40,0.22), transparent 65%),
                     linear-gradient(to bottom, #020f06 0%, #010703 55%, #000201 100%);
}

:root[data-theme="gold3d"] {
  --theme-accent: #e8c14c;
  --theme-accent-soft: rgba(232,193,76,0.5);
  --theme-accent-glow: rgba(232,193,76,0.28);
  --theme-text: #f7e9c2;
  --theme-text-bright: #fff6e0;
  --theme-text-shadow-1: rgba(232,193,76,0.55);
  --theme-text-shadow-2: rgba(90,60,10,0.3);
  --theme-card-bg: rgba(16,12,4,0.58);
  --theme-card-bg-hover: rgba(30,22,8,0.75);
  --theme-card-border: rgba(232,193,76,0.24);
  --theme-card-border-hover: rgba(255,222,150,0.6);
  --theme-card-glow: rgba(232,193,76,0.12);
  --theme-card-glow-hover: rgba(255,222,150,0.48);
  --theme-card-inner: rgba(232,193,76,0.08);
  --theme-card-inner-hover: rgba(255,222,150,0.16);
  --theme-line: rgba(255,222,150,0.65);
  --theme-floor-glow: rgba(232,193,76,0.2);
  --theme-icon-bg: rgba(14,10,4,0.62);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #fde68a, #92400e);
  --icon-glow-notes:     rgba(253,230,138,0.6);
  --icon-gradient-new:   linear-gradient(135deg, #fbbf24, #78350f);
  --icon-glow-new:       rgba(251,191,36,0.6);
  --icon-gradient-theme: linear-gradient(135deg, #e8c14c, #3a2a08);
  --icon-glow-theme:     rgba(232,193,76,0.6);
  --icon-gradient-games: linear-gradient(135deg, #e8c14c, #92400e);
  --icon-glow-games:     rgba(232,193,76,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #92400e, #3a2a08);
  --icon-glow-settings:     rgba(146,64,14,0.55);
  --theme-bg-scene: radial-gradient(ellipse at 50% 45%, rgba(120,90,20,0.2), transparent 65%),
                     linear-gradient(to bottom, #120d04 0%, #080502 55%, #020100 100%);
}

:root[data-theme="magma3d"] {
  --theme-accent: #ff2d3a;
  --theme-accent-soft: rgba(255,45,58,0.5);
  --theme-accent-glow: rgba(255,45,58,0.3);
  --theme-text: #ffd4d0;
  --theme-text-bright: #ffeceb;
  --theme-text-shadow-1: rgba(255,45,58,0.6);
  --theme-text-shadow-2: rgba(90,10,10,0.3);
  --theme-card-bg: rgba(16,4,4,0.6);
  --theme-card-bg-hover: rgba(30,8,8,0.76);
  --theme-card-border: rgba(255,45,58,0.24);
  --theme-card-border-hover: rgba(255,120,110,0.6);
  --theme-card-glow: rgba(255,45,58,0.12);
  --theme-card-glow-hover: rgba(255,120,110,0.48);
  --theme-card-inner: rgba(255,45,58,0.08);
  --theme-card-inner-hover: rgba(255,120,110,0.16);
  --theme-line: rgba(255,120,110,0.65);
  --theme-floor-glow: rgba(255,45,58,0.2);
  --theme-icon-bg: rgba(14,4,4,0.64);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #fca5a5, #991b1b);
  --icon-glow-notes:     rgba(252,165,165,0.6);
  --icon-gradient-new:   linear-gradient(135deg, #f87171, #7f1d1d);
  --icon-glow-new:       rgba(248,113,113,0.6);
  --icon-gradient-theme: linear-gradient(135deg, #ff2d3a, #2a0505);
  --icon-glow-theme:     rgba(255,45,58,0.6);
  --icon-gradient-games: linear-gradient(135deg, #ff2d3a, #991b1b);
  --icon-glow-games:     rgba(255,45,58,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #991b1b, #2a0505);
  --icon-glow-settings:     rgba(153,27,27,0.55);
  --theme-bg-scene: radial-gradient(ellipse at 50% 90%, rgba(140,20,20,0.28), transparent 65%),
                     linear-gradient(to bottom, #120303 0%, #0a0101 55%, #020000 100%);
}

:root[data-theme="marsstorm"] {
  --theme-accent: #ff3b30;
  --theme-accent-soft: rgba(255,59,48,0.55);
  --theme-accent-glow: rgba(255,59,48,0.28);
  --theme-text: #ffcfc9;
  --theme-text-bright: #ffece9;
  --theme-text-shadow-1: rgba(255,59,48,0.6);
  --theme-text-shadow-2: rgba(90,10,10,0.3);
  --theme-card-bg: rgba(18,4,4,0.5);
  --theme-card-bg-hover: rgba(34,8,8,0.68);
  --theme-card-border: rgba(255,59,48,0.22);
  --theme-card-border-hover: rgba(255,120,110,0.6);
  --theme-card-glow: rgba(255,59,48,0.1);
  --theme-card-glow-hover: rgba(255,120,110,0.45);
  --theme-card-inner: rgba(255,59,48,0.07);
  --theme-card-inner-hover: rgba(255,120,110,0.15);
  --theme-line: rgba(255,120,110,0.6);
  --theme-floor-glow: rgba(255,59,48,0.18);
  --theme-icon-bg: rgba(16,4,4,0.58);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #ff8a80, #b71c1c);
  --icon-glow-notes:     rgba(255,138,128,0.55);
  --icon-gradient-new:   linear-gradient(135deg, #ff6659, #8e0000);
  --icon-glow-new:       rgba(255,102,89,0.55);
  --icon-gradient-theme: linear-gradient(135deg, #ff3b30, #7c0a0a);
  --icon-glow-theme:     rgba(255,59,48,0.55);
  --icon-gradient-games: linear-gradient(135deg, #ff3b30, #b71c1c);
  --icon-glow-games:     rgba(255,59,48,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #b71c1c, #7c0a0a);
  --icon-glow-settings:     rgba(183,28,28,0.55);
}

:root[data-theme="marssunset"] {
  --theme-accent: #ffb04c;
  --theme-accent-soft: rgba(255,176,76,0.55);
  --theme-accent-glow: rgba(255,176,76,0.26);
  --theme-text: #ffe3bd;
  --theme-text-bright: #fff3e0;
  --theme-text-shadow-1: rgba(255,176,76,0.55);
  --theme-text-shadow-2: rgba(120,70,10,0.28);
  --theme-card-bg: rgba(22,14,4,0.46);
  --theme-card-bg-hover: rgba(40,26,8,0.64);
  --theme-card-border: rgba(255,176,76,0.2);
  --theme-card-border-hover: rgba(255,205,130,0.58);
  --theme-card-glow: rgba(255,176,76,0.1);
  --theme-card-glow-hover: rgba(255,205,130,0.42);
  --theme-card-inner: rgba(255,176,76,0.07);
  --theme-card-inner-hover: rgba(255,205,130,0.15);
  --theme-line: rgba(255,205,130,0.62);
  --theme-floor-glow: rgba(255,176,76,0.17);
  --theme-icon-bg: rgba(20,13,4,0.56);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #ffd897, #c2660a);
  --icon-glow-notes:     rgba(255,216,151,0.55);
  --icon-gradient-new:   linear-gradient(135deg, #ffb04c, #a34a00);
  --icon-glow-new:       rgba(255,176,76,0.55);
  --icon-gradient-theme: linear-gradient(135deg, #ffb04c, #5c2a00);
  --icon-glow-theme:     rgba(255,176,76,0.55);
  --icon-gradient-games: linear-gradient(135deg, #ffb04c, #c2660a);
  --icon-glow-games:     rgba(255,176,76,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #c2660a, #5c2a00);
  --icon-glow-settings:     rgba(194,102,10,0.55);
}

:root[data-theme="marsfireside"] {
  --theme-accent: #ff8a3d;
  --theme-accent-soft: rgba(255,138,61,0.55);
  --theme-accent-glow: rgba(255,138,61,0.26);
  --theme-text: #ffdcbd;
  --theme-text-bright: #fff1e0;
  --theme-text-shadow-1: rgba(255,138,61,0.55);
  --theme-text-shadow-2: rgba(20,80,75,0.26);
  --theme-card-bg: rgba(16,12,10,0.48);
  --theme-card-bg-hover: rgba(30,22,18,0.66);
  --theme-card-border: rgba(255,138,61,0.2);
  --theme-card-border-hover: rgba(255,180,120,0.58);
  --theme-card-glow: rgba(45,212,191,0.1);
  --theme-card-glow-hover: rgba(255,170,100,0.42);
  --theme-card-inner: rgba(255,138,61,0.07);
  --theme-card-inner-hover: rgba(255,170,100,0.15);
  --theme-line: rgba(255,180,120,0.6);
  --theme-floor-glow: rgba(255,138,61,0.18);
  --theme-icon-bg: rgba(14,11,10,0.56);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #5eead4, #0f766e);
  --icon-glow-notes:     rgba(94,234,212,0.5);
  --icon-gradient-new:   linear-gradient(135deg, #ffb27a, #a34a00);
  --icon-glow-new:       rgba(255,178,122,0.55);
  --icon-gradient-theme: linear-gradient(135deg, #ff8a3d, #6b2600);
  --icon-glow-theme:     rgba(255,138,61,0.55);
  --icon-gradient-games: linear-gradient(135deg, #ff8a3d, #0f766e);
  --icon-glow-games:     rgba(255,138,61,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #0f766e, #6b2600);
  --icon-glow-settings:     rgba(15,118,110,0.55);
}

:root[data-theme="marsnebula"] {
  --theme-accent: #ff4fd8;
  --theme-accent-soft: rgba(255,79,216,0.5);
  --theme-accent-glow: rgba(255,79,216,0.28);
  --theme-text: #f0d4ff;
  --theme-text-bright: #fbeaff;
  --theme-text-shadow-1: rgba(255,79,216,0.55);
  --theme-text-shadow-2: rgba(80,20,90,0.3);
  --theme-card-bg: rgba(14,4,20,0.5);
  --theme-card-bg-hover: rgba(26,8,36,0.68);
  --theme-card-border: rgba(255,79,216,0.22);
  --theme-card-border-hover: rgba(200,140,255,0.58);
  --theme-card-glow: rgba(178,107,255,0.12);
  --theme-card-glow-hover: rgba(255,120,230,0.45);
  --theme-card-inner: rgba(255,79,216,0.08);
  --theme-card-inner-hover: rgba(200,140,255,0.16);
  --theme-line: rgba(200,140,255,0.62);
  --theme-floor-glow: rgba(255,79,216,0.18);
  --theme-icon-bg: rgba(12,4,18,0.6);
  --theme-icon-inset: rgba(255,255,255,0.06);
  --theme-icon-inset-hover: rgba(255,255,255,0.1);
  --icon-gradient-notes: linear-gradient(135deg, #e0aaff, #6b21a8);
  --icon-glow-notes:     rgba(224,170,255,0.55);
  --icon-gradient-new:   linear-gradient(135deg, #ff8ae6, #9d174d);
  --icon-glow-new:       rgba(255,138,230,0.55);
  --icon-gradient-theme: linear-gradient(135deg, #ff4fd8, #3a0a4a);
  --icon-glow-theme:     rgba(255,79,216,0.55);
  --icon-gradient-games: linear-gradient(135deg, #ff4fd8, #6b21a8);
  --icon-glow-games:     rgba(255,79,216,0.55);
  --icon-gradient-settings: linear-gradient(135deg, #6b21a8, #3a0a4a);
  --icon-glow-settings:     rgba(107,33,168,0.55);
}

:root[data-theme="cybergrid"] .bg,
:root[data-theme="novawarp"] .bg,
:root[data-theme="aurora3d"] .bg,
:root[data-theme="orbit3d"] .bg,
:root[data-theme="obsidian3d"] .bg,
:root[data-theme="biodeep3d"] .bg,
:root[data-theme="toxic3d"] .bg,
:root[data-theme="gold3d"] .bg,
:root[data-theme="magma3d"] .bg {
  background: var(--theme-bg-scene);
}

.bg {
  transform: translate3d(0,0,0) scale(1);
  transition: opacity 0.9s ease, transform 0.25s ease-out;
}
body.mode-3d .bg {
  transform: translate3d(var(--tilt-x, 0px), var(--tilt-y, 0px), 0) scale(1.055);
}

/* ===== HUD ===== */
.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
  color: var(--theme-text);
  text-shadow: 0 0 8px var(--theme-text-shadow-1),
               0 0 22px var(--theme-text-shadow-2);
  z-index: 5;
  transition: color 0.6s ease;
}

/* =========================================================
   COLUNA DIREITA — cards +10px (270px)
   ========================================================= */
.col {
  position: absolute;
  top: 24px;
  width: 270px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: none;
}
.col-right {
  right: 24px;
  align-items: stretch;
}

/* =========================================================
   BARRA DE ÍCONES
   ========================================================= */
.icon-bar {
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  pointer-events: auto;
  z-index: 10;
}

.icon-btn {
  height: 52px;
  width: 52px;
  border-radius: 16px;
  border: none; outline: none;
  background: var(--theme-icon-bg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  color: #fff;
  padding: 0 14px;
  box-sizing: border-box;
  box-shadow: 0 6px 22px rgba(0,0,0,0.4),
              inset 0 0 0 1px var(--theme-icon-inset);
  transition:
    width 0.45s cubic-bezier(0.34, 1.2, 0.5, 1),
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease,
    background 0.6s ease;
  position: relative;
  overflow: visible;
  white-space: nowrap;
}

.icon-btn::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--grad, linear-gradient(135deg, #6ee7f0, #3b82f6));
  opacity: 0.32;
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}

.icon-btn:hover {
  width: 200px;
  transform: translateY(-3px);
  box-shadow:
    0 14px 34px rgba(0,0,0,0.55),
    0 0 38px var(--glow, rgba(60,255,140,0.45)),
    inset 0 0 0 1px var(--theme-icon-inset-hover);
}
.icon-btn:hover::before { opacity: 1; transform: scale(1.08); }
.icon-btn:active { transform: translateY(-1px) scale(0.98); }

.icon-btn svg {
  width: 24px; height: 24px;
  flex-shrink: 0;
  position: relative; z-index: 2;
  color: #ffffff;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.icon-btn .icon-label {
  display: inline-block;
  margin-left: 12px;
  font-family: -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease 0.1s, transform 0.35s ease 0.1s;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.icon-btn:hover .icon-label {
  opacity: 1;
  transform: translateX(0);
}

#btn-list-notes {
  --grad: var(--icon-gradient-notes);
  --glow: var(--icon-glow-notes);
}
#btn-list-notes:hover svg { transform: rotate(-8deg) scale(1.12); }

#btn-new-note {
  --grad: var(--icon-gradient-new);
  --glow: var(--icon-glow-new);
}
#btn-new-note:hover svg { transform: rotate(-18deg) scale(1.14); }

#btn-theme {
  --grad: var(--icon-gradient-theme);
  --glow: var(--icon-glow-theme);
}
#btn-theme:hover svg { transform: rotate(140deg) scale(1.14); }

/* ===== Badge de prazos ===== */
.icon-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-family: -apple-system, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.25), 0 0 14px rgba(220,38,38,0.6);
  z-index: 5;
  pointer-events: auto;
  cursor: pointer;
  animation: badgePulse 1.8s ease-in-out infinite;
}
.icon-badge.show { display: flex; }
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* =========================================================
   CARDS
   ========================================================= */
.card {
  pointer-events: auto;
  padding: 14px 18px;
  border: 1px solid var(--theme-card-border);
  border-radius: 12px;
  background: var(--theme-card-bg);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 0 30px var(--theme-card-inner),
              0 0 24px var(--theme-card-glow);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.4s ease,
              box-shadow 0.4s ease,
              background 0.6s ease;
  will-change: transform;
  position: relative;
  overflow: visible;
}
.card::before {
  content: '';
  position: absolute; top: 0; left: 12%;
  width: 76%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--theme-line), transparent);
  opacity: 0.6;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: 12px 12px 0 0;
}
.card:hover {
  transform: translateX(-4px) scale(1.02);
  border-color: var(--theme-card-border-hover);
  background: var(--theme-card-bg-hover);
  box-shadow: inset 0 0 40px var(--theme-card-inner-hover),
              0 0 30px var(--theme-card-glow-hover),
              0 0 70px var(--theme-accent-glow);
}
.card:hover::before { opacity: 1; }

.card-title {
  font-size: 10px; letter-spacing: 3px; opacity: 0.45;
  text-transform: uppercase; margin-bottom: 10px;
}
.card-title-row { display: flex; align-items: center; justify-content: space-between; }
.card-icon-btn {
  appearance: none; border: none; background: transparent;
  color: inherit; opacity: 0.55; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 3px; border-radius: 6px; margin: -3px;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.card-icon-btn svg { width: 13px; height: 13px; }
.card-icon-btn:hover { opacity: 1; background: rgba(255,255,255,0.1); }
.field-hint { font-size: 11px; opacity: 0.55; margin: 0 0 14px; letter-spacing: 0.3px; line-height: 1.5; }
.clock { font-size: 38px; font-weight: 300; letter-spacing: 2px; line-height: 1; font-variant-numeric: tabular-nums; }
.date { margin-top: 8px; font-size: 12px; letter-spacing: 3px; opacity: 0.7; text-transform: uppercase; }
.row { display: flex; justify-content: space-between; gap: 14px; font-size: 11px; letter-spacing: 1.5px; padding: 3px 0; }
.label { opacity: 0.5; }
.value { font-variant-numeric: tabular-nums; text-align: right; }
.bar { margin-top: 10px; }
.bar-row { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 1.5px; opacity: 0.65; margin-bottom: 4px; }
.bar-track {
  width: 100%; height: 4px;
  background: var(--theme-bar-track);
  border-radius: 3px; overflow: hidden;
  transition: background 0.6s ease;
}
.bar-fill {
  height: 100%; width: 0%;
  background: var(--theme-bar-fill);
  border-radius: 3px;
  box-shadow: 0 0 12px var(--theme-accent-soft);
  transition: width 0.6s ease, background 0.6s ease, box-shadow 0.6s ease;
}
.bar-fill.warn   { background: linear-gradient(90deg, #ffd24a, #ffe89a); box-shadow: 0 0 12px rgba(255,210,74,0.7); }
.bar-fill.danger { background: linear-gradient(90deg, #ff5c5c, #ff9a9a); box-shadow: 0 0 12px rgba(255,92,92,0.7); }

.weather-location { font-size: 11px; letter-spacing: 2px; opacity: 0.6; text-transform: uppercase; margin-bottom: 8px; }
.weather-main { display: flex; align-items: center; gap: 14px; }
.weather-temp { font-size: 42px; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.weather-icon { font-size: 34px; line-height: 1; filter: drop-shadow(0 0 8px var(--theme-accent-soft)); }
.weather-desc { font-size: 11px; letter-spacing: 1.5px; opacity: 0.75; text-transform: uppercase; margin-top: 4px; }
.weather-extra { margin-top: 12px; display: flex; gap: 14px; font-size: 10px; letter-spacing: 1px; opacity: 0.7; }
.astro-row { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 1px; opacity: 0.7; margin-top: 6px; }

/* ===== Forecast (previsão 3 dias) — alinhamento por grid ===== */
.forecast {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--theme-card-border);
}

.forecast-day {
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 1.2px;
  opacity: 0.9;
  padding: 6px 2px;
  border-radius: 8px;
  transition: background 0.25s ease, transform 0.25s ease;
}
.forecast-day:hover {
  background: var(--theme-card-inner);
  transform: translateY(-2px);
}

.fd-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  opacity: 0.75;
  text-transform: uppercase;
  line-height: 1;
}

.fd-icon {
  font-size: 20px;
  line-height: 1;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 6px var(--theme-accent-soft));
}

.fd-temps {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2px;
  width: 100%;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  line-height: 1;
}
.fd-min  { text-align: right; opacity: 0.6; font-weight: 500; }
.fd-sep  { opacity: 0.3; font-weight: 400; }
.fd-max  { text-align: left; font-weight: 700; }

.brand { font-size: 22px; letter-spacing: 8px; font-weight: 500; text-align: center; }
.brand-sub { text-align: center; font-size: 10px; letter-spacing: 4px; opacity: 0.45; margin-top: 6px; text-transform: uppercase; }

/* PLAYER */
.player-card { padding: 12px 14px; }
.player-wrap {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 8px; overflow: hidden;
  background: #000;
  box-shadow: 0 0 20px var(--theme-accent-glow);
  transition: box-shadow 0.6s ease;
}
.player-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.player-fade {
  position: absolute; inset: 0;
  background: #000; opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.player-fade.show { opacity: 1; }
.player-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 8px; }
.player-arrow {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--theme-card-border);
  background: rgba(0,0,0,0.35);
  color: var(--theme-text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease;
  backdrop-filter: blur(6px);
  flex-shrink: 0;
}
.player-arrow svg { width: 16px; height: 16px; }
.player-arrow:hover {
  border-color: var(--theme-card-border-hover);
  background: var(--theme-card-bg-hover);
  color: var(--theme-text-bright);
  transform: scale(1.1);
  box-shadow: 0 0 16px var(--theme-accent-glow);
}
.player-arrow:active { transform: scale(0.95); }
.player-meta { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.player-count { font-size: 10px; letter-spacing: 2px; opacity: 0.55; font-variant-numeric: tabular-nums; }
.player-dots { display: flex; gap: 6px; }
.player-dots .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--theme-card-border);
  transition: all 0.3s ease;
  cursor: pointer;
}
.player-dots .dot:hover { background: var(--theme-card-border-hover); transform: scale(1.3); }
.player-dots .dot.active {
  background: var(--theme-accent);
  box-shadow: 0 0 8px var(--theme-accent-soft);
  transform: scale(1.2);
}
.player-info {
  margin-top: 10px;
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: 1.5px; opacity: 0.7;
  text-transform: uppercase;
}
.player-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--theme-accent);
  box-shadow: 0 0 8px var(--theme-accent-soft);
  animation: dotPulse 1.6s ease-in-out infinite;
  transition: background 0.6s ease, box-shadow 0.6s ease;
}
@keyframes dotPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* Volume */
.player-volume-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.volume-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--theme-card-border);
  outline: none;
  cursor: pointer;
  transition: background 0.3s ease;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--theme-accent);
  box-shadow: 0 0 8px var(--theme-accent-soft);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.volume-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.volume-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--theme-accent);
  border: none;
  cursor: pointer;
}
.volume-value {
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.7;
  min-width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   DEMON SLAYER
   ========================================================= */
body.theme-demonslayer .card {
  border-color: rgba(255, 59, 92, 0.5);
  background:
    linear-gradient(180deg,
      rgba(40, 6, 16, 0.85) 0%,
      rgba(24, 4, 10, 0.9) 60%,
      rgba(40, 6, 16, 0.95) 100%);
  box-shadow:
    inset 0 0 40px rgba(255, 59, 92, 0.18),
    0 0 26px rgba(255, 59, 92, 0.35),
    0 8px 24px rgba(0,0,0,0.6);
}
body.theme-demonslayer .card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 50% 40%,
      rgba(255, 200, 120, 0.15) 0%,
      rgba(255, 59, 92, 0.10) 40%,
      transparent 70%);
  animation: lanternFlicker 4.5s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes lanternFlicker {
  0%, 100% { opacity: 0.55; }
  35%      { opacity: 0.9; }
  55%      { opacity: 0.65; }
  75%      { opacity: 0.95; }
}
body.theme-demonslayer .card:hover {
  border-color: rgba(255, 120, 150, 0.85);
  box-shadow:
    inset 0 0 50px rgba(255, 59, 92, 0.28),
    0 0 40px rgba(255, 59, 92, 0.55),
    0 10px 30px rgba(0,0,0,0.7);
}
body.theme-demonslayer .card-title {
  color: #ffd0da;
  opacity: 0.8;
  letter-spacing: 3px;
  text-shadow: 0 0 10px rgba(255, 59, 92, 0.7);
}
body.theme-demonslayer .clock,
body.theme-demonslayer .weather-temp,
body.theme-demonslayer .brand {
  text-shadow:
    0 0 8px rgba(255, 140, 160, 0.8),
    0 0 22px rgba(255, 59, 92, 0.55);
}

/* MODAIS */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 18, 23, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  width: min(560px, 92vw);
  max-height: 84vh;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.04);
  transform: scale(0.92) translateY(-10px);
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  color: #212529;
}
.modal-overlay.open .modal { transform: scale(1) translateY(0); opacity: 1; }
.modal::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--theme-bar-fill);
  transition: background 0.6s ease;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e9ecef;
}
.modal-title {
  font-size: 16px; font-weight: 600; color: #1a1d21;
  display: flex; align-items: center; gap: 12px;
}
.modal-title .title-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  display: flex; align-items: center; justify-content: center;
  color: #10b981;
}
.modal-title .title-icon svg { width: 18px; height: 18px; }
.modal-title .title-icon.danger {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  color: #dc2626;
}
.modal-close {
  width: 32px; height: 32px;
  border-radius: 8px; border: none;
  background: transparent; color: #6c757d;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
  font-size: 18px; line-height: 1; padding: 0;
}
.modal-close:hover { background: #f1f3f5; color: #212529; }
.modal-body { overflow-y: auto; flex: 1; padding: 20px 24px; }
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb { background: #dee2e6; border-radius: 3px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: #ced4da; }
.field { margin-bottom: 16px; }
.field-label { display: block; font-size: 13px; font-weight: 500; color: #495057; margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #ced4da;
  background: #fff;
  color: #212529;
  font-family: inherit;
  font-size: 14px; line-height: 1.5;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  resize: vertical; box-sizing: border-box;
}
.field textarea {
  min-height: 150px;
  font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
  font-size: 13px;
}
.field input:focus, .field textarea:focus {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 4px var(--theme-accent-glow);
}
.field input::placeholder, .field textarea::placeholder { color: #adb5bd; }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }
.modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 16px 24px 20px;
  border-top: 1px solid #e9ecef;
  background: #f8f9fa;
  flex-wrap: wrap;
}
.btn {
  padding: 9px 20px;
  border-radius: 8px;
  border: 1px solid #ced4da;
  background: #ffffff;
  color: #495057;
  font-family: inherit;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex; align-items: center; gap: 7px;
}
.btn:hover { background: #f1f3f5; border-color: #adb5bd; }
.btn:active { transform: scale(0.98); }
.btn svg { width: 14px; height: 14px; }
.btn-primary {
  background: var(--theme-accent);
  border-color: var(--theme-accent);
  color: #ffffff;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-primary:hover { filter: brightness(0.92); box-shadow: 0 4px 14px var(--theme-accent-glow); }
.btn-danger {
  background: #ffffff;
  border-color: #f5c2c7;
  color: #b02a37;
  font-weight: 600;
}
.btn-danger:hover { background: #dc3545; border-color: #dc3545; color: #ffffff; }

.notes-list { display: flex; flex-direction: column; gap: 8px; }
.note-item {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #e9ecef;
  background: #ffffff;
  transition: all 0.18s ease;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.note-item:hover {
  border-color: var(--theme-accent);
  background: #f8fffc;
  box-shadow: 0 4px 12px var(--theme-accent-glow);
}
.note-info { flex: 1; min-width: 0; }
.note-title {
  font-size: 14px; font-weight: 600; color: #212529;
  margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.note-meta {
  font-size: 12px; color: #868e96;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.note-actions { display: flex; gap: 4px; flex-shrink: 0; }
.note-btn {
  width: 32px; height: 32px;
  border-radius: 8px; border: none;
  background: transparent; color: #6c757d;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
.note-btn svg { width: 15px; height: 15px; }
.note-btn.view:hover  { background: #dbeafe; color: #2563eb; }
.note-btn:hover       { background: #d1fae5; color: #059669; }
.note-btn.danger:hover{ background: #fee2e2; color: #dc2626; }

/* Prazos */
.note-deadline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.note-deadline svg { width: 11px; height: 11px; }
.note-deadline.ok       { background: #e7f8ee; color: #0f7a3d; }
.note-deadline.soon     { background: #fff7e0; color: #a35c00; }
.note-deadline.today    { background: #ffe9d6; color: #b45309; }
.note-deadline.overdue  { background: #fee2e2; color: #b91c1c; }

.prazo-list { display: flex; flex-direction: column; gap: 10px; }
.prazo-item {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.prazo-item.overdue { border-color: #fecaca; background: #fef2f2; }
.prazo-item .prazo-info { flex: 1; min-width: 0; }
.prazo-item .prazo-title {
  font-size: 14px; font-weight: 600; color: #212529; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prazo-item .prazo-when { font-size: 12px; font-weight: 600; }
.prazo-item.overdue .prazo-when { color: #b91c1c; }
.prazo-item:not(.overdue) .prazo-when { color: #a35c00; }
.prazo-actions { display: flex; gap: 6px; flex-shrink: 0; }

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: #868e96;
  font-size: 14px; line-height: 1.6;
}
.empty-state svg { width: 44px; height: 44px; margin-bottom: 14px; color: #ced4da; }

.reconnect-notice {
  padding: 12px 14px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 13px; line-height: 1.55;
  margin-bottom: 14px;
  display: flex; gap: 10px; align-items: flex-start;
}
.reconnect-notice svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

.view-title {
  font-size: 22px; font-weight: 700;
  color: #1a1d21;
  margin: 0 0 8px;
  line-height: 1.3;
  word-wrap: break-word;
}
.view-meta {
  display: flex; gap: 16px;
  font-size: 12px; color: #868e96;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f3f5;
  flex-wrap: wrap;
}
.view-meta span { display: inline-flex; align-items: center; gap: 6px; }
.view-meta svg { width: 13px; height: 13px; color: #adb5bd; }
.view-content {
  font-size: 14px; line-height: 1.7;
  color: #495057;
  white-space: pre-wrap; word-wrap: break-word;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.view-content.empty { color: #adb5bd; font-style: italic; }

.theme-tabs {
  display: flex;
  gap: 8px;
  padding: 0 24px 14px;
  border-bottom: 1px solid #e9ecef;
}
.theme-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: #868e96;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}
.theme-tab:hover { background: #f1f3f5; color: #495057; }
.theme-tab.active {
  background: var(--theme-accent, #7c3aed);
  color: #fff;
  box-shadow: 0 4px 14px var(--theme-accent-glow, rgba(124,58,237,0.3));
}
.theme-tab .tab-badge-3d {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  background: rgba(255,255,255,0.22);
  padding: 1px 5px;
  border-radius: 5px;
}
.theme-tab:not(.active) .tab-badge-3d {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
}
.theme-tab .tab-badge-mars {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  background: rgba(255,255,255,0.22);
  padding: 1px 5px;
  border-radius: 5px;
}
.theme-tab:not(.active) .tab-badge-mars {
  background: linear-gradient(135deg, #ff3b30, #ff2e88);
  color: #fff;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-top: 4px;
}
@media (max-width: 640px) {
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
}
.theme-card {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #e9ecef;
  background: #fff;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}
.theme-card:hover {
  border-color: var(--theme-accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}
.theme-card.active {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 4px var(--theme-accent-glow);
}
.theme-card.active::after {
  content: '✓';
  position: absolute;
  top: 10px; right: 10px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--theme-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.theme-thumb {
  width: 100%; aspect-ratio: 16 / 9;
  background-size: cover; background-position: center;
  background-color: #222;
  position: relative;
}
.theme-card[data-cat="3d"] .theme-thumb::after {
  content: '3D';
  position: absolute;
  bottom: 8px; left: 8px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  padding: 2px 7px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.theme-card[data-cat="3d"] .theme-thumb.thumb-scene {
  background-image: var(--scene-preview, linear-gradient(160deg,#050b14,#020509));
}
.theme-name {
  padding: 10px 14px;
  font-size: 12px; font-weight: 600; color: #212529;
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
}
.theme-name .theme-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-left: 8px;
  flex-shrink: 0;
}

.theme-loading {
  position: fixed; inset: 0;
  background: rgba(8, 10, 14, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 150;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
.theme-loading.show { opacity: 1; pointer-events: auto; }
.theme-loading-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.theme-loading-spinner {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.12);
  border-top-color: var(--theme-accent);
  animation: themeSpin 0.9s linear infinite;
  box-shadow: 0 0 30px var(--theme-accent-glow);
}
@keyframes themeSpin { to { transform: rotate(360deg); } }
.theme-loading-text {
  color: #eafff2;
  font-family: -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  opacity: 0.85;
  text-shadow: 0 0 20px var(--theme-accent-glow);
}

.toast {
  position: fixed;
  bottom: 40px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 22px;
  border-radius: 10px;
  background: #212529;
  color: #ffffff;
  font-family: -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px; font-weight: 500;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  display: flex; align-items: center; gap: 10px;
  max-width: 90vw;
}
.toast::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--theme-accent);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error::before { background: #dc3545; }

canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
/* ===== FX WebGL ===== */
#gl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .9s ease}
#gl.on{opacity:1}
.bg.fade-out ~ #gl{opacity:0}

/* ===== Botão Jogos (barra de ícones) ===== */
#btn-games {
  --grad: var(--icon-gradient-games, var(--icon-gradient-theme));
  --glow: var(--icon-glow-games, var(--icon-glow-theme));
}
#btn-games:hover svg { transform: rotate(-12deg) scale(1.16); }

/* =========================================================
   POLIMENTO VISUAL — modais e botões (Notas, Temas, Jogos…)
   ========================================================= */
.modal-overlay {
  background: radial-gradient(ellipse at 50% 30%, rgba(30, 24, 60, 0.50), rgba(8, 10, 18, 0.72));
  backdrop-filter: blur(9px) saturate(140%);
  -webkit-backdrop-filter: blur(9px) saturate(140%);
}
.modal {
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    0 0 60px var(--theme-accent-glow, rgba(124, 58, 237, 0.18));
}
.modal::before { height: 4px; box-shadow: 0 0 16px var(--theme-accent-glow, rgba(124,58,237,0.5)); }
.modal-header {
  padding: 22px 26px 16px;
  background: linear-gradient(180deg, #ffffff, #f7f8fb);
  border-bottom: 1px solid #eceef3;
}
.modal-title { font-size: 17px; font-weight: 700; letter-spacing: 0.2px; }
.modal-title .title-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--theme-accent, #10b981), color-mix(in srgb, var(--theme-accent, #10b981) 55%, #ffffff));
  color: #ffffff;
  box-shadow: 0 6px 16px var(--theme-accent-glow, rgba(16,185,129,0.35));
}
.modal-title .title-icon svg { width: 19px; height: 19px; }
.modal-title .title-icon.danger {
  background: linear-gradient(135deg, #dc2626, #f87171);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(220,38,38,0.35);
}
.modal-close {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: #f1f3f7;
  color: #64748b;
  transition: background 0.2s ease, color 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-close:hover { background: #fee2e2; color: #dc2626; transform: rotate(90deg); }
.modal-body { padding: 22px 26px; }
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-thumb { background: #d5d9e2; border-radius: 4px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: #b6bcc9; }
.modal-actions {
  padding: 16px 26px 20px;
  background: linear-gradient(180deg, #f8f9fc, #f1f3f8);
  border-top: 1px solid #eceef3;
}
.field-label { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #5b6472; }
.field input, .field textarea { border-radius: 12px; border: 1.5px solid #dfe3ea; background: #fcfcfe; }
.field input:focus, .field textarea:focus { background: #fff; }

.btn {
  padding: 10px 20px;
  border-radius: 12px;
  border: 1.5px solid #dfe3ea;
  background: linear-gradient(180deg, #ffffff, #f4f5f9);
  color: #3b4350;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  transition: transform 0.18s ease, box-shadow 0.22s ease, background 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}
.btn:hover { background: linear-gradient(180deg, #ffffff, #eceef5); border-color: #b9c0cd; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12); }
.btn:active { transform: translateY(0) scale(0.97); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1); }
.btn-primary {
  background: linear-gradient(135deg, var(--theme-accent), color-mix(in srgb, var(--theme-accent) 70%, #000000));
  border-color: transparent;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 6px 16px var(--theme-accent-glow);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--theme-accent), color-mix(in srgb, var(--theme-accent) 70%, #000000)); border-color: transparent; filter: brightness(1.08); box-shadow: 0 12px 26px var(--theme-accent-glow); }
.btn-danger { background: linear-gradient(180deg, #fff, #fff5f5); border-color: #f3b8bf; color: #b02a37; }
.btn-danger:hover { background: linear-gradient(135deg, #dc3545, #b02a37); border-color: transparent; color: #fff; box-shadow: 0 10px 22px rgba(220, 53, 69, 0.35); }

.note-item { border-radius: 14px; border: 1.5px solid #eceef3; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); }
.note-item:hover { transform: translateY(-2px); background: #ffffff; box-shadow: 0 10px 22px var(--theme-accent-glow); }
.note-btn { border-radius: 10px; }

.theme-tabs { padding: 12px 26px 14px; background: #f7f8fb; }
.theme-tab { padding: 9px 18px; font-weight: 700; }
.theme-card { border-radius: 16px; border: 2px solid #eceef3; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); }
.theme-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18), 0 0 0 3px var(--theme-accent-glow); }
.theme-name { padding: 11px 14px; font-weight: 700; background: linear-gradient(180deg, #fff, #f8f9fc); }

.icon-btn { border-radius: 18px; }

/* ===== Botão Configurações ===== */
#btn-settings {
  --grad: var(--icon-gradient-settings, var(--icon-gradient-theme));
  --glow: var(--icon-glow-settings, var(--icon-glow-theme));
}
#btn-settings:hover svg { transform: rotate(90deg) scale(1.12); }

/* =========================================================
   ZORION UI — painéis, disposição, barra de links, configurações
   ========================================================= */
.zl-off { display: none !important; }
/* modo ordenar: arrastar painéis dentro da coluna */
body.zl-edit #col-right > .card { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: 2px dashed var(--theme-accent, #7c3aed); outline-offset: 3px; }
body.zl-edit #col-right > .card * { pointer-events: none !important; }
body.zl-edit #col-right > .zl-sel { outline: 3px solid var(--theme-accent, #7c3aed); box-shadow: 0 0 0 6px var(--theme-accent-glow, rgba(124,58,237,.3)); }
body.zl-edit #col-right > .zl-drag { opacity: .88; transform: scale(1.025); cursor: grabbing; z-index: 9; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.zl-banner { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: rgba(15,18,30,.92); color: #fff; font: 600 13px/1 system-ui, sans-serif; box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.12); backdrop-filter: blur(10px); }
.zl-banner button { padding: 8px 13px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; font: inherit; cursor: pointer; }
.zl-banner button:hover { background: rgba(255,255,255,.2); }
.zl-banner .zl-ok { background: linear-gradient(135deg, var(--theme-accent, #7c3aed), #4f46e5); border-color: transparent; }
.zl-banner .zl-rm { color: #fca5a5; }
/* barra de links */
.zl-topbar { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); pointer-events: auto; z-index: 9; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: max(360px, calc(100vw - 740px)); padding: 6px; border-radius: 16px; border: 1px solid var(--theme-card-border); background: var(--theme-card-bg); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); box-shadow: inset 0 0 24px var(--theme-card-inner), 0 0 22px var(--theme-card-glow); }
.zl-topbar[hidden] { display: none; }
.zl-link { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 11px; border: 0; background: transparent; color: inherit; font: 600 12px/1 inherit; letter-spacing: .4px; text-decoration: none; text-shadow: inherit; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s; }
.zl-link:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); box-shadow: 0 0 14px var(--theme-card-glow); }
.zl-ico { font-size: 16px; line-height: 1; }
.zl-manage { opacity: .6; padding: 7px 10px; } .zl-manage:hover { opacity: 1; }
/* painéis (widgets) */
.zw-card { padding: 14px 18px; }
.zw { width: 100%; } .zw-clock { text-align: center; }
.zwc-svg { width: 150px; height: 150px; display: block; margin: 0 auto 6px; color: var(--theme-text); filter: drop-shadow(0 0 8px var(--theme-card-glow)); } .zwc-svg line { stroke: currentColor; }
.zwc-big { font-size: 58px; font-weight: 200; letter-spacing: 3px; line-height: 1; font-variant-numeric: tabular-nums; }
.zwc-words { font-size: 19px; font-weight: 300; line-height: 1.35; letter-spacing: .5px; }
.zw-clock .date { margin-top: 8px; }
#card-clock[data-zs]:not([data-zs="digital"]) > .clock, #card-clock[data-zs]:not([data-zs="digital"]) > .date { display: none; }
#card-weather[data-zs="compact"] .forecast, #card-weather[data-zs="compact"] .astro-row, #card-weather[data-zs="compact"] .weather-extra { display: none; }
#card-system[data-zs="compact"] .row:nth-of-type(n+3) { display: none; }
.zw-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 12px; letter-spacing: .5px; border-bottom: 1px solid rgba(255,255,255,.07); } .zw-row:last-child { border-bottom: 0; }
.zw-r b { font-size: 15px; font-weight: 500; } .zw-r small { opacity: .6; } .zw-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zw-muted { font-size: 11px; opacity: .55; margin-top: 4px; } .zw-bad { color: #f87171; } .zw-warn { color: #fbbf24; }
.zwk-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 11px; }
.zwk-g i { font-style: normal; padding: 4px 0; border-radius: 6px; } .zwk-g i.o { opacity: .3; } .zwk-g .zwk-h { opacity: .5; font-size: 10px; letter-spacing: 1px; }
.zwk-g i.t { background: var(--theme-accent); color: #000; font-weight: 700; text-shadow: none; box-shadow: 0 0 12px var(--theme-card-glow); }
.zwp { margin-bottom: 6px; } .zwp-b { height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; } .zwp-b span { display: block; height: 100%; background: var(--theme-accent); box-shadow: 0 0 10px var(--theme-card-glow); transition: width .6s; }
.zwd-v { font-size: 26px; font-weight: 300; letter-spacing: 1px; text-align: center; font-variant-numeric: tabular-nums; } .zwd-v b { font-size: 36px; font-weight: 400; } .zwd-v small { opacity: .6; margin-right: 4px; }
.zwo-v { font-size: 44px; font-weight: 200; text-align: center; letter-spacing: 3px; font-variant-numeric: tabular-nums; margin: 4px 0 8px; } .zwo-btns { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.zw-btn { padding: 6px 10px; border-radius: 9px; border: 1px solid var(--theme-card-border); background: rgba(255,255,255,.08); color: inherit; font: 600 11px/1 inherit; cursor: pointer; text-shadow: inherit; } .zw-btn:hover { background: rgba(255,255,255,.18); }
.zwq { font-size: 14px; line-height: 1.5; font-style: italic; letter-spacing: .3px; padding-right: 22px; } .zwq-n { position: absolute; top: 8px; right: 8px; }
.zwn { width: 100%; box-sizing: border-box; background: rgba(0,0,0,.18); border: 1px solid var(--theme-card-border); border-radius: 8px; color: inherit; font: 12px/1.5 inherit; padding: 8px; resize: vertical; outline: none; } .zwn:focus { border-color: var(--theme-accent); }
/* modais de configuração */
#modal-config .modal { height: min(680px, 90vh); max-height: none; } #modal-config .modal-body { flex: 1; min-height: 0; overflow-y: auto; }
#modal-icons .modal { height: min(640px, 88vh); max-height: none; } #modal-icons .modal-body { flex: 1; min-height: 0; overflow-y: auto; }
.zs-h { margin: 14px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #5b6472; } .zs-h:first-child { margin-top: 0; }
.zs-note { font-size: 12.5px; line-height: 1.5; color: #5b6472; margin: 8px 0; }
.zs-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 6px; border-radius: 12px; background: #f6f7fb; border: 1px solid #eceef3; color: #1f2937; font-size: 13px; } .zs-row.zs-off { opacity: .5; } .zs-sp { flex: 1; } .zs-ico { font-size: 20px; }
.zs-in { padding: 9px 12px; border-radius: 10px; border: 1.5px solid #dfe3ea; background: #fff; color: #1f2937; font: inherit; font-size: 13px; box-sizing: border-box; min-width: 0; } .zs-in:focus { outline: none; border-color: var(--theme-accent, #7c3aed); } .zs-sm { padding: 6px 10px; }
select.zs-in { width: 100%; } .zs-row select.zs-in { width: auto; }
.zs-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -2px 0 10px 40px; font-size: 12px; color: #475569; } .zs-opts select.zs-in, .zs-opts input.zs-in { width: auto; max-width: 190px; } .zs-opts input[type=number] { width: 70px; }
.zs-chip { padding: 5px 10px; border-radius: 999px; background: #eef0f6; border: 1px solid #dfe3ea; color: #1f2937; cursor: pointer; font-size: 12px; } .zs-chip:hover { background: #fee2e2; } .zs-chip b { opacity: .5; margin-left: 4px; }
.zs-ib { min-width: 34px; height: 34px; border-radius: 10px; border: 1px solid #dfe3ea; background: #fff; cursor: pointer; font-size: 15px; color: #1f2937; } .zs-ib:hover { border-color: var(--theme-accent, #7c3aed); background: #f4f0ff; } .zs-big { font-size: 22px; }
.zs-btn { padding: 9px 16px; border-radius: 12px; border: 1px solid rgba(100,116,139,.3); background: linear-gradient(180deg, #fff, #f1f3f8); color: #1f2937; font: 600 13px/1 inherit; cursor: pointer; box-shadow: 0 1px 3px rgba(15,23,42,.08); } .zs-btn:hover { border-color: var(--theme-accent, #7c3aed); }
.zs-primary { background: linear-gradient(135deg, var(--theme-accent, #7c3aed), color-mix(in srgb, var(--theme-accent, #7c3aed) 65%, #000)); color: #fff; border-color: transparent; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.zs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.zs-tile { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid #e5e7eb; background: linear-gradient(180deg, #fff, #f6f7fb); color: #1f2937; text-align: left; cursor: pointer; font: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; } .zs-tile:hover { transform: translateY(-3px); border-color: var(--theme-accent, #7c3aed); box-shadow: 0 10px 22px rgba(15,23,42,.14); } .zs-tile small { color: #64748b; font-size: 11.5px; line-height: 1.35; } .zs-ti { font-size: 26px; }
.zs-lrow { display: grid; grid-template-columns: 44px 1fr 1.6fr repeat(3, 34px); gap: 6px; align-items: center; margin-bottom: 6px; }
.zs-check { display: flex; gap: 8px; align-items: center; margin-top: 14px; font-size: 13px; color: #1f2937; }
.zs-ta { width: 100%; height: 150px; font: 11px/1.4 monospace; resize: vertical; margin: 6px 0; }
.zs-pk { padding: 14px 24px 8px; background: #f8f9fc; border-bottom: 1px solid #eceef3; } .zs-pk .zs-in { width: 100%; } .zs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.zs-cat { padding: 6px 11px; border-radius: 999px; border: 1px solid #dfe3ea; background: #fff; color: #475569; font: 600 12px/1 inherit; cursor: pointer; } .zs-cat.on { background: var(--theme-accent, #7c3aed); color: #fff; border-color: transparent; }
.zs-ig { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; } .zs-ig .zs-btn { grid-column: 1 / -1; }
.zs-ic { height: 46px; border-radius: 10px; border: 1px solid #eceef3; background: #fff; font-size: 24px; cursor: pointer; transition: transform .12s, background .12s; } .zs-ic:hover { transform: scale(1.18); background: #f4f0ff; border-color: var(--theme-accent, #7c3aed); position: relative; z-index: 2; }
#modal-icons .modal-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.zwk-t + span { display: flex; gap: 2px; }

/* =========================================================
   COLUNA DE PAINÉIS com scroll (semi-transparente) + lados
   ========================================================= */
.col.col-right { top: 12px; right: 12px; width: 296px; box-sizing: border-box; max-height: calc(100vh - 24px); padding: 12px 14px 12px 12px; overflow-y: auto; overflow-x: hidden; pointer-events: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.42) transparent; }
.col.col-right::-webkit-scrollbar { width: 8px; }
.col.col-right::-webkit-scrollbar-track { background: transparent; }
.col.col-right::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 6px; }
.col.col-right:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.4); }
.col.col-right > .card { flex: 0 0 auto; }
body.zl-pl .col.col-right { right: auto; left: 12px; padding: 12px 14px 12px 12px; }
body.zl-pl.zl-stack .col.col-right { left: 78px; }
body.zl-ir .col.col-right.col-right { }
body.zl-ir.zl-stack .col.col-right { right: 76px; }
body.zl-ir .icon-bar { left: auto; right: 24px; align-items: flex-end; }
body.zl-ir .icon-btn { flex-direction: row-reverse; justify-content: flex-start; }
body.zl-ir .icon-btn .icon-label { margin-left: 0; margin-right: 12px; }
/* os ⚙ de Player e Sistema passaram para Configurações (pedem password) */
#btn-playlist-edit, #btn-sysinfo-open, #btn-connect-folder, #reconnect-notice { display: none !important; }
/* formulários do Player/Sistema dentro das Configurações */
#zs-body.zs-borrow > .modal-body { padding: 0; overflow: visible; flex: none; max-height: none; }
#zs-body.zs-borrow > .modal-actions { background: none; border: 0; padding: 14px 0 0; justify-content: flex-start; }
#zs-body.zs-borrow [data-close] { display: none; }
#zs-body.zs-borrow .notes-list { max-height: 260px; overflow-y: auto; }
/* janela com o site dentro (90% do ecrã) */
#modal-frame { z-index: 950; }
#modal-frame .zf-modal { width: 90vw; height: 90vh; max-width: none; max-height: none; }
.zf-h { padding: 12px 16px; } .zf-h .modal-title { font-size: 15px; min-width: 0; } .zf-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zf-ico { font-size: 20px; margin-right: 8px; }
.zf-act { display: flex; gap: 6px; align-items: center; } .zf-b { width: 36px; height: 36px; border-radius: 12px; border: 0; background: #f1f3f7; color: #475569; font-size: 16px; cursor: pointer; } .zf-b:hover { background: #e2e8f0; }
.zf-body { position: relative; flex: 1; min-height: 0; background: #fff; } .zf-if { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.zf-load { position: absolute; inset: 0; display: grid; place-items: center; color: #64748b; font: 14px system-ui, sans-serif; background: #f8fafc; } .zf-load[hidden] { display: none; }
.zf-foot { padding: 7px 16px; font: 12px/1.4 system-ui, sans-serif; color: #64748b; background: #f8f9fc; border-top: 1px solid #eceef3; }
/* segurança */
.zs-lrow { grid-template-columns: 44px 1fr 1.6fr repeat(4, 34px); }
.zs-pwf { display: grid; gap: 8px; max-width: 440px; } .zs-meter { height: 6px; border-radius: 3px; background: #e5e7eb; overflow: hidden; } .zs-meter span { display: block; height: 100%; width: 0; transition: width .25s, background .25s; }
.zs-mt { color: #64748b; min-height: 14px; } .zs-err { color: #dc2626; font-size: 13px; min-height: 16px; }
.zs-log { max-height: 220px; overflow-y: auto; } .zs-lr { display: flex; justify-content: space-between; gap: 10px; padding: 6px 2px; border-bottom: 1px solid #eceef3; font-size: 13px; color: #1f2937; } .zs-lr small { color: #64748b; text-align: right; }