:root{color-scheme:dark;--ink:#e8eef5;--muted:#8fa0b4;--line:#2c3a4b;--paper:#18202b;--canvas:#0f141b;--lime:#2ce68f;--lime-dark:#14c97a;--navy:#202a38;--danger:#ff7a70;--surface:#18202b;--surface-2:#202a38;--em:#2ce68f;--em-2:#14c97a;--em-ink:#08301f;--em-dim:rgba(44,230,143,.13);--warn:#ffc454}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font-family:"DM Sans",sans-serif;min-height:100vh;background-image:radial-gradient(circle at 8% 12%,rgba(44,230,143,.09) 0,transparent 25%),radial-gradient(circle at 95% 85%,rgba(90,140,220,.12) 0,transparent 27%)}.shell{width:min(1160px,calc(100% - 40px));margin-inline:auto}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font:800 20px Manrope}.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-size:17px}.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}.account-area{display:flex;align-items:center;gap:18px}.secure-label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}.secure-dot{width:7px;height:7px;background:var(--em);border-radius:50%;box-shadow:0 0 0 4px rgba(44,230,143,.16)}.user-chip{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600}.user-chip img{width:32px;height:32px;border-radius:50%}.main-grid{display:grid;grid-template-columns:1fr 510px;gap:85px;align-items:center;min-height:calc(100vh - 146px);padding-block:58px}.eyebrow,.step-label{text-transform:uppercase;letter-spacing:.14em;color:var(--em);font-size:11px;font-weight:800;margin:0 0 12px}.intro h1{font:800 clamp(42px,5vw,72px)/1.02 Manrope;margin:0;letter-spacing:-.055em}.intro h1 span{color:var(--em)}.lede{font-size:18px;line-height:1.55;color:var(--muted);max-width:570px;margin:28px 0 42px}.trust-row{display:flex;gap:38px}.trust-row div{display:grid;gap:4px}.trust-row strong{font:700 14px Manrope}.trust-row span{font-size:12px;color:var(--muted)}.order-card{background:rgba(24,32,43,.92);border:1px solid rgba(255,255,255,.06);border-radius:24px;padding:30px;box-shadow:0 24px 70px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.3);backdrop-filter:blur(16px)}.card-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}.card-heading h2,.status-panel h2{font:750 24px Manrope;margin:0}.availability{font-size:11px;color:var(--em);background:var(--em-dim);border:1px solid rgba(44,230,143,.3);padding:6px 9px;border-radius:999px;display:flex;align-items:center;gap:6px}.availability i{width:6px;height:6px;border-radius:50%;background:var(--em)}.notice{font-size:12px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);padding:10px 12px;border-radius:9px;margin-bottom:18px}.notice.error{color:var(--danger);background:rgba(255,122,112,.1);border-color:rgba(255,122,112,.3)}.notice.success{color:var(--em);background:rgba(44,230,143,.12);border-color:rgba(44,230,143,.28)}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:7px;margin-bottom:17px}.field label,legend{font-size:12px;font-weight:700}.field label small{font-weight:400;color:var(--muted)}input,select{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);font:500 14px "DM Sans";padding:12px 13px;outline:none;transition:.15s}input:focus,select:focus{border-color:var(--em);box-shadow:0 0 0 3px rgba(44,230,143,.18)}.quantity-wrap{position:relative}.quantity-wrap input{font:700 19px Manrope;padding-right:82px}.quantity-wrap span{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--muted)}fieldset{border:0;padding:0;margin:2px 0 17px}legend{margin-bottom:8px}.radio-option{display:flex;gap:10px;padding:10px 11px;border:1px solid var(--line);border-radius:10px;margin-top:8px;cursor:pointer}.radio-option:has(input:checked){border-color:var(--em);background:rgba(44,230,143,.12)}.radio-option input{width:auto;accent-color:var(--em)}.radio-option span{display:grid;gap:2px}.radio-option b{font-size:13px}.radio-option small{color:var(--muted);font-size:11px}.price-line{border-top:1px solid var(--line);padding:18px 0 14px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}.price-line strong{font:750 20px Manrope;color:var(--ink)}button{font:inherit}.primary,.secondary{width:100%;border:0;border-radius:11px;padding:14px 16px;font-weight:750;cursor:pointer}.primary{background:var(--em);color:var(--em-ink);display:flex;justify-content:space-between}.primary:hover:not(:disabled){background:#3ff5a0}.primary:disabled{opacity:.42;cursor:not-allowed}.secondary{background:var(--surface-2);color:var(--ink)}.fine-print{text-align:center;font-size:10px;color:#7f8ea3;margin:11px 20px 0;line-height:1.5}.status-panel{text-align:center;padding:25px 5px 5px}.status-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;background:var(--em);color:var(--em-ink);font-size:22px;font-weight:800}.status-panel p:not(.step-label){color:var(--muted);font-size:14px}.status-track{display:flex;gap:6px;margin:24px 0}.status-track i{height:5px;border-radius:4px;background:var(--line);flex:1}.status-track i:first-child{background:var(--lime-dark)}footer{height:64px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#7f8ea3}body.loading .primary span:first-child:after{content:"…"}@media(max-width:900px){.main-grid{grid-template-columns:1fr;gap:42px;padding-block:42px}.intro{text-align:center}.lede{margin-inline:auto}.trust-row{justify-content:center}.order-card{max-width:560px;width:100%;margin:auto}}@media(max-width:560px){.shell{width:min(100% - 24px,1160px)}.topbar{height:70px}.secure-label{display:none}.main-grid{padding-block:32px}.intro h1{font-size:42px}.lede{font-size:15px}.trust-row{gap:18px}.order-card{padding:21px;border-radius:18px}.field-row{grid-template-columns:1fr}footer{flex-direction:column;justify-content:center;gap:4px}}
:root .logout-button{border:0;background:transparent;color:var(--muted);font:600 11px "DM Sans";cursor:pointer;padding:6px}:root .logout-button:hover{color:var(--ink)}
.dashboard{grid-column:1/-1;width:100%}.dashboard-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px}.dashboard-head h1{font:800 clamp(34px,4vw,52px)/1 Manrope;margin:0;letter-spacing:-.045em}.dashboard-head>div>p:last-child{color:var(--muted);margin:13px 0 0}.primary.compact{width:auto;min-width:145px}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.summary-grid article,.dashboard-panel{background:rgba(24,32,43,.92);border:1px solid rgba(255,255,255,.06);box-shadow:0 10px 35px rgba(0,0,0,.35);border-radius:16px}.summary-grid article{padding:18px 20px;display:grid;gap:8px}.summary-grid span{font-size:12px;color:var(--muted)}.summary-grid strong{font:800 27px Manrope}.dashboard-panel{padding:22px;margin-top:14px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.panel-head h2{font:750 19px Manrope;margin:0}.panel-head .step-label{margin-bottom:4px}.text-button{border:0;background:transparent;color:var(--em);font:700 12px "DM Sans";cursor:pointer}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;min-width:720px}th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#7f8ea3;padding:10px 12px;border-bottom:1px solid var(--line)}td{font-size:13px;padding:14px 12px;border-bottom:1px solid #232e3c}tbody tr:last-child td{border-bottom:0}.order-id{font:650 12px ui-monospace,SFMono-Regular,monospace}.order-target{display:grid;gap:2px}.order-target small{color:var(--muted)}.progress-cell{min-width:130px}.progress-label{display:flex;justify-content:space-between;font-size:11px;margin-bottom:6px}.progress-bar{height:5px;background:var(--line);border-radius:4px;overflow:hidden}.progress-bar i{display:block;height:100%;background:var(--lime-dark)}.status-badge{display:inline-flex;padding:5px 8px;border-radius:999px;background:var(--surface-2);color:#9aa8ba;font-size:10px;font-weight:750}.status-badge.paid,.status-badge.active{background:var(--em-dim);color:var(--em)}.status-badge.pending{background:rgba(255,196,84,.13);color:var(--warn)}.download-group{display:flex;gap:5px}.download-link{border:1px solid var(--line);border-radius:7px;padding:5px 7px;text-decoration:none;color:var(--ink);font-size:10px;font-weight:700}.download-link.disabled{opacity:.4;pointer-events:none}.empty-cell{text-align:center;color:var(--muted);padding:32px}.proxy-inventory{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.proxy-row{border:1px solid var(--line);background:var(--surface-2);border-radius:11px;padding:12px;display:grid;gap:7px}.proxy-row code{font-size:12px;color:var(--ink)}.proxy-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.empty-state{grid-column:1/-1;display:grid;place-items:center;text-align:center;gap:5px;padding:35px;color:var(--muted)}.empty-state b{color:var(--ink);font-size:13px}.empty-state span{font-size:11px}body.dashboard-mode .intro,body.dashboard-mode>.shell.main-grid>.order-card{display:none}body.dashboard-mode .main-grid{display:block;padding-top:45px}.dashboard-error{color:var(--danger);font-size:12px;padding:18px}@media(max-width:700px){.dashboard-head{align-items:start;gap:20px}.summary-grid{grid-template-columns:1fr}.proxy-inventory{grid-template-columns:1fr}.dashboard-panel{padding:15px}}
.progress-label strong{font-size:11px;color:var(--ink)}
.status-badge.failed{background:rgba(255,122,112,.12);color:var(--danger)}
.proxy-inventory{display:grid;grid-template-columns:1fr;gap:10px}.proxy-row{border:1px solid var(--line);background:var(--surface-2);border-radius:12px;padding:16px 18px;display:grid;grid-template-columns:minmax(260px,1fr) minmax(210px,.55fr) auto;align-items:center;gap:20px}.proxy-identity{display:grid;gap:5px;min-width:0}.proxy-identity code{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis}.proxy-identity a,.view-purchase{font-size:11px;color:var(--em);text-decoration:none;font-weight:700}.proxy-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.ready-label{color:var(--em);background:var(--em-dim);border-radius:999px;padding:4px 8px;font-weight:750}.session-note{color:var(--muted);font-size:10px}.panel-note{color:var(--muted);font-size:10px}.order-product{display:grid;gap:3px}.order-product strong{font-size:12px}.order-product small{font:10px ui-monospace,SFMono-Regular,monospace;color:var(--muted)}.back-link{color:var(--ink);text-decoration:none;font-weight:750}.credential-list{display:grid;gap:8px}.credential-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:12px}.credential-number{color:#7f8ea3;font:700 11px ui-monospace,SFMono-Regular,monospace}.credential-row code{overflow:auto;white-space:nowrap;font-size:12px;color:var(--ink)}.copy-button{border:1px solid var(--line);background:var(--surface-2);border-radius:7px;padding:6px 10px;color:var(--ink);font-size:11px;font-weight:700;cursor:pointer}@media(max-width:700px){.proxy-row{grid-template-columns:1fr;gap:10px}.credential-row{grid-template-columns:28px minmax(0,1fr)}.credential-row .copy-button{grid-column:2}.panel-note{display:none}}
.proxy-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}.proxy-row>.session-note{text-align:right}@media(max-width:700px){.proxy-actions{justify-content:flex-start}.proxy-row>.session-note{text-align:left}}
.bandwidth-summary{grid-template-columns:repeat(4,1fr)}.bandwidth-card small{color:var(--muted);font-size:10px;line-height:1.4}.bandwidth-meter{height:5px;background:var(--line);border-radius:5px;overflow:hidden;margin-top:3px}.bandwidth-meter i{display:block;width:0;height:100%;background:var(--lime-dark);transition:width .25s}@media(max-width:900px){.bandwidth-summary{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.bandwidth-summary{grid-template-columns:1fr}}
[hidden]{display:none!important}.inventory-toolbar{display:flex;align-items:end;gap:12px;margin:4px 0 16px}.inventory-toolbar label{display:grid;gap:5px;color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.inventory-toolbar select{min-width:155px;padding:9px 34px 9px 11px;background:var(--surface-2)}.inventory-toolbar>span{margin-left:auto;color:var(--muted);font-size:11px;padding-bottom:10px}.inventory-scroll{border:1px solid var(--line);border-radius:12px}.inventory-table{min-width:1180px}.inventory-table th{background:#1b2431}.inventory-table th button{border:0;background:transparent;padding:0;color:inherit;text-transform:inherit;letter-spacing:inherit;font:inherit;cursor:pointer}.inventory-table td{vertical-align:middle}.inventory-credential{width:100%}.inventory-credential code{display:block;white-space:nowrap;font-size:12px;color:var(--ink);user-select:all}.inventory-table a{color:var(--em);text-decoration:none;font-size:11px;font-weight:700}.type-badge{display:inline-flex;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:750;background:var(--surface-2);color:#9aa8ba}.type-badge.residential{background:var(--em-dim);color:var(--em)}.type-badge.mobile{background:rgba(110,160,255,.14);color:#8fb4ff}.inventory-table .proxy-actions{white-space:nowrap}@media(max-width:700px){.inventory-toolbar{align-items:stretch;flex-direction:column}.inventory-toolbar label,.inventory-toolbar select{width:100%}.inventory-toolbar>span{margin-left:0;padding:0}}

::placeholder{color:var(--muted);opacity:.7}
select option{background:var(--surface-2);color:var(--ink)}
.inventory-table th{color:#7f8ea3}
.brand{color:var(--ink)}

/* data-only purchase form */
.label-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px}
.label-row .value-prop{font-size:12.5px;font-weight:700;color:var(--ink)}
.rate-chip{font:700 11px "DM Sans";color:var(--em);background:var(--em-dim);border:1px solid rgba(44,230,143,.3);border-radius:999px;padding:4px 9px}
.preset-row{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:11px 0 15px}
.preset{border:1px solid var(--line);background:var(--surface-2);border-radius:9px;padding:9px 2px;font:700 11.5px "DM Sans";color:var(--ink);cursor:pointer;transition:.15s}
.preset:hover{border-color:rgba(44,230,143,.45)}
.preset.is-active{border-color:var(--em);background:var(--em-dim);color:var(--em)}
.preset.custom{color:var(--em);opacity:.9}
.slider-row{display:flex;align-items:center;gap:14px;margin-bottom:13px}
.gb-slider{-webkit-appearance:none;appearance:none;width:250px;flex:none;height:6px;padding:0;border:0;border-radius:6px;cursor:pointer;background:linear-gradient(var(--em),var(--em)) 0/18.4% 100% no-repeat,rgba(255,255,255,.12)}
.gb-slider:focus{box-shadow:none}
.gb-slider::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;border-radius:50%;background:var(--em);border:3px solid var(--canvas);box-shadow:0 2px 10px rgba(44,230,143,.45);cursor:pointer}
.slider-hint{font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap}
.checkout-row{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:15px;margin-top:2px}
.total-block{display:grid;gap:1px}
.total-block span{font-size:12px;color:var(--muted)}
.total-block strong{font:750 22px Manrope;color:var(--ink)}
.total-block small{font-size:10.5px;color:var(--muted);opacity:.75}
.checkout-row .primary.slim{width:auto;min-width:212px;margin:0;padding:11px 15px;font-size:13.5px;border-radius:10px;gap:10px}
.trust-row{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;gap:22px 30px}
.trust-row .soon{font-style:normal;font-size:11px;font-weight:700;color:var(--warn);background:rgba(255,196,84,.13);border:1px solid rgba(255,196,84,.3);border-radius:999px;padding:2px 8px;width:max-content}
@media(max-width:900px){.trust-row{justify-content:center}.trust-row .soon{justify-self:center}}
@media(max-width:560px){.preset-row{grid-template-columns:repeat(3,1fr)}.gb-slider{width:100%;flex:1}.checkout-row{flex-direction:column;align-items:stretch;gap:12px}.checkout-row .primary.slim{width:100%}.trust-row{grid-template-columns:repeat(2,auto)}}

/* proxy generation */
.generate-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:12px;align-items:end}
.generate-grid label{display:grid;gap:6px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.generate-grid select,.generate-grid input{font:600 14px "DM Sans"}
.generate-grid .primary.slim{width:auto;min-width:150px;margin:0;padding:12px 16px;font-size:13.5px;border-radius:10px;gap:10px}
.suffix-wrap{position:relative;display:block}
.suffix-wrap input{padding-right:46px}
.suffix-wrap span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--muted);text-transform:none;letter-spacing:0}
#generate-notice{margin:14px 0 0}
@media(max-width:900px){.generate-grid{grid-template-columns:1fr 1fr}.generate-grid .primary.slim{grid-column:1/-1;width:100%}}

/* bulk credential actions */
.bulk-actions{display:flex;align-items:center;gap:7px;margin-left:12px}
.bulk-actions .copy-button{padding:7px 12px}
.bulk-actions .download-link{padding:7px 10px;font-size:11px}
@media(max-width:700px){.bulk-actions{margin-left:0;width:100%;flex-wrap:wrap}}

/* generation activity */
.generation-activity{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.activity-heading{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 10px;font-weight:800}
.generation-activity ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.generation-activity li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12.5px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:9px 12px}
.generation-activity .what{color:var(--ink);font-weight:600}
.generation-activity .when{color:var(--muted);font-size:11px;margin-left:auto;white-space:nowrap}
.generation-activity .why{color:var(--danger);font-size:11px;flex:1 0 100%;margin:0;line-height:1.4}
.generation-activity li.is-failed{border-color:rgba(255,122,112,.35)}
@media(max-width:700px){.generation-activity .when{margin-left:0}}

/* dashboard shell: left nav + tab panels */
.dash-layout{display:grid;grid-template-columns:196px minmax(0,1fr);gap:20px;align-items:start}
.side-nav{display:grid;gap:3px;position:sticky;top:20px}
.side-nav-item{text-align:left;border:0;background:transparent;color:var(--muted);font:600 13px "DM Sans";padding:10px 13px;border-radius:9px;cursor:pointer;transition:.15s}
.side-nav-item:hover{background:var(--surface-2);color:var(--ink)}
.side-nav-item.is-active{background:var(--em-dim);color:var(--em);font-weight:700}
.dash-panels{min-width:0}
.dash-tab[hidden]{display:none!important}
.ghost-button{border:1px solid var(--line);background:transparent;color:var(--muted);font:600 12px "DM Sans";padding:7px 13px;border-radius:999px;cursor:pointer;transition:.15s}
.ghost-button:hover{border-color:var(--em);color:var(--em)}

/* range filter */
.range-tabs{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px}
.range-tab{border:0;background:transparent;color:var(--muted);font:600 11.5px "DM Sans";padding:6px 12px;border-radius:999px;cursor:pointer;transition:.15s}
.range-tab:hover{color:var(--ink)}
.range-tab.is-active{background:var(--em);color:var(--em-ink);font-weight:700}

/* usage chart */
.usage-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:4px 0 20px}
.usage-summary div{display:grid;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.usage-summary span{font-size:11px;color:var(--muted)}
.usage-summary strong{font:750 17px Manrope;color:var(--ink)}






.usage-empty{color:var(--muted);font-size:12.5px;text-align:center;padding:36px 0;margin:0}

/* transactions */
.transactions-table{min-width:820px}
.transactions-table td{vertical-align:middle}
.invoice-ref{font:650 12px ui-monospace,SFMono-Regular,monospace;color:var(--ink)}
.txn-date>div{display:grid;gap:2px}
.txn-date small{color:var(--muted);font-size:10.5px}
.txn-amount{font:700 13px "DM Sans";color:var(--ink)}
.txn-amount small{display:block;color:var(--em);font-weight:600;font-size:10.5px}
.invoice-actions{white-space:nowrap}.invoice-actions>div{display:flex;gap:6px;align-items:center}
.invoice-actions .download-link.disabled{opacity:.35}

@media(max-width:900px){
  .dash-layout{grid-template-columns:1fr}
  .side-nav{position:static;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;gap:4px;padding-bottom:4px}
  .usage-summary{grid-template-columns:1fr}
  .range-tabs{flex-wrap:wrap}
}

/* dashboard refinements */
body.dashboard-mode .secure-label{display:none}
.boot-screen{position:fixed;inset:0;z-index:1000;display:none;place-content:center;justify-items:center;gap:18px;background:var(--canvas);color:var(--muted);font-size:13px}.boot-screen img{width:42px;height:42px}.boot-spinner{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--em);border-radius:50%;animation:boot-spin .8s linear infinite}body.app-booting>.boot-screen,body.app-boot-failed>.boot-screen{display:grid}body.app-booting>header,body.app-booting>main,body.app-booting>footer,body.app-boot-failed>header,body.app-boot-failed>main,body.app-boot-failed>footer{visibility:hidden}body.app-boot-failed .boot-spinner{display:none}body.app-boot-failed #boot-message{max-width:420px;margin:0 24px;text-align:center;color:var(--danger);line-height:1.5}@keyframes boot-spin{to{transform:rotate(360deg)}}
.primary.compact.slim-cta{min-width:0;width:auto;display:inline-flex;justify-content:center;padding:10px 20px;font-size:13.5px;border-radius:10px}
.bandwidth-summary{grid-template-columns:repeat(3,1fr)}
.bandwidth-card.wide{padding:20px 24px}
.bandwidth-card.wide strong{font-size:34px}
.bandwidth-card.wide small{font-size:11px}


/* generate form */
.generate-form{display:grid;gap:20px}
.gen-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gen-row label{display:grid;gap:6px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.gen-field{display:grid;gap:11px}
.gen-field-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.gen-field-head label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.compact-input{width:150px;flex:none}
.compact-input input{font:700 14px "DM Sans";padding-right:64px}
.quick-row{display:flex;flex-wrap:wrap;gap:6px}
.quick{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:7px 13px;font:700 11.5px "DM Sans";color:var(--ink);cursor:pointer;transition:.15s}
.quick:hover{border-color:rgba(44,230,143,.45)}
.quick.is-active{border-color:var(--em);background:var(--em-dim);color:var(--em)}
.wide-slider{width:100%;flex:1 1 auto}
.generate-form .primary.slim{width:auto;min-width:170px;justify-self:start;margin:0;padding:12px 18px;font-size:13.5px;border-radius:10px;gap:10px}

/* proxy list */
.result-warning{margin:0 0 14px;padding:10px 12px;border:1px solid rgba(255,196,84,.25);border-radius:9px;background:rgba(255,196,84,.08);color:var(--warn);font-size:12px}
.proxy-list-actions{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.proxy-list-actions .download-link{background:transparent;cursor:pointer;font-family:inherit}
.proxy-list-actions #generation-result-count{margin-left:auto;color:var(--muted);font-size:11px}
.proxy-list{margin:0;max-height:340px;overflow:auto;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:14px 16px;
  font:12px/1.75 ui-monospace,SFMono-Regular,monospace;color:var(--ink);white-space:pre;user-select:text}
.proxy-list.is-empty{color:var(--muted);font-family:"DM Sans",sans-serif;text-align:center;padding:34px;user-select:auto}
@media(max-width:700px){.gen-row{grid-template-columns:1fr}.bandwidth-summary{grid-template-columns:1fr}.proxy-list-actions{flex-wrap:wrap}.proxy-list-actions #generation-result-count{margin-left:0}}

/* landing lede: it now carries the whole line on its own, so it gets more presence */
.intro .lede{font-size:21px;line-height:1.5;color:#c7d3e2;max-width:600px}
.intro .lede strong{color:var(--em);font-weight:600}

.usage-controls{display:flex;align-items:center;gap:14px}

/* connections */
.connection-row{display:flex;align-items:center;gap:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.connection-mark{width:40px;height:40px;flex:none;border-radius:10px;display:grid;place-items:center;background:#5865F2;color:#fff}
.connection-body{display:grid;gap:3px;min-width:0}
.connection-body strong{font:750 14px Manrope;color:var(--ink)}
.connection-body span{font-size:12px;color:var(--muted)}
.connection-body span.is-linked{color:var(--em)}
.connection-body span.is-warning{color:var(--warn)}
.connection-body span.is-error{color:var(--danger)}
.connection-actions{margin-left:auto;display:flex;align-items:center;gap:8px;white-space:nowrap}
.connection-actions .primary.slim{width:auto;min-width:0;margin:0;padding:10px 16px;font-size:13px;border-radius:9px;gap:9px}
#discord-notice{margin:14px 0 0}
@media(max-width:700px){.connection-row{flex-wrap:wrap}.connection-actions{margin-left:0;width:100%}}

/* usage chart */
.usage-plot{position:relative;height:240px;padding-left:56px}
.usage-grid{position:absolute;inset:0;pointer-events:none}
.usage-gridline{position:absolute;left:56px;right:0;border-top:1px solid rgba(255,255,255,.055)}
.usage-gridline.is-base{border-top-color:rgba(255,255,255,.13)}
.usage-gridlabel{position:absolute;left:0;width:46px;text-align:right;font-size:10px;color:var(--muted);opacity:.75;transform:translateY(-50%);white-space:nowrap}
.usage-bars{position:relative;height:100%;display:flex;align-items:flex-end;gap:4px}
.usage-bar{position:relative;flex:1 1 0;min-width:2px;height:100%;display:flex;align-items:flex-end;border-radius:6px 6px 0 0}
.usage-bar i{display:block;width:100%;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,rgba(44,230,143,.95),rgba(20,201,122,.45));transition:.15s}
.usage-bar.is-quiet i{background:rgba(255,255,255,.06);min-height:2px}
.usage-xlabels{display:flex;gap:4px;padding-left:56px;margin-top:9px}
.usage-xlabels span{flex:1 1 0;min-width:0;font-size:10px;color:var(--muted);opacity:.75;text-align:center;white-space:nowrap;overflow:visible}
@media(max-width:700px){.usage-plot{height:200px;padding-left:44px}.usage-gridline{left:44px}.usage-gridlabel{width:36px}.usage-xlabels{padding-left:44px}}

/* wordmark: white at the top edge fading into the accent, so the word picks up
   the emblem's colour without competing with it. Falls back to solid white if
   background-clip:text is unavailable, which would otherwise render nothing. */
.brand .wordmark{color:#fff}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .brand .wordmark{
    background:linear-gradient(180deg,#ffffff 24%,#63eeae 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}

/* header controls: three jobs, three weights. Dashboard leads, Sign out warns,
   Support stays quiet between them. */
.account-area{gap:10px}
.header-button{border:1px solid transparent;border-radius:999px;padding:8px 16px;font:700 12.5px "DM Sans";
  cursor:pointer;transition:.15s;white-space:nowrap;background:transparent}
.header-button.is-primary{background:var(--em);color:var(--em-ink)}
.header-button.is-primary:hover{background:#4dffab}
.header-button.is-quiet{border-color:var(--line);color:var(--muted);font-weight:600}
.header-button.is-quiet:hover{border-color:rgba(44,230,143,.5);color:var(--em)}
.header-button.is-danger{border-color:rgba(255,122,112,.35);color:var(--danger);font-weight:600}
.header-button.is-danger:hover{background:rgba(255,122,112,.12);border-color:var(--danger)}

/* support menu. The items sit flush under the trigger with no gap, so the
   pointer never crosses dead space on its way down. */
.support-menu{position:relative;display:inline-flex}
.support-menu-items{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);z-index:40;min-width:104px;
  display:flex;flex-direction:column;padding:3px;gap:1px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
  box-shadow:0 14px 32px rgba(0,0,0,.45)}
.support-menu-items::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.support-menu-items[hidden]{display:none}
.support-menu-item{display:flex;align-items:center;justify-content:center;gap:7px;padding:5px 8px;border-radius:6px;
  color:var(--ink);text-decoration:none;font:600 11px "DM Sans";transition:.12s}
.support-menu-item:hover{background:var(--em-dim);color:var(--em)}
.support-menu-item:focus-visible{outline:2px solid var(--em);outline-offset:-2px}
/* Centred, the menu overhangs the trigger on both sides. Near the right edge of
   a narrow screen that would run off the viewport, so pin it to the right there. */
@media(max-width:700px){.header-button{padding:7px 12px}
  .support-menu-items{min-width:100px;left:auto;right:0;transform:none}}

/* The signed-in customer gets a chip of their own rather than bare text, so the
   account reads as a distinct thing next to the three controls. */
.user-chip{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
  padding:5px 14px 5px 6px;font:600 12.5px "DM Sans";color:var(--ink);gap:8px}
.user-chip img{width:24px;height:24px;border-radius:50%;flex:none}

/* The generic `input,select{transition:.15s}` above is transition:all, which
   animates background-size — the property the fill is painted with. That is the
   fill visibly chasing the thumb. Range inputs opt out. */
.gb-slider{transition:none}
@media(max-width:700px){.user-chip span:last-child{display:none}.user-chip{padding:5px}}

/* One continuous hairline between invoices. The cells above had to stay
   display:table-cell for this to reach across every column. */
.transactions-table td{border-bottom:1px solid var(--line)}
.transactions-table tbody tr:last-child td{border-bottom:0}
.transactions-table tbody tr:hover td{background:rgba(255,255,255,.02)}

/* Refresh: the arrow spins while the request is in flight, so the control is
   visibly doing something even when the numbers come back unchanged. */
.text-button{display:inline-flex;align-items:center;gap:6px}
.text-button:disabled{cursor:default;opacity:.75}
.refresh-icon{width:13px;height:13px;flex:none;transform-origin:50% 50%}
.text-button.is-refreshing .refresh-icon{animation:refresh-spin .75s linear infinite}
@keyframes refresh-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.text-button.is-refreshing .refresh-icon{animation-duration:2.6s}}

/* Low balance: the warning rides the Dashboard tab, so it is visible from any
   panel rather than only once the customer goes looking for the number. */
.side-nav-item{display:flex;align-items:center;gap:8px}
/* Only the triangle carries the warning colour; recolouring the label too made
   the tab shout from every other panel. */
.nav-warning{position:relative;display:inline-flex;flex:none;margin-left:auto}
.nav-warning + .nav-warning{margin-left:6px}
.nav-warning svg{width:14px;height:14px}
.warn-res{color:#facc15}
.warn-mob{color:#4fa8ff}
.nav-tip{display:none;position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 6px);white-space:nowrap;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 9px;font:600 11px "DM Sans";color:var(--ink);z-index:20;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.nav-warning:hover .nav-tip{display:block}

/* Headroom for the value labels. Padding rather than margin: a top margin here
   collapses through .usage-plot and moves nothing. box-sizing is border-box
   globally, so the bars still occupy the full height and the gridlines, offset
   by the same 18px, stay aligned with the bar tops. */
.usage-bars{height:100%;padding-top:18px}
.usage-grid{inset:18px 0 0 0}
.usage-value{position:absolute;left:50%;transform:translateX(-50%);margin-bottom:4px;
  font-size:10px;font-weight:600;color:var(--muted);white-space:nowrap;pointer-events:none}

/* Google renders the sign-in button in a cross-origin iframe, so only its own
   theme option reaches the button itself. The white rectangle around it comes
   from elsewhere: :root sets color-scheme:dark, which Chrome inherits into the
   iframe and then paints an opaque light canvas behind Google's transparent
   document. Resetting the scheme on the iframe alone lets the header show
   through, and leaves the rest of the page's dark scheme untouched. */
#google-button iframe{color-scheme:normal}
.auth-dialog{width:min(440px,calc(100% - 28px));padding:0;border:1px solid var(--line);border-radius:20px;background:transparent;color:var(--ink);box-shadow:0 30px 90px rgba(0,0,0,.7)}
.auth-dialog::backdrop{background:rgba(5,10,15,.78);backdrop-filter:blur(5px)}
.auth-dialog-card{position:relative;background:var(--paper);border-radius:19px;padding:30px}
.auth-dialog-card h2{font:750 24px Manrope;margin:0 0 22px}
.auth-dialog-close{position:absolute;top:14px;right:16px;border:0;background:transparent;color:var(--muted);font-size:27px;line-height:1;cursor:pointer}
.auth-dialog-close:hover{color:var(--ink)}
.auth-form{display:grid;gap:15px}
.auth-form label{display:grid;gap:7px;font-size:12px;font-weight:700}
.auth-form label small{font-size:10px;font-weight:400;color:var(--muted)}
.auth-form .notice{margin:0}
.auth-submit{margin-top:3px}
.auth-switch{text-align:center;color:var(--muted);font-size:12px;margin:18px 0 0}
.auth-switch button,.auth-resend{border:0;background:transparent;color:var(--em);font:700 12px "DM Sans";cursor:pointer;padding:0}
.auth-resend{display:block;margin:15px auto 0}
.auth-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em;margin:18px 0}
.auth-divider::before,.auth-divider::after{content:"";height:1px;background:var(--line);flex:1}
.google-button-dialog{display:flex;justify-content:center;min-height:40px}
.signin-controls{display:flex;align-items:center;gap:10px}
.signin-actions{display:flex;align-items:center;gap:10px}
.legal-consent{display:flex;align-items:flex-start;gap:7px;max-width:360px;color:var(--muted);font-size:10px;line-height:1.35}
.legal-consent input{width:15px;height:15px;flex:none;margin:0;accent-color:var(--em)}
.legal-consent a,.site-footer a{color:var(--ink);text-underline-offset:2px}
.legal-consent a:hover,.site-footer a:hover{color:var(--em)}
#google-button.is-disabled{opacity:.42;pointer-events:none;filter:grayscale(.35)}
.site-footer{border-top:1px solid var(--line)}
.site-footer nav{display:flex;gap:16px}
@media(max-width:900px){.topbar{height:auto;min-height:82px;padding-block:12px}.account-area{flex-wrap:wrap;justify-content:flex-end}.signin-controls{align-items:flex-end;flex-direction:column}.legal-consent{max-width:310px}}
@media(max-width:700px){#support-button,#google-button{display:none}.auth-dialog-card{padding:26px 22px}.account-area{gap:7px}.account-area>.secure-label{display:none}.header-button,.ghost-button{padding:7px 10px}}
@media(max-width:560px){.account-area .ghost-button{display:none}.legal-consent{max-width:235px}.site-footer{height:auto;padding-block:18px}}
.legal-topbar{height:82px}
.legal-page{width:min(900px,calc(100% - 40px));padding:64px 0 80px}
.legal-hero{margin-bottom:28px}
.legal-hero h1{font:800 clamp(34px,5vw,54px)/1.08 Manrope;margin:0 0 14px;letter-spacing:-.04em}
.legal-hero>p:last-child{color:var(--muted);font-size:13px}
.legal-card{background:rgba(24,32,43,.92);border:1px solid rgba(255,255,255,.06);border-radius:22px;padding:clamp(24px,5vw,54px);box-shadow:0 24px 70px rgba(0,0,0,.35)}
.legal-card h2{font:750 22px Manrope;margin:38px 0 12px;color:var(--ink)}
.legal-card h2:first-of-type{margin-top:32px}
.legal-card h3{font:700 16px Manrope;margin:24px 0 8px}
.legal-card p,.legal-card li{color:#b8c4d2;font-size:15px;line-height:1.75}
.legal-card p{margin:0 0 16px}
.legal-card ul{padding-left:24px;margin:8px 0 20px}
.legal-card li+li{margin-top:7px}
.legal-card a{color:var(--em);text-underline-offset:3px}
.legal-card a:hover{color:#73f5b8}
.site-footer a[aria-current="page"]{color:var(--em)}
@media(max-width:560px){.legal-page{width:min(100% - 24px,900px);padding:38px 0 56px}.legal-card{padding:23px;border-radius:16px}.legal-card p,.legal-card li{font-size:14px}.legal-topbar{height:70px}}
/* Overview v2: per-pool gauges, active proxies, activity feed */
.pool-card{display:flex;gap:16px;align-items:center}
.pool-gauge{width:86px;height:86px;flex:none}
.gauge-track{fill:none;stroke:#232e3c;stroke-width:8}
.gauge-fill{fill:none;stroke-width:8;stroke-linecap:round;stroke-dasharray:238.76;stroke-dashoffset:238.76;transition:stroke-dashoffset .5s ease}
.gauge-res{stroke:#facc15}
.gauge-mob{stroke:#4fa8ff}
.pool-gauge text{fill:var(--ink);font:800 15px Manrope,"DM Sans"}
.pool-body{display:grid;gap:6px}
.pool-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}
.pool-dot-res{background:#facc15}
.pool-dot-mob{background:#4fa8ff}
.card-split{border-top:1px solid #232e3c;margin-top:4px;padding-top:10px;display:grid;gap:4px}
.card-split strong{font:800 18px Manrope}
.overview-lower{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:18px}
.overview-side{display:grid;gap:14px;align-content:start}
.overview-side article{padding:14px 18px}
.overview-lower article{background:rgba(24,32,43,.92);border:1px solid rgba(255,255,255,.06);box-shadow:0 10px 35px rgba(0,0,0,.35);border-radius:16px;padding:18px 20px;display:grid;gap:8px;align-content:start}
.overview-lower span{font-size:12px;color:var(--muted)}
.overview-lower strong{font:800 27px Manrope}
.bandwidth-summary small,.overview-lower small{font-size:11px;color:var(--muted)}
.feed-card h4{margin:0 0 4px;font:750 15px Manrope}
.feed-card ul{list-style:none;margin:0;padding:0;display:grid}
.feed-card li{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid #232e3c;font-size:12.5px}
.feed-card li:last-child{border-bottom:0}
.feed-dot{width:8px;height:8px;border-radius:50%;flex:none}
.feed-buy{background:var(--em)}
.feed-gen{background:#4fa8ff}
.feed-dis{background:#5865f2}
.feed-warn{background:var(--warn)}
.feed-card li small{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}
.feed-empty{color:var(--muted);justify-content:center}
@media(max-width:700px){.overview-lower{grid-template-columns:1fr}}
.centered-card{text-align:center;justify-items:center}
.centered-card .card-split{justify-items:center}
.stat-stack{display:grid;align-content:center;padding:8px 20px}
.stat-stack .stat-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #232e3c}
.stat-stack .stat-row:last-child{border-bottom:0}
.stat-stack .stat-row span{font-size:11.5px;color:var(--muted)}
.stat-stack .stat-row strong{font:800 15px Manrope;white-space:nowrap}
.pool-body strong{font-size:21px}
.summary-grid .pool-val{font:inherit;color:inherit;white-space:nowrap}
#dashboard-title span{color:var(--em)}
.account-banner{display:flex;gap:16px;align-items:center}
.account-avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--em),var(--lime-dark));display:grid;place-items:center;font:800 22px Manrope;color:var(--em-ink);flex:none}
.account-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.account-ident{display:grid;gap:3px}
.account-ident b{font:750 17px Manrope}
.account-sub{color:var(--muted);font-size:13px}
.account-sub.small{font-size:11.5px}
.account-chip{margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.account-chip i{width:8px;height:8px;border-radius:50%;background:var(--em)}
.dashboard-panel .account-banner{border-bottom:1px solid #232e3c;padding-bottom:16px;margin-bottom:16px}
/* availability bubble: one line, centred; yellow while purchases are paused */
.availability{flex:none;white-space:nowrap;line-height:1;padding:7px 10px}
.availability.paused{color:#f5e663;background:rgba(245,230,99,.11);border-color:rgba(245,230,99,.36)}
.availability.paused i{background:#f5e663}

/* Consent controls. Optional categories are off until the visitor makes an
   affirmative choice; accept and reject have equal visual weight. */
.cookie-consent{position:fixed;z-index:1100;left:20px;right:20px;bottom:20px;margin:auto;width:min(1080px,calc(100% - 40px));display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px;padding:22px 24px;background:rgba(24,32,43,.98);border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.62);backdrop-filter:blur(16px)}
.cookie-consent-copy h2,.cookie-preferences-card h2{font:750 20px Manrope;margin:0 0 8px}
.cookie-consent-copy .step-label{margin-bottom:5px}
.cookie-consent-copy>p:last-child,.cookie-preferences-intro{margin:0;color:var(--muted);font-size:12.5px;line-height:1.55;max-width:700px}
.cookie-consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:300px}
.cookie-action{border:1px solid var(--em);border-radius:10px;padding:10px 14px;background:transparent;color:var(--em);font:750 12px "DM Sans";cursor:pointer}
.cookie-action:hover{background:var(--em-dim)}
.cookie-action-primary{background:var(--em);color:var(--em-ink)}
.cookie-action-primary:hover{background:#4dffab}
.cookie-link{grid-column:1/-1;border:0;background:transparent;color:var(--muted);font:650 11px "DM Sans";cursor:pointer;padding:5px}
.cookie-link:hover{color:var(--ink)}
.cookie-settings-button{position:fixed;z-index:100;left:14px;bottom:14px;border:1px solid var(--line);border-radius:999px;padding:7px 11px;background:var(--surface);color:var(--muted);font:650 10.5px "DM Sans";cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.cookie-settings-button:hover{color:var(--em);border-color:rgba(44,230,143,.5)}
.cookie-preferences-dialog{width:min(570px,calc(100% - 28px));padding:0;border:1px solid var(--line);border-radius:20px;background:transparent;color:var(--ink);box-shadow:0 30px 90px rgba(0,0,0,.7)}
.cookie-preferences-dialog::backdrop{background:rgba(5,10,15,.78);backdrop-filter:blur(5px)}
.cookie-preferences-card{position:relative;margin:0;padding:28px;background:var(--paper);border-radius:19px}
.cookie-dialog-close{position:absolute;top:13px;right:15px;border:0;background:transparent;color:var(--muted);font-size:27px;line-height:1;cursor:pointer}
.cookie-dialog-close:hover{color:var(--ink)}
.cookie-preferences-intro{margin-bottom:20px}
.cookie-category{display:flex;align-items:center;gap:18px;padding:14px 0;border-top:1px solid var(--line);cursor:pointer}
.cookie-category>div{display:grid;gap:4px;flex:1}
.cookie-category strong{font:700 13px Manrope}
.cookie-category span{color:var(--muted);font-size:11.5px;line-height:1.45}
.cookie-category input{appearance:none;width:42px;height:23px;flex:none;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);cursor:pointer;position:relative;transition:.15s}
.cookie-category input::after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:var(--muted);transition:.15s}
.cookie-category input:checked{border-color:var(--em);background:var(--em)}
.cookie-category input:checked::after{left:22px;background:var(--em-ink)}
.cookie-category input:disabled{opacity:.65;cursor:not-allowed}
.cookie-save{width:100%;margin-top:8px}
@media(max-width:720px){.cookie-consent{left:12px;right:12px;bottom:12px;width:calc(100% - 24px);grid-template-columns:1fr;gap:18px;padding:20px}.cookie-consent-actions{min-width:0}.cookie-preferences-card{padding:24px 20px}.cookie-settings-button{left:10px;bottom:10px}}
/* account banner: wrap long names; sign-in chip under them on phones */
.account-ident{min-width:0}
.account-ident b,.account-sub{overflow-wrap:anywhere}
@media(max-width:560px){.account-banner{flex-wrap:wrap}.account-chip{margin-left:72px}}