/* 门禁诊断字体由 R2 托管，包含自绘韩文 위 / 치。 */
@font-face {
  font-family: 'Maple Mono NF CN';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.limooo.cn/maple-mono-nf-cn-regular-subset.woff2') format('woff2');
}

/* 页面其余字体继续沿用模板中的字体配置。 */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* 颜色/圆角/缓动等基础令牌统一来自 tokens.css（全站单一事实源），
     本页只补充门禁页独有、主站没有的几个变量。
     曾经这里复制了一整份色板，改主站主题时会漏改本页导致漂移。 */
  :root {
    color-scheme: dark;
    /* 门禁页专属：页面渐变背景与诊断区配色 */
    --bg-a: #17181c; --bg-b: #101114;
    --muted: #9ca3af;
    --panel: #202127;
    --foot: #E7EBCE;
  }
  .light-mode {
    color-scheme: light;
    --bg-a: #f3f4f6; --bg-b: #e5e7eb;
    --muted: #6b7280;
    --panel: #ffffff;
    --foot: #9ca3af;
  }
  body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    /* 与主站底色一致（纯色，深色 #1b1b1f / 浅色 #ffffff） */
    background: var(--bg);
    color: var(--text);
    display: flex; align-items: center; justify-content: center;
    min-height: 100dvh;
    min-height: 100vh;
    padding: 24px;
    -webkit-font-smoothing: antialiased;
    transition: background 300ms var(--ease-out);
  }
  /* 右上角控件组（语言切换 + 深浅切换，样式与主站导航栏一致） */
  .gate-controls {
    position: fixed; top: 18px; right: 18px; z-index: 10;
    display: flex; align-items: center; gap: 8px;
  }
  /* ── 语言切换按钮（与主站一致：文A 图标 + 下箭头） ── */
  .theme-toggle { position: relative; display: flex; align-items: center; }
  .lang-btn {
    display: flex; align-items: center;
    padding: 0 12px; height: 36px;
    border: none; background: none; cursor: pointer;
    color: var(--text);
    transition: color 200ms var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .lang-btn:hover { color: var(--accent); }
  }
  .lang-btn .lang-icon { width: 16px; height: 16px; }
  .lang-btn .lang-chevron { width: 14px; height: 14px; margin-left: 4px; opacity: 0.6; }
  /* ── 语言菜单（与主站一致：VitePress VPFlyout 弹出层） ── */
  .theme-menu {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 120px;
    background: var(--panel-bg); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 4px; z-index: 200;
    opacity: 0; visibility: hidden;
    transform: translateY(-4px) scale(0.92);
    transform-origin: top right;
    transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 150ms;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
  }
  .theme-menu.open {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  }
  .theme-option {
    padding: 8px 14px; margin: 2px 0; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600;
    letter-spacing: calc(0.05em * var(--ls-scale)); cursor: pointer; white-space: nowrap;
    transition: background 150ms var(--ease-out);
    opacity: 0.5;
  }
  .lang-flag { margin-right: 6px; }
  .theme-option.selected {
    opacity: 1; background: var(--highlight);
  }
  @media (hover: hover) and (pointer: fine) {
    .theme-option:hover { opacity: 1; background: var(--highlight); }
  }
  /* ── 深浅切换（与主站一致：太阳-月亮胶囊滑块） ── */
  .appearance-switch {
    position: relative; border-radius: 11px; display: block;
    width: 40px; height: 22px; flex-shrink: 0;
    border: 1px solid var(--line);
    background: var(--highlight);
    cursor: pointer; padding: 0;
    transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .appearance-switch:hover { border-color: var(--accent); }
  }
  .appearance-check {
    position: absolute; top: 1px; left: 1px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--bg);
    box-shadow: var(--switch-shadow);
    transform: translateX(18px); /* 默认深色：滑块在右 */
    transition: transform 250ms var(--ease-out);
  }
  .appearance-icon {
    position: relative; display: block; width: 18px; height: 18px;
    border-radius: 50%; overflow: hidden;
  }
  .appearance-icon svg {
    position: absolute; top: 3px; left: 3px; width: 12px; height: 12px;
    color: var(--switch-icon);
    transition: opacity 250ms var(--ease-out);
  }
  /* 默认（深色）：月亮可见；浅色：太阳可见 */
  .appearance-icon .sun { opacity: 0; }
  .appearance-icon .moon { opacity: 1; }
  .light-mode .appearance-icon .sun { opacity: 1; }
  .light-mode .appearance-icon .moon { opacity: 0; }
  .light-mode .appearance-check { transform: translateX(0); }
  .card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    max-width: 512px;
    width: 100%;
    padding: 33px 32px 23px;
    transition: background 300ms var(--ease-out), border-color 300ms var(--ease-out);
  }
  .logo { display: block; margin: 0 auto 22px; max-width: 220px; height: auto; }
  h1 {
    font-size: 17px; font-weight: 600; text-align: center;
    color: var(--text); line-height: 1.5; margin-bottom: 24px;
  }
  .turnstile-wrap { display: flex; justify-content: center; min-height: 65px; margin-bottom: 26px; }
  .error {
    background: rgba(185, 28, 28, 0.12); border: 1px solid rgba(185, 28, 28, 0.4);
    color: var(--text);
    border-radius: 6px; padding: 10px 14px; font-size: 13px;
    margin-bottom: 18px; text-align: center;
  }
  .error.blocked { font-size: 15px; font-weight: 700; }
  /* 失败后的显式重试入口：用户点击才重新求解，避免 Turnstile 自动重试死循环 */
  .gate-retry {
    display: block; margin: 0 auto 18px; padding: 9px 26px;
    font: inherit; font-size: 14px; font-weight: 600;
    color: #fff; background: var(--accent, #05A5A6);
    border: none; border-radius: 6px; cursor: pointer;
  }
  .gate-retry:hover { filter: brightness(1.08); }
  .gate-retry[hidden] { display: none; }
  .blocked-detail { margin: -8px 0 18px; text-align: center; font-size: 13px; color: var(--muted); }
  .divider { border: none; border-top: 1px solid var(--line); margin: 0 0 16px; }
  .diag {
    font-family: 'Maple Mono NF CN', ui-monospace, 'SF Mono', monospace;
    display: block;
    font-size: 12.5px; color: var(--text); margin-bottom: 20px;
  }
  .diag dt {
    color: var(--muted);
    margin-top: 8px;
  }
  .diag dt::after { content: ":"; }
  .diag dd { overflow-wrap: anywhere; margin: 0 0 4px; }
  body[data-gate-error="blocked"] #diag-location-label,
  body[data-gate-error="blocked"] #diag-country,
  body[data-gate-error="blocked"] #gate { display: none; }
  .foot { text-align: center; font-size: 11px; color: var(--foot); }
  .foot .brand-word {
    font-family: 'Baloo 2', ui-rounded, system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size-adjust: 0.6552;
  }
  /* ── 底部版权（与主站 base.html 一致） ── */
  .global-footer {
    position: fixed; bottom: 0; left: 0; width: 100%; z-index: 90;
    border-top: 1px solid var(--footer-border);
    background-color: var(--bg) !important;
    display: flex; align-items: center; justify-content: center;
  }
  .footer-link {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    padding: 1.25rem 0;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
    color: inherit; text-decoration: none;
  }
    .footer-text {
        display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
        /* 行间留缝：折行后两行不贴死；单行时对总高无影响 */
        row-gap: 0.45em;
        column-gap: 0;
        /* 窄屏左右留安全边距，避免文字顶到屏幕边缘 */
        padding-inline: 1rem;
        font-size: 10px !important; font-weight: 600;
        letter-spacing: calc(0.15em*var(--ls-scale)); opacity: 0.5; text-align: center; line-height: 1;
    }
    /* 语义块内部不截断；块之间由 "·" 分隔，整体水平居中 */
    .footer-text > span, .footer-text > a { white-space: nowrap; }
    /* 分隔符 "·" 画在语义块自己的 ::before 上，属于该块，
       折行时跟着自己的内容走，不会落单。
       （inline-block 而非 inline-flex：flex 会吃掉子元素间的空格，
         "© 2026 Limooo Studio" 会粘成 "© 2026LimoooStudio"。） */
    .footer-text > .footer-item { display: inline-block; }
    .footer-text > .footer-item:not(:first-child)::before {
        content: "·"; margin: 0 0.55em; opacity: 0.7;
    }
    /* ── 移动端：固定两行 ──
       第一行只放版权，其余三段整体在第二行。
       让版权块自己占满一整行（flex-basis:100%），后者被挤到下一行。
       注意不能用 ::after 造换行——伪元素在 flex item 内部，
       管不到父 flex 容器的换行。 */
    @media (max-width: 559px) {
        .footer-text > .footer-copyright { flex-basis: 100%; }
        /* 换行处不需要 "·"：第二行行首的「保留所有权利」前不能带点 */
        .footer-text > .footer-copyright + .footer-item::before { content: none; }
    }
  .footer-brand {
    font-family: 'Baloo 2', ui-rounded, system-ui, sans-serif;
    font-weight: 700; letter-spacing: 0.02em;
    /* 品牌字比正文大 1.2 倍：0.546 × 1.2 = 0.6552，按 x-height 动态计算 */
    font-size: 10px;
    font-size-adjust: 0.6552;
  }
  .footer-source-link { color: inherit; text-decoration: underline; white-space: nowrap; }
  /* 旧文案给英文补空格的补丁已删除：新文案由 "·" 统一提供间距，
     保留它会让英文的 "·" 后间距比其他语言宽 3px。 */
  /* 页脚在移动端（触屏设备）同样显示 */