*{box-sizing:border-box}:root{--bg: #f5f7fb;--panel: #ffffff;--text: #1f2937;--muted: #64748b;--border: #e2e8f0;--primary: #0f766e;--primary-2: #0d9488;--danger: #dc2626;--danger-2: #ef4444;--shadow: 0 10px 30px rgba(15, 23, 42, .06)}body{margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at top left,#eef6ff 0,var(--bg) 50%);color:var(--text)}#root{max-width:1320px;margin:0 auto;padding:24px 22px 36px}.page h1{margin:0;font-size:30px;letter-spacing:-.3px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}.sub{margin:8px 0 16px;color:var(--muted)}.nav{display:flex;gap:10px;margin-bottom:16px}.nav a{text-decoration:none;padding:9px 14px;border-radius:999px;border:1px solid var(--border);color:#0f172a;background:var(--panel);font-size:14px;transition:all .2s ease}.nav a.active{background:linear-gradient(120deg,var(--primary),var(--primary-2));color:#fff;border-color:transparent;box-shadow:0 6px 14px #0f766e4d}.nav a:hover{border-color:#c7d2fe}.loading{margin-bottom:12px;color:#2563eb}.error{margin-bottom:12px;background:#fee2e2;border:1px solid #fecaca;color:#b91c1c;padding:10px;border-radius:8px}.cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:18px}.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:var(--shadow)}.card h3{margin:0 0 8px;font-size:14px;color:var(--muted);font-weight:600}.card strong{font-size:24px;letter-spacing:-.2px}.ok{color:#047857}.bad{color:#b91c1c}.grid{display:grid;grid-template-columns:1fr;gap:16px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow);margin-bottom:18px;overflow-x:auto}.grid .panel{margin-bottom:0}.panel h2{margin:0 0 12px;font-size:20px;letter-spacing:-.2px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.panel-head h2{margin:0}.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-bottom:12px}input,select,button{padding:10px;border-radius:10px;border:1px solid #cbd5e1;font-size:14px;transition:all .2s ease}input:focus,select:focus{outline:none;border-color:#7dd3fc;box-shadow:0 0 0 4px #38bdf826}button{background:linear-gradient(120deg,var(--primary),var(--primary-2));color:#fff;border:0;cursor:pointer;font-weight:600;letter-spacing:.15px}button:hover{transform:translateY(-1px);box-shadow:0 8px 18px #0d94884d}.small{padding:6px 8px;font-size:12px;background:linear-gradient(120deg,#2563eb,#3b82f6);box-shadow:none}.danger{background:linear-gradient(120deg,var(--danger),var(--danger-2))}.checkbox{display:flex;align-items:center;gap:8px}table{width:100%;border-collapse:collapse;border-radius:10px;overflow:hidden;min-width:680px}th,td{text-align:left;border-bottom:1px solid #eef2f7;padding:10px 8px;font-size:14px}th{background:#f8fafc;color:#475569;font-weight:700}th.month{text-align:center}tr:hover td{background:#f8fafc}.due-cell{font-size:12px;font-weight:600;text-align:center}.due-paid{background:#dcfce7;color:#166534}.due-unpaid{background:#fee2e2;color:#991b1b}.due-empty{background:#f8fafc;color:#94a3b8}.exports p{margin:0 0 10px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 12px}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center}.login-card{width:360px;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;display:grid;gap:10px;box-shadow:var(--shadow)}.login-card h2{margin:0}.login-card p{margin:0;color:var(--muted);font-size:13px}.swal2-popup{border-radius:14px!important}.swal2-title{font-size:1.3rem!important}.swal2-input,.swal2-select{border-radius:10px!important;border:1px solid #cbd5e1!important;font-size:14px!important}@media (max-width: 992px){#root{padding:18px 14px 26px}.page h1{font-size:24px}.topbar{align-items:flex-start;flex-direction:column}.topbar .danger{width:100%}.panel-head{align-items:flex-start;flex-direction:column}.panel-head .actions{width:100%}}@media (max-width: 768px){#root{padding:14px 10px 20px}.nav{overflow-x:auto;white-space:nowrap;padding-bottom:6px;margin-bottom:12px}.nav a{flex:0 0 auto}.cards{grid-template-columns:1fr;gap:10px;margin-bottom:12px}.card strong{font-size:22px}.panel{border-radius:12px;padding:12px}th,td{font-size:13px;padding:8px 6px}.actions{gap:8px}.actions button,.small{width:100%}.login-wrap{min-height:100dvh;padding:12px}.login-card{width:100%}.swal2-popup{width:calc(100vw - 20px)!important}}