
:root{
 --bg:#06101d;--bg2:#071426;--panel:#0a1a2d;--panel2:#0d2138;--line:#173859;
 --text:#f6f8fc;--muted:#91a8c5;--blue:#1689ff;--blue2:#3856ff;--purple:#9a4dff;
 --green:#10d692;--red:#ef4455;--orange:#f6a623;--shadow:0 18px 50px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,Arial,sans-serif;background:radial-gradient(circle at 75% 20%,rgba(43,91,255,.08),transparent 28%),var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
body{overflow-x:hidden}
.app-shell{display:flex;min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:linear-gradient(180deg,#071425 0%,#06101d 100%);border-right:1px solid #15304c;padding:18px 14px;z-index:100;display:flex;flex-direction:column;overflow-y:auto}
.brand-block{display:flex;gap:10px;align-items:center;padding:0 7px 20px}
.brand-logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#0ea5e9,#6757ff);font-size:22px;box-shadow:0 8px 26px rgba(24,137,255,.3)}
.brand-name{font-size:22px;font-weight:900;letter-spacing:-.6px}.brand-name span{color:#31a1ff}.brand-tagline{font-size:9px;color:#8ba6c7;margin-top:2px}
.side-nav{display:flex;flex-direction:column;gap:6px}
.nav-item{display:flex;align-items:center;gap:13px;color:#c0cfe1;padding:13px 14px;border-radius:9px;font-size:14px;transition:.2s}
.nav-item i{width:18px;text-align:center;font-size:16px}
.nav-item:hover{background:#0c2037;color:#fff}.nav-item.active{background:linear-gradient(90deg,#117eff,#4350f6);box-shadow:0 10px 26px rgba(27,105,255,.22);color:#fff}
.sidebar-promo{margin-top:auto;border:1px solid #25428a;border-radius:13px;padding:16px;background:linear-gradient(145deg,#0d1b39,#151443);box-shadow:var(--shadow)}
.crown{color:#ffbe32;font-size:24px;margin-bottom:8px}.promo-brand{font-size:20px;font-weight:900;background:linear-gradient(90deg,#a855f7,#00a8ff);-webkit-background-clip:text;color:transparent}.promo-sub{font-size:10px;color:#9ab0cc}
.sidebar-promo ul{list-style:none;margin:15px 0;padding:0;display:grid;gap:8px;font-size:11px;color:#bacbe0}.sidebar-promo li i{color:#18d7a4;margin-right:7px}
.sidebar-footer{font-size:10px;color:#7e96b4;line-height:1.55;padding:16px 4px 0}.sidebar-footer b{color:#27a1ff}
.main-area{width:calc(100% - 250px);margin-left:250px;min-height:100vh}
.topbar{height:74px;position:sticky;top:0;z-index:60;background:rgba(6,16,29,.94);backdrop-filter:blur(18px);border-bottom:1px solid #16304a;padding:0 24px;display:flex;align-items:center;gap:16px}
.menu-btn{display:none;border:1px solid var(--line);background:#0d1e33;color:#fff;border-radius:10px;width:40px;height:40px}
.welcome{display:flex;flex-direction:column;gap:4px}.welcome strong{font-size:18px}.welcome small{color:#829ab8;font-size:11px}.wave{font-size:16px}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:14px}
.balance-pill{display:flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid #174a5b;border-radius:8px;background:#071d28;min-width:175px}.balance-pill i{color:#24d7cb;font-size:19px}.balance-pill div{display:flex;flex-direction:column}.balance-pill small{font-size:8px;color:#90a8c4}.balance-pill strong{color:#18e1a2;font-size:13px}
.user-pill{display:flex;align-items:center;gap:9px;min-width:128px}.user-pill .avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#f7f9fd;color:#14233a;font-weight:900}.user-pill div:last-child{display:flex;flex-direction:column}.user-pill strong{font-size:12px}.user-pill small{font-size:9px;color:#8fa4be}
.content{padding:18px 22px 35px;max-width:1500px;margin:auto}
.flash{padding:13px 15px;border-radius:10px;margin-bottom:14px;font-size:13px;border:1px solid}.flash-success{background:#082c28;border-color:#176653;color:#99f0d1}.flash-error{background:#36151b;border-color:#79303a;color:#ffc0c8}.flash-info{background:#0c2039;border-color:#26558c;color:#b9d8ff}
.hero-panel{border:1px solid #1a3e64;border-radius:15px;background:linear-gradient(110deg,#17267b,#132cad 55%,#0a59a8);padding:22px;box-shadow:var(--shadow);position:relative;overflow:hidden}.hero-panel:after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-70px;top:-130px;background:radial-gradient(circle,#00a6ff88,transparent 65%)}.hero-panel h1{margin:0 0 6px;font-size:28px}.hero-panel p{margin:0;color:#c5d4ec;font-size:13px;max-width:650px}
.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:15px}.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:17px;min-height:120px}.stat-card .ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#0d4f88;color:#4ac6ff;margin-bottom:12px}.stat-card small{color:var(--muted);font-size:11px}.stat-card strong{display:block;font-size:22px;margin-top:4px}.stat-card a{display:inline-block;margin-top:9px;color:#42a9ff;font-size:11px}
.two-col{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(310px,.8fr);gap:14px;align-items:start}
.panel{background:linear-gradient(180deg,#091b30,#071727);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);overflow:hidden}
.panel-pad{padding:17px}.panel-title{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800;margin:0 0 14px}.panel-title .step{width:26px;height:26px;border-radius:8px;background:#1a97ff;display:grid;place-items:center;font-size:12px}
.buy-banner{background:linear-gradient(110deg,#25249a,#162bb5 60%,#0e5da7);border:1px solid #4353e4;border-radius:13px;padding:19px 20px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;overflow:hidden;position:relative}.buy-banner h1{margin:0 0 4px;font-size:26px}.buy-banner p{margin:0;color:#c9d4ed;font-size:12px}.buy-banner .big-icon{font-size:48px;opacity:.8}
.section-card{background:#081b30;border:1px solid #193d62;border-radius:12px;padding:14px;margin-bottom:12px}.section-label{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:800;margin-bottom:12px}.num-step{width:25px;height:25px;border-radius:7px;background:linear-gradient(135deg,#2ea8ff,#1675e7);display:grid;place-items:center;font-size:12px}
.provider-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.choice-card{border:1px solid #1b456c;border-radius:10px;background:#0a2139;padding:13px;cursor:pointer;transition:.18s;position:relative}.choice-card:hover{transform:translateY(-1px);border-color:#328eff}.choice-card.selected{border:2px solid #1a9aff;background:#0b2846;box-shadow:0 0 0 2px rgba(20,146,255,.08)}.provider-head{display:flex;align-items:center;gap:12px}.provider-icon{width:44px;height:44px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,#12a6ff,#2972e7);font-size:20px}.choice-card:nth-child(3n+2) .provider-icon{background:linear-gradient(135deg,#8c42ff,#6439e7)}.choice-card:nth-child(3n) .provider-icon{background:linear-gradient(135deg,#08bf8f,#0c895f)}.provider-name{font-weight:800}.provider-price{font-size:12px;color:#22e5b0;margin-top:4px}
.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.big-choice{min-height:60px;border:1px solid #1a456e;background:#0a1f35;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;font-weight:700}.big-choice.selected{border:2px solid #1596ff;background:#0b2948}.flag{font-size:24px}
.quantity-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.qty-box{display:flex;height:40px;border:1px solid #1a4168;border-radius:8px;overflow:hidden;background:#07182b}.qty-box button{width:40px;border:0;background:#11375c;color:#fff;cursor:pointer;font-size:18px}.qty-box input{width:76px;border:0;background:#081a2d;color:#fff;text-align:center;outline:none}.qty-shortcut{border:0;border-radius:7px;background:#126fdc;color:#fff;height:38px;min-width:46px;padding:0 13px;cursor:pointer;font-weight:700}
.price-box{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#193953;border-radius:9px;overflow:hidden;margin-top:13px}.price-cell{background:#0b2036;padding:13px}.price-cell small{display:block;color:#91a9c4;font-size:10px;margin-bottom:4px}.price-cell strong{font-size:18px}.price-cell.highlight strong{color:#42c7ff}.buy-btn{width:100%;border:0;border-radius:8px;padding:14px;margin-top:13px;background:linear-gradient(90deg,#087dff,#a04cff);color:#fff;font-weight:800;font-size:16px;cursor:pointer;box-shadow:0 12px 30px rgba(74,81,255,.25)}.buy-btn:disabled{opacity:.5;cursor:not-allowed}
.side-stack{display:grid;gap:13px}.deposit-card .amount-input,.form-input,.form-select{width:100%;border:1px solid #1c466e;background:#071a2d;color:#fff;border-radius:8px;padding:12px 13px;outline:none}.deposit-card .amount-input:focus,.form-input:focus,.form-select:focus{border-color:#178fff}.btn{border:0;border-radius:8px;padding:11px 14px;color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:750;cursor:pointer}.btn-primary{background:linear-gradient(90deg,#1387ff,#7245ff)}.btn-green,.btn-whatsapp{background:linear-gradient(90deg,#09c97a,#10df9b)}.btn-red{background:#b82836}.btn-blue{background:#126edb}.btn-muted{background:#29415d}.full{width:100%}
.help-note{border:1px solid #1c466c;background:#0a1d31;border-radius:8px;padding:11px;color:#9eb3cc;font-size:10px;line-height:1.55;margin-top:10px}
.table-panel{margin-top:13px}.table-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid #173a5b}.table-title strong{display:block}.table-title small{color:#8198b5;font-size:10px}.table-actions{display:flex;gap:8px;flex-wrap:wrap}.table-actions .btn{font-size:10px;padding:8px 11px}
.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:900px}.data-table th,.data-table td{padding:9px 10px;border-bottom:1px solid #13334f;text-align:left;font-size:10px;white-space:nowrap}.data-table th{color:#9db1ca;background:#0b2138;font-weight:600}.data-table td{color:#d8e3f1}.status{display:inline-flex;padding:5px 8px;border-radius:6px;font-size:9px;font-weight:800}.status-pending{background:#5a3b0c;color:#ffba39}.status-approved,.status-completed{background:#0c583f;color:#38e9ab}.status-rejected{background:#5a2028;color:#ff7884}
.action-row{display:flex;gap:5px}.action-row .btn{padding:6px 8px;font-size:9px}.api-link{max-width:180px;overflow:hidden;text-overflow:ellipsis;color:#28a8ff}
.page-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.page-header h1{margin:0;font-size:24px}.page-header p{margin:5px 0 0;color:var(--muted);font-size:11px}
.form-card{max-width:760px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-group{display:grid;gap:7px}.form-group label{font-size:11px;color:#a6bbd2}.form-group.full-span{grid-column:1/-1}.form-actions{margin-top:15px;display:flex;gap:8px;flex-wrap:wrap}
.empty{padding:32px;text-align:center;color:#829ab7}.small-muted{font-size:10px;color:#8399b4}
.danger-box{border:1px solid #6d2935;background:#2a1218;border-radius:12px;padding:15px;color:#ffc2c8}
.auth-page{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 20% 20%,#114bad55,transparent 30%),radial-gradient(circle at 80% 80%,#6420a844,transparent 30%),#06101d}.auth-card{width:min(460px,100%);border:1px solid #214464;border-radius:18px;padding:28px;background:#09192be8;box-shadow:0 25px 70px #0008}.auth-logo{text-align:center;margin-bottom:20px}.auth-logo .brand-name{font-size:28px}.auth-card h1{text-align:center;margin:0 0 6px}.auth-sub{text-align:center;color:#879eb9;font-size:12px;margin-bottom:20px}.auth-card .form-group{margin-bottom:12px}.auth-link{text-align:center;margin-top:16px;font-size:12px;color:#8ba4c1}.auth-link a{color:#34a8ff;font-weight:700}
.sidebar-backdrop{display:none}
@media(max-width:1150px){.dashboard-grid{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}.provider-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:translateX(0)}.main-area{width:100%;margin-left:0}.menu-btn{display:grid;place-items:center}.sidebar-backdrop.show{display:block;position:fixed;inset:0;background:#0008;z-index:90}.welcome small{display:none}.topbar{padding:0 14px}.content{padding:14px}.top-actions .user-pill{display:none}}
@media(max-width:650px){.dashboard-grid{grid-template-columns:1fr}.provider-grid{grid-template-columns:1fr}.choice-row{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-group.full-span{grid-column:auto}.balance-pill{min-width:0}.balance-pill small{display:none}.balance-pill strong{font-size:11px}.buy-banner h1{font-size:21px}.hero-panel h1{font-size:23px}.price-box{grid-template-columns:1fr}.topbar{height:68px}}
