:root { color-scheme:dark; font-family:Inter,"Microsoft YaHei",system-ui,sans-serif; color:#f5f7fa; background:#0b1016; --muted:#94a3b3; --line:#ffffff16; --accent:#d7ff43; }
* { box-sizing:border-box; } body { margin:0; min-width:300px; background:radial-gradient(ellipse at 80% 8%,#25332666,transparent 44%); }
button,input { font:inherit; } a { color:inherit; } [hidden] { display:none !important; }
.catalog-shell { max-width:1440px; margin:auto; padding:0 48px; }
.catalog-header { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.catalog-brand { display:flex; align-items:center; gap:12px; font-size:14px; font-weight:800; letter-spacing:.1em; text-decoration:none; }
.brand-mark { color:var(--accent); font-size:34px; } .catalog-label,.catalog-footer { font-size:12px; color:var(--muted); }
.catalog-hero { padding:36px 0 28px; } .eyebrow { color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.2em; }
h1 { margin:12px 0; font-size:clamp(32px,3.2vw,44px); font-weight:700; line-height:1.2; letter-spacing:-.05em; }
.catalog-hero p { max-width:580px; color:var(--muted); line-height:1.9; font-size:15px; }
.hero-steps { display:flex; align-items:center; gap:20px; margin-top:20px; color:#c9d5df; font-size:12px; } .hero-steps i { color:#586772; font-style:normal; }
.catalog-browser { border-top:1px solid var(--line); padding-top:30px; }
.catalog-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; }
h2 { font-size:22px; margin:0 0 10px; } #modelCount { color:var(--muted); font-size:13px; font-weight:400; margin-left:8px; }
.catalog-toolbar p { margin:0; color:var(--muted); font-size:13px; }
.catalog-search { display:grid; gap:7px; font-size:12px; color:var(--muted); }
.catalog-search input { width:280px; max-width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:#141c25; color:#fff; outline:none; } .catalog-search input:focus { border-color:var(--accent); }
.category-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:24px 0 20px; }
.category-tab { min-height:36px; padding:7px 18px; border-radius:999px; color:#bdc9d4; background:transparent; border:1px solid var(--line); cursor:pointer; }
.category-tab[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#171d12; font-weight:700; }
#catalogFeedback { color:var(--muted); font-size:13px; } .model-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.model-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#111923; color:inherit; text-decoration:none; transition:border-color .2s,transform .2s; }
.model-card[href]:hover { border-color:#d7ff4360; transform:translateY(-3px); }
.model-card[href]:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-color:var(--accent); }
.model-image { display:block; position:relative; background:#e7e9eb; aspect-ratio:2/1; overflow:hidden; } .model-image img { width:100%; height:100%; object-fit:contain; }
.model-category { position:absolute; left:18px; top:16px; padding:5px 9px; color:#fff; background:#111923cc; border-radius:5px; font-size:10px; letter-spacing:.1em; font-weight:700; }
.model-content { display:flex; flex-direction:column; flex:1; padding:24px; } .model-content h3 { margin:0 0 8px; font-size:26px; }
.model-meta { margin:0; color:var(--accent); font-size:12px; } .model-description { margin:16px 0 0; color:var(--muted); font-size:13px; line-height:1.8; }
.model-ordering-status { align-self:flex-start; margin:0 0 12px; padding:4px 9px; border:1px solid #a7b6c73a; border-radius:999px; color:#bdc9d4; font-size:11px; }
.model-ordering-status.open { color:#a8edcf; border-color:#56c99760; background:#1b46364d; }
.model-disabled { cursor:not-allowed; opacity:.55; }
.catalog-empty { padding:40px 0; text-align:center; color:var(--muted); }
.catalog-footer { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; margin-top:56px; padding:24px 0 32px; border-top:1px solid var(--line); line-height:1.8; }
@media(min-width:700px) { h1 br { display:none; } }
@media(max-width:699px) { .catalog-shell { padding:0 20px; } .catalog-header { min-height:72px; } .catalog-label { display:none; } .catalog-hero { padding:44px 0 36px; } .hero-steps { gap:10px; font-size:11px; } .model-grid { grid-template-columns:1fr; gap:18px; } .catalog-search,.catalog-search input { width:100%; } .model-content { padding:20px; } .catalog-footer { margin-top:36px; } }