*{box-sizing:border-box;margin:0;padding:0}body{background:#0d0010;height:100vh;font-family:Segoe UI,system-ui,sans-serif;overflow:hidden}.grid-bg{pointer-events:none;z-index:0;background-image:linear-gradient(#ff008008 1px,#0000 1px),linear-gradient(90deg,#ff008008 1px,#0000 1px);background-size:40px 40px;position:fixed;inset:0}.glow-pink{pointer-events:none;z-index:0;background:radial-gradient(#ff008012 0%,#0000 70%);width:600px;height:600px;position:fixed;top:-10%;left:-10%}.glow-yellow{pointer-events:none;z-index:0;background:radial-gradient(#ffdc000f 0%,#0000 70%);width:600px;height:600px;position:fixed;bottom:-10%;right:-10%}.page{z-index:1;grid-template-rows:auto 1fr auto;grid-template-columns:1fr 1fr;gap:1rem;height:100vh;padding:1.5rem 2rem;display:grid;position:relative}.header{border-bottom:1px solid #ff008026;grid-column:1/-1;justify-content:space-between;align-items:center;padding-bottom:1rem;display:flex}.logo{color:#ff0080;letter-spacing:5px;text-shadow:0 0 20px #ff008080;font-size:24px;font-weight:800}.logo span{color:gold}.tagline{color:#5a2a4a;letter-spacing:2px;margin-top:4px;font-size:10px}.connection-badge{color:gold;letter-spacing:1px;border:1px solid #ffd7004d;border-radius:20px;padding:5px 14px;font-size:10px;font-weight:500}.drop-zone{cursor:pointer;background:#ff008005;border:1px solid #ff008066;border-radius:16px;flex-direction:column;grid-column:1/-1;justify-content:center;align-items:center;transition:background .2s;animation:3s ease-in-out infinite zonepulse;display:flex;position:relative}.drop-zone.active{background:#ff008012}@keyframes zonepulse{0%,to{border-color:#ff00804d;box-shadow:0 0 #ff008000,inset 0 0 #ff008000}50%{border-color:#ff0080cc;box-shadow:0 0 40px #ff008026,inset 0 0 40px #ff00800d}}.corner{opacity:.9;border-style:solid;width:16px;height:16px;position:absolute}.corner.tl{border-width:2px 0 0 2px;border-color:#ff0080;top:12px;left:12px}.corner.tr{border-width:2px 2px 0 0;border-color:gold;top:12px;right:12px}.corner.bl{border-width:0 0 2px 2px;border-color:gold;bottom:12px;left:12px}.corner.br{border-width:0 2px 2px 0;border-color:#ff0080;bottom:12px;right:12px}.drop-icon{margin-bottom:1.5rem;font-size:64px}.drop-title{color:#ff0080;letter-spacing:3px;margin-bottom:8px;font-size:22px;font-weight:700}.drop-sub{color:#5a2a4a;letter-spacing:.5px;font-size:13px;font-weight:400}.bottom-row{grid-column:1/-1;grid-template-columns:1fr 1fr;align-items:end;gap:1rem;display:grid}.info-card{background:#ff00800a;border:1px solid #ff008026;border-radius:10px;padding:1rem 1.25rem}.card-label{color:#5a2a4a;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;font-size:10px;font-weight:500}.card-value{color:gold;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600;overflow:hidden}.card-sub{color:#3a1a2a;margin-top:4px;font-size:11px}.link-box{background:#ffd70008;border:1px solid #ffd70026;border-radius:10px;align-items:center;gap:10px;padding:1rem 1.25rem;display:flex}.link-url{color:gold;opacity:.6;text-overflow:ellipsis;white-space:nowrap;flex:1;font-family:Courier New,monospace;font-size:12px;overflow:hidden}.copy-btn{color:#ff0080;cursor:pointer;letter-spacing:1px;background:#ff00801a;border:1px solid #ff00804d;border-radius:6px;flex-shrink:0;padding:6px 16px;font-family:inherit;font-size:10px;font-weight:600;transition:all .2s}.copy-btn:hover{background:#ff008033}.btn-generate{color:#ff0080;letter-spacing:3px;text-transform:uppercase;cursor:pointer;background:0 0;border:1px solid #ff0080;border-radius:10px;width:100%;padding:1rem;font-family:inherit;font-size:12px;font-weight:600;transition:all .2s;box-shadow:0 0 20px #ff00801a}.btn-generate:hover{background:#ff008014;box-shadow:0 0 30px #ff008040}.progress-wrap{background:#ff008008;border:1px solid #ff00801f;border-radius:10px;padding:1rem 1.25rem}.progress-row{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.progress-label{color:#5a2a4a;letter-spacing:1px;text-transform:uppercase;font-size:11px;font-weight:500}.progress-value{color:#ff0080;font-size:12px;font-weight:600}.bar-bg{background:#ff00801a;border-radius:2px;height:4px;overflow:hidden}.bar-fill{background:linear-gradient(90deg,#ff0080,gold);border-radius:2px;height:100%;transition:width .2s;box-shadow:0 0 10px #ff008080}.status-bar{background:#ff008005;border:1px solid #ff00801a;border-radius:10px;align-items:center;gap:10px;padding:.875rem 1rem;display:flex}.dot{background:#ff0080;border-radius:50%;flex-shrink:0;width:7px;height:7px;animation:1.5s infinite pulse;box-shadow:0 0 8px #ff0080cc}@keyframes pulse{0%,to{opacity:1}50%{opacity:.2}}.status-text{color:#5a2a4a;letter-spacing:1px;font-size:11px;font-weight:500}.error-bar{background:#ff32320d;border:1px solid #ff32324d;border-radius:10px;align-items:center;gap:10px;padding:.875rem 1rem;display:flex}.error-text{color:#ff5050;letter-spacing:1px;font-size:11px;font-weight:500}.landing-page{z-index:1;grid-template-rows:auto 1fr auto;width:100%;max-width:900px;height:100vh;margin:0 auto;padding:2rem 3rem;display:grid;position:relative}.landing-header{border-bottom:1px solid #ff008026;padding-bottom:1rem}.landing-center{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;display:flex}.landing-title{color:#fff;letter-spacing:1px;font-size:32px;font-weight:700}.landing-sub{color:#5a2a4a;letter-spacing:.5px;font-size:14px}.landing-buttons{gap:1.5rem;margin-top:1rem;display:flex}.btn-send,.btn-receive,.btn-back{cursor:pointer;background:0 0;border-radius:16px;flex-direction:column;align-items:center;gap:6px;min-width:180px;padding:2rem 3rem;font-family:inherit;transition:all .3s;display:flex}.btn-send{border:1px solid #ff008066;box-shadow:0 0 20px #ff008014}.btn-send:hover{background:#ff00800f;border-color:#ff0080cc;transform:translateY(-2px);box-shadow:0 0 40px #ff008033}.btn-receive{border:1px solid #ffd7004d;box-shadow:0 0 20px #ffd7000d}.btn-receive:hover{background:#ffd7000d;border-color:#ffd700b3;transform:translateY(-2px);box-shadow:0 0 40px #ffd70026}.btn-back{border:1px solid #ffffff1a}.btn-back:hover{background:#ffffff0a;border-color:#ffffff4d;transform:translateY(-2px)}.btn-icon{font-size:36px}.btn-label{color:#fff;letter-spacing:1px;font-size:16px;font-weight:700}.btn-hint{color:#5a2a4a;letter-spacing:.5px;font-size:11px}.room-input-wrap{justify-content:center;display:flex}.room-input{color:gold;letter-spacing:12px;text-align:center;text-transform:uppercase;background:#ff00800a;border:1px solid #ff008066;border-radius:12px;outline:none;width:280px;padding:1rem 2rem;font-family:Courier New,monospace;font-size:32px;font-weight:700;transition:all .2s}.room-input:focus{border-color:#ff0080cc;box-shadow:0 0 20px #ff008026}.room-input::placeholder{color:#ffd70033;letter-spacing:12px}.room-error{color:#ff5050;letter-spacing:1px;font-size:12px}.room-code-box{background:#ffd70008;border:1px solid #ffd70033;border-radius:10px;align-items:center;gap:1rem;padding:1rem 1.25rem;display:flex}.room-code-label{color:#5a2a4a;letter-spacing:1px;text-transform:uppercase;flex-shrink:0;font-size:10px;font-weight:500}.room-code-value{color:gold;letter-spacing:8px;text-shadow:0 0 10px #ffd70066;flex:1;font-family:Courier New,monospace;font-size:22px;font-weight:700}.landing-footer{text-align:center;color:#3a1a2a;letter-spacing:2px;border-top:1px solid #ff008014;padding-top:1rem;font-size:10px}.drop-zone .glow-fill{opacity:0;pointer-events:none;background:radial-gradient(circle,#ff00801f 0%,#0000 70%);transition:opacity .4s;position:absolute;inset:0}.drop-zone:hover .glow-fill{opacity:1}.drop-zone:hover{border-color:#ff0080cc;animation:none}.drop-icon{z-index:1;transition:transform .3s;position:relative}.drop-zone:hover .drop-icon{transform:scale(1.1)}.drop-title,.drop-sub{z-index:1;position:relative}.full{grid-column:1/-1}.wake-banner{color:gold;letter-spacing:.5px;text-align:center;background:#ffd7000f;border:1px solid #ffd70033;border-radius:8px;grid-column:1/-1;padding:.75rem 1rem;font-size:11px}.drop-icon{color:#ff0080;z-index:1;margin-bottom:1rem;font-size:48px;line-height:1;transition:transform .3s;position:relative}.btn-icon{color:#ff0080;font-size:28px}