*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --black:#111;--gray-700:#444;--gray-500:#777;--gray-400:#999;
  --gray-300:#ccc;--gray-200:#e5e5e5;--gray-100:#eef2fb;--gray-50:#f5f8ff;--white:#fff;
  --accent:#1a3a8f;--accent-mid:#1e56db;--accent-lt:#dce8ff;--accent-xlt:#eef2fb;
  --green:#15803d;--green-lt:#dcfce7;
  --red:#b91c1c;--red-lt:#fee2e2;--amber:#b45309;--amber-lt:#fef3c7;
  --border:#d4dff5;--radius:8px;
  --font:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
body.dark-mode{
  --black:#e2e8f0;--gray-700:#cbd5e1;--gray-500:#94a3b8;--gray-400:#64748b;
  --gray-300:#334155;--gray-200:#1e293b;--gray-100:#0f172a;--gray-50:#1e293b;--white:#1e293b;
  --accent:#60a5fa;--accent-mid:#93c5fd;--accent-lt:#1e3a5f;--accent-xlt:#172038;
  --green:#4ade80;--green-lt:#14532d;
  --red:#f87171;--red-lt:#450a0a;--amber:#fbbf24;--amber-lt:#431407;
  --border:#334155;
}
body.dark-mode .topbar{background:#1e293b;border-bottom-color:#3b82f6;}
body.dark-mode .sidebar{background:linear-gradient(180deg,#1e293b 0%,#0f1b33 100%);border-right-color:#334155;}
body.dark-mode .ci-card{background:#1e293b;border-color:#334155;}
body.dark-mode .modal-box{background:#1e293b;border:1px solid #334155;}
/* ── Reminders ── */
.rm-bell{position:relative;background:none;border:1.5px solid var(--border);border-radius:8px;padding:5px 10px;cursor:pointer;font-size:13px;line-height:1;color:var(--gray-600);transition:all .15s;display:inline-flex;align-items:center;gap:5px;font-family:var(--font);font-weight:600;}
.rm-bell:hover{background:var(--accent-lt);border-color:var(--accent);color:var(--accent);}
.rm-badge{position:absolute;top:-6px;right:-6px;background:#b91c1c;color:#fff;font-size:9px;font-weight:800;border-radius:99px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 3px;pointer-events:none;}
.rm-card{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:10px;border:1.5px solid var(--border);background:var(--white);margin-bottom:8px;transition:box-shadow .15s;}
.rm-card:hover{box-shadow:0 2px 8px rgba(26,58,143,.1);}
.rm-card.rm-today{border-color:#b91c1c;background:#fff1f2;}
.rm-card.rm-soon{border-color:#d97706;background:#fffbeb;}
.rm-card.rm-upcoming{border-color:var(--border);background:var(--white);}
.rm-card.rm-overdue{border-color:#7f1d1d;background:#fef2f2;opacity:.85;}
body.dark-mode .rm-card{background:#1e293b;border-color:#334155;}
body.dark-mode .rm-card.rm-today{background:#3b0a0a;border-color:#dc2626;}
body.dark-mode .rm-card.rm-soon{background:#2d1f00;border-color:#d97706;}
body.dark-mode .rm-card.rm-overdue{background:#2d0a0a;border-color:#7f1d1d;}
body.dark-mode table th{background:#1a2744 !important;}
body.dark-mode .period-btn{color:#64748b;background:transparent;border-color:transparent;}
body.dark-mode .period-btn:hover{background:#1e293b;color:#93c5fd;border-color:#334155;box-shadow:0 1px 3px rgba(0,0,0,.2);}
body.dark-mode .period-btn.active{background:linear-gradient(135deg,#1e3a5f,#1e56db);color:#e0f2fe;border-color:transparent;box-shadow:0 2px 8px rgba(30,86,219,.35);}
body.dark-mode .nav-pill-bar{background:#0f172a;border-color:#334155;}
body.dark-mode .sub-tab-bar{background:#0f172a;border-color:#334155;}
body.dark-mode .period-btn.sub-active{background:#1e3a5f;color:#93c5fd;}
body.dark-mode .nav-sep{background:#334155;}
body.dark-mode .slot-bar{background:#172038;border-color:#334155;}
body.dark-mode .tbl-wrap{background:#1e293b;}
body.dark-mode td{background:#1e293b !important;}
body.dark-mode tr:nth-child(even) td{background:#172554 !important;}
body.dark-mode td.td-no,body.dark-mode td.td-name{background:#1e293b !important;}
body.dark-mode tr:nth-child(even) td.td-no,body.dark-mode tr:nth-child(even) td.td-name{background:#172554 !important;}
body.dark-mode .sidebar-add{background:#1d4ed8;border:none;color:#fff;}
body.dark-mode .sidebar-add:hover{background:#2563eb;}
body.dark-mode input,body.dark-mode select,body.dark-mode textarea{background:#0f172a !important;color:#e2e8f0 !important;border-color:#334155 !important;}
body.dark-mode .btn-ghost{background:#1e293b;border-color:#334155;color:#94a3b8;}
body.dark-mode .btn-ghost:hover{background:#172038;border-color:#60a5fa;color:#60a5fa;}
body{font-family:var(--font);background:var(--gray-100);color:var(--black);font-size:13px;}
#toast-container{position:fixed;bottom:24px;right:24px;z-index:99999;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.toast{display:flex;align-items:flex-start;gap:10px;min-width:260px;max-width:380px;padding:12px 14px;border-radius:10px;font-size:13px;font-family:var(--font);color:#fff;box-shadow:0 4px 18px rgba(0,0,0,.18);opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s;pointer-events:auto;line-height:1.45;}
.toast.show{opacity:1;transform:translateY(0);}
.toast.toast-success{background:#15803d;}
.toast.toast-error{background:#b91c1c;}
.toast.toast-info{background:#1a3a8f;}
.toast.toast-warn{background:#b45309;}
.toast-icon{font-size:15px;flex-shrink:0;margin-top:1px;}
.toast-msg{flex:1;}
body.dark-mode .toast{box-shadow:0 4px 18px rgba(0,0,0,.4);}

/* HAMBURGER MENU */
.hbg-btn{background:none;border:1.5px solid var(--border);border-radius:6px;padding:5px 11px;cursor:pointer;font-size:12px;color:var(--gray-700);display:flex;align-items:center;gap:7px;font-family:var(--font);font-weight:700;letter-spacing:.2px;transition:all .15s;}
.hbg-btn:hover{background:var(--accent-lt);border-color:var(--accent);color:var(--accent);}
.hbg-btn svg{flex-shrink:0;}
.hbg-menu{display:block;visibility:hidden;opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;position:absolute;top:54px;right:12px;z-index:200;background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 36px rgba(26,58,143,.16);padding:6px;min-width:240px;max-height:calc(100vh - 70px);overflow-y:auto;transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;}
.hbg-menu.open{visibility:visible;opacity:1;transform:translateY(0) scale(1);pointer-events:auto;transition:opacity .18s ease,transform .18s ease,visibility 0s linear 0s;}
.hbg-section{margin-bottom:2px;}
.hbg-section:last-child{margin-bottom:0;}
.hbg-label{font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--gray-400);padding:8px 10px 4px;display:block;}
.hbg-row{display:flex;flex-direction:column;gap:1px;}
.hbg-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--gray-700);font-family:var(--font);background:none;border:none;width:100%;text-align:left;text-decoration:none;transition:background .12s,color .12s;}
.hbg-item:hover{background:var(--accent-lt);color:var(--accent);}
.hbg-item:hover .hbg-icon{color:var(--accent);}
.hbg-item.hbg-item-danger{color:#b91c1c;}
.hbg-item.hbg-item-danger:hover{background:#fee2e2;color:#b91c1c;}
.hbg-item-pair{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.hbg-item-pair .hbg-item{justify-content:center;border:1.5px solid var(--border);border-radius:8px;}
.hbg-item-pair .hbg-item:hover{border-color:var(--accent);}
.hbg-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:var(--gray-100);color:var(--gray-500);flex-shrink:0;font-size:12px;transition:background .12s,color .12s;}
.hbg-item:hover .hbg-icon{background:var(--accent-lt);}
.hbg-divider{border:none;border-top:1px solid var(--border);margin:4px 6px;}
body.dark-mode .hbg-menu{background:#1e293b;border-color:#334155;box-shadow:0 12px 36px rgba(0,0,0,.45);}
body.dark-mode .hbg-label{color:#475569;}
body.dark-mode .hbg-divider{border-top-color:#1e293b;}
body.dark-mode .hbg-item{color:#94a3b8;}
body.dark-mode .hbg-item:hover{background:#172038;color:#93c5fd;}
body.dark-mode .hbg-item:hover .hbg-icon{background:#1e3a5f;color:#93c5fd;}
body.dark-mode .hbg-icon{background:#0f172a;color:#475569;}
body.dark-mode .hbg-item-pair .hbg-item{border-color:#334155;}
body.dark-mode .hbg-item.hbg-item-danger:hover{background:#3b0a0a;}
/* Modal close button variants */
.modal-x-btn{background:rgba(255,255,255,.2);border:none;color:#fff;border-radius:8px;cursor:pointer;font-weight:700;transition:background .15s,transform .1s;}
.modal-x-btn:hover{background:rgba(255,255,255,.38);transform:scale(1.1);}
.modal-x-btn-light{background:none;border:none;cursor:pointer;color:#94a3b8;line-height:1;border-radius:6px;padding:2px 6px;transition:color .15s,background .15s;}
.modal-x-btn-light:hover{color:#b91c1c;background:#fee2e2;}
/* Modals */
body.dark-mode .modal{background:#1e293b;border-top-color:#3b82f6;box-shadow:0 24px 64px rgba(0,0,0,.55);}
body.dark-mode .modal-box{background:#1e293b;border-color:#334155;}
body.dark-mode .modal h3{color:#93c5fd;}
body.dark-mode .modal p{color:#94a3b8;}
body.dark-mode .modal-inp{background:#0f172a;border-color:#334155;color:#e2e8f0;}
body.dark-mode .modal-inp:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.18);}
body.dark-mode .modal-foot{border-top-color:#334155;}
/* Sidebar refinements */
body.dark-mode .sidebar-label{color:#60a5fa;}
body.dark-mode .sidebar-dot{background:#334155;}
body.dark-mode .sidebar-item.active .sidebar-dot{background:#60a5fa;box-shadow:0 0 0 2px rgba(96,165,250,.25);}
body.dark-mode .sidebar-item{color:#64748b;}
body.dark-mode .sidebar-item:hover{background:#172038;color:#93c5fd;border-left-color:rgba(96,165,250,.3);}
body.dark-mode .sidebar-item.active{background:linear-gradient(90deg,rgba(59,130,246,.18) 0%,rgba(59,130,246,.06) 100%);color:#93c5fd;border-left-color:#3b82f6;}
body.dark-mode .sidebar-bottom{border-top-color:#334155;}
/* Topbar clock */
body.dark-mode #topbarTime{color:#93c5fd;}
body.dark-mode #topbarDate{color:#64748b;}
body.dark-mode #topbarClock{border-right-color:#334155;}
/* Table buttons */
body.dark-mode .tbl-btn{background:#1e293b;border-color:#334155;color:#94a3b8;}
body.dark-mode .tbl-btn:hover{background:#172038;border-color:#60a5fa;color:#60a5fa;}
body.dark-mode .tbl-btn.rm:hover{border-color:#f87171;color:#f87171;background:#3b0a0a;}
/* Course info inputs */
body.dark-mode .ci-inp{background:#0f172a;border-color:#334155;color:#e2e8f0;}
body.dark-mode .ci-inp:focus{border-color:#3b82f6;background:#0f172a;}
/* Section labels */
body.dark-mode .section-label{color:#64748b;}
/* Topbar separator */
body.dark-mode .topbar-sep{background:#334155;}
/* Empty state */
body.dark-mode #mainArea [style*="color:var(--gray-500)"]{color:#64748b;}
/* LOGIN */
#loginScreen{position:fixed;inset:0;background:url('image-02.webp') center/cover no-repeat;display:flex;align-items:center;justify-content:center;z-index:9999;}
#loginScreen::before{content:'';position:absolute;inset:0;background:rgba(10,20,60,0.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
#loginScreen .login-box{position:relative;z-index:1;}
.login-box{width:380px;padding:48px 40px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(255,255,255,0.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 64px rgba(0,0,0,.45),0 2px 8px rgba(26,58,143,.12);animation:loginFadeIn .45s cubic-bezier(.4,0,.2,1);}
@keyframes loginFadeIn{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
@keyframes loginShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.login-box.shake{animation:loginShake .35s ease;}
.inp:focus{border-color:var(--accent-mid);box-shadow:0 0 0 3px rgba(30,86,219,.18);transform:translateY(-1px);transition:border-color .15s,box-shadow .15s,transform .15s;}
.btn-login{width:100%;padding:12px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-mid) 100%);color:var(--white);border:none;border-radius:6px;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;transition:opacity .15s,box-shadow .15s,transform .15s;box-shadow:0 2px 12px rgba(26,58,143,.35);letter-spacing:.5px;text-transform:uppercase;}
.btn-login:hover{opacity:.92;box-shadow:0 6px 24px rgba(26,58,143,.45);transform:translateY(-1px);}
.btn-login:active{transform:scale(.98);}
.login-logo{font-size:11px;font-weight:700;letter-spacing:3px;color:var(--accent-mid);text-transform:uppercase;margin-bottom:32px;}
.login-box h1{font-size:22px;font-weight:700;margin-bottom:6px;color:var(--accent);}
.login-box p{font-size:12px;color:var(--gray-500);margin-bottom:32px;}
.lbl{font-size:11px;font-weight:600;letter-spacing:.5px;color:var(--accent);margin-bottom:6px;display:block;text-transform:uppercase;}
.inp{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:6px;font-family:var(--font);font-size:13px;background:var(--white);color:var(--black);outline:none;margin-bottom:16px;transition:border-color .15s,box-shadow .15s;}
.inp:focus{border-color:var(--accent-mid);box-shadow:0 0 0 3px rgba(30,86,219,.12);}
.btn-login{width:100%;padding:11px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-mid) 100%);color:var(--white);border:none;border-radius:6px;font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s,box-shadow .15s;box-shadow:0 2px 8px rgba(26,58,143,.25);}
.btn-login:hover{opacity:.9;box-shadow:0 4px 16px rgba(26,58,143,.35);}
.login-err{font-size:12px;color:var(--red);margin-top:10px;min-height:18px;text-align:center;}
.login-hint{font-size:11px;color:var(--gray-300);margin-top:20px;text-align:center;}

/* APP */
#app{display:none;}
.topbar{background:var(--white);border-bottom:2px solid var(--accent);height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(26,58,143,.10);transition:height .2s ease;overflow:visible;}
.topbar-left{display:flex;align-items:center;gap:16px;min-width:0;flex:1;overflow:hidden;}
.topbar-brand{font-size:13px;font-weight:700;letter-spacing:.5px;color:var(--accent);}
.topbar-brand span{color:var(--accent-mid);}
.topbar-sep{width:1px;height:18px;background:var(--border);}
.topbar-sub{font-size:12px;color:var(--gray-500);}
.topbar-right{display:flex;align-items:center;gap:6px;transition:opacity .15s;flex-shrink:0;flex-wrap:nowrap;}
.btn{padding:7px 14px;font-family:var(--font);font-size:12px;font-weight:600;border-radius:6px;cursor:pointer;border:1px solid;transition:all .15s;display:inline-flex;align-items:center;gap:5px;}
.btn-ghost{background:var(--white);border-color:var(--border);color:var(--gray-700);}
.btn-ghost:hover{border-color:var(--accent-mid);color:var(--accent);background:var(--accent-lt);}
.btn-dark{background:var(--accent);border-color:var(--accent);color:var(--white);}
.btn-dark:hover{background:var(--accent-mid);border-color:var(--accent-mid);}
.btn-green{background:var(--green);border-color:var(--green);color:var(--white);}
.btn-green:hover{opacity:.9;}
.btn-red{background:var(--white);border-color:var(--border);color:var(--gray-500);}
.btn-red:hover{border-color:var(--red);color:var(--red);}
.btn-sm{padding:5px 10px;font-size:11px;}
.tb-group{display:flex;align-items:center;gap:4px;}
.tb-group-label{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gray-400);margin-right:2px;}
.tb-sep{width:1px;height:22px;background:var(--border);margin:0 4px;}
.btn-pdf{background:#e53e3e;border-color:#e53e3e;color:#fff;}
.btn-pdf:hover{background:#c53030;border-color:#c53030;}
.btn-json{background:#6b46c1;border-color:#6b46c1;color:#fff;}
.btn-json:hover{background:#553c9a;border-color:#553c9a;}
.btn-print{background:#2b6cb0;border-color:#2b6cb0;color:#fff;}
.btn-print:hover{background:#2c5282;border-color:#2c5282;}
.layout{display:flex;min-height:calc(100vh - 52px);}
.sidebar{width:232px;min-width:232px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-mid) 100%);border-right:1px solid var(--border);display:flex;flex-direction:column;box-shadow:2px 0 12px rgba(26,58,143,.18);transition:width .25s cubic-bezier(.4,0,.2,1),min-width .25s cubic-bezier(.4,0,.2,1);overflow:hidden;position:sticky;top:60px;height:calc(100vh - 60px);align-self:flex-start;z-index:50;}
.sidebar.collapsed{width:40px;min-width:40px;}
.sidebar.collapsed .sidebar-label,
.sidebar.collapsed .sidebar-add,
.sidebar.collapsed .sidebar-bottom,
.sidebar.collapsed #sideList,
.sidebar.collapsed .sidebar-search,
.sidebar.collapsed .sidebar-inner{opacity:0;pointer-events:none;}
.sidebar.collapsed .sidebar-header{flex-direction:column;gap:6px;padding:10px 7px;}
.sidebar.collapsed .sidebar-header-title{opacity:0;height:0;overflow:hidden;margin:0;padding:0;}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px;border-bottom:1px solid rgba(255,255,255,.18);flex-shrink:0;}
.sidebar-header-title{font-size:10px;font-weight:800;letter-spacing:1.4px;color:#fff;text-transform:uppercase;opacity:.9;}
.sidebar-toggle{width:26px;height:26px;border-radius:7px;border:1.5px solid var(--border);background:var(--white);color:var(--gray-500);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;z-index:10;flex-shrink:0;padding:0;}
.sidebar-toggle:hover{background:var(--accent-lt);border-color:var(--accent);color:var(--accent);}
.sidebar-toggle svg{transition:transform .25s;}
.sidebar.collapsed .sidebar-toggle svg{transform:rotate(180deg);}
.sidebar-label{font-size:9px;font-weight:800;letter-spacing:1.4px;color:rgba(255,255,255,.8);text-transform:uppercase;padding:12px 14px 5px;display:block;}
.sidebar-dot{width:6px;height:6px;border-radius:50%;background:var(--gray-300);flex-shrink:0;transition:background .15s;}
.sidebar-item.active .sidebar-dot{background:var(--accent-mid);box-shadow:0 0 0 3px rgba(30,86,219,.18);}
.sidebar-add{margin:10px 10px 4px;padding:9px 12px;border:none;border-radius:8px;background:#fff;cursor:pointer;font-family:var(--font);font-size:12px;font-weight:700;color:var(--accent);text-align:center;transition:all .15s;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 2px 10px rgba(0,0,0,.22);letter-spacing:.2px;}
.sidebar-add:hover{background:var(--accent-xlt);box-shadow:0 4px 14px rgba(0,0,0,.28);transform:translateY(-1px);}
.sidebar-add:active{transform:translateY(0);box-shadow:0 1px 4px rgba(0,0,0,.18);}
.sidebar-bottom{margin-top:auto;padding:12px 14px;border-top:1px solid rgba(255,255,255,.18);transition:opacity .15s;}
.sidebar-search{padding:8px 10px 4px;transition:opacity .15s;}
.sidebar-search input{width:100%;padding:6px 10px;font-size:12px;border:1.5px solid var(--border);border-radius:7px;font-family:var(--font);color:var(--black);background:#fff;outline:none;box-sizing:border-box;transition:border-color .15s;}
.sidebar-search input::placeholder{color:#7c8aa8;opacity:1;}
.sidebar-search input:focus{border-color:var(--accent-mid);background:var(--white);}
.sidebar-inner{display:flex;flex-direction:column;flex:1;overflow:hidden;}
.sidebar-list-wrap{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:4px;}
.sidebar-ay-hdr{padding:10px 14px 4px;font-size:9px;font-weight:800;letter-spacing:1.2px;color:rgba(255,255,255,.85);text-transform:uppercase;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;transition:color .15s;}
.sidebar-ay-hdr:hover{color:#fff;}
.sidebar-ay-chevron{font-size:9px;transition:transform .2s;display:inline-block;}
.sidebar-term-hdr{padding:6px 14px 3px 22px;font-size:8.5px;font-weight:700;letter-spacing:.8px;color:rgba(255,255,255,.68);text-transform:uppercase;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;transition:color .15s;opacity:.95;}
.sidebar-term-hdr:hover{color:#fff;opacity:1;}
body.dark-mode .sidebar-term-hdr{color:#475569;}
body.dark-mode .sidebar-term-hdr:hover{color:#93c5fd;}
body.dark-mode .sidebar{background:linear-gradient(180deg,#1e293b 0%,#0f1b33 100%);border-right-color:#334155;}
body.dark-mode .sidebar-header{border-bottom-color:#334155;}
body.dark-mode .sidebar-header-title{color:#60a5fa;}
body.dark-mode .sidebar-label{color:#475569;}
body.dark-mode .sidebar-dot{background:#334155;}
body.dark-mode .sidebar-item.active .sidebar-dot{background:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.2);}
body.dark-mode .sidebar-item{color:#64748b;}
body.dark-mode .sidebar-item:hover{background:#172038;color:#93c5fd;border-left-color:rgba(96,165,250,.3);}
body.dark-mode .sidebar-item.active{background:linear-gradient(90deg,rgba(59,130,246,.18) 0%,rgba(59,130,246,.06) 100%);color:#93c5fd;border-left-color:#3b82f6;}
body.dark-mode .sidebar-bottom{border-top-color:#334155;}
body.dark-mode .sidebar-search input{background:#0f172a;border-color:#334155;color:#e2e8f0;}
body.dark-mode .sidebar-search input:focus{border-color:#60a5fa;}
body.dark-mode .sidebar-ay-hdr{color:#475569;}
body.dark-mode .sidebar-ay-hdr:hover{color:#93c5fd;}
.sync-status{font-size:11px;color:var(--gray-500);display:flex;align-items:center;gap:6px;}
.sync-dot{width:6px;height:6px;border-radius:50%;background:var(--gray-300);}
.sync-dot.synced{background:var(--green);}
.sync-dot.saving{background:var(--amber);}
.main{flex:1;padding:24px;overflow:auto;min-width:0;}

/* INFO CARDS */
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.info-card:hover{box-shadow:0 4px 16px rgba(26,58,143,.12);transform:translateY(-1px);}
.ic-label{font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--accent);text-transform:uppercase;margin-bottom:6px;opacity:.7;}
.ic-val{font-size:22px;font-weight:700;}
.ic-val.blue{color:var(--accent);}
.ic-val.green{color:var(--green);}
.ic-val.red{color:var(--red);}

/* SUBJECT BAR — kept for legacy reference */
.subject-bar{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:14px 20px;margin-bottom:16px;display:flex;gap:24px;flex-wrap:wrap;align-items:center;}
.sb-field{display:flex;flex-direction:column;gap:3px;}
.sb-label{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--gray-400);text-transform:uppercase;}
.sb-inp{font-family:var(--font);font-size:13px;font-weight:600;color:var(--black);border:none;outline:none;background:transparent;border-bottom:1px solid transparent;padding:1px 0;min-width:100px;transition:border-color .15s;}
.sb-inp:focus{border-bottom-color:var(--accent);}

/* COURSE INFO CARDS */
.ci-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;}
.ci-card{background:var(--white);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(26,58,143,.06);}
.ci-header{display:flex;align-items:center;gap:8px;padding:10px 16px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-mid) 100%);color:#fff;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.ci-header-icon{font-size:14px;}
.ci-grid{padding:14px 16px;display:flex;flex-direction:column;gap:10px;}
.ci-row{display:flex;gap:10px;align-items:flex-end;}
.ci-row.full .ci-field{flex:1;}
.ci-field{display:flex;flex-direction:column;gap:4px;min-width:0;}
.ci-field.grow{flex:1;}
.ci-label{font-size:10px;font-weight:700;letter-spacing:.6px;color:var(--accent);text-transform:uppercase;opacity:.8;white-space:nowrap;}
.ci-inp{font-family:var(--font);font-size:12px;font-weight:500;color:var(--black);border:1.5px solid var(--border);border-radius:6px;padding:6px 9px;outline:none;background:var(--gray-50);width:100%;transition:border-color .15s,box-shadow .15s,background .15s;box-sizing:border-box;}
.ci-inp:focus{border-color:var(--accent-mid);background:var(--white);box-shadow:0 0 0 3px rgba(30,86,219,.10);}
select.ci-inp{cursor:pointer;}
.sb-label{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--gray-400);text-transform:uppercase;}
.sb-inp{font-family:var(--font);font-size:13px;font-weight:600;color:var(--black);border:none;outline:none;background:transparent;border-bottom:1px solid transparent;padding:1px 0;min-width:100px;transition:border-color .15s;}
.sb-inp:focus{border-bottom-color:var(--accent);}

/* PERIOD TABS */
.period-bar{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.att-tab-bar{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;margin-bottom:16px;align-items:center;background:var(--gray-100);border-radius:12px;padding:5px 6px;width:fit-content;}

/* SLOT CONTROLS */
.slot-bar{display:flex;gap:8px;margin-bottom:14px;align-items:center;flex-wrap:wrap;}
.sl-label{font-size:11px;font-weight:700;color:var(--accent);}
.sl-btn{width:24px;height:24px;border:1.5px solid var(--border);border-radius:4px;background:var(--white);color:var(--gray-700);cursor:pointer;font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;transition:all .12s;font-family:var(--font);}
.sl-btn:hover:not(:disabled){border-color:var(--accent-mid);color:var(--accent-mid);background:var(--accent-lt);}
.sl-btn:disabled{opacity:.3;cursor:default;}
.sl-count{font-size:12px;font-weight:700;min-width:14px;text-align:center;}
.sl-sep{width:1px;height:18px;background:var(--border);margin:0 4px;}

/* FORMULA BANNER */
.formula-banner{background:var(--amber-lt);border:1px solid #fde68a;border-radius:var(--radius);padding:10px 16px;margin-bottom:14px;font-size:12px;color:var(--amber);display:flex;align-items:center;gap:8px;}

/* TABLE */
.tbl-wrap{background:var(--white);border:1px solid var(--border);border-radius:12px 12px 0 0;overflow:auto;box-shadow:0 4px 20px rgba(26,58,143,.09),0 1px 4px rgba(26,58,143,.06);}
table{border-collapse:collapse;font-size:13px;}
thead tr:first-child th{position:sticky;top:0;z-index:2;}
thead tr th.td-no{position:sticky;left:0;z-index:4;background:#dce8ff;}
thead tr th.td-name-hd{position:sticky;left:34px;z-index:4;background:#dce8ff;border-right:2px solid #a5b8f5;}
thead tr{background:var(--gray-50);}
th{padding:11px 8px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.9px;color:var(--accent);text-transform:uppercase;border-bottom:2px solid var(--border);white-space:nowrap;border-right:1px solid rgba(212,223,245,.6);}
th:last-child{border-right:none;}
th.g-q{background:linear-gradient(180deg,#eef2ff 0%,#e5eaff 100%);color:#1e40af;border-bottom:2px solid #c7d2fe;}
th.g-a{background:linear-gradient(180deg,#f0fdf4 0%,#e6fbed 100%);color:#166534;border-bottom:2px solid #bbf7d0;}
th.g-r{background:linear-gradient(180deg,#fffbeb 0%,#fef5d0 100%);color:#92400e;border-bottom:2px solid #fde68a;}
th.g-cs{background:linear-gradient(180deg,#faf5ff 0%,#f3e8ff 100%);color:#6b21a8;border-bottom:2px solid #e9d5ff;}
th.g-ex{background:linear-gradient(180deg,#fff1f2 0%,#ffe4e6 100%);color:#9f1239;border-bottom:2px solid #fecdd3;}
th.g-grade{background:linear-gradient(180deg,#f1f5f9 0%,#e8edf5 100%);color:var(--accent);}
th.sep-top{border-bottom:2px solid var(--border);}
td{padding:8px 7px;text-align:center;border-bottom:1px solid rgba(212,223,245,.55);border-right:1px solid rgba(212,223,245,.55);vertical-align:middle;}
td:last-child{border-right:none;}
tbody tr:last-child td{border-bottom:none;}
.td-no{font-size:12px;color:var(--gray-400);width:34px;min-width:34px;font-variant-numeric:tabular-nums;position:sticky;left:0;z-index:1;background:#eef2fb;}
.td-name{text-align:left;padding:6px 12px;white-space:nowrap;position:sticky;left:34px;z-index:1;background:#eef2fb;border-right:2px solid #a5b8f5;}
tbody tr:nth-child(even) td.td-no,tbody tr:nth-child(even) td.td-name{background:#e0e8ff;}
tbody tr:hover td.td-no,tbody tr:hover td.td-name{background:linear-gradient(90deg,#d0dcff,#dce6ff)!important;}
.raw-row td.td-no,.raw-row td.td-name{background:#fef9e7;}

.td-name input{border:none;outline:none;font-family:var(--font);font-size:13px;font-weight:600;background:transparent;width:auto;min-width:100%;color:var(--black);letter-spacing:.1px;}
.raw-row td{background:#fffcf0;}

/* SCORE INPUT */
.sc{width:40px;padding:5px 3px;text-align:center;border:1.5px solid transparent;border-radius:5px;font-family:var(--font);font-size:12px;font-variant-numeric:tabular-nums;color:var(--black);background:transparent;outline:none;}
.sc:hover{border-color:var(--border);background:var(--gray-50);}
.sc.raw-inp{color:var(--amber);font-weight:700;}
.sc.raw-inp:focus{background:var(--amber-lt);border-color:var(--amber);}

/* TRN CELL — read-only, auto */
.trn{font-size:12px;font-weight:700;color:#1e40af;min-width:42px;background:linear-gradient(135deg,#eef2ff,#e8edff);border-radius:4px;}
.trn.empty{color:var(--gray-300);font-weight:400;background:transparent;}

/* COMPUTED */
.avg{color:#1e40af;font-weight:700;background:linear-gradient(135deg,#eef2ff,#e8edff);border-radius:4px;}
.cs-cell{color:#6d28d9;font-weight:700;background:linear-gradient(135deg,#faf5ff,#f3e8ff);border-radius:4px;}
.grade-badge{display:inline-block;padding:3px 11px;border-radius:99px;font-size:11.5px;font-weight:800;letter-spacing:.4px;transition:background .2s,color .2s,box-shadow .2s;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.grade-badge.pass{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803d;border:1.5px solid #86efac;}
.grade-badge.border{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;border:1.5px solid #fcd34d;}
.grade-badge.fail{background:linear-gradient(135deg,#fee2e2,#fecaca);color:#b91c1c;border:1.5px solid #fca5a5;}
.grade-badge.empty{background:var(--gray-100);color:var(--gray-400);border:1.5px solid var(--gray-200);}
.grade-cell{font-weight:700;font-size:13px;background:var(--gray-50);}
.grade-cell.grade-pass{background:linear-gradient(135deg,#dcfce7,#d1fae5);color:#15803d;}
.grade-cell.grade-border{background:linear-gradient(135deg,#fef3c7,#fef9c3);color:#92400e;}
.grade-cell.grade-fail{background:linear-gradient(135deg,#fee2e2,#fecaca);color:#b91c1c;}
.pass-badge{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803d;font-weight:700;font-size:11px;border-radius:5px;padding:2px 8px;white-space:nowrap;box-shadow:0 1px 2px rgba(21,128,61,.12);}
.fail-badge{background:linear-gradient(135deg,#fee2e2,#fecaca);color:#b91c1c;font-weight:700;font-size:11px;border-radius:5px;padding:2px 8px;white-space:nowrap;box-shadow:0 1px 2px rgba(185,28,28,.12);}

/* TABLE FOOTER */
.tbl-footer{padding:10px 16px;border:1px solid var(--border);border-top:none;background:var(--gray-50);display:flex;gap:8px;border-radius:0 0 12px 12px;margin-bottom:20px;}

/* SUMMARY */
.section-label{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--gray-500);text-transform:uppercase;margin-bottom:10px;}

/* TOAST */
.toast{position:fixed;bottom:24px;right:24px;z-index:9999;background:var(--accent);color:var(--white);padding:12px 20px;border-radius:8px;font-size:12px;font-weight:500;transform:translateY(80px) scale(.95);opacity:0;transition:all .35s cubic-bezier(.16,1,.3,1);pointer-events:none;box-shadow:0 4px 20px rgba(26,58,143,.35);}
.toast.show{transform:translateY(0) scale(1);opacity:1;}

@keyframes countUp{from{transform:translateY(6px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes ringFill{from{stroke-dashoffset:var(--ring-full);}to{stroke-dashoffset:var(--ring-offset);}}
@keyframes rowPulse{0%{background:transparent;}40%{background:#ecf1ff;}100%{background:transparent;}}
@keyframes cardEntrance{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes flashGreen{0%{background:transparent;}50%{background:#dcfce7;}100%{background:transparent;}}
@keyframes flashRed{0%{background:transparent;}50%{background:#fee2e2;}100%{background:transparent;}}
@keyframes pillPulse{0%,100%{box-shadow:0 0 0 0 var(--pulse-c, rgba(0,0,0,.45));}50%{box-shadow:0 0 0 6px rgba(0,0,0,0);}}
.pill-pulse{animation:pillPulse 1.4s ease-in-out infinite;}

@keyframes liveDotPulse{0%{box-shadow:0 0 0 0 rgba(185,28,28,.6);}70%{box-shadow:0 0 0 7px rgba(185,28,28,0);}100%{box-shadow:0 0 0 0 rgba(185,28,28,0);}}
.live-badge{display:inline-flex;align-items:center;gap:5px;background:#fee2e2;color:#b91c1c;border:1px solid #fecaca;border-radius:99px;padding:2px 10px 2px 8px;font-size:10.5px;font-weight:800;letter-spacing:.3px;white-space:nowrap;}
body.dark-mode .live-badge{background:#450a0a;color:#f87171;border-color:#7f1d1d;}
.live-dot{width:7px;height:7px;border-radius:50%;background:#b91c1c;flex-shrink:0;animation:liveDotPulse 1.4s ease-in-out infinite;}
body.dark-mode .live-dot{background:#f87171;}

.info-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:16px;transition:box-shadow .2s,transform .2s,border-color .2s;cursor:default;animation:cardEntrance .35s ease both;}
.info-card:hover{box-shadow:0 6px 20px rgba(26,58,143,.14);transform:translateY(-2px);border-color:var(--accent-mid);}
.ic-val{font-size:22px;font-weight:700;animation:countUp .3s ease both;}

.trn.flash-good{animation:flashGreen .6s ease;}
.trn.flash-bad{animation:flashRed .6s ease;}

tbody tr{transition:background .18s,box-shadow .18s;}
tbody tr:nth-child(even) td{background:#f8faff;}
tbody tr:hover td{background:linear-gradient(90deg,#e5ebff,#eef2fb)!important;box-shadow:inset 0 0 0 1px rgba(30,86,219,.12);}
tbody tr:hover td:first-child{border-left:3px solid var(--accent-mid);padding-left:9px;}
tbody tr:hover{filter:drop-shadow(0 3px 8px rgba(26,58,143,.09));}

.sc{transition:all .14s;}
.sc:focus{border-color:var(--accent-mid);background:var(--accent-lt);box-shadow:0 0 0 3px rgba(30,86,219,.15);transform:scale(1.12);z-index:1;position:relative;}
.sc.col-selected{background:#fef08a !important;border-color:#ca8a04 !important;box-shadow:0 0 0 2px rgba(202,138,4,.25) !important;transform:none !important;}
body.dark-mode .sc.col-selected{background:#422006 !important;border-color:#d97706 !important;}

.nav-pill-bar{display:flex;align-items:center;gap:2px;background:var(--gray-100);border:1.5px solid var(--border);border-radius:12px;padding:4px 5px;width:fit-content;box-shadow:0 1px 4px rgba(26,58,143,.06);}
.nav-group{display:flex;align-items:center;gap:2px;}
.nav-sep{width:1px;height:20px;background:var(--border);margin:0 4px;flex-shrink:0;}
.period-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;font-family:var(--font);font-size:12px;font-weight:600;border-radius:8px;cursor:pointer;border:1.5px solid transparent;background:transparent;color:var(--gray-500);transition:background .15s,color .15s,border-color .15s,box-shadow .15s;white-space:nowrap;}
.period-btn:hover{background:var(--white);color:var(--accent);border-color:var(--border);box-shadow:0 1px 3px rgba(26,58,143,.08);}
.period-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent-mid));color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(26,58,143,.30);}
.sub-tab-bar{display:flex;align-items:center;gap:4px;background:var(--accent-xlt);border:1.5px solid var(--accent-lt);border-radius:10px;padding:4px 6px;width:fit-content;}
.period-btn.sub-active{background:var(--accent);color:#fff;box-shadow:0 2px 6px rgba(26,58,143,.22);}
.period-btn.sub-inactive{background:transparent;color:var(--accent);font-weight:600;}
.period-btn.sub-inactive:hover{background:var(--accent-lt);}
/* Course Work sub-tab bar */
.cw-sub-bar{display:inline-flex;align-items:center;gap:3px;background:var(--accent-xlt);border:1.5px solid var(--accent-lt);border-radius:10px;padding:4px 6px;}
.cw-sub-bar-label{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--accent);padding:0 6px 0 4px;white-space:nowrap;border-right:1px solid var(--border);margin-right:2px;}
.cw-sub-btn{display:inline-flex;align-items:center;font-family:var(--font);font-size:11px;font-weight:600;padding:5px 13px;border-radius:7px;cursor:pointer;border:1.5px solid transparent;background:transparent;color:var(--accent);transition:background .15s,color .15s,border-color .15s,box-shadow .15s;white-space:nowrap;}
.cw-sub-btn:hover{background:#fff;color:var(--accent-mid);border-color:var(--border);box-shadow:0 1px 3px rgba(26,58,143,.10);}
.cw-sub-btn.active{background:linear-gradient(135deg,#1a3a8f,#1e56db);color:#fff;border-color:transparent;box-shadow:0 2px 6px rgba(26,58,143,.28);}
body.dark-mode .cw-sub-bar{background:#172038;border-color:#334155;}
body.dark-mode .cw-sub-bar-label{color:#60a5fa;border-right-color:#334155;}
body.dark-mode .cw-sub-btn{color:#60a5fa;}
body.dark-mode .cw-sub-btn:hover{background:#1e293b;color:#93c5fd;border-color:#334155;}
body.dark-mode .cw-sub-btn.active{background:linear-gradient(135deg,#1e3a5f,#1e56db);color:#e0f2fe;box-shadow:0 2px 6px rgba(30,86,219,.4);}
.sub-lock-btn{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:5px 11px;font-family:var(--font);font-size:11px;font-weight:700;border-radius:7px;cursor:pointer;border:1.5px solid;transition:all .15s;white-space:nowrap;}
.period-prog-wrap{display:flex;gap:6px;margin-top:5px;padding:0 2px;}
.period-prog-item{flex:1;display:flex;flex-direction:column;gap:2px;}
.period-prog-label{font-size:9px;font-weight:700;color:var(--gray-500);letter-spacing:.04em;text-transform:uppercase;display:flex;justify-content:space-between;}
.period-prog-track{height:4px;border-radius:3px;background:var(--gray-200);overflow:hidden;}
.period-prog-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-mid));transition:width .4s ease;}
body.dark-mode .period-prog-track{background:#334155;}
.sp-room{background:#eef2fa;border-radius:14px;padding:18px 14px 14px;border:1.5px solid #d1daf0;}
.sp-grid{display:grid;grid-template-columns:repeat(5,1fr) 28px repeat(5,1fr);gap:8px;padding:4px 0;}
.sp-gap{background:transparent;pointer-events:none;}
.sp-seat{transition:transform .15s,box-shadow .15s;}.sp-seat:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(26,58,143,.15)!important;}.sp-selected{box-shadow:0 0 0 2.5px #1a3a8f,0 4px 16px rgba(26,58,143,.3)!important;transform:translateY(-3px) scale(1.04)!important;z-index:2;}
.sp-seat:hover{transform:translateY(-3px);}
.sp-seat svg{overflow:visible;display:block;}
.sp-selected{filter:drop-shadow(0 0 5px rgba(26,58,143,.5));transform:translateY(-4px) scale(1.1)!important;z-index:2;}
.sp-badge{font-size:8px;font-weight:800;border-radius:3px;padding:1px 4px;letter-spacing:.4px;position:absolute;top:0;right:0;z-index:3;}
.sp-badge-p{background:#dcfce7;color:#15803d;}
.sp-badge-l{background:#fef9c3;color:#a16207;}
.sp-badge-a{background:#fee2e2;color:#b91c1c;}
.sp-num{font-size:8px;font-weight:700;color:#94a3b8;line-height:1;text-align:center;}

.sp-absent .sp-name{color:#b91c1c;}
.sp-late .sp-name{color:#a16207;}
.sp-present .sp-name{color:#15803d;}
.sp-legend{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--gray-600);}
.sp-teacher-wrap{grid-column:1/-1;display:flex;align-items:center;justify-content:center;margin-top:8px;}

.sidebar-item{display:flex;align-items:center;gap:8px;padding:8px 16px;cursor:pointer;font-size:13px;color:#fff;font-weight:500;transition:all .15s;border:none;background:none;width:100%;text-align:left;border-left:3px solid transparent;white-space:nowrap;position:relative;overflow:hidden;}
.sidebar-item::after{content:'';position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .3s;}
.sidebar-item:active::after{opacity:.08;}
.sidebar-item:hover{background:var(--accent-xlt);color:var(--accent-mid);border-left-color:rgba(30,86,219,.25);}
.sidebar-item.active{background:#fff;color:var(--accent);font-weight:700;border-left-color:var(--accent-mid);box-shadow:0 2px 6px rgba(0,0,0,.18);}
.sidebar-arrow-btn{color:rgba(255,255,255,.55);}
.sidebar-arrow-btn:hover:not(:disabled){color:#fff;}

.tbl-btn{padding:5px 12px;font-family:var(--font);font-size:11px;font-weight:600;border:1.5px dashed var(--border);border-radius:4px;background:var(--white);color:var(--gray-500);cursor:pointer;transition:all .18s cubic-bezier(.4,0,.2,1);}
.tbl-btn:hover{border-color:var(--accent-mid);color:var(--accent-mid);background:var(--accent-lt);transform:translateY(-1px);box-shadow:0 2px 6px rgba(26,58,143,.12);}
.tbl-btn:active{transform:scale(.96);}
.tbl-btn.rm:hover{border-color:var(--red);color:var(--red);background:var(--red-lt);}

/* MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,30,.55);z-index:10500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.modal-bg.open{opacity:1;pointer-events:all;}
.modal{background:var(--white);border-radius:12px;padding:32px;width:460px;box-shadow:0 24px 64px rgba(26,58,143,.18);transform:scale(.96);transition:transform .2s;border-top:3px solid var(--accent);}
.modal-box{background:#ffffff;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.22);transform:scale(.97);transition:transform .2s;}
.modal-bg.open .modal-box{transform:scale(1);}
.modal-bg.open .modal{transform:scale(1);}
.modal h3{font-size:16px;font-weight:700;margin-bottom:6px;color:var(--accent);}
.modal p{font-size:12px;color:var(--gray-500);margin-bottom:20px;}
.modal-inp{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:6px;font-family:var(--font);font-size:13px;outline:none;margin-bottom:12px;transition:border-color .15s,box-shadow .15s;}
.modal-inp:focus{border-color:var(--accent-mid);box-shadow:0 0 0 3px rgba(30,86,219,.10);}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;}
@keyframes savePulse{
  0%  {box-shadow:0 0 0 0 rgba(22,163,74,.55);}
  50% {box-shadow:0 0 0 6px rgba(22,163,74,.0);}
  100%{box-shadow:0 0 0 0 rgba(22,163,74,.0);}
}
.save-pulse{animation:savePulse .6s ease-out;}
.code-block{background:var(--gray-50);border:1px solid var(--border);border-radius:6px;padding:12px;font-size:10px;line-height:1.6;color:var(--gray-700);font-family:monospace;overflow:auto;max-height:140px;margin-bottom:12px;white-space:pre;}
.setup-steps{background:var(--gray-50);border:1px solid var(--border);border-radius:6px;padding:12px;font-size:11px;color:var(--gray-500);line-height:1.8;margin-bottom:12px;}

@media print{
  body > *:not(#_printArea){display:none!important;}
  #_printArea{display:block!important;}
  @page{size:215.9mm 330.2mm landscape;margin:6mm;}
  tbody tr td:first-child{border-left:none!important;padding-left:inherit!important;}
  tbody tr:hover td{background:inherit!important;box-shadow:none!important;}
  tbody tr:hover td:first-child{border-left:none!important;padding-left:inherit!important;}
  tbody tr:hover{filter:none!important;}
  tbody tr:nth-child(even) td{background:#f8faff!important;}
  tbody tr:nth-child(odd) td{background:#fff!important;}
}

/* ── Responsive: standard laptops (≤1366px) ── */
@media screen and (max-width:1366px){
  .main{padding:16px;}
  .ci-card{gap:10px;}
  .topbar{padding:0 14px;}
}

/* ── Responsive: small laptops & old monitors (≤1280px) ── */
@media screen and (max-width:1280px){
  .main{padding:14px;}
  .ci-grid{grid-template-columns:1fr 1fr!important;}
  .slot-bar{flex-wrap:wrap;gap:6px;}
  .nav-pill-bar{gap:2px;}
  .period-btn{padding:5px 10px;font-size:11px;}
  #topbarTime{font-size:12px;}
  #topbarDate{font-size:10px;}
}

/* ── Responsive: 1024px screens ── */
@media screen and (max-width:1024px){
  .main{padding:12px;}
  .ci-grid{grid-template-columns:1fr!important;}
  .topbar{padding:0 10px;}
  .topbar-left{gap:8px;}
  #topbarClock{display:none;}
  .tbl-wrap{font-size:11px;}
  table th,table td{padding:5px 6px!important;}
  .modal-box{padding:14px!important;}
  .hbg-menu{right:4px;}
  .sidebar-ay-hdr{padding:8px 10px 3px;font-size:8px;}
  .sidebar-item{font-size:11px;padding:7px 8px;}
  .sidebar-add{font-size:11px;padding:7px 8px;margin:8px 6px 4px;}
  .sidebar-search{padding:6px 8px 3px;}
  .sidebar-search input{font-size:11px;padding:5px 8px;}
}

/* ── Responsive: 900px screens ── */
@media screen and (max-width:900px){
  .main{padding:10px;}
  .topbar{padding:0 8px;}
  #topbarClock{display:none;}
  .tbl-wrap{font-size:11px;}
  table th,table td{padding:4px 5px!important;}
  .hbg-menu{right:4px;}
}

/* ── College picker with logos ── */
.fh-cp{position:relative;}
.fh-cp-btn{width:100%;display:flex;align-items:center;gap:8px;padding:6px 10px;border:1.5px solid var(--border);border-radius:8px;background:var(--white);font-family:var(--font);font-size:12px;cursor:pointer;text-align:left;}
.fh-cp-btn:hover{border-color:var(--accent);}
.fh-cp-logo{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#f1f5f9;}
.fh-cp-text{flex:1;color:var(--black);}
.fh-cp-text.placeholder{color:#94a3b8;}
.fh-cp-caret{color:#94a3b8;font-size:10px;flex-shrink:0;}
.fh-cp-list{position:absolute;z-index:50;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;background:var(--white);border:1.5px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:4px;}
.fh-cp-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--black);}
.fh-cp-item:hover{background:#eff6ff;color:var(--accent);}
.fh-cp-item.active{color:var(--accent);font-weight:700;}
.fh-cp-item .fh-cp-logo{width:20px;height:20px;}

/* ── Floating calculator ── */
.calc-btn{border:none;background:var(--white);padding:14px 0;font-size:16px;font-weight:600;cursor:pointer;color:var(--black);font-family:var(--font);}
.calc-btn:hover{background:var(--gray-50);}
.calc-btn:active{background:var(--accent-lt);}
.calc-op{background:#eef2ff;color:var(--accent);font-weight:700;}
.calc-op:hover{background:#e0e7ff;}
.calc-eq{background:var(--accent);color:#fff;}
.calc-eq:hover{background:var(--accent-mid);}

/* ---- (originally a separate <style> block elsewhere in the document; merged here, same cascade order) ---- */

  @keyframes splashLogoIn{from{opacity:0;transform:scale(.94) translateY(6px);filter:blur(4px)}to{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}
  @keyframes splashDividerIn{from{opacity:0;transform:scaleY(.3)}to{opacity:1;transform:scaleY(1)}}
  @keyframes splashTextIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  @keyframes splashBar{to{transform:scaleX(1)}}
  @keyframes splashOut{from{opacity:1}to{opacity:0;visibility:hidden}}
  #splashScreen.splash-hide{animation:splashOut 1.1s ease forwards;}

/* ---- (originally a separate <style> block elsewhere in the document; merged here, same cascade order) ---- */

    @keyframes csAlarmPop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
    @keyframes csAlarmRing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
    .cs-ongoing-badge{display:inline-flex;align-items:center;gap:5px;background:#1d4ed8;color:#fff;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;padding:3px 10px;border-radius:99px;animation:csPulse 1.6s ease-in-out infinite;}
    .cs-entry-ongoing{border-color:#1d4ed8 !important;background:linear-gradient(135deg,#eff6ff,#dbeafe) !important;box-shadow:0 0 0 3px rgba(29,78,216,.15) !important;}
    @keyframes csPulse{0%,100%{box-shadow:0 0 0 0 rgba(29,78,216,.5)}50%{box-shadow:0 0 0 5px rgba(29,78,216,0)}}
    body.dark-mode .cs-ongoing-badge{background:#3b82f6;}
    body.dark-mode .cs-entry-ongoing{background:linear-gradient(135deg,#172038,#1e3a5f) !important;border-color:#3b82f6 !important;box-shadow:0 0 0 3px rgba(59,130,246,.2) !important;}
    .cs-day-active{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important;}
    .cs-entry{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:10px;border:1.5px solid var(--border);margin-bottom:8px;background:var(--white);transition:box-shadow .15s;}
    .cs-entry:hover{box-shadow:0 2px 10px rgba(26,58,143,.08);}
    .cs-entry:last-child{margin-bottom:0;}
    body.dark-mode .cs-entry{background:#1e293b;border-color:#334155;}
    body.dark-mode #csModal>div{background:#0f172a;}
    body.dark-mode #csAlarmPopup>div{background:#1e293b;}
    #csLabel{color:#1e293b !important;background:#ffffff !important;}
  

/* ---- (originally a separate <style> block elsewhere in the document; merged here, same cascade order) ---- */

#localWarnModal{background:rgba(69,10,10,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
#localWarnModal .modal{border-top:5px solid #b91c1c;box-shadow:0 24px 64px rgba(0,0,0,.5),0 0 0 1px rgba(185,28,28,.15);position:relative;overflow:hidden;}
#localWarnModal h3{color:#b91c1c;font-size:17px;display:flex;align-items:center;gap:8px;}
body.dark-mode #localWarnModal h3{color:#f87171;}
@keyframes lwmPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.18);opacity:.75;}}
#localWarnModal .lwm-icon{display:inline-block;animation:lwmPulse 1.1s ease-in-out infinite;}
@keyframes lwmLoadBar{0%{background-position:0 0;}100%{background-position:40px 0;}}
#localWarnModal .lwm-loadbar{position:absolute;top:0;left:0;right:0;height:4px;background:repeating-linear-gradient(135deg,#b91c1c 0 10px,#f87171 10px 20px);background-size:40px 4px;animation:lwmLoadBar .8s linear infinite;}

/* ---- (originally a separate <style> block elsewhere in the document; merged here, same cascade order) ---- */

#stuCard{
  position:fixed;z-index:99990;pointer-events:none;
  opacity:0;transform:translateY(6px) scale(.97);
  transition:opacity .18s ease,transform .18s ease;
  width:320px;
}
#stuCard.visible{
  opacity:1;transform:translateY(0) scale(1);pointer-events:auto;
}
#stuCard.visible.card-above{
  transform:translateY(-4px) scale(1);
}
.sc-header{
  background:linear-gradient(135deg,#1a3a8f 0%,#1e56db 100%);
  border-radius:14px 14px 0 0;
  padding:14px 16px 12px;
  position:relative;
  overflow:hidden;
}
.sc-header::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#60a5fa,#e0f2fe,#60a5fa);
}
.sc-body{
  background:var(--white);
  border:1.5px solid var(--border);
  border-top:none;
  border-radius:0 0 14px 14px;
  padding:14px 16px;
  box-shadow:0 12px 40px rgba(26,58,143,.18);
}
.sc-period-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:8px;
  font-size:11px;font-weight:700;
}
.sc-stat-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:5px 0;border-bottom:1px solid var(--gray-200);
  font-size:12px;color:var(--gray-600);
}
.sc-stat-row:last-child{border-bottom:none;}
.sc-stat-val{font-weight:800;color:var(--black);font-size:13px;}
.sc-section-label{
  font-size:9px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--gray-400);
  margin:10px 0 6px;
}
.sc-cw-badge{
  display:inline-block;padding:2px 8px;border-radius:99px;
  font-size:10px;font-weight:700;
}
body.dark-mode #stuCard .sc-body{
  background:#1e293b;border-color:#334155;
}
body.dark-mode #stuCard .sc-stat-row{border-color:#334155;color:#94a3b8;}
body.dark-mode #stuCard .sc-stat-val{color:#e2e8f0;}