/* ============================================================
   Sky Box 风格主题层（参考 keei.cc · 紫晶意象）
   —— 叠加在 style.css / query.css 之后，全站换肤 ——
   策略：
     1) 覆盖两套系统的设计令牌（颜色/圆角/阴影/字体）
     2) 定点覆盖硬编码的背景层与导航
     3) 组件质感（渐变主按钮 / 辉光 / 药丸导航 / 渐变标题）
   安全性：纯 CSS、无 DOM 注入、所有 var() 都带最终字面回退。
   ============================================================ */

/* ==========================================================
   1. 设计令牌 · 紫晶（深色，两系统默认）
   ========================================================== */
:root{
  /* —— 字体（keei 使用 MiSans）—— */
  --font-main:"MiSans",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;

  /* —— 背景（keei dark）—— */
  --bg-deep:#0b0a12;
  --bg-base:#0f0e17;
  --bg-surface:#1a1825;
  --bg-elevated:#252238;
  --bg-subtle:#2a2740;
  --bg-primary:#0f0e17;      /* 查询系统令牌 */
  --bg-secondary:#1a1825;
  --bg-tertiary:#252238;

  /* —— 玻璃表面 —— */
  --glass:rgba(26,24,37,.82);
  --glass-2:rgba(26,24,37,.58);
  --glass-3:rgba(26,24,37,.36);
  --glass-strong:rgba(31,28,46,.95);
  --glass-bg:rgba(26,24,37,.82);        /* 查询系统令牌 */
  --glass-bg-strong:rgba(31,28,46,.95);
  --glass-bg-hover:rgba(42,39,64,.92);
  --glass-border:rgba(167,139,250,.15);
  --glass-border-strong:rgba(167,139,250,.34);
  --glass-blur:18px;
  --glass-blur-lg:22px;
  --glass-shadow:0 12px 32px rgba(11,10,18,.4);

  /* —— 主色（keei 紫晶）—— */
  --primary:#a78bfa;
  --primary-light:#c4b5fd;
  --primary-lighter:#ddd6fe;
  --primary-dark:#8b5cf6;
  --primary-glow:rgba(167,139,250,.36);
  --primary-soft:rgba(167,139,250,.14);
  --primary-grad:linear-gradient(135deg,#a78bfa 0%,#67e8f9 100%);
  --primary-grad-2:linear-gradient(135deg,#8b5cf6 0%,#a78bfa 100%);
  --brand-primary:#a78bfa;

  /* —— 辅色 —— */
  --cyan:#67e8f9;
  --cyan-glow:rgba(103,232,249,.3);
  --cyan-soft:rgba(103,232,249,.12);
  --pink:#f0abfc;
  --pink-glow:rgba(240,171,252,.3);
  --pink-soft:rgba(240,171,252,.12);
  --gold:#fbbf24;
  --gold-glow:rgba(251,191,36,.3);
  --gold-soft:rgba(251,191,36,.12);

  /* —— 语义色 —— */
  --success:#34d399;
  --success-soft:rgba(52,211,153,.14);
  --warning:#fbbf24;
  --warning-soft:rgba(251,191,36,.14);
  --danger:#fb7185;
  --danger-soft:rgba(251,113,133,.14);
  --info:#67e8f9;
  --info-soft:rgba(103,232,249,.12);

  /* —— 文字 —— */
  --text:#ede9fe;
  --text-2:#c8c3dd;
  --text-3:#8f86a3;
  --text3:#8f86a3;
  --text-inv:#0f0e17;
  --text-primary:#ede9fe;    /* 查询系统令牌 */
  --text-secondary:#c8c3dd;
  --text-muted:#8f86a3;

  /* —— 边框 —— */
  --border:rgba(167,139,250,.09);
  --border-light:rgba(167,139,250,.06);
  --border-strong:rgba(167,139,250,.26);

  /* —— 阴影（keei 彩色柔和阴影）—— */
  --shadow-xs:0 1px 2px rgba(11,10,18,.24);
  --shadow-sm:0 2px 8px rgba(11,10,18,.28);
  --shadow:0 6px 20px rgba(11,10,18,.34);
  --shadow-lg:0 12px 32px rgba(11,10,18,.4);
  --shadow-xl:0 20px 56px rgba(11,10,18,.48);
  --glow-primary:0 0 24px rgba(167,139,250,.32);
  --glow-cyan:0 0 24px rgba(103,232,249,.28);
  --inset-glow:inset 0 1px 0 rgba(221,214,254,.07);

  /* —— 圆角（keei：4/6/10/14/20）—— */
  --r-xs:4px;
  --r-sm:8px;
  --r:12px;
  --r-lg:16px;
  --r-xl:20px;
  --r-pill:999px;
}

/* ==========================================================
   2. 浅色变体 · 紫晶（主系统 [data-theme=light]）
   ========================================================== */
[data-theme="light"]{
  --bg-deep:#e8e2f5;
  --bg-base:#f7f4fc;
  --bg-surface:#ffffff;
  --bg-elevated:#ffffff;
  --bg-subtle:#f2ebfb;
  --bg-primary:#f7f4fc;
  --bg-secondary:#ffffff;
  --bg-tertiary:#f2ebfb;

  --glass:rgba(255,255,255,.78);
  --glass-2:rgba(255,255,255,.58);
  --glass-3:rgba(255,255,255,.38);
  --glass-strong:rgba(255,255,255,.94);
  --glass-bg:rgba(255,255,255,.78);
  --glass-bg-strong:rgba(255,255,255,.94);
  --glass-bg-hover:rgba(255,255,255,.9);
  --glass-border:rgba(124,58,237,.16);
  --glass-border-strong:rgba(124,58,237,.32);

  --primary:#8b5cf6;
  --primary-light:#a78bfa;
  --primary-lighter:#c4b5fd;
  --primary-dark:#7c3aed;
  --primary-glow:rgba(139,92,246,.28);
  --primary-soft:rgba(139,92,246,.12);
  --primary-grad:linear-gradient(135deg,#8b5cf6 0%,#22d3ee 100%);
  --primary-grad-2:linear-gradient(135deg,#7c3aed,#a78bfa);

  --text:#2c2440;
  --text-2:#5a5270;
  --text-3:#8f86a3;
  --text-inv:#ffffff;
  --text-primary:#2c2440;
  --text-secondary:#5a5270;
  --text-muted:#8f86a3;

  --border:rgba(124,58,237,.12);
  --border-light:rgba(124,58,237,.08);
  --border-strong:rgba(124,58,237,.28);

  --shadow-xs:0 1px 2px rgba(76,29,149,.06);
  --shadow-sm:0 2px 8px rgba(76,29,149,.08);
  --shadow:0 6px 20px rgba(76,29,149,.1);
  --shadow-lg:0 12px 32px rgba(76,29,149,.12);
  --shadow-xl:0 20px 56px rgba(76,29,149,.16);
  --glow-primary:0 0 24px rgba(139,92,246,.22);
  --inset-glow:inset 0 1px 0 rgba(255,255,255,.7);
}

/* 查询系统：.dark = 墨夜（更深） */
.dark{
  --bg-deep:#08070d;
  --bg-base:#0b0a12;
  --bg-surface:#14121e;
  --bg-elevated:#1d1a2c;
  --bg-subtle:#221f33;
  --bg-primary:#0b0a12;
  --bg-secondary:#14121e;
  --bg-tertiary:#1d1a2c;

  --glass:rgba(20,18,30,.86);
  --glass-2:rgba(20,18,30,.6);
  --glass-3:rgba(20,18,30,.38);
  --glass-strong:rgba(24,21,36,.96);
  --glass-bg:rgba(20,18,30,.86);
  --glass-bg-strong:rgba(24,21,36,.96);
  --glass-bg-hover:rgba(30,26,44,.92);
}

/* ==========================================================
   3. 基础：字体 / 滚动条 / 选区
   ========================================================== */
body,
button,input,select,textarea{
  font-family:var(--font-main,"MiSans","PingFang SC","Microsoft YaHei",sans-serif);
}
::selection{background:rgba(167,139,250,.32);color:inherit;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(167,139,250,.22);border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:rgba(167,139,250,.4);}
*{scrollbar-color:rgba(167,139,250,.25) transparent;}

/* ==========================================================
   4. 背景层（定点覆盖硬编码颜色）
   ========================================================== */
/* 主系统：流动渐变背景 → 紫晶深空 */
.bg-gradient-flow{
  background:
    radial-gradient(900px 520px at 8% -6%,rgba(167,139,250,.20) 0%,transparent 60%),
    radial-gradient(800px 500px at 96% 4%,rgba(103,232,249,.12) 0%,transparent 55%),
    radial-gradient(1000px 700px at 50% 110%,rgba(139,92,246,.16) 0%,transparent 60%),
    linear-gradient(160deg,#141220 0%,#0f0e17 45%,#131022 100%);
  background-size:100% 100%,100% 100%,100% 100%,100% 100%;
  animation:none;
}
[data-theme="light"] .bg-gradient-flow{
  background:
    radial-gradient(900px 520px at 8% -6%,rgba(167,139,250,.22) 0%,transparent 60%),
    radial-gradient(800px 500px at 96% 4%,rgba(34,211,238,.14) 0%,transparent 55%),
    linear-gradient(160deg,#f7f4fc 0%,#f2ebfb 55%,#eef0fb 100%);
}
.bg-mesh-aurora::before{
  background:radial-gradient(circle,rgba(167,139,250,.14),transparent 65%);opacity:.7;
}
.bg-mesh-aurora::after{
  background:radial-gradient(circle,rgba(103,232,249,.10),transparent 65%);opacity:.6;
}
[data-theme="light"] .bg-mesh-aurora::before{background:radial-gradient(circle,rgba(139,92,246,.16),transparent 65%);opacity:.6;}
[data-theme="light"] .bg-mesh-aurora::after{background:radial-gradient(circle,rgba(34,211,238,.12),transparent 65%);opacity:.5;}

/* 查询系统：背景渲染层 */
.bg-renderer{position:fixed;inset:0;z-index:-2;overflow:hidden;}
.bg-gradient-layer{
  position:absolute;inset:0;
  background:
    radial-gradient(900px 520px at 10% -8%,rgba(167,139,250,.18) 0%,transparent 60%),
    radial-gradient(800px 500px at 94% 6%,rgba(103,232,249,.10) 0%,transparent 55%),
    radial-gradient(1000px 720px at 50% 112%,rgba(139,92,246,.14) 0%,transparent 60%),
    linear-gradient(160deg,#141220 0%,#0f0e17 48%,#131022 100%);
}
.dark .bg-gradient-layer{
  background:
    radial-gradient(900px 520px at 10% -8%,rgba(167,139,250,.14) 0%,transparent 60%),
    radial-gradient(800px 500px at 94% 6%,rgba(103,232,249,.08) 0%,transparent 55%),
    linear-gradient(160deg,#0e0c18 0%,#0b0a12 50%,#0d0b16 100%);
}
body{background:var(--bg-base,#0f0e17);}

/* ==========================================================
   5. 主系统 · keei 顶部导航（.knav）
   ========================================================== */
.knav{
  position:sticky;top:0;z-index:120;
  background:rgba(15,14,23,.72);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--glass-border,rgba(167,139,250,.15));
  box-shadow:0 1px 0 rgba(221,214,254,.03),0 8px 28px rgba(11,10,18,.35);
}
[data-theme="light"] .knav{
  background:rgba(255,255,255,.72);
  box-shadow:0 1px 0 rgba(124,58,237,.06),0 8px 28px rgba(76,29,149,.08);
}
.knav-inner{
  display:flex;align-items:center;gap:16px;
  padding:10px 22px;min-height:60px;
}
/* 品牌区 */
.knav-brand{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.knav-badge{
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;
  background:var(--primary-grad,linear-gradient(135deg,#a78bfa,#67e8f9));
  box-shadow:0 4px 16px rgba(167,139,250,.4),inset 0 1px 0 rgba(255,255,255,.35);
}
.knav-badge svg{width:20px;height:20px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));}
.knav-brand-text{display:flex;flex-direction:column;line-height:1.15;}
.knav-title{
  font-size:1.02rem;font-weight:800;letter-spacing:.5px;
  background:var(--primary-grad,linear-gradient(135deg,#a78bfa,#67e8f9));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.knav-sub{font-size:.68rem;color:var(--text-3,#8f86a3);letter-spacing:.12em;}
/* 链接区 */
.knav-links{
  display:flex;align-items:center;gap:4px;
  flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;
  -ms-overflow-style:none;padding:4px 2px;
}
.knav-links::-webkit-scrollbar{display:none;}
.knav-links .nav-item{
  flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--r-pill,999px);
  font-size:.84rem;font-weight:600;white-space:nowrap;
  color:var(--text-2,#c8c3dd);cursor:pointer;user-select:none;
  border:1px solid transparent;
  transition:all .22s cubic-bezier(.34,1.56,.64,1);
}
.knav-links .nav-item svg{width:15px;height:15px;opacity:.75;flex-shrink:0;}
.knav-links .nav-item:hover{
  color:var(--text,#ede9fe);
  background:var(--primary-soft,rgba(167,139,250,.14));
  border-color:var(--border,rgba(167,139,250,.09));
}
.knav-links .nav-item.active{
  color:#fff;
  background:var(--primary-grad,linear-gradient(135deg,#a78bfa,#67e8f9));
  box-shadow:0 4px 16px rgba(167,139,250,.4),inset 0 1px 0 rgba(255,255,255,.3);
}
.knav-links .nav-item.active svg{opacity:1;}
[data-theme="light"] .knav-links .nav-item.active{color:#fff;}
/* 操作区 */
.knav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.knav-clock{
  display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;
  padding:5px 12px;border-radius:var(--r-sm,8px);
  background:var(--primary-soft,rgba(167,139,250,.12));
  border:1px solid var(--border,rgba(167,139,250,.09));
}
.knav-time{font-size:.92rem;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--primary-light,#c4b5fd);letter-spacing:.04em;}
.knav-date{font-size:.62rem;color:var(--text-3,#8f86a3);}
.knav-btn{
  width:36px;height:36px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1rem;cursor:pointer;text-decoration:none;
  color:var(--text-2,#c8c3dd);
  background:var(--glass-2,rgba(26,24,37,.58));
  border:1px solid var(--glass-border,rgba(167,139,250,.15));
  transition:all .22s cubic-bezier(.34,1.56,.64,1);
}
.knav-btn svg{width:16px;height:16px;flex-shrink:0;}
.knav-btn:hover{
  color:var(--text,#ede9fe);transform:translateY(-1px);
  border-color:var(--border-strong,rgba(167,139,250,.26));
  box-shadow:0 6px 18px rgba(167,139,250,.28);
}
/* 进度条条带 */
.knav-progress{
  display:flex;align-items:center;gap:12px;
  padding:7px 22px;
  border-top:1px solid var(--border-light,rgba(167,139,250,.06));
}
.knav-progress .daily-progress-label{
  font-size:.72rem;color:var(--text-3,#8f86a3);white-space:nowrap;
}
.knav-progress .daily-progress-bar{flex:1;height:5px;}
.knav-progress .daily-progress-fill{
  background:var(--primary-grad,linear-gradient(135deg,#a78bfa,#67e8f9));
  box-shadow:0 0 12px rgba(167,139,250,.5);
}
/* 中屏以下：链接区隐藏，用抽屉 */
@media (max-width:1080px){
  .knav-links{display:none;}
  .knav-clock .knav-date{display:none;}
}

/* ==========================================================
   6. 查询系统 · keei 导航（.navbar）
   ========================================================== */
.navbar{
  background:rgba(15,14,23,.72);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--glass-border,rgba(167,139,250,.15));
  box-shadow:0 1px 0 rgba(221,214,254,.03),0 8px 28px rgba(11,10,18,.35);
}
.dark .navbar{
  background:rgba(11,10,18,.78);
}
.navbar-inner{display:flex;align-items:center;gap:16px;padding:10px 22px;min-height:60px;}
.navbar-brand{display:flex;align-items:center;gap:10px;flex-shrink:0;cursor:pointer;}
.navbar-badge{
  width:36px;height:36px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  background:var(--primary-grad,linear-gradient(135deg,#a78bfa,#67e8f9));
  box-shadow:0 4px 16px rgba(167,139,250,.4),inset 0 1px 0 rgba(255,255,255,.35);
}
.navbar-brand-name{
  font-size:1rem;font-weight:800;letter-spacing:.5px;
  background:var(--primary-grad,linear-gradient(135deg,#a78bfa,#67e8f9));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.navbar-brand-sep{color:var(--text-3,#8f86a3);}
.navbar-brand-sub{font-size:.8rem;color:var(--text-2,#c8c3dd);font-weight:600;}
.navbar-links{
  display:flex;align-items:center;gap:2px;flex:1;min-width:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.navbar-links::-webkit-scrollbar{display:none;}
.navbar-link{
  flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:var(--r-pill,999px);
  font-size:.82rem;font-weight:600;white-space:nowrap;
  color:var(--text-2,#c8c3dd);cursor:pointer;
  border:1px solid transparent;
  transition:all .2s cubic-bezier(.34,1.56,.64,1);
}
.navbar-link svg{width:14px;height:14px;opacity:.75;flex-shrink:0;}
.navbar-link:hover{
  color:var(--text,#ede9fe);
  background:var(--primary-soft,rgba(167,139,250,.14));
  border-color:var(--border,rgba(167,139,250,.09));
}
.navbar-link.active{
  color:#fff;
  background:var(--primary-grad,linear-gradient(135deg,#a78bfa,#67e8f9));
  box-shadow:0 4px 16px rgba(167,139,250,.4),inset 0 1px 0 rgba(255,255,255,.3);
}
.navbar-link.active svg{opacity:1;}
.navbar-btn{
  width:34px;height:34px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--text-2,#c8c3dd);
  background:var(--glass-2,rgba(26,24,37,.58));
  border:1px solid var(--glass-border,rgba(167,139,250,.15));
  transition:all .2s ease;
}
.navbar-btn:hover{
  color:var(--text,#ede9fe);transform:translateY(-1px);
  border-color:var(--border-strong,rgba(167,139,250,.26));
  box-shadow:0 6px 18px rgba(167,139,250,.28);
}
/* 移动端菜单 */
.navbar-mobile-menu{
  background:rgba(15,14,23,.96);
  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--glass-border,rgba(167,139,250,.15));
}
.navbar-mobile-link{color:var(--text-2,#c8c3dd);}
.navbar-mobile-link.active{color:var(--primary-light,#c4b5fd);}

/* 内容区标签导航 → keei 分段药丸 */
.tab-nav{
  display:inline-flex;gap:4px;padding:5px;
  background:var(--glass-2,rgba(26,24,37,.58));
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--glass-border,rgba(167,139,250,.15));
  border-radius:var(--r-pill,999px);
  overflow-x:auto;scrollbar-width:none;max-width:100%;
}
.tab-nav::-webkit-scrollbar{display:none;}
.tab-item{
  flex-shrink:0;padding:7px 15px;border-radius:var(--r-pill,999px);
  font-size:.82rem;font-weight:600;white-space:nowrap;
  color:var(--text-2,#c8c3dd);cursor:pointer;
  border-bottom:none !important;
  transition:all .2s cubic-bezier(.34,1.56,.64,1);
}
.tab-item:hover{background:var(--primary-soft,rgba(167,139,250,.14));color:var(--text,#ede9fe);}
.tab-item.active{
  color:#fff;
  background:var(--primary-grad,linear-gradient(135deg,#a78bfa,#67e8f9));
  box-shadow:0 4px 14px rgba(167,139,250,.38);
}

/* ==========================================================
   7. 组件质感增强（两系统通用）
   ========================================================== */
/* 主标题渐变（keei gradient-text）*/
.welcome-title{
  background:linear-gradient(135deg,#c4b5fd 0%,#67e8f9 55%,#a78bfa 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 0 24px rgba(167,139,250,.35));
}
.login-title,.kira-card h3{
  background:linear-gradient(135deg,#c4b5fd,#67e8f9);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* 渐变主按钮（keei cta-primary）*/
.btn-primary,.login-btn,.settings-btn{
  background:var(--primary-grad,linear-gradient(135deg,#a78bfa,#67e8f9));
  color:#fff;border:none;
  box-shadow:0 4px 18px rgba(167,139,250,.4),inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover,.login-btn:hover,.settings-btn:hover{
  filter:brightness(1.08);
  box-shadow:0 8px 26px rgba(167,139,250,.5),inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:active,.login-btn:active{transform:translateY(0) scale(.98);}

/* 次按钮：玻璃 */
.btn-secondary{
  background:var(--glass-2,rgba(26,24,37,.58));
  color:var(--text-2,#c8c3dd);
  border:1px solid var(--glass-border,rgba(167,139,250,.15));
}
.btn-secondary:hover{
  color:var(--text,#ede9fe);
  border-color:var(--border-strong,rgba(167,139,250,.26));
  background:var(--glass-3,rgba(26,24,37,.36));
}

/* 输入框聚焦：紫辉光 */
.input:focus,.form-input:focus,.glass-input:focus{
  border-color:var(--primary,#a78bfa);
  box-shadow:0 0 0 3px var(--primary-soft,rgba(167,139,250,.14)),
             0 0 18px rgba(167,139,250,.18);
}

/* 徽章 */
.badge{border-radius:var(--r-pill,999px);font-weight:600;}
.badge-success{background:rgba(52,211,153,.16);color:#34d399;}
.badge-warning{background:rgba(251,191,36,.16);color:#fbbf24;}
.badge-danger{background:rgba(251,113,133,.16);color:#fb7185;}
.badge-info{background:rgba(103,232,249,.14);color:#67e8f9;}
.badge-neutral{background:var(--primary-soft,rgba(167,139,250,.14));color:var(--primary-light,#c4b5fd);}

/* 标签芯片 */
.tag-chip{
  background:var(--primary-soft,rgba(167,139,250,.14));
  color:var(--primary-light,#c4b5fd);
  border:1px solid var(--border,rgba(167,139,250,.09));
  border-radius:var(--r-pill,999px);
}

/* 登录卡（查询系统）：紫晶玻璃 */
.login-card{
  background:var(--glass-bg,rgba(26,24,37,.82));
  border:1px solid var(--glass-border,rgba(167,139,250,.15));
  border-radius:var(--r-xl,20px);
  box-shadow:0 24px 64px rgba(11,10,18,.5),0 0 48px rgba(167,139,250,.14),
             inset 0 1px 0 rgba(221,214,254,.08);
  position:relative;overflow:hidden;
}
.login-card::before{
  content:'';position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,181,253,.55),transparent);
}
.login-logo-circle{
  background:var(--primary-grad,linear-gradient(135deg,#a78bfa,#67e8f9));
  color:#fff;
  box-shadow:0 8px 28px rgba(167,139,250,.45),inset 0 1px 0 rgba(255,255,255,.35);
  border-radius:14px;
}
.login-subtitle,.login-hint{color:var(--text-3,#8f86a3);}

/* 弹窗 */
.modal,.modal-card{
  border-radius:var(--r-xl,20px);
  box-shadow:0 24px 64px rgba(11,10,18,.55),0 0 56px rgba(167,139,250,.16),
             inset 0 1px 0 rgba(221,214,254,.07);
}

/* 进度条 */
.daily-progress-fill,
.music-bar-progress-fill{
  background:var(--primary-grad,linear-gradient(135deg,#a78bfa,#67e8f9)) !important;
}

/* 头像圈 */
.avatar-circle{
  border-color:var(--glass-border-strong,rgba(167,139,250,.34));
  box-shadow:0 12px 36px rgba(11,10,18,.5),0 0 44px rgba(167,139,250,.3),
             inset 0 1px 0 rgba(221,214,254,.1);
}

/* 左栏/侧栏玻璃 */
.left-col,.mobile-drawer{
  background:var(--glass,rgba(26,24,37,.82));
  border-color:var(--glass-border,rgba(167,139,250,.15));
}
[data-theme="light"] .left-col,
[data-theme="light"] .mobile-drawer{
  background:rgba(255,255,255,.78);
}
.drawer-group-title{color:var(--text-3,#8f86a3);font-size:.7rem;letter-spacing:.14em;}
.drawer-nav .nav-item{
  border-radius:var(--r-sm,8px);font-weight:600;
}

/* 面板标题渐变点 */
.panel-title{letter-spacing:.02em;}

/* 音乐底栏 */
.music-bar{
  background:rgba(15,14,23,.82);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  border-top:1px solid var(--glass-border,rgba(167,139,250,.15));
}
[data-theme="light"] .music-bar{background:rgba(255,255,255,.85);}

/* 移动端抽屉链接 */
.drawer-nav .nav-item.active{
  background:var(--primary-grad,linear-gradient(135deg,#a78bfa,#67e8f9));
  color:#fff;
}

/* ==========================================================
   8. 移动端适配（覆盖层自身的断点，恢复隐藏链接行为）
   ========================================================== */
@media (max-width:768px){
  .navbar-links{display:none;}
  .navbar-mobile-toggle{display:flex;}
  .navbar-brand-sub,.navbar-brand-sep{display:none;}
  .navbar-inner{padding:0 12px;height:52px;}
}
@media (max-width:1080px){
  .knav-links{display:none;}
  .knav-clock .knav-date{display:none;}
}

/* ==========================================================
   9. 减少动效偏好
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  .knav-links .nav-item,.navbar-link,.tab-item,.btn,.knav-btn,.navbar-btn{
    transition:none !important;
  }
}
