/* ============ direction ============
THESIS: 回到方块工坊原本的白色玻璃前端与「一个网站，做你自己的 Minecraft 资源」，把六步向导与十类资源的真实编辑器加进去；分类不再是占位卡片。
OWN-WORLD: 暖灰白 #F5F5F0 整页统一，顶栏完全透明无边框，只有一条四等分液态玻璃导航胶囊 + 同材质品牌胶囊；低饱和石板蓝 #4A72B8，暖琥珀只用于积分；8pt 网格、统一圆角、SVG 图标、无 emoji。
STORY: 概览看懂是什么 → 资源库逐类真调 → 制作台六步从选目标到导出 → 账户管积分。
FIRST VIEWPORT: 透明顶栏左侧品牌胶囊、居中四等分导航，右侧留空；首屏标题与真实材质板。
FORM: 四视图（概览/资源库/制作台/账户），制作台内跑六步且十类资源每步都有名字与入口。
FINISH: 截图目视 + 全链路自检通过后交付。
================================================ */
:root{
 --bg:#F5F5F0;--surface:rgba(255,255,255,.70);--surface-strong:rgba(255,255,255,.90);
 --glass-line:rgba(255,255,255,.92);--line:rgba(44,48,40,.10);--line-2:rgba(44,48,40,.18);
 --text:#23251F;--text-2:#5B5F56;--text-3:#6F746A;
 --accent:#4A72B8;--accent-deep:#3A5D9B;--accent-soft:rgba(74,114,184,.10);
 --warm:#B58446;--warm-soft:rgba(181,132,70,.12);--danger:#BB5F58;--success:#5E8F72;
 --r-lg:24px;--r:18px;--r-sm:12px;
 --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s8:64px;--s10:80px;
 --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
 --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 --shadow:0 10px 32px rgba(35,38,30,.07),0 2px 8px rgba(35,38,30,.04);
 --shadow-lift:0 16px 44px rgba(35,38,30,.11),0 3px 10px rgba(35,38,30,.05);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;caret-color:var(--accent);overflow-x:clip}
::selection{background:var(--accent-soft);color:var(--accent-deep)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a{color:inherit;text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{display:block}
svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:11.5px}
*{scrollbar-width:thin;scrollbar-color:rgba(44,48,40,.22) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(44,48,40,.20);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ambient i{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.42}
.ambient i:nth-child(1){width:520px;height:520px;left:-140px;top:-200px;background:#DDE6F2}
.ambient i:nth-child(2){width:460px;height:460px;right:-120px;top:140px;background:#F0E7D8}
.ambient i:nth-child(3){width:420px;height:420px;left:38%;bottom:-240px;background:#E3E9DF}
.glass{background:var(--surface);backdrop-filter:blur(22px) saturate(175%);-webkit-backdrop-filter:blur(22px) saturate(175%);border:1px solid var(--glass-line);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.95);border-radius:var(--r)}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--s4)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-height:40px;padding:0 var(--s2);border:1px solid transparent;border-radius:var(--r-sm);background:transparent;font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;transition:background-color 180ms ease,border-color 180ms ease,color 180ms ease,transform 180ms ease,box-shadow 180ms ease}
.btn svg{width:15px;height:15px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 6px 18px rgba(74,114,184,.22)}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn-glass{background:rgba(255,255,255,.78);border-color:var(--line);color:var(--text)}
.btn-glass:hover{border-color:var(--line-2);box-shadow:0 6px 16px rgba(35,38,30,.08)}
.btn-plain{color:var(--text-2)}
.btn-plain:hover{background:rgba(255,255,255,.7);color:var(--text)}
.btn.is-on{background:var(--accent-soft);border-color:rgba(74,114,184,.26);color:var(--accent-deep)}
.btn-warm{background:var(--warm);color:#fff;border-color:var(--warm)}
.btn-warm:hover{background:#A5743C;border-color:#A5743C}
.btn-sm{min-height:36px;padding:0 var(--s2);font-size:12.5px}
.btn-lg{min-height:48px;padding:0 var(--s3);font-size:14px}
.btn .cost{font-weight:500;opacity:.78;font-size:11.5px}
.link-btn{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--text-2);font-size:12px}
.link-btn:hover{color:var(--accent)}
/* topbar: fully transparent, no second layer; brand and nav are the only glass capsules */
.topbar{position:sticky;top:0;z-index:40;background:transparent;border:0}
.topbar-inner{max-width:1240px;margin:0 auto;padding:14px var(--s4);display:flex;align-items:center;gap:var(--s2)}
.brand{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 16px 0 10px;border-radius:999px;background:var(--surface);backdrop-filter:blur(22px) saturate(175%);-webkit-backdrop-filter:blur(22px) saturate(175%);border:1px solid var(--glass-line);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.95);text-decoration:none;flex:none}
.brand-mark{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:var(--accent-soft);color:var(--accent-deep)}
.brand-mark svg{width:16px;height:16px;stroke-width:1.6}
.brand-name{font-size:14px;font-weight:650;letter-spacing:-.02em;white-space:nowrap}
.brand-en{display:inline-block;margin-left:7px;font-size:9.5px;font-weight:600;letter-spacing:.13em;color:var(--text-3);vertical-align:2px}
.nav-four{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;width:min(560px,100%);margin:0 auto;padding:4px;border:1px solid var(--glass-line);border-radius:999px;background:var(--surface);backdrop-filter:blur(22px) saturate(175%);-webkit-backdrop-filter:blur(22px) saturate(175%);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.95)}
.nav-four button{height:32px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font-size:12.5px;font-weight:550;transition:background-color 180ms ease,color 180ms ease,box-shadow 180ms ease}
.nav-four button:hover{color:var(--text)}
.nav-four button.is-active{background:#fff;color:var(--text);box-shadow:0 2px 8px rgba(35,38,30,.10)}
.topbar-spacer{width:150px;flex:none}
.view{min-height:calc(100dvh - 70px)}
/* hero */
.hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:var(--s8);align-items:center;padding:var(--s8) 0 var(--s6)}
.hero h1{margin:0 0 var(--s3);font-size:clamp(34px,4.2vw,54px);line-height:1.14;font-weight:680;letter-spacing:-.04em;text-wrap:balance;color:#1D201A}
.nowrap{white-space:nowrap}
.lede{max-width:52ch;margin:0 0 var(--s4);font-size:15.5px;line-height:1.78;color:var(--text-2)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3)}
.hero-note{margin:0;font-size:12px;color:var(--text-3)}
.board{padding:var(--s2);border-radius:var(--r-lg)}
.board-head,.board-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s1) var(--s2);font-size:12px;color:var(--text-2)}
.board-head strong{color:var(--text);font-weight:600}
.board-meta{color:var(--text-3);font-family:var(--mono);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.board-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:6px;border-radius:var(--r);background:rgba(255,255,255,.55);border:1px solid var(--line)}
.board-tile{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;cursor:crosshair;transition:transform 180ms ease,box-shadow 180ms ease}
.board-tile img{width:100%;height:100%;image-rendering:pixelated}
.board-tile:hover{transform:scale(1.06);box-shadow:0 6px 16px rgba(35,38,30,.14);z-index:2}
.explain{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s5);padding:var(--s4);border-radius:var(--r-lg)}
.explain h2{margin:0 0 var(--s2);font-size:24px;font-weight:650;letter-spacing:-.03em}
.explain p{margin:0;color:var(--text-2);font-size:13.5px;line-height:1.8}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.flow li{padding-top:var(--s1);border-top:1px solid var(--line)}
.flow span{display:block;color:var(--accent);font-family:var(--mono);font-size:11px;margin-bottom:var(--s1)}
.flow strong{display:block;font-size:13px;font-weight:620;margin-bottom:4px}
.flow p{margin:0;color:var(--text-3);font-size:11.5px;line-height:1.6}
.section{padding:var(--s8) 0 0}
.section-head{max-width:720px;margin-bottom:var(--s4)}
.section-head h2{margin:0 0 var(--s2);font-size:clamp(25px,2.6vw,32px);font-weight:650;letter-spacing:-.035em;line-height:1.28;text-wrap:balance}
.section-head p{margin:0;color:var(--text-2);font-size:14px;max-width:68ch}
.catalog{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2)}
.cat-card{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3);border-radius:var(--r);transition:transform 180ms ease,box-shadow 180ms ease;text-align:left}
.cat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.cat-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:var(--accent-soft);color:var(--accent-deep);margin-bottom:4px}
.cat-icon svg{width:18px;height:18px}
.cat-card h3{margin:0;font-size:14px;font-weight:620}
.cat-card p{margin:0;color:var(--text-2);font-size:12px;line-height:1.65;flex:1}
.cat-status{align-self:flex-start;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.8);border:1px solid var(--line);color:var(--text-3);font-size:10.5px}
.cat-status.is-ready{color:var(--success);border-color:rgba(94,143,114,.35)}
.cat-status.is-preview{color:var(--accent-deep);border-color:rgba(74,114,184,.30)}
.price-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s5);padding:var(--s4);border-radius:var(--r-lg)}
.ratio-label{color:var(--text-2);font-size:12px}
.ratio{margin:6px 0 var(--s2);font-size:clamp(30px,3.6vw,44px);font-weight:680;letter-spacing:-.045em;line-height:1.1;color:#1D201A}
.ratio small{font-size:15px;font-weight:500;letter-spacing:0;color:var(--text-2)}
.price-note{margin:0;color:var(--text-2);font-size:12.5px;line-height:1.7}
.tiers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s1)}
.tier{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:var(--s2) 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.72);text-align:left}
.tier:hover{border-color:var(--accent)}
.tier .cny{font-size:17px;font-weight:650}
.tier .pts{font-size:11.5px;color:var(--text-2)}
.tier .tag{font-size:10px;color:var(--warm)}
.price-actions{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2)}
/* library: category rail + real panel */
.page-head{padding:var(--s6) 0 var(--s4)}
.page-head h1{margin:0 0 var(--s1);font-size:clamp(28px,3vw,40px);font-weight:680;letter-spacing:-.04em}
.page-head p{margin:0;max-width:74ch;color:var(--text-2)}
.lib-wrap{display:grid;grid-template-columns:248px minmax(0,1fr);gap:var(--s2);padding-bottom:var(--s8);align-items:start}
.lib-rail{padding:var(--s2);border-radius:var(--r);position:sticky;top:88px}
.lib-rail h3{margin:0 0 var(--s2);font-size:12px;font-weight:620;color:var(--text-2);padding:0 var(--s1)}
.lib-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:1px solid transparent;border-radius:10px;background:transparent;text-align:left;margin-bottom:3px}
.lib-item:hover{background:rgba(255,255,255,.72)}
.lib-item.is-active{border-color:var(--accent);background:var(--accent-soft)}
.lib-item .cat-icon{width:28px;height:28px;border-radius:8px;margin:0;flex:none}
.lib-item .cat-icon svg{width:15px;height:15px}
.lib-item strong{font-size:12.5px;font-weight:560;flex:1}
.lib-item .lib-dot{width:7px;height:7px;border-radius:50%;background:rgba(44,48,40,.16)}
.lib-item.is-configured .lib-dot{background:var(--success)}
.panel-card{padding:var(--s4);border-radius:var(--r-lg);min-height:520px}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2);padding-bottom:var(--s3);border-bottom:1px solid var(--line);margin-bottom:var(--s3)}
.panel-head h2{margin:0 0 5px;font-size:20px;font-weight:650;letter-spacing:-.025em}
.panel-head p{margin:0;color:var(--text-2);font-size:12.5px;max-width:64ch}
.panel-head .badge{flex:none}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:10.5px;border:1px solid var(--line);background:rgba(255,255,255,.72);color:var(--text-3)}
.badge.ok{color:var(--success);border-color:rgba(94,143,114,.35)}
.badge.warn{color:var(--accent-deep);border-color:rgba(74,114,184,.3)}
.panel-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s4)}
.controls{display:flex;flex-direction:column;gap:var(--s3)}
.ctrl{display:flex;flex-direction:column;gap:7px}
.ctrl-label{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);font-size:12px;color:var(--text-2)}
.ctrl-label strong{font-weight:560;color:var(--text)}
.ctrl-label output{font-family:var(--mono);font-size:11px;color:var(--accent-deep)}
.ctrl select,.ctrl input[type=text]{height:38px;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.86);font-size:12.5px;outline:none}
.ctrl select:focus,.ctrl input:focus{border-color:var(--accent)}
.ctrl input[type=range]{width:100%;height:5px;appearance:none;background:rgba(44,48,40,.14);border-radius:3px;outline:none}
.ctrl input[type=range]::-webkit-slider-thumb{appearance:none;width:17px;height:17px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 1px 4px rgba(35,38,30,.18);cursor:pointer}
.ctrl input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:#fff;border:2px solid var(--accent);cursor:pointer}
.toggle-line{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.7);font-size:12px}
.toggle-line span{color:var(--text-2)}
.switch{position:relative;width:38px;height:22px;border:0;border-radius:999px;background:rgba(44,48,40,.18);transition:background-color 180ms ease;flex:none}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform 180ms ease}
.switch.is-on{background:var(--accent)}
.switch.is-on::after{transform:translateX(16px)}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:30px;height:30px;border:1px solid var(--line);border-radius:9px;position:relative}
.swatch.is-picked{outline:2px solid var(--accent);outline-offset:2px}
.audio-row{display:flex;align-items:center;gap:8px}
.audio-row select{flex:1}
.audio-row .btn{padding:0 12px;flex:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.72);font-size:11.5px;color:var(--text-2)}
.chip.is-picked{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}
.preview-box{padding:var(--s3);border-radius:var(--r);background:rgba(255,255,255,.62);border:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s2)}
.preview-box h3{margin:0;font-size:12.5px;font-weight:640}
.preview-stage{min-height:220px;border-radius:var(--r-sm);border:1px solid var(--line);background:#EDEDE7;display:grid;place-items:center;overflow:hidden;padding:var(--s2)}
.preview-caption{font-size:11.5px;color:var(--text-2);line-height:1.65;margin:0}
.preview-meta{display:flex;flex-wrap:wrap;gap:6px}
.preview-meta span{padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.8);border:1px solid var(--line);font-size:10.5px;color:var(--text-2)}
.pixel-canvas{width:100%;max-width:220px;aspect-ratio:1;image-rendering:pixelated;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:crosshair}
.pixel-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--text-3)}
.bench-line{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:10px 12px;border-radius:10px;background:var(--warm-soft);font-size:11.5px;color:var(--text-2)}
.panel-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--line)}
.panel-foot span{font-size:11.5px;color:var(--text-3)}
/* wizard */
.wizard{max-width:1240px;margin:0 auto;padding:var(--s5) var(--s4) var(--s10)}
.wizard-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.wizard-head h1{margin:0 0 4px;font-size:clamp(26px,2.8vw,34px);font-weight:680;letter-spacing:-.035em}
.wizard-head p{margin:0;color:var(--text-2);font-size:13px}
.step-counter{font-family:var(--mono);font-size:12px;color:var(--text-3);white-space:nowrap}
.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s1);margin-bottom:var(--s3)}
.step-node{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:var(--s2) 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.62);text-align:left;min-height:74px}
.step-node .step-n{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:rgba(44,48,40,.08);color:var(--text-2);font-family:var(--mono);font-size:11px}
.step-node strong{font-size:11.5px;font-weight:600;line-height:1.35}
.step-node.is-active{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.step-node.is-active .step-n{background:var(--accent);color:#fff}
.step-node.is-done .step-n{background:var(--success);color:#fff}
.wizard-card{padding:var(--s4);border-radius:var(--r-lg)}
.step-title{margin:0 0 6px;font-size:22px;font-weight:650;letter-spacing:-.03em}
.step-desc{margin:0 0 var(--s3);color:var(--text-2);font-size:13.5px;max-width:78ch}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.choice{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.66);text-align:left;min-height:126px}
.choice.is-picked{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.choice .choice-ic{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--accent-soft);color:var(--accent-deep)}
.choice strong{font-size:14px;font-weight:640}
.choice span{font-size:11.5px;color:var(--text-2);line-height:1.6}
.choice .tag{align-self:flex-start;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.8);border:1px solid var(--line);color:var(--text-3);font-size:10px}
.field-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.field{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2)}
.field select{height:34px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.85);font-size:12.5px}
.segmented{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.7)}
.segmented button{height:28px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font-size:12px}
.segmented button.is-picked{background:#fff;color:var(--text);box-shadow:0 2px 6px rgba(35,38,30,.10)}
.cat-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s3)}
.step-node{min-height:92px}
.step-label{font-family:var(--mono);font-size:10px;color:var(--text-3);letter-spacing:.02em}
.cat-usage{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:var(--s3)}
.cat-usage-item{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.66);text-align:left;font-size:11.5px;min-width:0}
.cat-usage-item svg{width:14px;height:14px;color:var(--accent-deep);flex:none}
.cat-usage-item span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-usage-item em{font-style:normal;font-size:10px;color:var(--text-3);white-space:nowrap}
.cat-usage-item.is-active{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.cat-usage-item.is-configured em{color:var(--success)}
.usage-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s2)}
@media (max-width:980px){.cat-usage{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.cat-usage{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cat-tab{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.72);font-size:11.5px;color:var(--text-2)}
.cat-tab.is-active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}
.ai-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--s3)}
.ai-box textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.86);font-size:13px;line-height:1.6;resize:vertical;outline:none}
.ai-box textarea:focus{border-color:var(--accent)}
.ai-actions{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2)}
.job{margin-top:var(--s2)}
.job-line{display:flex;justify-content:space-between;color:var(--text-2);font-size:11.5px;margin-bottom:6px}
.job-track{height:5px;border-radius:3px;background:rgba(44,48,40,.10);overflow:hidden}
.job-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left center;background:var(--accent);transition:transform 260ms ease}
.motherboard{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.motherboard img{width:100%;aspect-ratio:1;image-rendering:pixelated;border:1px solid var(--line);border-radius:8px}
.palette-row{display:flex;gap:6px;margin-top:var(--s2);flex-wrap:wrap}
.palette-swatch{width:28px;height:28px;border-radius:8px;border:1px solid var(--line)}
.ai-hint{margin:var(--s2) 0 0;color:var(--text-3);font-size:11.5px;line-height:1.65}
.studio-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:var(--s3)}
.preview-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s1)}
.preview-tile{position:relative;aspect-ratio:1;padding:0;border:1px solid var(--line);border-radius:9px;background:#fff;overflow:hidden;transition:transform 160ms ease}
.preview-tile img{width:100%;height:100%;image-rendering:pixelated}
.preview-tile:hover{transform:scale(1.06);z-index:2}
.preview-tile.is-active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),0 0 0 3px var(--accent-soft)}
.tile-flag{position:absolute;right:3px;top:3px;width:7px;height:7px;border-radius:2px;background:var(--warm)}
.side-card{padding:var(--s2);border-radius:var(--r);background:rgba(255,255,255,.62);border:1px solid var(--line)}
.side-card h3{margin:0 0 var(--s2);font-size:12.5px;font-weight:640}
.slider-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px;margin-bottom:var(--s2)}
.slider-row label{font-size:11.5px;color:var(--text-2)}
.slider-row output{font-family:var(--mono);font-size:11px}
.slider-row input[type=range]{grid-column:1/-1;width:100%;height:4px;margin:6px 0 0;appearance:none;background:rgba(44,48,40,.14);border-radius:2px}
.slider-row input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--accent);cursor:pointer}
.current-preview{width:100%;max-width:120px;aspect-ratio:1;margin:0 auto var(--s2);display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.8)}
.current-preview img{width:88%;height:88%;image-rendering:pixelated}
.current-meta{text-align:center;margin-bottom:var(--s2)}
.current-meta strong{display:block;font-size:13px;font-weight:620}
.current-meta span{color:var(--text-3);font-size:11px}
.side-actions{display:flex;gap:6px}
.side-actions .btn{flex:1;padding:0 6px}
.check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1)}
.check-row{display:flex;align-items:center;gap:10px;padding:10px var(--s2);border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.68);font-size:12px}
.check-row svg{color:var(--success)}
.check-row.is-warn svg{color:var(--warm)}
.check-row span{flex:1}
.check-row em{font-style:normal;font-size:10.5px;color:var(--text-3)}
.check-row:last-child:nth-child(odd){grid-column:1/-1}
.license-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:flex-end;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.license-field{display:flex;flex-direction:column;gap:5px}
.license-field label{font-size:11px;color:var(--text-2)}
.license-field select,.license-field input{height:36px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.85);font-size:12.5px}
.checkbox-line{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2);padding-bottom:9px}
.checkbox-line input{width:16px;height:16px;accent-color:var(--accent)}
.export-row{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s3)}
.summary{margin-top:var(--s3);padding:var(--s3);border-radius:var(--r);background:var(--accent-soft);border:1px solid rgba(74,114,184,.22)}
.summary h3{margin:0 0 var(--s2);font-size:13px;font-weight:640}
.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.summary-item span{display:block;font-size:10.5px;color:var(--text-3)}
.summary-item strong{font-size:12.5px;font-weight:600}
.wizard-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s2)}
.wizard-foot .foot-actions{display:flex;gap:var(--s1)}
/* account */
.account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);padding-bottom:var(--s10)}
.account-card{padding:var(--s3);border-radius:var(--r)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding-bottom:var(--s2);border-bottom:1px solid var(--line);margin-bottom:var(--s2)}
.card-head strong{font-size:13px;font-weight:620}
.hint{color:var(--text-3);font-size:11px}
.user-line{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) 0}
.user-line .avatar{width:44px;height:44px;font-size:16px}
.avatar{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent-deep);font-size:11px;font-weight:650;flex:none}
.user-line strong{display:block;font-size:15px;font-weight:620}
.user-line span{color:var(--text-3);font-size:12px}
.balance-num{font-size:44px;line-height:1.15;font-weight:660;letter-spacing:-.045em;color:#1D201A;margin:var(--s1) 0}
.balance-num small{font-size:14px;font-weight:500;letter-spacing:0;color:var(--text-2)}
.stat-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--text-2)}
.stat-row:last-child{border-bottom:0}
.stat-row strong{color:var(--text);font-weight:600}
.account-actions{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2)}
.ledger{max-height:280px;overflow-y:auto}
.ledger-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:10px 0;border-bottom:1px solid var(--line)}
.ledger-row:last-child{border-bottom:0}
.ledger-t{display:flex;flex-direction:column;gap:2px}
.ledger-t strong{font-size:12.5px;font-weight:520}
.ledger-t span{color:var(--text-3);font-size:10.5px;font-family:var(--mono)}
.delta{font-size:14px;font-weight:620}
.delta.plus{color:var(--success)}
.delta.minus{color:var(--warm)}
.empty{padding:var(--s4) var(--s2);text-align:center;color:var(--text-3);font-size:12px}
.mini-table{width:100%;border-collapse:collapse;font-size:12px}
.mini-table th{text-align:left;padding:8px 0;color:var(--text-3);font-size:10.5px;font-weight:500;border-bottom:1px solid var(--line)}
.mini-table td{padding:8px 0;border-bottom:1px solid var(--line);color:var(--text-2)}
.mini-table tr:last-child td{border-bottom:0}
.mini-table td:first-child{color:var(--text)}
/* footer, toast, modals */
.footer{margin-top:var(--s8);border-top:1px solid var(--line);background:rgba(255,255,255,.45)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:72px;color:var(--text-3);font-size:11.5px;flex-wrap:wrap}
.toast{position:fixed;right:var(--s3);bottom:var(--s3);z-index:90;max-width:380px;padding:12px var(--s2);border:1px solid var(--glass-line);border-radius:var(--r-sm);background:rgba(255,255,255,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow-lift);font-size:12.5px;animation:toast-in 220ms cubic-bezier(.2,.8,.2,1)}
.toast.is-error{border-color:rgba(187,95,88,.5);color:var(--danger)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.mask{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:var(--s2);background:rgba(35,38,30,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow-y:auto;overscroll-behavior:contain}
.modal{width:min(420px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;padding:var(--s3);border-radius:var(--r-lg);background:rgba(255,255,255,.88);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:1px solid rgba(255,255,255,.95);box-shadow:0 24px 64px rgba(35,38,30,.20),inset 0 1px 0 #fff}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s2)}
.modal-head h2{margin:0;font-size:18px;font-weight:650;letter-spacing:-.02em}
.icon-btn{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.8);color:var(--text-2)}
.modal-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;padding:4px;margin-bottom:var(--s2);border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.6)}
.modal-tabs button{height:34px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font-size:12.5px;font-weight:550}
.modal-tabs button.is-active{background:#fff;color:var(--text);box-shadow:0 2px 8px rgba(35,38,30,.10)}
.form-row{display:flex;flex-direction:column;gap:5px;margin-bottom:var(--s2)}
.form-row label{font-size:11.5px;color:var(--text-2)}
.form-row input{height:42px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.85);font-size:13px;outline:none}
.form-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form-error{min-height:18px;color:var(--danger);font-size:11.5px}
.modal-note{margin:var(--s2) 0 0;padding-top:var(--s2);border-top:1px solid var(--line);color:var(--text-3);font-size:11px;line-height:1.65}
.auth-legal{border-top:0;padding-top:0;margin-top:8px}
.auth-legal a{color:var(--accent);text-decoration:none}
.auth-legal a:hover{text-decoration:underline}
.modal .btn-block{width:100%;margin-top:var(--s1)}
.pay-tiers{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s1)}
.pay-tier{grid-column:span 2;padding:var(--s2) 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.75);text-align:center}
.pay-tier:nth-child(4),.pay-tier:nth-child(5){grid-column:span 3}
.pay-tier.is-picked{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.pay-tier strong{display:block;font-size:16px;font-weight:650}
.pay-tier span{display:block;color:var(--text-2);font-size:11px}
.pay-summary{display:flex;align-items:center;justify-content:space-between;padding:var(--s2);margin:var(--s2) 0;border-radius:var(--r-sm);background:var(--warm-soft);font-size:12.5px;color:var(--text-2)}
.pay-summary strong{color:var(--text);font-size:15px}
@media (max-width:1180px){
 .catalog{grid-template-columns:repeat(3,minmax(0,1fr))}
 .tiers{grid-template-columns:repeat(3,minmax(0,1fr))}
 .preview-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:980px){
 .hero{grid-template-columns:minmax(0,1fr);gap:var(--s5);padding:var(--s6) 0 var(--s4)}
 .explain,.price-card{grid-template-columns:minmax(0,1fr)}
 .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
 .topbar-inner{flex-wrap:wrap;gap:var(--s2);padding:10px var(--s2)}
 .nav-four{order:3;width:100%;margin:0}
 .topbar-spacer{display:none}
 .lib-wrap{grid-template-columns:minmax(0,1fr)}
 .lib-rail{position:static}
 .lib-rail .lib-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .panel-body,.ai-row,.studio-grid{grid-template-columns:minmax(0,1fr)}
 .account-grid{grid-template-columns:minmax(0,1fr)}
 .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
 .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .check-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
 .wrap{padding:0 var(--s2)}
 .wizard{padding:var(--s4) var(--s2) var(--s8)}
 .topbar-inner{padding:8px var(--s2)}
 .brand{height:38px;padding:0 12px 0 8px}
 .brand-en{display:none}
 .nav-four button{font-size:11.5px;height:30px}
 .hero h1{font-size:31px;letter-spacing:-.03em;text-wrap:initial}
 .hero h1 br{display:none}
 .lede{font-size:14px}
 .hero-actions .btn{flex:1 1 0;min-width:0;padding:0 10px}
 .board-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .catalog,.tiers,.summary-grid,.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .flow{grid-template-columns:minmax(0,1fr)}
 .section{padding-top:var(--s6)}
 .lib-rail .lib-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .panel-card,.wizard-card{padding:var(--s2)}
 .panel-body{gap:var(--s3)}
 .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .step-node{min-height:0;padding:10px}
 .step-node strong{font-size:10.5px}
 .wizard-head{flex-direction:column;align-items:flex-start}
 .preview-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 .field-row{gap:var(--s2)}
 .license-row{flex-direction:column;align-items:stretch}
 .license-field,.license-field select,.license-field input{width:100%}
 .pay-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pay-tier,.pay-tier:nth-child(4),.pay-tier:nth-child(5){grid-column:span 1}
 .footer-inner{flex-direction:column;align-items:flex-start;padding:var(--s2);gap:4px}
 .toast{left:var(--s2);right:var(--s2);max-width:none}
}
/* community: xiaohongshu-style masonry with tall / wide cards */
.community-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2)}
.community-head #publishBtn{margin-top:4px}
.community-shell{padding:var(--s2);border-radius:var(--r-lg);margin-bottom:var(--s2)}
.community-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.search-field{position:relative;display:flex;align-items:center;flex:1 1 300px;max-width:420px;min-width:220px}
.search-field>svg{position:absolute;left:13px;width:16px;height:16px;color:var(--text-3);pointer-events:none;transition:color 180ms ease}
.search-field input{width:100%;height:42px;padding:0 74px 0 38px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.78);box-shadow:inset 0 1px 2px rgba(35,38,30,.03);font-size:13px;line-height:1;outline:none;transition:border-color 180ms ease,background-color 180ms ease,box-shadow 180ms ease}
.search-field input::placeholder{color:var(--text-3)}
.search-field input::-webkit-search-decoration,.search-field input::-webkit-search-cancel-button,.search-field input::-webkit-search-results-button{display:none}
.search-field:focus-within input{border-color:rgba(74,114,184,.55);background:#fff;box-shadow:0 0 0 3px var(--accent-soft),inset 0 1px 2px rgba(35,38,30,.02)}
.search-field:focus-within>svg{color:var(--accent-deep)}
.search-kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);min-width:22px;height:22px;display:grid;place-items:center;padding:0 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:rgba(255,255,255,.82);color:var(--text-3);font-family:var(--mono);font-size:10.5px;pointer-events:none}
.search-field.has-value .search-kbd{display:none}
.search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:8px;background:rgba(44,48,40,.06);color:var(--text-2);transition:background-color 160ms ease,color 160ms ease}
.search-clear:hover{background:rgba(44,48,40,.12);color:var(--text)}
.search-clear svg{width:13px;height:13px}
.filter-groups{display:flex;flex-direction:column;gap:7px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.filter-group{display:flex;align-items:flex-start;gap:12px;min-width:0}
.filter-label{flex:0 0 28px;padding-top:6px;font-size:11px;color:var(--text-3);letter-spacing:.06em}
.filter-row{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-width:0;margin:0}
.filter-chip{height:28px;padding:0 12px;border:1px solid transparent;border-radius:999px;background:rgba(44,48,40,.045);color:var(--text-2);font-size:11.5px;line-height:1;white-space:nowrap;transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease}
.filter-chip:hover{background:rgba(44,48,40,.08);color:var(--text)}
.filter-chip.is-active{border-color:rgba(74,114,184,.26);background:var(--accent-soft);color:var(--accent-deep);font-weight:600}
.filter-sep{width:1px;height:20px;background:var(--line);align-self:center;margin:0 4px}
.community-stat{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:13px;padding-top:11px;border-top:1px solid var(--line);min-height:24px;font-size:11.5px;color:var(--text-3)}
.community-stat #communityStat{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.community-count{margin-left:auto;color:var(--text-2);font-variant-numeric:tabular-nums}
#feedReset{flex:none;color:var(--accent-deep)}
#feedReset:hover{text-decoration:underline}
.feed{columns:4;column-gap:var(--s2)}
.post-card{display:block;width:100%;break-inside:avoid;margin:0 0 var(--s2);padding:0;border:1px solid rgba(255,255,255,.96);border-radius:16px;background:var(--surface-strong);box-shadow:0 8px 24px rgba(35,38,30,.06),0 1px 3px rgba(35,38,30,.04);overflow:hidden;text-align:left;transition:transform 200ms cubic-bezier(.2,.8,.2,1),box-shadow 200ms ease,border-color 200ms ease}
.post-card:hover{transform:translateY(-3px);border-color:#fff;box-shadow:0 20px 44px rgba(35,38,30,.13),0 3px 10px rgba(35,38,30,.05)}
.post-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.post-cover{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:2px;width:100%;background:rgba(255,255,255,.8)}
.post-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,31,25,.14),rgba(28,31,25,0) 26%);pointer-events:none}
.post-card.is-tall .post-cover{aspect-ratio:3/4}
.post-card.is-wide .post-cover{aspect-ratio:4/3}
.post-cover img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.post-layout{position:absolute;z-index:1;left:8px;top:8px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.7);color:var(--text-2);font-size:10px}
.post-del{position:absolute;z-index:1;right:8px;top:8px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--line);color:var(--text-2);opacity:0;transition:opacity 160ms ease}
.post-card:hover .post-del,.post-del.is-confirm{opacity:1}
.post-del:hover{color:var(--danger);border-color:var(--danger)}
.post-del.is-confirm{color:#fff;background:var(--danger);border-color:var(--danger)}
.post-body{padding:12px}
.post-title{margin:0 0 8px;font-size:13.5px;font-weight:630;line-height:1.42;letter-spacing:-.012em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-title mark,.post-tags mark{padding:0 1px;border-radius:3px;background:rgba(181,132,70,.22);color:inherit}
.post-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.post-tags span{padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-deep);font-size:10px}
.post-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--s1);font-size:10.5px;color:var(--text-3)}
.post-author{display:flex;align-items:center;gap:6px;min-width:0}
.post-author .avatar{width:20px;height:20px;font-size:9px}
.post-author span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-likes{display:flex;align-items:center;gap:4px;flex:none}
.post-likes svg{width:12px;height:12px}
.post-verified{display:inline-flex;align-items:center;gap:4px;color:var(--success);font-size:10px}
.feed-empty{padding:var(--s6) var(--s3);text-align:center;color:var(--text-3);font-size:12.5px}
.modal-wide{width:min(600px,100%)}
.publish-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.publish-grid .full{grid-column:1/-1}
.publish-grid label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--text-2)}
.publish-grid input,.publish-grid select,.publish-grid textarea{padding:10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.86);font-size:12.5px;outline:none}
.publish-grid textarea{resize:vertical;min-height:96px;line-height:1.6}
.publish-grid input:focus,.publish-grid select:focus,.publish-grid textarea:focus{border-color:var(--accent)}
.mod-box{margin-top:var(--s2);padding:12px;border-radius:10px;background:rgba(255,255,255,.7);border:1px solid var(--line);font-size:11.5px;line-height:1.7;color:var(--text-2)}
.mod-box.is-block{border-color:rgba(187,95,88,.45);color:var(--danger);background:rgba(187,95,88,.06)}
.mod-box.is-pass{border-color:rgba(94,143,114,.4);color:var(--success)}
.mod-box strong{display:block;margin-bottom:4px;font-size:12px}
.mod-cats{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.mod-cats span{padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid var(--line);font-size:10px}
.detail-cover{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;width:100%;aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;margin-bottom:var(--s2)}
.detail-cover img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
/* 发布带照片：选图、压缩预览与照片版式 */
.publish-photos{margin-top:var(--s2)}
.publish-photos-head{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--text-2);margin-bottom:6px}
.photo-strip{display:flex;flex-wrap:wrap;gap:8px}
.photo-add{width:76px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px dashed var(--line);border-radius:10px;background:rgba(255,255,255,.6);color:var(--text-3);font-size:10.5px;cursor:pointer;transition:border-color 160ms ease,color 160ms ease}
.photo-add:hover{border-color:var(--accent);color:var(--accent-deep)}
.photo-add svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.photo-add.is-hidden{display:none}
.photo-thumb{position:relative;width:76px;height:76px;border-radius:10px;overflow:hidden;border:1px solid var(--glass-line);background:#fff}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-remove{position:absolute;right:3px;top:3px;width:20px;height:20px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(30,30,30,.62);color:#fff;cursor:pointer}
.photo-remove svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.photo-note{margin:6px 0 0;font-size:10.5px;color:var(--text-3)}
.post-cover.has-photo{grid-auto-rows:1fr}
.post-cover.has-photo img{image-rendering:auto}
.post-cover.photos-1 img{grid-column:1/-1;grid-row:1}
.post-cover.photos-3 img:nth-child(3){grid-column:1/-1}
.detail-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;margin-bottom:var(--s2)}
.detail-photo{display:block;aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;background:rgba(255,255,255,.8)}
.detail-photo img{width:100%;height:100%;object-fit:cover;display:block}
.detail-photo:only-child{grid-column:1/-1;aspect-ratio:16/9}
/* 账户页：我发布的作品 */
.account-works{grid-column:1/-1}
.my-works{display:flex;flex-direction:column;gap:8px}
.work-row{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--glass-line);border-radius:10px;background:rgba(255,255,255,.62);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color 160ms ease}
.work-row:hover{border-color:var(--accent)}
.work-thumb{width:42px;height:42px;border-radius:8px;overflow:hidden;flex:0 0 auto;background:#fff}
.work-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.work-meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.work-meta strong{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-meta .hint{font-size:10.5px}
.work-go{font-size:11px;color:var(--accent-deep);flex:0 0 auto}
/* 作品详情评论区 */
.comments{margin-top:18px;border-top:1px solid var(--glass-line);padding-top:14px}
.comments-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.comment-list{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow:auto}
.comment-item{display:flex;gap:8px}
.comment-avatar{width:24px;height:24px;border-radius:50%;background:rgba(74,114,184,.12);color:var(--accent-deep);display:grid;place-items:center;font-size:11px;flex:0 0 auto}
.comment-main{min-width:0;flex:1}
.comment-top{display:flex;gap:8px;align-items:baseline}
.comment-top strong{font-size:11.5px}
.comment-top span{font-size:10px;color:var(--text-3)}
.comment-body{margin:2px 0 0;font-size:12px;line-height:1.55;color:var(--text-2);word-break:break-word}
.comment-empty{font-size:11.5px;color:var(--text-3);padding:8px 0}
.comment-form{display:flex;gap:8px;margin-top:10px}
.comment-form input{flex:1;font:inherit;font-size:12px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.8);color:inherit;min-width:0}
.comment-form input:focus{outline:none;border-color:var(--accent)}
.comment-note{margin:6px 0 0;font-size:10px;color:var(--text-3)}
.detail-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s2)}
.detail-body{font-size:13px;line-height:1.8;color:var(--text-2);white-space:pre-wrap;max-height:260px;overflow-y:auto}
.detail-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line)}
@media (max-width:1180px){.feed{columns:3}}
@media (max-width:980px){.feed{columns:2}.publish-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.feed{columns:2;column-gap:8px}.post-card{margin-bottom:8px}.post-body{padding:10px}
 .community-shell{padding:13px}
 .community-tools{gap:8px}
 .search-field{flex:1 1 100%;max-width:none}
 .search-kbd{display:none}
 .community-tools .segmented{flex:1 1 auto}
 .community-tools .segmented button{flex:1;padding:0 10px}
 .community-tools #mineBtn{flex:0 0 auto;padding:0 12px}
 .filter-groups{gap:8px;margin-top:12px;padding-top:11px}
 .filter-group{flex-direction:column;gap:5px}
 .filter-label{padding-top:0}
 .filter-row{flex-wrap:nowrap;overflow-x:auto;gap:4px;padding-bottom:2px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}
 .filter-row::-webkit-scrollbar{display:none}
 .filter-chip{flex:none;height:27px;padding:0 10px}
 .community-stat{gap:6px}
 .community-count{margin-left:0}
 .lib-rail .lib-list{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 90%,transparent);mask-image:linear-gradient(to right,#000 90%,transparent)}
 .lib-rail .lib-list::-webkit-scrollbar{display:none}
 .lib-rail .lib-item{width:auto;flex:0 0 auto;margin:0;padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.72)}
 .lib-rail .lib-item.is-active{border-color:var(--accent);background:var(--accent-soft)}
 .lib-item strong{white-space:nowrap}
 .lib-item .lib-dot{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* ============ v2: 真瀑布流 + 顶栏滚动清晰度 ============
   原 CSS 多列瀑布流在卡片高度差异大时会留空洞（高卡放不进当前列就整张推到下一列），
   社区页「错版」就是这个原因。改为按最短列分配，列高接近、不再有洞。 */
.feed.is-masonry{columns:auto;display:flex;align-items:flex-start;gap:var(--s2)}
.feed.is-masonry .masonry-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--s2)}
.feed.is-masonry .post-card{margin:0;break-inside:auto}
@media (max-width:640px){.feed.is-masonry{gap:8px}.feed.is-masonry .masonry-col{gap:8px}}

/* 顶栏保持透明无边框；只在页面滚动后给顶部一条会淡出的磨砂，
   避免正文文字从胶囊上方和缝隙里穿出来显得像错版。 */
.topbar::before{content:'';position:absolute;left:0;right:0;top:0;height:100%;min-height:74px;pointer-events:none;z-index:0;backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 56%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 56%,transparent 100%);opacity:0;transition:opacity 240ms ease}
.topbar.is-stuck::before{opacity:1}
.topbar-inner{position:relative;z-index:1}

/* ============ v3: 离线提示、账号安全、草稿、评论管理 ============ */
.offline-bar{display:flex;align-items:center;justify-content:center;gap:var(--s2);flex-wrap:wrap;padding:10px var(--s2);background:rgba(187,95,88,.10);border-bottom:1px solid rgba(187,95,88,.28);color:#8C403A;font-size:12px}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--s2)}
.footer-links a{text-decoration:none;color:var(--text-2)}
.footer-links a:hover{color:var(--accent-deep);text-decoration:underline}
.account-form{display:flex;flex-direction:column}
.account-form .form-row input{background:rgba(255,255,255,.72)}
.account-drafts{grid-column:1/-1}
.danger-zone{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--line);flex-wrap:wrap}
.danger-zone strong{display:block;font-size:12.5px;font-weight:620;color:var(--danger)}
.danger-zone .hint{display:block;margin-top:2px}
.danger-btn{color:var(--danger)}
.danger-btn:hover{background:rgba(187,95,88,.08);color:var(--danger)}
.draft-actions{display:flex;gap:4px;flex:0 0 auto}
.draft-actions .btn{min-height:28px;padding:0 8px;font-size:11px}
.post-comments{display:flex;align-items:center;gap:4px;flex:none}
.post-comments svg{width:12px;height:12px}
.post-meta .post-stats{display:flex;align-items:center;gap:10px;flex:none}
.comment-del{margin-left:auto;border:0;background:none;color:var(--text-3);font-size:10px;padding:0 2px;cursor:pointer}
.comment-del:hover{color:var(--danger)}
.comment-del.is-confirm{color:var(--danger);font-weight:600}
.comment-top{align-items:center}
.comment-top .comment-del{align-self:center}
.comment-truncated{font-size:10.5px;color:var(--text-3);padding:2px 0 6px}
.comment-list{max-height:280px}
.detail-body:focus{outline:none}
.btn.is-liked{color:var(--danger);border-color:rgba(187,95,88,.42);background:rgba(187,95,88,.08)}
.board-tile:active{transform:scale(.96)}
@media (hover:none){.post-del{opacity:1}}
@media (max-width:640px){
 .comment-form{flex-wrap:wrap}
 .comment-form input{flex:1 1 100%}
 .comment-form .btn{flex:1 1 100%}
 .footer-links{width:100%}
 .danger-zone{flex-direction:column;align-items:flex-start}
}

button.board-tile{padding:0;appearance:none;font:inherit;color:inherit}