:root {
          --primary: #18a4b8;
          --primary-light: #e8f7f9;
          --primary-dark: #127a8a;
          --secondary: #0b3b56;
          --accent: #f59e0b;
          --surface: #ffffff;
          --border: #e2e8f0;
          --text-xs: #94a3b8;
        }
        body { background:#f4f7f6; font-family:'Inter',sans-serif; -webkit-tap-highlight-color:transparent; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 100vh;}
        h1,h2,h3,.font-heading { font-family:'Fredoka',sans-serif; }
        .view-section          { display:none; animation:fadeIn 0.22s ease-out; }
        .view-section.active   { display:block; }
        #view-auth.active      { display:flex; }
        @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
        ::-webkit-scrollbar { width:0; background:transparent; }
        .slim-scroll::-webkit-scrollbar { width:4px; }
        .slim-scroll::-webkit-scrollbar-track { background:#e2e8f0; border-radius:10px; }
        .slim-scroll::-webkit-scrollbar-thumb { background:#18a4b8; border-radius:10px; }

        /* ── GLOBAL FLOATING NAV BUTTONS (Home + Back — shown site-wide for every logged-in user) ── */
        #global-fab-nav.hidden { display: none; }
        #global-fab-nav {
          position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
          display: flex; flex-direction: column; align-items: center; gap: 12px;
          z-index: 200;
        }
        #global-fab-nav .fab-btn {
          width: 52px; height: 52px; border-radius: 50%;
          display: flex; align-items: center; justify-content: center;
          cursor: pointer; text-decoration: none;
          box-shadow: 0 8px 20px -4px rgba(11,59,86,0.35), 0 2px 8px rgba(11,59,86,0.15);
          transition: transform .18s cubic-bezier(.34,1.56,.64,1);
        }
        #global-fab-nav .fab-btn:active { transform: scale(0.9); }
        #global-fab-nav .fab-home {
          background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
          color: #ffffff; font-size: 1.25rem;
          animation: fabHomeGlow 2.4s ease-in-out infinite;
        }
        #global-fab-nav .fab-back {
          background: var(--surface); border: 1px solid var(--border);
          color: var(--secondary); font-size: 1.05rem;
        }
        @keyframes fabHomeGlow {
          0%, 100% { box-shadow: 0 8px 20px -4px rgba(24,164,184,0.45), 0 2px 8px rgba(11,59,86,0.15); }
          50% { box-shadow: 0 8px 24px -2px rgba(24,164,184,0.65), 0 0 14px rgba(245,158,11,0.3); }
        }
        @media (prefers-reduced-motion: reduce) {
          #global-fab-nav .fab-home { animation: none; }
        }

        .dash-card { transition:all 0.25s ease; }
        .dash-card:hover { transform:translateY(-5px); box-shadow:0 15px 30px rgba(24,164,184,0.2); }
        .subject-chip { display:inline-flex; align-items:center; gap:6px; background:white; border:1px solid #e2e8f0; padding:4px 10px 4px 14px; border-radius:40px; font-size:0.83rem; font-weight:500; }
        .assignment-badge { background:#f0f9fa; border-left:3px solid #18a4b8; padding:7px 10px; border-radius:10px; font-size:0.8rem; margin-bottom:6px; display:flex; justify-space:between; align-items:center; }
        .day-timing-row { display:flex; align-items:center; justify-space-between; background:#f0f9fa; border-radius:8px; padding:6px 10px; margin-bottom:5px; font-size:0.82rem; }
        .tt-tab { padding:8px 16px; border-radius:12px; font-size:0.82rem; font-weight:600; color:#6b7280; cursor:pointer; border:none; background:transparent; transition:all 0.15s; white-space:nowrap; }
        .tt-tab.active { background:#18a4b8; color:white; box-shadow:0 4px 12px rgba(24,164,184,0.3); }
        .day-pill { padding:7px 16px; border-radius:20px; font-size:0.8rem; font-weight:600; border:2px solid #e2e8f0; background:white; color:#6b7280; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
        .day-pill.active { border-color:#18a4b8; background:#18a4b8; color:white; }
        .day-pill:hover:not(.active) { border-color:#18a4b8; color:#18a4b8; }
        .tt-grid { border-collapse:collapse; width:100%; min-width:600px; }
        .tt-grid thead th { background:#0b3b56; color:white; padding:11px 10px; font-family:'Fredoka',sans-serif; font-size:0.88rem; text-align:center; border:1px solid rgba(255,255,255,0.12); position:sticky; top:0; z-index:2; white-space:nowrap; }
        .tt-grid.master-grid thead th:nth-child(1) { z-index:3; left:0; min-width:110px; }
        .tt-grid.master-grid td.tt-lbl:nth-child(1) { position:sticky; left:0; z-index:1; min-width:110px; }
        .tt-grid td.tt-lbl { background:#f8fafc; padding:8px 10px; border:1px solid #e2e8f0; font-size:0.78rem; text-align:center; font-weight:600; color:#0b3b56; }
        .tt-grid td.tt-cell { padding:7px 8px; border:1px solid #e9ecef; cursor:pointer; vertical-align:middle; min-width:120px; text-align:center; transition:background 0.1s; }
        .tt-grid td.tt-cell.empty { background:#fafafa; }
        .tt-grid td.tt-cell.filled { background:#f0fcfd; }
        .tt-grid td.tt-cell.conflict { background:#fff5f5; border:2px solid #f87171 !important; }
        .tt-grid td.tt-cell.na, .tt-grid td.tt-cell.free-cell { background:#f9fafb; cursor:default; }
        .tt-grid td.tt-cell:not(.na):not(.free-cell):hover { background:#e8f7fa; }
        .tt-grid td.tt-recess { background:#fff7ed; text-align:center; padding:9px 12px; font-size:0.8rem; font-weight:700; color:#c2410c; border:1px solid #fed7aa; letter-spacing:0.3px; }
        .cell-sub { font-size:0.76rem; font-weight:700; color:#0b3b56; line-height:1.3; }
        .cell-tch { font-size:0.68rem; color:#18a4b8; margin-top:2px; }
        .cell-cls { font-size:0.76rem; font-weight:700; color:#0b3b56; }
        .cell-free { font-size:0.7rem; color:#d1d5db; font-style:italic; }
        .cell-plus { color:#d1d5db; font-size:1rem; transition:color 0.1s; }
        .tt-cell:not(.na):hover .cell-plus { color:#18a4b8; }
        .conflict-badge { display:inline-block; margin-top:3px; font-size:0.6rem; background:#f87171; color:white; padding:2px 5px; border-radius:4px; }
        .agenda-wrap { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:14px; }
        .agenda-day-card { background:white; border-radius:18px; box-shadow:0 2px 10px rgba(11,59,86,0.07); border:1px solid #e8f0f2; overflow:hidden; }
        .agenda-day-header { background:#0b3b56; color:white; padding:9px 14px; font-family:'Fredoka',sans-serif; font-size:0.95rem; letter-spacing:0.3px; }
        .agenda-day-body { padding:10px; display:flex; flex-direction:column; gap:7px; }
        .agenda-slot { border-radius:10px; padding:8px 10px; font-size:0.78rem; border:1px solid #e9ecef; background:#fafafa; cursor:pointer; transition:background 0.15s; }
        .agenda-slot:hover { background:#e8f7fa; }
        .agenda-slot.filled { background:#f0fcfd; border-color:#b2e8ef; cursor:pointer; }
        .agenda-slot.free { background:#fafafa; cursor:pointer; }
        .agenda-slot.recess { background:#fff7ed; border-color:#fed7aa; cursor:default; text-align:center; font-weight:700; color:#c2410c; font-size:0.76rem; }
        .agenda-slot.conflict{ background:#fff5f5; border-color:#f87171; }
        .agenda-time { font-family:monospace; font-size:0.62rem; color:#18a4b8; margin-bottom:3px; font-weight:600; }
        .agenda-sub { font-weight:700; color:#0b3b56; font-size:0.78rem; line-height:1.3; }
        .agenda-tch { font-size:0.66rem; color:#18a4b8; margin-top:2px; }
        .agenda-wrap .agenda-lbl { font-size:0.7rem; font-weight:600; color:#6b7280; margin-bottom:2px; }
        .agenda-plus { color:#d1d5db; font-size:0.9rem; }
        .agenda-slot.free:hover .agenda-plus { color:#18a4b8; }
        .agenda-free-txt { font-size:0.68rem; color:#cbd5e1; font-style:italic; }
        .agenda-cls { font-weight:700; color:#0b3b56; font-size:0.78rem; }
        .agenda-conflict-badge { font-size:0.58rem; background:#f87171; color:white; padding:1px 5px; border-radius:4px; margin-top:3px; display:inline-block; }
        #tt-panel { position:fixed; right:0; top:0; height:100vh; width:310px; background:white; box-shadow:-6px 0 28px rgba(0,0,0,0.13); z-index:200; transform:translateX(100%); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); display:flex; flex-direction:column; }
        #tt-panel.open { transform:translateX(0); }
        #tt-overlay { position:fixed; inset:0; background:rgba(11,59,86,0.2); z-index:199; opacity:0; pointer-events:none; transition:opacity 0.3s; }
        #tt-overlay.open { opacity:1; pointer-events:all; }
        .p-select { width:100%; padding:10px 32px 10px 12px; border:1.5px solid #e2e8f0; border-radius:12px; font-size:0.86rem; outline:none; transition:border-color 0.15s; appearance:none; background:white; }
        .p-select:focus { border-color: #18a4b8; }
        .p-select-wrap { position:relative; }
        .p-select-wrap::after { content:""; position:absolute; right:12px; top:50%; transform:translateY(-50%); width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #18a4b8; pointer-events:none; }
        .stat-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:12px; font-size:0.78rem; font-weight:600; }
        
        /* 2FA OTP MODAL STYLES */
        .otp-input-box { width: 44px; height: 52px; border: 2px solid #e2e8f0; border-radius: 12px; text-align: center; font-size: 1.25rem; font-weight: 700; font-family: monospace; color: #0b3b56; background: #ffffff; outline: none; transition: all 0.18s; }
        .otp-input-box:focus { border-color: #18a4b8; box-shadow: 0 0 0 3px rgba(24,164,184,0.15); background: #f0f9fa; }
        .otp-shake { animation: otpShake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
        @keyframes otpShake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }

        @media(max-width:640px) { #tt-panel { width:100vw; } .agenda-wrap { grid-template-columns:1fr 1fr; } .otp-input-box { width: 36px; height: 46px; font-size: 1.1rem; } }
        @media(max-width:400px) { .agenda-wrap { grid-template-columns:1fr; } }

/* ===== GLOBAL HEADER (from Blogger theme) ===== */
#ysh-root {
        position: relative;
        width: 100%;
        background-color: #18a4b8;
        border-radius: 0 0 22px 22px;
        box-shadow: 0 8px 0 rgba(0,0,0,0.08), 0 12px 32px rgba(0,150,166,0.35), 0 4px 12px rgba(0,0,0,0.18);
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        padding: 0 28px;
        height: 90px;
        box-sizing: border-box;
        flex-shrink: 0;
      }
      #ysh-bg-svg {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        pointer-events: none;
        z-index: 1;
      }
      #ysh-left {
        display: flex;
        align-items: center;
        gap: 16px;
        z-index: 3;
        min-width: 0;
        flex: 1;
        max-width: 72%;
      }
      #ysh-logo-wrap {
        width: 62px; height: 62px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 4px 14px rgba(0,0,0,0.13);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border: 1.5px solid #e8f0f2;
        overflow: hidden;
      }
      #ysh-logo-img {
        width: 50px; height: 50px;
        object-fit: contain;
        border-radius: 50%;
      }
      #ysh-logo-fallback {
        width: 44px; height: 44px;
        fill: none;
      }
      #ysh-titles {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
      }
      #ysh-school-name {
        font-size: 20px;
        font-weight: 800;
        color: #0b3442;
        letter-spacing: 0.3px;
        line-height: 1.15;
        margin: 0 0 3px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: 'Fredoka', sans-serif;
      }
      #ysh-trust-text {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #4d6370;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: 'Inter', sans-serif;
      }
      #ysh-trust-dot {
        width: 6px; height: 6px;
        background-color: #18a4b8;
        border-radius: 50%;
        flex-shrink: 0;
      }
      #ysh-right {
        position: relative;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-shrink: 0;
      }
      #ysh-logout-btn {
        background: transparent;
        border: none;
        color: #ffffff;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: transform 0.18s ease, opacity 0.18s ease;
        margin-top: 0;
        padding: 0;
        outline: none;
        white-space: nowrap;
        font-family: 'Inter', sans-serif;
      }
      #ysh-logout-btn:hover:not([data-disabled="true"]) {
        opacity: 0.88;
        transform: translateX(2px);
      }
      #ysh-logout-btn[data-disabled="true"] {
        opacity: 1;
        cursor: default;
        pointer-events: none;
      }
      #ysh-logout-btn svg {
        width: 20px; height: 20px;
        fill: none;
        stroke: #ffffff;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      @media (max-width: 600px) {
        #ysh-root { height: auto; min-height: 72px; padding: 11px 16px; border-radius: 0 0 18px 18px; align-items: center; }
        #ysh-left { gap: 11px; flex: 1; min-width: 0; max-width: 68%; }
        #ysh-logo-wrap { width: 50px; height: 50px; flex-shrink: 0; }
        #ysh-logo-img { width: 40px; height: 40px; }
        #ysh-logo-fallback { width: 34px; height: 34px; }
        #ysh-titles { flex: 1; min-width: 0; }
        #ysh-school-name {
          font-size: 14px;
          margin-bottom: 2px;
          white-space: normal;
          overflow: visible;
          text-overflow: unset;
          line-height: 1.25;
          word-break: break-word;
        }
        #ysh-trust-text { font-size: 10px; gap: 4px; }
        #ysh-trust-dot { width: 5px; height: 5px; }
        #ysh-logout-btn { font-size: 13px; gap: 6px; flex-shrink: 0; }
        #ysh-logout-btn svg { width: 17px; height: 17px; stroke-width: 2.3; }
        #ysh-right { padding-left: 10px; flex-shrink: 0; }
      }
      @media (max-width: 380px) {
        #ysh-root { padding: 10px 12px; }
        #ysh-left { max-width: 64%; }
        #ysh-logo-wrap { width: 42px; height: 42px; }
        #ysh-logo-img { width: 32px; height: 32px; }
        #ysh-school-name { font-size: 13px; }
        #ysh-trust-text { display: none; }
        #ysh-logout-btn { font-size: 12px; gap: 5px; }
        #ysh-logout-btn svg { width: 15px; height: 15px; }
      }


/* ── Tailwind preflight overrides (header must match Blogger) ── */
#ysh-root, #ysh-root * { box-sizing: border-box; }
#ysh-root h1 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0b3442 !important;
  letter-spacing: 0.3px !important;
  line-height: 1.15 !important;
  margin: 0 0 3px 0 !important;
  padding: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Fredoka', sans-serif !important;
  background: none !important;
}
#ysh-root button#ysh-logout-btn {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1.2 !important;
}
#ysh-root #ysh-trust-label,
#ysh-root #ysh-trust-text {
  color: #4d6370 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
}
/* Login card parity */
#view-auth {
  min-height: 70vh;
  align-items: center;
  justify-content: center;
}
#view-auth .auth-card,
#view-auth > div {
  background: #fff;
}
body {
  background: #f4f7f6 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Hide default browser focus rings that look off */
#ysh-logout-btn:focus { outline: none !important; }
@media (max-width: 600px) {
  #ysh-root h1 {
    font-size: 14px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.25 !important;
  }
  #ysh-root button#ysh-logout-btn { font-size: 13px !important; }
}
@media (max-width: 380px) {
  #ysh-root h1 { font-size: 13px !important; }
  #ysh-root button#ysh-logout-btn { font-size: 12px !important; }
}



/* Safety: logo must never blow up without layout CSS */
#ysh-logo-wrap { width: 62px !important; height: 62px !important; max-width: 62px !important; max-height: 62px !important; overflow: hidden !important; }
#ysh-logo-img, #ysh-logo-fallback { max-width: 50px !important; max-height: 50px !important; }
#ysh-logo-fallback { width: 44px !important; height: 44px !important; }
#ysh-root { max-height: 120px; }