.soggydex-page { width:min(1240px,100%); margin:0 auto; padding-bottom:64px; }
.dex-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:26px; align-items:end; margin-bottom:20px; }
.dex-hero h1 { margin:9px 0 7px; font-size:clamp(2rem,5vw,3.8rem); line-height:.94; letter-spacing:-.055em; }
.dex-hero p { max-width:720px; margin:0; color:var(--color-text-muted); }
.dex-summary { display:grid; grid-template-columns:repeat(3,minmax(112px,1fr)); gap:9px; }
.dex-summary > div { padding:13px 15px; border:1px solid var(--color-border); border-radius:14px; background:rgb(255 255 255 / 2.5%); }
.dex-summary span,.dex-detail-grid span { display:block; color:var(--color-text-muted); font-size:.66rem; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
.dex-summary strong { display:block; margin-top:3px; font-size:1.12rem; }
.dex-progress-card { display:grid; gap:10px; margin-bottom:16px; padding:14px 16px; border:1px solid var(--color-border); border-radius:15px; background:rgb(255 255 255 / 2%); }
.dex-progress-copy { display:flex; justify-content:space-between; gap:12px; color:var(--color-text-muted); font-size:.75rem; }
.dex-progress-copy strong { color:var(--color-text); }
.dex-progress-track { height:8px; overflow:hidden; border-radius:999px; background:rgb(255 255 255 / 6%); }
.dex-progress-bar { width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--color-primary),#74e3ff); transition:width .35s ease; }
.dex-toolbar { display:grid; grid-template-columns:minmax(250px,1fr) 180px auto; gap:10px; margin-bottom:10px; }
.dex-search { display:flex; align-items:center; gap:8px; min-height:46px; padding:0 13px; border:1px solid var(--color-border); border-radius:13px; background:#0b1219; }
.dex-search span { color:var(--color-text-muted); font-size:1.1rem; }
.dex-search input { width:100%; border:0; outline:0; background:transparent; color:var(--color-text); font:inherit; }
.dex-select,.dex-owned-only { min-height:46px; border:1px solid var(--color-border); border-radius:13px; background:#0b1219; color:var(--color-text); font:inherit; }
.dex-select { padding:0 12px; }
.dex-owned-only { display:flex; align-items:center; gap:8px; padding:0 13px; cursor:pointer; white-space:nowrap; }
.dex-owned-only input { accent-color:var(--color-primary); }
.dex-filters { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.dex-filter { padding:7px 11px; border:1px solid var(--color-border); border-radius:999px; background:rgb(255 255 255 / 2%); color:var(--color-text-muted); font:inherit; font-size:.72rem; font-weight:800; cursor:pointer; }
.dex-filter:hover,.dex-filter.is-active { border-color:rgb(75 185 233 / 45%); background:rgb(75 185 233 / 10%); color:var(--color-text); }
.dex-filter-anomaly { border-style:dashed; }
.dex-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.dex-card { --rarity:#9ca3af; position:relative; display:grid; min-width:0; overflow:hidden; border:1px solid color-mix(in srgb,var(--rarity) 24%,var(--color-border)); border-radius:17px; background:radial-gradient(circle at top right,color-mix(in srgb,var(--rarity) 10%,transparent),transparent 38%),rgb(255 255 255 / 2%); cursor:pointer; transition:transform .18s ease,border-color .18s ease; }
.dex-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--rarity) 55%,var(--color-border)); }
.dex-card.is-undiscovered .dex-card-image img { filter:grayscale(1) brightness(.34); opacity:.75; }
.dex-card.is-anomaly.is-undiscovered .dex-card-image { background:radial-gradient(circle,#16131f,#080b10); }
.dex-card.is-anomaly.is-undiscovered img { visibility:hidden; }
.dex-card-image { position:relative; aspect-ratio:1.22/1; overflow:hidden; background:#091017; }
.dex-card-image img { width:100%; height:100%; object-fit:contain; transition:filter .2s ease,opacity .2s ease; }
.dex-card-lock { position:absolute; inset:0; display:grid; place-items:center; font-size:2rem; color:rgb(255 255 255 / 55%); }
.dex-card-body { display:grid; gap:7px; padding:12px 13px 13px; }
.dex-card-meta { display:flex; justify-content:space-between; gap:8px; color:var(--color-text-muted); font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.dex-card-rarity { color:var(--rarity); }
.dex-card h2 { margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.92rem; }
.dex-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--color-text-muted); font-size:.68rem; }
.dex-owned-pill { padding:3px 7px; border-radius:999px; background:rgb(75 185 233 / 9%); color:var(--color-primary); font-weight:850; }
.dex-empty,.dex-loading,.dex-error { grid-column:1/-1; padding:50px 20px; border:1px dashed var(--color-border); border-radius:16px; text-align:center; color:var(--color-text-muted); }
.dex-dialog { width:min(760px,calc(100% - 24px)); max-height:min(86vh,760px); padding:0; overflow:auto; border:1px solid var(--color-border); border-radius:22px; background:#101720; color:var(--color-text); box-shadow:0 30px 90px rgb(0 0 0 / 55%); }
.dex-dialog::backdrop { background:rgb(0 0 0 / 70%); backdrop-filter:blur(5px); }
.dex-dialog-close { position:sticky; float:right; top:12px; right:12px; z-index:3; width:38px; height:38px; margin:12px; border:1px solid var(--color-border); border-radius:12px; background:#18212d; color:var(--color-text); font-size:1.4rem; cursor:pointer; }
.dex-dialog-media { min-height:300px; display:grid; place-items:center; padding:22px; background:radial-gradient(circle at center,rgb(75 185 233 / 10%),transparent 55%),#0a1017; }
.dex-dialog-media img { max-width:100%; max-height:380px; object-fit:contain; border-radius:14px; }
.dex-dialog-copy { padding:22px; }
.dex-dialog-topline { display:flex; justify-content:space-between; gap:12px; color:var(--color-text-muted); font-size:.72rem; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.dex-dialog-copy h2 { margin:8px 0 6px; font-size:clamp(1.5rem,5vw,2.4rem); }
.dex-dialog-copy > p { margin:0 0 18px; color:var(--color-text-muted); }
.dex-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.dex-detail-grid > div { padding:11px 12px; border:1px solid var(--color-border); border-radius:12px; background:#0b1219; }
.dex-detail-grid strong { display:block; margin-top:3px; font-size:.8rem; overflow-wrap:anywhere; }
@media(max-width:1050px){.dex-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dex-hero{grid-template-columns:1fr}.dex-summary{width:100%}}
@media(max-width:760px){.dex-toolbar{grid-template-columns:1fr 1fr}.dex-search{grid-column:1/-1}.dex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dex-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dex-progress-copy{flex-direction:column;gap:3px}.dex-summary{grid-template-columns:repeat(3,1fr)}.dex-summary>div{min-width:0;padding:10px}.dex-summary strong{font-size:.95rem}}
@media(max-width:470px){.dex-grid{grid-template-columns:1fr 1fr;gap:8px}.dex-card-body{padding:10px}.dex-card h2{font-size:.8rem}.dex-card-foot{align-items:flex-start;flex-direction:column}.dex-toolbar{grid-template-columns:1fr}.dex-search{grid-column:auto}.dex-summary{grid-template-columns:1fr}.dex-detail-grid{grid-template-columns:1fr}.dex-dialog-media{min-height:220px}.dex-dialog-copy{padding:16px}}