/* ---- tokens.css ---- */
/* ============================================================================
 * tokens.css — 唯一的设计变量来源
 *
 * 规则：
 *   1. 本文件只定义变量，不写任何选择器样式。
 *   2. 组件里禁止出现字面量色值/字号/间距，必须引用这里的令牌。
 *   3. 只有这一层可以有"原始值"，其它层一律引用。
 *
 * 气质：暖纸 · 墨字 · 克制的赭石强调色。不用玻璃、不用发光、不用渐变。
 * ==========================================================================*/

/* 层序在所有样式表里只声明一次，后加载的文件自动遵循 */
@layer tokens, reset, base, layout, components, utilities;

@layer tokens {
  :root {
    /* ---- 色彩：暖纸（默认浅色） ---- */
    --bg: #fbf8f3;          /* 温润宣纸底 */
    --surface: #fffdf9;     /* 暖白卡片面 */
    --surface-2: #f4eee4;   /* 次级暖沙面、代码块、日历衬底 */
    --surface-3: #ebe3d6;   /* 悬停、斑马纹 */

    --text: #1f1a14;        /* 暖墨字，不用纯黑 */
    --text-2: #554b40;      /* 次要正文 */
    --text-3: #6e6459;      /* 辅助信息，对比度 ≥ 4.8:1 */

    --line: #e6dfd3;        /* 柔和分隔线 */
    --line-strong: #d1c5b4; /* 控件与强调边框 */

    --accent: #9a4412;      /* 温润赭石/赤陶，正文对比 > 6:1 */
    --accent-hover: #7c350d;
    --accent-soft: #fcedd8; /* 选中暖光底色 */
    --on-accent: #fffdfa;

    --danger: #b91c1c;
    --danger-soft: #fde8e4;
    --success: #3f6212;
    --success-soft: #ecf3dd;

    /* ---- 字体 ---- */
    --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC",
      "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    /* 衬线只给标题与引言：大字号的宋体比黑体更有"文献"感 */
    --font-serif: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC",
      "SimSun", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas,
      "Courier New", monospace;

    /* 字阶：9 档，替代旧站 59 种写法 */
    --text-xs: 0.75rem;     /* 12 */
    --text-sm: 0.8125rem;   /* 13 */
    --text-base: 0.9375rem; /* 15 */
    --text-md: 1rem;        /* 16 长文正文 */
    --text-lg: 1.125rem;    /* 18 */
    --text-xl: 1.375rem;    /* 22 */
    --text-2xl: 1.75rem;    /* 28 */
    --text-3xl: 2.25rem;    /* 36 */
    --text-4xl: 3rem;       /* 48 */

    --lh-tight: 1.2;        /* 标题 */
    --lh-normal: 1.55;      /* UI */
    --lh-relaxed: 1.8;      /* 长文正文，偏松，久读不累 */

    --tracking-tight: -0.012em;
    --tracking-wide: 0.08em;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ---- 间距：4px 基数，9 档 ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* ---- 圆角：5 档 ---- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;

    /* ---- 阴影：暖灰调，3 档 ---- */
    --shadow-sm: 0 1px 2px rgb(74 56 38 / 0.07);
    --shadow-md: 0 4px 14px rgb(74 56 38 / 0.09);
    --shadow-lg: 0 14px 36px rgb(74 56 38 / 0.12);

    /* ---- 动效 ---- */
    --dur-fast: 150ms;
    --dur-base: 200ms;
    --dur-slow: 300ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);

    /* ---- 布局 ---- */
    --nav-h: 56px;
    --measure: 66ch;
    --container: 1240px;
    --container-wide: 1440px;
    --container-pad: var(--space-5);

    /* ---- 控件 ---- */
    --control-h: 36px;
    --control-h-lg: 44px;
    --ring: 0 0 0 3px var(--accent-soft);

    color-scheme: light;
  }

  /* ---- 色彩：暖墨（深色） ---- */
  [data-theme="dark"] {
    --bg: #17130f;          /* 暖黑，不是 #000 */
    --surface: #211c16;
    --surface-2: #2b241c;
    --surface-3: #362d23;

    --text: #f0e9df;
    --text-2: #bcae9d;
    --text-3: #94866f;

    --line: #3a3025;
    --line-strong: #4f4233;

    --accent: #e9a94a;
    --accent-hover: #f2bd6c;
    --accent-soft: #3a2a12;
    --on-accent: #17130f;

    --danger: #ef6a5a;
    --danger-soft: #3b1512;
    --success: #a8c466;
    --success-soft: #1e2610;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 14px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 14px 36px rgb(0 0 0 / 0.5);

    color-scheme: dark;
  }

  /* 系统偏好深色，且用户没有手动指定浅色时 */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #17130f;
      --surface: #211c16;
      --surface-2: #2b241c;
      --surface-3: #362d23;

      --text: #f0e9df;
      --text-2: #bcae9d;
      --text-3: #94866f;

      --line: #3a3025;
      --line-strong: #4f4233;

      --accent: #e9a94a;
      --accent-hover: #f2bd6c;
      --accent-soft: #3a2a12;
      --on-accent: #17130f;

      --danger: #ef6a5a;
      --danger-soft: #3b1512;
      --success: #a8c466;
      --success-soft: #1e2610;

      --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
      --shadow-md: 0 4px 14px rgb(0 0 0 / 0.45);
      --shadow-lg: 0 14px 36px rgb(0 0 0 / 0.5);

      color-scheme: dark;
    }
  }
}

/* ---- base.css ---- */
/* ============================================================================
 * base.css — 重置、排版、布局与基础组件
 *
 * 纪律：
 *   · 不出现字面量色值 / 字号 / 间距，全部引用 tokens。
 *   · 不使用 backdrop-filter / 渐变 / 发光 —— 这是与旧站的界线。
 *   · 只动 transform 与 opacity，不动 background-position / filter / mask。
 * ==========================================================================*/

@layer reset {
  /* 作者样式里的 display 会盖掉浏览器默认的 [hidden]{display:none}：
     空的红框提示条就是这么漏出来的，所以自己兜一层，且必须 !important。 */
  [hidden] {
    display: none !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    min-height: 100dvh;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--lh-normal);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img,
  svg,
  video {
    display: block;
    max-width: 100%;
    height: auto;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    cursor: pointer;
  }

  a {
    color: var(--accent);
    text-decoration: none;
    text-underline-offset: 0.2em;
  }

  a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
  }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }

  ::selection {
    background: var(--accent-soft);
    color: var(--text);
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@layer base {
  /* 标题走衬线：大字号宋体比黑体更像"文献"，也是暖纸感的来源之一 */
  h1,
  h2 {
    font-family: var(--font-serif);
    line-height: var(--lh-tight);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
  }

  h3,
  h4 {
    line-height: var(--lh-tight);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
  }

  h1 {
    font-size: var(--text-3xl);
  }
  h2 {
    font-size: var(--text-2xl);
  }
  h3 {
    font-size: var(--text-xl);
  }
  h4 {
    font-size: var(--text-lg);
  }

  /* 小标签类文字统一拉开字距，避免中文挤在一起 */
  .eyebrow {
    font-size: var(--text-sm);
    color: var(--text-3);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  p {
    text-wrap: pretty;
  }

  code,
  kbd,
  samp,
  pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  hr {
    height: 1px;
    border: 0;
    background: var(--line);
    margin-block: var(--space-6);
  }

  /* 长文排版：只作用于文章正文，不影响后台与 IPC 面板 */
  .prose {
    max-width: var(--measure);
    font-size: var(--text-md);
    line-height: var(--lh-relaxed);
    color: var(--text);
  }

  .prose > * + * {
    margin-top: var(--space-4);
  }

  .prose h2 {
    margin-top: var(--space-7);
    font-size: var(--text-xl);
  }

  .prose h3 {
    margin-top: var(--space-6);
    font-size: var(--text-lg);
  }

  .prose ul,
  .prose ol {
    padding-left: var(--space-5);
  }

  .prose li + li {
    margin-top: var(--space-2);
  }

  .prose blockquote {
    margin-block: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--surface-2);
    color: var(--text-2);
  }

  .prose pre {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--line);
    overflow-x: auto;
  }

  .prose :not(pre) > code {
    padding: 0.1em 0.35em;
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    border: 1px solid var(--line);
  }

  /* 编辑器用 <font size> 调字号（execCommand 的产物，能保住撤销栈），
     这里把浏览器的七档映射成相对字号，前台和后台就完全一致。 */

  .prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
    margin-block: var(--space-5);
  }

  .prose th,
  .prose td {
    border: 1px solid var(--line);
    padding: var(--space-2) var(--space-3);
    text-align: left;
  }

  .prose th {
    background: var(--surface-2);
    font-weight: var(--weight-medium);
  }

  .prose font[size="1"] {
    font-size: 0.75rem;
  }

  .prose font[size="2"] {
    font-size: 0.875rem;
  }

  .prose font[size="3"] {
    font-size: var(--text-md);
  }

  .prose font[size="4"] {
    font-size: 1.125rem;
  }

  .prose font[size="5"] {
    font-size: 1.375rem;
  }

  .prose font[size="6"] {
    font-size: 1.625rem;
  }

  .prose font[size="7"] {
    font-size: 2rem;
  }

  /* 编辑器与正文图片对齐：若图片自身未设 margin-left，则继承父段落 text-align；若图片自身已设独立对齐则优先按图片自身对齐 */
  .prose [style*="text-align: center"] img:not([style*="margin-left"]),
  .prose [style*="text-align:center"] img:not([style*="margin-left"]),
  .prose p[align="center"] img:not([style*="margin-left"]),
  .editor-input [style*="text-align: center"] img:not([style*="margin-left"]),
  .editor-input [style*="text-align:center"] img:not([style*="margin-left"]) {
    margin-left: auto;
    margin-right: auto;
  }

  .prose [style*="text-align: right"] img:not([style*="margin-left"]),
  .prose [style*="text-align:right"] img:not([style*="margin-left"]),
  .prose p[align="right"] img:not([style*="margin-left"]),
  .editor-input [style*="text-align: right"] img:not([style*="margin-left"]),
  .editor-input [style*="text-align:right"] img:not([style*="margin-left"]) {
    margin-left: auto;
    margin-right: 0;
  }
}

@layer layout {
  .shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }

  .shell__main {
    flex: 1;
  }

  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .container--wide {
    max-width: var(--container-wide);
  }

  .stack > * + * {
    margin-top: var(--space-5);
  }

  .row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: 50;
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
  }

  .skip-link:focus {
    top: var(--space-4);
  }
}

@layer components {
  /* ---- 顶部导航 ---- */
  .nav {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--nav-h);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }

  .nav__inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    height: 100%;
  }

  .nav__brand {
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    color: var(--text);
    letter-spacing: -0.01em;
  }

  .nav__brand:hover {
    text-decoration: none;
    color: var(--text);
  }

  .nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
  }

  .nav__link {
    display: inline-flex;
    align-items: center;
    height: var(--control-h);
    padding-inline: var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: var(--text-base);
    transition: color var(--dur-fast) var(--ease),
      background-color var(--dur-fast) var(--ease);
  }

  .nav__link:hover {
    color: var(--text);
    background: var(--surface-2);
    text-decoration: none;
  }

  .nav__link[aria-current="page"] {
    color: var(--text);
    font-weight: var(--weight-medium);
  }

  /* ---- 按钮 ---- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--control-h);
    padding-inline: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease);
  }

  .btn:hover {
    background: var(--surface-2);
    text-decoration: none;
  }

  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
  }

  .btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
  }

  .btn--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--text-2);
  }

  .btn--ghost:hover {
    background: var(--surface-2);
    color: var(--text);
  }

  /* 描边按钮：有框有线，但不上底色 —— 用来区分「次一级但仍是按钮」的动作。
     实心块留给了唯一的主操作，页面上不该出现第三个填色的方块。 */
  .btn--outline {
    border-color: var(--accent);
    background: transparent;
    color: var(--accent);
  }

  .btn--outline:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
  }

  /* ---- 表单 ---- */
  /**
   * 表单纵向排布必须自带间距：.field 内部有 gap，但相邻的 .field 之间、
   * 以及最后一个输入框与提交按钮之间没有，靠外边距会互相覆盖。
   */
  .form {
    display: grid;
    gap: var(--space-5);
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .field__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-2);
  }

  .input,
  .textarea,
  .select {
    width: 100%;
    height: var(--control-h);
    padding-inline: var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-base);
    transition: border-color var(--dur-fast) var(--ease),
      box-shadow var(--dur-fast) var(--ease);
  }

  select.input,
  .select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.35rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 12 12' fill='none' stroke='%23574e44' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 13px 13px;
    cursor: pointer;
  }

  [data-theme="dark"] select.input,
  [data-theme="dark"] .select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 12 12' fill='none' stroke='%23b8afa3' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5'/%3E%3C/svg%3E");
  }


  textarea.input,
  .input--area,
  .textarea {
    height: auto;
    min-height: 120px;
    padding-block: var(--space-2);
    resize: vertical;
    line-height: var(--lh-normal);
  }

  .input:focus,
  .textarea:focus,
  .select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }

  .input::placeholder,
  .textarea::placeholder {
    color: var(--text-3);
  }

  .field__error {
    font-size: var(--text-sm);
    color: var(--danger);
  }

  /* ---- 卡片 ---- */
  .card {
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: border-color var(--dur-fast) var(--ease),
      box-shadow var(--dur-fast) var(--ease);
  }

  .card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
  }

  .card__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-2);
  }

  .card__title a {
    color: var(--text);
  }

  .card__title a:hover {
    color: var(--accent);
    text-decoration: none;
  }

  .card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-3);
  }

  .card__excerpt {
    margin-top: var(--space-3);
    color: var(--text-2);
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
  }

  /* ---- 徽标 ---- */
  /* 药丸底标：层级、分类这类「小标签」用它，和正文区分开。
     注意这里是有底色的 —— 小面积的底色是必要的，正文区不要大色块即可。 */
  .badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding-inline: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    white-space: nowrap;
  }

  .badge--accent {
    background: var(--accent-soft);
    color: var(--accent);
  }

  /* ---- 表格 ---- */
  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
  }

  .table th {
    text-align: left;
    font-weight: var(--weight-medium);
    font-size: var(--text-sm);
    color: var(--text-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--line);
  }

  .table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--line);
    height: 40px;
  }

  .table tbody tr:hover {
    background: var(--surface-2);
  }

  .table .num {
    font-family: var(--font-mono);
    text-align: right;
  }

  /* ---- 页脚 ---- */
  .footer {
    margin-top: var(--space-9);
    border-top: 1px solid var(--line);
    background: var(--surface);
  }

  .footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-6);
    font-size: var(--text-sm);
    color: var(--text-3);
  }

  .footer__records {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
  }

  .footer__record {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-3);
    font-size: var(--text-xs);
  }

  .footer__record:hover {
    color: var(--text-2);
  }

  .footer__icon {
    width: 14px;
    height: 14px;
    opacity: 0.8;
  }

  /* ---- 空态 ---- */
  .empty {
    padding: var(--space-8) var(--space-5);
    text-align: center;
    color: var(--text-3);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
  }

  /* ---- 骨架屏 ---- */
  .skeleton {
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    animation: skeleton-pulse 1.4s ease-in-out infinite;
  }

  @keyframes skeleton-pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.55;
    }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }

  .muted {
    color: var(--text-3);
  }

  .noscript-box {
    max-width: 40rem;
    margin: 4rem auto;
    padding: 0 1rem;
    font-family: var(--font-sans);
  }
}

/* ---- site.css ---- */
/* ============================================================================
 * site.css — 前台页面样式
 *
 * 只放页面与区块级样式；控件（按钮/输入/卡片/表格）都在 base.css。
 * 纪律：不写字面量色值/字号/间距，全部引用 tokens.css。
 * ==========================================================================*/

@layer components {
  /* ---- 页面骨架 ---- */
  .page {
    padding-block: var(--space-7) var(--space-9);
  }

  .page-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-7);
  }

  .page-head__title {
    font-size: var(--text-3xl);
  }

  .page-head__desc {
    max-width: var(--measure);
    color: var(--text-2);
    font-size: var(--text-md);
  }

  /* ---- 首页 Hero ---- */
  .hero {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }

  /* 左边是话，右边是日历：日历不抢视线，但它把「今天」这个信息放在首屏。 */
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    gap: var(--space-8);
    align-items: start;
    padding-block: var(--space-8) var(--space-7);
  }

  .hero__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
  }

  .hero__eyebrow {
    color: var(--accent);
  }

  .hero__title {
    font-size: var(--text-4xl);
    max-width: none;
  }

  .hero__lead {
    /* 首页不再放一行巨大的站名，这句话就是视觉主体，所以给它正文之上的分量 */
    max-width: none;
    margin: 0;
    color: var(--text);
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    line-height: var(--lh-relaxed);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-1);
  }

  /* ---- 实时状态：时间 · 地点 · 天气 ---- */
  .hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-4);
    color: var(--text-3);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
  }

  .hero__meta-item:empty {
    display: none;
  }

  .hero__meta-item + .hero__meta-item::before {
    content: "·";
    margin-right: var(--space-3);
    color: var(--line-strong);
  }

  /* ---- 月历 ---- */
  /* 只要文字日历：没有卡片底色、没有外框。用行分隔线把数字排成表格，
     和旧站观感一致；数字下面那根线就是它的「格」。 */
  .calendar {
    padding: 0;
    border: 0;
    background: none;
  }

  .calendar__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .calendar__title {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-2);
  }

  .calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
  }

  /* 星期行自己也有一条下线，整张日历就是「表头线 + 每行一条线」。 */
  .calendar__dow {
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--line);
    color: var(--text-3);
    font-size: var(--text-xs);
    text-align: center;
  }

  .calendar__day {
    padding: var(--space-2) 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--text-2);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .calendar__day--blank {
    color: transparent;
  }

  /* 今天：换色 + 加粗，不加底色也不加框。 */
  .calendar__day.is-today {
    background: none;
    box-shadow: none;
    color: var(--accent);
    font-weight: 600;
  }

  /* ---- 区块 ---- */
  .section {
    padding-block-start: var(--space-8);
  }

  .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
  }

  .section-head__title {
    font-size: var(--text-xl);
  }

  .section-head__more {
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  /* ---- 文章卡片（首页） ---- */
  .post-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
  }

  @media (min-width: 640px) {
    .post-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .post-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* 窄屏把日历收到正文下方：两栏并排时它会把导语挤成一条窄柱 */
  @media (max-width: 860px) {
    .hero__inner {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-6);
    }
  }

  .post-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }

  .post-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
  }

  .post-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .post-card__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-2);
    font-family: var(--font-serif);
    color: var(--text);
  }

  .post-card:hover .post-card__title {
    color: var(--accent);
  }

  .post-card__excerpt {
    margin-top: var(--space-3);
    color: var(--text-2);
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ---- 元信息 ---- */
  .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-3);
  }

  .meta__item + .meta__item::before {
    content: "·";
    margin-right: var(--space-2);
    color: var(--line-strong);
  }

  /* ---- 标签 ---- */
  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }

  .tag {
    font-size: var(--text-xs);
    color: var(--text-3);
    background: var(--surface-2);
    padding: 0.15em 0.6em;
    border-radius: var(--radius-full);
  }

  .tag:hover {
    color: var(--accent);
    text-decoration: none;
  }

  /* ---- 文章列表（行式） ---- */
  .post-rows {
    list-style: none;
    padding: 0;
    border-top: 1px solid var(--line);
  }

  .post-row {
    display: grid;
    grid-template-columns: 6.5rem 1fr auto;
    align-items: baseline;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--line);
  }

  .post-row__date {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
  }

  .post-row__main {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
  }

  .post-row__title {
    color: var(--text);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
  }

  .post-row__title:hover {
    color: var(--accent);
    text-decoration: none;
  }

  .post-row__cat {
    font-size: var(--text-xs);
    color: var(--text-3);
  }

  @media (max-width: 560px) {
    .post-row {
      grid-template-columns: 1fr;
      gap: var(--space-1);
    }
  }

  /* ---- 分类胶囊 ---- */
  .chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-h);
    padding-inline: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--text-2);
    font-size: var(--text-base);
  }

  .chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
  }

  .chip__count {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-3);
  }

  /* ---- 搜索条 ---- */
  .search {
    display: flex;
    gap: var(--space-2);
    max-width: 32rem;
    margin-top: var(--space-2);
  }

  .search__input {
    flex: 1;
  }

  .filter-note {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-3);
  }

  /* ---- 分页 ---- */
  .pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-7);
  }

  .pager__label {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-3);
  }

  /* ---- 载入与提示 ---- */
  .loading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-7);
    color: var(--text-3);
    font-size: var(--text-sm);
  }

  .loading__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--accent);
    animation: loading-pulse 1s ease-in-out infinite;
  }

  @keyframes loading-pulse {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
  }

  .notice {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .notice--info {
    border-left-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text);
  }

  .notice--danger {
    border-left-color: var(--danger);
    background: var(--danger-soft);
    color: var(--danger);
  }

  .empty__title {
    font-size: var(--text-md);
    color: var(--text-2);
    margin-bottom: var(--space-2);
  }

  .empty__hint {
    font-size: var(--text-sm);
    color: var(--text-3);
    margin-bottom: var(--space-4);
  }

  /* ---- 文章详情 ---- */
  .article {
    max-width: 46rem;
  }

  .article__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--space-7);
  }

  .article__title {
    font-size: var(--text-3xl);
    max-width: none;
    width: 100%;
    line-height: 1.35;
  }

  .article__excerpt {
    color: var(--text-2);
    font-size: var(--text-md);
    line-height: var(--lh-relaxed);
  }

  /**
   * 正文列与 header 那条分隔线同宽：header 的边框撑满 .article，正文若按 --measure(66ch)
   * 收窄就会比线短一截。这里让正文铺满 .article 的宽度，左右两端与线严格对齐。
   */
  .article__body {
    max-width: 100%;
  }

  .article__body img {
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
  }

  .article__body a {
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
  }

  .article__body a:hover {
    text-decoration-color: currentColor;
  }

  .article__body table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
    margin-block: var(--space-5);
  }

  .article__body th,
  .article__body td {
    border: 1px solid var(--line);
    padding: var(--space-2) var(--space-3);
    text-align: left;
  }

  .article__body th {
    background: var(--surface-2);
    font-weight: var(--weight-medium);
  }

  .article__tags {
    margin-top: var(--space-6);
  }

  /**
   * 正文之后这一块：整幅的一条细线，授权说明独占一行、返回按钮在下一行右侧。
   * 说明必须给足宽度 —— 挤成半栏，一句话会被拆到两行里去。
   */
  .article__foot {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    font-size: var(--text-sm);
  }

  .article__license {
    margin: 0;
    max-width: none;
    line-height: var(--lh-relaxed);
  }

  .article__actions {
    display: flex;
    justify-content: flex-end;
  }

  /* ---- 面包屑与返回 ---- */
  .crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-3);
  }

  .crumbs__sep {
    color: var(--line-strong);
  }

  .crumbs__link {
    color: var(--text-3);
  }

  .crumbs__current {
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40ch;
  }

  .link-back {
    font-size: var(--text-sm);
  }

  /* ---- 评论 ---- */
  .container--narrow {
    max-width: 46rem;
  }

  .comments {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
  }

  .comments__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-5);
  }

  .comments__subtitle {
    font-size: var(--text-lg);
    margin-block: var(--space-7) var(--space-4);
  }

  .comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .comment {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--line);
  }

  .comment__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
  }

  .comment__author {
    font-weight: var(--weight-medium);
  }

  .comment__time {
    font-size: var(--text-xs);
    color: var(--text-3);
  }

  .comment__delete {
    margin-left: auto;
    color: var(--danger);
  }

  .comment__body {
    color: var(--text-2);
    line-height: var(--lh-relaxed);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .comment-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* 与正文同宽：表单比正文窄一截，右边就会留下一块说不清用途的空白 */
    max-width: none;
  }

  .comment-form__actions {
    display: flex;
    justify-content: flex-end;
  }

  /* ---- 联系页 ---- */
  .contact-layout {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: 1fr;
  }

  @media (min-width: 900px) {
    .contact-layout {
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    }
  }

  .contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .form-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
  }

  @media (min-width: 560px) {
    .form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .contact-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
  }

  .form-hint {
    font-size: var(--text-sm);
  }

  .form-error:empty {
    display: none;
  }

  .honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  .contact-aside {
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    align-self: start;
  }

  .contact-aside__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-3);
  }

  /* ---- 归档 ---- */
  .archive__year {
    margin-bottom: var(--space-7);
  }

  .archive__year-label {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--line);
  }

  /* 行本身由 .post-row 提供，这里只把它们串成一张干净的列表。 */
  .archive__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 0;
  }

  .archive__note {
    margin-top: var(--space-6);
  }

  /* ---- 对话框 ---- */
  .dialog {
    /* reset 层的 *{margin:0} 会把原生 dialog 的 margin:auto 一起清掉，
       弹窗就会跑到视口左上角。这里显式写回来，让它始终居中。 */
    margin: auto;
    inset: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    padding: 0;
    box-shadow: var(--shadow-lg);
    max-width: 26rem;
    width: calc(100% - var(--space-8));
  }

  .dialog::backdrop {
    background: rgb(31 26 20 / 0.4);
  }

  .dialog__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .dialog__message {
    line-height: var(--lh-relaxed);
  }

  .dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  /* ---- 轻提示 ---- */
  .toast {
    position: fixed;
    left: 50%;
    bottom: var(--space-6);
    transform: translateX(-50%);
    z-index: 60;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-md);
    animation: toast-in var(--dur-base) var(--ease);
  }

  .toast--success {
    border-color: var(--success);
    color: var(--success);
  }

  .toast--danger {
    border-color: var(--danger);
    color: var(--danger);
  }

  .toast--out {
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
  }

  @keyframes toast-in {
    from {
      opacity: 0;
      transform: translate(-50%, 8px);
    }
    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }
}

@layer utilities {
  .nav__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-serif);
    font-size: var(--text-xs);
    vertical-align: 1px;
  }

  .nav__brand {
    display: inline-flex;
    align-items: center;
  }

  .btn--sm {
    height: 30px;
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
  }

  .btn--icon {
    width: var(--control-h);
    padding-inline: 0;
    font-size: var(--text-md);
  }

  .footer__brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .footer__dot {
    color: var(--line-strong);
  }

  .footer__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .footer__link {
    padding: 2px 2px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    text-decoration: none;
  }

  .footer__link:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .footer__link[aria-current="page"] {
    color: var(--text);
  }
}

/* ---- 专利分类检索 ------------------------------------------------------ */

/* 分类号统一用等宽字体：A01B1/02 里数字与斜杠的对齐靠它 */
.ipc code,
.ipc-sublist__code,
.ipc-tree__code,
.ipc-hit__code,
.ipc-detail__code,
.ipc-path__code,
.crumbs__link code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0.01em;
}

.ipc-meta {
  margin: 0;
  color: var(--text-3);
  font-size: var(--text-sm);
}

/* 三栏下方那行统计数字：贴得太近会像是三栏的一部分，需要明确地退到页脚位置 */
.ipc-footnote {
  margin-top: var(--space-6);
}

/**
 * 三栏常驻：左条件、中分类树、右详情。
 * 树与详情并排，才能一边展开一边对照着读；空间不够时按 1 栏纵向叠。
 */
.ipc-board {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr) minmax(320px, 380px);
  gap: var(--space-4);
  align-items: start;
  margin-top: var(--space-6);
}

.ipc-col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ipc-col--query {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-5);
}

/* 中栏自适应当前展开高度（收起时 8 个部紧凑贴合无底部留白，展开多层子目录时平滑伸展并在上限内滚动） */
.ipc-col--browse {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: min(640px, 75vh);
}

.ipc-col--detail {
  display: flex;
  flex-direction: column;
  min-height: 393px;
  max-height: min(640px, 75vh);
}

.ipc-pane__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.ipc-pane__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.ipc-pane__hint {
  color: var(--text-3);
  font-size: var(--text-sm);
}

.ipc-pane__body {
  flex: 1;
  overflow: auto;
  padding: var(--space-2) var(--space-3);
}

.ipc-pane__body--detail {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  padding: var(--space-5);
}

.ipc-query__actions {
  display: flex;
  gap: var(--space-2);
}

.ipc-query__actions .btn {
  flex: 1;
}

/* ---- 分类树 ---- */

.ipc-tree,
.ipc-tree__children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ipc-tree__row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  padding-left: calc(var(--depth, 0) * 14px);
}

/* 展开/收起动画：外层网格行高 0fr → 1fr，内层 overflow:hidden。
   高度由浏览器算，不管下一级是 5 行还是 500 行都能平滑过渡，
   不像 max-height 那样得先猜一个够用的数值。 */
.ipc-tree__holder {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ipc-tree__item.is-open > .ipc-tree__slot > .ipc-tree__holder {
  grid-template-rows: 1fr;
  transition: grid-template-rows 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ipc-tree__inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 160ms ease;
}

/* inner 在 holder 里面，所以这里只能用后代选择器：
   写成「slot 的直接子元素」会一条都选不中，展开后高度有了、内容却是全透明的
   —— 表现就是「动效对了，数据没了」。 */
.ipc-tree__item.is-open > .ipc-tree__slot .ipc-tree__inner {
  opacity: 1;
}

/* 子层级顶部分隔线与父节点保持一致，缩进统一由 --depth 控制，避免深层双重缩进挤压 */
.ipc-tree__children {
  margin-left: 0;
  padding-left: 0;
  border-top: 1px solid var(--line);
}

/* 三角只是视觉标记；整行交给 .ipc-tree__label 这个按钮处理点击 */
.ipc-tree__twisty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 100%;
  color: var(--text-3);
  font-size: 0.8rem;
  line-height: 1;
  user-select: none;
  transition: transform 180ms ease, color 150ms ease;
}

.ipc-tree__item.is-open > .ipc-tree__row .ipc-tree__twisty {
  transform: rotate(90deg);
}

.ipc-tree__label:hover .ipc-tree__twisty,
.ipc-tree__label.is-active .ipc-tree__twisty {
  color: var(--accent);
}

/* 一行四段：三角 / 代码 / 标题 / 右侧统计。
   标题一律不折行 —— 折了行，这一列就变成一坨，扫起来找不到节奏。
   放不下的时候用省略号收尾，鼠标悬停有 title 提示。 */
.ipc-tree__label {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  padding: 10px var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.ipc-tree__children .ipc-tree__label {
  padding: 7px var(--space-3);
}

.ipc-tree__label:hover {
  background: var(--surface-2);
}

/* 选中态**只改文字颜色**：不铺底色、不加竖线、不加描边。
   树里同时存在悬停与选中两种高亮时，一旦选中也铺色，就分不清哪个是「当前节点」。 */
.ipc-tree__label.is-active {
  background: transparent;
  box-shadow: none;
}

.ipc-tree__label.is-active .ipc-tree__code,
.ipc-tree__label.is-active .ipc-tree__title {
  color: var(--accent);
}

.ipc-tree__code {
  color: var(--text-2);
  font-weight: 600;
}

.ipc-tree__title {
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ipc-tree__meta {
  color: var(--text-3);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* ---- 详情 ---- */

.ipc-detail__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ipc-detail__code {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--accent);
}

/* 右栏只有一种字号：它是一份说明，不是一个带有层级的页面。
   做成大标题会占掉本就紧张的宽度。 */
.ipc-detail__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.6;
}

.ipc-section {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.ipc-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.ipc-section__title {
  margin: 0;
  color: var(--text-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 附注原文里有手写换行与编号，保留排版 */
.ipc-text {
  margin: 0;
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  white-space: pre-wrap;
}

.ipc-path {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 分类号路径只是「你在哪一级」的一段说明，不是控件：
   纯文字 + 两列对齐，不加底色、不加边框、不加圆角。 */
.ipc-path__item {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
  width: 100%;
  padding: var(--space-1) 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ipc-path__item:hover {
  color: var(--accent);
}

.ipc-path__code {
  color: var(--accent);
  font-weight: 600;
}

.ipc-path__title {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.5;
}

.ipc-sublist {
  display: grid;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ipc-sublist__item {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) 2.5rem;
  gap: var(--space-3);
  align-items: baseline;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.ipc-sublist__item:hover {
  background: var(--surface-2);
}

.ipc-sublist__count {
  color: var(--text-3);
  text-align: right;
}

/* ---- 检索结果（占用中栏） ---- */

.ipc-results__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-2);
}

.ipc-hits {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.ipc-hit__body {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ipc-hit__body:hover {
  border-color: var(--line-strong);
}

.ipc-hit__body.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.ipc-hit__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ipc-hit__code {
  color: var(--accent);
  font-weight: 600;
}

.ipc-hit__title {
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ipc-hit__path {
  color: var(--text-3);
  font-size: var(--text-xs);
}

.ipc-empty {
  display: grid;
  gap: var(--space-3);
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
}

.ipc-empty p {
  margin: 0;
}

@media (max-width: 1080px) {
  .ipc-board {
    grid-template-columns: 1fr;
  }

  .ipc-col--browse,
  .ipc-col--detail {
    max-height: none;
    min-height: 0;
  }

  .ipc-col--browse {
    max-height: 60vh;
  }

  .ipc-tree__label {
    grid-template-columns: 5rem minmax(0, 1fr) auto;
  }
}

@media (max-width: 620px) {
  .ipc-tree__label {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .ipc-tree__meta {
    display: none;
  }
}

/* ---- 补漏：这些 class 一直在用，但此前没有对应规则 ----
   缺规则不会报错，只会退成浏览器默认排版：按钮互相贴住、段落没有间距。
   tools/audit-classes.mjs 会把它们逐个列出来。 */

.empty {
  padding-block: var(--space-7);
}

.post-card__head {
  display: grid;
  gap: var(--space-2);
}

/* 纯语义容器，不承担视觉，只保证在网格里不被长标题撑破 */
.post-list-host,
.archive-host,
.archive {
  min-width: 0;
}

/* ---- 404 ---- */
.notfound {
  padding-block: var(--space-8);
}

.notfound__code {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--text-3);
}

.notfound__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-3xl);
}

.notfound__hint {
  margin: 0 0 var(--space-6);
  max-width: 46ch;
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---- 前台表单的提交行（联系页） ---- */
.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.form__status {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-3);
}

.form__status--ok {
  color: var(--accent);
}

.form__status--danger {
  color: var(--danger);
}

.form__status:empty,
.comment-form__status:empty {
  display: none;
}

/* ---- 评论表单的三个缺件 ---- */
.comment-form__title {
  margin: var(--space-2) 0 0;
  font-size: var(--text-lg);
}

.comment-form__body {
  min-height: 5.5rem;
  resize: vertical;
}

.comment-form__status {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-3);
}

/* ---- IPC 左栏：表单本身要撑开字段间距 ---- */
.ipc-query {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.ipc-sublist__title {
  min-width: 0;
  color: var(--text-2);
}

/* 检索结果条目与树节点的外层。父级已经把列表符号去掉了，
   这里只声明它们各自是一整块，避免被长标题撑成两行挤压。 */
.ipc-hit {
  display: block;
  min-width: 0;
}

/* 树的节点外层。每一条之间画一道极浅的分隔线：
   一行一行的数据靠横线分界，扫视时眼睛有落点，不会糊成一片。 */
.ipc-tree__item {
  min-width: 0;
}

.ipc-tree > .ipc-tree__item + .ipc-tree__item,
.ipc-tree__children > .ipc-tree__item + .ipc-tree__item {
  border-top: 1px solid var(--line);
}

/* 正文里的直接链接（如联系页的邮箱） */
.link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- 全国知识产权保护中心（三栏固定高度工作台 + 顶部可搜索下拉筛选栏） ---- */

.pc-page {
  padding-bottom: var(--space-8);
}

.pc-page__head {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.pc-page__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pc-page__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* 顶部筛选栏：位于三个竖栏顶部 */
.pc-filterbar {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.pc-filterbar__selects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: end;
}

.pc-filterbar__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
}

.pc-filterbar__search {
  flex: 1 1 280px;
  max-width: 480px;
}

.pc-filterbar__keyword {
  width: 100%;
  height: 36px;
  font-size: var(--text-sm);
}

.pc-filterbar__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.pc-filterbar__summary {
  font-size: var(--text-sm);
  color: var(--text-2);
  font-weight: var(--weight-medium);
}

.pc-filterbar__reset {
  color: var(--accent);
}

/* 三个自定义下拉框：省市 / 产业领域 / IPC分类 */
.pc-select {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.pc-select__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-2);
  letter-spacing: 0.02em;
}

.pc-select__control {
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

.pc-select__trigger {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.pc-select__trigger:hover {
  border-color: var(--accent);
  background: var(--surface);
}

.pc-select--open .pc-select__trigger,
.pc-select--selected .pc-select__trigger {
  border-color: var(--accent);
  background: var(--surface);
}

.pc-select--selected .pc-select__trigger {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: var(--weight-medium);
}

.pc-select__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-select__arrow {
  flex-shrink: 0;
  color: var(--text-3);
  font-size: 12px;
  margin-right: 2px;
  transition: transform var(--dur-fast) var(--ease);
}

.pc-select--open .pc-select__arrow {
  transform: rotate(180deg);
  color: var(--accent);
}

.pc-select__clear {
  flex-shrink: 0;
  height: 38px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease);
}

.pc-select__clear:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

.pc-select__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 260px;
  z-index: 45;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pc-select__menu[hidden] {
  display: none;
}

.pc-select__search-wrap {
  padding: 8px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.pc-select__search {
  width: 100%;
  height: 34px;
  font-size: var(--text-sm);
  background: var(--surface);
}

.pc-select__list {
  list-style: none;
  margin: 0;
  padding: 4px;
  max-height: 270px;
  overflow-y: auto;
}

.pc-select__item {
  margin: 0;
  padding: 0;
}

.pc-select__option {
  width: 100%;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.pc-select__option:hover {
  background: var(--surface-2);
}

.pc-select__option--active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: var(--weight-medium);
}

.pc-select__opt-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-select__opt-main--ipc {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pc-select__opt-code {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  color: var(--accent);
  flex-shrink: 0;
}

.pc-select__opt-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
  font-size: var(--text-xs);
}

.pc-select__opt-badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  background: var(--bg);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
}

.pc-select__empty {
  padding: var(--space-4) var(--space-3);
  text-align: center;
  color: var(--text-3);
  font-size: var(--text-xs);
}

/* ---- 三栏主画布：左右固定高度并内部垂直滚动，中间为全国地图分布 ---- */
.pc-board {
  display: grid;
  grid-template-columns: 300px minmax(360px, 1fr) minmax(350px, 420px);
  gap: var(--space-4);
  align-items: stretch;
  margin-top: var(--space-4);
}

.pc-col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 680px;
  max-height: 76vh;
  min-height: 520px;
  box-shadow: var(--shadow-sm);
}

.pc-col--list,
.pc-col--table {
  /* 左右两边高度严格固定，内容采用内部滚动式显示 */
  height: 680px;
  max-height: 76vh;
}

.pc-col--map {
  height: 680px;
  max-height: 76vh;
}

.pc-pane__head {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.pc-pane__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.pc-pane__hint {
  font-size: var(--text-xs);
  color: var(--text-3);
}

.pc-pane__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* 左栏：保护中心名录列表 */
.pc-list {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pc-card {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.pc-card:hover {
  border-color: var(--line-strong);
  background: var(--surface);
}

.pc-card--active {
  border-color: var(--accent);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
}

.pc-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.pc-card__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
  line-height: 1.35;
}

.pc-card--active .pc-card__name {
  color: var(--accent);
}

.pc-card__count {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  background: var(--surface);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
}

.pc-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-3);
}

.pc-card__loc {
  color: var(--text-2);
}

.pc-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.pc-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--radius-xs);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.5;
}

.pc-tag--interactive {
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}

.pc-tag--interactive:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.pc-tag--active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* 中栏：全国地图分布 */
.pc-map-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-3);
  background: radial-gradient(circle at 50% 45%, var(--surface) 0%, var(--bg) 100%);
  position: relative;
}

.pc-map__svg {
  width: 100%;
  flex: 1;
  min-height: 0;
  max-height: 540px;
  display: block;
  user-select: none;
}

.pc-map__provinces {
  stroke-linejoin: round;
}

.pc-map__prov {
  fill: #f2ece1;
  stroke: #cbbca4;
  stroke-width: 1;
  cursor: pointer;
  transition: fill var(--dur-fast) var(--ease), stroke var(--dur-fast) var(--ease);
}

[data-theme="dark"] .pc-map__prov {
  fill: #26221d;
  stroke: #463e34;
}

.pc-map__prov[data-density="1"] {
  fill: #eddcc4;
}

.pc-map__prov[data-density="2"] {
  fill: #e3c49d;
}

.pc-map__prov[data-density="3"] {
  fill: #d6a671;
}

.pc-map__prov[data-density="4"] {
  fill: #c68647;
}

[data-theme="dark"] .pc-map__prov[data-density="1"] {
  fill: #3a2d21;
}

[data-theme="dark"] .pc-map__prov[data-density="2"] {
  fill: #4f3924;
}

[data-theme="dark"] .pc-map__prov[data-density="3"] {
  fill: #684626;
}

[data-theme="dark"] .pc-map__prov[data-density="4"] {
  fill: #825429;
}

.pc-map__prov:hover {
  fill: #d89b62;
  stroke: var(--accent);
  stroke-width: 1.5;
}

.pc-map__prov--selected {
  stroke: var(--accent);
  stroke-width: 2;
  fill: #d5894b !important;
}

.pc-map__labels {
  pointer-events: none;
}

.pc-map__label {
  font-size: 10px;
  fill: #574a3b;
  font-weight: 500;
}

[data-theme="dark"] .pc-map__label {
  fill: #c9bfb2;
}

.pc-map__label--active {
  fill: #4a1c03;
  font-weight: 700;
  font-size: 11px;
}

[data-theme="dark"] .pc-map__label--active {
  fill: #fff6ec;
}

.pc-map__scs {
  pointer-events: none;
}

.pc-map__scs-frame {
  fill: rgb(251 248 243 / 0.85);
  stroke: #cbbca4;
  stroke-width: 1;
}

[data-theme="dark"] .pc-map__scs-frame {
  fill: rgb(30 26 22 / 0.85);
  stroke: #463e34;
}

.pc-map__scs-lines {
  stroke: #9a4412;
  stroke-width: 1.2;
  fill: none;
  stroke-dasharray: 4 3;
}

.pc-map__scs-dot {
  fill: #c68647;
}

.pc-map__scs-label {
  font-size: 9px;
  fill: var(--text-3);
}

.pc-map__pins {
  cursor: pointer;
}

.pc-map__pin {
  cursor: pointer;
}

.pc-map__pin-dot {
  fill: #9a4412;
  stroke: #fffdf9;
  stroke-width: 1.4;
  transition: r var(--dur-fast) var(--ease), fill var(--dur-fast) var(--ease);
}

.pc-map__pin:hover .pc-map__pin-dot {
  r: 6;
  fill: #7c2d12;
}

.pc-map__pin--active .pc-map__pin-dot {
  fill: #7c2d12;
  stroke: #fffdf9;
  stroke-width: 2;
}

.pc-map__pin-halo {
  fill: rgb(154 68 18 / 0.24);
  stroke: rgb(154 68 18 / 0.55);
  stroke-width: 1.2;
  animation: pc-pulse 1.8s ease-out infinite;
}

@keyframes pc-pulse {
  0% {
    opacity: 0.9;
    transform: scale(0.75);
  }
  100% {
    opacity: 0.15;
    transform: scale(1.35);
  }
}

.pc-map__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.pc-map__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xs);
  color: var(--text-3);
}

.pc-map__legend-title {
  font-weight: var(--weight-medium);
  color: var(--text-2);
}

.pc-map__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pc-map__swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgb(0 0 0 / 0.12);
}

.pc-map__swatch--1 { background: #eddcc4; }
.pc-map__swatch--2 { background: #e3c49d; }
.pc-map__swatch--3 { background: #d6a671; }
.pc-map__swatch--4 { background: #c68647; }

.pc-map__active-banner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
}

.pc-map__active-name {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

.pc-map__active-meta {
  color: var(--text-2);
}

/* 右栏：选中保护中心的预审领域与 IPC 分类号表 */
.pc-detail-head {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pc-detail-head__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.pc-detail-head__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
}

.pc-detail-head__badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: var(--weight-medium);
}

.pc-detail-head__sub {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-3);
}

.pc-detail-head__meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-xs);
  line-height: 20px;
}

.pc-detail-head__loc {
  height: 20px;
  line-height: 20px;
  flex-shrink: 0;
  color: var(--text-2);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.pc-detail-head__tags {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  height: 20px;
  min-width: 0;
  overflow: hidden;
  flex: 0 1 auto;
}

/* 详情头部的产业标签与定位、日期同一行，统一 20px 行高 */
.pc-detail-head__tags .pc-tag {
  height: 18px;
  padding: 0 8px;
  line-height: 16px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.pc-detail-search {
  flex-shrink: 0;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.pc-detail-search__input {
  width: 100%;
  height: 32px;
  font-size: var(--text-xs);
}

.pc-table-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
}

.pc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.pc-table__head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  box-shadow: 0 1px 0 var(--line);
}

.pc-table__th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  padding: 9px 10px;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--line);
  white-space: nowrap;
}

.pc-table__th--num {
  width: 52px;
  text-align: center;
}

.pc-table__th--code {
  width: 92px;
}

.pc-table__th--desc {
  width: auto;
}

.pc-table__row {
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur-fast) var(--ease);
}

.pc-table__row:hover {
  background: var(--bg);
}

.pc-table__row--highlight {
  background: var(--accent-soft);
}

.pc-table__cell {
  padding: 9px 10px;
  vertical-align: top;
  line-height: 1.45;
}

.pc-table__cell--num {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
}

.pc-table__cell--code {
  white-space: nowrap;
}

.pc-table__cell--desc {
  color: var(--text-2);
  font-size: var(--text-xs);
}

.pc-ipc-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--accent);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}

.pc-ipc-badge:hover,
.pc-ipc-badge--active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.pc-empty {
  padding: var(--space-7) var(--space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.pc-footnote {
  margin-top: var(--space-5);
  color: var(--text-3);
  font-size: var(--text-xs);
}

@media (max-width: 1120px) {
  .pc-board {
    grid-template-columns: 1fr;
  }

  .pc-col,
  .pc-col--list,
  .pc-col--map,
  .pc-col--table {
    height: 520px;
    max-height: none;
  }
}

@media (max-width: 780px) {
  .pc-filterbar__selects {
    grid-template-columns: 1fr;
  }
}

.page-head__lead {
  margin: 0;
  color: var(--text-3);
  font-size: var(--text-sm);
}

/* 数据更新日期：贴在产业标签右侧，不参与换行挤压 */
.pc-detail-head__updated {
  margin-left: auto;
  flex-shrink: 0;
  height: 20px;
  line-height: 20px;
  color: var(--text-3);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* 标题链接到官方发布预审分类号的页面，视觉保持原样，仅悬停时出现下划线 */
.pc-detail-head__title-link {
  color: inherit;
  text-decoration: none;
}

.pc-detail-head__title-link:hover,
.pc-detail-head__title-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* 中栏地图：滚轮缩放、拖动平移 */
.pc-map-stage {
  cursor: grab;
  touch-action: none;
}

.pc-map-stage.pc-map--dragging {
  cursor: grabbing;
}

/* ---- 每日知产早报 ---- */
@layer components {
  .brief-layout {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }

  .brief-rail {
    position: sticky;
    top: var(--space-6);
  }

  .brief-rail__eyebrow {
    margin-bottom: var(--space-3);
    color: var(--text-3);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
  }

  .brief-rail__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .brief-rail__btn {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: none;
    color: var(--text-2);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .brief-rail__btn:hover {
    background: var(--surface-2);
    color: var(--text);
  }

  .brief-rail__btn--active {
    border-left-color: var(--accent);
    background: var(--surface-2);
    color: var(--text);
  }

  .brief-rail__date {
    font-variant-numeric: tabular-nums;
  }

  .brief-rail__meta {
    color: var(--text-3);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
  }

  .brief-day__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--space-5);
  }

  .brief-day__title {
    font-size: var(--text-2xl);
  }

  .brief-day__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-3);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
  }

  .brief-day__dot {
    color: var(--line-strong);
  }

  .brief-day__intro {
    max-width: var(--measure);
    margin-bottom: var(--space-5);
    color: var(--text-2);
    font-size: var(--text-md);
  }

  .brief-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .brief-item {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: var(--space-3);
  }

  .brief-item__index {
    padding-top: 0.15rem;
    color: var(--text-3);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
  }

  .brief-item__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
  }

  .brief-item__title {
    color: var(--text);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: var(--lh-snug);
    text-decoration: none;
  }

  a.brief-item__title:hover,
  a.brief-item__title:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }

  .brief-item__source {
    color: var(--text-3);
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  .brief-item__summary {
    margin-top: var(--space-1);
    color: var(--text-2);
    font-size: var(--text-sm);
    line-height: var(--lh-relaxed);
  }

  .brief-day__nav {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-7);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
  }

  /* 后台：一期早报的标题/导语与手工补条目 */
  .brief-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 46rem;
  }

  .brief-form .field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .brief-form__actions {
    display: flex;
    justify-content: flex-end;
  }

  .admin-panel__title {
    margin-bottom: var(--space-4);
    font-size: var(--text-md);
  }

  .admin-panel__danger {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-5);
  }

  @media (max-width: 760px) {
    .brief-layout {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-5);
    }

    .brief-rail {
      position: static;
    }

    .brief-rail__list {
      flex-direction: row;
      overflow-x: auto;
      padding-bottom: var(--space-2);
    }

    .brief-rail__btn {
      border-left: 0;
      border-bottom: 2px solid transparent;
      border-radius: var(--radius-sm) var(--radius-sm) 0 0;
      white-space: nowrap;
    }

    .brief-rail__btn--active {
      border-bottom-color: var(--accent);
    }
  }
}

/* ---- admin.css ---- */
/* 后台样式：与前台同一套令牌，但排版更密、更偏工具。
   这里没有任何视觉奇观 —— 后台只需要把信息摆清楚，打字不累。 */

.admin {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  padding-block: var(--space-6) var(--space-8);
}

.admin-aside {
  position: sticky;
  top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.admin-aside__eyebrow {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-nav__link {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.admin-nav__link:hover {
  background: var(--surface-2);
  color: var(--text);
}

.admin-nav__link--active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: var(--weight-medium);
}

.admin-aside__foot {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.admin-aside__back {
  font-size: var(--text-sm);
  color: var(--text-3);
  text-decoration: none;
}

.admin-aside__back:hover {
  color: var(--accent);
}

.admin-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.admin-topbar__user {
  font-size: var(--text-sm);
  color: var(--text-2);
}

.admin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.admin-head__title {
  margin: 0;
  font-size: var(--text-2xl);
  font-family: var(--font-serif);
}

.admin-head__desc {
  margin: var(--space-1) 0 0;
  color: var(--text-3);
  font-size: var(--text-sm);
}

.admin-head__action {
  display: flex;
  gap: var(--space-2);
}

.admin-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--line);
}

.admin-tabs__item {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.admin-tabs__item:hover {
  color: var(--text);
}

.admin-tabs__item--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.admin-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.admin-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

/* 表格：横向滚动而不是挤成一团 */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.admin-table th {
  text-align: left;
  font-weight: var(--weight-medium);
  color: var(--text-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.admin-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-table tbody tr:hover {
  background: var(--surface-2);
}

.admin-table .num {
  text-align: right;
  white-space: nowrap;
}

.admin-table__title a {
  color: var(--text);
  text-decoration: none;
  font-weight: var(--weight-medium);
}

.admin-table__title a:hover {
  color: var(--accent);
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: flex-end;
}

.admin-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.admin-card__who {
  font-weight: var(--weight-semibold);
}

.admin-card__body {
  margin: 0;
  color: var(--text-2);
  white-space: pre-wrap;
}

/* 登录 / 首次建号 */
.admin-login {
  display: flex;
  justify-content: center;
  padding-block: var(--space-7);
}

.admin-login__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}

.admin-login__eyebrow {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
}

.admin-login__title {
  margin: 0;
  font-size: var(--text-xl);
  font-family: var(--font-serif);
}

.admin-login__hint {
  margin: 0;
}

/* 编辑器：两栏，窄屏叠成一栏 */
.editor-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.field--inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

.field__hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--text-3);
}

/* 元信息收尾：提示、置顶、状态挤在同一行（这三样加起来才半行宽） */
.field-row--meta {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.field-row--meta .field__hint {
  margin: 0;
}

.field-row--meta .field--inline {
  padding-top: 0;
}

@media (max-width: 720px) {
  .field-row--meta {
    grid-template-columns: minmax(0, 1fr);
  }
}

.input--area {
  height: auto;
  min-height: 88px;
  padding-block: var(--space-2);
  resize: vertical;
  line-height: var(--lh-normal);
}

.input--sm {
  width: auto;
  height: 32px;
  padding: 2px var(--space-3);
  font-size: var(--text-xs);
}

/* 正文工作区：工具栏在上、可编辑正文居中、字数统计在下，合成一张「稿纸」 */
.editor-sheet {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: clamp(520px, calc(100vh - 320px), 900px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* 编辑中把边框点亮，视线不会跑丢 */
.editor-sheet:focus-within {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* 滚动的只有正文这一层，工具栏与页脚始终可见。
   position:relative 是给「选中图片的边框 + 拖拽手柄」当定位基准的。 */
.editor-sheet__body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--space-5);
}

.editor-sheet__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.editor-sheet__hint {
  font-size: var(--text-xs);
  color: var(--text-3);
}

/* 可编辑正文本身：排版全部来自 .prose，这里只管「撑满高度 + 与前台同宽」 */
.editor-input {
  min-height: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  outline: none;
  cursor: text;
  /* 保留连续空格与首行缩进（浏览器默认会把行首空格吞掉） */
  white-space: pre-wrap;
}

/* 前台文章会给图片加细边框与圆角（.article__body img），编辑器要对齐这个效果 */
.editor-input img {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

/* 选中图片时盖在图片上的边框：只画框，不吃鼠标事件（事件留给图片本身） */
.editor-image-frame {
  position: absolute;
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/* 右下角的缩放手柄：它是唯一能接收指针事件的部件 */
.editor-image-handle {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--surface);
  border-radius: 3px;
  background: var(--accent);
  cursor: nwse-resize;
  pointer-events: auto;
}

/* 空正文时的提示文字：用伪元素，不占正文内容 */
.editor-input:empty::before {
  content: attr(data-placeholder);
  color: var(--text-3);
}

/* 工具栏里的「已生效」状态：粗体开着时按钮要看得出来 */
.editor-toolbar__btn[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* 文字格式工具栏：按钮不抢焦点，点完仍然能接着在正文里选中文字 */
.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.editor-toolbar[hidden] {
  display: none;
}

.editor-toolbar__btn {
  min-width: 28px;
  padding: 3px 6px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-2);
  font-size: var(--text-xs);
  line-height: 1.4;
  cursor: pointer;
}

.editor-toolbar__btn:hover {
  background: var(--surface);
  color: var(--text);
}

.editor-toolbar__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* 工具栏分组之间的竖线，把「文字 / 段落 / 对齐 / 插入」视觉上分开 */
.editor-toolbar__sep {
  align-self: stretch;
  width: 1px;
  margin: 2px 3px;
  background: var(--line);
}

/* 字号下拉：比按钮窄一点，和按钮同一行 */
.editor-toolbar__select {
  padding: 2px var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--text-xs);
  cursor: pointer;
}

.editor-toolbar__select:hover {
  color: var(--text);
}

/* 状态徽章：只读，跟着文章真实状态走，不让人手选 */
.editor-status {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
}

.editor-status--draft {
  background: var(--surface-2);
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

.editor-status--published {
  background: var(--success-soft);
  color: var(--success);
}

.editor-stats {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-3);
}

.btn--block {
  width: 100%;
  justify-content: center;
}

.btn--danger-ghost {
  color: var(--danger);
  border-color: transparent;
  background: transparent;
}

.btn--danger-ghost:hover {
  background: var(--danger-soft);
}

.badge--ok {
  color: var(--success);
  background: var(--success-soft);
}

@media (max-width: 900px) {
  .admin {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-aside {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .admin-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .admin-aside__foot {
    border-top: none;
    padding-top: 0;
  }

  .editor-sheet {
    height: auto;
  }

  .editor-sheet__body {
    min-height: 420px;
  }
}

/* 设置页里的分块标题与说明 */
.settings-panel__title {
  margin: 0;
  font-size: var(--text-lg);
  font-family: var(--font-serif);
}

.settings-panel__hint {
  margin: var(--space-1) 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-3);
}

/* ---- 补漏：这些 class 一直在用，但此前没有对应规则 ----
   没有规则不会报错，只会退成浏览器默认排版。tools/audit-classes.mjs 会列出来。 */

/* 主区里承载页面内容的容器：自己也是一列，块与块之间要有固定间距 */
.admin-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

/* 标题与说明上下成组，而不是各自顶着一个默认外边距 */
.admin-head__text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

/* 浏览器原生复选框：不换皮，只把它和后面的标签对齐 */
.check {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--accent);
}



/* 编辑器表格弹窗内的快捷操作网格 */
.table-dialog__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.table-dialog__ops {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}