:root { --ink:#15302d; --muted:#5d706d; --surface:#ffffff; --canvas:#f4f8f7; --line:#d9e4e1; --brand:#126b61; --brand-dark:#0d4e48; --danger:#ae3131; --warning:#8a5600; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--canvas); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--canvas); line-height:1.5; }
a { color:var(--brand-dark); font-weight:650; }
button, input, select, textarea { font:inherit; }
button, .button { min-height:44px; border-radius:9px; border:1px solid var(--brand); padding:.62rem 1rem; cursor:pointer; }
.button { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; background:var(--brand); color:#fff; }
.button:hover { background:var(--brand-dark); }
.secondary { background:#fff; color:var(--brand-dark); }
.danger-button { color:var(--danger); background:#fff; border:1px solid #e9bdbd; padding:.45rem .7rem; }
.link-button { border:0; background:transparent; color:#fff; text-decoration:underline; padding:.3rem; }
.site-header { background:var(--brand-dark); color:#fff; padding:.7rem 1rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.brand { color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:.55rem; margin-right:auto; font-weight:750; }
.brand img { width:32px; height:32px; }
.nav { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; width:100%; }
.nav a { color:#e6f4f1; text-decoration:none; }
.nav form { margin:0; }
.install { background:#f3c761; border-color:#f3c761; color:#2b2511; }
.container { max-width:1080px; margin:0 auto; padding:1.2rem 1rem 3rem; }
.hero { padding:1.4rem 0 .6rem; }
.hero h1, .page-heading h1, .auth-card h1 { margin:.1rem 0 .3rem; line-height:1.15; font-size:clamp(1.7rem, 6vw, 2.45rem); }
.eyebrow { color:var(--brand-dark); font-size:.82rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin:0 0 .3rem; }
.card, .auth-card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1rem; box-shadow:0 2px 8px rgba(21,48,45,.04); margin:1rem 0; }
.auth-card { max-width:460px; margin:4vh auto; padding:1.35rem; }
.narrow { max-width:550px; margin:5vh auto; }
.stats { display:grid; grid-template-columns:1fr; gap:.75rem; }
.stats article { background:#dff1ec; border-radius:12px; padding:1rem; display:flex; flex-direction:column; }
.stats strong { font-size:2rem; }
.page-heading, .section-heading { display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; }
.page-heading { margin-top:.4rem; }
.section-heading h2 { margin:0; }
.section-heading span, .hint { color:var(--muted); font-size:.9rem; }
.search { display:flex; gap:.5rem; margin:1rem 0; }
.search input { min-width:0; flex:1; }
.list-card { padding:0; overflow:hidden; }
.list-row, .record { padding:1rem; border-bottom:1px solid var(--line); display:flex; gap:1rem; align-items:flex-start; justify-content:space-between; }
.list-row:last-child, .record:last-of-type { border-bottom:0; }
.list-row h2, .record h3 { font-size:1rem; margin:0; }
.list-row p, .record p { margin:.2rem 0 0; }
.text-link { white-space:nowrap; }
.pagination { display:flex; gap:1rem; padding:.8rem 0; }
.flash { margin:1rem 0; padding:.8rem 1rem; border-radius:10px; border:1px solid; }
.flash-success { background:#e4f5e8; border-color:#a9d8b2; color:#155923; }
.flash-error { background:#fff1f0; border-color:#e8b9b6; color:#7b1f1c; }
.flash ul { margin:.4rem 0 0; padding-left:1.1rem; }
.form-card h2, .module-section h2 { margin-top:0; }
.form-grid { display:grid; grid-template-columns:1fr; gap:.85rem; }
label { display:flex; flex-direction:column; gap:.32rem; font-weight:650; }
input, select, textarea { width:100%; border:1px solid #a7bab5; background:#fff; border-radius:8px; padding:.64rem .7rem; color:var(--ink); }
input:focus, select:focus, textarea:focus { outline:3px solid #a4d8cf; outline-offset:1px; border-color:var(--brand); }
textarea { resize:vertical; }
.hint { font-weight:500; }
.actions { display:flex; gap:.6rem; margin-top:1rem; }
.full { grid-column:1 / -1; }
.details { display:grid; grid-template-columns:1fr; gap:.85rem; margin:0; }
.details div { padding:.65rem 0; border-bottom:1px solid var(--line); }
.details dt { color:var(--muted); font-size:.82rem; font-weight:700; }
.details dd { margin:.18rem 0 0; }
.module-section { overflow:hidden; }
.add-record, .record-actions { margin-top:.8rem; padding:.7rem; border:1px solid var(--line); border-radius:10px; background:#f9fcfb; }
.add-record summary, .record-actions summary { cursor:pointer; color:var(--brand-dark); font-weight:750; }
.add-record form, .record-actions form { margin-top:1rem; }
.record-actions { min-width:88px; }
.record-actions form + form { margin-top:.55rem; }
.danger-zone { margin:1.5rem 0; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (min-width: 700px) { .site-header { padding:.75rem 2rem; } .nav { width:auto; } .container { padding:1.6rem 2rem 3rem; } .form-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } .details { grid-template-columns:repeat(3, minmax(0,1fr)); } .details .wide { grid-column:1 / -1; } .stats { grid-template-columns:repeat(3, 1fr); } }