:root { --bg:#f4f6f7; --panel:#fff; --ink:#17212b; --muted:#657583; --line:#d9e1e5; --nav:#102a3a; --accent:#146c94; --accent-soft:#e6f2f6; --good:#187151; --warn:#7b5e14; --bad:#a23f45; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-size:14px; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.catalog-header { min-height:66px; padding:12px max(24px,calc((100% - 1240px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--nav); }
.catalog-brand { display:grid; grid-template-columns:38px auto; grid-template-rows:20px 14px; column-gap:10px; color:#fff; text-decoration:none; }
.catalog-brand > span { grid-row:1/-1; width:38px; height:38px; border:1px solid #8fd0df; display:grid; place-items:center; color:#b8eef7; font-weight:800; }
.catalog-brand strong { font-size:15px; align-self:end; }
.catalog-brand small { color:#8ba9b9; font-size:9px; }
.catalog-header nav { display:flex; gap:8px; }
.button { min-height:40px; padding:0 15px; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; font-weight:700; text-decoration:none; }
.button.primary { color:#fff; background:var(--accent); }
.button.secondary { color:var(--accent); background:#fff; border-color:var(--line); }
.catalog-header .button.secondary { color:#b8eef7; background:transparent; border-color:#537486; }
main { width:min(1240px,calc(100% - 48px)); margin:30px auto 64px; }
.catalog-intro { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:22px; }
.eyebrow { color:var(--accent); font-size:10px; font-weight:800; }
h1 { margin:7px 0 0; font-size:32px; line-height:1.1; }
.catalog-stats { display:flex; gap:22px; color:var(--muted); font-size:12px; }
.catalog-stats strong { display:block; color:var(--ink); font-size:20px; }
.catalog-filters { display:grid; grid-template-columns:2fr repeat(4,minmax(0,1fr)); gap:12px; padding:18px; margin-bottom:18px; background:var(--panel); border:1px solid var(--line); }
label { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:12px; font-weight:650; }
input,select { width:100%; min-height:40px; padding:9px 11px; border:1px solid var(--line); color:var(--ink); background:#fff; outline:none; }
input:focus,select:focus { border-color:#69a9bf; box-shadow:0 0 0 3px var(--accent-soft); }
.catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.model-card { min-width:0; display:flex; flex-direction:column; gap:12px; padding:18px; background:var(--panel); border:1px solid var(--line); box-shadow:0 8px 24px rgba(29,47,61,.05); }
.model-card header { display:flex; justify-content:space-between; align-items:start; gap:12px; }
.model-card header small { color:var(--muted); }
.model-card h2 { margin:4px 0 0; font-size:17px; overflow-wrap:anywhere; }
.model-card > code { color:#486071; font-size:12px; overflow-wrap:anywhere; }
.model-card > p { min-height:63px; margin:0; color:#526673; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.health { flex:0 0 auto; padding:4px 7px; border:1px solid var(--line); font-size:11px; white-space:nowrap; }
.health.available { color:var(--good); background:#eaf7f0; border-color:#c7e9d9; }
.health.degraded { color:var(--warn); background:#fff8dc; border-color:#e9d990; }
.health.unavailable { color:var(--bad); background:#fff0f0; border-color:#f0cccc; }
.model-tags,.detail-tags { display:flex; flex-wrap:wrap; gap:5px; }
.model-tags span,.detail-tags span { padding:4px 7px; color:#4c6572; background:#eef3f5; font-size:11px; }
.model-card dl { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:0; padding-top:12px; border-top:1px solid var(--line); }
.model-card dl div { min-width:0; }
dt { color:var(--muted); font-size:10px; }
dd { margin:5px 0 0; font-size:12px; font-weight:700; overflow-wrap:anywhere; }
.model-card > .button { margin-top:auto; align-self:flex-start; }
.catalog-status { padding:28px; color:var(--muted); text-align:center; background:#fff; border:1px solid var(--line); }
.catalog-status[role="alert"] { color:var(--bad); background:#fff6f6; }
.hidden { display:none !important; }
dialog { width:min(720px,calc(100% - 32px)); max-height:calc(100vh - 32px); padding:0; border:0; box-shadow:0 18px 70px rgba(0,0,0,.25); }
dialog::backdrop { background:rgba(16,42,58,.5); }
.model-dialog { padding:24px; overflow:auto; }
.model-dialog > header { display:flex; justify-content:space-between; align-items:start; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.model-dialog h2 { margin:5px 0 5px; font-size:24px; }
.model-dialog code { color:#486071; overflow-wrap:anywhere; }
.icon-button { width:36px; height:36px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:23px; line-height:1; }
.model-dialog > p { margin:18px 0; color:#526673; line-height:1.55; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 22px; margin:18px 0; }
.detail-grid > div { display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); }
.detail-grid dd { text-align:right; }
.price-estimator { padding-top:18px; border-top:1px solid var(--line); }
.price-estimator h3 { margin:5px 0 14px; font-size:16px; }
.estimate-inputs { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; gap:12px; }
.estimate-inputs output { min-height:40px; display:flex; align-items:center; justify-content:center; color:var(--good); background:#f0fbf5; border:1px solid #c7e9d9; font-weight:750; }
.model-dialog footer { display:flex; justify-content:flex-end; gap:8px; margin-top:22px; }
.model-page { max-width:1040px; }
.back-link { display:inline-flex; margin-bottom:22px; color:var(--accent); text-decoration:none; font-weight:700; }
.model-page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.model-page-header code { display:block; margin-top:8px; color:#486071; overflow-wrap:anywhere; }
.model-page-description { max-width:760px; margin:22px 0; color:#526673; font-size:16px; line-height:1.6; }
.model-page-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(250px,.7fr); gap:18px; margin-top:24px; }
.model-specs,.model-start,.code-example { background:var(--panel); border:1px solid var(--line); }
.model-specs { padding:22px; }
.model-specs h2,.model-start h2,.code-examples h2 { margin:6px 0 0; font-size:20px; }
.model-start { align-self:start; padding:22px; }
.model-start > code { display:block; margin:18px 0; color:#486071; overflow-wrap:anywhere; }
.model-start-actions { display:grid; gap:8px; }
.code-examples { margin-top:34px; }
.code-example-grid { display:grid; gap:14px; margin-top:17px; }
.code-example header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 16px; border-bottom:1px solid var(--line); }
.code-example header code { color:#486071; font-size:12px; }
.code-example pre { margin:0; padding:18px; overflow:auto; background:#102a3a; color:#e9f7fb; white-space:pre-wrap; word-break:break-word; }
.code-example pre code { font-size:12px; line-height:1.6; }
@media (max-width:900px) { .catalog-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .search-field { grid-column:1/-1; } .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .model-page-layout { grid-template-columns:1fr; } }
@media (max-width:620px) { .catalog-header { padding:12px; } .catalog-brand small { display:none; } .catalog-header .button { padding:0 11px; } main { width:calc(100% - 24px); margin-top:20px; } .catalog-intro,.model-page-header { align-items:start; flex-direction:column; } .catalog-stats { width:100%; justify-content:space-between; } .catalog-filters,.catalog-grid,.detail-grid,.estimate-inputs { grid-template-columns:1fr; } .search-field { grid-column:auto; } .model-card > p { min-height:0; } .model-dialog { padding:20px; } .model-dialog footer { flex-direction:column; } .code-example header { align-items:flex-start; flex-direction:column; } }