:root { font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; color: #172033; background: #f5f7fb; --blue: #2764e8; --line: #e5e9f2; }
* { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; } a { color: inherit; text-decoration: none; }
.topbar { height: 70px; padding: 0 max(24px, calc((100% - 1160px)/2)); display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.9); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }.brand { font-weight: 760; display: flex; gap: 10px; align-items: center; }.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #172033; color: white; }.topbar a { font-size: 14px; color: #59647a; }
main { max-width: 1160px; margin: 0 auto; padding: 54px 24px 80px; }.hero { min-height: 280px; padding: 42px; display: flex; align-items: center; justify-content: space-between; background: #172033; color: white; border-radius: 18px; overflow: hidden; }.eyebrow,.section-kicker { font-size: 11px; letter-spacing: .14em; font-weight: 750; color: #6d7890; margin: 0 0 12px; }.hero .eyebrow { color: #9fb8ff; }.hero h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.06; margin: 0; letter-spacing: -1px; }.hero-copy { color: #bdc7dc; font-size: 16px; max-width: 480px; line-height: 1.8; }.hero-note { width: 190px; padding: 22px; border: 1px solid #42506a; border-radius: 14px; display: grid; gap: 10px; color: #c5d1e9; }.hero-note strong { color: white; font-size: 18px; }.hero-note small { color: #94a1bb; }
.toolbar { display: flex; align-items: end; justify-content: space-between; padding: 56px 0 24px; }.toolbar h2,.query-panel h2 { font-size: 28px; margin: 0; }.filters { display: flex; gap: 8px; }.filters button { border: 1px solid var(--line); background: white; border-radius: 999px; padding: 8px 14px; color: #69748b; cursor: pointer; }.filters button.active { color: white; background: var(--blue); border-color: var(--blue); }
.store-controls { display:flex; flex-direction:column; align-items:flex-end; gap:12px; min-width:0; }.store-controls input { width:min(310px, 100%); height:40px; padding:0 13px; border:1px solid var(--line); border-radius:9px; background:white; font:inherit; font-size:14px; outline:none; }.store-controls input:focus { border-color:var(--blue); box-shadow:0 0 0 3px #2764e81a; }.filters { flex-wrap:wrap; justify-content:flex-end; }
.product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }.product { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; min-height: 214px; }.product-category { color: var(--blue); font-size: 12px; font-weight: 700; }.product h3 { margin: 13px 0 8px; font-size: 18px; }.product p { color: #7a8498; font-size: 13px; line-height: 1.6; margin: 0 0 20px; }.product-bottom { display:flex; align-items: center; justify-content: space-between; margin-top: auto; }.price { font-size: 22px; font-weight: 780; }.price small { font-size: 12px; color: #8993a5; font-weight: 400; }.buy { border: 0; background: var(--blue); color: white; border-radius: 8px; padding: 10px 16px; cursor: pointer; }.empty { color: #7a8498; padding: 36px 0; }
.store-notice { margin: 0 0 16px; padding: 13px 16px; border: 1px solid #d7e3ff; border-radius: 10px; background: #eef4ff; color: #34517f; font-size: 14px; line-height: 1.5; }
.product .product-summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.product-bottom { gap: 12px; align-items: flex-end; }.product-pricing { display: grid; gap: 3px; min-width: 0; }.unit-price { color: #69748b; font-size: 12px; line-height: 1.45; }.product-bottom .buy { flex-shrink: 0; }
.product-cover { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 18px; overflow: hidden; border-radius: 10px; background: #f0f4fb; }.product-cover img { width: 100%; height: 100%; object-fit: contain; }.cover-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: #7b8baa; font-size: 18px; font-weight: 700; }.product h3 a:hover,.detail-breadcrumb a:hover { color: var(--blue); }.product-bottom .buy { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.detail-breadcrumb { display: flex; gap: 10px; align-items: center; margin: 0 0 22px; color: #7a8498; font-size: 14px; }.detail-breadcrumb a { color: #47546b; }.detail-breadcrumb span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 34px; padding: 30px; background: white; border: 1px solid var(--line); border-radius: 16px; }.detail-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; background: #f0f4fb; }.detail-media img { display: block; width: 100%; height: 100%; object-fit: contain; }.detail-overview h1 { margin: 12px 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.25; }.detail-overview > p:not(.product-category):not(.store-notice) { color: #66728a; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }.detail-price { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.detail-price strong { font-size: 30px; color: var(--blue); }.detail-price span { color: #758198; font-size: 14px; }.detail-facts { display: grid; gap: 14px; margin: 24px 0; }.detail-facts div { display: flex; gap: 24px; align-items: baseline; }.detail-facts span { min-width: 72px; color: #8490a4; font-size: 14px; }.detail-facts strong { font-size: 14px; font-weight: 600; }.detail-overview .buy { min-width: 180px; min-height: 46px; }.detail-overview .store-notice { margin-top: 12px; }
.detail-variants { margin: 22px 0; }.detail-variants > strong { display: block; margin-bottom: 10px; font-size: 14px; }.detail-variant-options { display: flex; flex-wrap: wrap; gap: 10px; }.detail-variant-option { display: flex; flex-direction: column; gap: 4px; min-width: 120px; max-width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; line-height: 1.35; overflow-wrap: anywhere; }.detail-variant-option small { color: #758198; }.detail-variant-option:hover,.detail-variant-option.active { border-color: var(--blue); background: #f2f6ff; }.detail-variant-option.active { color: var(--blue); font-weight: 700; }
.detail-order-estimate { display:flex; flex-wrap:wrap; gap:20px; align-items:end; padding:22px 0 0; }.detail-order-estimate label { display:grid; gap:8px; min-width:150px; color:#59667b; font-size:14px; font-weight:600; }.detail-order-estimate input { width:150px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; color:var(--ink); }.detail-order-estimate > div { display:grid; gap:5px; color:#8490a4; font-size:13px; }.detail-order-estimate strong { color:var(--blue); font-size:24px; line-height:1.3; }.detail-overview .buy.is-disabled { opacity:.55; cursor:not-allowed; }
.detail-section { margin-top: 20px; padding: 28px 32px; background: white; border: 1px solid var(--line); border-radius: 14px; }.detail-section h2 { margin: 0 0 18px; font-size: 20px; }.detail-section p { color: #59657b; line-height: 1.8; }.rich-content { color: #4d5b72; line-height: 1.85; overflow-wrap: anywhere; }.rich-content p:first-child { margin-top: 0; }.rich-content img { display: block; max-width: 100%; height: auto; margin: 16px auto; border-radius: 8px; }.rich-content a { color: var(--blue); text-decoration: underline; }
.flow-heading { margin:0 0 28px; }.flow-heading h1 { margin:0 0 8px; font-size:32px; }.flow-heading p:last-child { margin:0; color:#718098; line-height:1.6; }.checkout-layout,.order-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.8fr); gap:22px; align-items:start; }.checkout-card { padding:28px; border:1px solid var(--line); border-radius:15px; background:white; min-width:0; }.checkout-card h2 { margin:0 0 16px; font-size:20px; }.checkout-description,.checkout-hint { color:#6f7d94; font-size:13px; line-height:1.7; }.checkout-description { margin:0 0 22px; white-space:pre-line; max-height:120px; overflow:auto; }.checkout-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.checkout-card label { display:block; margin:14px 0; color:#59667b; font-size:13px; font-weight:600; }.checkout-card input,.checkout-card textarea,.checkout-card select { display:block; width:100%; min-width:0; margin-top:7px; padding:11px 12px; border:1px solid var(--line); border-radius:8px; background:white; color:var(--ink); font:inherit; }.checkout-card textarea { min-height:90px; resize:vertical; }.checkout-card .payment-option { display:inline-flex; align-items:center; gap:7px; margin:5px 18px 5px 0; }.checkout-card .payment-option input { width:auto; margin:0; }.checkout-card .primary { min-height:46px; border:0; border-radius:8px; background:var(--blue); color:white; cursor:pointer; }.checkout-card .primary:disabled { opacity:.55; cursor:not-allowed; }.checkout-card .store-notice { margin-top:18px; }.checkout-summary { position:sticky; top:90px; }.checkout-cover { display:grid; place-items:center; aspect-ratio:4 / 3; margin-bottom:18px; overflow:hidden; border-radius:10px; background:#f0f4fb; color:#7b8baa; font-weight:700; }.checkout-cover img { width:100%; height:100%; object-fit:contain; }.checkout-summary h2 { margin:10px 0; overflow-wrap:anywhere; }.checkout-unit-price { color:#69748b; font-size:14px; }.checkout-total { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:19px 0; margin-top:18px; border-top:1px solid var(--line); }.checkout-total strong { color:var(--blue); font-size:27px; }.checkout-summary .checkout-hint { margin:8px 0 0; white-space:pre-line; }
.order-heading { display:flex; align-items:end; justify-content:space-between; gap:15px; }.secondary-button { padding:9px 14px; border:1px solid var(--line); border-radius:8px; background:white; color:#47546b; cursor:pointer; font:inherit; }.order-main-card { min-height:300px; }.order-access { display:flex; align-items:end; gap:12px; }.order-access label { flex:1; margin:0; }.order-access .buy { min-height:43px; white-space:nowrap; }.order-state { padding:4px 0 16px; border-bottom:1px solid var(--line); }.order-status { display:inline-block; padding:6px 12px; border-radius:999px; background:#eaf8f0; color:#18704a; font-size:13px; font-weight:750; }.order-status.is-error { background:#fff0ec; color:#ac4b36; }.order-state p { margin:12px 0 0; color:#637189; line-height:1.6; }.order-progress { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:20px 0; margin:0; list-style:none; border-bottom:1px solid var(--line); }.order-progress li { padding:10px 8px; border-radius:8px; background:#f4f6fa; color:#8994a6; font-size:12px; text-align:center; }.order-progress li.is-done { background:#edf5ff; color:#275ab4; }.order-progress li.is-current { outline:1px solid #7da4f8; }.order-facts { display:grid; gap:13px; margin:20px 0; }.order-facts div { display:flex; justify-content:space-between; gap:16px; }.order-facts dt { color:#8490a4; }.order-facts dd { margin:0; color:#233047; font-weight:650; text-align:right; overflow-wrap:anywhere; }.order-delivery { padding-top:22px; margin-top:22px; border-top:1px solid var(--line); }.order-delivery h2 { margin:0 0 12px; }.order-delivery pre { padding:16px; border-radius:9px; background:#f5f7fb; white-space:pre-wrap; overflow-wrap:anywhere; }.order-help p { color:#6f7d94; line-height:1.75; }.order-help a { color:var(--blue); font-weight:650; }.order-main-card #order-message:not(:empty),#buy-result:not(:empty) { margin-top:14px; color:#a34a36; line-height:1.5; }
.order-status.is-pending { background:#eef4ff; color:#315da8; }.order-status.is-progress { background:#fff6e7; color:#94631b; }
@media(max-width:760px) { .checkout-layout,.order-layout { grid-template-columns:1fr; }.checkout-summary { position:static; grid-row:1; display:grid; grid-template-columns:92px minmax(0,1fr); gap:0 14px; }.checkout-cover { grid-row:1 / span 3; width:92px; height:92px; aspect-ratio:auto; margin:0; font-size:11px; text-align:center; }.checkout-summary .product-category { align-self:end; }.checkout-summary h2 { margin:4px 0; font-size:17px; }.checkout-unit-price { margin:0; }.checkout-total,.checkout-summary .checkout-hint { grid-column:1 / -1; }.checkout-card { padding:20px; }.checkout-fields { grid-template-columns:1fr; gap:0; }.order-heading { align-items:start; flex-direction:column; }.order-access { align-items:stretch; flex-direction:column; }.order-progress { grid-template-columns:repeat(2,minmax(0,1fr)); }.flow-heading h1 { font-size:28px; } }
@media(max-width:760px) { .detail-shell { grid-template-columns: 1fr; gap: 20px; padding: 16px; }.detail-media { aspect-ratio: 4 / 3; }.detail-price strong { font-size: 26px; }.detail-section { padding: 20px; }.detail-overview .buy { width: 100%; } }
.query-panel { margin-top: 80px; padding: 30px; background: white; border: 1px solid var(--line); border-radius: 14px; display:grid; grid-template-columns: 1fr 1.3fr; gap: 24px; align-items: start; }.query-panel p:not(.section-kicker) { color:#788298; font-size:13px; line-height:1.6; }.query-panel form { display:flex; gap:10px; }.query-panel input, dialog input, dialog textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; font: inherit; }.query-panel button, dialog .primary { border: 0; border-radius: 8px; color:white; background: #172033; padding: 0 16px; cursor:pointer; white-space:nowrap; }.query-result { grid-column: 1 / -1; }.order-card { padding: 16px; border-top: 1px solid var(--line); display:grid; grid-template-columns: repeat(3,1fr); gap:10px; color:#657087; font-size:13px; }.order-card strong { color:#172033; display:block; margin-top:5px; }.status { color: var(--blue); }
dialog { border: 0; border-radius: 14px; padding:0; width:min(460px, calc(100% - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 24px 90px #17203338; } dialog::backdrop { background:#17203388; } dialog form { padding: 28px; position:relative; } dialog h2 { margin: 0 0 4px; }.dialog-price { font-size: 18px; color: var(--blue); margin: 0 0 20px; } dialog label { display:block; color:#68738a; font-size:13px; margin: 14px 0; } dialog input, dialog textarea { display:block; margin-top:6px; } dialog textarea { min-height:80px; resize:vertical; }.close { border:0; background:transparent; color:#7b8598; font-size:26px; position:absolute; top:14px; right:18px; cursor:pointer; }.primary { width:100%; padding:12px !important; margin-top:8px; }.notice { margin-top:12px; color:#68738a; font-size:13px; line-height:1.6; }
.dialog-description { max-height: 140px; overflow: auto; overflow-wrap: anywhere; white-space: pre-line; color: #68738a; font-size: 13px; line-height: 1.6; }.dialog-price { margin: 16px 0 4px; }.dialog-limit { margin: 0 0 18px; color: #68738a; font-size: 12px; }
@media(max-width:760px) { main { padding:24px 16px 56px; }.hero { padding:28px; min-height:340px; align-items:start; flex-direction:column; gap:30px; }.hero-note { width:100%; }.toolbar { align-items:start; flex-direction:column; gap:16px; }.product-grid { grid-template-columns:1fr; }.query-panel { grid-template-columns:1fr; padding:22px; }.query-panel form { flex-direction:column; }.query-panel button { min-height:42px; }.order-card { grid-template-columns:1fr 1fr; } }
@media(max-width:760px) { .store-controls { width:100%; align-items:stretch; }.store-controls input { width:100%; }.filters { justify-content:flex-start; } }
.admin { max-width: 980px; }.admin h1 { margin: 0; }.admin-head,.admin-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; }.admin-head { margin-bottom:32px; }.admin-head input { width:260px; border:1px solid var(--line); border-radius:8px; padding:11px; }.admin-panel { margin-top: 0; }.admin-form { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }.admin-form input,.admin-form select,.admin-form textarea { border:1px solid var(--line); border-radius:8px; padding:11px; font:inherit; }.admin-form textarea,.admin-form .primary { grid-column:1 / -1; }.admin-section { margin-top:40px; }.admin-row { min-height:64px; padding:12px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; font-size:13px; }.admin-row small { display:block; color:#7a8498; margin-top:5px; }.admin-row .buy { padding:8px 12px; }.admin-toolbar h2 { margin:0 0 14px; }@media(max-width:760px){.admin-head{align-items:stretch; flex-direction:column}.admin-head input{width:100%}.admin-form{grid-template-columns:1fr}.admin-form textarea,.admin-form .primary{grid-column:auto}.admin-row{grid-template-columns:1fr auto}.admin-row .buy{grid-column:2;grid-row:1 / span 2}}
#query-result { grid-column:1 / -1; }
.payment-fieldset { border:1px solid var(--line); border-radius:8px; margin:16px 0; padding:12px; }
.recharge-notice { padding: 10px 12px; border-radius: 8px; background: #eff5ff; color: #344a72; font-size: 13px; line-height: 1.5; }
dialog select { display: block; width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; background: white; font: inherit; }
.payment-fieldset legend { color:#68738a; font-size:13px; }
.payment-option { display:inline-flex; align-items:center; gap:6px; margin:4px 16px 4px 0; }
.payment-option input { width:auto; margin:0; }
.order-payment-qr { margin-top:24px; padding:20px; border:1px solid var(--line); border-radius:12px; background:#f8fbff; text-align:center; }
.order-payment-qr h2 { margin:0 0 7px; font-size:19px; }
.order-payment-qr p,.order-payment-qr #order-qr-message { color:#64738b; font-size:13px; line-height:1.6; }
.order-payment-qr img { display:block; width:min(260px,100%); height:auto; margin:14px auto; background:white; border-radius:8px; }
.order-payment-qr #order-qr-open { display:block; margin:9px auto; color:#245bd2; font-size:14px; font-weight:700; }
.order-payment-qr .secondary-button { margin-top:12px; }
.delivery-panel { border-top:1px solid var(--line); padding:16px; }
.delivery-panel h3 { margin:0 0 10px; }
.delivery-panel pre { white-space:pre-wrap; overflow-wrap:anywhere; background:#f5f7fb; border-radius:8px; padding:14px; }
.delivery-panel button,.row-actions button,#clear-token,#cancel-edit { border:1px solid var(--line); border-radius:8px; padding:8px 12px; background:white; cursor:pointer; }
.delivery-panel button { background:var(--blue); color:white; border-color:var(--blue); }
.admin-auth,.row-actions { display:flex; align-items:center; gap:8px; }
.admin-panel { margin-top:22px; }
.admin-form .check-label { display:flex; align-items:center; gap:8px; font-size:13px; color:#59647a; }
.admin-form .check-label input { width:auto; }
.admin-form #cancel-edit { grid-column:1 / -1; }
.admin-form .primary { margin-top:0; }
.row-actions .buy { background:var(--blue); color:white; border-color:var(--blue); }
button:disabled { opacity:.55; cursor:not-allowed; }
@media(max-width:760px) { .admin-auth { width:100%; flex-wrap:wrap; }.row-actions { flex-wrap:wrap; }.admin-form #cancel-edit { grid-column:auto; } }