:root{--color-bg: #f0f2f5;--color-surface: #ffffff;--color-text: #1b1f23;--color-muted: #6b7280;--color-primary: #3b5998;--color-primary-dark: #2d4373;--color-danger: #c0392b;--color-success: #1e8e3e;--color-warning: #b8860b;--radius: 8px;--shadow: 0 2px 10px rgba(0, 0, 0, .08)}*{box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:var(--color-bg);color:var(--color-text)}.app-loading{display:flex;align-items:center;justify-content:center;height:100vh;color:var(--color-muted)}.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px}.login-card{width:100%;max-width:360px;background:var(--color-surface);padding:32px;border-radius:var(--radius);box-shadow:var(--shadow)}.login-card h1{margin-top:0;margin-bottom:24px;font-size:1.5rem}.login-card form{display:flex;flex-direction:column;gap:14px}.login-card label{font-size:.85rem;color:var(--color-muted);margin-bottom:4px;display:block}.login-card input{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:1rem;transition:border-color .15s ease}.login-card input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #3b599826}.login-card button{width:100%;padding:11px;background:var(--color-primary);color:#fff;border:0;border-radius:6px;font-size:1rem;cursor:pointer;transition:background .15s ease}.login-card button:hover{background:var(--color-primary-dark)}.login-card button:disabled{opacity:.6;cursor:not-allowed}.error{color:var(--color-danger);font-size:.85rem}.hint{color:var(--color-muted);font-size:.75rem;text-align:center;margin-top:12px}.dashboard{max-width:1100px;margin:0 auto;padding:24px 16px 48px}.dashboard header{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:24px}.dashboard header h1{font-size:1.4rem;margin:0}.dashboard header .actions button{margin-left:8px;padding:8px 16px;border:1px solid #d1d5db;background:var(--color-surface);border-radius:6px;cursor:pointer}.dashboard header .actions button:hover{background:#f3f4f6}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:28px}.kpi-card{background:var(--color-surface);padding:20px;border-radius:var(--radius);text-align:center;box-shadow:var(--shadow)}.kpi-card .kpi-value{font-size:1.8rem;font-weight:700}.kpi-card .kpi-label{color:var(--color-muted);font-size:.8rem;margin-top:6px;text-transform:uppercase;letter-spacing:.03em}.txns-table-wrap{background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto}.txns-table{width:100%;border-collapse:collapse;min-width:480px}.txns-table th,.txns-table td{padding:12px 16px;text-align:left;border-bottom:1px solid #eef0f2;font-size:.9rem}.txns-table th{background:#fafbfc;color:var(--color-muted);font-weight:600;text-transform:uppercase;font-size:.75rem;letter-spacing:.03em}.status-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:600;text-transform:capitalize}.status-badge.paid{background:#1e8e3e1f;color:var(--color-success)}.status-badge.pending{background:#b8860b1f;color:var(--color-warning)}.status-badge.failed{background:#c0392b1f;color:var(--color-danger)}@media (max-width: 640px){.dashboard header{flex-direction:column;align-items:flex-start}.kpi-grid{grid-template-columns:repeat(2,1fr)}.login-card{padding:24px}}@media (max-width: 400px){.kpi-grid{grid-template-columns:1fr}}