:root { --ink:#18202a; --muted:#6d7784; --line:#dde2e8; --paper:#f4f6f8; --panel:#fff; --black:#111820; --gold:#c69335; --gold-soft:#f7ecd6; --green:#118760; --red:#c64a45; --blue:#345fc7; --shadow:0 18px 50px rgba(24,32,42,.10); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.hidden { display:none!important; }
em { display:block; color:var(--gold); font:700 11px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.16em; font-style:normal; }
.login-screen { min-height:100vh; display:grid; grid-template-columns:minmax(460px,.9fr) minmax(520px,1.1fr); background:#fff; }
.login-visual { min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; padding:50px 6vw; color:#fff; background:radial-gradient(circle at 85% 15%,rgba(198,147,53,.35),transparent 32%),linear-gradient(145deg,#111820,#202b38); }
.ops-brand { display:inline-flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.ops-brand>span { width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.25); border-radius:4px 14px 4px 14px; color:#171d24; background:linear-gradient(135deg,#e0b65f,#fff2c4); font-weight:900; }
.ops-brand b,.ops-brand small { display:block; }
.ops-brand small { margin-top:1px; opacity:.55; font:600 9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.15em; }
.login-visual h1 { margin:18px 0; font-size:clamp(40px,4.4vw,67px); line-height:1.13; letter-spacing:-.055em; }
.login-visual p { max-width:570px; color:rgba(255,255,255,.64); font-size:16px; }
.login-visual>small { color:rgba(255,255,255,.45); }
.login-panel { display:grid; place-items:center; padding:50px; }
.login-panel form { width:min(470px,100%); }
.login-panel h2 { margin:10px 0 2px; font-size:34px; letter-spacing:-.04em; }
.login-panel form>p { margin:0 0 30px; color:var(--muted); }
label { display:grid; gap:7px; margin-bottom:16px; color:#414a56; font-size:13px; font-weight:650; }
input,select,textarea { width:100%; min-height:46px; padding:10px 13px; border:1px solid #d4dbe2; border-radius:9px; outline:0; color:var(--ink); background:#fff; }
input:focus,select:focus,textarea:focus { border-color:var(--gold); box-shadow:0 0 0 4px rgba(198,147,53,.12); }
textarea { resize:vertical; }
.primary,.secondary { min-height:44px; padding:0 18px; border-radius:9px; font-weight:750; }
.primary { border:1px solid var(--black); color:#fff; background:var(--black); box-shadow:0 8px 22px rgba(17,24,32,.17); }
.secondary { border:1px solid var(--line); color:var(--ink); background:#fff; }
.primary:disabled,.secondary:disabled { cursor:not-allowed; opacity:.45; }
.login-panel .primary { width:100%; }
.login-panel form>small { display:block; margin-top:14px; color:var(--muted); text-align:center; }
.form-feedback { min-height:22px; color:var(--red); font-size:12px; }
.ops-shell { min-height:100vh; }
.sidebar { position:fixed; inset:0 auto 0 0; z-index:10; width:245px; display:flex; flex-direction:column; padding:25px 17px; color:#dce2e9; background:var(--black); }
.ops-brand.compact { padding:4px 8px 28px; }
.sidebar nav { display:grid; gap:5px; }
.sidebar nav button { width:100%; display:flex; align-items:center; gap:12px; min-height:46px; padding:0 13px; border:0; border-radius:8px; color:#9eabb8; background:transparent; text-align:left; }
.sidebar nav button i { width:25px; font-style:normal; color:#7f8a96; text-align:center; }
.sidebar nav button.active { color:#fff; background:#29333e; box-shadow:inset 3px 0 var(--gold); }
.sidebar-note { margin-top:auto; padding:15px; border:1px solid #303a45; border-radius:10px; background:#1a222b; }
.sidebar-note b,.sidebar-note span { display:block; }
.sidebar-note span { margin-top:4px; color:#7f8b97; font-size:11px; }
.logout { min-height:40px; margin-top:12px; border:1px solid #323c47; border-radius:8px; color:#9aa6b2; background:transparent; }
.workspace { margin-left:245px; min-height:100vh; padding:0 32px 50px; }
.topbar { position:sticky; top:0; z-index:8; min-height:105px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(244,246,248,.92); backdrop-filter:blur(16px); }
.topbar h1 { margin:4px 0 0; font-size:28px; letter-spacing:-.035em; }
.operator { display:flex; align-items:center; gap:9px; padding:9px 13px; border:1px solid var(--line); border-radius:999px; background:#fff; }
.online { width:8px; height:8px; border-radius:50%; background:#35bd83; box-shadow:0 0 0 5px #e2f5ed; }
.page { display:none; max-width:1700px; margin:0 auto; padding-top:25px; }
.page.active { display:block; animation:enter .24s ease; }
@keyframes enter { from { opacity:0; transform:translateY(5px); } }
.overview-hero { display:flex; align-items:center; justify-content:space-between; padding:24px 28px; border-radius:14px; color:#fff; background:linear-gradient(125deg,#1b2530,#364553); }
.overview-hero h2 { margin:6px 0 2px; font-size:27px; }
.overview-hero p { margin:0; color:rgba(255,255,255,.62); }
.stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:11px; margin:17px 0; }
.stats article { min-height:112px; padding:17px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.stats span,.stats b,.stats small { display:block; }
.stats span { color:var(--muted); font-size:11px; }
.stats b { margin:8px 0 2px; font-size:24px; letter-spacing:-.04em; }
.stats small { color:#929aa4; font-size:10px; }
.stats.loading article { background:linear-gradient(100deg,#fff,#edf0f3,#fff); background-size:200%; animation:shimmer 1.5s infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }
.panel,.panel-table { border:1px solid var(--line); border-radius:13px; background:#fff; }
.panel { padding:22px; }
.panel-head,.heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }
.panel-head { margin-bottom:15px; }
.panel h3,.heading h2 { margin:5px 0 0; }
.heading { margin-bottom:20px; }
.heading h2 { font-size:30px; letter-spacing:-.04em; }
.heading p { margin:2px 0 0; color:var(--muted); }
.text-button { border:0; color:var(--gold); background:transparent; font-weight:700; }
.filters { display:flex; gap:9px; margin-bottom:13px; }
.filters input { min-width:280px; flex:1; }
.filters select { width:170px; }
.request-filters input { min-width:155px; }
.request-filters input:first-child { min-width:240px; }
.currency { padding:8px 12px; border-radius:999px; color:#825e1f; background:var(--gold-soft); font-weight:800; }
.subheading { display:flex; align-items:flex-end; justify-content:space-between; margin:28px 0 12px; }
.subheading h3 { margin:5px 0 0; font-size:21px; }
.payment-channel-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.payment-channel-card { padding:20px; border:1px solid var(--line); border-radius:13px; background:#fff; }
.payment-channel-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.payment-channel-card h3 { margin:3px 0; font-size:21px; }
.payment-channel-card p { margin:12px 0; color:var(--muted); }
.payment-channel-card dl { display:grid; grid-template-columns:110px 1fr; gap:7px 12px; margin:16px 0; padding:13px; border-radius:9px; background:#f7f8fa; font-size:12px; }
.payment-channel-card dt { color:var(--muted); }
.payment-channel-card dd { margin:0; overflow-wrap:anywhere; }
.payment-channel-card .secondary { width:100%; }
.security-callout { margin:3px 0 16px; padding:12px 14px; border-left:3px solid var(--gold); border-radius:5px 9px 9px 5px; color:#6f6044; background:#faf5e9; font-size:12px; }
.security-badge { max-width:560px; padding:10px 14px; border:1px solid #ead6ab; border-radius:9px; color:#6f6044; background:#fffaf0; font-size:12px; }
.channel-switch { align-self:end; min-height:67px; justify-content:center; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th,td { padding:12px 11px; border-bottom:1px solid #e8ebef; text-align:left; white-space:nowrap; vertical-align:middle; }
th { color:#7e8792; background:#fafbfc; font-size:10px; letter-spacing:.05em; text-transform:uppercase; }
td { font-size:12px; }
td code { font:11px ui-monospace,SFMono-Regular,Menlo,monospace; }
.customer-name b,.customer-name small { display:block; }
.customer-name small { color:var(--muted); }
.provider-name b,.provider-name small,.provider-balance b,.provider-balance small,.provider-endpoint span,.provider-endpoint code,.provider-endpoint small,td>small { display:block; }
.provider-name small,.provider-balance small,.provider-endpoint small,td>small { color:var(--muted); }
.provider-endpoint { min-width:240px; max-width:360px; white-space:normal; overflow-wrap:anywhere; }
.provider-endpoint span { margin-bottom:5px; font-weight:650; }
.provider-endpoint code { width:max-content; max-width:100%; margin-top:3px; padding:2px 5px; border-radius:4px; color:#536171; background:#f1f3f6; overflow-wrap:anywhere; white-space:normal; }
.provider-key-cell { display:flex; align-items:center; gap:7px; min-width:160px; }
.provider-key-value { max-width:250px; padding:6px 8px; border-radius:6px; color:#536171; background:#f1f3f6; overflow-wrap:anywhere; white-space:normal; }
.provider-key-value.revealed { color:#754f07; background:#fff2cf; user-select:all; }
.eye-button { width:34px; min-width:34px; height:34px; padding:0; border:1px solid var(--line); border-radius:8px; color:#46515d; background:#fff; font-size:17px; line-height:1; }
.eye-button:hover { color:#8b631b; border-color:#d8bd87; background:#fffaf0; }
.provider-reason { min-width:210px; max-width:340px; white-space:normal; overflow-wrap:anywhere; color:#8c4642; }
.balance-pending,.balance-na { display:block; color:#7f6a40; font-weight:700; }
.balance-na { color:var(--muted); }
.tag { display:inline-flex; min-height:25px; align-items:center; padding:0 8px; border-radius:999px; font-size:10px; font-weight:800; }
.tag.ok { color:#08734f; background:#e3f5ec; }
.tag.warn { color:#8d6113; background:#fff0cf; }
.tag.bad { color:#a43b37; background:#fae7e5; }
.tag.internal { color:#634a9f; background:#eee9fb; }
.row-actions { display:flex; gap:6px; }
.row-actions button { min-height:32px; padding:0 9px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:#fff; }
.row-actions button.recharge { color:#8b631b; border-color:#ead6ab; background:#fffaf0; }
.empty { min-height:180px; display:grid; place-items:center; color:#929aa4; }
.pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-top:13px; }
.pagination > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.pagination button { min-height:34px; padding:0 11px; border:1px solid var(--line); border-radius:7px; background:#fff; }
.pagination button.active { color:#fff; border-color:var(--green); background:var(--green); }
.pagination button:disabled { opacity:.45; }
.pagination span { color:var(--muted); font-size:12px; }
dialog { width:min(620px,calc(100vw - 30px)); padding:0; border:0; border-radius:15px; color:var(--ink); box-shadow:0 30px 100px rgba(0,0,0,.27); }
dialog::backdrop { background:rgba(9,14,19,.66); backdrop-filter:blur(4px); }
dialog form { position:relative; padding:30px; }
dialog h2 { margin:6px 0 18px; font-size:25px; }
.dialog-close { position:absolute; top:16px; right:17px; width:32px; height:32px; border:0; border-radius:50%; color:var(--muted); background:#f0f2f4; font-size:20px; }
.dialog-summary { margin-bottom:17px; padding:13px 15px; border-left:3px solid var(--gold); border-radius:5px 9px 9px 5px; background:#faf5e9; }
.dialog-summary b,.dialog-summary span { display:block; }
.dialog-summary span { color:#806d4a; font-size:12px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.check { display:flex; align-items:flex-start; gap:9px; padding:11px; border:1px solid var(--line); border-radius:8px; font-weight:550; }
.check input { width:17px; min-height:17px; margin:2px 0 0; padding:0; }
.checks { margin-bottom:15px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.toast { position:fixed; z-index:100; right:25px; bottom:25px; max-width:430px; padding:13px 17px; border-radius:9px; color:#fff; background:#17212b; box-shadow:var(--shadow); opacity:0; transform:translateY(8px); pointer-events:none; transition:.2s; }
.toast.show { opacity:1; transform:none; }
.toast.error { background:#9d3c38; }
@media (max-width:1250px) { .stats { grid-template-columns:repeat(3,1fr); } .request-filters { flex-wrap:wrap; } }
@media (max-width:900px) { .login-screen { grid-template-columns:1fr; } .login-visual { min-height:auto; padding:35px; } .login-visual>div { margin:70px 0 40px; } .sidebar { position:static; width:100%; height:auto; flex-direction:row; align-items:center; overflow:auto; } .ops-brand.compact,.sidebar-note,.logout { display:none; } .sidebar nav { display:flex; } .sidebar nav button { white-space:nowrap; } .workspace { margin:0; padding:0 16px 35px; } .topbar { min-height:83px; } .filters { flex-wrap:wrap; } .payment-channel-grid { grid-template-columns:1fr; } }
@media (max-width:620px) { .login-panel { padding:45px 22px; } .login-visual h1 { font-size:38px; } .stats,.two { grid-template-columns:1fr; } .heading,.overview-hero { align-items:flex-start; flex-direction:column; } .filters>* { width:100%!important; min-width:0!important; } }