@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{color:#edf0fa;font-synthesis:none;text-rendering:optimizelegibility;--bg:#080b13;--surface:#101725;--surface-2:#151e2e;--border:#253148;--muted:#8b98ad;--purple:#8b75ff;--purple-hover:#7963ec;--green:#40d9a0;--red:#fb7185;background:#080b13;font-family:DM Sans,sans-serif}*{box-sizing:border-box}html{background:var(--bg);min-width:320px;min-height:100%}body{background:radial-gradient(ellipse at 50% -25%, #735bff30, transparent 55%), var(--bg);min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}#root{min-height:100vh}.brand-icon{color:#fff;background:linear-gradient(135deg,#a08cff,#6550dc);border-radius:12px;flex-shrink:0;place-items:center;width:40px;height:40px;display:grid;box-shadow:0 5px 24px #7e64ff40}.brand-light{color:#a99aff;font-weight:500}.loading-screen{min-height:100vh;color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:20px;display:flex}.loading-brand{color:#fff;align-items:center;gap:12px;font:700 21px Space Grotesk,sans-serif;display:flex}.loading-spinner{border:3px solid #29334a;border-top-color:var(--purple);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}.loading-screen p{font-size:13px}@keyframes spin{to{transform:rotate(360deg)}}.auth-screen{background:radial-gradient(at 50% 10%,#7d63ff29,#0000 48%),#080b13;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:30px 20px;display:flex}.auth-brand{color:#fff;align-items:center;gap:12px;margin-bottom:32px;font:700 22px Space Grotesk,sans-serif;display:flex}.auth-card{border:1px solid var(--border);background:linear-gradient(145deg,#141d2c,#0e1420);border-radius:18px;width:100%;max-width:420px;padding:34px;box-shadow:0 25px 90px #0006}.auth-icon{color:#b2a4ff;background:#8b75ff1f;border:1px solid #8b75ff4d;border-radius:14px;place-items:center;width:48px;height:48px;display:grid}.auth-heading{margin:25px 0}.auth-heading h1{color:#f7f7fc;letter-spacing:-.8px;margin:0;font:700 27px Space Grotesk,sans-serif}.auth-heading p{color:var(--muted);margin:9px 0 0;font-size:14px;line-height:1.6}.auth-card .form{flex-direction:column;gap:11px;display:flex}.auth-card label,.field label{color:#dce3f0;font-size:13px;font-weight:600}.auth-card input,.field input{color:#fff;background:#0b111c;border:1px solid #2a354b;border-radius:9px;outline:none;width:100%;min-width:0;height:44px;padding:0 13px;font-size:14px;transition:border-color .2s,box-shadow .2s}.auth-card input:focus,.field input:focus{border-color:var(--purple);box-shadow:0 0 0 3px #8b75ff21}input::placeholder{color:#637087}.auth-card .form button{margin-top:10px}.auth-switch{color:var(--muted);text-align:center;margin-top:24px;font-size:13px}.auth-switch button{color:#ad9fff;background:0 0;border:0;margin-left:5px;padding:0;font-weight:700}.auth-footer{color:#657087;margin-top:27px;font-size:12px}.dashboard{min-height:100vh}.dashboard-header{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0c111bd9;border-bottom:1px solid #2a354bcc;justify-content:space-between;align-items:center;height:76px;padding:0 max(6%,50% - 575px);display:flex}.dashboard-brand{color:#fff;align-items:center;gap:11px;font:700 19px Space Grotesk,sans-serif;display:flex}.dashboard-brand .brand-icon{width:37px;height:37px}.header-account{align-items:center;gap:20px;display:flex}.account-email{color:#a4afc1;font-size:13px}.logout-button{border:1px solid var(--border);color:#c5cede;background:#121a28;border-radius:9px;align-items:center;gap:8px;padding:9px 12px;font-size:13px;display:flex}.logout-button:hover{background:#1a2536;border-color:#56617a}.dashboard-content{width:100%;max-width:1150px;min-height:calc(100vh - 76px);margin:0 auto;padding:52px 30px 25px}.dashboard-heading{justify-content:space-between;align-items:center;gap:20px;margin-bottom:35px;display:flex}.eyebrow{color:#a393ff;letter-spacing:2px;margin-bottom:10px;font-size:10px;font-weight:800}.dashboard-heading h1{color:#f4f5fb;letter-spacing:-1.2px;margin:0;font:700 34px Space Grotesk,sans-serif}.dashboard-heading p{color:var(--muted);margin:9px 0 0;font-size:14px}.button{border:1px solid #0000;border-radius:9px;justify-content:center;align-items:center;gap:9px;min-height:42px;padding:10px 16px;font-size:13px;font-weight:700;transition:all .2s;display:inline-flex}.button-primary{color:#fff;background:linear-gradient(135deg,#927cff,#715be6);box-shadow:0 5px 18px #715be626}.button-primary:hover{background:linear-gradient(135deg,#a18eff,#806bf1);transform:translateY(-1px)}.button-secondary{color:#d5dbea;border-color:var(--border);background:#151e2c}.button-secondary:hover{background:#202b3d}.button-full{width:100%}.button:disabled{cursor:not-allowed;opacity:.55}.message{border:1px solid;border-radius:9px;margin-bottom:18px;padding:12px 15px;font-size:13px}.message-error{color:#fda4af;background:#fb718514;border-color:#fb718540}.message-success{color:#6ee7b7;background:#40d9a014;border-color:#40d9a038}.create-card{background:linear-gradient(145deg,#8b75ff12,#0000 50%),#111827;border:1px solid #343052;border-radius:15px;margin-bottom:35px;padding:25px;box-shadow:0 15px 45px #00000026}.create-heading{justify-content:space-between;align-items:flex-start;margin-bottom:24px;display:flex}.create-heading h2{color:#fff;margin:0;font:700 21px Space Grotesk,sans-serif}.close-button{border:1px solid var(--border);color:#aeb8c9;background:#151d2b;border-radius:8px;place-items:center;width:34px;height:34px;display:grid}.close-button:hover{color:#fff;background:#263148}.create-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.field{flex-direction:column;gap:9px;min-width:0;display:flex}.field small{color:var(--muted);font-size:11px;line-height:1.6}.subdomain-input{align-items:center;gap:9px;min-width:0;display:flex}.subdomain-input input{flex:1;min-width:0}.subdomain-input span{color:#929db2;white-space:nowrap;font-size:12px}.form-actions{grid-column:1/-1;justify-content:flex-end;gap:10px;padding-top:5px;display:flex}.tunnels-section{margin-top:36px}.tunnels-heading{align-items:center;gap:13px;margin-bottom:17px;display:flex}.tunnels-heading h2{color:#f2f4fa;margin:0;font:700 19px Space Grotesk,sans-serif}.tunnel-count{border:1px solid var(--border);color:#aab5c8;background:#111927;border-radius:20px;padding:4px 9px;font-size:11px}.tunnel-list{flex-direction:column;gap:13px;display:flex}.tunnel-card{border:1px solid var(--border);background:linear-gradient(120deg,#121b2a,#0f1622);border-radius:13px;align-items:center;gap:17px;padding:21px;transition:border-color .2s,transform .2s;display:flex}.tunnel-card:hover{border-color:#4a426f;transform:translateY(-1px)}.tunnel-icon{color:#a99aff;background:#8b75ff1a;border:1px solid #8b75ff33;border-radius:12px;flex-shrink:0;place-items:center;width:45px;height:45px;display:grid}.tunnel-details{flex:1;min-width:0}.tunnel-title-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.tunnel-title-row h3{color:#f3f5fa;margin:0;font:600 15px Space Grotesk,sans-serif}.status-pill{color:#fbbf24;text-transform:uppercase;background:#fbbf2414;border:1px solid #fbbf2433;border-radius:20px;align-items:center;gap:6px;padding:4px 8px;font-size:10px;font-weight:700;display:inline-flex}.status-pill>span{background:currentColor;border-radius:50%;width:6px;height:6px}.status-pill.status-online{color:var(--green);background:#40d9a014;border-color:#40d9a033}.status-pill.status-offline,.status-pill.status-error{color:var(--red);background:#fb718514;border-color:#fb718533}.tunnel-host{color:#b6c0d0;flex-wrap:wrap;align-items:center;gap:9px;margin-top:10px;font-size:13px;display:flex}.tunnel-host>span{overflow-wrap:anywhere}.copy-host-button{color:#c6baff;background:#171d30;border:1px solid #303b50;border-radius:7px;align-items:center;gap:6px;padding:6px 9px;font-size:11px;display:inline-flex}.copy-host-button:hover{border-color:var(--purple);background:#22203c}.tunnel-information{color:#77869e;flex-wrap:wrap;gap:15px;margin-top:10px;font-size:11px;display:flex}.empty-state{text-align:center;background:#1017258c;border:1px dashed #344057;border-radius:14px;flex-direction:column;align-items:center;padding:55px 20px;display:flex}.empty-icon{color:#a999ff;background:#8b75ff1a;border:1px solid #8b75ff33;border-radius:15px;place-items:center;width:55px;height:55px;margin-bottom:17px;display:grid}.empty-state h3{color:#f2f4fa;margin:0;font:600 17px Space Grotesk,sans-serif}.empty-state p{color:var(--muted);margin:8px 0 20px;font-size:13px}.dashboard-footer{border-top:1px solid var(--border);color:#69778d;justify-content:space-between;gap:15px;margin-top:65px;padding:20px 0;font-size:11px;display:flex}@media (width<=650px){.dashboard-header{height:auto;min-height:68px;padding:12px 17px}.dashboard-brand{font-size:16px}.dashboard-brand .brand-icon{width:34px;height:34px}.header-account{gap:9px}.account-email{display:none}.logout-button{padding:8px}.logout-button span{display:none}.dashboard-content{padding:32px 17px 20px}.dashboard-heading{flex-direction:column;align-items:flex-start;margin-bottom:27px}.dashboard-heading h1{font-size:29px}.create-form{grid-template-columns:1fr}.form-actions{grid-column:1}.tunnel-card{align-items:flex-start;padding:16px}.tunnel-icon{width:38px;height:38px}.dashboard-footer{flex-direction:column;margin-top:40px}.auth-card{padding:25px 21px}}@media (width<=380px){.subdomain-input{flex-direction:column;align-items:stretch}.subdomain-input span{font-size:11px}}