:root{font-family:Manrope,Pretendard,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#ecf4f7;background:#090d12;font-synthesis:none;--bg: #090d12;--surface: #101720;--surface-2: #151e28;--border: #24313d;--muted: #81909d;--green: #67e8b4;--green-dim: #193b32;--amber: #f6c56f;--red: #ff776f}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-width:320px;background:radial-gradient(circle at 85% -10%,#173027 0,transparent 34rem),var(--bg)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}code,.eyebrow,.state-ip,.metrics-grid span,.metrics-grid small,time{font-family:DM Mono,ui-monospace,monospace}.center-screen{min-height:100vh;display:grid;place-items:center;color:var(--muted);letter-spacing:.04em}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(100%,460px);padding:42px;border:1px solid var(--border);border-radius:24px;background:#0e151de8;box-shadow:0 34px 100px #0009;backdrop-filter:blur(20px)}.login-brand,.brand{display:flex;align-items:center;gap:11px;font-size:13px;font-weight:700;letter-spacing:.18em}.brand-mark{width:32px;height:32px;display:grid;place-items:center;border:1px solid #47685a;border-radius:9px;color:var(--green);background:#10221d;font-family:DM Mono,monospace;letter-spacing:0}.login-card form{margin-top:30px}label{display:grid;gap:8px;margin:15px 0;color:#9ba8b4;font-size:12px;font-weight:600}input{min-width:0;padding:13px 14px;border:1px solid var(--border);border-radius:10px;outline:none;color:#edf5f7;background:#0a1016}input:focus{border-color:#4b8b73;box-shadow:0 0 0 3px #67e8b415}.wide{width:100%;margin-top:10px}.primary,.secondary,.danger,.ghost,.text-button{border-radius:9px;padding:10px 14px;font-size:12px;font-weight:700}.primary{border:1px solid #6ee9b8;color:#07100d;background:var(--green)}.primary:hover:not(:disabled){background:#8ef2ca}.secondary{border:1px solid #365045;color:#b9ead5;background:#14251f}.danger{border:1px solid #5e3434;color:#ffaea9;background:#2b191b}.ghost{border:1px solid var(--border);color:#9eabb6;background:transparent}.ghost.destructive{color:#ce8581}.text-button{padding:7px 9px;border:0;color:var(--muted);background:transparent}.compact{padding:7px 9px;font-size:11px}.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,72px);border-bottom:1px solid #1d2832;background:#090d12cc;backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}.topbar-meta{display:flex;align-items:center;gap:10px;color:#b2bec8;font-size:12px}.master-badge{padding:4px 7px;border:1px solid #385348;border-radius:5px;color:var(--green);font-family:DM Mono,monospace;font-size:9px}.page{width:min(1440px,100%);margin:0 auto;padding:60px clamp(18px,5vw,72px) 100px}.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,430px);align-items:end;gap:clamp(36px,7vw,100px);padding:20px 0 56px}.eyebrow{margin:0;color:var(--green);font-size:10px;font-weight:500;letter-spacing:.18em}.location-picker{min-width:0;align-self:end}.location-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0 12px}.location-option{display:grid;gap:5px;padding:16px;border:1px solid var(--border);border-radius:14px;background:#0e151d;text-align:left}.location-option:hover:not(:disabled):not(.selected){border-color:#3d5a4d}.location-option.selected{border-color:var(--green);background:#10211c}.location-option strong{color:#dce6e9;font-size:17px;letter-spacing:-.02em}.location-option span{color:#71808c;font-family:DM Mono,monospace;font-size:9px;letter-spacing:.06em}.location-option b{color:var(--green);font-family:DM Mono,monospace;font-size:12px;font-weight:500}.location-note{margin:0;color:#667580;font-family:DM Mono,monospace;font-size:9px;line-height:1.6}.location-breakdown{padding:18px 24px;border-top:1px solid var(--border)}.location-breakdown table{width:100%;margin-top:11px;border-collapse:collapse;font-family:DM Mono,monospace;font-size:11px}.location-breakdown th{color:#657480;font-size:9px;font-weight:500;letter-spacing:.12em;text-align:left}.location-breakdown th,.location-breakdown td{padding:6px 10px 6px 0}.location-breakdown tbody tr{border-top:1px solid var(--border)}.location-breakdown td{color:#9eabb6}.location-breakdown td:last-child{color:var(--green)}.state-card{min-height:260px;display:flex;flex-direction:column;padding:27px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(145deg,#121b24,#0c1218);box-shadow:0 24px 70px #0005}.state-card-ready{border-color:#386c58;box-shadow:0 24px 80px #173f3036}.state-heading{display:flex;align-items:center;gap:10px;color:#b3c0ca;font-family:DM Mono,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.15em}.status-orb{width:10px;height:10px;border-radius:50%;background:#66727d;box-shadow:0 0 0 5px #66727d15}.status-ready{background:var(--green);box-shadow:0 0 0 5px #67e8b419,0 0 18px #67e8b488}.status-starting,.status-stopping{background:var(--amber);animation:pulse 1.2s infinite}.status-error{background:var(--red)}@keyframes pulse{50%{opacity:.35}}.state-ip{margin-top:30px;font-size:25px;letter-spacing:-.03em}.state-detail{flex:1;margin-top:8px;color:var(--muted);font-size:12px;line-height:1.5}.state-actions{display:flex;gap:9px;margin-top:22px}.state-actions button{flex:1}.notice,.error-box{padding:13px 15px;border:1px solid #594827;border-radius:10px;color:#e2c78e;background:#2b2416;font-size:12px}.error-box,.danger-notice{border-color:#5b3032;color:#ffaaa5;background:#2a181a}.page-error{margin-bottom:16px}.metrics-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.metrics-grid article{min-width:0;display:flex;flex-direction:column;gap:7px;padding:24px;border-right:1px solid var(--border)}.metrics-grid article:first-child{padding-left:0}.metrics-grid article:last-child{border-right:0}.metrics-grid span{color:#657480;font-size:9px;letter-spacing:.15em}.metrics-grid strong{overflow:hidden;color:#dce6e9;font-size:16px;text-overflow:ellipsis;white-space:nowrap}.metrics-grid small{color:#667580;font-size:9px}.usage-panel{margin-top:42px}.price-note{display:flex;align-items:flex-end;flex-direction:column;gap:5px;text-align:right}.price-note strong{color:var(--green);font-family:DM Mono,monospace;font-size:15px}.price-note span,.estimate-note{color:#667580;font-family:DM Mono,monospace;font-size:9px}.usage-grid{display:grid;grid-template-columns:repeat(3,1fr)}.usage-grid article{display:grid;gap:8px;padding:25px;border-right:1px solid var(--border)}.usage-grid article:last-child{border-right:0}.usage-grid span,.usage-grid small{color:#71808c;font-family:DM Mono,monospace;font-size:9px;text-transform:uppercase;letter-spacing:.1em}.usage-grid strong{font-size:30px;letter-spacing:-.04em}.usage-grid b{color:var(--green);font-family:DM Mono,monospace;font-size:13px;font-weight:500}.estimate-note{margin:0;padding:13px 24px;border-top:1px solid var(--border);line-height:1.5}.section-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,.7fr);gap:18px;margin-top:42px}.panel{min-width:0;border:1px solid var(--border);border-radius:17px;background:#0e151c;overflow:hidden}.panel-heading{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;border-bottom:1px solid var(--border)}.panel-heading h2{margin:5px 0 0;font-size:20px;letter-spacing:-.03em}.add-device{display:flex;gap:8px}.add-device input{width:190px;padding:9px 11px}.device-row{display:grid;grid-template-columns:18px minmax(130px,1fr) auto auto;align-items:center;gap:15px;padding:18px 22px;border-bottom:1px solid #1f2932}.device-row:last-child{border-bottom:0}.device-row.disabled{opacity:.5}.device-status span{display:block;width:8px;height:8px;border-radius:50%}.device-status .online{background:var(--green);box-shadow:0 0 12px #67e8b499}.device-status .offline{background:#46515a}.device-main{min-width:0;display:flex;flex-direction:column;gap:4px}.device-main strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.device-main span,.traffic{color:#71808c;font-family:DM Mono,monospace;font-size:9px}.traffic{display:flex;gap:10px}.device-actions{display:flex;gap:5px}.empty-state{display:flex;flex-direction:column;align-items:center;gap:8px;padding:58px 24px;color:#667480;text-align:center;font-size:12px}.empty-state strong{color:#aeb9c1;font-size:14px}.empty-state.small{padding:25px}.timeline{max-height:510px;overflow-y:auto;padding:10px 22px 22px}.event{position:relative;display:grid;grid-template-columns:12px 1fr;gap:11px;padding:13px 0}.event:after{content:"";position:absolute;left:4px;top:25px;bottom:-13px;width:1px;background:#26323b}.event:last-child:after{display:none}.event-dot{position:relative;z-index:1;width:9px;height:9px;margin-top:3px;border:2px solid #4c5d69;border-radius:50%;background:#0e151c}.event-error .event-dot{border-color:var(--red)}.event div{display:flex;flex-direction:column;gap:5px}.event strong{color:#aab6bf;font-size:11px;font-weight:500;line-height:1.4}.event time{color:#53616b;font-size:8px}.runs-panel{margin-top:18px}.runs-table{overflow-x:auto}.run-row{min-width:900px;display:grid;grid-template-columns:1.3fr 1fr 1fr .65fr .65fr 1.4fr;align-items:center;gap:16px;padding:15px 22px;border-bottom:1px solid #1f2932;color:#8997a2;font-family:DM Mono,monospace;font-size:9px}.run-row:last-child{border-bottom:0}.run-row>span{min-width:0;display:flex;flex-direction:column;gap:4px}.run-row strong{overflow:hidden;color:#c3cdd2;font-size:10px;text-overflow:ellipsis}.run-row small{overflow:hidden;color:#596873;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.run-header{color:#596873;text-transform:uppercase;letter-spacing:.12em;background:#0b1117}.run-status-running{color:var(--green)!important}.run-status-failed,.run-status-missing{color:var(--red)!important}.modal-backdrop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:#020508d9;backdrop-filter:blur(8px)}.modal{position:relative;width:min(100%,480px);padding:34px;border:1px solid #304039;border-radius:22px;background:#101820;box-shadow:0 35px 120px #000}.modal h2{margin:8px 0 6px;font-size:28px}.modal-close{position:absolute;top:14px;right:16px;border:0;color:#788792;background:none;font-size:25px}.muted{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.qr-frame{width:fit-content;margin:28px auto;padding:15px;border-radius:14px;background:#fff}.qr-frame svg{display:block}.qr-loading{padding:70px 0;color:var(--muted);text-align:center}.modal-actions{display:flex;gap:9px}.modal-actions button{flex:1}.secret-warning{margin-top:17px;color:#947a62;font-size:10px;text-align:center}@media(max-width:980px){.hero{grid-template-columns:1fr}.state-card{min-height:230px}.metrics-grid{grid-template-columns:repeat(2,1fr)}.metrics-grid article{border-bottom:1px solid var(--border)}.metrics-grid article:nth-child(2n),.metrics-grid article:last-child{border-right:0}.metrics-grid article:last-child{border-bottom:0}.metrics-grid article:first-child{padding-left:24px}.section-grid,.usage-grid{grid-template-columns:1fr}.usage-grid article{border-right:0;border-bottom:1px solid var(--border)}.usage-grid article:last-child{border-bottom:0}}@media(max-width:680px){.topbar{height:62px;padding:0 16px}.topbar-meta>span:first-child,.master-badge{display:none}.page{padding:32px 14px 70px}.hero{gap:30px;padding-bottom:34px}.metrics-grid{grid-template-columns:1fr}.metrics-grid article{padding:18px 14px!important;border-right:0;border-bottom:1px solid var(--border)}.metrics-grid article:last-child{border-bottom:0}.panel-heading{align-items:stretch;flex-direction:column}.price-note{align-items:flex-start;text-align:left}.add-device{display:grid;grid-template-columns:1fr auto}.add-device input{width:100%}.device-row{grid-template-columns:16px 1fr;gap:9px 12px;padding:17px 15px}.traffic,.device-actions{grid-column:2}.device-actions{flex-wrap:wrap}.login-card{padding:30px 24px}.modal{padding:30px 20px}}