/* ===== v4：沿用 1.0 的抽奖、套装、我的页；地图栏头；小帅认证头像框；型爷本爷徽章 ===== */
:root { --deep:#2A2522; --on-deep:#F2EDE4; --on-deep-muted:#B3A99C; --on-wine:#fff; --surface:#FCFAF7; --surface-sunken:#EFE9E1; --ink-muted:#6E675F; --bg:#F7F4EF; --red:#7A2632; --red-on-dark:#E9D7B4; }

/* 1.0 通用按钮（抽奖、套装页用） */
.button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:10px 16px; border-radius:12px; border:1px solid transparent; background:var(--wine); color:#fff; font-weight:700; font-size:14px; }
.button.secondary { background:#fff; color:var(--ink); border-color:var(--line); }
.button.red { background:var(--wine); color:#fff; }
.button.wide { width:100%; }
.button:disabled { opacity:.5; }
.text-button { background:none; color:var(--ink-muted); font-size:13px; padding:6px; }
.center { text-align:center; }

/* 地图：每个区域一条深色栏头，和小帅认证同一视觉分量 */
.region { background:rgba(239,233,225,.6); overflow:hidden; }
.region-band { display:flex; align-items:center; justify-content:space-between; gap:8px; height:44px; padding:0 12px 0 14px; background:linear-gradient(110deg,#2A2522,#4a2a2f); color:#F2EDE4; border-bottom:2px solid var(--gold); }
.region-band b { font-size:14px; font-family:"Songti SC","Noto Serif SC",serif; letter-spacing:.5px; }
.region-band small { margin-left:8px; color:#cdbfae; font-size:10.5px; }
.band-cta { flex:none; padding:5px 10px; border-radius:999px; border:1px solid rgba(214,195,160,.7); background:transparent; color:#E9D7B4; font-size:11px; font-weight:700; }
.region-label { display:none; }
.k-cert.v4 { width:150px; height:150px; margin:-75px 0 0 -75px; display:grid; place-items:center; }
.k-cert.v4 .you { top:-6px; }
.cert-art-v4 { display:inline-grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 50% 45%,#3a3029,#1a1614 70%); padding:6px; }
.cert-art-v4 .ring-wrap { --ring:118px; }
.cert-art-v4 .sh-spark { display:grid!important; place-items:center; width:76%; height:76%; border-radius:50%; background:#211D1A; color:#F3DFA8; position:relative; z-index:1; }
.cert-art-v4 .sh-spark svg { width:52%; height:52%; fill:currentColor; }
.cert-art-v4.locked .ring-wrap { opacity:.6; filter:grayscale(.5); }
.cert-art-v4.approved .sh-spark { background:var(--wine); color:#fff; }
.cert-art-v4.current .sh-spark { animation:spark 2.4s ease-in-out infinite; }
@keyframes spark { 50% { color:#fff; filter:drop-shadow(0 0 6px #F3DFA8); } }
.ring-wrap { position:relative; display:inline-grid; place-items:center; width:var(--ring); height:var(--ring); isolation:isolate; }
.ring-canvas { pointer-events:none; }
.fork-end.open { border-style:solid; border-color:var(--line-accent); background:#fff; }
.fork-end em { font-style:normal; font-size:10px; color:var(--wine); font-weight:700; }
.finale { position:absolute; left:8px; right:8px; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; background:linear-gradient(110deg,#fbfaf4,#f0eddf 55%,#e9e3cf); border:1px solid #d8c9a2; text-align:left; z-index:2; }
.finale b { display:block; font-size:13px; } .finale small { color:var(--muted); font-size:11px; }
.master-badge { width:46px; height:auto; flex:none; filter:drop-shadow(0 3px 6px rgba(122,38,50,.25)); }
.master-badge.big { width:76px; }
.master-badge.spin { animation:badge-flip-3d 6s ease-in-out infinite; transform-origin:center; backface-visibility:hidden; }
@keyframes badge-flip-3d { 0%,100% { transform:perspective(240px) rotateY(0deg); } 24% { transform:perspective(240px) rotateY(-40deg); } 50% { transform:perspective(240px) rotateY(0deg); } 74% { transform:perspective(240px) rotateY(40deg); } }
@media (prefers-reduced-motion: reduce) { .master-badge.spin, .cert-art-v4 .sh-spark { animation:none; } }

/* 今日：昨天 / 今天两套 */
.look-sub { margin:-6px 2px 10px; color:var(--muted); font-size:12px; }
.look-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.look-mini { min-width:0; border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden; display:flex; flex-direction:column; }
.look-mini.today { border-color:var(--gold); }
.look-mini-img { position:relative; display:block; width:100%; aspect-ratio:2/3; padding:0; background:#f3efe9; }
.look-mini-img img { width:100%; height:100%; object-fit:contain; display:block; }
.look-tag { position:absolute; left:8px; top:8px; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.9); font-size:11px; font-weight:700; }
.look-mini.today .look-tag { background:var(--wine); color:#fff; }
.look-mini-copy { padding:9px 10px 4px; } .look-mini-copy b { display:block; font-size:13px; letter-spacing:1px; } .look-mini-copy small { display:block; color:var(--muted); font-size:11px; line-height:1.4; margin-top:2px; }
.look-buy-btn { margin:6px 10px 10px; padding:9px; border-radius:10px; background:var(--wine); color:#fff; font-size:13px; font-weight:700; }
.xp-hint { width:100%; margin-top:10px; padding:10px; border-radius:12px; background:#fbf6ec; border:1px dashed var(--gold); color:#8E6A33; font-size:12px; font-weight:700; }

/* 套装页（沿用 1.0 outfits.css） */
.outfits-intro.v4 { padding:4px 2px 16px; } .outfits-intro .eyebrow { font-size:12px; letter-spacing:2px; } .outfits-intro h1 { font-size:28px; line-height:1.25; letter-spacing:-1px; margin:7px 0; font-family:"Songti SC","Noto Serif SC",serif; } .outfits-intro p { font-size:13px; color:var(--muted); margin:0; }
.outfits-list { display:grid; gap:24px; }
.outfit-card { min-width:0; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; scroll-margin-top:12px; }
.outfit-heading { display:flex; justify-content:space-between; align-items:center; padding:7px 14px; font-size:11px; letter-spacing:2px; } .outfit-heading b { font-size:20px; margin-left:5px; letter-spacing:-1px; }
.outfit-date { letter-spacing:0; color:var(--muted); font-size:11px; }
.outfit-new { font-style:normal; background:var(--wine); color:#fff; border-radius:5px; padding:3px 8px; margin-right:6px; }
.outfit-photo { display:block; width:100%; background:#fafafa; }
.outfit-visual { touch-action:pan-y; display:block; position:relative; width:100%; aspect-ratio:2/3; background:#fafafa; overflow:hidden; }
.outfit-visual img { display:block; width:100%; height:100%; object-fit:contain; }
.outfit-swipe-hint { position:absolute; bottom:10px; right:10px; font-size:10px; border-radius:20px; padding:5px 9px; background:#ffffffeb; color:#1F1C1A; }
.outfit-actions { display:flex; align-items:stretch; gap:8px; margin:10px 12px 0; }
.outfit-views { display:grid; grid-template-columns:1fr 1fr; gap:3px; flex:1; background:#EFEBE5; border-radius:9px; padding:3px; }
.outfit-views button { min-height:40px; border-radius:6px; background:transparent; font-size:12px; color:#6E675F; }
.outfit-views button[aria-pressed=true] { background:#fff; color:var(--ink); box-shadow:0 1px 5px #0000000b; font-weight:650; }
.outfit-buy { min-width:84px; padding:8px 12px; border-radius:10px; background:var(--wine); color:#fff; font-size:13px; font-weight:700; }
.outfit-copy { padding:8px 14px 12px; } .outfit-copy h2 { font-size:16px; line-height:1.4; margin:0; }

/* 抽奖页兼容（1.0 daily.css 放进全屏页里） */
.lucky-v4 .dl-hello { margin-bottom:6px; }
.lucky-v4 .dl-title { margin:4px 0 0; font-size:26px; font-family:"Songti SC","Noto Serif SC",serif; }
.lucky-v4 .dl-wheel-box .ring-wrap { --ring:min(300px,78vw); width:min(300px,78vw); height:min(300px,78vw); }
.lucky-v4 .dl-wheel { width:80%; height:80%; transition:transform 0s; }
.dl-result-card { text-align:center; }
.dl-result-ticket { padding:12px; border-radius:14px; background:var(--bg); border:1px solid var(--line); display:grid; gap:6px; }
.dl-result-ticket dl { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:0; } .dl-result-ticket dt { font-size:11px; color:var(--muted); } .dl-result-ticket dd { margin:0; font-weight:800; color:var(--wine); }
.dl-result-ticket small { color:var(--muted); font-size:11px; }
.dl-result-actions { display:grid; gap:8px; }
.w-av { display:inline-grid; place-items:center; width:20px; height:20px; margin-right:6px; border-radius:50%; background:var(--sunken); font-style:normal; font-size:10px; vertical-align:middle; }
.dl-coupon .eyebrow { margin:0; }

/* 攻略全貌：每章可展开 */
.ch-d { border-top:1px solid #f1ece5; }
.ch-d:first-of-type { border-top:0; }
.ch-d summary { list-style:none; display:grid; grid-template-columns:58px 1fr 20px; gap:8px; align-items:center; padding:10px 0; cursor:pointer; }
.ch-d summary::-webkit-details-marker { display:none; }
.ch-d .chev { color:var(--muted); transition:transform .2s; }
.ch-d[open] .chev { transform:rotate(90deg); }
.ch-d.open .ch-t small { color:var(--wine); font-weight:700; }
.ch-value { margin:0 0 8px; font-size:12px; line-height:1.7; color:var(--muted); }
.arts { display:grid; gap:2px; margin-bottom:8px; }
.art { display:flex; justify-content:space-between; gap:10px; padding:7px 10px; border-radius:8px; background:var(--bg); font-size:12px; }
.art span { min-width:0; } .art em { flex:none; font-style:normal; font-size:10px; color:var(--wine); font-weight:700; }
.art.muted { color:var(--muted); } .art.muted em { color:var(--muted); font-weight:400; }
.ch-actions { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 10px; }
.mini-btn.wine { background:var(--wine); border-color:var(--wine); color:#fff; }
.ch-deliver { margin:0 0 10px; font-size:11px; color:#8E6A33; }
.ov-seg-head em.soft { background:#f6eedd; color:#8E6A33; }
.ov-mile { width:100%; }
.master-card { display:flex; gap:14px; align-items:center; margin-top:14px; padding:16px; border-radius:16px; background:linear-gradient(110deg,#fbfaf4 0%,#f0eddf 55%,#e9e3cf 100%); border:1px solid #d8c9a2; }
.master-card b { display:block; font-size:18px; font-family:"Songti SC","Noto Serif SC",serif; } .master-card small { display:block; color:var(--muted); font-size:12px; margin:3px 0; }
.master-card .bar, .badge-card .bar { height:6px; background:#EFEBE5; border-radius:4px; margin:6px 0; overflow:hidden; } .master-card .bar i, .badge-card .bar i { display:block; height:100%; background:var(--wine); border-radius:4px; min-width:2px; }

/* 我的：沿用 1.0 排版 */
.my-card.v4 { text-align:center; padding:28px 20px 20px; background:#fff; border:1px solid var(--line); border-radius:18px; }
.my-avatar { position:relative; display:inline-grid; place-items:center; margin-bottom:16px; cursor:pointer; }
.avatar.big { width:84px; height:84px; font-size:34px; border-radius:50%; display:grid; place-items:center; background:var(--deep); color:#F3DFA8; font-family:"Songti SC","Noto Serif SC",serif; }
.ring-off { outline:2px dashed #B9B2A8; outline-offset:4px; }
.corner-badge { position:absolute; right:-8px; bottom:-6px; height:28px; z-index:3; filter:drop-shadow(0 2px 5px #1F1C1A33); } .corner-badge.left { right:auto; left:-8px; }
.me-slogan { display:grid; gap:4px; margin:0 0 12px; font-family:"Songti SC","Noto Serif SC",serif; } .me-slogan span { font-size:27px; letter-spacing:1px; }
.member-id { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--wine); background:#EFEBE5; border-radius:20px; padding:5px 13px 5px 6px; margin:0 auto 10px; font-size:12px; color:#1F1C1A; }
.member-id .no { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--ink); color:var(--red-on-dark); border-radius:14px; padding:3px 10px; font-size:13px; font-weight:700; letter-spacing:1px; }
.me-sub { margin:2px 0 16px; font-size:14px; color:var(--muted); } .me-sub .link { margin-left:6px; }
.me-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.me-act { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 4px; border-radius:12px; border:1px solid var(--line); background:var(--surface); font-size:12px; font-weight:700; }
.me-act .ic { color:var(--wine); } .me-act.primary-act { background:var(--wine); border-color:var(--wine); color:#fff; } .me-act.primary-act .ic { color:#F3DFA8; }
.badge-card.v4 { display:flex; gap:14px; align-items:center; margin-bottom:10px; padding:14px; border-radius:14px; background:linear-gradient(110deg,#fbfaf4 0%,#f0eddf 55%,#e9e3cf 100%); border:1px solid #d8c9a2; cursor:pointer; }
.badge-card.v4 .badge-art { width:64px; height:auto; flex:none; }
.badge-card.v4.captain .badge-art { filter:grayscale(1); }  /* 1.0 的队长徽章一直是银色（grayscale）；v4fix7 只写了未获得那一档，已获得就变金了 */
.badge-card.v4.captain:not(.on) .badge-art { filter:grayscale(1); opacity:.7; }
.badge-card.v4 .badge-info { flex:1; min-width:0; } .badge-card.v4 .badge-info b { display:block; font-size:17px; } .badge-card.v4 .badge-info small { display:block; color:var(--muted); font-size:12px; line-height:1.45; } .badge-card.v4 .hint-line { color:var(--ink)!important; font-weight:700; font-size:12px!important; }
.badge-card.v4 .cert-art-v4 { padding:3px; } .badge-card.v4 .cert-art-v4 .ring-wrap { --ring:64px; }
.admin-row { border-color:var(--gold); background:#fbf6ec; }
.logout { margin-top:16px; }
.edit-av { display:flex; flex-direction:column; align-items:center; gap:12px; padding:16px 0; }
.task-label input { width:100%; margin-top:6px; padding:11px; border:1px solid var(--line); border-radius:11px; font:inherit; font-size:15px; background:#fff; }

/* 经验 */
.xp-big { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px; } .xp-big b { display:block; font-size:30px; color:#fff; } .xp-big small { color:#B3A99C; font-size:11px; }
.rank-xp-link { margin-top:10px; background:none; color:#E9D7B4; font-size:12px; font-weight:700; padding:0; text-decoration:underline; }
.cert-hero.v4 { padding:22px 10px 14px; border-radius:18px; background:var(--deep); color:#F2EDE4; }
.cert-hero.v4 .cert-art-v4 { margin:0 auto; } .cert-hero.v4 .cert-art-v4 .ring-wrap { --ring:150px; }
.cert-hero.v4 p { color:#B3A99C; } .cert-hero.v4 small { display:block; margin-top:8px; color:#E9D7B4; font-size:12px; }

.cert-hero.v4 { text-align:center; }

/* ===================================================================
   第二轮走查（型爷 2026-10-14）
   =================================================================== */

/* 1.0 色值：型爷编号红字（原型里被误设成米色 #E9D7B4） */
:root { --red-on-dark:#EF4B3F; }

/* 8b · 全站统一无衬线（编号保留 1.0 的等宽数字） */
*, *::before, *::after { font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif !important; }
.member-id .no, .member-no { font-family:ui-monospace,SFMono-Regular,Menlo,monospace !important; }

/* 1 · 地图栏头和上面「通过小帅认证」卡片同宽、同圆角
   地图画布固定 350 宽居中；#main 左右各 18px 内边距（≤360px 时 14px）。
   left/right 取 (350 - 内容宽)/2，内容比 350 窄时为 0。 */
.region { left:min(0px, calc((350px - min(100vw,520px) + 36px) / 2)); right:min(0px, calc((350px - min(100vw,520px) + 36px) / 2)); border-radius:18px; }
@media (max-width:360px) { .region { left:0; right:0; } }

/* 2 · 小帅认证：地图上缩小（150→110），光环一直在转 */
.k-cert.v4 { width:110px; height:110px; margin:-55px 0 0 -55px; }
.k-cert.v4 .you { top:-14px; }
.cert-art-v4.locked .ring-wrap { opacity:.85; filter:none; }
.cert-hero.v4 .cert-art-v4 .ring-wrap { --ring:120px; }

/* 3 · 型爷本爷徽章（红底金边）：去掉偏金色的投影 */
.master-badge { filter:drop-shadow(0 3px 6px rgba(42,37,34,.25)); }
.finale, .badge-card.v4.master, .master-card { background:linear-gradient(110deg,#fbf8f4,#f3ece6); border-color:#d9c6b5; }

/* 4 · 变帅天数：日历格写日期 */
.cal i { position:relative; display:grid; place-items:center; }
.cal i span { font-size:11px; font-weight:600; color:var(--muted); font-style:normal; }
.cal i.on span { color:#fff; }
.cal i.today span { color:var(--ink); font-weight:800; }
.cal i.on.today span { color:#fff; }
.days-date { font-style:normal; font-weight:500; font-size:12px; color:var(--muted); }

/* 7 · 今日套装：今天的放左边（位置由 app.js 决定，这里只保证今天卡片突出） */
.look-pair .look-mini.today { order:0; }

/* 8a · 全部套装页：style.css 里 v1 留下的 .outfit-card（横排 + 深色背景图 + 白字）
   跟 1.0 套装卡同名，把卡片挤坏了。这里按 1.0 outfits.css 恢复。 */
.outfits-list .outfit-card { display:block; gap:0; padding:0; align-items:initial; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.outfits-list .outfit-card h2 { color:var(--ink); }
.outfits-list .outfit-card p { color:var(--muted); }
.outfits-intro.v4 h1 { font-size:30px; letter-spacing:-1px; font-weight:800; }

/* 9 · 排行榜：1.0 样式（01/02/03、前三戴皇冠、型爷编号） */
.rank-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; align-items:stretch; margin:16px 0 14px; }
.rank-podium-person { display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 4px 12px; background:#fff; border:1px solid #D9D1C5; border-radius:16px; min-width:0; text-align:center; }
.rank-podium-person.rank-place-1 { background:#EFEBE5; border-color:var(--wine); transform:translateY(-6px); }
.rank-position { font-size:20px; font-weight:800; color:#69706a; }
.rank-place-1 .rank-position { background:var(--wine); color:#fff; border-radius:8px; padding:2px 8px; }
.rank-portrait { position:relative; display:inline-flex; margin-top:13px; }
.rank-avatar-wrap { position:relative; display:inline-flex; flex-shrink:0; }
.rank-avatar { width:42px; height:42px; border-radius:50%; flex-shrink:0; }
.rank-default { display:inline-flex; justify-content:center; align-items:center; background:#EFEBE5; font-weight:800; font-size:17px; color:var(--ink); }
.rank-crown { position:absolute; left:50%; bottom:calc(100% - 3px); width:29px; height:23px; transform:translateX(-50%) rotate(-7deg); fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linejoin:round; overflow:visible; }
.crown-1 { width:33px; height:26px; fill:var(--wine); stroke:var(--ink); }
.crown-1 .crown-jewel { fill:var(--ink); stroke:none; }
.crown-2 { fill:var(--ink); transform:translateX(-50%) rotate(0); }
.crown-3 { fill:var(--paper); stroke:#6E675F; transform:translateX(-50%) rotate(7deg); }
.rank-identity { min-width:0; max-width:100%; }
.rank-identity b { display:block; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.rank-score { font-size:20px; white-space:nowrap; margin-top:auto; }
.rank-score small { font-size:10px; margin-left:3px; font-weight:400; }
.rank-podium .rank-prize { font-size:10px; padding:8px 0 0; border-top:1px solid #D9D1C5; width:100%; font-weight:650; color:var(--ink); }
.rank-list.v1 { background:#fff; border:1px solid var(--line); border-radius:16px; padding:0 14px; overflow:visible; }
.rank-list-person { display:flex; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid #EFE9E1; }
.rank-list-person:last-child { border-bottom:0; }
.rank-list-person .rank-position { font-size:14px; width:24px; flex-shrink:0; }
.rank-list-person .rank-avatar { width:34px; height:34px; font-size:14px; }
.rank-list-person .rank-identity { flex:1; }
.rank-list-person .rank-score { font-size:17px; margin:0; }
.rank-list-person.me { background:#f8eeef; margin:0 -14px; padding-left:14px; padding-right:14px; }
.rank-podium-person.me { outline:2px solid var(--wine); outline-offset:-2px; }

/* 9d · 型爷编号沿用 1.0：黑底红字 */
.member-id { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--wine); background:#EFEBE5; border-radius:20px; padding:5px 13px 5px 6px; font-size:12px; color:#1F1C1A; }
.member-id .no { background:#1F1C1A; color:#EF4B3F; border-radius:14px; padding:3px 10px; font-size:13px; font-weight:700; letter-spacing:1px; }
.rank-member-id { margin:6px 0 0; padding:3px 5px 3px 3px; gap:3px; font-size:8px; max-width:100%; flex-wrap:wrap; justify-content:center; line-height:1.4; }
.rank-member-id .no { font-size:10px; padding:2px 5px; letter-spacing:.5px; }
.rank-list-person .rank-member-id { font-size:9px; }
/* 9c · 改变页名字旁的编号（1.0 晒改变同款小胶囊） */
.member-no { display:inline-block; flex:none; font-size:10px; font-weight:600; line-height:15px; background:#1F1C1A; color:#EF4B3F; border-radius:999px; padding:0 5px; letter-spacing:.4px; vertical-align:1px; margin:0 1px 0 5px; }
.post-name { display:inline-flex; align-items:center; }

/* 10 · 我的（未登录）：「登录账号」和下面三个按钮分开 */
.my-card.v4 .me-login { display:inline-flex; min-width:180px; margin:4px auto 18px; }

/* 11 · 底部 Tab：沿用 1.0 —— 未选中浅色线条；选中图标变深色实心，下面一个酒红小圆点 */
.bottom-nav button { position:relative; color:#9a938a; font-weight:500; }
.bottom-nav button .nav-icon { background:transparent !important; border-radius:0; }
.bottom-nav button .nav-icon svg { stroke:currentColor; fill:none; stroke-width:1.5; }
.bottom-nav button.active { color:var(--deep); font-weight:600; }
.bottom-nav button.active .nav-icon svg { fill:currentColor; stroke:currentColor; }
.bottom-nav button.active::after { content:''; position:absolute; bottom:2px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--wine); }
/* 选中态实心：圆、矩形实心，线段保持描边；「改变」图里的山和太阳挖成纸色，「我的」肩膀也实心 */
.bottom-nav .nav-icon .ic { width:23px; height:23px; }
.bottom-nav button.active .nav-icon svg path { fill:none; }
.bottom-nav button[data-view="me"].active .nav-icon svg path { fill:currentColor; }
.bottom-nav button[data-view="changes"].active .nav-icon svg circle,
.bottom-nav button[data-view="changes"].active .nav-icon svg path { fill:none; stroke:var(--paper); stroke-width:1.8; }

/* ===================================================================
   第三轮（型爷 2026-10-15）
   =================================================================== */

/* 「我的」未登录：「登录账号」文字居中 */
.my-card.v4 .me-login { justify-content:center; align-items:center; text-align:center; }

/* 全部套装：图片区是按钮（点开放大），沿用 1.0 的滑动切视角 */
.outfit-photo { display:block; position:relative; width:100%; border:0; padding:0; background:#fafafa; cursor:zoom-in; }
.outfit-visual { touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.outfit-visual img { position:relative; z-index:1; -webkit-user-drag:none; pointer-events:none; }
.outfit-visual .outfit-swipe-preview { position:absolute; z-index:2; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.outfit-visual.outfit-swipe-settle img, .outfit-visual.outfit-swipe-settle .outfit-swipe-preview { transition:transform .23s cubic-bezier(.22,.8,.32,1); }
.outfit-swipe-hint { z-index:3; }
.outfit-heading .outfit-new { margin-right:0; }

/* 放大层（1.0 lightbox + outfit-zoom-tools） */
.oz { position:fixed; inset:0; z-index:90; background:#0d1213f8; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; cursor:grab; }
.oz img { flex:none; display:block; max-width:none; transform-origin:center; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; will-change:transform; }
.oz-close { position:absolute; z-index:2; top:max(14px,env(safe-area-inset-top)); right:14px; background:#ffffff26; color:#fff; border:0; border-radius:9px; padding:9px 14px; font-size:14px; }
.oz-tools { position:absolute; z-index:2; left:0; right:0; bottom:max(20px,env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:center; gap:14px; color:#fff; font-size:13px; pointer-events:none; }
.oz-tools button { pointer-events:auto; background:#ffffff26; color:#fff; border:1px solid #ffffff55; border-radius:8px; padding:8px 12px; }

/* 记录一次改变 */
.rec-photo { display:grid; place-items:center; width:100%; min-height:220px; margin:10px 0 6px; padding:0; border:1.5px dashed var(--line-accent); border-radius:16px; background:var(--surface); overflow:hidden; }
.rec-ph { display:grid; justify-items:center; gap:6px; color:var(--muted); }
.rec-ph .ic { width:30px; height:30px; color:var(--wine); }
.rec-ph b { color:var(--ink); font-size:15px; } .rec-ph small { font-size:12px; }
.rec-photo img { width:100%; max-height:420px; object-fit:contain; background:#f3efe9; }
.rec-demo { display:block; margin:0 0 12px; font-size:12px; }
.rec-eyebrow { margin:16px 0 8px; }
.rec-submit { margin-top:16px; }
.vis-seg { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.vis-seg button { display:grid; gap:2px; text-align:left; padding:12px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.vis-seg button b { font-size:15px; } .vis-seg button small { font-size:11px; color:var(--muted); line-height:1.4; }
.vis-seg button[aria-checked="true"] { border:2px solid var(--wine); padding:11px; background:#fbf3f4; }
.vis-seg button[aria-checked="true"] b { color:var(--wine); }
.vis-tag { font-style:normal; }
.vis-tag.private { color:var(--wine); font-weight:700; }
.post-card.mine .post-actions button { color:var(--muted); }

/* ===== 第四轮（10-15）===== */
/* 底部 Tab：红点单独占一行、在文字下方留出间距，不再贴字；没选中的 Tab 也留同样位置，切换时不跳 */
.bottom-nav button { gap:3px; padding-bottom:4px; }
.bottom-nav button::after { content:''; position:static; display:block; width:4px; height:4px; margin:2px auto 0; border-radius:50%; background:transparent; }
.bottom-nav button.active::after { position:static; left:auto; bottom:auto; margin:2px auto 0; background:var(--wine); }
/* 上新提醒：已订阅态 */
.mini-btn.on { background:#fbf3f4; border-color:var(--wine); color:var(--wine); font-weight:700; }

/* ===== 第五轮（10-15）：关卡 = 读一篇推文 ===== */
/* 封面 */
.cover h1 { margin:6px 0 14px; }
.cover-article { display:flex; align-items:center; gap:12px; width:100%; padding:14px; border-radius:16px; background:var(--deep); color:#F2EDE4; text-align:left; }
.cover-article .ca-ic { flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.1); color:#E9D7B4; }
.cover-article small { display:block; font-size:11px; color:#B3A99C; letter-spacing:1px; }
.cover-article b { display:block; font-size:15px; line-height:1.45; margin:2px 0; }
.cover-article em { display:block; font-style:normal; font-size:12px; color:#E9D7B4; }
.cover-article .ca-min { flex:none; margin-left:auto; font-size:12px; color:#E9D7B4; white-space:nowrap; }
.author-card { display:flex; gap:12px; align-items:flex-start; margin:14px 0 4px; padding:14px; border-radius:14px; background:#fff; border:1px solid var(--line); }
.au-av { flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--deep); color:#F3DFA8; font-weight:700; }
.au-av.sm { width:24px; height:24px; font-size:12px; }
.author-card b { display:block; font-size:14px; } .author-card small { display:block; margin-top:3px; color:var(--muted); font-size:12px; line-height:1.6; }
.cover-why { margin:14px 2px; font-size:14px; line-height:1.75; color:var(--ink); }
.cover-steps { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.cover-steps li { display:flex; gap:10px; align-items:flex-start; }
.cover-steps i { flex:none; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--sunken); font-style:normal; font-size:12px; font-weight:700; }
.cover-steps li:first-child i { background:var(--wine); color:#fff; }
.cover-steps b { display:block; font-size:14px; } .cover-steps small { display:block; color:var(--muted); font-size:12px; }
/* 播放器：常驻「原文」、上一张 + 下一张并排 */
.play-src { flex:none; display:inline-flex; align-items:center; gap:4px; padding:6px 10px; border-radius:999px; border:1px solid var(--wine); background:#fbf3f4; color:var(--wine); font-size:12px; font-weight:700; }
.play-src .ic { width:14px; height:14px; }
.play-actions.two { display:grid; grid-template-columns:auto 1fr; gap:8px; }
.play-actions.two .prev-btn { padding-left:14px; padding-right:14px; white-space:nowrap; }
.card-callout { margin-top:4px; padding:14px; border-radius:14px; background:#fbf3f4; border:1px solid #e9cfd3; }
.card-callout p { margin:0 0 10px; font-size:13px; line-height:1.6; }
.card-callout .secondary { width:100%; border-color:var(--wine); color:var(--wine); font-weight:700; }
/* 原文整页 */
.reader-page { position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; width:min(100%,520px); margin:0 auto; background:var(--paper); }
.rp-top { flex:none; height:52px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 10px; border-bottom:1px solid var(--line); font-size:14px; font-weight:700; }
.rp-back { justify-self:start; display:inline-flex; align-items:center; gap:2px; background:none; color:var(--ink); font-size:14px; padding:8px 4px; }
.rp-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:18px 20px 24px; }
.rp-article h1 { font-size:24px; line-height:1.45; margin:8px 0 10px; }
.rp-meta { display:flex; align-items:center; gap:10px; margin-bottom:18px; font-size:12px; color:var(--muted); } .rp-meta b { color:var(--ink); }
.reading { font-size:15.5px; line-height:1.9; letter-spacing:.3px; color:var(--ink); }
.reading p { margin:14px 0; }
.reading h3 { font-size:18px; line-height:1.5; margin:26px 0 10px; }
.reading img { display:block; width:100%; height:auto; border-radius:10px; margin:6px 0; }
.art-note { padding:10px 12px; border-radius:10px; background:var(--sunken); color:var(--muted); font-size:12px !important; }
.rp-cmts { margin-top:26px; padding-top:6px; border-top:8px solid var(--sunken); }
.rp-bar { flex:none; padding:10px 18px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--paper); }
.cmt-compose { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end; margin-bottom:14px; }
.cmt-compose textarea { min-height:44px; padding:10px; border:1px solid var(--line); border-radius:12px; font-size:14px; background:#fff; resize:vertical; }
.cmt-compose .primary { min-height:44px; padding:0 16px; }
.cmt { display:flex; gap:10px; padding:12px 0; border-bottom:1px solid #EFE9E1; }
.cmt-av { flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#EFEBE5; font-weight:700; font-size:13px; }
.cmt-main { flex:1; min-width:0; }
.cmt-head { display:flex; align-items:center; flex-wrap:wrap; gap:2px 4px; font-size:13px; } .cmt-head small { margin-left:auto; color:var(--muted); font-size:11px; }
.cmt-me, .cmt-author { font-style:normal; font-size:10px; padding:0 5px; border-radius:4px; background:var(--wine); color:#fff; margin-left:4px; }
.cmt-main p { margin:4px 0 6px; font-size:14px; line-height:1.65; }
.cmt-reply { margin:4px 0; padding:8px 10px; border-radius:8px; background:var(--sunken); font-size:13px; line-height:1.6; }
.cmt-acts { display:flex; gap:14px; } .cmt-acts button { background:none; padding:2px 0; color:var(--muted); font-size:12px; display:inline-flex; align-items:center; gap:3px; }
.cmt-acts button.on { color:var(--wine); font-weight:700; } .cmt-acts .ic { width:13px; height:13px; }
.reply-box { display:grid; grid-template-columns:1fr auto; gap:6px; margin-top:6px; } .reply-box input { padding:8px 10px; border:1px solid var(--line); border-radius:10px; font-size:13px; }
/* 结算页型币余额：金币落在这里 */
.settle-balance { display:inline-flex; align-items:center; gap:6px; margin:12px auto 4px; padding:6px 14px 6px 8px; border-radius:999px; background:var(--deep); color:#F2EDE4; transition:transform .2s; }
.settle-balance img { width:22px; height:22px; } .settle-balance b { font-size:18px; } .settle-balance small { color:#B3A99C; font-size:11px; }
.settle-balance.bump { transform:scale(1.15); }

/* ===== 第六轮（10-15）===== */
/* 1.3 「本关读」大卡：配图铺满、标题放大 */
.art-hero { position:relative; display:block; width:100%; min-height:200px; padding:0; border-radius:18px; overflow:hidden; text-align:left; color:#fff; background:var(--deep); }
.art-hero .ah-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.art-hero .ah-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(31,28,26,.08) 20%,rgba(31,28,26,.9) 100%); }
.art-hero .ah-tag { position:absolute; left:14px; top:14px; z-index:1; padding:3px 10px; border-radius:999px; background:var(--wine); color:#fff; font-size:12px; font-weight:700; }
.art-hero .ah-body { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:flex-end; min-height:200px; padding:16px; gap:4px; }
.art-hero b { font-size:20px; line-height:1.4; }
.art-hero em { font-style:normal; font-size:13px; color:#F3DFA8; }
.art-hero .ah-meta { display:flex; align-items:center; gap:5px; margin-top:6px; font-size:12px; color:#E8E0D5; }
.art-hero .ah-meta i { margin-left:auto; padding:6px 12px; border-radius:999px; background:#fff; color:var(--ink); font-style:normal; font-weight:700; font-size:13px; }
/* 原文上 / 下半篇 */
.rp-half { display:inline-block; margin-left:8px; padding:2px 8px; border-radius:6px; background:var(--wine); color:#fff; font-size:12px; vertical-align:4px; }
.part-note { padding:10px 12px; border-radius:10px; background:#fbf3f4; color:var(--wine) !important; font-weight:700; font-size:13px !important; }
.art-links { display:flex; gap:8px; flex-wrap:wrap; } .art-links span { padding:6px 12px; border-radius:999px; border:1px solid var(--line-accent); font-size:13px; }
/* 2 今日三件事 */
.three-head { align-items:flex-end; } .three-head small { display:block; margin-top:2px; color:var(--wine); font-size:12px; font-weight:600; }
.three-count { flex:none; padding:3px 10px; border-radius:999px; background:var(--sunken); font-weight:700; font-size:13px; }
.three-count.full { background:var(--wine); color:#fff; }
.three-bar { height:5px; margin:-2px 2px 10px; border-radius:4px; background:var(--sunken); overflow:hidden; } .three-bar i { display:block; height:100%; background:var(--wine); border-radius:4px; transition:width .4s; }
.three-left { margin:8px 2px 0; color:var(--muted); font-size:12px; text-align:center; }
.all-done { position:relative; margin-top:10px; padding:16px; border-radius:16px; text-align:center; overflow:hidden; }
.all-done.ready { background:linear-gradient(135deg,#7A2632,#4a1d24); color:#fff; animation:ad-in .5s cubic-bezier(.2,1.4,.4,1); }
.all-done.ready b { display:block; font-size:18px; } .all-done.ready small { display:block; margin:4px 0 12px; color:#F3DFA8; font-size:13px; }
.ad-claim { padding:11px 20px; border-radius:999px; background:#F3DFA8; color:#3a1a1f; font-weight:800; font-size:14px; animation:ad-pulse 1.6s ease-in-out infinite; }
.ad-burst i { position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%; background:#F3DFA8; opacity:0; animation:ad-spark 1.8s ease-out infinite; }
.ad-burst i:nth-child(1){--x:-120px;--y:-40px} .ad-burst i:nth-child(2){--x:120px;--y:-44px} .ad-burst i:nth-child(3){--x:-90px;--y:40px;animation-delay:.3s} .ad-burst i:nth-child(4){--x:96px;--y:36px;animation-delay:.3s}
.ad-burst i:nth-child(5){--x:-40px;--y:-56px;animation-delay:.6s} .ad-burst i:nth-child(6){--x:44px;--y:-58px;animation-delay:.6s} .ad-burst i:nth-child(7){--x:-150px;--y:6px;animation-delay:.9s} .ad-burst i:nth-child(8){--x:150px;--y:2px;animation-delay:.9s}
.all-done.pop { animation:ad-pop .6s ease; }
.all-done.claimed { background:#eef6f1; color:#2f6a52; font-size:13px; font-weight:800; display:flex; flex-direction:column; align-items:center; gap:2px; }
.all-done.claimed small { color:#5b8a75; font-weight:600; }
@keyframes ad-in { from { transform:scale(.9); opacity:0; } to { transform:none; opacity:1; } }
@keyframes ad-pulse { 50% { transform:scale(1.05); box-shadow:0 0 0 6px rgba(243,223,168,.25); } }
@keyframes ad-spark { 0% { opacity:0; transform:translate(-50%,-50%); } 20% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))); } }
@keyframes ad-pop { 40% { transform:scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .ad-claim, .ad-burst i, .all-done.ready { animation:none; } }
/* 3.4 排行榜按钮：「今日」标题右边 */
.rank-pill { flex:none; display:inline-flex; align-items:center; gap:8px; padding:8px 12px 8px 10px; border-radius:14px; background:var(--deep); color:#F2EDE4; text-align:left; }
.rank-pill .ic { color:#F3DFA8; } .rank-pill b { display:block; font-size:13px; } .rank-pill small { display:block; color:#B3A99C; font-size:11px; }

/* ===== 第七轮（10-15）===== */
/* 1 「本关读」大卡：背景压暗，主角是标题 */
.art-hero .ah-img { filter:brightness(.7) saturate(.85); }
.art-hero .ah-shade { background:linear-gradient(180deg,rgba(26,22,20,.55) 0%,rgba(26,22,20,.78) 45%,rgba(26,22,20,.96) 100%); }
.art-hero b { font-size:22px; line-height:1.4; letter-spacing:.3px; text-shadow:0 1px 8px rgba(0,0,0,.45); }
.art-hero em { color:#F3DFA8; text-shadow:0 1px 6px rgba(0,0,0,.4); }
/* 3 排行榜按钮：和「做完三件小事，完成今天的帅气。」底部对齐 */
.page-intro { align-items:flex-end; }
.page-intro .rank-pill { margin-bottom:0; align-self:flex-end; }
/* 3 记录：谁能看到 —— 一行小选项，默认公开，不抢眼 */
.vis-lite { display:flex; align-items:center; gap:6px; margin:14px 2px 0; font-size:12px; color:var(--muted); }
.vis-lite span { margin-right:2px; }
.vis-lite button { padding:3px 10px; border-radius:999px; border:1px solid transparent; background:none; color:var(--muted); font-size:12px; }
.vis-lite button[aria-checked="true"] { border-color:var(--line-accent); background:#fff; color:var(--ink); font-weight:700; }

/* ===== 第八轮（10-15）===== */
/* 三个主标题统一：路径 / 今日 / 改变 都用 page-intro（小字标签 + 大标题 + 一行副标题） */
.page-intro { padding:2px 2px 14px; }
.page-intro .eyebrow { font-size:11px; letter-spacing:2px; color:var(--muted); font-weight:700; }
.page-intro h1 { font-size:29px; line-height:1.2; letter-spacing:-.5px; font-weight:800; margin:5px 0 0; }
/* 「全貌」按钮：深色卡上用奶油色实心，一眼能看到 */
.overview-btn { border:0; background:#F3DFA8; color:#2A2522; font-weight:800; padding:7px 12px; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.overview-btn .ic { color:#2A2522; }
/* 改变：banner 不再放主标题，只放「起点 / 改变」对照 */
.change-hero { padding:16px; }
.change-hero .compare { margin-top:0; }
/* 完成的区段：收成一条 */
.region.collapsed { background:transparent; }
.region.collapsed .region-band { width:100%; height:44px; border:0; border-radius:16px; text-align:left; cursor:pointer; }
.region.collapsed .region-band small { color:#cdbfae; display:inline-flex; align-items:center; gap:3px; }
.region.collapsed .region-band .ic { width:12px; height:12px; color:#9fd3b4; }
.band-btns { display:inline-flex; gap:6px; }