/* components.css — 通用控件：按钮 / 徽章 / 卡片 / 帖子 / 分页 / 模态 / 灯箱 / 上传器 / 表单 */

  /* ---------------- 通用控件 ---------------- */
  /* 明暗切换：从点击处扩散的圆形揭示（View Transitions API）
     ⚠️ old/new 两张快照默认各自淡入淡出，会互相干扰；这里关掉默认动画，
        只让"新快照"以圆心扩散的 clip-path 出现，形成"从点击处铺满全屏"的效果。 */
  @supports (view-transition-name: root) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
    ::view-transition-old(root) { z-index: 1; }
    /* ★扩散动画必须【直接】挂在伪元素上。
       写成 `html[data-revealing] ::view-transition-new(root)`（带空格=后代选择器）不会生效 ——
       视图过渡的伪元素树不在 html 的后代匹配范围里；而上面又把默认动画关成了 none，
       结果就是"既无默认淡入、又无扩散"= 完全无动效。
       这里不加祖先限定：该伪元素只在视图过渡期间存在，不会误伤其它场景。 */
    ::view-transition-new(root) {
      z-index: 2;
      animation: sr-theme-reveal .52s cubic-bezier(.22,.61,.36,1) both;
    }
    @keyframes sr-theme-reveal {
      from { clip-path: circle(0px at var(--reveal-x, 50%) var(--reveal-y, 0)); }
      to   { clip-path: circle(var(--reveal-r, 150vmax) at var(--reveal-x, 50%) var(--reveal-y, 0)); }
    }
  }
  /* 小按钮 / 侧栏项 / 主题卡片：同样给按下反馈，全站手感一致 */
  .btn-xs:active { transform: scale(.93); transition-duration: .05s; }
  .nav-item { transition: background .16s ease, color .16s ease, transform .09s cubic-bezier(.2,.7,.3,1); }
  .nav-item:active { transform: scale(.97); }
  .skin-opt:active .skin-card { transform: scale(.97); }
  .skin-card { transition: transform .09s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s ease; }
  /* 键盘可访问：明确的聚焦环 */
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* 关于动效偏好：这里**故意不再**跟随系统的 prefers-reduced-motion。
     原因：Windows 关闭"动画效果"、或在远程桌面会话里，该媒体查询为 reduce，
     会让全站的过渡/按下反馈/展开动画被静默压成 0.01ms —— 表现为"什么动效都没有"。
     改由站内偏好控制：localStorage `sr_motion`（"0" = 关闭全部动效，默认开）。
     需要无障碍支持的用户可在个人设置里关掉（相关逻辑见 ui/theme.js 的 motionOn()）。 */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 16px; border: 1px solid var(--border-2);
    border-radius: var(--radius-s); background: var(--bg-surface); color: var(--text-primary);
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background .16s ease, border-color .16s ease,
                transform .09s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease, filter .12s ease;
    white-space: nowrap;
  }
  .btn:hover { background: var(--bg-hover); border-color: var(--border-3); transform: translateY(-1px); }
  /* 按下：位移 + 缩放 + 变暗 + 内阴影（按下"陷进去"的实感）；进入更快、回弹更慢 */
  .btn:active {
    transform: translateY(1px) scale(.96);
    background: var(--bg-active); border-color: var(--border-3);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .16);
    filter: brightness(.95);
    transition-duration: .05s;
  }
  .btn:disabled { opacity: .5; cursor: not-allowed; }
  .btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 18px; border: 1px solid var(--accent); border-radius: var(--radius-s);
    background: var(--accent); color: var(--accent-fg); font-size: 13px; font-weight: 600;
    cursor: pointer; position: relative; overflow: hidden;
    transition: background .18s ease, transform .09s cubic-bezier(.2,.7,.3,1),
                box-shadow .18s ease, filter .12s ease;
  }
  .btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-2); transform: translateY(-1px); filter: brightness(1.06); }
  /* 主按钮按下：加一圈聚焦色光环 + 内阴影，反馈最强 */
  .btn-primary:active {
    transform: translateY(1px) scale(.96);
    filter: brightness(.9) saturate(1.08);
    box-shadow: 0 0 0 3px var(--focus-ring), inset 0 2px 8px rgba(0, 0, 0, .22);
    transition-duration: .05s;
  }
  .btn-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
  .btn-primary::after {
    content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
    transform: skewX(-18deg);
  }
  .btn-primary:not(:disabled):hover::after { animation: sheen .9s cubic-bezier(.22, 1, .36, 1); }
  [data-theme="dark"] .btn-primary::after { background: linear-gradient(100deg, transparent, rgba(0, 0, 0, .14), transparent); }
  /* 用 transform 位移代替 left，走合成层不触发重排 */
  @keyframes sheen { from { transform: skewX(-18deg) translateX(0); } to { transform: skewX(-18deg) translateX(480%); } }
  .btn-danger { color: #d9534f; }
  .btn-danger:hover { background: rgba(217, 83, 79, .1); border-color: rgba(217, 83, 79, .4); color: #d9534f; }
  .icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 1px solid transparent; border-radius: 7px;
    background: transparent; color: var(--text-tertiary); cursor: pointer;
    transition: background .15s ease, color .15s ease;
  }
  .icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
  .icon-btn.danger:hover { background: rgba(217, 83, 79, .12); color: #d9534f; }

  /* 身份徽章 */
  .id-badge {
    display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
    padding: 1px 8px 1px 4px; border-radius: 999px; border: 1px solid var(--border-2);
    background: var(--bg-subtle); color: var(--text-secondary); vertical-align: middle;
  }
  .id-badge.owner { color: var(--gold); border-color: rgba(201, 154, 46, .4); background: rgba(201, 154, 46, .08); }
  .id-badge.admin { color: var(--sakura); border-color: rgba(242, 84, 125, .35); background: rgba(242, 84, 125, .08); }
  /* 论坛 */
  .composer {
    background: var(--bg-surface); border: 1px solid var(--border-2);
    border-radius: var(--radius-m); padding: 16px; margin-bottom: 20px; box-shadow: var(--shadow-1);
    transition: box-shadow .2s ease, border-color .2s ease;
  }
  .composer:focus-within { box-shadow: var(--shadow-2); border-color: var(--border-3); }
  .composer input[type="text"], .composer textarea, .comment-box textarea {
    width: 100%; border: 1px solid var(--border-2); border-radius: var(--radius-s);
    padding: 11px 14px; font-size: 14px; color: var(--text-primary); outline: none;
    background: var(--bg-page); resize: vertical;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .composer input[type="text"]::placeholder, .composer textarea::placeholder, .comment-box textarea::placeholder { color: var(--text-caption); }
  .composer input[type="text"]:focus, .composer textarea:focus, .comment-box textarea:focus {
    border-color: var(--text-tertiary); box-shadow: 0 0 0 3px var(--focus-ring); background: var(--bg-surface);
  }
  .composer input[type="text"] { height: 40px; margin-bottom: 10px; }
  .composer textarea { min-height: 110px; margin-bottom: 12px; line-height: 1.6; }
  .composer .row { display: flex; justify-content: space-between; align-items: center; }
  .counter { font-size: 12px; color: var(--text-caption); font-variant-numeric: tabular-nums; }
  .zone-tip {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
    color: var(--gold); background: rgba(201, 154, 46, .08); border: 1px solid rgba(201, 154, 46, .3);
    padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
  }
  .post-list { display: flex; flex-direction: column; gap: 10px; }
  .post {
    background: var(--bg-surface); border: 1px solid var(--border-2);
    border-radius: var(--radius-m); padding: 16px 18px; cursor: pointer;
    transition: box-shadow .2s ease, border-color .2s ease, transform .15s ease;
    animation: pageIn .3s ease both;
  }
  .post:hover { box-shadow: var(--shadow-2); border-color: var(--border-3); transform: translateY(-1px); }
  .post.admin-post { border-left: 3px solid var(--gold); }
  .post .post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .post .avatar { width: 32px; height: 32px; font-size: 13px; }
  .post .post-head .info { flex: 1; min-width: 0; }
  .post .post-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .post .post-id { font-size: 11px; color: var(--text-caption); font-weight: 500; background: var(--bg-subtle); padding: 1px 7px; border-radius: 6px; }
  .post .post-meta { font-size: 12px; color: var(--text-caption); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
  .post .post-body {
    font-size: 13.5px; line-height: 1.7; color: var(--text-secondary);
    white-space: pre-wrap; word-break: break-word; display: -webkit-box;
    -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .post-body .post-more { color: var(--accent); font-size: 12px; }
  /* 无限滚动「加载中」 */
  .load-more {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 16px; font-size: 13px; color: var(--text-caption);
  }
  .load-more .spinner { width: 16px; height: 16px; }
  .post .post-foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--text-caption); }
  .post .post-foot .ops { margin-left: auto; display: flex; gap: 4px; }
  .like-btn {
    display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border-2);
    background: var(--bg-surface); color: var(--text-secondary); font-size: 12px;
    padding: 2px 10px; border-radius: 999px; cursor: pointer; transition: all .15s ease;
  }
  .like-btn:hover { border-color: var(--border-3); background: var(--bg-hover); }
  .like-btn.liked { color: #e5484d; border-color: rgba(229, 72, 77, .4); background: rgba(229, 72, 77, .08); }
  .like-btn .like-ico { width: 14px; height: 14px; image-rendering: pixelated; display: block; }
  .like-names { margin-top: 8px; font-size: 12px; color: var(--text-caption); }
  .like-names .like-ico { width: 12px; height: 12px; image-rendering: pixelated; vertical-align: -2px; }
  .ext-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
  .ext-link:hover { color: var(--accent-hover); }
  .badge-hidden {
    font-size: 11px; color: var(--text-tertiary); background: var(--bg-subtle);
    border: 1px solid var(--border-2); padding: 1px 7px; border-radius: 6px;
  }
  .badge-admin {
    display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600;
    color: var(--gold); background: rgba(201, 154, 46, .1); border: 1px solid rgba(201, 154, 46, .35);
    padding: 1px 7px; border-radius: 6px;
  }
  .badge-admin img { width: 12px; height: 12px; image-rendering: pixelated; }
  .badge-pinned {
    display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600;
    color: var(--accent); background: var(--bg-subtle); border: 1px solid var(--border-2);
    padding: 1px 7px; border-radius: 6px;
  }
  .post.pinned-post { border-left: 3px solid var(--accent); }
  /* 帖子图片（附件） */
  .post-images {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px; margin-top: 12px;
  }
  .post-images.thumb { max-height: 190px; overflow: hidden; }
  .post-image {
    width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius-s);
    border: 1px solid var(--border-2); background: var(--bg-subtle); cursor: zoom-in;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .post-images.thumb .post-image { height: 128px; }
  .post-image:hover { transform: scale(1.02); box-shadow: var(--shadow-2); }
  /* 上传器 */
  .uploader { margin-bottom: 12px; }
  .uploader input[type="file"] { display: none; }
  .uploader-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .uploader .hint { font-size: 12px; color: var(--text-caption); }
  .upload-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .upload-thumb { position: relative; width: 84px; height: 84px; border-radius: var(--radius-s); overflow: hidden; border: 1px solid var(--border-2); background: var(--bg-subtle); }
  .upload-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .upload-thumb button {
    position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: none; cursor: pointer;
    border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
  }
  .upload-thumb .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bg-hover); }
  .upload-thumb .bar i { display: block; height: 100%; background: var(--accent, #5b5f66); transition: width .15s ease; }
  .upload-thumb.uploading img { opacity: .5; }
  /* 图片灯箱 */
  .lightbox-mask { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s ease; }
  .lightbox-mask.show { opacity: 1; }
  .lightbox-img { max-width: 92vw; max-height: 92vh; border-radius: var(--radius-s); box-shadow: 0 8px 40px rgba(0,0,0,.5); }
  .empty { color: var(--text-tertiary); font-size: 14px; padding: 48px 0; text-align: center; border: 1px dashed var(--border-2); border-radius: var(--radius-m); display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .empty img { opacity: .5; }
  .loading { color: var(--text-tertiary); padding: 40px; text-align: center; font-size: 14px; }
  .spinner { width: 18px; height: 18px; border: 2px solid var(--border-3); border-top-color: var(--text-secondary); border-radius: 50%; display: inline-block; vertical-align: -3px; margin-right: 8px; animation: spin .7s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .toast {
    position: fixed; top: 22px; left: 50%; transform: translate(-50%, -12px);
    background: var(--text-primary); color: var(--bg-surface); padding: 10px 20px;
    border-radius: 10px; font-size: 13px; box-shadow: var(--shadow-3); opacity: 0;
    transition: opacity .25s ease, transform .25s ease; pointer-events: none; z-index: 999;
  }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }
  .modal-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 500; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s ease; }
  .modal-mask.show { opacity: 1; }
  .modal { width: 480px; max-width: calc(100vw - 40px); background: var(--bg-surface); border: 1px solid var(--border-2); border-radius: var(--radius-l); padding: 24px; box-shadow: var(--shadow-3); transform: scale(.96); transition: transform .2s ease; }
  .modal-mask.show .modal { transform: scale(1); }
  .modal h3 { font-size: 16px; margin-bottom: 14px; }
  .modal textarea { width: 100%; min-height: 120px; border: 1px solid var(--border-2); border-radius: var(--radius-s); padding: 11px 14px; font-size: 14px; resize: vertical; background: var(--bg-page); color: var(--text-primary); outline: none; line-height: 1.6; }
  .modal textarea:focus { border-color: var(--text-tertiary); box-shadow: 0 0 0 3px var(--focus-ring); background: var(--bg-surface); }
  .modal .row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
  .btn-xs {
    padding: 5px 12px; border-radius: 7px; border: 1px solid var(--border-2);
    background: var(--bg-surface); color: var(--text-primary); font-size: 12px; cursor: pointer; transition: all .15s ease;
  }
  .btn-xs:hover { background: var(--bg-hover); border-color: var(--border-3); }
  .btn-xs.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
  .btn-xs.primary:hover { background: var(--accent-hover); }
  .btn-xs.danger { color: #d9534f; }
  .btn-xs.danger:hover { background: rgba(217,83,79,.1); border-color: rgba(217,83,79,.4); }

  /* ---------------- 工具类（由原内联 style 静态化而来） ---------------- */
  .btn-xs[disabled], .btn-xs.soft { opacity: .6; cursor: not-allowed; }
  .btn-ml { margin-left: 8px; }
  .shrink-0 { flex-shrink: 0; }
  .text-caption-sm { color: var(--text-caption); font-size: 12px; }
  .mt-6 { margin-top: 6px; }
  .mt-8 { margin-top: 8px; }
  .mt-10 { margin-top: 10px; }
  .mt-12 { margin-top: 12px; }
  .mt-16 { margin-top: 16px; }
  .mb-6 { margin-bottom: 6px; }
  .mb-10 { margin-bottom: 10px; }
  .mb-12 { margin-bottom: 12px; }
  .mb-16 { margin-bottom: 16px; }
  .gap-8 { display: flex; gap: 8px; }
  .gap-6 { display: flex; gap: 6px; }
  .gap-4 { display: flex; gap: 4px; }
  .gap-6-shrink { display: flex; gap: 6px; flex-shrink: 0; }
  /* 允许换行的横向按钮组。.gap-8 / .gap-6 是「不换行」的横向 flex，
     只适合短控件（图标、小按钮）；一旦放两个宽按钮，手机端总宽会超过容器而溢出
     （「机器人续期」的两个兑换按钮就是这么挤出去的）。 */
  .gap-wrap { display: flex; gap: 8px; flex-wrap: wrap; }
  .gap-wrap > .btn,
  .gap-wrap > .btn-primary,
  .gap-wrap > .btn-xs { flex: 0 1 auto; }
  /* 假人续期按钮组（「我的信息 → 我的假人」）：桌面并排，窄屏纵向铺满。
     该区块属于视图内容，经典布局与响应式框架布局共用这条规则。 */
  .fake-renew-ops { display: flex; gap: 8px; flex-wrap: wrap; }
  .fake-renew-ops > .btn,
  .fake-renew-ops > .btn-primary { flex: 0 1 auto; }
  @media (max-width: 820px) {
    .fake-renew-ops { flex-direction: column; align-items: stretch; gap: 10px; }
    .fake-renew-ops > .btn,
    .fake-renew-ops > .btn-primary { width: 100%; }
  }
  /* 手机版：设置行内的横向按钮组一律允许换行并铺满，
     与 mobile.css 的「.setting-row 纵向化」保持一致，但覆盖到更深一层的按钮容器。 */
  html[data-mobile="1"] .setting-row .gap-8,
  html[data-mobile="1"] .setting-row .gap-6,
  html[data-mobile="1"] .setting-row .gap-6-shrink {
    flex-wrap: wrap;
    width: 100%;
  }
  html[data-mobile="1"] .setting-row .gap-8 > .btn,
  html[data-mobile="1"] .setting-row .gap-8 > .btn-primary,
  html[data-mobile="1"] .setting-row .gap-6-shrink > .btn-xs {
    flex: 1 1 auto;
  }
  .ml-auto { margin-left: auto; }
  .ops-auto { margin-left: auto; }
  .confirm-text { font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 6px; }
  .hint-caption { font-size: 12px; color: var(--text-caption); }
  .hint-block { font-size: 12px; color: var(--text-tertiary); margin-top: 10px; line-height: 1.6; }
  .hidden { display: none; }
  .empty.tight { padding: 20px 0; }
  .empty.tighter { padding: 16px 0; }
  .empty.borderless { border: none; }
  .empty.soft { border: none; padding: 20px 0; }
  .empty.pad24 { padding: 24px 0; }
  .empty.pad28 { border: none; padding: 28px 0; }
  .empty.pad14 { padding: 14px 0; }
  .row-mt10 { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
  .composer.pad14 { padding: 14px 16px; }
  .list-mt10 { margin-top: 10px; }
  .list-mt12 { margin-top: 12px; }
  .modal-input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--border-2); border-radius: var(--radius-s); background: var(--bg-page); color: var(--text-primary); outline: none; margin-bottom: 10px; }
  .modal-input.ta { min-height: 120px; height: auto; padding: 10px 12px; resize: vertical; line-height: 1.6; }
  .avatar.sm-32 { width: 32px; height: 32px; font-size: 13px; }
  .avatar.sm-34 { width: 34px; height: 34px; font-size: 14px; }
  .avatar.sm-38 { width: 38px; height: 38px; font-size: 15px; }
  .profile-hero .avatar.lg-56 { width: 56px; height: 56px; font-size: 22px; }
  .detail-ops { display: flex; gap: 4px; }
  .post-err { margin-top: 16px; }
  .sec-title.caption { margin: 0 2px 10px; font-size: 12px; color: var(--text-caption); }
  .space-avatar-ph { width: 56px; height: 56px; background: var(--bg-subtle); border: 1px solid var(--border-2); }
  .chart-canvas { width: 100%; max-width: 100%; height: 200px; }
  .res-img-preview { display: none; width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-2); }
  .redeem-input { flex: 1; height: 40px; padding: 0 12px; border: 1px solid var(--border-2); border-radius: var(--radius-s); background: var(--bg-page); color: var(--text-primary); outline: none; text-transform: uppercase; }
  .redeem-box { margin-bottom: 16px; }
  .redeem-head { margin-bottom: 10px; }
  .redeem-title { font-size: 16px; }
  .redeem-desc { margin-bottom: 10px; }
  .page-head.compact { margin-bottom: 10px; }
  .page-head.compact h2 { font-size: 15px; }
  .rank-empty { padding: 28px 0; }
  .pager-gap { margin-top: 14px; }
  .pager-gap-sm { margin-top: 12px; }
  .log-pad { padding: 14px 16px; }
  .log-go { margin-left: 8px; }
  .stat-rows.pad { padding: 14px 18px; }
  .uploader-gap { margin-top: 10px; }
  .res-hint { color: var(--text-caption); }
  .avatar-history-row .setting-info.wide { width: 100%; }
  .user-line { font-size: 12px; color: var(--text-caption); }
  .tag-accent { color: var(--accent); }
  .no-ptr { pointer-events: none; }
  .inline-reply.open { display: block; }  .space-bar { margin: 10px 0 18px; }
  .ut-del {
    position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: none; cursor: pointer;
    border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
  }
  .empty.borderless.pad { border: none; padding: 30px 0; }  .mb-8 { margin-bottom: 8px; }
  .mb-18 { margin-bottom: 18px; }
  .empty.comment-empty { padding: 28px 0; }

/* ══════════════════════════════════════════════════════════════════
   Cookie 确认闸门（论坛 /forum 入口，2026-09-26）
   与落地页 public/styles/landing.css 的同名区块是**两套独立配色**：
   论坛用自身的 --bg-surface / --text-primary 等 token，且必须跟随日夜模式与主题皮肤。
   ══════════════════════════════════════════════════════════════════ */

html.sr-consent-locked, html.sr-consent-locked body { overflow: hidden !important; }

.sr-consent-gate {
  position: fixed; inset: 0; z-index: 9000; padding: 20px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .3s ease;
}
.sr-consent-gate.show { opacity: 1; }
.sr-consent-mask {
  position: absolute; inset: 0; background: rgba(10, 11, 14, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.sr-consent-card {
  position: relative; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--bg-surface); border: 1px solid var(--border-2);
  border-radius: var(--radius-l); padding: 34px 32px 26px;
  box-shadow: var(--shadow-3); animation: srConsentPop .34s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes srConsentPop {
  from { transform: translateY(18px) scale(.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.sr-consent-ico {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 16px;
  display: grid; place-items: center; background: var(--bg-subtle); border: 1px solid var(--border-1);
}
.sr-consent-ico img { width: 34px; height: 34px; image-rendering: pixelated; }
.sr-consent-card h2 { font-size: 21px; text-align: center; margin-bottom: 10px; color: var(--text-primary); }
.sr-consent-lead { font-size: 14px; color: var(--text-secondary); text-align: center; line-height: 1.75; margin-bottom: 18px; }
.sr-consent-list { list-style: none; display: grid; gap: 9px; margin: 0 0 18px; padding: 0; }
.sr-consent-list li {
  font-size: 13px; color: var(--text-secondary); line-height: 1.65; padding: 11px 14px;
  border-radius: var(--radius-s); background: var(--bg-subtle); border: 1px solid var(--border-1);
}
.sr-consent-list li b { color: var(--sakura); margin-right: 6px; }
.sr-consent-note { font-size: 13px; color: var(--text-caption); text-align: center; line-height: 1.7; margin-bottom: 20px; }
.sr-consent-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.sr-consent-btn {
  font-family: var(--font); font-size: 14px; font-weight: 600; padding: 11px 26px;
  border-radius: var(--radius-s); cursor: pointer; transition: .22s ease; border: 1px solid transparent;
}
.sr-consent-btn.ghost { background: transparent; border-color: var(--border-3); color: var(--text-secondary); }
.sr-consent-btn.ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.sr-consent-btn.primary {
  background: var(--sakura); color: #fff; box-shadow: 0 8px 24px rgba(242, 84, 125, .3);
}
.sr-consent-btn.primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.sr-consent-foot { text-align: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-1); }
.sr-consent-link { font-size: 12.5px; color: var(--text-tertiary); text-decoration: underline; text-underline-offset: 3px; }
.sr-consent-link:hover { color: var(--sakura); }

@media (max-width: 600px) {
  .sr-consent-card { padding: 26px 20px 20px; }
  .sr-consent-card h2 { font-size: 18px; }
  .sr-consent-actions { flex-direction: column-reverse; }
  .sr-consent-btn { width: 100%; }
}