:root{--bg:#050505;--panel:#1414147a;--panel-strong:#0f0f0fb8;--line:#ffffff1a;--text:#f5f1ea;--muted:#8a857d;--text-secondary:#ffffffb8;--accent:#f04c23;--accent-rgb:240, 76, 35;--accent-soft:#f04c232e;--accent-glow:#f04c236b;--button:#e7e2db;--button-text:#161616;--status-connected:#25d366;--status-connected-rgb:37, 211, 102;--status-disconnected:#ef4444;--status-disconnected-rgb:239, 68, 68;--status-connecting:#f59e0b;--status-connecting-rgb:245, 158, 11;--radius-xl:28px;--radius-lg:20px;--radius-md:14px;--radius-sm:10px;--radius-full:9999px;--shadow:0 30px 120px #00000080;--ease:.18s cubic-bezier(.22, 1, .36, 1);--ease-soft:.26s cubic-bezier(.2, .8, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}html,body{min-height:100%;color:var(--text);background:radial-gradient(circle at 50% -10%,#f04c232e,#0000 24%),radial-gradient(circle at 18% 24%,#ffffff09,#0000 18%),linear-gradient(#090909 0%,#040404 100%);font-family:Manrope,Inter,sans-serif}body{min-height:100vh;overflow-x:hidden}button,input,textarea,select{font:inherit;color:inherit}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:999px}.app-container{flex-direction:column;min-height:100vh;display:flex;position:relative}.app-container:before,.app-container:after{content:"";pointer-events:none;filter:blur(28px);opacity:.88;z-index:0;position:fixed}.app-container:before{background:radial-gradient(circle,#f04c232e,#0000 44%),radial-gradient(circle,#ffffff12,#0000 68%);width:340px;height:340px;top:8%;left:-100px}.app-container:after{background:radial-gradient(circle,#ffffff14,#0000 46%),radial-gradient(circle,#f04c231a,#0000 66%);width:360px;height:360px;bottom:14%;right:-90px}.header{z-index:100;justify-content:space-between;align-items:center;width:100%;max-width:640px;margin:0 auto;padding:20px 28px;display:flex;position:sticky;top:0}.header-left{align-items:center;gap:16px;display:flex}.header-logo{-webkit-backdrop-filter:blur(18px)saturate(130%);backdrop-filter:blur(18px)saturate(130%);width:48px;height:48px;color:var(--accent);background:linear-gradient(#ffffff14,#ffffff03),#0909097a;border:1px solid #ffffff1f;border-radius:16px;place-items:center;display:grid;box-shadow:inset 0 1px #ffffff14,0 10px 28px #00000047}.header-logo svg{width:24px;height:24px}.header-text{gap:4px;display:grid}.header-title{letter-spacing:.03em;text-transform:uppercase;color:#ffffffeb;margin:0;font-size:.8rem;font-weight:800}.header-subtitle{color:#ffffff75;font-size:.78rem}.header-gradient{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff08;border:1px solid #ffffff14;border-radius:999px;width:calc(100% - 56px);max-width:640px;height:8px;margin:0 auto;padding:1px;overflow:hidden;box-shadow:inset 0 1px #ffffff0a}.header-gradient:after{content:"";border-radius:inherit;background:linear-gradient(90deg, #ff6b3d 0%, var(--accent) 100%);width:100%;height:100%;box-shadow:0 0 18px var(--accent-glow);animation:4s ease-in-out infinite gradient-pulse;display:block}@keyframes gradient-pulse{0%,to{opacity:.7}50%{opacity:1}}.main-content{z-index:1;flex:1;justify-content:center;align-items:center;width:100%;max-width:640px;margin:0 auto;padding:28px;display:flex;position:relative}.status-card{border-radius:var(--radius-xl);background:linear-gradient(180deg, #ffffff1f, #ffffff05 18%, transparent 40%), linear-gradient(135deg, #ffffff0a, transparent 36%), var(--panel);-webkit-backdrop-filter:blur(28px)saturate(130%);backdrop-filter:blur(28px)saturate(130%);width:100%;box-shadow:var(--shadow);animation:stage-in .28s var(--ease-soft);text-align:center;border:1px solid #ffffff24;flex-direction:column;align-items:center;gap:32px;padding:48px 32px;display:flex}.status-indicator{border-radius:var(--radius-full);width:100px;height:100px;transition:all var(--ease-soft);place-items:center;display:grid;position:relative}.status-indicator-connected{border:2px solid rgba(var(--status-connected-rgb), .3);background:radial-gradient(circle, rgba(var(--status-connected-rgb), .15), transparent 70%), rgba(var(--status-connected-rgb), .05);box-shadow:0 0 40px rgba(var(--status-connected-rgb), .15), 0 0 0 1px rgba(var(--status-connected-rgb), .1)}.status-indicator-disconnected{border:2px solid rgba(var(--status-disconnected-rgb), .3);background:radial-gradient(circle, rgba(var(--status-disconnected-rgb), .15), transparent 70%), rgba(var(--status-disconnected-rgb), .05);box-shadow:0 0 40px rgba(var(--status-disconnected-rgb), .15), 0 0 0 1px rgba(var(--status-disconnected-rgb), .1)}.status-indicator-connecting{border:2px solid rgba(var(--status-connecting-rgb), .3);background:radial-gradient(circle, rgba(var(--status-connecting-rgb), .15), transparent 70%), rgba(var(--status-connecting-rgb), .05);box-shadow:0 0 40px rgba(var(--status-connecting-rgb), .15), 0 0 0 1px rgba(var(--status-connecting-rgb), .1)}.status-indicator-connected .status-icon{color:var(--status-connected)}.status-indicator-disconnected .status-icon{color:var(--status-disconnected)}.status-indicator-connecting .status-icon{color:var(--status-connecting)}.status-icon svg{width:40px;height:40px}.status-pulse-ring{border-radius:var(--radius-full);opacity:0;pointer-events:none;border:2px solid;position:absolute;inset:-4px}.status-indicator-connected .status-pulse-ring{color:var(--status-connected);animation:2.5s ease-out infinite pulse-ring}.status-indicator-disconnected .status-pulse-ring{color:var(--status-disconnected);animation:3s ease-out infinite pulse-ring}.status-indicator-connecting .status-pulse-ring{color:var(--status-connecting);animation:1.5s ease-out infinite pulse-ring}@keyframes pulse-ring{0%{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}.status-info{gap:8px;display:grid}.status-label{letter-spacing:-.02em;margin:0;font-size:1.6rem;font-weight:800}.status-detail{color:var(--muted);margin:0;font-size:.9rem}.status-actions{width:100%;max-width:320px}.btn-icon{border-radius:var(--radius-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#ffffffb8;cursor:pointer;width:42px;height:42px;transition:transform var(--ease), border-color var(--ease), color var(--ease);background:linear-gradient(#ffffff0f,#ffffff04),#0a0a0a47;border:1px solid #ffffff1a;justify-content:center;align-items:center;display:flex}.btn-icon:hover{color:var(--text);border-color:#fff3;transform:translateY(-1px)}.btn-icon:active{transform:translateY(0)scale(.96)}.btn-icon svg{width:18px;height:18px}.btn-icon.spinning svg{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn{cursor:pointer;color:var(--text);transition:opacity var(--ease), transform var(--ease), background var(--ease), border-color var(--ease), box-shadow var(--ease);background:linear-gradient(#ffffff0f,#ffffff04),#08080852;border:1px solid #ffffff1a;border-radius:16px;justify-content:center;align-items:center;gap:10px;width:100%;padding:14px 22px;font-size:.88rem;font-weight:700;display:inline-flex;position:relative;overflow:hidden}.btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px #00000029}.btn:active{transform:translateY(0)scale(.992)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn svg{width:18px;height:18px}.btn-primary{background:linear-gradient(180deg, #ffffffe6, #e7e2dbd6), var(--button);color:var(--button-text);border-color:#0000;font-weight:800;box-shadow:0 18px 35px #e7e2db1f}.btn-primary:hover{box-shadow:0 22px 40px #e7e2db29}.btn-secondary{background:linear-gradient(#ffffff0f,#ffffff04),#08080852;border:1px solid #ffffff1a}.btn-lg{border-radius:20px;padding:18px 28px;font-size:1rem}.btn-sm{border-radius:var(--radius-md);gap:8px;padding:10px 16px;font-size:.82rem}.btn-sm svg{width:16px;height:16px}.modal-overlay{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:200;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--ease-soft), visibility var(--ease-soft);background:#04040499;place-items:center;padding:28px;display:grid;position:fixed;inset:0}.modal-overlay.active{opacity:1;visibility:visible;pointer-events:auto}.modal{border-radius:var(--radius-xl);background:linear-gradient(180deg, #ffffff1f, #ffffff05 18%, transparent 40%), linear-gradient(135deg, #ffffff0a, transparent 36%), var(--panel-strong);-webkit-backdrop-filter:blur(28px)saturate(130%);backdrop-filter:blur(28px)saturate(130%);width:min(100%,520px);max-height:calc(100vh - 56px);box-shadow:var(--shadow), 0 0 80px rgba(var(--accent-rgb), .05);opacity:0;transition:opacity var(--ease-soft), transform var(--ease-soft);border:1px solid #ffffff24;padding:28px;position:relative;overflow:hidden auto;transform:translateY(18px)scale(.985)}.modal-overlay.active .modal{opacity:1;transform:translateY(0)scale(1)}.modal-overlay.closing{opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}.modal-overlay.closing .modal{opacity:0;transform:translateY(18px)scale(.985)}.modal-header{align-items:center;gap:14px;margin-bottom:24px;display:flex}.modal-header-icon{border-radius:var(--radius-md);width:42px;height:42px;color:var(--accent);background:linear-gradient(#ffffff14,#ffffff05),#ffffff05;border:1px solid #ffffff1f;flex-shrink:0;place-items:center;display:grid;box-shadow:inset 0 1px #ffffff0f}.modal-header-icon svg{width:20px;height:20px}.modal-title{flex:1;font-size:1.15rem;font-weight:700}.modal-close{border-radius:var(--radius-sm);width:36px;height:36px;color:var(--muted);cursor:pointer;transition:border-color var(--ease), color var(--ease);background:linear-gradient(#ffffff0f,#ffffff04),#08080847;border:1px solid #ffffff14;justify-content:center;align-items:center;display:flex}.modal-close:hover{color:var(--text);border-color:#fff3}.modal-close svg{width:16px;height:16px}.modal-body{flex-direction:column;gap:20px;display:flex}.qr-modal-body{text-align:center}.qr-instructions{text-align:left;flex-direction:column;gap:10px;display:flex}.qr-step{color:var(--text-secondary);align-items:center;gap:12px;font-size:.88rem;display:flex}.qr-step-num{border-radius:var(--radius-full);border:1px solid rgba(var(--accent-rgb), .24);background:radial-gradient(circle at 50% 100%, rgba(var(--accent-rgb), .16), transparent 46%), linear-gradient(180deg, rgba(var(--accent-rgb), .08), #ffffff05);width:30px;height:30px;color:var(--text);flex-shrink:0;justify-content:center;align-items:center;font-size:.78rem;font-weight:700;display:flex}.qr-loading{color:var(--muted);flex-direction:column;align-items:center;gap:16px;padding:40px 0;font-size:.9rem;display:flex}.qr-container{flex-direction:column;align-items:center;gap:20px;padding:24px 0;display:flex}.qr-image{border-radius:var(--radius-md);width:240px;height:240px;box-shadow:0 0 30px rgba(var(--accent-rgb), .1), 0 20px 60px #0000004d;background:#fff;padding:18px;display:block}.qr-error{color:var(--text-secondary);flex-direction:column;align-items:center;gap:14px;padding:32px 0;display:flex}.qr-error-icon{color:var(--status-disconnected)}.qr-error-icon svg{width:40px;height:40px}.qr-success{flex-direction:column;align-items:center;gap:14px;padding:32px 0;display:flex}.qr-success-icon{border-radius:var(--radius-full);border:1px solid rgba(var(--status-connected-rgb), .24);background:radial-gradient(circle at 50% 100%, rgba(var(--status-connected-rgb), .2), transparent 46%), linear-gradient(180deg, rgba(var(--status-connected-rgb), .12), #ffffff05);width:68px;height:68px;color:var(--status-connected);box-shadow:0 0 0 1px rgba(var(--status-connected-rgb), .08), 0 0 32px rgba(var(--status-connected-rgb), .12);justify-content:center;align-items:center;animation:.5s cubic-bezier(.34,1.56,.64,1) success-pop;display:flex}.qr-success-icon svg{width:30px;height:30px}@keyframes success-pop{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.qr-success h3{color:var(--status-connected);font-size:1.2rem;font-weight:700}.qr-success p{color:var(--muted);font-size:.9rem}.qr-status{color:var(--muted);justify-content:center;align-items:center;gap:8px;padding:8px 0;font-size:.85rem;display:flex}.status-dot{border-radius:50%;flex-shrink:0;width:7px;height:7px}.status-dot.connected{background:var(--status-connected);box-shadow:0 0 12px rgba(var(--status-connected-rgb), .55)}.status-dot.disconnected{background:var(--status-disconnected);box-shadow:0 0 12px rgba(var(--status-disconnected-rgb), .45)}.status-dot.connecting{background:var(--status-connecting);box-shadow:0 0 12px rgba(var(--status-connecting-rgb), .45);animation:1.5s ease-in-out infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.toast-container{z-index:900;pointer-events:none;flex-direction:column;gap:10px;width:calc(100% - 40px);max-width:400px;display:flex;position:fixed;top:20px;right:20px}.toast{border-radius:var(--radius-lg);background:linear-gradient(180deg, #ffffff1f, #ffffff05 18%, transparent 40%), var(--panel-strong);-webkit-backdrop-filter:blur(28px)saturate(130%);backdrop-filter:blur(28px)saturate(130%);box-shadow:var(--shadow);pointer-events:auto;opacity:0;border:1px solid #ffffff24;align-items:flex-start;gap:14px;padding:16px 18px;display:flex;position:relative;overflow:hidden;transform:translate(120%)}.toast-enter{animation:.4s cubic-bezier(.22,1,.36,1) forwards toast-slide-in}.toast-exit{animation:.3s ease-in forwards toast-slide-out}@keyframes toast-slide-in{0%{opacity:0;transform:translate(120%)}to{opacity:1;transform:translate(0)}}@keyframes toast-slide-out{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(120%)}}.toast-icon{border-radius:var(--radius-sm);background:linear-gradient(#ffffff0f,#ffffff04),#08080847;border:1px solid #ffffff14;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.toast-icon svg{width:18px;height:18px}.toast-success .toast-icon{color:var(--status-connected);border-color:rgba(var(--status-connected-rgb), .2)}.toast-error .toast-icon{color:var(--status-disconnected);border-color:rgba(var(--status-disconnected-rgb), .2)}.toast-warning .toast-icon{color:var(--status-connecting);border-color:rgba(var(--status-connecting-rgb), .2)}.toast-info .toast-icon{color:#60a5fa;border-color:#60a5fa33}.toast-content{flex:1;min-width:0}.toast-title{color:var(--text);margin-bottom:3px;font-size:.85rem;font-weight:700}.toast-message{color:var(--muted);font-size:.82rem;line-height:1.5}.toast-close{cursor:pointer;color:var(--muted);transition:color var(--ease);background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;padding:4px;display:flex}.toast-close:hover{color:var(--text)}.toast-close svg{width:14px;height:14px}.toast-progress{border-radius:0 0 var(--radius-sm) var(--radius-sm);height:3px;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.toast-progress-bar{transform-origin:0;width:100%;height:100%;animation:linear forwards toast-progress-shrink}.toast-success .toast-progress-bar{background:var(--status-connected)}.toast-error .toast-progress-bar{background:var(--status-disconnected)}.toast-warning .toast-progress-bar{background:var(--status-connecting)}.toast-info .toast-progress-bar{background:#60a5fa}@keyframes toast-progress-shrink{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.loading-spinner{border:3px solid #ffffff1a;border-top-color:var(--accent);border-radius:50%;width:32px;height:32px;animation:.7s linear infinite spin}.loading-spinner-sm{border:2px solid #ffffff1a;border-top-color:var(--accent);border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin}@keyframes stage-in{0%{opacity:.82;transform:translateY(8px)scale(.996)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=720px){.header{padding:18px 16px}.main-content{padding:20px 16px 40px}.header-gradient{width:calc(100% - 32px)}.header-subtitle{display:none}.status-card{border-radius:24px;padding:36px 20px}.status-indicator{width:80px;height:80px}.status-icon svg{width:32px;height:32px}.status-label{font-size:1.3rem}.modal-overlay{padding:16px}.modal{border-radius:24px;padding:22px 18px}.qr-image{width:200px;height:200px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}