:root{color-scheme:dark;--violet:#9868ff;--lilac:#bc9cff;--cyan:#15e0f4;--line:#8c62df66;--text:#f5f2ff;--muted:#aca4cd}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:#02030d;color:var(--text);font-family:'Inter',Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}
.app-shell{position:relative;isolation:isolate;min-height:100dvh;display:grid;place-items:center;overflow:hidden;padding:28px;background:radial-gradient(ellipse at 21% 18%,#32116b35,transparent 25%),radial-gradient(ellipse at 79% 67%,#3010632e,transparent 30%),linear-gradient(#08091e,#02030d)}.app-shell:before{content:'';position:absolute;inset:0;z-index:-3;background-image:radial-gradient(circle,#b499ff 0 1px,transparent 1.5px),radial-gradient(circle,#7257ff 0 1px,transparent 1.5px),linear-gradient(#7654ca10 1px,transparent 1px),linear-gradient(90deg,#7654ca10 1px,transparent 1px);background-position:12px 18px,94px 71px,0 0,0 0;background-size:137px 149px,211px 197px,24px 24px,24px 24px;opacity:.62}.cosmic-orbit{position:absolute;z-index:-2;border:1px solid #9e78f21f;border-radius:50%;pointer-events:none}.orbit-one{width:850px;height:850px;left:-330px;bottom:-390px}.orbit-two{width:720px;height:720px;right:-300px;top:-320px}
.phone-card{position:relative;width:min(100%,590px);min-height:min(850px,calc(100dvh - 56px));display:flex;flex-direction:column;overflow:hidden;border:1px solid #a67cff;border-radius:31px;background:linear-gradient(155deg,#11122fef,#060719f5);box-shadow:0 0 0 1px #2d1e58,0 0 32px #7c3aed24,0 35px 95px #000b;backdrop-filter:blur(9px)}.paired-card{width:min(100%,940px);min-height:min(1080px,calc(100dvh - 30px));border-radius:0;border-color:#7444da80;background:#050616b8}
.brand-header{min-height:82px;display:flex;align-items:center;padding:20px 38px;border-bottom:1px solid #8b5cf65c;background:#0a0b20c9}.brand-name{font-family:'Orbitron',sans-serif;font-size:29px;font-weight:500;letter-spacing:.02em;color:#fff;text-shadow:0 0 12px #ffffff38}.brand-name span{color:#a779ff;text-shadow:0 0 14px #8b5cf67a}.header-pulse{margin-left:auto;width:86px;height:58px;border:1px solid #7d50dc8f;border-radius:9px;background:radial-gradient(circle,#9d6eff 0 7px,#7c3aedaa 8px,transparent 18px);box-shadow:inset 0 0 16px #4c268760}
.setup-status{display:flex;align-items:center;gap:18px;padding:28px 38px;border-bottom:1px solid #8b5cf648}.setup-status p,.server-panel>p{margin:0 0 7px;color:#b69cff;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}.setup-status h1{margin:0;font-size:24px;font-weight:400}.status-orb{width:18px;height:18px;border-radius:50%;background:#a778ff;box-shadow:0 0 0 8px #7744c41f,0 0 17px #9868ff}
.setup{flex:1;padding:42px 40px}.intro{margin:0 0 38px;color:#eeeafe;font-size:18px;line-height:1.55}.secondary{position:relative;width:100%;padding:18px;border:1px solid #a778ff;border-radius:14px;background:linear-gradient(180deg,#292050,#15152f);color:#fff;font-weight:600;box-shadow:inset 0 1px #ffffff1c,0 0 17px #7c3aed42}.secondary:hover{filter:brightness(1.16);box-shadow:0 0 24px #8b5cf66b}.pair-code{padding:21px;border:1px solid #976cf0;border-radius:16px;background:#171536;text-align:center;box-shadow:0 0 20px #7c3aed2b}.pair-code span{display:block;color:var(--muted);font-size:12px}.pair-code strong{display:block;margin-top:8px;color:#c8b3ff;font-size:38px;letter-spacing:.18em}.divider{display:flex;align-items:center;gap:18px;margin:33px 0;color:#a291cf}.divider:before,.divider:after{content:'';flex:1;height:1px;background:#825fc3}.setup label{display:block;margin-bottom:12px;color:#e4dffc;font-size:14px}.join{display:grid;grid-template-columns:1fr auto;gap:16px}.join input{min-width:0;padding:16px 18px;border:1px solid #7659af;border-radius:13px;outline:none;background:#070919;color:#d7c8ff;font-size:17px;letter-spacing:.17em}.join input:focus{border-color:#b28aff;box-shadow:0 0 16px #8b5cf65c}.join button,.incoming button{border:1px solid #a778ff;border-radius:13px;background:linear-gradient(145deg,#6843c2,#342172);color:white;font-weight:600;padding:0 25px;box-shadow:0 0 16px #7c3aed55}
.control{flex:1;display:flex;flex-direction:column;align-items:center;padding:50px 38px}.server-panel{width:100%;padding:34px 42px;border:1px solid #7d57ca66;border-radius:17px;background:linear-gradient(145deg,#12132de3,#07091bd4);box-shadow:inset 0 0 28px #4c1d9520}.device-row{display:flex;align-items:center;justify-content:space-between;gap:40px}.devices{display:flex;align-items:center;gap:7px}.devices i{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.monitor{width:80px;height:53px;border:3px solid #c4c0d5;border-radius:5px;box-shadow:0 0 10px #8b5cf655}.mobile{width:25px;height:51px;margin-left:5px;border:3px solid #c4c0d5;border-radius:5px}.connected{display:flex;align-items:center;gap:14px;color:#f1eefc;font-size:20px}.connected span{width:13px;height:13px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
.alarm{width:min(62vw,650px);height:min(62vw,650px);max-width:650px;max-height:650px;min-width:270px;min-height:270px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:70px 0 55px;border:1px solid #b28aff;border-radius:50%;background:radial-gradient(circle at 43% 34%,#252251,#11102f 58%,#080819);color:#fff;box-shadow:inset 0 0 45px #4338ca3d,0 0 0 13px #171633,0 0 0 16px #9a6cff,0 0 32px 14px #8b5cf690;transition:.17s}.alarm:hover{transform:scale(1.012);box-shadow:inset 0 0 50px #4f46e553,0 0 0 13px #171633,0 0 0 16px #c09cff,0 0 43px 18px #8b5cf6a0}.alarm:active{transform:scale(.985)}.alarm strong{font-size:clamp(29px,5vw,52px);font-weight:600}.alarm small{margin-top:18px;color:#ded8ee;font-size:clamp(14px,2vw,22px);letter-spacing:.16em;text-transform:uppercase}
.incoming{width:min(100%,730px);display:flex;align-items:center;justify-content:space-between;padding:20px;border:1px solid #8b5cf675;border-radius:16px;background:#171335bf}.incoming button{padding:12px 18px}.receipt{width:min(100%,730px);display:flex;justify-content:center;align-items:center;gap:16px;padding:30px;border:1px solid #7c50bd70;border-radius:16px;color:#c6bedf;font-size:18px}.receipt span{display:grid;place-items:center;width:52px;height:52px;border:2px solid #9c68fb;border-radius:50%;color:#a978ff;box-shadow:0 0 18px #8b5cf65c}.receipt.confirmed{color:#f0ecfa}.unpair-button{margin-top:28px;padding:10px 16px;border:0;background:transparent;color:#9f97bd;font-size:13px;text-decoration:underline;text-underline-offset:4px}.unpair-button:hover{color:#ddd6fe}.pwa-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:14px 20px;border-top:1px solid #8b5cf62c}.pwa-actions button{padding:10px 15px;border:1px solid #946aeb;border-radius:11px;background:#201747;color:#eee9ff;font-weight:600}.pwa-actions button:hover{filter:brightness(1.16)}footer{padding:18px 24px 22px;border-top:1px solid #8b5cf644;color:#a99ecb;font-size:13px;text-align:center}footer.success{color:#b9f6dc}footer.error{color:#fca5b8;background:#4c10252b}
@media(max-width:700px){.app-shell{padding:0}.phone-card,.paired-card{width:100%;min-height:100dvh;border-width:0;border-radius:0}.brand-header{padding:17px 24px}.brand-name{font-size:23px}.header-pulse{width:58px;height:42px}.setup-status,.setup{padding-left:24px;padding-right:24px}.control{padding:26px 20px}.server-panel{padding:23px 20px}.device-row{gap:20px}.connected{font-size:14px}.monitor{width:55px;height:38px}.mobile{width:20px;height:38px}.alarm{width:min(75vw,380px);height:min(75vw,380px);margin:50px 0 38px}.receipt{font-size:14px;padding:21px}.orbit-one,.orbit-two{display:none}}
@media(max-width:430px){.join{grid-template-columns:1fr}.join button{min-height:50px}.intro{font-size:16px}.brand-name{font-size:20px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}