:root{--navy:#12306b;--deep:#0b1f4a;--gold:#f2b134;--line:#dde3ee;--bg:#f3f5fa;--ink:#172033;--muted:#5a6579}
*{box-sizing:border-box}body{margin:0;font:16px/1.55 "Nunito Sans","Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--bg)}
a{color:#2457c5}h1,h2,h3{font-family:"Bricolage Grotesque","Trebuchet MS",sans-serif;color:var(--deep);margin:0 0 .5em}h1{font-size:1.7rem}
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:var(--deep);color:#cfd9f1;padding:1.2rem 1rem;position:sticky;top:0;height:100vh;overflow:auto}
.side .brand{display:flex;gap:.6rem;align-items:center;color:#fff;text-decoration:none;font:700 1rem "Bricolage Grotesque",sans-serif;margin-bottom:1.4rem}.side img{width:36px}
.side a.l{display:flex;justify-content:space-between;color:#cfd9f1;text-decoration:none;padding:.5rem .7rem;border-radius:8px;font-weight:600;font-size:.95rem}
.side a.l:hover,.side a.on{background:#ffffff1c;color:#fff}.side small{display:block;margin:1rem .7rem .3rem;color:#8da0cf;font-size:.8rem}
.badge{background:var(--gold);color:var(--deep);border-radius:999px;padding:0 .5rem;font-size:.8rem;font-weight:700}
.side form{margin-top:1rem}
.main{padding:1.8rem 2rem 4rem;max-width:1100px}
.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.btn{display:inline-block;background:var(--navy);color:#fff;border:0;border-radius:9px;padding:.55rem 1.1rem;font:700 .95rem inherit;font-family:inherit;text-decoration:none;cursor:pointer}.btn:hover{background:var(--deep);color:#fff}
.btn.gold{background:var(--gold);color:var(--deep)}.btn.red{background:#b3261e}.btn.sm{padding:.3rem .7rem;font-size:.85rem}.btn.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.4rem;margin-bottom:1rem}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.4rem}.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;text-decoration:none;color:inherit}
.stat b{display:block;font:700 2rem "Bricolage Grotesque",sans-serif;color:var(--navy)}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}th,td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line);vertical-align:middle}th{background:#f8f9fc;font-size:.88rem;color:var(--muted)}tr:last-child td{border:0}
.thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;background:#e6edfb}
label{display:block;font-weight:700;margin:0 0 .25rem}input,select,textarea{width:100%;font:inherit;padding:.6rem .75rem;border:1.5px solid #c6cfe0;border-radius:9px;background:#fff}textarea{min-height:120px}
.f{margin-bottom:1rem}.f.check label{display:flex;gap:.6rem;align-items:center;font-weight:600}.f.check input{width:auto}.hint{color:var(--muted);font-size:.88rem;font-weight:400}
.alert{padding:.8rem 1rem;border-radius:10px;margin-bottom:1rem;background:#e2f3ea;color:#14573a;border:1px solid #b7e0c8}.alert.error{background:#fdecec;color:#8a1c1c;border-color:#f3c2c2}
.item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;margin-bottom:.8rem}.item header{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:start}
.item dl{display:grid;grid-template-columns:150px 1fr;gap:.2rem .8rem;margin:.7rem 0 0}.item dt{color:var(--muted);font-size:.9rem}.item dd{margin:0}
.item .acts{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.8rem}.item .acts select{width:auto}.unread{border-left:5px solid var(--gold)}
.pill{background:#e6edfb;color:var(--navy);border-radius:999px;padding:.1rem .7rem;font-size:.82rem;font-weight:700}
.login{max-width:380px;margin:12vh auto;padding:0 1rem}
@media(max-width:860px){.shell{grid-template-columns:1fr}.side{position:static;height:auto}.stats{grid-template-columns:1fr 1fr}.main{padding:1.2rem}.item dl{grid-template-columns:1fr}}

/* ---- phone: sliding menu, card tables, big touch targets ---- */
.appbar,.scrim{display:none}
@media(max-width:860px){
  :root{--safe-t:env(safe-area-inset-top,0px)}
  body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
  .appbar{display:flex;align-items:center;gap:.8rem;position:sticky;top:0;z-index:40;background:var(--deep);color:#fff;
    padding:calc(.55rem + env(safe-area-inset-top,0px)) 1rem .55rem;font:700 1.05rem "Bricolage Grotesque",sans-serif}
  .appbar b{flex:1}.appbar a{color:#cfd9f1;font:600 .9rem "Nunito Sans",sans-serif;text-decoration:none}
  .nav-btn{width:44px;height:44px;border:0;border-radius:12px;background:#ffffff1c;position:relative;cursor:pointer}
  .nav-btn span,.nav-btn span::before,.nav-btn span::after{position:absolute;left:12px;width:20px;height:2px;border-radius:2px;background:#fff;content:""}
  .nav-btn span{top:21px}.nav-btn span::before{left:0;top:-6px}.nav-btn span::after{left:0;top:6px}
  .scrim{display:block;position:fixed;inset:0;z-index:50;background:rgba(11,31,74,.55);opacity:0;pointer-events:none;transition:opacity .25s}
  .nav-open .scrim{opacity:1;pointer-events:auto}.nav-open{overflow:hidden}
  .side{position:fixed;top:0;bottom:0;left:0;width:min(82vw,300px);height:auto;z-index:60;transform:translateX(-102%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
    padding:calc(1.2rem + env(safe-area-inset-top,0px)) 1rem calc(1.2rem + env(safe-area-inset-bottom,0px))}
  .nav-open .side{transform:none}
  .side a.l{padding:.75rem .8rem;font-size:1rem}
  .main{padding:1rem 1rem calc(3rem + env(safe-area-inset-bottom,0px))}
  h1{font-size:1.45rem}
  input,select,textarea{font-size:16px;min-height:48px}textarea{min-height:120px}
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}.btn.sm{min-height:38px}
  .bar .btn{width:100%}
  .stats{gap:.7rem}
  /* tables become stacked cards */
  table,thead,tbody,tr,td{display:block}thead{display:none}
  table{background:none;border:0}
  tr{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.5rem .9rem;margin-bottom:.7rem}
  td{border:0;padding:.35rem 0;display:flex;gap:.8rem;justify-content:space-between;text-align:right}
  td::before{content:attr(data-label);color:var(--muted);font-size:.85rem;font-weight:600;text-align:left;flex-shrink:0}
  td:last-child{justify-content:flex-end;flex-wrap:wrap;gap:.5rem;padding-top:.6rem;border-top:1px solid var(--line);margin-top:.3rem}
  td:last-child::before,td[data-label=""]::before{display:none}
  .item .acts select{flex:1}
  .login{margin:6vh auto}
}