:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --bg:#0b0e1a; --surface:#151a2d; --surface2:#1d243c; --text:#f7f8ff; --muted:#9aa5c4; --accent:#7c5cff; --accent2:#29d9ff; --gold:#ffd86b; }
* { box-sizing: border-box; }
body { margin:0; background:radial-gradient(circle at top,#202952 0,#0b0e1a 38rem); color:var(--text); min-height:100vh; }
button,input,select { font:inherit; }
button { color:inherit; }
.app-shell { width:min(100%,720px); margin:0 auto; padding:calc(18px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
h1 { margin:0; font-size:2rem; letter-spacing:-.04em; }.eyebrow{margin:0 0 4px;color:#9da9ff;font-size:.72rem;font-weight:800;letter-spacing:.14em}.icon-button{width:44px;height:44px;border:0;border-radius:14px;background:var(--surface2);font-size:1.5rem}.progress-card{padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:linear-gradient(135deg,rgba(124,92,255,.26),rgba(41,217,255,.08)),var(--surface);box-shadow:0 18px 55px rgba(0,0,0,.24)}.progress-card strong{font-size:1.35rem}.progress-track{height:8px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;margin:14px 0 8px}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:inherit;transition:width .25s}.progress-meta{margin:0;color:var(--muted);font-size:.88rem}.mode-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:16px 0;padding:5px;background:rgba(255,255,255,.05);border-radius:16px}.mode-button{border:0;background:transparent;padding:10px;border-radius:12px;color:var(--muted);font-weight:750}.mode-button.is-active{background:var(--surface2);color:var(--text)}.controls{display:grid;gap:10px;margin-bottom:16px}.search-field input,.filter-row select{width:100%;border:1px solid rgba(255,255,255,.08);background:var(--surface);color:var(--text);border-radius:14px;padding:13px}.filter-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sprite-card{position:relative;min-width:0;text-align:left;border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:10px;background:linear-gradient(160deg,rgba(255,255,255,.08),transparent 40%),var(--surface);box-shadow:0 14px 35px rgba(0,0,0,.2);overflow:hidden}.sprite-card.is-missing{filter:saturate(.35);opacity:.62}.sprite-card.is-mastered{border-color:rgba(255,216,107,.65);box-shadow:0 0 0 1px rgba(255,216,107,.12),0 16px 40px rgba(0,0,0,.22)}.sprite-card.is-lost{background:linear-gradient(145deg,rgba(255,216,107,.12),rgba(90,45,100,.18)),var(--surface)}.card-number{font-size:.68rem;font-weight:850;letter-spacing:.1em;color:var(--muted)}.sprite-placeholder{aspect-ratio:1/1;margin:8px 0;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#5063f2,#24c7e8);font-weight:900;font-size:2rem;box-shadow:inset 0 0 35px rgba(255,255,255,.18)}.variant-gold{background:linear-gradient(145deg,#9c6e0a,#ffe49a)}.variant-galaxy{background:radial-gradient(circle at 30% 25%,#f0a9ff 0 3%,transparent 4%),linear-gradient(145deg,#361779,#3ea0dd)}.variant-gummy{background:linear-gradient(145deg,#ff5ebc,#7cf2ff)}.variant-holofoil{background:linear-gradient(135deg,#5af2ff,#ff75dc,#fff27d)}.card-copy{display:grid;gap:2px}.card-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-copy span,.card-copy small{color:var(--muted)}.card-copy small{font-size:.72rem}.mastery-mark{position:absolute;top:10px;right:11px;color:var(--gold);font-size:1.1rem}.card-dialog{width:min(calc(100% - 22px),520px);border:1px solid rgba(255,255,255,.1);border-radius:28px;background:#0f1425;color:var(--text);padding:14px;max-height:92vh}.card-dialog::backdrop{background:rgba(2,5,14,.75);backdrop-filter:blur(8px)}.dialog-close{position:absolute;z-index:3;right:20px;top:18px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.35);font-size:1.5rem}.flip-card{display:block;width:100%;height:410px;padding:0;border:0;background:transparent;perspective:1000px;position:relative}.detail-face{position:absolute;inset:0;padding:20px;border-radius:24px;backface-visibility:hidden;transition:transform .55s cubic-bezier(.2,.8,.2,1);background:linear-gradient(145deg,rgba(255,255,255,.1),transparent),var(--surface2);border:1px solid rgba(255,255,255,.1)}.detail-front .sprite-placeholder{max-width:250px;margin:36px auto 18px}.detail-front h2,.detail-front p{text-align:center;margin:5px}.detail-front p{color:var(--muted)}.detail-back{transform:rotateY(180deg);text-align:left;overflow:auto}.detail-card[data-flipped="true"] .detail-front{transform:rotateY(180deg)}.detail-card[data-flipped="true"] .detail-back{transform:rotateY(360deg)}.info-block{padding:14px 0;border-top:1px solid rgba(255,255,255,.08)}.info-block span{display:block;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.1em}.info-block strong{display:block;margin:6px 0}.info-block p{color:var(--muted);line-height:1.45}.editor{display:grid;gap:14px;padding:16px 4px 4px}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--surface);border-radius:14px}.toggle-row input{width:22px;height:22px;accent-color:var(--accent)}.level-control{padding:12px 14px;background:var(--surface);border-radius:14px}.level-control>span{display:block;margin-bottom:10px}.level-control>div{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.level-button{border:1px solid rgba(255,255,255,.1);background:var(--surface2);padding:10px 0;border-radius:10px}.level-button.is-active{background:var(--accent);border-color:transparent}.primary-action,.utility-bar button,.file-button{border:0;border-radius:14px;padding:12px 14px;background:var(--accent);font-weight:800;text-align:center}.utility-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.utility-bar button,.file-button{background:var(--surface2)}.file-button input{display:none}.empty-state,.fatal-error{text-align:center;padding:42px 20px;color:var(--muted)}.empty-state strong{color:var(--text)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media (min-width:600px){.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.legal-notice{margin-top:18px;padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.035);color:var(--muted);font-size:.72rem;line-height:1.5}
.legal-notice strong{color:var(--text)}
.legal-notice p{margin:.45rem 0 0}
@media (max-width:420px){.mode-button{font-size:.78rem;padding:10px 4px}}

/* Local Sprite art pipeline */
.filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.filter-row #imageFilter{grid-column:1/-1}
.sprite-art{position:relative;display:grid;place-items:center;aspect-ratio:1/1;margin:8px 0;padding:10px;overflow:hidden;border-radius:16px;background:#65718a}
.sprite-art img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:contain;object-position:center;opacity:0;transition:opacity .18s ease,filter .18s ease}
.sprite-art.is-loaded img{opacity:1}
.sprite-art.is-loaded .sprite-placeholder{opacity:0}
.sprite-art.is-dimmed{opacity:.58}
.sprite-art.is-dimmed img{filter:saturate(.35) brightness(.72)}
.sprite-art.is-silhouette img{filter:brightness(0) saturate(100%);opacity:.72}
.sprite-art.is-fallback .sprite-placeholder{opacity:1}
.sprite-art .sprite-placeholder{width:100%;height:100%;margin:0;border-radius:12px;transition:opacity .18s ease}
.sprite-art--thumb{width:100%}
.sprite-art--detail{width:min(250px,75%);margin:28px auto 14px;padding:14px}
.sprite-art--detail img{inset:14px;width:calc(100% - 28px);height:calc(100% - 28px)}
.detail-front .sprite-art .sprite-placeholder{max-width:none;margin:0}
.sprite-card.is-missing.is-hunt{filter:none;opacity:1;border-color:rgba(41,217,255,.34);box-shadow:0 14px 35px rgba(0,0,0,.2),0 0 0 1px rgba(41,217,255,.08)}
.hunt-badge{position:absolute;right:.55rem;top:.55rem;z-index:2;padding:.2rem .42rem;border-radius:999px;background:#29d9ff;color:#071b25;font-size:.58rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.sprite-card.is-hunt .mastery-mark{top:2.15rem}
.status-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.status-toggle{min-width:0;min-height:70px;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:10px;padding:10px 11px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:linear-gradient(145deg,rgba(255,255,255,.045),transparent),var(--surface);text-align:left;transition:transform .15s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.status-toggle:active{transform:scale(.98)}
.status-toggle:focus-visible{outline:3px solid rgba(157,169,255,.7);outline-offset:2px}
.status-toggle-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.07);color:var(--muted);font-size:1.15rem;font-weight:900}
.status-toggle-copy{min-width:0;display:grid;gap:2px}
.status-toggle-copy strong{font-size:.86rem;white-space:nowrap}
.status-toggle-copy small{color:var(--muted);font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-toggle--owned[aria-pressed="true"]{border-color:rgba(41,217,255,.62);background:linear-gradient(145deg,rgba(41,217,255,.2),rgba(41,217,255,.07)),var(--surface);box-shadow:inset 0 0 0 1px rgba(41,217,255,.08),0 8px 24px rgba(0,0,0,.18)}
.status-toggle--owned[aria-pressed="true"] .status-toggle-icon{background:#29d9ff;color:#071b25}
.status-toggle--mastered[aria-pressed="true"]{border-color:rgba(255,216,107,.65);background:linear-gradient(145deg,rgba(255,216,107,.2),rgba(255,216,107,.06)),var(--surface);box-shadow:inset 0 0 0 1px rgba(255,216,107,.08),0 8px 24px rgba(0,0,0,.18)}
.status-toggle--mastered[aria-pressed="true"] .status-toggle-icon{background:#ffd86b;color:#2d2100}
@media (max-width:340px){.status-actions{grid-template-columns:1fr}}
@media (min-width:600px){.filter-row{grid-template-columns:repeat(3,minmax(0,1fr))}.filter-row #imageFilter{grid-column:auto}}