/* ============================================================
   glass-theme.css — 磨砂玻璃皮肤覆盖层
   在 style.css 之后加载，只覆盖视觉（颜色/背景/模糊/圆角/阴影）。
   不改任何布局(grid列宽/flex)与 class/id，功能与移动端响应式沿用 style.css。
   回滚：删掉 index.html 里这一行 <link> 即恢复原样。
   ============================================================ */

:root {
  --bg: #e8ecf4;
  --card: rgba(255, 255, 255, .6);
  --border: rgba(255, 255, 255, .8);
  --text: #1c2030;
  --muted: #8a90a2;
  --primary: #0a7cff;
  --primary-d: #0a63c8;
  --green: #2fb45c;
  --red: #e5484d;
  --orange: #f08c1e;

  --glass: rgba(255, 255, 255, .58);
  --glass-strong: rgba(255, 255, 255, .74);
  --hairline: rgba(255, 255, 255, .8);
  --divider: rgba(28, 32, 48, .07);
  --g-shadow: 0 12px 40px rgba(30, 40, 80, .1), 0 2px 8px rgba(30, 40, 80, .05);
  --g-radius: 16px;
}

/* ---- 极光背景（不改 HTML，用 body 伪元素） ---- */
body {
  background: #e8ecf4;
  position: relative;
}
body::before, body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 0;
  pointer-events: none;
}
body::before { width: 720px; height: 720px; left: -180px; top: -260px; background: #bcd4ff; opacity: .55; }
body::after  { width: 640px; height: 640px; right: -160px; top: 6%;  background: #ffd9c2; opacity: .5; }
/* 让页面内容浮在背景之上；浮层自身沿用 style.css 的 fixed/sticky 定位。 */
.app-view, .login-view { position: relative; z-index: 1; }

/* ---- 通用玻璃卡工具（内部复用） ---- */
.settings-block, .acc-rows, .content-item, .table-scroll, .cockpit-wrap,
.kpi, .modal-card, .login-card, .job-item, .checkin-row, .notif-item,
.stat-pill, .interact-kpi, .interact-progress-body, .op-dash-head,
.ck-sum-grid > div, .cal-wrap {
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--hairline);
  box-shadow: var(--g-shadow);
}

/* ---- 侧栏：深色 → 浮动浅玻璃 ---- */
.sidebar {
  background: var(--glass);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  backdrop-filter: blur(28px) saturate(1.7);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: var(--g-shadow);
  margin: 12px 0 12px 12px;
  max-height: calc(100vh - 24px);
  position: sticky;
  top: 12px;
}
.logo { color: var(--text); font-weight: 700; }
.sidebar nav a {
  color: var(--muted);
  border-left: 3px solid transparent;
  border-radius: 10px;
  margin: 1px 8px;
  padding: 10px 12px;
}
.sidebar nav a:hover { background: rgba(255, 255, 255, .55); color: var(--text); }
.sidebar nav a.active {
  background: var(--glass-strong);
  border-left-color: transparent;
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(30, 40, 80, .08), inset 0 0 0 1px rgba(255, 255, 255, .9);
}
.sidebar-foot { border-top: 1px solid var(--divider); color: var(--muted); }
.sidebar-logout { color: var(--primary); }
.sidebar-logout:hover { color: var(--red); }

.main { padding: 18px 22px; }
.tab-head h2 { font-weight: 700; }

/* ---- 按钮 ---- */
button {
  border: 1px solid var(--hairline);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--text);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(30, 40, 80, .06);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
button:hover { background: var(--glass-strong); box-shadow: 0 3px 10px rgba(30, 40, 80, .1); }
button:active { transform: scale(.97); }
button.primary {
  background: linear-gradient(135deg, #0a7cff, #3f68ff);
  color: #fff; border-color: transparent;
  box-shadow: 0 5px 16px rgba(10, 124, 255, .35); font-weight: 600;
}
button.primary:hover { background: linear-gradient(135deg, #0a70ec, #375ce6); box-shadow: 0 7px 20px rgba(10, 124, 255, .45); }
button.publish-start { background: linear-gradient(135deg, #2fb45c, #26a24f); color: #fff; border-color: transparent; }
button.publish-pause { background: linear-gradient(135deg, #f5a623, #f08c1e); color: #fff; border-color: transparent; }
button.danger { color: var(--red); border-color: rgba(229, 72, 77, .3); }
button.warn { color: var(--orange); border-color: rgba(240, 140, 30, .35); }

/* ---- 输入框 ---- */
input, select, textarea {
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 10px;
  box-shadow: inset 0 1px 3px rgba(30, 40, 80, .05);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(10, 124, 255, .15);
}

/* ---- 卡片容器细节 ---- */
.settings-block { border-radius: var(--g-radius); padding: 18px 20px; }
.acc-rows { border-radius: var(--g-radius); }
.acc-row { border-bottom: 1px solid var(--divider); }
.acc-row:hover { background: rgba(255, 255, 255, .45); }
.content-item { border-radius: var(--g-radius); }
.content-item:hover { background: rgba(255, 255, 255, .5); }

/* ---- 表格 ---- */
.log-table, .cockpit-table, .op-table {
  background: transparent;
}
.log-table th, .cockpit-table th, .op-table th {
  background: rgba(255, 255, 255, .32);
  color: var(--muted);
  border-bottom: 1px solid var(--divider);
}
.log-table td, .cockpit-table td, .op-table td { border-bottom: 1px solid var(--divider); }
.log-table tbody tr:hover, .cockpit-table tbody tr:hover { background: rgba(255, 255, 255, .4); }
.table-scroll, .cockpit-wrap { border-radius: var(--g-radius); }
.cockpit-table th { background: rgba(244, 247, 252, .9); }

/* ---- KPI ---- */
.kpi { border-radius: var(--g-radius); padding: 14px 16px; }
.kpi.clickable:hover { border-color: var(--hairline); box-shadow: 0 6px 18px rgba(30, 40, 80, .14); transform: translateY(-1px); }
.kpi.clickable.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary), var(--g-shadow); }
.kpi-v { font-weight: 800; letter-spacing: -.5px; }

/* ---- 分桶 chip / 分段 ---- */
.bchip { background: rgba(255, 255, 255, .5); border: 1px solid var(--hairline); border-radius: 16px; }
.bchip:hover { background: rgba(255, 255, 255, .7); }
.bchip.active { background: linear-gradient(135deg, #0a7cff, #3f68ff); color: #fff; border-color: transparent; font-weight: 600; box-shadow: 0 3px 10px rgba(10, 124, 255, .3); }
.pub-tabs { border-bottom: 1px solid var(--divider); }
.pub-tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }

/* 新工作台与计划工作区沿用现有玻璃变量，不改变其信息层级。 */
.workspace-kpi, .plan-row, .selection-tray, .account-menu {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  border-color: var(--hairline);
  box-shadow: 0 4px 16px rgba(30, 40, 80, .08);
}
.workspace-panel { border-top-color: var(--divider); }
.action-item, .compact-head, .compact-row, .pool-account-pick { border-bottom-color: var(--divider); }
.account-more summary { background: var(--glass); border-color: var(--hairline); }

/* ---- 状态徽章：语义色保留，底色柔化 ---- */
.badge { border-radius: 8px; font-weight: 600; }
.badge.active, .badge.on { background: rgba(47, 180, 92, .15); color: #1d7a3e; }
.badge.expired { background: rgba(229, 72, 77, .13); color: #c0353a; }
.badge.off { background: rgba(28, 32, 48, .09); color: var(--muted); }
.badge.armed, .badge.used { background: rgba(240, 140, 30, .14); color: #a05a0e; }
.badge.fresh { background: rgba(10, 124, 255, .12); color: #0a63c8; }
.pill-good { background: rgba(47, 180, 92, .14); color: #1d7a3e; }
.pill-warn { background: rgba(240, 140, 30, .14); color: #a05a0e; }
.pill-bad  { background: rgba(229, 72, 77, .13); color: #c0353a; }

/* ---- 告警横幅 ---- */
.alert-banner { border-radius: 13px; background: rgba(240, 140, 30, .12); border-color: rgba(240, 140, 30, .22); color: #8f5309; }
.alert-banner.danger { background: rgba(229, 72, 77, .1); border-color: rgba(229, 72, 77, .2); color: #a52f34; }
.alert-banner.review { background: rgba(122, 92, 255, .1); border-color: rgba(122, 92, 255, .22); color: #5b3fd6; }

/* ---- 批量条 / 分组头 ---- */
.batch-bar { background: rgba(255, 255, 255, .42); border: 1px solid var(--hairline); border-radius: 12px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.batch-hint { color: #a05a0e; }
.acct-group-head { background: rgba(10, 124, 255, .1); color: #0a55b0; border-radius: 10px; }

/* ---- 进度条 ---- */
.progress { background: rgba(28, 32, 48, .1); }
.progress-bar { background: linear-gradient(90deg, #0a7cff, #3f68ff); }
.pbar { background: rgba(28, 32, 48, .09); }
.pbar-fill.pf-read { background: linear-gradient(90deg, #4f8dff, #7a5cff); }
.pbar-fill.pf-fans { background: linear-gradient(90deg, #f0a01e, #f0661e); }

/* ---- 弹窗 ---- */
.modal { background: rgba(20, 26, 45, .4); }
.modal-card {
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(20, 30, 70, .28);
}

/* ---- 采集 chips ---- */
.chip { background: rgba(255, 255, 255, .55); border: 1px solid var(--hairline); border-radius: 16px; }
.pick-open-btn { background: rgba(255, 255, 255, .6); border: 1px dashed var(--orange); color: #b45309; }
.pick-open-btn:hover { background: rgba(255, 247, 237, .8); }
.acc-chip { background: rgba(10, 124, 255, .1); border: 1px solid rgba(10, 124, 255, .2); color: #0a63c8; border-radius: 16px; }

/* ---- 发布下拉菜单 ---- */
.pub-menu { background: #fff; border: 1px solid var(--divider); border-radius: 12px; box-shadow: var(--g-shadow); }
.pub-menu a:hover { background: rgba(10, 124, 255, .08); }

/* ---- 通知项 ---- */
.notif-item { border-radius: 12px; }
.notif-item.unread { border-left: 3px solid var(--primary); background: rgba(10, 124, 255, .05); }

/* ---- 事件行 ---- */
.ev { background: rgba(255, 255, 255, .45); border: 1px solid var(--hairline); border-radius: 10px; }

/* ---- 登录卡 ---- */
.login-card {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  box-shadow: var(--g-shadow);
}

/* ---- 二维码框 ---- */
.qr-box img { border: 1px solid var(--hairline); border-radius: 12px; }

/* ---- 中等宽度防御：账号行动作按钮多，1280px 以下把动作整行换下去，
       避免账号名列被挤成 0 宽度竖排（沿用 style.css 在 900px 的换行模式，扩展区间）。 ---- */
@media (min-width: 761px) and (max-width: 1280px) {
  .acc-row { flex-wrap: wrap; }
  .acc-row-main { flex: 1 1 200px; min-width: 160px; }
  .acc-row-topic { flex-basis: 100%; }
  .acc-row-actions { flex-basis: 100%; justify-content: flex-start; flex-wrap: wrap; }
}

/* ---- 移动端顶栏：深色 → 玻璃（沿用 style.css 的布局，只改配色） ---- */
@media (max-width: 760px) {
  .mobile-header {
    position: sticky; top: 0; z-index: 35;
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    backdrop-filter: blur(24px) saturate(1.6);
    color: var(--text);
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 1px 8px rgba(30, 40, 80, .08);
  }
  .mobile-menu-btn, .mobile-nav-close { border-color: var(--divider); color: var(--text); }
  .mobile-menu-btn:hover, .mobile-nav-close:hover { background: rgba(28, 32, 48, .06); }
  .mobile-brand { color: var(--text); }
  .mobile-page-title { color: var(--muted); }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 45;
    margin: 0; border-radius: 0 18px 18px 0; max-height: 100dvh;
    box-shadow: 8px 0 24px rgba(20, 30, 70, .2);
  }
  .mobile-nav-backdrop { position: fixed; inset: 0; z-index: 40; }
  .sidebar-head { border-bottom: 1px solid var(--divider); }
  /* 低端机减负：移动端把最重的模糊降档，避免长列表滚动掉帧 */
  .settings-block, .acc-rows, .content-item, .table-scroll, .cockpit-wrap,
  .kpi, .modal-card, .interact-progress-body, .batch-bar, button {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  /* fixed 底部菜单必须相对视口定位，不能被祖先 backdrop-filter 建立包含块。 */
  .acc-rows { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* WEIQ 是连续工具工作区，压低通用玻璃卡和渐变按钮的视觉层级。 */
#tab-weiq button { border-radius: 6px; box-shadow: none; }
#tab-weiq button.primary, #tab-weiq button.primary:hover {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: none;
}
#tab-weiq input, #tab-weiq select, #tab-weiq textarea { border-radius: 6px; }
#tab-weiq .weiq-workspace { background: var(--glass); border-color: var(--hairline); }
#tab-weiq .weiq-list-pane, #tab-weiq .weiq-run-summary, #tab-weiq .weiq-status-line,
#tab-weiq .weiq-requirements { background: rgba(255, 255, 255, .34); }
#tab-weiq .weiq-list-item { background: rgba(255, 255, 255, .55); }
#tab-weiq .table-scroll {
  background: transparent;
  border: 1px solid var(--divider);
  border-radius: 6px;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}