:root{
  --ink:#15161B;
  --ink-2:#1D1F27;
  --fabric:#F2EEE4;
  --line:#2B2D36;
  --blue:#3557A6;
  --red:#C1442D;
  --yellow:#E8B23D;
  --grey:#8B8B85;
}
*{box-sizing:border-box;}
body{
  margin:0; background:#0F1013; color:var(--fabric);
  font-family:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:"JetBrains Mono", monospace;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

.topbar{background:var(--ink); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; height:64px;}
.brand{color:var(--fabric); font-weight:900; font-size:18px; text-decoration:none;}
.track-link{color:var(--grey); font-size:14px; text-decoration:none;}
.track-link:hover{color:var(--fabric);}

.layout{display:grid; grid-template-columns:1fr 320px; gap:36px; padding:40px 24px 100px;}
@media (max-width:860px){ .layout{grid-template-columns:1fr;} }

.stepper{list-style:none; display:flex; gap:0; margin:0 0 32px; padding:0; border:1px solid var(--line);}
.stepper li{flex:1; text-align:center; padding:14px 8px; font-size:13px; color:var(--grey); border-right:1px solid var(--line);}
.stepper li:last-child{border-right:none;}
.stepper li.active{color:var(--ink); background:var(--yellow); font-weight:700;}
.stepper li.done{color:var(--fabric); background:var(--blue);}

.step-panel{display:none; background:var(--ink-2); border:1px solid var(--line); padding:32px; }
.step-panel.active{display:block;}
.step-panel h2{margin:0 0 8px; font-size:22px;}
.hint{color:var(--grey); font-size:13.5px; margin:0 0 24px; line-height:1.6;}

.field{margin-bottom:20px;}
.field label{display:block; font-size:13px; color:var(--grey); margin-bottom:8px;}
.field-row{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:600px){ .field-row{grid-template-columns:1fr;} }

input[type=text], input[type=email], input[type=number], select, textarea{
  width:100%; background:var(--ink); border:1px solid var(--line); color:var(--fabric);
  padding:12px 14px; font-size:14px; font-family:inherit;
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--yellow); outline-offset:1px;}

.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
@media (max-width:600px){ .product-grid{grid-template-columns:repeat(2,1fr);} }
.product-card{
  border:1px solid var(--line); padding:16px 12px; text-align:center; cursor:pointer;
  background:var(--ink); transition:all .15s ease;
}
.product-card:hover{border-color:var(--grey);}
.product-card.selected{border-color:var(--yellow); background:rgba(232,178,61,0.08);}
.product-card .p-name{font-weight:700; font-size:14px; margin-bottom:6px;}
.product-card .p-price{font-size:12px; color:var(--grey);}

.upload-box{
  border:2px dashed var(--line); padding:48px 20px; text-align:center; cursor:pointer; margin-bottom:24px;
  transition:border-color .15s ease;
}
.upload-box.dragover{border-color:var(--yellow);}
.upload-icon{font-size:28px; margin:0 0 10px; color:var(--yellow);}
#previewImg{max-width:220px; max-height:220px; margin:0 auto 12px; border:1px solid var(--line);}
#previewName{font-size:12px; color:var(--grey); word-break:break-all; margin-bottom:14px;}

.position-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:24px;}
@media (max-width:600px){ .position-grid{grid-template-columns:repeat(2,1fr);} }
.pos-card{border:1px solid var(--line); padding:14px; cursor:pointer; background:var(--ink); font-size:13.5px;}
.pos-card.selected{border-color:var(--blue); background:rgba(53,87,166,0.12);}
.pos-card .pos-price{color:var(--grey); font-size:12px; margin-top:4px;}

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 24px; font-weight:700; font-size:14px;
  border:1.5px solid transparent; cursor:pointer; transition:all .15s ease;
}
.btn-primary{background:var(--red); color:var(--fabric); border-color:var(--red);}
.btn-primary:hover{background:transparent; color:var(--red);}
.btn-outline{border-color:var(--grey); color:var(--fabric); background:transparent;}
.btn-outline:hover{border-color:var(--fabric);}
.btn.small{padding:8px 14px; font-size:12px;}
.btn-row{display:flex; justify-content:space-between; gap:12px; margin-top:8px;}

.error{color:var(--red); font-size:13px; margin-top:12px; min-height:18px;}

.cart-col{position:sticky; top:88px; align-self:start;}
.cart-col h3{font-size:15px; margin:0 0 14px; color:var(--grey); letter-spacing:0.04em;}
.cart-list{display:flex; flex-direction:column; gap:10px; margin-bottom:20px;}
.empty-cart{color:var(--grey); font-size:13px;}
.cart-item{border:1px solid var(--line); background:var(--ink-2); padding:12px 14px; font-size:13px; position:relative;}
.cart-item .ci-title{font-weight:700; margin-bottom:4px;}
.cart-item .ci-meta{color:var(--grey); font-size:12px; line-height:1.6;}
.cart-item .ci-remove{position:absolute; top:10px; right:10px; background:none; border:none; color:var(--grey); cursor:pointer; font-size:14px;}
.cart-item .ci-remove:hover{color:var(--red);}

.quote-box{border:1px solid var(--line); background:var(--ink-2); padding:18px;}
.quote-row{display:flex; justify-content:space-between; font-size:13.5px; padding:6px 0; color:var(--grey);}
.quote-row.total{border-top:1px solid var(--line); margin-top:6px; padding-top:12px; color:var(--fabric); font-weight:900; font-size:17px;}
.tier-hint{font-size:11.5px; color:var(--grey); margin:12px 0 0;}