/* ===================== DESIGN TOKENS ===================== */
  :root{
    --navy:#0b1a4a;
    --navy-dark:#081235;
    --gold:#f0a500;
    --gold-light:#f7c948;
    --green:#16a34a;
    --paper:#fbfbf9;
    --bg1:#eef1f8;
    --bg2:#e4e9f5;
  }
  *{box-sizing:border-box;}
  body{
    font-family:'Georgia','Times New Roman',serif;
    background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 100%);
    color:#1a1a2e;
  }
  .font-display{font-family:'Georgia','Times New Roman',serif;}
  .font-ui{font-family:'Trebuchet MS','Segoe UI',sans-serif;}

  /* ---------- Card frame used by timetable / marksheet (matches reference images) ---------- */
  .doc-frame{
    background:var(--paper);
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(11,26,74,.25);
    position:relative;
    border:1px solid #dcdfe8;
  }
  .doc-topbar{ height:14px; background:var(--navy); }
  .doc-arc{
    background:var(--navy);
    border-radius:0 0 60% 60%/0 0 40px 40px;
    padding:26px 20px 34px;
    text-align:center;
    position:relative;
  }
  .doc-arc::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-10px; height:10px;
    background:var(--gold);
    border-radius:0 0 50% 50%/0 0 100% 100%;
    opacity:.85;
  }
  .doc-shield{
    width:74px;height:74px;margin:0 auto 10px;
    background:var(--navy);
    border:3px solid var(--gold);
    border-radius:14px 14px 40% 40%;
    display:flex;align-items:center;justify-content:center;
    color:var(--gold-light); font-size:28px;
  }
  .doc-title{ color:white; font-weight:700; font-size:1.8rem; line-height:1.1; letter-spacing:.5px;}
  .doc-subtitle{ color:#dfe6ff; font-size:1rem; margin-top:2px; }
  .doc-badge{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--navy); color:white; font-weight:700;
    padding:8px 22px; border-radius:999px; margin-top:14px; font-size:.95rem;
    font-family:'Trebuchet MS',sans-serif; letter-spacing:1px;
  }
  .doc-footer{
    background:var(--navy);
    padding:16px 18px 20px;
    display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  }
  .doc-footer .tag{color:var(--gold-light); font-weight:700; font-family:'Brush Script MT',cursive; font-size:1.2rem;}
  .doc-footer .lead{color:white; font-family:'Brush Script MT',cursive; font-size:1.4rem;}
  .doc-footer .lead2{color:var(--gold-light); font-family:'Brush Script MT',cursive; font-size:1.4rem;}

  /* Timetable table */
  .tt-table{width:100%; border-collapse:separate; border-spacing:0; font-family:'Trebuchet MS',sans-serif;}
  .tt-table th{ background:var(--navy); color:white; padding:10px 8px; font-size:.85rem; }
  .tt-table td{ padding:9px 10px; border-bottom:1px solid #e6e8f0; font-size:.9rem; font-weight:600;}
  .tt-badge{
    display:inline-block; min-width:34px; text-align:center;
    background:var(--navy); color:white; border-radius:6px; padding:3px 6px; font-size:.8rem; font-weight:700;
  }
  .tt-break-row{ background:#eafaf0 !important; }
  .tt-break-row td{ color:var(--green) !important; }
  .tt-break2-row{ background:#fff2e0 !important; }
  .tt-break2-row td{ color:#c2410c !important; }

  /* Marksheet table */
  .ms-table{ width:100%; border-collapse:collapse; font-family:'Trebuchet MS',sans-serif; font-size:.82rem;}
  .ms-table th{ background:var(--navy); color:white; padding:7px 5px; }
  .ms-table td{ padding:6px 5px; border-bottom:1px solid #eceef4; text-align:center; }
  .ms-info-box{ border:2px solid var(--navy); border-radius:14px; padding:12px 16px; font-family:'Trebuchet MS',sans-serif; font-size:.85rem;}
  .ms-summary-box{ border:1px solid #d7d9e3; border-radius:10px; overflow:hidden; font-family:'Trebuchet MS',sans-serif;}
  .ms-summary-box .row{ display:flex; justify-content:space-between; padding:8px 12px; border-bottom:1px solid #eceef4; font-weight:700; font-size:.85rem;}

  /* ---------- Announcement board ---------- */
  .ann-card{
    border-radius:16px; border:1px solid #e2e5f0; background:var(--paper);
    padding:14px 16px; display:flex; gap:12px; align-items:flex-start;
    font-family:'Trebuchet MS',sans-serif;
  }
  .ann-date-box{
    min-width:56px; text-align:center; background:var(--navy); color:white;
    border-radius:10px; padding:6px 4px; font-weight:700; line-height:1.1;
  }
  .ann-date-box .d{ font-size:1.15rem; }
  .ann-date-box .m{ font-size:.65rem; letter-spacing:.5px; opacity:.85; }
  .ann-badge{ font-size:.7rem; font-weight:700; padding:2px 9px; border-radius:999px; }
  .ann-badge-holiday{ background:#eafaf0; color:var(--green); }
  .ann-badge-event{ background:#fff2e0; color:#c2410c; }
  .ann-badge-general{ background:#e8ecfb; color:var(--navy); }
  .ann-today{ border-color:var(--gold); box-shadow:0 0 0 2px rgba(240,165,0,.25); }

  /* ---------- App chrome ---------- */
  .app-shell{ min-height:100vh; }
  .navy-btn{ background:var(--navy); color:white; }
  .navy-btn:hover{ background:var(--navy-dark); }
  .gold-btn{ background:var(--gold); color:var(--navy-dark); font-weight:700;}
  .gold-btn:hover{ background:var(--gold-light); }
  .tab-btn.active{ background:var(--navy); color:white; }
  .side-link.active{ background:rgba(255,255,255,.15); border-left:4px solid var(--gold); }
  input,select,textarea{ outline:none; }
  input:focus,select:focus,textarea:focus{ box-shadow:0 0 0 2px var(--gold); border-color:var(--navy); }

  ::-webkit-scrollbar{ width:8px; height:8px; }
  ::-webkit-scrollbar-thumb{ background:#c7cbe0; border-radius:4px; }

  /* ---------- Printing ----------
     script.js (printEl) opens a popup sized to a real A4 (or 85.6x54mm ID
     card) page and places the card at its own natural size on it — no
     stretching, so the printed design always matches what's on screen. */
  @media print{
    .no-print{ display:none !important; }
    *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    /* Let a tall card flow naturally onto a 2nd printed page (the "back")
       instead of being clipped by the rounded-corner overflow:hidden trick. */
    .doc-frame{ overflow:visible !important; box-shadow:none !important; }
    .doc-frame table, .doc-frame .ann-card, .doc-frame .ms-summary-box{ break-inside:avoid; }
    .doc-arc, .doc-topbar, .doc-footer{ break-inside:avoid; }
  }


/* ===================== v2.0 — app-like mobile UI, login eye icon, install banner ===================== */
html{ -webkit-tap-highlight-color:transparent; }
.pw-wrap{ position:relative; }
.pw-eye{ position:absolute; right:.35rem; top:0; height:2.6rem; width:2.4rem; display:flex; align-items:center; justify-content:center; background:none; border:0; color:#6b7280; cursor:pointer; }
.pw-eye:hover{ color:var(--navy,#0b1a4a); }
.m-header,.m-backdrop,.m-drawer,.m-bottom{ display:none; }
.install-banner{ position:fixed; left:12px; right:12px; bottom:14px; z-index:90; max-width:460px; margin:0 auto; display:flex; align-items:center; gap:10px;
  background:#fff; color:#1b2733; border-radius:18px; padding:10px 12px; box-shadow:0 10px 30px rgba(0,0,0,.28); font-family:'Trebuchet MS',sans-serif; animation:ibUp .35s ease; }
@keyframes ibUp{ from{ transform:translateY(30px); opacity:0 } to{ transform:none; opacity:1 } }
.install-banner .ib-icon{ width:42px; height:42px; border-radius:12px; background:var(--navy,#0b1a4a); display:flex; align-items:center; justify-content:center; font-size:22px; flex:none; }
.install-banner .ib-text{ flex:1; display:flex; flex-direction:column; font-size:13px; line-height:1.25; min-width:0; }
.install-banner .ib-text span{ color:#5b6b7a; font-size:12px; }
.install-banner .ib-go{ background:var(--navy,#0b1a4a); color:#fff; border:0; border-radius:999px; padding:8px 16px; font-weight:700; cursor:pointer; flex:none; }
.install-banner .ib-x{ background:none; border:0; color:#8a97a6; font-size:16px; padding:6px; cursor:pointer; flex:none; }
@media (display-mode: standalone){ body{ overscroll-behavior-y:none; user-select:none; -webkit-user-select:none; } input,textarea,select{ user-select:text; -webkit-user-select:text; } }

/* Mobile only (below Tailwind's md = 768px). Desktop layout is untouched. */
@media (max-width:767.98px){
  .app-side{ display:none !important; }
  .app-main{ padding-top:72px !important; padding-bottom:96px !important; }
  .m-header{ display:flex; align-items:center; gap:12px; position:fixed; top:0; left:0; right:0; height:56px; z-index:70; padding:0 14px;
    padding-top:env(safe-area-inset-top); background:var(--navy,#0b1a4a); color:#fff; box-shadow:0 3px 14px rgba(0,0,0,.28); }
  .m-burger{ width:40px; height:40px; border:0; background:rgba(255,255,255,.12); border-radius:12px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; cursor:pointer; flex:none; }
  .m-burger span{ display:block; width:20px; height:2.5px; border-radius:2px; background:#fff; }
  .m-title{ display:flex; flex-direction:column; line-height:1.15; min-width:0; font-family:'Trebuchet MS',sans-serif; }
  .m-title b{ font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .m-title small{ font-size:11px; color:var(--gold,#f7c948); letter-spacing:1px; text-transform:uppercase; }
  .m-backdrop{ display:block; position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .28s ease; }
  .m-backdrop.open{ opacity:1; pointer-events:auto; }
  .m-drawer{ display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; width:82%; max-width:320px; z-index:85; background:#fff; color:#1b2733;
    transform:translateX(-102%); transition:transform .28s cubic-bezier(.2,.8,.2,1); box-shadow:6px 0 28px rgba(0,0,0,.3); border-radius:0 22px 22px 0; font-family:'Trebuchet MS',sans-serif; }
  .m-drawer.open{ transform:translateX(0); }
  .m-drawer-head{ display:flex; align-items:center; gap:12px; padding:calc(18px + env(safe-area-inset-top)) 18px 16px; background:var(--navy,#0b1a4a); color:#fff; border-radius:0 22px 0 0; }
  .m-logo{ width:44px; height:44px; border-radius:14px; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:24px; }
  .m-drawer-nav{ flex:1; overflow-y:auto; padding:8px 10px; }
  .m-drawer-nav button{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 12px; margin:2px 0; border:0; background:none; border-radius:12px; font-size:15px; color:#1b2733; cursor:pointer; }
  .m-drawer-nav button span{ width:26px; text-align:center; font-size:18px; }
  .m-drawer-nav button.active{ background:var(--navy,#0b1a4a); color:#fff; font-weight:700; }
  .m-drawer-out{ margin:8px 12px calc(14px + env(safe-area-inset-bottom)); padding:12px; border:0; border-radius:14px; background:#dc2626; color:#fff; font-weight:700; font-size:15px; cursor:pointer; }
  body.m-lock{ overflow:hidden; }
  .m-bottom{ display:flex; position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:60; height:62px; background:#fff; border-radius:24px;
    box-shadow:0 8px 26px rgba(0,0,0,.22); justify-content:space-around; align-items:center; padding:0 6px; font-family:'Trebuchet MS',sans-serif; }
  .m-bottom button{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border:0; background:none; color:#6b7280; border-radius:18px; height:52px; margin:0 2px; cursor:pointer; min-width:0; }
  .m-bottom button span{ font-size:20px; line-height:1; }
  .m-bottom button small{ font-size:10px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .m-bottom button.active{ background:var(--navy,#0b1a4a); color:#fff; }
  #syncBadge{ bottom:84px !important; }
  .install-banner{ bottom:84px; }
  .bg-white.rounded-2xl.shadow{ box-shadow:0 4px 18px rgba(15,42,74,.12); }
}