/* ══════════════════════════════════════════════════════════
   app/base.css — 设计变量 / 基础排版 / 节日装饰 / 外壳与顶栏 / 下拉 / 卡片 / 蜘蛛牌工具栏 / 数独键盘
   由原 assets/app.css 第 1–374 行拆出；七个文件按 index.html 里的顺序加载，层叠顺序与原来一致
   ══════════════════════════════════════════════════════════ */
/* 防止主题切换闪烁 */
html.preload-light body{background:#f4e8f0!important;}
html.preload-light body,html.preload-light{filter:none;}
/* 老变量名保留，但值一律引用 tokens.css 的语义层 —— 换主题只改令牌，
   老代码（35 个样式表、几千处引用）一行都不用动 */
/* 注意选择器里为什么带 body：主题令牌（--text-1 这些）定义在 body 上，
   而别名如果只写在 :root，var() 会在 :root 那一层就解析成深色值，
   浅色主题永远生效不了。两层各定义一份，body 这份会覆盖继承来的那份。 */
:root,body{--pink-light:var(--c-sakura-200);--pink-sakura:var(--c-sakura-300);--pink-glow:var(--c-sakura-500);--pink-deep:var(--c-sakura-600);--blue-accent:var(--c-sky-400);--gold-accent:var(--c-gold-400);--bg-deep:var(--surface-0);--bg-mid:#0e0828;--bg-warm:#180618;--glass-bg:var(--surface-1);--glass-border:var(--border-subtle);--glass-hover:var(--border-strong);--text-main:var(--text-1);--text-sub:var(--text-2);--text-dim:var(--text-3);--radius-xl:var(--r-xl);--radius-lg:var(--r-lg);--radius-md:var(--r-md);--shadow-card:var(--el-2);--shadow-hover:var(--el-3);--blur:blur(var(--blur-page));--transition:all var(--dur-1) var(--ease-out);}
/* 浅色下还需要覆盖的只剩两个渐变底色和时区卡：其余全部跟着令牌走 */
body.theme-light{--bg-mid:#fde0ea;--bg-warm:#f7dcea;--tz-card-bg:rgba(255,200,220,0.18);--tz-card-border:rgba(210,80,120,0.28);}
@media (prefers-color-scheme: light){body.theme-auto{--bg-mid:#fde0ea;--bg-warm:#f7dcea;--tz-card-bg:rgba(255,200,220,0.18);--tz-card-border:rgba(210,80,120,0.28);}}

/* ══ 赛博朋克主题 ══ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{font-size:16px;-webkit-text-size-adjust:100%;}
body{width:100%;min-height:100dvh;
  background:
    radial-gradient(ellipse at 20% 20%,rgba(99,40,160,.25) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 80%,rgba(180,30,80,.2) 0%,transparent 50%),
    radial-gradient(ellipse at 60% 10%,rgba(30,60,140,.2) 0%,transparent 45%),
    linear-gradient(135deg,var(--bg-deep) 0%,var(--bg-mid) 50%,var(--bg-warm) 100%);
  color:var(--text-main);font-family:var(--font-body);overflow-x:hidden;transition:background 0.5s,color 0.5s;}
/* width/height:100% 不能省：canvas 是替换元素，inset:0 不会把它拉伸，
   缺了这两行它会按「画布属性尺寸」显示（DPR 放大后就是一张超出屏幕的大图） */
#sakura-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:55;pointer-events:none;}
.toast{
  position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-80px);
  background:rgba(14,10,36,.92);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(167,139,250,.3);
  color:#e2e8f0;
  padding:12px 28px;border-radius:50px;font-size:.88rem;letter-spacing:.5px;
  z-index:99999;
  box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .4s cubic-bezier(0.16,1,0.3,1),opacity .4s;
  pointer-events:none;opacity:0;white-space:nowrap;
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
body.theme-light .toast{
  background:rgba(255,252,255,.95);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(180,80,120,.18);
  color:#2d1535;
  box-shadow:0 8px 28px rgba(180,80,120,.12),0 0 0 1px rgba(0,0,0,.04);
}
.pure-overlay{position:fixed;inset:0;z-index:50;display:none;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(6,11,25,0.96) 0%,rgba(17,12,38,0.96) 50%,rgba(26,10,24,0.96) 100%);-webkit-overflow-scrolling:touch;touch-action:none;overflow:hidden;}
.pure-overlay.active{display:flex;}
.pure-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;transition:opacity .5s;}
.pure-bg-dim{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.35);transition:background .3s;}
/* 公告横幅 / 节日倒计时条：见 assets/topstrip.css */
/* 樱花季 */
body.festival-sakura{--pink-sakura:#ff85c2;--gold-accent:#ffb7d5;}
/* 元旦/劳动节/中秋/端午 */
body.festival-newyear{--pink-sakura:#ffffaa;--gold-accent:#aaaaff;}
/* 春节 */
body.festival-cny{--pink-sakura:#ffcc44;--gold-accent:#ff4400;}
/* 劳动节 */
body.festival-labour{--pink-sakura:#ffdd44;--gold-accent:#ff8800;}
/* 国庆节 */
body.festival-nationalday{--pink-sakura:#ffdd00;--gold-accent:#ff2200;}
/* 中秋节 */
body.festival-midautumn{--pink-sakura:#ffcc66;--gold-accent:#ff9900;}
/* 端午节 */
body.festival-dragonboat{--pink-sakura:#66ffaa;--gold-accent:#00cc66;}
/* 万圣节 */
body.festival-halloween{--pink-sakura:#ff9933;--gold-accent:#cc44ff;}
/* 圣诞节 */
body.festival-christmas{--pink-sakura:#66dd88;--gold-accent:#ff4444;}
/* 情人节 */
body.festival-valentine{--pink-sakura:#ff6699;--gold-accent:#ff99bb;}
/* ══ 节日装饰 & 祝福语动画 ══ */
.fest-deco{position:absolute;user-select:none;line-height:1;will-change:transform;}
/* 摆动（灯笼/蜘蛛） */
@keyframes fest-swing{0%,100%{transform:rotate(-12deg) translateY(0);}50%{transform:rotate(12deg) translateY(4px);}}
/* 漂浮 */
@keyframes fest-float{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-18px) rotate(3deg);}}
/* 飘落（樱花） */
@keyframes fest-fall{0%{transform:translateY(-80px) rotate(0deg) scale(1);opacity:.9;}100%{transform:translateY(110vh) rotate(540deg) scale(.6);opacity:0;}}
/* 上升（烟火/气泡） */
@keyframes fest-rise{0%{transform:translateY(0) scale(1);opacity:.9;}100%{transform:translateY(-110vh) scale(.4);opacity:0;}}
/* 蝙蝠飞 */
@keyframes fest-bat{0%,100%{transform:translateX(0) scaleX(1);}45%{transform:translateX(60px) scaleX(1);}50%{transform:translateX(60px) scaleX(-1);}95%{transform:translateX(0) scaleX(-1);}}
/* 雪花 */
@keyframes fest-snow{0%{transform:translateY(-40px) translateX(0) rotate(0);opacity:.85;}100%{transform:translateY(110vh) translateX(60px) rotate(720deg);opacity:0;}}
/* 心跳 */
@keyframes fest-heart{0%,100%{transform:scale(1);}50%{transform:scale(1.25);}}
/* 大字福闪现（春节专属） */
@keyframes fest-fu-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-20deg);}60%{transform:translate(-50%,-50%) scale(1.1) rotate(2deg);}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg);}}
@keyframes fest-fu-out{0%{opacity:1;transform:translate(-50%,-50%) scale(1);}100%{opacity:0;transform:translate(-50%,-50%) scale(2);}}

/* 祝福语内容 */
@keyframes fest-greet-in{0%{opacity:0;transform:translateY(40px) scale(.85);}70%{transform:translateY(-6px) scale(1.02);}100%{opacity:1;transform:translateY(0) scale(1);}}
@keyframes fest-greet-out{0%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1.15);}}
@keyframes fest-greet-sub-in{0%{opacity:0;transform:translateY(16px);}100%{opacity:1;transform:translateY(0);}}
@keyframes fest-greet-fade{0%{opacity:0;}100%{opacity:1;}}
#fest-greeting .fg-sub{font-size:clamp(.9rem,2.5vw,1.25rem);color:rgba(255,255,255,.85);letter-spacing:3px;margin-top:14px;animation:fest-greet-sub-in .6s ease forwards;text-shadow:0 2px 12px rgba(0,0,0,.4);}
/* 节日全页色调叠加 */
#fest-deco-layer::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity 1.5s;pointer-events:none;}
body.festival-newyear      #fest-deco-layer::before{opacity:.06;background:radial-gradient(ellipse at 50% 0%,rgba(100,100,255,.5),transparent 70%);}
body.festival-cny          #fest-deco-layer::before{opacity:.07;background:radial-gradient(ellipse at 50% 0%,rgba(220,30,0,.6),transparent 70%);}
body.festival-sakura       #fest-deco-layer::before{opacity:.05;background:radial-gradient(ellipse at 50% 0%,rgba(255,130,200,.6),transparent 70%);}
body.festival-halloween    #fest-deco-layer::before{opacity:.07;background:radial-gradient(ellipse at 50% 100%,rgba(200,80,0,.6),transparent 70%);}
body.festival-christmas    #fest-deco-layer::before{opacity:.06;background:radial-gradient(ellipse at 50% 0%,rgba(0,160,60,.4),transparent 70%);}
body.festival-valentine    #fest-deco-layer::before{opacity:.05;background:radial-gradient(ellipse at 50% 50%,rgba(255,60,100,.4),transparent 70%);}
body.festival-labour       #fest-deco-layer::before{opacity:.06;background:radial-gradient(ellipse at 50% 50%,rgba(255,160,0,.4),transparent 70%);}
body.festival-nationalday  #fest-deco-layer::before{opacity:.07;background:radial-gradient(ellipse at 50% 0%,rgba(220,20,0,.6),transparent 70%);}
body.festival-midautumn    #fest-deco-layer::before{opacity:.06;background:radial-gradient(ellipse at 50% 30%,rgba(255,180,0,.4),transparent 70%);}
body.festival-dragonboat   #fest-deco-layer::before{opacity:.06;background:radial-gradient(ellipse at 50% 100%,rgba(0,160,80,.5),transparent 70%);}
/* 头像上传区（个人中心） */
.pc-avatar-img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid rgba(167,139,250,.4);background:linear-gradient(135deg,rgba(99,40,160,.3),rgba(180,30,80,.2));}
/* 头像预览 hover 遮罩 */
#pc-avatar-preview-wrap:hover .pc-av-hover-mask{opacity:1!important;}
.pc-av-hover-mask{opacity:0;transition:.2s;}
.app-shell{position:relative;z-index:2;display:grid;grid-template-rows:auto 1fr;min-height:100dvh;padding:20px;gap:20px;max-width:1600px;margin:0 auto;}

.header-bar{position:relative;z-index:20;display:flex;justify-content:space-between;align-items:center;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:0 24px;height:64px;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--shadow-card);gap:16px;}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand-title{font-size:clamp(.85rem,2vw,1.2rem);font-weight:700;letter-spacing:3px;background:linear-gradient(to right,#fff 0%,var(--pink-sakura) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap;}
.nav-actions{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;overflow:visible;}

/* ── 优化后的自定义下拉列表（融入毛玻璃及修复主题文字色） ── */
.custom-select-container{position:relative;min-width:160px;font-family:var(--font-body);}
.custom-select-trigger{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);color:var(--text-main);padding:8px 36px 8px 16px;border-radius:50px;cursor:pointer;transition:var(--transition);outline:none;font-size:.82rem;width:100%;text-align:left;position:relative;}
.custom-select-trigger::after{content:'▾';position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--pink-sakura);pointer-events:none;font-size:.8rem;transition:transform 0.3s;}
.custom-select-container.open .custom-select-trigger::after{transform:translateY(-50%) rotate(180deg);}
.custom-select-trigger:hover,.custom-select-trigger:focus{background:rgba(255,183,197,.12);border-color:var(--pink-sakura);box-shadow:0 0 16px rgba(255,183,197,.2);}

/* 下拉菜单面板实现真正的毛玻璃效果 */
.custom-select-options{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    width:100%;
    background:rgba(26,10,46,0.75); /* 默认暗色底，半透明 */
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,183,197,0.2);
    border-radius:16px;
    box-shadow:0 16px 48px rgba(0,0,0,0.4);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:var(--transition);
    z-index:999;
    max-height:280px;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,183,197,.3) transparent;
}
.custom-select-container.open .custom-select-options{opacity:1;visibility:visible;transform:translateY(0);}
.custom-select-option{padding:10px 16px;color:var(--text-main);cursor:pointer;transition:background 0.2s, color 0.2s;font-size:.82rem;white-space:nowrap;}
.custom-select-option:hover{background:rgba(255,183,197,.15);color:#fff;}
.custom-select-option.selected{background:rgba(255,183,197,.25);color:var(--pink-glow);font-weight:500;}

/* 专门针对白天模式下的下拉菜单Bug修复（防止文字隐藏，完美贴合浅色毛玻璃） */
body.theme-light .custom-select-trigger {
    background: rgba(255,255,255,0.4);
}
body.theme-light .custom-select-options {
    background: rgba(255,240,245,0.8); /* 适配白天的浅粉晶莹底色 */
    border-color: rgba(230,100,140,0.25);
    box-shadow: 0 16px 48px rgba(180,80,120,0.15);
}
body.theme-light .custom-select-option {
    color: #4a2834 !important; /* 确保文字绝对清晰不被隐藏 */
}
body.theme-light .custom-select-option:hover {
    background: rgba(230,100,140,0.15);
    color: #000 !important;
}
body.theme-light .custom-select-option.selected {
    background: rgba(230,100,140,0.2);
    color: var(--pink-deep) !important;
}
/* ──────────────────────────────────── */

.btn-icon{width:40px;height:40px;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);color:var(--text-main);border-radius:50%;cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0;}
.btn-icon:hover{background:rgba(255,183,197,.15);border-color:var(--pink-sakura);transform:scale(1.1);}.btn-icon:active{transform:scale(.93);}
.btn-pure{background:linear-gradient(135deg,rgba(255,183,197,.15),rgba(232,80,122,.1));border:1px solid rgba(255,183,197,.25);color:var(--pink-sakura);padding:8px 18px;border-radius:50px;cursor:pointer;font-size:.82rem;font-family:var(--font-body);letter-spacing:1px;transition:var(--transition);white-space:nowrap;flex-shrink:0;}
.btn-pure:hover{background:linear-gradient(135deg,rgba(255,183,197,.25),rgba(232,80,122,.2));box-shadow:0 0 20px rgba(255,183,197,.25);transform:translateY(-1px);}
.main-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;}
.card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-xl);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--shadow-card);padding:28px;transition:var(--transition);}
.card:hover{border-color:var(--glass-hover);box-shadow:var(--shadow-hover);}
.card-title{font-size:.8rem;letter-spacing:3px;color:var(--pink-sakura);text-transform:uppercase;margin-bottom:18px;}
.left-col{display:flex;flex-direction:column;gap:20px;}
.main-clock-card{text-align:center;}
.clock-header{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px;}
.city-name{font-size:clamp(1.4rem,3vw,2.2rem);font-weight:700;color:var(--pink-sakura);letter-spacing:3px;}
.gmt-badge{display:inline-block;font-size:.78rem;color:var(--text-sub);background:rgba(255,255,255,.05);padding:4px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.06);letter-spacing:2px;}
.time-display{font-family:var(--font-display);font-size:clamp(3rem,9vw,7.5rem);font-weight:300;background:linear-gradient(180deg,#fff 30%,#ffe4e9 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1;margin-bottom:20px;letter-spacing:-2px;filter:drop-shadow(0 0 30px rgba(255,183,197,.2));}
.progress-label{position:absolute;right:0;top:10px;font-size:.68rem;color:var(--text-dim);letter-spacing:1px;white-space:nowrap;}
.date-display{font-size:clamp(.9rem,2vw,1.2rem);color:var(--text-sub);letter-spacing:2px;margin-bottom:16px;font-weight:300;}
.sub-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}
.greeting-badge{display:inline-block;font-size:.82rem;padding:6px 16px;border-radius:30px;background:linear-gradient(135deg,rgba(255,183,197,.12),rgba(232,80,122,.08));border:1px solid rgba(255,183,197,.2);color:var(--pink-deep);letter-spacing:1px;}
.astro-badge{display:inline-block;font-size:.82rem;padding:6px 16px;border-radius:30px;background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.18);color:var(--blue-accent);letter-spacing:1px;}
.timezone-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;}
.tz-card{background:var(--tz-card-bg,rgba(255,255,255,.02));border:1px solid var(--tz-card-border,rgba(255,255,255,.06));border-radius:var(--radius-lg);padding:16px;display:flex;flex-direction:column;gap:6px;transition:var(--transition);cursor:default;}
.tz-card:hover{background:rgba(255,183,197,.06);border-color:rgba(255,183,197,.2);transform:translateY(-3px);box-shadow:0 8px 24px rgba(255,183,197,.08);}
.tz-name{font-size:.88rem;font-weight:500;color:var(--text-main);}
.tz-offset{font-size:.7rem;color:var(--text-sub);letter-spacing:1px;}
.tz-time{font-family:var(--font-display);font-size:1.5rem;font-weight:500;color:var(--blue-accent);letter-spacing:1px;margin-top:4px;}
.right-col{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px;z-index:1;}
.pomo-card{text-align:center;}
.pomo-ring-wrap{position:relative;width:160px;height:160px;margin:0 auto 16px;}
.pomo-ring{width:100%;height:100%;transform:rotate(-90deg);}
.ring-bg{fill:none;stroke:rgba(255,255,255,.05);stroke-width:6;}
.ring-fill{fill:none;stroke:url(#pomoGradient);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1s linear;}
.pomo-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.pomo-display{font-family:var(--font-display);font-size:2rem;font-weight:500;color:var(--text-main);line-height:1;}
.pomo-mode{font-size:.7rem;color:var(--text-sub);letter-spacing:3px;margin-top:4px;}
.session-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.1);transition:all .3s;}
.session-dot.done{background:var(--pink-sakura);}
.pomo-controls{display:flex;gap:8px;justify-content:center;margin-bottom:12px;}
.btn-pomo{background:linear-gradient(135deg,rgba(255,183,197,.2),rgba(232,80,122,.15));border:1px solid rgba(255,183,197,.25);color:var(--pink-light);padding:9px 20px;border-radius:50px;cursor:pointer;font-size:.82rem;font-family:var(--font-body);letter-spacing:1px;transition:var(--transition);}
.btn-pomo:hover{background:linear-gradient(135deg,rgba(255,183,197,.3),rgba(232,80,122,.25));box-shadow:0 0 16px rgba(255,183,197,.2);transform:translateY(-2px);}.btn-pomo:active{transform:scale(.96);}
.btn-ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:var(--text-sub);}
.btn-ghost:hover{color:var(--text-main);background:rgba(255,255,255,.08);}
.wisdom-card{position:relative;overflow:hidden;}
.wisdom-card::before{content:'"';position:absolute;top:-10px;left:16px;font-size:8rem;font-family:Georgia,serif;color:rgba(255,183,197,.07);pointer-events:none;line-height:1;}
.wisdom-label{font-size:.8rem;color:var(--pink-sakura);letter-spacing:3px;text-transform:uppercase;margin-bottom:10px;}
.wisdom-text{font-style:italic;color:var(--text-sub);line-height:1.8;font-size:.88rem;border-left:2px solid rgba(255,183,197,.2);padding-left:14px;margin:0;}
.sw-display{font-family:var(--font-display);font-size:2rem;font-weight:300;text-align:center;color:var(--text-main);margin-bottom:16px;letter-spacing:2px;}
.sw-controls{display:flex;gap:8px;justify-content:center;margin-bottom:12px;}
.sw-laps{max-height:100px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,183,197,.2) transparent;}
.sw-lap-item{display:flex;justify-content:space-between;font-size:.78rem;color:var(--text-sub);padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.sw-lap-item:last-child{border-bottom:none;}
.sw-lap-time{color:var(--blue-accent);font-family:var(--font-display);}
@media(max-width:1100px){.main-grid{grid-template-columns:1fr;}.right-col{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}}
@media(max-width:768px){.app-shell{padding:12px;gap:12px;}.header-bar{padding:0 14px;height:56px;}.brand-title{display:none;}.btn-pure{padding:7px 12px;font-size:.75rem;}.custom-select-container{min-width:130px;}.custom-select-trigger{font-size:.75rem;padding:7px 30px 7px 12px;}.card{padding:20px 18px;}.time-display{font-size:clamp(2.8rem,14vw,5rem);letter-spacing:-1px;}.timezone-grid{grid-template-columns:repeat(2,1fr);}.right-col{grid-template-columns:1fr;}}
/* 320px 一档（iPhone SE 一代、小屏安卓、桌面分屏）：
   顶栏最小内容宽 314px，而这里只有 292px，多出来的部分被 overflow:hidden
   直接切掉 —— 公告和节日条右上角的关闭 × 会被切掉一半，点不到。
   这一档把内外边距、间距、城市选择器一起收一道。 */
@media(max-width:360px){
  .app-shell{padding:10px 8px;}
  .header-bar{padding:0 10px;gap:8px;}
  .nav-actions{gap:4px;}
  .custom-select-container{min-width:96px;}
  .custom-select-trigger{padding:7px 24px 7px 9px;font-size:.72rem;}
  .btn-icon{width:32px;height:32px;}
  .ann-btn,.fb-x{right:6px;}
}
@media(max-width:480px){.app-shell{padding:10px;gap:10px;}.nav-actions{gap:6px;}.btn-icon{width:36px;height:36px;}.timezone-grid{grid-template-columns:repeat(2,1fr);}.sub-row{gap:8px;}.greeting-badge,.astro-badge{font-size:.72rem;padding:5px 12px;}}
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,183,197,.2);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,183,197,.4);}
/* 隐藏页面主滚动条（保留滚动功能），消除右侧浅色竖线；内部面板滚动条不受影响 */
html::-webkit-scrollbar{width:0;height:0;}
html{scrollbar-width:none;-ms-overflow-style:none;}

/* ── 日历按钮 ── */
.btn-cal{width:40px;height:40px;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);color:var(--text-main);border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:background .18s,border-color .18s,transform .18s;flex-shrink:0;}
.btn-cal:hover{background:rgba(255,183,197,.15);border-color:var(--pink-sakura);transform:scale(1.1);}
.btn-cal:active{transform:scale(.93);}

/* ── 日历浮层 ── */
.cal-modal{position:fixed;z-index:9990;display:none;pointer-events:none;top:80px;left:16px;}
.cal-modal.open{display:block;}
.cal-panel{background:var(--cal-bg,rgba(12,16,36,0.88));border:1px solid var(--glass-border);border-radius:24px;padding:24px;width:320px;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);box-shadow:0 16px 48px rgba(0,0,0,.4),0 0 0 1px rgba(255,183,197,.1);pointer-events:all;animation:calFadeIn .22s cubic-bezier(0.16,1,0.3,1);}
body.theme-light .cal-panel{--cal-bg:rgba(255,238,248,0.92);}
@keyframes calFadeIn{from{opacity:0;transform:translateY(-10px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}

/* 日历头 */
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.cal-title{font-size:1rem;font-weight:600;color:var(--text-main);letter-spacing:1px;}
.cal-nav{width:30px;height:30px;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);border-radius:50%;cursor:pointer;color:var(--text-sub);font-size:.85rem;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.cal-nav:hover{background:rgba(255,183,197,.15);border-color:var(--pink-sakura);color:var(--pink-sakura);}

/* 星期头 */
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:8px;}
.cal-wd{text-align:center;font-size:.7rem;color:var(--text-dim);padding:4px 0;letter-spacing:.5px;}
.cal-wd:first-child{color:#f87171;}
.cal-wd:last-child{color:#60a5fa;}

/* 日期格 */
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cal-day{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;font-size:.82rem;color:var(--text-sub);transition:background .12s,color .12s,transform .12s;border:1px solid transparent;}
.cal-day:hover{background:rgba(255,183,197,.15);color:var(--pink-sakura);border-color:rgba(255,183,197,.25);transform:scale(1.08);}
.cal-day.today{background:linear-gradient(135deg,rgba(255,183,197,.3),rgba(232,80,122,.2));color:var(--pink-sakura);border-color:rgba(255,183,197,.4);font-weight:700;}
.cal-day.other-month{color:var(--text-dim);opacity:.4;}
.cal-day.sunday{color:#f87171;}
.cal-day.saturday{color:#60a5fa;}
.cal-day.today.sunday,.cal-day.today.saturday{color:var(--pink-sakura);}
.cal-day.has-festival::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--gold-accent);}

/* 节日提示 */
.cal-festival-tip{min-height:32px;margin-top:14px;padding:8px 14px;border-radius:12px;background:rgba(255,183,197,.08);border:1px solid rgba(255,183,197,.15);font-size:.78rem;color:var(--pink-sakura);letter-spacing:.5px;text-align:center;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px;}

/* 今日亮点 */
.cal-today-row{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--glass-border);}
.cal-today-label{font-size:.72rem;color:var(--text-dim);}
.cal-today-val{font-size:.78rem;color:var(--text-sub);}
.cal-back-today{font-size:.7rem;background:none;border:1px solid var(--glass-border);color:var(--text-dim);padding:3px 10px;border-radius:20px;cursor:pointer;font-family:var(--font-body);transition:all .15s;}
.cal-back-today:hover{border-color:var(--pink-sakura);color:var(--pink-sakura);}

/* ── 计算器浮层 ── */
.calc-modal{position:fixed;z-index:9990;display:none;pointer-events:none;}
.calc-modal.open{display:block;}
.calc-panel{background:var(--cal-bg,rgba(12,16,36,0.88));border:1px solid var(--glass-border);border-radius:24px;padding:20px;width:300px;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);box-shadow:0 16px 48px rgba(0,0,0,.4),0 0 0 1px rgba(255,183,197,.1);pointer-events:all;animation:calFadeIn .22s cubic-bezier(0.16,1,0.3,1);}
body.theme-light .calc-panel{background:rgba(255,238,248,0.92);}

/* 按钮网格 */
.cb{height:56px;border-radius:14px;cursor:pointer;font-size:.92rem;font-family:var(--font-body);font-weight:500;border:1px solid transparent;transition:background .12s,transform .1s,box-shadow .12s;display:flex;align-items:center;justify-content:center;user-select:none;}
.cb:active{transform:scale(.92);}

/* ── 便签浮层 ── */
.note-modal{position:fixed;z-index:9990;display:none;pointer-events:none;}
.note-modal.open{display:block;}
.note-panel{background:var(--cal-bg,rgba(12,16,36,0.9));border:1px solid var(--glass-border);border-radius:24px;padding:20px;width:320px;max-height:calc(100dvh - 100px);display:flex;flex-direction:column;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);box-shadow:0 16px 48px rgba(0,0,0,.4),0 0 0 1px rgba(255,183,197,.1);pointer-events:all;animation:calFadeIn .22s cubic-bezier(0.16,1,0.3,1);}
body.theme-light .note-panel{background:rgba(255,238,248,0.93);}

@media(max-width:480px){
  .note-panel,.calc-panel,.cal-panel{width:calc(100vw - 32px);max-width:360px;}
  .nav-actions{gap:6px;}
  .btn-pure{display:none;}
  .brand-title{display:none;}
  .btn-cal{width:36px;height:36px;font-size:.9rem;}
  .btn-icon{width:36px;height:36px;}
  .app-shell{padding:10px;gap:10px;}
  .main-grid{gap:12px;}
  .card{padding:18px 16px;}
  .timezone-grid{grid-template-columns:repeat(2,1fr);}
  .cb{height:48px;font-size:.88rem;}
}
@media(max-width:768px){
  .note-panel,.calc-panel,.cal-panel{width:calc(100vw - 32px);max-width:380px;}
  .note-modal,.calc-modal,.cal-modal{padding:72px 16px 0;}
  .pomo-ring-wrap{width:140px;height:140px;}
  .right-col{grid-template-columns:1fr 1fr;}
}
@media(max-width:540px){
  .right-col{grid-template-columns:1fr;}
}

/* ══ 音效按钮静音态 ══ */
#btn-sound.muted{opacity:.45;filter:grayscale(1);}

/* 壁纸模式控制栏：见 assets/pure.css */

/* ══ 蜘蛛牌工具栏 ══ */
#spider-toolbar{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 12px;
  background:linear-gradient(180deg,rgba(10,12,28,.78),rgba(16,10,34,.9));
  border-top:1px solid rgba(255,226,170,.12);
  flex-wrap:wrap;
}
/* 蜘蛛牌全屏：牌桌居中放大，工具栏浮于底部 */
.gb-screen-inner:fullscreen{display:flex;align-items:center;justify-content:center;background:#04081a;width:100vw;height:100vh;}
.gb-screen-inner:fullscreen #game-canvas{flex:none;}
.gb-screen-inner:fullscreen #spider-toolbar{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);background:rgba(10,8,24,.94);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:8px 14px;z-index:5;}/* 不用背景模糊：底下牌桌每帧在动，模糊要跟着重算 */
.sp-tb-btn{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  color:#eef2ff;font-size:.8rem;font-weight:650;cursor:pointer;
  font-family:inherit;white-space:nowrap;letter-spacing:.5px;
  box-shadow:0 2px 0 rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform .12s,filter .15s,box-shadow .12s,opacity .15s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.sp-tb-btn svg{width:16px;height:16px;flex:none;}
.sp-tb-btn:hover{filter:brightness(1.14);transform:translateY(-1px);}
.sp-tb-btn:active{transform:translateY(1px) scale(.97);box-shadow:0 0 0 rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.1);}
.sp-tb-btn.sp-tb-deal{background:linear-gradient(180deg,#7465fb,#4a39d0);border-color:rgba(180,172,255,.55);}
.sp-tb-btn.sp-tb-undo{background:linear-gradient(180deg,rgba(245,184,48,.34),rgba(180,120,10,.22));border-color:rgba(250,204,21,.42);color:#fff7e0;}
.sp-tb-btn.sp-tb-hint{background:linear-gradient(180deg,rgba(52,211,153,.32),rgba(4,120,87,.22));border-color:rgba(110,231,183,.42);color:#ecfdf5;}
.sp-tb-btn.sp-tb-ghost{background:rgba(255,255,255,.06);color:rgba(238,242,255,.82);}
.sp-tb-badge{min-width:20px;height:18px;padding:0 6px;border-radius:9px;background:rgba(0,0,0,.3);
  font-size:.72rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;}
.sp-tb-btn:disabled,.sp-tb-btn[disabled]{opacity:.36;cursor:not-allowed;transform:none;filter:none;}
.sp-tb-sep{width:1px;height:22px;background:rgba(255,255,255,.12);flex-shrink:0;}
.sp-tb-info{font-size:.72rem;color:rgba(255,255,255,.42);text-align:center;padding:0 4px;}
@media(max-width:600px){
  #spider-toolbar{gap:6px;padding:7px 8px;}
  .sp-tb-btn{height:36px;padding:0 11px;font-size:.76rem;gap:5px;letter-spacing:0;}
  .sp-tb-btn.sp-tb-mini{padding:0 10px;}
  .sp-tb-btn.sp-tb-mini .sp-tb-lbl,.sp-tb-info,.sp-tb-sep{display:none;}
}
@media(max-width:420px){
  #spider-toolbar{gap:5px;padding:7px 6px;}
  .sp-tb-btn{padding:0 9px;}
  .sp-tb-btn.sp-tb-undo .sp-tb-lbl,.sp-tb-btn.sp-tb-hint .sp-tb-lbl{display:none;}
}

/* ══ 数独移动端数字键盘 ══ */
.sudoku-numpad{display:none;position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(10,6,30,.98),rgba(14,8,40,.96));border-top:1px solid rgba(99,102,241,.25);padding:10px 12px 12px;grid-template-columns:repeat(5,1fr);gap:8px;z-index:10;border-radius:0 0 12px 12px;}
.sudoku-numpad.show{display:grid;}
.sd-key{padding:12px 4px;border-radius:12px;background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.25);color:#c7d2fe;font-size:1.1rem;font-weight:700;font-family:monospace;cursor:pointer;text-align:center;transition:background .12s,transform .1s;user-select:none;}
.sd-key:active{background:rgba(99,102,241,.4);transform:scale(.92);}
.sd-key.sd-del{background:rgba(248,113,113,.15);border-color:rgba(248,113,113,.25);color:#f87171;}
.sd-key.sd-confirm{background:rgba(74,222,128,.15);border-color:rgba(74,222,128,.25);color:#4ade80;font-size:.8rem;}