/* ============================================
   COZY CHAT v2 — Phase 1: Identity System
   Desktop-first, Velvet Dusk theme
   ============================================ */
:root {
  --bg: #0B0A12; --bg2: #0F0E18;
  --surface: #15132A; --surface2: #1D1A35; --surface3: #262240; --surface4: #302B50;
  --primary: #8B5CF6; --primary-soft: #7C3AED;
  --primary-glow: rgba(139,92,246,0.25); --primary-subtle: rgba(139,92,246,0.08);
  --accent: #F472B6; --accent-glow: rgba(244,114,182,0.2);
  --warm: #FBBF24; --emerald: #34D399; --danger: #FB7185;
  --text: #F1EEFF; --text2: #A89EC8; --text3: #6B5F8A; --text4: #4A4265;
  --card-gradient: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(244,114,182,0.04));
  --glow-sm: 0 2px 12px rgba(139,92,246,0.12);
  --glow-md: 0 4px 24px rgba(139,92,246,0.15);
  --glow-lg: 0 8px 40px rgba(139,92,246,0.18);
  --r: 16px; --r-lg: 24px; --r-xl: 32px;
  /* Profile banner — overridden by theme */
  --banner: linear-gradient(135deg,#1a1040,#3b1d6e 40%,#6d28d9 70%,#a855f7);
  --banner-accent1: rgba(244,114,182,0.3); --banner-accent2: rgba(251,191,36,0.15);
}

/* === 12 Profile Color Themes === */
.theme-velvet   { --banner:linear-gradient(135deg,#1a1040,#3b1d6e 40%,#6d28d9 70%,#a855f7); --banner-accent1:rgba(244,114,182,0.3); --banner-accent2:rgba(251,191,36,0.15); }
.theme-ocean    { --banner:linear-gradient(135deg,#0a1628,#0c2d5a 40%,#0e6fa0 70%,#38bdf8); --banner-accent1:rgba(52,211,153,0.3); --banner-accent2:rgba(56,189,248,0.15); }
.theme-sunset   { --banner:linear-gradient(135deg,#2a0a0a,#7c2d12 40%,#ea580c 70%,#fb923c); --banner-accent1:rgba(251,191,36,0.35); --banner-accent2:rgba(244,114,182,0.15); }
.theme-forest   { --banner:linear-gradient(135deg,#052e16,#14532d 40%,#16a34a 70%,#4ade80); --banner-accent1:rgba(251,191,36,0.25); --banner-accent2:rgba(52,211,153,0.2); }
.theme-rose     { --banner:linear-gradient(135deg,#1a0a14,#4a0e2c 40%,#be185d 70%,#f472b6); --banner-accent1:rgba(244,114,182,0.35); --banner-accent2:rgba(139,92,246,0.15); }
.theme-golden   { --banner:linear-gradient(135deg,#1a1000,#713f12 40%,#ca8a04 70%,#facc15); --banner-accent1:rgba(251,191,36,0.35); --banner-accent2:rgba(234,88,12,0.15); }
.theme-aurora   { --banner:linear-gradient(135deg,#0a1a2a,#164e63 40%,#0891b2 70%,#22d3ee); --banner-accent1:rgba(139,92,246,0.3); --banner-accent2:rgba(52,211,153,0.2); }
.theme-cherry   { --banner:linear-gradient(135deg,#1a0810,#5b1534 40%,#e11d48 70%,#fda4af); --banner-accent1:rgba(251,146,60,0.25); --banner-accent2:rgba(244,114,182,0.2); }
.theme-neon     { --banner:linear-gradient(135deg,#0a0a1a,#1e1b4b 40%,#4f46e5 70%,#818cf8); --banner-accent1:rgba(56,189,248,0.3); --banner-accent2:rgba(168,85,247,0.2); }
.theme-honey    { --banner:linear-gradient(135deg,#1a1208,#78350f 40%,#b45309 70%,#f59e0b); --banner-accent1:rgba(234,88,12,0.3); --banner-accent2:rgba(251,191,36,0.2); }
.theme-lavender { --banner:linear-gradient(135deg,#120e20,#3b1c6e 40%,#7e22ce 70%,#c084fc); --banner-accent1:rgba(196,181,253,0.3); --banner-accent2:rgba(244,114,182,0.15); }
.theme-ember    { --banner:linear-gradient(135deg,#1a0505,#7f1d1d 40%,#dc2626 70%,#f87171); --banner-accent1:rgba(251,146,60,0.3); --banner-accent2:rgba(139,92,246,0.15); }

/* === Reset === */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:4px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:4px}
button{border:none;outline:none;cursor:pointer;font-family:inherit}
input,textarea{border:none;outline:none;font-family:inherit;background:var(--surface2);color:var(--text);border-radius:var(--r);padding:12px 16px;font-size:14px;transition:all 0.2s;width:100%}
input:focus,textarea:focus{background:var(--surface3);box-shadow:0 0 0 2px var(--primary-glow)}
textarea{resize:vertical;min-height:80px}
select{background:var(--surface2);color:var(--text);border:none;border-radius:var(--r);padding:10px 14px;font-family:inherit;font-size:14px;outline:none;cursor:pointer}

/* === Ambient === */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.35;animation:orbFloat 20s ease-in-out infinite}
.o1{width:400px;height:400px;background:rgba(139,92,246,0.12);top:-100px;left:-80px}
.o2{width:350px;height:350px;background:rgba(244,114,182,0.08);bottom:-80px;right:-60px;animation-delay:-7s}
.o3{width:280px;height:280px;background:rgba(251,191,36,0.05);top:35%;left:55%;animation-delay:-14s}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.1)}66%{transform:translate(-20px,30px) scale(0.9)}}

/* === App Shell — Desktop First === */
.app{position:relative;z-index:1;height:100%;display:flex;flex-direction:row;overflow:hidden}
.header{position:fixed;top:0;left:0;right:0;z-index:150;display:flex;align-items:center;justify-content:space-between;padding:14px 40px;background:rgba(11,10,18,0.8);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(139,92,246,0.06)}
.header-logo{font-family:'Quicksand',sans-serif;font-size:26px;font-weight:700;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.header-actions{display:flex;gap:8px;align-items:center}
.header-btn{width:40px;height:40px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:18px;position:relative;transition:all 0.2s;color:var(--text2)}
.header-btn:hover{background:var(--surface2);color:var(--text);transform:scale(1.05)}
.header-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--accent);border-radius:50%;border:2px solid var(--bg)}

/* Sidebar Nav — Desktop Default */
.sidebar-nav{position:fixed;left:0;top:0;bottom:0;width:240px;z-index:140;display:flex;flex-direction:column;padding:76px 14px 20px;border-right:1px solid rgba(139,92,246,0.06);background:rgba(11,10,18,0.95);gap:4px}
.nav-item{display:flex;align-items:center;gap:14px;padding:13px 18px;border-radius:var(--r);font-size:15px;font-weight:600;color:var(--text3);background:transparent;transition:all 0.2s;width:100%}
.nav-item .nav-icon{font-size:20px;width:24px;text-align:center}
.nav-item.active{color:var(--primary);background:var(--primary-subtle)}
.nav-item:hover:not(.active){background:rgba(139,92,246,0.04);color:var(--text2)}

/* Main Content */
.main-content{flex:1;margin-left:240px;margin-top:58px;overflow:hidden}
.page{display:none;height:100%;overflow-y:auto;width:100%;padding:32px 48px 40px;scroll-behavior:smooth}
.page.active{display:block;animation:pageIn 0.25s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* === Shared Components === */
.section-label{font-family:'Quicksand',sans-serif;font-size:12px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1.8px;margin:24px 0 12px}
.card{background:var(--card-gradient);border:1px solid rgba(139,92,246,0.08);border-radius:var(--r-lg);padding:20px;margin-bottom:16px;transition:all 0.3s}
.card:hover{border-color:rgba(139,92,246,0.15);box-shadow:var(--glow-sm)}

/* Feed/DM shared */
.search-bar{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:var(--r);padding:0 16px;margin-bottom:16px;border:1px solid rgba(139,92,246,0.06);transition:all 0.2s}
.search-bar:focus-within{border-color:rgba(139,92,246,0.2);box-shadow:var(--glow-sm)}
.search-bar span{color:var(--text3);font-size:16px}
.search-bar input{flex:1;background:transparent;padding:12px 0;border-radius:0;width:auto}
.search-bar input:focus{box-shadow:none}
.feed-tabs{display:flex;gap:4px;margin-bottom:20px;background:var(--surface);border-radius:var(--r);padding:4px}
.feed-tab{flex:1;padding:10px 0;border-radius:12px;font-size:13px;font-weight:600;color:var(--text3);background:transparent;transition:all 0.25s;text-align:center}
.feed-tab.active{background:linear-gradient(135deg,var(--primary),var(--primary-soft));color:white;box-shadow:0 2px 12px rgba(139,92,246,0.3)}
.feed-tab:not(.active):hover{color:var(--text2)}
.feed-panel{display:none} .feed-panel.active{display:block;animation:pageIn 0.2s ease}

/* Empty States */
.empty-state{text-align:center;padding:60px 24px}
.empty-glow{width:80px;height:80px;margin:0 auto 20px;border-radius:50%;background:var(--card-gradient);border:1px solid rgba(139,92,246,0.1);display:flex;align-items:center;justify-content:center;font-size:36px;box-shadow:var(--glow-md);animation:emptyPulse 3s ease-in-out infinite}
@keyframes emptyPulse{0%,100%{box-shadow:var(--glow-md);transform:scale(1)}50%{box-shadow:var(--glow-lg);transform:scale(1.05)}}
.empty-title{font-family:'Quicksand',sans-serif;font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px}
.empty-desc{font-size:14px;color:var(--text3);line-height:1.5;max-width:280px;margin:0 auto}
.empty-action{margin-top:20px;display:inline-flex;align-items:center;gap:6px;padding:10px 24px;border-radius:var(--r);background:linear-gradient(135deg,var(--primary),var(--primary-soft));color:white;font-size:13px;font-weight:600;box-shadow:0 4px 16px rgba(139,92,246,0.3);transition:all 0.2s}
.empty-action:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(139,92,246,0.4)}

/* FAB */
.fab{position:fixed;bottom:32px;right:32px;z-index:90;width:52px;height:52px;border-radius:50%;font-size:20px;background:linear-gradient(135deg,var(--primary),var(--accent));color:white;display:none;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(139,92,246,0.4);transition:all 0.2s}
.fab:hover{transform:scale(1.08) rotate(5deg);box-shadow:0 6px 28px rgba(139,92,246,0.5)}

/* Toast */
.toast-container{position:fixed;top:76px;right:20px;z-index:500;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--surface3);color:var(--text);padding:12px 20px;border-radius:var(--r);font-size:13px;font-weight:500;box-shadow:var(--glow-md);border:1px solid rgba(139,92,246,0.12);animation:toastIn 0.3s ease,toastOut 0.3s ease 2.7s forwards;backdrop-filter:blur(12px)}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateY(-10px)}}

/* ============================================
   PROFILE CARD — The Hero
   ============================================ */
/* Home Page Grid */
.home-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.home-full{grid-column:1/-1}
.feed-page-inner,.dms-page-inner{max-width:800px}
@media(max-width:960px){.home-layout{grid-template-columns:1fr}}
.profile-banner-desktop{height:180px}
@media(max-width:1023px){.profile-banner-desktop{height:140px}}

.profile-card{background:var(--surface);border-radius:var(--r-xl);overflow:hidden;border:1px solid rgba(139,92,246,0.08);box-shadow:var(--glow-md);transition:box-shadow 0.3s}
.profile-card:hover{box-shadow:var(--glow-lg)}
.profile-banner{height:140px;position:relative;overflow:hidden;background:var(--banner)}
.profile-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--surface) 100%)}
.banner-shimmer{position:absolute;inset:0;opacity:0.3;background:radial-gradient(ellipse at 30% 50%,var(--banner-accent1) 0%,transparent 60%),radial-gradient(ellipse at 70% 30%,var(--banner-accent2) 0%,transparent 50%);animation:shimmerMove 8s ease-in-out infinite}
@keyframes shimmerMove{0%,100%{opacity:0.3;transform:translateX(0)}50%{opacity:0.5;transform:translateX(-10px)}}

.profile-top{display:flex;align-items:flex-end;gap:16px;padding:0 24px;margin-top:-44px;position:relative;z-index:2}
.profile-avatar{width:88px;height:88px;border-radius:50%;font-size:40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--surface2),var(--surface3));border:3px solid var(--surface);box-shadow:var(--glow-md);flex-shrink:0;cursor:pointer;transition:transform 0.2s}
.profile-avatar:hover{transform:scale(1.05)}
.profile-meta{flex:1;padding-bottom:8px;min-width:0}
.profile-name{font-family:'Quicksand',sans-serif;font-size:24px;font-weight:700;color:var(--text);line-height:1.2}
.profile-handle{font-size:13px;color:var(--text3);margin-top:2px}
.profile-pronouns{font-size:11px;color:var(--text4);margin-top:2px}

.profile-body{padding:12px 24px 24px}

/* Status Presence */
.presence{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600;margin-bottom:12px}
.presence.online{background:rgba(52,211,153,0.1);color:var(--emerald)}
.presence.idle{background:rgba(251,191,36,0.1);color:var(--warm)}
.presence.dnd{background:rgba(251,113,133,0.1);color:var(--danger)}
.presence.custom{background:rgba(139,92,246,0.1);color:var(--primary)}
.presence-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.presence.online .presence-dot{background:var(--emerald);box-shadow:0 0 6px var(--emerald)}
.presence.idle .presence-dot{background:var(--warm);box-shadow:0 0 6px var(--warm)}
.presence.dnd .presence-dot{background:var(--danger);box-shadow:0 0 6px var(--danger)}
.presence.custom .presence-dot{background:var(--primary);box-shadow:0 0 6px var(--primary)}

.profile-bio{font-size:14px;color:var(--text2);line-height:1.55;margin-bottom:14px}
.profile-stats{display:flex;gap:24px;margin-bottom:16px}
.profile-stat{font-size:13px;color:var(--text2)}
.profile-stat strong{color:var(--text);font-weight:700;margin-right:3px}
.profile-actions{display:flex;gap:10px}
.profile-btn{flex:1;padding:11px 0;border-radius:var(--r);font-size:13px;font-weight:600;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:6px}
.profile-btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-soft));color:white;box-shadow:0 4px 16px rgba(139,92,246,0.3)}
.profile-btn.primary:hover{box-shadow:0 6px 24px rgba(139,92,246,0.4);transform:translateY(-1px)}
.profile-btn.secondary{background:var(--surface2);color:var(--text2)}
.profile-btn.secondary:hover{background:var(--surface3);color:var(--text)}

/* === Currently Status === */
.currently-section{margin-bottom:20px}
.currently-items{display:flex;flex-wrap:wrap;gap:8px}
.currently-item{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;background:var(--surface2);border:1px solid rgba(139,92,246,0.06);font-size:12px;color:var(--text2);transition:all 0.2s}
.currently-item:hover{border-color:rgba(139,92,246,0.15)}
.currently-icon{font-size:14px}
.currently-label{color:var(--text3);font-weight:600}
.currently-value{color:var(--text)}

/* === Interest Stars === */
.stars-section{margin-bottom:20px}
.stars-grid{display:flex;flex-wrap:wrap;gap:6px}
.star-tag{padding:5px 14px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid;transition:all 0.2s}
.star-tag:nth-child(6n+1){background:rgba(139,92,246,0.1);color:#a78bfa;border-color:rgba(139,92,246,0.2)}
.star-tag:nth-child(6n+2){background:rgba(244,114,182,0.1);color:#f9a8d4;border-color:rgba(244,114,182,0.2)}
.star-tag:nth-child(6n+3){background:rgba(251,191,36,0.1);color:#fcd34d;border-color:rgba(251,191,36,0.2)}
.star-tag:nth-child(6n+4){background:rgba(52,211,153,0.1);color:#6ee7b7;border-color:rgba(52,211,153,0.2)}
.star-tag:nth-child(6n+5){background:rgba(56,189,248,0.1);color:#7dd3fc;border-color:rgba(56,189,248,0.2)}
.star-tag:nth-child(6n+6){background:rgba(251,146,60,0.1);color:#fdba74;border-color:rgba(251,146,60,0.2)}

/* === Zodiac + Mood === */
.zodiac-mood{display:flex;gap:12px;margin-bottom:20px}
.zm-badge{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r);background:var(--surface2);border:1px solid rgba(139,92,246,0.06);font-size:12px;font-weight:600;color:var(--text2)}
.zm-badge span:first-child{font-size:18px}

/* === Top 5 Friends === */
.top-friends{margin-bottom:20px}
.friends-row{display:flex;gap:12px}
.friend-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:transform 0.2s}
.friend-item:hover{transform:translateY(-2px)}
.friend-avatar{width:48px;height:48px;border-radius:50%;font-size:22px;display:flex;align-items:center;justify-content:center;background:var(--surface3);border:2px solid rgba(139,92,246,0.15)}
.friend-name{font-size:10px;color:var(--text3);font-weight:600;max-width:54px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* === Profile Song (Spotify) === */
.profile-song{margin-bottom:20px}
.spotify-embed{border-radius:var(--r);overflow:hidden;background:var(--surface2);border:1px solid rgba(139,92,246,0.06)}
.spotify-embed iframe{display:block;width:100%;border:none}
.song-placeholder{padding:16px;text-align:center;color:var(--text3);font-size:13px;cursor:pointer;transition:all 0.2s}
.song-placeholder:hover{color:var(--text2);background:var(--surface3)}

/* === Quick Stats === */
.quick-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.stat-card{background:var(--card-gradient);border:1px solid rgba(139,92,246,0.08);border-radius:var(--r-lg);padding:18px 14px;text-align:center;transition:all 0.3s}
.stat-card:hover{border-color:rgba(139,92,246,0.2);box-shadow:var(--glow-sm);transform:translateY(-2px)}
.stat-icon{font-size:24px;margin-bottom:6px}
.stat-value{font-family:'Quicksand',sans-serif;font-size:24px;font-weight:700;color:var(--text)}
.stat-label{font-size:11px;color:var(--text3);margin-top:2px;font-weight:600}

/* ============================================
   EDIT PROFILE OVERLAY
   ============================================ */
.overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px)}
.overlay.open{display:flex;animation:fadeIn 0.2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.overlay-panel{background:var(--bg2);border:1px solid rgba(139,92,246,0.1);border-radius:var(--r-xl);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;padding:28px;box-shadow:0 24px 80px rgba(0,0,0,0.5);animation:slideUp 0.3s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.overlay-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.overlay-title{font-family:'Quicksand',sans-serif;font-size:22px;font-weight:700}
.overlay-close{width:36px;height:36px;border-radius:50%;background:var(--surface2);color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:18px;transition:all 0.2s}
.overlay-close:hover{background:var(--surface3);color:var(--text)}

.form-group{margin-bottom:18px}
.form-label{font-size:12px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;display:block}
.form-row{display:flex;gap:12px}
.form-row>*{flex:1}

/* Theme Picker */
.theme-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:8px}
.theme-swatch{height:36px;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:all 0.2s;position:relative}
.theme-swatch:hover{transform:scale(1.1);border-color:rgba(255,255,255,0.3)}
.theme-swatch.selected{border-color:white;box-shadow:0 0 12px rgba(255,255,255,0.3)}
.theme-swatch.selected::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:white;font-size:14px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,0.5)}
.ts-velvet{background:linear-gradient(135deg,#6d28d9,#a855f7)}
.ts-ocean{background:linear-gradient(135deg,#0e6fa0,#38bdf8)}
.ts-sunset{background:linear-gradient(135deg,#ea580c,#fb923c)}
.ts-forest{background:linear-gradient(135deg,#16a34a,#4ade80)}
.ts-rose{background:linear-gradient(135deg,#be185d,#f472b6)}
.ts-golden{background:linear-gradient(135deg,#ca8a04,#facc15)}
.ts-aurora{background:linear-gradient(135deg,#0891b2,#22d3ee)}
.ts-cherry{background:linear-gradient(135deg,#e11d48,#fda4af)}
.ts-neon{background:linear-gradient(135deg,#4f46e5,#818cf8)}
.ts-honey{background:linear-gradient(135deg,#b45309,#f59e0b)}
.ts-lavender{background:linear-gradient(135deg,#7e22ce,#c084fc)}
.ts-ember{background:linear-gradient(135deg,#dc2626,#f87171)}

/* Emoji Picker Grid */
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;max-height:180px;overflow-y:auto;padding:8px;background:var(--surface);border-radius:var(--r);margin-top:6px}
.emoji-opt{font-size:24px;text-align:center;cursor:pointer;padding:6px;border-radius:8px;transition:all 0.15s}
.emoji-opt:hover{background:var(--surface3);transform:scale(1.15)}
.emoji-opt.selected{background:var(--primary-subtle);box-shadow:0 0 0 2px var(--primary)}

/* Stars Picker */
.stars-picker{display:flex;flex-wrap:wrap;gap:6px;max-height:200px;overflow-y:auto;padding:8px;background:var(--surface);border-radius:var(--r);margin-top:6px}
.star-option{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--surface3);color:var(--text3);background:transparent;transition:all 0.2s}
.star-option:hover{border-color:var(--primary);color:var(--text2)}
.star-option.selected{background:var(--primary-subtle);border-color:var(--primary);color:var(--primary)}

/* Zodiac Picker */
.zodiac-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:6px}
.zodiac-opt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:all 0.2s;font-size:10px;color:var(--text3)}
.zodiac-opt span:first-child{font-size:22px}
.zodiac-opt:hover{background:var(--surface2);border-color:rgba(139,92,246,0.15)}
.zodiac-opt.selected{background:var(--primary-subtle);border-color:var(--primary);color:var(--primary)}

/* Presence Picker */
.presence-picker{display:flex;gap:8px;flex-wrap:wrap}
.presence-opt{padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--surface3);color:var(--text3);background:transparent;transition:all 0.2s}
.presence-opt:hover{border-color:var(--primary);color:var(--text2)}
.presence-opt.selected{border-color:var(--primary);color:var(--primary);background:var(--primary-subtle)}

/* Save Button */
.btn-save{width:100%;padding:14px;border-radius:var(--r);background:linear-gradient(135deg,var(--primary),var(--primary-soft));color:white;font-size:15px;font-weight:700;transition:all 0.2s;box-shadow:0 4px 16px rgba(139,92,246,0.3);margin-top:8px}
.btn-save:hover{box-shadow:0 6px 24px rgba(139,92,246,0.4);transform:translateY(-1px)}

/* ============================================
   RESPONSIVE — Tablet
   ============================================ */
@media(max-width:1023px){
  .sidebar-nav{display:none}
  .main-content{margin-left:0;margin-top:58px}
  .header{padding:14px 20px}
  /* Show bottom nav on tablet/mobile */
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:140;justify-content:space-around;padding:8px 12px;padding-bottom:max(8px,env(safe-area-inset-bottom));background:rgba(11,10,18,0.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid rgba(139,92,246,0.06)}
  .bottom-nav .nav-item{flex-direction:column;gap:2px;padding:6px 0;font-size:10px;min-width:56px}
  .bottom-nav .nav-item .nav-icon{font-size:22px}
  .bottom-nav .nav-item.active::after{content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:20px;height:3px;background:var(--primary);border-radius:3px}
  .page{padding:20px 16px 100px}
  .fab{bottom:80px;right:16px}
}
/* Hide bottom nav on desktop */
@media(min-width:1024px){.bottom-nav{display:none}}
@media(max-width:540px){
  .overlay-panel{margin:12px;max-height:calc(100vh - 24px)}
  .theme-picker{grid-template-columns:repeat(4,1fr)}
  .emoji-grid{grid-template-columns:repeat(6,1fr)}
  .zodiac-grid{grid-template-columns:repeat(4,1fr)}
  .quick-stats{grid-template-columns:1fr 1fr}
}
@media(min-width:1400px){
  .sidebar-nav{width:280px}
  .main-content{margin-left:280px}
  .page{padding:36px 56px 40px}
  .profile-banner{height:200px}
}

/* ============================================
   PHASE 2 — Feed & Posting
   ============================================ */

/* Post Cards */
.post-card{background:var(--surface);border:1px solid rgba(139,92,246,0.06);border-radius:var(--r-lg);padding:20px;margin-bottom:14px;transition:all 0.2s}
.post-card:hover{border-color:rgba(139,92,246,0.12);background:var(--surface2)}
.post-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.post-avatar{width:44px;height:44px;border-radius:50%;font-size:22px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--surface3),var(--surface4));flex-shrink:0;cursor:pointer}
.post-author{flex:1;min-width:0}
.post-author-name{font-weight:700;font-size:14px;color:var(--text)}
.post-author-meta{font-size:12px;color:var(--text3)}
.post-author-meta span{margin-right:6px}
.post-body{font-size:15px;line-height:1.6;color:var(--text);margin-bottom:14px;word-wrap:break-word}
.post-body .hashtag{color:var(--primary);font-weight:600;cursor:pointer}
.post-body .mention{color:var(--accent);font-weight:600;cursor:pointer}

/* Post Actions Row */
.post-actions{display:flex;align-items:center;gap:4px}
.post-action{display:flex;align-items:center;gap:5px;padding:7px 14px;border-radius:20px;font-size:13px;color:var(--text3);background:transparent;transition:all 0.2s;font-weight:500;position:relative}
.post-action:hover{background:rgba(139,92,246,0.06);color:var(--text2)}
.post-action .action-icon{font-size:16px;transition:transform 0.2s}
.post-action.liked{color:var(--accent)}
.post-action.liked .action-icon{animation:likepop 0.35s ease}
.post-action.bookmarked{color:var(--warm)}
.post-action.reposted{color:var(--emerald)}
@keyframes likepop{0%{transform:scale(1)}30%{transform:scale(1.4)}60%{transform:scale(0.9)}100%{transform:scale(1)}}

/* Reactions Popup */
.reactions-popup{display:none;position:absolute;bottom:100%;left:0;background:var(--surface3);border:1px solid rgba(139,92,246,0.15);border-radius:24px;padding:6px 8px;gap:2px;box-shadow:var(--glow-md);z-index:10;white-space:nowrap}
.reactions-popup.show{display:flex;animation:fadeIn 0.15s ease}
.reaction-opt{font-size:20px;padding:4px 6px;border-radius:8px;cursor:pointer;background:transparent;transition:transform 0.15s}
.reaction-opt:hover{transform:scale(1.3)}
.post-reactions{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}
.post-reaction{display:flex;align-items:center;gap:3px;padding:3px 10px;border-radius:16px;font-size:12px;background:rgba(139,92,246,0.08);border:1px solid rgba(139,92,246,0.12);color:var(--text2);cursor:pointer;transition:all 0.2s}
.post-reaction:hover{background:rgba(139,92,246,0.15)}
.post-reaction.mine{border-color:var(--primary);background:rgba(139,92,246,0.15)}

/* Compose Modal */
.compose-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding-top:80px;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px)}
.compose-overlay.open{display:flex;animation:fadeIn 0.2s ease}
.compose-panel{background:var(--bg2);border:1px solid rgba(139,92,246,0.1);border-radius:var(--r-xl);width:100%;max-width:580px;padding:24px;box-shadow:0 24px 80px rgba(0,0,0,0.5);animation:slideUp 0.3s ease}
.compose-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.compose-title{font-family:'Quicksand',sans-serif;font-size:18px;font-weight:700}
.compose-close{width:36px;height:36px;border-radius:50%;background:var(--surface2);color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:18px;transition:all 0.2s}
.compose-close:hover{background:var(--surface3);color:var(--text)}
.compose-body{display:flex;gap:14px}
.compose-avatar{width:44px;height:44px;border-radius:50%;font-size:22px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--surface2),var(--surface3));flex-shrink:0}
.compose-input-wrap{flex:1;display:flex;flex-direction:column}
.compose-textarea{background:transparent;border:none;border-radius:0;padding:0;font-size:16px;line-height:1.5;color:var(--text);resize:none;min-height:120px;outline:none}
.compose-textarea::placeholder{color:var(--text4)}
.compose-textarea:focus{box-shadow:none}
.compose-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid rgba(139,92,246,0.06)}
.compose-tools{display:flex;gap:4px}
.compose-tool{width:36px;height:36px;border-radius:50%;background:transparent;color:var(--text3);font-size:18px;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.compose-tool:hover{background:var(--surface2);color:var(--text2)}
.char-counter{font-size:12px;color:var(--text3);font-weight:600;display:flex;align-items:center;gap:10px}
.char-counter.warn{color:var(--warm)}
.char-counter.danger{color:var(--danger)}
.char-ring{width:28px;height:28px;position:relative}
.char-ring svg{transform:rotate(-90deg)}
.char-ring circle{fill:none;stroke-width:3}
.char-ring .bg{stroke:var(--surface3)}
.char-ring .fg{stroke:var(--primary);transition:stroke-dashoffset 0.2s,stroke 0.2s}
.compose-btn{padding:10px 24px;border-radius:20px;background:linear-gradient(135deg,var(--primary),var(--primary-soft));color:white;font-size:14px;font-weight:700;transition:all 0.2s;opacity:0.5;pointer-events:none}
.compose-btn.active{opacity:1;pointer-events:auto;box-shadow:0 4px 16px rgba(139,92,246,0.3)}
.compose-btn.active:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(139,92,246,0.4)}

/* Reply Thread */
.reply-section{margin-top:12px;padding-top:12px;border-top:1px solid rgba(139,92,246,0.06)}
.reply-input-row{display:flex;gap:10px;align-items:center}
.reply-input{flex:1;padding:10px 14px;font-size:13px;background:var(--surface2);border-radius:20px}
.reply-send{width:34px;height:34px;border-radius:50%;background:var(--primary);color:white;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0}
.reply-send:hover{box-shadow:0 2px 12px rgba(139,92,246,0.3)}
.reply-item{display:flex;gap:10px;padding:10px 0;font-size:13px}
.reply-item .reply-avatar{width:28px;height:28px;border-radius:50%;font-size:13px;display:flex;align-items:center;justify-content:center;background:var(--surface3);flex-shrink:0}
.reply-item .reply-body{flex:1;min-width:0}
.reply-item .reply-author{font-weight:700;color:var(--text);margin-right:6px}
.reply-item .reply-text{color:var(--text2)}
.reply-item .reply-time{font-size:11px;color:var(--text4);margin-top:2px}

/* New Posts Pill */
.new-posts-pill{position:sticky;top:0;z-index:10;text-align:center;padding:8px;display:none}
.new-posts-pill.show{display:block;animation:fadeIn 0.3s ease}
.new-posts-pill button{padding:8px 20px;border-radius:20px;background:var(--primary);color:white;font-size:12px;font-weight:700;box-shadow:0 4px 16px rgba(139,92,246,0.3);transition:all 0.2s}
.new-posts-pill button:hover{transform:translateY(-1px)}

@media(max-width:540px){
  .compose-panel{margin:12px;max-width:none}
  .post-actions{flex-wrap:wrap}
  .post-action{padding:6px 10px;font-size:12px}
}

/* ============================================
   PHASE 3 — DM System
   ============================================ */

/* Contact List */
.dm-contacts{display:flex;flex-direction:column;gap:2px}
.dm-contact{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r);cursor:pointer;transition:all 0.2s;position:relative}
.dm-contact:hover{background:var(--surface2)}
.dm-contact.active{background:var(--primary-subtle);border:1px solid rgba(139,92,246,0.12)}
.dm-contact-avatar{width:48px;height:48px;border-radius:50%;font-size:24px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--surface2),var(--surface3));flex-shrink:0;position:relative}
.dm-contact-status{position:absolute;bottom:1px;right:1px;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg);background:var(--emerald)}
.dm-contact-status.idle{background:var(--warm)}
.dm-contact-status.offline{background:var(--text4)}
.dm-contact-info{flex:1;min-width:0}
.dm-contact-name{font-weight:700;font-size:14px;color:var(--text);display:flex;align-items:center;gap:6px}
.dm-contact-preview{font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.dm-contact-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.dm-contact-time{font-size:11px;color:var(--text4)}
.dm-unread{width:20px;height:20px;border-radius:50%;background:var(--primary);color:white;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* New Chat FAB */
.dm-new-btn{position:absolute;bottom:20px;right:20px;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));color:white;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(139,92,246,0.4);transition:all 0.2s;z-index:10}
.dm-new-btn:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(139,92,246,0.5)}

/* Chat View */
.chat-view{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;background:var(--bg)}
.chat-view.open{display:flex;animation:fadeIn 0.2s ease}
@media(min-width:1024px){.chat-view{left:240px}}
@media(min-width:1400px){.chat-view{left:280px}}

.chat-header{display:flex;align-items:center;gap:14px;padding:14px 20px;background:rgba(11,10,18,0.9);backdrop-filter:blur(24px);border-bottom:1px solid rgba(139,92,246,0.06);flex-shrink:0}
.chat-back{width:36px;height:36px;border-radius:50%;background:var(--surface2);color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:16px;transition:all 0.2s;flex-shrink:0}
.chat-back:hover{background:var(--surface3);color:var(--text)}
.chat-header-avatar{width:40px;height:40px;border-radius:50%;font-size:20px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--surface2),var(--surface3));flex-shrink:0}
.chat-header-info{flex:1;min-width:0}
.chat-header-name{font-weight:700;font-size:15px;color:var(--text)}
.chat-header-status{font-size:11px;color:var(--emerald);font-weight:600}
.chat-header-actions{display:flex;gap:6px}
.chat-header-btn{width:36px;height:36px;border-radius:50%;background:var(--surface2);color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:16px;transition:all 0.2s}
.chat-header-btn:hover{background:var(--surface3);color:var(--text)}

/* Chat Theme Picker */
.chat-theme-dropdown{position:absolute;top:60px;right:20px;background:var(--surface3);border:1px solid rgba(139,92,246,0.15);border-radius:var(--r);padding:8px;display:none;z-index:10;box-shadow:var(--glow-md)}
.chat-theme-dropdown.show{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;animation:fadeIn 0.15s ease}
.chat-theme-opt{width:40px;height:28px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:all 0.15s}
.chat-theme-opt:hover{transform:scale(1.1);border-color:rgba(255,255,255,0.3)}
.chat-theme-opt.active{border-color:white}

/* Messages Area */
.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:4px}
.chat-messages.theme-midnight{background:linear-gradient(180deg,#0a0a1a,#0f0e20)}
.chat-messages.theme-aurora{background:linear-gradient(180deg,#0a1a1a,#0f1a2a)}
.chat-messages.theme-rose{background:linear-gradient(180deg,#1a0a14,#1a0f1a)}
.chat-messages.theme-ocean{background:linear-gradient(180deg,#0a1020,#0c1a30)}
.chat-messages.theme-ember{background:linear-gradient(180deg,#1a0a0a,#1a0f0e)}
.chat-messages.theme-forest{background:linear-gradient(180deg,#0a1a0e,#0e1a14)}

.chat-date-divider{text-align:center;padding:12px 0;font-size:11px;color:var(--text4);font-weight:600}

/* Message Bubbles */
.msg-row{display:flex;gap:8px;max-width:80%;animation:msgIn 0.2s ease}
.msg-row.sent{align-self:flex-end;flex-direction:row-reverse}
.msg-row.received{align-self:flex-start}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg-avatar{width:28px;height:28px;border-radius:50%;font-size:14px;display:flex;align-items:center;justify-content:center;background:var(--surface3);flex-shrink:0;align-self:flex-end}
.msg-row.sent .msg-avatar{display:none}
.msg-content{display:flex;flex-direction:column;gap:2px}
.msg-bubble{padding:10px 16px;border-radius:18px;font-size:14px;line-height:1.5;word-wrap:break-word;position:relative}
.msg-row.sent .msg-bubble{background:linear-gradient(135deg,var(--primary),var(--primary-soft));color:white;border-bottom-right-radius:6px}
.msg-row.received .msg-bubble{background:var(--surface2);color:var(--text);border-bottom-left-radius:6px}
.msg-meta{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text4);padding:0 4px}
.msg-row.sent .msg-meta{justify-content:flex-end}
.msg-receipt{font-size:12px}
.msg-receipt.sent{color:var(--text4)}
.msg-receipt.delivered{color:var(--text3)}
.msg-receipt.read{color:var(--primary)}

/* Message Reactions */
.msg-reactions{display:flex;gap:2px;padding:2px 0}
.msg-row.sent .msg-reactions{justify-content:flex-end}
.msg-reaction-badge{font-size:14px;padding:2px 6px;border-radius:12px;background:var(--surface3);border:1px solid rgba(139,92,246,0.1);cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:2px}
.msg-reaction-badge:hover{transform:scale(1.1)}
.msg-reaction-badge .count{font-size:10px;color:var(--text3)}

/* Reaction Picker on Message (long-press) */
.msg-react-bar{display:none;position:absolute;bottom:calc(100% + 4px);background:var(--surface3);border:1px solid rgba(139,92,246,0.15);border-radius:20px;padding:4px 6px;gap:2px;box-shadow:var(--glow-sm);z-index:5;white-space:nowrap}
.msg-react-bar.show{display:flex;animation:fadeIn 0.15s ease}
.msg-row.sent .msg-react-bar{right:0}
.msg-row.received .msg-react-bar{left:0}
.msg-react-opt{font-size:18px;padding:3px 5px;border-radius:6px;cursor:pointer;background:transparent;transition:transform 0.15s}
.msg-react-opt:hover{transform:scale(1.3)}

/* Typing Indicator */
.typing-indicator{display:none;align-self:flex-start;padding:12px 18px;background:var(--surface2);border-radius:18px;border-bottom-left-radius:6px;margin-top:4px}
.typing-indicator.show{display:flex;gap:4px;align-items:center;animation:fadeIn 0.2s ease}
.typing-dot{width:7px;height:7px;border-radius:50%;background:var(--text3);animation:typingBounce 1.4s infinite}
.typing-dot:nth-child(2){animation-delay:0.2s}
.typing-dot:nth-child(3){animation-delay:0.4s}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}

/* Chat Input */
.chat-input-area{display:flex;align-items:flex-end;gap:10px;padding:14px 20px;background:rgba(11,10,18,0.9);backdrop-filter:blur(24px);border-top:1px solid rgba(139,92,246,0.06);flex-shrink:0}
.chat-input{flex:1;padding:12px 18px;border-radius:24px;font-size:14px;background:var(--surface2);resize:none;max-height:120px;min-height:44px;line-height:1.4}
.chat-input:focus{box-shadow:0 0 0 2px var(--primary-glow)}
.chat-send{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-soft));color:white;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0;opacity:0.5;pointer-events:none}
.chat-send.active{opacity:1;pointer-events:auto}
.chat-send.active:hover{box-shadow:0 4px 16px rgba(139,92,246,0.3);transform:scale(1.05)}

/* Vanish mode indicator */
.vanish-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:12px;font-size:10px;font-weight:700;background:rgba(139,92,246,0.15);color:var(--primary);margin-left:6px}

@media(max-width:540px){
  .msg-row{max-width:88%}
  .chat-header{padding:12px 14px}
  .chat-messages{padding:14px}
  .chat-input-area{padding:10px 14px}
}

/* ============================================
   PHASE 4 — Stories & Notes
   ============================================ */

/* Stories Tray */
.stories-tray{display:flex;gap:14px;padding:4px 0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.stories-tray::-webkit-scrollbar{display:none}
.story-item{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;flex-shrink:0;transition:transform 0.2s}
.story-item:hover{transform:translateY(-2px)}
.story-item.add-story .story-ring{background:var(--surface2);border:2px dashed var(--text4)}
.story-item.add-story .story-ring::after{content:'+';position:absolute;bottom:-2px;right:-2px;width:20px;height:20px;border-radius:50%;background:var(--primary);color:white;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg)}
.story-ring{width:60px;height:60px;border-radius:50%;padding:3px;position:relative;background:conic-gradient(var(--primary),var(--accent),var(--warm),var(--primary))}
.story-ring.seen{background:var(--surface3);opacity:0.6}
.story-ring-inner{width:100%;height:100%;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:26px}
.story-name{font-size:10px;color:var(--text3);font-weight:600;max-width:64px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Notes (above DM avatars) */
.dm-contact-note{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--surface3);border:1px solid rgba(139,92,246,0.15);border-radius:12px;padding:3px 10px;font-size:10px;color:var(--text2);white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis;z-index:2;animation:noteBounce 0.3s ease}
@keyframes noteBounce{from{opacity:0;transform:translateX(-50%) translateY(4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.dm-contact-avatar{position:relative}

/* Story Viewer — Fullscreen */
.story-viewer{position:fixed;inset:0;z-index:300;display:none;background:#000;flex-direction:column;align-items:center;justify-content:center}
.story-viewer.open{display:flex;animation:fadeIn 0.2s ease}
.story-progress{display:flex;gap:3px;padding:8px 12px;position:absolute;top:env(safe-area-inset-top,8px);left:0;right:0;z-index:10}
.story-progress-bar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,0.2);overflow:hidden}
.story-progress-fill{height:100%;background:white;border-radius:3px;width:0%;transition:width 0.1s linear}
.story-progress-fill.complete{width:100%}
.story-header{position:absolute;top:24px;left:0;right:0;display:flex;align-items:center;gap:12px;padding:8px 16px;z-index:10}
.story-header-avatar{width:36px;height:36px;border-radius:50%;font-size:18px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.15)}
.story-header-name{font-weight:700;font-size:14px;color:white}
.story-header-time{font-size:11px;color:rgba(255,255,255,0.5)}
.story-close{position:absolute;top:28px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.15);color:white;font-size:18px;display:flex;align-items:center;justify-content:center;z-index:10;transition:all 0.2s}
.story-close:hover{background:rgba(255,255,255,0.25)}
.story-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;user-select:none}
.story-card{width:100%;max-width:420px;height:100%;max-height:750px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 32px;text-align:center;position:relative;overflow:hidden}
.story-card-text{font-family:'Quicksand',sans-serif;font-size:28px;font-weight:700;color:white;line-height:1.4;text-shadow:0 2px 12px rgba(0,0,0,0.3);z-index:2;word-wrap:break-word;max-width:100%}
.story-sticker{position:absolute;font-size:48px;z-index:3;pointer-events:none}
.story-tap-left{position:absolute;left:0;top:0;bottom:80px;width:30%;z-index:5;cursor:pointer}
.story-tap-right{position:absolute;right:0;top:0;bottom:80px;width:70%;z-index:5;cursor:pointer}
.story-reactions-bar{position:absolute;bottom:20px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:10}
.story-react-btn{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.12);font-size:22px;display:flex;align-items:center;justify-content:center;transition:all 0.2s;backdrop-filter:blur(8px)}
.story-react-btn:hover{background:rgba(255,255,255,0.2);transform:scale(1.15)}

/* Story Creator */
.story-creator{position:fixed;inset:0;z-index:250;display:none;flex-direction:column;background:var(--bg)}
.story-creator.open{display:flex;animation:fadeIn 0.2s ease}
.story-creator-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;flex-shrink:0}
.story-creator-title{font-family:'Quicksand',sans-serif;font-size:18px;font-weight:700;color:var(--text)}
.story-creator-actions{display:flex;gap:8px}
.sc-btn{padding:8px 18px;border-radius:20px;font-size:13px;font-weight:600;transition:all 0.2s}
.sc-btn.cancel{background:var(--surface2);color:var(--text2)}
.sc-btn.cancel:hover{background:var(--surface3);color:var(--text)}
.sc-btn.publish{background:linear-gradient(135deg,var(--primary),var(--primary-soft));color:white;box-shadow:0 4px 16px rgba(139,92,246,0.3)}
.sc-btn.publish:hover{transform:translateY(-1px)}
.story-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}
.story-preview-card{width:100%;max-width:380px;height:100%;max-height:600px;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 28px;position:relative;transition:background 0.3s}
.story-text-input{background:transparent;border:none;color:white;font-family:'Quicksand',sans-serif;font-size:26px;font-weight:700;text-align:center;line-height:1.4;resize:none;width:100%;min-height:120px;text-shadow:0 2px 8px rgba(0,0,0,0.3)}
.story-text-input::placeholder{color:rgba(255,255,255,0.4)}
.story-text-input:focus{box-shadow:none;outline:none}
.story-tools{display:flex;gap:8px;padding:14px 20px;flex-shrink:0;flex-wrap:wrap;justify-content:center}
.story-bg-opt{width:36px;height:36px;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:all 0.15s}
.story-bg-opt:hover{transform:scale(1.1)}
.story-bg-opt.active{border-color:white;box-shadow:0 0 12px rgba(255,255,255,0.3)}
.story-sticker-bar{display:flex;gap:4px;padding:0 20px 14px;justify-content:center;flex-wrap:wrap}
.story-sticker-opt{font-size:28px;padding:4px 8px;border-radius:8px;cursor:pointer;background:transparent;transition:transform 0.15s}
.story-sticker-opt:hover{transform:scale(1.2)}

/* Story Poll Sticker */
.story-poll{background:rgba(0,0,0,0.3);border-radius:16px;padding:16px;margin-top:20px;width:100%;max-width:280px;z-index:3;backdrop-filter:blur(8px)}
.story-poll-question{font-size:14px;font-weight:700;color:white;text-align:center;margin-bottom:10px}
.story-poll-options{display:flex;flex-direction:column;gap:6px}
.story-poll-opt{padding:10px 16px;border-radius:12px;background:rgba(255,255,255,0.15);color:white;font-size:13px;font-weight:600;text-align:center;cursor:pointer;transition:all 0.2s;border:1px solid rgba(255,255,255,0.1)}
.story-poll-opt:hover{background:rgba(255,255,255,0.25)}
.story-poll-opt.voted{background:linear-gradient(135deg,var(--primary),var(--accent));border-color:transparent}

@media(min-width:1024px){.story-creator{left:240px}}
@media(min-width:1400px){.story-creator{left:280px}}
@media(max-width:540px){
  .story-card{border-radius:0;max-height:none}
  .story-preview-card{border-radius:16px;max-height:500px}
  .story-card-text{font-size:22px}
}

/* ============================================
   PHASE 5 — Community Spaces
   ============================================ */
.community-header-row{display:flex;gap:10px;align-items:center;margin-bottom:16px}
.community-create-btn{padding:10px 20px;border-radius:var(--r);background:linear-gradient(135deg,var(--primary),var(--primary-soft));color:white;font-size:13px;font-weight:700;white-space:nowrap;transition:all 0.2s;box-shadow:0 4px 16px rgba(139,92,246,0.3);flex-shrink:0}
.community-create-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(139,92,246,0.4)}
.community-tabs{display:flex;gap:4px;margin-bottom:20px;background:var(--surface);border-radius:var(--r);padding:4px}
.community-tab{flex:1;padding:10px 0;border-radius:12px;font-size:13px;font-weight:600;color:var(--text3);background:transparent;transition:all 0.25s;text-align:center}
.community-tab.active{background:linear-gradient(135deg,var(--primary),var(--primary-soft));color:white;box-shadow:0 2px 12px rgba(139,92,246,0.3)}
.community-tab:not(.active):hover{color:var(--text2)}
.community-panel{display:none}
.community-panel.active{display:block;animation:pageIn 0.2s ease}

/* Community Cards */
.community-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.community-card{background:var(--surface);border:1px solid rgba(139,92,246,0.08);border-radius:var(--r-lg);padding:20px;cursor:pointer;transition:all 0.25s;display:flex;flex-direction:column;gap:12px}
.community-card:hover{border-color:rgba(139,92,246,0.2);box-shadow:var(--glow-sm);transform:translateY(-2px)}
.community-card-header{display:flex;align-items:center;gap:12px}
.community-card-icon{width:48px;height:48px;border-radius:14px;font-size:24px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--surface2),var(--surface3));flex-shrink:0}
.community-card-info{flex:1;min-width:0}
.community-card-name{font-weight:700;font-size:15px;color:var(--text)}
.community-card-cat{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.community-card-desc{font-size:13px;color:var(--text2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.community-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.community-card-stats{display:flex;gap:14px;font-size:12px;color:var(--text3)}
.community-card-stats span{display:flex;align-items:center;gap:4px}
.community-join-btn{padding:7px 18px;border-radius:20px;font-size:12px;font-weight:700;transition:all 0.2s}
.community-join-btn.join{background:var(--primary-subtle);color:var(--primary);border:1px solid rgba(139,92,246,0.2)}
.community-join-btn.join:hover{background:rgba(139,92,246,0.15)}
.community-join-btn.joined{background:var(--surface2);color:var(--text3);border:1px solid var(--surface3)}
.community-join-btn.joined:hover{background:rgba(251,113,133,0.1);color:var(--danger);border-color:rgba(251,113,133,0.2)}

/* Community Detail */
.community-detail-icon{width:48px;height:48px;border-radius:14px;font-size:24px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--surface2),var(--surface3))}
.community-sort-row{display:flex;gap:4px;flex:1}
.sort-btn{padding:8px 14px;border-radius:20px;font-size:12px;font-weight:600;color:var(--text3);background:var(--surface);transition:all 0.2s}
.sort-btn.active{background:var(--primary-subtle);color:var(--primary)}
.sort-btn:hover:not(.active){color:var(--text2)}

/* Community Posts (Reddit-style) */
.c-post{background:var(--surface);border:1px solid rgba(139,92,246,0.06);border-radius:var(--r);padding:16px;margin-bottom:10px;display:flex;gap:12px;transition:all 0.2s}
.c-post:hover{border-color:rgba(139,92,246,0.12)}
.c-vote{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0}
.c-vote-btn{width:28px;height:28px;border-radius:6px;font-size:16px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--text3);transition:all 0.15s}
.c-vote-btn:hover{background:var(--surface3)}
.c-vote-btn.upvoted{color:var(--primary)}
.c-vote-btn.downvoted{color:var(--danger)}
.c-vote-score{font-size:13px;font-weight:700;color:var(--text)}
.c-post-body{flex:1;min-width:0}
.c-post-meta{font-size:11px;color:var(--text4);margin-bottom:6px}
.c-post-meta .c-author{color:var(--text2);font-weight:600}
.c-post-text{font-size:14px;color:var(--text);line-height:1.5;margin-bottom:10px;word-wrap:break-word}
.c-post-actions{display:flex;gap:12px}
.c-post-action{font-size:12px;color:var(--text3);background:transparent;display:flex;align-items:center;gap:4px;transition:color 0.15s;padding:0}
.c-post-action:hover{color:var(--text2)}

/* Community Flair */
.c-flair{display:inline-flex;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;margin-left:6px}
.c-flair.mod{background:rgba(52,211,153,0.15);color:var(--emerald)}
.c-flair.og{background:rgba(251,191,36,0.15);color:var(--warm)}
.c-flair.hot{background:rgba(244,114,182,0.15);color:var(--accent)}

/* Compose in community */
.cd-compose{display:flex;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(139,92,246,0.06)}
.cd-compose input{flex:1;padding:12px 16px;border-radius:24px;font-size:13px}

/* Trending Topics in Community */
.trending-topic{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r);transition:all 0.2s;cursor:pointer}
.trending-topic:hover{background:var(--surface2)}
.trending-rank{font-family:'Quicksand',sans-serif;font-size:20px;font-weight:700;color:var(--text4);width:28px;text-align:center}
.trending-info{flex:1}
.trending-name{font-weight:700;font-size:14px;color:var(--text)}
.trending-count{font-size:12px;color:var(--text3)}
.trending-spark{font-size:20px}

@media(max-width:540px){
  .community-grid{grid-template-columns:1fr}
  .community-header-row{flex-wrap:wrap}
  .community-create-btn{width:100%}
  .c-post{padding:12px;gap:8px}
}

/* ============================================
   PHASE 6 — Discovery Engine
   ============================================ */

/* Who to Follow */
.wtf-section{margin-bottom:24px}
.wtf-list{display:flex;flex-direction:column;gap:8px}
.wtf-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface);border:1px solid rgba(139,92,246,0.06);border-radius:var(--r-lg);transition:all 0.2s}
.wtf-card:hover{border-color:rgba(139,92,246,0.15);box-shadow:var(--glow-sm)}
.wtf-avatar{width:48px;height:48px;border-radius:50%;font-size:24px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--surface2),var(--surface3));flex-shrink:0}
.wtf-info{flex:1;min-width:0}
.wtf-name{font-weight:700;font-size:14px;color:var(--text)}
.wtf-handle{font-size:12px;color:var(--text3)}
.wtf-reason{font-size:11px;color:var(--text4);margin-top:2px;font-style:italic}
.wtf-stars{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}
.wtf-star{padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;background:rgba(139,92,246,0.08);color:var(--primary);border:1px solid rgba(139,92,246,0.12)}
.wtf-follow-btn{padding:8px 20px;border-radius:20px;font-size:12px;font-weight:700;transition:all 0.2s;flex-shrink:0}
.wtf-follow-btn.follow{background:linear-gradient(135deg,var(--primary),var(--primary-soft));color:white;box-shadow:0 2px 12px rgba(139,92,246,0.2)}
.wtf-follow-btn.follow:hover{box-shadow:0 4px 16px rgba(139,92,246,0.3);transform:translateY(-1px)}
.wtf-follow-btn.following{background:var(--surface2);color:var(--text3);border:1px solid var(--surface3)}
.wtf-follow-btn.following:hover{background:rgba(251,113,133,0.1);color:var(--danger);border-color:rgba(251,113,133,0.2)}
.wtf-refresh{display:flex;align-items:center;justify-content:center;padding:10px;font-size:12px;color:var(--text3);background:transparent;transition:color 0.2s;margin-top:4px;width:100%;border-radius:var(--r)}
.wtf-refresh:hover{color:var(--primary);background:var(--primary-subtle)}

/* Explore Page */
.explore-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:24px}
.explore-card{background:var(--surface);border:1px solid rgba(139,92,246,0.06);border-radius:var(--r-lg);padding:18px;cursor:pointer;transition:all 0.25s}
.explore-card:hover{border-color:rgba(139,92,246,0.2);box-shadow:var(--glow-sm);transform:translateY(-2px)}
.explore-card-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.explore-card-icon{font-size:28px}
.explore-card-title{font-weight:700;font-size:15px;color:var(--text)}
.explore-card-subtitle{font-size:11px;color:var(--text3)}
.explore-card-items{display:flex;flex-direction:column;gap:6px}
.explore-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;transition:background 0.15s;cursor:pointer}
.explore-item:hover{background:var(--surface2)}
.explore-item-rank{font-size:14px;font-weight:700;color:var(--text4);width:20px;text-align:center}
.explore-item-text{flex:1;font-size:13px}
.explore-item-name{font-weight:600;color:var(--text)}
.explore-item-count{font-size:11px;color:var(--text3)}
.explore-item-badge{font-size:16px}

/* Catch-up Summary */
.catchup-card{background:linear-gradient(135deg,rgba(139,92,246,0.1),rgba(244,114,182,0.06));border:1px solid rgba(139,92,246,0.12);border-radius:var(--r-xl);padding:20px;margin-bottom:20px}
.catchup-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.catchup-icon{font-size:24px}
.catchup-title{font-family:'Quicksand',sans-serif;font-size:16px;font-weight:700;color:var(--text)}
.catchup-items{display:flex;flex-direction:column;gap:8px}
.catchup-item{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--text2);line-height:1.4}
.catchup-bullet{font-size:14px;flex-shrink:0;margin-top:1px}
.catchup-dismiss{margin-top:12px;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;background:var(--surface2);color:var(--text3);transition:all 0.2s;width:100%}
.catchup-dismiss:hover{background:var(--surface3);color:var(--text)}

/* Search Results */
.search-results{margin-bottom:20px}
.search-result-section{margin-bottom:16px}
.search-result-label{font-size:11px;font-weight:700;color:var(--text4);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}

@media(max-width:540px){
  .explore-grid{grid-template-columns:1fr}
}

/* ============================================
   PHASE 7 — Engagement & Retention
   ============================================ */

/* Notification Center */
.notif-panel{position:fixed;top:58px;right:0;width:380px;max-height:calc(100vh - 70px);background:var(--bg2);border:1px solid rgba(139,92,246,0.1);border-radius:0 0 0 var(--r-xl);box-shadow:0 12px 48px rgba(0,0,0,0.5);z-index:200;display:none;flex-direction:column;overflow:hidden}
.notif-panel.open{display:flex;animation:slideDown 0.2s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.notif-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(139,92,246,0.06)}
.notif-title{font-family:'Quicksand',sans-serif;font-size:16px;font-weight:700}
.notif-clear{font-size:12px;color:var(--text3);background:transparent;transition:color 0.2s;padding:0}
.notif-clear:hover{color:var(--primary)}
.notif-list{flex:1;overflow-y:auto;padding:8px}
.notif-item{display:flex;gap:12px;padding:12px;border-radius:var(--r);transition:background 0.2s;cursor:pointer}
.notif-item:hover{background:var(--surface2)}
.notif-item.unread{background:var(--primary-subtle)}
.notif-avatar{width:40px;height:40px;border-radius:50%;font-size:20px;display:flex;align-items:center;justify-content:center;background:var(--surface3);flex-shrink:0}
.notif-content{flex:1;min-width:0}
.notif-text{font-size:13px;color:var(--text);line-height:1.4}
.notif-text strong{font-weight:700}
.notif-time{font-size:11px;color:var(--text4);margin-top:2px}
.notif-empty{text-align:center;padding:40px 20px;color:var(--text3);font-size:13px}

/* Achievement System */
.achievements-section{margin-bottom:24px}
.achievements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.achievement{background:var(--surface);border:1px solid rgba(139,92,246,0.06);border-radius:var(--r);padding:14px;text-align:center;transition:all 0.25s}
.achievement:hover{border-color:rgba(139,92,246,0.15);box-shadow:var(--glow-sm)}
.achievement.locked{opacity:0.4;filter:grayscale(0.5)}
.achievement.unlocked{border-color:rgba(251,191,36,0.2)}
.achievement-icon{font-size:32px;margin-bottom:6px}
.achievement-name{font-size:12px;font-weight:700;color:var(--text)}
.achievement-desc{font-size:10px;color:var(--text3);margin-top:2px}
.achievement.unlocked .achievement-icon{animation:achievePop 0.5s ease}
@keyframes achievePop{0%{transform:scale(1)}50%{transform:scale(1.3) rotate(10deg)}100%{transform:scale(1)}}

/* Streak Counter */
.streak-card{background:linear-gradient(135deg,rgba(251,191,36,0.1),rgba(234,88,12,0.06));border:1px solid rgba(251,191,36,0.15);border-radius:var(--r-lg);padding:18px;display:flex;align-items:center;gap:16px;margin-bottom:16px;cursor:pointer;transition:all 0.2s}
.streak-card:hover{box-shadow:0 4px 20px rgba(251,191,36,0.12)}
.streak-flame{font-size:36px;animation:flameWave 2s ease-in-out infinite}
@keyframes flameWave{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(3deg) scale(1.05)}}
.streak-info{flex:1}
.streak-count{font-family:'Quicksand',sans-serif;font-size:28px;font-weight:700;color:var(--warm)}
.streak-label{font-size:12px;color:var(--text2)}
.streak-days{display:flex;gap:4px;margin-top:6px}
.streak-day{width:22px;height:22px;border-radius:6px;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:700}
.streak-day.done{background:rgba(251,191,36,0.2);color:var(--warm)}
.streak-day.today{background:var(--warm);color:var(--bg);box-shadow:0 0 8px rgba(251,191,36,0.4)}
.streak-day.future{background:var(--surface2);color:var(--text4)}

/* Mood Journal */
.mood-section{margin-bottom:24px}
.mood-today{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.mood-pick{font-size:28px;padding:6px;border-radius:10px;cursor:pointer;background:transparent;transition:all 0.15s;border:2px solid transparent}
.mood-pick:hover{transform:scale(1.15);background:var(--surface2)}
.mood-pick.selected{border-color:var(--primary);background:var(--primary-subtle)}
.mood-history{display:flex;gap:4px;align-items:flex-end;height:60px}
.mood-bar{flex:1;border-radius:4px 4px 0 0;min-width:16px;transition:height 0.3s ease;position:relative;cursor:pointer}
.mood-bar:hover::after{content:attr(data-label);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--surface3);color:var(--text);padding:3px 8px;border-radius:6px;font-size:10px;white-space:nowrap;z-index:5}
.mood-bar-day{font-size:9px;color:var(--text4);text-align:center;margin-top:2px}

/* Bookmarks Panel */
.bookmarks-section{margin-bottom:24px}
.bookmark-item{display:flex;align-items:flex-start;gap:12px;padding:12px;background:var(--surface);border:1px solid rgba(139,92,246,0.06);border-radius:var(--r);margin-bottom:8px;transition:all 0.2s}
.bookmark-item:hover{border-color:rgba(139,92,246,0.15)}
.bookmark-avatar{width:32px;height:32px;border-radius:50%;font-size:16px;display:flex;align-items:center;justify-content:center;background:var(--surface3);flex-shrink:0}
.bookmark-content{flex:1;min-width:0}
.bookmark-author{font-size:12px;font-weight:700;color:var(--text2)}
.bookmark-text{font-size:13px;color:var(--text);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bookmark-remove{font-size:16px;color:var(--text4);background:transparent;transition:color 0.2s;padding:0;flex-shrink:0}
.bookmark-remove:hover{color:var(--danger)}

@media(max-width:540px){
  .notif-panel{width:100%;border-radius:0 0 var(--r-lg) var(--r-lg)}
  .achievements-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1024px){.notif-panel{right:20px;border-radius:var(--r-xl)}}

/* ============================================
   PHASE 8 — Light/OLED Modes, Polls, Spoilers, Quiet, Accessibility
   ============================================ */

/* Light Theme */
[data-theme="light"]{
  --bg:#F5F3FF;--bg2:#FFFBFE;--surface:rgba(139,92,246,0.04);--surface2:rgba(139,92,246,0.06);--surface3:rgba(139,92,246,0.09);--surface4:rgba(139,92,246,0.12);
  --text:#1A1523;--text2:#3D3552;--text3:#6E6882;--text4:#9F99B0;
  --primary:#7C3AED;--primary-soft:#A78BFA;--primary-subtle:rgba(124,58,237,0.08);--primary-glow:rgba(124,58,237,0.15);
  --glow-sm:0 2px 12px rgba(124,58,237,0.08);--glow-md:0 8px 32px rgba(124,58,237,0.12)
}
[data-theme="light"] .ambient{display:none}
[data-theme="light"] .sidebar-nav{background:rgba(245,243,255,0.95);border-color:rgba(139,92,246,0.08)}
[data-theme="light"] .top-bar{background:rgba(245,243,255,0.9);border-color:rgba(139,92,246,0.06)}
[data-theme="light"] .bottom-nav{background:rgba(245,243,255,0.95);border-color:rgba(139,92,246,0.06)}
[data-theme="light"] .chat-header,[data-theme="light"] .chat-input-area{background:rgba(245,243,255,0.95)}
[data-theme="light"] .msg-row.sent .msg-bubble{background:linear-gradient(135deg,#7C3AED,#A78BFA)}
[data-theme="light"] input,[data-theme="light"] textarea,[data-theme="light"] select{background:rgba(139,92,246,0.04);color:#1A1523;border-color:rgba(139,92,246,0.12)}

/* OLED Theme */
[data-theme="oled"]{
  --bg:#000000;--bg2:#050505;--surface:rgba(139,92,246,0.04);--surface2:rgba(139,92,246,0.06);--surface3:rgba(139,92,246,0.10);--surface4:rgba(139,92,246,0.14);
  --glow-sm:0 2px 12px rgba(139,92,246,0.06);--glow-md:0 8px 32px rgba(139,92,246,0.1)
}
[data-theme="oled"] .sidebar-nav{background:rgba(0,0,0,0.98)}
[data-theme="oled"] .top-bar{background:rgba(0,0,0,0.95)}
[data-theme="oled"] .bottom-nav{background:rgba(0,0,0,0.98)}

/* Poll Styles */
.poll-builder{margin-top:12px;display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--surface2);border-radius:var(--r);border:1px solid rgba(139,92,246,0.1)}
.poll-builder-label{font-size:12px;font-weight:700;color:var(--text2);margin-bottom:2px}
.poll-option-input{padding:10px 14px;border-radius:12px;font-size:13px}
.poll-display{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.poll-option{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:var(--surface2);cursor:pointer;transition:all 0.2s;border:1px solid rgba(139,92,246,0.08);position:relative;overflow:hidden}
.poll-option:hover{border-color:rgba(139,92,246,0.2)}
.poll-option.voted{border-color:var(--primary)}
.poll-option-bar{position:absolute;left:0;top:0;bottom:0;background:rgba(139,92,246,0.08);border-radius:12px;transition:width 0.5s ease}
.poll-option.voted .poll-option-bar{background:rgba(139,92,246,0.15)}
.poll-option-text{font-size:13px;font-weight:600;color:var(--text);z-index:1;flex:1}
.poll-option-pct{font-size:12px;font-weight:700;color:var(--text3);z-index:1}
.poll-option-check{font-size:14px;z-index:1}
.poll-meta{font-size:11px;color:var(--text4);margin-top:4px}

/* Spoiler Tags */
.spoiler{background:var(--text);color:var(--text);border-radius:4px;padding:0 4px;cursor:pointer;transition:all 0.3s;user-select:none}
.spoiler.revealed{background:rgba(139,92,246,0.1);color:var(--text)}

/* Quiet Mode */
.quiet-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:12px;font-size:10px;font-weight:700;background:rgba(34,211,153,0.1);color:var(--emerald);margin-left:8px}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
}
@media(prefers-color-scheme:light){
  html:not([data-theme="dark"]):not([data-theme="oled"]){
    --bg:#F5F3FF;--bg2:#FFFBFE;--text:#1A1523;--text2:#3D3552;--text3:#6E6882;--text4:#9F99B0;
    --surface:rgba(139,92,246,0.04);--surface2:rgba(139,92,246,0.06)
  }
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Auth tab styles */
.auth-tab.active{background:linear-gradient(135deg,var(--primary),var(--primary-soft));color:white;box-shadow:0 2px 12px rgba(139,92,246,0.3)}
.auth-tab:not(.active){color:var(--text3);background:transparent}