:root{
    --green-900:#0a2c20; --green-800:#0f3d2e; --green-700:#16553f;
    --gold:#b8902f; --gold-soft:#dcb55c; --gold-pale:#efe3c4;
    --parchment:#f6f0e2; --paper:#fffdf7; --card:#fffefb;
    --ink:#23201a; --muted:#73695a; --line:#e4dac3;
    --due:#a8341f; --due-bg:#fbeae5; --paid:#1c7a4d; --paid-bg:#e7f3ec;
    --sans:"Public Sans","Noto Sans Devanagari",system-ui,sans-serif;
    --serif:"Fraunces","Noto Sans Devanagari",Georgia,serif;
    --deva:"Noto Sans Devanagari","Public Sans",sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--sans); color:var(--ink); line-height:1.55;
    background: radial-gradient(1200px 600px at 50% -10%, #14503b 0%, var(--green-800) 45%, var(--green-900) 100%);
    min-height:100vh; padding:0 0 60px;
    -webkit-font-smoothing:antialiased;
  }
  .deva{font-family:var(--deva)}

  /* ---------- Header / Ribbon ---------- */
  header.crest{ text-align:center; color:var(--gold-pale); padding:20px 18px 22px; }
  .crest h1{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,5vw,30px); color:#fdfaf0; margin:6px 0 2px; }
  .crest .hindi-name{ font-family:var(--deva); font-size:clamp(13px,3.4vw,16px); color:var(--gold-pale); opacity:.92; }
  .session-pill{ display:inline-block; margin-top:10px; font-size:12px; letter-spacing:1px; padding:5px 14px; border:1px solid rgba(220,181,92,.45); border-radius:999px; color:var(--gold-pale); text-transform:uppercase; background:rgba(0,0,0,0.2); }
  .top-home-link { padding:15px 20px 0; display:flex; justify-content:space-between; align-items:center; }
  .top-home-link a { color:var(--gold-pale); text-decoration:none; font-family:var(--deva); font-size:14px; display:inline-flex; align-items:center; gap:6px; background:rgba(0,0,0,0.25); padding:6px 14px; border-radius:20px; border:1px solid rgba(220,181,92,0.3); }

  /* ---------- Stage ---------- */
  .stage{max-width:540px;margin:8px auto 0;padding:0 16px}
  @media(min-width:760px){ .stage{max-width:720px} }
  .panel{ background:var(--paper); border-radius:18px; overflow:hidden; box-shadow:0 30px 60px -25px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.4) inset; border:1px solid rgba(184,144,47,.25); }
  .panel-top{height:6px;background:linear-gradient(90deg,var(--gold) 0%,var(--gold-soft) 50%,var(--gold) 100%)}

  /* ---------- Setup View ---------- */
  .setup-view{padding:30px 26px;}
  .setup-view h2{font-family:var(--serif);font-weight:600;font-size:24px;color:var(--green-800);margin-bottom:4px}
  .setup-view .sub{font-family:var(--deva);color:var(--muted);font-size:14px;margin-bottom:24px}
  
  .field{margin-bottom:18px}
  .field label{display:block;font-family:var(--deva);font-weight:600;font-size:13.5px;color:var(--green-800);margin-bottom:7px}
  .field input, .field select{ width:100%;padding:14px 15px;font-family:var(--sans);font-size:16px;color:var(--ink); background:var(--card);border:1.5px solid var(--line);border-radius:11px;transition:.18s; }
  .field input:focus, .field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(184,144,47,.14)}
  
  .btn{ width:100%;padding:15px;font-family:var(--deva);font-weight:700;font-size:16px; color:#fff;background:linear-gradient(180deg,var(--green-700),var(--green-800)); border:none;border-radius:11px;cursor:pointer;letter-spacing:.3px;transition:.18s; box-shadow:0 10px 22px -10px rgba(15,61,46,.7); }
  .btn:hover{transform:translateY(-1px);box-shadow:0 14px 26px -10px rgba(15,61,46,.75)}
  .btn:disabled{opacity:0.7;cursor:not-allowed;transform:none}
  .err{font-family:var(--deva);color:var(--due);background:var(--due-bg);border:1px solid #efc7bd; padding:10px 13px;border-radius:10px;font-size:13.5px;margin-bottom:16px;display:none}

  /* ---------- Attendance List View ---------- */
  .list-view{display:none; padding:0;}
  .list-header { padding:20px 26px; background:linear-gradient(180deg,#fffdf6,#fbf6ea); border-bottom:1px solid var(--line); text-align:center; }
  .list-header h3 { font-family:var(--serif); color:var(--green-800); font-size:20px; }
  .list-header .sub-info { font-family:var(--deva); font-size:14px; color:var(--muted); margin-top:4px; }
  
  .toolbar { padding:15px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; background:#fdfbf4; }
  .toggle-holiday { display:flex; align-items:center; gap:8px; font-family:var(--deva); font-size:14px; font-weight:600; color:var(--muted); cursor:pointer;}
  .toggle-holiday input { width:18px; height:18px; accent-color:var(--due); }

  .student-list { padding:15px 20px; }
  .student-row { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; margin-bottom:10px; border-radius:12px; border:1.5px solid var(--line); background:var(--card); transition:.2s; cursor:pointer; }
  .student-row.present { border-color:var(--paid); background:var(--paid-bg); }
  .student-row.absent { border-color:var(--due); background:var(--due-bg); }
  .student-row.holiday { border-color:#ccc; background:#f5f5f5; opacity:0.8; }
  
  .s-info { flex:1; }
  .s-name { font-family:var(--sans); font-weight:600; font-size:15px; color:var(--ink); }
  .s-adm { font-family:var(--deva); font-size:12px; color:var(--muted); margin-top:2px; }
  
  .s-status { font-family:var(--deva); font-weight:700; font-size:14px; padding:4px 10px; border-radius:6px; }
  .present .s-status { color:var(--paid); background:rgba(28, 122, 77, 0.1); }
  .absent .s-status { color:var(--due); background:rgba(168, 52, 31, 0.1); }
  .holiday .s-status { color:#666; background:#e0e0e0; }

  /* WhatsApp Inline Button */
  .wa-inline-btn { display:none; margin-top:8px; width:fit-content; background:#25D366; color:#fff; border:none; padding:6px 12px; border-radius:6px; font-family:var(--deva); font-size:12px; font-weight:600; cursor:pointer; align-items:center; gap:6px; }
  .wa-inline-btn:hover { background:#1da851; }
  .student-row.absent.saved .wa-inline-btn { display:inline-flex; } /* Shows only after successful save for absentees */
  
  .action-bar { padding:20px; border-top:1px dashed var(--line); background:#fffdf7; }
  
  .success-msg { display:none; font-family:var(--deva); color:var(--paid); background:var(--paid-bg); border:1px solid #c3e6cb; padding:12px; border-radius:10px; font-size:14px; margin-bottom:16px; text-align:center; font-weight:600; }

  .back { display:block; width:100%; text-align:center; padding:15px; font-family:var(--deva); font-weight:600; color:var(--green-800); background:none; border:none; border-top:1px solid var(--line); cursor:pointer; font-size:14px; }
  .back:hover { background:#fbf7ec; }

  /* ---------- Footer ---------- */
  footer{ text-align:center; margin-top:26px; color:var(--gold-pale); font-family:var(--deva); font-size:12px; opacity:.75; line-height:1.7; padding:0 20px; }

  /* Animation */
  .reveal{opacity:0;transform:translateY(14px);animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards}
  .reveal.d1{animation-delay:.05s}.reveal.d2{animation-delay:.13s}.reveal.d3{animation-delay:.22s}
  @keyframes rise{to{opacity:1;transform:none}}