:root{--accent:#2563eb;--accent-soft:#eff6ff;--accent-strong:#1d4ed8;--accent-text:#fff;--accent-border:#bfdbfe;--accent-glow:rgba(37,99,235,.22);--theme-bg:#f5f9ff;--theme-surface:#fff;--theme-surface-2:#eff6ff;--theme-text:#0f172a;--theme-muted:#64748b;--theme-border:#dbeafe}

body.accent-enabled{--link-accent:var(--accent)}
body.accent-enabled .text-blue-500,body.accent-enabled .text-blue-600,body.accent-enabled .text-blue-700,body.accent-enabled .text-cyan-500,body.accent-enabled .text-cyan-600,body.accent-enabled .text-emerald-500,body.accent-enabled .text-emerald-600{color:var(--accent)!important}
body.accent-enabled .bg-blue-500,body.accent-enabled .bg-blue-600,body.accent-enabled .bg-blue-700,body.accent-enabled .bg-cyan-500,body.accent-enabled .bg-cyan-600,body.accent-enabled .bg-emerald-500{background:var(--accent)!important}
body.accent-enabled .border-blue-200,body.accent-enabled .border-blue-300,body.accent-enabled .border-cyan-200,body.accent-enabled .border-cyan-300{border-color:var(--accent-border)!important}
body.accent-enabled .hover\:bg-blue-600:hover,body.accent-enabled .hover\:bg-blue-700:hover{background:var(--accent-strong)!important}
body.accent-enabled .shadow-glow{box-shadow:0 0 0 1px var(--accent-border),0 0 26px var(--accent-glow)!important}

body[data-theme]{background:var(--theme-bg)!important;color:var(--theme-text)}
body[data-theme] #main-nav{background:color-mix(in srgb,var(--theme-surface) 88%,transparent)!important;border-color:var(--theme-border)!important}
body[data-theme] .app-section{color:var(--theme-text)}
body[data-theme] .bg-white{background:var(--theme-surface)!important}
body[data-theme] .bg-slate-50,body[data-theme] .bg-slate-100{background:var(--theme-surface-2)!important}
body[data-theme] .text-slate-900,body[data-theme] .text-slate-800,body[data-theme] .text-slate-700{color:var(--theme-text)!important}
body[data-theme] .text-slate-600,body[data-theme] .text-slate-500,body[data-theme] .text-slate-400{color:var(--theme-muted)!important}
body[data-theme] .border-slate-100,body[data-theme] .border-slate-200,body[data-theme] .border-slate-300{border-color:var(--theme-border)!important}
body[data-theme] input.tw-input,body[data-theme] textarea.tw-input,body[data-theme] select.tw-input{background:var(--theme-surface)!important;color:var(--theme-text)!important;box-shadow:inset 0 0 0 1px var(--theme-border)!important}
body.theme-dark{color:var(--theme-text)!important}

.theme-shell{display:grid;grid-template-columns:1fr;gap:18px}.theme-shell .hl-card{background:var(--theme-surface)!important;color:var(--theme-text);border:1px solid var(--theme-border)!important;box-shadow:0 20px 50px -30px var(--accent-glow)}
.theme-catalog-intro{display:flex;justify-content:space-between;align-items:end;gap:18px;padding:6px 2px;color:var(--theme-text)}.theme-catalog-intro>span:last-child{opacity:.72;white-space:nowrap}
.theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.theme-card{border:1px solid var(--theme-border);border-radius:22px;padding:14px;background:var(--theme-surface);box-shadow:0 20px 50px -35px rgba(15,23,42,.6);overflow:hidden;color:var(--theme-text);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.theme-card:hover{transform:translateY(-4px);box-shadow:0 24px 55px -30px var(--accent-glow)}
.theme-preview-wrap{position:relative}.theme-preview-badges{position:absolute;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;align-items:center;z-index:4}.theme-badge,.theme-price{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.04em;background:rgba(255,255,255,.78);color:#0f172a;backdrop-filter:blur(10px)}.theme-badge-free{display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;font-size:10px;font-weight:900;background:var(--accent-soft);color:var(--accent-text);border:1px solid var(--accent-border)}
.theme-icon-row{display:flex;gap:12px;align-items:flex-start;padding-top:13px}.theme-icon{width:44px;height:44px;min-width:44px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-border)}.theme-icon svg{width:24px;height:24px}
.theme-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.theme-actions button{border-radius:12px;padding:9px 11px;font-weight:900;border:1px solid transparent}.theme-preview-btn{background:var(--theme-surface-2);color:var(--theme-text);border-color:var(--theme-border)!important}.theme-apply{background:var(--accent);color:var(--accent-text)}.theme-buy{background:#0f172a;color:#fff}.theme-buy[disabled]{opacity:.42;cursor:not-allowed}
.accent-palette{display:flex;gap:10px;flex-wrap:wrap}.accent-chip{width:36px;height:36px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px rgba(15,23,42,.15);cursor:pointer;transition:transform .15s ease}.accent-chip:hover{transform:scale(1.12)}.accent-custom{display:flex;align-items:center;gap:10px}.accent-custom input[type=color]{width:48px;height:36px;padding:0;border:0;background:transparent}

.theme-shot{position:relative;height:178px;border-radius:18px;overflow:hidden;background:var(--shot-bg);border:1px solid color-mix(in srgb,var(--shot-border) 60%,transparent);color:var(--shot-text);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}.theme-shot--classic{background:linear-gradient(135deg,#f7fbff,#eaf3ff)}.theme-shot--anime{background:radial-gradient(circle at 20% 20%,rgba(236,72,153,.35),transparent 34%),radial-gradient(circle at 80% 75%,rgba(139,92,246,.3),transparent 36%),var(--shot-bg)}.theme-shot--football{background:linear-gradient(155deg,#07140c 0%,#0b2413 55%,#173c21 100%)}.theme-shot--volleyball{background:linear-gradient(160deg,#fff8ee,#fff1d7)}.theme-shot--magic{background:radial-gradient(circle at 70% 30%,rgba(6,182,212,.24),transparent 30%),radial-gradient(circle at 25% 70%,rgba(139,92,246,.3),transparent 36%),var(--shot-bg)}.theme-shot--ice{background:linear-gradient(160deg,#f7fdff,#dff3ff)}.theme-shot--fire{background:radial-gradient(circle at 75% 25%,rgba(239,68,68,.28),transparent 28%),radial-gradient(circle at 30% 80%,rgba(249,115,22,.24),transparent 32%),var(--shot-bg)}.theme-shot--space{background:radial-gradient(circle at 70% 25%,rgba(99,102,241,.25),transparent 22%),radial-gradient(circle at 25% 70%,rgba(14,165,233,.15),transparent 20%),#060915}.theme-shot--cyber{background:linear-gradient(rgba(6,182,212,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(6,182,212,.07) 1px,transparent 1px),#041014;background-size:18px 18px}.theme-shot--chemistry{background:radial-gradient(circle at 80% 20%,rgba(20,184,166,.22),transparent 28%),radial-gradient(circle at 15% 75%,rgba(34,197,94,.2),transparent 26%),var(--shot-bg)}.theme-shot--aurora{background:linear-gradient(135deg,#06231a,#0c4434 52%,#071b20);background-size:220% 220%;animation:auroraShift 7s ease-in-out infinite alternate}.theme-shot--fantasy{background:radial-gradient(circle at 20% 15%,rgba(168,85,247,.28),transparent 30%),radial-gradient(circle at 80% 75%,rgba(236,72,153,.18),transparent 32%),var(--shot-bg)}.theme-shot--minimal-dark{background:#0b0e13}@keyframes auroraShift{from{background-position:0 30%}to{background-position:100% 70%}}
.shot-ambience{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 60% 20%,var(--shot-a),transparent 28%);opacity:.14}.theme-shot--fire .shot-ambience{animation:floatGlow 2.8s ease-in-out infinite alternate}.theme-shot--space .shot-ambience{background-image:radial-gradient(circle,rgba(255,255,255,.8) 0 1px,transparent 1px);background-size:30px 26px;opacity:.28}.theme-shot--cyber .shot-ambience{background:linear-gradient(90deg,transparent,rgba(34,211,238,.15),transparent);animation:scan 2.7s linear infinite}.theme-shot--magic .shot-ambience{border:1px solid rgba(196,181,253,.2);transform:rotate(8deg);animation:magicSpin 12s linear infinite}.theme-shot--chemistry .shot-ambience:before,.theme-shot--chemistry .shot-ambience:after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:var(--shot-a);box-shadow:30px 14px 0 var(--shot-b),60px -10px 0 var(--shot-a);left:18%;top:30%;filter:blur(.2px);opacity:.65;animation:moleculeFloat 4s ease-in-out infinite}.theme-shot--chemistry .shot-ambience:after{left:auto;right:18%;top:58%;animation-delay:1.4s}@keyframes floatGlow{to{transform:translateY(-5px) scale(1.08);opacity:.25}}@keyframes scan{from{transform:translateX(-80%)}to{transform:translateX(120%)}}@keyframes magicSpin{to{transform:rotate(368deg)}}@keyframes moleculeFloat{50%{transform:translateY(-6px)}}
.shot-top{height:28px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}.theme-shot--classic .shot-top,.theme-shot--volleyball .shot-top,.theme-shot--ice .shot-top{background:rgba(255,255,255,.65);color:#0f172a}.shot-brand{display:flex;align-items:center;gap:5px;font-size:8px;font-weight:900;letter-spacing:.04em}.shot-icon{width:15px;height:15px;border-radius:5px;display:grid;place-items:center;background:var(--shot-a);color:#fff}.shot-icon svg{width:10px;height:10px}.shot-dots{display:flex;gap:3px}.shot-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.65}
.shot-body{display:flex;height:calc(100% - 28px)}.shot-side{width:28px;padding:10px 7px;display:flex;flex-direction:column;gap:6px;background:rgba(0,0,0,.1);border-right:1px solid rgba(255,255,255,.08)}.theme-shot--classic .shot-side,.theme-shot--volleyball .shot-side,.theme-shot--ice .shot-side{background:rgba(255,255,255,.5)}.shot-side b{height:5px;border-radius:4px;background:var(--shot-a);opacity:.7}.shot-side b:nth-child(2),.shot-side b:nth-child(4){opacity:.25}
.shot-main{flex:1;padding:8px}.shot-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.shot-stats span{font-size:7px;font-weight:900;padding:5px;border-radius:6px;background:var(--shot-surface);border:1px solid var(--shot-border);color:var(--shot-text)}.shot-content{display:grid;grid-template-columns:.9fr 1.1fr;gap:7px;margin-top:7px}.shot-timer,.shot-board{background:var(--shot-surface);border:1px solid var(--shot-border);border-radius:9px;padding:7px}.shot-timer{text-align:center}.shot-ring{width:56px;height:56px;border-radius:50%;margin:3px auto 6px;display:grid;place-items:center;border:3px solid var(--shot-a);box-shadow:0 0 16px color-mix(in srgb,var(--shot-a) 38%,transparent)}.shot-ring strong{font-size:10px}.shot-pills{display:flex;justify-content:center;gap:4px}.shot-pills em{width:10px;height:3px;border-radius:3px;background:var(--shot-border)}.shot-pills .active{background:var(--shot-a)}.shot-line{height:6px;border-radius:4px;background:linear-gradient(90deg,var(--shot-a),var(--shot-b));opacity:.78;margin-bottom:7px}.shot-line.w1{width:85%}.shot-line.w2{width:65%}.shot-line.w3{width:48%}.shot-users{display:flex;gap:4px;margin-top:10px}.shot-users i{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--shot-a),var(--shot-b));border:1px solid rgba(255,255,255,.35)}
.hl-theme-preview-modal{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:22px}.hl-theme-preview-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.72);backdrop-filter:blur(8px)}.hl-theme-preview-dialog{position:relative;width:min(980px,96vw);max-height:92vh;overflow:auto;border-radius:24px;background:var(--theme-surface,#fff);color:var(--theme-text,#0f172a);border:1px solid var(--theme-border,#dbeafe);box-shadow:0 30px 100px -35px rgba(0,0,0,.7);padding:20px}.hl-theme-preview-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.hl-theme-icon-lg{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-border)}.hl-theme-icon-lg svg{width:28px;height:28px}.hl-theme-close{width:38px;height:38px;border-radius:12px;background:var(--theme-surface-2);border:1px solid var(--theme-border);font-size:24px;line-height:1}.hl-theme-preview-large{margin-top:18px}.hl-theme-preview-large .theme-shot{height:330px}.hl-theme-preview-info{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;opacity:.75}.hl-theme-preview-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.hl-btn-primary,.hl-btn-secondary{padding:11px 14px;border-radius:12px;font-weight:900}.hl-btn-primary{background:var(--accent);color:var(--accent-text)}.hl-btn-secondary{background:var(--theme-surface-2);border:1px solid var(--theme-border)}.hl-theme-preview-active:after{content:'ĐANG XEM THỬ GIAO DIỆN';position:fixed;right:18px;bottom:18px;z-index:19999;padding:9px 12px;border-radius:999px;background:var(--accent);color:var(--accent-text);font:900 11px system-ui;box-shadow:0 12px 30px -10px var(--accent-glow)}
@media(max-width:900px){.theme-grid{grid-template-columns:1fr}.theme-catalog-intro{align-items:flex-start;flex-direction:column}.theme-preview-wrap .theme-shot{height:190px}.hl-theme-preview-large .theme-shot{height:220px}}
@media(prefers-reduced-motion:reduce){.theme-shot--aurora,.theme-shot--cyber .shot-ambience,.theme-shot--magic .shot-ambience,.theme-shot--fire .shot-ambience,.theme-shot--chemistry .shot-ambience:before,.theme-shot--chemistry .shot-ambience:after{animation:none!important}}

/* ===== HTVVM PREMIUM ICON SYSTEM v2 ===== */
#main-nav .nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px}
#main-nav .theme-nav-icon{width:17px;height:17px;display:inline-grid;place-items:center;flex:0 0 17px;color:currentColor;filter:drop-shadow(0 2px 5px var(--accent-glow,transparent));}
#main-nav .theme-nav-icon svg{width:17px;height:17px;display:block}
#main-nav .theme-nav-label{line-height:1}

.theme-meta{min-height:115px}
.theme-icon-pack{display:flex;align-items:center;gap:5px;margin-top:12px;padding-top:10px;border-top:1px solid var(--theme-border)}
.theme-icon-pack span{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-border);box-shadow:0 4px 12px -8px var(--accent-glow);transition:transform .18s ease,box-shadow .18s ease}
.theme-icon-pack span:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 10px 16px -10px var(--accent-glow)}
.theme-icon-pack svg{width:15px;height:15px}

.shot-tabs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;position:absolute;left:8px;right:8px;bottom:7px;padding:5px;border-radius:10px;background:rgba(4,8,18,.55);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);z-index:5}
.theme-shot--classic .shot-tabs,.theme-shot--volleyball .shot-tabs,.theme-shot--ice .shot-tabs{background:rgba(255,255,255,.75);border-color:rgba(15,23,42,.1)}
.shot-tab{display:flex;align-items:center;justify-content:center;gap:3px;min-width:0;padding:3px 2px;border-radius:7px;color:var(--shot-muted);opacity:.88;transition:transform .2s ease,color .2s ease,background .2s ease}
.shot-tab span{width:13px;height:13px;display:grid;place-items:center;flex:0 0 13px}.shot-tab span svg{width:13px;height:13px}.shot-tab em{font-style:normal;font-size:5.8px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-tab.is-active{background:color-mix(in srgb,var(--shot-a) 22%,transparent);color:var(--shot-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--shot-a) 38%,transparent)}
.shot-tab:hover{transform:translateY(-1px);color:var(--shot-text)}

.theme-shot--anime .shot-tabs{animation:tabGlowAnime 3s ease-in-out infinite alternate}
.theme-shot--football .shot-tabs{border-style:dashed}
.theme-shot--volleyball .shot-tabs{box-shadow:0 0 0 1px rgba(249,115,22,.12),0 6px 22px -12px rgba(249,115,22,.5)}
.theme-shot--magic .shot-tab.is-active{box-shadow:0 0 0 1px rgba(196,181,253,.35),0 0 16px -5px var(--shot-a)}
.theme-shot--ice .shot-tab.is-active{box-shadow:0 0 0 1px rgba(14,165,233,.3),inset 0 0 14px rgba(255,255,255,.4)}
.theme-shot--fire .shot-tabs{animation:emberTabs 2.4s ease-in-out infinite alternate}
.theme-shot--space .shot-tabs{background:rgba(3,8,20,.7)}
.theme-shot--cyber .shot-tab{font-family:monospace;letter-spacing:.02em}
.theme-shot--chemistry .shot-tab span{border-radius:50%}
.theme-shot--aurora .shot-tabs{background:linear-gradient(90deg,rgba(20,184,166,.16),rgba(34,197,94,.16),rgba(59,130,246,.14));background-size:180% 100%;animation:auroraTabs 6s ease-in-out infinite alternate}
.theme-shot--fantasy .shot-tab.is-active{background:linear-gradient(135deg,rgba(168,85,247,.25),rgba(236,72,153,.18));box-shadow:0 0 18px -7px var(--shot-a)}
.theme-shot--minimal-dark .shot-tabs{background:#0f141d;border-color:#334155}

.shot-mini-card{margin-top:14px;padding:7px 8px;border-radius:8px;background:var(--shot-surface-2);border:1px solid var(--shot-border);display:flex;flex-direction:column;gap:2px}
.shot-mini-card b{font-size:7px;letter-spacing:.08em;color:var(--shot-a)}.shot-mini-card span{font-size:6px;color:var(--shot-muted);font-weight:700}

.hl-theme-preview-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}.hl-theme-preview-feature-grid>div{padding:11px 12px;border:1px solid var(--theme-border);border-radius:14px;background:var(--theme-surface-2);display:flex;flex-direction:column;gap:4px}.hl-theme-preview-feature-grid b{font-size:12px}.hl-theme-preview-feature-grid span{font-size:11px;opacity:.72;line-height:1.35}

.theme-card--anime .theme-icon,.theme-card--magic .theme-icon,.theme-card--fantasy .theme-icon{animation:iconFloat 3s ease-in-out infinite}
.theme-card--football .theme-icon,.theme-card--volleyball .theme-icon{border-radius:50%}
.theme-card--ice .theme-icon{transform:rotate(45deg);border-radius:10px}.theme-card--ice .theme-icon svg{transform:rotate(-45deg)}
.theme-card--fire .theme-icon{animation:emberPulse 1.8s ease-in-out infinite alternate}
.theme-card--space .theme-icon{animation:orbitCard 5s linear infinite}
.theme-card--cyber .theme-icon{border-radius:7px;box-shadow:inset 0 0 0 1px rgba(34,211,238,.25),0 0 18px -8px var(--accent-glow)}
.theme-card--chemistry .theme-icon{border-radius:50% 50% 45% 55%}
.theme-card--aurora .theme-icon{background:linear-gradient(135deg,var(--accent-soft),rgba(59,130,246,.12));animation:auroraCard 5s ease-in-out infinite alternate}

@keyframes tabGlowAnime{to{box-shadow:0 0 0 1px rgba(236,72,153,.14),0 0 22px -10px #ec4899}}
@keyframes emberTabs{to{box-shadow:0 0 0 1px rgba(249,115,22,.2),0 0 24px -9px #ef4444}}
@keyframes auroraTabs{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes iconFloat{50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes emberPulse{to{box-shadow:0 0 0 1px rgba(239,68,68,.2),0 0 24px -8px #ef4444;transform:translateY(-1px)}}
@keyframes orbitCard{to{transform:rotate(360deg)}}
@keyframes auroraCard{to{filter:hue-rotate(18deg);transform:translateY(-1px)}}

@media(max-width:900px){.shot-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.shot-tab em{font-size:5.4px}.hl-theme-preview-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.theme-card--anime .theme-icon,.theme-card--magic .theme-icon,.theme-card--fantasy .theme-icon,.theme-card--fire .theme-icon,.theme-card--space .theme-icon,.theme-card--aurora .theme-icon,.theme-shot--anime .shot-tabs,.theme-shot--fire .shot-tabs,.theme-shot--aurora .shot-tabs{animation:none!important}}


/* ===== PREMIUM TAB ICON PACKS v3 ===== */
#main-nav .theme-nav-icon{position:relative;overflow:visible;transition:transform .22s ease,filter .22s ease,opacity .22s ease}
#main-nav .theme-nav-icon svg{overflow:visible}
#main-nav .nav-btn[data-theme-tab="home"] .theme-nav-icon{--tab-order:1}
#main-nav .nav-btn[data-theme-tab="library"] .theme-nav-icon{--tab-order:2}
#main-nav .nav-btn[data-theme-tab="exam"] .theme-nav-icon{--tab-order:3}
#main-nav .nav-btn[data-theme-tab="study"] .theme-nav-icon{--tab-order:4}
#main-nav .nav-btn[data-theme-tab="community"] .theme-nav-icon{--tab-order:5}
#main-nav .nav-btn[data-theme-tab="theme"] .theme-nav-icon{--tab-order:6}
#main-nav .nav-btn:hover .theme-nav-icon{transform:translateY(-1px) scale(1.06)}
body[data-theme="classic"] #main-nav .theme-nav-icon{filter:drop-shadow(0 2px 5px rgba(37,99,235,.18))}
body[data-theme="anime"] #main-nav .theme-nav-icon{filter:drop-shadow(0 0 7px rgba(236,72,153,.48));animation:premiumIconFloat 2.8s ease-in-out infinite}
body[data-theme="football"] #main-nav .theme-nav-icon{filter:drop-shadow(0 0 5px rgba(22,163,74,.35))}
body[data-theme="volleyball"] #main-nav .theme-nav-icon{filter:drop-shadow(0 0 6px rgba(249,115,22,.38));animation:sportIconBounce 1.9s ease-in-out infinite}
body[data-theme="magic"] #main-nav .theme-nav-icon{filter:drop-shadow(0 0 8px rgba(139,92,246,.55));animation:runeIconPulse 3.2s linear infinite}
body[data-theme="ice"] #main-nav .theme-nav-icon{filter:drop-shadow(0 0 7px rgba(14,165,233,.42));animation:iceIconShimmer 2.8s ease-in-out infinite}
body[data-theme="fire"] #main-nav .theme-nav-icon{filter:drop-shadow(0 0 9px rgba(239,68,68,.58));animation:fireIconFlicker 1.25s ease-in-out infinite alternate}
body[data-theme="space"] #main-nav .theme-nav-icon{filter:drop-shadow(0 0 8px rgba(99,102,241,.5));animation:spaceIconOrbit 5.5s linear infinite}
body[data-theme="cyber"] #main-nav .theme-nav-icon{filter:drop-shadow(0 0 7px rgba(6,182,212,.55));animation:cyberIconScan 2.4s linear infinite}
body[data-theme="chemistry"] #main-nav .theme-nav-icon{filter:drop-shadow(0 0 7px rgba(20,184,166,.48));animation:chemIconDrift 3.5s ease-in-out infinite}
body[data-theme="aurora"] #main-nav .theme-nav-icon{filter:drop-shadow(0 0 8px rgba(34,197,94,.45));animation:auroraIconHue 5s ease-in-out infinite alternate}
body[data-theme="fantasy"] #main-nav .theme-nav-icon{filter:drop-shadow(0 0 8px rgba(168,85,247,.5));animation:fantasyIconFloat 3s ease-in-out infinite}
body[data-theme="minimal-dark"] #main-nav .theme-nav-icon{filter:drop-shadow(0 2px 4px rgba(148,163,184,.15))}

/* Tab-specific accents inside each icon family: same tab meaning, different visual language. */
body[data-theme="football"] .nav-btn[data-theme-tab="home"] .theme-nav-icon{color:#22c55e}
body[data-theme="football"] .nav-btn[data-theme-tab="library"] .theme-nav-icon{color:#84cc16}
body[data-theme="football"] .nav-btn[data-theme-tab="exam"] .theme-nav-icon{color:#facc15}
body[data-theme="football"] .nav-btn[data-theme-tab="study"] .theme-nav-icon{color:#34d399}
body[data-theme="football"] .nav-btn[data-theme-tab="community"] .theme-nav-icon{color:#86efac}
body[data-theme="football"] .nav-btn[data-theme-tab="theme"] .theme-nav-icon{color:#bef264}
body[data-theme="fire"] .nav-btn[data-theme-tab="home"] .theme-nav-icon{color:#fb7185}
body[data-theme="fire"] .nav-btn[data-theme-tab="library"] .theme-nav-icon{color:#fb923c}
body[data-theme="fire"] .nav-btn[data-theme-tab="exam"] .theme-nav-icon{color:#f59e0b}
body[data-theme="fire"] .nav-btn[data-theme-tab="study"] .theme-nav-icon{color:#ef4444}
body[data-theme="fire"] .nav-btn[data-theme-tab="community"] .theme-nav-icon{color:#f97316}
body[data-theme="fire"] .nav-btn[data-theme-tab="theme"] .theme-nav-icon{color:#facc15}
body[data-theme="ice"] .nav-btn[data-theme-tab="home"] .theme-nav-icon{color:#0284c7}
body[data-theme="ice"] .nav-btn[data-theme-tab="library"] .theme-nav-icon{color:#0ea5e9}
body[data-theme="ice"] .nav-btn[data-theme-tab="exam"] .theme-nav-icon{color:#38bdf8}
body[data-theme="ice"] .nav-btn[data-theme-tab="study"] .theme-nav-icon{color:#06b6d4}
body[data-theme="ice"] .nav-btn[data-theme-tab="community"] .theme-nav-icon{color:#22d3ee}
body[data-theme="ice"] .nav-btn[data-theme-tab="theme"] .theme-nav-icon{color:#60a5fa}
body[data-theme="cyber"] .nav-btn[data-theme-tab="home"] .theme-nav-icon{color:#22d3ee}
body[data-theme="cyber"] .nav-btn[data-theme-tab="library"] .theme-nav-icon{color:#67e8f9}
body[data-theme="cyber"] .nav-btn[data-theme-tab="exam"] .theme-nav-icon{color:#38bdf8}
body[data-theme="cyber"] .nav-btn[data-theme-tab="study"] .theme-nav-icon{color:#2dd4bf}
body[data-theme="cyber"] .nav-btn[data-theme-tab="community"] .theme-nav-icon{color:#a5f3fc}
body[data-theme="cyber"] .nav-btn[data-theme-tab="theme"] .theme-nav-icon{color:#5eead4}

@keyframes premiumIconFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-2px) rotate(1deg)}}
@keyframes sportIconBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px) rotate(2deg)}}
@keyframes runeIconPulse{50%{transform:rotate(2deg) scale(1.04);filter:drop-shadow(0 0 11px rgba(139,92,246,.7))}}
@keyframes iceIconShimmer{50%{transform:translateY(-1px);filter:drop-shadow(0 0 12px rgba(125,211,252,.8))}}
@keyframes fireIconFlicker{0%{transform:translateY(0) rotate(-1deg) scale(1)}100%{transform:translateY(-1px) rotate(1deg) scale(1.05)}}
@keyframes spaceIconOrbit{to{transform:rotate(360deg)}}
@keyframes cyberIconScan{0%,100%{opacity:.85}50%{opacity:1;filter:drop-shadow(0 0 12px rgba(34,211,238,.8))}}
@keyframes chemIconDrift{50%{transform:translateY(-2px) rotate(2deg)}}
@keyframes auroraIconHue{50%{filter:hue-rotate(18deg) drop-shadow(0 0 10px rgba(34,197,94,.6))}}
@keyframes fantasyIconFloat{50%{transform:translateY(-2px) rotate(-2deg) scale(1.03)}}

/* Make the preview's bottom tab strip clearly communicate that each tab has its own icon. */
.theme-shot .shot-tabs .shot-tab:nth-child(1) svg{filter:drop-shadow(0 0 4px var(--shot-a))}
.theme-shot .shot-tabs .shot-tab:nth-child(2) svg{opacity:.94}
.theme-shot .shot-tabs .shot-tab:nth-child(3) svg{opacity:.88}
.theme-shot .shot-tabs .shot-tab:nth-child(4) svg{transform:translateY(-.2px)}
.theme-shot .shot-tabs .shot-tab:nth-child(5) svg{opacity:.9}
.theme-shot .shot-tabs .shot-tab:nth-child(6) svg{filter:drop-shadow(0 0 4px var(--shot-a))}
.theme-shot .shot-tabs .shot-tab:nth-child(7) svg{opacity:.9}
.theme-shot .shot-tabs .shot-tab:nth-child(8) svg{opacity:1}

@media(prefers-reduced-motion:reduce){
  #main-nav .theme-nav-icon,.theme-shot .shot-tabs .shot-tab svg{animation:none!important}
}