/* 豆格 · 极简视觉系统
   原则：留白 > 装饰；一条线能解决的不用卡片；颜色只出现在内容里。 */

:root{
  --bg:#FCFBF7;
  --surface:#FFFFFF;
  --ink:#1C1915;
  --ink2:#4A453D;
  --muted:#968D7F;
  --line:#EAE4D8;
  --line2:#F6F2EA;
  --accent:#CE6038;
  --accent-soft:#F9EDE5;
  --teal:#2C7A6B;
  --teal-soft:#EAF5F1;
  --r:18px; --r-sm:12px; --r-lg:28px;
  /* 阴影用暖棕而不是纯黑：米色底上黑灰阴影会发脏，暖棕才有陶土/纸张的温度。
     三层阴影分别负责「贴边」「浮起」「离地」，越高的层越柔、越散。 */
  --sh-s:0 1px 2px rgba(74,56,34,.05);
  --sh:0 10px 30px -16px rgba(74,56,34,.24), 0 2px 6px -4px rgba(74,56,34,.10);
  --sh-lg:0 28px 68px -26px rgba(74,56,34,.32), 0 6px 18px -12px rgba(74,56,34,.16);
  --ff:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--ff); background:var(--bg); color:var(--ink);
  line-height:1.65; font-size:14px; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--accent-soft)}
/* 键盘操作也要能看见焦点在哪 */
:focus-visible{outline:2px solid rgba(206,96,56,.5);outline-offset:2px;border-radius:6px}
main{min-height:64vh}

/* ---------------------------------------------------------------- 导航 */
.nav{position:sticky;top:0;z-index:60;background:rgba(252,251,247,.82);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.stuck{border-bottom-color:var(--line)}
.nav-in{max-width:1160px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:30px}
.logo{display:flex;align-items:center;gap:9px;font-weight:650;font-size:15.5px;letter-spacing:-.2px}
.logo .dot{width:22px;height:22px;border-radius:6px;background:var(--accent);position:relative;
  box-shadow:0 4px 10px -4px rgba(206,96,56,.75), inset 0 1px 0 rgba(255,255,255,.22)}
.logo .dot::after{content:"";position:absolute;inset:5.5px;border-radius:2px;background:#FCFBF7}
.nav-links{display:flex;gap:2px}
.nav-links a{padding:7px 13px;border-radius:999px;color:var(--muted);font-size:13.5px;font-weight:500;transition:.18s}
.nav-links a:hover{color:var(--ink);background:rgba(25,23,19,.04)}
.nav-links a.on{color:var(--ink);font-weight:600}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.credits{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);padding:5px 11px 5px 8px;border-radius:999px;border:1px solid var(--line);background:#fff}
.credits b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:650}
.credits .bd{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:inset 0 0 0 2.4px #fff}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;display:grid;place-items:center;transition:.18s}
.avatar:hover{transform:translateY(-1px)}

/* ---------------------------------------------------------------- 基础 */
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.narrow{max-width:720px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;padding:0 20px;border-radius:999px;font-weight:600;font-size:13.5px;transition:.18s;border:1px solid transparent;white-space:nowrap}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#000;transform:translateY(-1px)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:#DCD2C2;background:#FFFDFA}
.btn-quiet{color:var(--muted);padding:0 8px;height:34px;font-weight:500}
.btn-quiet:hover{color:var(--ink)}
.btn-quiet:disabled{opacity:.45;cursor:default;color:var(--muted)}
.btn-sm{height:34px;padding:0 14px;font-size:12.5px;border-radius:999px}
.btn-lg{height:52px;padding:0 34px;font-size:15px}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none!important}
.btn:active:not(:disabled){transform:scale(.985)}
.opt:active,.drop:active{transform:scale(.995)}
.link{color:var(--accent);font-weight:600;border-bottom:1px solid rgba(206,96,56,.28);padding-bottom:1px}
.link:hover{border-bottom-color:var(--accent)}
.muted{color:var(--muted)}
.h1{font-size:clamp(32px,4.6vw,52px);line-height:1.12;font-weight:650;letter-spacing:-1.8px}
.h2{font-size:21px;font-weight:650;letter-spacing:-.5px}
.h3{font-size:15.5px;font-weight:650}
.eyebrow{font-size:11.5px;letter-spacing:2.6px;color:#A08E7A;font-weight:600}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.sect{padding:78px 0}
.sect-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.sect-head p{color:var(--muted);font-size:13px;margin-top:5px}
.hr{height:1px;background:var(--line);border:none}

/* ---------------------------------------------------------------- 首页 */
.hero{position:relative;padding:88px 0 40px;overflow:hidden}
.hero::before{
  content:"";position:absolute;left:50%;top:-260px;width:940px;height:620px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(255,199,168,.50),rgba(255,231,212,.26) 58%,transparent 76%);
  filter:blur(6px);pointer-events:none;
}
.hero::after{
  content:"";position:absolute;left:50%;top:-160px;width:520px;height:420px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(255,255,255,.9),transparent 70%);pointer-events:none;
}
.hero-in{position:relative;max-width:660px;margin:0 auto;padding:0 24px;text-align:center}
.hero h1{margin:16px 0 14px}
.hero .lead{color:var(--muted);font-size:15px;max-width:420px;margin:0 auto}
.ask{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 22px;max-width:520px;margin:32px auto 0;box-shadow:var(--sh-s);transition:.22s}
.ask:focus-within{border-color:#DFD5C5;box-shadow:var(--sh)}
.ask input{flex:1;border:none;outline:none;background:transparent;font-size:15px;min-width:0;height:40px}
.ask input::placeholder{color:#B9B1A3}
.ask button{height:44px;padding:0 26px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:14px;transition:.18s;flex:none}
.ask button:hover{background:#000}
.alt{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px;font-size:13px;color:var(--muted)}
.alt button{color:var(--ink2);font-weight:500;border-bottom:1px solid #DED5C6;padding-bottom:1.5px}
.alt button:hover{color:var(--accent);border-color:var(--accent)}
.sep{color:#D8D0C2}

.wall{padding-top:54px}
.wall-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.wall-head a{font-size:12.5px;color:var(--muted)}
.wall-head a:hover{color:var(--ink)}
.strip{display:flex;gap:14px;overflow-x:auto;padding:2px 0 18px;scroll-snap-type:x proximity}
.strip::-webkit-scrollbar{height:0}
.tile{flex:0 0 138px;scroll-snap-align:start;cursor:pointer}
.tile .ph{aspect-ratio:1;border-radius:16px;background:linear-gradient(180deg,#fff,#FDFBF6);border:1px solid var(--line);overflow:hidden;display:grid;place-items:center;transition:.22s;
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(74,56,34,.035)}
.tile:hover .ph{transform:translateY(-3px);box-shadow:var(--sh);border-color:#E3DACA}
.tile .ph img{width:100%;height:100%;object-fit:contain;padding:9px}
.tile b{display:block;margin-top:9px;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile span{display:block;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}

.quote{padding:80px 24px 90px;text-align:center}
.quote p{font-size:clamp(17px,2.4vw,23px);color:var(--ink2);font-weight:500;letter-spacing:-.3px;line-height:1.6}
.quote small{display:block;margin-top:14px;font-size:12px;color:var(--muted);letter-spacing:1px}

/* ---------------------------------------------------------------- 做图 */
.mk{max-width:600px;margin:0 auto;padding:52px 24px 90px}
.mk h1{font-size:26px;font-weight:650;letter-spacing:-.6px}
.mk .sub{color:var(--muted);font-size:13.5px;margin-top:6px}
.mk-box{margin-top:30px}
.mk-input{width:100%;border:none;border-bottom:1px solid var(--line);background:transparent;font-size:21px;padding:14px 2px;outline:none;transition:.2s;font-weight:500}
.mk-input::placeholder{color:#C3BBAE;font-weight:400}
.mk-input:focus{border-bottom-color:var(--ink)}
.mk-row{display:flex;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap}
.mk-row .btn-primary{flex:1;min-width:180px}
.mk-note{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.6}
.styles{display:flex;gap:7px;flex-wrap:wrap;margin-top:22px}
.st{padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:600;color:var(--muted);transition:.16s}
.st:hover{color:var(--ink);border-color:#DDD3C3}
.st.on{background:var(--ink);border-color:var(--ink);color:#fff}
.mk-or{display:flex;align-items:center;gap:14px;margin:34px 0;color:var(--muted);font-size:12px}
.mk-or::before,.mk-or::after{content:"";flex:1;height:1px;background:var(--line)}
.drop{display:flex;align-items:center;gap:14px;padding:18px 20px;border:1px dashed #DED4C3;border-radius:16px;background:#fff;cursor:pointer;transition:.18s;text-align:left;width:100%}
.drop:hover,.drop.hot{border-color:var(--accent);background:#FFFCF9}
.drop .ic{width:38px;height:38px;border-radius:11px;background:var(--line2);display:grid;place-items:center;flex:none;color:#7A7264}
.drop .ic svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.drop b{display:block;font-size:13.5px;font-weight:600}
.drop span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.preview{display:flex;gap:18px;align-items:flex-start;margin-top:24px;flex-wrap:wrap}
.preview img{width:132px;height:132px;object-fit:cover;border-radius:16px;border:1px solid var(--line);background:#fff}
.preview .meta{flex:1;min-width:180px}
.preview .meta b{font-size:13.5px}
.preview .meta p{font-size:12.5px;color:var(--muted);margin-top:4px}
.preview .acts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
details.adv{margin-top:26px}
details.adv summary{list-style:none;cursor:pointer;font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::before{content:"＋";font-size:11px}
details.adv[open] summary::before{content:"－"}
details.adv summary:hover{color:var(--ink)}
.adv-body{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px 22px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:8px}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:6px}
.seg{display:flex;gap:5px;flex-wrap:wrap}
.seg button{padding:6px 11px;border-radius:9px;border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:600;color:var(--muted)}
.seg button.on{background:var(--accent-soft);border-color:#F2C6B4;color:var(--accent)}
input[type=text],input[type=email],input[type=password],textarea{width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--line);background:#fff;font-size:13.5px;outline:none;transition:.15s}
input:focus,textarea:focus{border-color:#D9CEBC;box-shadow:0 0 0 3px rgba(206,96,56,.07)}
.switch{display:flex;align-items:center;gap:9px;font-size:13px;cursor:pointer;user-select:none}
.switch input{appearance:none;width:36px;height:21px;border-radius:999px;background:#E2DACC;position:relative;cursor:pointer;transition:.18s;flex:none}
.switch input:checked{background:var(--teal)}
.switch input::after{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.18s}
.switch input:checked::after{left:17px}

/* ---------------------------------------------------------------- 工作台 */
body[data-view=studio] .ft,body[data-view=studio] .nav{display:none}
body[data-view=studio] main{min-height:0}
.studio{display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:520px}

/* 顶栏不是一条硬线，而是一层带内高光的暖白薄板：
   品牌方标 / 竖分隔 / 标题 / 保存状态 / 动作，五段形成一条清晰的阅读节奏。 */
.studio-bar{display:flex;align-items:center;gap:12px;padding:10px 22px;flex:none;z-index:3;
  background:linear-gradient(180deg,#FDFCF8 0%,#F9F6EF 100%);
  border-bottom:1px solid rgba(120,100,72,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 6px 18px -14px rgba(74,56,34,.42)}
.ibtn{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-s);color:var(--ink2);transition:.18s}
.ibtn:hover{color:var(--ink);border-color:#DBD0BE;transform:translateX(-2px);
  box-shadow:0 3px 8px -4px rgba(74,56,34,.30)}
/* ICON.arrow 画的是向右箭头，返回要掉头 */
.ibtn svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transform:rotate(180deg)}
.brand-mini{width:22px;height:22px;border-radius:7px;background:var(--accent);position:relative;flex:none;
  box-shadow:0 4px 10px -4px rgba(206,96,56,.75), inset 0 1px 0 rgba(255,255,255,.22)}
.brand-mini::after{content:"";position:absolute;inset:5.5px;border-radius:2px;background:#FCFBF7}
.bar-sep{width:1px;height:20px;background:rgba(120,100,72,.16);flex:none}
.title-wrap{display:flex;align-items:center;gap:10px;min-width:0}
.title-in{border:none;background:transparent;font-weight:650;font-size:15px;letter-spacing:-.2px;
  padding:5px 8px;border-radius:8px;width:auto;min-width:56px;max-width:300px;outline:none;transition:.15s}
.title-in:hover{background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px var(--line)}
.title-in:focus{background:#fff;box-shadow:inset 0 0 0 1px #DCD2C2}
.savetag{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);
  white-space:nowrap;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.72);
  border:1px solid var(--line)}
.savetag::before{content:"";width:6px;height:6px;border-radius:50%;background:#7FA372;flex:none;
  box-shadow:0 0 0 2px rgba(127,163,114,.16)}
.savetag[data-state=pending]::before{background:#D8A24A;box-shadow:0 0 0 2px rgba(216,162,74,.18);
  animation:savepulse 1.1s ease-in-out infinite}
.savetag[data-state=error]::before{background:#B85433;box-shadow:0 0 0 2px rgba(184,84,51,.18)}
@keyframes savepulse{50%{opacity:.35}}
.bar-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.bar-right .btn-ghost{background:rgba(255,255,255,.75)}
.bar-right .btn-primary{box-shadow:0 4px 12px -6px rgba(28,25,21,.65), inset 0 1px 0 rgba(255,255,255,.16)}

/* 画布区 = 一张有光的工作台：中心亮、四周微暗，极淡点阵呼应图纸的方格，
   但透明度压到几乎看不见，只提供「桌面」质感，不抢豆子。 */
.stage{position:relative;flex:1;min-height:0;overflow:hidden;
  display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none;
  background:radial-gradient(125% 95% at 50% 30%, #FCFAF5 0%, #F5F0E7 58%, #EFE8DB 100%)}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(110,88,58,.16) .8px, transparent .8px);
  background-size:18px 18px;opacity:.38}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  box-shadow:inset 0 0 140px 26px rgba(96,76,50,.055)}
/* 每个工具一套光标：形状对齐工具图标，白描边保证深色豆子上也看得见。
   具体 SVG 在 js/ui/cursors.js 里生成，这里只负责「哪个工具用哪套」。 */
#board{position:relative;z-index:1;display:block;cursor:var(--cur-paint,crosshair)}
#board[data-tool=erase]{cursor:var(--cur-erase,crosshair)}
#board[data-tool=pick]{cursor:var(--cur-pick,crosshair)}
#board[data-tool=fill]{cursor:var(--cur-fill,crosshair)}
#board[data-tool=pan]{cursor:grab}
#board.panning{cursor:grabbing}
/* 三行控制板，宽度跟着图纸走（--dock-w 由 work.js 在 fit 后写入 stage），
   成为图纸的「底座」而不是横跨整屏的带子：信息层 / 操作层 / 材料层各一行。 */
.dock{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;gap:9px;
  width:min(var(--dock-w,820px),calc(100% - 40px));
  padding:11px 14px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.985),rgba(255,253,249,.965));
  border:1px solid rgba(224,214,198,.90);border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
             0 2px 6px -3px rgba(74,56,34,.14),
             0 20px 46px -20px rgba(74,56,34,.34);
  backdrop-filter:blur(14px) saturate(130%)}

/* 五个工具换成同一明度、同一彩度的「矿物色」家族：仍是五个可分辨色相，
   但不再是一排高饱和彩虹按钮，跟米色 / 陶土的整站色调是同一个温度。
   #hint 读同一组变量，说明条的颜色永远跟当前按钮一致。 */
[data-tool=paint]{--tc:#C25F38;--tc-soft:#F8E7DC}
[data-tool=erase]{--tc:#5A7E9C;--tc-soft:#E4EDF5}
[data-tool=pick]{--tc:#57836C;--tc-soft:#E3F0E7}
[data-tool=fill]{--tc:#806D9C;--tc-soft:#ECE6F3}
[data-tool=pan]{--tc:#9C813F;--tc-soft:#F2EAD5}

/* 第一行：当前工具说明（左）+ 当前色 / 图纸统计（右） */
/* 说明与统计并排居中，不再各顶一端——信息聚成一小簇，视线不用横跨整块板 */
.studio-foot{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 2px 10px;
  border-bottom:1px solid var(--line2);font-size:12px;color:var(--muted);flex:none;min-width:0}
.studio-foot b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.hint{display:flex;align-items:center;gap:9px;flex:0 1 auto;min-width:0;
  white-space:nowrap;overflow:hidden;font-size:12.5px;color:var(--ink2);
  background:var(--tc-soft);border:1px solid rgba(74,56,34,.07);
  border-radius:999px;padding:4px 11px 4px 10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(74,56,34,.04);
  transition:background-color .22s ease}
.hint .hdot{width:10px;height:10px;border-radius:50%;background:var(--tc);flex:none;
  box-shadow:0 0 0 2.5px rgba(255,255,255,.95), 0 0 0 3.5px rgba(74,56,34,.08);
  transition:background-color .22s ease}
.hint b{font-size:13.5px;font-weight:650;color:var(--ink);letter-spacing:-.1px}
.hint span{overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
.hint kbd{font-family:inherit;font-size:10px;font-weight:650;padding:1px 6px;border-radius:5px;
  background:rgba(255,255,255,.92);color:var(--tc);border:1px solid rgba(74,56,34,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.8);flex:none}
/* 统计做成带内高光的浅色胶囊：数字与单位分两个色阶，组间一根细竖线 */
.stats{display:flex;align-items:center;gap:0;flex:none;white-space:nowrap;
  font-variant-numeric:tabular-nums;padding:3px 5px;border-radius:999px;
  background:linear-gradient(180deg,#FBF8F2,#F6F1E8);
  border:1px solid rgba(224,214,198,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92)}
.stat{display:inline-flex;align-items:baseline;gap:3px;padding:1px 10px;position:relative;flex:none}
.stat+.stat::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:11px;background:rgba(120,100,72,.18)}
.stat b{font-size:12.5px;color:var(--ink);font-weight:650}
.stat i{font-style:normal;font-size:10.5px;color:var(--muted)}
.cur-chip{display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:1px 9px 1px 6px;margin-right:3px;border-right:1px solid rgba(120,100,72,.18);
  font-size:11px;color:var(--muted)}
.cur-swatch{width:16px;height:16px;border-radius:50%;background:var(--cur,#D8D0C2);flex:none;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.42), inset 0 -3px 4px rgba(0,0,0,.14),
             0 0 0 1px rgba(74,56,34,.10)}
.cur-chip b{font-size:11.5px;color:var(--ink);font-weight:650}
.cur-chip span{max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 第二行：工具放进一条浅色「托盘」，七个按钮成组而不是七个孤立药丸；
   托盘绝对居中，与图纸共用同一条轴线。 */
.dock-body{display:flex;align-items:center;justify-content:center;min-width:0}
.tools{display:inline-flex;gap:3px;flex:none;align-items:center;
  padding:4px;border-radius:14px;
  background:linear-gradient(180deg,#F7F3EB,#F1ECE2);
  border:1px solid rgba(224,214,198,.75);
  box-shadow:inset 0 1px 2px rgba(74,56,34,.07)}
.tools button{height:34px;padding:0 11px;border-radius:10px;display:inline-flex;
  align-items:center;justify-content:center;gap:7px;flex:none;transition:.16s}
.tools button[data-tool]{background:var(--tc-soft);color:var(--tc)}
.tools button[data-tool]:hover{transform:translateY(-1px);
  box-shadow:0 3px 8px -5px rgba(74,56,34,.50)}
.tools button[data-tool].on{background:var(--tc);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 5px 14px -6px var(--tc)}
.tools button[data-tool].on:hover{transform:none}
.tools .tl{font-size:12.5px;font-weight:650;color:var(--ink);white-space:nowrap;letter-spacing:-.1px}
.tools button[data-tool].on .tl{color:#fff}
.tools kbd{font-family:inherit;font-size:10px;font-weight:650;line-height:1;padding:2px 5px;
  border-radius:5px;background:rgba(74,56,34,.07);color:var(--ink2);flex:none}
.tools button[data-tool].on kbd{background:rgba(255,255,255,.24);color:#fff}
.tools button.hist{background:transparent;color:#8A8274}
.tools button.hist .tl{color:var(--ink2)}
.tools button.hist:hover:not(:disabled){background:rgba(255,255,255,.80);color:var(--ink)}
.tools button.hist:disabled{opacity:.52;cursor:default;background:transparent;color:#7A7264;transform:none}
.tools button:active:not(:disabled){transform:scale(.95)}
.tools svg{width:19px;height:19px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.dock-sep{width:1px;height:20px;background:rgba(120,100,72,.20);flex:none;margin:0 4px}

/* 第三行：色点单独一行居中，像一串摊在桌上的豆子；
   外层托盘不渐隐，只让内层滚动区右缘柔和淡出。 */
.colorbar-row{width:max-content;max-width:100%;margin:0 auto;display:flex;min-width:0;
  padding:4px 10px;border-radius:999px;
  background:linear-gradient(180deg,#FBF8F2,#F5F0E6);
  border:1px solid rgba(224,214,198,.70);
  box-shadow:inset 0 1px 2px rgba(74,56,34,.06)}
.colorbar{display:flex;align-items:center;gap:7px;overflow-x:auto;max-width:100%;min-width:0;
  padding:1px 18px 1px 2px;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 10px),transparent 100%);
  mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 10px),transparent 100%)}
.colorbar::-webkit-scrollbar{height:0}
/* 双层内阴影让色点像真实的小圆柱豆：上沿受光、下沿背光 */
.cb{position:relative;width:25px;height:25px;border-radius:50%;background:var(--c);
  border:1px solid rgba(74,56,34,.10);flex:none;transition:transform .16s, box-shadow .16s;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.40), inset 0 -3px 4px rgba(0,0,0,.13),
             0 1px 2px rgba(74,56,34,.14)}
.cb:hover{transform:translateY(-2px) scale(1.06)}
/* 视觉 25px，实际可点区域外扩 7px：手机上不用瞄准 */
.cb::after{content:"";position:absolute;inset:-7px}
.cb.on{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ink),
  inset 0 2px 2px rgba(255,255,255,.40), inset 0 -3px 4px rgba(0,0,0,.13)}
.cb.more{background:#fff;border:1px dashed #CFC5B4;color:var(--muted);font-size:14px;
  display:grid;place-items:center;line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.curdot{width:22px;height:22px;border-radius:50%;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line)}

/* 缩放指示：只有偏离"适应窗口"时才出现，点一下复位 */
.zoomchip{font-size:11px;color:var(--muted);border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:0 9px;line-height:1.75;font-variant-numeric:tabular-nums;
  margin-left:5px;transition:.15s}
.zoomchip:hover{color:var(--ink);border-color:#CFC6B8}
.stats .supply-tag{margin-left:5px}

/* ---------------------------------------------------------------- 卡片网格 */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px 16px}
.pc{cursor:pointer}
.pc .ph{aspect-ratio:1;border-radius:16px;background:linear-gradient(180deg,#fff,#FDFBF6);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;transition:.22s;position:relative;
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(74,56,34,.035)}
.pc:hover .ph{transform:translateY(-3px);box-shadow:var(--sh);border-color:#E3DACA}
.pc .ph img{width:100%;height:100%;object-fit:contain;padding:10px}
.pc b{display:block;margin-top:10px;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;font-variant-numeric:tabular-nums}
.pc .badge{position:absolute;left:9px;top:9px;font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--muted);backdrop-filter:blur(4px)}
/* 「做成什么」标签钉在右上角，跟左侧的「新手」不抢位 */
.pc .badge.use{left:auto;right:9px;color:#8A5A2B;background:rgba(255,251,244,.95)}

.tchips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 26px}
.tchip{padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--muted);transition:.16s}
.tchip:hover{color:var(--ink);border-color:#DDD3C3}
.tchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tchip i{font-style:normal;opacity:.55;margin-left:5px;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- 反馈 */
.fb-form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:34px}
.fb-list{display:flex;flex-direction:column}
.fb{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.fb:last-child{border-bottom:none}
.fb .vote{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:34px;padding-top:2px}
.fb .vote button{color:#C4BCAE;font-size:13px;line-height:1;transition:.15s}
.fb .vote button:hover{color:var(--accent)}
.fb .vote b{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.fb .body{flex:1}
.fb .body p{font-size:13.5px;margin:5px 0 7px;color:var(--ink2)}
.fb .who{font-size:11.5px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{font-size:11px;padding:1px 8px;border-radius:999px;background:var(--line2);color:var(--muted);font-weight:600}
.pill.ok{background:var(--teal-soft);color:var(--teal)}

/* ---------------------------------------------------------------- 我的 */
.me-head{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.me-head .avatar{width:44px;height:44px;font-size:15px}
.msec{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.msec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.msec-h b{font-size:13.5px;font-weight:650}
.msec-h span{font-size:11.5px;color:var(--muted)}
.msec-f{display:flex;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap}
.empty{border:1px solid var(--line);border-radius:14px;padding:26px;text-align:center;background:#fff}
.empty p{font-size:12.5px;color:var(--muted);margin-bottom:12px}
.bal{display:flex;gap:10px;margin-bottom:24px}
.bal div{flex:1;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:#fff}
.bal b{display:block;font-size:26px;font-weight:650;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.bal span{font-size:11.5px;color:var(--muted)}
.sku{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line2)}
.sku:last-child{border:none;padding-bottom:0}
.sku b{font-size:13.5px;font-weight:600}
.sku span{font-size:11.5px;color:var(--muted)}
.sku .price{font-weight:650;font-size:14.5px;font-variant-numeric:tabular-nums}
.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px;margin-top:14px}
.mini .pc .ph{border-radius:12px}
.mini .pc b{font-size:11.5px;margin-top:7px}
.mini .pc span{font-size:10.5px}
.rows{display:flex;flex-direction:column}
.row-i{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:12.5px;border-bottom:1px solid var(--line2)}
.row-i:last-child{border:none}
.row-i .nm{flex:1;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-i .ct{color:var(--muted);font-variant-numeric:tabular-nums}
.sub-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;font-size:12.5px}
.sub-links a{color:var(--muted)}
.sub-links a:hover{color:var(--ink)}

/* ---------------------------------------------------------------- 弹窗 */
.mask{position:fixed;inset:0;background:rgba(58,44,30,.36);backdrop-filter:blur(4px);z-index:100;display:grid;place-items:center;padding:20px;animation:fade .18s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:var(--r-lg);width:min(440px,100%);padding:28px;
  box-shadow:var(--sh-lg), inset 0 1px 0 rgba(255,255,255,.95);animation:pop .2s cubic-bezier(.2,.9,.3,1)}
@keyframes pop{from{transform:scale(.97) translateY(6px);opacity:0}to{transform:none;opacity:1}}
.modal h3{font-size:18px;font-weight:650;letter-spacing:-.3px}
.modal .sub{color:var(--muted);font-size:12.5px;margin:6px 0 20px}
.modal .stack{display:flex;flex-direction:column;gap:10px}
.modal .foot{display:flex;gap:9px;margin-top:20px}
.modal .foot .btn{flex:1}
.opt{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:#fff;text-align:left;transition:.16s;width:100%}
.opt:hover{border-color:#DCD2C2;background:#FFFDFA}
.opt:disabled{opacity:.5;cursor:default;background:#fff}
.opt b{display:block;font-size:13.5px;font-weight:600}
.opt span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.opt .arw{color:#D3CABB;font-size:14px}
.sec-label{font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.4px;margin:22px 0 10px}
.sec-label:first-child{margin-top:0}
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(14px);background:var(--ink);color:#fff;padding:10px 20px;border-radius:999px;font-size:13px;opacity:0;transition:.24s;z-index:200;pointer-events:none;box-shadow:var(--sh-lg);max-width:80vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:#B23A28}
body[data-view=studio] .toast{bottom:188px}

.spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:80px 0;color:var(--muted);font-size:13px}
.loading .spin{width:26px;height:26px;border-width:2.5px;border-color:#EAE2D5;border-top-color:var(--ink)}

/* ---------------------------------------------------------------- 页脚 */
.ft{border-top:1px solid var(--line);padding:34px 0 46px;color:var(--muted);font-size:12px}
.ft .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.ft-links{display:flex;gap:20px}
.ft-links a:hover{color:var(--ink)}

/* ---------------------------------------------------------------- 响应 */
@media(max-width:980px){
  .me-grid{grid-template-columns:1fr}
  .nav-links{display:none}
}
@media(max-width:700px){
  .hero{padding:60px 0 24px}
  .hero h1{letter-spacing:-1.2px}
  .sect{padding:56px 0}
  .ask{padding-left:18px}
  .ask button{padding:0 20px}
  .mk{padding:36px 20px 70px}
  .mk-input{font-size:18px}
  .grid-cards{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px 12px}
  .studio-bar{padding:8px 12px;gap:8px}
  .brand-mini,.bar-sep{display:none}
  /* 手机顶栏空间紧：保存状态收成一颗状态点，反馈不丢，字让位给标题和按钮 */
  .savetag{font-size:0;gap:0;padding:4px 9px}
  .savetag::before{width:7px;height:7px}
  .title-in{max-width:130px;font-size:14px}
  .bar-right .btn-sm{padding:0 11px}
  /* 手机上控制板四行：说明 / 统计 / 工具 / 色条，色点一行居中横滚 */
  .dock{bottom:8px;width:calc(100% - 16px);padding:9px;gap:7px;border-radius:18px}
  .studio-foot{flex-wrap:wrap;justify-content:flex-start;gap:6px;padding:0 2px 8px;font-size:11px}
  .hint{width:100%;font-size:12px;padding:3px 10px}
  .hint b{font-size:12.5px}
  .hint kbd{display:none}
  .stats{width:100%;justify-content:space-between;font-size:11px;padding:3px 4px}
  .stat{padding:1px 7px}
  .cur-chip{display:none}
  .dock-body{display:block;width:100%}
  .tools{width:100%;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;padding:3px;border-radius:13px}
  .tools button{width:100%;height:48px;flex-direction:column;gap:2px;padding:0 2px}
  .tools .tl{font-size:11px}
  .tools svg{width:18px;height:18px}
  .tools kbd{display:none}
  .dock-sep{display:none}
  .colorbar-row{width:100%;max-width:100%;padding:4px 8px}
  .colorbar{width:100%;max-width:100%;flex:none}
  .colorbar .cb{width:24px;height:24px}
  /* 手机控制板更高，提示气泡得再往上让一点 */
  body[data-view=studio] .toast{bottom:196px}
  .quote{padding:56px 24px 64px}
}

/* 系统开了"减少动态效果"就不做缩放/淡入动画 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}

/* ---------- 我的色卡 ---------- */
.supply-tag{padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:1.7;
  border:1px solid var(--line);background:#fff;color:var(--muted);transition:.15s;cursor:pointer;white-space:nowrap}
.supply-tag:hover{border-color:#CFC6B8;color:var(--ink)}
.supply-tag.ok{background:#F7FBF5;border-color:#DCE9D6;color:#5C7F51}
.supply-tag.mild{background:#FFFCF4;border-color:#F1E1C2;color:#A8762B}
.supply-tag.bad{background:#FFF7F2;border-color:#F2D5C4;color:#B85433}

.s-chips{margin:2px 0 0}
.s-chips .tchip{padding:6px 11px;font-size:12px}
.s-chips .tchip i{display:none}

.s-note{margin-top:14px;padding:11px 13px;border-radius:11px;background:#FAF8F3;border:1px solid var(--line)}
.s-note b{display:block;font-size:12.5px;font-weight:650;margin-bottom:3px}
.s-note span{display:block;font-size:11.5px;color:var(--muted);line-height:1.65}
.s-note i{display:inline-block;width:9px;height:9px;border-radius:2px;margin:0 3px 0 1px;
  vertical-align:-1px;border:1px solid rgba(0,0,0,.09)}
.s-note.ok{background:#F7FBF5;border-color:#DCE9D6}
.s-note.ok b{color:#5C7F51}
.s-note.mild{background:#FFFCF4;border-color:#F1E1C2}
.s-note.mild b{color:#A8762B}
.s-note.bad{background:#FFF7F2;border-color:#F2D5C4}
.s-note.bad b{color:#B85433}

/* 弹层打开时，提示气泡挪到顶部，别压住弹层里的按钮 */
body:has(.mask) .toast{bottom:auto;top:26px;transform:translateX(-50%) translateY(-12px)}
body:has(.mask) .toast.on{transform:translateX(-50%) translateY(0)}

/* ---------- 各页面里零散的类（原来写在 JS 的 style 属性里） ---------- */

/* 做图页：AI 重画的补充输入 / 切到重画的入口 */
.mk-ref{margin-top:26px}
.mk-switch{margin-top:22px}
.mk-switch .btn-quiet{font-size:12.5px}

/* 调色板网格：一屏铺满，可搜可滚 */
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:5px;max-height:44vh;overflow:auto}
.p-grid>[data-code]{aspect-ratio:1;border-radius:7px;border:1px solid rgba(0,0,0,.07);cursor:pointer}

/* 导出弹层底部的两个次要动作 */
.ex-foot{display:flex;justify-content:center;gap:18px;margin-top:16px}
.ex-foot .btn-quiet{font-size:11.5px}

/* 注册时的协议展开与勾选 */
.terms{font-size:12px;line-height:1.6;opacity:.8;margin:10px 0}
.terms summary{cursor:pointer}
.agree{display:flex;gap:6px;align-items:flex-start;font-size:12px;margin-bottom:10px;cursor:pointer}
.agree input{margin-top:3px}

/* 反馈页：留言框 + 邮箱 + 提交 */
.fb-send{display:flex;gap:10px;margin-top:12px;align-items:center;flex-wrap:wrap}
.fb-send input{flex:1;min-width:200px}

/* 我的 */
.me-wrap{max-width:680px;padding-top:56px;padding-bottom:90px}
.me-head b{font-size:15px}
.me-head .muted{font-size:12.5px}
.me-guard{text-align:center;padding-top:96px;padding-bottom:120px}
.me-guard p{color:var(--muted);font-size:13.5px;margin-bottom:18px}
.sku-sub{display:block;margin-top:1px}
.sku-buy{display:flex;align-items:center;gap:14px}
.sub-links button{color:var(--muted)}
.sub-links button:hover{color:var(--ink)}