:root {
  --ink:#233c33; --muted:#617168; --line:#e2e8e0; --cream:#f8f9f5; --paper:#fff; --card:#fff; --white:#fff; --soft:#f1f5ee;
  --page-top:#eef3e7; --green:#205c46; --green-dark:#174634; --mint:#e7efdf; --coral:#b48a51;
  --danger:#ab4d42; --danger-bg:#fcece8; --button-ink:#fff; --shadow:0 8px 28px rgba(29,57,41,.05);
}
body[data-theme="ocean"] { --ink:#24394a; --cream:#f6f8fb; --green:#285e83; --green-dark:#1b425e; --mint:#e1edf5; --page-top:#eaf1f5; --soft:#eff4f8; --line:#dfe7ef; }
body[data-theme="sunset"] { --ink:#493629; --cream:#fbf8f3; --green:#9b4b2e; --green-dark:#763720; --mint:#f6e4d5; --page-top:#f6eddf; --soft:#fbf1e6; --line:#eee2d8; }
body[data-theme="violet"] { --ink:#3e334b; --cream:#f9f7fb; --green:#70588d; --green-dark:#503967; --mint:#ede6f4; --page-top:#efe9f5; --soft:#f3eef8; --line:#e7e0ee; }
body[data-mode="dark"] { color-scheme:dark; --ink:#e6eee7; --muted:#a1b3a5; --cream:#111a16; --paper:#1a2720; --card:#1a2720; --white:#202e25; --soft:#23342a; --page-top:#1e3026; --line:#33473a; --green:#a9d1a9; --green-dark:#c8e4bd; --mint:#2d4938; --button-ink:#173321; --danger:#ffb4a5; --danger-bg:#4a2924; --shadow:0 8px 28px rgba(0,0,0,.12); }
body[data-mode="dark"][data-theme="ocean"] { --ink:#e5edf4; --muted:#a2b4c5; --cream:#111c25; --paper:#1a2a37; --card:#1a2a37; --white:#203342; --soft:#253c4e; --page-top:#1c3242; --line:#344e61; --green:#a8cee9; --green-dark:#cee6f8; --mint:#2b4960; --button-ink:#172e41; }
body[data-mode="dark"][data-theme="sunset"] { --ink:#f1e7df; --muted:#c3ad9e; --cream:#211811; --paper:#302219; --card:#302219; --white:#39281c; --soft:#422e22; --page-top:#3b281d; --line:#553b2b; --green:#efb58b; --green-dark:#f9d4b8; --mint:#583c29; --button-ink:#362111; }
body[data-mode="dark"][data-theme="violet"] { --ink:#eee7f4; --muted:#baacc8; --cream:#1b1523; --paper:#2b2035; --card:#2b2035; --white:#33263e; --soft:#3b2e48; --page-top:#33253e; --line:#4e3d5f; --green:#d1b8ec; --green-dark:#e4cff6; --mint:#4c395e; --button-ink:#2c193c; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; scrollbar-gutter:stable; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html.modal-open { overflow:hidden; overscroll-behavior:none; }
html.modal-open body { overscroll-behavior:none; }
body { margin:0; min-height:100vh; overflow-x:hidden; color:var(--ink); background:var(--cream); font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; font-size:14px; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:disabled { opacity:.6; cursor:wait; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid color-mix(in srgb,var(--green) 50%,transparent); outline-offset:3px; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.select-shell { position:relative; min-width:0; width:100%; }
.select-shell > select.sr-only { pointer-events:none; inset:0 auto auto 0; width:1px!important; min-width:1px!important; height:1px!important; min-height:1px!important; padding:0!important; margin:0!important; border:0!important; }
.select-shell.select-open { z-index:40; }
.select-trigger { display:inline-flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--white); font:inherit; text-align:left; }
.select-chevron { width:8px; height:8px; margin:-4px 2px 0 10px; flex-shrink:0; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.select-trigger[aria-expanded="true"] .select-chevron { margin-top:3px; transform:rotate(225deg); }
.select-menu { position:fixed; z-index:100; inset:auto; margin:0; width:150px; min-width:0; max-height:260px; overflow:auto; overscroll-behavior:contain; padding:7px; border:1px solid var(--line); border-radius:14px; background:var(--paper); box-shadow:var(--shadow); }
.select-menu::backdrop { background:transparent; }
.floating-menu { position:fixed!important; inset:auto; margin:0; right:auto; bottom:auto; min-width:0; max-height:260px; overflow:auto; overscroll-behavior:contain; }
.floating-menu::backdrop { background:transparent; }
.select-label { min-width:0; overflow-wrap:anywhere; }
.select-option:disabled { cursor:not-allowed; opacity:.45; }
.select-trigger:disabled { cursor:not-allowed; }
.select-option:focus-visible { outline-offset:-3px; }
.select-option { display:block; width:100%; min-height:40px; padding:9px 11px; border:0; border-radius:9px; color:var(--ink); background:transparent; text-align:left; font:inherit; }
.select-option:hover,.select-option[aria-selected="true"] { color:var(--green); background:var(--mint); }
body[data-theme="glass"] .select-trigger { border-color:var(--glass-edge); background:var(--glass-sheen),var(--glass-face); box-shadow:inset 0 1px 0 var(--glass-glint),inset 0 -1px 1px var(--glass-shade),0 4px 10px rgba(47,66,105,.06); backdrop-filter:blur(14px) saturate(145%); }
body[data-theme="glass"] .select-menu { border-color:var(--glass-edge); background:var(--glass-sheen),var(--glass-menu); box-shadow:inset 0 1px 0 var(--glass-glint),0 12px 32px rgba(32,48,83,.16); backdrop-filter:blur(22px) saturate(145%); }
body[data-mode="dark"][data-theme="glass"] .select-menu { background:var(--glass-sheen),var(--glass-menu); }
.shell { max-width:1240px; margin:0 auto; padding:0 36px; }
header { position:relative; z-index:10; display:flex; align-items:center; gap:40px; min-height:100px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand-mark { display:grid; place-items:center; width:44px; height:44px; border-radius:50% 50% 45% 16%; color:var(--button-ink); background:var(--green); font-size:24px; font-weight:700; }
.brand-name { font-size:21px; letter-spacing:.08em; font-weight:800; }
.brand-name small { display:block; margin-top:5px; color:var(--muted); font-size:10px; font-weight:400; letter-spacing:.03em; }
.main-nav { display:flex; align-items:center; gap:26px; white-space:nowrap; }
.main-nav a { padding:10px 0; font-size:13px; color:var(--muted); }
.main-nav a:hover,.main-nav .nav-current { color:var(--green); }
.header-tools { display:flex; align-items:center; gap:8px; margin-left:auto; }
.header-tools>.date { display:none; }
.appearance-tools { display:flex; align-items:center; gap:8px; }
.ghost { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:8px 13px; border:1px solid var(--line); border-radius:999px; color:var(--ink); background:var(--white); font-size:12px; white-space:nowrap; transition:background .18s; }
.ghost:hover { background:var(--soft); }
#loginBtn,#logoutBtn { background:var(--green); color:var(--button-ink); border-color:transparent; }
.theme-picker { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.theme-picker>span { display:none; }
.theme-select { position:relative; }
.theme-select-trigger { display:inline-flex; align-items:center; justify-content:space-between; gap:12px; min-width:114px; min-height:38px; padding:8px 13px; border:1px solid var(--line); border-radius:999px; color:var(--ink); background:var(--white); font-size:12px; }
.theme-chevron { width:8px; height:8px; margin:-4px 2px 0 0; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); font-size:0; }
.theme-select-trigger[aria-expanded="true"] .theme-chevron { margin-top:3px; transform:rotate(225deg); }
.theme-menu { position:absolute; z-index:30; top:calc(100% + 9px); right:0; width:166px; padding:7px; border:1px solid var(--line); border-radius:20px; background:var(--paper); box-shadow:var(--shadow); }
.theme-option { display:flex; align-items:center; width:100%; gap:9px; padding:11px 12px; border:0; border-radius:12px; color:var(--ink); background:transparent; text-align:left; font-size:12px; }
.theme-option::before { content:""; width:9px; height:9px; flex-shrink:0; border-radius:50%; background:#487456; }
.theme-option[data-theme-value="ocean"]::before { background:#5887b2; }
.theme-option[data-theme-value="sunset"]::before { background:#c28654; }
.theme-option[data-theme-value="violet"]::before { background:#9f82ba; }
.theme-option[data-theme-value="glass"]::before { background:linear-gradient(135deg,#b1d0e8,#5d9b8a); }
.theme-option:hover,.theme-option[aria-selected="true"] { color:var(--green); background:var(--mint); }
.hero { position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:10px; min-height:358px; margin:28px 0 40px; padding:32px 42px; border-radius:24px; background:var(--page-top); overflow:hidden; }
.hero-copy { position:relative; z-index:1; }
.eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:19px; color:var(--green); font-size:11px; letter-spacing:.12em; }
.eyebrow span { width:6px; height:6px; border-radius:50%; background:currentColor; }
h1 { margin:0 0 20px; font-size:clamp(30px,3.3vw,46px); line-height:1.45; letter-spacing:-.05em; font-weight:750; }
h1 em { color:var(--green); font-style:normal; position:relative; }
h1 em::after { content:""; position:absolute; height:5px; bottom:-5px; left:0; right:0; border-radius:50%; background:var(--green); opacity:.18; transform:rotate(-2deg); }
.subtitle { color:var(--muted); font-size:13px; line-height:1.9; }
.hero .subtitle { margin:0 0 20px; }
.hero-link { display:inline-flex; align-items:center; gap:22px; padding-bottom:5px; border-bottom:1px solid var(--green); color:var(--green); font-size:12px; font-weight:700; }
.hero-link span { font-size:20px; }
.hero-meta { display:flex; align-items:center; gap:8px; margin-top:23px; color:var(--muted); font-size:10px; }
.live-dot { width:5px; height:5px; border-radius:50%; background:var(--green); }
.meta-divider { margin:0 2px; opacity:.5; }
.hero-art { position:relative; align-self:stretch; min-height:300px; display:grid; align-items:center; }
.hero-art svg { position:relative; z-index:1; display:block; width:100%; max-height:330px; }
.art-word { position:absolute; top:-5px; right:5px; color:var(--green); opacity:.07; font-size:clamp(44px,6.5vw,84px); line-height:.98; font-weight:900; letter-spacing:-.06em; }
.art-caption { position:absolute; right:12px; bottom:0; color:var(--muted); font-size:10px; letter-spacing:.16em; }
.catalog-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.section-kicker { display:block; color:var(--muted); font-size:10px; letter-spacing:.12em; margin-bottom:8px; }
.catalog-heading h2 { margin:0; font-size:25px; letter-spacing:-.04em; }
.catalog-heading h2 span { color:var(--green); }
.date { color:var(--muted); font-size:12px; }
.search-card { padding:18px 20px 15px; border:1px solid var(--line); border-radius:18px; background:var(--card); }
.search-row { display:flex; align-items:center; gap:10px; padding:4px 4px 4px 14px; border:1px solid var(--line); border-radius:12px; background:var(--soft); }
.search-icon { width:20px; height:20px; flex-shrink:0; color:var(--muted); }
.search-row input { flex:1; min-width:0; height:42px; padding:8px 0; border:0; color:var(--ink); background:transparent; outline:none; font-size:13px; }
input::placeholder { color:var(--muted); opacity:.85; }
.search-row:focus-within { border-color:var(--green); }
.search-row input:focus-visible { outline:none; }
.primary { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:44px; padding:11px 22px; border:1px solid transparent; border-radius:10px; color:var(--button-ink); background:var(--green); font-size:13px; font-weight:650; transition:background .18s,transform .18s; white-space:nowrap; }
.primary:hover { background:var(--green-dark); transform:translateY(-1px); }
.primary span { font-size:18px; font-weight:400; }
.search-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; color:var(--muted); font-size:11px; }
.quick-search { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.quick-search>span { margin-right:5px; }
.quick-search button { padding:5px 12px; border:0; border-radius:999px; background:var(--soft); color:var(--muted); font-size:11px; }
.quick-search button[aria-pressed="true"],.quick-search button:hover { color:var(--green); background:var(--mint); }
.list-controls { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:13px; padding-top:12px; border-top:1px solid var(--line); }
.category-filter { display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
.category-filter>span, .list-sort { color:var(--muted); font-size:11px; }
.category-filter>span { margin-right:3px; }
.category-filter button { padding:5px 10px; border:0; border-radius:999px; color:var(--muted); background:var(--soft); font-size:11px; }
.category-filter button[aria-pressed="true"], .category-filter button:hover { color:var(--green); background:var(--mint); }
.list-sort { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; }
.list-sort select { min-height:30px; padding:5px 24px 5px 9px; border:1px solid var(--line); border-radius:999px; color:var(--ink); background:var(--white); font-size:11px; cursor:pointer; }
.list-legend { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 18px; margin:-5px 0 16px; color:var(--muted); font-size:12px; line-height:1.7; }
.price-updated { margin-top:12px; padding-top:10px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; line-height:1.6; }
.summary-card { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:24px 0 17px; }
.summary-main { display:flex; align-items:center; gap:9px; }
.summary-main h3 { margin:0; font-size:16px; font-weight:650; }
.count-pill { padding:4px 8px; border-radius:6px; background:var(--mint); color:var(--green); font-size:10px; }
.summary-number { font-variant-numeric:tabular-nums; font-weight:700; }
.sync-info { text-align:right; }
.sync-state { display:block; color:var(--green); font-size:11px; }
.updated { margin-top:4px; color:var(--muted); font-size:10px; }
.sync-state.offline,.error { color:var(--danger); }
.results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.results.large-list .price-card { content-visibility:auto; contain-intrinsic-size:auto 250px; }
.price-card { display:flex; flex-direction:column; min-height:209px; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--paper); transition:border-color .2s,transform .2s,box-shadow .2s; }
.price-card:hover { border-color:color-mix(in srgb,var(--green) 40%,var(--line)); transform:translateY(-3px); box-shadow:var(--shadow); }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.category { color:var(--muted); font-size:11px; letter-spacing:.03em; }
.badge { display:inline-flex; align-items:center; gap:4px; padding:4px 7px; color:var(--green); background:var(--mint); border-radius:5px; font-size:10px; }
.badge::before { content:""; width:4px; height:4px; border-radius:50%; background:currentColor; }
.badge-latest { color:#83511e; background:#f8e8cf; }
.badge-latest::before { box-shadow:0 0 0 3px rgba(201,126,49,.14); }
body[data-mode="dark"] .badge-latest { color:#f1cc8d; background:rgba(148,104,45,.3); }
.price-card h3 { font-size:22px; font-weight:650; letter-spacing:-.03em; margin:21px 0 10px; }
.price { display:flex; align-items:baseline; gap:4px; color:var(--green); font-family:"Segoe UI","Microsoft YaHei",sans-serif; font-size:34px; font-weight:650; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.currency { font-size:17px; font-weight:500; }
.unit { color:var(--muted); font-family:"Microsoft YaHei",sans-serif; font-size:11px; font-weight:400; letter-spacing:0; margin-left:3px; }
.note { margin-top:auto; padding-top:17px; color:var(--muted); font-size:11px; line-height:1.7; }
.empty { grid-column:1/-1; padding:50px 20px; text-align:center; color:var(--muted); background:var(--card); border:1px dashed var(--line); border-radius:16px; }
.management { margin-top:32px; }
.manage-card { padding:26px; border:1px solid var(--line); border-radius:18px; background:var(--card); }
.manage-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.manage-head h2 { margin:0; font-size:21px; }
.manage-head p { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.7; }
.form-grid { display:grid; gap:12px; align-items:end; }
label { color:var(--muted); font-size:12px; }
.form-grid input,.login-form>input { display:block; width:100%; min-width:0; min-height:44px; margin-top:8px; padding:10px 12px; color:var(--ink); background:var(--white); border:1px solid var(--line); border-radius:9px; outline:none; }
.form-grid input:focus-visible,.login-form>input:focus-visible { outline:3px solid var(--green); outline-offset:3px; border-color:var(--green); }
.form-actions { display:flex; flex-direction:column; gap:6px; }
.hint { color:var(--muted); font-size:11px; line-height:1.8; }
.data-list { display:grid; gap:8px; margin-top:16px; }
.data-row { display:grid; grid-template-columns:1.2fr 1fr 1.1fr 1.5fr auto; align-items:center; gap:12px; padding:14px; color:var(--ink); background:var(--soft); border-radius:10px; font-size:12px; }
.data-row>*,.price-card>* { min-width:0; overflow-wrap:anywhere; }
.row-actions { display:flex; gap:6px; }
.danger { min-height:36px; padding:7px 10px; color:var(--danger); background:var(--danger-bg); border:0; border-radius:8px; font-size:12px; }
.wholesale-cta { position:relative; display:flex; justify-content:space-between; align-items:center; gap:30px; margin:38px 0 0; padding:32px 38px; border:1px solid var(--line); border-radius:18px; background:var(--page-top); }
.wholesale-cta::after { content:""; position:absolute; width:130px; height:130px; right:180px; bottom:-1px; border:1px solid var(--green); border-radius:50% 50% 0 0; opacity:.05; pointer-events:none; }
.cta-kicker { color:var(--green); font-size:10px; letter-spacing:.1em; }
.wholesale-copy h2 { margin:11px 0 13px; font-size:27px; letter-spacing:-.04em; font-weight:650; }
.wholesale-copy p { margin:0; color:var(--muted); font-size:12px; line-height:1.9; }
.contact-button { flex-shrink:0; min-width:148px; }
footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:28px 0 32px; color:var(--muted); font-size:10px; line-height:1.8; }
.footer-brand { color:var(--ink); font-weight:700; font-size:14px; }
.footer-brand small { margin-left:10px; color:var(--muted); font-weight:400; font-size:10px; }
footer>div { text-align:right; }
footer a { text-decoration:underline; text-underline-offset:3px; }
dialog { width:min(440px,calc(100% - 32px)); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto; padding:28px; color:var(--ink); border:1px solid var(--line); border-radius:22px; background:var(--paper); box-shadow:0 24px 90px rgba(0,0,0,.2); }
dialog::backdrop { background:rgba(17,34,30,.4); backdrop-filter:blur(5px); }
.login-form>.primary { width:100%; margin-top:18px; }
.contact-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }
.contact-dialog-head h2 { margin:8px 0 0; font-size:25px; }
.wechat-qr { display:flex; flex-direction:column; align-items:center; margin:18px auto 2px; }
.wechat-qr img { display:block; width:min(210px,70vw); height:auto; aspect-ratio:1; padding:8px; border:1px solid var(--line); border-radius:14px; background:#fff; object-fit:contain; box-shadow:0 8px 22px rgba(31,72,63,.1); }
.wechat-qr p { margin:8px 0 0; color:var(--muted); font-size:11px; }
.contact-list { display:grid; gap:12px; margin-top:20px; }
.contact-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:var(--soft); }
.contact-item>span { color:var(--muted); font-size:12px; flex-shrink:0; }
.contact-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; min-width:0; }
.contact-value { display:inline-flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:4px 10px; min-width:0; min-height:44px; padding:5px; border:0; border-radius:7px; color:var(--green); background:transparent; }
.contact-value strong { font-size:15px; }
.contact-value small { color:var(--muted); font-size:10px; }
.contact-value:hover,.contact-value.copied { background:var(--mint); }
.contact-call { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:7px 9px; border:1px solid var(--line); border-radius:7px; color:var(--green); font-size:10px; }
.contact-call:hover { background:var(--mint); }
.copy-status { min-height:18px; margin:14px 0 0; color:var(--green); text-align:right; font-size:11px; }
@media(max-width:1100px) { header { gap:20px; } .main-nav { gap:18px; } .brand-name small { display:none; } .hero { padding:30px; } .form-grid { grid-template-columns:1fr 1fr; } .form-actions { grid-column:1/-1; flex-direction:row; } .data-row { grid-template-columns:1fr 1fr; } .row-actions { grid-column:1/-1; } }
@media(max-width:760px) { .shell { padding:0 22px; } header { flex-wrap:wrap; min-height:0; gap:18px; padding:21px 0 18px; } .main-nav { margin-left:auto; } .header-tools { width:100%; margin:0; justify-content:space-between; } .hero { margin-top:22px; padding:28px; min-height:0; gap:0; } h1 { font-size:30px; } .hero-art { min-height:220px; } .art-word { font-size:52px; } .hero-art svg { width:115%; margin-left:-6%; } .art-caption { display:none; } .results { grid-template-columns:repeat(2,minmax(0,1fr)); } .wholesale-cta { padding:28px; } .wholesale-copy h2 { font-size:23px; } .contact-button { min-width:126px; } }
@media(max-width:520px) {
  .shell { padding:0 18px; } .brand-mark { width:37px; height:37px; font-size:21px; } .brand-name { font-size:18px; } .main-nav { gap:16px; } .main-nav a { font-size:12px; }
  .hero { grid-template-columns:1fr; padding:27px 24px; margin-bottom:30px; } h1 { font-size:32px; } .hero-art { position:absolute; z-index:0; right:-23px; bottom:5px; width:150px; min-height:0; height:145px; opacity:.9; } .hero-art svg { height:145px; width:100%; margin-left:0; } .art-word { display:none; } .hero-meta { margin-top:17px; font-size:9px; } .hero .subtitle { max-width:220px; font-size:12px; } .eyebrow { font-size:10px; margin-bottom:12px; }
  .catalog-heading { margin-bottom:18px; } .catalog-heading h2 { font-size:22px; } .catalog-date { display:none; } .search-card { padding:12px; border-radius:14px; } .search-row { gap:7px; padding-left:9px; } .search-row input { font-size:12px; } .search-row input::placeholder { font-size:11px; } .search-row .primary { min-height:42px; padding:9px 12px; gap:5px; font-size:12px; } .search-row .primary span { display:none; }
  .quick-search { gap:5px; } .quick-search>span { display:none; } .quick-search button { padding:6px 10px; } #resultLabel { display:none; } .list-controls { align-items:flex-start; flex-direction:column; gap:10px; } .category-filter { gap:5px; } .category-filter>span { width:100%; } .list-sort { width:100%; justify-content:space-between; } .list-sort select { flex:1; max-width:180px; } .summary-card { margin-top:23px; gap:10px; } .summary-main h3 { font-size:15px; } .updated { max-width:200px; font-size:8px; line-height:1.6; } .sync-state { font-size:9px; } .results { grid-template-columns:1fr; gap:12px; } .price-card { min-height:187px; padding:20px; } .price-card h3 { margin-top:14px; }
  .wholesale-cta { align-items:flex-start; flex-direction:column; gap:22px; margin-top:28px; padding:26px; } .wholesale-cta::after { right:15px; } .wholesale-copy h2 { font-size:23px; } .contact-button { width:100%; } footer { align-items:flex-start; flex-direction:column; gap:10px; } footer>div { text-align:left; } .manage-card { padding:18px; } .manage-head { align-items:flex-start; } dialog { padding:23px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }
@media(max-width:360px) { h1 { font-size:28px; } .hero { padding:25px 20px; } .hero-art { width:125px; right:0; } .wholesale-copy h2 { font-size:21px; } }
@media(max-width:760px) { .theme-menu { left:0; right:auto; } }

/* Comfortable reading and touch targets, including compact phone screens. */
.category-filter button { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:8px 12px; font-size:12px; }
.filter-count { color:var(--muted); font-variant-numeric:tabular-nums; font-size:11px; }
.category-filter button[aria-pressed="true"] .filter-count { color:var(--green); }
.sort-picker { position:relative; }
.sort-trigger { display:inline-flex; align-items:center; justify-content:space-between; gap:10px; min-width:142px; min-height:40px; padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:var(--ink); background:var(--white); font-size:12px; }
.sort-chevron { width:8px; height:8px; margin:-4px 2px 0 0; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.sort-trigger[aria-expanded="true"] .sort-chevron { margin-top:3px; transform:rotate(225deg); }
.sort-menu { position:absolute; z-index:30; top:calc(100% + 8px); right:0; width:160px; padding:7px; border:1px solid var(--line); border-radius:18px; background:var(--paper); box-shadow:var(--shadow); }
.sort-option { display:block; width:100%; padding:10px 11px; border:0; border-radius:11px; color:var(--ink); background:transparent; text-align:left; font-size:12px; }
.sort-option:hover,.sort-option[aria-selected="true"] { color:var(--green); background:var(--mint); }
.list-sort select.sr-only { position:fixed; left:-10000px; top:-10000px; width:1px!important; min-width:1px!important; max-width:1px!important; height:1px!important; min-height:1px!important; padding:0!important; border:0!important; }
.category-filter>span,.list-sort { font-size:12px; }
.summary-card { flex-wrap:wrap; }
.updated,.price-updated { font-size:12px; line-height:1.7; }
.sync-state,.category,.note { font-size:12px; }
.badge { font-size:11px; }
.subtitle { font-size:14px; }
.ghost,.theme-select-trigger,.theme-option,.contact-call { min-height:44px; }
.contact-call { display:inline-flex; align-items:center; justify-content:center; min-width:44px; }
@media(max-width:760px) {
  .category-filter button,.list-sort select { min-height:44px; }
  .list-controls { flex-wrap:wrap; }
  .search-row input,.form-grid input,.form-grid select,.login-form>input { font-size:16px; }
  .hint,.price-updated,.updated,.sync-state,.hero-meta,.wholesale-copy p { font-size:12px; }
}
@media(max-width:520px) {
  .search-row input::placeholder { font-size:13px; }
  .search-row .primary { min-height:44px; font-size:13px; }
  .category-filter>span { width:auto; }
  .category-filter button { padding:8px 10px; }
  .sort-trigger { width:100%; }
  .sort-picker { width:100%; }
  .sort-menu { left:0; right:auto; width:100%; }
  #resultLabel { display:inline; }
  .updated { max-width:100%; }
  .sync-info { text-align:left; flex-basis:100%; }
  .hero .subtitle { font-size:14px; max-width:none; }
  .hero-meta { font-size:11px; }
}
.manage-tools { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.form-grid { grid-template-columns:1.2fr .8fr .8fr 1fr 1.3fr auto; }
.form-grid select,.batch-row input,.batch-row select { display:block; width:100%; min-width:0; min-height:44px; margin-top:8px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--white); font:inherit; }
.form-grid label,.batch-row label { min-width:0; font-size:12px; }
.data-row small { display:block; margin-top:6px; color:var(--muted); font-size:11px; }
.batch-hint { color:var(--muted); font-size:13px; line-height:1.8; }
.batch-rows { display:grid; gap:12px; }
.batch-row { display:grid; grid-template-columns:1.2fr .8fr .8fr 1fr 1.4fr; gap:12px; align-items:center; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--soft); }
.batch-name { min-width:0; overflow-wrap:anywhere; }
.batch-name strong { font-size:15px; }
.batch-name span { display:block; margin-top:8px; font-size:12px; color:var(--muted); }
.batch-conflict { grid-column:1/-1; margin:0; font-size:12px; line-height:1.7; color:var(--danger); }
.batch-conflict:empty { display:none; }
.batch-row.has-conflict { border-color:var(--danger); }
.batch-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
#reviewDialog { width:min(680px,calc(100% - 32px)); }
.review-changes { display:grid; gap:12px; }
.review-row { border:1px solid var(--line); border-radius:14px; padding:18px; background:var(--soft); overflow-wrap:anywhere; }
.review-row h3 { margin:0 0 16px; font-size:17px; }
.review-comparison { display:grid; grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr); gap:12px; align-items:start; }
.review-comparison>div { display:flex; flex-direction:column; gap:6px; min-width:0; }
.review-comparison small,.review-comparison span { color:var(--muted); font-size:12px; }
.review-comparison strong { color:var(--green); font-size:18px; }
.unit-warning { color:var(--danger); font-size:12px; line-height:1.7; margin-bottom:0; }
#reviewStatus { font-size:13px; }
#confirmPublish { width:100%; }
.store-info { display:flex; justify-content:space-between; gap:24px; align-items:center; margin-top:28px; padding:26px 4px; border-bottom:1px solid var(--line); }
.store-info h2 { font-size:20px; margin:10px 0; }
.store-info p { font-size:13px; line-height:1.8; color:var(--muted); }
.contact-address { font-size:13px; line-height:1.8; color:var(--muted); padding:12px; border-radius:10px; background:var(--soft); }
.draft-panel { display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin:0 0 18px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--mint); }
.draft-panel>div { flex:1 1 280px; }
.draft-panel strong { font-size:13px; }
.draft-panel p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.draft-panel label { display:flex; align-items:center; gap:7px; font-size:11px; }
.draft-panel select,.import-file input { min-height:38px; padding:7px 10px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--white); font:inherit; }
.draft-actions,.import-actions { display:flex; flex-wrap:wrap; gap:7px; }
.draft-actions .ghost { min-height:36px; }
.admin-filters { display:flex; align-items:end; flex-wrap:wrap; gap:10px; margin:16px 0 10px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--soft); }
.admin-filters label:not(.select-visible) { min-width:180px; }
.admin-filters label { font-size:11px; }
.admin-filters input[type="search"],.admin-filters select { display:block; min-height:38px; width:100%; margin-top:5px; padding:7px 10px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--white); font:inherit; }
.admin-filters .select-visible { display:inline-flex; flex:0 0 auto; align-items:center; gap:9px; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:var(--ink); background:var(--white); white-space:nowrap; cursor:pointer; font-size:12px; }
.select-visible input[type="checkbox"],.admin-product input[type="checkbox"] { appearance:none; -webkit-appearance:none; display:inline-block; position:relative; flex:0 0 20px; width:20px; min-width:20px; max-width:20px; height:20px; min-height:20px; margin:0; padding:0; border:1.5px solid var(--muted); border-radius:5px; background:var(--white); box-shadow:none; cursor:pointer; }
.select-visible input[type="checkbox"]:checked,.select-visible input[type="checkbox"]:indeterminate,.admin-product input[type="checkbox"]:checked { background:var(--ink); border-color:var(--ink); }
.select-visible input[type="checkbox"]:checked::after,.admin-product input[type="checkbox"]:checked::after { content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid var(--cream); border-width:0 2px 2px 0; transform:rotate(45deg); }
.select-visible input[type="checkbox"]:indeterminate::after { content:""; position:absolute; left:4px; right:4px; top:8px; height:2px; background:var(--cream); }
.select-visible input[type="checkbox"]:disabled { opacity:.45; cursor:default; }
.admin-filters #selectionCount { margin-left:auto; color:var(--muted); font-size:11px; }
.admin-product { display:flex; align-items:center; gap:10px; min-width:0; }
.import-summary { margin:16px 0; padding:12px 14px; border-radius:10px; background:var(--mint); color:var(--green); font-size:12px; line-height:1.8; }
.import-file { display:block; margin-top:18px; }
.import-file input { display:block; width:100%; min-width:0; margin-top:8px; }
#importSummary { min-width:0; }
.import-preview-list { display:grid; gap:10px; max-height:340px; overflow:auto; overscroll-behavior:contain; }
.import-pagination { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 0; }
.import-pagination>span { min-width:0; color:var(--muted); font-size:12px; text-align:center; }
#importDialog { width:min(680px,calc(100% - 32px)); }
#fullBackupDialog { width:min(600px,calc(100% - 32px)); }
#downloadFullBackup { width:100%; }
.full-backup-info { padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--soft); }
.full-backup-info h3 { margin:0 0 12px; font-size:17px; }
.full-backup-info p { margin-bottom:0; }
#historyDialog { width:min(740px,calc(100% - 32px)); }
#historyDialog[open] { display:flex; flex-direction:column; }
#historyDialog>.manage-head { flex-direction:row; flex-shrink:0; }
#historyDialog>.manage-head>div { min-width:0; }
#closeHistory { flex-shrink:0; }
#historyDialog>.hint,#historyDialog>nav,.history-toolbar { flex-shrink:0; }
.history-filter-panel { flex-shrink:0; min-width:0; margin-top:12px; }
.history-filter-panel summary { cursor:pointer; min-height:44px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--soft); font-size:13px; overflow-wrap:anywhere; }
.history-filter-panel summary span { color:var(--muted); font-size:11px; margin-left:8px; }
.history-filters { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:12px; max-height:42vh; max-height:42dvh; overflow-y:auto; overscroll-behavior:contain; margin-top:10px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--soft); }
.history-filters label { min-width:0; font-size:12px; color:var(--muted); }
.history-search { grid-column:span 2; }
.history-filters input { display:block; width:100%; min-width:0; min-height:44px; margin-top:8px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:var(--white); font:inherit; }
.history-filters .select-shell { margin-top:8px; }
.history-filter-actions { display:flex; align-items:end; flex-wrap:wrap; gap:8px; }
.history-filter-actions button { flex:1 1 auto; }
@media(max-width:520px) {
  .history-filters { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; padding:12px; }
  .history-filters>label,.history-filter-actions { grid-column:1/-1; }
  .history-filters input { font-size:16px; }
  .history-filter-actions button { min-height:44px; }
}
.history-toolbar,.history-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.history-toolbar { margin:18px 0 8px; color:var(--muted); font-size:12px; }
.history-list { display:grid; gap:12px; min-width:0; min-height:0; max-height:52vh; max-height:52dvh; overflow-y:auto; overscroll-behavior:contain; }
.history-list:focus-visible { outline:2px solid var(--green); outline-offset:3px; border-radius:14px; }
.history-meta { margin-bottom:14px; color:var(--muted); font-size:11px; }
.history-operation { padding:5px 10px; border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--ink); }
.history-deleted { color:var(--danger); }
#historyNew { color:var(--green); }
.qr-open { padding:0; border:0; background:transparent; border-radius:15px; cursor:zoom-in; }
.qr-open:focus-visible { outline-offset:6px; }
#qrDialog { width:min(680px,calc(100% - 32px)); height:min(800px,calc(100vh - 32px)); height:min(800px,calc(100dvh - 32px)); padding:24px; overflow:hidden; }
#qrDialog[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:16px; }
.qr-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; min-width:0; }
.qr-heading h2 { margin:0; min-width:0; font-size:23px; }
#closeQr { flex-shrink:0; min-height:44px; }
.qr-image-stage { display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; padding:12px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.qr-large { display:block; width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; }
.qr-footer { display:grid; gap:12px; min-width:0; }
.qr-footer .hint { margin:0; overflow-wrap:anywhere; }
#qrDialog .primary { width:100%; text-decoration:none; }
@media(max-width:520px) {
  #qrDialog { height:min(620px,calc(100vh - 24px)); height:min(620px,calc(100dvh - 24px)); max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); width:calc(100% - 24px); padding:16px; }
  #qrDialog[open] { gap:12px; }
  .qr-heading h2 { font-size:20px; }
  .qr-image-stage { padding:10px; border-radius:14px; }
}
@media(orientation:landscape) and (max-height:540px) {
  #qrDialog { width:min(820px,calc(100% - 24px)); height:calc(100vh - 24px); height:calc(100dvh - 24px); max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); padding:16px; }
  #qrDialog[open] { grid-template-columns:minmax(0,1fr) minmax(180px,.8fr); grid-template-rows:auto minmax(0,1fr); gap:12px 20px; }
  .qr-image-stage { grid-row:1 / -1; grid-column:1; }
  .qr-heading { grid-column:2; }
  .qr-footer { grid-column:2; align-self:end; }
}
@media(max-width:1100px) { .form-grid { grid-template-columns:1fr 1fr; } .batch-row { grid-template-columns:1fr 1fr; } .batch-name { grid-column:1/-1; } }
@media(max-width:520px) {
  .form-grid input,.form-grid select,.batch-row input,.batch-row select { font-size:16px; }
  .form-grid { gap:15px 10px; }
  .form-grid label:first-child { grid-column:1/-1; }
  .manage-head { flex-direction:column; }
  .manage-tools { justify-content:flex-start; }
  .batch-row { padding:13px; gap:12px 10px; }
  .batch-row label:last-of-type { grid-column:1/-1; }
  .review-comparison { gap:8px; grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr); }
  .review-comparison strong { font-size:16px; }
  .store-info { flex-direction:column; align-items:flex-start; gap:0; }
  .store-note { margin-top:0; }
  .admin-filters { align-items:stretch; flex-direction:column; }
  .admin-filters label:not(.select-visible) { min-width:0; }
  .admin-filters input[type="search"] { min-height:44px; font-size:16px; }
  .admin-filters #selectionCount { margin-left:0; }
  .draft-panel { align-items:stretch; flex-direction:column; }
  .draft-panel label { align-items:flex-start; flex-direction:column; }
  .draft-panel select { width:100%; }
  .import-pagination { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .import-pagination>span { grid-column:1/-1; grid-row:1; }
  .import-pagination .ghost { width:100%; min-width:0; }
  .import-actions>* { flex:1 1 140px; }
}
@media(pointer:coarse) {
  input:not([type="checkbox"]):not([type="radio"]),textarea,select { font-size:16px; }
  .admin-filters input[type="search"] { min-height:44px; }
}