:root { --navy:#172b4d; --blue:#1366d6; --mint:#18a57a; --bg:#f4f7fb; --line:#dce3ee; --text:#26354d; }
* { box-sizing:border-box; } body { margin:0; font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); }
.shell { display:grid; grid-template-columns:240px 1fr; min-height:100vh; }.sidebar { background:var(--navy); color:#dce8ff; padding:25px 14px; }.brand { color:#fff; font-weight:800; font-size:20px; padding:0 12px 22px; }.brand span { color:#7ed6c1; }.sidebar a { color:#dce8ff; display:block; text-decoration:none; padding:10px 12px; border-radius:7px; margin:2px 0; }.sidebar a:hover,.sidebar a.active { background:#24436f; color:#fff; }.main { padding:28px; max-width:1500px; width:100%; }.top { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }.top h1 { margin:0; font-size:25px; }.muted { color:#66758c; }.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px; box-shadow:0 1px 2px #172b4d09; margin-bottom:18px; }.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }.stat b { font-size:25px; display:block; margin-top:5px; }.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } label { display:block; color:#536179; font-size:12px; font-weight:700; margin-bottom:5px; } input,select,textarea { width:100%; border:1px solid #cbd5e1; border-radius:6px; padding:9px; font:inherit; color:var(--text); background:#fff; } textarea { min-height:70px; } button,.button { display:inline-block; border:0; padding:9px 14px; border-radius:6px; background:var(--blue); color:#fff; cursor:pointer; font:inherit; text-decoration:none; } .button.secondary,button.secondary { background:#edf2f8; color:#28415f; } .button.good { background:var(--mint); } .actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:14px 0; } table { border-collapse:collapse; width:100%; background:#fff; } th,td { padding:10px 9px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; } th { font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#67778e; background:#f8fafc; } .table-wrap { overflow:auto; }.badge { display:inline-block; border-radius:20px; padding:3px 8px; font-size:11px; background:#e5efff; color:#1654a4; }.badge.paid,.badge.processed { background:#dff7ed; color:#09734f; }.alert { border-radius:7px; padding:12px; margin-bottom:16px; background:#e0f2fe; color:#075985; }.alert.error { background:#fee2e2; color:#991b1b; }.photo { width:42px; height:42px; border-radius:50%; object-fit:cover; background:#e8eef7; }.profile-photo { width:96px; height:96px; border-radius:12px; object-fit:cover; background:#e8eef7; }.login { max-width:430px; margin:10vh auto; }.login .card { padding:30px; }.report-header { display:flex; justify-content:space-between; border-bottom:2px solid var(--navy); padding-bottom:12px; margin-bottom:16px; }.right { text-align:right; }.number { text-align:right; white-space:nowrap; }.record-detail td { border:0; padding:4px 8px; }
.main { min-width:0; }.shell { grid-template-columns:240px minmax(0,1fr); }
@media (max-width:850px) { .shell { grid-template-columns:1fr; }.sidebar { padding:12px; }.sidebar a { display:inline-block; }.main { padding:16px; }.stats,.grid,.grid3 { grid-template-columns:1fr; } }
@media print { @page { size:landscape; margin:11mm; } body { background:#fff; font-size:11px; }.sidebar,.no-print,.top .button { display:none!important; }.shell { display:block; }.main { max-width:none; padding:0; }.card { box-shadow:none; border:0; padding:0; }.card.no-print { display:none!important; } table { font-size:10px; } th,td { padding:5px; } .report-header { display:flex; } }