:root{
  --wine:#6B1F2A; --wine-dark:#4A1620; --wine-deep:#391018;
  --gold:#C89B3C; --gold-light:#E4C97A; --gold-pale:#F1E3BE;
  --cream:#F6F1E4; --paper:#FBF8EF; --paper-shade:#EFE8D6;
  --ink:#2B2420; --ink-soft:#6b5f52; --ink-faint:#9c9284;
  --sage:#4B6355; --sage-pale:#E1E9E0;
  --rust:#A6432E; --rust-pale:#F3E0D9;
  --amber:#B5822A; --amber-pale:#F3E7CC;
  --blue:#5E7A8C; --blue-pale:#E2E9EC;
  --line:#DDD3BC;
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Lora',serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Playfair Display',serif;margin:0;color:var(--wine-dark);}
.app{display:flex;min-height:100vh;}
.sidebar{
  width:220px;flex-shrink:0;
  background:linear-gradient(180deg,var(--wine) 0%,var(--wine-dark) 100%);
  color:var(--gold-pale);
  padding:0;position:relative;
  display:flex;flex-direction:column;
}
.sidebar::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:6px;
  background:repeating-linear-gradient(180deg,var(--gold) 0 2px, transparent 2px 14px);
  opacity:.55;
}
.brand{padding:22px 22px 14px;border-bottom:1px solid rgba(228,201,122,.25);display:flex;align-items:center;}
.brand .mark{font-family:'Playfair Display',serif;font-weight:800;font-size:21px;color:var(--gold-light);letter-spacing:.5px;}
.brand .sub{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(228,201,122,.7);margin-top:4px;}
.userchip{padding:12px 22px 14px;border-bottom:1px solid rgba(228,201,122,.18);font-family:'Inter',sans-serif;}
.userchip .who{font-size:13px;font-weight:600;color:var(--gold-pale);}
.userchip .role{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:rgba(246,241,228,.55);margin-top:1px;}
.userchip .links{display:flex;gap:10px;margin-top:8px;}
.userchip .links a{font-size:11.5px;color:var(--gold-light);cursor:pointer;text-decoration:none;}
.userchip .links a:hover{text-decoration:underline;}
nav{padding:14px 0;flex:1;}
.navitem{
  display:flex;align-items:center;gap:10px;
  padding:11px 22px;margin:2px 10px;border-radius:6px 3px 3px 6px;
  cursor:pointer;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:500;
  color:rgba(246,241,228,.82);
  position:relative;transition:background .15s;
}
.navitem:hover{background:rgba(255,255,255,.06);}
.navitem.active{background:var(--gold);color:var(--wine-deep);font-weight:600;}
.navitem.active::before{
  content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;
  border-left:10px solid var(--gold);
}
.navitem .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55;flex-shrink:0;}
.sidebar-foot{padding:16px 22px 20px;font-family:'Inter',sans-serif;font-size:10.5px;color:rgba(246,241,228,.45);border-top:1px solid rgba(228,201,122,.2);}
main{flex:1;padding:32px 40px 60px;max-width:1180px;}
.pagehead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:10px;}
.pagehead h1{font-size:26px;}
.pagehead .desc{font-family:'Inter',sans-serif;font-size:13px;color:var(--ink-soft);margin-top:3px;}
.btn{
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  border:1px solid var(--wine);background:var(--paper);color:var(--wine);
  padding:9px 16px;border-radius:var(--radius);cursor:pointer;
  transition:all .12s;
}
.btn:hover{background:var(--wine);color:var(--paper);}
.btn.primary{background:var(--wine);color:var(--paper);}
.btn.primary:hover{background:var(--wine-dark);}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--wine-deep);}
.btn.gold:hover{background:var(--gold-light);}
.btn.ghost{border-color:var(--line);color:var(--ink-soft);}
.btn.ghost:hover{background:var(--paper-shade);color:var(--ink);}
.btn.sm{padding:5px 10px;font-size:12px;}
.btn.danger{border-color:var(--rust);color:var(--rust);}
.btn.danger:hover{background:var(--rust);color:#fff;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn:disabled:hover{background:var(--paper);color:var(--wine);}
.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px 22px;}
.grid{display:grid;gap:16px;}
.grid.cols4{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid.cols3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid.cols2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:900px){.grid.cols4{grid-template-columns:repeat(2,minmax(0,1fr));}.grid.cols3{grid-template-columns:repeat(2,minmax(0,1fr));}}
.stat{padding:18px 18px 16px;}
.stat .label{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);}
.stat .num{font-family:'Playfair Display',serif;font-weight:700;font-size:32px;color:var(--wine-dark);margin-top:4px;}
.stat .foot{font-family:'Inter',sans-serif;font-size:11.5px;color:var(--ink-faint);margin-top:2px;}
.section-title{font-size:17px;margin:30px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--gold);display:flex;align-items:center;justify-content:space-between;}
.ledger{width:100%;border-collapse:collapse;font-family:'Inter',sans-serif;font-size:13.5px;}
.ledger thead th{
  text-align:left;font-weight:600;font-size:11px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--ink-soft);padding:9px 10px;border-bottom:2px solid var(--wine);
}
.ledger tbody td{padding:10px 10px;border-bottom:1px solid var(--line);vertical-align:middle;}
.ledger tbody tr:hover{background:var(--paper-shade);}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:600;font-family:'Inter',sans-serif;}
.pill.present{background:var(--sage-pale);color:var(--sage);}
.pill.absent{background:var(--rust-pale);color:var(--rust);}
.pill.late{background:var(--amber-pale);color:var(--amber);}
.pill.excused{background:var(--blue-pale);color:var(--blue);}
.pill.section{background:var(--gold-pale);color:var(--wine-dark);}
.pill.active{background:var(--sage-pale);color:var(--sage);}
.pill.inactive{background:#eee;color:#888;}
.pill.admin{background:var(--gold-pale);color:var(--wine-dark);}
.pill.secretary{background:var(--blue-pale);color:var(--blue);}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}
input,select,textarea{
  font-family:'Inter',sans-serif;font-size:13.5px;color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:8px 11px;background:#fff;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold-light);border-color:var(--gold);}
label.field{display:flex;flex-direction:column;gap:4px;font-family:'Inter',sans-serif;font-size:12px;color:var(--ink-soft);font-weight:600;}
.modal-bg{position:fixed;inset:0;background:rgba(43,36,32,.5);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;}
.modal{background:var(--paper);border-radius:14px;padding:26px 28px;max-width:480px;width:100%;max-height:88vh;overflow:auto;border:1px solid var(--line);}
.modal h3{font-size:19px;margin-bottom:16px;}
.formgrid{display:grid;gap:12px;}
.formerr{background:var(--rust-pale);color:var(--rust);font-family:'Inter',sans-serif;font-size:12.5px;padding:8px 12px;border-radius:8px;}
.attend-row{display:flex;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.attend-row .who{flex:1;font-family:'Inter',sans-serif;min-width:140px;}
.attend-row .who .nm{font-weight:600;}
.attend-row .who .sec{font-size:11.5px;color:var(--ink-soft);}
.statusbtns{display:flex;gap:6px;}
.sbtn{
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;padding:6px 11px;
  border-radius:7px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink-soft);
}
.sbtn.on.present{background:var(--sage);color:#fff;border-color:var(--sage);}
.sbtn.on.absent{background:var(--rust);color:#fff;border-color:var(--rust);}
.sbtn.on.late{background:var(--amber);color:#fff;border-color:var(--amber);}
.sbtn.on.excused{background:var(--blue);color:#fff;border-color:var(--blue);}
.empty{text-align:center;padding:40px 20px;color:var(--ink-soft);font-family:'Inter',sans-serif;}
.empty .big{font-family:'Playfair Display',serif;font-size:18px;color:var(--wine-dark);margin-bottom:6px;}
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--wine-dark);color:var(--gold-pale);padding:12px 22px;border-radius:30px;
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;z-index:100;box-shadow:0 6px 20px rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}
.toast.err{background:var(--rust);color:#fff;}
.bar-wrap{display:flex;align-items:flex-end;gap:10px;height:130px;padding-top:10px;}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;}
.bar{width:100%;max-width:34px;background:linear-gradient(180deg,var(--gold-light),var(--gold));border-radius:4px 4px 0 0;}
.bar-col .lbl{font-family:'Inter',sans-serif;font-size:10px;color:var(--ink-soft);text-align:center;}
.bar-col .pct{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;color:var(--wine-dark);}
.hamburger{display:none;}
.qrbox{background:#fff;border-radius:12px;padding:16px;display:flex;justify-content:center;}
.qrbox img{display:block;width:200px;height:200px;}
.tabs2{display:flex;gap:0;border-bottom:2px solid var(--line);margin-bottom:18px;}
.tab2{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;padding:9px 18px;cursor:pointer;color:var(--ink-soft);border-bottom:2px solid transparent;margin-bottom:-2px;}
.tab2.active{color:var(--wine);border-color:var(--wine);}
.flag{font-size:11px;color:var(--rust);font-weight:700;}
.picklist{margin-top:10px;display:flex;flex-direction:column;gap:2px;max-height:180px;overflow:auto;}
.pickrow{padding:8px 10px;border-radius:6px;cursor:pointer;font-family:'Inter',sans-serif;}
.pickrow:hover{background:var(--paper-shade);}

.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--wine) 0%,var(--wine-dark) 60%,var(--wine-deep) 100%);padding:20px;}
.logincard{background:var(--paper);border-radius:16px;padding:36px 34px;max-width:380px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.3);}
.logincard .mark{font-family:'Playfair Display',serif;font-weight:800;font-size:24px;color:var(--wine-dark);text-align:center;}
.logincard .sub{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);text-align:center;margin-top:4px;margin-bottom:26px;}
.logincard label.field{margin-bottom:14px;}
.logincard input{width:100%;padding:10px 12px;}

@media print{
  .sidebar,.toolbar,.no-print,.btn{display:none !important;}
  main{padding:0;max-width:none;}
  body{background:#fff;}
}
@media(max-width:820px){
  .app{flex-direction:column;}
  .sidebar{width:100%;flex-direction:row;align-items:center;padding:0;flex-wrap:wrap;}
  .sidebar::after{display:none;}
  .brand{border:none;padding:14px 16px;}
  .brand .sub{display:none;}
  .userchip{display:none;}
  nav{display:none;flex:none;width:100%;}
  nav.open{display:flex;flex-direction:column;position:absolute;top:56px;left:0;right:0;background:var(--wine-dark);z-index:40;padding:8px 0;}
  .hamburger{display:block;margin-left:auto;margin-right:14px;background:none;border:1px solid rgba(228,201,122,.5);color:var(--gold-pale);border-radius:6px;padding:6px 10px;font-family:'Inter',sans-serif;cursor:pointer;}
  .sidebar-foot{display:none;}
  main{padding:20px 16px 60px;}
  .grid.cols4,.grid.cols3,.grid.cols2{grid-template-columns:1fr 1fr;}
  .ledger{font-size:12px;}
}