:root { --wave:#1dc8ff; --ink:#11233f; --muted:#69758a; --line:#dfe5ee; }
* { box-sizing:border-box; } html { font-size:16px; min-height:100%; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; background:radial-gradient(circle at 15% 10%,#e4f8ff 0,transparent 34%),linear-gradient(145deg,#f7fbff,#eef4fa); }
.app-menu { position:relative; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:66px; padding:0 max(24px,calc((100vw - 1450px) / 2)); background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); box-shadow:0 7px 24px rgba(34,64,104,.06); backdrop-filter:blur(12px); }
.menu-brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.menu-brand > span { display:grid; place-items:center; width:34px; height:34px; color:white; background:var(--wave); border-radius:10px; font-weight:900; transform:rotate(-3deg); }
.menu-brand strong { font-size:.95rem; }
.app-menu nav { display:flex; align-items:center; gap:6px; }
.app-menu nav a { padding:10px 14px; color:#56647a; border-radius:10px; font-size:.86rem; font-weight:750; text-decoration:none; }
.app-menu nav a:hover { color:#087fa8; background:#f0faff; }
.app-menu nav a.active { color:#075f7f; background:#e4f8ff; }
.has-menu .payment-shell,.has-menu .list-shell { min-height:calc(100vh - 66px); }
.payment-shell { min-height:100vh; display:grid; place-items:center; padding:36px 18px; }
.payment-card { width:min(100%,620px); padding:44px; background:rgba(255,255,255,.96); border:1px solid rgba(220,228,239,.9); border-radius:26px; box-shadow:0 24px 70px rgba(34,64,104,.12); }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; margin-bottom:22px; color:white; background:var(--wave); border-radius:15px; font-size:24px; font-weight:900; transform:rotate(-4deg); }
.eyebrow { margin:0 0 8px; color:#0285b2; font-weight:750; font-size:.78rem; text-transform:uppercase; letter-spacing:.13em; }
h1 { margin:0; font-size:clamp(1.8rem,6vw,2.5rem); letter-spacing:-.045em; line-height:1.08; } .intro { margin:12px 0 30px; color:var(--muted); line-height:1.6; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .field { margin-bottom:20px; } label { display:block; margin-bottom:8px; font-size:.88rem; font-weight:720; }
.form-control,.form-select { width:100%; height:52px; padding:0 15px; color:var(--ink); background:white; border:1px solid var(--line); border-radius:12px; font:inherit; outline:none; transition:border-color .2s,box-shadow .2s; }
.form-control:focus,.form-select:focus { border-color:#15ace0; box-shadow:0 0 0 4px rgba(29,200,255,.13); } .form-control.readonly { background:#f5f7fa; color:#48566b; }
.amount-input,.phone-input { display:flex; align-items:center; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#f5f7fa; }
.amount-input .form-control,.phone-input .form-control { border:0; border-radius:0; box-shadow:none; } .amount-input span { padding-right:14px; color:var(--muted); font-size:.75rem; font-weight:800; }
.phone-input span { padding:0 12px; white-space:nowrap; color:#445169; font-size:.9rem; border-right:1px solid var(--line); } .field small { display:block; margin-top:7px; color:var(--muted); font-size:.76rem; }
.text-danger { display:block; margin-top:5px; color:#bd2637; font-size:.78rem; } .validation-summary ul { margin:0 0 18px; padding-left:20px; }
.total-box { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:8px 0 22px; padding:20px; background:#edfaff; border:1px solid #ccefff; border-radius:16px; }
.total-box span { display:block; font-size:.88rem; font-weight:700; } .total-box div small { display:block; margin-top:4px; color:var(--muted); } .total-box strong { display:flex; align-items:baseline; gap:5px; font-size:1.65rem; white-space:nowrap; }
.total-box strong span { font-size:inherit; } .total-box strong small { color:#087fa8; font-size:.66rem; }
.pay-button { width:100%; padding:15px 20px; color:#052539; background:var(--wave); border:0; border-radius:13px; font:inherit; font-weight:850; cursor:pointer; box-shadow:0 10px 25px rgba(29,200,255,.25); transition:transform .15s,filter .15s; }
.pay-button:hover { filter:brightness(.96); transform:translateY(-1px); } .pay-button:disabled { opacity:.5; cursor:not-allowed; } .security-note { margin:14px 0 0; color:var(--muted); text-align:center; font-size:.75rem; }
.alert { padding:13px 15px; margin-bottom:20px; border-radius:10px; font-size:.85rem; } .alert-warning { color:#714c05; background:#fff5d8; border:1px solid #f5dfa5; }
.alert-success { color:#087a4d; background:#e8faf1; border:1px solid #c8efdb; }
.result-card { text-align:center; } .result-icon { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 22px; border-radius:50%; font-size:30px; font-weight:900; } .result-icon.success { color:#087a4d; background:#dff8ec; } .result-icon.pending { color:#8b5e00; background:#fff2cf; }
.receipt { margin:28px 0; padding:8px 20px; background:#f7f9fc; border-radius:15px; text-align:left; } .receipt div { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); } .receipt div:last-child { border:0; } .receipt dt { color:var(--muted); } .receipt dd { margin:0; font-weight:700; text-align:right; overflow-wrap:anywhere; }
.list-shell { min-height:100vh; padding:42px 24px; }
.list-card { width:min(100%,1450px); margin:0 auto; padding:36px; background:rgba(255,255,255,.97); border:1px solid rgba(220,228,239,.9); border-radius:24px; box-shadow:0 24px 70px rgba(34,64,104,.11); }
.list-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.list-heading .intro { margin-bottom:24px; }
.list-metrics { display:flex; align-items:flex-end; flex-direction:column; gap:12px; }
.result-count { flex:none; padding:9px 13px; color:#087fa8; background:#edfaff; border:1px solid #ccefff; border-radius:999px; font-size:.8rem; font-weight:800; }
.total-received { min-width:210px; padding:15px 18px; color:#087a4d; background:#e8faf1; border:1px solid #c8efdb; border-radius:14px; }
.total-received > span { display:block; margin-bottom:4px; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.total-received strong { font-size:1.35rem; }
.total-received small { font-size:.65rem; }
.filter-form { display:grid; grid-template-columns:repeat(3,minmax(170px,1fr)) auto; align-items:end; gap:14px; padding:20px; margin-bottom:24px; background:#f7f9fc; border:1px solid var(--line); border-radius:16px; }
.filter-form .field { margin:0; }
.filter-actions { display:flex; align-items:center; gap:12px; min-height:52px; }
.filter-button { height:52px; padding:0 22px; color:#052539; background:var(--wave); border:0; border-radius:12px; font:inherit; font-weight:850; cursor:pointer; }
.reset-link { color:#53627a; font-size:.86rem; font-weight:700; text-decoration:none; }
.reset-link:hover { color:#087fa8; text-decoration:underline; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:15px; }
.billing-table { width:100%; border-collapse:collapse; white-space:nowrap; font-size:.88rem; }
.billing-table th { padding:14px 16px; color:#5c6980; background:#f5f8fc; border-bottom:1px solid var(--line); text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.055em; }
.billing-table td { padding:15px 16px; border-bottom:1px solid #e9edf3; }
.billing-table tbody tr:last-child td { border-bottom:0; }
.billing-table tbody tr:hover { background:#f9fcff; }
.client-code,.amount-total { font-weight:800; }
.status-badge { display:inline-block; padding:6px 10px; border-radius:999px; font-size:.76rem; font-weight:800; }
.status-badge.paid { color:#087a4d; background:#dff8ec; }
.status-badge.initiated { color:#8b5e00; background:#fff2cf; }
.status-badge.inactive { color:#69758a; background:#edf0f4; }
.status-badge.expired { color:#bd2637; background:#fde8eb; }
.status-badge.current { color:#087a4d; background:#dff8ec; }
.empty-row { padding:40px !important; color:var(--muted); text-align:center; }
.table-action { display:inline-block; padding:7px 11px; color:#087fa8; background:#edfaff; border:0; border-radius:9px; font:inherit; font-size:.76rem; font-weight:800; text-decoration:none; cursor:pointer; }
.table-action:hover { background:#d9f5ff; }
.row-actions { display:flex; align-items:center; gap:7px; }
.checkbox-field { display:flex; align-items:center; gap:10px; margin:2px 0 24px; cursor:pointer; }
.checkbox-field input { width:19px; height:19px; accent-color:#15ace0; }
.checkbox-field span { font-size:.9rem; font-weight:750; }
.back-link { display:block; margin-top:16px; color:#53627a; text-align:center; font-size:.86rem; font-weight:700; text-decoration:none; }
.back-link:hover { color:#087fa8; text-decoration:underline; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.client-dialog { width:min(92vw,620px); padding:0; color:var(--ink); background:transparent; border:0; border-radius:22px; box-shadow:0 28px 90px rgba(17,35,63,.28); }
.client-dialog::backdrop { background:rgba(17,35,63,.48); backdrop-filter:blur(3px); }
.dialog-form { padding:30px; background:white; border-radius:22px; }
.dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }
.dialog-heading h2 { margin:0; font-size:1.65rem; letter-spacing:-.035em; }
.dialog-close { display:grid; place-items:center; flex:none; width:38px; height:38px; color:#69758a; background:#f1f4f8; border:0; border-radius:50%; font-size:1.5rem; cursor:pointer; }
.client-filter-form { display:flex; align-items:flex-end; gap:12px; max-width:520px; padding:16px; margin-bottom:22px; background:#f7f9fc; border:1px solid var(--line); border-radius:14px; }
.client-filter-form .field { flex:1; margin:0; }
.client-filter-form .reset-link { min-height:52px; display:flex; align-items:center; }
.client-actions-bar { display:flex; align-items:center; justify-content:flex-end; gap:16px; margin:-4px 0 16px; }
.client-actions-bar > span { color:var(--muted); font-size:.82rem; font-weight:700; }
.client-actions-bar .filter-button:disabled { opacity:.48; cursor:not-allowed; }
.billing-table input[type="checkbox"] { width:17px; height:17px; accent-color:#15ace0; cursor:pointer; }
.billing-table input[type="checkbox"]:disabled { opacity:.35; cursor:not-allowed; }
.dialog-summary { margin:6px 0 0; color:var(--muted); font-size:.86rem; }
.sms-message { min-height:150px; padding:14px 15px; resize:vertical; line-height:1.5; }
.information-card { max-width:1450px; }
.information-table-wrap { margin-bottom:30px; }
.information-form { display:grid; gap:24px; }
.information-form-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.information-form-heading h2 { margin:0; font-size:1.45rem; }
.information-form fieldset { min-width:0; padding:24px; border:1px solid var(--line); border-radius:16px; }
.information-form legend { padding:0 10px; font-size:1rem; font-weight:850; }
.information-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; }
.information-grid .span-two { grid-column:span 2; }
.information-actions { width:min(100%,360px); margin-left:auto; }
@media (max-width:600px) { .client-actions-bar { align-items:stretch; flex-direction:column; } .client-actions-bar .filter-button { width:100%; } }
@media (max-width:600px) { .payment-card { padding:30px 22px; border-radius:20px; } .field-row { grid-template-columns:1fr; gap:0; } .total-box { align-items:flex-start; flex-direction:column; } }
@media (max-width:950px) { .filter-form { grid-template-columns:1fr 1fr; } .filter-actions { align-self:end; } }
@media (max-width:600px) { .list-shell { padding:18px 10px; } .list-card { padding:22px 14px; border-radius:18px; } .list-heading { flex-direction:column; } .filter-form { grid-template-columns:1fr; } }
@media (max-width:600px) { .app-menu { min-height:60px; padding:0 12px; } .menu-brand strong { display:none; } .app-menu nav a { padding:9px 10px; } .has-menu .payment-shell,.has-menu .list-shell { min-height:calc(100vh - 60px); } }
@media (max-width:700px) { .information-grid { grid-template-columns:1fr; } .information-grid .span-two { grid-column:auto; } .information-form fieldset { padding:20px 16px; } .information-actions { width:100%; } .information-form-heading { align-items:flex-start; flex-direction:column; } }