:root{
  --bg:#F5F6F0;
  --surface:#FFFFFF;
  --ink:#1E3B32;
  --ink-soft:#5B7268;
  --ink-faint:#93A69C;
  --line:#DCE3D6;
  --line-soft:#EAEFE6;
  --accent:#C08A3D;
  --accent-ink:#7A5423;
  --accent-soft:#F3E4C4;
  --leaf:#3F7A5A;
  --leaf-soft:#DCEBDF;
  --clay:#B85C38;
  --clay-soft:#F3DFD3;
  --shadow-sm:0 1px 2px rgba(30,59,50,.06);
  --shadow-md:0 10px 28px -10px rgba(30,59,50,.22);
}
body{
  font-family:'Open Sans', sans-serif;
  color:var(--ink);
  background-color:var(--bg);
  background-image: radial-gradient(rgba(30,59,50,0.06) 1px, transparent 1px);
  background-size: 18px 18px;
}
.display{ font-family:'Open Sans', sans-serif; }
.mono{ font-family:'Open Sans', sans-serif; letter-spacing:.04em; }

.app-header{ background:var(--surface); border-bottom:1px solid var(--line); }
.brand-mark{ width:2.75rem; height:2.75rem; border-radius:12px; background:var(--leaf-soft); color:var(--leaf); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.eyebrow-pill{ font-family:'Open Sans', sans-serif; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; background:var(--accent-soft); color:var(--accent-ink); padding:.4rem .85rem; border-radius:999px; font-weight:700; white-space:nowrap; }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm); }
.card-title{ font-family:'Open Sans', sans-serif; font-weight:700; font-size:1.05rem; color:var(--ink); display:flex; align-items:center; gap:.55rem; }

.field-label{ font-family:'Open Sans', sans-serif; font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; margin-bottom:.4rem; display:block; }
.field-select{ width:100%; background:var(--bg); border:1.5px solid var(--line); color:var(--ink); border-radius:10px; padding:.62rem .75rem; font-size:.9rem; transition:.15s; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B7268' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .65rem center; background-size:1.1rem; padding-right:2.2rem; }
.field-select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.field-select:disabled{ opacity:.55; cursor:not-allowed; }

.stat-tile{ border-radius:12px; padding:.7rem; text-align:center; border:1px solid transparent; }
.stat-tile.total{ background:var(--bg); border-color:var(--line-soft); }
.stat-tile.done{ background:var(--leaf-soft); }
.stat-tile.pending{ background:var(--clay-soft); }
.stat-num{ font-family:'Open Sans', sans-serif; font-weight:800; }

.progress-track{ width:100%; background:var(--line-soft); border-radius:999px; height:.6rem; overflow:hidden; }
.progress-fill{ background:linear-gradient(90deg,var(--leaf),var(--accent)); height:100%; border-radius:999px; transition:width .5s ease; }

.student-tab-row{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.9rem 1rem; }
.student-tab, .tab-pill{ font-family:'Open Sans', sans-serif; font-size:.8rem; font-weight:600; padding:.5rem 1.05rem; border-radius:999px; background:var(--line-soft); color:var(--ink-soft); border:1px solid var(--line); cursor:pointer; transition:.15s; }
.student-tab:hover, .tab-pill:hover{ background:#fff; color:var(--ink); border-color:var(--accent); }
.student-tab.active, .tab-pill.active{ background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:var(--shadow-sm); }

.note-textarea{ width:100%; border:1.5px solid var(--line); border-radius:12px; padding:.85rem 1rem; font-size:.85rem; font-family:'Open Sans', sans-serif; color:var(--ink); background:var(--bg); resize:vertical; line-height:1.55; transition:.15s; }
.note-textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:#fff; }

.badge-unsaved{ background:var(--clay-soft); color:var(--clay); font-weight:700; border-radius:999px; padding:.4rem .85rem; font-size:.72rem; display:inline-flex; align-items:center; gap:.35rem; }

.sticky-col{ position:sticky; left:0; background:var(--surface); z-index:10; box-shadow:2px 0 6px -2px rgba(30,59,50,0.08); }
.sticky-header{ position:sticky; top:0; z-index:20; }
.obs-thead th{ background:var(--bg); color:var(--ink-soft); border-bottom:2px solid var(--line); font-weight:700; }
.criteria-cell{ font-size:.8rem; line-height:1.4; color:var(--ink); }
.obs-row:hover td{ background:var(--line-soft); }
.obs-row:hover td.sticky-col{ background:#F7F9F4; }

.crit-checkbox{ appearance:none; -webkit-appearance:none; width:1.85rem; height:1.85rem; border-radius:8px; border:2px solid var(--line); background:#fff; cursor:pointer; position:relative; transition:.15s; }
.crit-checkbox:hover{ border-color:var(--accent); }
.crit-checkbox:checked{ background:var(--leaf); border-color:var(--leaf); }
.crit-checkbox:checked::after{ content:""; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:65%; }
.crit-checkbox:focus-visible{ outline:3px solid var(--accent-soft); outline-offset:2px; }

.status-row td{ border-bottom:2px solid var(--accent); }
.distress-row td{ border-bottom:2px solid var(--clay); }
.dropdown-trigger{ width:100%; display:inline-flex; align-items:center; justify-content:center; gap:.3rem; font-size:.74rem; font-weight:700; border:1.5px solid transparent; border-radius:8px; padding:.4rem .5rem; cursor:pointer; transition:.15s; font-family:'Open Sans', sans-serif; }
.dropdown-trigger:hover{ filter:brightness(0.96); }
.dropdown-trigger:focus-visible{ outline:3px solid var(--accent-soft); outline-offset:2px; }
.floating-dropdown{ position:fixed; z-index:100; background:#fff; border:1.5px solid var(--line); border-radius:10px; box-shadow:var(--shadow-md); overflow:hidden; padding:4px; }
.floating-dropdown-option{ padding:.5rem .7rem; font-size:.76rem; font-weight:700; border-radius:6px; cursor:pointer; transition:.1s; }
.floating-dropdown-option:hover{ filter:brightness(0.94); }
.floating-dropdown-option.is-selected{ box-shadow:inset 0 0 0 1.5px currentColor; }

.btn-primary{ background:var(--ink); color:#fff; font-weight:700; border-radius:10px; padding:.75rem 1.6rem; box-shadow:var(--shadow-sm); transition:.15s; display:inline-flex; align-items:center; gap:.5rem; }
.btn-primary:hover:not(:disabled){ background:var(--leaf); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }

.toast-base{ position:fixed; bottom:1.25rem; right:1.25rem; color:#fff; padding:.85rem 1.2rem; border-radius:12px; box-shadow:var(--shadow-md); display:flex; align-items:center; gap:.6rem; z-index:50; transition:all .3s ease; font-size:.84rem; font-weight:600; }
.toast-success{ background:var(--leaf); }
.toast-error{ background:var(--clay); }
.toast-info{ background:var(--ink); }

.home-nav-btn{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:800; color:#fff; background:var(--ink); border:1px solid var(--ink); padding:.55rem 1.1rem; border-radius:10px; cursor:pointer; transition:.15s; box-shadow:var(--shadow-sm); }
.home-nav-btn:hover{ background:var(--leaf); border-color:var(--leaf); }

.note-box{ display:flex; align-items:flex-start; gap:.55rem; background:var(--accent-soft); border:1px solid var(--accent); border-radius:10px; padding:.75rem .95rem; font-size:.76rem; line-height:1.5; color:var(--accent-ink); }

.goal-badge{ width:1.7rem; height:1.7rem; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink); font-weight:700; font-size:.78rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.quote-callout{ border-left:4px solid var(--leaf); background:var(--leaf-soft); padding:1.1rem 1.3rem; border-radius:0 12px 12px 0; font-weight:600; font-size:.95rem; color:var(--ink); line-height:1.55; }
.guide-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.2rem; }
.guide-card h4{ font-weight:700; font-size:.88rem; color:var(--ink); margin-bottom:.35rem; }
.guide-card .goal-line{ font-size:.7rem; font-weight:700; color:var(--accent-ink); text-transform:uppercase; letter-spacing:.03em; margin-bottom:.5rem; display:block; line-height:1.4; }
.guide-card p{ font-size:.82rem; color:var(--ink-soft); line-height:1.55; }