:root{--ink:#f8fbff;--muted:rgba(248,251,255,0.74);--panel:rgba(5,18,28,0.78);--panel-strong:rgba(4,12,20,0.9);--line:rgba(255,255,255,0.16);--accent:#42f5b9;--accent-ink:#062019;--warm:#ffcf6a;--danger:#ffb1a8}*{box-sizing:border-box}body,html{min-height:100%;margin:0}body{background:#07121a;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}.app-shell{position:relative;min-height:100vh;overflow:hidden;padding:28px clamp(18px,4vw,56px)}.background-layer{position:fixed;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(1,9,16,.96),rgba(1,13,22,.64)),url(/assets/backgrounds/background.png) 50% /cover no-repeat}.background-layer:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 74% 30%,rgba(66,245,185,.22),transparent 30%),linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.42))}.brand-bar{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(18px,3vw,34px);min-height:72px}.brand-bar img{width:auto;height:auto;max-height:58px;object-fit:contain}.workspace{position:relative;display:grid;grid-template-columns:minmax(320px,530px) minmax(360px,1fr);align-items:center;grid-gap:clamp(20px,5vw,78px);gap:clamp(20px,5vw,78px);min-height:calc(100vh - 128px);padding:24px 0 32px}.workspace-result{grid-template-columns:minmax(520px,720px) minmax(300px,390px);justify-content:center;align-items:stretch;gap:clamp(18px,3vw,34px)}.result-panel,.search-panel,.steps-panel{position:relative;z-index:3;width:min(100%,530px);padding:clamp(18px,3vw,32px);border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:0 28px 90px rgba(0,0,0,.36);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}.result-panel{width:min(100%,720px);background:var(--panel-strong)}.steps-panel{width:min(100%,390px);align-self:start;background:rgba(3,15,24,.84)}.panel-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--accent);font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:0}h1{max-width:12ch;margin:0;color:#ffffff;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1;letter-spacing:0}.result-panel h1{max-width:15ch;font-size:clamp(2rem,4.5vw,4rem)}p{max-width:37rem;margin:12px 0 18px;color:var(--muted);font-size:.97rem;line-height:1.5}.field{display:grid;grid-gap:6px;gap:6px;margin-bottom:12px}.field span,.identity-grid span,.serial-box span{color:rgba(248,251,255,.68);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:0}.input-wrap{display:grid;grid-template-columns:24px 1fr;align-items:center;grid-gap:12px;gap:12px;min-height:58px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.08);padding:0 16px;color:var(--accent)}.input-wrap:focus-within{border-color:rgba(66,245,185,.72);box-shadow:0 0 0 4px rgba(66,245,185,.12)}.input-wrap input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#ffffff;font-size:1.06rem}.input-wrap input::placeholder{color:rgba(248,251,255,.48)}.feedback{margin:4px 0 16px;border:1px solid rgba(255,177,168,.38);border-radius:8px;background:rgba(255,177,168,.12);color:var(--danger);padding:12px 14px;line-height:1.35}.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;border:0;border-radius:8px;cursor:pointer;font-weight:800;transition:transform .16s ease,opacity .16s ease,background .16s ease}.primary-button{background:var(--accent);color:var(--accent-ink)}.primary-button:disabled{cursor:not-allowed;opacity:.46}.primary-button:not(:disabled):hover,.secondary-button:hover{transform:translateY(-1px)}.secondary-button{margin-top:22px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);color:#ffffff}.visual-panel{position:relative;z-index:1;min-height:520px}.drone{right:min(0px,2vw);top:50%;width:min(100%,610px);transform:translateY(-48%);filter:drop-shadow(0 34px 80px rgba(0,0,0,.48))}.drone,.orbit{position:absolute;height:auto}.orbit{opacity:.84;filter:drop-shadow(0 18px 44px rgba(66,245,185,.18))}.orbit-one{right:9%;top:5%;width:min(22vw,184px)}.orbit-two{left:7%;bottom:9%;width:min(18vw,152px)}.identity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:14px;gap:14px;margin-top:28px}.identity-grid div,.serial-box{border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.08);padding:16px}.identity-grid strong{display:block;margin-top:6px;color:#ffffff;font-size:1.08rem}.serial-box{margin-top:14px;border-color:rgba(66,245,185,.38);background:rgba(66,245,185,.1)}.serial-value{display:flex;align-items:center;gap:10px;margin-top:10px;color:var(--warm);font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:clamp(1.02rem,1.75vw,1.32rem);line-height:1.2;max-width:100%;overflow-x:auto;overflow-y:hidden;padding-bottom:2px;white-space:nowrap}.serial-value svg{flex:0 0 auto}.copy-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:50px;margin-top:16px;border:1px solid rgba(66,245,185,.36);border-radius:8px;background:rgba(66,245,185,.16);color:#ffffff;cursor:pointer;font-weight:800;transition:background .16s ease,transform .16s ease}.copy-button:hover{background:rgba(66,245,185,.24);transform:translateY(-1px)}.steps-panel h2{max-width:12ch;margin:0 0 22px;color:#ffffff;font-size:clamp(1.55rem,2.8vw,2.4rem);line-height:1;letter-spacing:0}.step-link{display:grid;grid-template-columns:1fr 22px;grid-gap:8px 12px;gap:8px 12px;align-items:center;min-height:112px;margin-top:14px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(255,255,255,.08);color:#ffffff;padding:18px;text-decoration:none;transition:border-color .16s ease,background .16s ease,transform .16s ease}.step-link:hover{border-color:rgba(66,245,185,.5);background:rgba(66,245,185,.12);transform:translateY(-1px)}.step-link span{color:var(--accent);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:0}.step-link strong{grid-column:1/-1;max-width:20ch;font-size:1.08rem;line-height:1.28}.step-link svg{justify-self:end;color:var(--accent)}@media (max-width:980px){.app-shell{min-height:auto}.brand-bar{flex-wrap:wrap}.workspace,.workspace-result{grid-template-columns:1fr;min-height:auto}.visual-panel{order:-1;min-height:280px}.drone{left:50%;right:auto;width:min(86vw,480px);transform:translate(-50%,-44%)}.result-panel,.search-panel,.steps-panel{width:100%}.result-panel h1,h1{max-width:14ch}}.hub-workspace{display:grid;grid-template-columns:repeat(2,minmax(300px,560px));grid-gap:clamp(18px,3vw,40px);gap:clamp(18px,3vw,40px);justify-content:center;align-items:stretch;min-height:calc(100vh - 128px);padding:28px 0 40px}.hub-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 28px 90px rgba(0,0,0,.36);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.hub-card:hover{transform:translateY(-4px)}.hub-card-game:hover{border-color:rgba(66,245,185,.55);box-shadow:0 36px 100px rgba(66,245,185,.12)}.hub-card-serial:hover{border-color:rgba(255,207,106,.55);box-shadow:0 36px 100px rgba(255,207,106,.1)}.hub-card-visual{position:relative;min-height:220px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(160deg,rgba(66,245,185,.08),transparent 60%)}.hub-card-visual-serial{background:linear-gradient(160deg,rgba(255,207,106,.08),transparent 60%)}.hub-drone-img{position:relative;z-index:1;width:min(100%,340px);height:auto;filter:drop-shadow(0 20px 60px rgba(66,245,185,.22))}.hub-card-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(66,245,185,.14),transparent 65%);pointer-events:none}.hub-serial-icon{position:relative;z-index:1;color:rgba(255,207,106,.65);filter:drop-shadow(0 0 32px rgba(255,207,106,.28))}.hub-orbit-ring{position:absolute;width:220px;height:220px;border-radius:50%;border:1px solid rgba(255,207,106,.18);box-shadow:0 0 0 40px rgba(255,207,106,.04),0 0 0 80px rgba(255,207,106,.02)}.hub-card-body{padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:12px;flex:1 1}.hub-badge{display:inline-flex;align-items:center;gap:7px;width:-moz-fit-content;width:fit-content;padding:5px 12px;border-radius:99px;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.hub-badge-game{background:rgba(66,245,185,.15);color:var(--accent);border:1px solid rgba(66,245,185,.3)}.hub-badge-serial{background:rgba(255,207,106,.15);color:var(--warm);border:1px solid rgba(255,207,106,.3)}.hub-title{margin:0;max-width:none;font-size:clamp(1.7rem,2.8vw,2.4rem);line-height:1.05;color:#ffffff}.hub-desc{margin:0;color:var(--muted);font-size:.97rem;line-height:1.55;flex:1 1}.hub-cta{display:inline-flex;align-items:center;min-height:52px;padding:0 22px;border-radius:8px;font-weight:800;font-size:1rem;transition:opacity .16s ease}.hub-card:hover .hub-cta{opacity:.88}.hub-cta-game{background:var(--accent);color:var(--accent-ink)}.hub-cta-serial{background:var(--warm);color:#1a1000}.brand-back{display:inline-flex;text-decoration:none}@media (max-width:780px){.hub-workspace{grid-template-columns:1fr;min-height:auto}.hub-card-visual{min-height:170px}}@media (max-width:560px){.app-shell{padding:18px 14px}.brand-bar img{max-height:42px}.workspace{padding-top:10px}.visual-panel{min-height:210px}.result-panel,.search-panel{padding:22px}h1{font-size:2.36rem}.identity-grid{grid-template-columns:1fr}.serial-value{font-size:.94rem}}