:root{--primary: #25d366;--primary-dark: #128c7e;--bg: #0f172a;--card-bg: #1e293b;--text: #f8fafc;--text-muted: #94a3b8;--accent: #38bdf8;--glass: rgba(255, 255, 255, .05)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg);color:var(--text);display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;background:radial-gradient(circle at center,#1e293b,#0f172a)}#root{width:100%}.container{max-width:440px;margin:2rem auto;padding:3rem 2rem;background:var(--card-bg);border-radius:32px;box-shadow:0 25px 50px -12px #0009;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);text-align:center}.header{margin-bottom:2.5rem}h1{font-size:2.5rem;margin-bottom:.75rem;background:linear-gradient(to right,#25d366,#38bdf8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800;letter-spacing:-1px}p.description{color:var(--text-muted);font-size:1.1rem;font-weight:500}.qr-container.static{display:flex;flex-direction:column;align-items:center;gap:2rem;animation:scaleIn .6s cubic-bezier(.34,1.56,.64,1)}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.qr-frame{background:#fff;padding:1.25rem;border-radius:24px;display:flex;box-shadow:0 15px 35px #0000004d;position:relative;overflow:hidden}.qr-frame:after{content:"";position:absolute;inset:0;border-radius:24px;box-shadow:inset 0 0 0 1px #0000000d;pointer-events:none}.qr-frame img{display:block;width:240px;height:240px}.phone-badge{background:#ffffff0d;padding:.75rem 1.25rem;border-radius:100px;display:flex;align-items:center;gap:.75rem;color:var(--primary);font-weight:600;border:1px solid rgba(37,211,102,.2)}.loading-state{padding:3rem 0;display:flex;flex-direction:column;align-items:center;gap:1.5rem;color:var(--text-muted)}.loader.large{width:48px;height:48px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--primary)}.error-state{color:#ef4444;padding:2rem 0}.error-state button{margin-top:1rem;padding:.5rem 1.5rem;background:var(--primary);border:none;border-radius:8px;color:#fff;cursor:pointer}.loader{border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}