/* ============================================================
   Aya-clanbattle · 「樱花手帖」设计系统（桃色手帖 × 樱花账本 融合，用户定稿）
   手帖的手工感（和纸胶带 / 贴纸徽章 / 虚线裁切 / 微旋转）
   × 樱账的仪式感（楷体 / 朱印章状态 / 金箔 / 双线装订）
   色板：樱玫瑰粉 + 朱肉红（印章/危险）+ 金箔 + 青磁 + 蜂蜜橙
   默认 = 日战（暖纸）；html[data-theme="dark"] = 夜樱手帖（靛墨）
   ============================================================ */
:root {
  --paper: #faf3ee;
  --panel: #fffdfb;
  --panel-hi: #ffffff;
  --ink: #463a3c;
  --ink-2: #8a7377;
  --ink-3: #b99fa4;
  --rule: #eddcda;
  --rule-strong: #d8bcb9;
  --accent: #e2849f;           /* 樱玫瑰粉（两套主色的融合点） */
  --accent-strong: #cf6a88;
  --accent-btn: #e2849f;
  --accent-tint: #fbf0f3;
  --accent-tint-hi: #f7dfe7;
  --pink: #f6c6d4;             /* 胶带主色（樱粉） */
  --tape-2: #ffe0cf;           /* 胶带配·蜜桃 */
  --tape-3: #cfe8e0;           /* 胶带配·青磁 */
  --shu: #bc4a3c;              /* 朱肉红（印章/紧急/危险） */
  --seal: #bc4a3c;
  --seal-tint: #f9e8e4;
  --seal-tint-hi: #f2cfc7;
  --gold: #a8802a;             /* 金箔 */
  --gold-tint: #f6f0dc;
  --teal: #4d9e94;             /* 预约（青磁） */
  --teal-tint: #e8f3f1;
  --ok: #55946e;
  --ok-tint: #eaf3ec;
  --warn: #c78e3a;             /* 挂树（蜂蜜橙） */
  --warn-tint: #f7efdd;
  --hp-safe: #55946e;
  --hp-mid: #c78e3a;
  --hp-low: #bc4a3c;
  --hp-track: #f3e6e2;
  --tick: rgba(255, 255, 255, .92);
  --shadow: 0 6px 18px rgba(120, 80, 80, .1);
  --backdrop: rgba(60, 40, 45, .45);
  --input-bg: #f7efec;
  --row-hover: #faf3f0;
  --th-bg: #f6ebe8;
  --topbar-bg: #fffdfb;
  --chart-split: #f2e5e2;
  --chart-bar-radius: none;
  --radius: 12px;
  --radius-s: 7px;
  --font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-num: "Bahnschrift", "DIN Alternate", "Segoe UI", var(--font);
  --font-title: "Kaiti SC", "STKaiti", "KaiTi", var(--font);
  /* 和纸胶带：樱粉×蜜桃×青磁 三色细纹 */
  --tape: repeating-linear-gradient(45deg, var(--pink) 0 7px, var(--tape-2) 7px 14px);
}
html[data-theme="dark"] body {
  background: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.3px) 0 0 / 18px 18px, var(--paper);
}
html[data-theme="dark"] {
  /* 夜樱手帖：灰紫夜（整体提亮一档，压低黑底亮字的刺眼对比） */
  --paper: #2c2530;
  --panel: #372f3c;
  --panel-hi: #423948;
  --ink: #eee3e8;
  --ink-2: #c6b1b8;
  --ink-3: #9b8690;
  --rule: #4d4352;
  --rule-strong: #6d5e70;
  --accent: #f0a3ba;
  --accent-strong: #f8c0d1;
  --accent-btn: #bb6f8c;
  --accent-tint: rgba(240, 163, 186, .11);
  --accent-tint-hi: rgba(240, 163, 186, .23);
  --pink: rgba(246, 198, 212, .5);
  --tape-2: rgba(255, 224, 207, .45);
  --tape-3: rgba(207, 232, 224, .4);
  --shu: #d4604f;
  --seal: #d4604f;
  --seal-tint: rgba(212, 96, 79, .14);
  --seal-tint-hi: rgba(212, 96, 79, .26);
  --gold: #d4ad55;
  --gold-tint: rgba(212, 173, 85, .12);
  --teal: #63b5ab;
  --teal-tint: rgba(99, 181, 171, .11);
  --ok: #6cae87;
  --ok-tint: rgba(108, 174, 135, .11);
  --warn: #d4a355;
  --warn-tint: rgba(212, 163, 85, .12);
  --hp-safe: #6cae87;
  --hp-mid: #d4a355;
  --hp-low: #d4604f;
  --hp-track: #251f2a;
  --tick: rgba(255, 255, 255, .3);
  --shadow: 0 8px 24px rgba(0, 0, 0, .35);
  --backdrop: rgba(12, 8, 14, .6);
  --input-bg: #262029;
  --row-hover: rgba(240, 163, 186, .05);
  --th-bg: #3c3442;
  --topbar-bg: #372f3c;
  --chart-split: rgba(255, 255, 255, .07);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--ink);
  background: radial-gradient(rgba(70, 58, 60, .05) 1px, transparent 1.3px) 0 0 / 18px 18px, var(--paper);
  min-height: 100vh;
}
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: .4px; }
::selection { background: var(--accent-tint-hi); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
a { color: var(--accent-strong); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------------- 顶栏：手帐封面（朱印 + 胶带） ---------------- */
#topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: var(--topbar-bg);
  border-bottom: 2px dashed var(--rule-strong);
  min-height: 52px;
}
#topbar::after {
  /* 顶栏下缘一条三色和纸胶带 */
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 13px;
  background: repeating-linear-gradient(90deg,
    var(--pink) 0 26px, var(--tape-2) 26px 52px, var(--tape-3) 52px 78px);
  opacity: .5; transform: rotate(.2deg); pointer-events: none;
}
#topbar .brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 8px 0; position: relative; }
#guild-switch {
  border: none; background: transparent; padding: 4px 5px; margin: 0 -2px;
  color: var(--ink-3); cursor: pointer; display: grid; place-items: center;
  border-radius: var(--radius-s);
}
#guild-switch:hover { color: var(--accent-strong); background: var(--accent-tint); }
#guild-switch svg { width: 14px; height: 14px; display: block; }
#guild-menu {
  position: absolute; top: calc(100% + 9px); left: 0; z-index: 60;
  min-width: 250px; max-width: 340px;
  background: var(--panel-hi); border: 1px solid var(--rule-strong);
  border-radius: 4px 12px 12px 12px; box-shadow: var(--shadow);
  padding: 5px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#guild-menu.open { opacity: 1; transform: none; pointer-events: auto; }
#guild-menu .gm-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 11px; border: none; background: transparent; color: var(--ink);
  font: inherit; font-size: 13.5px; text-align: left;
  border-radius: 3px 10px 10px 10px; cursor: pointer;
}
#guild-menu .gm-item:hover { background: var(--accent-tint); color: var(--accent-strong); }
#guild-menu .gm-item.cur { background: var(--accent-tint); color: var(--accent-strong); font-weight: 700; }
#guild-menu .gm-item .gid { color: var(--ink-3); font-size: 11.5px; flex: none;
  font-family: var(--font-num); font-variant-numeric: tabular-nums; }
#guild-name {
  font-weight: 700; font-size: 16px; font-family: var(--font-num); letter-spacing: .5px;
  line-height: 22px;  /* 显式行高：钉住 Bahnschrift 等数字字体的行盒，保证跨平台与徽章/tab 同轴 */
}
#progress-chip {
  font-size: 12px; padding: 2px 10px; border-radius: 3px 10px 10px 10px;
  background: var(--accent-tint); color: var(--accent-strong);
  border: 1px dashed var(--accent); white-space: nowrap;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
}
#progress-chip.done { color: var(--ok); border-color: var(--ok); background: var(--ok-tint); }
#topbar .spacer { flex: 1; }
#topbar .tab {
  text-decoration: none; color: var(--ink-2); font-size: 14px;
  padding: 6px 12px; border-radius: 3px; margin: 0 2px;
  border: 1px dashed transparent; white-space: nowrap;
  transition: all .15s;
}
#topbar .tab:hover { color: var(--accent-strong); background: var(--accent-tint); }
#topbar .tab.active {
  color: var(--accent-strong); font-weight: 700;
}
#theme-toggle { font-size: 14px; padding: 4px 10px; line-height: 1; }
#logout { font-size: 13px; color: var(--ink-3); text-decoration: none; white-space: nowrap; }
#logout:hover { color: var(--shu); }
#tab-ink {
  position: absolute; height: 2px; background: var(--accent); z-index: 5;
  pointer-events: none; width: 0;
  transition: left .25s cubic-bezier(.22, 1, .36, 1),
              width .25s cubic-bezier(.22, 1, .36, 1),
              top .25s cubic-bezier(.22, 1, .36, 1);
}

main { padding: 24px 20px 60px; max-width: 1180px; margin: 0 auto; }
.muted { color: var(--ink-3); font-size: 13px; }

/* ---------------- 板块：便签卡 ---------------- */
.card {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 4px 12px 12px 12px; padding: 16px;
  box-shadow: var(--shadow);
  position: relative;
}
.section-title {
  font-weight: 700; font-size: 14px; color: var(--ink-2);
  margin: 24px 0 10px; display: inline-block; position: relative; padding: 2px 10px;
}
.section-title::before {
  content: ""; position: absolute; inset: 2px -6px 4px -6px;
  background: var(--tape); opacity: .38; border-radius: 2px;
  transform: rotate(-1.2deg); z-index: -1;
}
/* ---------------- boss 目标板：樱账便签 ---------------- */
.boss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 13px; }
.boss {
  position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 4px 12px 12px 12px; padding: 15px 14px 12px;
  box-shadow: var(--shadow);
  transition: box-shadow .2s;
}
.boss::before {
  /* 卡片左上角一贴胶带 */
  content: ""; position: absolute; top: -6px; left: 18px; width: 64px; height: 14px;
  background: var(--tape); opacity: .72; transform: rotate(-2deg); border-radius: 2px;
}
.boss:hover { box-shadow: 0 6px 18px rgba(120, 80, 80, .16); }
.boss.flash { animation: flash-mark 1s ease-out; }
@keyframes flash-mark {
  0% { box-shadow: 0 0 0 3px var(--accent); }
  100% { box-shadow: var(--shadow); }
}
.boss.low { border-color: var(--shu); animation: lowline 1.8s ease-in-out infinite; }
@keyframes lowline {
  0%, 100% { box-shadow: 0 0 0 2px var(--seal-tint); }
  50% { box-shadow: 0 0 0 4px var(--seal-tint-hi); }
}
.boss-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.boss-ava {
  width: 48px; height: 48px; border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  overflow: hidden; flex: none;
  border: 2px solid var(--accent-tint-hi); background: var(--accent-tint);
  transform: rotate(-2deg);
}
.boss-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.boss-id { flex: 1; min-width: 0; }
.boss-name { font-weight: 700; font-size: 15px; font-family: var(--font-num); letter-spacing: .5px; }
.cycle { color: var(--ink-3); font-size: 12px; margin-right: 6px; font-family: var(--font-num); }
.tag {
  display: inline-block; padding: 0 8px; font-size: 11px; line-height: 18px;
  border-radius: 999px 999px 999px 2px; border: 1px solid var(--teal); color: var(--teal);
  background: var(--teal-tint); vertical-align: 1px; font-weight: 700;
  transform: rotate(-1deg);
}
.hp-row {
  display: flex; align-items: baseline; gap: 5px;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  margin: 2px 0 6px;
}
.hp-row .hp-now { font-size: 20px; font-weight: 700; letter-spacing: .4px; }
.hp-row .hp-full { font-size: 12.5px; color: var(--ink-3); }
.hp-row .hp-state {
  margin-left: auto; font-size: 12px; font-weight: 700;
  letter-spacing: 2px;
  padding: 0 6px; border-radius: 3px;
}
.hp-row .hp-state.s-down { color: #fff; background: var(--ink-3); }  /* 灰章·击破 */
.hpbar {
  position: relative; height: 14px; border-radius: 7px; overflow: hidden;
  background: var(--hp-track); margin: 0 0 10px;
  border: 1px dashed var(--rule-strong);
}
.hpbar .fill {
  position: absolute; top: 1px; bottom: 1px; left: 1px; border-radius: 5px;
  background: var(--hp-safe);
  transition: width .6s cubic-bezier(.22, 1, .36, 1), background .4s;
}
.hpbar.mid .fill { background: var(--hp-mid); }
.hpbar.low .fill { background: var(--hp-low); }
.hpbar .hp-tick {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--tick); pointer-events: none;
}
/* ---------------- chips：贴纸 ---------------- */
.chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 24px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 3px 12px 12px 12px; font-size: 12.5px;
  background: var(--panel-hi); border: 1px solid var(--rule);
  box-shadow: 0 1px 4px rgba(120, 80, 80, .1);
  transform: rotate(-.4deg);
}
.chip:nth-child(even) { transform: rotate(.5deg); }
.chip .cava { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.chip.chal { border-color: var(--accent); background: var(--accent-tint); }
.chip.tree { border-color: var(--warn); background: var(--warn-tint); }
.chip.sub { border-color: var(--teal); background: var(--teal-tint); }
.chip .x { cursor: pointer; opacity: .6; padding: 0 2px; }
.chip .x:hover { opacity: 1; }
/* ---------------- 按钮/表单 ---------------- */
button, select, input, textarea {
  font: inherit; color: var(--ink);
  padding: 6px 14px; border-radius: 8px;
  border: 1px solid var(--rule-strong); background: var(--panel);
  transition: border-color .15s, background .15s, color .15s, transform .1s;
}
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:hover { border-color: var(--accent); color: var(--accent-strong); transform: rotate(-.5deg); }
button:active { transform: scale(.97); }
button.primary {
  background: var(--accent-btn); border-color: var(--accent-btn); color: #fff; font-weight: 700;
  border-radius: 10px 10px 10px 3px;
  box-shadow: 0 3px 8px rgba(226, 132, 159, .3);
}
button.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
button.danger { background: var(--panel); border-color: var(--shu); color: var(--shu); }
button.danger:hover { background: var(--seal-tint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint-hi);
}
.bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.bar .muted { margin-left: auto; }
.ops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; padding-top: 10px;
  border-top: 1px dashed var(--rule); }
.ops button { padding: 4px 12px; font-size: 13px; border-radius: 7px; }
.icon-btn.edit {
  font-size: 17px; line-height: 1; padding: 3px 9px;
  background: var(--accent-tint); border-color: transparent; color: var(--accent);
  border-radius: 50%;
}
.icon-btn.edit:hover { background: var(--accent-tint-hi); }
/* ---------------- 表格：横线账本 ---------------- */
.table-wrap { background: var(--panel); border: 1px solid var(--rule); border-radius: 4px 12px 12px 12px; overflow: auto; box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  position: sticky; top: 0; text-align: left; padding: 9px 12px;
  color: var(--accent-strong); font-size: 12.5px; letter-spacing: 2px; font-weight: 700;
  background: var(--th-bg); border-bottom: 3px double var(--rule-strong);
}
.table td { padding: 8px 12px; border-bottom: 1px dashed var(--rule); }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--row-hover); }
.table td.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.fin-badge {
  display: inline-block; min-width: 34px; text-align: center; padding: 1px 9px;
  border-radius: 999px 999px 999px 3px; font-weight: 700;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  transform: rotate(-1.5deg);
}
.fin-badge.ok { background: var(--ok-tint); color: var(--ok); }
.fin-badge.no { background: var(--seal-tint); color: var(--shu); }
.sl-badge { font-size: 11.5px; color: var(--gold); font-weight: 700; }
/* 记录页成员列：头像+昵称（与弹框选人 picker 同款） */
#rec-table .rec-id { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; }
#rec-table .rec-id .cava { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; }
#rec-table .rec-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* 记录页/统计页可排序列表头 */
#rec-table th.sortable, .rank-table th.sortable { cursor: pointer; user-select: none; }
#rec-table th.sortable:hover, .rank-table th.sortable:hover { color: var(--accent-strong); }
#rec-table .sort-arrow, .rank-table .sort-arrow { font-style: normal; font-size: 9px; margin-left: 2px; letter-spacing: 0; }
/* 记录页：成员行整行可点（进成员全部记录）+ 视图提示小字 */
#rec-table tr[data-qq] { cursor: pointer; }
#rec-hint { margin-left: 4px; margin-right: auto; }
/* ---------------- 站点管理：boss 预置编辑弹框 ---------------- */
.bp-slots { display: flex; gap: 8px; margin: 8px 0; align-items: flex-start; }
.bp-slot { flex: 1; min-width: 0; text-align: center; font-size: 12px; }
.bp-slot .bp-ava {
  width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
  display: block; margin: 0 auto 3px; background: var(--accent-tint);
}
.bp-slot .bp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.bp-change { font-size: 11px; padding: 2px 8px; margin-top: 3px; }
.bp-opts {
  display: grid; grid-template-columns: repeat(auto-fill, 76px); gap: 6px;
  max-height: 200px; overflow: auto; padding: 6px; margin-top: 5px;
  border: 1px dashed var(--rule-strong); border-radius: 8px;
  text-align: left;
}
.bp-opt { padding: 4px 2px; font-size: 11px; text-align: center; }
.bp-opt.cur { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-strong); font-weight: 700; }
.bp-opt img {
  width: 40px; height: 40px; border-radius: 7px; object-fit: cover;
  display: block; margin: 0 auto 2px; background: var(--accent-tint);
}
.bp-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; }
.bp-grid th, .bp-grid td { padding: 4px 6px; text-align: center; }
.bp-grid th { color: var(--ink-2); font-weight: 700; }
.bp-grid td:first-child { color: var(--ink-2); white-space: nowrap; font-size: 11.5px; font-family: var(--font-num); }
.bp-grid input { width: 100%; min-width: 64px; padding: 4px 6px; }
/* ---------------- toast ---------------- */
.toast-box { position: fixed; top: 16px; right: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
#toast-box { top: 64px; }
.toast {
  background: var(--panel-hi); border: 1px dashed var(--accent);
  border-radius: 3px 12px 12px 12px;
  padding: 10px 16px; font-size: 13px; max-width: 360px;
  white-space: pre-wrap; box-shadow: var(--shadow);
  animation: slide-in .3s cubic-bezier(.22, 1, .36, 1);
}
@keyframes slide-in { from { transform: translateX(24px) rotate(1deg); opacity: 0; } }
.toast.out { opacity: 0; transform: translateX(24px) rotate(1deg); transition: opacity .2s, transform .2s; }
/* ---------------- dialog ---------------- */
dialog {
  background: var(--panel-hi); color: var(--ink);
  border: 1px dashed var(--accent); border-radius: 4px 16px 16px 16px;
  padding: 20px; min-width: 320px; max-width: 92vw; box-shadow: var(--shadow);
}
dialog::backdrop { background: var(--backdrop); }
/* ---------------- 成员选择器（头像+昵称下拉） ---------------- */
.picker { position: relative; width: 100%; }
.picker-field {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 11px; border-radius: var(--radius-s);
  border: 1px solid var(--rule-strong); background: var(--input-bg); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.picker-field:hover { border-color: var(--accent); }
.picker-field .cava, .picker-opt .cava {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none;
}
.picker-field .picker-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-caret { width: 13px; height: 13px; flex: none; color: var(--ink-3); }
.picker-menu {
  /* 内联展开（弹框内自适应高度，不做浮层）：列表内部滚动，弹框随之长高 */
  display: none; margin-top: 5px;
  background: var(--panel-hi); border: 1px solid var(--rule-strong);
  border-radius: 4px 12px 12px 12px; box-shadow: var(--shadow); padding: 4px;
  max-height: 232px; overflow: auto;
}
.picker.open .picker-menu { display: flex; flex-direction: column; gap: 2px; animation: picker-in .16s ease; }
@keyframes picker-in { from { opacity: 0; transform: translateY(-4px); } }
.picker-opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 9px; border: none; background: transparent; color: var(--ink);
  font: inherit; font-size: 13px; text-align: left; border-radius: 6px; cursor: pointer;
}
.picker-opt:hover { background: var(--accent-tint); }
.picker-opt.cur { background: var(--accent-tint); color: var(--accent-strong); font-weight: 600; }
.picker-opt .picker-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-opt .picker-mark { font-size: 11px; color: var(--gold); flex: none; }

dialog[open] { animation: dialog-in .18s ease; }
@keyframes dialog-in { from { opacity: 0; transform: scale(.96) translateY(6px); } }
dialog h3 { margin: 0 0 12px; font-size: 16px; }
dialog label { display: block; margin: 10px 0; font-size: 13.5px; color: var(--ink-2); }
dialog input[type=text], dialog input[type=number], dialog input[type=password], dialog select {
  width: 100%; margin-top: 4px; background: var(--input-bg);
}
dialog .bar { justify-content: flex-end; margin-top: 14px; }
/* ---------------- 登录页 ---------------- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
  width: 360px; padding: 34px 30px; position: relative;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 4px 16px 16px 16px;
  box-shadow: var(--shadow);
}
.login-card::before {
  content: ""; position: absolute; top: -8px; left: 24px; width: 84px; height: 16px;
  background: var(--tape); opacity: .8; transform: rotate(-2deg); border-radius: 2px;
}
.login-card h2 { margin: 0 0 4px; font-size: 21px; display: flex; align-items: center; gap: 10px; }
.login-card .sub { color: var(--ink-3); font-size: 13px; margin-bottom: 18px; letter-spacing: 1px; }
.login-card label { display: block; margin: 18px 0 9px; font-size: 13px; color: var(--ink-2); }
.login-card input { width: 100%; background: var(--input-bg); }
.login-card label input { display: block; margin-top: 8px; }
.login-card input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--input-bg) inset;
  -webkit-text-fill-color: var(--ink);
  transition: background-color 9999s ease-out;
}
.login-card button { width: 100%; margin-top: 18px; padding: 9px; }
.login-card .tip { margin-top: 16px; font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }
/* ---------------- 选择公会 ---------------- */
.guild-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 14px; }
.guild-card {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--panel); border: 1px dashed var(--rule-strong); border-radius: 4px 14px 14px 14px;
  padding: 15px 16px; transition: border-color .15s, box-shadow .15s;
  position: relative;
}
.guild-card::before {
  content: ""; position: absolute; top: -6px; left: 16px; width: 56px; height: 13px;
  background: var(--tape); opacity: .7; transform: rotate(-2deg); border-radius: 2px;
}
.guild-card:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(120, 80, 80, .16); }
.guild-card .gname { font-weight: 700; font-size: 15px; }
.guild-card .gid { color: var(--ink-3); font-size: 12px; margin-top: 4px; font-family: var(--font-num); }
/* ---------------- 设置页：档案格子墙（GitHub 动态式） ---------------- */
.ar-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 5px;
  max-height: 264px; overflow: auto; padding: 2px;
}
.ar-cell {
  aspect-ratio: 1; border-radius: 6px; padding: 0;
  display: grid; place-items: center;
  font: 700 11px/1 var(--font-num); font-variant-numeric: tabular-nums;
  color: var(--ink-2); cursor: pointer;
  transition: transform .12s, border-color .15s, box-shadow .15s;
}
.ar-cell:hover { border-color: var(--accent); transform: rotate(-2deg) scale(1.06); }
.ar-cell[data-l="0"] { background: var(--hp-track); }
.ar-cell[data-l="1"] { background: rgba(226, 132, 159, .18); }
.ar-cell[data-l="2"] { background: rgba(226, 132, 159, .38); }
.ar-cell[data-l="3"] { background: rgba(226, 132, 159, .60); color: #fff; }
.ar-cell[data-l="4"] { background: rgba(226, 132, 159, .92); color: #fff; border-color: transparent; }
.ar-cell[data-cur] { border: 2px solid var(--accent-strong); box-shadow: 0 0 0 2px var(--accent-tint-hi); }
/* ---------------- 统计：樱账手帖页 ---------------- */
.report-head { margin-bottom: 18px; }
.report-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.report-title-row h2 {
  margin: 0; font-size: 22px; font-weight: 700; display: inline-block; position: relative;
  padding: 2px 12px; font-family: var(--font-title); letter-spacing: 1px;
}
.report-title-row h2::before {
  content: ""; position: absolute; inset: 4px -8px 2px -8px;
  background: var(--tape); opacity: .4; border-radius: 3px; transform: rotate(-1deg); z-index: -1;
}
.report-title-row .report-sub { color: var(--ink-3); font-size: 13px; }
.report-title-row .report-ctrl { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.report-totals {
  display: flex; flex-wrap: wrap; margin-top: 14px;
  background: var(--panel);
  border-top: 3px double var(--rule-strong); border-bottom: 3px double var(--rule-strong);
}
.report-totals .total-cell {
  flex: 1 1 140px; padding: 13px 16px 11px;
  border-right: 1px dashed var(--rule);
}
.report-totals .total-cell:last-child { border-right: none; }
.report-totals .total-num {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 27px; font-weight: 700; line-height: 1.15; letter-spacing: .4px;
}
.report-totals .total-num .unit { font-size: 14px; font-weight: 700; margin-left: 1px; color: var(--ink-2); }
.report-totals .total-label {
  font-size: 12.5px; color: var(--ink-3); margin-top: 3px; letter-spacing: 3px;
  font-family: var(--font-title);
}
.report-block {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 4px 14px 14px 14px; padding: 16px 16px 10px; margin-bottom: 14px;
  box-shadow: var(--shadow);
  position: relative;
}
.report-block::before {
  content: ""; position: absolute; top: -7px; left: 20px; width: 70px; height: 14px;
  background: var(--tape); opacity: .75; transform: rotate(-1.5deg); border-radius: 2px;
}
.report-block-head {
  display: flex; align-items: baseline; gap: 10px;
  font-weight: 700; font-size: 14px; margin: 2px 0 4px;
  font-family: var(--font-title); letter-spacing: 2px;
}
.report-block-head::before {
  content: ""; align-self: center; width: 8px; height: 8px;
  background: var(--accent); border-radius: 2px; flex: none;
}
.report-block-head .muted { font-weight: 400; font-family: var(--font); letter-spacing: 0; }
#stats-ranking { overflow-x: auto; }
.rank-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.rank-table th {
  text-align: left; padding: 8px 10px; color: var(--ink-3); font-size: 12.5px;
  font-weight: 700; border-bottom: 3px double var(--rule-strong); letter-spacing: 2px;
  font-family: var(--font-title);
}
.rank-table td { padding: 7px 10px; border-bottom: 1px dashed var(--rule); }
.rank-table tr:last-child td { border-bottom: none; }
.rank-table tr:hover td { background: var(--row-hover); }
.rank-table .rk {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 700; color: var(--ink-3); width: 44px;
}
.rank-table tr.r1 .rk { color: var(--gold); }
.rank-table tr.r2 .rk, .rank-table tr.r3 .rk { color: var(--accent-strong); }
.rank-table .rk-name { font-weight: 600; }
.rank-table .rk-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.rank-table .rk-tail { color: var(--ok); font-size: 12.5px; }
.rank-dmg { display: flex; align-items: center; gap: 9px; min-width: 220px; }
.rank-dmg .dmg-bar { flex: 1; height: 10px; background: var(--hp-track); border-radius: 6px; overflow: hidden; border: 1px dashed var(--rule-strong); }
.rank-dmg .dmg-bar i { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.rank-dmg .dmg-val {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 14.5px; font-weight: 700; min-width: 76px; text-align: right;
}
/* ---------------- 过渡动画 ---------------- */
main > section.enter { animation: section-in .3s cubic-bezier(.22, 1, .36, 1); }
@keyframes section-in { from { opacity: 0; transform: translateY(10px); } }

/* 注：不设 prefers-reduced-motion 兜底——Windows Server 默认关窗口动画，Chromium 会据此
   上报 reduce，把全部动画关掉（服务器本机浏览器看不见动画的元凶）。站内动画均为轻量过渡。 */

/* ---------------- 品牌 logo / 图标 / 刀轨 ---------------- */
.brand-logo {
  width: 27px; height: 27px; border-radius: 7px;
  object-fit: cover; display: block; flex: none;
}
.icon-btn.edit svg { width: 14px; height: 14px; display: block; }
/* 出刀详情：6 格刀轨（完整刀=2格，尾刀/补偿=1格，空位虚线补足） */
.blade-track {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px;
  min-width: 300px;
}
.blade-seg {
  border-radius: 6px; padding: 3px 8px; font-size: 12px; line-height: 1.5;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
  border: 1px solid var(--rule); background: var(--panel-hi); color: var(--ink);
}
.blade-seg.w2 { grid-column: span 2; }
.blade-seg.full { background: var(--accent-tint); border-color: var(--accent); }
.blade-seg.tail { background: var(--ok-tint); border-color: var(--ok); }
.blade-seg.comp { background: var(--teal-tint); border-color: var(--teal); }
.blade-seg.empty { border-style: dashed; background: transparent; border-color: var(--rule); }
/* 格内三层：周目-王(弱化) · 伤害(主视觉，千位窄空格分组) · 尾/补/代(彩色角标) */
.blade-seg .seg-id { font-size: 10.5px; color: var(--ink-3); margin-right: 3px; }
.blade-seg .seg-dmg { font-size: 13px; font-weight: 700; color: var(--ink); }
.blade-seg .seg-unit { font-style: normal; font-size: 10.5px; color: var(--ink-2); margin-left: 1px; }
.blade-seg .seg-kind { font-style: normal; font-size: 10.5px; font-weight: 700; margin-left: 3px; }
.blade-seg.tail .seg-kind { color: var(--ok); }
.blade-seg.comp .seg-kind { color: var(--teal); }
.blade-seg .seg-kind.beh { color: var(--ink-2); font-weight: 400; }

/* ---------------- 响应式（必须在文件末尾：覆盖上方所有同特异性规则） ---------------- */
/* ---------------- 统计：各王主力贴纸卡 ---------------- */
.boss-top-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.boss-top-card {
  background: var(--accent-tint); border: 1px solid var(--rule); border-radius: 8px;
  padding: 8px 8px 6px; text-align: center;
}
.boss-top-card img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.boss-top-card .bt-name { font-size: 12px; color: var(--ink-2); margin: 3px 0 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boss-top-card .bt-row { display: flex; align-items: center; gap: 4px; justify-content: center;
  font-size: 12px; line-height: 20px; }
.boss-top-card .bt-row.first { font-weight: 700; color: var(--accent-strong); }
.boss-top-card .bt-member { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 84px; }
.boss-top-card .bt-count { color: var(--ink-3); font-family: var(--font-num); font-size: 11px; flex: none; }
.boss-top-card .bt-medal { flex: none; font-size: 11px; }

@media (max-width: 920px) {
  /* 顶栏折叠为两行「手帖封面」：第1行=品牌+徽章（主题/登出右靠），第2行=导航 tab 均分。
     spacer 转为满宽零高占位元素做强制换行，避免窄宽时文字竖排/按钮悬到胶带上 */
  #topbar { flex-wrap: wrap; gap: 2px 10px; padding: 0 16px 7px; }
  #topbar .brand { padding: 8px 0 4px; }
  #progress-chip { order: 2; }
  #theme-toggle { order: 3; margin-left: auto; }
  #logout { order: 4; }
  #topbar .spacer { order: 5; flex: 0 1 100%; height: 0; }
  #topbar .tab { order: 6; flex: 1 1 0; text-align: center;
    padding: 7px 6px; margin: 0; font-size: 13.5px; }
  main { padding: 16px 14px 50px; }
  .boss-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  /* 刀轨 1 行 6 格 → 2 行 3 格：完整刀仍占 2 格（视觉语义），row dense 回填空洞；
     3 满刀无尾/补的组合装不进每行 3 格（2+2+2），会占 3 行但格宽翻倍可读 */
  .blade-track { grid-template-columns: repeat(3, 1fr); grid-auto-flow: row dense; min-width: 0; }
}
@media (max-width: 560px) {
  #topbar { padding: 0 12px 6px; }
  /* 行1 只留品牌+徽章；🌙/登出 收进导航行右端，避免行1 溢出悬空 */
  #theme-toggle { order: 7; margin-left: 0; padding: 4px 8px; }
  #logout { order: 8; }
  #topbar .brand { min-width: 0; }
  #guild-name { overflow: hidden; text-overflow: ellipsis; }
  #topbar .tab { max-width: none; padding: 7px 4px; font-size: 13px; }
  main { padding: 14px 10px 50px; }
  .boss-grid { grid-template-columns: 1fr; }
  .report-totals .total-cell { flex: 1 1 46%; border-bottom: 1px dashed var(--rule); }
  .report-totals .total-num { font-size: 22px; }
  /* 记录表 → 成员卡片：姓名+刀数一行，刀轨独占整行全宽（手机每格 ~130px，
     数字完整显示，无需横划；560 以上维持 3 列表格） */
  #rec-wrap { background: transparent; border: none; box-shadow: none; overflow: visible; }
  #rec-table, #rec-table > tbody, #rec-table td { display: block; }
  #rec-table tr.head { display: none; }
  #rec-table tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    background: var(--panel); border: 1px solid var(--rule);
    border-radius: 4px 12px 12px 12px; box-shadow: var(--shadow);
    padding: 10px 12px; margin: 0 0 10px;
  }
  #rec-table td { padding: 0; border-bottom: none; }
  #rec-table td:nth-child(1) { flex: 1 1 auto; min-width: 0; }
  #rec-table td:nth-child(2) { flex: 0 0 auto; }
  #rec-table td:nth-child(3) { flex: 1 1 100%; }
}