/* ========== 主题变量 ========== */
:root {
  --bg: #f5f7fb;
  --bg-grad: radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.12), transparent 60%),
             radial-gradient(900px 500px at 100% 0%, rgba(6,182,212,.10), transparent 60%);
  --surface: #ffffff;
  --surface-2: #f1f4f9;
  --surface-3: #e7ebf3;
  --border: #e3e8f0;
  --text: #1a2233;
  --text-2: #5b6578;
  --text-3: #8a93a6;
  --primary: #4f46e5;
  --primary-2: #6366f1;
  --primary-soft: rgba(79,70,229,.10);
  --ok: #16a34a;
  --err: #dc2626;
  --warn: #d97706;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
  --shadow-lg: 0 10px 40px rgba(16,24,40,.12);
  --radius: 16px;
  --radius-sm: 10px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", sans-serif;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0b0f19;
  --bg-grad: radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.18), transparent 60%),
             radial-gradient(900px 500px at 100% 0%, rgba(6,182,212,.12), transparent 60%);
  --surface: #121826;
  --surface-2: #1a2132;
  --surface-3: #232c40;
  --border: #263046;
  --text: #e6e9f2;
  --text-2: #a3abbe;
  --text-3: #6f7890;
  --primary: #818cf8;
  --primary-2: #6366f1;
  --primary-soft: rgba(129,140,248,.14);
  --ok: #22c55e;
  --err: #f87171;
  --warn: #fbbf24;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.45);
  color-scheme: dark;
}

/* ========== 基础 ========== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--sans); font-size: 15px; line-height: 1.6;
  color: var(--text); background: var(--bg); background-image: var(--bg-grad); background-attachment: fixed;
  transition: background-color .25s, color .25s;
}
a { color: var(--primary); text-decoration: none; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--primary-soft); }
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px 20px 40px; flex: 1; outline: none; }
.hidden { display: none !important; }

/* ========== 顶栏 ========== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner { max-width: 1180px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; font-size: 17px; white-space: nowrap; }
.brand-logo svg { width: 30px; height: 30px; stroke: none; display: block; }
.topnav { display: flex; gap: 2px; flex: 1; }
.nav-group { position: relative; }
.nav-cat { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px 6px 12px; border-radius: 999px; border: 0; background: none;
  color: var(--text-2); font-size: 14px; white-space: nowrap; cursor: pointer; transition: .15s; }
.nav-cat .caret svg { width: 14px; height: 14px; transition: transform .2s; display: block; }
.nav-cat:hover { background: var(--surface-2); color: var(--text); }
.nav-cat.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav-group.open .nav-cat { background: var(--surface-2); color: var(--text); }
.nav-group.open .caret svg { transform: rotate(180deg); }
.nav-menu {
  display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; width: 320px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg);
}
.nav-group.open .nav-menu { display: block; animation: rise .18s both; }
.nav-menu-title { font-size: 12px; color: var(--text-3); padding: 4px 10px 6px; letter-spacing: .04em; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--text); }
.nav-item:hover, .nav-item:focus-visible { background: var(--surface-2); outline: none; }
.nav-item.active { background: var(--primary-soft); }
.nav-item-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--c);
  background: var(--primary-soft); background: color-mix(in srgb, var(--c) 14%, transparent); }
.nav-item-icon svg { width: 18px; height: 18px; }
.nav-item-text { display: flex; flex-direction: column; min-width: 0; }
.nav-item-text b { font-size: 14px; font-weight: 600; }
.nav-item-text small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
  display: grid; place-items: center; cursor: pointer; color: var(--text-2); flex: none; transition: .15s;
}
.icon-btn:hover { color: var(--primary); border-color: var(--primary); }
.icon-btn svg { width: 18px; height: 18px; }
[data-theme="dark"] .i-sun, [data-theme="light"] .i-moon, :root:not([data-theme]) .i-moon { display: none; }

/* ========== 首页 ========== */
.hero { text-align: center; padding: 36px 0 28px; }
.hero h1 { font-size: clamp(28px, 5vw, 44px); margin: 0 0 10px; letter-spacing: -.02em; line-height: 1.2; }
.grad { background: linear-gradient(90deg, #6366f1, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--text-2); margin: 0 auto 22px; max-width: 560px; }
.search {
  width: 100%; max-width: 460px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow); outline: none; transition: .2s;
}
.search:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.tool-card {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); box-shadow: var(--shadow); overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  animation: rise .45s both;
}
.tool-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 40%, #0ea5e9)); opacity: .9;
}
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--c) 45%, var(--border)); }
.tool-card h3 { margin: 0 0 4px; font-size: 18px; }
.tool-card p { margin: 0; color: var(--text-2); font-size: 14px; }
.tool-card-icon {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c);
}
.tool-card-icon svg { width: 26px; height: 26px; }
.tool-card-icon.sm { width: 44px; height: 44px; }
.tool-card-arrow { position: absolute; right: 20px; top: 26px; color: var(--text-3); transition: .2s; }
.tool-card-arrow svg { width: 20px; height: 20px; }
.tool-card:hover .tool-card-arrow { color: var(--c); transform: translateX(3px); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ========== 工具页 ========== */
.tool-head { margin-bottom: 20px; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 14px; margin-bottom: 14px; }
.back:hover { color: var(--primary); }
.tool-title { display: flex; align-items: center; gap: 14px; }
.tool-title h2 { margin: 0; font-size: 24px; }
.tool-title p { margin: 0; color: var(--text-2); font-size: 14px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.panel + .panel { margin-top: 16px; }
.panel-title { font-size: 15px; font-weight: 600; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.panel-title .sub { font-weight: 400; color: var(--text-3); font-size: 13px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.toolbar .spacer { flex: 1; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; font-size: 14px; white-space: nowrap; transition: .15s; color: var(--text);
}
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: linear-gradient(135deg, var(--primary-2), #4f46e5); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(79,70,229,.3); }
.btn.primary:hover { filter: brightness(1.08); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn svg { width: 16px; height: 16px; }
.btn.sm { padding: 5px 10px; font-size: 13px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > span, .label { font-size: 13px; color: var(--text-2); }
.input, .select, .textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); outline: none; transition: .15s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-soft); }
.select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.textarea { font-family: var(--mono); font-size: 13px; line-height: 1.55; resize: vertical; min-height: 200px; tab-size: 2; }
.code-out {
  font-family: var(--mono); font-size: 13px; line-height: 1.55; white-space: pre; overflow: auto;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; min-height: 200px; max-height: 70vh; margin: 0; tab-size: 2;
}
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row > .field { flex: 1; min-width: 160px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); cursor: pointer; user-select: none; }
.check input { accent-color: var(--primary); width: 15px; height: 15px; }

.seg { display: inline-flex; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; gap: 2px; flex-wrap: wrap; }
.seg-btn { border: 0; background: transparent; padding: 6px 12px; border-radius: 9px; cursor: pointer; font-size: 13px; color: var(--text-2); transition: .15s; }
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); font-weight: 600; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 14px; transition: .15s;
}
.tab svg { width: 17px; height: 17px; }
.tab:hover { color: var(--text); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.tab.active { background: var(--primary-soft); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 50%, transparent); font-weight: 600; }

.alert { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; margin-top: 10px; border: 1px solid; white-space: pre-wrap; word-break: break-word; }
.alert.err { color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, transparent); background: color-mix(in srgb, var(--err) 8%, transparent); }
.alert.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.alert.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.alert pre { margin: 8px 0 0; font-family: var(--mono); font-size: 12.5px; color: var(--text); white-space: pre; overflow-x: auto; }
.muted { color: var(--text-3); font-size: 13px; }

.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  padding: 28px 16px; border: 2px dashed var(--border); border-radius: var(--radius); cursor: pointer;
  background: var(--surface-2); transition: .15s; color: var(--text-2);
}
.dropzone:hover, .dropzone.over { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.dz-icon svg { width: 34px; height: 34px; }
.dz-title { font-weight: 600; }
.dz-hint { font-size: 13px; color: var(--text-3); }

.file-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.file-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.file-item img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: var(--surface-3); flex: none; }
.file-item .meta { flex: 1; min-width: 0; }
.file-item .name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-item .sz { font-size: 12px; color: var(--text-3); }

.table-wrap { overflow: auto; max-height: 360px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
table.data { border-collapse: collapse; width: 100%; font-size: 13px; }
table.data th, table.data td { padding: 6px 10px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); text-align: left; white-space: nowrap; }
table.data th { position: sticky; top: 0; background: var(--surface-3); font-weight: 600; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--text); color: var(--bg); padding: 9px 18px; border-radius: 999px; font-size: 14px; z-index: 100;
  box-shadow: var(--shadow-lg); transition: .25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { background: var(--ok); color: #fff; }
.toast.err { background: var(--err); color: #fff; }

.footer { text-align: center; color: var(--text-3); font-size: 13px; padding: 20px; border-top: 1px solid var(--border); }
.footer p { margin: 2px 0; }
.empty { text-align: center; padding: 80px 0; color: var(--text-2); }

/* JSON 高亮 */
.j-key { color: #7c3aed; } .j-str { color: #059669; } .j-num { color: #d97706; } .j-bool { color: #2563eb; } .j-null { color: #db2777; }
[data-theme="dark"] .j-key { color: #c4b5fd; } [data-theme="dark"] .j-str { color: #6ee7b7; } [data-theme="dark"] .j-num { color: #fcd34d; }
[data-theme="dark"] .j-bool { color: #93c5fd; } [data-theme="dark"] .j-null { color: #f9a8d4; }

/* ========== 计算器 ========== */
.calc-wrap { display: grid; grid-template-columns: minmax(0, 580px) minmax(260px, 360px); justify-content: center; gap: 16px; align-items: start; }
@media (max-width: 860px) { .calc-wrap { grid-template-columns: minmax(0, 1fr); } }
.calc { width: 100%; }
.calc-display {
  background: linear-gradient(135deg, #1e1b4b, #312e81); color: #fff; border-radius: 14px; padding: 16px 18px; margin-bottom: 14px;
  text-align: right; min-height: 108px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
}
[data-theme="dark"] .calc-display { background: linear-gradient(135deg, #0f0d2e, #1e1b4b); }
.calc-expr { font-family: var(--mono); font-size: 18px; opacity: .8; word-break: break-all; min-height: 27px; }
.calc-expr input { all: unset; width: 100%; text-align: right; font-family: var(--mono); font-size: 18px; caret-color: #a5b4fc; }
.calc-result { font-family: var(--mono); font-size: 34px; font-weight: 600; word-break: break-all; line-height: 1.3; }
.calc-result.err { color: #fca5a5; font-size: 18px; }
.calc-mode { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; flex-wrap: wrap; }
.calc-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.calc-keys.sci { grid-template-columns: repeat(5, 1fr); margin-bottom: 8px; }
.key {
  padding: 14px 0; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer;
  font-size: 18px; font-family: var(--mono); transition: .1s; user-select: none; color: var(--text);
}
.key:hover { background: var(--surface-3); }
.key:active, .key.pressed { transform: scale(.96); background: var(--primary-soft); }
.key.op { color: var(--primary); font-weight: 600; }
.key.fn { font-size: 14px; color: var(--text-2); padding: 10px 0; }
.key.eq { background: linear-gradient(135deg, var(--primary-2), #4f46e5); color: #fff; border-color: transparent; }
.key.danger { color: var(--err); }
.history { max-height: 520px; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.hist-item { padding: 8px 10px; border-radius: 10px; cursor: pointer; text-align: right; font-family: var(--mono); border: 1px solid transparent; }
.hist-item:hover { background: var(--surface-2); border-color: var(--border); }
.hist-item .e { font-size: 13px; color: var(--text-3); word-break: break-all; }
.hist-item .r { font-size: 17px; font-weight: 600; word-break: break-all; }

/* ========== 时间 ========== */
.clock-hero { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
@media (max-width: 640px) { .clock-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.analog { width: 180px; height: 180px; }
.analog .face { fill: var(--surface-2); stroke: var(--border); stroke-width: 2; }
.analog .tick { stroke: var(--text-3); stroke-width: 1.5; }
.analog .tick.big { stroke: var(--text-2); stroke-width: 3; }
.analog .hand-h { stroke: var(--text); stroke-width: 5; }
.analog .hand-m { stroke: var(--text); stroke-width: 3.5; }
.analog .hand-s { stroke: #ef4444; stroke-width: 1.6; }
.analog .center { fill: #ef4444; stroke: none; }
.digital { font-family: var(--mono); font-size: clamp(40px, 8vw, 64px); font-weight: 700; letter-spacing: .02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.digital-date { color: var(--text-2); font-size: 16px; margin-top: 6px; }
.ts-live { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.ts-chip { font-family: var(--mono); background: var(--surface-2); border: 1px solid var(--border); padding: 6px 12px; border-radius: 10px; font-size: 14px; cursor: pointer; font-variant-numeric: tabular-nums; }
.ts-chip:hover { border-color: var(--primary); }
.ts-chip b { color: var(--text-3); font-weight: 400; margin-right: 6px; font-family: var(--sans); font-size: 12px; }
.world { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.wc { padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); position: relative; }
.wc .city { font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.wc .city .x { cursor: pointer; color: var(--text-3); border: 0; background: none; padding: 0 2px; font-size: 16px; line-height: 1; }
.wc .city .x:hover { color: var(--err); }
.wc .t { font-family: var(--mono); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wc .d { font-size: 12px; color: var(--text-3); }
.wc .night { position: absolute; right: 12px; bottom: 12px; font-size: 16px; }
.kv { display: grid; grid-template-columns: 110px 1fr auto; gap: 6px 10px; align-items: center; font-size: 14px; margin-top: 12px; }
.kv .k { color: var(--text-3); }
.kv .v { font-family: var(--mono); word-break: break-all; }

/* ========== 转换器 ========== */
.md-preview { width: 100%; min-height: 300px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.img-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.img-thumb { position: relative; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.img-thumb img { width: 100%; height: 120px; object-fit: contain; display: block; background: repeating-conic-gradient(var(--surface-3) 0 25%, transparent 0 50%) 50% / 16px 16px; }
.img-thumb .cap { font-size: 12px; padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.img-thumb .ops { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.img-thumb .ops button { width: 24px; height: 24px; border-radius: 6px; border: 0; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; font-size: 13px; line-height: 1; }
.range-row { display: flex; align-items: center; gap: 10px; }
.range-row input[type=range] { flex: 1; accent-color: var(--primary); }

@media (max-width: 640px) {
  .container { padding: 16px 14px 30px; }
  .panel { padding: 14px; }
  .key { padding: 12px 0; font-size: 17px; }
}

/* 工具页内区块间距 */
.tool-body > * + * { margin-top: 16px; }
.grid-2 > .panel, .grid-3 > .panel { margin-top: 0 !important; }
.sub-body > * + * { margin-top: 16px; }

/* 旧浏览器（不支持 color-mix）回退 */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .topbar { background: var(--surface); }
  .tool-card-icon { background: var(--primary-soft); }
  .alert.err { border-color: var(--err); background: transparent; }
  .alert.ok { border-color: var(--ok); background: transparent; }
  .alert.warn { border-color: var(--warn); background: transparent; }
  .tab.active { border-color: var(--primary); }
}

.row > .input { flex: 1; width: auto; min-width: 0; }

/* 品牌 / brand */
.lang-btn {
  height: 38px; min-width: 46px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; color: var(--text-2); font-size: 13px; font-weight: 600; flex: none; transition: .15s;
}
.lang-btn:hover { color: var(--primary); border-color: var(--primary); }
.brand-text { letter-spacing: .01em; }
.pillars { display: inline-flex; gap: 6px; margin-bottom: 18px; padding: 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.pillar { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 5px; border-radius: 999px; font-size: 13px; color: var(--text-2); }
.pillar b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; background: linear-gradient(135deg, #4f46e5, #0ea5e9); }
.hero h1 { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hero h1 .grad { background: linear-gradient(90deg, #4f46e5, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: .62em; font-weight: 600; color: var(--text); letter-spacing: 0; }

/* 移动端顶栏：导航换到第二行，平均分布，可换行；不再横向滚动 */
@media (max-width: 640px) {
  .topbar-inner { flex-wrap: wrap; row-gap: 6px; column-gap: 8px; padding: 8px 14px 8px; }
  .brand { flex: 1; min-width: 0; font-size: 16px; }
  .brand-logo svg { width: 28px; height: 28px; }
  .icon-btn, .lang-btn { height: 34px; }
  .icon-btn { width: 34px; }
  .topbar-inner { position: relative; }
  .topnav { order: 3; flex: 0 0 100%; gap: 4px; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--border); }
  .nav-group { position: static; flex: 1 1 0; display: flex; }
  .nav-cat { flex: 1; justify-content: center; padding: 6px 4px; }
  .nav-menu { left: 10px; right: 10px; width: auto; top: calc(100% + 4px); max-height: 70vh; overflow: auto; }
  .nav-item-text small { white-space: normal; }
}

/* 首页分类 */
.home-sections { display: flex; flex-direction: column; gap: 30px; }
.cat-title { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 0 0 14px; color: var(--text); }
.cat-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.cat-icon svg { width: 17px; height: 17px; }
.cat-count { font-size: 12px; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); padding: 0 8px; border-radius: 999px; font-weight: 500; }
.tool-card { padding: 20px; gap: 12px; }

/* ===== 新工具通用组件 ===== */
.mono { font-family: var(--mono); }
.input.bad { border-color: var(--err); }
.color-in { width: 42px; height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: 2px; background: var(--surface); cursor: pointer; }
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 13px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
.badge.ok { color: var(--ok); border-color: var(--ok); background: transparent; }
.badge.ins { color: #15803d; background: rgba(34,197,94,.12); border-color: transparent; }
.badge.del { color: var(--err); background: rgba(239,68,68,.1); border-color: transparent; }
.badge.mod { color: #b45309; background: rgba(245,158,11,.14); border-color: transparent; }
[data-theme="dark"] .badge.ins { color: #4ade80; } [data-theme="dark"] .badge.mod { color: #fbbf24; }
.progress { position: relative; height: 22px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin-top: 10px; }
.progress .bar { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--primary-2), #0ea5e9); transition: width .15s; }
.progress .pct { position: relative; display: block; text-align: center; font-size: 12px; line-height: 20px; color: var(--text); font-variant-numeric: tabular-nums; }

/* 二维码 */
.qr-gen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 20px; align-items: start; }
.qr-controls { display: flex; flex-direction: column; gap: 14px; }
.qr-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.qr-canvas-wrap { padding: 14px; background: repeating-conic-gradient(var(--surface-3) 0 25%, var(--surface-2) 0 50%) 50% / 18px 18px; border-radius: 16px; border: 1px solid var(--border); width: 100%; display: grid; place-items: center; }
.qr-canvas { width: 100%; max-width: 300px; height: auto; image-rendering: pixelated; border-radius: 6px; display: block; }
.qr-dec-prev img { max-width: 100%; max-height: 220px; border-radius: 10px; border: 1px solid var(--border); display: block; margin-bottom: 8px; }
.qr-text-out { white-space: pre-wrap !important; word-break: break-all; }
.qr-video { width: 100%; border-radius: 12px; margin-top: 10px; background: #000; }
@media (max-width: 860px) { .qr-gen { grid-template-columns: minmax(0, 1fr); } }

/* 文本对比 */
.diff-stat { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.diff-out { overflow: auto; max-height: 75vh; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.diff-table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 13px; line-height: 1.55; table-layout: fixed; }
.diff-table td { padding: 1px 8px; vertical-align: top; white-space: pre-wrap; word-break: break-word; }
.diff-table td.ln { width: 46px; text-align: right; color: var(--text-3); background: var(--surface-2); user-select: none; border-right: 1px solid var(--border); white-space: nowrap; }
.diff-table.split td.code { width: calc(50% - 46px); }
.diff-table.split td.code:nth-child(2) { border-right: 1px solid var(--border); }
.diff-table td.del { background: rgba(239,68,68,.10); }
.diff-table td.ins { background: rgba(34,197,94,.12); }
.diff-table td.empty { background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--surface-2) 6px 12px); }
.diff-table mark { border-radius: 3px; color: inherit; padding: 0 1px; }
.diff-table mark.del { background: rgba(239,68,68,.35); text-decoration: line-through; text-decoration-color: rgba(239,68,68,.7); }
.diff-table mark.ins { background: rgba(34,197,94,.38); }
.diff-table .sign { display: inline-block; width: 14px; color: var(--text-3); user-select: none; }
.diff-table tr.skip td { text-align: center; color: var(--text-3); background: var(--surface-2); font-family: var(--sans); font-size: 12px; padding: 4px; }
@media (max-width: 640px) { .diff-table td.ln { width: 30px; padding: 1px 4px; } .diff-table { font-size: 12px; } }

/* 哈希 */
.hash-table { display: flex; flex-direction: column; gap: 6px; }
.hash-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.hash-row .k { font-weight: 600; font-size: 13px; color: var(--text-2); }
.hash-row .v { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.hash-row.match { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
@media (max-width: 640px) { .hash-row { grid-template-columns: minmax(0, 1fr) auto; } .hash-row .v { grid-column: 1 / -1; grid-row: 2; } }

/* 颜色 */
.color-top { display: flex; gap: 14px; align-items: flex-end; }
.color-big { width: 64px; height: 64px; border: 1px solid var(--border); border-radius: 14px; padding: 3px; background: var(--surface); cursor: pointer; flex: none; }
.color-formats { display: flex; flex-direction: column; gap: 8px; }
.color-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.color-row .k { font-size: 12px; font-weight: 700; color: var(--text-3); letter-spacing: .05em; }
.color-swatch { height: 100%; min-height: 260px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--border); transition: background .15s; }
.sw-big { font-size: 64px; font-weight: 700; line-height: 1; }
.sw-sub { font-family: var(--mono); font-size: 14px; opacity: .85; }
.contrast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.contrast-demo { border-radius: 14px; padding: 22px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.contrast-demo b { font-size: 24px; } .contrast-demo span { font-size: 14px; }
.contrast-info { display: flex; flex-direction: column; gap: 10px; }
.contrast-info .ratio { font-size: 34px; font-weight: 700; font-family: var(--mono); }
.palette { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.palette.sm { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.chip { border: 0; border-radius: 10px; min-height: 64px; padding: 8px 6px; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 2px; font-family: var(--mono); font-size: 11px; transition: transform .1s; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.chip:hover { transform: translateY(-2px); }
.chip small { opacity: .75; font-family: var(--sans); }
@media (max-width: 860px) { .contrast { grid-template-columns: minmax(0, 1fr); } .palette { grid-template-columns: repeat(5, minmax(0, 1fr)); } .palette.sm { grid-template-columns: repeat(3, minmax(0, 1fr)); } .color-swatch { min-height: 160px; } }

/* 单位 */
.unit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.unit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto; gap: 2px 4px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.unit-row .n { font-size: 13px; color: var(--text-2); grid-column: 1; }
.unit-row .v { font-family: var(--mono); font-size: 17px; font-weight: 600; grid-column: 1; grid-row: 2; word-break: break-all; }
.unit-row .btn { grid-row: 1 / span 2; }
.unit-row.current { border-color: var(--primary); background: var(--primary-soft); }
@media (max-width: 640px) { .unit-list { grid-template-columns: minmax(0, 1fr); } }

/* 字数 */
.wc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 16px; align-items: start; }
.wc-wrap > .panel { margin-top: 0 !important; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.stat .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.stat .k { font-size: 13px; color: var(--text-2); }
.stat .hint { font-size: 11px; color: var(--text-3); }
.stat.main { grid-column: 1 / -1; background: linear-gradient(135deg, var(--primary-soft), transparent); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.stat.main .v { font-size: 36px; color: var(--primary); }
@media (max-width: 860px) { .wc-wrap { grid-template-columns: minmax(0, 1fr); } .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 图片编辑 */
.crop-area { margin-top: 14px; height: 460px; background: var(--surface-2); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.crop-area img { display: block; max-width: 100%; }
.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.cmp-card { border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: var(--surface-2); }
.cmp-card img { width: 100%; height: 220px; object-fit: contain; display: block; background: repeating-conic-gradient(var(--surface-3) 0 25%, transparent 0 50%) 50% / 16px 16px; border-radius: 8px; margin: 6px 0; }
.cmp-card .sz { font-size: 13px; color: var(--text-2); }
@media (max-width: 640px) { .crop-area { height: 320px; } .compare { grid-template-columns: minmax(0, 1fr); } }