:root { --ink:#131921; --nav:#232f3e; --gold:#febd69; --orange:#f08804; --blue:#146eb4; --paper:#f3f4f6; --line:#d5d9d9; --text:#111827; --muted:#64748b; }
* { box-sizing: border-box; }
body { margin:0; font-family: Arial, "Microsoft YaHei", sans-serif; color:var(--text); background:var(--paper); }
[v-cloak] { display:none; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; border:0; }
.topbar { min-height:64px; display:flex; align-items:center; gap:22px; padding:0 28px; background:var(--ink); color:white; position:sticky; top:0; z-index:20; box-shadow:0 8px 22px rgba(0,0,0,.18); }
.brand { font-size:24px; font-weight:800; white-space:nowrap; }
.brand span { color:var(--gold); }
nav { display:flex; gap:8px; flex:1; }
nav button,.ghost { padding:10px 14px; border-radius:6px; background:transparent; color:white; }
nav button.active,nav button:hover,.ghost:hover { outline:1px solid rgba(255,255,255,.85); }
.top-actions { display:flex; align-items:center; gap:14px; }
.auth-shell { min-height:calc(100vh - 64px); display:grid; place-items:center; padding:28px; background:radial-gradient(circle at 18% 15%, rgba(254,189,105,.28), transparent 26%), linear-gradient(135deg, #131921, #232f3e 48%, #eef2f7 48%); }
.auth-panel { width:min(920px,100%); display:grid; grid-template-columns:1.1fr .9fr; gap:28px; background:white; border-radius:8px; padding:34px; box-shadow:0 22px 60px rgba(0,0,0,.22); }
.auth-panel.compact { width:min(440px,100%); display:block; }
.auth-panel h1 { margin:0 0 12px; font-size:42px; }
.auth-panel p { color:var(--muted); line-height:1.7; }
form { display:grid; gap:14px; }
label { display:grid; gap:7px; color:#334155; font-weight:700; }
input,textarea,select { width:100%; border:1px solid var(--line); border-radius:6px; padding:11px 12px; background:white; }
textarea { min-height:94px; resize:vertical; }
.switch { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.switch button { padding:11px; border-radius:6px; background:#e5e7eb; }
.switch button.active,.primary { background:linear-gradient(#ffd978,#f0a832); color:#111827; border:1px solid #a88734; border-radius:6px; padding:12px 16px; font-weight:800; }
.home { padding-bottom:44px; }
.hero { height:340px; overflow:hidden; position:relative; background:#111827; }
.slides { height:100%; display:flex; transition:transform .45s ease; }
.slide { min-width:100%; padding:72px 7vw; color:white; background-size:cover; background-position:center; }
.slide h1 { width:min(560px,90%); margin:0 0 12px; font-size:46px; line-height:1.08; }
.slide p { width:min(480px,90%); font-size:18px; line-height:1.7; }
.dots { position:absolute; left:7vw; bottom:24px; display:flex; gap:8px; }
.dots button { width:34px; height:6px; border-radius:999px; background:rgba(255,255,255,.45); }
.dots button.active { background:var(--gold); }
.category-bar { display:flex; gap:10px; padding:20px 5vw 8px; overflow-x:auto; }
.category-bar button { white-space:nowrap; padding:10px 16px; border-radius:6px; border:1px solid var(--line); background:white; }
.category-bar button.active { background:var(--nav); color:white; }
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; padding:18px 5vw; }
.product-card { background:white; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; }
.product-card:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(15,23,42,.13); }
.product-card img { width:100%; height:190px; object-fit:cover; background:#e5e7eb; }
.product-info { padding:15px; display:grid; gap:9px; }
.tag { color:var(--blue); font-size:13px; font-weight:800; }
.product-info h3 { margin:0; font-size:18px; }
.product-info p { margin:0; color:var(--muted); line-height:1.55; min-height:48px; }
.price-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.price-row strong,.detail strong { color:#b12704; font-size:22px; }
.price-row button { background:var(--gold); border-radius:999px; padding:9px 15px; font-weight:800; }
.content,.admin-layout { padding:26px 5vw 52px; }
.content h2,.panel h2 { margin:0 0 16px; }
.orders { display:grid; gap:14px; }
.order-card { display:grid; grid-template-columns:128px 1fr; gap:18px; background:white; border:1px solid #e5e7eb; border-radius:8px; padding:14px; }
.order-card img { width:128px; height:102px; border-radius:6px; object-fit:cover; }
.order-head { display:flex; justify-content:space-between; gap:12px; color:var(--muted); }
.order-head h3 { margin:0; color:var(--text); }
.steps { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin:18px 0 8px; }
.steps span { text-align:center; padding:9px 5px; border-radius:6px; background:#e2e8f0; font-size:13px; }
.steps span.done { background:#d1fae5; color:#047857; font-weight:800; }
.wallet { display:grid; grid-template-columns:1fr 1fr auto; gap:16px; background:var(--nav); color:white; border-radius:8px; padding:22px; align-items:center; }
.wallet div { display:grid; gap:8px; }
.wallet strong { font-size:30px; color:var(--gold); }
.profile-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; margin:18px 0; }
.panel { background:white; border:1px solid #e5e7eb; border-radius:8px; padding:20px; }
.hint { color:var(--muted); }
.ledger { display:grid; gap:8px; }
.ledger div { display:grid; grid-template-columns:110px 1fr 120px; gap:10px; padding:11px 0; border-bottom:1px solid #edf2f7; }
.modal { position:fixed; inset:0; background:rgba(15,23,42,.58); z-index:50; display:grid; place-items:center; padding:22px; }
.detail { width:min(880px,100%); display:grid; grid-template-columns:1fr 1fr; gap:24px; background:white; border-radius:8px; padding:22px; }
.detail img { width:100%; height:360px; object-fit:cover; border-radius:6px; }
.detail p { color:var(--muted); line-height:1.8; }
.detail button { margin-top:18px; width:100%; }
.toast { position:fixed; right:24px; bottom:24px; z-index:80; background:#111827; color:white; padding:14px 18px; border-radius:8px; box-shadow:0 12px 30px rgba(0,0,0,.24); }
.adminbar { background:#0f172a; }
.table { display:grid; gap:8px; overflow-x:auto; }
.row { min-width:820px; display:grid; grid-template-columns:1fr 110px 90px 1.4fr 100px; gap:10px; align-items:center; padding:10px; border:1px solid #edf2f7; border-radius:6px; }
.orders-table .row { grid-template-columns:40px 1.2fr 110px 1fr 140px 90px 80px; }
.row.head { background:#f8fafc; font-weight:800; }
.grid-form { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.grid-form .wide { grid-column:1/-1; }
.admin-products { padding-left:0; padding-right:0; }
.dispatch-box,.bulk { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-items:end; }
.bulk { grid-template-columns:220px 140px; margin-bottom:14px; }
@media (max-width:760px) { .topbar{flex-wrap:wrap; padding:12px 16px;} nav{order:3; width:100%; overflow-x:auto;} .auth-panel,.detail,.profile-grid{grid-template-columns:1fr;} .auth-panel h1,.slide h1{font-size:32px;} .hero{height:300px;} .wallet{grid-template-columns:1fr;} .order-card{grid-template-columns:1fr;} .order-card img{width:100%; height:180px;} .steps{grid-template-columns:repeat(2,1fr);} .grid-form,.dispatch-box{grid-template-columns:1fr;} }