:root{
  --ink:#1E2A45; --ink-soft:#4A5670; --paper:#F2F0EA; --paper-raised:#FFFFFF;
  --sage:#4C7A5C; --sage-bg:#E4EEE7; --clay:#C97A3D; --clay-bg:#F6E9D9;
  --rust:#A63D2F; --rust-bg:#F3E1DD; --slate:#3D5A80; --slate-bg:#E3E9F0;
  --line:#DCD8CB; --shadow: 0 1px 2px rgba(30,42,69,0.06), 0 4px 14px rgba(30,42,69,0.06);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;}
h1,h2,h3,.display{font-family:'Fraunces',serif;}
.mono{font-family:'JetBrains Mono',monospace;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
#app{display:flex;min-height:100vh;}
#sidebar{width:220px;flex-shrink:0;background:var(--ink);color:#EDEAE1;padding:24px 16px;display:flex;flex-direction:column;gap:6px;}
#sidebar .brand{font-family:'Fraunces',serif;font-size:19px;font-weight:600;margin-bottom:2px;color:#fff;}
#sidebar .brand-sub{font-size:11px;color:#A9B3C9;margin-bottom:22px;letter-spacing:0.4px;text-transform:uppercase;}
.nav-btn{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:transparent;color:#C7CEDD;border-radius:8px;font-size:14px;font-weight:500;text-align:left;}
.nav-btn:hover{background:rgba(255,255,255,0.06);color:#fff;}
.nav-btn.active{background:rgba(255,255,255,0.12);color:#fff;}
.nav-spacer{flex:1;}
.whoami{font-size:11px;color:#8B93A8;padding:10px 12px;border-top:1px solid rgba(255,255,255,0.1);margin-top:8px;}
.whoami b{color:#EDEAE1;display:block;font-size:13px;margin-top:2px;}
.whoami button{background:none;border:none;color:#8FA8D6;font-size:11px;padding:4px 0 0;text-decoration:underline;}
#main{flex:1;padding:32px 36px 80px;max-width:1100px;}
.page-title{font-size:26px;font-weight:600;margin:0 0 4px;}
.page-sub{color:var(--ink-soft);font-size:14px;margin:0 0 28px;}
.card{background:var(--paper-raised);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field label{font-size:12px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.4px;}
.field input,.field select,.field textarea{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#FCFBF8;color:var(--ink);}
.field textarea{resize:vertical;min-height:70px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--slate);outline-offset:1px;}
.btn{padding:11px 18px;border-radius:9px;border:none;font-size:14px;font-weight:600;}
.btn-primary{background:var(--slate);color:#fff;}
.btn-primary:hover{background:#324b6b;}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink);}
.btn-ghost:hover{background:#EEEBE2;}
.btn-danger{background:var(--rust-bg);color:var(--rust);border:1px solid #E3C4BC;}
.stamp{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;border:1.5px dashed currentColor;transform:rotate(-1.5deg);}
.stamp.in-progress{color:var(--clay);background:var(--clay-bg);}
.stamp.completed{color:var(--sage);background:var(--sage-bg);}
.stamp.cancelled-before-arrival,.stamp.cancelled-after-arrival{color:var(--rust);background:var(--rust-bg);}
.visit-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow);}
.visit-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.visit-school{font-size:16px;font-weight:600;margin:0 0 2px;}
.visit-meta{font-size:12.5px;color:var(--ink-soft);}
.visit-purpose-tag{display:inline-block;background:var(--slate-bg);color:var(--slate);font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;margin-top:6px;}
.visit-notes{margin-top:10px;font-size:13.5px;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:10px;}
.visit-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.visit-photo{width:100%;max-width:240px;border-radius:8px;margin-top:10px;display:block;border:1px solid var(--line);}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;align-items:center;}
.toolbar select,.toolbar input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:#FCFBF8;}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}
.stat-box{background:var(--paper-raised);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow);}
.stat-num{font-family:'Fraunces',serif;font-size:28px;font-weight:600;}
.stat-label{font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.4px;margin-top:2px;}
.chart-row{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-bottom:16px;}
.chart-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow);}
.chart-card h3{margin:0 0 14px;font-size:15px;}
.empty{text-align:center;padding:50px 20px;color:var(--ink-soft);}
.empty .display{font-size:18px;color:var(--ink);margin-bottom:6px;}
.modal-overlay{position:fixed;inset:0;background:rgba(30,42,69,0.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;}
.modal{background:var(--paper-raised);border-radius:14px;padding:24px;max-width:460px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,0.25);}
.modal-wide{max-width:640px;max-height:88vh;overflow-y:auto;}
.modal h2{margin:0 0 14px;font-size:19px;}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 20px;border-radius:8px;font-size:13.5px;box-shadow:var(--shadow);z-index:60;}
.setup-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--paper);}
.setup-card{background:var(--paper-raised);border-radius:16px;padding:36px;max-width:400px;width:90%;box-shadow:var(--shadow);}
.roster-row,.school-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--line);gap:10px;flex-wrap:wrap;}
.school-status{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;text-transform:uppercase;letter-spacing:0.3px;}
.school-status.training-done{background:var(--slate-bg);color:var(--slate);}
.school-status.classes-started{background:var(--clay-bg);color:var(--clay);}
.school-status.renewed{background:var(--sage-bg);color:var(--sage);}
.school-status.lost{background:var(--rust-bg);color:var(--rust);}
.school-status.na{background:#EAE7DD;color:var(--ink-soft);}
.rating-field{border-top:1px dashed var(--line);padding-top:14px;margin-top:14px;}
.rating-field label{font-size:13px;font-weight:600;color:var(--ink);display:block;margin-bottom:8px;text-transform:none;letter-spacing:0;}
.rating-scale{display:flex;align-items:center;gap:8px;}
.rating-scale select{width:70px;flex-shrink:0;}
.rating-hints{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-soft);gap:10px;}
.rating-hints span{max-width:47%;}
.postcard{background:linear-gradient(135deg,var(--ink),#2C3E60);color:#fff;border-radius:16px;padding:32px 28px;text-align:center;}
.postcard .eyebrow{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#9FB0D6;margin-bottom:14px;}
.postcard h2{font-family:'Fraunces',serif;font-size:24px;margin:0 0 6px;color:#fff;}
.postcard .school{font-size:13px;color:#C7CEDD;margin-bottom:18px;}
.postcard .tagline{font-family:'Fraunces',serif;font-style:italic;font-size:17px;line-height:1.5;margin:18px 0;color:#F4E9D8;}
.postcard .meta{font-size:11px;color:#8FA0C9;margin-top:16px;letter-spacing:0.3px;}
#mobileNav{display:none;}
@media (max-width: 860px){
  #sidebar{display:none;}
  #main{padding:20px 16px 90px;}
  .grid-2,.chart-row{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:1fr 1fr;}
  #mobileNav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--ink);padding:8px 6px;justify-content:space-around;z-index:40;}
  #mobileNav button{background:none;border:none;color:#B8C0D4;font-size:10.5px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 6px;}
  #mobileNav button.active{color:#fff;}
}