/**
 * 白色主题层（在 styles.css / layout.css 之后加载）
 *
 * 主色：白。背景是极浅的冷灰，卡片是纯白 + 细边框 + 轻阴影，
 * 只有"内容状态"带一点淡色（绿=已完成 / 蓝=待发布 / 橙=待制作 / 灰=已取消），
 * 其余全部保持干净的白。
 */

:root {
  color-scheme: light;

  --accent: #2f6fed;
  --accent-dark: #1d55c9;
  --accent-soft: #eef3ff;
  --accent-line: #bcd0ff;

  --surface: #ffffff;
  --surface-2: #fbfcfe;
  --page: #f6f7f9;
  --border: #e8ebf0;
  --border-2: #f0f2f6;

  --ink: #131a24;
  --ink-2: #465063;
  --ink-3: #78829a;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 10px 28px -16px rgba(16, 24, 40, .28), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-lg: 0 24px 56px -24px rgba(16, 24, 40, .38), 0 2px 8px rgba(16, 24, 40, .06);

  --radius: 14px;
  --radius-lg: 18px;

  /* 状态色 */
  --amber: #c9760a;
  --amber-bg: #fff7ea;
  --blue: #2358c9;
  --blue-bg: #eef3ff;
  --green: #0b7a55;
  --green-bg: #eafaf3;
  --slate: #5b6b83;
  --slate-bg: #f2f4f8;

  --bg: var(--page);
  --line: var(--border);
  --line-2: var(--border-2);
}

/* ---------------- 底色：白 ----------------
   （上层曾有彩色渐变背景，这里用纯色把它盖掉） */

html, body { background: var(--page); }

body::before { display: none; }

.app, #auth-screen, #boot { background: transparent; }

/* ---------------- 顶栏 / 搜索栏 / 底部品牌栏：白底 + 细分隔线 ---------------- */

.appbar,
.searchbar,
.bottombar {
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-color: var(--border);
  box-shadow: none;
}

.appbar { border-bottom: 1px solid var(--border); }
.searchbar { border-bottom: 1px solid var(--border); }
.bottombar { border-top: 1px solid var(--border); box-shadow: 0 -6px 20px -14px rgba(16, 24, 40, .3); }

.appbar-title h1 { color: var(--ink); text-shadow: none; }
.appbar-title span { color: var(--ink-3); }
.appbar-user:hover { background: #f2f4f8; }

.searchbar input { background: var(--surface-2); border: 1px solid var(--border); }
.searchbar input:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 111, 237, .14); }

/* 顶部工具行的渐隐遮罩改回浅灰 */
.toolbar { background: linear-gradient(rgba(246, 247, 249, .92) 62%, rgba(246, 247, 249, 0)); }
.month-label { color: var(--ink); }
.month-label:hover { background: #eceff4; }

/* ---------------- 分段控件 / 按钮 / 图标按钮 ---------------- */

.segmented {
  background: #f1f3f7;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--border);
  box-shadow: none;
}
.segmented button { color: var(--ink-2); }
.segmented button.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.icon-btn {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--border);
  color: var(--ink-2);
}
.icon-btn:hover { background: #f7f9fc; border-color: #d8dee8; }

.btn {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--border);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: #f8fafc; border-color: #d8dee8; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(47, 111, 237, .8);
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn-ghost { background: #fff; }
.btn-danger-ghost { background: #fff5f7; border-color: #f4cdd4; }

.fab {
  background: var(--accent);
  box-shadow: 0 14px 28px -12px rgba(47, 111, 237, .9);
}
.fab:hover { background: var(--accent-dark); }

/* ---------------- 输入控件 ---------------- */

.input, textarea.input, .setting-row .input-inline {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--border);
  color: var(--ink);
}
.input:hover, .setting-row .input-inline:hover { border-color: #d8dee8; }
.input:focus, textarea.input:focus, .setting-row .input-inline:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, .14);
  background: #fff;
}

/* ---------------- 状态筛选胶囊 ---------------- */

.status-chip {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--border);
  color: var(--ink-3);
}
.status-chip:hover { background: #f8fafc; }
.status-chip.is-on { box-shadow: var(--shadow-sm); }
.status-chip.st-making.is-on { background: var(--amber-bg); border-color: #f0d8ad; color: var(--amber); }
.status-chip.st-ready.is-on { background: var(--blue-bg); border-color: var(--accent-line); color: var(--blue); }
.status-chip.st-done.is-on { background: var(--green-bg); border-color: #b6e8d3; color: var(--green); }
.status-chip.st-canceled.is-on { background: var(--slate-bg); border-color: #dde3ec; color: var(--slate); }

/* ---------------- 底部品牌栏：白底 + 深色选中（和 iOS 标签栏一个逻辑） ---------------- */

.btab {
  background: #f4f6f9;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid transparent;
  color: var(--ink-2);
}
.btab:hover { background: #eef1f6; }
.btab-count { background: #fff; color: var(--ink-3); }
.btab.is-active {
  background: #16233c;
  border-color: #16233c;
  color: #fff;
  box-shadow: 0 10px 22px -14px rgba(19, 26, 36, .9);
}
.btab.is-active .btab-count { background: rgba(255, 255, 255, .2); color: #fff; }
.btab.is-active::after { display: none; }
.btab-add { background: #fff; border: 1px dashed var(--border); color: var(--ink-3); }

/* ---------------- 内容卡片：白底 + 状态淡色 + 状态左边条 ---------------- */

.calendar,
.table-wrap,
.settings-panel,
.agenda-day {
  background: var(--surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cal-head { background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--ink-3); }

.day { border-right: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); }
.day:hover { background: #fafbfe; }
.day.is-out { background: #fbfcfd; }
.day.is-today { background: #f5f9ff; box-shadow: inset 0 0 0 2px var(--accent-line); }

.chip {
  background: var(--st-bg);
  border: 1px solid var(--st-line);
  border-left: 3px solid var(--st);
  box-shadow: var(--shadow-sm);
}
.chip:hover { box-shadow: 0 8px 20px -12px rgba(16, 24, 40, .35); }
.chip:active { filter: brightness(.985); }

.chip.st-making { --st: #c9760a; --st-bg: #fff7ea; --st-line: #f2dcb6; }
.chip.st-ready { --st: #2358c9; --st-bg: #eef3ff; --st-line: #cfdefc; }
.chip.st-done { --st: #0b7a55; --st-bg: #eafaf3; --st-line: #bfe8d6; }
.chip.st-canceled { --st: #5b6b83; --st-bg: #f2f4f8; --st-line: #dfe4ec; }

/* 状态标签：实心色块白字，扫一眼就能分辨 */
.chip-status { background: var(--st); color: #fff; border: 0; box-shadow: none; }
.chip-title { color: var(--ink); }
.chip-brand { color: var(--ink-2); }
.plt { color: var(--ink-3); }
.plt-main { color: #3f5a8a; }

/* ---------------- 手机版日程 ---------------- */

.agenda-head { background: var(--surface-2); border-bottom: 1px solid var(--border-2); }
.agenda-day.is-today { box-shadow: 0 0 0 2px var(--accent-line), var(--shadow-sm); }
.agenda-day.is-today .agenda-head { background: #f4f8ff; }
.agenda-items { background: #fff; }
.agenda-add { background: var(--accent-soft); color: var(--accent-dark); border: 0; }

/* ---------------- 总表 ---------------- */

.data-table thead th {
  background: var(--surface-2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--border);
  color: var(--ink-3);
}
.data-table td { border-bottom: 1px solid var(--border-2); color: var(--ink); background: transparent; }

.data-table tbody tr.st-making { background: #fffaf1; }
.data-table tbody tr.st-ready { background: #f2f6ff; }
.data-table tbody tr.st-done { background: #f0fbf6; }
.data-table tbody tr.st-canceled { background: #f7f8fb; }
.data-table tbody tr:hover { background: #fafbff; box-shadow: inset 2px 0 0 var(--accent); }

.data-table tbody tr.st-making td:first-child { border-left-color: #c9760a; }
.data-table tbody tr.st-ready td:first-child { border-left-color: #2358c9; }
.data-table tbody tr.st-done td:first-child { border-left-color: #0b7a55; }
.data-table tbody tr.st-canceled td:first-child { border-left-color: #8494ab; }

.status-select { border: 1px solid transparent !important; color: #fff; }
.status-select.st-making { background: #c9760a; }
.status-select.st-ready { background: #2358c9; }
.status-select.st-done { background: #0b7a55; }
.status-select.st-canceled { background: #8494ab; }

.tag { background: #f4f6f9; border: 1px solid var(--border-2); color: var(--ink-2); }
.tag-dist { background: #f7f9fc; }
.tag-dist:hover { background: #eef2f8; }
.brand-pill { background: color-mix(in srgb, var(--brand) 12%, #fff); border: 0; }
.cell-meta, .date-week, .dist-progress, .title-note { color: var(--ink-3); }

/* ---------------- 手机版总表卡片 ---------------- */

.rowcard {
  background: var(--st-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--st-line);
  border-left: 4px solid var(--st);
  box-shadow: var(--shadow-sm);
}
.rowcard.st-making { --st: #c9760a; --st-bg: #fff7ea; --st-line: #f2dcb6; }
.rowcard.st-ready { --st: #2358c9; --st-bg: #eef3ff; --st-line: #cfdefc; }
.rowcard.st-done { --st: #0b7a55; --st-bg: #eafaf3; --st-line: #bfe8d6; }
.rowcard.st-canceled { --st: #5b6b83; --st-bg: #f2f4f8; --st-line: #dfe4ec; }
.rowcard-status { background: var(--st); color: #fff; border: 0; }
.rowcard-title { color: var(--ink); }

/* ---------------- 设置 / 历史 ---------------- */

.settings-tab {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--border);
  color: var(--ink-2);
}
.settings-tab:hover { background: #f8fafc; }
.settings-tab.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-dark); box-shadow: none; }
.settings-tab-count { background: #f2f4f8; color: var(--ink-3); }
.settings-tab.is-active .settings-tab-count { background: #dbe7ff; color: var(--accent-dark); }

.setting-row, .history-row, .history-changes { background: var(--surface-2); border: 1px solid var(--border-2); }
.setting-row:hover { background: #fff; }
.invite-box { background: #fafcff; border: 1px dashed var(--accent-line); }
.role-pill { background: #f2f4f8; border: 1px solid var(--border-2); color: var(--ink-2); }
.role-pill.is-owner { background: #f3edff; color: #6d3fd1; border-color: #e3d8ff; }
.action-pill { background: #f2f4f8; border: 1px solid var(--border-2); color: var(--ink-2); }
.mini-chip { background: #fff; border: 1px solid var(--border); color: var(--ink-3); }
.mini-chip.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-dark); }
.drag-order { background: #f2f4f8; color: var(--ink-3); }
.color-input { background: #fff; border: 1px solid var(--border); }
.empty-line { background: var(--surface-2); }

/* ---------------- 弹窗：白卡片 + 柔和阴影 ---------------- */

.modal-backdrop { background: rgba(16, 24, 40, .38); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

.modal, .modal-wide {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.modal-head, .modal-foot { background: #fff; border-color: var(--border-2); }
.modal-foot { background: #fcfdfe; }
.status-option span, .plat-option span { background: #f6f8fb; border: 1px solid var(--border); color: var(--ink-2); }
.status-option span:hover, .plat-option span:hover { background: #eef1f6; }
.status-option.st-making input:checked + span { background: var(--amber-bg); border-color: #f0d8ad; color: var(--amber); }
.status-option.st-ready input:checked + span { background: var(--blue-bg); border-color: var(--accent-line); color: var(--blue); }
.status-option.st-done input:checked + span { background: var(--green-bg); border-color: #b6e8d3; color: var(--green); }
.status-option.st-canceled input:checked + span { background: var(--slate-bg); border-color: #dde3ec; color: var(--slate); }
.plat-option input:checked + span { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-dark); }
.main-dot-btn, .dist-dot-btn { background: #fff; border: 1px solid var(--border); }
.main-dot-btn:hover, .dist-dot-btn:hover { background: #f8fafc; border-color: #d8dee8; }

/* ---------------- 空状态 / 提示 / 下拉菜单 ---------------- */

.empty { background: #fff; border: 1px dashed #d9dfe8; box-shadow: none; }
.toast { background: #16233c; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; }
.user-menu {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.user-menu button:hover { background: #f5f7fa; }

/* ---------------- 登录页：白色为主，去掉深色大色块 ---------------- */

.auth-visual {
  background: linear-gradient(160deg, #f7faff 0%, #eef3fb 55%, #f6f9ff 100%);
  color: var(--ink);
  border-right: 1px solid var(--border);
}
.auth-logo { color: var(--ink-2); }
.auth-logo-mark { background: linear-gradient(140deg, #6ea8ff, #a78bfa); box-shadow: none; }
.auth-points li { color: var(--ink-2); }
.auth-points li::before { background: var(--accent); }
.auth-points b { color: var(--ink); }
.auth-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.auth-tabs { background: #f2f4f8; border: 0; }
.auth-tab.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---------------- 动效：切换视图时轻微上浮 ---------------- */

@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } }
#view-body.enter > * { animation: panelIn .28s ease-out both; }

:focus-visible { outline: 2px solid rgba(47, 111, 237, .5); outline-offset: 2px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------- 手机：触控目标不小于 44px ---------------- */

@media (max-width: 820px) {
  .btab, .icon-btn, .btn, .btn-mini, .status-chip, .segmented button,
  .settings-tab, .mini-chip, .main-dot-btn, .dist-dot-btn { min-height: 44px; }
  .icon-btn { min-width: 44px; }
  .plat-row { flex: 1 1 100%; justify-content: space-between; gap: 8px; }
  .plat-row .plat-option { flex: 1 1 auto; min-width: 0; }
  .plat-row .plat-option span { display: block; width: 100%; text-align: left; padding-left: 14px; }
  .plat-row .dist-dot-btn { flex: 0 0 auto; }
  .platform-picker { gap: 6px; }
  .modal-foot { background: #fff; }
}