* { box-sizing:border-box; }
:root { --bg:#07111f; --panel:#0b192b; --panel2:#10223a; --text:#f6f8fb; --muted:#9fb0c5; --line:rgba(255,255,255,.09); --accent:#6ea8ff; --accent2:#9cc3ff; --green:#78d6a1; --danger:#ff8c8c; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:radial-gradient(circle at 78% 9%,rgba(110,168,255,.09),transparent 26%),var(--bg); color:var(--text); }
body.modal-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { cursor:pointer; }
.nav { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; max-width:1220px; margin:0 auto; padding:20px 28px; background:rgba(7,17,31,.84); backdrop-filter:blur(16px); }
.logo { font-weight:800; font-size:22px; letter-spacing:-.03em; }
.nav-links { display:flex; align-items:center; gap:18px; font-size:14px; color:var(--muted); }
.nav-links a:hover,.nav-link-button:hover { color:var(--text); }
.nav-link-button { border:0; background:transparent; color:var(--muted); padding:8px 4px; }
.nav-link-button:last-child { padding:11px 16px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:rgba(255,255,255,.04); }
.customer-name { color:#d8e0eb; font-weight:650; }
.hero { max-width:1220px; margin:0 auto; padding:74px 28px 70px; display:grid; grid-template-columns:minmax(0,1fr) minmax(520px,1.02fr); gap:46px; align-items:center; }
.hero-copy { min-width:0; }
.eyebrow,.modal-eyebrow { font-size:12px; letter-spacing:.16em; font-weight:800; color:var(--accent2); }
h1 { margin:18px 0 20px; max-width:680px; font-size:clamp(48px,6.2vw,78px); line-height:.97; letter-spacing:-.055em; }
.hero-text { max-width:620px; margin:0; font-size:19px; line-height:1.65; color:var(--muted); }
.hero-actions { display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; border-radius:10px; font-weight:750; border:1px solid var(--line); }
.primary { background:#f4f7fb; color:#07111f; }
.secondary { background:transparent; color:var(--text); }
.trust-row { display:flex; gap:22px; margin-top:26px; flex-wrap:wrap; color:#c9d4e3; font-size:13px; }
.trust-row span::before { content:'✓'; margin-right:7px; color:var(--accent2); }
.proxy-list-panel { min-width:0; background:linear-gradient(180deg,rgba(16,34,58,.98),rgba(8,22,38,.98)); border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:18px; box-shadow:0 28px 90px rgba(0,0,0,.32); overflow:hidden; }
.panel-top { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:4px 4px 16px; border-bottom:1px solid var(--line); }
.panel-title { font-size:16px; font-weight:750; }
.panel-subtitle { margin-top:4px; color:var(--muted); font-size:11px; }
.live { display:inline-flex; align-items:center; gap:7px; color:#a7e2bf; font-size:10px; font-weight:800; letter-spacing:.12em; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(120,214,161,.09); display:inline-block; }
.proxy-toolbar { display:grid; grid-template-columns:1.1fr 1.5fr .9fr; gap:8px; margin:14px 0; }
.toolbar-select,.toolbar-search,.toolbar-filter { min-width:0; height:36px; display:flex; align-items:center; padding:0 11px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.035); color:#b9c6d7; font-size:11px; }
.toolbar-select,.toolbar-filter { justify-content:space-between; }
.toolbar-search { color:#718198; }
.row { display:grid; grid-template-columns:1.35fr .48fr 1.1fr 1fr .82fr .3fr; gap:8px; align-items:center; }
.proxy-head { padding:9px 10px; color:#72839a; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.proxy-row { padding:11px 10px; border-top:1px solid rgba(255,255,255,.065); color:#dbe4ef; font-size:10px; }
.proxy-row:hover { background:rgba(255,255,255,.025); }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:#c9d7e8; }
.online { color:var(--green); text-align:center; font-size:12px; }
.proxy-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:10px; padding:11px 10px 2px; color:#74869d; font-size:10px; }
.proxy-footer strong { color:#dbe4ef; }
.section { max-width:1220px; margin:0 auto; padding:88px 28px; }
.section-head h2,.split h2 { margin:14px 0 0; font-size:clamp(36px,5vw,58px); letter-spacing:-.045em; line-height:1.02; }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px; }
.feature { padding:24px; min-height:230px; background:linear-gradient(180deg,rgba(16,34,58,.95),rgba(11,26,45,.95)); border:1px solid var(--line); border-radius:20px; }
.icon { font-size:12px; font-weight:800; color:var(--accent2); }
.feature h3 { margin:22px 0 10px; font-size:20px; letter-spacing:-.02em; }
.feature p,.section-text { margin:0; color:var(--muted); line-height:1.65; }
.split { display:grid; grid-template-columns:1fr .7fr; gap:70px; align-items:center; }
.pricing-card { padding:28px; max-width:440px; justify-self:end; width:100%; background:linear-gradient(180deg,rgba(16,34,58,.95),rgba(11,26,45,.95)); border:1px solid var(--line); border-radius:20px; }
.small-label { font-size:11px; color:var(--accent2); letter-spacing:.14em; font-weight:800; }
.dashboard-list { margin-top:16px; }
.dashboard-list div { padding:12px 0; border-top:1px solid var(--line); color:#d8e0eb; font-size:14px; }
.full { width:100%; margin-top:18px; }
.cta { max-width:1220px; margin:20px auto 80px; padding:48px; display:flex; align-items:end; justify-content:space-between; gap:30px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(135deg,#0d1b2f,#122942); }
.cta h2 { max-width:720px; margin:14px 0 0; font-size:clamp(36px,5vw,58px); letter-spacing:-.045em; line-height:1.02; }
.cta p { margin-top:12px; color:var(--muted); line-height:1.65; }
.light { background:#fff; color:#07111f; }
.footer { max-width:1220px; margin:0 auto; padding:0 28px 40px; display:flex; justify-content:space-between; gap:20px; color:#7f91a8; font-size:12px; }
.modal { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:24px; }
.modal.is-open { display:flex; }
.modal-backdrop { position:absolute; inset:0; background:rgba(1,7,15,.74); backdrop-filter:blur(10px); }
.modal-dialog { position:relative; width:min(100%,460px); max-height:min(720px,calc(100vh - 48px)); overflow:auto; padding:34px; background:linear-gradient(180deg,#10223a,#0a1728); border:1px solid rgba(255,255,255,.12); border-radius:24px; box-shadow:0 40px 120px rgba(0,0,0,.5); animation:modal-in .18s ease-out; }
@keyframes modal-in { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
.modal-close { position:absolute; top:15px; right:15px; width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.04); color:#cbd6e4; font-size:25px; line-height:1; }
.modal-close:hover { background:rgba(255,255,255,.08); color:#fff; }
.modal-dialog h2 { margin:12px 0 8px; font-size:38px; letter-spacing:-.04em; }
.modal-copy { margin:0 0 26px; color:var(--muted); line-height:1.6; }
.modal-dialog form { display:grid; gap:16px; }
.modal-dialog label { display:grid; gap:8px; color:#d8e0eb; font-size:13px; font-weight:650; }
.modal-dialog input { width:100%; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.045); color:#fff; padding:14px 15px; outline:none; }
.modal-dialog input::placeholder { color:#708198; }
.modal-dialog input:focus { border-color:rgba(110,168,255,.75); box-shadow:0 0 0 3px rgba(110,168,255,.1); }
.modal-dialog .primary { border-color:rgba(255,255,255,.18); }
.modal-switch { margin-top:18px; text-align:center; font-size:13px; color:var(--muted); }
.modal-switch button,.text-button { border:0; background:transparent; color:var(--accent2); padding:0; font-weight:700; }
.text-button:hover { text-decoration:underline; }
.signin-options { display:flex; justify-content:flex-end; margin-top:-4px; }
.form-message { min-height:18px; color:#8ea0b6; font-size:13px; line-height:1.4; }
.form-message.success { color:#9de0b8; }
.form-message.error { color:#ff9f9f; }
button:disabled { cursor:not-allowed; opacity:.65; }
.dashboard-page { min-height:100vh; }
.dashboard-nav { position:sticky; top:0; z-index:30; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px; max-width:1360px; margin:0 auto; padding:16px 28px; background:rgba(7,17,31,.92); border-bottom:1px solid rgba(255,255,255,.07); backdrop-filter:blur(16px); }
.dashboard-links { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:20px; font-size:12px; color:#92a3b9; }
.dashboard-links a { padding:7px 0 9px; border-bottom:2px solid transparent; }
.dashboard-links a:hover,.dashboard-links a.active { color:#fff; border-color:var(--accent); }
.dashboard-account { display:flex; align-items:center; gap:10px; color:#d8e0eb; font-size:12px; white-space:nowrap; }
.balance-pill { color:#fff; font-weight:800; }
.icon-button { width:30px; height:30px; border:0; color:#9db0c7; background:transparent; border-radius:8px; }
.icon-button:hover { color:#fff; background:rgba(255,255,255,.05); }
.proxy-console { max-width:1360px; margin:0 auto; padding:46px 28px 74px; }
.proxy-console-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.proxy-console-head h1 { margin:10px 0 8px; font-size:clamp(38px,4vw,56px); max-width:none; }
.proxy-console-head p { max-width:700px; margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
.console-head-actions { display:flex; gap:10px; flex-shrink:0; }
.count-badge { display:inline-flex; min-width:20px; height:20px; align-items:center; justify-content:center; margin-left:8px; padding:0 6px; border-radius:999px; background:#dce8f8; color:#07111f; font-size:10px; }
.region-strip { display:flex; gap:9px; flex-wrap:wrap; padding:12px; background:rgba(9,23,39,.7); border:1px solid var(--line); border-radius:12px 12px 0 0; }
.region-chip { border:1px solid transparent; background:transparent; color:#8ea2ba; padding:7px 10px; border-radius:7px; font-size:11px; }
.region-chip:hover { color:#fff; background:rgba(255,255,255,.04); }
.region-chip.active { color:#fff; background:#12345f; border-color:rgba(110,168,255,.2); }
.region-chip strong { margin-left:7px; color:#7fb3ff; font-size:10px; }
.state-strip { display:flex; gap:15px; flex-wrap:wrap; padding:12px 14px 14px; background:rgba(8,20,34,.86); border:1px solid var(--line); border-top:0; color:#9baec2; font-size:10px; line-height:1.4; }
.filter-bar { display:flex; align-items:end; gap:8px; flex-wrap:wrap; margin:14px 0; padding:10px; background:rgba(11,25,43,.86); border:1px solid var(--line); border-radius:12px; }
.filter-button { height:42px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.035); color:#b8c6d6; font-size:11px; }
.filter-field { flex:1 1 135px; min-width:110px; }
.filter-field.wide { flex-basis:190px; }
.filter-field span,.filter-select span { display:block; margin:0 0 4px 2px; color:#6f8198; font-size:8px; letter-spacing:.08em; }
.filter-field input,.filter-select select { width:100%; height:32px; padding:0 9px; border:1px solid var(--line); border-radius:7px; background:#071524; color:#d8e3ef; outline:none; font-size:10px; }
.filter-field input::placeholder { color:#677a91; }
.filter-select { width:110px; }
.reset-filter { align-self:end; height:32px; padding:0 8px; border:0; background:transparent; color:#7faef2; font-size:10px; }
.dashboard-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:14px; align-items:start; }
.console-main { min-width:0; }
.table-card,.owned-card,.side-card,.dashboard-sections article { background:linear-gradient(180deg,rgba(13,29,49,.97),rgba(8,20,34,.97)); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.table-topline { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 18px; border-bottom:1px solid var(--line); }
.table-topline h2 { margin:7px 0 0; font-size:20px; letter-spacing:-.03em; }
.table-meta { display:flex; align-items:center; gap:15px; color:#7f92a9; font-size:10px; }
.table-meta strong { color:#dfe8f1; }
.live-inline { display:flex; align-items:center; gap:6px; color:#95dbb5; font-weight:800; letter-spacing:.08em; }
.live-inline span { width:7px; height:7px; border-radius:50%; background:var(--green); }
.proxy-table-wrap,.owned-table-wrap { overflow:auto; }
.proxy-table,.owned-table { width:100%; border-collapse:collapse; min-width:920px; }
.proxy-table th,.owned-table th { padding:10px 10px; background:rgba(255,255,255,.035); color:#6e8198; font-size:8px; text-transform:uppercase; letter-spacing:.08em; text-align:left; white-space:nowrap; }
.proxy-table td { padding:10px; border-top:1px solid rgba(255,255,255,.055); color:#d7e1ec; font-size:10px; white-space:nowrap; }
.proxy-table tr { transition:background .12s ease; }
.proxy-table tbody tr:hover,.proxy-table tbody tr.selected { background:rgba(70,125,197,.08); }
.proxy-table td:nth-child(2) { color:#9bb0c7; }
.price-cell { font-weight:800; color:#f2f5f8 !important; }
.ping-cell { color:#a9b8c9 !important; }
.type-chip { display:inline-flex; padding:4px 6px; border:1px solid var(--line); border-radius:6px; color:#b6c6d8; background:rgba(255,255,255,.03); font-size:9px; }
.add-row { width:26px; height:26px; border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.03); color:#b6c9df; font-size:16px; line-height:1; }
.add-row:hover { background:rgba(255,255,255,.08); color:#fff; }
.table-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 14px; color:#6f8197; font-size:9px; }
.page-size { display:flex; align-items:center; gap:4px; }
.page-size span { margin-right:3px; }
.page-btn { min-width:26px; height:24px; border:1px solid var(--line); border-radius:5px; background:transparent; color:#9aacc0; font-size:9px; }
.page-btn.active { background:#17365e; color:#fff; border-color:rgba(110,168,255,.25); }
.proxy-side-panel { display:grid; gap:14px; position:sticky; top:80px; }
.side-card { padding:14px; }
.side-card-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid var(--line); color:#c7d5e5; font-size:10px; font-weight:800; letter-spacing:.05em; }
.side-card-head strong { color:#72859c; text-transform:none; letter-spacing:0; font-weight:600; }
.cart-empty { padding:24px 6px; color:#6f8198; font-size:11px; line-height:1.5; }
.cart-lines { margin-top:10px; }
.cart-line { display:grid; grid-template-columns:1fr auto auto; gap:6px; align-items:center; padding:10px 0; border-top:1px solid var(--line); color:#d9e3ed; font-size:10px; }
.cart-line small { display:block; margin-top:3px; color:#74879e; }
.cart-line button { border:0; background:transparent; color:#7b8ea3; font-size:15px; }
.side-tabs { display:flex; gap:20px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.side-tabs button { padding:0 0 6px; border:0; border-bottom:2px solid transparent; background:transparent; color:#76889e; font-size:9px; font-weight:750; }
.side-tabs button.active { color:#fff; border-color:var(--accent); }
.detail-card .small-label { display:block; margin-top:18px; }
.detail-card h3 { margin:8px 0 14px; font-size:18px; letter-spacing:-.03em; }
.detail-lines div { display:flex; justify-content:space-between; gap:15px; padding:9px 0; border-top:1px solid rgba(255,255,255,.05); font-size:10px; }
.detail-lines span { color:#71839a; }
.detail-lines strong { max-width:160px; color:#dce6f0; font-weight:650; text-align:right; overflow-wrap:anywhere; }
.owned-card { margin-top:14px; }
.status-badge { display:inline-flex; align-items:center; padding:7px 9px; border-radius:999px; border:1px solid var(--line); color:#8fa0b3; font-size:9px; white-space:nowrap; }
.owned-table { min-width:1200px; }
.owned-table td { padding:9px 10px; border-top:1px solid rgba(255,255,255,.055); color:#cbd7e3; font-size:10px; white-space:nowrap; }
.owned-table td small { display:block; margin-top:3px; color:#6f8197; }
.proxy-url-cell { display:flex; align-items:center; gap:8px; }
.proxy-url-cell code { max-width:330px; overflow:hidden; text-overflow:ellipsis; color:#bcd0e6; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; }
.mini-copy { height:24px; padding:0 7px; border:1px solid var(--line); border-radius:5px; background:rgba(255,255,255,.03); color:#9ab0c8; font-size:8px; }
.mini-copy:hover { color:#fff; background:rgba(255,255,255,.07); }
.online-text { color:#8fdeb2; }
.switch { position:relative; display:inline-flex; width:30px; height:16px; }
.switch input { position:absolute; opacity:0; pointer-events:none; }
.switch span { position:absolute; inset:0; border-radius:999px; background:#25384f; border:1px solid var(--line); }
.switch span::after { content:''; position:absolute; width:10px; height:10px; top:2px; left:2px; border-radius:50%; background:#8090a1; transition:.15s; }
.switch input:checked + span { background:#234d3c; }
.switch input:checked + span::after { left:16px; background:#7bd5a4; }
.owned-note { padding:12px 14px; color:#6f8299; font-size:9px; line-height:1.5; border-top:1px solid var(--line); }
.owned-note strong { color:#a8bad0; }
.dashboard-sections { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
.dashboard-sections article { padding:20px; }
.dashboard-sections h2 { margin:8px 0 8px; font-size:18px; }
.dashboard-sections p { margin:0; color:#7f91a6; font-size:11px; line-height:1.6; min-height:53px; }
.dashboard-sections .btn { margin-top:12px; min-height:38px; padding:0 14px; font-size:10px; }
@media (max-width:1200px) { .dashboard-layout { grid-template-columns:1fr; } .proxy-side-panel { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); } .cart-card { order:1; } .detail-card { order:2; } }
@media (max-width:1050px) { .hero { grid-template-columns:1fr; } .proxy-list-panel { max-width:none; } .feature-grid { grid-template-columns:repeat(2,1fr); } .split { grid-template-columns:1fr; } .pricing-card { justify-self:start; } .dashboard-nav { grid-template-columns:auto 1fr; } .dashboard-links { order:3; grid-column:1 / -1; justify-content:flex-start; overflow:auto; flex-wrap:nowrap; padding-bottom:2px; } }
@media (max-width:780px) { .proxy-console { padding-left:18px; padding-right:18px; } .dashboard-nav { padding:13px 18px; } .dashboard-links { gap:16px; font-size:10px; } .dashboard-account span:nth-child(2) { display:none; } .proxy-console-head { align-items:flex-start; flex-direction:column; } .filter-bar { align-items:stretch; } .filter-field,.filter-field.wide,.filter-select { flex:1 1 calc(50% - 8px); width:auto; } .proxy-side-panel { grid-template-columns:1fr; } .dashboard-sections { grid-template-columns:1fr; } }
@media (max-width:700px) { .hero { padding-top:56px; padding-left:20px; padding-right:20px; } h1 { font-size:50px; } .section { padding:70px 20px; } .feature-grid { grid-template-columns:1fr; } .nav { padding:18px 20px; } .nav-links { gap:8px; } .nav-links a { display:none; } .nav-link-button:last-child { padding:9px 12px; } .proxy-list-panel { padding:12px; } .proxy-toolbar { grid-template-columns:1fr; } .row { grid-template-columns:1.45fr .45fr 1fr .9fr .72fr .25fr; gap:5px; } .proxy-head,.proxy-row { padding-left:6px; padding-right:6px; } .proxy-head { font-size:8px; } .proxy-row { font-size:9px; } .proxy-row span:nth-child(4),.proxy-head span:nth-child(4) { display:none; } .proxy-footer { flex-direction:column; align-items:flex-start; } .modal { padding:14px; } .modal-dialog { padding:28px 22px; } .cta { margin:0 20px 50px; padding:30px; flex-direction:column; align-items:flex-start; } .footer { padding-left:20px; padding-right:20px; flex-direction:column; } .dashboard-shell { padding:56px 20px 70px; } .dashboard-grid { grid-template-columns:1fr; } .dashboard-card.wide { grid-column:auto; } .card-top { flex-direction:column; } }