:root { color-scheme:light; --text:#202124; --muted:#5f6368; --line:#e0e3e7; --soft:#f8f9fa; --blue:#1a73e8; --blue-hover:#1765cc; --danger:#d93025; --green:#188038; }
* { box-sizing:border-box; }
html { background:#fff; }
body { margin:0; color:var(--text); background:#fff; font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
button,input,textarea { font:inherit; }
button { color:inherit; cursor:pointer; }
.is-hidden { display:none !important; }
.brand-logo { width:38px; height:38px; display:block; border-radius:50%; object-fit:cover; mix-blend-mode:multiply; }
.auth-screen { position:fixed; z-index:100; inset:0; display:grid; place-items:center; overflow-y:auto; padding:28px 18px; background:#fff; }
.auth-card { width:min(420px,100%); border:1px solid #dadce0; border-radius:24px; padding:42px 40px 36px; background:#fff; box-shadow:0 1px 2px rgba(60,64,67,.08); }
.auth-logo { width:62px; height:62px; margin:0 auto 18px; }
.auth-card h1 { margin:0; text-align:center; font-size:24px; font-weight:500; }
.auth-intro { margin:10px 0 30px; color:var(--muted); text-align:center; font-size:14px; }
.auth-card form { display:grid; gap:17px; }
.auth-field { position:relative; display:block; color:#3c4043; font-size:12px; font-weight:500; }
.auth-field > span:first-child { position:absolute; z-index:1; top:-7px; left:11px; padding:0 5px; color:#5f6368; background:#fff; }
.auth-field input { width:100%; height:54px; border:1px solid #dadce0; border-radius:8px; padding:14px; outline:none; background:#fff; font-size:15px; }
.auth-field input:focus { border:2px solid var(--blue); padding:13px; }
.auth-field:focus-within > span:first-child { color:var(--blue); }
.auth-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.auth-link { border:0; padding:8px 0; color:var(--blue); background:transparent; font-size:14px; font-weight:600; }
.forgot-link { justify-self:start; margin-top:-11px; font-size:13px; }
.auth-submit { min-width:92px; height:42px; border:0; border-radius:8px; padding:0 22px; color:#fff; background:var(--blue); font-size:14px; font-weight:600; }
.auth-submit:hover { background:var(--blue-hover); }
.auth-submit:disabled,.code-field button:disabled { opacity:.5; cursor:not-allowed; }
.email-auth-fields { display:grid; gap:17px; }
.code-field { display:grid; grid-template-columns:1fr auto; }
.code-field input { min-width:0; border-radius:8px 0 0 8px; }
.code-field button { min-width:104px; border:1px solid #dadce0; border-left:0; border-radius:0 8px 8px 0; padding:0 12px; color:var(--blue); background:#fff; font-size:12px; font-weight:600; }
.email-pending { margin:-5px 0 0; border-radius:7px; padding:10px 12px; color:var(--muted); background:#f1f3f4; font-size:11px; }
.form-error { min-height:16px; margin:-7px 0; color:var(--danger); font-size:12px; }

.user-app { min-height:100vh; }
.user-sidebar { position:fixed; z-index:30; inset:0 auto 0 0; width:238px; display:flex; flex-direction:column; border-right:1px solid #e5e7eb; padding:28px 18px 20px; background:#fff; }
.user-brand { display:flex; align-items:center; gap:15px; margin:0 12px 42px; color:var(--text); text-decoration:none; }
.user-brand strong { font-size:15px; font-weight:600; letter-spacing:.02em; }
.user-sidebar nav { display:grid; gap:5px; }
.user-sidebar nav button,.admin-entry { position:relative; display:flex; align-items:center; gap:13px; width:100%; border:0; border-radius:0 22px 22px 0; padding:12px 15px; color:#5f6368; background:transparent; text-align:left; text-decoration:none; font-size:13px; }
.user-sidebar nav button > span,.admin-entry > span { width:20px; color:#6f767d; text-align:center; font-size:15px; font-weight:500; }
.user-sidebar nav button:hover,.admin-entry:hover { background:#f1f3f4; }
.user-sidebar nav button.active { color:#174ea6; background:#e8f0fe; font-weight:600; }
.user-sidebar nav button.active > span { color:#1a73e8; }
.nav-dot { position:absolute; right:17px; width:7px; height:7px; border-radius:50%; background:#d93025; }
.sidebar-user { margin-top:auto; display:flex; align-items:center; gap:11px; border-top:1px solid #eceff1; padding:19px 12px 0; }
.sidebar-user > span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#5f6368; font-size:12px; }
.sidebar-user div { min-width:0; display:grid; gap:3px; }
.sidebar-user strong,.sidebar-user small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-user strong { font-size:11px; }
.sidebar-user small { color:#80868b; font-size:9px; }
.mobile-header { display:none; }
.user-main { min-height:100vh; margin-left:238px; background:#fff; }
.user-page { display:none; width:min(1120px,100%); margin:auto; padding:48px clamp(30px,5vw,72px) 90px; }
.user-page.active { display:block; }
.page-header { min-height:76px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:30px; border-bottom:1px solid #eceff1; }
.page-header h1 { margin:0 0 8px; font-size:28px; font-weight:500; letter-spacing:-.02em; }
.page-header p { margin:0; color:#80868b; font-size:12px; }
.refresh-button { border:1px solid #dadce0; border-radius:8px; padding:9px 14px; color:#3c4043; background:#fff; font-size:11px; }
.refresh-button:hover { background:#f8f9fa; }
.notice-list { margin-bottom:22px; border:1px solid #dfe5ee; border-radius:12px; background:#f8fbff; }
.notice-list article { display:grid; grid-template-columns:1fr auto; gap:18px; padding:14px 17px; }
.notice-list article + article { border-top:1px solid #e2e8f0; }
.notice-list strong { font-size:12px; font-weight:600; }
.notice-list p { margin:5px 0 0; color:#5f6368; font-size:11px; line-height:1.7; white-space:pre-wrap; }
.notice-list time { color:#9aa0a6; font-size:9px; white-space:nowrap; }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.product-card { position:relative; overflow:hidden; border:1px solid #e0e3e7; border-radius:14px; background:#fff; transition:.18s; }
.product-card:hover { border-color:#c8cdd2; box-shadow:0 4px 14px rgba(60,64,67,.08); }
.product-card.selected { border:2px solid #1a73e8; }
.product-image { aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid #eceff1; background:#f5f6f7; }
.product-image img { width:100%; height:100%; display:block; object-fit:contain; object-position:center; }
.product-content { display:grid; gap:12px; padding:17px; }
.product-content h2 { margin:0; font-size:15px; font-weight:600; }
.product-content p { min-height:38px; margin:0; color:#6f767d; font-size:11px; line-height:1.75; }
.product-price { font-size:18px; font-weight:600; }
.product-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.select-product { border:1px solid #dadce0; border-radius:8px; padding:8px 12px; color:#1a73e8; background:#fff; font-size:11px; font-weight:600; }
.product-card.selected .select-product { color:#fff; background:#1a73e8; border-color:#1a73e8; }
.quantity-control { display:flex; align-items:center; gap:9px; }
.quantity-control button { width:28px; height:28px; border:1px solid #dadce0; border-radius:50%; background:#fff; }
.quantity-control span { min-width:16px; text-align:center; font-size:12px; }
.checkout-summary { position:sticky; z-index:15; bottom:20px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin:28px 0 0; border:1px solid #d9dde1; border-radius:14px; padding:14px 16px 14px 20px; background:rgba(255,255,255,.94); box-shadow:0 8px 28px rgba(60,64,67,.12); backdrop-filter:blur(12px); }
.checkout-summary > div { display:flex; align-items:baseline; gap:16px; }
.checkout-summary span { color:#5f6368; font-size:11px; }
.checkout-summary strong { font-size:21px; }
.checkout-summary button,.primary-button,.settings-card button { border:0; border-radius:8px; padding:11px 20px; color:#fff; background:#1a73e8; font-size:12px; font-weight:600; }
.checkout-summary button:hover,.primary-button:hover,.settings-card button:hover { background:#1765cc; }
.empty-state { border:1px dashed #d9dde1; border-radius:12px; padding:48px 20px; color:#9aa0a6; text-align:center; font-size:12px; }
.order-list { display:grid; gap:14px; }
.order-card { border:1px solid #e0e3e7; border-radius:13px; padding:19px; }
.order-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:15px; }
.order-card h2 { margin:0 0 5px; font-size:13px; }
.order-card small { color:#80868b; font-size:9px; }
.order-card strong { font-size:15px; }
.order-items { margin:0 0 15px; color:#5f6368; font-size:11px; line-height:1.8; }
.order-card footer { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid #eceff1; padding-top:13px; }
.status { display:inline-flex; border-radius:20px; padding:5px 9px; font-size:9px; font-weight:600; }
.status.awaiting_payment { color:#8a5a13; background:#fef7e0; }
.status.payment_submitted { color:#185abc; background:#e8f0fe; }
.status.paid { color:#137333; background:#e6f4ea; }
.status.cancelled { color:#a50e0e; background:#fce8e6; }
.order-action { border:0; padding:5px; color:#1a73e8; background:transparent; font-size:10px; }
.guide-list { display:grid; gap:11px; }
.guide-card { border:1px solid #e0e3e7; border-radius:12px; padding:0 18px; background:#fff; }
.guide-card summary { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:17px 0; cursor:pointer; list-style:none; font-size:13px; font-weight:600; }
.guide-card summary::after { content:'＋'; color:#80868b; font-size:16px; font-weight:400; }
.guide-card[open] summary::after { content:'−'; }
.guide-content { border-top:1px solid #eceff1; padding:16px 0 20px; color:#5f6368; font-size:12px; line-height:1.9; white-space:pre-wrap; }
.chat-page { max-width:900px; }
.chat-panel { height:620px; display:grid; grid-template-rows:65px 1fr auto; overflow:hidden; border:1px solid #e0e3e7; border-radius:14px; }
.chat-panel > header { display:flex; align-items:center; gap:11px; border-bottom:1px solid #eceff1; padding:13px 17px; }
.chat-avatar { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:#1a73e8; background:#e8f0fe; font-family:Georgia,serif; }
.chat-panel header div:last-child { display:grid; gap:3px; }
.chat-panel header strong { font-size:12px; }
.chat-panel header small { color:#80868b; font-size:9px; }
.message-list { display:flex; flex-direction:column; gap:10px; overflow:auto; padding:22px; }
.message { position:relative; max-width:72%; align-self:flex-start; border-radius:5px 14px 14px; padding:10px 12px; background:#f1f3f4; font-size:11px; line-height:1.65; white-space:pre-wrap; }
.message.mine { align-self:flex-end; border-radius:14px 5px 14px 14px; color:#fff; background:#1a73e8; }
.message time { display:block; margin-top:4px; opacity:.62; font-size:8px; }
.message-delete { position:absolute; top:-7px; right:-25px; display:none; border:0; padding:3px; color:#9aa0a6; background:transparent; font-size:9px; white-space:nowrap; }
.message.mine .message-delete { right:auto; left:-30px; }
.message:hover .message-delete { display:block; }
.chat-avatar img { width:100%; height:100%; display:block; border-radius:50%; object-fit:cover; mix-blend-mode:multiply; }
#message-form { display:grid; grid-template-columns:1fr auto; gap:9px; border-top:1px solid #eceff1; padding:13px; }
#message-form textarea { min-height:42px; max-height:110px; border:1px solid #dadce0; border-radius:10px; padding:11px 12px; outline:none; resize:none; }
#message-form textarea:focus { border-color:#1a73e8; }
#message-form button { border:0; border-radius:8px; padding:0 20px; color:#fff; background:#1a73e8; font-size:11px; }
.settings-layout { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.settings-card { display:grid; gap:15px; border:1px solid #e0e3e7; border-radius:13px; padding:22px; }
.settings-card h2 { margin:0 0 4px; font-size:15px; font-weight:600; }
.settings-card label { display:grid; gap:7px; color:#5f6368; font-size:11px; }
.settings-card input { width:100%; border:1px solid #dadce0; border-radius:8px; padding:11px 12px; outline:none; background:#fff; font-size:13px; }
.settings-card input:focus { border-color:#1a73e8; box-shadow:0 0 0 2px #e8f0fe; }
.settings-card input:disabled { color:#80868b; background:#f8f9fa; }
.settings-card button { justify-self:start; }
.account-actions { grid-column:1/-1; }
.account-actions p { margin:0; color:#80868b; font-size:11px; }
.account-actions .logout-button { color:#d93025; background:#fff; border:1px solid #f2c7c3; }
.account-actions .logout-button:hover { background:#fce8e6; }
dialog { border:0; padding:0; background:transparent; }
dialog::backdrop { background:rgba(32,33,36,.42); backdrop-filter:blur(3px); }
.payment-card { position:relative; width:min(430px,calc(100vw - 28px)); display:grid; justify-items:center; gap:14px; border-radius:18px; padding:30px; background:#fff; }
.dialog-close { position:absolute; top:13px; right:13px; width:30px; height:30px; border:0; border-radius:50%; background:#f1f3f4; font-size:17px; }
.payment-card h2 { margin:0 0 3px; font-size:20px; font-weight:500; }
.payment-card .delivery-email-field { width:100%; min-width:0; margin:0; text-align:left; }
.payment-card .delivery-email-field input[aria-invalid="true"] { border:2px solid #d93025; padding:13px; }
.payment-card .delivery-email-field .field-error { display:block; margin-top:6px; color:#d93025; font-size:12px; }
.payment-card .delivery-email-field .field-error:empty { display:none; }
.payment-card.submission-card { gap:22px; padding-top:42px; }
.payment-card.submission-card > p { font-size:14px; line-height:1.8; color:#5f6368; }
.submission-card .support-qq { white-space:nowrap; color:#202124; }
.order-number { display:flex; align-items:center; gap:10px; color:#80868b; font-size:10px; }
.order-number code { color:#3c4043; }
.payment-card img { width:190px; height:190px; border:1px solid #eceff1; border-radius:12px; object-fit:contain; }
.payment-card > strong { font-size:27px; font-weight:500; }
.payment-card > p { margin:0; color:#5f6368; text-align:center; font-size:11px; line-height:1.7; }
.proof-upload { border:1px dashed #b8bec5; border-radius:8px; padding:10px 18px; color:#1a73e8; cursor:pointer; font-size:11px; }
.proof-upload input { display:none; }
#proof-name { color:#9aa0a6; font-size:9px; }
.toast { position:fixed; z-index:120; left:50%; bottom:25px; transform:translate(-50%,16px); opacity:0; pointer-events:none; border-radius:8px; padding:10px 15px; color:#fff; background:#303134; font-size:11px; transition:.2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width:980px) { .product-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px) {
  .auth-screen { place-items:start center; padding:0; }
  .auth-card { width:100%; min-height:100dvh; border:0; border-radius:0; padding:max(48px,env(safe-area-inset-top)) 28px 32px; box-shadow:none; }
  .user-sidebar { width:230px; transform:translateX(-105%); box-shadow:0 8px 30px rgba(60,64,67,.14); transition:.2s; }
  body.menu-open .user-sidebar { transform:translateX(0); }
  .mobile-header { position:fixed; z-index:25; inset:0 0 auto; height:58px; display:grid; grid-template-columns:40px 1fr 40px; align-items:center; border-bottom:1px solid #eceff1; padding:0 12px; background:rgba(255,255,255,.96); }
  .mobile-header button { border:0; background:transparent; font-size:19px; }
  .mobile-header > div { display:flex; align-items:center; justify-content:center; gap:12px; }
  .mobile-header strong { font-size:13px; }
  .mobile-header .brand-logo { width:32px; height:32px; }
  .user-main { margin-left:0; padding-top:58px; }
  .user-page { padding:27px 16px 70px; }
  .page-header { min-height:65px; margin-bottom:22px; }
  .page-header h1 { font-size:23px; }
  .product-grid { grid-template-columns:1fr; }
  .product-content p { min-height:0; }
  .checkout-summary { bottom:12px; margin-top:18px; }
  .checkout-summary > div { display:grid; gap:3px; }
  .notice-list article { grid-template-columns:1fr; gap:5px; }
  .settings-layout { grid-template-columns:1fr; }
  .account-actions { grid-column:auto; }
  .chat-panel { height:calc(100dvh - 180px); min-height:480px; }
  .payment-card { padding:27px 20px; }
}