/* css/base.css — Global resets, body/html, keyframe animations, dark theme overrides,
scrollbar styling. Load after variables.css. */
html{--fs:1;overflow-x:hidden} /* --fs: 全站字号缩放系数，设置面板的「字体大小」三档写它 */
body{font-family:var(--font);background:linear-gradient(180deg,#F0F7ED 0%,var(--bg) 30%,var(--bg) 70%,#EFF6FA 100%);color:var(--text);min-height:100vh;min-height:100dvh;min-height:-webkit-fill-available;padding-bottom:calc(var(--nav-height) + 20px);-webkit-font-smoothing:antialiased;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;overflow-x:hidden}
@keyframes navSlide{from{width:0;opacity:0}to{width:24px;opacity:1}}
.card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:transform var(--transition-normal),box-shadow var(--transition-normal);cursor:pointer;border:1px solid rgba(0,0,0,0.03)}
@keyframes slideUp{from{transform:translateY(100%);opacity:0.5}to{transform:translateY(0);opacity:1}}
.modal-handle{width:40px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 20px}
/* Dark mode adjustments */
body.theme-darkglass .immersive-card{background:rgba(15,22,40,0.6);border-color:rgba(var(--green-rgb),0.3)}
body.theme-darkglass .immersive-word-area{background:linear-gradient(135deg,rgba(var(--green-rgb),0.06),rgba(var(--blue-rgb),0.06))}
body.theme-darkglass .immersive-sentence{background:rgba(255,255,255,0.04)}
body.theme-darkglass .immersive-chinese{color:#e8e8e8}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateY(-10px)}}
/* Dark themes: weather banner glass adaptation */
body.theme-dark .lobby-welcome,body.theme-darkglass .lobby-welcome{
border:1.5px solid rgba(255,255,255,0.2)!important;
box-shadow:0 20px 50px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.15),inset 0 -1px 0 rgba(0,0,0,0.1)!important;
backdrop-filter:blur(20px) saturate(1.3)!important;
-webkit-backdrop-filter:blur(20px) saturate(1.3)!important;
}
body.theme-dark .lobby-welcome.period-dawn,body.theme-darkglass .lobby-welcome.period-dawn{background:linear-gradient(145deg,rgba(251,194,160,0.35) 0%,rgba(245,168,138,0.3) 50%,rgba(212,185,160,0.3) 100%)!important}
body.theme-dark .lobby-welcome.period-am,body.theme-darkglass .lobby-welcome.period-am{background:linear-gradient(160deg,rgba(116,185,255,0.3) 0%,rgba(168,216,234,0.25) 50%,rgba(223,230,233,0.2) 100%)!important}
body.theme-dark .lobby-welcome.period-noon,body.theme-darkglass .lobby-welcome.period-noon{background:linear-gradient(135deg,rgba(247,151,30,0.3) 0%,rgba(255,210,0,0.25) 100%)!important}
body.theme-dark .lobby-welcome.period-pm,body.theme-darkglass .lobby-welcome.period-pm{background:linear-gradient(150deg,rgba(86,204,242,0.3) 0%,rgba(47,128,237,0.3) 100%)!important}
body.theme-dark .lobby-welcome.period-evening,body.theme-darkglass .lobby-welcome.period-evening{background:linear-gradient(145deg,rgba(233,100,67,0.3) 0%,rgba(144,78,149,0.3) 100%)!important}
body.theme-dark .lobby-welcome.period-night,body.theme-darkglass .lobby-welcome.period-night{background:linear-gradient(160deg,rgba(15,12,41,0.6) 0%,rgba(48,43,99,0.5) 50%,rgba(36,36,62,0.5) 100%)!important}
@keyframes lw-drift-2{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}
@keyframes lw-drift-3{0%,100%{transform:translateX(0)}50%{transform:translateX(-8px)}}
@keyframes lw-moon-glow{0%,100%{box-shadow:0 0 20px rgba(255,249,230,0.5),0 0 50px rgba(255,240,200,0.2)}50%{box-shadow:0 0 30px rgba(255,249,230,0.7),0 0 70px rgba(255,240,200,0.3)}}
/* Stars */
@keyframes lw-twinkle{0%,100%{opacity:0.2;transform:scale(0.8)}50%{opacity:1;transform:scale(1.2)}}
.lw-star.big{width:4px;height:4px;box-shadow:0 0 8px rgba(255,255,255,0.7),0 0 16px rgba(200,220,255,0.3)}
@keyframes lw-shoot{0%,90%,100%{opacity:0;transform:translate(0,0)}92%{opacity:1}96%{opacity:1;transform:translate(-50px,30px)}98%{opacity:0;transform:translate(-60px,36px)}}
/* Evening sun (setting) */
@keyframes lw-bob{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-5px) rotate(8deg)}}
.lobby-mode-title{font-family:var(--font-display);font-size:calc(17px * var(--fs,1));font-weight:800;color:#1A3A0A;margin-bottom:12px}
@keyframes spin{to{transform:rotate(360deg)}}
/* Footer */
@keyframes randRoll{0%{transform:translateY(-100%);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(100%);opacity:0}}
.rand-roll-num{position:absolute;font-size:calc(64px * var(--fs,1));font-weight:900;color:var(--purple);font-family:monospace;opacity:0.4;animation:randRoll 0.15s linear forwards}
@keyframes diceRoll3d{0%{transform:rotateX(0) rotateY(0) scale(0.8)}25%{transform:rotateX(180deg) rotateY(90deg) scale(1.1)}50%{transform:rotateX(360deg) rotateY(180deg) scale(0.9)}75%{transform:rotateX(540deg) rotateY(270deg) scale(1.05)}100%{transform:rotateX(720deg) rotateY(360deg) scale(1)}}
.dice-dot{width:100%;height:100%;border-radius:50%;background:transparent}
@keyframes confettiFall{0%{transform:translateY(-10px) rotate(0);opacity:1}100%{transform:translateY(120px) rotate(720deg);opacity:0}}
.rand-confetti{position:absolute;width:6px;height:6px;border-radius:1px;animation:confettiFall 1s ease-out forwards;pointer-events:none}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#ccc}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-30px) rotate(5deg)}50%{transform:translateY(-15px) rotate(-3deg)}75%{transform:translateY(-40px) rotate(2deg)}}
/* ═══ Halloween Dark Theme ═══ */
body.theme-dark{position:relative;background:#000!important}
/* Dark theme: dp-card (daily plan) */
body.theme-dark .dp-card{background:linear-gradient(135deg,#1c1a14,#201c10)!important;border-color:rgba(232,168,0,0.15)!important}
body.theme-dark .dp-card-title{color:#E8C248!important}
body.theme-dark .dp-card-badge{background:rgba(232,168,0,0.12)!important;color:#E8A800!important}
body.theme-dark .dp-card-bar{background:rgba(232,168,0,0.1)!important}
body.theme-dark .dp-card-bar-fill{background:linear-gradient(90deg,#E8A800,#E88A00)!important}
body.theme-dark .dp-card-count{color:#E8A800!important}
body.theme-dark .dp-card-btn-primary{background:linear-gradient(135deg,#E8A800,#CC9400)!important;box-shadow:0 2px 8px rgba(232,168,0,0.2)!important}
body.theme-dark .dp-card-btn-secondary{background:rgba(232,168,0,0.08)!important;color:#E8C248!important}
body.theme-dark .dp-card-btn-tertiary{background:rgba(255,255,255,0.05)!important;color:#aaa!important}
/* Dark theme: lobby mode section */
body.theme-dark .lobby-mode-title{color:#E8C248!important}
body.theme-dark .lobby-feature-card{background:linear-gradient(135deg,#B8860B 0%,#996F00 50%,#7A5800 100%)!important;box-shadow:0 6px 18px rgba(232,168,0,0.1)!important}
body.theme-dark .lobby-sub-cards .lobby-sub-card{background:#1c1a14!important;border-color:rgba(232,168,0,0.1)!important}
body.theme-dark .lobby-sub-card-title{color:#e0e0e0!important}
body.theme-dark .lobby-sub-card-desc{color:#999!important}
/* Dark theme: stat cards */
body.theme-dark .stat-card{background:#1c1a14!important;border-color:rgba(232,168,0,0.08)!important}
body.theme-dark .stat-num{color:#E8C248!important}
body.theme-dark .stat-label{color:#999!important}
/* Dark theme: section titles */
body.theme-dark .section-title{color:#e0e0e0!important}
/* Dark theme: hero banner smoother */
body.theme-dark .lobby-hero{background:linear-gradient(135deg,#1a1500 0%,#0d0d0d 100%)!important}
/* Dark theme: flashcard */
body.theme-dark .flashcard-front{background:linear-gradient(135deg,#1c1a10 0%,#2a2410 40%,#1a1808 100%)!important;border-color:#E8A800!important;box-shadow:0 8px 32px rgba(232,168,0,0.12),0 2px 8px rgba(0,0,0,0.3)!important}
body.theme-dark .flashcard-front::before{background:radial-gradient(circle,rgba(232,184,46,0.12),transparent 70%)!important}
body.theme-dark .flashcard-back{background:#1E1E1E!important;border-color:#E8C248!important;box-shadow:0 8px 32px rgba(0,0,0,0.4)!important}
body.theme-dark .fc-word{color:#E8C248!important}
body.theme-dark .fc-hint{color:#999!important}
body.theme-dark .fc-btn.know{background:linear-gradient(135deg,#E8A800,#CC9400)!important;box-shadow:0 2px 8px rgba(232,168,0,0.3)!important}
body.theme-dark .fc-btn.review{background:linear-gradient(135deg,#E88A00,#DE7100)!important;box-shadow:0 2px 8px rgba(232,138,0,0.3)!important}
body.theme-dark .fc-btn.skip{background:#2a2a2a!important;color:#aaa!important}
body.theme-dark .fc-progress{color:#e0e0e0!important}
body.theme-dark .study-header{background:linear-gradient(135deg,#B8860B,#996F00)!important}
body.theme-dark .filter-chip{background:#2a2a2a!important;border-color:#444!important;color:#e0e0e0!important}
body.theme-dark .filter-chip:hover{border-color:rgba(232,168,0,0.5)!important;color:#E8C248!important}
body.theme-dark .filter-chip.active{background:var(--green)!important;color:#000!important;border-color:var(--green)!important}
/* Dark theme: global text readability boost */
body.theme-dark{color:#E8E8E8}
body.theme-dark h1,body.theme-dark h2,body.theme-dark h3,body.theme-dark h4{color:#F0F0F0!important}
body.theme-dark .lobby-welcome{color:#F5F5F5!important}
body.theme-dark .lobby-welcome h2{color:#FFFFFF!important}
body.theme-dark .lobby-welcome .lw-clock{color:#FFFFFF!important}
body.theme-dark .lobby-welcome .lw-desc{color:rgba(255,255,255,0.7)!important}
body.theme-dark .lobby-welcome p{color:rgba(255,255,255,0.85)!important}
/* Dark themes: settings panel text */
body.theme-dark .settings-panel,body.theme-darkglass .settings-panel{background:#1E1E1E!important;border-color:rgba(232,168,0,0.1)!important;color:#E8E8E8!important}
body.theme-dark .settings-panel h3,body.theme-darkglass .settings-panel h3{color:#F0F0F0!important}
body.theme-dark .settings-group label,body.theme-darkglass .settings-group label{color:#ccc!important}
body.theme-dark .settings-group .option-btn,body.theme-darkglass .settings-group .option-btn{background:#2a2a2a!important;border-color:#444!important;color:#e0e0e0!important}
body.theme-dark .settings-group .option-btn.active,body.theme-darkglass .settings-group .option-btn.active{background:rgba(232,168,0,0.15)!important;border-color:#E8A800!important;color:#E8C248!important}
body.theme-dark .settings-group .option-btn:hover,body.theme-darkglass .settings-group .option-btn:hover{border-color:#E8A800!important}
body.theme-dark p,body.theme-dark span,body.theme-dark div,body.theme-dark label{color:inherit}
body.theme-dark .bottom-nav{background:rgba(18,18,18,0.88);border:1px solid rgba(232,168,0,0.12);border-top:1px solid rgba(232,168,0,0.2);box-shadow:0 4px 16px rgba(0,0,0,0.4),0 1px 3px rgba(0,0,0,0.2),inset 0 1px 0 rgba(232,168,0,0.08),inset 0 -1px 0 rgba(0,0,0,0.15);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2)}
/* R56-6：原先页面级的橙色径向光晕（三层 radial-gradient）已删除，背景回归纯黑。 */
body.theme-dark{--hero-grad-start:#1a1500;--hero-grad-end:#121212;--hero-text:#e8e8e8;--hero-pos-bg:rgba(232,168,0,0.15);--hero-btn-bg:rgba(232,168,0,0.12);--hero-btn-hover:rgba(232,168,0,0.25)}
body.theme-dark .wd-section{background:var(--card)}
body.theme-dark .wd-action-btn,body.theme-darkglass .wd-action-btn{color:#3C3C3C!important;background:#fff!important}
/* ═══ Dark themes: comprehensive text color override ═══ */
body.theme-dark,body.theme-darkglass{color:#E8E8E8!important}
body.theme-dark *,body.theme-darkglass *{color:inherit}
body.theme-darkglass h1,body.theme-darkglass h2,body.theme-darkglass h3,body.theme-darkglass h4,body.theme-darkglass h5,body.theme-darkglass h6{color:#F0F0F0!important}
body.theme-dark p,body.theme-dark span,body.theme-dark div,body.theme-dark label,body.theme-dark a,body.theme-dark li,body.theme-dark td,body.theme-dark th,
body.theme-darkglass p,body.theme-darkglass span,body.theme-darkglass div,body.theme-darkglass label,body.theme-darkglass a,body.theme-darkglass li,body.theme-darkglass td,body.theme-darkglass th{color:inherit}
/* Buttons that should keep specific colors */
body.theme-dark .fc-btn.know,body.theme-darkglass .fc-btn.know{color:#fff!important}
body.theme-dark .fc-btn.review,body.theme-darkglass .fc-btn.review{color:#fff!important}
body.theme-dark .filter-chip.active,body.theme-darkglass .filter-chip.active{color:#000!important}
body.theme-dark .study-sub-tab.active,body.theme-darkglass .study-sub-tab.active{color:#fff!important}
/* Settings panel keeps dark text on light bg */
body.theme-dark .settings-panel,body.theme-darkglass .settings-panel{color:#333!important}
body.theme-dark .settings-panel *,body.theme-darkglass .settings-panel *{color:inherit}
body.theme-dark .settings-panel h3,body.theme-darkglass .settings-panel h3{color:#222!important}
body.theme-dark .settings-group label,body.theme-darkglass .settings-group label{color:#444!important}
body.theme-dark .settings-group .option-btn,body.theme-darkglass .settings-group .option-btn{color:#333!important}
body.theme-dark .settings-group .option-btn.active,body.theme-darkglass .settings-group .option-btn.active{color:#E8C248!important}
body.theme-dark .wd-page,body.theme-darkglass .wd-page{color:#E8E8E8!important}
body.theme-dark .wd-page *,body.theme-darkglass .wd-page *{color:inherit}
body.theme-dark .wd-word,body.theme-darkglass .wd-word{color:#F5F5F5!important}
body.theme-dark .wd-phonetic,body.theme-darkglass .wd-phonetic{color:#aaa!important}
body.theme-dark #browse-overlay,body.theme-darkglass #browse-overlay{color:#E8E8E8!important}
body.theme-dark #browse-overlay *,body.theme-darkglass #browse-overlay *{color:inherit}
body.theme-dark #study-overlay,body.theme-darkglass #study-overlay{color:#E8E8E8!important}
body.theme-dark #study-overlay *,body.theme-darkglass #study-overlay *{color:inherit}
body.theme-dark .so-word,body.theme-darkglass .so-word{color:#F5F5F5!important}
body.theme-dark .so-meaning,body.theme-darkglass .so-meaning{color:#ddd!important}
body.theme-dark .immersive-card,body.theme-darkglass .immersive-card{color:#E8E8E8!important}
body.theme-dark .immersive-word,body.theme-darkglass .immersive-word{color:#F5F5F5!important}
body.theme-dark .immersive-chinese,body.theme-darkglass .immersive-chinese{color:#ddd!important}
body.theme-dark .imv-done-title,body.theme-darkglass .imv-done-title{color:#F5F5F5!important}
/* Lobby */
body.theme-dark .lobby-mode-title,body.theme-darkglass .lobby-mode-title{color:#F0F0F0!important}
body.theme-dark .section-label,body.theme-darkglass .section-label{color:#ccc!important}
body.theme-dark .nav-item,body.theme-darkglass .nav-item{color:#999!important}
body.theme-dark .nav-item.active,body.theme-darkglass .nav-item.active{color:var(--green)!important}
body.theme-dark .collection-word,body.theme-darkglass .collection-word{color:#e0e0e0!important}
body.theme-dark .collection-meaning,body.theme-darkglass .collection-meaning{color:#bbb!important}
body.theme-dark .toast,body.theme-darkglass .toast{color:#fff!important}
/* Input fields */
body.theme-dark input,body.theme-darkglass input{color:#E8E8E8!important;background:rgba(255,255,255,0.08)!important;border-color:rgba(255,255,255,0.15)!important}
body.theme-dark input::placeholder,body.theme-darkglass input::placeholder{color:#888!important}
body.theme-dark .cal-day,body.theme-darkglass .cal-day{color:#ddd!important}
body.theme-dark .cal-day.today,body.theme-darkglass .cal-day.today{color:#fff!important}
body.theme-dark .card,body.theme-darkglass .card{color:#E8E8E8!important}
body.theme-dark .stat-num,body.theme-darkglass .stat-num{color:#E8C248!important}
body.theme-dark .stat-label,body.theme-darkglass .stat-label{color:#999!important}
body.theme-dark #browse-unit-bar,body.theme-darkglass #browse-unit-bar{background:#121212!important}
body.theme-dark #browse-unit-bar .browse-subchip,body.theme-darkglass #browse-unit-bar .browse-subchip{background:#2a2a2a!important;border-color:#444!important;color:#e0e0e0!important}
body.theme-dark #browse-unit-bar .browse-subchip.active,body.theme-darkglass #browse-unit-bar .browse-subchip.active{background:#E8A800!important;color:#000!important;border-color:#E8A800!important}
body.theme-darkglass{
background:linear-gradient(145deg,#0a0e1a 0%,#0d1526 20%,#101b30 45%,#0c1424 70%,#080c16 100%)!important;
--hero-grad-start:rgba(120,180,255,0.2);
--hero-grad-end:rgba(180,120,255,0.15);
--hero-text:#e8f0ff;
--hero-pos-bg:rgba(120,180,255,0.15);
--hero-btn-bg:rgba(120,180,255,0.12);
--hero-btn-hover:rgba(120,180,255,0.25);
}
body.theme-darkglass h1,body.theme-darkglass h2,body.theme-darkglass h3,body.theme-darkglass h4{color:#F0F0F0!important}
body.theme-darkglass .lobby-welcome{color:#F5F5F5!important}
body.theme-darkglass .lobby-welcome h2{color:#FFFFFF!important}
body.theme-darkglass .lobby-welcome .lw-clock{color:#FFFFFF!important}
body.theme-darkglass .lobby-welcome .lw-desc{color:rgba(255,255,255,0.7)!important}
body.theme-darkglass .lobby-welcome p{color:rgba(255,255,255,0.85)!important}
body.theme-darkglass::before{
content:'';position:fixed;top:0;left:0;right:0;bottom:0;
background:
radial-gradient(ellipse 600px 400px at 15% 10%,rgba(100,160,255,0.12) 0%,transparent 70%),
radial-gradient(ellipse 500px 500px at 85% 80%,rgba(160,100,255,0.1) 0%,transparent 70%),
radial-gradient(ellipse 400px 300px at 60% 5%,rgba(80,220,200,0.07) 0%,transparent 60%),
radial-gradient(ellipse 350px 350px at 5% 85%,rgba(255,140,200,0.06) 0%,transparent 60%),
radial-gradient(ellipse 300px 250px at 50% 50%,rgba(120,180,255,0.04) 0%,transparent 50%);
pointer-events:none;z-index:0;
animation:lg-ambient 20s ease-in-out infinite alternate;
}
@keyframes lg-ambient{
0%{opacity:1;transform:scale(1)}
50%{opacity:0.85;transform:scale(1.02)}
100%{opacity:1;transform:scale(1)}
}
body.theme-darkglass::after{
content:'';position:fixed;top:-60%;left:-60%;width:220%;height:220%;
background:
conic-gradient(from 200deg at 30% 25%,transparent 0deg,rgba(255,255,255,0.015) 40deg,rgba(255,255,255,0.04) 60deg,rgba(255,255,255,0.015) 80deg,transparent 120deg),
conic-gradient(from 20deg at 70% 70%,transparent 0deg,rgba(255,255,255,0.01) 30deg,rgba(255,255,255,0.03) 50deg,rgba(255,255,255,0.01) 70deg,transparent 100deg);
pointer-events:none;z-index:0;
animation:lg-specular 16s ease-in-out infinite;
}
@keyframes lg-specular{
0%,100%{transform:translate(0,0) rotate(0deg)}
33%{transform:translate(2%,1.5%) rotate(0.5deg)}
66%{transform:translate(-1.5%,2%) rotate(-0.3deg)}
}
body.theme-darkglass .header{
background:
linear-gradient(135deg,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0.03) 30%,rgba(255,255,255,0.01) 60%,rgba(255,255,255,0.06) 100%),
rgba(15,20,35,0.45)!important;
backdrop-filter:blur(40px) saturate(1.8) brightness(1.1);
-webkit-backdrop-filter:blur(40px) saturate(1.8) brightness(1.1);
border:1px solid rgba(255,255,255,0.18)!important;
border-top-color:rgba(255,255,255,0.3)!important;
box-shadow:
0 4px 30px rgba(0,0,0,0.3),
0 1px 0 rgba(255,255,255,0.2) inset,
0 -1px 0 rgba(255,255,255,0.05) inset,
0 8px 40px rgba(100,160,255,0.06);
}
body.theme-darkglass .bottom-nav{
background:
linear-gradient(180deg,rgba(255,255,255,0.14) 0%,rgba(255,255,255,0.04) 20%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0.03) 80%,rgba(255,255,255,0.08) 100%),
radial-gradient(ellipse 120% 80% at 50% -20%,rgba(255,255,255,0.1) 0%,transparent 60%),
rgba(12,16,28,0.55)!important;
backdrop-filter:blur(50px) saturate(2) brightness(1.15);
-webkit-backdrop-filter:blur(50px) saturate(2) brightness(1.15);
border:1px solid rgba(255,255,255,0.22)!important;
border-top:1.5px solid rgba(255,255,255,0.4)!important;
border-bottom-color:rgba(255,255,255,0.08)!important;
border-radius:20px!important;
box-shadow:
/* Layer 1: outer dark shadow (depth, below everything) */
0 8px 32px rgba(0,0,0,0.45),
0 2px 8px rgba(0,0,0,0.3),
/* Layer 2: brightening halo (bridges glass to background) */
0 0 0 1px rgba(255,255,255,0.06),
0 -2px 12px rgba(140,180,255,0.08),
0 4px 20px rgba(140,180,255,0.05),
/* Layer 3: inner top edge light ring (small, sharp) */
inset 0 1.5px 0 rgba(255,255,255,0.35),
inset 0 2.5px 3px rgba(255,255,255,0.12),
/* Layer 4: inner bottom subtle reflection */
inset 0 -1px 0 rgba(255,255,255,0.06),
inset 0 -3px 6px rgba(255,255,255,0.03),
/* Layer 5: inner side glow for curvature feel */
inset 1px 0 0 rgba(255,255,255,0.06),
inset -1px 0 0 rgba(255,255,255,0.06);
}
body.theme-darkglass .bottom-nav .nav-item.active{
color:var(--green);
text-shadow:0 0 12px rgba(var(--green-rgb),0.5);
}
body.theme-darkglass .bottom-nav .nav-item{transition:all .2s ease}
body.theme-darkglass .bottom-nav .nav-item:active{transform:scale(0.9)}
body.theme-darkglass .search-result-card{
background:
linear-gradient(145deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.02) 40%,rgba(255,255,255,0.005) 70%,rgba(255,255,255,0.05) 100%),
rgba(15,22,40,0.35)!important;
backdrop-filter:blur(24px) saturate(1.6) brightness(1.05);
-webkit-backdrop-filter:blur(24px) saturate(1.6) brightness(1.05);
border:1px solid rgba(255,255,255,0.14)!important;
border-top-color:rgba(255,255,255,0.25)!important;
border-radius:18px!important;
box-shadow:
0 8px 32px rgba(0,0,0,0.2),
0 2px 8px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.15),
inset 0 -1px 0 rgba(255,255,255,0.03),
0 0 0 0.5px rgba(255,255,255,0.05);
transition:all .3s cubic-bezier(.4,0,.2,1);
}
body.theme-darkglass .word-card:hover{
background:
linear-gradient(145deg,rgba(255,255,255,0.14) 0%,rgba(255,255,255,0.04) 40%,rgba(255,255,255,0.01) 70%,rgba(255,255,255,0.07) 100%),
rgba(15,22,40,0.3)!important;
border-color:rgba(120,180,255,0.35)!important;
border-top-color:rgba(255,255,255,0.35)!important;
box-shadow:
0 12px 48px rgba(100,160,255,0.12),
0 4px 16px rgba(0,0,0,0.15),
inset 0 1px 0 rgba(255,255,255,0.2),
inset 0 -1px 0 rgba(255,255,255,0.04),
0 0 20px rgba(100,160,255,0.06);
transform:translateY(-2px);
}
body.theme-darkglass .modal-sheet{
background:
linear-gradient(160deg,rgba(255,255,255,0.09) 0%,rgba(255,255,255,0.02) 50%,rgba(255,255,255,0.04) 100%),
rgba(12,16,30,0.6)!important;
backdrop-filter:blur(40px) saturate(1.8) brightness(1.05);
-webkit-backdrop-filter:blur(40px) saturate(1.8) brightness(1.05);
border:1px solid rgba(255,255,255,0.15)!important;
border-top-color:rgba(255,255,255,0.28)!important;
border-radius:24px 24px 0 0!important;
box-shadow:0 -8px 60px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.15);
}
body.theme-darkglass .settings-panel{
background:
linear-gradient(155deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.02) 40%,rgba(255,255,255,0.04) 100%),
rgba(10,14,26,0.6)!important;
backdrop-filter:blur(36px) saturate(1.7) brightness(1.05);
-webkit-backdrop-filter:blur(36px) saturate(1.7) brightness(1.05);
border:1px solid rgba(255,255,255,0.15)!important;
border-top-color:rgba(255,255,255,0.25)!important;
border-radius:20px!important;
box-shadow:0 16px 64px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.12);
}
body.theme-darkglass .coin-panel{
background:
linear-gradient(145deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.02) 50%,rgba(255,255,255,0.04) 100%),
rgba(12,18,32,0.45)!important;
backdrop-filter:blur(28px) saturate(1.6);
-webkit-backdrop-filter:blur(28px) saturate(1.6);
border:1px solid rgba(255,255,255,0.14)!important;
border-top-color:rgba(255,255,255,0.22)!important;
border-radius:16px!important;
box-shadow:0 8px 32px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.12);
}
body.theme-darkglass #pomodoro-float{
background:
linear-gradient(145deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.02) 50%,rgba(255,255,255,0.05) 100%),
rgba(12,16,30,0.45)!important;
backdrop-filter:blur(24px) saturate(1.5);
-webkit-backdrop-filter:blur(24px) saturate(1.5);
border:1px solid rgba(255,120,120,0.25)!important;
border-top-color:rgba(255,180,180,0.3)!important;
border-radius:16px!important;
box-shadow:0 4px 24px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.12);
}
body.theme-darkglass .toast{
background:
linear-gradient(145deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.03) 50%,rgba(255,255,255,0.06) 100%),
rgba(12,16,30,0.55)!important;
backdrop-filter:blur(24px) saturate(1.5);
-webkit-backdrop-filter:blur(24px) saturate(1.5);
border:1px solid rgba(255,255,255,0.16)!important;
border-top-color:rgba(255,255,255,0.25)!important;
border-radius:14px!important;
box-shadow:0 8px 32px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.1);
color:var(--text);
}
body.theme-darkglass .audio-btn{
background:linear-gradient(145deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.02) 100%),rgba(15,22,40,0.3)!important;
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,0.12)!important;
border-top-color:rgba(255,255,255,0.2)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}
body.theme-darkglass .search-input{
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.12);
border-top-color:rgba(255,255,255,0.06);
border-radius:12px;
color:var(--text);
box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.04);
}
body.theme-darkglass .filter-chip:not(.active){
background:linear-gradient(145deg,rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.02) 100%),rgba(15,22,40,0.25)!important;
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.12)!important;
border-top-color:rgba(255,255,255,0.18)!important;
border-radius:20px!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
body.theme-darkglass .filter-chip{color:var(--text-light)}
body.theme-darkglass .filter-chip.active{
background:linear-gradient(135deg,rgba(var(--green-rgb),0.9),rgba(52,211,153,0.9));
border-color:rgba(var(--green-rgb),0.6);color:#fff;
box-shadow:0 2px 12px rgba(var(--green-rgb),0.3),inset 0 1px 0 rgba(255,255,255,0.2);
}
body.theme-darkglass .detail-section{
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.08);
border-top-color:rgba(255,255,255,0.12);
border-radius:14px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
body.theme-darkglass .flashcard-container{background:transparent}
body.theme-darkglass .flashcard-counter{color:var(--text-light)}
body.theme-darkglass .flashcard-front{
background:
linear-gradient(155deg,rgba(120,180,255,0.12) 0%,rgba(160,120,255,0.06) 50%,rgba(80,220,200,0.04) 100%),
rgba(15,22,40,0.35)!important;
backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
border:1px solid rgba(120,180,255,0.25)!important;
border-top-color:rgba(255,255,255,0.3)!important;
border-radius:24px!important;
box-shadow:0 12px 48px rgba(0,0,0,0.2),0 0 30px rgba(100,160,255,0.06),inset 0 1px 0 rgba(255,255,255,0.15);
}
body.theme-darkglass .flashcard-back{
background:
linear-gradient(155deg,rgba(80,220,200,0.1) 0%,rgba(120,180,255,0.05) 50%,rgba(15,22,40,0.4) 100%)!important;
backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
border:1px solid rgba(80,220,200,0.2)!important;
border-top-color:rgba(255,255,255,0.25)!important;
border-radius:24px!important;
box-shadow:0 12px 48px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.12);
}
body.theme-darkglass .fc-btn{
background:linear-gradient(145deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.02) 100%),rgba(15,22,40,0.3);
border:1px solid rgba(255,255,255,0.12);
border-top-color:rgba(255,255,255,0.18);
border-radius:12px;
color:var(--text);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
transition:all .2s ease;
}
body.theme-darkglass .fc-btn:hover{
background:linear-gradient(145deg,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0.04) 100%),rgba(15,22,40,0.25);
border-color:rgba(255,255,255,0.2);
transform:translateY(-1px);
}
body.theme-darkglass .fc-btn.know{background:rgba(52,211,153,0.18);border-color:rgba(52,211,153,0.35);color:#34d399;box-shadow:0 2px 12px rgba(52,211,153,0.15),inset 0 1px 0 rgba(255,255,255,0.1)}
body.theme-darkglass .fc-btn.review{background:rgba(100,160,255,0.18);border-color:rgba(100,160,255,0.35);color:#60a5fa;box-shadow:0 2px 12px rgba(100,160,255,0.15),inset 0 1px 0 rgba(255,255,255,0.1)}
body.theme-darkglass .fc-btn.skip{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.1);color:var(--text-light)}
body.theme-darkglass .fc-word,body.theme-darkglass .fc-chinese{color:var(--text)}
body.theme-darkglass .fc-hint{color:var(--text-light)}
body.theme-darkglass .fc-sentence{color:var(--text-light);border-color:rgba(255,255,255,0.08)}
body.theme-darkglass .calc-container{
background:linear-gradient(155deg,rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.015) 100%),rgba(12,18,32,0.45)!important;
backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);
border:1px solid rgba(255,255,255,0.1)!important;
border-top-color:rgba(255,255,255,0.18)!important;
border-radius:20px!important;
box-shadow:0 8px 40px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.08);
}
body.theme-darkglass .calc-display-wrap{background:rgba(0,0,0,0.25)!important;border:1px solid rgba(255,255,255,0.1)!important;border-radius:14px!important;box-shadow:inset 0 2px 8px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.04)}
body.theme-darkglass .calc-expr{color:var(--text-light)}
body.theme-darkglass .calc-result{color:var(--text)}
body.theme-darkglass .calc-mode-btn{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1);color:var(--text-light);border-radius:10px}
body.theme-darkglass .calc-mode-btn.active{background:linear-gradient(135deg,rgba(var(--green-rgb),0.9),rgba(52,211,153,0.9));border-color:rgba(var(--green-rgb),0.5);color:#fff;box-shadow:0 2px 10px rgba(var(--green-rgb),0.25)}
body.theme-darkglass .calc-btn.num{
background:linear-gradient(145deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.02) 100%),rgba(15,22,40,0.3)!important;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,0.1);border-top-color:rgba(255,255,255,0.16);
border-radius:12px;
color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
body.theme-darkglass .calc-btn.op{
background:linear-gradient(145deg,rgba(100,160,255,0.12) 0%,rgba(100,160,255,0.04) 100%),rgba(15,22,40,0.25)!important;
border:1px solid rgba(100,160,255,0.2);border-top-color:rgba(100,160,255,0.3);
border-radius:12px;
color:var(--blue);box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}
body.theme-darkglass .calc-btn.sci{
background:rgba(167,139,250,0.12)!important;
border:1px solid rgba(167,139,250,0.2);border-top-color:rgba(167,139,250,0.28);
border-radius:12px;
color:var(--purple);box-shadow:inset 0 1px 0 rgba(167,139,250,0.1);
}
body.theme-darkglass .calc-btn.eq{background:linear-gradient(135deg,var(--green),var(--blue));color:#fff;box-shadow:0 4px 16px rgba(var(--green-rgb),0.3),inset 0 1px 0 rgba(255,255,255,0.2);border-radius:12px}
body.theme-darkglass .calc-hist-item{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.07);color:var(--text-light);border-radius:10px}
body.theme-darkglass .calc-hist-item:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12)}
/* ── Liquid glass tools ── */
body.theme-darkglass .pwd-container,body.theme-darkglass .cd-container,body.theme-darkglass .color-container,body.theme-darkglass .txt-container,body.theme-darkglass .wheel-container{
background:linear-gradient(155deg,rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.015) 100%),rgba(12,18,32,0.45)!important;
backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);
border:1px solid rgba(255,255,255,0.1)!important;
border-top-color:rgba(255,255,255,0.18)!important;
border-radius:20px!important;
box-shadow:0 8px 40px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.08);
}
body.theme-darkglass .elem-cell{border-color:rgba(255,255,255,0.1);border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.05)}
body.theme-darkglass .elem-cell:hover{box-shadow:0 3px 12px rgba(100,160,255,0.12),inset 0 1px 0 rgba(255,255,255,0.08)}
body.theme-darkglass .rand-container{
background:linear-gradient(155deg,rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.015) 100%),rgba(12,18,32,0.45)!important;
backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);
border:1px solid rgba(255,255,255,0.1)!important;
border-top-color:rgba(255,255,255,0.18)!important;
border-radius:20px!important;
box-shadow:0 8px 40px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.08);
}
body.theme-darkglass .rand-display{background:rgba(0,0,0,0.2)!important;border-color:rgba(255,255,255,0.1)!important;border-radius:14px!important;box-shadow:inset 0 2px 8px rgba(0,0,0,0.2)}
body.theme-darkglass .rand-preset{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1);color:var(--text-light);border-radius:10px}
body.theme-darkglass .rand-preset:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.16)}
body.theme-darkglass .rand-preset.active{background:linear-gradient(135deg,rgba(167,139,250,0.9),rgba(139,92,246,0.9));border-color:rgba(167,139,250,0.5);color:#fff;box-shadow:0 2px 10px rgba(167,139,250,0.25)}
body.theme-darkglass .dice-face{background:rgba(255,255,255,0.95);border-color:rgba(255,255,255,0.3);border-radius:12px}
body.theme-darkglass .rand-hist-item{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.07);color:var(--text-light);border-radius:10px}
body.theme-darkglass .rand-hist-item.latest{background:linear-gradient(135deg,rgba(167,139,250,0.9),rgba(139,92,246,0.9));color:#fff;border-radius:10px}
/* ── Liquid glass multiplication ── */
body.theme-darkglass .multiply-container{
background:linear-gradient(155deg,rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.015) 100%),rgba(12,18,32,0.45)!important;
backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);
border:1px solid rgba(255,255,255,0.1)!important;
border-top-color:rgba(255,255,255,0.18)!important;
border-radius:20px!important;
box-shadow:0 8px 40px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.08);
}
body.theme-darkglass .mul-cell{border-color:rgba(255,255,255,0.07);box-shadow:inset 0 1px 0 rgba(255,255,255,0.04)}
body.theme-darkglass .mul-header{background:rgba(255,255,255,0.07)!important;color:var(--text)!important;border-color:rgba(255,255,255,0.12)}
body.theme-darkglass .mul-num{color:var(--text)}
body.theme-darkglass .multiply-detail{background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.1);border-radius:12px;color:var(--text)}
body.theme-darkglass .settings-panel h3{color:var(--text)}
body.theme-darkglass .settings-group label{color:var(--text-light)}
body.theme-darkglass .settings-group .option-btn{
background:linear-gradient(145deg,rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.02) 100%),rgba(15,22,40,0.3);
border:1px solid rgba(255,255,255,0.12);border-top-color:rgba(255,255,255,0.18);
border-radius:10px;
color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
body.theme-darkglass .settings-group .option-btn:hover{
background:linear-gradient(145deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.04) 100%),rgba(15,22,40,0.25);
border-color:rgba(255,255,255,0.2);
}
body.theme-darkglass .settings-group .option-btn.active{
background:linear-gradient(135deg,rgba(var(--green-rgb),0.9),rgba(52,211,153,0.9));
border-color:rgba(var(--green-rgb),0.5);color:#fff;
box-shadow:0 2px 12px rgba(var(--green-rgb),0.25),inset 0 1px 0 rgba(255,255,255,0.2);
}
body.theme-darkglass .settings-panel .fc-btn.skip{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.1);color:var(--text-light)}
body.theme-darkglass .settings-panel .fc-btn.skip:hover{background:rgba(255,255,255,0.08)}
/* ── Liquid glass scrollbar ── */
body.theme-darkglass .settings-panel::-webkit-scrollbar{width:6px}
body.theme-darkglass .settings-panel::-webkit-scrollbar-track{background:transparent}
body.theme-darkglass .settings-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:3px}
body.theme-darkglass .settings-panel::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.25)}
body.theme-darkglass .settings-panel{scrollbar-color:rgba(255,255,255,0.15) transparent;scrollbar-width:thin}
/* ── Liquid glass form elements ── */
body.theme-darkglass select,body.theme-darkglass input[type="text"],body.theme-darkglass input[type="number"],body.theme-darkglass textarea{
background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12);
border-radius:10px;color:var(--text);
box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);
}
body.theme-darkglass select option{background:#0c1220;color:var(--text)}
body.theme-darkglass .modal-handle{background:rgba(255,255,255,0.2);border-radius:3px}
body.theme-darkglass .header-stat,body.theme-darkglass .progress-text{color:var(--text-light)}
body.theme-darkglass .word-card,body.theme-darkglass .search-result-card,body.theme-darkglass .detail-section{color:var(--text)}
body.theme-darkglass .word-card .word-en{color:var(--text)}
body.theme-darkglass .word-card .word-cn,body.theme-darkglass .search-empty{color:var(--text-light)}
body.theme-darkglass .wc-row{background:rgba(15,22,40,0.3);border-bottom-color:rgba(255,255,255,0.07);border-radius:8px}
body.theme-darkglass .wc-row:hover{background:rgba(255,255,255,0.07)}
body.theme-darkglass .bottom-nav .nav-item{color:var(--text-light)}
body.theme-darkglass .bottom-nav .nav-item.active{color:var(--green)}
body.theme-darkglass .wd-hero{
background:
linear-gradient(155deg,rgba(120,180,255,0.12) 0%,rgba(160,120,255,0.08) 50%,rgba(80,220,200,0.06) 100%),
rgba(15,22,40,0.4)!important;
backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);
border:1px solid rgba(120,180,255,0.2)!important;
border-top-color:rgba(255,255,255,0.25)!important;
border-radius:20px!important;
box-shadow:0 8px 32px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.12);
}
body.theme-darkglass .wd-section{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:14px}
/* ── Liquid glass tool panel overrides ── */
body.theme-darkglass .tool-panel [style*="background:var(--card)"]{background:rgba(255,255,255,0.03)!important}
body.theme-darkglass .tool-panel [style*="background:var(--card);"]{background:rgba(255,255,255,0.03)!important}
body.theme-darkglass [style*="background:#FFF"],body.theme-darkglass [style*="background:#F0F"],body.theme-darkglass [style*="background:#fff"]{background:rgba(255,255,255,0.03)!important}
/* ── Liquid glass background doodles ── */
body.theme-darkglass #checkin-btn{
background:linear-gradient(135deg,var(--green),var(--blue));color:#fff;border:none;
border-radius:14px;
box-shadow:0 4px 20px rgba(var(--green-rgb),0.3),inset 0 1px 0 rgba(255,255,255,0.2);
}
body.theme-darkglass .settings-overlay{background:rgba(0,0,0,0.55);backdrop-filter:blur(4px)}
body.theme-darkglass ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:3px}
body.theme-darkglass .browse-cats{background:rgba(255,255,255,0.05)}
body.theme-darkglass .browse-cat{color:var(--text-light)}
body.theme-darkglass .browse-cat.active{background:rgba(var(--green-rgb),0.18);color:var(--green);box-shadow:none}
body.theme-darkglass .browse-subchip{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1);color:var(--text-light)}
body.theme-darkglass .browse-subchip.active{background:linear-gradient(135deg,rgba(var(--green-rgb),0.9),rgba(52,211,153,0.9));border-color:rgba(var(--green-rgb),0.5);color:#fff}
body.theme-darkglass .browse-bookcard{
background:linear-gradient(145deg,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0.015) 100%),rgba(15,22,40,0.3);
border:1px solid rgba(255,255,255,0.1);border-top-color:rgba(255,255,255,0.16);
border-radius:14px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
body.theme-darkglass .browse-bookcard.selected{border-color:rgba(var(--green-rgb),0.4);background:linear-gradient(145deg,rgba(var(--green-rgb),0.08) 0%,rgba(255,255,255,0.02) 100%),rgba(15,22,40,0.3)}
body.theme-darkglass .browse-bookcard .bbc-title{color:var(--text)}
body.theme-darkglass .browse-bookcard .bbc-count{color:var(--text-light)}
body.theme-darkglass .browse-bookcard .bbc-check{border-color:rgba(255,255,255,0.15)}
body.theme-darkglass .browse-bookcard.selected .bbc-check{background:var(--green);border-color:var(--green)}
/* ── R51-3：万圣黑下的书架选择器（与主页 chip 同一套语言：胶囊容器 + 主色 tonal 激活态） ── */
body.theme-dark .browse-cats{background:rgba(255,255,255,0.05)}
body.theme-dark .browse-cat{color:var(--text-light)}
body.theme-dark .browse-cat.active{background:rgba(var(--green-rgb),0.18);color:var(--green);box-shadow:none}
body.theme-dark .browse-subchip{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12);color:var(--text-light)}
body.theme-dark .browse-bookcard{background:rgba(255,255,255,0.045);border-color:rgba(255,255,255,0.1);box-shadow:none}
body.theme-dark .browse-bookcard.selected{border-color:rgba(var(--green-rgb),0.45);background:linear-gradient(135deg,rgba(var(--green-rgb),0.1),rgba(255,255,255,0.04))}
body.theme-dark .browse-bookcard .bbc-title{color:var(--text)}
body.theme-dark .browse-bookcard .bbc-count{color:var(--text-light)}
/* ── Liquid glass bookshelf (study mode) ── */
body.theme-darkglass .bk-shelf-label{color:var(--text)}
body.theme-darkglass .bk-shelf-label::before{background:linear-gradient(180deg,rgba(120,180,255,0.8),rgba(160,120,255,0.8))}
body.theme-darkglass .bk-cover{box-shadow:0 4px 12px rgba(0,0,0,0.3),inset -3px 0 4px rgba(255,255,255,0.2),inset 3px 0 5px rgba(0,0,0,0.3)}
body.theme-darkglass .bk-book.selected .bk-cover{box-shadow:0 4px 12px rgba(0,0,0,0.3),0 0 0 3px rgba(15,22,40,0.8),0 0 0 5px rgba(var(--green-rgb),0.7),inset -3px 0 4px rgba(255,255,255,0.2)}
body.theme-darkglass .bk-board{background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03));box-shadow:0 2px 8px rgba(0,0,0,0.2)}
body.theme-darkglass .bk-chip{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1);color:var(--text-light)}
body.theme-darkglass .bk-chip.active{background:linear-gradient(135deg,rgba(var(--green-rgb),0.9),rgba(52,211,153,0.9));border-color:rgba(var(--green-rgb),0.5);color:#fff}
/* ── Liquid glass study settings ── */
body.theme-darkglass .study-settings-body{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:16px}
body.theme-darkglass .study-settings-toggle{color:var(--text-light)}
body.theme-darkglass .study-sub-tab{border-radius:10px}
/* ── Liquid glass section cards ── */
body.theme-darkglass .section{
background:linear-gradient(155deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.01) 100%),rgba(12,18,32,0.3)!important;
backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
border:1px solid rgba(255,255,255,0.08)!important;
border-top-color:rgba(255,255,255,0.14)!important;
border-radius:20px!important;
box-shadow:0 4px 24px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.06);
}
body.theme-darkglass .lobby-welcome{
background:linear-gradient(155deg,rgba(120,180,255,0.1) 0%,rgba(160,120,255,0.06) 100%),rgba(15,22,40,0.3)!important;
border:1px solid rgba(120,180,255,0.15)!important;
border-top-color:rgba(255,255,255,0.2)!important;
border-radius:20px!important;
box-shadow:0 8px 32px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.1);
}
@keyframes settingsPop{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes profileSlideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.profile-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px;border-bottom:1px solid var(--border)}
@keyframes lp-fade-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes lp-float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes so-bounce{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.so-complete-title{font-family:var(--font-display);font-size:calc(28px * var(--fs,1));font-weight:800;color:#1A3A0A;margin-bottom:8px}
body.theme-dark #tool-nav.browse-cats,body.theme-darkglass #tool-nav.browse-cats{background:rgba(255,255,255,0.06)}
/* === Sidebar Menu === */
body.theme-dark .sidebar-item:hover,body.theme-darkglass .sidebar-item:hover{background:rgba(255,255,255,0.05)}
body.theme-dark .plan-modal,body.theme-darkglass .plan-modal{background:#1e1e1e}
/* ===== Open interaction: selective text selection (not a global disable) ===== */
/* ═══ R52-3 / R52-4 ══════════════════════════════════════════════ */
/* 万圣黑：欢迎卡上的白色光晕（::before 顶部薄雾 / ::after 左下光斑）
在纯黑主题上就是一圈脏白，取消掉。 */
body.theme-dark .lobby-welcome::before,
body.theme-dark .lobby-welcome::after{background:none!important;box-shadow:none!important}
/* 万圣黑：顶栏原来跟着 layout.css 的写死白渐变，深色主题下整条白得刺眼
→ 跟随主题转黑（金边跟万圣黑的主色对齐）。 */
body.theme-dark .header{
background:rgba(18,18,18,0.92)!important;
backdrop-filter:blur(24px) saturate(1.2);
-webkit-backdrop-filter:blur(24px) saturate(1.2);
border-bottom:1px solid rgba(232,168,0,0.18)!important;
box-shadow:0 2px 16px rgba(0,0,0,0.45);
}
body.theme-dark .bottom-nav{background:rgba(18,18,18,0.92)!important}
/* 设置面板：两套深色主题都在每个分组下留一条白色分界线，分组之间才分得开。 */
/* R52-3：分界线画在「分组与分组之间」—— 用相邻兄弟 + border-top，
首组上方、末组下方（#settings-panel 末组后面还跟着「关闭/恢复默认」那一栏，
所以 :last-child 永远匹配不到，会多出一条悬空的线）。 */
body.theme-dark .settings-group + .settings-group,
body.theme-darkglass .settings-group + .settings-group{
border-top:1px solid rgba(255,255,255,0.14);
padding-top:14px;
}
/* 墨琉璃：选项按钮原来是 border-radius:10px / border:1px（43×36），
而薄荷青与万圣黑是 16px / 2px（45×37）—— 「字体大小」那一排一眼就看得出大小不对等。
只把圆角与边框粗细拉齐，玻璃渐变底与配色保留墨琉璃自己的。 */
body.theme-darkglass .settings-group .option-btn{
border-radius:16px;
border-width:2px;
}
body.theme-darkglass .settings-group .option-btn.active{border-width:2px}
/* 万圣黑：页面顶部（欢迎卡）也压成黑底 + 金边；夜空场景只留月亮与星星，取消光晕。 */
body.theme-dark .lobby-welcome,
body.theme-dark .lobby-welcome.period-dawn,
body.theme-dark .lobby-welcome.period-am,
body.theme-dark .lobby-welcome.period-noon,
body.theme-dark .lobby-welcome.period-pm,
body.theme-dark .lobby-welcome.period-evening,
body.theme-dark .lobby-welcome.period-night{
background:linear-gradient(160deg,rgba(26,26,26,0.96) 0%,rgba(18,18,18,0.96) 55%,rgba(12,12,12,0.96) 100%)!important;
border:1.5px solid rgba(232,168,0,0.22)!important;
box-shadow:0 12px 32px rgba(0,0,0,0.5)!important;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
/* 极光彩带（blur(8px) 横贯全卡）就是那圈雾气 → 隐掉 */
body.theme-dark .lw-aurora-band{display:none!important}
/* 月亮保留，但把 20~70px 的外发光压到一圈细边 */
body.theme-dark .lw-moon{animation:none!important;box-shadow:0 0 9px rgba(255,249,230,0.22)!important}
/* 页面级的金色径向光晕也一并取消，页面四周才是干净的黑 */
body.theme-dark::before{background:none!important}