@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-0: #080A0F;--bg-1: #0D1018;--bg-2: #131820;--bg-3: #1B2030;--bg-4: #222840;--border: rgba(255,255,255,.07);--border-bright: rgba(255,255,255,.13);--border-focus: rgba(30,198,116,.5);--accent: #1EC674;--accent-dim: rgba(30,198,116,.12);--accent-glow:rgba(30,198,116,.28);--accent-text:#15A85E;--blue: #4B9EFF;--blue-dim: rgba(75,158,255,.12);--red: #FF4757;--red-dim: rgba(255,71,87,.12);--green: #2ECC71;--green-dim: rgba(46,204,113,.12);--orange: #FF8C42;--orange-dim: rgba(255,140,66,.12);--yellow: #FFD166;--yellow-dim: rgba(255,209,102,.12);--text-0: #F0F4FF;--text-1: #8A96B8;--text-2: #4E5870;--font-sans: "Plus Jakarta Sans", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace;--font-display: var(--font-sans);--font-body: var(--font-sans);--r-xs: 6px;--r-sm: 10px;--r-md: 14px;--r-lg: 18px;--r-xl: 24px;--r-full: 999px;--radius: var(--r-md);--radius-sm: var(--r-sm);--shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.25);--shadow-modal: 0 8px 40px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);--shadow-btn: 0 2px 8px rgba(0,0,0,.35);--nav-h: 64px;--topbar-h: 58px;--transition: .16s cubic-bezier(.4, 0, .2, 1)}[data-theme=light]{--bg-0: #F5F7FA;--bg-1: #FFFFFF;--bg-2: #EEF1F6;--bg-3: #E2E7EF;--bg-4: #D4DBE8;--border: rgba(0,0,0,.08);--border-bright: rgba(0,0,0,.14);--border-focus: rgba(30,198,116,.5);--accent: #12A85E;--accent-dim: rgba(18,168,94,.1);--accent-glow: rgba(18,168,94,.22);--accent-text: #0D8A4D;--blue: #2B7FE0;--blue-dim: rgba(43,127,224,.1);--red: #E53935;--red-dim: rgba(229,57,53,.1);--green: #2ECC71;--green-dim: rgba(46,204,113,.1);--orange: #E8721F;--orange-dim: rgba(232,114,31,.1);--yellow: #C9910D;--yellow-dim: rgba(201,145,13,.1);--text-0: #0F1523;--text-1: #4A5568;--text-2: #8A96AA;--shadow-card: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);--shadow-modal: 0 8px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1);--shadow-btn: 0 2px 8px rgba(0,0,0,.12)}[data-theme=light] .modal-overlay{background:#0f152380}[data-theme=light] .login-page{background:var(--bg-0)}[data-theme=light] ::-webkit-scrollbar-thumb{background:var(--bg-3)}[data-theme=light] .skeleton{background:linear-gradient(90deg,var(--bg-2) 25%,var(--bg-3) 50%,var(--bg-2) 75%);background-size:1200px 100%;animation:shimmer 1.8s ease-in-out infinite}[data-theme=light] .form-select option{background:var(--bg-1);color:var(--text-0)}html,body,#root{height:100%;background:var(--bg-0);color:var(--text-0);font-family:var(--font-sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:3px;height:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:99px}.app-shell{display:flex;flex-direction:column;min-height:100vh;max-width:480px;margin:0 auto;position:relative;background:var(--bg-0)}.topbar{height:var(--topbar-h);background:var(--bg-1);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:12px;position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.topbar-logo-mark{width:32px;height:32px;background:var(--accent);border-radius:9px;display:grid;place-items:center;color:#fff;flex-shrink:0;box-shadow:0 0 12px var(--accent-glow)}.topbar-title{font-size:16px;font-weight:800;color:var(--text-0);letter-spacing:-.03em}.topbar-sub{font-size:10px;color:var(--text-2);font-family:var(--font-mono);letter-spacing:.04em;margin-top:1px}.page-content{flex:1;padding:16px;padding-bottom:calc(var(--nav-h) + 20px);overflow-y:auto}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:480px;height:var(--nav-h);background:var(--bg-1);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-around;z-index:100;padding:0 4px;padding-bottom:env(safe-area-inset-bottom)}.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 14px;border-radius:var(--r-md);cursor:pointer;color:var(--text-2);font-size:10px;font-weight:600;letter-spacing:.02em;transition:all var(--transition);text-decoration:none;min-width:56px;position:relative}.nav-item svg{flex-shrink:0}.nav-item.active{color:var(--accent);background:var(--accent-dim)}.nav-item.active svg{filter:drop-shadow(0 0 4px var(--accent-glow))}.card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-card)}.card+.card{margin-top:12px}.card-flat{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);padding:14px}.status-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-full);font-size:12px;font-weight:700;letter-spacing:.01em}.status-pill.online{background:#1ec67424;color:var(--accent);border:1.5px solid rgba(30,198,116,.25)}.status-pill.offline{background:#ff47571f;color:var(--red);border:1.5px solid rgba(255,71,87,.2)}.status-pill.break{background:#ff8c421f;color:var(--orange);border:1.5px solid rgba(255,140,66,.2)}.status-pill.pending{background:#4b9eff1f;color:var(--blue);border:1.5px solid rgba(75,158,255,.2)}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-dot.green{background:var(--accent);box-shadow:0 0 0 2px #1ec6744d;animation:dotPulse 2.4s ease-in-out infinite}.status-dot.red{background:var(--red)}.status-dot.orange{background:var(--orange)}.status-dot.blue{background:var(--blue)}@keyframes dotPulse{0%,to{box-shadow:0 0 0 2px #1ec6744d}50%{box-shadow:0 0 0 5px #1ec6741a}}.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--r-full);font-size:11px;font-weight:700;white-space:nowrap;letter-spacing:.02em}.badge.green{background:#2ecc7124;color:var(--green)}.badge.red{background:#ff475721;color:var(--red)}.badge.blue{background:#4b9eff21;color:var(--blue)}.badge.orange{background:#ff8c4221;color:var(--orange)}.badge.accent{background:var(--accent-dim);color:var(--accent)}.badge.yellow{background:var(--yellow-dim);color:var(--yellow)}.badge.neutral{background:var(--bg-3);color:var(--text-1)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 20px;border-radius:var(--r-md);font-size:14px;font-weight:700;font-family:var(--font-sans);cursor:pointer;transition:all var(--transition);border:1.5px solid transparent;white-space:nowrap;letter-spacing:-.01em}.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 12px var(--accent-glow)}.btn-primary:hover:not(:disabled){background:#22d97c;box-shadow:0 4px 20px var(--accent-glow);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--bg-3);color:var(--text-0);border-color:var(--border-bright)}.btn-secondary:hover:not(:disabled){background:var(--bg-4);border-color:#fff3}.btn-danger{background:var(--red-dim);color:var(--red);border-color:#ff475740}.btn-danger:hover:not(:disabled){background:#ff475733}.btn-ghost{background:transparent;color:var(--text-1);border-color:transparent}.btn-ghost:hover:not(:disabled){background:var(--bg-2);color:var(--text-0)}.btn-outline{background:transparent;color:var(--accent);border-color:#1ec67459}.btn-outline:hover:not(:disabled){background:var(--accent-dim)}.btn-sm{padding:7px 14px;font-size:12px;border-radius:var(--r-sm);gap:5px}.btn-lg{padding:15px 28px;font-size:15px;width:100%;border-radius:var(--r-md)}.btn-xl{padding:17px 28px;font-size:16px;width:100%;border-radius:var(--r-lg)}.btn:disabled{opacity:.38;cursor:not-allowed;transform:none!important}.form-group{margin-bottom:16px}.form-label{display:block;font-size:11px;font-weight:600;color:var(--text-2);letter-spacing:.06em;text-transform:uppercase;margin-bottom:7px}.form-input,.form-select,.form-textarea{width:100%;background:var(--bg-2);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;color:var(--text-0);font-family:var(--font-sans);font-size:14px;font-weight:500;transition:border-color var(--transition),box-shadow var(--transition);outline:none}.form-input::placeholder{color:var(--text-2)}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);background:var(--bg-1)}.form-select option{background:var(--bg-2)}.form-textarea{resize:vertical;min-height:88px;line-height:1.6}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#05070cd9;display:grid;place-items:end center;z-index:1000;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadeIn .18s ease;padding:0}.modal{background:var(--bg-1);border:1px solid var(--border-bright);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:28px 20px;padding-bottom:max(28px,env(safe-area-inset-bottom));width:100%;max-width:480px;max-height:90vh;overflow-y:auto;animation:sheetUp .24s cubic-bezier(.32,0,.15,1);box-shadow:var(--shadow-modal)}.modal:before{content:"";display:block;width:40px;height:4px;background:var(--bg-4);border-radius:99px;margin:-8px auto 20px}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}.modal-title{font-size:19px;font-weight:800;color:var(--text-0);letter-spacing:-.03em}.modal-close{background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r-sm);width:32px;height:32px;display:grid;place-items:center;cursor:pointer;color:var(--text-1);transition:all var(--transition);flex-shrink:0}.modal-close:hover{background:var(--bg-4);color:var(--text-0)}.section-header{font-size:16px;font-weight:800;color:var(--text-0);letter-spacing:-.025em;margin-bottom:14px}.section-sub{font-size:12px;color:var(--text-2);margin-top:3px;font-weight:400}.code{font-family:var(--font-mono);font-size:11px;background:var(--bg-2);border:1px solid var(--border);border-radius:5px;padding:2px 7px;color:var(--accent);font-weight:600;letter-spacing:.04em}.detail-row{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}.detail-row:last-child{border-bottom:none}.detail-label{font-size:11px;font-weight:600;color:var(--text-2);letter-spacing:.05em;text-transform:uppercase;min-width:88px;padding-top:2px;flex-shrink:0}.detail-value{font-size:13.5px;color:var(--text-0);font-weight:500}.otp-display{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent-dim);border:1.5px solid rgba(30,198,116,.3);border-radius:var(--r-lg);padding:18px;margin:12px 0}.otp-digit{width:46px;height:54px;display:grid;place-items:center;background:var(--bg-1);border:1.5px solid var(--accent);border-radius:var(--r-sm);font-size:24px;font-weight:800;color:var(--accent)}.loader{width:28px;height:28px;border:2.5px solid var(--bg-3);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin:40px auto}.loader-sm{width:16px;height:16px;border-width:2px;margin:0}.loading-center{display:flex;justify-content:center;align-items:center;min-height:200px}.empty-state{text-align:center;padding:48px 20px;color:var(--text-2)}.empty-state-icon{width:56px;height:56px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--text-2)}.empty-state h3{font-size:15px;font-weight:700;color:var(--text-1);margin-bottom:6px;letter-spacing:-.02em}.empty-state p{font-size:13px;color:var(--text-2)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-0);padding:20px;position:relative;overflow:hidden}.login-page:before{content:"";position:absolute;top:-200px;left:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(30,198,116,.07) 0%,transparent 65%);pointer-events:none}.login-page:after{content:"";position:absolute;bottom:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(75,158,255,.05) 0%,transparent 65%);pointer-events:none}.login-card{background:var(--bg-1);border:1px solid var(--border-bright);border-radius:var(--r-xl);padding:32px 24px;width:100%;max-width:400px;position:relative;z-index:1;box-shadow:var(--shadow-modal)}.toggle{position:relative;width:50px;height:27px;flex-shrink:0;cursor:pointer}.toggle input{opacity:0;width:0;height:0}.toggle-track{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg-3);border-radius:99px;border:1.5px solid var(--border);transition:all .22s ease}.toggle input:checked+.toggle-track{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow)}.toggle-thumb{position:absolute;top:3px;left:3px;width:19px;height:19px;background:#fff;border-radius:50%;transition:transform .22s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 5px #00000059}.toggle input:checked~.toggle-thumb{transform:translate(23px)}.metric-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.metric-row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}@media (max-width: 360px){.metric-row-4{grid-template-columns:repeat(2,1fr)}}.metric-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 12px}.metric-label{font-size:10px;font-weight:600;color:var(--text-2);letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}.metric-value{font-size:22px;font-weight:800;color:var(--text-0);line-height:1;letter-spacing:-.03em}.metric-sub{font-size:11px;color:var(--text-2);margin-top:3px;font-weight:500}.step-list{display:flex;flex-direction:column;gap:0}.step-item{display:flex;gap:14px;position:relative}.step-item:not(:last-child):before{content:"";position:absolute;left:15px;top:32px;bottom:-12px;width:1.5px;background:var(--border)}.step-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;margin-top:6px;font-size:12px;font-weight:700}.step-dot.done{background:#2ecc7126;color:var(--green);border:1.5px solid rgba(46,204,113,.3)}.step-dot.active{background:var(--accent-dim);color:var(--accent);border:1.5px solid rgba(30,198,116,.35)}.step-dot.pending{background:var(--bg-3);color:var(--text-2);border:1.5px solid var(--border)}.step-content{flex:1;padding-bottom:20px}.step-title{font-size:14px;font-weight:600;color:var(--text-0);margin-bottom:3px}.step-desc{font-size:12px;color:var(--text-2)}.sticky-action-bar{position:fixed;bottom:var(--nav-h);left:50%;transform:translate(-50%);width:100%;max-width:480px;padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg-0) 55%,transparent);display:flex;gap:10px;z-index:90}.sticky-action-bar .btn{box-shadow:0 4px 20px #00000073}.otp-display-card{background:var(--accent-dim);border:1.5px solid rgba(30,198,116,.3);border-radius:var(--r-lg);padding:18px;margin-bottom:12px;text-align:center}.otp-display-label{font-size:10px;font-weight:700;color:#1ec674a6;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}.otp-display-code{font-family:var(--font-mono);font-size:46px;font-weight:700;color:var(--accent);letter-spacing:.22em;line-height:1;text-shadow:0 0 28px rgba(30,198,116,.4)}.h1{font-size:28px;font-weight:800;letter-spacing:-.04em;line-height:1.15;color:var(--text-0)}.h2{font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--text-0)}.h3{font-size:16px;font-weight:700;color:var(--text-0);letter-spacing:-.02em}.body-text{font-size:14px;line-height:1.6;color:var(--text-1)}.caption{font-size:11px;color:var(--text-2);font-weight:500;letter-spacing:.03em}@keyframes shimmer{0%{background-position:-600px 0}to{background-position:600px 0}}.skeleton{background:linear-gradient(90deg,var(--bg-2) 25%,var(--bg-3) 50%,var(--bg-2) 75%);background-size:1200px 100%;animation:shimmer 1.8s ease-in-out infinite;display:block;flex-shrink:0;border-radius:var(--r-md)}.divider{border:none;border-top:1px solid var(--border);margin:16px 0}.info-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}.info-row:last-child{border-bottom:none}.info-key{font-size:12px;font-weight:600;color:var(--text-2)}.info-val{font-size:13px;font-weight:600;color:var(--text-0);text-align:right}.page-enter{animation:pageSlide .2s cubic-bezier(.4,0,.2,1)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes sheetUp{0%{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}@keyframes pageSlide{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes stepPulse{0%,to{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 0 6px #1ec67414}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes spin-slow{to{transform:rotate(360deg)}}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.flex-1{flex:1}.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.text-muted{color:var(--text-2)}.text-accent{color:var(--accent)}.text-red{color:var(--red)}.text-center{text-align:center}.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}.font-mono{font-family:var(--font-mono)}.font-display{font-family:var(--font-sans)}.text-sm{font-size:12px}.text-xs{font-size:11px}.text-lg{font-size:16px}.w-full{width:100%}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}