:root { --ink:#211b18; --muted:#716862; --paper:#fffdf9; --line:#eadfd4; --brand:#8e3222; --brand-dark:#6d2419; --sand:#f4eadb; --success:#147a52; --shadow:0 14px 35px rgba(53,28,15,.12); font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; color:var(--ink); background:#faf6f0; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; } button,input,textarea { font:inherit; } button { cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.55; }
.site-header { position:sticky; top:0; z-index:20; height:70px; display:flex; align-items:center; gap:26px; padding:0 max(20px,calc((100vw - 1180px)/2)); background:rgba(255,253,249,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:19px; font-weight:800; text-decoration:none; white-space:nowrap; }.brand-mark { display:grid; width:30px; height:30px; place-items:center; color:white; background:var(--brand); border-radius:9px; font-size:17px; }
.main-nav { display:flex; gap:18px; flex:1; }.main-nav button,.text-button { padding:8px 3px; color:var(--muted); border:0; background:transparent; }.main-nav button.active { color:var(--brand); font-weight:700; border-bottom:2px solid var(--brand); }.header-actions { display:flex; align-items:center; gap:10px; }
.primary { border:0; border-radius:9px; padding:11px 17px; color:#fff; background:var(--brand); font-weight:700; box-shadow:0 5px 13px rgba(142,50,34,.2); }.primary:hover { background:var(--brand-dark); }.small { padding:8px 12px; }.wide { width:100%; }.icon-button { border:1px solid var(--line); border-radius:9px; background:#fff; padding:8px 10px; color:var(--ink); }.icon-button b { display:inline-grid; min-width:19px; height:19px; padding:0 5px; place-items:center; border-radius:20px; color:#fff; background:var(--brand); font-size:12px; }
.app-shell { max-width:1180px; margin:0 auto; padding:34px 20px 70px; }.hero { display:grid; grid-template-columns:1.4fr .85fr; gap:30px; padding:42px; color:#fff; background:linear-gradient(115deg,#67251a,#a84d31 58%,#d37d51); border-radius:20px; overflow:hidden; }.eyebrow { margin:0 0 12px; color:#ffd7a0; font-size:13px; letter-spacing:2px; }.hero h1 { max-width:600px; margin:0; font-size:clamp(32px,5vw,52px); line-height:1.15; }.hero p { max-width:540px; color:#f6dfcf; line-height:1.7; }.hero-card { align-self:center; padding:24px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); border-radius:16px; }.hero-card strong { display:block; font-size:27px; margin:8px 0; }.hero-card span { color:#f6dfcf; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:15px; margin:42px 0 18px; }.section-head h2 { margin:0; font-size:25px; }.section-head p { margin:0; color:var(--muted); }.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; }.product-card { display:flex; flex-direction:column; min-height:100%; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 3px 12px rgba(77,43,22,.04); }.product-image { aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden; background:linear-gradient(135deg,#f5e8d5,#e9d3b8); color:#9b765c; font-size:30px; }.product-image img { width:100%; height:100%; object-fit:cover; }.product-body { display:flex; flex:1; flex-direction:column; padding:14px; }.product-meta { min-height:20px; color:var(--muted); font-size:13px; }.product-name { margin:6px 0 10px; font-size:16px; }.product-bottom { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:auto; }.price { color:var(--brand); font-size:19px; font-weight:800; }.price small { color:var(--muted); font-size:12px; font-weight:400; }.add-button { padding:7px 10px; border:1px solid #d7b6a9; border-radius:7px; color:var(--brand); background:#fff7f3; font-weight:700; }
.empty { padding:42px 20px; border:1px dashed #d9c9bc; border-radius:12px; color:var(--muted); text-align:center; background:#fffdfa; }.page-card { padding:26px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:0 3px 12px rgba(77,43,22,.04); }.page-title { margin:0 0 8px; }.page-subtitle { margin:0 0 22px; color:var(--muted); }.account-layout { display:grid; grid-template-columns:250px 1fr; gap:20px; }.account-menu { display:flex; flex-direction:column; gap:5px; height:max-content; padding:10px; border:1px solid var(--line); border-radius:12px; background:#fff; }.account-menu button { padding:10px; border:0; border-radius:8px; color:var(--muted); background:transparent; text-align:left; }.account-menu button.active { color:var(--brand); background:#fff2eb; font-weight:700; }.account-content { min-width:0; }.info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px; }.info-box { padding:15px; border-radius:10px; background:var(--sand); }.info-box label { display:block; margin-bottom:6px; color:var(--muted); font-size:12px; }.info-box strong { word-break:break-all; }
.order-list { display:grid; gap:12px; }.order-card { padding:16px; border:1px solid var(--line); border-radius:10px; }.order-top { display:flex; justify-content:space-between; gap:10px; }.order-id { color:var(--muted); font-size:12px; }.status { display:inline-block; padding:4px 8px; border-radius:20px; background:#fff0d4; color:#a35b00; font-size:12px; font-weight:700; }.status.approved { color:#08754d; background:#dff5e9; }.status.rejected { color:#a92727; background:#ffe3e3; }.order-amount { color:var(--brand); font-weight:800; }.order-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; color:var(--muted); font-size:14px; }.order-details strong { color:var(--ink); }
.dialog { width:min(470px,calc(100vw - 30px)); border:0; border-radius:16px; padding:26px; color:var(--ink); background:#fffdf9; box-shadow:var(--shadow); }.dialog::backdrop { background:rgba(31,18,12,.48); }.wide-dialog { width:min(650px,calc(100vw - 30px)); }.dialog-close { position:absolute; top:11px; right:14px; border:0; color:var(--muted); background:transparent; font-size:25px; }.dialog-tabs { display:flex; gap:20px; border-bottom:1px solid var(--line); margin:-4px 0 18px; }.dialog-tabs button { padding:9px 2px; border:0; color:var(--muted); background:transparent; }.dialog-tabs button.active { color:var(--brand); border-bottom:2px solid var(--brand); font-weight:700; }.stack { display:grid; gap:13px; }.stack h2 { margin:0 0 2px; }.stack label { display:grid; gap:6px; color:#554a44; font-size:14px; }.stack input,.stack textarea,.stack select { width:100%; padding:10px 11px; border:1px solid #d8c8bb; border-radius:8px; outline:none; color:var(--ink); background:white; }.stack input:focus,.stack textarea:focus,.stack select:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(142,50,34,.11); }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.hidden { display:none !important; }.side-panel { position:fixed; top:0; right:0; z-index:40; width:min(430px,100vw); height:100dvh; display:flex; flex-direction:column; padding:22px; transform:translateX(105%); transition:transform .22s ease; background:#fffdf9; box-shadow:var(--shadow); }.side-panel.open { transform:translateX(0); }.scrim { position:fixed; inset:0; z-index:35; background:rgba(32,19,13,.35); }.panel-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:13px; border-bottom:1px solid var(--line); }.panel-heading h2 { margin:0; }.cart-items { flex:1; overflow:auto; }.cart-item { display:grid; grid-template-columns:64px 1fr auto; gap:10px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }.cart-thumb { width:64px; height:64px; border-radius:9px; object-fit:cover; background:var(--sand); }.cart-name { margin:0 0 5px; font-weight:700; }.cart-price { color:var(--brand); font-size:14px; }.quantity { display:flex; align-items:center; gap:7px; margin-top:8px; }.quantity button { width:25px; height:25px; border:1px solid #d8c8bb; border-radius:5px; background:white; }.remove-cart { border:0; color:#a92d2d; background:transparent; }.cart-footer { padding-top:16px; }.total-line { display:flex; justify-content:space-between; margin-bottom:13px; }.total-line strong { color:var(--brand); font-size:22px; }.order-summary { padding:13px; border-radius:9px; background:var(--sand); line-height:1.7; }.toast { position:fixed; z-index:60; left:50%; bottom:28px; max-width:calc(100vw - 32px); padding:11px 15px; transform:translate(-50%,20px); opacity:0; border-radius:8px; color:#fff; background:#2f2925; box-shadow:var(--shadow); pointer-events:none; transition:.2s; }.toast.show { transform:translate(-50%,0); opacity:1; }.toast.error { background:#9e2c24; }.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }.secondary { padding:9px 12px; border:1px solid #cfb8aa; border-radius:8px; color:var(--brand); background:#fff; font-weight:700; }.admin-table { width:100%; border-collapse:collapse; font-size:14px; }.admin-table th,.admin-table td { padding:11px 9px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }.admin-table th { color:var(--muted); font-size:12px; }.admin-table-wrap { overflow:auto; }.row-actions { display:flex; gap:6px; flex-wrap:wrap; }.danger { border-color:#e6b8b8; color:#a92d2d; }.modal-form { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.modal-form .full { grid-column:1/-1; }
@media (max-width:760px) { .site-header { height:63px; gap:9px; padding:0 14px; }.brand { font-size:16px; }.brand-mark { width:26px; height:26px; }.main-nav { display:none; }.header-actions { margin-left:auto; }.icon-button { padding:7px; font-size:0; }.icon-button b { font-size:12px; }.small { padding:8px 9px; font-size:13px; }.app-shell { padding:20px 14px 50px; }.hero { grid-template-columns:1fr; padding:26px; gap:15px; }.hero-card { padding:17px; }.product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }.product-body { padding:11px; }.product-name { font-size:14px; }.product-bottom { display:block; }.add-button { width:100%; margin-top:9px; }.account-layout { grid-template-columns:1fr; }.account-menu { flex-direction:row; overflow:auto; }.account-menu button { white-space:nowrap; }.info-grid,.form-grid,.modal-form { grid-template-columns:1fr; }.order-details { grid-template-columns:1fr; }.page-card { padding:18px; }.admin-table { min-width:680px; }.hero h1 { font-size:32px; } }