:root{--red:#c91b3d;--green:#aed239;--blue:#0ba0e8;--ink:#172033;--mist:#f6f8fb;--line:#e7ebf1;--muted:#64748b}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:Inter,system-ui,sans-serif;background:var(--mist);-webkit-font-smoothing:antialiased}a{text-decoration:none;color:inherit}button,input,select{font:inherit}button{cursor:pointer}input,select{width:100%;height:48px;padding:0 14px;border:1px solid #dce2ea;border-radius:11px;background:#fff;color:var(--ink);outline:none}input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 4px #0ba0e815}button:disabled{opacity:.5}.brand{display:inline-flex;align-items:center}.brand span{font-size:24px;font-weight:500;letter-spacing:-.045em;color:#080808}.brand i{width:6px;height:6px;margin:10px 0 0 2px;border-radius:50%;background:var(--red)}.brand-light span{color:#fff}.eyebrow{color:var(--red);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.text-link{color:var(--red);font-size:14px;font-weight:700}.primary-button,.secondary-button{display:flex;min-height:48px;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:0;border-radius:11px;font-weight:700;transition:.2s}.primary-button{background:var(--red);color:#fff}.primary-button:hover{background:#b71636}.secondary-button{border:1px solid #dce2ea;background:#fff}.inline-button{display:inline-flex}.flash{max-width:1100px;margin:0 auto 20px;padding:13px 16px;border-radius:11px;font-size:14px;font-weight:600}.flash.success{border:1px solid #bbefcb;background:#effcf3;color:#147b36}.flash.error{border:1px solid #fecaca;background:#fff1f2;color:#b4233c}
.auth-body{min-height:100vh;background:radial-gradient(circle at 10% 10%,#aed2391f,transparent 28%),radial-gradient(circle at 90% 80%,#0ba0e817,transparent 30%),var(--mist)}.simple-header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1200px)/2));border-bottom:1px solid #eef1f5;background:#fff}.auth-main{padding:56px 20px}.auth-card{max-width:480px;margin:auto;padding:38px;border:1px solid #edf0f4;border-radius:24px;background:#fff;box-shadow:0 20px 60px #17203312}.auth-card-wide{max-width:640px}.auth-heading{text-align:center}.auth-heading h1{margin:10px 0 8px;font-size:30px;letter-spacing:-.04em}.auth-heading p{margin:0 0 26px;color:var(--muted);font-size:14px;line-height:1.6}.google-button{height:48px;display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid #dce2ea;border-radius:11px;font-size:14px;font-weight:700}.google-button span{font-size:19px;color:#4285f4}.divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:#94a3b8;font-size:11px}.divider:before,.divider:after{height:1px;flex:1;background:#e7ebf1;content:""}.stack-form{display:grid;gap:17px}.stack-form label>span,.filter-form label>span{display:block;margin-bottom:7px;color:#334155;font-size:13px;font-weight:700}.stack-form label small{display:block;margin-top:6px;color:#8491a3;font-size:11px}.form-row{display:flex;align-items:center;justify-content:space-between;font-size:12px}.form-row a,.auth-foot a{color:var(--red);font-weight:700}.check-label{display:flex;align-items:center;gap:7px}.check-label input{width:15px;height:15px}.auth-foot{margin:24px 0 0;color:#64748b;font-size:13px;text-align:center}.two-column{grid-template-columns:1fr 1fr}.two-column .full{grid-column:1/-1}
.sidebar{position:fixed;inset:0 auto 0 0;z-index:50;width:270px;display:flex;flex-direction:column;padding:25px 18px;background:var(--ink);color:#fff;transition:.25s}.sidebar-top{display:flex;align-items:center;justify-content:space-between;padding:0 8px 25px}.sidebar-close{display:none;color:#fff}.portal-nav{display:grid;gap:6px}.portal-nav a{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:11px;color:#adb7c8;font-size:14px;font-weight:600}.portal-nav a span{width:20px;font-size:19px;text-align:center}.portal-nav a:hover,.portal-nav a.active{background:#ffffff10;color:#fff}.portal-nav a.active{box-shadow:inset 3px 0 var(--red)}.portal-nav a.active span{color:var(--green)}.sidebar-support{margin-top:auto;padding:18px;border:1px solid #ffffff12;border-radius:14px;background:#ffffff08}.sidebar-support p{margin:7px 0 12px;color:#9ca9bb;font-size:12px;line-height:1.55}.sidebar-support a{color:var(--green);font-size:12px;font-weight:700}.portal-shell{min-height:100vh;margin-left:270px}.portal-header{height:78px;display:flex;align-items:center;gap:18px;padding:0 32px;border-bottom:1px solid var(--line);background:#fff}.portal-header-title{display:grid;gap:2px}.portal-header-title small{color:#94a3b8;font-size:10px;text-transform:uppercase}.portal-header-title strong{font-size:15px}.icon-button{border:0;background:transparent;font-size:21px}.menu-button{display:none}.user-menu{display:flex;align-items:center;gap:10px;margin-left:auto}.avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#c91b3d13;color:var(--red);font-weight:800}.user-menu>div{display:grid}.user-menu strong{font-size:13px}.user-menu small{max-width:190px;overflow:hidden;color:#8491a3;font-size:10px;text-overflow:ellipsis}.logout-button{margin-left:8px;border:0;background:transparent;color:#64748b;font-size:12px;font-weight:700}.portal-main{max-width:1400px;margin:auto;padding:34px}.sidebar-backdrop{display:none}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}.page-heading h1{margin:7px 0 5px;font-size:32px;letter-spacing:-.04em}.page-heading p{margin:0;color:var(--muted);font-size:14px}.panel{border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:0 5px 22px #17203308}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid #edf0f4}.panel-head h2,.section-title h2{margin:0;font-size:18px}.panel-head p,.section-title p{margin:5px 0 0;color:var(--muted);font-size:12px}.panel-head>a{color:var(--red);font-size:12px;font-weight:700}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}.stat-grid article{display:flex;align-items:center;gap:14px;padding:20px;border:1px solid var(--line);border-radius:15px;background:#fff}.stat-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:12px;font-weight:800}.stat-icon.red,.service-icon.red{background:#fff0f2;color:var(--red)}.stat-icon.green,.service-icon.green{background:#aed23925;color:#638408}.stat-icon.blue,.service-icon.blue{background:#0ba0e817;color:var(--blue)}.stat-icon.lime{background:#f3f9df;color:#718c15}.stat-grid article>div{display:grid;gap:4px}.stat-grid small{color:var(--muted);font-size:11px}.stat-grid strong{font-size:20px}.quick-services{margin-bottom:28px}.section-title{margin-bottom:15px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.service-grid>a{display:grid;padding:22px;border:1px solid var(--line);border-radius:15px;background:#fff}.service-icon{width:45px;height:45px;display:grid;place-items:center;margin-bottom:17px;border-radius:12px;font-size:23px}.service-grid strong{font-size:15px}.service-grid small{margin-top:6px;color:var(--muted);font-size:11px}.service-grid b{margin-top:18px;color:var(--red);font-size:12px}.transaction-row{display:grid;grid-template-columns:42px 1fr auto auto;align-items:center;gap:13px;padding:15px 24px;border-bottom:1px solid #edf0f4}.transaction-icon{width:37px;height:37px;display:grid;place-items:center;border-radius:10px;background:#f1f5f9}.transaction-main,.transaction-amount{display:grid;gap:4px}.transaction-main strong,.transaction-amount strong{font-size:13px}.transaction-main small,.transaction-amount small{color:var(--muted);font-size:10px}.transaction-amount{text-align:right}.status{display:inline-flex;width:max-content;padding:5px 9px;border-radius:999px;background:#f1f5f9;color:#64748b;font-size:9px;font-weight:800;text-transform:uppercase}.status.successful,.status.paid{background:#e9f9ed;color:#16803a}.status.failed{background:#fff0f2;color:#bb1e3a}.status.processing,.status.pending,.status.payment-pending,.status.created{background:#fff8dc;color:#946b00}.empty-state{padding:50px 24px;text-align:center}.empty-state>span{font-size:28px;color:#94a3b8}.empty-state h3{margin:12px 0 6px}.empty-state p{margin:0 0 16px;color:var(--muted);font-size:13px}.empty-state a{color:var(--red);font-size:13px;font-weight:700}
.filter-panel{margin-bottom:18px;padding:18px}.filter-form{display:flex;align-items:flex-end;gap:12px}.filter-form label{min-width:190px}.filter-form select,.filter-form button{height:42px;min-height:42px}.history-table-wrap{overflow-x:auto}.history-table{width:100%;border-collapse:collapse}.history-table th{padding:12px 18px;background:#fafbfc;color:#8491a3;font-size:10px;text-align:left;text-transform:uppercase}.history-table td{padding:16px 18px;border-top:1px solid #edf0f4;font-size:12px}.history-table td>small,.history-table td>strong{display:block;margin-top:4px}.history-table td>small{color:#8491a3;font-size:9px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.settings-grid .stack-form{padding:24px}.info-note,.provisioning-note{padding:14px;border:1px solid #bfe7fa;border-radius:10px;background:#f1faff;color:#287395;font-size:12px;line-height:1.5}
.flow-layout{display:grid;grid-template-columns:minmax(0,720px) minmax(260px,360px);gap:22px;align-items:start}.flow-card{overflow:hidden}.stepper{display:flex;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}.stepper span{display:flex;align-items:center;gap:7px;color:#94a3b8;font-size:11px;font-weight:700}.stepper b{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:#edf0f4}.stepper .active{color:var(--red)}.stepper .active b{background:var(--red);color:#fff}.stepper i{height:1px;flex:1;margin:0 10px;background:#e2e8f0}.service-switch{display:grid;grid-template-columns:repeat(3,1fr);padding:18px 24px 0}.service-switch a{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 8px;border-bottom:3px solid transparent;color:#64748b;font-size:12px;font-weight:700}.service-switch a.active{border-color:var(--red);background:#fff6f7;color:var(--red)}.recharge-details{padding:26px 28px}.money-input{position:relative}.money-input b{position:absolute;left:14px;top:15px}.money-input input{padding-left:32px}.help-card{padding:25px;border-radius:17px;background:var(--ink);color:#fff}.help-card>span{color:var(--green);font-size:10px;font-weight:800}.help-card h3{font-size:20px}.help-card p,.help-card li{color:#aeb8c7;font-size:12px;line-height:1.65}.plans-layout{display:grid;grid-template-columns:210px 1fr;gap:20px;align-items:start}.category-panel{display:grid;padding:12px}.category-panel h3{margin:7px 8px 12px;font-size:13px}.category-panel a{padding:10px;border-radius:8px;color:#64748b;font-size:11px;font-weight:600}.category-panel a.active,.category-panel a:hover{background:#fff2f4;color:var(--red)}.custom-amount{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px;padding:18px}.custom-amount>div{display:grid}.custom-amount small{color:var(--muted);font-size:10px}.custom-amount form{display:flex;gap:8px}.custom-amount input{width:150px;height:42px}.custom-amount button{min-height:42px}.plan-list{display:grid;gap:12px}.plan-card{display:grid;grid-template-columns:95px 1fr auto;align-items:center;gap:18px;padding:20px;border:1px solid var(--line);border-radius:15px;background:#fff}.plan-price{display:flex;color:var(--red)}.plan-price strong{font-size:28px}.plan-detail>span{color:var(--blue);font-size:9px;font-weight:800}.plan-detail h3{margin:5px 0;font-size:14px}.plan-detail p{margin:0;color:var(--muted);font-size:11px}.plan-detail>small{font-size:9px;color:#8491a3}.checkout-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}.checkout-card,.pay-card{padding:26px}.checkout-service{display:flex;align-items:center;gap:13px;padding-bottom:20px;border-bottom:1px solid var(--line)}.checkout-service>span{width:45px;height:45px;display:grid;place-items:center;border-radius:12px;background:#fff0f2;color:var(--red)}.checkout-service>div{display:grid}.checkout-service small{color:var(--muted);font-size:10px}.review-list{margin:12px 0 20px}.review-list>div{display:flex;justify-content:space-between;padding:11px 0}.review-list dt{color:var(--muted);font-size:12px}.review-list dd{margin:0;font-size:12px;font-weight:700}.review-list .free{color:#16803a}.review-list .total{margin-top:8px;padding-top:18px;border-top:1px dashed #cbd5e1}.review-list .total dt,.review-list .total dd{font-size:17px;color:var(--ink);font-weight:800}.pay-card form .primary-button{width:100%}.secure-line{display:block;margin-top:14px;color:#8491a3;font-size:9px}.confirmation-card{max-width:760px;margin:20px auto;padding:45px;text-align:center}.confirmation-icon{width:60px;height:60px;display:grid;place-items:center;margin:0 auto 18px;border-radius:50%;background:#eaf9ee;color:#16803a;font-size:27px}.confirmation-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:28px 0;padding:20px;border-radius:12px;background:var(--mist);text-align:left}.confirmation-summary>div{display:grid;gap:6px}.confirmation-summary small{color:var(--muted);font-size:9px}.confirmation-summary strong{font-size:12px}.confirmation-actions{display:flex;justify-content:center;gap:10px}.empty-page{max-width:600px;margin:80px auto;text-align:center}.empty-page>span{color:var(--red);font-weight:800}.empty-page p{color:var(--muted)}
@media(max-width:1050px){.stat-grid{grid-template-columns:1fr 1fr}.flow-layout{grid-template-columns:1fr}.help-card{display:none}}@media(max-width:800px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:none}.sidebar-close,.menu-button{display:block}.portal-shell{margin-left:0}.sidebar.open~.portal-shell+.sidebar-backdrop{display:block;position:fixed;inset:0;z-index:40;background:#10182877}.portal-header{padding:0 18px}.portal-main{padding:24px 18px}.service-grid,.settings-grid,.checkout-layout{grid-template-columns:1fr}.plans-layout{grid-template-columns:1fr}.category-panel{display:flex;overflow-x:auto}.category-panel h3{display:none}.confirmation-summary{grid-template-columns:1fr 1fr}}@media(max-width:560px){.simple-header{padding:0 18px}.auth-main{padding:30px 14px}.auth-card{padding:26px 20px}.two-column{grid-template-columns:1fr}.two-column .full{grid-column:auto}.user-menu>div,.logout-button{display:none}.page-heading{align-items:flex-start;flex-direction:column}.page-heading h1{font-size:27px}.stat-grid,.service-grid{grid-template-columns:1fr}.filter-form{align-items:stretch;flex-direction:column}.filter-form label{min-width:0}.transaction-row{grid-template-columns:38px 1fr auto}.transaction-row .status{grid-column:2}.service-switch{padding-inline:12px}.service-switch a span{display:none}.recharge-details{padding:22px 18px}.custom-amount{align-items:stretch;flex-direction:column}.custom-amount form{display:grid;grid-template-columns:1fr auto}.custom-amount input{width:100%}.plan-card{grid-template-columns:70px 1fr}.plan-card form{grid-column:1/-1}.plan-card form button{width:100%}.confirmation-card{padding:30px 18px}.confirmation-summary{grid-template-columns:1fr}.confirmation-actions{flex-direction:column}}