:root{
  --red:#d71920;
  --deep:#8f1017;
  --dark:#15161b;
  --screen:#d9fff6;
  --card:#fff7f2;
  --text:#1b1b1f;
  --muted:#696a72;
  --line:rgba(0,0,0,.14);
  --shadow:0 18px 50px rgba(40,0,0,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:radial-gradient(circle at top left,#ff6b6b,transparent 35%),linear-gradient(135deg,#a7060d,#e92a32 48%,#6b090e);
  color:var(--text);
}
button,input,select{font:inherit}
.app-shell{
  width:min(100%,430px);
  min-height:100vh;
  margin:0 auto;
  background:linear-gradient(180deg,#e82831,#b70f18 46%,#7d080d);
  box-shadow:0 0 0 1px rgba(255,255,255,.15), var(--shadow);
  padding:16px 14px 92px;
  position:relative;
}
.topbar{display:flex;gap:14px;align-items:center;color:white;padding:8px 2px 16px}
.lens-wrap{display:flex;gap:8px;align-items:flex-start}.lens{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0 10%,#8cecff 11% 34%,#1599d7 35% 62%,#063d6a 63%);border:5px solid #fff;box-shadow:0 0 0 3px rgba(0,0,0,.25),0 0 24px #8cecff}.mini-lights{display:flex;gap:5px}.mini-lights span{width:13px;height:13px;border-radius:50%;background:#ffd23c;border:2px solid rgba(0,0,0,.25)}.mini-lights span:first-child{background:#ff5656}.mini-lights span:last-child{background:#65e473}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:10px;margin:0 0 2px;opacity:.82}.topbar h1{font-size:33px;line-height:1;margin:0;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.screen{background:linear-gradient(145deg,#eafffb,#bdf4e8);border:9px solid #f5f0e6;border-bottom-width:22px;border-radius:18px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.12),0 12px 24px rgba(0,0,0,.22);position:relative;overflow:hidden}.hero-screen{min-height:188px;padding:22px 18px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}.scan-grid{position:absolute;inset:0;background:linear-gradient(rgba(0,100,80,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,100,80,.08) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000,transparent)}.hero-copy{position:relative}.status-pill{display:inline-flex;margin:0 0 12px;background:rgba(0,0,0,.72);color:#8affd8;border-radius:999px;padding:7px 10px;font-size:12px}.hero-copy h2{margin:0;font-size:24px;line-height:1.05}.hero-copy p:last-child{color:#24514a;margin:8px 0 0;font-size:14px}.primary-btn,.load-more{border:0;border-radius:14px;background:var(--dark);color:white;padding:14px 16px;font-weight:800;box-shadow:0 8px 0 rgba(0,0,0,.22);position:relative}.controls{margin:16px 0;display:grid;gap:10px}.search-box{display:grid;gap:6px;background:rgba(255,255,255,.22);padding:11px;border-radius:17px;color:white}.search-box span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.search-box input,.filter-row select,.scan-match input{width:100%;border:0;outline:0;border-radius:13px;background:#fff;padding:13px 12px;color:var(--text)}.filter-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.filter-row select{font-weight:700}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.stats-row div{background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.18);color:white;border-radius:16px;padding:12px;text-align:center}.stats-row strong{display:block;font-size:22px}.stats-row span{font-size:11px;opacity:.8;text-transform:uppercase;letter-spacing:.08em}.dex-list{display:grid;gap:11px}.poke-card{border:0;width:100%;text-align:left;background:rgba(255,247,242,.96);border-radius:19px;padding:10px;display:grid;grid-template-columns:76px 1fr auto;gap:10px;align-items:center;box-shadow:0 10px 18px rgba(0,0,0,.2)}.sprite-box{width:76px;height:76px;border-radius:16px;background:linear-gradient(145deg,#f4fff9,#dce8ff);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}.sprite-box img{width:72px;height:72px;object-fit:contain;image-rendering:auto}.poke-name{font-size:18px;font-weight:900;text-transform:capitalize}.poke-no{color:var(--muted);font-weight:800;font-size:12px}.type-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}.type-pill{border-radius:999px;padding:4px 8px;background:#e7e7e7;font-size:11px;text-transform:uppercase;font-weight:900}.check-dot{width:14px;height:14px;border-radius:50%;background:#bbb;box-shadow:0 0 0 4px rgba(0,0,0,.08)}.check-dot.caught{background:#2fc56d}.check-dot.seen{background:#ffc43d}.load-more{width:100%;margin:15px 0 0;background:#fff;color:#8f1017}.bottom-nav{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);width:min(calc(100% - 24px),406px);background:rgba(20,20,25,.86);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18);border-radius:21px;display:grid;grid-template-columns:repeat(4,1fr);padding:7px;z-index:5}.bottom-nav button{border:0;border-radius:15px;background:transparent;color:#fff;padding:10px 6px;font-weight:800;font-size:12px}.bottom-nav button.active{background:#fff;color:#b70f18}.details-dialog,.scanner-dialog{border:0;background:transparent;padding:0;width:min(94vw,430px)}dialog::backdrop{background:rgba(0,0,0,.62);backdrop-filter:blur(5px)}.details-card,.scanner-card{background:#fff7f2;border-radius:24px;padding:18px;box-shadow:var(--shadow);max-height:88vh;overflow:auto}.close-btn{float:right;border:0;background:#1b1b1f;color:white;width:34px;height:34px;border-radius:50%;font-size:22px}.detail-head{display:flex;gap:14px;align-items:center}.detail-head img{width:112px;height:112px;object-fit:contain;background:#eefbf7;border-radius:22px}.detail-head h2{text-transform:capitalize;margin:0;font-size:27px}.detail-no{font-weight:900;color:var(--muted)}.detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.detail-actions button,.scan-match button{border:0;border-radius:14px;background:var(--red);color:#fff;padding:12px;font-weight:900}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.info-grid div,.stat-list,.flavor{background:#fff;border-radius:16px;padding:12px;border:1px solid var(--line)}.stat{display:grid;grid-template-columns:90px 1fr 32px;gap:8px;align-items:center;margin:8px 0;font-size:12px;font-weight:800}.bar{height:9px;background:#eee;border-radius:999px;overflow:hidden}.bar i{display:block;height:100%;background:#d71920;border-radius:999px}.camera-box{height:270px;background:#101114;border-radius:20px;overflow:hidden;position:relative;margin:12px 0}.camera-box video{width:100%;height:100%;object-fit:cover}.scanner-frame{position:absolute;inset:36px;border:2px solid #8affd8;box-shadow:0 0 24px rgba(138,255,216,.65),inset 0 0 24px rgba(138,255,216,.26)}.scanner-frame:after{content:"";position:absolute;left:0;right:0;height:3px;background:#8affd8;animation:sweep 2s infinite}@keyframes sweep{0%{top:0}50%{top:100%}100%{top:0}}.scanner-note{font-size:13px;color:var(--muted)}.scan-match{display:grid;grid-template-columns:1fr auto;gap:9px}.empty{background:rgba(255,255,255,.24);color:white;padding:18px;border-radius:18px;text-align:center}.loading-card{height:98px;border-radius:19px;background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,.65),rgba(255,255,255,.35));animation:pulse 1.1s infinite}@keyframes pulse{50%{opacity:.55}}
@media (max-width:360px){.poke-card{grid-template-columns:64px 1fr auto}.sprite-box{width:64px;height:64px}.hero-copy h2{font-size:21px}}