@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --bg:#04050a; --bg2:#090b13; --red:#ef233c; --red2:#9b1024; --cyan:#2df8ff; --cyan2:#1b86ff;
  --amber:#ffd166; --green:#48ff9b; --text:#edf7ff; --muted:#8ea4b8; --panel:#101522d9;
  --line:#66f7ff55; --glass:#ffffff0b; --shadow:0 30px 90px #000b,0 0 70px #2df8ff18;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% -10%,#17305d 0,#080a12 33%,#030409 72%),linear-gradient(135deg,#07131d,#08040a);color:var(--text);font-family:Inter,system-ui,Segoe UI,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:-20%;background:conic-gradient(from 180deg at 50% 50%,#ef233c18,#2df8ff16,#0000,#ef233c18);filter:blur(60px);animation:aurora 13s ease-in-out infinite alternate;pointer-events:none} @keyframes aurora{to{transform:rotate(18deg) scale(1.1)}}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:.75}.noise{position:fixed;inset:0;background-image:radial-gradient(#fff2 1px,transparent 1px);background-size:3px 3px;opacity:.08;mix-blend-mode:screen;pointer-events:none}.noise:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 3px,#fff1 4px);animation:scan 7s linear infinite}@keyframes scan{to{transform:translateY(40px)}}
.app-shell{width:min(1720px,94vw);margin:0 auto;padding:26px 0 56px;position:relative}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.brand{display:flex;align-items:center;gap:16px}.brand p,.eyebrow,.control span,.frame-title,.rail-module span{font-family:'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);font-size:12px}.brand h1{margin:0;font-size:32px;letter-spacing:.02em;text-transform:uppercase}.brand-lens{width:66px;height:66px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#7efcff 18%,#1176ff 42%,#041320 64%);border:4px solid #d9faff;box-shadow:0 0 28px #2df8ff99, inset 0 0 18px #fff8;position:relative}.brand-lens i{position:absolute;inset:-10px;border:1px solid #2df8ff66;border-radius:50%;animation:spin 4s linear infinite}@keyframes spin{to{rotate:360deg}}.system-readout{display:flex;align-items:baseline;gap:8px;background:#0c101bcc;border:1px solid #ffffff17;border-radius:999px;padding:12px 18px;box-shadow:var(--shadow)}.system-readout b{font-size:28px}.system-readout small{color:var(--muted);text-transform:uppercase}.live-dot{width:10px;height:10px;background:var(--green);border-radius:50%;box-shadow:0 0 18px var(--green);animation:pulse 1.2s infinite}@keyframes pulse{50%{opacity:.35;transform:scale(.65)}}
.hero-device{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:center;padding:34px;border:1px solid #ffffff18;border-radius:34px;background:linear-gradient(135deg,#111827dd,#090b13dd 45%,#1b0710cc),radial-gradient(circle at 90% 10%,#ef233c55,transparent 34%);box-shadow:var(--shadow);position:relative;overflow:hidden}.hero-device:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#2df8ff10 1px,transparent 1px),linear-gradient(#2df8ff0c 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent 75%)}.hero-copy{position:relative;z-index:1}.hero-copy h2{font-size:clamp(42px,7vw,104px);line-height:.82;text-transform:uppercase;margin:8px 0 18px;max-width:920px;text-shadow:0 0 28px #2df8ff35}.hero-copy p:last-child{font-size:19px;line-height:1.55;color:#c4d6e8;max-width:720px}.radar{width:310px;height:310px;border-radius:50%;border:1px solid #2df8ff77;position:relative;margin:auto;background:radial-gradient(circle,#2df8ff12 0 2px,transparent 3px),radial-gradient(circle,#0000 0 28%,#2df8ff08 29% 30%,#0000 31% 48%,#2df8ff0b 49% 50%,#0000 51%);box-shadow:inset 0 0 48px #2df8ff22,0 0 32px #2df8ff22}.radar-grid{position:absolute;inset:0;border-radius:50%;background:linear-gradient(90deg,transparent 49.7%,#2df8ff55 50%,transparent 50.3%),linear-gradient(0deg,transparent 49.7%,#2df8ff55 50%,transparent 50.3%)}.radar-sweep{position:absolute;inset:50% 50% 0 50%;transform-origin:0 0;width:145px;height:2px;background:linear-gradient(90deg,var(--cyan),transparent);animation:sweep 2.4s linear infinite;box-shadow:0 0 14px var(--cyan)}@keyframes sweep{to{rotate:360deg}}.blip{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 18px var(--red);animation:blip 2s infinite}.b1{left:64%;top:31%}.b2{left:35%;top:61%;animation-delay:.6s}.b3{left:70%;top:70%;animation-delay:1.1s}@keyframes blip{50%{transform:scale(1.7);opacity:.35}}
.command-deck{display:grid;grid-template-columns:1fr 170px 190px 150px;gap:14px;margin:18px 0;padding:16px;border-radius:28px;background:linear-gradient(180deg,#111827d9,#080b14d9);border:1px solid #ffffff18;box-shadow:var(--shadow);backdrop-filter:blur(20px)}.control input,.control select,.primary-action{height:54px;border-radius:18px;border:1px solid #2df8ff44;background:#030711;color:var(--text);padding:0 16px;outline:none;font:600 15px Inter}.control input:focus,.control select:focus{border-color:var(--cyan);box-shadow:0 0 0 4px #2df8ff17,0 0 22px #2df8ff33}.primary-action{cursor:pointer;background:linear-gradient(135deg,var(--red),#ff6b35);border-color:#ff8a98;font-weight:900;text-transform:uppercase;letter-spacing:.1em;position:relative;overflow:hidden}.primary-action:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,#fff7,transparent);transform:translateX(-120%)}.primary-action:hover:after{animation:shine .7s}@keyframes shine{to{transform:translateX(120%)}}
.workbench{display:grid;grid-template-columns:210px minmax(0,1fr) 470px;gap:18px}.left-rail{display:grid;gap:14px;align-content:start}.rail-module{border:1px solid #ffffff18;border-radius:26px;background:#0c101bd9;padding:18px;box-shadow:var(--shadow)}.rail-module b{display:block;font-size:42px;margin:8px 0}.rail-module small{color:var(--muted);text-transform:uppercase}.red-module{background:linear-gradient(160deg,#3a0711,#0b101a);border-color:#ff456055}.type-cloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.type-chip{font:700 11px 'JetBrains Mono';text-transform:uppercase;padding:7px 9px;border-radius:999px;border:1px solid #ffffff22;background:#ffffff0c;color:#dcecff;cursor:pointer;transition:.2s}.type-chip:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:0 0 18px #2df8ff30}.results-frame{min-width:0;border:1px solid #ffffff18;border-radius:30px;background:#080b14c7;box-shadow:var(--shadow);overflow:hidden}.frame-title{height:54px;display:flex;align-items:center;gap:14px;padding:0 18px;border-bottom:1px solid #ffffff12}.frame-title i{height:1px;flex:1;background:linear-gradient(90deg,var(--cyan),transparent)}.frame-title small{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:14px;max-height:calc(100vh - 280px);overflow:auto;scrollbar-color:#2df8ff44 #0000}.card{position:relative;min-height:250px;border:1px solid #ffffff13;border-radius:24px;background:radial-gradient(circle at 50% 25%,var(--accent,#2df8ff)22,transparent 34%),linear-gradient(180deg,#151c2e,#070a12);overflow:hidden;cursor:pointer;transform-style:preserve-3d;animation:cardIn .45s both;transition:transform .22s,border .22s,box-shadow .22s}.card:hover,.card.active{transform:translateY(-6px) rotateX(3deg);border-color:var(--accent,#2df8ff);box-shadow:0 18px 55px #000a,0 0 36px color-mix(in srgb,var(--accent,#2df8ff),transparent 60%)}@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.98)}}.card:before{content:attr(data-id);position:absolute;top:8px;right:10px;font:900 34px Inter;color:#fff2}.card:after{content:"";position:absolute;inset:auto -20% -45% -20%;height:110px;background:radial-gradient(ellipse,var(--accent,#2df8ff)33,transparent 68%);filter:blur(18px);opacity:.45}.sprite-wrap{height:154px;display:grid;place-items:center;position:relative}.sprite-wrap:before{content:"";position:absolute;width:118px;height:118px;border-radius:50%;border:1px dashed #ffffff28;animation:spin 12s linear infinite}.card img{width:145px;height:145px;object-fit:contain;filter:drop-shadow(0 24px 22px #000c);transition:.24s}.card:hover img{transform:scale(1.08) translateY(-4px)}.name{font-size:19px;font-weight:900;text-transform:capitalize;padding:0 14px}.types{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px 14px}.type{font:800 10px 'JetBrains Mono';text-transform:uppercase;letter-spacing:.08em;padding:6px 8px;border-radius:999px;background:#2df8ff22;border:1px solid #2df8ff55}.detail-console{position:sticky;top:16px;min-height:720px;border-radius:34px;border:1px solid #ffffff18;background:linear-gradient(180deg,#121827e8,#050711e8);box-shadow:var(--shadow);overflow:hidden}.detail-console:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 22%,var(--accent,#2df8ff)18,transparent 42%);opacity:.22}.empty-state{min-height:720px;display:grid;place-content:center;text-align:center;padding:34px;color:var(--muted);position:relative}.empty-state b{font-size:24px;color:var(--text);margin-top:18px}.empty-orb{width:150px;height:150px;border-radius:50%;border:1px solid #2df8ff55;background:radial-gradient(circle,#2df8ff22,transparent 62%);box-shadow:0 0 60px #2df8ff22;animation:pulse 2s infinite}.detail-inner{position:relative;padding:24px;min-height:720px}.detail-head{display:flex;justify-content:space-between;align-items:center}.dex-no{font:900 15px 'JetBrains Mono';color:var(--cyan);letter-spacing:.18em}.gen-tag{font:800 11px 'JetBrains Mono';color:var(--muted);text-transform:uppercase;border:1px solid #ffffff19;border-radius:999px;padding:7px 10px}.holo-stage{height:310px;display:grid;place-items:center;position:relative}.holo-stage:before{content:"";position:absolute;bottom:35px;width:270px;height:54px;border-radius:50%;background:radial-gradient(ellipse,var(--accent,#2df8ff)44,transparent 70%);filter:blur(4px);opacity:.55}.holo-stage:after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;border:1px solid #ffffff18;background:linear-gradient(90deg,transparent 49%,#fff2 50%,transparent 51%),linear-gradient(0deg,transparent 49%,#fff2 50%,transparent 51%);animation:spin 18s linear infinite}.detail-art{max-width:300px;max-height:280px;object-fit:contain;filter:drop-shadow(0 34px 28px #000e) drop-shadow(0 0 25px var(--accent,#2df8ff));animation:floaty 3s ease-in-out infinite;z-index:1}@keyframes floaty{50%{transform:translateY(-9px)}}.detail-title{font-size:44px;line-height:.95;text-transform:capitalize;margin:4px 0 10px}.flavor{line-height:1.55;color:#c9d9e8;border-left:3px solid var(--accent,#2df8ff);padding-left:14px}.meta{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0}.meta div{border:1px solid #ffffff12;border-radius:16px;background:#ffffff09;padding:12px}.meta b{font-size:18px}.meta small{color:var(--muted);text-transform:uppercase}.stats{display:grid;gap:9px;margin-top:16px}.bar{display:grid;grid-template-columns:110px 1fr 40px;gap:9px;align-items:center;font:800 11px 'JetBrains Mono';color:var(--muted);text-transform:uppercase}.meter{height:10px;border-radius:999px;background:#ffffff12;overflow:hidden}.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent,#2df8ff),var(--green));box-shadow:0 0 14px var(--accent,#2df8ff);transition:width .8s cubic-bezier(.2,.8,.2,1)}.abilities{color:#dbeaff;line-height:1.5}.boot{position:fixed;inset:0;z-index:20;background:radial-gradient(circle,#101827,#03040a 70%);display:grid;place-items:center;transition:.55s opacity,.55s transform}.boot.hide{opacity:0;transform:scale(1.05);pointer-events:none}.boot-card{text-align:center;width:min(420px,86vw);border:1px solid #ffffff18;border-radius:30px;background:#080b14e8;padding:32px;box-shadow:var(--shadow)}.lens-loader{width:120px;height:120px;border-radius:50%;margin:0 auto 22px;border:5px solid #f5fbff;background:radial-gradient(circle at 35% 28%,#fff,#7efcff 20%,#0f78ff 42%,#ef233c 68%);box-shadow:0 0 50px #2df8ff77;position:relative}.lens-loader i,.lens-loader b,.lens-loader span{position:absolute;inset:-12px;border-radius:50%;border:1px solid #2df8ff55;animation:spin 2.4s linear infinite}.lens-loader b{inset:-22px;border-color:#ef233c55;animation-duration:3.3s;animation-direction:reverse}.lens-loader span{inset:36px;background:#fff;border:5px solid #111;animation:none}.boot-kicker{font:800 12px 'JetBrains Mono';letter-spacing:.2em;color:var(--cyan)}.boot h1{text-transform:uppercase}.boot-bar{height:8px;border-radius:99px;background:#ffffff13;overflow:hidden}.boot-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--cyan));animation:load 1.5s ease-in-out forwards}@keyframes load{from{width:0}to{width:100%}}#bootLine{color:var(--muted)}
@media(max-width:1180px){.workbench{grid-template-columns:1fr}.left-rail{grid-template-columns:1fr 1fr}.detail-console{position:relative}.grid{max-height:none}.hero-device{grid-template-columns:1fr}.radar{display:none}}@media(max-width:720px){.topbar{align-items:flex-start;flex-direction:column}.command-deck{grid-template-columns:1fr}.left-rail{grid-template-columns:1fr}.hero-device{padding:22px}.hero-copy h2{font-size:48px}.grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));padding:10px}.card{min-height:220px}.card img{width:118px;height:118px}.detail-title{font-size:36px}.meta{grid-template-columns:1fr}.workbench{gap:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.top-actions{display:flex;align-items:center;gap:12px}.theme-toggle{height:48px;border-radius:999px;border:1px solid #ffffff22;background:#0c101bcc;color:var(--text);padding:0 16px;cursor:pointer;font:900 12px 'JetBrains Mono';text-transform:uppercase;letter-spacing:.12em;box-shadow:var(--shadow)}.theme-toggle:hover{border-color:var(--cyan);box-shadow:0 0 24px #2df8ff33}
body.light{--bg:#f4f7fb;--bg2:#e7edf5;--panel:#ffffffe6;--text:#101623;--muted:#587084;--glass:#0d213511;--shadow:0 24px 70px #5b6f8a26,0 0 40px #2b77ff14;background:radial-gradient(circle at 18% -10%,#cde8ff 0,#f6f8fb 34%,#dfe7f0 100%);color:var(--text)}body.light:before{background:conic-gradient(from 180deg at 50% 50%,#ef233c12,#2b77ff16,#0000,#ef233c12)}body.light .panel,body.light .rail-module,body.light .results-frame,body.light .detail-console,body.light .boot-card,body.light .command-deck,body.light .hero-device{background:linear-gradient(180deg,#ffffffea,#eef4fbea);border-color:#0f28451c}body.light .card{background:radial-gradient(circle at 50% 25%,var(--accent,#2b77ff)18,transparent 32%),linear-gradient(180deg,#ffffff,#edf3fb);border-color:#0f28451c}body.light input,body.light select{background:#fff;color:#101623;border-color:#0f284533}body.light .flavor,body.light .abilities{color:#27384c}body.light .hero-copy p:last-child{color:#43566b}body.light .boot{background:radial-gradient(circle,#f6fbff,#dce7f3 70%)}
@media(max-width:720px){.top-actions{width:100%;justify-content:space-between}.system-readout{flex:1;justify-content:center}.theme-toggle{width:92px}}
/* v5 performance polish */
.card{content-visibility:auto;contain-intrinsic-size:250px;will-change:transform}.grid:not(:hover) .card{animation:none}.grid:not(:hover) .sprite-wrap:before{animation:none}.detail-console{contain:layout paint}.holo-stage:after{will-change:transform}.radar-sweep,.brand-lens i,.lens-loader i,.lens-loader b{will-change:transform}@media(max-width:720px){#fx{display:none}.noise:after{display:none}.radar-sweep,.sprite-wrap:before,.holo-stage:after,.detail-art{animation:none!important}.card:hover{transform:none}.grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}.card{min-height:196px;border-radius:18px}.sprite-wrap{height:120px}.name{font-size:15px}.types{padding:8px}.detail-console{min-height:auto}.detail-inner{min-height:auto}.holo-stage{height:220px}.detail-art{max-height:205px}.hero-copy h2{font-size:42px}.hero-copy p:last-child{font-size:16px}}