/* ==========================================================================
   拼豆图纸生成器 · 前台样式
   --------------------------------------------------------------------------
   为什么是手写 CSS 而不是引框架：spec §2.3 要求前台零客户端渲染、零构建步骤。
   这个文件是 public/ 下的真实静态文件，由 Web 服务器直出，不经过 PHP，
   也不进任何打包流程 —— 改完刷新即可见。

   色卡是这个站的主角，所以整页的视觉预算都花在「让颜色自己说话」上：
   底色与卡片都压低饱和度，把饱和度留给色带和色块，界面本身不跟色卡抢眼。

   ── 风格：手工台 / 拼豆板（2026-09-16 重做）────────────────────────────

   改之前是冷灰白 + #e64f27 的通用 SaaS 皮。它不难看，但它**说不出这是什么**：
   把 logo 去掉，它可以是任何一个后台。拼豆是手上活的材料（塑料豆、拼豆板、
   熨斗），所以整站往「手工台」走：

     · 纸底 `--bg` 偏暖（米白），卡片是略亮一点的纸 `--surface`，
       墨色也换成暖褐灰而不是冷蓝灰 —— 冷灰是屏幕的颜色，暖褐是纸的颜色
     · 主色从刺眼的 #e64f27 换成陶土 `--accent`，另加一个鼠尾草绿 `--sage`
       做次要色，两个都取自手工材料的色域。分工是**固定的**，不许混用：

         橙 `--accent` = 动作   （按下去会发生事情的：按钮、CTA、链接、主行动点）
         绿 `--sage`   = 状态   （当前取值与选中：勾选框、.chip.is-on、.seg.is-on、
                                滑块填充、成功提示）

       分成两色的理由不是好看，是**可读**：只用主色的话，"导出"按钮和
       "已选 12 色"的标记是同一个橙，一屏里出现六七个同样重的橙块，
       用户分不出哪个按得动。`generator.css` 按这条规矩用这两个变量
     · `--peg` 是**拼豆板**的孔阵：铺在页面底上的圆点网格。
       它不是装饰 —— 它就是用户手上那块板子的样子，一眼能认出来

   ⚠️ 改色只动这一处 `:root`。`generator.css` 顶部明写了"复用 site.css 的
      :root 变量"，两份 :root 会分叉 —— 所以生成页的分支样式跟着一起变，
      不需要（也不许）在那边再定义一份。
   ========================================================================== */

:root {
    /* 暖墨三阶：纸上的字，不是屏幕上的字 */
    --ink:          #2f2a26;
    --ink-2:        #574f47;
    --ink-3:        #8d8378;

    /* 纸与线。`--line` 是可见的纸边，`--line-2` 是卡片内部的分隔 */
    --line:         #e6dccb;
    --line-2:       #f1e9dc;
    --bg:           #faf6ef;
    --surface:      #fffdf9;

    /* 陶土：手工材料的主色。比原来的 #e64f27 暗一档、黄一档，
       在白底上不刺眼，也让色卡里的红不被界面抢走 */
    --accent:       #c2662f;
    --accent-soft:  #fbf0e5;

    /* 鼠尾草绿：次要色。用在"成功/已选"这类不该用主色喊的地方 */
    --sage:         #5d7a5f;
    --sage-soft:    #eef3ec;

    /* 拼豆板的孔阵。圆点比线更像素级地像一块板子 */
    --peg:          rgba(120, 100, 78, .085);
    --peg-size:     16px;

    --radius:       14px;
    --radius-sm:    9px;
    /* 阴影也带暖调（用褐色的 rgba，不用纯黑）—— 纯黑阴影落在暖纸上会发脏 */
    --shadow:       0 1px 2px rgba(74, 58, 40, .05), 0 8px 24px -12px rgba(74, 58, 40, .14);
    --shadow-lift:  0 2px 4px rgba(74, 58, 40, .06), 0 18px 40px -18px rgba(74, 58, 40, .24);

    --maxw:         1120px;
    --gutter:       24px;
}

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

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

body {
    margin: 0;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
                 "Noto Sans CJK SC", sans-serif;
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;

    /* 拼豆板的孔阵。固定不动（`fixed`）—— 滚动时页面动、板子不动，
       才像是"东西放在板子上"，而不是"背景贴纸跟着跑"。
       `--peg` 的不透明度压到 .085：它必须在任何屏幕上都不影响读字，
       色卡和色块永远比它显眼。 */
    background-color: var(--bg);
    background-image: radial-gradient(var(--peg) 1.5px, transparent 1.6px);
    background-size: var(--peg-size) var(--peg-size);
    background-attachment: fixed;

    /* 深色模式下不要把圆点反过来变成亮点：现在的暖纸底在浅色模式里立的住，
       深色主题留到真做的时候一起定（`prefers-color-scheme` 需要另一套色阶，
       只翻一个变量会得到一块脏灰）。这里只保证系统深色时底仍是暖的 */
    color-scheme: light;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* --------------------------------------------------------------- 顶栏 --- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 253, 249, .86);   /* = --surface，暖纸 */
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}

.site-header .wrap {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 62px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15.5px;
    letter-spacing: -.01em;
    white-space: nowrap;
}

/* 四颗豆子拼成的方块，纯 CSS，不引图片 —— 省一次请求 */
.brand-mark {
    display: grid;
    grid-template-columns: repeat(2, 7px);
    grid-template-rows: repeat(2, 7px);
    gap: 2.5px;
    flex: none;
}
.brand-mark i {
    border-radius: 2px;
    background: var(--accent);
}
.brand-mark i:nth-child(2) { background: #f2a03d; }
.brand-mark i:nth-child(3) { background: #4a9de0; }
.brand-mark i:nth-child(4) { background: #3fbf8f; }

.site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: 14.5px;
}

.site-nav a {
    padding: 7px 13px;
    border-radius: 8px;
    color: var(--ink-2);
    font-weight: 500;
    transition: background .15s, color .15s;
}
.site-nav a:hover { background: var(--line-2); color: var(--ink); }

/* ------------------------------------------------------------- 首屏 --- */

.hero {
    padding: 72px 0 56px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.hero h1 {
    font-size: clamp(28px, 4.6vw, 44px);
    letter-spacing: -.025em;
    margin-bottom: 16px;
}

.hero-sub {
    max-width: 620px;
    margin: 0 auto;
    color: var(--ink-2);
    font-size: 16.5px;
    line-height: 1.7;
}

/* 首屏主行动点。整个站点的目的是把访客送进生成器，所以这一个按钮是全页视觉重点：
   背景用 accent、尺寸比正文大一档、并且是首屏里唯一的实心色块。
   注意它必须在 hero-sub 之后、hero-stats 之前 —— 先说要干什么，再给数据。 */
.hero-cta {
    margin: 26px 0 0;
}

.hero-cta a {
    display: inline-block;
    padding: 13px 30px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    border-radius: 999px;
    box-shadow: 0 8px 20px -10px rgba(194, 102, 47, .5);
    transition: background .15s, transform .15s, box-shadow .15s;
}

.hero-cta a:hover {
    background: #a85526;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -10px rgba(194, 102, 47, .6);
}

@media (max-width: 700px) {
    .hero-cta a { padding: 12px 22px; font-size: 15px; }
}

.hero-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.stat {
    min-width: 132px;
    padding: 16px 22px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.stat-num {
    display: block;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.stat-num em {
    font-style: normal;
    font-size: .62em;
    font-weight: 600;
    color: var(--ink-3);
    margin-left: 3px;
}
.stat-label {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--ink-3);
}

/* 首页首屏：左文右图。
   ⚠️ 只给首页（`.hero-home`）。`.hero` 还被色卡库与生成页用着，
      而那两页的首屏是"只有一行标题的窄条"，改成两栏会把它们也撑高。
   900px 以下回到单栏居中 —— 两栏在窄屏上会让那段说明压成一列五个字。 */
.hero-home { padding: 56px 0; }

.hero-home .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 52px;
    align-items: center;
    text-align: left;
}

.hero-home .hero-sub,
.hero-home .hero-demo { margin: 0; }
.hero-home .hero-stats { justify-content: flex-start; }
.hero-home .hero-count { margin-top: 22px; }

@media (max-width: 900px) {
    .hero-home { padding: 44px 0 40px; }
    .hero-home .wrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
        text-align: center;
    }
    .hero-home .hero-sub { margin: 0 auto; }
    .hero-home .hero-stats { justify-content: center; }
    .hero-home .hero-demo { margin: 0 auto; }
}

/* --------------------------------------------------------- 示例图纸 --- */

/* 首屏那块拼豆图纸。整块是**插画**，不是可交互控件（页面上 aria-hidden）。
   它要一眼说明"这个工具产出什么"，所以长得必须像真的图纸：
   带孔的豆、格线、下面跟着用料清单。 */
.hero-demo {
    width: min(430px, 100%);
    margin: 34px auto 0;
    padding: 16px 18px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: left;
}

.demo-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}
.demo-title { font-weight: 700; font-size: 14px; }
.demo-meta  { margin-left: auto; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.demo-grid {
    display: grid;
    /* --cols 由模板按图案宽度写进来，图案改了不必改 CSS */
    grid-template-columns: repeat(var(--cols, 13), 1fr);
    gap: 3px;
    padding: 10px;
    background: var(--bg);
    border-radius: var(--radius-sm);
}

/* 一颗豆 = 一个圆 + 中间的孔。
   那个孔是用 `radial-gradient` 掏出来的（中心画底色圆点），不是真的透明 ——
   真透明会让豆叠在深色底上时看着是个甜甜圈。 */
.bead {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    --bead: var(--line);
    background: radial-gradient(circle at 50% 46%, var(--bg) 0 17%, var(--bead) 18% 100%);
    /* 右下一点内阴影：豆是立体的，平贴的圆看着像印刷网点 */
    box-shadow: inset -1px -1.5px 1.5px rgba(74, 58, 40, .22);
}
.bead-r { --bead: #d94f45; }
.bead-d { --bead: #a32d2a; }
/* 空格：不画豆，只留位置（用同一个 aspect-ratio 撑住网格对齐） */
.bead-empty { background: none; box-shadow: none; border-radius: 0; }

.demo-mats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--line-2);
    font-size: 13px;
    color: var(--ink-2);
}
.demo-mats-label { color: var(--ink-3); font-size: 12.5px; }
.demo-mat { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.demo-mat .bead { width: 13px; flex: none; }

@media (max-width: 700px) {
    .hero-demo { padding: 13px 14px 12px; }
    .demo-grid { gap: 2px; padding: 8px; }
}

/* 首屏下面那行「已收录 N 张色卡、M 个色号」的等价说明 */
.hero-count {
    margin: 26px 0 0;
    font-size: 14px;
    color: var(--ink-3);
}
.hero-count strong { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------- 区块标题 --- */

.section { padding: 56px 0 8px; }

.section-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 24px;
}
.section-head h2 {
    font-size: 21px;
    letter-spacing: -.02em;
}
.section-head .more {
    margin-left: auto;
    font-size: 14px;
    color: var(--ink-3);
    transition: color .15s;
}
.section-head .more:hover { color: var(--accent); }

/* ------------------------------------------------------- 色卡卡片网格 --- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px;
    padding-bottom: 56px;
}

.palette-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.palette-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: var(--line);
}

/* 色带：把这张卡的颜色摊开给人看，是这张卡片上信息密度最高的一条 */
.strip {
    display: flex;
    height: 76px;
    background: var(--line-2);
}
.strip span {
    flex: 1 1 0;
    min-width: 0;
}

.card-body { padding: 18px 20px 20px; }

.card-title {
    font-size: 17px;
    letter-spacing: -.015em;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.card-title .brand { font-weight: 700; }
.card-title .name  { color: var(--ink-2); font-weight: 600; }

.card-meta {
    margin-top: 7px;
    font-size: 13.5px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.card-meta .dot { margin: 0 7px; color: var(--ink-3); opacity: .6; }

.card-foot {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--line-2);
    display: flex;
    align-items: center;
    gap: 12px;
}
.dist-label {
    font-size: 12px;
    color: var(--ink-3);
    white-space: nowrap;
}

/* 明度分布条：宽度用 flex-grow 分配，不做任何除法，
   于是 colorCount 为 0 时也不会除零 */
.dist-bar {
    display: flex;
    flex: 1;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--line-2);
}
.dist-bar span {
    flex: 1 1 0;
    min-width: 0;
    background: var(--ink-3);
}
/* 从近墨到近纸的五档。这五个是**暖灰**，不是冷灰 —— 之前的 #2b2f38 → #e8ebf1
   是上一版冷色皮肤留下的（整站唯一漏掉没换的一组颜色），压在米白纸上像一道灰渍。
   明度条是拿来比"这张卡是偏深还是偏浅"的，它自己得先属于这张纸。 */
.dist-bar span:nth-child(1) { background: #3b332b; }
.dist-bar span:nth-child(2) { background: #6b5f52; }
.dist-bar span:nth-child(3) { background: #9c8f7e; }
.dist-bar span:nth-child(4) { background: #c8bda9; }
.dist-bar span:nth-child(5) { background: #e9e0cd; }

/* 数字版分布：测试按字面量钉着 "3 / 31 / 26 / 18 / 11"，必须保留 */
.dist-text {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

/* 色系列表 */
.series-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
    padding: 0;
    list-style: none;
}
.series-list li {
    padding: 3px 9px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-2);
    background: var(--line-2);
    border-radius: 6px;
}

/* 空态 */
.empty {
    padding: 64px 24px;
    text-align: center;
    color: var(--ink-3);
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    margin-bottom: 56px;
}

/* --------------------------------------------------- 色卡列表页（整行）--- */

.palette-row {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.palette-row:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: var(--line);
}
.palette-row .strip { height: 68px; }

.row-body {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 18px 22px 20px;
}
.row-main { flex: 1 1 260px; min-width: 0; }
.row-side { flex: 1 1 220px; min-width: 0; }

.row-title {
    font-size: 18px;
    letter-spacing: -.015em;
}
.row-title .name { color: var(--ink-2); font-weight: 600; }

.version-tag {
    display: inline-block;
    margin-left: 8px;
    vertical-align: 2px;
    padding: 2px 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--line-2);
    border-radius: 5px;
    letter-spacing: 0;
}

/* ------------------------------------------------------------ 色号页 --- */

.page-head {
    padding: 40px 0 26px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.crumb {
    font-size: 13.5px;
    color: var(--ink-3);
    margin-bottom: 14px;
}
.crumb a { color: var(--ink-3); transition: color .15s; }
.crumb a:hover { color: var(--accent); }
.crumb .sep { margin: 0 8px; color: var(--ink-3); opacity: .6; }

.page-head h1 {
    font-size: clamp(24px, 3.4vw, 33px);
    letter-spacing: -.025em;
}
.page-head h1 .name { color: var(--ink-2); font-weight: 600; }

.head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 16px;
    padding: 0;
    list-style: none;
}
.head-meta li {
    padding: 5px 12px;
    font-size: 13px;
    color: var(--ink-2);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.head-meta li b { font-weight: 700; color: var(--ink); }

.dist-block {
    margin-top: 20px;
    max-width: 420px;
}
.dist-block .dist-label { display: block; margin-bottom: 7px; }

/* 色号格子 */
.swatch-section { padding: 36px 0 60px; }

.swatch-section h2 {
    font-size: 18px;
    margin-bottom: 6px;
}
.swatch-hint {
    margin: 0 0 22px;
    font-size: 13.5px;
    color: var(--ink-3);
}

.swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 14px;
}

.swatch-item {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.swatch-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* ⚠️ 这个 class 名被测试按字面量数着（详情页必须恰好 89 个 class="swatch"），
   别在这里加第二个带同名 class 的元素，也别写成 "swatch xxx"。 */
.swatch {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--line-2);
}

/* min-height 撑到两行的高度：色卡里 "H111 · Dark Blush" 这类两行的 caption
   和 "H05" 这类一行的，如果按内容撑高，同一行里的卡片就参差不齐。 */
.swatch-item figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    text-align: center;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- 页脚 --- */

.site-footer {
    margin-top: 24px;
    padding: 34px 0 44px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    font-size: 13.5px;
    color: var(--ink-3);
}
.site-footer p { margin: 0; }
.site-footer p + p { margin-top: 6px; }

/* ------------------------------------------------- 导航栏的登录状态 --- */

/* `#nav-user` 里的东西由 public/js/ui/site.js 在页面加载后塞进来。
   样式必须与 `.site-nav a` 一致 —— 否则「登录」被换成「昵称 + 退出」时
   会突然换一种排版，看起来像页面坏了。 */
.nav-user,
.nav-level {
    padding: 7px 13px;
    font-size: 14.5px;
    font-weight: 500;
}

.nav-level {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12.5px;
}

.nav-logout { cursor: pointer; }

/* ------------------------------------------------------------- 登录页 --- */

.auth {
    max-width: 460px;
    margin: 56px auto 64px;
    padding: 0 var(--gutter);
}

.auth-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px 28px;
    text-align: center;
}

.auth-card h1 { margin: 0 0 6px; font-size: 22px; }

.auth-sub { margin: 0 0 22px; color: var(--ink-3); font-size: 14px; }

/* 调试档的假身份列表 */
.auth-identities {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.auth-identity {
    display: block;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.auth-identity:hover { border-color: var(--accent); background: var(--accent-soft); }

/* 「未配置」的提示。刻意不做成红色警告 —— 这不是故障，是这一版还没开这个功能 */
.auth-note {
    padding: 16px 18px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.8;
}

.auth-msg { margin-top: 16px; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.auth-msg.error { color: var(--accent); }

/* --------------------------------------------------------- 配额 / 兑换 --- */

/* 这几个是**跨页**的小件：生成页的配额条和兑换页的「当前状态」用的是同一种
   写法（等级胶囊 + 两个数字），所以样式放 site.css 而不是任一个页面的表里 ——
   放在 generator.css 里的话，兑换页要么引一个生成页的样式表，
   要么把这三条抄一遍，而抄一遍的下场是两处的胶囊颜色迟早不一样。 */
.quota-level {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
    font-size: 12.5px;
}

.quota-num { color: var(--ink); font-weight: 600; }
.quota-spacer { flex: 1 1 auto; }

.redeem-now {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
    padding: 12px 14px;
    font-size: 13.5px;
    color: var(--ink-2);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.redeem-now[hidden] { display: none; }
.redeem-now a { color: var(--accent); }

.redeem-form { display: flex; gap: 10px; }

.redeem-code {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    font: inherit;
    /* 卡密是大写字母+数字，等宽字体让「0 和 O」这种容易看错的地方好分辨 */
    font-family: Consolas, Menlo, monospace;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.redeem-code:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.redeem-form .btn { flex: 0 0 auto; }

/* 兑换说明。做成中性提示而不是警告框 —— 它讲的是「卡密只能用一次」这种
   正常规则，不是出错 */
.redeem-hint {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line-2);
    font-size: 13px;
    line-height: 1.8;
    color: var(--ink-3);
    text-align: left;
}

.redeem-hint a { color: var(--accent); }

/* 按钮做成一颗「豆」：底边比别的边厚 2px，按下去时那 2px 收掉、整块下沉 2px。
   手工台上的东西都是立着的，压下去会塌 —— 这一点点位移就是"按得动"的手感，
   不需要动 JS，也不改变任何布局尺寸（`transform` 不参与布局）。 */
.btn {
    display: inline-block;
    padding: 11px 22px;
    border: 1px solid var(--line);
    border-bottom-width: 3px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .06s, border-bottom-width .06s;
}

.btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 主色按钮的底边要更深，否则 3px 的"厚度"在白字旁边看不出来 */
.btn-primary { border-bottom-color: #9c4f22; }
.btn-primary:hover { background: #b25b28; border-color: #b25b28; border-bottom-color: #8b4519; }

.btn:active:not([disabled]) {
    transform: translateY(2px);
    border-bottom-width: 1px;
}

.btn[disabled] { opacity: .55; cursor: default; }
.btn[disabled]:hover { border-color: var(--line); background: var(--surface); }
/* 深色底按钮 hover 时别退回白底 —— 上面那条通用 hover 会命中它 */
.btn[disabled].btn-primary:hover { background: var(--accent); border-color: var(--accent); }

/* ------------------------------------------------------------- 响应式 --- */

@media (max-width: 720px) {
    :root { --gutter: 16px; }

    .hero { padding: 48px 0 40px; }
    .hero-sub { font-size: 15.5px; }

    .section { padding: 40px 0 4px; }

    .card-grid { grid-template-columns: 1fr; gap: 18px; }

    .row-body { gap: 18px; }

    .swatches { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }

    .site-nav { gap: 0; }
    .site-nav a { padding: 7px 9px; font-size: 14px; }
}

@media (max-width: 420px) {
    .brand-text { display: none; }
}