:root{--ink:#123c3c;--ink-deep:#0d2b2b;--paper:#f5f1e6;--paper-dim:#ece6d6;--gold:#b9892f;--accent:#2e6e5e;--danger:#a3402f;--line:#123c3c29}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{background:var(--paper);color:#22302e;min-height:100vh;font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif;line-height:1.6}#root{flex-direction:column;min-height:100vh;display:flex}.serif{font-family:Noto Serif SC,Songti SC,SimSun,serif}.topbar{z-index:50;background:var(--ink);color:var(--paper);align-items:center;gap:16px;height:60px;padding:0 clamp(16px,4vw,40px);display:flex;position:sticky;top:0;box-shadow:0 2px 12px #0d2b2b40}.topbar .brand{letter-spacing:2px;color:var(--paper);align-items:baseline;gap:10px;font-size:20px;text-decoration:none;display:flex}.topbar .brand .seal{border:1.5px solid var(--gold);width:28px;height:28px;color:var(--gold);border-radius:4px;justify-content:center;align-items:center;font-size:15px;display:inline-flex;transform:translateY(4px)}.topbar .spacer{flex:1}.topbar a.nav{color:#f5f1e6d9;border-radius:6px;padding:6px 10px;font-size:14px;text-decoration:none;position:relative}.topbar a.nav:hover{color:#fff;background:#ffffff14}.topbar a.nav .badge{background:var(--gold);color:#fff;text-align:center;border-radius:9px;min-width:17px;height:17px;padding:0 3px;font-size:11px;line-height:17px;position:absolute;top:-4px;right:-4px}.page{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:clamp(18px,4vw,40px) clamp(16px,4vw,40px) 80px}.page-head{margin:10px 0 26px}.page-head h1{color:var(--ink-deep);letter-spacing:3px;font-size:clamp(22px,3.4vw,30px)}.page-head .sub{color:#6a7a76;margin-top:6px;font-size:14px}.page-head .rule{background:var(--gold);border-radius:2px;width:64px;height:3px;margin-top:12px}.cats{flex-wrap:wrap;gap:10px;margin-bottom:26px;display:flex}.cats button{border:1px solid var(--line);color:var(--ink);cursor:pointer;background:#fff;border-radius:999px;padding:7px 18px;font-size:14px;transition:all .15s}.cats button:hover{border-color:var(--accent);color:var(--accent)}.cats button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}.grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;display:grid}.card{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:10px;flex-direction:column;transition:transform .18s,box-shadow .18s;display:flex;overflow:hidden}.card:hover{transform:translateY(-3px);box-shadow:0 10px 26px #123c3c24}.card .thumb{aspect-ratio:1;background:var(--paper-dim);position:relative;overflow:hidden}.card .thumb img{object-fit:cover;width:100%;height:100%;display:block}.card .tag{color:#fff;background:#b9892feb;border-radius:999px;padding:2px 10px;font-size:12px;position:absolute;top:10px;left:10px}.card .info{flex-direction:column;flex:1;padding:14px 16px 16px;display:flex}.card .name{color:var(--ink-deep);flex:1;font-size:16px;font-weight:600;line-height:1.45}.card .meta{justify-content:space-between;align-items:baseline;margin-top:12px;display:flex}.card .price{color:var(--danger);font-size:19px;font-weight:700}.card .price .rmb{margin-right:1px;font-size:13px}.card .cat{color:#93a19d;font-size:12px}.detail{grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:clamp(20px,4vw,48px);display:grid}@media (width<=760px){.detail{grid-template-columns:1fr}}.detail .gallery .main{border:1px solid var(--line);background:#fff;border-radius:10px;overflow:hidden}.detail .gallery .main img{aspect-ratio:1;object-fit:cover;width:100%;display:block}.detail .thumbs{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.detail .thumbs img{object-fit:cover;cursor:pointer;opacity:.75;border:2px solid #0000;border-radius:6px;width:58px;height:58px}.detail .thumbs img.on{border-color:var(--gold);opacity:1}.detail .panel h1{color:var(--ink-deep);margin-bottom:10px;font-size:clamp(20px,3vw,26px)}.detail .panel .price{color:var(--danger);margin:12px 0;font-size:28px;font-weight:700}.detail .panel .price .rmb{font-size:16px}.detail .panel .desc{color:#4c5a57;text-align:justify;margin:14px 0 22px;font-size:14.5px}.qty-row{align-items:center;gap:14px;margin:18px 0 26px;display:flex}.qty-row .label{color:#556561;font-size:14px}.stepper{border:1px solid var(--line);background:#fff;border-radius:8px;display:inline-flex;overflow:hidden}.stepper button{width:38px;height:36px;color:var(--ink);cursor:pointer;background:0 0;border:none;font-size:18px}.stepper button:hover{background:var(--paper-dim)}.stepper .num{text-align:center;border-left:1px solid var(--line);border-right:1px solid var(--line);width:52px;font-size:15px;line-height:36px}.btn{cursor:pointer;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:12px 26px;font-family:inherit;font-size:15px;text-decoration:none;transition:all .15s;display:inline-flex}.btn-primary{background:var(--ink);color:var(--paper)}.btn-primary:hover{background:var(--ink-deep)}.btn-outline{border-color:var(--ink);color:var(--ink);background:0 0}.btn-outline:hover{background:#123c3c0f}.btn-gold{background:var(--gold);color:#fff}.btn-gold:hover{filter:brightness(1.06)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-lg{padding:14px 34px;font-size:16px}.btn-row{flex-wrap:wrap;gap:14px;display:flex}.list-box{border:1px solid var(--line);background:#fff;border-radius:10px;overflow:hidden}.row-item{border-bottom:1px solid var(--paper-dim);grid-template-columns:84px 1fr auto auto;align-items:center;gap:16px;padding:16px 20px;display:grid}.row-item:last-child{border-bottom:none}.row-item img{object-fit:cover;background:var(--paper-dim);border-radius:8px;width:84px;height:84px}.row-item .name{color:var(--ink-deep);font-size:15px}.row-item .unit{color:#8a9693;margin-top:4px;font-size:13px}.row-item .subtotal{color:var(--danger);text-align:right;min-width:70px;font-weight:600}.form{border:1px solid var(--line);background:#fff;border-radius:10px;max-width:560px;padding:clamp(18px,3vw,30px)}.form .field{margin-bottom:18px}.form label{color:var(--ink-deep);margin-bottom:7px;font-size:14px;display:block}.form label .req{color:var(--danger);margin-left:2px}.form input,.form textarea{border:1px solid var(--line);color:#22302e;background:#fffdf8;border-radius:8px;width:100%;padding:11px 13px;font-family:inherit;font-size:15px}.form input:focus,.form textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #2e6e5e1f}.form textarea{resize:vertical;min-height:74px}.form .err{color:var(--danger);margin-top:4px;font-size:13px}.summary-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-top:22px;display:flex}.summary-bar .total{color:#4c5a57;font-size:15px}.summary-bar .total b{color:var(--danger);margin-left:4px;font-size:22px}.order-card{border:1px solid var(--line);background:#fff;border-radius:10px;max-width:640px;padding:clamp(18px,3vw,32px)}.status-badge{border-radius:999px;align-items:center;gap:8px;margin-bottom:18px;padding:5px 16px;font-size:14px;display:inline-flex}.status-badge.pending{color:#8a6417;background:#f7ecd4}.status-badge.paid{color:var(--accent);background:#e2efe7}.status-badge.shipped{color:#2c5a86;background:#e3ecf5}.status-badge.done{color:#555;background:#e6e6e6}.status-badge.cancelled{color:var(--danger);background:#f3e0dc}.kv{grid-template-columns:88px 1fr;gap:8px 14px;margin:14px 0;font-size:14.5px;display:grid}.kv .k{color:#8a9693}.order-items{border-top:1px dashed var(--line);margin-top:16px;padding-top:16px}.order-items .oi{justify-content:space-between;padding:5px 0;font-size:14.5px;display:flex}.order-items .oi span:last-child{color:#556561}.demo-note{color:#7c6524;background:#faf5e4;border:1px solid #e8d9a8;border-radius:8px;margin-top:22px;padding:12px 16px;font-size:13px;line-height:1.7}.empty{text-align:center;color:#8a9693;padding:70px 0;font-size:15px}.loading{text-align:center;color:#8a9693;letter-spacing:4px;padding:80px 0}.footer{background:var(--ink-deep);color:#f5f1e6a6;text-align:center;padding:26px 16px;font-size:12.5px;line-height:2}.footer a{color:#f5f1e6cc;text-decoration:none}.footer a:hover{color:#fff}.back-link{color:var(--accent);margin-bottom:18px;font-size:14px;text-decoration:none;display:inline-block}.back-link:hover{text-decoration:underline}