@font-face{
  font-family:"Bric";
  src:url("fonts/Bricolage.woff2") format("woff2");
  font-weight:200 800; font-stretch:75% 100%; font-display:swap;
}

:root{
  --ink:#14172D;
  --ink-2:#4B4F66;
  --ink-3:#6B6F86;
  --line:rgba(20,23,45,.13);
  --line-2:rgba(20,23,45,.3);
  --paper:#FBF8F3;
  --paper-2:#F3EEE6;
  --white:#fff;
  --cobalt:#2341E4;
  --cobalt-d:#1A31B8;
  --cobalt-tint:#EEF1FE;
  --ring:rgba(35,65,228,.2);
  --blush:#F6D6D3;
  --blush-d:#EDB7B6;
  --blush-l:#FBE6E3;
  --powder:#DCE5F4;
  --tomato:#DF3E26;
  --tomato-t:#C42F18;
  --tomato-tint:#FDEEEA;

  --f-ui:"Bric","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --f-display:"Bric","Songti SC","Noto Serif SC","Source Han Serif SC","STSong",serif;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--f-ui); font-size:15px; line-height:1.5; color:var(--ink);
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:#DCE5F4;
}
::selection{background:rgba(35,65,228,.22)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,p,dl,dd,ul{margin:0;padding:0}
ul{list-style:none}
svg{display:block}

.canvas{
  position:relative; width:100vw; height:100vh; min-width:0; overflow:hidden;
  display:grid; place-items:center;
  background:
    radial-gradient(900px 620px at 50% 46%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#DFE8F6 0%,#D6E0F2 100%);
}
.fit{position:absolute; left:50%; top:50%; width:1180px; height:792px; margin:-396px 0 0 -590px; transform:scale(var(--fit,1)); transform-origin:center center}

.panel{
  position:relative; width:1180px; height:792px; display:grid; grid-template-columns:1fr 480px; grid-template-rows:100%;
  border-radius:28px; overflow:hidden; background:var(--paper);
  box-shadow:
    0 0 0 1px rgba(20,23,45,.04),
    0 2px 4px rgba(20,23,45,.05),
    0 38px 70px -28px rgba(35,65,228,.30),
    0 18px 36px -18px rgba(20,23,45,.22);
}

/* ---------- 左：表单列 ---------- */
.col-form{position:relative; z-index:2; padding:28px 52px 0 52px; min-width:0; display:flex; flex-direction:column}
#form{display:flex; flex-direction:column; flex:1; min-height:0}
.brandbar{display:flex; align-items:center; gap:10px; height:28px}
.brand{display:flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; border-radius:8px}
.brand:focus-visible{outline:2px solid var(--cobalt); outline-offset:4px}
.brand__mark{width:22px; height:22px; color:var(--cobalt)}
.brand__word{font-weight:800; font-size:21px; letter-spacing:-.025em; font-stretch:92%}
.brandbar__page{font-size:13px; color:var(--ink-3); padding-left:10px; margin-left:2px; position:relative}
.brandbar__page::before{content:""; position:absolute; left:0; top:50%; width:1px; height:12px; margin-top:-6px; background:var(--line-2)}
.back{margin-left:auto; display:inline-flex; align-items:center; gap:6px; border:0; background:none; padding:6px 0; font-size:13px; color:var(--ink-2); border-radius:8px}
.back svg{width:16px; height:16px}
.back:hover{color:var(--ink)}
.back:hover svg{transform:translateX(-2px)}
.back svg{transition:transform .2s var(--ease-out)}
.back:focus-visible{outline:2px solid var(--cobalt); outline-offset:3px}

/* ---------- 右：包装台 ---------- */
.col-box{position:relative; z-index:2; background:var(--blush); padding:30px 36px 30px; display:flex; flex-direction:column; min-width:0}
.boxhead{display:flex; align-items:baseline; justify-content:space-between; height:28px}
.boxhead h2{font-family:var(--f-display); font-weight:900; font-size:20px; letter-spacing:.01em}
.boxmeta{font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.scene-slot{flex:1 1 auto; min-height:0}
.scene{position:absolute; left:700px; top:62px; width:480px; height:340px; z-index:4; pointer-events:none; transform-origin:50% 50%}
.scene svg{width:100%; height:100%; overflow:visible}

.lines{display:flex; flex-direction:column}
.line{display:grid; grid-template-columns:44px 1fr auto 74px; align-items:center; column-gap:12px; height:58px}
.line + .line{border-top:1px solid rgba(20,23,45,.09)}
.thumb{width:44px; height:44px; border-radius:12px; background:var(--blush-l); display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(20,23,45,.05)}
.thumb svg{width:34px; height:34px}
.line[data-id="vase"] .thumb{background:var(--powder)}
.line[data-id="cup"] .thumb{background:var(--paper)}
.line__name{display:flex; flex-direction:column; min-width:0; line-height:1.3}
.line__name b{font-weight:600; font-size:15px; white-space:nowrap}
.line__name small{font-size:13px; color:var(--ink-2); white-space:nowrap}
.qty{display:inline-flex; align-items:center; height:28px; border-radius:999px; background:rgba(255,255,255,.58); box-shadow:inset 0 0 0 1px rgba(20,23,45,.08)}
.qty button{width:26px; height:28px; border:0; background:none; border-radius:999px; display:grid; place-items:center; color:var(--ink-2); transition:background .15s, color .15s, transform .12s}
.qty button svg{width:14px; height:14px}
.qty button:hover:not(:disabled){background:rgba(20,23,45,.07); color:var(--ink)}
.qty button:active:not(:disabled){transform:scale(.9)}
.qty button:disabled{opacity:.32; cursor:default}
.qty button:focus-visible{outline:2px solid var(--cobalt); outline-offset:1px}
.qty output{min-width:16px; text-align:center; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums}
.line__price{text-align:right; font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; letter-spacing:-.005em}

.sum{margin-top:12px; padding-top:12px; border-top:1px solid rgba(20,23,45,.14)}
.sum > div{display:flex; justify-content:space-between; align-items:baseline; height:25px; font-size:14px}
.sum dt{color:var(--ink-2)}
.sum dd{font-variant-numeric:tabular-nums; font-weight:600}
.sum .gift{color:var(--cobalt)}
.sum__total{height:auto !important; margin-top:8px; align-items:flex-end !important}
.sum__total dt{font-family:var(--f-display); font-weight:900; font-size:17px; color:var(--ink); padding-bottom:5px}
.sum__total dd{font-size:36px; font-weight:800; letter-spacing:-.03em; line-height:1.05; font-stretch:92%}
.sum__total dd i{font-style:normal; font-size:19px; font-weight:700; margin-right:2px; letter-spacing:0; vertical-align:.38em}
.promise{margin-top:14px; font-size:13px; color:var(--ink-2)}