:root{--bg:#f6f7fb;--card:#fff;--text:#171a2b;--muted:#6f7488;--line:#e7e9f2;--brand:#5b4df7;--brand2:#3f7cff;--brandSoft:#eeecff;--green:#16a36a;--greenSoft:#e8f8f1;--amber:#d78a13;--amberSoft:#fff5df;--red:#d44747;--redSoft:#fff0f0;--shadow:0 18px 55px #22274914}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);margin:0;padding:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}.brand{align-items:center;gap:10px;font-weight:850;display:flex}.brandMark{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand2));border-radius:12px;place-items:center;width:38px;height:38px;display:grid;box-shadow:0 8px 20px #5b4df747}.brandText{letter-spacing:-.5px;font-size:21px}.brandText span{color:var(--brand)}.mutedText{color:var(--muted);line-height:1.55}.eyebrow{text-transform:uppercase;letter-spacing:.11em;color:var(--brand);margin:0 0 7px;font-size:11px;font-weight:800}.primaryButton,.secondaryButton{border:1px solid #0000;border-radius:13px;justify-content:center;align-items:center;gap:9px;min-height:44px;padding:0 18px;font-weight:750;transition:all .18s;display:inline-flex}.primaryButton{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 10px 24px #5b4df733}.primaryButton:hover{transform:translateY(-1px)}.primaryButton:disabled{opacity:.45;cursor:not-allowed;transform:none}.secondaryButton{border-color:var(--line);color:#35394b;background:#fff}.secondaryButton.small{min-height:38px;padding:0 13px;font-size:13px}.full{width:100%}.large{min-height:52px;font-size:16px}.textLink{color:var(--brand);font-size:14px;font-weight:750}.card{background:var(--card);border:1px solid #e2e4eee6;border-radius:22px;padding:24px;box-shadow:0 5px 18px #1f254209}.loginPage{background:#fff;grid-template-columns:1.15fr .85fr;min-height:100vh;display:grid}.loginHero{color:#fff;background:radial-gradient(circle at 10% 15%,#5a4df738,#0000 28%),linear-gradient(145deg,#11162e 0%,#1b2150 58%,#293171 100%);padding:46px}.loginHeroInner{flex-direction:column;max-width:760px;height:100%;margin:auto;display:flex}.loginHero .brandText{color:#fff}.loginHero .brandText span{color:#9fc1ff}.heroCopy{margin:auto 0}.heroPill{background:#ffffff1a;border:1px solid #ffffff26;border-radius:99px;align-items:center;gap:7px;padding:8px 12px;font-size:13px;display:inline-flex}.heroCopy h1{letter-spacing:-2.5px;margin:24px 0 18px;font-size:clamp(42px,5vw,72px);line-height:1.02}.heroCopy h1 span{color:#aebaff}.heroCopy>p{color:#cbd0ea;max-width:640px;font-size:18px;line-height:1.6}.heroFeatures{color:#e6e9fa;flex-wrap:wrap;gap:22px;margin-top:32px;font-size:13px;font-weight:650;display:flex}.heroFeatures span{align-items:center;gap:8px;display:flex}.heroFeatures svg{width:18px}.loginPanel{background:#fbfbfd;place-items:center;padding:40px;display:grid}.loginCard{width:min(430px,100%);padding:20px}.mobileLogo{display:none}.loginIcon{width:52px;height:52px;color:var(--brand);background:var(--brandSoft);border-radius:16px;place-items:center;margin-bottom:22px;display:grid}.loginCard h2{letter-spacing:-1px;margin:0 0 8px;font-size:31px}.loginCard label{gap:8px;margin:18px 0;font-size:13px;font-weight:750;display:grid}.loginCard input{border:1px solid var(--line);background:#fff;border-radius:13px;outline:none;padding:13px 14px}.loginCard input:focus{border-color:var(--brand);box-shadow:0 0 0 3px #5b4df71a}.loginCard .secondaryButton{margin-top:10px}.demoNote{text-align:center;color:#9296a8;margin-top:18px;font-size:12px}.appShell{grid-template-columns:250px 1fr;min-height:100vh;display:grid}.sidebar{border-right:1px solid var(--line);z-index:10;background:#fff;flex-direction:column;width:250px;height:100vh;padding:22px 16px;display:flex;position:fixed}.sidebarTop{justify-content:space-between;align-items:center;padding:0 6px 24px;display:flex}.iconButton{border:1px solid var(--line);color:#656a7e;background:#fff;border-radius:11px;width:38px;height:38px}.sideNav{gap:5px;display:grid}.navItem{color:#666b7e;border-radius:12px;align-items:center;gap:12px;padding:11px 13px;font-size:14px;font-weight:680;display:flex}.navItem:hover{background:#f8f8fc}.navItem.active{background:var(--brandSoft);color:var(--brand)}.navItem.muted{color:#969aac}.sidebarBottom{gap:4px;margin-top:auto;display:grid}.mainArea{grid-column:2;min-width:0}.topbar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:5;background:#f6f7fbe6;border-bottom:1px solid #e7e9f2cc;justify-content:space-between;align-items:center;height:78px;padding:0 34px;display:flex;position:sticky;top:0}.topbar strong{font-size:15px}.topbar .eyebrow{margin-bottom:2px;font-size:9px}.avatar{color:#fff;background:#202640;border-radius:50%;place-items:center;width:40px;height:40px;font-size:12px;font-weight:800;display:grid}.pageContent{max-width:1360px;margin:0 auto;padding:34px}.bottomNav{display:none}.pageHeading{justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:26px;display:flex}.pageHeading h1{letter-spacing:-1px;margin:0 0 7px;font-size:31px}.pageHeading p:not(.eyebrow){color:var(--muted);margin:0}.metricGrid{grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px;display:grid}.metricCard{border:1px solid var(--line);background:#fff;border-radius:20px;gap:8px;min-height:160px;padding:20px;display:grid}.metricCard.featured{color:#fff;background:linear-gradient(145deg,#5b4df7,#416bf4);border-color:#0000}.metricIcon{width:40px;height:40px;color:var(--brand);background:#f1f2f8;border-radius:12px;place-items:center;margin-bottom:4px;display:grid}.featured .metricIcon{color:#fff;background:#ffffff24}.metricCard span{color:var(--muted);font-size:13px;font-weight:700}.featured span,.featured small{color:#e4e6ff}.metricCard strong{letter-spacing:-.8px;font-size:27px}.metricCard small{color:#9296a8}.quickCard{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.quickCard>div{align-items:center;gap:15px;display:flex}.sectionIcon{background:var(--brandSoft);width:48px;height:48px;color:var(--brand);border-radius:15px;place-items:center;display:grid}.quickCard h2,.sectionHeader h2{margin:0;font-size:18px}.quickCard p{color:var(--muted);margin:4px 0 0;font-size:14px}.sectionHeader{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.movementList{display:grid}.movementRow{border-bottom:1px solid #f0f1f5;align-items:center;gap:13px;padding:15px 2px;display:flex}.movementRow:last-child{border-bottom:0}.movementIcon{color:#565c73;background:#f3f4f9;border-radius:12px;place-items:center;width:40px;height:40px;display:grid}.successIcon{background:var(--greenSoft);color:var(--green)}.movementMain{gap:3px;min-width:0;display:grid}.movementMain strong{font-size:14px}.movementMain small,.movementAmount small{color:var(--muted);font-size:12px}.movementAmount{text-align:right;gap:5px;margin-left:auto;display:grid}.movementAmount strong{font-size:14px}.positive{color:var(--green)}.status{border-radius:99px;justify-content:center;align-items:center;width:max-content;padding:5px 9px;font-size:11px;font-weight:800;display:inline-flex}.status-paid{background:var(--greenSoft);color:var(--green)}.status-pending{background:var(--amberSoft);color:var(--amber)}.status-expired,.status-cancelled{color:#7a7f91;background:#f0f1f5}.status-failed{background:var(--redSoft);color:var(--red)}.narrowPage{max-width:700px;margin:0 auto}.chargeCard{text-align:center;padding:34px}.chargeIcon{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand2));border-radius:18px;place-items:center;width:58px;height:58px;margin:0 auto 22px;display:grid}.chargeIcon svg{width:28px;height:28px}.amountLabel{color:var(--muted);font-size:13px;font-weight:750}.amountInput{border-bottom:2px solid var(--line);justify-content:center;align-items:center;max-width:390px;margin:12px auto 8px;padding:4px 0 12px;display:flex}.amountInput:focus-within{border-color:var(--brand)}.amountInput span{color:#7f8498;font-size:33px;font-weight:700}.amountInput input{text-align:center;letter-spacing:-2px;width:100%;min-width:0;color:var(--text);background:0 0;border:0;outline:0;font-size:46px;font-weight:850}.amountInput input::placeholder{color:#d4d6df}.currencyChip{color:#6f7488;background:#f3f4f8;border-radius:99px;margin:8px 0 26px;padding:7px 11px;font-size:11px;font-weight:750;display:inline-flex}.safeNote{text-align:left;color:#6d7287;align-items:flex-start;gap:9px;margin-top:18px;font-size:12px;line-height:1.5;display:flex}.safeNote svg{color:var(--green);flex:none}.infoStrip{color:#62687e;align-items:flex-start;gap:10px;padding:17px 5px;font-size:13px;line-height:1.5;display:flex}.infoStrip svg{color:var(--brand);flex:none}.errorBox{background:var(--redSoft);color:var(--red);border-radius:10px;margin-bottom:14px;padding:10px 12px;font-size:13px}.paymentGrid{grid-template-columns:minmax(360px,.8fr) minmax(420px,1.2fr);gap:18px;display:grid}.qrCard{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:500px;display:flex}.qrFrame{border:1px solid var(--line);background:#fff;border-radius:18px;padding:14px;box-shadow:0 10px 30px #16192c14}.timer{color:var(--muted);align-items:center;gap:7px;margin:18px 0 4px;font-size:13px;display:flex}.timer strong{color:var(--brand);font-size:17px}.qrHelp{color:var(--muted);font-size:13px}.qrCard .secondaryButton{margin-top:10px}.demoButton{color:#a0a3b2;background:0 0;border:0;margin-top:12px;font-size:11px;text-decoration:underline}.detailCard{align-self:start}.detailList{margin:0;display:grid}.detailList>div{border-bottom:1px solid #f0f1f5;grid-template-columns:140px 1fr;gap:16px;padding:14px 0;display:grid}.detailList dt{color:var(--muted);font-size:13px}.detailList dd{word-break:break-word;margin:0;font-size:13px;font-weight:720}.codeValue{align-items:center;gap:7px;display:flex}.codeValue button{color:var(--brand);background:0 0;border:0;padding:2px}.verificationNote{background:#f7f7fc;border-radius:14px;margin-top:20px;padding:15px}.verificationNote strong{font-size:13px}.verificationNote p{color:var(--muted);margin:6px 0 0;font-size:12px;line-height:1.55}.paymentResult{justify-items:center;gap:10px;max-width:340px;display:grid}.paymentResult span{border-radius:50%;place-items:center;width:68px;height:68px;display:grid}.paymentResult svg{width:36px;height:36px}.paymentResult.success span{background:var(--greenSoft);color:var(--green)}.paymentResult.expired span{color:#8c90a0;background:#f1f2f5}.paymentResult h2{margin:4px 0 0;font-size:24px}.paymentResult strong{font-size:32px}.paymentResult p{color:var(--muted);margin:0 0 10px;line-height:1.5}.providerFrameWrap{width:100%}.providerFrame{border:1px solid var(--line);background:#fff;border-radius:16px;width:100%;height:390px}.providerFrameNote{color:var(--muted);margin:8px 0 0;font-size:11px;line-height:1.45}.tableCard{padding:0;overflow:hidden}.tableToolbar{border-bottom:1px solid var(--line);gap:10px;padding:17px;display:flex}.searchBox{border:1px solid var(--line);background:#fff;border-radius:11px;flex:1;align-items:center;gap:9px;padding:0 12px;display:flex}.searchBox svg{color:#9599aa}.searchBox input{background:0 0;border:0;outline:0;width:100%;height:42px}.tableToolbar select{border:1px solid var(--line);color:#555b70;background:#fff;border-radius:11px;padding:0 12px}.tableWrap{overflow:auto}table{border-collapse:collapse;width:100%;min-width:720px}th,td{text-align:left;border-bottom:1px solid #f0f1f5;padding:14px 18px;font-size:13px}th{text-transform:uppercase;letter-spacing:.07em;color:#9094a5;background:#fafafd;font-size:11px}td small{color:#979bac;margin-top:3px;font-size:10px;display:block}.amountCell{font-weight:800}.emptyCell{text-align:center;color:var(--muted);padding:34px}.adminPage{min-height:100vh}.adminHeader{border-bottom:1px solid var(--line);background:#fff;justify-content:space-between;align-items:center;height:72px;padding:0 34px;display:flex}.adminHeader>div{align-items:center;gap:12px;display:flex}.adminTag{color:#fff;background:#161b31;border-radius:99px;padding:7px 10px;font-size:11px;font-weight:800}.adminContent{max-width:1400px;margin:auto;padding:34px}.adminMetrics{grid-template-columns:repeat(4,1fr)}@media (max-width:1050px){.metricGrid,.adminMetrics{grid-template-columns:repeat(2,1fr)}.paymentGrid{grid-template-columns:1fr}.qrCard{min-height:0}.loginPage{grid-template-columns:1fr}.loginHero{display:none}.mobileLogo{margin-bottom:44px;display:block}.loginPanel{min-height:100vh}.appShell{grid-template-columns:78px 1fr}.sidebar{width:78px}.sidebar .brandText,.sidebar .navItem span,.sidebarBottom .navItem span,.sidebarMenu{display:none}.sidebarTop{justify-content:center}.navItem{justify-content:center;padding:12px}.mainArea{grid-column:2}}@media (max-width:700px){.appShell{display:block}.sidebar{display:none}.mainArea{display:block}.topbar{height:66px;padding:0 18px}.pageContent{padding:20px 16px 90px}.bottomNav{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);z-index:20;padding:7px 5px calc(7px + env(safe-area-inset-bottom));background:#fffffff5;grid-template-columns:repeat(4,1fr);display:grid;position:fixed;bottom:0;left:0;right:0}.bottomNav a{color:#85899a;justify-items:center;gap:3px;padding:5px;font-size:10px;display:grid}.bottomNav a.active{color:var(--brand)}.pageHeading{align-items:flex-start}.pageHeading h1{font-size:25px}.pageHeading>.primaryButton{display:none}.metricGrid,.adminMetrics{grid-template-columns:1fr 1fr;gap:10px}.metricCard{min-height:135px;padding:15px}.metricCard strong{font-size:21px}.metricGrid .metricCard:first-child{grid-column:1/-1}.quickCard{flex-direction:column;align-items:flex-start;gap:14px}.quickCard .primaryButton{width:100%}.card{border-radius:18px;padding:18px}.chargeCard{padding:26px 18px}.amountInput input{font-size:40px}.paymentGrid{display:block}.detailCard{margin-top:14px}.detailList>div{grid-template-columns:110px 1fr}.qrFrame svg{width:220px;height:220px}.tableToolbar{display:grid}.adminHeader{padding:0 16px}.adminTag{display:none}.adminContent{padding:22px 14px}.loginCard{padding:0}.heroCopy h1{font-size:40px}.movementRow{gap:9px}.movementAmount{max-width:120px}}
