:root {
  --bg: #e2ebd8;
  --bg2: #eaf2e3;
  --bg3: #d4e0c9;
  --text: #3a4536;
  --muted: #6b7864;
  --line: #c5d3b8;
  --accent: #6f8b62;
  --accent-2: #5c7552;
  --accent-soft: #d8e6ce;
  --ink: #4e6346;
  --on-ink: #eaf2e3;
  --danger: #b07a72;
  --ok: #6f8b62;
  --radius: 14px;
  --gap: 16px;
  --side: 236px;
  --rail: 280px;
  --top: 56px;
  --pad: 24px;
  --ease: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
  --font: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
html[data-theme="mist"] {
  --bg:#e2ebd8; --bg2:#eaf2e3; --bg3:#d4e0c9; --text:#3a4536; --muted:#6b7864; --line:#c5d3b8;
  --accent:#6f8b62; --accent-2:#5c7552; --accent-soft:#d8e6ce; --ink:#4e6346; --on-ink:#eaf2e3;
}
html[data-theme="matcha"] { --bg:#f3f4ef; --bg2:#fafbf7; --bg3:#e7ebe2; --text:#3d413c; --muted:#7e877c; --line:#dde3d6; --accent:#8aa37a; --accent-2:#6e8a62; --accent-soft:#e7f0e2; --ink:#5e7354; --on-ink:#f7faf4; }
html[data-theme="lilac"] {
  --bg:#eef7f0;
  --bg2:#f6fbf7;
  --bg3:#dceee1;
  --text:#1e3a26;
  --muted:#5d7a64;
  --line:#c5e3cd;
  --accent:#20a33e;
  --accent-2:#188532;
  --accent-soft:#d8f3df;
  --ink:#20a33e;
  --on-ink:#ffffff;
}
html[data-theme="sky"] { --bg:#f2f4f6; --bg2:#f8fafb; --bg3:#e6eaee; --text:#3a3e42; --muted:#7e868c; --line:#dce3e8; --accent:#7a9bb0; --accent-2:#62849a; --accent-soft:#e6eef3; --ink:#5a7384; --on-ink:#f7fafc; }
html[data-theme="oat"] { --bg:#f5f1ea; --bg2:#fcf9f4; --bg3:#ece4d8; --text:#433e38; --muted:#8c8378; --line:#e6ddd0; --accent:#8a7b68; --accent-2:#6f6354; --accent-soft:#f3ece2; --ink:#8a7b68; --on-ink:#fcf9f4; }
html[data-theme="sakura"] { --bg:#f6f1f1; --bg2:#fcf8f8; --bg3:#eee6e6; --text:#433c3c; --muted:#8d8282; --line:#e8dddd; --accent:#a07d7a; --accent-2:#8a6865; --accent-soft:#f6eceb; --ink:#a07d7a; --on-ink:#fcf8f8; }
/* 办公：高对比冷灰 + 深蓝按钮，适合长时间看屏 */
html[data-theme="slate"] {
  --bg: #eef0f3;
  --bg2: #ffffff;
  --bg3: #e2e6ec;
  --text: #12151a;
  --muted: #5a6573;
  --line: #c5ccd6;
  --accent: #1f4e79;
  --accent-2: #163a5c;
  --accent-soft: #e4ecf5;
  --ink: #152033;
  --on-ink: #ffffff;
}

html[data-mode="dark"] {
  --bg: #1c1b1a;
  --bg2: #252422;
  --bg3: #2f2d2b;
  --text: #e7e3dc;
  --muted: #a39e96;
  --line: #3f3c38;
  --accent: #b8a890;
  --accent-2: #cfc3b2;
  --accent-soft: #33302c;
  --ink: #d8d0c4;
  --on-ink: #1c1b1a;
  --danger: #d4a39c;
  --ok: #9bb896;
  --shadow: none;
  color-scheme: dark;
}
html[data-mode="dark"][data-theme="mist"] {
  --bg: #1c211b;
  --bg2: #252b23;
  --bg3: #30362e;
  --text: #d5ddca;
  --muted: #9aa493;
  --line: #3f473d;
  --accent: #8fa882;
  --accent-2: #b0c4a4;
  --accent-soft: #2c342a;
  --ink: #c5d4b6;
  --on-ink: #1c211b;
}
html[data-mode="dark"][data-theme="matcha"] {
  --bg: #1d211c;
  --bg2: #262b24;
  --bg3: #31362f;
  --text: #d8ddd2;
  --muted: #9aa394;
  --line: #40463d;
  --accent: #a3b894;
  --accent-2: #b9c9ab;
  --accent-soft: #2c3328;
  --ink: #c2d0b4;
  --on-ink: #1d211c;
}
html[data-mode="dark"][data-theme="lilac"] {
  --bg: #152018;
  --bg2: #1c2a20;
  --bg3: #243628;
  --text: #d4eedb;
  --muted: #8fb89a;
  --line: #2f4a36;
  --accent: #3dcc5c;
  --accent-2: #6fdb86;
  --accent-soft: #1e3a26;
  --ink: #3dcc5c;
  --on-ink: #0f1a12;
}
html[data-mode="dark"][data-theme="sky"] {
  --bg: #1a1e22;
  --bg2: #22282e;
  --bg3: #2c343b;
  --text: #d7dde3;
  --muted: #9aa6b0;
  --line: #3a444d;
  --accent: #9bb3c2;
  --accent-2: #b3c7d4;
  --accent-soft: #2a3238;
  --ink: #c2d4e0;
  --on-ink: #1a1e22;
}
html[data-mode="dark"][data-theme="oat"] {
  --bg: #1f1c19;
  --bg2: #282421;
  --bg3: #332e29;
  --text: #ebe4da;
  --muted: #aea498;
  --line: #433e38;
  --accent: #cfc3b2;
  --accent-2: #e0d5c4;
  --accent-soft: #332e28;
  --ink: #e4d8c6;
  --on-ink: #1f1c19;
}
html[data-mode="dark"][data-theme="sakura"] {
  --bg: #211c1c;
  --bg2: #2a2424;
  --bg3: #352e2e;
  --text: #ebe3e3;
  --muted: #b0a3a3;
  --line: #453c3c;
  --accent: #d4b8b6;
  --accent-2: #e4cbc9;
  --accent-soft: #332c2c;
  --ink: #e8d0ce;
  --on-ink: #211c1c;
}
html[data-mode="dark"][data-theme="slate"] {
  --bg: #0f1217;
  --bg2: #171b22;
  --bg3: #222833;
  --text: #f0f3f7;
  --muted: #a7b0bd;
  --line: #3a4352;
  --accent: #6fa0d6;
  --accent-2: #95bbe3;
  --accent-soft: #1a2636;
  --ink: #d7e4f4;
  --on-ink: #0f1217;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-2); text-decoration: none; transition: var(--ease); }
a:hover { color: var(--ink); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: 0.01em; line-height: 1.35; color: var(--text); }
p { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
.muted { color: var(--muted); font-size: 13px; line-height: 1.7; }

a, button, .card, .icon-btn, .btn, .like-btn, .cat-hd, .tabs a, input, textarea {
  transition: var(--ease);
}

.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--top);
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr) auto;
  align-items: center;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  padding: 0;
  overflow: visible;
}
.topbar-left, .topbar-mid, .topbar-right {
  display: flex; align-items: center; min-width: 0; height: 100%;
}
.topbar-left { padding: 0 16px; gap: 10px; }
.topbar-mid { padding: 0 var(--pad); justify-content: center; }
.topbar-right {
  padding: 0 16px 0 8px;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
#btnSide, #btnRail { display: none; }

.brand { display: flex; align-items: center; gap: 10px; color: inherit; min-width: 0; }
.brand:hover { color: inherit; }
.brand-mark {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px;
  object-fit: cover; display: block;
  background: none; border: 0;
}
.brand-mark-dark { display: none; }
html[data-mode="dark"] .brand-mark-light { display: none; }
html[data-mode="dark"] .brand-mark-dark {
  display: block;
  /* 白 logo 若带黑底，在暗色顶栏上消掉黑底 */
  mix-blend-mode: screen;
  background: transparent;
}
html[data-dynamic-logo="1"] .brand-mark-gif {
  object-fit: contain;
  background: transparent;
}
.brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand-text strong { font-size: 14px; font-weight: 650; white-space: nowrap; }
.brand-text em {
  font-style: normal; font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 168px;
}

.search { display: flex; width: 100%; max-width: 440px; position: relative; }
.search input {
  width: 100%; height: 36px;
  border: 1px solid var(--line); border-radius: 18px;
  padding: 0 76px 0 16px; background: var(--bg); outline: none;
  text-overflow: ellipsis;
}
.search input::placeholder {
  color: var(--muted);
  opacity: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search input:focus { border-color: var(--accent); background: var(--bg2); }
.search button {
  position: absolute; right: 4px; top: 4px; height: 28px;
  border: 0; border-radius: 14px; padding: 0 12px;
  background: var(--ink); color: var(--on-ink); cursor: pointer; font-size: 12px;
}

.topnav { display: flex; align-items: center; gap: 4px; margin-right: 4px; }
.topnav > a {
  color: var(--muted); font-size: 13px; height: 32px; padding: 0 10px;
  display: inline-flex; align-items: center; border-radius: 8px; white-space: nowrap;
}
.topnav > a:hover { color: var(--text); background: var(--bg3); }
.nav-cats { position: relative; flex: 0 0 auto; z-index: 5; }
.nav-cats:hover,
.nav-cats:focus-within,
.nav-cats.open { z-index: 70; }
.nav-cats-btn {
  color: var(--muted); font-size: 13px; height: 32px; padding: 0 10px;
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer; white-space: nowrap;
}
.nav-cats-btn::after {
  content: '';
  width: 0; height: 0;
  border-style: solid;
  border-width: 4px 4px 0 4px;
  border-color: currentColor transparent transparent transparent;
  opacity: 0.7;
}
.nav-cats:hover .nav-cats-btn,
.nav-cats:focus-within .nav-cats-btn,
.nav-cats.open .nav-cats-btn {
  color: var(--text); background: var(--bg3);
}
/* 外层紧贴按钮，用 padding-top 做可悬停过渡带，避免移入时菜单消失 */
.nav-cats-menu {
  display: none;
  position: absolute; left: 0; top: 100%;
  z-index: 60;
  min-width: 220px; max-width: min(480px, 92vw);
  padding: 8px 0 0;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.nav-cats:hover .nav-cats-menu,
.nav-cats:focus-within .nav-cats-menu,
.nav-cats.open .nav-cats-menu {
  display: block;
}
.nav-cats-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 2px;
  padding: 8px;
  max-height: min(70vh, 520px);
  overflow: auto;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.nav-cats-panel a {
  display: flex; align-items: center;
  min-height: 34px; padding: 6px 10px;
  border-radius: 8px;
  color: var(--text); font-size: 13px; line-height: 1.35;
  text-decoration: none; white-space: nowrap;
}
.nav-cats-panel a:hover,
.nav-cats-panel a.on {
  background: var(--bg3);
  color: var(--ink);
}

.icon-btn, .btn, .mini, .like-btn, .mode-btn {
  height: 32px; border: 1px solid var(--line); background: var(--bg2);
  border-radius: 10px; padding: 0 12px; cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; white-space: nowrap; box-sizing: border-box;
  text-decoration: none; flex: 0 0 auto;
}
.icon-btn { width: 32px; padding: 0; flex: 0 0 32px; }
.i-style {
  position: relative;
  display: block;
  width: 14px;
  height: 12px;
}
.i-style::before,
.i-style::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: 11px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
.i-style::before {
  left: 0;
  bottom: 0;
  opacity: 0.4;
}
.i-style::after {
  right: 0;
  top: 0;
  background:
    linear-gradient(currentColor, currentColor) 2px 2px / 7px 1.5px no-repeat,
    var(--bg2);
}
.btn { background: var(--ink); border-color: var(--ink); color: var(--on-ink); min-width: 52px; }
a.btn { color: var(--on-ink); }
.btn:hover:not(.btn-ghost), a.btn:hover:not(.btn-ghost) { color: var(--on-ink); }
.btn-ghost, a.btn-ghost {
  background: var(--bg2); color: var(--text); border-color: var(--line);
}
.btn-ghost:hover, a.btn-ghost:hover {
  color: var(--ink); background: var(--bg3); border-color: var(--accent);
}
.btn:disabled, .icon-btn:disabled { opacity: 0.5; cursor: default; }
.user-chip {
  height: 32px; padding: 0 10px 0 12px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--accent-soft); color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; max-width: 168px;
}
.user-chip .chip-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.user-chip.is-vip {
  border-color: color-mix(in srgb, #c4a574 50%, var(--line));
  background: color-mix(in srgb, #e8d5a8 28%, var(--bg2));
}
.user-chip:hover { color: var(--ink); }
html.has-user .js-guest-auth { display: none !important; }
html:not(.has-user) .js-user-auth { display: none !important; }
html.has-user .rail-tip { display: none !important; }
.vip-mark {
  flex: 0 0 auto;
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  line-height: 1.35; padding: 2px 5px 1px; border-radius: 3px;
  color: #5c4718;
  background: linear-gradient(180deg, #f7ebc8 0%, #e0c078 55%, #c9a24e 100%);
  border: 1px solid #b8923c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 1px 2px rgba(90, 70, 20, 0.12);
}
html[data-mode="dark"] .vip-mark {
  color: #f6ead0;
  background: linear-gradient(180deg, #8d7340 0%, #6a5428 100%);
  border-color: #c4a574;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.dropdown { position: relative; }
.dropdown-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  width: 188px; padding: 8px; z-index: 50;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 14px;
}
.dropdown.open .dropdown-menu { display: grid; gap: 2px; }
.theme-item {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 32px;
  border: 0; background: transparent; cursor: pointer; border-radius: 8px;
  padding: 0 8px; color: var(--text); text-align: left; font-size: 13px;
}
.theme-item:hover { background: var(--bg3); }
.theme-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line); flex: 0 0 12px; padding: 0; }
.theme-dot[data-theme="mist"], .theme-item[data-theme="mist"] .theme-dot { background: #6f8b62; }
.theme-dot[data-theme="matcha"], .theme-item[data-theme="matcha"] .theme-dot { background: #8aa37a; }
.theme-dot[data-theme="lilac"], .theme-item[data-theme="lilac"] .theme-dot { background: #20a33e; }
.theme-dot[data-theme="sky"], .theme-item[data-theme="sky"] .theme-dot { background: #7a9bb0; }
.theme-dot[data-theme="oat"], .theme-item[data-theme="oat"] .theme-dot { background: #c4b7a6; }
.theme-dot[data-theme="sakura"], .theme-item[data-theme="sakura"] .theme-dot { background: #d2b3b0; }
.theme-dot[data-theme="slate"], .theme-item[data-theme="slate"] .theme-dot { background: #1f4e79; }
.mode-btn { width: 100%; margin-top: 6px; font-size: 12px; }

.shell {
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr) var(--rail);
  min-height: calc(100vh - var(--top) - 56px);
  align-items: stretch;
}
.sidebar, .rail {
  background: var(--bg2);
  border: 0 solid var(--line);
  position: relative;
}
.sidebar { border-right-width: 1px; padding: 12px 12px 24px; }
.rail { border-left-width: 1px; padding: 12px 12px 24px; display: flex; flex-direction: column; gap: 12px; }
.pane-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 28px;
  margin-bottom: 8px;
}
.pane-hd-rail { order: -1; }
.pane-fold {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: color-mix(in srgb, var(--muted) 72%, #c8c2b8);
  cursor: pointer;
  flex: 0 0 28px;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.pane-fold-ico {
  width: 14px;
  height: 14px;
  display: block;
  will-change: transform, opacity;
}
.pane-fold-side .pane-fold-ico {
  animation: pane-nudge-left 2.4s ease-in-out infinite;
}
.pane-fold-rail .pane-fold-ico {
  animation: pane-nudge-right 2.4s ease-in-out infinite;
}
html.side-collapsed .pane-fold-side .pane-fold-ico {
  animation: pane-nudge-expand-side 2.4s ease-in-out infinite;
}
html.rail-collapsed .pane-fold-rail .pane-fold-ico {
  animation: pane-nudge-expand-rail 2.4s ease-in-out infinite;
}
.pane-fold:hover {
  color: color-mix(in srgb, var(--ink) 55%, var(--muted));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--bg));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 55%, transparent);
}
.pane-fold:hover .pane-fold-ico {
  animation-duration: 1.15s;
}
.pane-fold:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  outline-offset: 2px;
}
@keyframes pane-nudge-left {
  0%, 100% { transform: translateX(0); opacity: .72; }
  50% { transform: translateX(-3px); opacity: .95; }
}
@keyframes pane-nudge-right {
  0%, 100% { transform: translateX(0); opacity: .72; }
  50% { transform: translateX(3px); opacity: .95; }
}
@keyframes pane-nudge-expand-side {
  0%, 100% { transform: rotate(180deg) translateX(0); opacity: .72; }
  50% { transform: rotate(180deg) translateX(-3px); opacity: .95; }
}
@keyframes pane-nudge-expand-rail {
  0%, 100% { transform: rotate(180deg) translateX(0); opacity: .72; }
  50% { transform: rotate(180deg) translateX(3px); opacity: .95; }
}
@media (prefers-reduced-motion: reduce) {
  .pane-fold-side .pane-fold-ico,
  .pane-fold-rail .pane-fold-ico,
  html.side-collapsed .pane-fold-side .pane-fold-ico,
  html.rail-collapsed .pane-fold-rail .pane-fold-ico {
    animation: none !important;
  }
  html.side-collapsed .pane-fold-side .pane-fold-ico {
    transform: rotate(180deg);
  }
  html.rail-collapsed .pane-fold-rail .pane-fold-ico {
    transform: rotate(180deg);
  }
}
.side-title {
  height: 28px; display: flex; align-items: center; padding: 0 4px;
  font-size: 11px; letter-spacing: 0.14em; color: var(--muted);
  min-width: 0;
}
@media (min-width: 1101px) {
  html.rail-collapsed .shell {
    grid-template-columns: var(--side) minmax(0, 1fr) 40px;
  }
  html.side-collapsed.rail-collapsed .shell {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }
  html.side-collapsed:not(.rail-collapsed) .shell {
    grid-template-columns: 40px minmax(0, 1fr) var(--rail);
  }
  html.rail-collapsed .rail {
    padding: 10px 4px;
    align-items: center;
    overflow: hidden;
  }
  html.rail-collapsed .rail > :not(.pane-hd) { display: none; }
  html.rail-collapsed .rail .pane-hd {
    flex-direction: column;
    margin: 0;
    width: 100%;
  }
  html.rail-collapsed .rail .side-title { display: none; }
  html.rail-collapsed .rail .pane-fold { width: 100%; }
}
@media (min-width: 821px) {
  html.side-collapsed .sidebar {
    padding: 10px 4px;
    overflow: hidden;
  }
  html.side-collapsed .sidebar > :not(.pane-hd) { display: none; }
  html.side-collapsed .sidebar .pane-hd {
    flex-direction: column;
    margin: 0;
  }
  html.side-collapsed .sidebar .side-title { display: none; }
  html.side-collapsed .sidebar .pane-fold { width: 100%; }
}
@media (min-width: 821px) and (max-width: 1100px) {
  html.side-collapsed .shell {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  #btnRailFold { display: none; }
}
@media (max-width: 820px) {
  #btnSideFold,
  #btnRailFold { display: none; }
}
.cat-hd {
  width: 100%; height: 36px; display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: 0; padding: 0 10px; cursor: pointer; text-align: left;
  border-radius: 10px; font-size: 13.5px;
}
.cat-hd span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat.open .cat-hd { background: var(--accent-soft); color: var(--ink); }
.cat-bd { display: none; list-style: none; margin: 0; padding: 4px 0 8px; }
.cat.open .cat-bd { display: block; }
.cat-bd a {
  display: flex; align-items: center; height: 32px; padding: 0 10px 0 18px;
  color: var(--muted); font-size: 13px; border-radius: 8px;
}
.cat-bd a.on, .cat-bd a:hover { color: var(--text); background: var(--bg3); }

.main { min-width: 0; padding: 24px var(--pad) 40px; display: flex; flex-direction: column; gap: 16px; }
.hero { display: grid; gap: 8px; max-width: 560px; }
.hero h1 { font-size: 26px; }
.hero .muted { letter-spacing: 0.08em; font-size: 12px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  align-items: stretch;
}
.grid > .panel { grid-column: 1 / -1; }

.card, .panel, .rail-card {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card {
  padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 176px;
}
.card:hover { border-color: var(--accent); }
.card-main { color: inherit; display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.card-main:hover { color: inherit; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; }
.card-icon {
  height: 32px; min-width: 32px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--accent-soft); color: var(--ink);
  border: 1px solid var(--line); font-size: 12px;
}
.card-cat { font-size: 12px; color: var(--muted); }
.card h2 { font-size: 15px; }
.card p { color: var(--muted); font-size: 13px; line-height: 1.55; min-height: 40px; }
.card-meta {
  display: flex; align-items: center; gap: 8px;
  height: 32px; margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 12px;
}
.views, .stat {
  display: inline-flex; align-items: center; gap: 6px;
}
.stat {
  height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 16px;
  font-size: 12px; color: var(--muted);
}
.ico {
  width: 15px; height: 15px; flex: 0 0 15px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.like-btn { height: 28px; border-radius: 14px; font-size: 12px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; }
.card-meta .like-btn { margin-left: auto; }
.like-btn.on, .fav-btn.on { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.fav-btn {
  width: 32px; height: 32px; padding: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--bg2); cursor: pointer; color: var(--text);
}
.fav-btn .ico { fill: none; }
.fav-btn.on .ico { fill: currentColor; }
.share-btn {
  height: 32px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--text);
  cursor: pointer; font-size: 13px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.share-btn .ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.share-btn:hover, .rpt-btn:hover { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.rpt-btn {
  height: 32px; padding: 0 8px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--muted);
  cursor: pointer; font-size: 13px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 2px;
}
.rpt-btn .rpt-deco {
  font-size: 11px; font-weight: 500; opacity: 0.55; line-height: 1;
}
.rpt-btn .rpt-lab {
  font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: 0.04em;
}

.tool-page { display: grid; gap: 16px; --tool-fs: 1; }
.tool-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tool-hd-main { min-width: 0; flex: 1; }
.tool-hd-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  flex: 0 0 auto; padding-top: 22px;
}
.tool-hd-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding-top: 0; }
.tool-fs {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: flex-end;
}
.tool-fs-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  height: 24px; min-width: 36px; padding: 0 5px;
  border-radius: 7px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--muted); cursor: pointer;
  line-height: 1;
}
.tool-fs-toggle:hover,
.tool-fs-toggle[aria-expanded="true"] {
  border-color: var(--accent); color: var(--ink); background: var(--accent-soft);
}
.tool-fs-deco {
  font-size: 10px; font-weight: 500; opacity: 0.55; transform: translateY(-0.5px);
}
.tool-fs-glyph {
  display: inline-flex; align-items: baseline; gap: 1px; padding: 0 1px;
}
.tool-fs-glyph i {
  font-style: normal; font-size: 9px; font-weight: 600; opacity: 0.7;
}
.tool-fs-glyph b {
  font-size: 12px; font-weight: 700; letter-spacing: -0.02em;
}
.tool-fs-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  width: 196px; padding: 10px 12px 11px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 12%, transparent);
}
.tool-fs-panel[hidden] { display: none !important; }
.tool-fs-panel-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px; font-size: 11px; color: var(--muted); letter-spacing: 0.04em;
}
.tool-fs-panel-hd strong {
  font-size: 12px; color: var(--text); font-weight: 650; letter-spacing: 0;
}
.tool-fs-range {
  display: block; width: 100%; margin: 0; height: 22px; cursor: pointer;
  accent-color: var(--ink);
}
.tool-fs-marks {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 2px; font-size: 10px; color: var(--muted); text-align: center;
}
.tool-fs-marks span:first-child { text-align: left; }
.tool-fs-marks span:last-child { text-align: right; }
/* 仅放大功能区与说明；标准保持原样，其余档位更明显 */
.tool-page .tool-work,
.tool-page .tool-sec {
  font-size: calc(14px * var(--tool-fs));
}
.tool-page .tool-body,
.tool-page .doc-body {
  line-height: 1.65;
}
.tool-page[data-fs="std"] { --tool-fs: 1; }
.tool-page[data-fs="lg"] { --tool-fs: 1.14; }
.tool-page[data-fs="xl"] { --tool-fs: 1.28; }
.tool-page[data-fs="xxl"] { --tool-fs: 1.42; }
/*
 * 各工具 body 内大量写死 px 字号，仅改父级 font-size 无法生效。
 * 对 .tool-ui 使用 zoom 统一缩放（含控件与自定义样式），保证右上角「调节字号」对全部工具有效。
 */
.tool-page .tool-ui {
  font-size: calc(14px * var(--tool-fs));
}
@supports (zoom: 1) {
  .tool-page .tool-ui {
    font-size: 14px;
    zoom: var(--tool-fs);
  }
}
@media (min-width: 821px) {
  .tool-page[data-fs="xl"] .tool-ui textarea,
  .tool-page[data-fs="xxl"] .tool-ui textarea { line-height: 1.55; }
  .tool-page[data-fs="lg"] .tool-sec h2 { font-size: 17px; }
  .tool-page[data-fs="xl"] .tool-sec h2 { font-size: 18px; }
  .tool-page[data-fs="xxl"] .tool-sec h2 { font-size: 20px; }
}
.crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.tool-hd h1 { font-size: 24px; margin-bottom: 8px; }
.lead { color: var(--muted); max-width: 46em; }
.tool-work, .tool-sec { padding: 20px; }
.sec-kicker {
  margin: 0 0 14px; font-size: 11px; letter-spacing: 0.14em; color: var(--muted);
}
.tool-body { padding: 0; }
.tool-sec h2 { font-size: 16px; margin-bottom: 10px; }
.tool-more { padding: 16px 18px; }
.tool-more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
}
.tool-more-block { min-width: 0; }
.tool-more-h {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tool-more-h em {
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.tool-more-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 8px;
}
.tool-more-list a {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 28px;
  padding: 3px 6px 3px 4px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.tool-more-list a:hover {
  background: var(--bg);
  border-color: var(--line);
}
.tool-more-ico {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  line-height: 1;
}
.tool-more-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .tool-more-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 520px) {
  .tool-more { padding: 14px; }
  .tool-more-list { grid-template-columns: 1fr; gap: 2px; }
}
.doc-body { line-height: 1.85; color: var(--text); }
.doc-clip {
  max-height: calc(1.85em * 5);
  overflow: hidden;
  position: relative;
}
.tool-sec.open .doc-clip { max-height: none; overflow: visible; }
.tool-sec.has-more:not(.open) .doc-clip::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em;
  background: linear-gradient(transparent, var(--bg2));
  pointer-events: none;
}
.doc-more {
  display: none;
  margin-top: 8px;
  height: 30px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--text); cursor: pointer;
  font-size: 12px; letter-spacing: 0.04em;
}
.tool-sec.has-more .doc-more { display: inline-flex; align-items: center; }
.doc-more:hover { border-color: var(--accent); color: var(--accent); }
.doc-body p, .doc-body ol, .doc-body ul { margin: 0 0 10px; }
.doc-body ol, .doc-body ul { padding-left: 1.2em; }
.doc-body code {
  font-size: 12.5px; padding: 1px 5px; background: var(--bg3); border-radius: 4px;
}
.tool-sec-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.tool-ui { display: grid; gap: 12px; }
.tool-ui label:not(:has(> input[type="checkbox"])):not(:has(> input[type="radio"])),
.auth-box label:not(:has(> input[type="checkbox"])):not(:has(> input[type="radio"])),
.uc label:not(:has(> input[type="checkbox"])):not(:has(> input[type="radio"])) {
  display: grid; gap: 6px; font-size: 12px; color: var(--muted);
}
/* 复选/单选芯片：未选中跟正文色；选中态用 on-ink，避免深底深字 */
label:has(> input[type="checkbox"]):not(.range-opt),
label:has(> input[type="radio"]):not(.range-opt),
.check-inline, .check-row label {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  user-select: none;
}
.check-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.check-inline, .check-row label {
  padding: 6px 14px 6px 10px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--bg2);
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}
.check-inline:hover, .check-row label:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}
.check-inline:has(input:focus-visible),
.check-row label:has(input:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}
/* 选中：主题色铺满 + 浅色字（on-ink），保证深色强调色上可读 */
.tool-ui label:has(> input[type="checkbox"]:checked):not(.range-opt),
.tool-ui label:has(> input[type="radio"]:checked):not(.range-opt),
.tool-ui .check-inline:has(input:checked),
.tool-ui .check-row label:has(input:checked),
.check-inline:has(input:checked),
.check-row label:has(input:checked) {
  border-color: var(--accent);
  background: linear-gradient(165deg, var(--accent) 0%, var(--accent-2) 100%);
  color: var(--on-ink);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--accent-2) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.tool-ui .check-inline:has(input:checked):hover,
.tool-ui .check-row label:has(input:checked):hover,
.check-inline:has(input:checked):hover,
.check-row label:has(input:checked):hover {
  border-color: var(--accent-2);
  background: linear-gradient(165deg, var(--accent-2) 0%, var(--accent) 100%);
  color: var(--on-ink);
}
/* 色块 / 数字等控件在芯片内 */
.check-inline input[type="number"],
.check-row label input[type="number"],
.check-inline input[type="text"],
.check-row label input[type="text"],
.check-inline select,
.check-row label select {
  width: auto;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
}
.check-inline:has(input:checked) input[type="number"],
.check-inline:has(input:checked) input[type="text"],
.check-inline:has(input:checked) select,
.check-row label:has(input:checked) input[type="number"],
.check-row label:has(input:checked) input[type="text"],
.check-row label:has(input:checked) select {
  background: color-mix(in srgb, var(--on-ink) 92%, transparent);
  border-color: color-mix(in srgb, var(--on-ink) 55%, var(--accent) 45%);
  color: var(--ink);
}
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  max-width: 16px;
  margin: 0;
  padding: 0;
  flex: 0 0 16px;
  box-sizing: border-box;
  border: 1.5px solid color-mix(in srgb, var(--line) 55%, var(--ink) 45%);
  background: #fff;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
input[type="checkbox"] { border-radius: 5px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover,
input[type="radio"]:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--accent);
  border-color: var(--accent-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 1px color-mix(in srgb, var(--accent-2) 35%, transparent);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid var(--on-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 3.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--on-ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 40%, transparent);
}
/* 选中芯片内：控件反白，勾选更醒目 */
.check-inline:has(input:checked) > input[type="checkbox"],
.check-inline:has(input:checked) > input[type="radio"],
.check-row label:has(input:checked) > input[type="checkbox"],
.check-row label:has(input:checked) > input[type="radio"] {
  background: var(--on-ink);
  border-color: color-mix(in srgb, var(--on-ink) 70%, var(--accent-2) 30%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.check-inline:has(input:checked) > input[type="checkbox"]:checked::after,
.check-row label:has(input:checked) > input[type="checkbox"]:checked::after {
  border-color: var(--accent-2);
}
.check-inline:has(input:checked) > input[type="radio"]:checked::after,
.check-row label:has(input:checked) > input[type="radio"]:checked::after {
  background: var(--accent-2);
  box-shadow: none;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}
.check-inline:has(input:disabled),
.check-row label:has(input:disabled) {
  opacity: 0.55;
  cursor: default;
}
.tool-ui textarea,
.tool-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]):not([type="range"]):not([type="file"]),
.tool-ui select,
.board-form textarea, .auth-box input, .uc input,
.modal input, .modal textarea {
  width: 100%; border: 1px solid var(--line); background: var(--bg);
  border-radius: 12px; padding: 10px 12px; outline: none;
}
.tool-ui textarea:focus,
.tool-ui input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):focus,
.board-form textarea:focus,
.auth-box input:focus, .uc input:focus, .modal textarea:focus, .modal input:focus {
  border-color: var(--accent); background: var(--bg2);
}

/* 颜色选择：方形色块，避免被拉成一条线 */
.tool-ui input[type="color"],
.check-inline input[type="color"],
.check-row label input[type="color"],
.color-pick input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-width: 36px;
  padding: 0;
  margin: 0;
  border: 1.5px solid color-mix(in srgb, var(--line) 55%, var(--ink) 45%);
  border-radius: 8px;
  background: var(--bg2);
  cursor: pointer;
  flex: 0 0 36px;
  overflow: hidden;
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.tool-ui input[type="color"]:hover,
.color-pick input[type="color"]:hover,
.check-inline input[type="color"]:hover {
  border-color: var(--accent);
}
.tool-ui input[type="color"]:focus-visible,
.color-pick input[type="color"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  outline-offset: 2px;
}
.tool-ui input[type="color"]::-webkit-color-swatch-wrapper,
.color-pick input[type="color"]::-webkit-color-swatch-wrapper,
.check-inline input[type="color"]::-webkit-color-swatch-wrapper,
.check-row label input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 3px;
}
.tool-ui input[type="color"]::-webkit-color-swatch,
.color-pick input[type="color"]::-webkit-color-swatch,
.check-inline input[type="color"]::-webkit-color-swatch,
.check-row label input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.tool-ui input[type="color"]::-moz-color-swatch,
.color-pick input[type="color"]::-moz-color-swatch,
.check-inline input[type="color"]::-moz-color-swatch,
.check-row label input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 5px;
}

/* 颜色字段：文字 + 方块，不拉长 */
.color-pick,
.tool-ui label.color-pick,
label:has(> input[type="color"]):not(.range-opt) {
  display: inline-flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  padding: 6px 12px 6px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--bg2);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}
.color-pick:hover,
.tool-ui label.color-pick:hover,
label:has(> input[type="color"]):not(.range-opt):hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}
.check-row .color-pick,
.check-row label:has(> input[type="color"]) {
  flex: 0 0 auto;
}
.tool-ui textarea { min-height: 140px; resize: vertical; }
/* 按钮行：与上方表单/选项保持间距；嵌套在无 gap 的面板里时尤其需要 */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 4px;
}
/* .tool-ui 直接子级已有 grid gap，避免间距叠加 */
.tool-ui > .btn-row {
  margin-top: 0;
  margin-bottom: 0;
}
/* 常见：选项行紧挨按钮行 */
.tool-ui .check-row + .btn-row,
.tool-ui .color-pick + .btn-row,
.tool-ui label + .btn-row {
  margin-top: 12px;
}
.tool-ui > .check-row + .btn-row,
.tool-ui > label + .btn-row {
  margin-top: 0;
}
/* 分栏面板（data-panel）内部统一纵向间距，避免按钮贴表单项 */
.tool-ui [data-panel] {
  display: grid;
  gap: 12px;
}
.tool-ui [data-panel][hidden] {
  display: none !important;
}
.tool-ui [data-panel] > .btn-row {
  margin-top: 0;
  margin-bottom: 0;
}
.tool-ui button, .btn-row button {
  height: 32px; border: 1px solid var(--line); background: var(--bg2);
  border-radius: 10px; padding: 0 12px; cursor: pointer; font-size: 13px;
}
.tool-ui button:hover, .btn-row button:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
@media (max-width: 700px) {
  .tool-ui {
    gap: 14px;
  }
  .tool-ui button, .btn-row button {
    min-height: 40px;
    height: auto;
    padding: 8px 14px;
  }
  .btn-row { gap: 10px; }
  .check-row { gap: 8px 10px; }
  .check-inline, .check-row label {
    min-height: 38px;
    padding: 7px 14px 7px 10px;
    border-radius: 10px;
  }
  .tool-ui textarea {
    min-height: 120px;
    font-size: 16px; /* 避免 iOS 聚焦放大 */
  }
  .tool-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="file"]),
  .tool-ui select {
    min-height: 40px;
    font-size: 16px;
  }
  .tool-ui input[type="file"] {
    max-width: 100%;
  }
  .result-box {
    min-height: 72px;
    padding: 12px;
    font-size: 14px;
  }
  .tool-ui table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.result-box {
  min-height: 88px; padding: 12px; border-radius: 12px;
  background: var(--bg); border: 1px dashed var(--line);
  white-space: pre-wrap; word-break: break-word; line-height: 1.7;
}

.clock-card { padding: 16px; display: grid; gap: 4px; }
.clock-week { font-size: 11px; letter-spacing: 0.12em; color: var(--muted); }
.clock-date { font-size: 16px; font-weight: 600; }
.clock-lunar { font-size: 12px; color: var(--muted); }
.clock-time {
  font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: 0.06em;
  margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line);
}

.weather-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  display: grid;
  gap: 0;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--bg2) 88%, var(--accent-soft)) 0%, var(--bg2) 62%);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
}
.weather-card[hidden] { display: none !important; }
.weather-card::before {
  content: "";
  position: absolute;
  inset: auto -20% -40% 40%;
  height: 70%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  pointer-events: none;
}
.wx-summary {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.wx-summary:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.wx-summary-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.wx-city {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wx-cond {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wx-summary-temp {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.wx-summary-temp small {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.wx-chev {
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  align-self: center;
  opacity: 0.7;
}
.weather-card.is-open .wx-chev {
  transform: rotate(-135deg);
  margin-top: 4px;
}
.wx-detail {
  position: relative;
  z-index: 1;
  padding: 0 14px 12px;
  display: grid;
  gap: 10px;
}
.wx-detail[hidden] { display: none !important; }
.wx-city-edit {
  display: grid;
  gap: 4px;
  padding-top: 2px;
  border-top: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
}
.wx-city-lab {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.wx-city-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
  min-width: 0;
}
.wx-city-input {
  flex: 1;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  color: var(--text);
  padding: 0 8px;
  font-size: 13px;
  outline: none;
}
.wx-city-input:focus {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.wx-city-auto {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.wx-city-auto:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.wx-city-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}
.wx-city-hint.is-err { color: color-mix(in srgb, #c45c26 75%, var(--text)); }
.wx-detail-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wx-detail-tip {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.wx-glyph {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  color: var(--ink);
}
.wx-svg {
  display: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.wx-svg-clear { fill: color-mix(in srgb, var(--accent) 35%, transparent); }
.wx-svg-cloud,
.wx-svg-fog,
.wx-svg-rain,
.wx-svg-snow { fill: color-mix(in srgb, var(--muted) 18%, transparent); }
.wx-svg-storm { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.wx-glyph[data-icon="clear"] .wx-svg-clear,
.wx-glyph[data-icon="cloud"] .wx-svg-cloud,
.wx-glyph[data-icon="fog"] .wx-svg-fog,
.wx-glyph[data-icon="rain"] .wx-svg-rain,
.wx-glyph[data-icon="snow"] .wx-svg-snow,
.wx-glyph[data-icon="storm"] .wx-svg-storm { display: block; }
.wx-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.wx-stat {
  display: grid;
  gap: 3px;
  text-align: center;
  padding: 0 4px;
}
.wx-stat + .wx-stat {
  border-left: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
}
.wx-lab {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.wx-val {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.rail-card { padding: 14px; }
.rail-card.weather-card { padding: 0; }
.rail-hd { display: flex; align-items: center; justify-content: space-between; height: 28px; margin-bottom: 10px; }
.rail-hd h3 { font-size: 13px; font-weight: 600; }
.mini { height: 24px; font-size: 11px; border-radius: 12px; padding: 0 8px; }
.note-hint { margin: 0 0 8px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.note-item {
  border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px;
  background: var(--bg); overflow: hidden;
}
.note-item textarea {
  width: 100%; border: 0; background: transparent; padding: 8px 8px 6px;
  resize: none; height: 88px; outline: none; min-height: 56px; display: block;
}
.note-tools {
  display: flex; align-items: stretch; height: 22px;
  border-top: 1px solid var(--line); background: var(--bg2);
}
.note-tools button,
.note-resizer {
  height: 22px; margin: 0; padding: 0 7px;
  border: 0; border-right: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--muted);
  font-size: 11px; line-height: 22px; letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: 0 0 auto;
}
.note-tools button:hover:not(:disabled) { color: var(--ink); background: var(--accent-soft); }
.note-tools button:disabled { opacity: 0.32; cursor: default; }
.note-del { color: #9a3b32; }
.note-del:hover:not(:disabled) { color: #9a3b32; background: #fbf3f2; }
.note-resizer {
  margin-left: auto; border-right: 0; cursor: ns-resize;
  color: var(--muted); user-select: none;
}
.note-resizer:hover { color: var(--ink); background: var(--accent-soft); }
.fav-list, .link-list { list-style: none; margin: 0; padding: 0; }
.fav-list li, .link-list li {
  min-height: 32px; display: flex; align-items: center;
  border-bottom: 1px solid var(--line); font-size: 13px; gap: 6px;
}
.fav-list a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-drop {
  flex: 0 0 auto; height: 22px; padding: 0 4px; margin: 0;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 11px;
}
.fav-drop:hover { color: #9a3b32; background: #fbf3f2; }
.fav-list li:last-child, .link-list li:last-child { border-bottom: 0; }
.fav-list a, .link-list a { color: var(--text); }
.rail-tip { font-size: 12px; color: var(--muted); padding: 0 4px; }

.foot {
  min-height: 56px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 var(--pad); border-top: 1px solid var(--line);
  background: var(--bg2); color: var(--muted); font-size: 13px;
}
.foot a { margin-right: 16px; color: var(--muted); }
.foot a:hover { color: var(--text); }

.page-board { display: grid; gap: 16px; }
.page-head { display: grid; gap: 10px; }
.page-head h1 { font-size: 24px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs a {
  height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: 16px;
  color: var(--muted); display: inline-flex; align-items: center; font-size: 13px;
}
.tabs a.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.board-compose { padding: 20px; display: grid; gap: 12px; }
.board-form { display: grid; gap: 12px; width: 100%; max-width: none; }
.board-form textarea { min-height: 120px; resize: vertical; }
.board-form .btn { width: fit-content; }
.board-example {
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--bg);
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}
.board-example-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.board-example-hd strong { font-size: 13px; font-weight: 600; }
.board-example-body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}
.board-list { display: grid; gap: 12px; }
.msg-item { padding: 16px 18px; display: grid; gap: 8px; }
.msg-item p { line-height: 1.75; word-break: break-word; }
.msg-meta { font-size: 12px; color: var(--muted); }
.reply { background: var(--accent-soft); padding: 10px 12px; border-radius: 10px; }

.page-auth .main {
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - var(--top) - 56px);
}
.auth-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0 24px;
}
.auth-box {
  width: min(400px, 100%);
  max-width: 400px;
  margin: 0 auto;
  padding: 32px 28px;
  display: grid;
  gap: 14px;
  text-align: left;
}
.auth-box h1 { font-size: 24px; text-align: center; }
.auth-box > .muted { text-align: center; }
.auth-box form { display: grid; gap: 12px; width: 100%; }
.auth-box .btn { width: 100%; height: 40px; }
.auth-switch { text-align: center; }
.auth-quick, .auth-full { display: grid; gap: 12px; width: 100%; }
.auth-last {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg2);
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}
.auth-last strong { color: var(--text); font-weight: 700; }
.auth-welcome { margin-bottom: 0; }
.auth-box .btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 500;
}
.auth-box .btn-ghost:hover {
  border-color: var(--accent);
  color: var(--text);
}
.form-msg { color: var(--danger); min-height: 1.2em; font-size: 13px; }

.uc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.uc-side { padding: 24px 20px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.uc-side h2, .uc-name {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0; font-size: 20px; flex-wrap: wrap;
}
.vip-until { font-size: 12px; color: var(--text); margin: 0; }
.vip-until a { color: var(--accent); }
.uc-side .btn { width: 100%; }
.uc-nav { list-style: none; padding: 12px 0 0; margin: 4px 0 0; width: 100%; border-top: 1px solid var(--line); text-align: left; }
.uc-nav a { display: flex; align-items: center; height: 36px; color: var(--muted); padding: 0 4px; }
.uc-nav a.on { color: var(--ink); font-weight: 650; }
.uc-fold {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg);
}
.uc-fold summary {
  cursor: pointer; font-size: 14px; color: var(--text); list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.uc-fold summary::-webkit-details-marker { display: none; }
.uc-fold summary::after { content: "＋"; color: var(--muted); font-size: 14px; }
.uc-fold[open] summary::after { content: "－"; }
.uc-fold[open] summary { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.uc-fold form { margin-top: 4px; }
.flowers { font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.flower-emo { font-size: 16px; line-height: 1; }
.uc-hello { font-size: 18px; line-height: 1.65; margin: 0 0 10px; }
.uc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.uc-tabs button {
  height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--text); cursor: pointer; font-size: 12px;
}
.uc-tabs button.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.fav-sort { list-style: none; margin: 0; padding: 0; }
.fav-row {
  display: flex; align-items: center; gap: 10px; min-height: 40px;
  border-bottom: 1px solid var(--line); cursor: grab;
}
.fav-row.off { display: none; }
.fav-row.dragging { opacity: 0.55; background: var(--accent-soft); }
.fav-handle { color: var(--muted); letter-spacing: -2px; font-size: 12px; user-select: none; flex: 0 0 auto; }
.fav-row a { flex: 1; min-width: 0; color: var(--text); }
.invite-box { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.invite-box input {
  flex: 1; min-width: 180px; height: 36px; border: 1px solid var(--line); border-radius: 10px;
  padding: 0 12px; background: var(--bg);
}
.invite-h { margin: 16px 0 8px; font-size: 15px; }
.uc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.uc-table th, .uc-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.uc-pager { display: flex; gap: 12px; align-items: center; margin-top: 12px; font-size: 13px; }
.uc-main { display: grid; gap: 16px; }
.uc-main .panel { padding: 20px; display: grid; gap: 12px; }
.uc-main form { display: grid; gap: 12px; max-width: 420px; }
.page-cms { padding: 28px 32px; display: grid; gap: 14px; width: 100%; max-width: none; box-sizing: border-box; }
.page-cms h1 { margin: 0; font-size: 28px; line-height: 1.35; }
.cms-body { line-height: 1.9; font-size: 15px; }
.cms-body p { margin-bottom: 12px; }
.cms-body h2, .cms-body h3 { margin: 1.2em 0 0.5em; line-height: 1.4; }
.cms-body ul, .cms-body ol { margin: 0 0 12px; padding-left: 1.4em; }

.modal { position: fixed; inset: 0; background: #3a3835; display: grid; place-items: center; z-index: 80; }
.modal[hidden] { display: none !important; }
.modal-box {
  width: min(420px, calc(100% - 32px)); background: var(--bg2);
  border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: grid; gap: 10px;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.confirm-msg { margin: 0; color: var(--text); font-size: 14px; line-height: 1.6; }
.mask { display: none; position: fixed; inset: 0; background: #3a3835; z-index: 30; }
.mask.show { display: block; }

.fab-stack {
  position: fixed;
  right: 22px;
  bottom: 28px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.fab-stack > * { pointer-events: auto; }

.visit-hist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.visit-hist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.visit-hist-btn svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }
.visit-hist-btn:hover,
.visit-hist.open .visit-hist-btn {
  background: var(--bg3);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
}
.visit-hist-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(300px, calc(100vw - 28px));
  max-height: min(420px, 58vh);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg2);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 40%, transparent) inset,
    0 14px 36px color-mix(in srgb, var(--ink) 14%, transparent);
  overflow: hidden;
  z-index: 2;
}
.visit-hist-panel[hidden] { display: none !important; }
.visit-hist-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg3);
}
.visit-hist-hd strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.visit-hist-clear {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}
.visit-hist-clear:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.visit-hist-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow: auto;
  flex: 1;
  min-height: 0;
  background: var(--bg2);
}
.visit-hist-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
  border-radius: 10px;
}
.visit-hist-list li:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.visit-hist-list a {
  display: block;
  min-width: 0;
  padding: 9px 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visit-hist-list a:hover { color: var(--ink); }
.visit-hist-del {
  width: 28px;
  height: 28px;
  margin-right: 6px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.visit-hist-del:hover {
  color: #b33;
  background: color-mix(in srgb, #b33 10%, transparent);
}
.visit-hist-empty {
  margin: 0;
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  background: var(--bg2);
}
.visit-hist-empty[hidden] { display: none !important; }

.back-top {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease, background .12s ease, border-color .12s ease;
}
.back-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-top[hidden] { display: none !important; }
.back-top:hover {
  background: var(--bg3);
  border-color: var(--accent);
  color: var(--ink);
}
.back-top svg { width: 18px; height: 18px; display: block; }
@media (max-width: 820px) {
  .fab-stack { right: 14px; bottom: 18px; gap: 8px; }
  .visit-hist { display: none !important; }
  .back-top { width: 38px; height: 38px; }
}

.site-toast {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  pointer-events: auto;
  cursor: default;
}
.site-toast[hidden] { display: none !important; }
.site-toast-card {
  max-width: min(380px, 100%);
  padding: 16px 22px;
  border-radius: 14px;
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--line);
  text-align: center;
  font-size: 14px;
  line-height: 1.65;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 18%, transparent);
  pointer-events: auto;
  cursor: default;
}

@media (max-width: 1100px) {
  .shell { grid-template-columns: var(--side) minmax(0, 1fr); }
  .topbar { grid-template-columns: minmax(160px, var(--side)) minmax(0, 1fr) auto; }
  .rail {
    display: none; position: fixed; right: 0; top: var(--top); bottom: 0;
    width: min(var(--rail), 88vw); z-index: 35; overflow: auto; border-left-width: 1px;
  }
  .rail.open { display: flex; }
  .topnav > a { display: none; }
  .topnav { display: flex; margin-right: 0; }
  .nav-cats-menu { left: auto; right: 0; }
  .nav-cats-panel { grid-template-columns: 1fr; min-width: 168px; }
  #btnRail { display: inline-flex; }
}
@media (max-width: 820px) {
  :root { --top: 104px; }
  .topbar, .shell { grid-template-columns: 1fr; }
  .topbar {
    height: var(--top);
    padding: 0 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 48px 56px;
    gap: 0 8px;
    align-items: center;
  }
  .topbar-left {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    min-width: 0;
  }
  .topbar-right {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
    gap: 6px;
  }
  .topbar-right .js-user-auth,
  .topbar-right .js-guest-auth { order: 1; }
  .topbar-right .dropdown { order: 2; }
  #btnRail { display: none !important; }
  #btnSide { display: none !important; }
  .topbar-right a.js-guest-auth[href="/register"] { display: none !important; }
  .topbar-mid {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0 0 8px;
    justify-content: stretch;
  }
  .search { max-width: none; }
  .brand { min-width: 0; }
  .brand-text em { display: none; }
  .brand-text strong {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-right .btn {
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }
  .user-chip { max-width: 110px; height: 30px; padding: 0 8px; font-size: 12px; }
  .sidebar {
    display: none; position: fixed; left: 0; top: var(--top); bottom: 0;
    width: min(var(--side), 86vw); z-index: 35; overflow: auto; border-right-width: 1px;
  }
  .sidebar.open { display: block; }
  .uc { grid-template-columns: 1fr; }
  .tool-hd { flex-direction: column; }
  .tool-hd-right { padding-top: 0; align-items: flex-start; width: 100%; }
  .tool-hd-actions { padding-top: 0; flex-wrap: wrap; }
  .foot { flex-direction: column; align-items: flex-start; padding: 16px; height: auto; }
  .main { padding: 16px; }
  .hero h1 { font-size: 22px; }
}
@media (max-width: 380px) {
  .brand-mark { width: 28px; height: 28px; flex-basis: 28px; }
  .topbar-right .btn { padding: 0 8px; }
}

.page-vip .main { padding-top: 20px; }
.vip-page { max-width: 720px; margin: 0 auto 40px; display: grid; gap: 28px; }
.vip-hero {
  padding: 36px 32px 32px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, #c4a574 35%, var(--line));
  background:
    linear-gradient(165deg, color-mix(in srgb, #e8d5a8 22%, var(--bg2)) 0%, var(--bg2) 55%, var(--bg) 100%);
  text-align: center;
}
.vip-kicker {
  margin: 0 0 8px;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: #8a7340;
}
.vip-hero h1 {
  margin: 0 0 12px; font-size: 34px; letter-spacing: 0.12em;
  font-weight: 600; color: var(--ink);
}
.vip-lead {
  margin: 0 auto; max-width: 30em; color: var(--muted); line-height: 1.8; font-size: 14px;
}
.vip-perks {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.vip-perks li {
  padding: 20px 18px 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--bg2);
  display: grid; gap: 8px; align-content: start;
}
.vip-perk-no {
  font-size: 11px; letter-spacing: 0.18em; color: #b8923c; font-weight: 650;
}
.vip-perks h2 { margin: 0; font-size: 16px; }
.vip-perks p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.7; }
.vip-card {
  padding: 28px 28px 26px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, #c4a574 40%, var(--line));
  background: var(--bg2);
  display: grid; gap: 12px; justify-items: center; text-align: center;
  box-shadow: 0 18px 40px rgba(40, 32, 16, 0.05);
}
.vip-card-top h2 { margin: 4px 0 0; font-size: 22px; letter-spacing: 0.08em; }
.vip-rate {
  margin: 8px 0 0; font-size: 15px; color: var(--text); letter-spacing: 0.04em;
}
.vip-rate em {
  font-style: normal; font-size: 28px; font-weight: 600;
  color: #8a6a28; font-family: "Palatino Linotype", Georgia, serif;
}
.vip-note, .vip-lack { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.7; max-width: 40em; }
.vip-status {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
  font-size: 13px; color: var(--muted);
}
.vip-status b { color: var(--ink); font-weight: 650; }
.vip-btn {
  min-width: 200px; height: 42px;
  background: linear-gradient(180deg, #3a3428, #1c1914);
  border-color: #1c1914; color: #f4ead4; letter-spacing: 0.12em;
}
.vip-btn:hover { color: #f4ead4; opacity: 0.92; }
.vip-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
html[data-mode="dark"] .vip-hero {
  background: linear-gradient(165deg, rgba(196,165,116,0.12), var(--bg2));
}
html[data-mode="dark"] .vip-rate em { color: #e0c078; }
html[data-mode="dark"] .vip-kicker { color: #e0c078; }
html[data-mode="dark"] .vip-rate { color: #d4c19a; }
html[data-mode="dark"] .vip-card-hd { color: #e0c078; }

/* —— 黑夜模式：按钮 / 文字 / 表单对比度兜底 —— */
html[data-mode="dark"] .btn,
html[data-mode="dark"] a.btn,
html[data-mode="dark"] .search button,
html[data-mode="dark"] .tabs a.on,
html[data-mode="dark"] .uc-tabs button.on {
  color: var(--on-ink);
  background: var(--ink);
  border-color: var(--ink);
}
html[data-mode="dark"] .btn:hover:not(.btn-ghost),
html[data-mode="dark"] a.btn:hover:not(.btn-ghost) {
  color: var(--on-ink);
  filter: brightness(1.06);
}
html[data-mode="dark"] .btn-ghost,
html[data-mode="dark"] a.btn-ghost,
html[data-mode="dark"] .icon-btn,
html[data-mode="dark"] .mode-btn,
html[data-mode="dark"] .like-btn,
html[data-mode="dark"] .mini,
html[data-mode="dark"] .share-btn,
html[data-mode="dark"] .tool-fs-toggle,
html[data-mode="dark"] .rpt-btn,
html[data-mode="dark"] .doc-more,
html[data-mode="dark"] .tool-ui button,
html[data-mode="dark"] .btn-row button {
  color: var(--text);
  background: var(--bg3);
  border-color: var(--line);
}
html[data-mode="dark"] .btn-ghost:hover,
html[data-mode="dark"] a.btn-ghost:hover,
html[data-mode="dark"] .icon-btn:hover,
html[data-mode="dark"] .mode-btn:hover,
html[data-mode="dark"] .tool-ui button:hover,
html[data-mode="dark"] .btn-row button:hover,
html[data-mode="dark"] .share-btn:hover,
html[data-mode="dark"] .tool-fs-toggle:hover,
html[data-mode="dark"] .rpt-btn:hover,
html[data-mode="dark"] .doc-more:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent-soft) 80%, var(--bg3));
  border-color: var(--accent);
}
html[data-mode="dark"] .user-chip {
  color: var(--text);
  background: var(--accent-soft);
  border-color: var(--line);
}
html[data-mode="dark"] .user-chip:hover { color: var(--text); }
html[data-mode="dark"] .user-chip.is-vip {
  border-color: color-mix(in srgb, #c4a574 40%, var(--line));
  background: color-mix(in srgb, #c4a574 16%, var(--bg2));
  color: #f0e2c0;
}
html[data-mode="dark"] .note-del,
html[data-mode="dark"] .fav-drop:hover {
  color: #e0a8a0;
}
html[data-mode="dark"] .note-del:hover:not(:disabled),
html[data-mode="dark"] .fav-drop:hover {
  background: color-mix(in srgb, #9a3b32 28%, var(--bg3));
  color: #f0c4be;
}
html[data-mode="dark"] input[type="checkbox"],
html[data-mode="dark"] input[type="radio"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  background: var(--bg);
  border-color: color-mix(in srgb, var(--line) 50%, var(--accent) 50%);
}
html[data-mode="dark"] input[type="checkbox"]:checked,
html[data-mode="dark"] input[type="radio"]:checked {
  background: var(--accent);
  border-color: var(--accent-2);
}
html[data-mode="dark"] label:has(> input[type="checkbox"]):not(.range-opt),
html[data-mode="dark"] label:has(> input[type="radio"]):not(.range-opt),
html[data-mode="dark"] .check-inline,
html[data-mode="dark"] .check-row label {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  background: var(--bg3);
  color: var(--text);
}
html[data-mode="dark"] .color-pick,
html[data-mode="dark"] .tool-ui label.color-pick,
html[data-mode="dark"] label:has(> input[type="color"]):not(.range-opt) {
  background: var(--bg3);
  border-color: var(--line);
  color: var(--text);
}
html[data-mode="dark"] .tool-ui input[type="color"],
html[data-mode="dark"] .color-pick input[type="color"] {
  background: var(--bg);
  border-color: color-mix(in srgb, var(--line) 50%, var(--accent) 50%);
}
html[data-mode="dark"] .check-inline:hover,
html[data-mode="dark"] .check-row label:hover,
html[data-mode="dark"] label:has(> input[type="checkbox"]):not(.range-opt):hover,
html[data-mode="dark"] label:has(> input[type="radio"]):not(.range-opt):hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}
html[data-mode="dark"] .tool-ui label:has(> input[type="checkbox"]:checked):not(.range-opt),
html[data-mode="dark"] .tool-ui label:has(> input[type="radio"]:checked):not(.range-opt),
html[data-mode="dark"] .check-inline:has(input:checked),
html[data-mode="dark"] .check-row label:has(input:checked) {
  background: linear-gradient(165deg, var(--accent) 0%, var(--accent-2) 100%);
  border-color: var(--accent-2);
  color: var(--on-ink);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
html[data-mode="dark"] .check-inline:has(input:checked) > input[type="checkbox"],
html[data-mode="dark"] .check-inline:has(input:checked) > input[type="radio"],
html[data-mode="dark"] .check-row label:has(input:checked) > input[type="checkbox"],
html[data-mode="dark"] .check-row label:has(input:checked) > input[type="radio"] {
  background: var(--on-ink);
  border-color: var(--on-ink);
}
html[data-mode="dark"] .check-inline:has(input:checked) > input[type="checkbox"]:checked::after,
html[data-mode="dark"] .check-row label:has(input:checked) > input[type="checkbox"]:checked::after {
  border-color: var(--accent-2);
}
html[data-mode="dark"] .check-inline:has(input:checked) > input[type="radio"]:checked::after,
html[data-mode="dark"] .check-row label:has(input:checked) > input[type="radio"]:checked::after {
  background: var(--accent-2);
}
html[data-mode="dark"] .tool-ui input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
html[data-mode="dark"] .tool-ui textarea,
html[data-mode="dark"] .tool-ui select,
html[data-mode="dark"] .search input,
html[data-mode="dark"] .board-form textarea,
html[data-mode="dark"] .auth-box input,
html[data-mode="dark"] .uc-invite input {
  background: var(--bg);
  color: var(--text);
  border-color: var(--line);
}
html[data-mode="dark"] .tool-ui input:focus,
html[data-mode="dark"] .tool-ui textarea:focus,
html[data-mode="dark"] .search input:focus {
  background: var(--bg2);
  border-color: var(--accent);
}
html[data-mode="dark"] ::placeholder {
  color: color-mix(in srgb, var(--muted) 85%, transparent);
  opacity: 1;
}
html[data-mode="dark"] .card-ico,
html[data-mode="dark"] .cat.open .cat-hd {
  color: var(--text);
  background: var(--accent-soft);
}
html[data-mode="dark"] .like-btn.on,
html[data-mode="dark"] .fav-btn.on {
  color: var(--text);
  background: var(--accent-soft);
  border-color: var(--accent);
}
html[data-mode="dark"] .reply {
  background: var(--accent-soft);
  color: var(--text);
}
html[data-mode="dark"] .modal,
html[data-mode="dark"] .mask {
  background: rgba(8, 8, 7, 0.72);
}
html[data-mode="dark"] .back-top,
html[data-mode="dark"] .visit-hist-btn {
  background: color-mix(in srgb, var(--bg2) 92%, #000);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
html[data-mode="dark"] .visit-hist-panel {
  background: var(--bg2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
html[data-mode="dark"] .visit-hist-hd {
  background: var(--bg3);
}
html[data-mode="dark"] .visit-hist-list,
html[data-mode="dark"] .visit-hist-empty {
  background: var(--bg2);
}
html[data-mode="dark"] .site-toast {
  background: color-mix(in srgb, #000 45%, transparent);
}
html[data-mode="dark"] .site-toast-card {
  background: var(--bg2);
  color: var(--text);
  border-color: var(--line);
}
html[data-mode="dark"] .weather-card {
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--bg2) 80%, #000) 0%, color-mix(in srgb, var(--bg2) 92%, #000) 100%);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}
html[data-mode="dark"] .panel,
html[data-mode="dark"] .rail-card,
html[data-mode="dark"] .sidebar,
html[data-mode="dark"] .rail,
html[data-mode="dark"] .dropdown-menu,
html[data-mode="dark"] .nav-cats-panel,
html[data-mode="dark"] .msg-item,
html[data-mode="dark"] .board-compose,
html[data-mode="dark"] .board-example {
  background: color-mix(in srgb, var(--bg2) 92%, #000);
}
html[data-mode="dark"] .weather-card.rail-card {
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--bg2) 80%, #000) 0%, color-mix(in srgb, var(--bg2) 92%, #000) 100%);
}
html[data-mode="dark"] .auth-box {
  background: var(--bg2);
  border-color: var(--line);
  color: var(--text);
}
html[data-mode="dark"] .form-msg,
html[data-mode="dark"] .auth-box .err {
  color: #e0a8a0;
}
@media (max-width: 800px) {
  .vip-perks { grid-template-columns: 1fr; }
  .vip-hero, .vip-card { padding: 24px 18px; }
  .vip-hero h1 { font-size: 26px; }
}

/*
 * 手机端输入防变形：
 * 1) iOS/部分安卓在控件字号 < 16px 时会自动放大视口，整页看起来被「撑歪」；
 * 2) 工具区 CSS zoom 在软键盘弹出时容易与视口缩放叠加，布局错位。
 */
@media (max-width: 820px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: clip;
  }
  body {
    overflow-x: clip;
    overscroll-behavior-x: none;
  }

  /* 手机端关闭工具区 zoom，避免键盘弹出时整体缩放错位；字号档位仍用 font-size 生效 */
  @supports (zoom: 1) {
    .tool-page .tool-ui {
      zoom: 1;
      font-size: calc(14px * var(--tool-fs));
    }
  }

  /* 表单控件至少 16px，覆盖各工具内写死的更小字号 */
  .search input,
  .tool-ui textarea,
  .tool-ui select,
  .tool-ui input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
  .board-form textarea,
  .board-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .auth-box input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .uc input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .uc textarea,
  .uc select,
  .modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .modal textarea,
  .modal select,
  .check-inline input[type="number"],
  .check-inline input[type="text"],
  .check-inline select,
  .check-row label input[type="number"],
  .check-row label input[type="text"],
  .check-row label select,
  [contenteditable="true"] {
    font-size: 16px !important;
  }
}