:root {
  --bg: #111317;
  --surface: rgba(27, 30, 36, .84);
  --surface-strong: #1c2027;
  --surface-soft: #222730;
  --line: rgba(255,255,255,.075);
  --muted: #8f97a4;
  --text: #f3f5f7;
  --teal: #4be1c1;
  --gold: #ffca63;
  --violet: #ab93ff;
  --coral: #ff8778;
  --font: 'Outfit', sans-serif;
  --mono: 'DM Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: var(--font); }
button, input { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.backdrop { position: fixed; z-index: -1; border-radius: 50%; filter: blur(2px); opacity: .19; pointer-events: none; }
.backdrop-one { width: 560px; height: 560px; top: -260px; right: -170px; background: radial-gradient(circle, #14766f, transparent 68%); }
.backdrop-two { width: 460px; height: 460px; left: 12%; bottom: -330px; background: radial-gradient(circle, #6144a7, transparent 68%); }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; width: 248px; height: 100vh; flex: 0 0 248px; display: flex; flex-direction: column; padding: 31px 18px 20px; border-right: 1px solid var(--line); background: rgba(15,17,21,.78); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 12px 50px; color: white; font-size: 22px; font-weight: 800; letter-spacing: -.9px; text-decoration: none; }
.brand > span:last-child span { color: var(--teal); }
.brand-mark { position: relative; display: block; width: 24px; height: 24px; border: 3px solid var(--teal); border-radius: 50%; }
.brand-mark::after { content: ''; position:absolute; top: 8px; left: -3px; right: -3px; height: 3px; background: var(--teal); }
.brand-mark i { position:absolute; z-index:2; top: 6px; left: 6px; width: 7px; height: 7px; border: 2px solid var(--teal); border-radius: 50%; background: #13161a; }
.primary-nav { display: grid; gap: 7px; }
.nav-link { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px; color: #8c949e; text-align: left; background: transparent; border-radius: 9px; font-size: 14px; font-weight: 500; transition: .18s; }
.nav-link span { width: 17px; font-size: 18px; line-height: 1; text-align: center; }
.nav-link b { margin-left: auto; min-width: 22px; padding: 2px 6px; border-radius: 99px; background: #313842; color: #c6cbd2; font: 10px var(--mono); text-align: center; }
.nav-link:hover { color: #e7ebef; background: rgba(255,255,255,.045); }
.nav-link.active { color: var(--teal); background: rgba(75,225,193,.105); }
.nav-link.active b { color: var(--teal); background: rgba(75,225,193,.13); }
.account-switcher { position: relative; margin-top: auto; padding: 20px 0 13px; border-top: 1px solid var(--line); }
.eyebrow { margin: 0; color: #818a95; font: 500 10px/1.2 var(--mono); letter-spacing: 1.05px; }
.active-account { display: flex; align-items: center; width: 100%; gap: 9px; margin: 11px 0 12px; padding: 6px 8px; background: transparent; border-radius: 9px; text-align: left; }
.active-account:hover { background: rgba(255,255,255,.045); }
.avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 31px; height: 31px; color: #102323; background: linear-gradient(145deg, var(--teal), #8ed7d4); border-radius: 50%; font-size: 12px; font-weight: 800; }
.avatar.large { width: 50px; height: 50px; font-size: 17px; }
.active-account strong, .active-account small { display: block; }
.active-account strong { font-size: 13px; }
.active-account small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.chevron { margin-left: auto; color: var(--muted); }
.account-menu { position: absolute; z-index: 10; right: 4px; bottom: 79px; left: 4px; overflow: hidden; padding: 5px; background: #2c323b; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 15px 40px rgba(0,0,0,.4); }
.account-menu button { display: flex; justify-content: space-between; width:100%; padding: 8px; background: transparent; color: white; border-radius: 6px; font-size: 12px; text-align: left; }
.account-menu button:hover { background: rgba(255,255,255,.09); }.account-menu span { color: var(--muted); font-size: 10px; }
.add-account { width: 100%; padding: 8px; color: #aab1b9; background: transparent; border: 1px dashed #414854; border-radius: 8px; font-size: 11px; text-align: left; }.add-account:hover { color: var(--teal); border-color: var(--teal); }.add-account span { margin-right: 6px; font-size: 16px; vertical-align: -1px; }
.sidebar-foot { display: flex; gap: 7px; align-items: center; color: #737d89; font-size: 10px; }.sync-dot { width: 6px; height:6px; background: var(--teal); border-radius: 50%; box-shadow: 0 0 8px var(--teal); }
main { width: min(100%, 1480px); padding: 29px clamp(26px, 4vw, 68px) 60px; margin: 0 auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; min-height: 45px; margin-bottom: 33px; }.topbar h1 { margin: 5px 0 0; font-size: clamp(24px, 3vw, 31px); line-height: 1; letter-spacing: -1.15px; }.topbar h1 span { color: var(--gold); font-size:.67em; vertical-align: top; }
.topbar-actions { display:flex; align-items:center; gap: 9px; }.icon-button { width: 35px; height: 35px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; color: #aab2bd; font-size: 17px; }.icon-button:hover { color:white; background:#282e37; }.import-button { padding: 10px 13px; color: #102423; background: var(--teal); border-radius: 8px; font-size: 12px; font-weight: 700; box-shadow: 0 6px 22px rgba(75,225,193,.16); }.import-button:hover { background: #6fe8cf; }.import-button span { margin-left: 3px; font-size: 15px; }
.mobile-menu { display:none; }
.hero-grid { display:grid; grid-template-columns: minmax(0,1.65fr) minmax(220px,.65fr); gap: 18px; }.hero-card, .level-card, .panel, .metric-card { background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 1px rgba(255,255,255,.025); }.hero-card { position:relative; min-height: 208px; overflow:hidden; padding: 32px 35px; border-radius: 16px; background: radial-gradient(circle at 89% 48%, rgba(92,211,187,.18), transparent 23%), linear-gradient(105deg, #1c3338, #1b272d 62%, #172127); }.hero-card::after { content:''; position:absolute; inset:0; opacity:.32; background-image: radial-gradient(rgba(122,255,226,.34) .55px, transparent .55px); background-size: 5px 5px; mask-image: linear-gradient(to left, black, transparent 50%); }.hero-copy { position:relative; z-index:2; max-width: 445px; }.hero-card h2 { margin: 11px 0 11px; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.08; letter-spacing:-1.3px; }.muted { color: var(--muted); font-size: 12px; line-height:1.55; }.hero-card .muted { max-width: 330px; }.hero-card .muted strong { color: var(--teal); }.text-button, .subtle-button { padding: 0; color: var(--teal); background: transparent; font-size: 11px; font-weight:700; }.text-button { margin-top: 8px; }.text-button:hover, .subtle-button:hover { color:#b5fff0; }.text-button span, .subtle-button span { margin-left:4px; font-size: 15px; }.hero-orb { position:absolute; z-index:1; right: 7.5%; top: 30px; width: 151px; height:151px; border: 7px solid #55d8c4; border-radius: 50%; box-shadow: 0 0 0 11px rgba(77,218,194,.09), 0 0 45px rgba(85,216,196,.25); }.hero-orb::after { content:''; position:absolute; left:-7px; right:-7px; top:66px; height:7px; background:#55d8c4; }.hero-orb span { position:absolute; z-index:1; top:50px; left:50px; width:38px; height:38px; border:7px solid #55d8c4; border-radius:50%; background:#203c3d; }.hero-spark { position:absolute; z-index:3; color:#b5fff1; }.spark-a { top:30px; right:30px; font-size:19px; }.spark-b { bottom:26px; right:182px; }.spark-c { bottom:42px; right:32px; font-size:10px; }
.level-card { display:flex; flex-direction:column; justify-content:space-between; min-height:208px; padding: 24px; border-radius:16px; background:linear-gradient(145deg, #1f272b, #1b2027); }.level-top { display:flex; justify-content:space-between; align-items:center; }.level-number { color: rgba(255,255,255,.15); font-size:53px; font-weight:800; line-height: .8; letter-spacing:-3px; }.level-label { display:flex; justify-content:space-between; align-items:center; margin:8px 0; }.level-label strong { font-size: 13px; }.level-label span { color:var(--teal); font: 10px var(--mono); }.progress, .metric-bar { height:5px; overflow:hidden; background:#323943; border-radius:99px; }.progress i, .metric-bar i { display:block; height:100%; background:var(--teal); border-radius:inherit; }.level-card small { display:block; margin-top:7px; color:#78818d; font:9px var(--mono); }
.metrics-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin:18px 0; }.metric-card { position:relative; min-height:116px; overflow:hidden; padding: 17px; border-radius: 13px; }.metric-icon { position:absolute; top:15px; right:15px; color:var(--teal); font-size:19px; }.metric-card p { margin:0 0 4px; color:var(--muted); font: 9px var(--mono); letter-spacing:.5px; }.metric-card strong { font-size:25px; letter-spacing:-.8px; }.metric-card div > span { color:#858e9a; font-size:11px; }.metric-bar { position:absolute; right:17px; bottom:17px; left:17px; }.metric-bar i { width:0; transition:width .55s ease; }.gold .metric-icon {color:var(--gold)}.gold .metric-bar i {background:var(--gold)}.violet .metric-icon {color:var(--violet)}.violet .metric-bar i {background:var(--violet)}.coral .metric-icon {color:var(--coral)}.coral .metric-bar i {background:var(--coral)}
.content-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:18px; }.panel { border-radius:14px; padding: 22px; }.panel-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:19px; }.panel h3 { margin:5px 0 0; font-size:17px; letter-spacing:-.45px; }.more-button { color:var(--muted); background:transparent; letter-spacing:2px; }.pokemon-row { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }.pokemon-tile { position:relative; min-width:0; padding: 11px 8px 9px; background:#252a32; border:1px solid rgba(255,255,255,.035); border-radius:10px; text-align:center; }.pokemon-tile:hover { transform:translateY(-2px); background:#2b313b; }.pokemon-art { display:grid; place-items:center; height:62px; font-size:37px; filter: drop-shadow(0 7px 9px rgba(0,0,0,.25)); }.pokemon-tile small { display:block; overflow:hidden; color:#d8dce0; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.pokemon-tile em { color:#89929d; font:8px var(--mono); font-style:normal; }.status-dot { position:absolute; top:8px; right:8px; width:6px; height:6px; background:var(--teal); border-radius:50%; }.goal-panel { background:linear-gradient(145deg, rgba(37,38,54,.95),rgba(28,31,38,.85)); }.goals { display:grid; gap:16px; }.goal { display:grid; grid-template-columns:31px 1fr; gap:9px; align-items:start; }.goal-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:#312f43; color:var(--violet); font-size:15px; }.goal-copy { display:flex; justify-content:space-between; gap:6px; align-items:baseline; }.goal-copy strong { font-size:11px; }.goal-copy span { color:#a6a0ce; font:9px var(--mono); white-space:nowrap; }.goal .progress { grid-column:2; height:3px; margin-top:-7px; }.goal .progress i { background:var(--violet); }
.missing-preview { margin-top:18px; }.panel-actions { display:flex; align-items:center; gap:15px; }.tag { display:flex; align-items:center; gap:5px; padding:5px 7px; color:#b3bac4; background:#272d35; border-radius:5px; font:9px var(--mono); }.tag i { width:5px; height:5px; background:var(--gold); border-radius:50%; }.missing-list { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }.missing-item { display:flex; align-items:center; gap:10px; padding: 7px 9px; border:1px solid rgba(255,255,255,.04); background:rgba(255,255,255,.018); border-radius:8px; }.missing-silhouette { display:grid; place-items:center; width:34px; height:34px; color:#4f5660; background:#242933; border-radius:7px; font-size:20px; filter: grayscale(1); }.missing-item strong { display:block; color:#d9dde1; font-size:11px; }.missing-item small { color:#7e8791; font: 8px var(--mono); }.type-pill { margin-left:auto; color:#9ea6b1; font:8px var(--mono); }
.dashboard-view.hidden { display:none; }.page-intro { margin: 17px 0 25px; }.page-intro h2 { margin:8px 0; font-size:31px; letter-spacing:-1.2px; }.toolbar { display:flex; justify-content:space-between; gap:15px; margin-bottom:21px; }.search-wrap { display:flex; align-items:center; gap:8px; min-width:250px; padding:0 11px; background:var(--surface); border:1px solid var(--line); border-radius:9px; }.search-wrap span { color:var(--muted); font-size:18px; }.search-wrap input { width:100%; padding:10px 0; color:white; background:transparent; border:0; font-size:12px; }.search-wrap input::placeholder { color:#747d87; }.filter-group, .missing-filters { display:flex; flex-wrap:wrap; gap:7px; }.filter { padding:8px 10px; color:#929aa4; background:#22272f; border:1px solid var(--line); border-radius:7px; font-size:10px; }.filter:hover { color:white; }.filter.active { color:#103634; background:var(--teal); border-color:var(--teal); font-weight:700; }.dex-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(144px,1fr)); gap:11px; }.dex-card { position:relative; min-height:178px; padding:11px; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:12px; transition:.18s; }.dex-card:hover { transform:translateY(-3px); border-color:rgba(75,225,193,.45); }.dex-card .pokemon-art { height:94px; font-size:55px; }.dex-card .dex-number { color:#7c8691; font:9px var(--mono); }.dex-card h3 { margin:3px 0 0; font-size:13px; }.card-tags { display:flex; gap:4px; margin-top:5px; }.card-tag { padding:2px 4px; background:#323842; color:#c7ccd3; border-radius:3px; font:7px var(--mono); }.card-tag.shiny { color:#ffcf62; background:rgba(255,202,99,.12); }.card-tag.hundo { color:#beaaff; background:rgba(171,147,255,.13); }.dex-card.missing { background:rgba(31,34,40,.7); }.dex-card.missing .pokemon-art { color:#434a54; filter: grayscale(1); }.dex-card.missing h3, .dex-card.missing .dex-number { color:#747d87; }.dex-card.missing::before { content:'MISSING'; position:absolute; top:10px; right:-24px; width:85px; padding:3px 0; background:#333942; color:#89919c; font:7px var(--mono); text-align:center; transform:rotate(43deg); }
.missing-filters { margin-bottom:22px; }.missing-board { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }.radar-card { display:flex; align-items:center; gap:13px; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }.radar-silhouette { display:grid; place-items:center; width:48px; height:48px; color:#5a626d; background:#242933; border-radius:11px; font-size:31px; filter:grayscale(1); }.radar-card h3 { margin:0 0 2px; font-size:14px; }.radar-card p { margin:0; color:#89929d; font:9px var(--mono); }.radar-card .radar-status { margin-left:auto; color:var(--gold); font-size:15px; }.empty-state { grid-column:1/-1; padding:55px 20px; color:var(--muted); background:var(--surface); border:1px dashed #3c4550; border-radius:12px; text-align:center; }.empty-state span { display:block; margin-bottom:8px; font-size:30px; color:var(--teal); }
.insights-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.insight-card { min-height:185px; padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:13px; }.insight-card .big-number { display:block; margin:17px 0 5px; color:var(--teal); font-size:39px; font-weight:800; letter-spacing:-2px; }.insight-card p { color:var(--muted); font-size:11px; line-height:1.5; }.region-bars { display:grid; gap:10px; margin-top:16px; }.region-bars div { display:flex; align-items:center; gap:9px; color:#a6adb6; font-size:10px; }.region-bars b { width:42px; font-weight:500; }.region-bars .progress { flex:1; height:5px; }.region-bars small { width:30px; color:var(--teal); font:8px var(--mono); text-align:right; }
dialog { position:relative; width:min(500px, calc(100% - 32px)); padding:27px; color:var(--text); background:#20252e; border:1px solid #3a4450; border-radius:16px; box-shadow:0 25px 80px rgba(0,0,0,.65); }dialog::backdrop { background:rgba(0,0,0,.6); backdrop-filter: blur(3px); }dialog h2 { margin:8px 0 9px; font-size:25px; letter-spacing:-.8px; }.dialog-close { position:absolute; top:14px; right:17px; padding:4px; color:#98a2ac; background:transparent; font-size:22px; }.dialog-close:hover { color:white; }dialog label { display:grid; gap:7px; margin-top:21px; color:#cfd4da; font-size:11px; font-weight:600; }dialog label input { padding:11px; color:white; background:#15191f; border:1px solid #3a414c; border-radius:8px; }.dialog-actions { display:flex; justify-content:flex-end; gap:15px; align-items:center; margin-top:22px; }.drop-zone { display:grid; place-items:center; gap:6px; min-height:146px; margin-top:20px; padding:18px; border:1px dashed #4e5b68; border-radius:10px; background:rgba(75,225,193,.035); text-align:center; transition:.18s; }.drop-zone.dragging { border-color:var(--teal); background:rgba(75,225,193,.12); }.drop-icon { display:grid; place-items:center; width:32px; height:32px; color:#102b29; background:var(--teal); border-radius:8px; font-size:20px; }.drop-zone strong { font-size:12px; }.drop-zone small { color:var(--muted); font:9px var(--mono); }.demo-button { display:block; margin:14px auto 0; color:var(--teal); background:transparent; font-size:11px; }.demo-button:hover { color:#b9fff0; }code { padding:2px 4px; color:var(--teal); background:#172d2c; border-radius:3px; font:9px var(--mono); }.toast { position:fixed; z-index:20; bottom:24px; left:50%; padding:10px 14px; color:#102827; background:var(--teal); border-radius:7px; box-shadow:0 12px 35px rgba(0,0,0,.35); font-size:11px; font-weight:700; transform:translate(-50%, 100px); opacity:0; transition:.25s; }.toast.show { transform:translate(-50%,0); opacity:1; }
body.light { --bg:#ecf1f0; --surface:rgba(255,255,255,.82); --surface-strong:#fff; --surface-soft:#f1f5f4; --line:rgba(25,55,58,.1); --muted:#68757a; --text:#172124; }body.light .sidebar { background:rgba(248,251,250,.83); }body.light .brand {color:#182223}body.light .active-account strong, body.light .pokemon-tile small, body.light .missing-item strong {color:#182223}body.light .pokemon-tile, body.light .missing-silhouette, body.light .radar-silhouette, body.light .filter, body.light .search-wrap {background:#eef3f2}body.light .dex-card.missing {background:#f4f7f6}body.light dialog {background:#fafdfc}body.light dialog label input {background:white;color:#152224}body.light .level-card{background:linear-gradient(145deg,#f2f6f5,#e5edeb)}body.light .hero-card {background:radial-gradient(circle at 89% 48%, rgba(92,211,187,.34), transparent 23%),linear-gradient(105deg,#cae9e5,#e4f0ef 62%,#d6eeea)}body.light .hero-copy h2{color:#1b3231}body.light .hero-orb{border-color:#238a7b}body.light .hero-orb::after{background:#238a7b}body.light .hero-orb span{border-color:#238a7b;background:#d4eeeb}
.checklist-hint { display:flex; align-items:center; gap:8px; margin:-8px 0 18px; color:#9ba4ae; font-size:11px; }.checklist-hint strong { color:#dce2e7; }.checklist-icon, .card-check { display:grid; place-items:center; color:#102d2a; background:var(--teal); border-radius:50%; font-weight:800; }.checklist-icon { width:18px; height:18px; font-size:11px; }.dex-card { text-align:left; cursor:pointer; }.card-check { position:absolute; z-index:2; top:10px; right:10px; width:19px; height:19px; border:1px solid var(--teal); font-size:11px; }.dex-card.missing .card-check { color:#7d8791; background:transparent; border-color:#56616d; }.dex-card:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }body.light .checklist-hint strong { color:#203034; }
.catalog-filters { display:flex; flex-wrap:wrap; gap:10px; margin:-7px 0 18px; }.catalog-filters label { display:flex; align-items:center; gap:7px; color:#8d97a2; font:9px var(--mono); letter-spacing:.3px; }.catalog-filters select { max-width:155px; padding:8px 25px 8px 9px; color:#dce3e7; background:#22272f; border:1px solid var(--line); border-radius:7px; font:10px var(--font); }.catalog-filters select:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }.dex-card { min-height:198px; padding:0; cursor:default; }.card-main { position:relative; display:block; width:100%; min-height:196px; padding:11px; color:inherit; background:transparent; border-radius:11px; text-align:left; }.card-main:hover { background:rgba(255,255,255,.02); }.card-main:focus-visible { outline:2px solid var(--teal); outline-offset:-3px; }.card-edit { position:absolute; z-index:4; right:8px; bottom:8px; padding:4px 6px; color:#8f99a4; background:#2c333d; border:1px solid rgba(255,255,255,.08); border-radius:5px; font:8px var(--mono); }.card-edit:hover { color:#12322f; background:var(--teal); }.dex-card.missing .card-edit { background:#2a3038; }.dex-card .card-main .pokemon-art { height:94px; }.pokemon-art img, .missing-silhouette img, .radar-silhouette img { max-width:100%; max-height:100%; object-fit:contain; image-rendering:auto; }.dex-card .pokemon-art img { width:76px; height:76px; }.pokemon-tile .pokemon-art img { width:51px; height:51px; }.missing-silhouette img { width:28px; height:28px; }.radar-silhouette img { width:42px; height:42px; }.art-fallback { display:grid; place-items:center; width:48px; height:48px; color:#b8c1ca; background:#2d343e; border-radius:50%; font:700 16px var(--mono); }.dex-card .art-fallback { width:62px; height:62px; font-size:23px; }.card-tags { flex-wrap:wrap; padding:0 32px 22px 0; }.card-tag.shadow { color:#d5c1ff; background:rgba(171,147,255,.14); }.card-tag.xxl { color:#ff9b81; background:rgba(255,135,120,.13); }.card-tag.xxs { color:#86c5ff; background:rgba(134,197,255,.13); }.card-tag.mega { color:#66e8d0; background:rgba(75,225,193,.13); }.card-tag.gmax { color:#ffb2db; background:rgba(255,112,191,.13); }.card-tag.purified { color:#d9e9ff; background:rgba(217,233,255,.13); }.card-tag.perfect { color:#beaaff; background:rgba(171,147,255,.13); }.attribute-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-top:18px; }.attribute-grid .attribute-toggle { display:flex; align-items:center; gap:7px; min-height:35px; margin:0; padding:8px; color:#aeb6bf; background:#171b21; border:1px solid #343c47; border-radius:7px; font-size:10px; font-weight:600; }.attribute-toggle input { width:13px; height:13px; margin:0; padding:0; accent-color:var(--teal); }.attribute-toggle span { display:grid; place-items:center; width:17px; height:17px; color:#9ea7b2; background:#2a303a; border-radius:4px; font-size:8px; }.attribute-toggle:has(input:checked) { color:#153532; background:rgba(75,225,193,.9); border-color:var(--teal); }.attribute-toggle:has(input:checked) span { color:#12312d; background:rgba(255,255,255,.45); }.attribute-note { margin:13px 0 0; color:#818b96; font-size:10px; }.special-summary { display:flex; flex-wrap:wrap; gap:7px; margin:16px 0 10px; }.special-summary span { display:flex; align-items:center; gap:4px; padding:5px 6px; color:#aeb8c1; background:#282e37; border-radius:5px; font:8px var(--mono); }.special-summary b { color:var(--teal); font-size:11px; }body.light .catalog-filters select { color:#314044; background:#eef3f2; }body.light .card-edit { background:#edf3f1; color:#56646a; }body.light .attribute-grid .attribute-toggle { background:#f0f5f4; color:#4b585e; }body.light .attribute-toggle:has(input:checked) { color:#153532; background:rgba(75,225,193,.84); }
.bulk-checklist { display:flex; align-items:center; gap:18px; margin:-5px 0 19px; padding:12px 14px; background:rgba(75,225,193,.045); border:1px solid rgba(75,225,193,.15); border-radius:10px; }.bulk-checklist > div:first-child { flex:0 0 178px; }.bulk-checklist strong { display:block; margin-top:3px; font-size:11px; }.bulk-checklist small { display:block; margin-top:4px; color:#84909b; font-size:9px; line-height:1.35; }.bulk-generation-actions { display:flex; flex:1; flex-wrap:wrap; gap:6px; }.bulk-generation-actions button { padding:6px 8px; color:#aab5be; background:#232a32; border:1px solid rgba(255,255,255,.07); border-radius:5px; font:9px var(--mono); }.bulk-generation-actions button:hover { color:#102f2c; background:var(--teal); border-color:var(--teal); }body.light .bulk-checklist { background:rgba(75,225,193,.1); }.bulk-checklist .eyebrow { color:var(--teal); }
.bulk-tag-actions { display:flex; gap:5px; margin-top:8px; }.bulk-tag-actions button { padding:4px 6px; color:#9aa5af; background:#252c34; border:1px solid rgba(255,255,255,.08); border-radius:4px; font:8px var(--mono); }.bulk-tag-actions button.active { color:#153532; background:var(--teal); border-color:var(--teal); }.bulk-tag-actions button:not(.active):hover { color:#ffe2e6; border-color:rgba(255,154,167,.55); }body.light .bulk-tag-actions button { background:#edf4f2; }
.dex-card .dex-number { color:#b8c2cc; font:500 11px/1 var(--mono); letter-spacing:.35px; text-shadow:0 0 12px rgba(184,194,204,.12); }.pokemon-tile em { color:#aeb8c2; font:500 10px/1 var(--mono); letter-spacing:.25px; }.evolution-node small { color:#a6b1bb; font:500 10px/1 var(--mono); letter-spacing:.25px; }.missing-item small, .radar-card p { font-size:9px; letter-spacing:.15px; }
.card-types { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }.card-type { padding:3px 5px; color:#cbd4db; background:#303842; border:1px solid rgba(255,255,255,.07); border-radius:4px; font:7px/1 var(--mono); }.card-type.fire { color:#ffbd9f; background:rgba(235,110,70,.16); }.card-type.water { color:#9fcfff; background:rgba(76,145,235,.16); }.card-type.grass { color:#aee9ac; background:rgba(98,182,92,.16); }.card-type.electric { color:#ffe49a; background:rgba(230,190,62,.16); }.card-type.psychic { color:#f7aecb; background:rgba(216,90,144,.16); }.card-type.ice { color:#aee9f4; background:rgba(102,199,216,.16); }.card-type.dragon { color:#c4b5ff; background:rgba(116,91,219,.18); }.card-type.dark { color:#c4b9b0; background:rgba(105,87,78,.25); }.card-type.fairy { color:#ffc2e0; background:rgba(229,116,178,.16); }.card-type.fighting { color:#ffb2a6; background:rgba(194,69,57,.17); }.card-type.poison { color:#dfb6ef; background:rgba(157,86,183,.18); }.card-type.ground { color:#dfc19b; background:rgba(173,126,73,.2); }.card-type.flying { color:#c5d2ff; background:rgba(131,149,222,.17); }.card-type.bug { color:#d1e79c; background:rgba(143,173,67,.18); }.card-type.rock { color:#dfd1a4; background:rgba(168,145,83,.2); }.card-type.ghost { color:#c6b4ee; background:rgba(110,86,166,.2); }.card-type.steel { color:#c8d3dd; background:rgba(128,153,172,.2); }
.requirement-chip.gender { color:#ffb0bd; border-color:rgba(255,126,151,.34); }.requirement-chip.gender > span { color:#ff8297; }.requirement-chip.gender.complete { color:#103530; background:var(--teal); border-color:var(--teal); }.requirement-chip.gender.complete > span { color:#103530; }
.dex-card { min-height:198px; }.dex-card .card-main { min-height:196px; padding:11px 11px 30px; }.dex-card .card-main .card-art { height:94px; }.dex-card .card-main h3 { margin-top:7px; }.dex-card .card-tags { margin-top:8px; }
.release-badge { position:absolute; z-index:3; right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:center; height:20px; border-radius:0 0 11px 11px; font:500 7px/1 var(--mono); letter-spacing:.85px; }.release-badge.released { color:#113632; background:rgba(75,225,193,.8); }.release-badge.unreleased { color:#3b2a0e; background:rgba(255,202,99,.9); }.dex-card .card-main { padding-bottom:36px; }.dex-card.missing .release-badge { opacity:.75; }.card-edit { bottom:26px; }.card-toggle { right:7px; }
.search-tools { display:flex; align-items:center; gap:7px; min-width:260px; }.search-tools .search-wrap { flex:1; }.search-help { display:grid; place-items:center; width:32px; height:32px; color:#97a2ad; background:#242a33; border:1px solid var(--line); border-radius:8px; font:700 13px var(--mono); }.search-help:hover { color:#113532; background:var(--teal); }.toolbar .filter-group { justify-content:flex-end; }.search-dialog { width:min(640px,calc(100% - 32px)); }.search-guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:18px; }.search-guide-grid > div { display:flex; flex-wrap:wrap; gap:5px; align-content:flex-start; padding:10px; background:#171c22; border:1px solid #353e49; border-radius:8px; }.search-guide-grid strong { width:100%; margin-bottom:4px; color:#dce2e7; font-size:10px; }.search-guide-grid code { color:#a8f4e6; background:#243834; font-size:8px; }.search-note { margin:13px 0 0; color:#89939e; font-size:10px; line-height:1.55; }body.light .search-help { background:#eef3f2; color:#526068; }body.light .search-guide-grid > div { background:#eef5f3; border-color:#dce7e5; }body.light .search-guide-grid strong { color:#203035; }
@media (max-width: 760px) { .search-tools { width:100%; }.toolbar .filter-group { justify-content:flex-start; }.search-guide-grid { grid-template-columns:1fr; } }
.card-toggle { position:absolute; z-index:5; top:7px; right:7px; width:24px; height:24px; padding:0; background:transparent; }.card-toggle .card-check { position:static; width:20px; height:20px; }.card-toggle:hover .card-check { transform:scale(1.08); }.evolution-scrim { position:fixed; z-index:39; inset:0; background:rgba(0,0,0,.52); backdrop-filter:blur(3px); }.evolution-drawer { position:fixed; z-index:40; top:0; right:0; width:min(570px,100vw); height:100dvh; overflow-y:auto; padding:31px 27px 45px; color:var(--text); background:#1d222a; border-left:1px solid #3b4652; box-shadow:-22px 0 70px rgba(0,0,0,.46); transform:translateX(105%); transition:transform .26s ease; }.evolution-drawer.open { transform:translateX(0); }.drawer-close { position:absolute; top:16px; right:19px; width:32px; height:32px; padding:0; color:#a2acb5; background:#2b323c; border-radius:8px; font-size:22px; }.drawer-close:hover { color:#112d2a; background:var(--teal); }.evolution-drawer h2 { max-width:calc(100% - 45px); margin:8px 0 6px; font-size:30px; letter-spacing:-1px; }.drawer-copy { margin:0; color:#8f99a4; font-size:12px; line-height:1.5; }.family-strip { display:flex; flex-wrap:wrap; gap:5px; margin:17px 0 20px; }.family-member { padding:4px 6px; color:#87919c; background:#2b313a; border-radius:4px; font:8px var(--mono); }.family-member.caught { color:#8ff5dd; }.family-member.selected { color:#11332f; background:var(--teal); font-weight:700; }.evolution-steps { display:grid; gap:10px; }.evolution-step { display:grid; grid-template-columns:minmax(122px,.72fr) minmax(138px,1.25fr) minmax(122px,.72fr); gap:8px; align-items:center; padding:12px; background:#252b34; border:1px solid rgba(255,255,255,.06); border-radius:11px; }.evolution-node { display:flex; align-items:center; gap:8px; min-width:0; padding:7px; background:#1d222a; border:1px solid #343e4a; border-radius:8px; }.evolution-node.selected { border-color:var(--teal); box-shadow:0 0 0 1px rgba(75,225,193,.22); }.evolution-node.caught { background:rgba(75,225,193,.06); }.evolution-art { display:grid; place-items:center; flex:0 0 37px; width:37px; height:37px; }.evolution-art img { width:36px; height:36px; object-fit:contain; }.evolution-art .art-fallback { width:30px; height:30px; font-size:12px; }.evolution-node small, .evolution-node strong, .evolution-node em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.evolution-node small { color:#798490; font:8px var(--mono); }.evolution-node strong { margin:2px 0; font-size:10px; }.evolution-node em { color:#7d8792; font:8px var(--mono); font-style:normal; }.evolution-node.caught em { color:var(--teal); }.evolution-connector { display:grid; justify-items:center; gap:7px; }.evolution-connector > span { color:var(--teal); font-size:19px; line-height:1; }.requirement-list { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; }.requirement-chip { display:flex; align-items:center; gap:3px; padding:4px 5px; color:#aeb7c1; background:#1b2027; border:1px solid #3a434e; border-radius:4px; font:8px var(--mono); text-align:left; }.requirement-chip:hover { color:#d8fffa; border-color:#6ccdbb; }.requirement-chip > span { color:#87939e; font-size:10px; }.requirement-chip.complete { color:#103530; background:var(--teal); border-color:var(--teal); }.requirement-chip.complete > span { color:#103530; }.requirement-list.ready b { width:100%; color:#8af4dc; font:700 8px var(--mono); text-align:center; }.requirement-empty { color:#808b96; font:8px var(--mono); }.drawer-footnote { margin:20px 0 0; color:#727c88; font-size:9px; line-height:1.5; }.no-evolution { display:grid; place-items:center; min-height:250px; padding:25px; color:#aab3bd; border:1px dashed #3e4752; border-radius:12px; text-align:center; }.no-evolution span { color:var(--teal); font-size:35px; }.no-evolution strong { margin-top:8px; font-size:13px; }.no-evolution p { max-width:250px; margin:5px 0 0; color:#818b96; font-size:10px; line-height:1.5; }body.light .evolution-drawer { background:#f7fbfa; border-color:#d8e5e2; }.evolution-drawer[aria-hidden="false"] { pointer-events:auto; }body.light .evolution-step { background:#eef5f3; border-color:#dce9e6; }body.light .evolution-node, body.light .requirement-chip { background:#fff; border-color:#d8e3e1; }body.light .family-member { background:#e6efed; color:#68757b; }body.light .drawer-close { background:#e5efed; }
.no-evolution { display:flex; align-items:center; gap:12px; min-height:0; margin:17px 0 12px; padding:13px 15px; color:#aab3bd; background:#20262e; border:1px dashed #3e4752; border-radius:11px; text-align:left; }
.no-evolution > span { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; color:var(--teal); background:rgba(75,225,193,.08); border-radius:50%; font-size:20px; }
.no-evolution strong { display:block; margin:0; font-size:12px; }
.no-evolution p { max-width:none; margin:3px 0 0; color:#818b96; font-size:9px; line-height:1.5; }
.obtain-guide { overflow:hidden; background:linear-gradient(145deg,rgba(75,225,193,.1),rgba(31,37,45,.94) 38%); border:1px solid rgba(75,225,193,.24); border-radius:14px; box-shadow:0 16px 36px rgba(0,0,0,.16); }
.obtain-heading { display:flex; align-items:center; gap:10px; padding:15px 17px 12px; border-bottom:1px solid rgba(75,225,193,.14); }
.obtain-heading > span { display:grid; place-items:center; width:31px; height:31px; color:#123c36; background:var(--teal); border-radius:9px; font-size:18px; font-weight:800; }
.obtain-heading p,.obtain-kicker { margin:0; color:#76d9c5; font:700 8px/1.25 var(--mono); letter-spacing:1.1px; }
.obtain-heading strong { display:block; margin-top:3px; font-size:12px; }
.obtain-method { padding:18px 17px 17px; }
.obtain-method + .obtain-method { border-top:1px solid rgba(255,255,255,.07); }
.obtain-method h3 { margin:4px 0 7px; color:#f2f8f7; font-size:20px; letter-spacing:-.35px; }
.obtain-summary { margin:0; color:#adb8c1; font-size:10px; line-height:1.6; }
.obtain-steps { display:grid; gap:8px; margin:15px 0; padding:0; counter-reset:obtain-step; list-style:none; }
.obtain-steps li { position:relative; min-height:26px; padding:5px 0 5px 34px; color:#c8d1d7; font-size:10px; line-height:1.55; counter-increment:obtain-step; }
.obtain-steps li::before { position:absolute; top:3px; left:0; display:grid; place-items:center; width:24px; height:24px; color:#123b35; background:var(--teal); border-radius:50%; content:counter(obtain-step); font:700 9px var(--mono); }
.obtain-note { display:grid; gap:3px; margin:13px 0 0; padding:10px 11px; color:#8e99a3; background:#1b2027; border-left:2px solid #63717e; border-radius:0 6px 6px 0; font-size:9px; line-height:1.5; }
.obtain-note strong { color:#b9c4cc; font:700 8px var(--mono); letter-spacing:.55px; text-transform:uppercase; }
.obtain-source { display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:7px 10px; color:#183c37; background:var(--teal); border-radius:7px; font:700 9px var(--mono); text-decoration:none; }
.obtain-source:hover { color:#102c29; background:#83f4dd; }
.obtain-source:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.obtain-reviewed { margin:0; padding:10px 17px 12px; color:#697681; border-top:1px solid rgba(255,255,255,.06); font:8px/1.5 var(--mono); }
body.light .no-evolution { background:#f1f6f5; border-color:#bfd4cf; }
body.light .obtain-guide { background:linear-gradient(145deg,rgba(37,188,157,.12),#fff 40%); border-color:#a9d9cf; box-shadow:0 14px 32px rgba(44,92,83,.1); }
body.light .obtain-method h3 { color:#1b2927; }
body.light .obtain-summary,body.light .obtain-steps li { color:#53615f; }
body.light .obtain-note { color:#66736f; background:#eef5f3; }
body.light .obtain-reviewed { color:#72817e; border-color:#dbe9e6; }
@media (max-width: 980px) { .sidebar { width:209px; flex-basis:209px; }.hero-grid { grid-template-columns:1fr .75fr; }.content-grid { grid-template-columns:1fr; }.goal-panel { min-height:175px; }.goals { grid-template-columns:repeat(3,1fr); }.goal { grid-template-columns:30px 1fr; }.missing-list { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 760px) { .sidebar { position:fixed; z-index:15; left:-248px; width:248px; transition:left .23s; box-shadow:20px 0 50px rgba(0,0,0,.35); }.sidebar.open { left:0; }.mobile-menu { display:grid; place-items:center; width:34px; height:34px; margin-right:8px; color:#aeb8c1; background:var(--surface); border:1px solid var(--line); border-radius:8px; }.topbar { justify-content:flex-start; }.topbar-actions { margin-left:auto; }.topbar-actions .icon-button { display:none; } main { padding:24px 18px 45px; }.hero-grid { grid-template-columns:1fr; }.level-card { min-height:164px; }.metrics-grid { grid-template-columns:repeat(2,1fr); }.pokemon-row { grid-template-columns:repeat(5,1fr); }.insights-grid { grid-template-columns:1fr; }.toolbar { flex-direction:column; }.search-wrap { min-width:0; }.goals { grid-template-columns:1fr; }.missing-list { grid-template-columns:1fr; } }
@media (max-width: 440px) { .topbar h1 { font-size:22px; }.topbar-actions .import-button { padding:9px; font-size:0; }.topbar-actions .import-button span { margin:0; font-size:17px; }.hero-card { padding:27px 22px; }.hero-orb { right:-28px; opacity:.7; }.hero-card h2 { font-size:26px; }.pokemon-row { gap:5px; }.pokemon-tile { padding:8px 3px; }.pokemon-art { font-size:30px; }.panel { padding:17px; }.panel-actions .tag { display:none; }.dex-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px) { .bulk-checklist { align-items:flex-start; flex-direction:column; gap:10px; }.bulk-checklist > div:first-child { flex:auto; }.evolution-drawer { padding:25px 16px 34px; }.evolution-drawer h2 { font-size:27px; }.evolution-step { grid-template-columns:1fr; gap:7px; }.evolution-connector { grid-template-columns:26px 1fr; justify-items:start; width:100%; }.evolution-connector > span { padding-left:5px; transform:rotate(90deg); }.requirement-list { justify-content:flex-start; }.evolution-node { min-height:51px; }.catalog-filters { gap:7px; }.catalog-filters label { width:100%; justify-content:space-between; }.catalog-filters select { flex:1; max-width:none; } }

.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; margin:-1px; padding:0; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[hidden], .tag-mode-banner[hidden], .bulk-tag-actions[hidden] { display:none !important; }
.sidebar { height:100dvh; overflow-y:auto; }
.sidebar-scrim { position:fixed; z-index:14; inset:0; width:100%; height:100%; padding:0; background:rgba(5,9,12,.58); border:0; backdrop-filter:blur(2px); }
.collection-filter-groups { display:grid; gap:8px; flex:1; min-width:0; }.filter-section { display:flex; align-items:flex-start; justify-content:flex-end; gap:9px; }.filter-label { flex:0 0 auto; padding-top:9px; color:#6f7b86; font:500 8px/1 var(--mono); letter-spacing:.8px; }.tag-section { padding-top:7px; border-top:1px solid rgba(255,255,255,.06); }.tag-section .filter-group { flex-wrap:nowrap; justify-content:flex-start; min-width:0; overflow-x:auto; padding-bottom:3px; overscroll-behavior-inline:contain; scrollbar-width:thin; }.tag-section .filter { flex:0 0 auto; padding-inline:8px; white-space:nowrap; }.tag-section .filter::after { content:attr(data-count); display:inline-grid; min-width:17px; margin-left:4px; padding:2px 3px; color:#8e9aa5; background:rgba(255,255,255,.06); border-radius:99px; font:7px/1 var(--mono); }.tag-section .filter.active::after { color:#12332f; background:rgba(255,255,255,.38); }.tag-mode-banner { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:-7px 0 17px; padding:11px 13px; color:#c8fff3; background:rgba(75,225,193,.09); border:1px solid rgba(75,225,193,.35); border-radius:9px; }.tag-mode-banner span, .tag-mode-banner strong, .tag-mode-banner small { display:block; }.tag-mode-banner strong { font-size:11px; }.tag-mode-banner small { margin-top:3px; color:#8ebbb2; font-size:9px; }.tag-mode-banner button { min-height:32px; padding:6px 10px; color:#12332f; background:var(--teal); border-radius:6px; font-size:9px; font-weight:700; white-space:nowrap; }.result-count { margin:-7px 0 11px; color:#87939e; font:9px var(--mono); }.data-freshness { align-self:center; color:#6f7c86; font:8px/1.4 var(--mono); }.import-mode { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }.import-mode label { display:flex; align-items:flex-start; gap:8px; min-height:68px; margin:0; padding:10px; background:#181d23; border:1px solid #343d47; border-radius:8px; cursor:pointer; }.import-mode label:has(input:checked) { border-color:var(--teal); background:rgba(75,225,193,.07); }.import-mode input { margin-top:2px; accent-color:var(--teal); }.import-mode span, .import-mode strong, .import-mode small { display:block; }.import-mode strong { color:#d7dee3; font-size:10px; }.import-mode small { margin-top:4px; color:#7f8b95; font:8px/1.4 var(--font); }.drop-zone { width:100%; color:inherit; font-family:inherit; cursor:pointer; }.bulk-tag-actions [data-bulk-action="remove"].active { color:#401820; background:#ff9aa8; border-color:#ff9aa8; }.toast { display:flex; align-items:center; gap:10px; max-width:min(560px,calc(100vw - 28px)); }.toast #toastMessage { min-width:0; }.toast button { padding:4px 7px; color:#10332f; background:rgba(255,255,255,.55); border-radius:4px; font:800 9px var(--mono); }.filter:focus-visible, .bulk-generation-actions button:focus-visible, .bulk-tag-actions button:focus-visible, .card-toggle:focus-visible, .card-edit:focus-visible, .drop-zone:focus-visible, .tag-mode-banner button:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
body.light .search-wrap input { color:#203034; }body.light .filter { color:#4f5d64; }body.light .filter:hover { color:#142b2d; background:#dfe9e7; }body.light .dialog-close:hover { color:#142b2d; }body.light .tag-section { border-color:rgba(25,55,58,.1); }body.light .filter-label, body.light .result-count, body.light .data-freshness { color:#58686e; }body.light .tag-mode-banner { color:#183934; background:#dff4ef; }body.light .tag-mode-banner small { color:#526e68; }body.light .import-mode label { background:#eef5f3; border-color:#d7e4e1; }body.light .import-mode strong { color:#203034; }body.light .import-mode small { color:#5f6f75; }
@media (max-width: 760px) { .topbar-actions .icon-button { display:grid; }.toolbar { align-items:stretch; }.collection-filter-groups { width:100%; }.filter-section { display:block; }.filter-label { display:block; margin-bottom:6px; padding:0; }.filter-section .filter-group { justify-content:flex-start; }.pokemon-row { display:flex; overflow-x:auto; grid-template-columns:none; padding-bottom:6px; scroll-snap-type:x proximity; }.pokemon-tile { flex:0 0 92px; scroll-snap-align:start; }.data-freshness { width:100%; }.sidebar-scrim[hidden] { display:none; } }
@media (max-width: 520px) { .import-mode { grid-template-columns:1fr; }.tag-mode-banner { align-items:flex-start; }.topbar-actions { gap:5px; }.topbar-actions .icon-button { width:30px; height:30px; }.bulk-generation-actions button, .filter { min-height:36px; }.card-edit { min-width:38px; min-height:28px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }

.skip-link { position:fixed; z-index:100; top:10px; left:10px; padding:9px 12px; color:#102f2c; background:var(--teal); border-radius:7px; font-size:12px; font-weight:800; transform:translateY(-160%); transition:transform .15s ease; }
.skip-link:focus { transform:translateY(0); }
.noscript-banner { position:relative; z-index:90; padding:12px 18px; color:#201405; background:#ffca63; font-size:13px; font-weight:700; text-align:center; }
.site-footer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 20px; align-items:center; margin-top:36px; padding:20px 2px 4px; color:#7f8b95; border-top:1px solid var(--line); font-size:10px; line-height:1.55; }
.site-footer p { margin:0; }
.site-footer strong { color:#b8c2ca; }
.site-footer nav { display:flex; gap:14px; }
.site-footer a { color:#9feadb; text-decoration:none; }
.site-footer a:hover { color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
.site-footer small { grid-column:1 / -1; max-width:840px; color:#66727d; font-size:8px; line-height:1.55; }
.manage-data { width:100%; margin-top:6px; padding:7px 8px; color:#7f8b95; background:transparent; border:0; border-radius:6px; font-size:9px; text-align:left; }
.manage-data:hover { color:var(--teal); background:rgba(255,255,255,.04); }
.data-actions { display:grid; gap:8px; margin-top:18px; }
.data-action { display:grid; grid-template-columns:32px 1fr; column-gap:9px; width:100%; padding:11px; color:#cbd3da; background:#181d23; border:1px solid #343d47; border-radius:9px; text-align:left; }
.data-action > span { grid-row:1 / 3; display:grid; place-items:center; width:30px; height:30px; color:#11332f; background:var(--teal); border-radius:7px; font-size:16px; font-weight:800; }
.data-action strong,.data-action small { display:block; }
.data-action strong { font-size:11px; }
.data-action small { margin-top:3px; color:#7e8a95; font-size:9px; line-height:1.4; }
.data-action:hover { border-color:rgba(75,225,193,.48); }
.data-action.danger > span { color:#481a21; background:#ff9aa8; }
.data-action.danger:hover { border-color:rgba(255,154,168,.55); }
body.light .manage-data { color:#617177; }
body.light .data-action { color:#253438; background:#eef5f3; border-color:#d6e3e0; }
body.light .data-action small { color:#607076; }
body.light .site-footer strong { color:#334348; }
body.light .site-footer a { color:#187c6f; }
body.light .site-footer small { color:#66767c; }
@media (max-width: 600px) { .site-footer { grid-template-columns:1fr; }.site-footer nav { grid-row:2; }.site-footer small { grid-column:1; }.data-action { min-height:56px; }.mobile-menu,.topbar-actions .icon-button { min-width:36px; min-height:36px; }.card-toggle { width:36px; height:36px; }.card-toggle .card-check { width:24px; height:24px; } }

/* Optional Hostinger cloud-account shell. The static preview dismisses this gate
   after discovering that no same-origin DexJourney API is installed. */
body.cloud-pending .app-shell,
body.auth-required .app-shell,
body.cloud-error .app-shell,
body.migration-required .app-shell { visibility:hidden; pointer-events:none; }
body.cloud-pending .skip-link,
body.auth-required .skip-link,
body.cloud-error .skip-link,
body.migration-required .skip-link { display:none; }
.auth-stage { position:fixed; z-index:80; inset:0; display:grid; place-items:center; overflow:auto; padding:28px 18px; background:radial-gradient(circle at 75% 15%,rgba(75,225,193,.12),transparent 32%),rgba(14,16,20,.94); backdrop-filter:blur(16px); }
.auth-card { width:min(470px,100%); padding:34px; background:rgba(28,32,39,.96); border:1px solid rgba(255,255,255,.1); border-radius:18px; box-shadow:0 28px 90px rgba(0,0,0,.48); }
.auth-card .auth-brand { margin:0 0 38px; }
.auth-card h1 { margin:9px 0 11px; font-size:clamp(27px,6vw,38px); line-height:1.03; letter-spacing:-1.35px; }
.auth-card .muted { margin-bottom:19px; font-size:13px; }
.auth-field { display:block; margin:22px 0 7px; color:#cfd6dc; font-size:11px; font-weight:700; }
.auth-card input { width:100%; padding:12px 13px; color:var(--text); background:#14181e; border:1px solid #3d4652; border-radius:9px; }
.auth-submit { width:100%; margin-top:11px; padding:12px 14px; }
.auth-note { display:block; margin-top:12px; color:#78848e; font:9px/1.55 var(--mono); }
.auth-guide-links { display:flex; flex-wrap:wrap; gap:7px 13px; margin-top:24px; padding-top:18px; border-top:1px solid rgba(255,255,255,.09); }
.auth-guide-links a { color:#9feadb; font:9px/1.4 var(--mono); text-decoration:none; }
.auth-guide-links a:hover { color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
.auth-emergency-export { display:block; margin-top:23px; }
.auth-loader { display:block; width:28px; height:28px; margin-bottom:24px; border:3px solid rgba(75,225,193,.18); border-top-color:var(--teal); border-radius:50%; animation:auth-spin .8s linear infinite; }
.migration-actions { display:flex; flex-wrap:wrap; gap:15px; align-items:center; margin-top:22px; }
.signed-in-email { margin:12px 0 0; padding:9px 11px; color:#a9f3e4; background:rgba(75,225,193,.07); border:1px solid rgba(75,225,193,.2); border-radius:7px; font:10px var(--mono); overflow-wrap:anywhere; }
button:disabled { cursor:wait; opacity:.58; }
.sync-dot.checking,.sync-dot.saving { background:var(--gold); box-shadow:0 0 8px var(--gold); }
.sync-dot.error,.sync-dot.conflict { background:var(--coral); box-shadow:0 0 8px var(--coral); }
.sync-dot.local { background:#82909b; box-shadow:none; }
body.light .auth-stage { background:radial-gradient(circle at 75% 15%,rgba(75,225,193,.18),transparent 32%),rgba(236,241,240,.95); }
body.light .auth-card { background:rgba(250,253,252,.97); border-color:rgba(25,55,58,.13); }
body.light .auth-card .brand { color:#182223; }
body.light .auth-card input { color:#172124; background:#fff; border-color:#ccd9d6; }
body.light .auth-guide-links { border-top-color:rgba(25,55,58,.13); }
body.light .auth-guide-links a { color:#187c6f; }
@keyframes auth-spin { to { transform:rotate(360deg); } }
@media (max-width:520px) { .auth-card { padding:27px 22px; }.auth-card .auth-brand { margin-bottom:31px; }.migration-actions { align-items:flex-start; flex-direction:column; } }

/* Category-aware Form & Variant Dex */
.category-ineligible { opacity:.68; }
.category-ineligible:hover { transform:none; border-color:var(--line); }
.category-ineligible .card-art { filter:grayscale(.82); }
.category-note { display:block; margin-top:5px; color:#9ca6af; font:8px/1.35 var(--mono); }
.category-note.invalid { color:#ff9aa8; }
.card-tag.invalid { color:#ffb1bd; border:1px dashed rgba(255,154,168,.5); background:rgba(255,154,168,.09); }
.card-toggle:disabled { cursor:not-allowed; }
.card-toggle:disabled .card-check { border-style:dashed; background:transparent; }
.eligibility-badge { position:absolute; z-index:2; right:7px; bottom:42px; padding:3px 5px; color:#aeb7bf; background:#2a3038; border-radius:4px; font:7px var(--mono); }
.variant-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.variant-summary article { display:grid; gap:4px; padding:17px 19px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.variant-summary span { color:#7e8993; font:9px var(--mono); letter-spacing:.8px; }
.variant-summary strong { color:var(--teal); font-size:27px; letter-spacing:-1px; }
.variant-summary small { color:var(--muted); font-size:10px; }
.variant-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px; }
.variant-toolbar > label { display:flex; align-items:center; gap:8px; color:#8d97a2; font:9px var(--mono); }
.variant-toolbar select,.variant-search input { min-height:39px; padding:9px 11px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:8px; font:11px var(--font); }
.variant-search { flex:1 1 260px; }
.variant-search input { width:100%; }
.variant-toolbar .import-button { margin-left:auto; }
.variant-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:11px; }
.variant-card { position:relative; min-height:218px; padding:13px; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:12px; transition:.18s; }
.variant-card:hover { transform:translateY(-2px); border-color:rgba(75,225,193,.4); }
.variant-card.missing { background:rgba(31,34,40,.7); }
.variant-card .pokemon-art { height:88px; }
.variant-card .pokemon-art img { width:78px; height:78px; object-fit:contain; }
.variant-card .variant-species { display:block; color:#7f8994; font:9px var(--mono); }
.variant-card h3 { margin:4px 36px 2px 0; font-size:14px; line-height:1.2; }
.variant-card .variant-kind { display:inline-flex; margin-top:7px; padding:3px 5px; color:#a6eee0; background:rgba(75,225,193,.08); border-radius:4px; font:8px var(--mono); text-transform:uppercase; }
.variant-card .card-tags { padding:0 28px 25px 0; }
.variant-card .release-badge { right:auto; bottom:9px; left:10px; width:auto; height:auto; padding:4px 6px; border-radius:4px; }
.variant-card .card-edit { right:9px; bottom:9px; }
.variant-card .card-toggle { top:9px; right:9px; }
.variant-card.missing .pokemon-art { filter:grayscale(1); opacity:.62; }
.variant-empty { grid-column:1/-1; padding:50px 20px; color:var(--muted); border:1px dashed var(--line); border-radius:12px; text-align:center; }
.history-dialog { width:min(620px,calc(100% - 32px)); }
.history-list { display:grid; gap:9px; max-height:420px; margin-top:18px; overflow:auto; }
.history-entry { display:grid; grid-template-columns:1fr auto; gap:5px 13px; align-items:center; padding:13px 14px; background:#181d24; border:1px solid #343d48; border-radius:9px; }
.history-entry strong { font-size:12px; }
.history-entry small { color:#7f8994; font:9px var(--mono); }
.history-entry button { grid-column:2; grid-row:1/3; padding:8px 10px; color:#10332f; background:var(--teal); border-radius:6px; font:700 9px var(--mono); }
.history-loading { padding:28px; color:var(--muted); border:1px dashed var(--line); border-radius:9px; text-align:center; }
.variant-dialog label:not(.attribute-toggle) { display:grid; gap:7px; margin-top:17px; color:#cfd4da; font-size:11px; font-weight:600; }
.variant-dialog input,.variant-dialog select { padding:11px; color:var(--text); background:#15191f; border:1px solid #3a414c; border-radius:8px; }
.danger-text-button { padding:8px 4px; color:#ff9aa8; background:transparent; font-size:10px; }
.danger-text-button:hover { color:#ffd1d7; }
.attribute-toggle.category-ineligible { cursor:not-allowed; border-style:dashed; }
.attribute-toggle.category-ineligible:has(input:checked) { cursor:pointer; }
.category-summary span { position:relative; overflow:hidden; padding-bottom:8px; }
.category-summary span i { position:absolute; right:0; bottom:0; left:0; display:block; height:2px; background:var(--teal); transform-origin:left; }
body.light .category-ineligible { opacity:.72; }
body.light .eligibility-badge { color:#617076; background:#e4ecea; }
body.light .variant-card.missing { background:#f4f7f6; }
body.light .variant-card .variant-kind { color:#176f61; background:#e4f3ef; }
body.light .history-entry { background:#f2f7f5; border-color:#d7e3e0; }
body.light .category-summary span { color:#4d5c62; background:#e5eeec; }
.data-freshness.warning { color:#ffb0bd; }
body.light .variant-dialog input,body.light .variant-dialog select { color:#182427; background:#fff; border-color:#ccd9d6; }
@media (max-width:760px) { .variant-summary { grid-template-columns:1fr; }.variant-toolbar { align-items:stretch; }.variant-toolbar > label,.variant-toolbar .import-button { width:100%; margin-left:0; }.variant-toolbar select { flex:1; }.variant-grid { grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); } }
@media (max-width:520px) { .history-entry { grid-template-columns:1fr; }.history-entry button { grid-column:1; grid-row:auto; min-height:40px; }.variant-card { min-height:210px; } }