/* =====================================================================
   ids7 前端主题 —— 墨绿 × 纸感书斋
   阅读优先：无轮播、无弹窗、无第三方 JS。
   明暗双模式由 html[data-theme] 控制，本地记忆。
   ===================================================================== */

/* ---------- 设计变量 ---------- */
:root {
    --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STZhongsong", "SimSun", serif;
    --sans: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "SF Mono", Consolas, "Cascadia Mono", Menlo, monospace;

    --primary: #1d6a4f;         /* 墨绿 */
    --primary-strong: #14543d;
    --primary-soft: #e5efe8;    /* 主色浅底 */
    --accent: #c97a1e;          /* 琥珀点缀 */
    --bg: #f6f5f0;              /* 亮背景（纸感暖白） */
    --bg-soft: #edece5;         /* 亮色辅助背景 */
    --card: #fffefb;            /* 卡片 */
    --panel-dark: #12241c;      /* 深色面板（代码块） */
    --panel-dark-2: #0d1b15;
    --ink: #212821;             /* 正文墨色 */
    --ink-2: #64705f;           /* 次级文字 */
    --line: rgba(29, 106, 79, .16);
    --shadow: 0 1px 2px rgba(18, 53, 42, .05), 0 10px 30px rgba(18, 53, 42, .07);
    --shadow-hover: 0 2px 6px rgba(18, 53, 42, .08), 0 16px 40px rgba(18, 53, 42, .12);
    --radius: 12px;
    --content-max: 72ch;
}
html[data-theme="dark"] {
    --primary: #5cb491;
    --primary-strong: #7fcc a8;
    --primary-strong: #7fcca8;
    --primary-soft: #1c2f26;
    --accent: #d9a055;
    --bg: #0f1512;
    --bg-soft: #161e19;
    --card: #161f1a;
    --ink: #d7e1d7;
    --ink-2: #8ca191;
    --line: rgba(122, 180, 146, .16);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .25);
    --shadow-hover: 0 2px 6px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .35);
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.75;
    color: var(--ink);
    background:
        radial-gradient(1100px 420px at 88% -8%, rgba(29, 106, 79, .07), transparent 60%),
        radial-gradient(900px 420px at -6% 108%, rgba(201, 122, 30, .05), transparent 55%),
        var(--bg);
    min-height: 100vh;
}
a { color: var(--primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--primary-strong); }
img { max-width: 100%; }
::selection { background: var(--primary); color: #fff; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.muted { color: var(--ink-2); }

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---------- 导航多级下拉 ---------- */
.nav-dd { position: relative; }
.nav-dd-link { display: inline-flex; align-items: center; gap: 4px; }
.nav-dd-caret { font-size: 11px; transition: transform .18s ease; }
.nav-dd:hover .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-menu {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    min-width: 460px;
    max-width: min(640px, calc(100vw - 40px));
    max-height: 70vh;
    overflow: auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-hover);
    padding: 14px 16px 10px;
    z-index: 120;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* 悬停桥接：防止移向菜单时中断 hover */
.nav-dd-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.nav-dd-group { padding: 6px 0 10px; }
.nav-dd-group + .nav-dd-group { border-top: 1px dashed var(--line); }
.nav-dd-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--serif);
    font-weight: 800;
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 8px;
}
.nav-dd-cat:hover { color: var(--primary); }
.nav-dd-cat-icon { font-size: 16px; }
.nav-dd-cat small {
    background: var(--primary-soft);
    color: var(--primary);
    font-family: var(--sans);
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 99px;
}
.nav-dd-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 10px; }
.nav-dd-site {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--ink-2);
    font-size: 13.5px;
    transition: background .12s ease, color .12s ease;
    min-width: 0;
}
.nav-dd-site:hover { background: var(--primary-soft); color: var(--primary); }
.nav-dd-site img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex: none; background: var(--bg-soft); }
.nav-dd-letter {
    width: 18px; height: 18px;
    flex: none;
    display: grid; place-items: center;
    background: var(--primary);
    color: #fff;
    font-family: var(--serif);
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
}
.nav-dd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-dd-foot { padding-top: 10px; border-top: 1px solid var(--line); text-align: center; }
.nav-dd-foot a { font-size: 13px; color: var(--primary); }
/* 靠左的菜单项：面板左对齐（默认 right:0 适配靠右项） */
.nav-dd-menu-left { left: 0; right: auto; min-width: 300px; }
.nav-dd-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 10px; }
.nav-dd-count {
    margin-left: auto;
    background: var(--bg-soft);
    color: var(--ink-2);
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 99px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- 顶栏 ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 26px; height: 62px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.brand-mark {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center;
    background: var(--primary);
    color: #fff;
    font-family: var(--serif);
    font-size: 20px; font-weight: 700;
    border-radius: 9px;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25), 0 3px 10px rgba(29, 106, 79, .3);
}
.brand-text { line-height: 1.3; }
.brand-name { display: block; font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: .02em; }
.brand-sub { display: block; font-size: 11px; color: var(--ink-2); letter-spacing: .05em; }
.site-nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: nowrap; }
/* 注意：不可设置 overflow（会裁剪导航下拉面板溢出部分） */
.site-nav a {
    color: var(--ink-2);
    padding: 6px 11px;
    border-radius: 8px;
    font-size: 14.5px;
    white-space: nowrap;
    position: relative;
}
.site-nav a:hover { color: var(--primary); background: var(--primary-soft); }
.site-nav a.active { color: var(--primary); font-weight: 600; }
.header-actions { display: flex; gap: 6px; }
.icon-btn {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    border-radius: 9px;
    cursor: pointer;
    font-size: 15.5px;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.icon-btn:hover { background: var(--primary-soft); color: var(--primary); transform: translateY(-1px); }
.nav-toggle { display: none; }

/* 搜索面板 */
.search-panel { display: none; border-top: 1px solid var(--line); background: var(--bg-soft); }
.search-panel.open { display: block; }
.search-form { display: flex; align-items: center; gap: 10px; padding-top: 12px; padding-bottom: 12px; color: var(--ink-2); }
.search-form input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    color: var(--ink);
    outline: none;
    font-family: var(--sans);
}

/* ---------- 公告 ---------- */
.public-flash {
    margin: 14px 0 0;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    border: 1px solid var(--line);
    background: var(--primary-soft);
    color: var(--primary-strong);
}
.public-flash-error { background: #fbeeE8; color: #a3541c; border-color: rgba(163, 84, 28, .25); }
html[data-theme="dark"] .public-flash-error { background: #332015; color: #e0a070; }

/* ---------- Hero（首页封面） ---------- */
.page-body { padding: 30px 20px 10px; flex: 1 0 auto; width: 100%; }
.hero {
    position: relative;
    padding: 46px 0 20px;
    overflow: hidden;
}
.hero-ornament {
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--serif);
    font-size: 240px;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--line);
    line-height: 1;
    user-select: none;
    pointer-events: none;
    z-index: 0;
}
.hero-kicker {
    font-size: 13px;
    letter-spacing: .18em;
    color: var(--accent);
    margin: 0 0 10px;
    font-weight: 600;
    position: relative;
    z-index: 1;
}
.hero-title {
    font-family: var(--serif);
    font-size: clamp(34px, 6vw, 54px);
    font-weight: 900;
    margin: 0 0 8px;
    letter-spacing: .04em;
    line-height: 1.25;
    position: relative;
    z-index: 1;
}
.hero-sub { font-size: 17px; color: var(--ink-2); margin: 0 0 2px; position: relative; z-index: 1; }
.hero-actions { display: flex; gap: 12px; position: relative; z-index: 1; flex-wrap: wrap; }
.btn-main {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--primary);
    color: #fff !important;
    padding: 10px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    border: 1px solid var(--primary);
    cursor: pointer;
    font-family: var(--sans);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-main:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(29, 106, 79, .3); background: var(--primary-strong); }
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink) !important;
    padding: 10px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    border: 1px solid var(--line);
    background: var(--card);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary) !important; transform: translateY(-1px); }

/* ---------- 分类专题栏 ---------- */
.cat-chips {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 6px 2px 16px;
    scrollbar-width: thin;
}
.cat-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: 7px 15px 7px 8px;
    color: var(--ink);
    font-size: 14px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cat-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--primary); color: var(--ink); }
.chip-icon {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    background: var(--primary-soft);
    color: var(--primary);
    font-family: var(--serif);
    font-weight: 700;
    border-radius: 50%;
    font-size: 13px;
}
.chip-count { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- 焦点卡 ---------- */
.focus-card {
    display: flex;
    gap: 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    padding: 22px 26px;
    margin-bottom: 26px;
    box-shadow: var(--shadow);
    position: relative;
}
.focus-tag {
    position: absolute;
    top: -11px;
    left: 22px;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 11px;
    border-radius: 99px;
    letter-spacing: .06em;
}
.focus-title { font-family: var(--serif); font-size: clamp(20px, 3vw, 26px); font-weight: 800; margin: 4px 0 10px; line-height: 1.4; }
.focus-title a { color: var(--ink); }
.focus-title a:hover { color: var(--primary); }
.focus-excerpt { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; }

/* ---------- 文章流 ---------- */
.article-stream { margin-bottom: 30px; }
.stream-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.stream-title { font-family: var(--serif); font-size: 21px; font-weight: 800; margin: 0; }
.stream-count { font-size: 13px; color: var(--ink-2); }
.post-card {
    display: flex;
    gap: 20px;
    padding: 22px 10px;
    border-bottom: 1px dashed var(--line);
    align-items: flex-start;
    position: relative;
}
.post-card:last-child { border-bottom: none; }
.post-date {
    flex: none;
    width: 62px;
    text-align: center;
    padding-top: 4px;
}
.post-day {
    display: block;
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.post-ym { display: block; font-size: 11.5px; color: var(--ink-2); letter-spacing: .08em; margin-top: 2px; }
.post-body { min-width: 0; flex: 1; }
.post-title { margin: 0 0 8px; font-family: var(--serif); font-size: 20px; font-weight: 800; line-height: 1.45; }
.post-title a {
    color: var(--ink);
    background-image: linear-gradient(var(--primary), var(--primary));
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-position: 0 96%;
    transition: background-size .25s ease, color .2s ease;
    padding-bottom: 2px;
}
.post-title a:hover { color: var(--primary); background-size: 100% 2px; }
.post-excerpt {
    margin: 0 0 10px;
    color: var(--ink-2);
    font-size: 14.5px;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; }
.post-meta i { margin-right: 3px; }
.meta-cat {
    background: var(--primary-soft);
    color: var(--primary) !important;
    padding: 2px 10px;
    border-radius: 99px;
    font-weight: 600;
    font-size: 12px;
}
.meta-tags a { color: var(--ink-2); margin-right: 6px; }
.meta-tags a:hover { color: var(--accent); }

/* ---------- 分页 ---------- */
.ids7-pager { margin: 30px 0 26px; }
.pager-list { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0; margin: 0; }
.pager-list li a, .pager-list li span {
    display: inline-block;
    min-width: 38px;
    padding: 7px 13px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--card);
    color: var(--ink);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.pager-list li a:hover { border-color: var(--primary); color: var(--primary); }
.pager-list li.active a { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.pager-list li.disabled a { opacity: .4; pointer-events: none; }
.pager-list li.ellipsis span { border: none; background: none; }

/* ---------- 列表页头 ---------- */
.list-head { padding: 26px 0 8px; border-bottom: 2px solid var(--primary); margin-bottom: 10px; position: relative; }
.list-head::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 64px; height: 2px;
    background: var(--accent);
}
.list-title { font-family: var(--serif); font-size: clamp(24px, 4vw, 32px); font-weight: 900; margin: 0 0 6px; }
.list-sub { color: var(--ink-2); margin: 0 0 4px; font-size: 14.5px; }
.list-count { font-size: 13px; color: var(--ink-2); margin: 0; font-variant-numeric: tabular-nums; }

/* ---------- 空状态 ---------- */
.empty-box {
    text-align: center;
    padding: 60px 20px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    background: var(--card);
}
.empty-box p { margin: 4px 0; }

/* =====================================================================
   文章页
   ===================================================================== */
.post-head { padding: 30px 0 6px; max-width: 820px; }
.post-head-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.post-head-time { font-size: 13px; color: var(--ink-2); }
.post-head-title {
    font-family: var(--serif);
    font-size: clamp(26px, 4.6vw, 38px);
    font-weight: 900;
    line-height: 1.4;
    margin: 0 0 16px;
}
.post-head-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: var(--ink-2);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.author-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.author-avatar {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
    font-family: var(--serif);
}
.copy-link {
    border: none;
    background: none;
    color: var(--ink-2);
    cursor: pointer;
    font-size: 13.5px;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: var(--sans);
}
.copy-link:hover { background: var(--primary-soft); color: var(--primary); }
.post-tags { margin: 14px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.post-tag {
    border: 1px solid var(--line);
    background: var(--card);
    padding: 4px 13px;
    border-radius: 99px;
    font-size: 13px;
    color: var(--ink-2);
}
.post-tag:hover { border-color: var(--accent); color: var(--accent); }

/* 布局：正文 + 右栏 */
.post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 36px;
    margin-top: 22px;
    align-items: start;
}
.post-aside { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 18px; }
.aside-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow);
}
.aside-title { font-family: var(--serif); font-size: 15.5px; font-weight: 800; margin: 0 0 12px; color: var(--ink); }
.aside-title i { color: var(--accent); margin-right: 4px; }
.hot-list { margin: 0; padding: 0 0 0 0; list-style: none; counter-reset: hot; }
.hot-list li {
    counter-increment: hot;
    padding: 8px 0 8px 30px;
    border-bottom: 1px dashed var(--line);
    position: relative;
    font-size: 13.5px;
    line-height: 1.55;
}
.hot-list li:last-child { border-bottom: none; }
.hot-list li::before {
    content: counter(hot, decimal-leading-zero);
    position: absolute;
    left: 0; top: 9px;
    font-family: var(--serif);
    font-size: 14px;
    font-weight: 800;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.hot-list a { color: var(--ink); display: block; }
.hot-list a:hover { color: var(--primary); }
.hot-list small { color: var(--ink-2); font-size: 11.5px; }
.aside-comments { margin: 0; padding: 0; list-style: none; }
.aside-comments li { padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13px; line-height: 1.6; }
.aside-comments li:last-child { border-bottom: none; }
.aside-comments a { color: var(--ink-2); }
.aside-comments a:hover { color: var(--primary); }
.aside-comments strong { color: var(--ink); }
.aside-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.aside-tags a {
    background: var(--bg-soft);
    padding: 3px 11px;
    border-radius: 99px;
    font-size: 12.5px;
    color: var(--ink-2);
    border: 1px solid transparent;
}
.aside-tags a:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.aside-tags small { color: var(--ink-2); }

/* 正文排版 */
.article-content {
    font-size: 16.5px;
    line-height: 1.9;
    min-width: 0;
    word-break: break-word;
}
.article-content.is-page { max-width: none; }
.article-content p { margin: 0 0 1.2em; }
.article-content h1, .article-content h2, .article-content h3, .article-content h4 {
    font-family: var(--serif);
    font-weight: 800;
    line-height: 1.45;
    margin: 1.9em 0 .8em;
    scroll-margin-top: 84px;
}
.article-content h2 { font-size: 24px; padding-left: 14px; border-left: 4px solid var(--primary); }
.article-content h3 { font-size: 20px; }
.article-content h4 { font-size: 17px; color: var(--primary-strong); }
.article-content ul, .article-content ol { padding-left: 1.6em; margin: 0 0 1.2em; }
.article-content li { margin: .3em 0; }
.article-content blockquote {
    margin: 1.4em 0;
    padding: 14px 20px;
    background: var(--primary-soft);
    border-left: 4px solid var(--primary);
    border-radius: 0 10px 10px 0;
    color: var(--ink);
    font-size: 15.5px;
}
.article-content blockquote p:last-child { margin-bottom: 0; }
.article-content a { border-bottom: 1px solid var(--primary); }
.article-content img { border-radius: 10px; box-shadow: var(--shadow); margin: 8px 0; }
.article-content hr { border: none; border-top: 1px dashed var(--line); margin: 2em 0; }
.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4em 0;
    font-size: 14.5px;
    display: block;
    overflow-x: auto;
}
.article-content th, .article-content td {
    border: 1px solid var(--line);
    padding: 9px 13px;
    text-align: left;
}
.article-content th { background: var(--primary-soft); font-weight: 700; white-space: nowrap; }
.article-content code:not(pre code) {
    font-family: var(--mono);
    font-size: .88em;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 1.5px 6px;
    color: var(--accent);
}
/* 代码块：深色面板 + 语言标签 + 复制 */
.article-content pre {
    position: relative;
    background: var(--panel-dark);
    color: #d4e4d8;
    border-radius: 12px;
    padding: 44px 20px 18px;
    overflow-x: auto;
    margin: 1.6em 0;
    font-size: 13.8px;
    line-height: 1.75;
    box-shadow: var(--shadow);
}
.article-content pre code { font-family: var(--mono); background: none; border: none; padding: 0; color: inherit; display: block; white-space: pre; }
.article-content pre::before {
    content: attr(data-lang);
    position: absolute;
    top: 12px;
    left: 16px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    color: #6e8f7c;
    text-transform: uppercase;
}
.article-content pre::after {
    content: "";
    position: absolute;
    top: 17px;
    right: 16px;
    width: 34px; height: 12px;
    background:
        radial-gradient(circle at 0 50%, #e0695e 4px, transparent 4.5px),
        radial-gradient(circle at 16px 50%, #e5b95c 4px, transparent 4.5px),
        radial-gradient(circle at 32px 50%, #59b077 4px, transparent 4.5px);
}
.copy-code-btn {
    position: absolute;
    top: 9px;
    right: 58px;
    z-index: 2;
    border: none;
    background: rgba(255, 255, 255, .08);
    color: #a9c7b4;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease;
    font-family: var(--sans);
}
.article-content pre:hover .copy-code-btn { opacity: 1; }
.copy-code-btn:hover { background: rgba(255, 255, 255, .16); }

.article-end-tags {
    margin-top: 2.4em;
    padding-top: 1.4em;
    border-top: 1px dashed var(--line);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    color: var(--ink-2);
    font-size: 14px;
}
.article-end-tags a { background: var(--bg-soft); padding: 4px 13px; border-radius: 99px; color: var(--ink-2); }
.article-end-tags a:hover { background: var(--primary-soft); color: var(--primary); }

/* 上下篇 */
.post-adjacent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 30px 0 10px;
}
.adj-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .15s ease, box-shadow .15s ease;
}
.adj-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.adj-card.adj-empty { visibility: hidden; }
.adj-next { text-align: right; }
.adj-label { font-size: 12px; color: var(--ink-2); letter-spacing: .06em; }
.adj-title { color: var(--ink); font-weight: 700; font-size: 14.5px; line-height: 1.5; }
.adj-card:hover .adj-title { color: var(--primary); }

/* 评论 */
.comments { margin: 36px 0 20px; }
.comments-title { font-family: var(--serif); font-size: 20px; font-weight: 800; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--primary); display: inline-block; padding-right: 20px; }
.comments-title small { color: var(--accent); font-size: 15px; }
.comments-empty { font-size: 14px; }
.comment-list { list-style: none; margin: 0 0 26px; padding: 0; }
.comment-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.comment-item.is-reply { margin-left: 44px; padding-left: 14px; border-left: 2px solid var(--primary-soft); }
.comment-avatar {
    flex: none;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: var(--primary-soft);
    color: var(--primary);
    font-family: var(--serif);
    font-weight: 700;
    border-radius: 50%;
}
.comment-main { min-width: 0; flex: 1; }
.comment-head { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.comment-name { font-weight: 700; color: var(--ink); }
.comment-badge {
    background: var(--accent);
    color: #fff;
    font-size: 10.5px;
    padding: 1px 7px;
    border-radius: 99px;
    font-weight: 600;
}
.comment-time { color: var(--ink-2); font-size: 12px; }
.comment-reply-btn {
    margin-left: auto;
    border: none;
    background: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 12.5px;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: var(--sans);
}
.comment-reply-btn:hover { background: var(--primary-soft); }
.comment-content { margin-top: 6px; font-size: 14.5px; line-height: 1.8; color: var(--ink); word-break: break-word; }
.comment-form {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
    box-shadow: var(--shadow);
}
.comment-form-title { font-family: var(--serif); margin: 0 0 14px; font-size: 16px; }
.comment-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.input {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 14.5px;
    font-family: var(--sans);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(29, 106, 79, .12); }
textarea.input { resize: vertical; min-height: 96px; }
.comment-form-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.form-hint { font-size: 12.5px; color: var(--ink-2); }
.comments-closed { padding: 16px; border: 1px dashed var(--line); border-radius: 10px; font-size: 14px; text-align: center; }

/* 目录悬浮 */
.toc-wrap { position: fixed; left: 22px; top: 46%; z-index: 90; display: none; }
@media (min-width: 1420px) { .toc-wrap { display: block; } }
.toc-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--primary);
    font-size: 18px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform .15s ease;
}
.toc-btn:hover { transform: scale(1.08); }
.toc-drawer {
    position: absolute;
    left: 54px;
    top: 0;
    width: 300px;
    max-height: 60vh;
    overflow: auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-hover);
    padding: 14px 16px;
    display: none;
}
.toc-drawer.open { display: block; }
.toc-title { margin: 0 0 8px; font-size: 13px; color: var(--ink-2); font-family: var(--serif); }
.toc-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.toc-list li { margin: 3px 0; }
.toc-list a { display: block; color: var(--ink-2); padding: 4px 10px; border-radius: 6px; border-left: 2px solid transparent; }
.toc-list a:hover { color: var(--primary); background: var(--primary-soft); }
.toc-list a.active { color: var(--primary); border-left-color: var(--primary); font-weight: 600; background: var(--primary-soft); }
.toc-list li.lvl3 a { padding-left: 22px; }
.toc-list li.lvl4 a { padding-left: 34px; }

/* ---------- 网址导航 ---------- */
.nav-hero { position: relative; padding: 40px 0 20px; overflow: hidden; }
.nav-hero-title { font-family: var(--serif); font-size: clamp(28px, 5vw, 40px); font-weight: 900; margin: 0 0 6px; position: relative; z-index: 1; }
.nav-hero-sub { color: var(--ink-2); margin: 0 0 14px; position: relative; z-index: 1; }
.nav-anchor { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.nav-anchor a { background: var(--card); border: 1px solid var(--line); padding: 5px 14px; border-radius: 99px; font-size: 13px; color: var(--ink-2); }
.nav-anchor a:hover { color: var(--primary); border-color: var(--primary); }
.nav-section { margin: 26px 0 10px; }
.nav-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary);
    width: fit-content;
    min-width: 220px;
    position: relative;
}
.nav-section-title::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 56px; height: 2px; background: var(--accent); }
.nav-section-icon { font-size: 22px; }
.nav-section-title small {
    font-size: 12px;
    color: var(--accent);
    background: var(--primary-soft);
    padding: 2px 10px;
    border-radius: 99px;
    font-family: var(--sans);
    font-weight: 600;
}
.nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.nav-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 18px 14px;
    color: var(--ink);
    box-shadow: var(--shadow);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    position: relative;
    overflow: hidden;
}
.nav-card::after {
    content: "";
    position: absolute;
    right: -22px;
    top: -22px;
    width: 64px; height: 64px;
    background: var(--primary-soft);
    border-radius: 50%;
    opacity: 0;
    transition: opacity .2s ease;
}
.nav-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--primary); color: var(--ink); }
.nav-card:hover::after { opacity: 1; }
.nav-card-head { display: flex; align-items: center; gap: 11px; }
.nav-card-icon { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; background: var(--bg-soft); }
.nav-card-letter {
    width: 34px; height: 34px;
    flex: none;
    display: grid; place-items: center;
    background: var(--primary);
    color: #fff;
    font-family: var(--serif);
    font-weight: 700;
    border-radius: 9px;
    font-size: 16px;
}
.nav-card-name { font-weight: 700; font-size: 15.5px; }
.nav-card-desc { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 20px; }
.nav-card-foot { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.nav-card-host { font-family: var(--mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.nav-card-tags i { font-style: normal; color: var(--accent); margin-right: 5px; }
.nav-card-expire { margin-left: auto; white-space: nowrap; }

/* ---------- 404 路牌 ---------- */
.nf { position: relative; text-align: center; padding: 26px 0 30px; overflow: hidden; }
.nf-sign {
    width: min(560px, 92%);
    height: auto;
    display: block;
    margin: 0 auto;
    animation: nf-in .6s ease both;
}
@keyframes nf-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.nf-shadow { fill: rgba(29, 106, 79, .13); }
html[data-theme="dark"] .nf-shadow { fill: rgba(0, 0, 0, .35); }
.nf-pole { fill: var(--primary); opacity: .92; }
.nf-badge circle { fill: var(--primary); }
.nf-badge text {
    fill: #fff;
    font-family: var(--serif);
    font-weight: 900;
    font-size: 30px;
    letter-spacing: .03em;
}
.nf-badge, .nf-board { transition: transform .18s ease; transform-box: fill-box; }
.nf-badge-link:hover .nf-badge { transform: scale(1.06); }
.nf-board path { fill: var(--card); stroke: var(--primary); stroke-width: 5; stroke-linejoin: round; }
.nf-board text { fill: var(--ink); font-family: var(--sans); font-weight: 700; font-size: 25px; letter-spacing: .06em; }
.nf-board-link:hover .nf-board-left { transform: rotate(-2.2deg); }
.nf-board-link:hover .nf-board-right { transform: rotate(2.2deg); }
.nf-board-link { outline-offset: 4px; }
.nf-dot { fill: var(--accent); opacity: .65; animation: nf-float 4.5s ease-in-out infinite; }
.nf-dot-2 { animation-delay: 1.4s; }
.nf-dot-3 { animation-delay: 2.6s; }
@keyframes nf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.nf-text { font-size: 16px; color: var(--ink-2); margin: 12px 0 24px; position: relative; z-index: 1; }
.nf-text em { font-style: normal; color: var(--ink-2); opacity: .8; }
.nf-search {
    max-width: 520px;
    margin: 0 auto 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 7px 6px 18px;
    box-shadow: var(--shadow);
    position: relative;
    z-index: 1;
}
.nf-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(29, 106, 79, .12); }
.nf-search i { color: var(--ink-2); }
.nf-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font-size: 15px;
    color: var(--ink);
    font-family: var(--sans);
}
.nf-search button {
    border: none;
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    padding: 9px 22px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    font-family: var(--sans);
    transition: background .15s ease;
}
.nf-search button:hover { background: var(--primary-strong); }
.nf-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 880px;
    margin: 0 auto 8px;
    position: relative;
    z-index: 1;
}
.nf-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 13px 15px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.nf-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--primary); }
.nf-card-date { font-size: 11.5px; color: var(--accent); font-variant-numeric: tabular-nums; }
.nf-card-title { font-weight: 700; color: var(--ink); font-size: 14.5px; line-height: 1.45; }
.nf-card-excerpt {
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nf-cards-label { color: var(--ink-2); font-size: 12px; letter-spacing: .3em; margin-top: 14px; position: relative; z-index: 1; }

@media (max-width: 680px) {
    .nf-cards { grid-template-columns: 1fr; max-width: 400px; }
    .nf-sign { width: min(440px, 100%); }
    .nf-search { margin-left: 8px; margin-right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .nf-sign, .nf-dot { animation: none; }
    .nf-badge, .nf-board, .nf-card { transition: none; }
}

/* ---------- 页脚 ---------- */
.site-footer {
    border-top: 1px solid var(--line);
    margin-top: 40px;
    background: var(--bg-soft);
}
.footer-inner { padding: 26px 20px; text-align: center; }
.footer-copy { margin: 0 0 6px; color: var(--ink); font-size: 14px; }
.footer-meta { margin: 0; color: var(--ink-2); font-size: 12.5px; }
.footer-meta a { color: var(--ink-2); margin: 0 2px; }
.footer-meta a:hover { color: var(--primary); }

/* ---------- 进度条 / 返回顶部 ---------- */
.read-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    z-index: 200;
    transition: width .08s linear;
}
.back-top {
    position: fixed;
    right: 22px;
    bottom: 26px;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--primary);
    font-size: 17px;
    cursor: pointer;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .15s ease;
    z-index: 90;
}
.back-top.show { opacity: 1; pointer-events: auto; }
.back-top:hover { transform: translateY(-3px); }

/* ---------- 搜索高亮 ---------- */
mark.hl { background: rgba(201, 122, 30, .25); color: inherit; padding: 0 2px; border-radius: 3px; }
html[data-theme="dark"] mark.hl { background: rgba(217, 160, 85, .3); }

/* ---------- 响应式 ---------- */
@media (max-width: 991.98px) {
    .post-layout { grid-template-columns: 1fr; }
    .post-aside { position: static; }
    .site-nav {
        display: none;
        position: absolute;
        left: 0; right: 0;
        top: 62px;
        background: var(--card);
        border-bottom: 1px solid var(--line);
        flex-direction: column;
        padding: 10px 16px 14px;
        gap: 2px;
        box-shadow: var(--shadow-hover);
    }
    .site-header.nav-open .site-nav { display: flex; }
    .site-nav a { padding: 10px 12px; font-size: 15px; }
    .nav-toggle { display: grid; }
    .header-inner { height: 56px; }
    .site-header.nav-open .search-panel { top: auto; }
    /* 导航下拉在移动端改为静态展开（随菜单显示全部分类与站点） */
    .nav-dd-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: none;
        max-width: none;
        box-shadow: none;
        padding: 4px 8px 8px;
        background: transparent;
        border: none;
    }
    .nav-dd-menu::before { display: none; }
    .nav-dd-cat { padding-top: 6px; }
    .nav-dd-sites { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .nav-dd-site { padding: 8px 6px; }
}
@media (max-width: 767.98px) {
    .page-body { padding: 20px 14px 6px; }
    .hero { padding: 26px 0 22px; }
    .hero-ornament { font-size: 150px; right: -40px; opacity: .7; }
    .post-card { gap: 12px; padding: 18px 2px; }
    .post-date { width: 46px; }
    .post-day { font-size: 22px; }
    .post-title { font-size: 17.5px; }
    .focus-card { padding: 18px 16px; flex-direction: column; gap: 8px; }
    .post-adjacent { grid-template-columns: 1fr; }
    .adj-next { text-align: left; }
    .comment-form-grid { grid-template-columns: 1fr; }
    .comment-item.is-reply { margin-left: 20px; }
    .brand-sub { display: none; }
    .container { padding: 0 14px; }
    .search-form { padding: 10px 14px; }
    .article-content { font-size: 16px; }
    .article-content pre { padding: 40px 14px 14px; }
}

/* ---------- 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =====================================================================
   工具箱（/tools 公开页）
   ===================================================================== */
/* 基础 utility（工具箱页所需的最小集） */
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: 1rem; }
.ms-2 { margin-left: .5rem; }
.text-center { text-align: center; }
.position-relative { position: relative; }
.pe-5 { padding-right: 3rem; }


.tool-card { margin-bottom: 18px; }
.tool-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tool-card-tools { display: flex; gap: 8px; margin-left: auto; }
.tool-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.tool-grow { flex: 1 1 220px; min-width: 0; }
.tool-tz { flex: 0 0 150px; }
.tool-btn-main { flex: none; }

.tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    border-radius: 9px;
    padding: 7px 14px;
    font-size: 13.5px;
    cursor: pointer;
    font-family: var(--sans);
    transition: all .15s ease;
}
.tool-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.tool-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.tool-btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.tool-btn-primary:hover { background: var(--primary-strong); color: #fff; }
.tool-btn-group { display: flex; gap: 6px; flex-wrap: wrap; }
.tool-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.tool-range { width: 100%; accent-color: var(--primary); }
.tool-color { width: 100%; height: 38px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); cursor: pointer; }
input[type="range"] { accent-color: var(--primary); }

.tool-now { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.tool-now-item {
    background: var(--primary-soft);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tool-now-num {
    font-size: 24px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--primary);
    font-family: var(--mono);
    word-break: break-all;
}
.tool-now-label { font-size: 12px; color: var(--ink-2); margin-bottom: 6px; }
.tool-now-item .tool-btn { align-self: flex-start; padding: 4px 12px; }
.tool-now-date { font-size: 18px; font-weight: 700; color: var(--ink); }

.tool-result { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; margin-top: 12px; }
.tool-result-row { display: flex; align-items: center; gap: 14px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 14px; flex-wrap: wrap; }
.tool-result-row:last-child { border-bottom: none; }
.tool-result-row span:first-child { color: var(--ink-2); width: 110px; flex: none; }
.tool-result-row strong { font-family: var(--mono); font-size: 15px; word-break: break-all; }
.tool-result-err { color: #a3541c; font-size: 13.5px; }
html[data-theme="dark"] .tool-result-err { color: #e0a070; }

.tool-hint { font-size: 12.5px; color: var(--ink-2); }
.tool-op-block { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-top: 12px; background: var(--card); }
.tool-op-title { font-size: 14px; font-weight: 700; margin: 0 0 8px; color: var(--ink); }
.tool-op-title i { color: var(--accent); margin-right: 4px; }

.img-drop {
    border: 2px dashed var(--line);
    border-radius: 12px;
    padding: 60px 20px;
    text-align: center;
    color: var(--ink-2);
    font-size: 15px;
    transition: all .15s ease;
    cursor: pointer;
}
.img-drop.drag, .img-drop:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.tool-img-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
@media (max-width: 900px) { .tool-img-grid { grid-template-columns: 1fr; } }
.tool-img-side { min-width: 0; }
.img-canvas-wrap {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: repeating-conic-gradient(var(--bg-soft) 0 25%, var(--card) 0 50%) 0 0/20px 20px;
    max-height: 480px;
    overflow-y: auto;
    text-align: center;
}
#imgCanvas { max-width: 100%; height: auto; display: block; margin: 0 auto; cursor: crosshair; }
.img-crop-box {
    position: absolute;
    border: 2px solid var(--primary);
    background: rgba(29, 106, 79, .15);
    pointer-events: none;
    display: none;
}
html[data-theme="dark"] .img-crop-box { background: rgba(92, 180, 145, .18); }
.img-crop-size {
    position: absolute;
    top: -22px;
    left: 0;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.img-info {
    background: var(--primary-soft);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13.5px;
    color: var(--ink);
    margin-bottom: 4px;
}

.tool-qr-grid { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .tool-qr-grid { grid-template-columns: 1fr; } }
.tool-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qr-preview {
    background: repeating-conic-gradient(var(--bg-soft) 0 25%, var(--card) 0 50%) 0 0/20px 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    display: grid;
    place-items: center;
}
#qrCanvas { max-width: 100%; height: auto; border-radius: 6px; }

@media (max-width: 767.98px) {
    .tool-row .tool-btn-main { width: 100%; justify-content: center; }
}

/* =====================================================================
   工具箱侧栏布局（左切换 / 右工作区，响应式）
   ===================================================================== */
.tools-head { padding: 4px 0 18px; }
.tools-title { font-family: var(--serif); font-size: clamp(22px, 3vw, 28px); font-weight: 900; margin: 0 0 4px; }
.tools-sub { color: var(--ink-2); font-size: 14px; margin: 0; }
.tools-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
.tool-side {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    box-shadow: var(--shadow);
}
.tool-side-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    background: transparent;
    color: var(--ink-2);
    padding: 11px 14px;
    border-radius: 9px;
    font-size: 14.5px;
    cursor: pointer;
    font-family: var(--sans);
    text-align: left;
    transition: background .15s ease, color .15s ease;
}
.tool-side-btn i { font-size: 17px; }
.tool-side-btn:hover { background: var(--primary-soft); color: var(--primary); }
.tool-side-btn.active {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(29, 106, 79, .25);
}
.tool-work { min-width: 0; }
.tool-work .tool-card { margin-bottom: 0; }

@media (max-width: 980px) {
    .tools-layout { grid-template-columns: 1fr; gap: 14px; }
    .tool-side {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        padding: 8px;
    }
    .tool-side-btn { flex: 1; justify-content: center; padding: 10px 12px; white-space: nowrap; }
}

/* 日期→时间戳行：控件统一高度垂直居中 */
.tool-row { align-items: center; }
.tool-row .input, .tool-row .tool-tz { height: 42px; }
.tool-row .tool-btn-main { height: 42px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; justify-content: center; }