:root{
    --paper:#FFFDF0;
    --paper-raised:#FFFFFF;
    --ink:#16281D;
    --ink-soft:#5C6F63;
    --rule:#E2E8F0;
    --rule-strong:#CBD3DE;
    --accent:#006432;
    --accent-dark:#00431F;
    --accent-soft:#E1F0E5;
    --amber:#B8890A;
    --amber-soft:#FFF4CC;
    --gold:#FFCB05;
    --red:#B3453B;
    --red-soft:#F5E1DE;
    --shadow: 0 1px 2px rgba(22,40,29,.06), 0 6px 16px rgba(22,40,29,.06);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{font-family:'Inter',sans-serif; background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased;}
  .app{display:flex; min-height:100vh;}
  .hidden{display:none !important;}

  /* ===== Sidebar ===== */
  .sidebar{width:216px; flex-shrink:0; padding:24px 0 24px 18px; display:flex; flex-direction:column; gap:5px;}
  .brand{display:flex; align-items:center; gap:10px; padding:0 10px 18px 6px;}
  .brand img{width:40px; height:40px; border-radius:9px; object-fit:cover; border:2px solid var(--gold); flex-shrink:0; background:#fff;}
  .brand .txt{font-family:'Fraunces',serif; font-weight:600; font-size:15.5px; color:var(--accent-dark); line-height:1.2;}
  .brand small{display:block; font-family:'Inter',sans-serif; font-weight:600; font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); margin-top:3px;}
  .who{padding:0 10px 14px 6px; margin-bottom:8px; border-bottom:1px solid var(--rule);}
  .who .name{font-size:13px; font-weight:700; color:var(--ink);}
  .who .role{font-size:11px; color:var(--ink-soft); margin-top:1px;}
  .who button{margin-top:8px; font-size:11.5px; background:transparent; border:1px solid var(--rule-strong); color:var(--ink-soft); padding:4px 9px; border-radius:6px; cursor:pointer;}
  .who button:hover{background:var(--red-soft); color:var(--red); border-color:var(--red-soft);}
  .tab{position:relative; display:flex; align-items:center; gap:10px; padding:10px 16px 10px 18px; border-radius:10px 0 0 10px; font-size:13.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; background:transparent; border:1px solid transparent; border-right:none; transition:background .15s,color .15s;}
  .tab .dot{width:7px;height:7px;border-radius:50%; background:currentColor; opacity:.5;}
  .tab:hover{background:rgba(0,100,50,.08); color:var(--ink);}
  .tab.active{background:var(--paper-raised); color:var(--accent-dark); border:1px solid var(--rule); border-right:none; box-shadow:-3px 0 0 var(--gold) inset, -6px 0 0 var(--accent) inset;}
  .tab.active .dot{opacity:1; background:var(--accent);}

  .main{flex:1; background:var(--paper-raised); border-radius:22px 0 0 0; margin:14px 0 0 0; box-shadow:var(--shadow); padding:32px 38px 60px; min-width:0;}
  .page-head{display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1.5px solid var(--rule); padding-bottom:16px; margin-bottom:24px; flex-wrap:wrap; gap:14px;}
  .page-head h1{font-family:'Fraunces',serif; font-weight:600; font-size:26px; margin:0; color:var(--ink);}
  .page-head p{margin:4px 0 0; color:var(--ink-soft); font-size:13.5px;}
  .head-actions{display:flex; gap:8px; flex-wrap:wrap;}

  .btn{font-family:'Inter',sans-serif; font-weight:600; font-size:13px; border:none; border-radius:8px; padding:9px 15px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:transform .1s,background .15s;}
  .btn:active{transform:scale(.97);}
  .btn-primary{background:var(--accent); color:#fff;}
  .btn-primary:hover{background:var(--accent-dark);}
  .btn-ghost{background:transparent; color:var(--ink-soft); border:1px solid var(--rule-strong);}
  .btn-ghost:hover{background:var(--paper); color:var(--ink);}
  .btn-gold{background:var(--gold); color:#4A3900;}
  .btn-gold:hover{background:#e6b800;}
  .btn-danger{background:var(--red-soft); color:var(--red);}
  .btn-danger:hover{background:var(--red); color:#fff;}
  .btn-sm{padding:5px 10px; font-size:12px; border-radius:6px;}
  .btn:disabled{opacity:.45; cursor:not-allowed;}

  .stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:26px;}
  .stat-card{border:1px solid var(--rule); border-radius:12px; padding:15px 17px; background:var(--paper);}
  .stat-card .num{font-family:'Fraunces',serif; font-size:28px; font-weight:600; color:var(--accent-dark);}
  .stat-card .label{font-size:12px; color:var(--ink-soft); margin-top:2px; font-weight:500;}

  .panel{border:1px solid var(--rule); border-radius:14px; padding:18px 20px; margin-bottom:20px; background:var(--paper);}
  .panel h2{font-family:'Fraunces',serif; font-size:16.5px; font-weight:600; margin:0 0 13px;}
  .panel p.sub{font-size:12.5px; color:var(--ink-soft); margin:-8px 0 14px;}

  .bar-row{display:flex; align-items:center; gap:10px; margin-bottom:9px; font-size:13px;}
  .bar-row .bar-label{width:90px; flex-shrink:0; color:var(--ink-soft); font-weight:500;}
  .bar-track{flex:1; background:var(--rule); border-radius:5px; height:9px; overflow:hidden;}
  .bar-fill{height:100%; background:var(--accent); border-radius:5px;}
  .bar-count{width:26px; text-align:right; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft);}

  .toolbar{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center;}
  input[type=text],input[type=date],input[type=number],input[type=password],select,textarea{font-family:'Inter',sans-serif; font-size:13.5px; padding:8px 11px; border:1px solid var(--rule-strong); border-radius:8px; background:#fff; color:var(--ink);}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px;}
  .search{min-width:200px;}

  table{width:100%; border-collapse:collapse; font-size:13.5px;}
  thead th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:600; padding:0 10px 9px; border-bottom:2px solid var(--ink);}
  tbody td{padding:10px 10px; border-bottom:1px solid var(--rule); vertical-align:top;}
  tbody tr:hover{background:var(--accent-soft);}
  .id-tag{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft);}
  .pill{display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap;}
  .pill-green{background:var(--accent-soft); color:var(--accent-dark);}
  .pill-amber{background:var(--amber-soft); color:var(--amber);}
  .pill-red{background:var(--red-soft); color:var(--red);}
  .pill-gray{background:#EEF1F4; color:var(--ink-soft);}
  .chip{display:inline-block; padding:2px 8px; border-radius:6px; background:var(--accent-soft); color:var(--accent-dark); font-size:11px; font-weight:600; margin:0 4px 4px 0;}
  .row-actions{display:flex; gap:6px; flex-wrap:wrap;}
  .empty-state{text-align:center; padding:46px 20px; color:var(--ink-soft);}
  .empty-state .glyph{font-family:'Fraunces',serif; font-size:36px; color:var(--rule-strong); margin-bottom:8px;}

  .overlay{position:fixed; inset:0; background:rgba(22,40,29,.45); display:none; align-items:center; justify-content:center; z-index:50; padding:20px;}
  .overlay.open{display:flex;}
  .modal{background:#fff; border-radius:16px; width:100%; max-width:460px; padding:24px 26px 20px; box-shadow:0 20px 60px rgba(0,0,0,.25); max-height:88vh; overflow-y:auto;}
  .modal.wide{max-width:640px;}
  .modal h3{font-family:'Fraunces',serif; font-size:18px; margin:0 0 16px;}
  .field{margin-bottom:12px;}
  .field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:5px;}
  .field input,.field select,.field textarea{width:100%;}
  .field .help{font-size:11px; color:var(--ink-soft); margin-top:4px;}
  .modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:16px;}
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}

  .roster{border:1px solid var(--rule); border-radius:12px; overflow:hidden;}
  .roster-item{display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--rule); gap:12px;}
  .roster-item:last-child{border-bottom:none;}
  .roster-item:nth-child(even){background:var(--paper);}
  .roster-name{font-weight:600; font-size:13.5px;}
  .roster-sub{font-size:11.5px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace;}
  .roster-item input[type=number]{width:80px;}

  .toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:11px 20px; border-radius:9px; font-size:13.5px; font-weight:500; opacity:0; pointer-events:none; transition:opacity .25s,transform .25s; z-index:100;}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(-6px);}

  .hint{background:var(--amber-soft); border:1px solid #F0DD8A; color:#6B5205; padding:14px 16px; border-radius:10px; font-size:12.5px; line-height:1.55; margin-bottom:20px;}
  .hint b{color:#4A3900;}
  .hint.danger{background:var(--red-soft); border-color:#E5B8B2; color:#7A2A22;}
  .hint.danger b{color:#5C1710;}

  /* ===== Login ===== */
  #loginScreen{position:fixed; inset:0; background:linear-gradient(160deg,#004723,var(--accent) 55%,#00753b); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px;}
  .login-card{background:#fff; border-radius:20px; padding:34px 32px 28px; width:100%; max-width:380px; box-shadow:0 30px 80px rgba(0,0,0,.35); text-align:center;}
  .login-card img{width:64px; height:64px; border-radius:14px; border:3px solid var(--gold); object-fit:cover; margin-bottom:12px; background:#fff;}
  .login-card h1{font-family:'Fraunces',serif; font-size:19px; margin:0 0 2px; color:var(--accent-dark); line-height:1.3;}
  .login-card p.tag{font-size:12px; color:var(--ink-soft); margin:0 0 22px;}
  .login-card .field{text-align:left;}
  .login-card .btn-primary{width:100%; justify-content:center; padding:11px; margin-top:6px;}
  .login-err{color:var(--red); font-size:12.5px; margin-top:10px; min-height:16px; font-weight:600;}
  .login-hint{margin-top:16px; font-size:11px; color:var(--ink-soft); line-height:1.6; text-align:left; background:var(--paper); border:1px solid var(--rule); border-radius:9px; padding:10px 12px;}

  /* ===== Print / Report ===== */
  .report-head{display:flex; align-items:center; gap:14px; border-bottom:2.5px solid var(--accent); padding-bottom:14px; margin-bottom:18px;}
  .report-head img{width:52px; height:52px; border-radius:10px; object-fit:cover;}
  .report-head h2{font-family:'Fraunces',serif; font-size:16px; margin:0; color:var(--accent-dark); text-transform:uppercase; letter-spacing:.02em;}
  .report-head p{margin:2px 0 0; font-size:12px; color:var(--ink-soft);}
  .report-title{text-align:center; font-family:'Fraunces',serif; font-size:20px; font-weight:600; margin:8px 0 18px;}
  #printArea{display:none;}
  @media print{
    body *{visibility:hidden;}
    #printArea, #printArea *{visibility:visible;}
    #printArea{display:block !important; position:absolute; top:0; left:0; width:100%; padding:20px;}
  }

  @media (max-width:860px){
    .app{flex-direction:column;}
    .sidebar{width:100%; flex-direction:row; overflow-x:auto; padding:12px; gap:8px; align-items:center;}
    .brand{display:none;} .who{display:none;}
    .tab{border-radius:9px; border:1px solid var(--rule)!important; white-space:nowrap;}
    .main{border-radius:0; margin:0;}
    .grid2,.grid3{grid-template-columns:1fr;}
  }