/* ════════════════════════════════════════════════
   12 THEMES — อ้างอิงกลุ่มอายุ เพศ พฤติกรรม เทรนด์
════════════════════════════════════════════════ */

/* ── 1. MIDNIGHT — Dark Pro (ทั่วไป, dark lovers) ── */
body, body.theme-midnight {
  --bg:#090d1f;--bg2:#111428;--bg3:#192048;
  --surface:rgba(255,255,255,0.04);--surface2:rgba(255,255,255,0.08);
  --border:rgba(255,255,255,0.07);--border2:rgba(245,200,66,0.22);
  --text:#e8eaf6;--text2:#b0bec5;--text-dim:#5a6890;
  --primary:#f5c842;--primary-fg:#090d1f;--primary-glow:rgba(245,200,66,0.18);
  --secondary:#00d4b8;--secondary-fg:#090d1f;
  --accent:#8b5cf6;--danger:#f87171;--info:#60a5fa;--success:#34d399;
  --radius:14px;--radius-sm:9px;--radius-xs:5px;
  --shadow:0 8px 32px rgba(0,0,0,0.5);--shadow-sm:0 2px 10px rgba(0,0,0,0.35);
  --font-display:'Mitr',sans-serif;--font-body:'Sarabun',sans-serif;--font-mono:'IBM Plex Mono',monospace;
  --sidebar-w:258px;--topbar-h:60px;
  --sidebar-bg:linear-gradient(180deg,#0f1330 0%,#090d1f 100%);
  --logo-gradient:linear-gradient(90deg,#f5c842,#00d4b8);
  --card-hover-border:rgba(245,200,66,0.28);
  --tag-active-bg:rgba(245,200,66,0.1);--tag-active-color:#f5c842;
  --nav-active-bg:rgba(245,200,66,0.1);--nav-active-color:#f5c842;
  --scrollbar-color:rgba(255,255,255,0.1);
  --cat-color:#f5c842;
}

/* ── 2. BLOSSOM — เด็กหญิง 8-13, น่ารัก, Pastel Pink ── */
body.theme-blossom {
  --bg:#fff5fb;--bg2:#fff9fd;--bg3:#ffe8f6;
  --surface:rgba(255,130,200,0.1);--surface2:rgba(255,130,200,0.18);
  --border:rgba(255,130,200,0.3);--border2:rgba(236,72,153,0.4);
  --text:#5b1a4a;--text2:#8b3070;--text-dim:#c090b0;
  --primary:#ec4899;--primary-fg:#fff;--primary-glow:rgba(236,72,153,0.22);
  --secondary:#a78bfa;--secondary-fg:#fff;
  --accent:#fbbf24;--danger:#fb7185;--info:#67e8f9;--success:#6ee7b7;
  --radius:22px;--radius-sm:16px;--radius-xs:10px;
  --shadow:0 6px 24px rgba(236,72,153,0.15);--shadow-sm:0 3px 10px rgba(236,72,153,0.1);
  --font-display:'Itim',cursive;--font-body:'Sarabun',sans-serif;--font-mono:'Sarabun',sans-serif;
  --sidebar-w:258px;--topbar-h:64px;
  --sidebar-bg:linear-gradient(180deg,#ffe0f3,#fff5fb);
  --logo-gradient:linear-gradient(90deg,#ec4899,#a78bfa);
  --card-hover-border:rgba(236,72,153,0.45);
  --tag-active-bg:rgba(236,72,153,0.12);--tag-active-color:#ec4899;
  --nav-active-bg:rgba(236,72,153,0.12);--nav-active-color:#c2185b;
  --scrollbar-color:rgba(236,72,153,0.18);
  --cat-color:#ec4899;
}

/* ── 3. CYBER — วัยรุ่นชาย 14-19, Gaming/Tech, Neon Cyan ── */
body.theme-cyber {
  --bg:#080c10;--bg2:#0e1318;--bg3:#131d26;
  --surface:rgba(0,229,255,0.04);--surface2:rgba(0,229,255,0.08);
  --border:rgba(0,229,255,0.1);--border2:rgba(0,229,255,0.28);
  --text:#d4eaf8;--text2:#8aafc8;--text-dim:#4a6480;
  --primary:#00e5ff;--primary-fg:#080c10;--primary-glow:rgba(0,229,255,0.2);
  --secondary:#ff2d78;--secondary-fg:#fff;
  --accent:#7c3aed;--danger:#ff4d6d;--info:#38bdf8;--success:#22c55e;
  --radius:8px;--radius-sm:5px;--radius-xs:3px;
  --shadow:0 4px 20px rgba(0,0,0,0.7);--shadow-sm:0 2px 8px rgba(0,0,0,0.5);
  --font-display:'Kanit',sans-serif;--font-body:'Kanit',sans-serif;--font-mono:'IBM Plex Mono',monospace;
  --sidebar-w:250px;--topbar-h:56px;
  --sidebar-bg:linear-gradient(180deg,#0e1318,#080c10);
  --logo-gradient:linear-gradient(90deg,#00e5ff,#ff2d78);
  --card-hover-border:rgba(0,229,255,0.35);
  --tag-active-bg:rgba(0,229,255,0.08);--tag-active-color:#00e5ff;
  --nav-active-bg:rgba(0,229,255,0.08);--nav-active-color:#00e5ff;
  --scrollbar-color:rgba(0,229,255,0.12);
  --cat-color:#00e5ff;
}

/* ── 4. FORMAL — ผู้บริหาร อาจารย์ 30+, Professional Navy ── */
body.theme-formal {
  --bg:#f0f4f8;--bg2:#ffffff;--bg3:#e4edf6;
  --surface:rgba(30,58,138,0.05);--surface2:rgba(30,58,138,0.09);
  --border:rgba(30,58,138,0.1);--border2:rgba(30,58,138,0.22);
  --text:#1a2744;--text2:#334155;--text-dim:#64748b;
  --primary:#1e3a8a;--primary-fg:#ffffff;--primary-glow:rgba(30,58,138,0.12);
  --secondary:#0369a1;--secondary-fg:#ffffff;
  --accent:#b45309;--danger:#dc2626;--info:#0284c7;--success:#16a34a;
  --radius:8px;--radius-sm:5px;--radius-xs:3px;
  --shadow:0 2px 12px rgba(30,58,138,0.1);--shadow-sm:0 1px 4px rgba(30,58,138,0.07);
  --font-display:'Sarabun',sans-serif;--font-body:'Sarabun',sans-serif;--font-mono:'IBM Plex Mono',monospace;
  --sidebar-w:255px;--topbar-h:56px;
  --sidebar-bg:linear-gradient(180deg,#1e3a8a,#1e40af);
  --logo-gradient:linear-gradient(90deg,#fff,rgba(255,255,255,0.75));
  --card-hover-border:rgba(30,58,138,0.3);
  --tag-active-bg:rgba(30,58,138,0.08);--tag-active-color:#1e3a8a;
  --nav-active-bg:rgba(255,255,255,0.16);--nav-active-color:#ffffff;
  --scrollbar-color:rgba(30,58,138,0.14);
  --cat-color:#1e3a8a;
}

/* ── 5. SUNRISE — เด็กชาย 10-15, กระปรี้กระเปร่า, Orange+Amber ── */
body.theme-sunrise {
  --bg:#fffbf5;--bg2:#ffffff;--bg3:#fff3e0;
  --surface:rgba(251,146,60,0.08);--surface2:rgba(251,146,60,0.14);
  --border:rgba(251,146,60,0.2);--border2:rgba(234,88,12,0.35);
  --text:#431407;--text2:#7c2d12;--text-dim:#c2724f;
  --primary:#f97316;--primary-fg:#fff;--primary-glow:rgba(249,115,22,0.2);
  --secondary:#eab308;--secondary-fg:#431407;
  --accent:#06b6d4;--danger:#ef4444;--info:#0ea5e9;--success:#22c55e;
  --radius:16px;--radius-sm:10px;--radius-xs:6px;
  --shadow:0 4px 20px rgba(249,115,22,0.15);--shadow-sm:0 2px 8px rgba(249,115,22,0.1);
  --font-display:'Prompt',sans-serif;--font-body:'Sarabun',sans-serif;--font-mono:'IBM Plex Mono',monospace;
  --sidebar-w:258px;--topbar-h:60px;
  --sidebar-bg:linear-gradient(180deg,#fff3e0,#fffbf5);
  --logo-gradient:linear-gradient(90deg,#f97316,#eab308);
  --card-hover-border:rgba(249,115,22,0.38);
  --tag-active-bg:rgba(249,115,22,0.1);--tag-active-color:#ea580c;
  --nav-active-bg:rgba(249,115,22,0.1);--nav-active-color:#ea580c;
  --scrollbar-color:rgba(249,115,22,0.15);
  --cat-color:#f97316;
}

/* ── 6. TWILIGHT — วัยรุ่นหญิง 14-20, Dark aesthetic, Purple+Rose ── */
body.theme-twilight {
  --bg:#0f0a1a;--bg2:#160e26;--bg3:#1d1230;
  --surface:rgba(167,139,250,0.07);--surface2:rgba(167,139,250,0.13);
  --border:rgba(167,139,250,0.12);--border2:rgba(236,72,153,0.3);
  --text:#e9d5ff;--text2:#c4b5fd;--text-dim:#6b5faa;
  --primary:#c084fc;--primary-fg:#0f0a1a;--primary-glow:rgba(192,132,252,0.2);
  --secondary:#fb7185;--secondary-fg:#0f0a1a;
  --accent:#34d399;--danger:#f43f5e;--info:#818cf8;--success:#4ade80;
  --radius:18px;--radius-sm:12px;--radius-xs:7px;
  --shadow:0 6px 28px rgba(0,0,0,0.6);--shadow-sm:0 2px 10px rgba(0,0,0,0.4);
  --font-display:'Prompt',sans-serif;--font-body:'Sarabun',sans-serif;--font-mono:'IBM Plex Mono',monospace;
  --sidebar-w:258px;--topbar-h:60px;
  --sidebar-bg:linear-gradient(180deg,#140c22,#0f0a1a);
  --logo-gradient:linear-gradient(90deg,#c084fc,#fb7185);
  --card-hover-border:rgba(192,132,252,0.35);
  --tag-active-bg:rgba(192,132,252,0.1);--tag-active-color:#c084fc;
  --nav-active-bg:rgba(192,132,252,0.1);--nav-active-color:#c084fc;
  --scrollbar-color:rgba(192,132,252,0.14);
  --cat-color:#c084fc;
}

/* ── 7. OCEAN — Unisex 15-25, Clean+Fresh, Teal+Sky ── */
body.theme-ocean {
  --bg:#f0fdff;--bg2:#ffffff;--bg3:#e0faff;
  --surface:rgba(6,182,212,0.07);--surface2:rgba(6,182,212,0.13);
  --border:rgba(6,182,212,0.18);--border2:rgba(8,145,178,0.3);
  --text:#083344;--text2:#155e75;--text-dim:#67a8bc;
  --primary:#06b6d4;--primary-fg:#fff;--primary-glow:rgba(6,182,212,0.2);
  --secondary:#0ea5e9;--secondary-fg:#fff;
  --accent:#14b8a6;--danger:#f87171;--info:#38bdf8;--success:#34d399;
  --radius:16px;--radius-sm:10px;--radius-xs:6px;
  --shadow:0 4px 20px rgba(6,182,212,0.14);--shadow-sm:0 2px 8px rgba(6,182,212,0.09);
  --font-display:'Nunito',sans-serif;--font-body:'Sarabun',sans-serif;--font-mono:'IBM Plex Mono',monospace;
  --sidebar-w:258px;--topbar-h:60px;
  --sidebar-bg:linear-gradient(180deg,#ecfeff,#f0fdff);
  --logo-gradient:linear-gradient(90deg,#06b6d4,#0ea5e9);
  --card-hover-border:rgba(6,182,212,0.38);
  --tag-active-bg:rgba(6,182,212,0.1);--tag-active-color:#0891b2;
  --nav-active-bg:rgba(6,182,212,0.1);--nav-active-color:#0891b2;
  --scrollbar-color:rgba(6,182,212,0.15);
  --cat-color:#06b6d4;
}

/* ── 8. MATCHA — Café aesthetic, Unisex 18-25, Sage+Cream ── */
body.theme-matcha {
  --bg:#f6f4ef;--bg2:#fdfcf8;--bg3:#edeae0;
  --surface:rgba(101,163,13,0.07);--surface2:rgba(101,163,13,0.12);
  --border:rgba(101,163,13,0.18);--border2:rgba(77,124,15,0.3);
  --text:#1a2e0d;--text2:#365314;--text-dim:#7a9e5e;
  --primary:#65a30d;--primary-fg:#fff;--primary-glow:rgba(101,163,13,0.18);
  --secondary:#a16207;--secondary-fg:#fff;
  --accent:#d97706;--danger:#e11d48;--info:#0284c7;--success:#16a34a;
  --radius:14px;--radius-sm:9px;--radius-xs:5px;
  --shadow:0 4px 18px rgba(101,163,13,0.12);--shadow-sm:0 2px 8px rgba(101,163,13,0.08);
  --font-display:'Nunito',sans-serif;--font-body:'Sarabun',sans-serif;--font-mono:'IBM Plex Mono',monospace;
  --sidebar-w:258px;--topbar-h:60px;
  --sidebar-bg:linear-gradient(180deg,#edeae0,#f6f4ef);
  --logo-gradient:linear-gradient(90deg,#65a30d,#a16207);
  --card-hover-border:rgba(101,163,13,0.35);
  --tag-active-bg:rgba(101,163,13,0.1);--tag-active-color:#4d7c0f;
  --nav-active-bg:rgba(101,163,13,0.1);--nav-active-color:#3f6212;
  --scrollbar-color:rgba(101,163,13,0.14);
  --cat-color:#65a30d;
}

/* ── 9. SAKURA — หญิง 15-25, Japanese aesthetic, Cherry Blossom ── */
body.theme-sakura {
  --bg:#fef6f9;--bg2:#fff9fb;--bg3:#fce7f0;
  --surface:rgba(244,114,182,0.08);--surface2:rgba(244,114,182,0.14);
  --border:rgba(244,114,182,0.22);--border2:rgba(236,72,153,0.35);
  --text:#3b0a1e;--text2:#831843;--text-dim:#d08da8;
  --primary:#f472b6;--primary-fg:#fff;--primary-glow:rgba(244,114,182,0.2);
  --secondary:#e879f9;--secondary-fg:#fff;
  --accent:#fdba74;--danger:#fb7185;--info:#67e8f9;--success:#6ee7b7;
  --radius:20px;--radius-sm:14px;--radius-xs:8px;
  --shadow:0 4px 22px rgba(244,114,182,0.16);--shadow-sm:0 2px 8px rgba(244,114,182,0.1);
  --font-display:'Itim',cursive;--font-body:'Sarabun',sans-serif;--font-mono:'Sarabun',sans-serif;
  --sidebar-w:258px;--topbar-h:62px;
  --sidebar-bg:linear-gradient(180deg,#fce7f0,#fef6f9);
  --logo-gradient:linear-gradient(90deg,#f472b6,#e879f9);
  --card-hover-border:rgba(244,114,182,0.45);
  --tag-active-bg:rgba(244,114,182,0.1);--tag-active-color:#db2777;
  --nav-active-bg:rgba(244,114,182,0.1);--nav-active-color:#be185d;
  --scrollbar-color:rgba(244,114,182,0.18);
  --cat-color:#f472b6;
}

/* ── 10. Y2K — Gen Z trend, Silver+HotPink+Electric, All ages ── */
body.theme-y2k {
  --bg:#0a0014;--bg2:#12001e;--bg3:#1a0028;
  --surface:rgba(255,0,200,0.05);--surface2:rgba(255,0,200,0.1);
  --border:rgba(255,0,200,0.12);--border2:rgba(0,255,200,0.28);
  --text:#f0e6ff;--text2:#c8a8ff;--text-dim:#6a4a99;
  --primary:#ff00c8;--primary-fg:#fff;--primary-glow:rgba(255,0,200,0.22);
  --secondary:#00ffc8;--secondary-fg:#0a0014;
  --accent:#ffdc00;--danger:#ff4060;--info:#40c0ff;--success:#00ffaa;
  --radius:12px;--radius-sm:8px;--radius-xs:4px;
  --shadow:0 0 24px rgba(255,0,200,0.2),0 4px 20px rgba(0,0,0,0.5);--shadow-sm:0 0 10px rgba(255,0,200,0.1);
  --font-display:'Space Grotesk',sans-serif;--font-body:'Sarabun',sans-serif;--font-mono:'IBM Plex Mono',monospace;
  --sidebar-w:258px;--topbar-h:60px;
  --sidebar-bg:linear-gradient(180deg,#12001e,#0a0014);
  --logo-gradient:linear-gradient(90deg,#ff00c8,#00ffc8,#ffdc00);
  --card-hover-border:rgba(255,0,200,0.4);
  --tag-active-bg:rgba(255,0,200,0.1);--tag-active-color:#ff00c8;
  --nav-active-bg:rgba(255,0,200,0.1);--nav-active-color:#ff00c8;
  --scrollbar-color:rgba(255,0,200,0.14);
  --cat-color:#ff00c8;
}

/* ── 11. EARTH — Cottagecore, Nature lovers 16-25, Cream+Sage ── */
body.theme-earth {
  --bg:#faf6f0;--bg2:#fff;--bg3:#f0e8dc;
  --surface:rgba(120,80,30,0.06);--surface2:rgba(120,80,30,0.1);
  --border:rgba(120,80,30,0.14);--border2:rgba(120,80,30,0.26);
  --text:#2c1a0c;--text2:#4a2e14;--text-dim:#a07855;
  --primary:#92400e;--primary-fg:#fff;--primary-glow:rgba(146,64,14,0.15);
  --secondary:#4a7c59;--secondary-fg:#fff;
  --accent:#b7791f;--danger:#c53030;--info:#2b6cb0;--success:#276749;
  --radius:14px;--radius-sm:9px;--radius-xs:5px;
  --shadow:0 4px 16px rgba(120,80,30,0.1);--shadow-sm:0 2px 6px rgba(120,80,30,0.07);
  --font-display:'Nunito',sans-serif;--font-body:'Sarabun',sans-serif;--font-mono:'IBM Plex Mono',monospace;
  --sidebar-w:258px;--topbar-h:60px;
  --sidebar-bg:linear-gradient(180deg,#f0e8dc,#faf6f0);
  --logo-gradient:linear-gradient(90deg,#92400e,#4a7c59);
  --card-hover-border:rgba(146,64,14,0.3);
  --tag-active-bg:rgba(146,64,14,0.08);--tag-active-color:#78350f;
  --nav-active-bg:rgba(146,64,14,0.08);--nav-active-color:#78350f;
  --scrollbar-color:rgba(120,80,30,0.12);
  --cat-color:#92400e;
}

/* ── 12. MATRIX — Tech-minded all ages, Terminal Green+Black ── */
body.theme-matrix {
  --bg:#000a00;--bg2:#001200;--bg3:#001a00;
  --surface:rgba(0,255,65,0.04);--surface2:rgba(0,255,65,0.08);
  --border:rgba(0,255,65,0.1);--border2:rgba(0,255,65,0.24);
  --text:#ccffcc;--text2:#66dd66;--text-dim:#2a6a2a;
  --primary:#00ff41;--primary-fg:#000a00;--primary-glow:rgba(0,255,65,0.2);
  --secondary:#00dd88;--secondary-fg:#000a00;
  --accent:#ffcc00;--danger:#ff3030;--info:#00aaff;--success:#00ff88;
  --radius:4px;--radius-sm:3px;--radius-xs:2px;
  --shadow:0 0 20px rgba(0,255,65,0.15),0 4px 16px rgba(0,0,0,0.7);--shadow-sm:0 0 8px rgba(0,255,65,0.1);
  --font-display:'IBM Plex Mono',monospace;--font-body:'IBM Plex Mono',monospace;--font-mono:'IBM Plex Mono',monospace;
  --sidebar-w:258px;--topbar-h:56px;
  --sidebar-bg:linear-gradient(180deg,#001200,#000a00);
  --logo-gradient:linear-gradient(90deg,#00ff41,#00dd88);
  --card-hover-border:rgba(0,255,65,0.32);
  --tag-active-bg:rgba(0,255,65,0.08);--tag-active-color:#00ff41;
  --nav-active-bg:rgba(0,255,65,0.08);--nav-active-color:#00ff41;
  --scrollbar-color:rgba(0,255,65,0.12);
  --cat-color:#00ff41;
}

/* Dark sidebars (Formal) text override */
body.theme-formal .sidebar{color:rgba(255,255,255,0.85);}
body.theme-formal .nav-item{color:rgba(255,255,255,0.65);}
body.theme-formal .nav-item:hover{background:rgba(255,255,255,0.1);color:#fff;}
body.theme-formal .nav-item.active{background:rgba(255,255,255,0.18);color:#fff;}
body.theme-formal .nav-section-label{color:rgba(255,255,255,0.4);}
body.theme-formal .logo-sub{color:rgba(255,255,255,0.5);}
body.theme-formal .sidebar-footer{border-top-color:rgba(255,255,255,0.1);}


/* ════════════════════════════════════════════════
   RESET & BASE
════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box;}
*::selection{background:var(--primary);color:var(--primary-fg);}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  transition:background .3s, color .3s;
}

a{color:inherit;text-decoration:none;}

::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--scrollbar-color);border-radius:10px;}

/* ════════════════════════════════════════════════
   THEME SWITCHER — now inside User Settings modal
════════════════════════════════════════════════ */
.theme-btn{
  width:36px;height:36px;border-radius:50%;border:2.5px solid transparent;
  cursor:pointer;transition:all .22s;position:relative;flex-shrink:0;
}
.theme-btn:hover{transform:scale(1.18);}
.theme-btn.active{border-color:var(--text);transform:scale(1.12);box-shadow:0 0 0 3px var(--primary-glow);}
.theme-btn[data-theme="midnight"]{background:linear-gradient(135deg,#090d1f,#f5c842);}
.theme-btn[data-theme="blossom"]{background:linear-gradient(135deg,#ec4899,#a78bfa);}
.theme-btn[data-theme="cyber"]{background:linear-gradient(135deg,#080c10,#00e5ff);}
.theme-btn[data-theme="formal"]{background:linear-gradient(135deg,#1e3a8a,#f0f4f8);}
.theme-btn[data-theme="sunrise"]{background:linear-gradient(135deg,#f97316,#eab308);}
.theme-btn[data-theme="twilight"]{background:linear-gradient(135deg,#0f0a1a,#c084fc);}
.theme-btn[data-theme="ocean"]{background:linear-gradient(135deg,#06b6d4,#0ea5e9);}
.theme-btn[data-theme="matcha"]{background:linear-gradient(135deg,#65a30d,#a16207);}
.theme-btn[data-theme="sakura"]{background:linear-gradient(135deg,#f472b6,#e879f9);}
.theme-btn[data-theme="y2k"]{background:conic-gradient(#ff00c8,#00ffc8,#ffdc00,#ff00c8);}
.theme-btn[data-theme="earth"]{background:linear-gradient(135deg,#92400e,#4a7c59);}
.theme-btn[data-theme="matrix"]{background:linear-gradient(135deg,#000a00,#00ff41);}

.theme-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
  padding:16px;background:var(--surface);border-radius:var(--radius-sm);
}
.theme-option{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;padding:8px 4px;border-radius:var(--radius-sm);
  transition:background .18s;
}
.theme-option:hover{background:var(--surface2);}
.theme-option.active{background:var(--tag-active-bg);}
.theme-option-name{font-size:.65rem;color:var(--text-dim);text-align:center;line-height:1.3;}
.theme-option.active .theme-option-name{color:var(--primary);font-weight:700;}

/* ════════════════════════════════════════════════
   PUBLIC TOPNAV (Index, Register, Contact)
════════════════════════════════════════════════ */
.pub-nav{
  position:fixed;top:0;left:0;right:0;height:64px;
  background:var(--bg2);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 32px;gap:24px;
  z-index:100;backdrop-filter:blur(16px);
  transition:all .3s;
}
.pub-logo{
  font-family:var(--font-display);font-size:1.4rem;font-weight:700;
  background:var(--logo-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  white-space:nowrap;flex-shrink:0;
}
.pub-links{display:flex;gap:4px;flex:1;}
.pub-link{
  padding:7px 14px;border-radius:var(--radius-sm);
  font-size:.88rem;color:var(--text-dim);cursor:pointer;
  transition:all .2s;white-space:nowrap;
}
.pub-link:hover,.pub-link.active{background:var(--surface);color:var(--text);}
.pub-actions{display:flex;gap:8px;align-items:center;margin-left:auto;}

/* ════════════════════════════════════════════════
   APP LAYOUT (Sidebar + Topbar)
════════════════════════════════════════════════ */
.app-layout{display:flex;min-height:100vh;}

/* SIDEBAR */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);
  background:var(--sidebar-bg);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:200;
  overflow-y:auto;overflow-x:hidden;
  transition:transform .3s,background .3s;
}
.sidebar-logo{
  padding:20px 20px 16px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.logo-mark{
  font-family:var(--font-display);font-size:1.5rem;font-weight:700;
  background:var(--logo-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.logo-sub{font-size:.65rem;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;margin-top:2px;}

.nav-section{padding:14px 12px 6px;}
.nav-section-label{
  font-size:.62rem;color:var(--text-dim);text-transform:uppercase;
  letter-spacing:.12em;padding:0 8px;margin-bottom:4px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:var(--radius-sm);
  font-size:.85rem;color:var(--text-dim);cursor:pointer;
  transition:all .2s;margin-bottom:1px;position:relative;
}
.nav-item:hover{background:var(--surface);color:var(--text);}
.nav-item.active{background:var(--nav-active-bg);color:var(--nav-active-color);}
.nav-item .nav-icon{width:17px;height:17px;flex-shrink:0;opacity:.7;}
.nav-item.active .nav-icon{opacity:1;}
.nav-badge{
  margin-left:auto;background:var(--danger);color:#fff;
  font-size:.62rem;padding:1px 6px;border-radius:20px;font-weight:700;
}

/* SIDEBAR FORMAL THEME OVERRIDE */
body.theme-formal .sidebar{color:rgba(255,255,255,0.85);}
body.theme-formal .nav-item{color:rgba(255,255,255,0.65);}
body.theme-formal .nav-item:hover{background:rgba(255,255,255,0.1);color:#fff;}
body.theme-formal .nav-item.active{background:rgba(255,255,255,0.18);color:#fff;}
body.theme-formal .nav-section-label{color:rgba(255,255,255,0.4);}
body.theme-formal .logo-sub{color:rgba(255,255,255,0.5);}
body.theme-formal .sidebar-footer{border-top-color:rgba(255,255,255,0.1);}

.sidebar-footer{
  margin-top:auto;padding:14px 12px;
  border-top:1px solid var(--border);flex-shrink:0;
}
.user-pill{
  display:flex;align-items:center;gap:10px;
  padding:10px 10px;border-radius:var(--radius-sm);
  background:var(--surface);cursor:pointer;transition:background .2s;
}
.user-pill:hover{background:var(--surface2);}
.avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.88rem;color:var(--primary-fg);
}
.user-info .uname{font-size:.83rem;font-weight:600;}
.user-info .ugrade{font-size:.7rem;color:var(--text-dim);}

/* TOPBAR */
.topbar{
  position:fixed;left:var(--sidebar-w);right:0;top:0;height:var(--topbar-h);
  background:var(--bg2);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 24px;gap:12px;
  z-index:100;backdrop-filter:blur(16px);transition:all .3s;
}
.topbar-title{font-family:var(--font-display);font-size:1.05rem;font-weight:500;flex:1;}
.topbar-actions{display:flex;gap:8px;align-items:center;}

/* MAIN CONTENT */
.main-content{
  margin-left:var(--sidebar-w);padding-top:var(--topbar-h);
  min-height:100vh;flex:1;
}
.content-area{padding:28px;}

/* PUBLIC PAGE CONTENT */
.pub-content{padding-top:64px;min-height:100vh;}

/* ════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════ */
.btn{
  padding:9px 20px;border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:.86rem;
  cursor:pointer;border:none;transition:all .22s;
  font-weight:600;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
}
.btn-primary{background:var(--primary);color:var(--primary-fg);}
.btn-primary:hover{opacity:.88;transform:translateY(-1px);box-shadow:0 4px 16px var(--primary-glow);}
.btn-secondary{background:var(--secondary);color:var(--secondary-fg);}
.btn-secondary:hover{opacity:.88;transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--text-dim);border:1px solid var(--border);}
.btn-ghost:hover{background:var(--surface);color:var(--text);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-danger:hover{opacity:.85;}
.btn-sm{padding:6px 14px;font-size:.78rem;}
.btn-lg{padding:12px 28px;font-size:.95rem;}
.btn-icon{padding:8px;aspect-ratio:1;}
.btn-block{width:100%;justify-content:center;}

/* ════════════════════════════════════════════════
   CARDS & PANELS
════════════════════════════════════════════════ */
.card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;
  transition:all .25s;
}
.card:hover{border-color:var(--border2);box-shadow:var(--shadow-sm);}
.card-hover:hover{transform:translateY(-3px);border-color:var(--card-hover-border);}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;}

.stat-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 20px;
  position:relative;overflow:hidden;cursor:pointer;transition:all .25s;
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--primary),transparent);
}
.stat-card.sec::before{background:linear-gradient(90deg,var(--secondary),transparent);}
.stat-card.acc::before{background:linear-gradient(90deg,var(--accent),transparent);}
.stat-card.dan::before{background:linear-gradient(90deg,var(--danger),transparent);}

.stat-label{font-size:.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;}
.stat-value{font-family:var(--font-display);font-size:1.9rem;font-weight:700;line-height:1;}
.stat-sub{font-size:.75rem;color:var(--text-dim);margin-top:4px;}
.stat-ico{
  position:absolute;right:16px;top:16px;
  width:40px;height:40px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  background:var(--surface);
}

/* ════════════════════════════════════════════════
   GRID HELPERS
════════════════════════════════════════════════ */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.g32{display:grid;grid-template-columns:2fr 1fr;gap:16px;}
.g23{display:grid;grid-template-columns:1fr 2fr;gap:16px;}

.mb8{margin-bottom:8px;}
.mb12{margin-bottom:12px;}
.mb16{margin-bottom:16px;}
.mb20{margin-bottom:20px;}
.mb24{margin-bottom:24px;}
.mb32{margin-bottom:32px;}

.flex{display:flex;align-items:center;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.gap4{gap:4px;}
.gap8{gap:8px;}
.gap12{gap:12px;}

/* ════════════════════════════════════════════════
   TYPOGRAPHY
════════════════════════════════════════════════ */
.page-title{font-family:var(--font-display);font-size:1.4rem;font-weight:600;margin-bottom:4px;}
.page-sub{font-size:.84rem;color:var(--text-dim);}
.section-title{font-family:var(--font-display);font-size:1.05rem;font-weight:500;margin-bottom:4px;}
.panel-title{font-family:var(--font-display);font-size:.95rem;font-weight:500;}
.label{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--text-dim);}
.link{color:var(--primary);cursor:pointer;font-size:.84rem;}
.link:hover{text-decoration:underline;}

/* ════════════════════════════════════════════════
   TAGS / BADGES
════════════════════════════════════════════════ */
.tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:20px;font-size:.7rem;font-weight:600;
}
.tag-pri{background:var(--tag-active-bg);color:var(--tag-active-color);}
.tag-sec{background:rgba(0,201,177,.15);color:var(--secondary);}
.tag-acc{background:rgba(124,58,237,.15);color:var(--accent);}
.tag-dan{background:rgba(255,107,107,.15);color:var(--danger);}
.tag-info{background:rgba(96,165,250,.15);color:var(--info);}
.tag-ok{background:rgba(52,211,153,.15);color:var(--success);}

/* ════════════════════════════════════════════════
   TABS
════════════════════════════════════════════════ */
.tabs{display:flex;gap:4px;background:var(--surface);border-radius:var(--radius-sm);padding:4px;width:fit-content;margin-bottom:20px;}
.tab{padding:7px 14px;border-radius:calc(var(--radius-sm) - 3px);font-size:.83rem;cursor:pointer;color:var(--text-dim);transition:all .2s;}
.tab.active{background:var(--bg2);color:var(--text);font-weight:600;box-shadow:var(--shadow-sm);}

/* ════════════════════════════════════════════════
   FORMS
════════════════════════════════════════════════ */
.form-group{margin-bottom:14px;}
.form-label{display:block;font-size:.79rem;color:var(--text-dim);margin-bottom:5px;font-weight:500;}
.form-input{
  width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:9px 13px;
  color:var(--text);font-family:var(--font-body);font-size:.88rem;
  transition:border-color .2s;outline:none;
}
.form-input:focus{border-color:var(--primary);}
.form-input::placeholder{color:var(--text-dim);}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.form-hint{font-size:.72rem;color:var(--text-dim);margin-top:4px;}
.form-check{display:flex;align-items:center;gap:8px;font-size:.86rem;cursor:pointer;}
.form-check input{accent-color:var(--primary);}

/* ════════════════════════════════════════════════
   TABLE
════════════════════════════════════════════════ */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-dim);padding:8px 12px;text-align:left;
  border-bottom:1px solid var(--border);background:var(--surface);
}
.tbl td{padding:10px 12px;font-size:.84rem;border-bottom:1px solid rgba(0,0,0,0.04);}
body.theme-dark .tbl td{border-bottom-color:rgba(255,255,255,.04);}
body.theme-teen .tbl td{border-bottom-color:rgba(255,255,255,.04);}
.tbl tr:hover td{background:var(--surface);}

/* ════════════════════════════════════════════════
   SKILL BARS
════════════════════════════════════════════════ */
.skill-row{margin-bottom:12px;}
.skill-hd{display:flex;justify-content:space-between;font-size:.82rem;margin-bottom:5px;}
.skill-track{height:6px;background:var(--surface2);border-radius:10px;overflow:hidden;}
.skill-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--secondary),var(--info));transition:width .8s ease;}
.skill-fill.pri{background:linear-gradient(90deg,var(--primary),var(--accent));}

/* ════════════════════════════════════════════════
   PROGRESS RINGS
════════════════════════════════════════════════ */
.ring-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;}
.ring-svg{transform:rotate(-90deg);}
.ring-val{font-family:var(--font-display);font-size:.9rem;font-weight:600;}
.ring-lbl{font-size:.7rem;color:var(--text-dim);text-align:center;}

/* ════════════════════════════════════════════════
   ALERTS / NOTICE
════════════════════════════════════════════════ */
.alert{
  padding:12px 16px;border-radius:var(--radius-sm);
  border-left:3px solid;font-size:.84rem;margin-bottom:14px;
}
.alert-info{background:rgba(96,165,250,.1);border-color:var(--info);color:var(--info);}
.alert-success{background:rgba(52,211,153,.1);border-color:var(--success);color:var(--success);}
.alert-warn{background:rgba(245,200,66,.1);border-color:var(--primary);color:var(--primary);}
.alert-danger{background:rgba(255,107,107,.1);border-color:var(--danger);color:var(--danger);}

/* ════════════════════════════════════════════════
   MODAL
════════════════════════════════════════════════ */
.modal-ov{
  position:fixed;inset:0;background:rgba(0,0,0,.65);
  backdrop-filter:blur(8px);z-index:800;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-ov.open{display:flex;}
.modal-box{
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:var(--radius);padding:28px;width:520px;max-width:100%;
  max-height:90vh;overflow-y:auto;animation:fadeUp .3s ease;
}
.modal-title{font-family:var(--font-display);font-size:1.2rem;margin-bottom:4px;}
.modal-sub{font-size:.83rem;color:var(--text-dim);margin-bottom:20px;}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}

/* ════════════════════════════════════════════════
   THEME-SPECIFIC EXTRAS
════════════════════════════════════════════════ */

/* Light sidebar themes */
body.theme-blossom .sidebar, body.theme-sunrise .sidebar,
body.theme-ocean .sidebar, body.theme-matcha .sidebar,
body.theme-sakura .sidebar, body.theme-earth .sidebar {
  border-right:1px solid var(--border);box-shadow:2px 0 12px rgba(0,0,0,.05);
}
/* Dark sidebar text fix for light themes */
body.theme-blossom .nav-section-label, body.theme-sunrise .nav-section-label,
body.theme-ocean .nav-section-label, body.theme-matcha .nav-section-label,
body.theme-sakura .nav-section-label, body.theme-earth .nav-section-label {
  color:var(--text-dim);
}

/* Blossom — rounded, soft glow */
body.theme-blossom .btn-primary{box-shadow:0 4px 14px rgba(236,72,153,.28);}
body.theme-blossom .card{box-shadow:0 3px 14px rgba(236,72,153,.07);}
body.theme-blossom .stat-card::before{background:linear-gradient(90deg,var(--primary),var(--secondary));}

/* Cyber — sharp neon glow */
body.theme-cyber .nav-item.active{box-shadow:0 0 14px rgba(0,229,255,.18);}
body.theme-cyber .btn-primary{box-shadow:0 0 16px rgba(0,229,255,.3);}
body.theme-cyber .card{border-color:rgba(0,229,255,.07);}
body.theme-cyber .stat-card::before{background:linear-gradient(90deg,var(--primary),var(--secondary));}

/* Twilight — purple glow */
body.theme-twilight .btn-primary{box-shadow:0 0 18px rgba(192,132,252,.3);}
body.theme-twilight .nav-item.active{box-shadow:0 0 12px rgba(192,132,252,.2);}
body.theme-twilight .stat-card::before{background:linear-gradient(90deg,var(--primary),var(--secondary));}

/* Y2K — multi-color neon */
body.theme-y2k .btn-primary{box-shadow:0 0 20px rgba(255,0,200,.35);}
body.theme-y2k .nav-item.active{box-shadow:0 0 14px rgba(255,0,200,.2);}
body.theme-y2k .card{border-color:rgba(255,0,200,.1);}
body.theme-y2k .logo-mark{animation:y2kShift 3s linear infinite;}
@keyframes y2kShift{0%{filter:hue-rotate(0deg);}100%{filter:hue-rotate(360deg);}}

/* Matrix — terminal flicker */
body.theme-matrix .logo-mark{letter-spacing:.05em;}
body.theme-matrix .btn-primary{box-shadow:0 0 16px rgba(0,255,65,.3);letter-spacing:.05em;}
body.theme-matrix .nav-item.active{box-shadow:0 0 10px rgba(0,255,65,.15);}
body.theme-matrix .card{border-radius:3px;}

/* Sakura — petal soft */
body.theme-sakura .btn-primary{box-shadow:0 4px 16px rgba(244,114,182,.28);}
body.theme-sakura .card{box-shadow:0 3px 12px rgba(244,114,182,.08);}

/* ════════════════════════════════════════════════
   TABLE DARK ROW FIX (multi-theme)
════════════════════════════════════════════════ */
body.theme-midnight .tbl td, body.theme-cyber .tbl td,
body.theme-twilight .tbl td, body.theme-y2k .tbl td,
body.theme-matrix .tbl td {
  border-bottom-color:rgba(255,255,255,.04);
}

/* ════════════════════════════════════════════════
   ACTIVITY CATEGORY STYLES
════════════════════════════════════════════════ */
.cat-filter{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;align-items:center;
}
.cat-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 16px;border-radius:50px;
  font-size:.8rem;font-weight:600;cursor:pointer;
  border:1.5px solid var(--border);color:var(--text-dim);
  background:var(--bg2);transition:all .2s;white-space:nowrap;
}
.cat-pill:hover{border-color:var(--primary);color:var(--primary);background:var(--tag-active-bg);}
.cat-pill.active{background:var(--primary);color:var(--primary-fg);border-color:var(--primary);}
.cat-pill .cat-count{
  background:rgba(0,0,0,.15);border-radius:20px;
  padding:1px 6px;font-size:.68rem;
}
.cat-pill.active .cat-count{background:rgba(0,0,0,.2);}

/* Category type color dots on event cards */
.event-cat-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.05em;
}
.cat-camp{background:rgba(6,182,212,.15);color:#06b6d4;}
.cat-activity{background:rgba(34,197,94,.15);color:#16a34a;}
.cat-news{background:rgba(245,200,66,.12);color:var(--primary);}
.cat-exam{background:rgba(139,92,246,.15);color:#8b5cf6;}
.cat-tutor{background:rgba(249,115,22,.15);color:#ea580c;}
.cat-workshop{background:rgba(236,72,153,.15);color:#db2777;}

/* Event card redesign — modern flat */
.event-card-v2{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  transition:all .28s;cursor:pointer;display:flex;flex-direction:column;
}
.event-card-v2:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow);
  border-color:var(--card-hover-border);
}
.event-banner-v2{
  height:130px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.event-banner-v2 .banner-emoji{font-size:3.2rem;position:relative;z-index:1;}
.event-banner-v2::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.35) 100%);
}
.event-banner-v2 .banner-badges{
  position:absolute;top:10px;right:10px;left:10px;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-start;
}
.event-banner-v2 .org-badge{
  background:rgba(0,0,0,.5);backdrop-filter:blur(6px);
  color:#fff;font-size:.67rem;font-weight:600;padding:3px 9px;border-radius:20px;
}
.event-body-v2{padding:16px;flex:1;display:flex;flex-direction:column;gap:8px;}
.event-title-v2{
  font-family:var(--font-display);font-size:.95rem;font-weight:700;
  line-height:1.4;color:var(--text);
}
.event-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.event-info-row{
  display:flex;align-items:center;gap:5px;
  font-size:.74rem;color:var(--text-dim);
}
.event-info-row svg{width:12px;height:12px;flex-shrink:0;opacity:.6;}
.event-footer-v2{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-top:1px solid var(--border);
  background:var(--surface);
}
.event-price-v2{
  font-family:var(--font-display);font-size:1rem;font-weight:700;
  color:var(--primary);
}
.event-price-v2.free{color:var(--success);}

/* Activity list view row */
.event-row{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;margin-bottom:8px;
}
.event-row:hover{border-color:var(--card-hover-border);background:var(--surface);}
.event-row-icon{
  width:52px;height:52px;border-radius:var(--radius-sm);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;
}
.event-row-body{flex:1;}
.event-row-title{font-size:.9rem;font-weight:700;margin-bottom:3px;}
.event-row-meta{font-size:.75rem;color:var(--text-dim);display:flex;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.event-row-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}

/* ════════════════════════════════════════════════
   ANIMATIONS
════════════════════════════════════════════════ */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}
.a0{animation:fadeUp .45s ease both;}
.a1{animation:fadeUp .45s .07s ease both;}
.a2{animation:fadeUp .45s .14s ease both;}
.a3{animation:fadeUp .45s .21s ease both;}
.a4{animation:fadeUp .45s .28s ease both;}
.a5{animation:fadeUp .45s .35s ease both;}

@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
.pulse{animation:pulse 2s infinite;}

/* ════════════════════════════════════════════════
   DIVIDER
════════════════════════════════════════════════ */
.divider{height:1px;background:var(--border);margin:16px 0;}

/* ════════════════════════════════════════════════
   PAGE ROUTING
════════════════════════════════════════════════ */
.page-section{display:none;}
.page-section.visible{display:block;}

/* ════════════════════════════════════════════════
   ══ INDEX PAGE
════════════════════════════════════════════════ */
.hero{
  background:linear-gradient(135deg,var(--surface),var(--surface2));
  border-bottom:1px solid var(--border);
  padding:80px 48px;position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;right:-100px;top:-100px;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,var(--primary-glow),transparent 65%);
}
.hero::after{
  content:'';position:absolute;left:-50px;bottom:-80px;
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,201,177,.06),transparent 65%);
}
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--tag-active-bg);color:var(--tag-active-color);
  padding:5px 14px;border-radius:20px;font-size:.75rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:16px;
}
.hero-title{
  font-family:var(--font-display);font-size:3rem;font-weight:700;
  line-height:1.15;margin-bottom:12px;
}
.hero-title span{
  background:var(--logo-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-desc{font-size:1rem;color:var(--text-dim);line-height:1.7;max-width:560px;margin-bottom:24px;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
.hero-stats{
  display:flex;gap:32px;margin-top:40px;padding-top:28px;border-top:1px solid var(--border);
}
.hero-stat{text-align:center;}
.hero-stat-val{font-family:var(--font-display);font-size:1.8rem;font-weight:700;color:var(--primary);}
.hero-stat-lbl{font-size:.75rem;color:var(--text-dim);}

.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.feat-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;cursor:pointer;
  transition:all .28s;position:relative;overflow:hidden;
}
.feat-card:hover{transform:translateY(-5px);border-color:var(--card-hover-border);box-shadow:var(--shadow);}
.feat-card::after{
  content:'';position:absolute;top:0;right:0;
  width:60px;height:60px;border-radius:0 var(--radius) 0 60px;
  background:var(--surface2);
}
.feat-icon{font-size:2rem;margin-bottom:12px;}
.feat-title{font-family:var(--font-display);font-size:1rem;font-weight:600;margin-bottom:6px;}
.feat-desc{font-size:.8rem;color:var(--text-dim);line-height:1.6;}
.feat-arr{
  margin-top:14px;font-size:.78rem;font-weight:600;
  color:var(--primary);display:flex;align-items:center;gap:4px;
}

.news-item{
  display:flex;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--border);
}
.news-item:last-child{border-bottom:none;}
.news-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--primary);margin-top:6px;
}
.news-title{font-size:.9rem;font-weight:600;margin-bottom:3px;}
.news-meta{font-size:.74rem;color:var(--text-dim);}

/* ════════════════════════════════════════════════
   ══ PORTFOLIO PAGE
════════════════════════════════════════════════ */
.profile-header{
  background:linear-gradient(135deg,var(--surface),var(--surface2));
  border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;margin-bottom:20px;position:relative;overflow:hidden;
}
.profile-avatar{
  width:72px;height:72px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;font-weight:700;color:var(--primary-fg);
  border:3px solid var(--border2);
}
.profile-name{font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin-bottom:2px;}
.profile-meta{font-size:.82rem;color:var(--text-dim);margin-bottom:10px;}
.profile-chips{display:flex;gap:6px;flex-wrap:wrap;}
.completeness{
  padding:14px 18px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);text-align:center;
}
.complete-val{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--secondary);}
.complete-lbl{font-size:.72rem;color:var(--text-dim);}
.complete-bar{height:6px;background:var(--border);border-radius:10px;overflow:hidden;margin-top:6px;}
.complete-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--primary),var(--secondary));transition:width .8s;}

/* Education Timeline */
.edu-item{
  display:flex;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--border);
}
.edu-item:last-child{border-bottom:none;}
.edu-icon{
  width:38px;height:38px;border-radius:var(--radius-sm);flex-shrink:0;
  background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.edu-school{font-size:.9rem;font-weight:600;margin-bottom:2px;}
.edu-detail{font-size:.78rem;color:var(--text-dim);}
.edu-year{font-size:.72rem;color:var(--primary);font-weight:600;margin-left:auto;white-space:nowrap;}

/* Portfolio Template Cards */
.template-card{
  border:2px solid var(--border);border-radius:var(--radius);
  padding:16px;cursor:pointer;transition:all .2s;
}
.template-card:hover,.template-card.selected{border-color:var(--primary);background:var(--tag-active-bg);}
.template-preview{
  height:80px;border-radius:var(--radius-sm);margin-bottom:10px;
  background:linear-gradient(135deg,var(--surface2),var(--surface));
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;
}
.template-name{font-size:.88rem;font-weight:600;margin-bottom:3px;}
.template-desc{font-size:.73rem;color:var(--text-dim);}

/* ════════════════════════════════════════════════
   ══ ACTIVITY PAGE
════════════════════════════════════════════════ */
.event-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  transition:all .25s;cursor:pointer;
}
.event-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--card-hover-border);}
.event-banner{
  height:120px;background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex;align-items:center;justify-content:center;font-size:3rem;
  position:relative;
}
.event-org-badge{
  position:absolute;top:10px;right:10px;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  color:#fff;font-size:.68rem;padding:3px 8px;border-radius:20px;
}
.event-body{padding:14px;}
.event-title{font-size:.9rem;font-weight:700;margin-bottom:4px;line-height:1.4;}
.event-meta{font-size:.75rem;color:var(--text-dim);margin-bottom:8px;}
.event-meta span{display:flex;align-items:center;gap:4px;margin-bottom:2px;}
.event-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
.event-price{font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--primary);}

/* Calendar View */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-header{text-align:center;font-size:.7rem;color:var(--text-dim);padding:6px;font-weight:600;text-transform:uppercase;}
.cal-day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:.8rem;border-radius:var(--radius-sm);cursor:pointer;
  position:relative;transition:background .15s;
}
.cal-day:hover{background:var(--surface);}
.cal-day.today{background:var(--primary);color:var(--primary-fg);font-weight:700;}
.cal-day.has-event::after{
  content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--secondary);
}
.cal-day.other-month{opacity:.3;}

/* ════════════════════════════════════════════════
   ══ EXAM PAGE
════════════════════════════════════════════════ */
.exam-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;
  display:flex;gap:14px;align-items:flex-start;
  cursor:pointer;transition:all .2s;
}
.exam-card:hover{border-color:var(--card-hover-border);transform:translateX(3px);}
.exam-icon{
  width:48px;height:48px;border-radius:var(--radius-sm);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
  background:var(--surface2);
}
.exam-title{font-size:.9rem;font-weight:700;margin-bottom:3px;}
.exam-meta{font-size:.75rem;color:var(--text-dim);line-height:1.6;}
.exam-price{margin-left:auto;flex-shrink:0;text-align:right;}
.exam-price .price-val{font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--primary);}
.exam-price .price-sub{font-size:.7rem;color:var(--text-dim);}

.rank-num{
  width:28px;height:28px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.78rem;font-weight:600;
}
.r1{background:rgba(245,200,66,.2);color:#f5c842;}
.r2{background:rgba(180,180,180,.15);color:#c0c0c0;}
.r3{background:rgba(180,100,40,.15);color:#cd7f32;}
.rn{background:var(--surface);color:var(--text-dim);}
.my-row td{background:var(--tag-active-bg)!important;}

/* ════════════════════════════════════════════════
   ══ ORGANIZATION PAGE
════════════════════════════════════════════════ */
.org-header{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  border-radius:var(--radius);padding:24px;margin-bottom:20px;color:var(--primary-fg);
  position:relative;overflow:hidden;
}
.org-header::after{
  content:'ORG';position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-family:var(--font-display);font-size:5rem;font-weight:700;
  opacity:.1;letter-spacing:.1em;
}
.org-name{font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin-bottom:4px;}
.org-meta{font-size:.84rem;opacity:.8;}
.org-chips{display:flex;gap:6px;margin-top:10px;}
.org-chip{
  background:rgba(255,255,255,.2);backdrop-filter:blur(4px);
  padding:4px 10px;border-radius:20px;font-size:.72rem;font-weight:600;
}

/* Member list */
.member-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--border);
}
.member-row:last-child{border-bottom:none;}
.m-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:var(--primary-fg);flex-shrink:0;}
.m-name{font-size:.86rem;font-weight:600;}
.m-detail{font-size:.73rem;color:var(--text-dim);}

/* ════════════════════════════════════════════════
   ══ REGISTER PAGE
════════════════════════════════════════════════ */
.reg-container{max-width:680px;margin:0 auto;padding:40px 24px;}
.reg-header{text-align:center;margin-bottom:32px;}
.reg-logo{font-family:var(--font-display);font-size:2rem;font-weight:700;background:var(--logo-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px;}
.steps{display:flex;align-items:center;gap:0;margin-bottom:32px;}
.step{flex:1;display:flex;align-items:center;}
.step-dot{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:700;flex-shrink:0;
  border:2px solid var(--border);background:var(--bg2);color:var(--text-dim);
}
.step.done .step-dot{background:var(--success);border-color:var(--success);color:#fff;}
.step.active .step-dot{background:var(--primary);border-color:var(--primary);color:var(--primary-fg);}
.step-line{flex:1;height:2px;background:var(--border);}
.step.done .step-line{background:var(--success);}
.step-info{margin-left:8px;}
.step-name{font-size:.75rem;font-weight:600;}
.step-desc{font-size:.68rem;color:var(--text-dim);}

.plan-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;}
.plan-card{
  background:var(--bg2);border:2px solid var(--border);
  border-radius:var(--radius);padding:20px;cursor:pointer;transition:all .2s;
}
.plan-card:hover,.plan-card.selected{border-color:var(--primary);}
.plan-card.selected{background:var(--tag-active-bg);}
.plan-price{font-family:var(--font-display);font-size:1.8rem;font-weight:700;color:var(--primary);margin:6px 0;}
.plan-period{font-size:.72rem;color:var(--text-dim);margin-bottom:10px;}
.plan-feats{list-style:none;}
.plan-feats li{font-size:.78rem;color:var(--text-dim);padding:3px 0;display:flex;gap:6px;}
.plan-feats li::before{content:'✓';color:var(--success);font-weight:700;}

.upload-zone{
  border:2px dashed var(--border);border-radius:var(--radius);
  padding:24px;text-align:center;cursor:pointer;transition:all .2s;
}
.upload-zone:hover{border-color:var(--primary);background:var(--tag-active-bg);}
.upload-icon{font-size:2rem;margin-bottom:8px;}
.upload-text{font-size:.84rem;color:var(--text-dim);}

.gmail-btn{
  width:100%;padding:12px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--bg2);
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s;
  color:var(--text);
}
.gmail-btn:hover{background:var(--surface);border-color:var(--border2);}

/* ════════════════════════════════════════════════
   ══ CONTACT PAGE
════════════════════════════════════════════════ */
.contact-container{max-width:900px;margin:0 auto;padding:60px 24px;}
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:32px;}
.contact-info-card{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  border-radius:var(--radius);padding:28px;color:var(--primary-fg);
}
.contact-info-title{font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin-bottom:8px;}
.contact-info-desc{font-size:.85rem;opacity:.85;line-height:1.7;margin-bottom:24px;}
.contact-method{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;}
.contact-method-ico{
  width:36px;height:36px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.contact-method-name{font-size:.75rem;opacity:.7;}
.contact-method-val{font-size:.88rem;font-weight:600;}

/* ════════════════════════════════════════════════
   ══ ADMIN PAGE
════════════════════════════════════════════════ */
.admin-sidebar-extra{border-top:1px solid var(--border);padding-top:12px;margin-top:8px;}
.admin-badge{
  display:inline-flex;padding:2px 8px;border-radius:20px;
  font-size:.65rem;font-weight:700;background:var(--danger);color:#fff;
  text-transform:uppercase;letter-spacing:.05em;margin-left:6px;
}

.action-row{
  display:flex;gap:8px;padding:10px 12px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--border);
  cursor:pointer;transition:all .2s;align-items:center;margin-bottom:6px;
}
.action-row:hover{background:var(--surface2);}
.action-icon{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--tag-active-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.action-name{font-size:.86rem;font-weight:600;}
.action-desc{font-size:.73rem;color:var(--text-dim);}

/* ════════════════════════════════════════════════
   CUTE THEME SPECIFIC
════════════════════════════════════════════════ */
body.theme-cute .hero-title span,
body.theme-cute .stat-value{color:var(--primary);}
body.theme-cute .feat-card::before{
  content:'✦';position:absolute;top:10px;right:14px;
  font-size:1.2rem;color:var(--primary);opacity:.4;
}
body.theme-cute .event-card{border-radius:24px;}
body.theme-cute .btn{border-radius:50px;}

/* ════════════════════════════════════════════════
   TEEN THEME SPECIFIC
════════════════════════════════════════════════ */
body.theme-teen .hero{
  background:repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(255,255,255,.03) 40px),
             repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(255,255,255,.03) 40px),
             var(--bg2);
}
body.theme-teen .btn-primary{letter-spacing:.05em;text-transform:uppercase;font-size:.8rem;}

/* ════════════════════════════════════════════════
   FORMAL THEME SPECIFIC
════════════════════════════════════════════════ */
body.theme-formal .hero{background:linear-gradient(135deg,#e8f0fe,#f0f4f8);}
body.theme-formal .hero-title{color:var(--primary);}
body.theme-formal .card,.body.theme-formal .panel{box-shadow:var(--shadow-sm);}
body.theme-formal .stat-value{color:var(--primary);}

/* ════════════════════════════════════════════════
   RESPONSIVE HELPERS
════════════════════════════════════════════════ */
.hidden{display:none!important;}

/* ════════════════════════════════════════════════
   NOTIFICATION DOT
════════════════════════════════════════════════ */
.notif-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;
}
.notif-dot{
  width:7px;height:7px;border-radius:50%;background:var(--danger);
  position:absolute;top:7px;right:7px;border:1.5px solid var(--bg2);
}

/* Grade bar */
.grade-bars{display:flex;align-items:flex-end;gap:6px;height:90px;margin-bottom:8px;}
.gb-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;}
.gb{width:100%;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--secondary),rgba(0,201,177,.35));position:relative;cursor:pointer;transition:filter .2s;}
.gb:hover{filter:brightness(1.2);}
.gb-lbl{font-size:.65rem;color:var(--text-dim);}

/* Activity line items */
.act-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);}
.act-item:last-child{border-bottom:none;}
.act-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.act-txt{font-size:.84rem;flex:1;}
.act-time{font-size:.7rem;color:var(--text-dim);white-space:nowrap;}

/* Compare bars */
.cmp-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.cmp-name{font-size:.8rem;width:70px;flex-shrink:0;}
.cmp-track{flex:1;height:8px;background:var(--surface2);border-radius:10px;overflow:hidden;}
.cmp-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .8s;}
.cmp-fill.other{background:var(--surface2);border:1px solid var(--border2);}
.cmp-val{font-size:.76rem;color:var(--text-dim);width:34px;text-align:right;}

/* Search bar */
.search-bar{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:8px 14px;
  flex:1;max-width:320px;
}
.search-bar input{background:none;border:none;color:var(--text);font-family:var(--font-body);font-size:.86rem;width:100%;outline:none;}
.search-bar input::placeholder{color:var(--text-dim);}

/* ════════════════════════════════════════════════
   ORG DASHBOARD SPECIFIC
════════════════════════════════════════════════ */
.org-dash-header{
  background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 60%,var(--accent) 100%);
  border-radius:var(--radius);padding:28px 32px;margin-bottom:24px;
  position:relative;overflow:hidden;
}
.org-dash-header::before{
  content:'';position:absolute;right:-40px;top:-40px;
  width:200px;height:200px;border-radius:50%;
  background:rgba(255,255,255,.07);
}
.org-dash-header::after{
  content:'';position:absolute;right:80px;bottom:-60px;
  width:160px;height:160px;border-radius:50%;
  background:rgba(255,255,255,.05);
}
.org-name-display{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--primary-fg);margin-bottom:4px;}
.org-meta-display{font-size:.84rem;color:var(--primary-fg);opacity:.8;margin-bottom:14px;}
.org-kpi-row{display:flex;gap:24px;flex-wrap:wrap;}
.org-kpi{background:rgba(255,255,255,.15);backdrop-filter:blur(4px);border-radius:var(--radius-sm);padding:10px 18px;text-align:center;}
.org-kpi-val{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:#fff;}
.org-kpi-lbl{font-size:.68rem;color:rgba(255,255,255,.8);}

.quick-action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.quick-action{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;text-align:center;
  cursor:pointer;transition:all .25s;
}
.quick-action:hover{transform:translateY(-4px);border-color:var(--card-hover-border);box-shadow:var(--shadow);}
.qa-icon{font-size:1.8rem;margin-bottom:8px;}
.qa-label{font-size:.82rem;font-weight:600;margin-bottom:3px;}
.qa-desc{font-size:.7rem;color:var(--text-dim);}

.revenue-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;
}
.rev-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:.84rem;}
.rev-row:last-child{border-bottom:none;}
.rev-label{color:var(--text-dim);}
.rev-val{font-weight:700;}

/* ════════════════════════════════════════════════
   MEMBER EDIT / PROFILE MODAL EXTRAS
════════════════════════════════════════════════ */
.member-detail-header{
  display:flex;gap:16px;align-items:center;
  padding:20px;background:var(--surface);
  border-radius:var(--radius-sm);margin-bottom:20px;
}
.member-detail-avatar{
  width:60px;height:60px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;font-weight:700;color:var(--primary-fg);
  border:3px solid var(--border2);cursor:pointer;position:relative;
}
.member-detail-avatar::after{
  content:'📷';position:absolute;inset:0;border-radius:50%;
  background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;
  font-size:.9rem;opacity:0;transition:.2s;
}
.member-detail-avatar:hover::after{opacity:1;}
.member-status-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}

.form-section-title{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-dim);font-weight:600;margin:16px 0 10px;
  display:flex;align-items:center;gap:8px;
}
.form-section-title::after{content:'';flex:1;height:1px;background:var(--border);}

.modal-box.wide{width:720px;}
.modal-box.xl{width:860px;}

.perm-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.perm-check{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:var(--radius-sm);
  background:var(--surface);font-size:.82rem;cursor:pointer;
}
.perm-check input{accent-color:var(--primary);}

.activity-log{max-height:200px;overflow-y:auto;}
.log-item{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:.78rem;}
.log-item:last-child{border-bottom:none;}
.log-time{color:var(--text-dim);white-space:nowrap;flex-shrink:0;}
.log-txt{flex:1;}
</style>