*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#eef4ff;color:#15233b}a{text-decoration:none;color:inherit}img{max-width:100%}
:root{--blue1:#0f4fbf;--blue2:#2f92ff;--blue3:#dcecff;--text:#15233b;--muted:#6a7a96;--card:#ffffff;--danger:#e5484d;--success:#1e9a5a;--warning:#d98b00}
.app-layout{display:flex;min-height:100vh}.sidebar{width:290px;background:linear-gradient(180deg,#17479d 0%,#2f8fff 100%);color:#fff;padding:22px 18px;position:sticky;top:0;height:100vh;overflow:auto}.main-content{flex:1;padding:24px}.guest-content{min-height:100vh}.brand{display:flex;align-items:center;gap:14px;margin-bottom:20px}.brand img{width:54px;height:54px;background:#fff;border-radius:16px;padding:6px}.brand-title{font-size:2rem;font-weight:800;line-height:1}.brand-subtitle{font-size:1.15rem;opacity:.95}.user-card{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);padding:14px;border-radius:18px;display:flex;flex-direction:column;gap:4px;margin-bottom:18px}.user-card span{font-size:.92rem;opacity:.9}.nav-links{display:flex;flex-direction:column;gap:8px}.nav-links a{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.08);font-weight:700}.nav-links a:hover{background:rgba(255,255,255,.18)}
.mobile-topbar{display:none;position:sticky;top:0;z-index:40;background:#fff;padding:12px 14px;align-items:center;justify-content:space-between;box-shadow:0 2px 18px rgba(17,58,122,.1)}.icon-btn{border:none;background:#e8f0ff;color:#17479d;border-radius:12px;width:42px;height:42px;font-size:1.1rem;display:flex;align-items:center;justify-content:center}.mobile-title{font-weight:800;color:#17479d;text-align:center}
.card{background:var(--card);border-radius:22px;box-shadow:0 10px 30px rgba(21,35,59,.08);padding:20px;margin-bottom:18px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}.section-title{margin:0 0 8px 0;font-size:1.5rem}.note{padding:12px 14px;border-radius:14px;background:#edf5ff;color:#1b4e9b}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:18px}.metric{font-size:1.9rem;font-weight:800;color:#18469c}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px;border-bottom:1px solid #e8eef8;text-align:left;vertical-align:top}.table th{font-size:.9rem;text-transform:uppercase;color:#5a6f93}.alert{padding:14px 16px;border-radius:16px;margin-bottom:16px}.alert.success{background:#e6f8ee;color:#12683b}.alert.error{background:#ffe9ea;color:#a1272a}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;padding:12px 16px;border-radius:14px;font-weight:700;cursor:pointer}.btn-primary,.btn{background:linear-gradient(135deg,var(--blue1),var(--blue2));color:#fff}.btn.green{background:linear-gradient(135deg,#148f63,#22c27f);color:#fff}.btn.gray{background:#7b8aa7;color:#fff}.btn.red{background:#d94f55;color:#fff}.btn.orange{background:#e58d1a;color:#fff}.btn.light{background:#eaf3ff;color:#18469c}.btn-block{width:100%}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid #d8e4f6;border-radius:14px;background:#fff;color:var(--text)}label{font-weight:700;font-size:.95rem;display:block;margin-bottom:6px}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.form-stack{display:grid;gap:14px}.badge{padding:6px 10px;border-radius:999px;font-size:.8rem;font-weight:700;display:inline-block}.badge.pending,.badge.reported{background:#fff3d6;color:#9a6500}.badge.approved{background:#def8e8;color:#0a7b46}.badge.rejected{background:#ffe6e8;color:#b2343a}.badge.overdue{background:#ffe8cf;color:#9b5a00}.badge.late_fee{background:#ffe0e5;color:#b1163d}.badge.frozen{background:#e3f3ff;color:#1464a0}
.parent-hero{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.quick-pay{background:linear-gradient(135deg,#eaf3ff,#ffffff);border:2px dashed #bfdaff}.summary-pill{padding:12px 14px;border-radius:14px;background:#fff;border:1px solid #e5edf8}.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.6);display:none;align-items:center;justify-content:center;padding:18px;z-index:1000}.modal-backdrop.show{display:flex}.modal{background:#fff;border-radius:24px;max-width:860px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.22);padding:22px;max-height:90vh;overflow:auto}.close-x{float:right;border:none;background:transparent;font-size:28px;cursor:pointer}.muted{color:var(--muted)}
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(145deg,#0e4eba 0%,#35a0ff 100%)}.login-card{width:min(460px,100%);background:#fff;border-radius:30px;padding:28px;box-shadow:0 25px 60px rgba(11,40,94,.24)}.login-brand{text-align:center;margin-bottom:18px}.login-brand img{width:110px;height:auto;margin-bottom:10px}.login-brand h1{margin:0 0 8px;font-size:1.8rem;color:#18469c}.login-brand p{margin:0;color:#5f708f}
.status-grid{display:grid;grid-template-columns:220px repeat(auto-fit,minmax(120px,1fr));gap:10px;align-items:stretch}.status-grid .athlete-cell,.status-grid .month-cell,.status-grid .status-cell{background:#fff;border-radius:16px;padding:12px;border:1px solid #e8eef8}.status-grid .month-cell{font-weight:700;color:#5a6f93;text-align:center}.status-grid .athlete-cell{font-weight:700}.status-grid .status-cell{text-align:center}
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.check-option{border:1px solid #d8e4f6;border-radius:16px;padding:12px;background:#fff}.check-option.all{background:#edf5ff;border-color:#bfd9ff}
@media (max-width:980px){.mobile-topbar{display:flex}.sidebar{position:fixed;left:-320px;top:0;z-index:60;transition:left .25s ease}.sidebar.open{left:0}.main-content{padding:16px}.app-layout{display:block}.brand-title{font-size:1.6rem}.brand-subtitle{font-size:1rem}}
.two-up{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.filters-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;align-items:end;margin:8px 0 18px}.filter-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.stats-grid.compact{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:4px}.stat-card.inline{padding:14px 16px;margin-bottom:0;border:1px solid #e6eefb;box-shadow:none}.stat-label{font-size:.88rem;color:#6a7a96;margin-bottom:6px}.stat-value{font-size:1.25rem;font-weight:800;color:#18469c}.stat-value.success{color:#14834f}.stat-value.warning{color:#ba7a00}.stat-value.danger{color:#bc3e42}.stat-value.violet{color:#8a2be2}
.empty-state{padding:18px;border-radius:18px;background:#f8fbff;border:1px dashed #cfe0fb;color:#23477f}
.mobile-list{display:grid;gap:12px}.mobile-item{background:#fff;border:1px solid #e8eef8;border-radius:18px;padding:14px}.mobile-item-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}.mobile-meta{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid #eef3fb}.mobile-meta:first-of-type{border-top:none;padding-top:0}.mobile-meta span{color:#6a7a96}.desktop-only{display:block}.mobile-only{display:none}.compact-form{align-items:end}.inline-help{align-self:center}
@media (max-width:980px){.desktop-only{display:none}.mobile-only{display:grid}.filters-bar{grid-template-columns:1fr}.filter-actions{display:grid;grid-template-columns:1fr 1fr}.two-up{grid-template-columns:1fr}}


.status-alert{margin:0 0 16px;padding:14px 16px;border-radius:16px;font-weight:700}
.status-alert.warning{background:#fff4dc;color:#9a6500;border:1px solid #f3d79a}
.table.monthly-table tr.row-late_fee td{background:#fff0f4}
.table.monthly-table tr.row-overdue td{background:#fff7ea}
.table.monthly-table tr.row-pending td,.table.monthly-table tr.row-reported td{background:#fffdf5}
.table.monthly-table tr.row-approved td{background:#f3fcf7}
.table.monthly-table tr.row-no_charge td,.table.monthly-table tr.row-frozen td{background:#f6f9fe}
.table.monthly-table tr:hover td{filter:brightness(.99)}
.mobile-only{display:none !important}
@media (max-width:980px){.mobile-only{display:grid !important}}
