:root { --ink:#18233c; --muted:#69758d; --line:#dfe6f2; --blue:#3266ff; --blue-dark:#1d4ed8; --background:#f6f8fc; --success:#087a5a; --warn:#ab6400; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--background); }
* { box-sizing:border-box; }
body { min-width:320px; min-height:100vh; margin:0; background:radial-gradient(circle at 12% -5%,#dce8ff 0,transparent 30rem),radial-gradient(circle at 100% 0,#e2f8f0 0,transparent 26rem),var(--background); }
button,input,select { font:inherit; } button { cursor:pointer; }
.page-shell { width:min(1080px,calc(100% - 40px)); margin:0 auto; padding:62px 0 72px; }
.hero { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; }
.brand-mark { display:grid; width:48px; height:48px; place-items:center; border-radius:14px; color:white; background:linear-gradient(135deg,#356cff,#7b4dff); font-size:25px; font-weight:800; box-shadow:0 10px 28px rgb(50 102 255 / 24%); }
.eyebrow,.step { margin:0 0 5px; color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.13em; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:5px; font-size:clamp(28px,4vw,38px); letter-spacing:-.04em; } h2 { margin-bottom:0; font-size:20px; letter-spacing:-.025em; }
.intro { margin-bottom:0; color:var(--muted); font-size:15px; }
.connection-state,.count-badge { padding:8px 11px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:rgb(255 255 255 / 72%); font-size:12px; font-weight:700; white-space:nowrap; }
.connection-state.ready { border-color:#b8e4d7; color:var(--success); background:#f2fcf8; }.connection-state.missing,.connection-state.error { border-color:#ffd9a0; color:var(--warn); background:#fff9ed; }
.notice { display:flex; align-items:flex-start; gap:10px; margin:30px 0 16px; padding:12px 15px; border:1px solid #dbe5fc; border-radius:13px; color:#4b5b78; background:rgb(248 251 255 / 82%); font-size:13px; line-height:1.55; }.notice span { color:var(--blue); font-size:16px; }.notice p { margin:0; }
.payment-panel { margin-bottom:16px; padding:22px; border:1px solid #dbe5fc; border-radius:16px; background:rgb(255 255 255 / 84%); box-shadow:0 10px 30px rgb(31 55 100 / 5%); }.payment-panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.payment-panel-heading h2 { font-size:18px; }.payment-panel-heading p:not(.step) { margin:7px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }.payment-availability { flex:0 0 auto; padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:#fff; font-size:11px; font-weight:800; white-space:nowrap; }.payment-availability.ready { border-color:#b8e4d7; color:var(--success); background:#f2fcf8; }.payment-availability.unavailable { border-color:#ffd9a0; color:var(--warn); background:#fff9ed; }.payment-status { margin:17px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }.payment-status.success { color:var(--success); }.payment-status.error { color:#ad453e; }.payment-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }.payment-products[hidden] { display:none; }.payment-product { display:grid; grid-template-columns:1fr auto; gap:12px; padding:16px; border:1px solid #dce5f4; border-radius:14px; background:linear-gradient(135deg,#fff,#fafcff); }.payment-product-copy { min-width:0; }.payment-product h3 { margin:0; color:#1f315b; font-size:15px; letter-spacing:-.02em; overflow-wrap:anywhere; }.payment-product p { margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.45; overflow-wrap:anywhere; }.payment-price { justify-self:end; color:#1d4ed8; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; white-space:nowrap; }.payment-button { grid-column:1/-1; width:100%; min-height:38px; font-size:12px; }
.access-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.8fr); align-items:end; gap:22px; margin-bottom:16px; padding:20px 22px; border:1px solid #dbe5fc; border-radius:16px; background:rgb(255 255 255 / 84%); box-shadow:0 10px 30px rgb(31 55 100 / 5%); }.access-panel h2 { font-size:18px; }.access-panel p:not(.step):not(.access-status) { margin:7px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }.access-form label { display:block; margin-bottom:7px; color:#4d5c77; font-size:12px; font-weight:750; }.access-input-row { display:flex; gap:9px; }.access-input-row input { width:100%; min-width:0; height:42px; padding:0 12px; border:1px solid var(--line); border-radius:10px; outline:none; color:var(--ink); background:#fff; }.access-input-row input:focus { border-color:#7ba0ff; box-shadow:0 0 0 3px rgb(50 102 255 / 12%); }.access-input-row .primary-button { flex:0 0 auto; min-height:42px; white-space:nowrap; }.access-status { grid-column:1/-1; margin:0; color:var(--muted); font-size:12px; }.access-status.error { color:#ad453e; }.access-status.success { color:var(--success); }
.feedback { margin:0 0 16px; padding:11px 14px; border:1px solid #bde4d7; border-radius:12px; color:var(--success); background:#f2fcf8; font-size:13px; }.feedback.error { border-color:#ffd1cc; color:#ad453e; background:#fff6f5; }
.text-link { color:var(--blue); font-size:13px; font-weight:750; text-decoration:none; white-space:nowrap; }.text-link:hover { color:var(--blue-dark); text-decoration:underline; }.admin-shell { width:min(720px,calc(100% - 40px)); }.admin-panel { margin-top:22px; }.admin-copy { margin:-6px 0 20px; color:var(--muted); font-size:13px; line-height:1.6; }.stacked-form { display:grid; gap:18px; }.stacked-form input { width:100%; height:44px; padding:0 12px; border:1px solid var(--line); border-radius:10px; outline:none; color:var(--ink); background:#fff; }.stacked-form input:focus { border-color:#7ba0ff; box-shadow:0 0 0 3px rgb(50 102 255 / 12%); }.admin-result { margin-top:24px; padding:18px; border:1px solid #bde4d7; border-radius:14px; background:#f6fffb; }.admin-result[hidden] { display:none; }.result-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.admin-result h2 { font-size:17px; }.admin-result p { margin:8px 0 13px; color:#547061; font-size:12px; line-height:1.5; }.secret-output { display:block; width:100%; overflow-wrap:anywhere; padding:13px; border:1px solid #c6e9db; border-radius:10px; color:#1f315b; background:#fff; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; font-weight:700; line-height:1.5; }.secret-output:focus { outline:3px solid rgb(50 102 255 / 16%); }.result-actions { display:flex; gap:10px; margin-top:13px; }.result-actions button { flex:1; }.admin-result small { display:block; margin-top:12px; color:var(--muted); font-size:11px; line-height:1.5; }
.dashboard-grid { display:grid; grid-template-columns:minmax(260px,.66fr) minmax(0,1.34fr); gap:20px; align-items:start; }.dashboard-grid[hidden] { display:none; }
.panel { border:1px solid rgb(220 228 241 / 92%); border-radius:20px; padding:25px; background:rgb(255 255 255 / 88%); box-shadow:0 12px 36px rgb(31 55 100 / 6%); backdrop-filter:blur(12px); }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:24px; }.numbers-heading { margin-bottom:16px; }
.text-button { padding:2px 0; border:0; color:var(--blue); background:transparent; font-size:13px; font-weight:750; }.text-button:hover { color:var(--blue-dark); }
label>span { display:block; margin-bottom:7px; color:#4d5c77; font-size:12px; font-weight:750; } select { width:100%; height:44px; padding:0 12px; border:1px solid var(--line); border-radius:10px; outline:none; color:var(--ink); background:#fff; } select:focus { border-color:#7ba0ff; box-shadow:0 0 0 3px rgb(50 102 255 / 12%); }
.request-hint { margin:16px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }.request-button { width:100%; margin-top:24px; }
.primary-button,.secondary-button,.ghost-button { display:inline-flex; min-height:40px; align-items:center; justify-content:center; gap:8px; border-radius:10px; padding:0 14px; font-size:13px; font-weight:800; transition:transform .12s,box-shadow .12s,background .12s; }.primary-button { border:1px solid var(--blue); color:white; background:var(--blue); box-shadow:0 7px 16px rgb(50 102 255 / 20%); }.primary-button:hover { background:var(--blue-dark); transform:translateY(-1px); }.secondary-button { border:1px solid var(--blue); color:var(--blue); background:#fff; }.secondary-button:hover { background:#f1f5ff; }.ghost-button { border:1px solid #d4ddeb; color:#596783; background:#fff; }.ghost-button:hover { border-color:#9eafce; background:#f8faff; } button:disabled { cursor:not-allowed; opacity:.55; transform:none!important; }
.empty-state { display:grid; min-height:260px; place-items:center; align-content:center; padding:24px; border:1px dashed #ccd8ed; border-radius:15px; text-align:center; color:var(--muted); }.empty-state[hidden] { display:none; }.empty-state span { color:#849cff; font-size:31px; }.empty-state p { margin:10px 0 4px; color:#536380; font-size:15px; font-weight:750; }.empty-state small { font-size:12px; line-height:1.5; }
.number-list { display:grid; gap:12px; }.number-card { padding:16px; border:1px solid #dce5f4; border-radius:15px; background:linear-gradient(135deg,#fff,#fafcff); }.number-card-top,.phone-row,.code-row,.number-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }.country-badge,.status-badge { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border-radius:999px; font-size:11px; font-weight:800; }.country-badge { color:#5266a3; background:#edf2ff; }.status-badge { color:#68758c; background:#f1f4f8; }.status-badge.received { color:#087a5a; background:#e8faf3; }.status-badge.released { color:#748196; background:#f0f2f5; }.phone-row { margin:15px 0 13px; }.phone-row strong { overflow:hidden; color:#1f315b; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:19px; letter-spacing:.02em; text-overflow:ellipsis; white-space:nowrap; }.copy-button { width:34px; height:34px; flex:0 0 34px; border:1px solid var(--line); border-radius:9px; color:#52637f; background:#fff; font-size:16px; }.copy-button:hover { border-color:#a6b6d4; color:var(--blue); }.code-row { padding:11px 0; border-top:1px solid #edf1f7; border-bottom:1px solid #edf1f7; color:#69758d; font-size:12px; }.code-row output { color:var(--blue-dark); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:16px; font-weight:800; letter-spacing:.1em; }.number-actions { margin-top:13px; }.number-actions button { flex:1; }
.payment-return-shell { width:min(720px,calc(100% - 40px)); }.payment-return-hero { margin-bottom:26px; }.payment-result-card { padding:26px; border:1px solid #dbe5fc; border-radius:20px; background:rgb(255 255 255 / 90%); box-shadow:0 12px 36px rgb(31 55 100 / 6%); }.payment-result-card[data-state="success"] { border-color:#bde4d7; }.payment-result-card[data-state="failed"],.payment-result-card[data-state="unavailable"],.payment-result-card[data-state="error"] { border-color:#ffd9d4; }.payment-result-header { display:flex; align-items:flex-start; gap:15px; }.payment-result-icon { display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center; border-radius:50%; color:#52637f; background:#eef2f7; font-size:22px; font-weight:850; }.payment-result-icon[data-state="success"] { color:var(--success); background:#e8faf3; }.payment-result-icon[data-state="failed"],.payment-result-icon[data-state="unavailable"],.payment-result-icon[data-state="error"] { color:#ad453e; background:#fff0ee; }.payment-result-status { margin:1px 0 4px; color:#68758c; font-size:12px; font-weight:800; }.payment-result-status[data-state="success"] { color:var(--success); }.payment-result-status[data-state="failed"],.payment-result-status[data-state="unavailable"],.payment-result-status[data-state="error"] { color:#ad453e; }.payment-result-header h2 { margin-bottom:5px; font-size:21px; }.payment-result-message { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }.payment-order-details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:23px 0 0; }.payment-order-detail { min-width:0; padding:11px 12px; border:1px solid #e4ebf6; border-radius:11px; background:#fbfcff; }.payment-order-detail dt { color:var(--muted); font-size:11px; font-weight:750; }.payment-order-detail dd { overflow:hidden; margin:5px 0 0; color:#26375d; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }.payment-access-key { display:grid; gap:12px; margin-top:22px; padding:17px; border:1px solid #bde4d7; border-radius:14px; background:#f6fffb; }.payment-access-key[hidden] { display:none; }.payment-access-key h3 { margin:0; font-size:16px; }.payment-access-key p:not(.step):not(.payment-copy-status) { margin:6px 0 0; color:#547061; font-size:12px; line-height:1.5; }.payment-copy-status { min-height:18px; margin:0; color:var(--success); font-size:12px; }.payment-result-actions { display:flex; gap:10px; margin-top:22px; }.payment-result-actions > * { flex:1; }.payment-result-actions a { text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline:3px solid rgb(50 102 255 / 28%); outline-offset:3px; }
@media (max-width:760px) { .page-shell { width:min(100% - 28px,620px); padding:30px 0 45px; }.hero { grid-template-columns:auto 1fr; }.connection-state { grid-column:1/-1; justify-self:start; }.payment-products { grid-template-columns:1fr; }.access-panel,.dashboard-grid { grid-template-columns:1fr; }.access-panel { gap:16px; }.panel { padding:20px; border-radius:16px; }.payment-return-shell { width:min(100% - 28px,620px); }.payment-result-card { padding:20px; border-radius:16px; }.payment-order-details { grid-template-columns:1fr; }.payment-result-actions,.result-actions { flex-direction:column; } }
@media (max-width:420px) { .hero { gap:13px; }.brand-mark { width:42px; height:42px; }.phone-row strong { font-size:16px; }.number-actions { gap:8px; }.number-actions button { padding:0 8px; font-size:12px; } }