:root{ --bg:#ffffff; --fg:#111827; --muted:#6b7280; --green:#10b981; --green-600:#059669; --border:#e5e7eb; --ring:#a7f3d0; --red:#ef4444; }
*{ box-sizing:border-box }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; color:var(--fg); background:var(--bg); }
.container{ max-width:1100px; margin:0 auto; padding:16px }
.app-header{ display:flex; align-items:center; gap:12px; padding:12px 0; flex-wrap:wrap }
.brand{ font-weight:800; font-size:20px }
.nav{ display:flex; gap:8px; align-items:center; flex:1 }
.nav-link{ padding:8px 12px; border-radius:10px; color:inherit; text-decoration:none }
.nav-link.active{ background:var(--ring) }
.spacer{ flex:1 }
.btn{ display:inline-block; background:var(--green); color:#fff; border:none; padding:10px 14px; border-radius:12px; font-weight:600; text-decoration:none; cursor:pointer }
.btn:hover{ background:var(--green-600) }
.btn-outline{ background:transparent; color:var(--green); border:2px solid var(--green) }
.btn-danger{ background:var(--red) }
.card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,.05) }
.grid{ display:grid; gap:16px }
.grid-2{ grid-template-columns:repeat(2,1fr) }
.grid-3{ grid-template-columns:repeat(3,1fr) }
@media (max-width: 900px){ .grid-3,.grid-2{ grid-template-columns:1fr } }
label{ font-size:14px; color:var(--muted); display:block; margin-bottom:6px }
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],input[type=number],select,textarea{
width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:#fff; outline:none }
input:focus,select:focus,textarea:focus{ border-color:var(--green); box-shadow:0 0 0 4px var(--ring) }
.table{ width:100%; border-collapse:separate; border-spacing:0 8px }
.table th,.table td{ text-align:left; padding:10px 12px }
.table tr{ background:#fff }
.table tr td:first-child,.table tr th:first-child{ border-top-left-radius:12px; border-bottom-left-radius:12px }
.table tr td:last-child,.table tr th:last-child{ border-top-right-radius:12px; border-bottom-right-radius:12px }
.muted{ color:var(--muted) }
.flash{ background:#ecfeff; border:1px solid #a5f3fc; color:#075985; padding:10px 12px; border-radius:12px; margin:10px 0 }
.footer{ text-align:center; margin:32px 0 8px }
.badge{ background:var(--ring); color:#065f46; border:1px solid var(--green); padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700 }
.small{ font-size:12px }
.calendar{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px }
.day{ text-align:center; padding:8px 0; border:1px solid var(--border); border-radius:8px }
.day.hit{ background:var(--ring); border-color:var(--green); font-weight:700 }