/* ============================================================================
Little You · 视觉令牌与组件样式 v3 (2026-09-23)
来源：design_handoff_littleyou_v3 / "Little You App v3.dc.html"（明快主题，
applyTheme 默认 brandTheme=bright）+ _ds/classical-b915726f/styles.css。
所有数值均为在 Chromium 里 getComputedStyle 的**实测生效值**，不是文档抄写。
实测记录与冲突说明见 docs/redesign/v3-design-tokens.md。
用法（tokens.css 之后、最后一个样式表）：
本文件只覆盖，不删除；所有选择器都对齐 static/index.html 的现有类名。
字体（README 指定，原型实测一致）：
标题 Cormorant Garamond + Noto Serif SC
正文 Lora + Noto Serif SC
放进 ，排在本文件之前：
Noto Serif SC 全字重约 6–8MB，首屏别阻塞渲染：
…&display=swap" media="print" onload="this.media='all'"
中文永远有本地回退（Songti SC / STSong / Source Han Serif / SimSun），
即使 Noto Serif SC 没下载完，页面也是衬线观感。
========================================================================== */
/* ---------- 0. 字体栈 ---------------------------------------------------- */
:root{
/* 标题：西文 Cormorant Garamond → 中文 Noto Serif SC → 本地思源/宋体 */
--v3-font-heading:"Cormorant Garamond","Noto Serif SC","Source Han Serif SC",
"Songti SC","STSong","Noto Serif CJK SC","SimSun",Georgia,serif;
/* 正文：西文 Lora → 中文同上 */
--v3-font-body:"Lora","Noto Serif SC","Source Han Serif SC",
"Songti SC","STSong","Noto Serif CJK SC","SimSun",Georgia,serif;
/* 数字/水印等等宽 */
--v3-font-mono:ui-monospace,Menlo,Consolas,monospace;
/* 按钮字体 —— 实测原型 .btn 只写了 var(--font-heading)="Cormorant Garamond",
system-ui,sans-serif，链条里**没有**中文衬线，所以原型里中文按钮文字落到
system-ui（PingFang SC，无衬线）。这里保持原型实测行为。
想让按钮中文也走衬线（与 README 的字体系统一致），把下一行换成
var(--v3-font-heading) 即可，是本文件唯一一处“改了就偏离原型”的排版开关。 */
--v3-font-btn:"Cormorant Garamond",system-ui,-apple-system,"PingFang SC",sans-serif;
}
/* ---------- 1. 令牌 · sRGB 回退 ----------------------------------------- */
/* oklch 原值写在下面 @supports 块里；这里是浏览器实际解析出的 rgb（实测取色）。 */
:root{
/* 纸与墨 */
--v3-bg:#f8f7f6; /* 页面底 —— 全局唯一底色，卡片不另铺色 */
--v3-surface:#eae9e9; /* 仅 .plate 图片相框内边 */
--v3-text:#201f1d; /* 正文 15.4:1 on bg */
--v3-divider:rgba(32,31,29,.16); /* 分隔线 / 控件描边（原型全局同一个） */
/* 中性阶 */
--v3-neutral-100:#f8f4f4;
--v3-neutral-200:#eae7e7;
--v3-neutral-300:#d7d3d3;
--v3-neutral-400:#bab6b6;
--v3-neutral-500:#9b9797; /* 底部标签未选中图标 */
--v3-neutral-600:#7d7979; /* 箭头等线性图标 4.0:1 */
--v3-neutral-700:#605d5d; /* 次要文字 6.1:1 —— 原型里所有灰字都是这一档 */
--v3-neutral-800:#444141; /* 段落强调 */
--v3-neutral-900:#2d2b2b; /* toast 底、遮罩 */
/* 强调色：低调灰玫瑰，oklch 色相 345 —— 不是金色 */
--v3-accent:#9b6884; /* oklch(0.58 0.075 345) 描边/进度/图形 */
--v3-accent-100:#f6edf2; /* oklch(0.955 0.012 345) 选中态底 */
--v3-accent-200:#ebd8e2; /* oklch(0.9 0.025 345) 占位图色块 */
--v3-accent-300:#d8baca; /* oklch(0.82 0.04 345) 深底上的文字 */
--v3-accent-400:#c096ad; /* oklch(0.72 0.058 345) 深底上的描边 */
--v3-accent-500:#a57590; /* oklch(0.62 0.07 345) */
--v3-accent-600:#8b5a76; /* oklch(0.53 0.075 345) 5.1:1 on bg */
--v3-accent-700:#71455e; /* oklch(0.45 0.07 345) 7.2:1 —— 链接/小标/选中标签 */
--v3-accent-800:#533044; /* oklch(0.36 0.06 345) 选中态文字 */
/* Logo（README 给的新配色，原型 applyTheme 一致） */
--ly-l1:#614a87; /* oklch(0.46 0.1 300) 短笔画 */
--ly-l2:#9d6785; /* oklch(0.58 0.08 345) 长笔画 */
--ly-l3:#b68235; /* 金 · y 上的点 */
--ly-wm:#533559; /* oklch(0.38 0.07 320) 字标 Little You */
/* 剪纸图标（首页三个入口，也是底部标签的选中色） */
--ly-i1:#D9653B; /* 我们的数字宝贝 / 标签「首页」 3.3:1 */
--ly-i2:#EC8D0B; /* 小小的我 / 标签「我」 2.3:1 见文档 */
--ly-i3:#D4A13A; /* 给我家宝贝换装 / 标签「珍藏」 2.2:1 见文档 */
--ly-idot:#b68235; /* 标签选中时的中心金点 */
/* 时光邮局深色 */
--v3-post-bg:#221e1a;
--v3-post-ink:#dcd6cf; /* 11.5:1 on post-bg */
--v3-post-sub:#aca095; /* 6.5:1 on post-bg */
--v3-post-line:rgba(220,214,207,.22);
--v3-post-shadow:0 18px 40px rgba(0,0,0,.45);
/* 圆角 —— 原型只有 3 档，且极小 */
--v3-radius-sm:2px; /* 勾选框、色块 */
--v3-radius-md:4px; /* 按钮、chip、tile、输入框、seg、toast */
--v3-radius-lg:7px; /* 卡片、底部弹层 */
--v3-radius-pill:999px; /* 只给开关、浮动胶囊 */
/* 阴影 —— 原型几乎不用，卡片是描边不是投影 */
--v3-shadow-sm:0 1px 2px rgba(45,43,43,.14);
--v3-shadow-md:0 3px 10px rgba(45,43,43,.16);
--v3-shadow-lg:0 12px 32px rgba(45,43,43,.22);
/* 间距（DS 的 4.6 基数） */
--v3-sp-1:4.6px; --v3-sp-2:9.2px; --v3-sp-3:13.8px;
--v3-sp-4:18.4px; --v3-sp-6:27.6px; --v3-sp-8:36.8px;
/* 字号阶梯（390px 手机实测） */
--v3-fs-title-lg:28px; /* 结果页 / 珍藏 / 我 */
--v3-fs-title:26px; /* 流程 / 家人 / 节日照 / 写信 / 反馈 */
--v3-fs-name:32px; /* 孩子主页名字 */
--v3-fs-name-sm:30px; /* 回访首页名字 */
--v3-fs-card-title:24px; /* 枕边卡片标题 */
--v3-fs-lead:20px; /* 换装间「小宇航员」 */
--v3-fs-row:18px; /* 入口行标题 / 2×2 卡标题 / 收费档名 */
--v3-fs-row-sm:17px; /* 行内标题 / 顶栏标题 / 主 CTA 文字 */
--v3-fs-body:15px; /* 正文 */
--v3-fs-body-lg:15.5px; /* 枕边长正文 */
--v3-fs-ui:14px; /* 次要文字 / 控件 / 标签 */
--v3-fs-sm:13.5px; /* 更次一级 */
--v3-fs-xs:13px; /* 日期、来源、nav 标签 */
--v3-fs-kicker:12px; /* 分区小标，字距 .12em */
--v3-fs-wm:9.5px; /* 图片水印 */
--v3-lh-tight:1.12; /* 页标题 */
--v3-lh-body:1.55; /* DS body 默认 */
--v3-lh-read:1.85; /* 信纸 / 枕边正文 */
--v3-ls-kicker:.12em;
/* 交互 */
--v3-hover-accent:color-mix(in srgb,var(--v3-accent) 7%,transparent);
--v3-press-accent:color-mix(in srgb,var(--v3-accent) 22%,transparent);
--v3-hover-neutral:color-mix(in srgb,var(--v3-text) 7%,transparent);
--v3-press-neutral:color-mix(in srgb,var(--v3-text) 14%,transparent);
}
/* ---------- 1b. 令牌 · oklch 原值（支持的浏览器覆盖上面的 rgb） --------- */
@supports (color: oklch(0.5 0.1 340)){
:root{
--v3-accent:oklch(0.58 0.075 345);
--v3-accent-100:oklch(0.955 0.012 345);
--v3-accent-200:oklch(0.9 0.025 345);
--v3-accent-300:oklch(0.82 0.04 345);
--v3-accent-400:oklch(0.72 0.058 345);
--v3-accent-500:oklch(0.62 0.07 345);
--v3-accent-600:oklch(0.53 0.075 345);
--v3-accent-700:oklch(0.45 0.07 345);
--v3-accent-800:oklch(0.36 0.06 345);
--ly-l1:oklch(0.46 0.1 300);
--ly-l2:oklch(0.58 0.08 345);
--ly-wm:oklch(0.38 0.07 320);
}
}
/* ---------- 2. 接到现有变量名上 ----------------------------------------- */
/* index.html 与 tokens.css 里几百处 var(--coral) / var(--paper) … 不用改，
全部改指向 v3 令牌。语义对不上的（珊瑚→灰玫瑰）在文档里列了。 */
:root{
--bg:var(--v3-bg);
--paper:var(--v3-bg); /* v3 没有「卡片底色」，卡片=底色+1px 描边 */
--sand:var(--v3-accent-100);
--tag:transparent;
--tag-on:var(--v3-accent-100);
--ink:var(--v3-text);
--sub:var(--v3-neutral-700);
--faint:var(--v3-neutral-700); /* v3 里没有比 neutral-700 更浅的文字色 */
--line:var(--v3-divider);
--line-ctl:var(--v3-divider); /* 原型控件描边同分隔线，对比度见文档 §6 */
--coral:var(--v3-accent);
--coral-deep:var(--v3-accent-700);
--coral-accent:var(--v3-accent);
--coral-050:var(--v3-accent-100);
--coral-100:var(--v3-accent-100);
--coral-400:var(--v3-accent-400);
--sel-bg:var(--v3-accent-100);
--sel-bg-strong:var(--v3-accent-100);
--sel-line:var(--v3-accent);
--sel-ink:var(--v3-accent-800);
--cocoa:var(--v3-neutral-900);
--gold:var(--ly-l3);
--gold-deep:var(--ly-l3);
--price:var(--v3-accent-700);
--ok:var(--v3-accent-700);
--warn:var(--v3-accent-700);
--danger:var(--v3-accent-700);
--sage:var(--v3-neutral-600);
--sage-deep:var(--v3-neutral-700);
--dis-bg:transparent; --dis-ink:var(--v3-neutral-500); --dis-line:var(--v3-divider);
--r-sm:var(--v3-radius-sm);
--r-md:var(--v3-radius-md);
--r-lg:var(--v3-radius-lg);
--r-pill:var(--v3-radius-pill);
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
--fs-brand:23px;
--fs-h1:var(--v3-fs-title);
--fs-h2:var(--v3-fs-row);
--fs-h3:var(--v3-fs-row-sm);
--fs-body:var(--v3-fs-body);
--fs-ui:var(--v3-fs-ui);
--fs-sm:var(--v3-fs-xs);
--fs-nav:var(--v3-fs-xs);
--shadow:none;
--shadow-sel:none;
/* 时光邮局 */
--tp-cream:var(--v3-post-ink);
--tp-dim:var(--v3-post-sub);
--tp-night:var(--v3-post-bg);
--tp-night-2:var(--v3-post-bg);
--tp-lamp:transparent;
--tp-shadow:var(--v3-post-shadow);
--tp-ink:var(--v3-text);
/* 图标不再做色相偏移，剪纸/线性图标自己带色 */
--tint-rest:none; --tint-on:none; --tint-mute:none;
}
/* ---------- 3. 排版 ------------------------------------------------------ */
body{
font-family:var(--v3-font-body);
font-size:var(--v3-fs-body);
line-height:var(--v3-lh-body);
background:var(--v3-bg);
color:var(--v3-text);
-webkit-font-smoothing:antialiased;
font-weight:400;
}
.serif,
h1,h2,h3,h4,h5,h6{
font-family:var(--v3-font-heading);
font-weight:600; /* DS review round 3：bold 退役，600 封顶 */
letter-spacing:0;
}
.brand{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:600}
header{padding:0 20px;height:54px;align-items:center;gap:8px;
border-bottom:1px solid var(--v3-divider);background:var(--v3-bg)}
header .brand{font-size:23px;color:var(--ly-wm)}
header .sub{font-size:var(--v3-fs-xs);letter-spacing:.2em;color:var(--v3-neutral-700)}
/* 页标题：大字用 500，不用 600 */
.hero-h1,.flowtitle,.card h3,.subhead{font-family:var(--v3-font-heading)}
.hero-h1{font-size:var(--v3-fs-title);font-weight:500;line-height:var(--v3-lh-tight);
letter-spacing:0;color:var(--v3-text);margin:18px 0 14px}
.flowtitle{font-size:var(--v3-fs-row-sm);font-weight:600;letter-spacing:0}
.card h3{font-size:var(--v3-fs-row);font-weight:600;letter-spacing:0;line-height:1.4;
margin-bottom:var(--v3-sp-2)}
/* 正文 / 次要 / 说明 */
.muted{font-size:var(--v3-fs-ui);line-height:1.6;color:var(--v3-neutral-700)}
.tiny{font-size:var(--v3-fs-xs);line-height:1.6;color:var(--v3-neutral-700)}
.subtitle{font-size:var(--v3-fs-ui);line-height:1.6;color:var(--v3-neutral-700)}
/* 分区小标：12px / .12em / accent-700 —— v3 全局唯一的“小标”写法 */
.sechead,.taghead,.tagsep span,.divider span{
font-family:var(--v3-font-body);
font-size:var(--v3-fs-kicker);
letter-spacing:var(--v3-ls-kicker);
font-weight:400;
color:var(--v3-accent-700);
text-transform:none;
}
.taghead{margin-top:var(--v3-sp-3)}
.tagsep{border-top:1px solid var(--v3-divider)}
.tagsep small{font-size:var(--v3-fs-xs);color:var(--v3-neutral-700)}
a,.linkbtn,.auth-link,.tp-privlink{
color:var(--v3-accent-700);
text-underline-offset:4px;
text-decoration-color:var(--v3-accent-300);
}
a:hover,.linkbtn:hover{color:var(--v3-accent-600)}
::selection{background:color-mix(in srgb,var(--v3-accent) 30%,transparent)}
:focus-visible{outline:2px solid var(--v3-accent);outline-offset:2px}
/* ---------- 4. 按钮 ------------------------------------------------------ */
/* v3 主按钮 = 灰玫瑰 1px 描边，不填充。README 写的是「金色描边」，那是旧
classic 主题下 --color-accent=#b68235 的结果；bright 主题实测是 #9b6884。 */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
width:100%;
font-family:var(--v3-font-btn);
font-weight:600;
font-size:var(--v3-fs-row-sm);
line-height:1.2;
letter-spacing:0;
min-height:52px;
padding:var(--v3-sp-2) calc(var(--v3-sp-3) * 1.2);
border-radius:var(--v3-radius-md);
background:transparent;
color:var(--v3-accent);
border:1px solid var(--v3-accent);
box-shadow:none;
cursor:pointer;
transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{background:color-mix(in srgb,var(--v3-accent) 12%,transparent);color:var(--v3-accent-800)}
.btn:active{background:var(--v3-press-accent);transform:none;box-shadow:none}
.btn:focus-visible{outline:2px solid var(--v3-accent);outline-offset:2px}
.btn:disabled,.btn[disabled]{
background:transparent;color:var(--v3-accent);border-color:var(--v3-accent);
opacity:.45;box-shadow:none;cursor:not-allowed;
}
/* 关键动作（起名、生成）在原型里是 54px / 18px */
.btn.lg,#btnGen,#btnKeep{min-height:54px;font-size:18px}
/* .btn.dark = v3 btn-secondary（中性描边），不再是深棕实心 */
.btn.dark{
background:transparent;color:var(--v3-text);
border:1px solid var(--v3-divider);box-shadow:none;
}
.btn.dark:hover{background:var(--v3-hover-neutral);color:var(--v3-text)}
.btn.dark:active{background:var(--v3-press-neutral)}
.btn.dark .price{
font-family:var(--v3-font-heading);font-style:normal;font-weight:400;
font-size:var(--v3-fs-ui);color:var(--v3-accent-700);
font-feature-settings:'tnum';
}
.btn.dark[data-ic]::before{filter:none}
/* .btn.ghost = v3 btn-ghost（accent 字，无描边，左右内边距收窄） */
.btn.ghost{
background:transparent;color:var(--v3-accent);
border:1px solid transparent;box-shadow:none;
font-weight:600;font-size:var(--v3-fs-body);
min-height:48px;
padding:var(--v3-sp-2) var(--v3-sp-1);
}
.btn.ghost:hover{background:color-mix(in srgb,var(--v3-accent) 10%,transparent);
border-color:transparent;color:var(--v3-accent-800)}
.btn.ghost:active{background:color-mix(in srgb,var(--v3-accent) 18%,transparent)}
/* 等待态：保留虚线，用 v3 的线色 */
.btn.await{
background:transparent;color:var(--v3-neutral-700);
border:1px dashed var(--v3-divider);box-shadow:none;
}
/* 行内小按钮（「拍 · 免费」「S$12.90」）：原型是 44px / 14px */
.btn.sm{
width:auto;min-height:44px;padding:var(--v3-sp-2) var(--v3-sp-3);
font-size:var(--v3-fs-ui);font-feature-settings:'tnum';
}
.btn[data-ic]::before{width:18px;height:18px}
.btn.ghost[data-ic]::before,.btn.await[data-ic]::before{filter:none;opacity:1}
.btn .b2 small{font-size:var(--v3-fs-xs);color:var(--v3-neutral-700)}
.btn .price{font-feature-settings:'tnum'}
/* 文字型链接按钮 */
.linkbtn{
background:none;border:0;padding:6px 0;min-height:44px;
font-family:var(--v3-font-body);font-size:var(--v3-fs-ui);
color:var(--v3-accent-700);cursor:pointer;
text-decoration:underline;text-underline-offset:4px;
text-decoration-color:var(--v3-accent-300);
}
.backbtn{
background:none;border:0;padding:10px 6px;min-height:44px;
font-size:var(--v3-fs-ui);color:inherit;font-family:var(--v3-font-body);
}
.foldrow{min-height:48px;font-size:var(--v3-fs-body);color:var(--v3-text)}
/* ---------- 5. 流程进度点 ----------------------------------------------- */
.dots i,.steps i{
width:7px;height:7px;border-radius:50%;
border:1px solid var(--v3-accent);background:transparent;
}
.dots i.on,.steps i.on,.steps i.done{background:var(--v3-accent)}
/* ---------- 6. 卡片 ------------------------------------------------------ */
/* v3 的卡片没有底色、没有投影：底色 + 1px 分隔线 + 7px 圆角 */
.card{
background:transparent;
border:1px solid var(--v3-divider);
border-radius:var(--v3-radius-lg);
padding:var(--v3-sp-4);
margin:var(--v3-sp-3) 0;
box-shadow:var(--v3-shadow-sm);
}
.sumbox,.morebox{
background:transparent;border:1px solid var(--v3-divider);
border-radius:var(--v3-radius-md);
}
/* ---------- 7. 整行入口 .entry ------------------------------------------ */
/* 原型：grid 52px / 1fr / 18px，无边框无底色，只有一条下分隔线，行高 ≥72px */
.entry{
display:grid;grid-template-columns:52px 1fr 18px;gap:14px;
align-items:center;width:100%;margin:0;
padding:15px 4px;min-height:72px;
background:none;border:0;border-bottom:1px solid var(--v3-divider);
border-radius:0;box-shadow:none;
text-align:left;color:inherit;font-family:var(--v3-font-body);cursor:pointer;
transition:background-color .15s ease;
}
.entry:hover{background:var(--v3-hover-accent)}
.entry.resume{border-left:0;box-shadow:inset 3px 0 0 0 var(--v3-accent)}
.entry img,.entry svg,.entry .ic-img{
width:52px;height:52px;border-radius:0;background:none;object-fit:contain;flex:none;
}
.entry-t{gap:3px}
.entry-t b{
font-family:var(--v3-font-heading);font-weight:600;
font-size:var(--v3-fs-row);letter-spacing:0;color:var(--v3-text);
}
.entry-t small{
font-size:var(--v3-fs-ui);line-height:1.5;color:var(--v3-neutral-700);
}
.entry-arrow{
/* 保持现有的绝对定位（#modeChips .chip 与 .entry 都靠它右对齐） */
right:8px;font-size:18px;line-height:1;color:var(--v3-neutral-600);
}
/* ---------- 8. chip / 模式卡 -------------------------------------------- */
/* v3 的 chip 是 4px 直角小方块，不是 99px 胶囊 */
.chips{gap:8px;margin:var(--v3-sp-3) 0}
.chip{
flex:1;text-align:center;
min-height:44px;padding:8px 14px;
border:1px solid var(--v3-divider);border-radius:var(--v3-radius-md);
background:transparent;color:var(--v3-text);
font-family:var(--v3-font-body);font-size:var(--v3-fs-ui);
cursor:pointer;box-shadow:none;
transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.chip:hover{border-color:var(--v3-accent);background:var(--v3-hover-accent)}
.chip.on{
background:var(--v3-accent-100);
color:var(--v3-accent-800);
border-color:var(--v3-accent);
box-shadow:inset 0 0 0 1px var(--v3-accent);
}
.chip.on:hover{background:var(--v3-accent-100)}
.chip[aria-disabled="true"],.chip.off{opacity:.45}
.chip .ic-img,.chip.on .ic-img{filter:none;opacity:1}
.chip.sample img{border-radius:var(--v3-radius-sm)}
/* 首页三个入口：v3 是列表行，不是卡片。52px 剪纸图标 + 行高 ≥72px + 下分隔线 */
#modeChips{flex-direction:column;gap:0;margin:0 0 var(--v3-sp-4);
border-top:1px solid var(--v3-divider)}
#modeChips .chip{
flex:none;display:flex;flex-direction:column;align-items:stretch;justify-content:center;
gap:3px;min-height:72px;padding:15px 26px 15px 4px;text-align:left;
background:none;border:0;border-bottom:1px solid var(--v3-divider);border-radius:0;
box-shadow:none;position:relative;overflow:visible;
}
#modeChips .chip:hover{background:var(--v3-hover-accent);border-color:transparent;
border-bottom-color:var(--v3-divider)}
#modeChips .chip .t{
display:flex;flex-direction:row;align-items:center;gap:14px;
font-family:var(--v3-font-heading);font-weight:600;
font-size:var(--v3-fs-row);line-height:1.35;color:var(--v3-text);
}
#modeChips .chip .t .ic-img,#modeChips .chip .t svg{width:52px;height:52px;filter:none;flex:none}
#modeChips .chip .d{
margin:2px 0 0 66px;font-size:var(--v3-fs-ui);line-height:1.5;color:var(--v3-neutral-700);
}
/* 选中态只是列表高亮，不整块换底 */
#modeChips .chip.on{background:var(--v3-hover-accent);border-color:transparent;
border-bottom-color:var(--v3-divider);box-shadow:none}
#modeChips .chip.on .t{color:var(--v3-accent-800)}
#modeChips .chip.on .d{color:var(--v3-neutral-700);opacity:1}
#modeChips .chip.on .ic-img{filter:none}
#modeChips .chip.on::before{content:none}
/* ---------- 9. 分段控件 .seg / .mask-seg -------------------------------- */
.seg,.mask-seg{
display:inline-flex;overflow:hidden;
border:1px solid var(--v3-divider);border-radius:var(--v3-radius-md);
background:transparent;
}
.seg button,.mask-seg button{
border:0;background:transparent;color:var(--v3-neutral-700);
font-family:var(--v3-font-body);font-size:var(--v3-fs-ui);
min-height:40px;padding:9px 12px;white-space:nowrap;cursor:pointer;
box-shadow:none;border-radius:0;
transition:background-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.seg button+button,.mask-seg button+button{border-left:0}
.seg button:hover,.mask-seg button:hover{background:var(--v3-hover-neutral)}
.seg button.on,.mask-seg button.on{
background:var(--v3-accent-100);
color:var(--v3-accent-800);
box-shadow:inset 0 -2px 0 0 var(--v3-accent);
}
.seg button:focus-visible,.mask-seg button:focus-visible{outline:2px solid var(--v3-accent);outline-offset:-2px}
.mask-hint{font-size:var(--v3-fs-ui);color:var(--v3-neutral-700);line-height:1.6}
/* ---------- 10. 服装 / 玩法 格子 .tag ----------------------------------- */
/* 换装间格子：最小高 84px、1px 描边、无投影、不位移 */
.taggrid{gap:10px;margin:var(--v3-sp-2) 0 var(--v3-sp-3)}
.tag{
position:relative;
min-height:84px;padding:10px 4px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
background:transparent;color:var(--v3-text);
border:1px solid var(--v3-divider);border-radius:var(--v3-radius-md);
box-shadow:none;font-family:var(--v3-font-body);
transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.tag:hover{border-color:var(--v3-accent);background:var(--v3-hover-accent)}
.tag:active{transform:none}
.tag .ic{width:26px;height:26px;margin:0 auto}
.tag .n{font-size:var(--v3-fs-ui);line-height:1.4;font-weight:400;color:inherit}
.tag .s{font-size:var(--v3-fs-xs);line-height:1.4;color:var(--v3-neutral-700)}
.tag.on,.tag[aria-pressed="true"]{
background:var(--v3-accent-100);border-color:var(--v3-accent);
color:var(--v3-accent-800);transform:none;
box-shadow:inset 0 0 0 1px var(--v3-accent);
}
.tag.on .ic,.tag[aria-pressed="true"] .ic{opacity:1}
.tag.on .n,.tag[aria-pressed="true"] .n{color:var(--v3-accent-800);font-weight:400}
.tag.on .s,.tag[aria-pressed="true"] .s{color:var(--v3-accent-700)}
/* 穿过的：右上角一枚 16px 空心勾，不再是蜡封 PNG */
.tag.done{background:transparent}
.tag.done .ic{opacity:.55}
.tag.done .n{color:var(--v3-neutral-700)}
.tag.done::after{
content:"";position:absolute;right:5px;top:5px;width:16px;height:16px;
border:1px solid var(--v3-accent);border-radius:50%;box-shadow:none;
background:transparent no-repeat center/9px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371455e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.taggrid.locked .tag{opacity:.55}
.workempty{
border:1px dashed var(--v3-divider);border-radius:var(--v3-radius-md);
background:transparent;color:var(--v3-neutral-700);
font-size:var(--v3-fs-ui);line-height:1.7;
}
/* ---------- 11. 2×2 玩法卡（孩子主页）---------------------------------- */
/* 若复用 .tag/.chip 之外的容器，给它 .v3-act 即可 */
.v3-act{
display:flex;flex-direction:column;align-items:flex-start;gap:6px;
padding:16px 14px;min-height:96px;
border:1px solid var(--v3-divider);border-radius:var(--v3-radius-md);
background:transparent;color:inherit;text-align:left;cursor:pointer;
}
.v3-act:hover{border-color:var(--v3-accent);background:color-mix(in srgb,var(--v3-accent) 6%,transparent)}
.v3-act b{font-family:var(--v3-font-heading);font-weight:600;font-size:var(--v3-fs-row)}
.v3-act small{font-size:var(--v3-fs-sm)}
.v3-act small.free{color:var(--ly-l3)} /* 「第一次免费」金 */
.v3-act small.used{color:var(--v3-neutral-700)} /* 「用 1 张」灰 */
/* ---------- 12. 上传位 .up ---------------------------------------------- */
.up{
border:1px dashed var(--v3-divider);border-radius:var(--v3-radius-md);
background:transparent;color:var(--v3-neutral-700);
font-family:var(--v3-font-body);font-size:var(--v3-fs-body);gap:8px;
}
.up:hover{border-color:var(--v3-accent)}
.up.on,.up.filled{border-style:solid;border-color:var(--v3-accent);background:var(--v3-accent-100)}
.up svg{opacity:1;stroke:var(--v3-accent)}
.up img{border-radius:0}
/* ---------- 13. 输入框 --------------------------------------------------- */
.auth-in,#sceneText,#wishText,.tp-ta,input[type="text"],input[type="email"],textarea{
font-family:var(--v3-font-body);
font-size:16px; /* iOS 不缩放的下限 */
color:var(--v3-text);
caret-color:var(--v3-accent);
background:transparent;
border:1px solid var(--v3-divider);
border-radius:var(--v3-radius-md);
padding:6px 10px;min-height:48px;
}
#sceneText,#wishText,textarea{min-height:140px;line-height:1.75;resize:vertical}
.auth-in:focus,#sceneText:focus,#wishText:focus,textarea:focus{
border-color:var(--v3-accent);outline:none;box-shadow:none;
}
#sceneText::placeholder,#wishText::placeholder,.auth-in::placeholder,textarea::placeholder{
color:var(--v3-neutral-700);opacity:.7;
}
.auth-code{letter-spacing:.2em}
.scene-head label{font-size:var(--v3-fs-ui);color:var(--v3-neutral-700)}
.scene-count{font-size:var(--v3-fs-xs);color:var(--v3-neutral-700);font-variant-numeric:tabular-nums}
.scene-count.near{color:var(--v3-accent-700)}
.scene-sugs button{
border:1px solid var(--v3-divider);border-radius:var(--v3-radius-md);
background:transparent;color:var(--v3-text);
font-size:var(--v3-fs-ui);min-height:40px;padding:8px 14px;
}
.scene-sugs button:hover{border-color:var(--v3-accent)}
/* ---------- 14. 勾选框 / 同意块 ----------------------------------------- */
.consent{
display:flex;gap:12px;align-items:flex-start;
border:1px solid var(--v3-divider);border-radius:var(--v3-radius-md);
padding:16px;margin:var(--v3-sp-3) 0;
font-size:16px;line-height:1.5;color:var(--v3-text);cursor:pointer;
}
.consent:has(input:checked){border-color:var(--v3-accent)}
.consent input{
width:22px;height:22px;flex:none;margin:1px 0 0;
accent-color:var(--v3-accent);border-radius:var(--v3-radius-sm);
}
.consent small{
display:block;font-size:var(--v3-fs-ui);line-height:1.6;
color:var(--v3-neutral-700);margin-top:4px;
}
/* ---------- 15. 开关（暂停 / 改好了告诉我）------------------------------ */
.v3-switch{
width:46px;height:28px;flex:none;border-radius:var(--v3-radius-pill);
border:1px solid var(--v3-divider);background:transparent;position:relative;
}
.v3-switch::after{
content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
background:var(--v3-neutral-400);transition:left .2s,background-color .2s;
}
.v3-switch.on{border-color:var(--v3-accent);background:var(--v3-accent-100)}
.v3-switch.on::after{left:21px;background:var(--v3-accent)}
/* ---------- 16. 候选图 / 相框 ------------------------------------------- */
.plate,.cand img,.polbig img{
filter:none; /* 去掉旧的 sepia 照片滤镜 */
}
.cand{transition:transform .2s}
.cand:nth-child(odd){transform:rotate(-1.6deg)}
.cand:nth-child(even){transform:rotate(1.4deg)}
.cand.sel{
transform:rotate(0deg);
outline:2px solid var(--v3-accent);outline-offset:0;
box-shadow:none;border-color:transparent;
}
.cand .pick{
background:var(--v3-bg);border:1px solid var(--v3-accent);
color:var(--v3-accent-700);font-size:var(--v3-fs-ui);
padding:3px 10px;border-radius:var(--v3-radius-md);
box-shadow:var(--v3-shadow-sm);
}
.cand .cap{font-size:var(--v3-fs-wm);background:var(--v3-bg);padding:1px 5px;color:var(--v3-text)}
.sku .ic{filter:none}
.sku b{font-family:var(--v3-font-heading);font-weight:600;font-size:var(--v3-fs-row-sm)}
.sku .p{font-size:var(--v3-fs-ui);color:var(--v3-accent-700);font-feature-settings:'tnum'}
.sku .muted{font-size:var(--v3-fs-ui);color:var(--v3-neutral-700);line-height:1.5}
.stampc.got{border-color:var(--v3-accent);background:var(--v3-accent-100)}
.divider div{background:var(--v3-divider)}
/* ---------- 17. 底部标签 nav ------------------------------------------- */
/* 剪纸风图标：/assets/brand/tab-{home,keep,me}.svg
必须**内联**成