/* Visual polish layer: gradients, glass surfaces, depth. Loaded after theme.css. */
:root{--cyan:#22b8cf;--pink:#e255b8;--grad:linear-gradient(120deg,#6254d9 0%,#8b5cf6 45%,#22b8cf 100%);--grad-soft:linear-gradient(120deg,color-mix(in srgb,#6254d9 14%,transparent),color-mix(in srgb,#22b8cf 12%,transparent));--glass:color-mix(in srgb,var(--panel) 72%,transparent);--lift:0 14px 40px -12px color-mix(in srgb,var(--accent) 28%,transparent),0 2px 6px #23283b0a}
:root[data-theme=dark]{--cyan:#5ee0f0;--grad:linear-gradient(120deg,#8b7bff 0%,#c084fc 45%,#5ee0f0 100%);--glass:color-mix(in srgb,var(--panel) 62%,transparent);--lift:0 16px 48px -14px color-mix(in srgb,var(--accent) 45%,transparent),0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)}
::selection{background:color-mix(in srgb,var(--accent) 24%,transparent)}
body{background:radial-gradient(900px 520px at 92% -8%,color-mix(in srgb,#8b5cf6 13%,transparent),transparent 70%),radial-gradient(760px 480px at -6% 32%,color-mix(in srgb,var(--cyan) 9%,transparent),transparent 70%),radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--muted) 16%,transparent) 1px,transparent 0) 0 0/22px 22px,var(--bg);background-attachment:fixed}

/* Header: sticky glass bar with gradient brand */
.header{position:sticky;top:0;z-index:10;background:var(--glass);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom-color:color-mix(in srgb,var(--line) 70%,transparent)}
.header:after{content:'';position:absolute;inset:auto 0 -1px;height:1px;background:var(--grad);opacity:.35;pointer-events:none}
.brand-mark,:root[data-theme=dark] .brand-mark{background:var(--grad);box-shadow:0 6px 18px -4px color-mix(in srgb,var(--accent) 55%,transparent),inset 0 1px 0 #fff4}
.brand>span:last-child{background:linear-gradient(120deg,var(--text) 30%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-sub{-webkit-text-fill-color:var(--muted)}
.theme-toggle,.motion-toggle,.source-button{border-radius:999px;background:var(--glass);padding:9px 14px}
.theme-toggle:hover,.motion-toggle:hover,.source-button:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));color:var(--accent)}

/* Sidebar */
.sidebar{background:color-mix(in srgb,var(--sidebar) 70%,transparent);backdrop-filter:blur(8px)}
.category-list button{position:relative}
.category-list button.selected{background:var(--grad-soft);border-color:color-mix(in srgb,var(--accent) 22%,transparent);font-weight:550;box-shadow:0 4px 14px -6px color-mix(in srgb,var(--accent) 35%,transparent)}
.category-list button.selected:before{content:'';position:absolute;left:-1px;top:22%;bottom:22%;width:3px;border-radius:3px;background:var(--grad)}
.category-list button{white-space:nowrap}
.category-list button.selected .count{background:var(--panel);border-radius:999px;padding:2px 6px}
.provider-options input:checked{background:var(--grad);border-color:transparent}
.sidebar-note{position:relative;margin-left:0;margin-right:0;padding:17px 16px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));border-radius:12px;background:var(--grad-soft)}
.note-cross{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.select-wrap select{border-radius:9px}
/* Hero */
main:before{height:460px;background:radial-gradient(ellipse at 85% 10%,color-mix(in srgb,#8b5cf6 16%,transparent),transparent 60%),radial-gradient(ellipse at 30% 0%,color-mix(in srgb,var(--cyan) 12%,transparent),transparent 55%)}
.eyebrow{display:inline-flex;padding:6px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));background:var(--glass)}
.eyebrow>span{border-radius:50%;background:var(--grad);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
h1 em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.index-stats{gap:12px}
.index-stats>div:not(.stat-icon){border:1px solid var(--line);border-radius:14px;padding:16px 20px;min-width:118px;background:var(--glass);backdrop-filter:blur(8px);box-shadow:var(--shadow);position:relative;overflow:hidden}
.index-stats>div:not(.stat-icon):before{content:'';position:absolute;inset:0 0 auto;height:2px;background:var(--grad)}
.index-stats strong{font-weight:650;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(min-width:1301px){h1{font-size:40px}}

/* Search: gradient border + glow */
#search-form{border:1.5px solid transparent;border-radius:16px;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--grad) border-box;box-shadow:0 12px 36px -14px color-mix(in srgb,var(--accent) 40%,transparent)}
#search-form:focus-within{border-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent),0 16px 44px -14px color-mix(in srgb,var(--accent) 55%,transparent)}
#search-form>button,:root[data-theme=dark] #search-form>button{background:var(--grad);border-radius:11px;font-weight:600;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--accent) 70%,transparent);transition:transform .18s,box-shadow .18s,filter .18s}
#search-form>button:hover{background:var(--grad);filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 10px 22px -8px color-mix(in srgb,var(--accent) 80%,transparent)}
.quick-search button{border-radius:999px;padding:5px 12px;background:var(--glass)}
.quick-search button:hover{background:var(--grad-soft)}
.sync-strip{padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--glass)}

/* Toolbar, chips */
.results-label h2{font-size:17px}
.results-label>span{border-radius:999px;padding:4px 9px;background:var(--grad-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 20%,var(--line))}
.view-toggle{border-radius:9px}.view-toggle button{border-radius:6px}
.view-toggle button.active{background:var(--grad);color:#fff}
.active-filters button{border-radius:999px;padding:6px 12px;border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}

/* Cards: lift, gradient accent, pointer spotlight (uses --pointer-x/y from app.js) */
.resource-card{isolation:isolate;transition:background .18s,border-color .18s,box-shadow .25s,transform .25s}
.resource-card:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--pointer-x,50%) var(--pointer-y,0),color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%)}
.resource-card:after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .35s ease-out;pointer-events:none}
.resource-card:hover:before{opacity:1}.resource-card:hover:after{transform:scaleX(1)}
.resource-grid:not(.list-mode) .resource-card{border-radius:16px;box-shadow:var(--shadow)}
.resource-grid:not(.list-mode) .resource-card:hover{transform:translateY(-3px);box-shadow:var(--lift);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.list-mode .resource-card:after{right:auto;bottom:0;width:3px;height:auto;transform:scaleY(0);transform-origin:top}
.list-mode .resource-card:hover:after{transform:scaleY(1)}
.resource-grid.list-mode{border-radius:0 0 16px 16px;background:var(--panel);box-shadow:var(--shadow)}
.list-columns{border-radius:16px 16px 0 0;background:var(--grad-soft);color:var(--muted);font-weight:500;letter-spacing:.5px}
.resource-icon{border-radius:11px;background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 18%,var(--panel)),color-mix(in srgb,var(--cyan) 14%,var(--panel)));border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:inset 0 1px 0 #fff6}
.card-pricing strong:not(.no-price){background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stock-status{padding:3px 9px 3px 7px;border-radius:999px;width:fit-content}
.in-stock{background:var(--good-soft)}.in-stock i{box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%,transparent),0 0 8px var(--good)}
.out-of-stock{background:color-mix(in srgb,var(--faint) 10%,transparent)}
.low-stock{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}.low-stock i{box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent)}
.details-button{border-radius:8px;font-weight:550}
.details-button:hover{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 14px -6px color-mix(in srgb,var(--accent) 70%,transparent)}
.direct-link{border-radius:8px}
.direct-link:hover{background:var(--grad-soft)}
/* Pagination, empty state, footer */
.pagination button{border-radius:9px;transition:border-color .18s,color .18s}
.pagination button:not(:disabled):hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));color:var(--accent)}
.pagination button[aria-current=page]{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 14px -6px color-mix(in srgb,var(--accent) 70%,transparent)}
.empty-state{border-radius:16px;background:var(--glass)}
.empty-state>span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:46px}
.empty-state button,:root[data-theme=dark] .empty-state button{background:var(--grad);border-radius:999px;padding:12px 22px}
.main-footer b,.results-bottom b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Dialog */
dialog{border-radius:20px;border-color:color-mix(in srgb,var(--accent) 18%,var(--line));background:radial-gradient(600px 240px at 100% 0,color-mix(in srgb,#8b5cf6 9%,transparent),transparent 70%),var(--panel);box-shadow:0 40px 120px -20px color-mix(in srgb,var(--accent) 35%,transparent)}
dialog::backdrop{background:#120f2e70;backdrop-filter:blur(8px)}
.dialog-close{border-radius:999px;width:36px;height:36px;padding:0;display:grid;place-items:center;font-size:22px}
.dialog-close:hover{color:var(--accent);border-color:var(--accent)}
.dialog-action,:root[data-theme=dark] .dialog-action{background:var(--grad);border-radius:10px;font-weight:550;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--accent) 70%,transparent)}
.dialog-action:hover{filter:brightness(1.08)}
.detail-note{border-left:0;border-radius:10px;background:var(--grad-soft);position:relative;padding-left:18px}
.detail-note:before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--grad)}
.detail-table-wrap{border-radius:12px}
.detail-table-wrap tbody tr:hover{background:var(--hover)}
.report-grid>div{border-radius:14px;background:var(--grad-soft);border-color:color-mix(in srgb,var(--accent) 16%,var(--line))}
.report-grid strong{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.source-links a{border-radius:10px;transition:border-color .18s,background .18s}
.source-links a:hover{border-color:var(--accent);background:var(--grad-soft)}

/* Dark mode: a little neon */
:root[data-theme=dark] body{background:radial-gradient(900px 520px at 92% -8%,#8b5cf62a,transparent 70%),radial-gradient(760px 480px at -6% 32%,#5ee0f014,transparent 70%),radial-gradient(circle at 1px 1px,#ffffff10 1px,transparent 0) 0 0/22px 22px,var(--bg);background-attachment:fixed}
:root[data-theme=dark] h1 em{filter:drop-shadow(0 0 18px #a78bfa55)}
:root[data-theme=dark] .resource-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
:root[data-theme=dark] #search-form{box-shadow:0 0 0 1px #8b7bff22,0 16px 50px -12px #8b7bff55}

/* Sticky sidebar on desktop */
@media(min-width:761px){.sidebar{position:sticky;top:78px;height:calc(100vh - 78px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}}
@media(max-width:760px){.sidebar{backdrop-filter:none}.index-stats>div:not(.stat-icon){min-width:0}.category-list button.selected:before{display:none}.resource-grid.list-mode{background:none;box-shadow:none}.list-mode .resource-card{background:var(--panel);box-shadow:var(--shadow)}.list-mode .resource-card:after{display:none}}

/* Filled surfaces with white text use a deeper gradient for contrast */
.brand-mark,:root[data-theme=dark] .brand-mark,#search-form>button,#search-form>button:hover,:root[data-theme=dark] #search-form>button,.view-toggle button.active,.details-button:hover,.pagination button[aria-current=page],.empty-state button,:root[data-theme=dark] .empty-state button,.dialog-action,:root[data-theme=dark] .dialog-action{background:linear-gradient(120deg,#5b4bd6 0%,#7c3aed 50%,#0b7f93 100%);color:#fff}

/* Stock column wide enough for "有货 1.2万 件" */
@media(min-width:1101px) and (max-width:1300px){.list-columns,.list-mode .resource-card{grid-template-columns:minmax(0,1fr) 120px 100px 116px 113px}}
@media(min-width:761px) and (max-width:1100px){.list-columns,.list-mode .resource-card{grid-template-columns:minmax(0,1fr) 100px 112px 111px}}

/* Motion off: keep the look, drop movement */
:root[data-motion=off] .resource-card:hover{transform:none}
@media(prefers-reduced-motion:reduce){.resource-card:hover,#search-form>button:hover{transform:none}}