/* ============================================================
   胖阿杰工具箱 - 全站公共样式
   设计语言：暖白纸感 · 柔和潮流（Warm Editorial Soft）
   基调：暖象牙白 + 墨色文字 + 陶土色点缀，细边 + 柔影，低对比不刺眼
   ============================================================ */
:root {
  /* 表面 */
  --bg: #faf8f3;            /* 页面底色：暖象牙白 */
  --surface: #ffffff;       /* 卡片/面板 */
  --bg-soft: #f4f0e7;       /* 次级底 */
  --bg-softer: #ede8dd;     /* 三级底 */
  --cream: #fbf8f1;         /* 结果框/浅色块 */

  /* 文字 */
  --ink: #1b1a17;           /* 主文字 */
  --ink-2: #5d584f;         /* 次级文字 */
  --ink-3: #776f61;         /* 弱化文字 */
  --ink-3-soft: #6f675a;    /* 浅底上的弱化文字 */

  /* 线条与点缀 */
  --line: #e9e3d6;          /* 细边 */
  --line-strong: #dbd4c4;   /* 强边（输入框） */
  --silver: #cfc7b6;
  --accent: #d9825c;        /* 陶土色，取自 IP 肤色 */
  --accent-ink: #9d5030;
  --accent-soft: #f9e6d8;

  /* 语义色 */
  --ok: #3d7a58;
  --danger: #b6482f;

  /* 形状与光影 */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --border: 1px solid var(--line);
  --shadow-sm: 0 1px 2px rgba(27, 26, 23, .04);
  --shadow: 0 1px 2px rgba(27, 26, 23, .04), 0 12px 28px -14px rgba(27, 26, 23, .18);
  --shadow-lg: 0 2px 6px rgba(27, 26, 23, .05), 0 22px 44px -18px rgba(27, 26, 23, .24);

  --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;
  --header-h: 64px;
  --content-w: 1180px;
}
[data-theme="dark"] {
  --bg: #151412;
  --surface: #1d1b18;
  --bg-soft: #232019;
  --bg-softer: #2a2620;
  --cream: #201d18;
  --ink: #f3efe6;
  --ink-2: #c2bbac;
  --ink-3: #8e8778;
  --ink-3-soft: #8e8778;
  --line: #2f2b24;
  --line-strong: #3d382f;
  --silver: #4a443a;
  --accent: #e5a184;
  --accent-ink: #f0b79d;
  --accent-soft: #3a2a20;
  --ok: #6fbf94;
  --danger: #f08a72;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 30px -16px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 24px 48px -20px rgba(0, 0, 0, .7);
}
[data-theme="dark"] #site-header { background: rgba(21, 20, 18, .86); }

/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  font-size: 15px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
:focus-visible { outline: 3px solid rgba(217, 130, 92, .42); outline-offset: 2px; border-radius: 6px; }
main { flex: 1; width: 100%; }

.container { max-width: var(--content-w); margin: 0 auto; padding: 0 24px; }

/* ---------- 顶部导航 ---------- */
#site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 248, 243, .86);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.site-header-inner {
  display: flex; align-items: center; gap: 14px;
  height: var(--header-h);
}
.site-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.2px; flex-shrink: 0; }
.site-logo img {
  width: 38px; height: 38px; border-radius: 11px;
  object-fit: cover; border: 1px solid var(--line);
  background: var(--cream);
  box-shadow: var(--shadow-sm);
}
.site-logo .logo-badge {
  width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--cream); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; flex-shrink: 0;
}
.main-nav { display: flex; align-items: center; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a {
  position: relative;
  padding: 7px 11px; border-radius: 10px; white-space: nowrap;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  border: 1px solid transparent;
  transition: background .16s, color .16s, border-color .16s;
}
.main-nav a:hover { color: var(--ink); background: var(--bg-soft); }
.main-nav a.active {
  background: var(--surface); color: var(--ink); font-weight: 700;
  border-color: var(--line); box-shadow: var(--shadow-sm);
}
.main-nav a.active::after {
  content: ""; position: absolute; left: 50%; bottom: 3px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); transform: translateX(-50%);
}
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.theme-btn {
  width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; font-size: 16px; color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: background .16s, color .16s, transform .12s;
}
.theme-btn:hover { background: var(--bg-soft); color: var(--ink); }
.theme-btn:active { transform: scale(.94); }
.nav-toggle { display: none; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; min-height: 42px;
  border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  font-size: 14px; font-weight: 600; cursor: pointer;
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: background .16s, border-color .16s, transform .12s, box-shadow .16s;
  user-select: none; white-space: nowrap;
}
.btn:hover { background: var(--bg-soft); border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-primary {
  background: var(--ink); color: var(--bg);
  border-color: var(--ink);
}
.btn-primary:hover { background: #2c2a25; border-color: #2c2a25; color: var(--bg); }
[data-theme="dark"] .btn-primary:hover { background: #fffdf7; border-color: #fffdf7; }
.btn-sm { padding: 6px 12px; min-height: 34px; font-size: 13px; border-radius: 9px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: var(--shadow-sm); }
.btn-link { border: none; box-shadow: none; background: none; text-decoration: underline; text-underline-offset: 3px; min-height: auto; padding: 2px 4px; }

/* ---------- 表单元素 ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .2px; }
.input, .select, .textarea {
  width: 100%; padding: 11px 13px; min-height: 44px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.textarea { min-height: 160px; resize: vertical; line-height: 1.7; font-family: var(--font-mono); font-size: 14px; }
.textarea.plain { font-family: var(--font-sans); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--silver); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(217, 130, 92, .16);
  background: var(--surface);
}
.select {
  appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px;
}
.checkbox { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13.5px; min-height: 32px; color: var(--ink-2); }
.checkbox input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-group label {
  padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
  cursor: pointer; font-size: 13px; font-weight: 500; background: var(--surface); color: var(--ink-2);
  transition: background .16s, border-color .16s, color .16s;
}
.radio-group label:hover { background: var(--bg-soft); color: var(--ink); }
.radio-group label:has(input:checked) {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 700;
}
[data-theme="dark"] .radio-group label:has(input:checked) { color: var(--ink); }
.radio-group input { display: none; }

/* ---------- 工具卡片 ---------- */
.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tool-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px 18px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
  position: relative;
}
.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}
.tool-card .card-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 800; letter-spacing: 0; flex-shrink: 0;
  padding: 2px;
}
.tool-card .card-name { font-weight: 700; font-size: 15px; line-height: 1.4; letter-spacing: -.1px; }
.tool-card .card-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tool-card.is-todo, .tool-card.is-skip { opacity: .72; }
.tool-card.is-todo:hover, .tool-card.is-skip:hover { opacity: .9; }
.tool-card .card-status {
  position: absolute; top: 14px; right: 14px;
  font-size: 10.5px; font-weight: 600; padding: 2px 8px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); color: var(--ink-3-soft);
}

/* ---------- 通用区块 ---------- */
.section-title { display: flex; align-items: center; gap: 11px; margin: 8px 0 18px; }
.section-title h2 { font-size: 20px; font-weight: 800; letter-spacing: -.2px; }
.section-title .bar { width: 4px; height: 20px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-soft)); }
.section-title .count { font-size: 11.5px; color: var(--ink-3-soft); font-weight: 600; background: var(--bg-soft); border-radius: 999px; padding: 2px 10px; }
.section-title .more { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ink-3); transition: color .16s; }
.section-title .more:hover { color: var(--accent-ink); }

/* ---------- 页脚 ---------- */
#site-footer { border-top: 1px solid var(--line); margin-top: 64px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 28px 24px; }
.footer-inner .copyright { font-size: 12.5px; color: var(--ink-3); }
.footer-inner .footer-links { display: flex; gap: 16px; margin-left: auto; font-size: 12.5px; }
.footer-inner .footer-links a { color: var(--ink-2); }
.footer-inner .footer-links a:hover { color: var(--accent-ink); }

/* ---------- toast ---------- */
#paj-toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 999;
  background: var(--ink); color: var(--bg);
  padding: 11px 20px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  transform: translateY(80px); opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
  pointer-events: none; max-width: 80vw;
}
#paj-toast.show { transform: translateY(0); opacity: 1; }

/* ---------- 空状态 ---------- */
.empty-state { text-align: center; padding: 52px 20px; color: var(--ink-3); }
.empty-state img { width: 190px; margin: 0 auto 14px; opacity: .92; }
.empty-state p { font-size: 14px; }

/* ---------- 标签徽章 ---------- */
.tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-2); }
.tag-done { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.tag-todo { background: var(--bg-soft); color: var(--ink-3); }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .tool-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .tool-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .container { padding: 0 18px; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 11px;
    background: var(--surface); cursor: pointer; font-size: 17px; color: var(--ink-2);
    box-shadow: var(--shadow-sm);
  }
  .site-header-inner { flex-wrap: wrap; height: auto; padding: 10px 0; row-gap: 0; }
  .site-logo { order: 1; }
  .header-actions { order: 2; margin-left: auto; }
  .nav-toggle { order: 3; }
  .main-nav {
    order: 4; width: 100%; flex-direction: column; align-items: stretch;
    gap: 2px; display: none; padding: 8px 0 12px; overflow: visible;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 10px 14px; border-radius: 10px; font-size: 15px; }
  .main-nav a.active::after { left: 32px; bottom: 50%; transform: translateY(50%); }
  .tool-card { padding: 16px 15px 15px; }
  .tool-card .card-icon { width: 38px; height: 38px; border-radius: 10px; font-size: 12.5px; }
}
@media (max-width: 480px) {
  .tool-grid { grid-template-columns: 1fr; }
  body { font-size: 14.5px; }
  .section-title h2 { font-size: 18px; }
  #paj-toast { right: 16px; bottom: 16px; left: 16px; }
}