/* Variables */
:root { --bg:#f4f5f2; --surface:#fff; --surface-alt:#edf0ed; --text:#202724; --muted:#65716b; --border:#d7ddd8; --primary:#285943; --primary-hover:#174331; --success:#17613f; --shadow:0 4px 18px #1d30230d; --radius:10px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--text); background:var(--bg); }

/* Base and layout */
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; display:flex; flex-direction:column; font-size:16px; line-height:1.5; }
a { color:var(--primary); text-underline-offset:3px; }
a:hover { color:var(--primary-hover); }
:focus-visible { outline:3px solid #d8902e; outline-offset:3px; }
main { width:100%; max-width:1500px; flex:1; margin:0 auto; padding:2.25rem 1.5rem 3rem; }
h1,h2 { margin:0; color:#17211c; line-height:1.18; overflow-wrap:anywhere; }
h1 { font-size:clamp(1.7rem,3vw,2.35rem); }
h2 { font-size:1.05rem; }
.muted,.card-meta,.detail-summary { color:var(--muted); }
.eyebrow { margin:0 0 .25rem; color:var(--primary); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Header */
.site-header { color:#f7faf7; background:#18231e; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:1500px; margin:auto; padding:.8rem 1.5rem; }
.brand { color:inherit; font-weight:750; letter-spacing:-.02em; text-decoration:none; }
.site-header nav { display:flex; align-items:center; gap:1rem; }
.site-header nav a { color:#dce7df; text-decoration:none; }
.site-header nav a:hover { color:#fff; }
.site-header form { margin:0; }

/* Forms and buttons */
.button { display:inline-flex; align-items:center; justify-content:center; min-height:2.5rem; padding:.55rem .9rem; border:1px solid transparent; border-radius:7px; font:inherit; font-weight:650; text-decoration:none; cursor:pointer; }
.button-primary { color:#fff; background:var(--primary); }
.button-primary:hover { color:#fff; background:var(--primary-hover); }
.button-secondary { color:var(--text); background:var(--surface); border-color:var(--border); }
.button-ghost { padding:.35rem; color:inherit; background:transparent; border:0; }
label { display:grid; gap:.3rem; color:var(--muted); font-size:.84rem; font-weight:650; }
input,select { width:100%; min-height:2.5rem; padding:.5rem .65rem; color:var(--text); background:#fff; border:1px solid var(--border); border-radius:6px; font:inherit; }
.filter-toolbar { display:grid; grid-template-columns:minmax(12rem,1.8fr) minmax(9rem,1fr) minmax(8rem,1fr) 2.4fr auto; align-items:end; gap:.8rem; padding:1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.filter-toggles { display:flex; flex-wrap:wrap; gap:.4rem .7rem; padding:0; margin:0; border:0; }
.filter-toggles legend { width:100%; padding:0; color:var(--muted); font-size:.84rem; font-weight:650; }
.filter-toggles label { display:flex; align-items:center; gap:.35rem; white-space:nowrap; }
.filter-toggles input { width:auto; min-height:auto; }
.filter-actions,.state-controls { display:flex; flex-wrap:wrap; gap:.4rem; }

/* Grid and cards */
.page-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.page-heading .muted { margin:0; }
.package-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.15rem; margin-top:1.25rem; }
.package-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.card-preview { display:grid; place-items:center; aspect-ratio:1; background:var(--surface-alt); text-decoration:none; }
.card-preview img { width:100%; height:100%; object-fit:contain; }
.card-model-indicator,.preview-placeholder { display:grid; place-items:center; min-height:100%; padding:1rem; color:var(--muted); text-align:center; }
.card-body { display:flex; flex:1; flex-direction:column; gap:.45rem; padding:1rem; }
.card-body h2 a { color:var(--text); text-decoration:none; }
.card-body h2 a:hover { text-decoration:underline; }
.card-meta,.availability { margin:0; font-size:.86rem; }
.availability { margin-top:auto; color:var(--success); font-size:.78rem; font-weight:700; }
.state-controls { margin-top:.35rem; }
.state-controls form { margin:0; }
.state-toggle { padding:.35rem .58rem; color:#405048; background:#fff; border:1px solid var(--border); border-radius:999px; font:inherit; font-size:.77rem; font-weight:650; cursor:pointer; }
.state-toggle.active { color:#174c32; background:#e5f2e9; border-color:#246144; }
.empty-state { grid-column:1/-1; padding:3rem 1rem; text-align:center; background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius); }

/* Detail, tables, and pagination */
.pagination,.previous-next { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; margin-top:1.5rem; color:var(--muted); }
.pagination a:last-child,.previous-next a:last-child { text-align:right; }
.back-link { margin:0 0 1rem; }
.detail { display:grid; grid-template-columns:minmax(320px,.95fr) minmax(0,1.05fr); gap:2rem; padding:1.25rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.primary-preview img,.model-viewer,.primary-preview .preview-placeholder { width:100%; min-height:0; aspect-ratio:1; object-fit:contain; background:var(--surface-alt); border-radius:7px; }
.model-viewer { position:relative; overflow:hidden; }
.model-viewer canvas { display:block; width:100%; height:100%; }
.model-viewer-status { position:absolute; inset:0; display:grid; place-items:center; margin:0; color:var(--muted); }
.model-viewer-reset { position:absolute; right:.75rem; bottom:.75rem; }
.detail-content { min-width:0; }
.detail-content h1 { margin-bottom:.5rem; }
.package-state,.metadata { margin-top:1.5rem; }
.file-list { padding-left:1.25rem; }
.file-list li { margin:.4rem 0; overflow-wrap:anywhere; }
.metadata dl { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:.4rem 1rem; }
.metadata dt { font-weight:700; }
.metadata dd { margin:0; overflow-wrap:anywhere; }
.table-wrap { overflow-x:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
table { width:100%; border-collapse:collapse; }
th,td { padding:.8rem 1rem; text-align:left; border-bottom:1px solid var(--border); }
th { color:var(--muted); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }

/* Footer and responsive layout */
footer { padding:1.25rem; color:var(--muted); font-size:.85rem; text-align:center; }
@media (max-width:1050px) { .filter-toolbar { grid-template-columns:repeat(3,1fr); } .filter-toggles { grid-column:span 2; } .filter-actions { justify-content:end; } }
@media (max-width:720px) { main { padding:1.5rem 1rem; } .header-inner,.site-header nav { align-items:flex-start; } .header-inner { flex-direction:column; } .site-header nav { flex-wrap:wrap; } .page-heading,.detail { display:block; } .page-heading .muted { margin-top:.35rem; } .filter-toolbar { grid-template-columns:1fr; } .filter-toggles { grid-column:auto; } .filter-actions { justify-content:start; } .detail { padding:1rem; } .primary-preview { margin-bottom:1.5rem; } .pagination,.previous-next { grid-template-columns:1fr; justify-items:start; } .pagination a:last-child,.previous-next a:last-child { text-align:left; } }
@media (max-width:400px) { .package-grid { grid-template-columns:1fr; } .header-inner { padding-right:1rem; padding-left:1rem; } }