/* ============================================================
   SUKG 毛玻璃主题（覆盖层，勿删）
   背景：/static/bg-soft.jpg（已预先烘焙模糊，性能友好）
   卸载：删除 index.html 中引用本文件的那一行即可
   ============================================================ */

:root{
  --bg: transparent;
  --panel: rgba(255,255,255,.40);
  --panel2: rgba(255,255,255,.28);
  --panel3: rgba(255,255,255,.22);
  --line: rgba(255,255,255,.60);
  --line2: rgba(206,222,240,.85);
  --text: #10222f;
  --muted: #3a5364;
  --dim: #5c7788;
  --accent: #2f6fe4;
  --accent-hover: #1f59c9;
  --accent-dim: rgba(47,111,228,.14);
  --danger: #d92d2d;
  --warn: #b45309;
  --r: 14px;
  --shadow: 0 10px 28px rgba(23,50,77,.14), inset 0 1px 0 rgba(255,255,255,.65);
}

html{background:#e3eef9}
html,body{background-color:transparent!important}

/* 背景图（已模糊）+ 柔光蒙层：固定层只做合成，滚动零重算 */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.12) 0%,
      rgba(234,244,254,.10) 45%,
      rgba(214,232,250,.22) 100%),
    url("/static/bg-soft.jpg") center center / cover no-repeat;
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:transform;
}

/* 说明：不再使用 backdrop-filter。
   背景图的模糊已经烘焙进 bg-soft.jpg，视觉效果一致，
   但滚动时浏览器不需要逐帧重算模糊，低配设备也不会卡。 */

/* 顶栏 / 页头 / 页脚 */
.topbar{background:rgba(255,255,255,.72)!important;border-bottom:1px solid rgba(255,255,255,.78)}
.main-h{background:rgba(255,255,255,.55)!important;border-bottom:1px solid rgba(255,255,255,.75)}
.footer{background:rgba(255,255,255,.42)!important;border-top:1px solid rgba(255,255,255,.7)}
.side{background:rgba(255,255,255,.55)!important}

/* 卡片 / 统计 / 弹窗 圆角化 */
.card{border-radius:20px;border:1px solid rgba(255,255,255,.65);box-shadow:var(--shadow)}
.card.tight{overflow:hidden}
.stats{border-radius:20px;border:1px solid rgba(255,255,255,.65)}
.modal{border-radius:22px;border:1px solid rgba(255,255,255,.7);box-shadow:0 24px 60px rgba(16,40,66,.22);background:rgba(255,255,255,.82)!important}
.mask{background:rgba(16,34,52,.32)!important}

/* 按钮：胶囊 + 立体感 */
.btn{
  border-radius:999px!important;
  padding:0 18px;
  border-color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.62);
  box-shadow:0 2px 10px rgba(23,50,77,.07);
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.85);box-shadow:0 6px 16px rgba(23,50,77,.12)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.sm{height:28px;padding:0 13px;font-size:12px}
.btn.primary{
  background:linear-gradient(135deg,#5a91f8,#2f6fe4)!important;
  border-color:transparent!important;
  box-shadow:0 8px 20px rgba(47,111,228,.32);
}
.btn.primary:hover{background:linear-gradient(135deg,#4a86f7,#1f59c9)!important;box-shadow:0 10px 24px rgba(47,111,228,.40)}
.btn.danger{background:rgba(255,245,245,.75)!important;border-color:rgba(243,180,180,.9)!important}
.btn.danger:hover{background:rgba(254,235,235,.95)!important}
.btn.ghost{background:transparent!important;box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.55)!important}

/* 导航 / 标签 圆润化 */
.nav a{border-radius:999px;transition:background .16s,color .16s}
.nav a.on{background:rgba(255,255,255,.72);color:var(--accent);box-shadow:0 2px 8px rgba(47,111,228,.16)}
.side nav a{transition:background .16s,color .16s}
.side nav a.on{background:rgba(255,255,255,.6)}
.tag{border-radius:999px;padding:1px 9px;border-color:rgba(255,255,255,.9);background:rgba(255,255,255,.55)}
.tag.ok{background:rgba(232,250,238,.85);border-color:rgba(190,225,200,.9)}
.tag.warn{background:rgba(253,246,228,.9);border-color:rgba(240,220,175,.9)}
.tag.err{background:rgba(254,239,239,.9);border-color:rgba(240,190,190,.9)}
.tag.info{background:rgba(233,241,255,.9);border-color:rgba(190,210,245,.9)}

/* 表单：玻璃输入框 */
.input,.select,textarea.input{
  border-radius:12px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 2px rgba(23,50,77,.05);
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.input:hover,.select:hover,textarea.input:hover{background:rgba(255,255,255,.78)}
.input:focus,.select:focus,textarea.input:focus{
  background:#fff;
  border-color:rgba(47,111,228,.75);
  box-shadow:0 0 0 4px rgba(47,111,228,.16);
}
.input::placeholder{color:#8ba0b0}

/* 表格 */
.table th{background:rgba(255,255,255,.30);color:var(--dim)}
.table td{border-bottom:1px solid rgba(255,255,255,.55)}
.table tbody tr{transition:background .14s}
.table tbody tr:hover{background:rgba(255,255,255,.42)}

/* 分页 / 代码块 / toast */
.pager{border-top:1px solid rgba(255,255,255,.6)}
.pager button{border-radius:999px;border-color:rgba(255,255,255,.9);background:rgba(255,255,255,.55)}
.pager button:hover{background:rgba(255,255,255,.85)}
.pager button.on{background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(47,111,228,.2)}
.code{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);border-radius:14px}
.toast{border-radius:14px;background:rgba(255,255,255,.86)!important;box-shadow:0 12px 30px rgba(16,40,66,.16)}

/* 滚动条 */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(120,150,175,.35);border-radius:999px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(100,135,165,.55);background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* 无障碍 / 低配设备：进一步降低动效与透明度开销 */
@media (prefers-reduced-motion: reduce){
  .btn,.table tbody tr{transition:none}
  .btn:hover{transform:none}
}
@media (prefers-reduced-transparency: reduce){
  .card,.stats,.modal{background:#fff!important}
}