: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%)}

  /* ---------- Login View ---------- */
  .login{padding:30px 26px 30px}
  .login h2{font-family:var(--serif);font-weight:600;font-size:24px;color:var(--green-800);margin-bottom:4px}
  .login .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 label span{color:var(--muted);font-weight:400}
  .field input{ 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{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(184,144,47,.14)}
  .field .hint{font-family:var(--deva);font-size:11.5px;color:var(--muted);margin-top:6px}
  
  .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}

  /* ---------- Result View ---------- */
  .result{display:none;padding:0}
  .id-card{padding:26px 26px 20px;background:linear-gradient(180deg,#fffdf6,#fbf6ea);border-bottom:1px solid var(--line)}
  .id-top{display:flex;align-items:center;gap:16px}
  .avatar{ width:58px;height:58px;border-radius:14px;flex:none; background:linear-gradient(145deg,var(--green-700),var(--green-900));color:var(--gold-pale); display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:24px;font-weight:700; }
  .id-name{font-family:var(--serif);font-weight:600;font-size:21px;color:var(--green-800);line-height:1.2}
  .id-class{font-family:var(--deva);font-size:13.5px;color:var(--muted);margin-top:2px}

  .stats-banner { display:flex; background:var(--line); gap:1px; }
  .stat-box { flex:1; background:var(--paper); padding:16px 10px; text-align:center; }
  .stat-box .lab { font-family:var(--deva); font-size:11.5px; color:var(--muted); margin-bottom:4px; }
  .stat-box .num { font-family:var(--serif); font-size:24px; font-weight:700; color:var(--green-800); }
  .stat-box .num.bad { color:var(--due); }

  /* Calendar Section */
  .calendar-section { padding:20px; }
  .cal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
  .cal-btn { background:none; border:1px solid var(--line); color:var(--green-800); width:32px; height:32px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
  .cal-btn:hover { background:var(--gold-pale); }
  .cal-btn:disabled { opacity:0.3; cursor:not-allowed; }
  .cal-title { font-family:var(--serif); font-weight:600; font-size:18px; color:var(--green-900); }

  .cal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; }
  .cal-day-header { text-align:center; font-family:var(--deva); font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; padding-bottom:6px; }
  .cal-cell { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:14px; font-weight:500; border-radius:8px; background:#fdfbf4; border:1px solid rgba(0,0,0,0.04); color:var(--muted); }
  
  .cal-cell.status-P { background:var(--paid-bg); color:var(--paid); border-color:var(--paid); font-weight:700; }
  .cal-cell.status-A { background:var(--due-bg); color:var(--due); border-color:var(--due); font-weight:700; }
  .cal-cell.status-H { background:#e8e8e8; color:#666; border-color:#ccc; }
  .cal-cell.empty { background:transparent; border:none; }

  .att-legend { display:flex; justify-content:center; gap:16px; margin-top:16px; font-family:var(--deva); font-size:12px; color:var(--muted); }
  .att-legend div { display:flex; align-items:center; gap:6px; }
  .att-legend span { width:12px; height:12px; border-radius:3px; }
  .leg-p { background:var(--paid); } .leg-a { background:var(--due); } .leg-h { background:#999; }

  .att-summary { display:flex; justify-content:space-around; padding:15px; background:#f9f9f9; border-radius:12px; margin-top:20px; font-family:var(--deva); border:1px dashed var(--line); }
  .sum-item { text-align:center; }
  .sum-item .v { font-size:18px; font-weight:700; color:var(--ink); }
  .sum-item .k { font-size:11px; color:var(--muted); text-transform:uppercase; margin-top:2px; }

  /* WhatsApp Share Section */
  .wa-share{padding:20px; border-top:1px dashed var(--line); margin-top:10px; background:var(--card);}
  .wa-share h3{font-family:var(--deva);font-size:14px;color:var(--green-800);margin-bottom:12px;text-align:center;}
  .wa-btns{display:flex;gap:10px;}
  .btn-wa{ flex:1; padding:12px; background:#25D366; color:#fff; border:none; border-radius:11px; font-family:var(--deva); font-weight:600; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:.2s; }
  .btn-wa:hover{background:#1da851; transform:translateY(-1px);}
  .btn-wa-outline{ flex:1; padding:12px; background:#fff; color:#25D366; border:1px solid #25D366; border-radius:11px; font-family:var(--deva); font-weight:600; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:.2s; }
  .btn-wa-outline:hover{background:#f0fbf4;}
  .wa-other{display:none; margin-top:10px; display:flex; gap:8px;} 
  .wa-other input{ flex:1; padding:10px 12px; font-family:var(--sans); border:1px solid var(--line); border-radius:8px; font-size:14px; }
  .wa-other button{ padding:10px 15px; background:#25D366; color:white; border:none; border-radius:8px; cursor:pointer; font-family:var(--deva); }

  .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}}