:root { --ink:#15211c; --muted:#6d7772; --green:#087443; --green-dark:#05532f; --cream:#f5f3e9; --line:#dce3df; --white:#fff; --shadow:0 18px 50px rgba(21,33,28,.09); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#fafbf9; font:15px/1.6 "Microsoft YaHei",system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
.store-header { height:76px; padding:0 max(24px,calc((100% - 1240px)/2)); display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid var(--line); position:relative; z-index:2; }
.store-brand { display:flex; align-items:center; gap:13px; font-size:17px; font-weight:700; }
.brand-mark { width:44px; height:44px; display:grid; place-items:center; color:#fff; background:var(--green); border-radius:12px 4px 12px 4px; font-size:13px; }
.brand-logo { width:48px; height:48px; display:block; object-fit:cover; border-radius:12px; box-shadow:0 4px 12px rgba(21,33,28,.14); }
.store-header nav { display:flex; align-items:center; gap:8px; }
.store-header nav a { padding:10px 15px; border-radius:8px; color:#56615c; }
.store-header nav a:hover,.store-header nav a.active { color:var(--green); background:#eef7f2; }
.store-header nav .seller-link { border:1px solid #bbd6c7; }
.hero { padding:65px 24px 110px; text-align:center; color:#fff; background:radial-gradient(circle at 78% 24%,rgba(184,224,139,.24),transparent 25%),linear-gradient(120deg,#063b24,#0b7043); }
.eyebrow { color:#8abea0; font-weight:800; font-size:12px; letter-spacing:.18em; }
.hero .eyebrow { color:#9ed5b6; }
.hero h1 { margin:10px 0 8px; font-size:42px; letter-spacing:.05em; }
.hero p { margin:0; color:#c9ded2; font-size:16px; }
.store-layout { width:min(1240px,calc(100% - 40px)); margin:-52px auto 70px; display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:28px; align-items:start; position:relative; }
.store-layout>div { background:#fff; border-radius:18px; padding:28px; box-shadow:var(--shadow); }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:22px; }
.section-heading h2 { margin:2px 0 0; font-size:25px; }
.section-heading>span { color:var(--muted); font-size:13px; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.product-card { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; transition:.25s; }
.product-card:hover { transform:translateY(-5px); box-shadow:0 13px 30px rgba(21,33,28,.10); }
.product-card.featured { border-color:#8fc2a5; }
.product-art { height:165px; display:grid; place-items:center; color:#fff; overflow:hidden; position:relative; }
.product-art::before,.product-art::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.25); border-radius:50%; width:150px; height:150px; }
.product-art::before { left:-60px; top:-75px; }.product-art::after { right:-65px; bottom:-95px; }
.product-art span { width:78px; height:78px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:rgba(255,255,255,.12); backdrop-filter:blur(4px); font-weight:800; font-size:19px; }
.product-art.starter { background:linear-gradient(140deg,#4f9c72,#176240); }.product-art.plus { background:linear-gradient(140deg,#d19d3f,#9a561a); }.product-art.premium { background:linear-gradient(140deg,#4c567e,#222c54); }
.product-body { padding:18px; }.tag { color:var(--green); background:#e9f5ee; border-radius:20px; padding:4px 9px; font-size:11px; font-weight:700; }
.product-body h3 { margin:12px 0 5px; font-size:17px; }.product-body p { color:var(--muted); min-height:48px; margin:0 0 18px; font-size:13px; }
.product-foot { display:flex; align-items:center; justify-content:space-between; }.product-foot strong { font-size:22px; color:#c6562d; }.choose-btn { border:0; border-radius:7px; padding:8px 12px; color:#fff; background:var(--green); cursor:pointer; }.choose-btn:hover { background:var(--green-dark); }
.order-panel { background:#fff; border-radius:18px; padding:25px; box-shadow:var(--shadow); position:sticky; top:20px; }
.panel-title { padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line); }.panel-title span { display:block; font-size:21px; font-weight:800; }.panel-title small { color:var(--muted); }
label { display:block; margin-bottom:14px; font-size:13px; font-weight:700; }label small { color:var(--muted); font-weight:400; }
input,select,textarea { width:100%; margin-top:6px; border:1px solid #ccd6d0; border-radius:8px; padding:10px 11px; background:#fff; color:var(--ink); outline:none; transition:.2s; }
input:focus,select:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(8,116,67,.1); }
textarea { resize:vertical; }.total-row { display:flex; justify-content:space-between; align-items:center; margin:20px 0 14px; }.total-row strong { color:#c6562d; font-size:24px; }
.submit-order { width:100%; border:0; border-radius:9px; padding:13px; color:#fff; background:var(--green); cursor:pointer; font-weight:700; }.submit-order:hover { background:var(--green-dark); }.submit-order:disabled { opacity:.55; cursor:wait; }
.form-message { min-height:24px; margin:10px 0 0; font-size:13px; text-align:center; }.form-message.success { color:var(--green); }.form-message.error { color:#ba3f32; }
footer { padding:25px; text-align:center; color:#7a847f; border-top:1px solid var(--line); background:#fff; }
.seller-page { min-height:100vh; background:linear-gradient(135deg,#eff5f1,#faf8ef); }.seller-main { width:min(1100px,calc(100% - 40px)); margin:60px auto; }
.login-card { width:min(430px,100%); margin:90px auto; padding:38px; border-radius:20px; background:#fff; box-shadow:var(--shadow); }.login-icon { width:58px; height:58px; margin-bottom:22px; display:grid; place-items:center; color:#fff; background:var(--green); border-radius:16px; font-size:24px; font-weight:800; }.login-card h1 { margin:4px 0; }.login-card>p { color:var(--muted); margin:0 0 24px; }
.hidden { display:none !important; }.orders-view { padding:34px; border-radius:20px; background:#fff; box-shadow:var(--shadow); }.orders-header { display:flex; justify-content:space-between; align-items:center; }.orders-header h1 { margin:3px 0 0; }.orders-header p { color:var(--muted); margin:0; }.orders-actions { display:flex; gap:10px; }.orders-actions button { padding:9px 15px; border:1px solid var(--green); color:#fff; background:var(--green); border-radius:8px; cursor:pointer; }.orders-actions button.ghost { color:var(--green); background:#fff; }
.stats { display:grid; grid-template-columns:1fr; gap:15px; margin:28px 0; }.stats div { padding:18px 22px; border-radius:12px; background:#f2f7f4; }.stats span { display:block; color:var(--muted); font-size:13px; }.stats strong { display:block; margin-top:4px; font-size:25px; }
.order-list { display:grid; gap:15px; }.order-item { border:1px solid var(--line); border-radius:13px; overflow:hidden; }.order-item.editing { border-color:#71aa88; box-shadow:0 0 0 3px rgba(8,116,67,.08); }.order-top,.order-product { padding:14px 18px; display:flex; align-items:center; justify-content:space-between; }.order-top { background:#f7f9f8; }.order-top>div { display:flex; gap:15px; align-items:center; }.order-id { font-weight:700; }.order-top time { color:var(--muted); font-size:12px; }.order-controls { margin-left:auto; }.status { padding:3px 9px; border-radius:20px; color:#906212; background:#fff1c9; font-size:12px; }.status.done { color:#087443; background:#dff2e7; }.edit-order { padding:4px 11px; border:1px solid #88b59a; border-radius:6px; color:var(--green); background:#fff; cursor:pointer; }.order-product { gap:15px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.order-product strong { flex:1; }.order-product span { color:var(--muted); }.order-product b { color:#c6562d; font-size:18px; }.buyer-grid { padding:15px 18px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.buyer-grid div { overflow-wrap:anywhere; }.buyer-grid small { display:block; color:var(--muted); }.order-edit-input { margin:4px 0 0; padding:7px 9px; }.buyer-grid textarea.order-edit-input { min-height:64px; }.order-id .order-edit-input { display:inline-block; width:230px; margin:0; }.edit-actions { padding:12px 18px; display:flex; justify-content:flex-end; align-items:center; gap:10px; border-top:1px solid var(--line); background:#f8faf9; }.edit-actions button { padding:8px 14px; border-radius:7px; cursor:pointer; }.cancel-edit { color:#56615c; background:#fff; border:1px solid #cbd4cf; }.save-order { color:#fff; background:var(--green); border:1px solid var(--green); }.save-order:disabled { opacity:.55; }.save-message { margin-right:auto; color:var(--muted); font-size:13px; }.save-message.error { color:#ba3f32; }.empty-orders { padding:60px; color:var(--muted); text-align:center; border:1px dashed #bdc9c2; border-radius:13px; }.empty-orders strong { color:var(--ink); font-size:18px; }.empty-orders p { margin:3px 0; }
@media(max-width:1000px) { .store-layout { grid-template-columns:1fr; }.order-panel { position:static; }.product-grid { grid-template-columns:repeat(3,1fr); }.store-brand span:last-child { display:none; } }
@media(max-width:720px) { .store-header { height:auto; padding:12px 16px; align-items:flex-start; }.store-header nav { gap:0; flex-wrap:wrap; justify-content:flex-end; }.store-header nav a { padding:8px; font-size:13px; }.hero { padding:45px 20px 85px; }.hero h1 { font-size:30px; }.store-layout { width:calc(100% - 24px); margin-top:-45px; }.store-layout>div,.order-panel,.orders-view,.login-card { padding:20px; }.product-grid { grid-template-columns:1fr; }.product-body p { min-height:0; }.orders-header { align-items:flex-start; gap:15px; flex-direction:column; }.stats { grid-template-columns:1fr; }.order-top,.order-product { align-items:flex-start; flex-direction:column; gap:5px; }.buyer-grid { grid-template-columns:1fr; }.seller-main { width:calc(100% - 24px); margin:25px auto; }.login-card { margin:45px auto; } }
.order-product-image { width:70px; height:52px; object-fit:cover; border-radius:9px; flex:none; }
.order-product .payment-type { flex:none; padding:4px 9px; border-radius:999px; color:#1677ff; background:#eaf3ff; font-size:12px; font-weight:700; }
.order-top time .order-edit-input { display:inline-block; width:190px; margin:0; }
.order-product b .payment-amount { color:inherit; }
.order-product .price-value .order-edit-input,
.order-product .payment-amount .order-edit-input { width:92px; }
.order-product .order-edit-input[data-field="unitPrice"],
.order-product .order-edit-input[data-field="total"] { display:inline-block; width:92px; margin:0 3px; padding:6px 8px; }