@import"https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{color-scheme:light;--font: "Manrope", "Segoe UI", sans-serif;--radius: 18px;--radius-sm: 8px;--transition: .2s ease;--bg: #f4efe6;--bg-secondary: rgba(255, 250, 243, .82);--bg-tertiary: #e8dcc9;--text-primary: #1d241f;--text-secondary: #5d695d;--text-tertiary: #7d877e;--border: rgba(75, 92, 78, .16);--border-light: rgba(75, 92, 78, .12);--input-bg: #ffffff;--input-border: rgba(75, 92, 78, .18);--input-focus: #0b6e4f;--cta: #0b6e4f;--cta-hover: #0f7f5d;--cta-text: #ffffff;--red: #c94f3d;--red-hover: #d35c49;--red-bg: #fff4f0;--red-border: rgba(201, 79, 61, .24);--green: #2f8f5b;--yellow: #c78521;--code-bg: #1f2a24;--code-text: #f5f2ea;--overlay: rgba(0, 0, 0, .4);--shadow: 0 10px 30px rgba(40, 45, 35, .06);--shadow-lg: 0 24px 60px rgba(40, 45, 35, .14)}html{height:100%}body{margin:0;min-width:320px;min-height:100dvh;font-family:var(--font);font-weight:400;line-height:1.5;color:var(--text-primary);background:radial-gradient(circle at top left,rgba(255,255,255,.85),transparent 28%),radial-gradient(circle at top right,rgba(11,110,79,.08),transparent 24%),linear-gradient(180deg,#fbf8f2 0%,var(--bg) 44%,#efe6d9 100%);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.page{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}.navbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border-light)}.navbar-brand{font-weight:700;font-size:16px;color:var(--text-primary);text-decoration:none;cursor:pointer}.navbar-brand:hover{color:var(--cta)}.navbar-right{display:flex;align-items:center;gap:12px}.navbar-email{font-size:13px;color:var(--text-secondary)}.container{max-width:1180px;margin:0 auto;padding:28px 20px 48px;flex:1}.dashboard-shell{display:flex;flex-direction:column;gap:24px}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,.95fr);gap:24px;align-items:start}.dashboard-main,.dashboard-side{min-width:0}h1,h2,h3{font-weight:700;color:var(--text-primary)}h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1;letter-spacing:-.04em}h2{font-size:1.08rem;margin-bottom:12px}h3{font-size:15px}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.text-sm{font-size:13px}.text-xs{font-size:12px}.mono{font-family:IBM Plex Mono,ui-monospace,Menlo,monospace}.card{background:var(--bg-secondary);border:1px solid var(--border-light);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius);padding:18px;margin-bottom:8px}.card-bordered{border:1px solid var(--border-light)}.section{margin-bottom:32px}.section-tight{margin-bottom:8px}.hero-panel{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.9fr);gap:18px;padding:24px;border-radius:28px;background:linear-gradient(135deg,#ffffffdb,#f9f2e7b8),linear-gradient(120deg,#0b6e4f14,#c7852114);border:1px solid rgba(75,92,78,.14);box-shadow:var(--shadow-lg)}.hero-panel:after{content:"";position:absolute;inset:auto -80px -120px auto;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(11,110,79,.16),transparent 70%);pointer-events:none}.hero-copy,.hero-metrics{position:relative;z-index:1}.hero-kicker,.panel-kicker{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cta);margin-bottom:8px}.hero-text{max-width:42rem;color:var(--text-secondary);font-size:1rem;margin-top:14px}.hero-metrics{display:grid;gap:12px}.hero-stat{padding:14px 16px;border-radius:16px;background:#ffffffb8;border:1px solid rgba(75,92,78,.12)}.hero-stat strong{display:block;font-size:1.15rem;margin-top:4px}.hero-stat-label{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-tertiary)}.hero-stat-domain{word-break:break-word}.procedure-number{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;font-size:.8rem;font-weight:800;background:var(--text-primary);color:#fff;flex-shrink:0}.quickstart-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr) minmax(280px,.9fr);gap:18px}.quickstart-card{margin-bottom:0;height:100%}.quickstart-result-card{background:linear-gradient(180deg,#1f2a24fa,#25352df0);border-color:#ffffff0a;color:#f7f3ec}.quickstart-result-card h2,.quickstart-result-card .text-secondary,.quickstart-result-card .text-tertiary,.quickstart-result-card .result-link,.quickstart-result-card .result-label{color:inherit}.quickstart-result-card .tab{color:#f5f2eaad}.quickstart-result-card .tab-active{background:#ffffff1a;color:#fff}.quickstart-fields{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:12px}.explain-box{display:grid;gap:8px;padding:12px 14px;border-radius:14px;background:#ffffff9e;border:1px solid var(--border-light);font-size:.84rem;color:var(--text-secondary)}.explain-box strong{color:var(--text-primary)}.explain-box-dark{background:#ffffff12;border-color:#ffffff14;color:#f7f3ecdb}.explain-box-dark strong{color:#fff}.quickstart-field{display:flex;flex-direction:column;gap:6px}.quickstart-field span,.result-label{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary)}.quickstart-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.section-heading{display:flex;align-items:start;justify-content:space-between;gap:12px}.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.result-item{padding:12px 14px;border-radius:14px;background:#ffffff14;border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:8px}.result-link{text-decoration:none;word-break:break-word;font-weight:700}.quickstart-placeholder{display:flex;flex-direction:column;justify-content:center;min-height:100%}.verify-list{display:grid;gap:12px}.verify-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:#ffffff8a;border:1px solid var(--border-light)}.verify-item strong{display:block;margin-bottom:4px}.verify-item p{color:var(--text-secondary);font-size:.84rem}.placeholder-stack{display:grid;gap:10px}.placeholder-line{height:12px;border-radius:999px;background:#ffffff1f}.placeholder-line.short{width:60%}.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font);font-size:13px;font-weight:600;padding:8px 16px;border-radius:var(--radius-sm);border:none;cursor:pointer;transition:all var(--transition);text-decoration:none;line-height:1}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--cta);color:var(--cta-text)}.btn-primary:hover:not(:disabled){background:var(--cta-hover)}.btn-secondary{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--bg-tertiary);color:var(--text-primary)}.btn-danger{background:var(--red);color:#fff}.btn-danger:hover:not(:disabled){background:var(--red-hover)}.btn-ghost{background:none;border:none;color:var(--text-secondary);padding:6px 10px}.btn-ghost:hover{color:var(--text-primary)}.btn-sm{font-size:12px;padding:5px 10px}.btn-xs{font-size:11px;padding:4px 8px}.input{display:block;width:100%;font-family:var(--font);font-size:14px;padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--input-border);background:var(--input-bg);color:var(--text-primary);transition:border-color var(--transition);outline:none}.input-field{display:inline-block;font-family:var(--font);font-size:13px;padding:5px 10px;border-radius:var(--radius-sm);border:1px solid var(--input-border);background:var(--input-bg);color:var(--text-primary);outline:none;transition:border-color var(--transition)}.input-field:focus{border-color:var(--input-focus);box-shadow:0 0 0 3px #0071e326}.notice-box{padding:10px 14px;border-radius:var(--radius-sm);background:#2f8f5b1f;border:1px solid rgba(47,143,91,.3);color:var(--green);font-size:13px}.input::-moz-placeholder{color:var(--text-tertiary)}.input::placeholder{color:var(--text-tertiary)}.input:focus{border-color:var(--input-focus);box-shadow:0 0 0 3px #0071e326}.input-error{border-color:var(--red)}.input-inline{width:auto}select.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}.toggle{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}.toggle input{opacity:0;width:0;height:0}.toggle-track{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px;background:var(--bg-tertiary);cursor:pointer;transition:background var(--transition)}.toggle-track:after{content:"";position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform var(--transition);box-shadow:0 1px 3px #00000026}.toggle input:checked+.toggle-track{background:var(--cta)}.toggle input:checked+.toggle-track:after{transform:translate(20px)}.checkbox{display:flex;align-items:flex-start;gap:8px}.checkbox input[type=checkbox]{width:16px;height:16px;margin-top:2px;accent-color:var(--cta);flex-shrink:0}.checkbox label{font-size:13px;color:var(--text-secondary)}.checkbox label a{color:var(--cta);text-decoration:underline}.checkbox label a:hover{color:var(--cta-hover)}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}.dot-green{background:var(--green)}.dot-red{background:var(--red)}.dot-yellow{background:var(--yellow)}.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--bg-tertiary);color:var(--text-secondary)}.badge-green{background:#34c75926;color:var(--green)}.badge-red{background:#ff3b3026;color:var(--red)}.badge-yellow{background:#ff9f0a26;color:var(--yellow)}.badge-tls{background:#0071e31f;color:var(--cta, #0071e3)}.tunnel-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer;width:36px;height:20px;flex-shrink:0}.tunnel-toggle input{opacity:0;width:0;height:0;position:absolute}.tunnel-toggle-slider{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg-tertiary, #444);border-radius:20px;transition:background .2s,border-color .2s;border:1px solid var(--border, #555)}.tunnel-toggle-slider:before{content:"";position:absolute;height:14px;width:14px;left:2px;top:50%;transform:translateY(-50%);background:var(--text-tertiary, #aaa);border-radius:50%;transition:transform .2s,background .2s}.tunnel-toggle input:checked+.tunnel-toggle-slider{background:var(--green, #34c759);border-color:var(--green, #34c759)}.tunnel-toggle input:checked+.tunnel-toggle-slider:before{transform:translate(16px) translateY(-50%);background:#fff}.code-block{background:var(--code-bg);border-radius:var(--radius-sm);padding:14px 16px;font-size:12px;font-family:IBM Plex Mono,ui-monospace,Menlo,monospace;color:var(--code-text);overflow-x:auto;white-space:pre-wrap;word-break:break-all;line-height:1.6}.tabs{display:flex;gap:2px;margin-bottom:12px}.tab{font-family:var(--font);font-size:12px;font-weight:600;padding:5px 12px;border-radius:6px;background:none;border:none;color:var(--text-tertiary);cursor:pointer;transition:all var(--transition)}.tab:hover{color:var(--text-primary)}.tab-active{background:var(--bg-tertiary);color:var(--text-primary)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.flex-1{flex:1}.flex-wrap{flex-wrap:wrap}.shrink-0{flex-shrink:0}.w-full{width:100%}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.space-y-3>*+*{margin-top:12px}.space-y-2>*+*{margin-top:8px}.divider{border:none;border-top:1px solid var(--border-light);margin:12px 0}.warning-box{background:#ff9f0a1a;border:1px solid rgba(255,159,10,.3);border-radius:var(--radius-sm);padding:12px;font-size:13px;color:var(--yellow)}.danger-card{background:var(--bg-secondary);border:1px solid var(--red-border);border-radius:var(--radius);padding:16px}.footer{border-top:1px solid var(--border-light);padding:16px 20px;text-align:center;font-size:12px;color:var(--text-tertiary)}.footer a{color:var(--text-tertiary);text-decoration:none}.footer a:hover{color:var(--text-primary)}.login-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:24px}.login-box{width:100%;max-width:360px}.login-title{font-size:22px;font-weight:700;text-align:center;margin-bottom:32px}.login-form{display:flex;flex-direction:column;gap:16px}.login-footer{margin-top:24px;text-align:center;font-size:12px;color:var(--text-tertiary)}.login-footer a{color:var(--text-tertiary);text-decoration:none}.login-footer a:hover{color:var(--text-primary)}.landing-page{display:flex;flex-direction:column;min-height:100dvh;background:var(--bg)}.landing-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;max-width:560px;margin:0 auto;width:100%}.landing-title{font-size:32px;font-weight:700;text-align:center;line-height:1.2;margin-bottom:12px}.landing-subtitle{font-size:16px;color:var(--text-secondary);text-align:center;margin-bottom:40px}.landing-features{width:100%;margin-bottom:40px}.landing-feature{display:flex;gap:14px;align-items:flex-start;padding:14px 0}.landing-feature+.landing-feature{border-top:1px solid var(--border-light)}.landing-feature-icon{font-size:22px;flex-shrink:0;margin-top:2px}.landing-feature strong{display:block;font-size:14px;font-weight:600;margin-bottom:2px}.landing-feature p{font-size:13px;color:var(--text-secondary);margin:0}.landing-signin{width:100%;max-width:400px;margin-bottom:40px}.landing-form{display:flex;gap:8px}.landing-form .input{flex:1}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:var(--overlay);display:flex;align-items:center;justify-content:center;padding:24px}.modal{background:var(--bg);border-radius:var(--radius);padding:24px;width:100%;max-width:440px;box-shadow:var(--shadow-lg)}.modal-title{font-size:18px;font-weight:700;margin-bottom:8px}.choice-row{display:flex;gap:8px}.choice-option{flex:1;display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-secondary);cursor:pointer;text-align:left;font-family:var(--font);transition:all var(--transition)}.choice-option:hover{border-color:var(--cta)}.choice-option strong{font-size:13px}.choice-active{border-color:var(--cta);background:#0b6e4f14}.msg{text-align:center;font-size:13px;padding:8px;border-radius:var(--radius-sm)}.msg-error{color:var(--red);background:var(--red-bg)}.msg-success{color:var(--green);background:#34c7591a}.empty-state{text-align:center;padding:48px 16px}.empty-state-icon{color:var(--text-tertiary);margin-bottom:16px}.empty-state h3{margin-bottom:8px}.empty-state p{color:var(--text-secondary);font-size:14px;margin-bottom:20px;max-width:340px;margin-left:auto;margin-right:auto}.tunnel-card{padding:14px 16px}.tunnel-card-new{box-shadow:0 0 0 2px var(--green)}.tunnel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}.tunnel-info{min-width:0;flex:1}.tunnel-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tunnel-subdomain{font-family:IBM Plex Mono,ui-monospace,Menlo,monospace;font-weight:600;font-size:14px}.tunnel-detail{font-size:12px;color:var(--text-tertiary);margin-top:4px}.tunnel-detail a{color:var(--cta);text-decoration:none}.tunnel-detail a:hover{text-decoration:underline}.tunnel-actions{display:flex;gap:6px;flex-wrap:wrap;flex-shrink:0}.tunnel-token-reveal{margin-top:8px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--code-bg);font-size:12px;font-family:IBM Plex Mono,ui-monospace,Menlo,monospace;color:var(--yellow);word-break:break-all}.stats-panel{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-light)}.create-form{display:flex;flex-direction:column;gap:12px}.create-inputs{display:flex;gap:8px;flex-wrap:wrap}.create-inputs .input{flex:1;min-width:100px}.create-inputs .input-port{max-width:90px;flex:0 0 90px}.create-inputs .input-host{max-width:140px;flex:0 0 140px}.billing-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.credit-value{font-size:24px;font-weight:700;font-family:IBM Plex Mono,ui-monospace,Menlo,monospace}.credit-danger{color:var(--red)}.install-step{font-size:12px;color:var(--text-secondary);margin-bottom:6px}.usage-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;gap:16px}.usage-subdomain{font-family:IBM Plex Mono,ui-monospace,Menlo,monospace;color:var(--text-primary)}.usage-metrics{color:var(--text-secondary);white-space:nowrap}.sparkline-legend{display:flex;gap:16px;margin-top:8px;font-size:12px;align-items:center}.sparkline-legend-item{display:flex;align-items:center;gap:6px}.sparkline-legend-bar{display:inline-block;width:10px;height:3px;border-radius:2px}.sparkline-legend-in{background:var(--cta)}.sparkline-legend-out{background:var(--green)}.section-toggle{display:flex;align-items:center;gap:8px;background:none;border:none;font-family:var(--font);font-size:17px;font-weight:700;color:var(--text-primary);cursor:pointer;padding:0;margin-bottom:12px}.section-toggle:hover{color:var(--cta)}.section-toggle .chevron{font-size:12px;color:var(--text-tertiary);transition:transform var(--transition)}.admin-login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}.admin-login-box{width:100%;max-width:400px}.admin-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.admin-stat-card{background:var(--bg-secondary);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:4px}.admin-stat-label{font-size:12px;color:var(--text-tertiary)}.admin-stat-value{font-size:22px;font-weight:700;font-family:SF Mono,SFMono-Regular,ui-monospace,Menlo,monospace}.admin-table-wrap{overflow-x:auto}.admin-table{width:100%;border-collapse:collapse;font-size:13px}.admin-table th{text-align:left;font-size:11px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;padding:8px 12px;border-bottom:1px solid var(--border-light)}.admin-table td{padding:8px 12px;border-bottom:1px solid var(--border-light);vertical-align:middle}.admin-table tbody tr:hover{background:var(--bg-secondary)}.admin-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--bg-secondary);border-radius:var(--radius);padding:16px}@media (max-width: 600px){.container{padding:20px 16px}.dashboard-grid,.quickstart-grid,.hero-panel,.result-grid,.quickstart-fields{grid-template-columns:1fr}.create-inputs{flex-direction:column}.create-inputs .input{max-width:none;flex:1}.tunnel-header{flex-direction:column}.tunnel-actions{width:100%}.billing-row{flex-direction:column;align-items:flex-start}.landing-title{font-size:26px}.landing-hero{padding:28px 16px;justify-content:flex-start}.landing-form,.choice-row{flex-direction:column}.section-heading,.quickstart-actions,.sparkline-legend,.usage-row,.verify-item{flex-direction:column;align-items:flex-start}.hero-panel{padding:20px;border-radius:24px}}