:root{color:#171614;font-synthesis:none;text-rendering:optimizelegibility;background:#f7f3ee;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}.app-shell{min-height:100vh}.loading-shell{color:#514b43;align-content:center;place-items:center;gap:16px;min-height:100vh;display:grid}.hero{background:#fffaf3;border-bottom:1px solid #ddd5ca}.compact-hero .topbar{padding:14px 0}.topbar,.hero-grid,.content{width:min(1180px,100% - 40px);margin:0 auto}.topbar{justify-content:space-between;align-items:center;gap:16px;padding:28px 0 18px;display:flex}.topbar-actions{align-items:center;gap:10px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand strong{font-size:18px;font-weight:900;display:block}.brand span{color:#6d675f;font-size:12px;display:block}.brand-mark{color:#99f6c8;background:#151515;border-radius:8px;place-items:center;width:42px;height:42px;font-size:14px;font-weight:950;display:grid}.hero-grid{grid-template-columns:1.05fr .95fr;align-items:end;gap:36px;padding:28px 0 44px;display:grid}.hero-copy{max-width:720px}.eyebrow{color:#17613e;background:#dff8ea;border-radius:999px;margin:0 0 14px;padding:6px 11px;font-size:13px;font-weight:850;display:inline-flex}h1,h2,p{margin-top:0}h1{color:#171614;letter-spacing:0;margin-bottom:20px;font-size:clamp(40px,6vw,68px);font-weight:950;line-height:1.02}h2{margin-bottom:0;font-size:28px;font-weight:950}.hero-copy p:last-child{color:#514b43;max-width:660px;font-size:18px;line-height:1.75}.panel{background:#fff;border:1px solid #ded6ca;border-radius:8px;padding:18px;box-shadow:0 18px 50px #2c231717}.auth-panel{align-self:start}.segmented{background:#f1ebe3;border-radius:8px;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px;padding:5px;display:grid}.segmented button{color:#5f5a53;background:0 0;border:0;border-radius:6px;height:38px;font-weight:850}.segmented button.active{color:#171614;background:#fff;box-shadow:0 8px 18px #2c231717}.view-toggle,.admin-tabs{background:#f1ebe3;border-radius:8px;gap:6px;padding:5px;display:flex}.view-toggle button,.admin-tabs button{color:#5f5a53;background:0 0;border:0;border-radius:6px;min-height:36px;padding:0 12px;font-weight:900}.view-toggle button.active,.admin-tabs button.active{color:#171614;background:#fff;box-shadow:0 8px 18px #2c231714}.field{color:#292521;gap:8px;margin-bottom:12px;font-size:14px;font-weight:850;display:grid}.field input,.field select{color:#171614;background:#fff;border:1px solid #cfc6ba;border-radius:7px;outline:none;width:100%;height:46px;padding:0 12px;transition:border-color .15s,box-shadow .15s}.field input:focus,.field select:focus{border-color:#151515;box-shadow:0 0 0 4px #dff8ea}.coming-soon-field div{background:#f7f3ee;border:1px solid #ded6ca;border-radius:7px;min-height:46px;padding:9px 12px}.coming-soon-field strong{color:#171614;font-size:14px;font-weight:950;display:block}.coming-soon-field p{color:#6d675f;margin:2px 0 0;font-size:13px;font-weight:700}.two-col{grid-template-columns:1fr 1fr;gap:12px;display:grid}.three-col{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.primary-button,.dark-button,.danger-button,.ghost-button{border-radius:7px;min-height:42px;font-weight:900}.primary-button,.dark-button{color:#fff;background:#151515;border:0}.primary-button{width:100%;min-height:48px;margin-top:2px}.danger-button,.ghost-button{background:#fff;border:1px solid #d8cec1}.danger-button{color:#8d2e22}.ghost-button{color:#2d2924;padding:0 14px}.form-error{color:#9b2f1d;background:#ffe9e4;border-radius:7px;margin:0 0 12px;padding:10px 12px;font-size:14px;font-weight:750}.form-success{color:#17613e;background:#dff8ea;border-radius:7px;margin:0 0 12px;padding:10px 12px;font-size:14px;font-weight:750}.support-note{color:#5f5a53;background:#fff;border:1px solid #ded6ca;border-radius:8px;margin:0;padding:13px 14px;font-size:14px;font-weight:750}.support-note a,.bank-box a{color:#17613e;font-weight:950;text-decoration:none}.support-note a:hover,.bank-box a:hover{text-decoration:underline}.content{padding:30px 0 56px}.admin-shell,.settings-shell,.billing-shell{gap:16px;display:grid}.service-shell{gap:18px;display:grid}.workspace-header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}.workspace-actions{align-items:center;gap:10px;display:flex}.workspace-actions .dark-button{padding:0 14px}.workspace-header .eyebrow{margin-bottom:8px}.role-badge{color:#fff;background:#171614;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:900}.metrics{grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;display:grid}.inline-add-panel{margin-bottom:18px}.inline-add-panel .panel{box-shadow:none}.admin-metrics{grid-template-columns:repeat(3,1fr)}.metric{background:#fff;border:1px solid #ded6ca;border-radius:8px;padding:16px}.metric span{color:#6d675f;font-size:14px;font-weight:850;display:block}.metric strong{color:#171614;margin-top:10px;font-size:32px;font-weight:950;display:block}.metric.green strong{color:#17613e}.metric.red strong{color:#9b2f1d}.monitor-list{background:#fff;border:1px solid #ded6ca;border-radius:8px;overflow:hidden}.monitor-row{grid-template-columns:1fr 210px;gap:18px;padding:18px;display:grid}.monitor-row.selected{background:#fffaf3}.monitor-row+.monitor-row{border-top:1px solid #eee5da}.monitor-main{min-width:0}.monitor-open{width:100%;color:inherit;text-align:left;background:0 0;border:0;padding:0;display:block}.monitor-open:focus-visible{outline-offset:4px;border-radius:7px;outline:3px solid #99f6c8}.monitor-title{align-items:center;gap:10px;display:flex}.monitor-title strong{text-overflow:ellipsis;white-space:nowrap;font-size:18px;font-weight:950;overflow:hidden}.monitor-url{color:#5f5a53;text-overflow:ellipsis;white-space:nowrap;margin-top:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;display:block;overflow:hidden}.chips{flex-wrap:wrap;gap:7px;margin-top:12px;display:flex}.chips span{color:#5f5a53;background:#f7f3ee;border-radius:6px;padding:6px 8px;font-size:13px;font-weight:700}.row-error{color:#9b2f1d;margin:12px 0 0;font-size:14px;font-weight:750}.certificate-status{color:#5f5a53;flex-wrap:wrap;align-items:center;gap:7px;margin-top:10px;font-size:13px;font-weight:750;display:flex}.certificate-status.compact{justify-content:flex-end;margin-top:6px}.certificate-status span,.certificate-status a{overflow-wrap:anywhere}.certificate-status a,.ghost-link{color:#17613e;font-weight:900;text-decoration:none}.certificate-status a:hover,.ghost-link:hover{text-decoration:underline}.certificate-badge{border-radius:999px;padding:5px 9px;font-size:12px;font-weight:950}.certificate-badge.ok{color:#17613e;background:#dff8ea}.certificate-badge.warn{color:#7a5200;background:#fff4cc}.certificate-badge.danger{color:#9b2f1d;background:#ffe9e4}.certificate-badge.info{color:#6d675f;background:#eee5da}.monitor-side{gap:10px;display:grid}.response-box{background:#f7f3ee;border-radius:7px;padding:12px}.response-box span{color:#6d675f;font-size:12px;font-weight:850;display:block}.response-box strong{margin-top:5px;font-size:25px;font-weight:950;display:block}.row-actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}.status{border-radius:999px;flex:none;padding:5px 9px;font-size:12px;font-weight:950}.status.ok{color:#17613e;background:#dff8ea}.status.down{color:#9b2f1d;background:#ffe9e4}.status.muted{color:#6d675f;background:#eee5da}.status.pending{color:#7a5200;background:#fff4cc}.status.sent{color:#17613e;background:#dff8ea}.status.failed{color:#9b2f1d;background:#ffe9e4}.status.skipped{color:#6d675f;background:#eee5da}.admin-tabs{align-self:start;overflow-x:auto}.problem-grid{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.problem-card{background:#fff;border:1px solid #ded6ca;border-radius:8px;gap:13px;padding:18px;display:grid}.problem-card>strong{color:#171614;font-size:18px;font-weight:950}.problem-card>p,.problem-card div p,.solution-list p{color:#5f5a53;margin:0;font-size:14px;font-weight:650;line-height:1.7}.problem-card div{border-top:1px solid #eee5da;padding-top:13px}.problem-card div span{color:#17613e;margin-bottom:6px;font-size:13px;font-weight:950;display:block}.solution-band{align-items:start}.solution-list{gap:12px;display:grid}.solution-list div{border-left:3px solid #99f6c8;padding-left:12px}.solution-list strong{margin-bottom:5px;font-size:15px}.service-section-heading{margin-top:10px}.service-grid{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}.service-card{background:#fff;border:1px solid #ded6ca;border-radius:8px;padding:16px}.service-card span{color:#99f6c8;background:#171614;border-radius:999px;margin-bottom:14px;padding:5px 8px;font-size:12px;font-weight:950;display:inline-flex}.service-card strong,.service-band strong{color:#171614;margin-bottom:8px;font-size:17px;font-weight:950;display:block}.service-card p,.service-band p,.faq-item p{color:#5f5a53;margin:0;font-size:14px;font-weight:650;line-height:1.7}.faq-shell{gap:16px;display:grid}.faq-list{gap:12px;display:grid}.faq-item{background:#fff;border:1px solid #ded6ca;border-radius:8px;padding:18px}.faq-item strong{color:#171614;margin-bottom:8px;font-size:17px;font-weight:950;display:block}.service-band{background:#fff;border:1px solid #ded6ca;border-radius:8px;grid-template-columns:1fr 1fr;gap:18px;padding:18px;display:grid}.history-panel{background:#fff;border:1px solid #ded6ca;border-radius:8px;gap:14px;margin-bottom:18px;padding:18px;display:grid}.history-header{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px;display:grid}.history-actions{gap:8px;display:flex}.history-actions .dark-button,.history-actions .ghost-button{padding:0 14px}.history-summary{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.history-summary .metric{padding:13px}.history-summary .metric strong{font-size:24px}.monitor-edit-panel,.alert-settings-panel{background:#fffaf3;border:1px solid #eee5da;border-radius:8px;gap:14px;padding:15px;display:grid}.panel-heading,.alert-settings-panel>div:first-child{gap:4px;display:grid}.panel-heading strong,.alert-settings-panel>div:first-child strong{color:#171614;font-size:16px;font-weight:950}.panel-heading span,.alert-settings-panel>div:first-child span{color:#6d675f;font-size:13px;font-weight:750}.alert-toggle-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.alert-toggle{color:#514b43;text-align:left;background:#fff;border:1px solid #ded6ca;border-radius:8px;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;min-height:64px;padding:10px;display:grid}.alert-toggle.enabled{color:#171614;border-color:#151515}.alert-toggle strong,.alert-toggle small{display:block}.alert-toggle strong{font-size:14px;font-weight:950}.alert-toggle small{color:#6d675f;margin-top:3px;font-size:12px;font-weight:700;line-height:1.35}.toggle-switch{background:#d8cfc2;border-radius:999px;width:38px;height:22px;position:relative}.toggle-switch:after{content:"";background:#fff;border-radius:999px;width:16px;height:16px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 2px 6px #2c231733}.alert-toggle.enabled .toggle-switch{background:#151515}.alert-toggle.enabled .toggle-switch:after{transform:translate(16px)}.history-list{border:1px solid #eee5da;border-radius:8px;overflow:hidden}.history-row{grid-template-columns:minmax(0,1fr) 100px minmax(160px,.8fr);align-items:center;gap:12px;padding:13px 14px;display:grid}.history-row+.history-row{border-top:1px solid #eee5da}.history-row>span{color:#171614;text-align:right;font-weight:950}.history-row p{overflow-wrap:anywhere;color:#5f5a53;text-align:right;margin:0;font-size:13px;font-weight:750}.settings-grid{grid-template-columns:.85fr 1.15fr;align-items:start;gap:16px;display:grid}.billing-grid,.payment-admin-stack,.payment-admin-grid{gap:16px;display:grid}.billing-grid,.payment-admin-grid{grid-template-columns:1fr 1fr;align-items:start}.settings-panel{background:#fff;border:1px solid #ded6ca;border-radius:8px;padding:18px}.settings-panel>strong{color:#171614;margin-bottom:14px;font-size:18px;font-weight:950;display:block}.payment-methods{grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0;display:grid}.payment-methods button{color:#5f5a53;background:#fff;border:1px solid #d8cec1;border-radius:7px;min-height:38px;font-weight:900}.payment-methods button.active{color:#fff;background:#171614;border-color:#171614}.bank-box{background:#fffaf3;border:1px solid #eee5da;border-radius:8px;gap:7px;padding:14px;display:grid}.bank-box span,.package-list span,.transaction-list span{color:#6d675f;font-size:13px;font-weight:850}.bank-box strong{color:#171614;font-size:18px;font-weight:950}.bank-box p,.package-list p,.transaction-list p{color:#5f5a53;margin:0;font-size:14px;font-weight:650;line-height:1.65}.package-list,.transaction-list{gap:10px;display:grid}.package-list button,.package-list div,.transaction-list div{text-align:left;background:#fff;border:1px solid #eee5da;border-radius:8px;gap:5px;padding:13px;display:grid}.package-list button.selected{border-color:#171614;box-shadow:0 0 0 3px #dff8ea}.package-list strong,.transaction-list strong{color:#171614;font-size:19px;font-weight:950}.transaction-list strong.credit{color:#17613e}.transaction-list strong.debit{color:#9b2f1d}.topup-request-list{gap:10px;display:grid}.topup-request-list article{background:#fff;border:1px solid #eee5da;border-radius:8px;grid-template-columns:minmax(0,1fr) 130px;align-items:center;gap:12px;padding:13px;display:grid}.topup-request-list strong{color:#171614;margin-top:8px;font-size:17px;font-weight:950;display:block}.topup-request-list p{color:#5f5a53;margin:5px 0 0;font-size:13px;font-weight:700;line-height:1.55}.settings-panel dl{gap:12px;margin:0;display:grid}.settings-panel dl div{border-bottom:1px solid #eee5da;gap:4px;padding-bottom:12px;display:grid}.settings-panel dl div:last-child{border-bottom:0;padding-bottom:0}.settings-panel dt{color:#6d675f;font-size:12px;font-weight:900}.settings-panel dd{overflow-wrap:anywhere;color:#171614;margin:0;font-size:15px;font-weight:850}.operator-login,.operator-password{max-width:760px}.admin-toolbar{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end;gap:12px;display:grid}.compact-field{margin-bottom:0}.admin-table,.data-table-wrap{background:#fff;border:1px solid #ded6ca;border-radius:8px;overflow:hidden}.data-table-wrap{overflow-x:auto}.data-table{border-collapse:collapse;width:100%;min-width:760px}.data-table th,.data-table td{text-align:left;vertical-align:middle;border-bottom:1px solid #eee5da;padding:13px 14px}.data-table th{color:#6d675f;background:#fffaf3;font-size:12px;font-weight:950}.data-table td{color:#292521;font-size:14px;font-weight:700}.data-table tr:last-child td{border-bottom:0}.admin-row{grid-template-columns:minmax(0,1fr) 190px;gap:16px;padding:16px;display:grid}.admin-row+.admin-row{border-top:1px solid #eee5da}.admin-row-meta{text-align:right;align-content:center;justify-items:end;gap:5px;display:grid}.admin-row-meta strong{overflow-wrap:anywhere;color:#171614;font-size:17px;font-weight:950}.admin-row-meta span,.muted-line{color:#6d675f;font-size:13px;font-weight:750}.empty-state{text-align:center;gap:8px;padding:36px 18px;display:grid}.empty-state strong{font-size:18px;font-weight:950}.empty-state span{color:#6d675f}@media (width<=900px){.hero-grid,.monitor-row,.admin-row,.history-header{grid-template-columns:1fr}.metrics,.admin-metrics,.problem-grid,.service-grid{grid-template-columns:repeat(2,1fr)}.admin-row-meta{text-align:left;justify-items:start}}@media (width<=620px){.topbar,.hero-grid,.content{width:min(100% - 28px,1180px)}.two-col,.three-col,.metrics,.row-actions,.admin-metrics,.admin-toolbar{grid-template-columns:1fr}.topbar,.workspace-header,.workspace-actions,.topbar-actions{flex-direction:column;align-items:stretch}.view-toggle{grid-template-columns:repeat(auto-fit,minmax(72px,1fr));display:grid}.service-grid,.problem-grid,.service-band,.alert-toggle-grid,.history-summary,.history-row,.settings-grid,.billing-grid,.payment-admin-grid,.payment-methods,.topup-request-list article{grid-template-columns:1fr}.history-actions{grid-template-columns:1fr 1fr;display:grid}.history-row>span,.history-row p,.certificate-status.compact{text-align:left;justify-content:flex-start}h1{font-size:38px}}