:root{
  --bg0:#07090f;--bg1:#0c1018;--bg2:#111620;--bg3:#18202e;--bg4:#1f2a3c;
  --blue:#00c8ff;--gold:#f4b942;--green:#00e698;--red:#ff4d6d;--purple:#a78bfa;--orange:#fb923c;
  --border:rgba(255,255,255,.06);--borderB:rgba(0,200,255,.2);--borderG:rgba(0,230,152,.2);
  --t1:#eef2ff;--t2:#94a3b8;--t3:#4b5563;--t4:#2d3748;
  --sh:0 8px 32px rgba(0,0,0,.5);
  --r:12px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html,body{height:100%;overflow:hidden}
body{font-family:'Tajawal',sans-serif;background:var(--bg0);color:var(--t1);direction:rtl;font-size:14px}

/* Grid background */
body::before{content:'';position:fixed;inset:0;
  background:
    linear-gradient(rgba(0,200,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,200,255,.018) 1px,transparent 1px);
  background-size:50px 50px;pointer-events:none;z-index:0}

/* Glow radial */
body::after{content:'';position:fixed;inset:0;
  background:radial-gradient(ellipse 60% 40% at 50% -5%,rgba(0,80,200,.18),transparent 60%);
  pointer-events:none;z-index:0}

/* ─── LOADING SCREEN ─── */
.loader{position:fixed;inset:0;z-index:999;background:var(--bg0);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  transition:opacity .6s ease}
.loader.done{opacity:0;pointer-events:none}
.spin{width:52px;height:52px;border:2px solid var(--bg4);border-top-color:var(--blue);
  border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.load-text{color:var(--t2);font-size:15px;font-weight:500}
.load-step{color:var(--t3);font-size:11px;font-family:'JetBrains Mono',monospace;letter-spacing:.5px}

/* ─── LAYOUT ─── */
.layout{display:grid;grid-template-columns:260px 1fr;grid-template-rows:64px 1fr;height:100vh;
  position:relative;z-index:1}

/* ─── HEADER ─── */
header{grid-column:1/-1;display:flex;align-items:center;gap:0;
  border-bottom:1px solid var(--border);background:rgba(7,9,15,.9);
  backdrop-filter:blur(20px);padding:0 20px;position:sticky;top:0;z-index:50}

.h-brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.h-logo{width:38px;height:38px;border-radius:8px;object-fit:contain;background:#fff;padding:3px}
.h-titles .name{font-size:16px;font-weight:800;color:var(--t1);letter-spacing:-.3px}
.h-titles .sub{font-size:10.5px;color:var(--t3);font-weight:400;margin-top:1px}

.h-divider{width:1px;height:36px;background:var(--border);margin:0 20px;flex-shrink:0}

.h-center{flex:1;display:flex;align-items:center;gap:16px}
.live-badge{display:flex;align-items:center;gap:7px;background:rgba(255,77,109,.12);
  border:1px solid rgba(255,77,109,.3);border-radius:20px;padding:5px 12px;
  font-size:11.5px;font-weight:700;color:#ff8fa3;letter-spacing:.5px}
.live-dot{width:7px;height:7px;border-radius:50%;background:#ff4d6d;
  animation:pulse 1.4s ease infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.h-semester{font-size:12px;color:var(--t2);background:var(--bg3);border:1px solid var(--border);
  border-radius:6px;padding:4px 10px}

.h-clock{display:flex;flex-direction:column;align-items:flex-start;gap:1px;margin-right:auto}
.clock-time{font-size:22px;font-weight:800;font-family:'JetBrains Mono',monospace;color:var(--blue);
  letter-spacing:.5px;line-height:1}
.clock-date{font-size:10px;color:var(--t3);font-weight:400}
.clock-src{font-size:9.5px;color:var(--t3);opacity:.6}

/* ─── SIDEBAR ─── */
.sidebar{border-left:1px solid var(--border);background:rgba(12,16,24,.97);
  overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:14px}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:4px}

.sb-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px}
.sb-label{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px}

/* Stats */
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;
  border-bottom:1px solid var(--border)}
.stat-row:last-child{border-bottom:none}
.stat-l{font-size:12px;color:var(--t2)}
.stat-v{font-size:16px;font-weight:800;font-family:'JetBrains Mono',monospace}
.sv-now{color:var(--red)}
.sv-soon{color:var(--orange)}
.sv-total{color:var(--blue)}

/* Day buttons */
.day-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.day-btn{background:var(--bg3);border:1px solid var(--border);border-radius:6px;
  padding:6px 2px;font-size:11px;font-family:'Tajawal',sans-serif;color:var(--t2);
  cursor:pointer;text-align:center;transition:all .2s;font-weight:500}
.day-btn:hover{background:var(--bg4);color:var(--t1)}
.day-btn.active{background:rgba(0,200,255,.15);border-color:var(--borderB);color:var(--blue);font-weight:700}
.day-btn.today{position:relative}
.day-btn.today::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--gold)}

/* Branch list */
.branch-list{display:flex;flex-direction:column;gap:4px}
.br-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;
  background:var(--bg3);border:1px solid var(--border);cursor:pointer;transition:all .2s;
  font-size:12.5px;color:var(--t2);font-weight:500}
.br-item:hover{background:var(--bg4);color:var(--t1)}
.br-item.active{border-color:var(--borderB);background:rgba(0,200,255,.1);color:var(--blue)}
.br-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.br-count{margin-right:auto;font-size:10.5px;font-family:'JetBrains Mono',monospace;
  color:var(--t3);background:var(--bg4);border-radius:4px;padding:1px 5px}

/* Search */
.search-box{position:relative}
.search-input{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:8px;
  padding:8px 12px 8px 32px;color:var(--t1);font-family:'Tajawal',sans-serif;font-size:13px;
  outline:none;transition:border-color .2s}
.search-input:focus{border-color:var(--borderB)}
.search-input::placeholder{color:var(--t3)}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:13px}

/* ─── MAIN AREA ─── */
main{overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:20px}
main::-webkit-scrollbar{width:5px}
main::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:4px}

/* Section header */
.sec-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sec-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0}
.ico-red{background:rgba(255,77,109,.15);border:1px solid rgba(255,77,109,.3)}
.ico-orange{background:rgba(251,146,60,.15);border:1px solid rgba(251,146,60,.3)}
.ico-blue{background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.25)}
.ico-gray{background:var(--bg3);border:1px solid var(--border)}
.sec-title{font-size:16px;font-weight:700;color:var(--t1)}
.sec-count{margin-right:auto;font-size:11px;color:var(--t3);font-family:'JetBrains Mono',monospace;
  background:var(--bg3);border:1px solid var(--border);border-radius:5px;padding:3px 8px}
.sec-bar{height:2px;background:linear-gradient(90deg,var(--blue),transparent);border-radius:1px;margin-bottom:14px;opacity:.4}

/* Card grid */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}

/* Lecture card */
.lec-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:14px;cursor:default;transition:all .25s;position:relative;overflow:hidden}
.lec-card::before{content:'';position:absolute;top:0;right:0;width:3px;height:100%;border-radius:1px}
.lec-card.st-now{border-color:rgba(255,77,109,.3)}
.lec-card.st-now::before{background:var(--red)}
.lec-card.st-soon{border-color:rgba(251,146,60,.3)}
.lec-card.st-soon::before{background:var(--orange)}
.lec-card.st-upcoming{border-color:var(--border)}
.lec-card.st-upcoming::before{background:var(--t3)}
.lec-card.st-done{opacity:.5}
.lec-card.st-done::before{background:var(--t4)}
.lec-card:hover{background:var(--bg3);transform:translateY(-1px)}

.lc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;gap:8px}
.lc-name{font-size:14px;font-weight:700;color:var(--t1);line-height:1.35;flex:1}
.lc-badge{font-size:9.5px;font-weight:700;padding:3px 8px;border-radius:10px;flex-shrink:0;white-space:nowrap}
.badge-now{background:rgba(255,77,109,.2);color:#ff8fa3;border:1px solid rgba(255,77,109,.3)}
.badge-soon{background:rgba(251,146,60,.18);color:#fdb97d;border:1px solid rgba(251,146,60,.3)}
.badge-upcoming{background:var(--bg4);color:var(--t3);border:1px solid var(--border)}
.badge-done{background:var(--bg3);color:var(--t4);border:1px solid var(--border)}

.lc-code{font-size:11px;color:var(--t3);font-family:'JetBrains Mono',monospace;margin-bottom:8px}

.lc-meta{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:8px}
.lc-meta-item{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--t2)}
.mi-icon{font-size:12px;opacity:.7;flex-shrink:0}

.lc-time{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;
  border-top:1px solid var(--border)}
.lt-range{font-size:13px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--blue)}
.lt-duration{font-size:10.5px;color:var(--t3);margin-right:auto}
.lt-bar{flex:1;height:3px;background:var(--bg4);border-radius:2px;overflow:hidden;max-width:60px}
.lt-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--green),var(--blue));
  transition:width .5s}

/* Branch tag on card */
.lc-branch{font-size:10px;padding:2px 7px;border-radius:8px;font-weight:600;margin-top:6px;display:inline-block}

/* Progress bar section */
.progress-section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.progress-title{font-size:13px;font-weight:600;color:var(--t2)}
.progress-pct{font-size:20px;font-weight:800;font-family:'JetBrains Mono',monospace;color:var(--gold)}
.progress-bar{height:6px;background:var(--bg4);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--gold));transition:width 1s}

/* Timeline (full day) */
.timeline-list{display:flex;flex-direction:column;gap:4px}
.tl-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;
  background:var(--bg2);border:1px solid var(--border);transition:all .2s}
.tl-item.tl-now{background:rgba(255,77,109,.08);border-color:rgba(255,77,109,.25)}
.tl-item.tl-soon{background:rgba(251,146,60,.06);border-color:rgba(251,146,60,.2)}
.tl-item.tl-done{opacity:.45}
.tl-time{font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--t2);width:100px;flex-shrink:0;line-height:1.3}
.tl-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.tl-name{font-size:13px;font-weight:600;color:var(--t1);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-instructor{font-size:11px;color:var(--t3);flex-shrink:0;max-width:130px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-room{font-size:10.5px;color:var(--t3);flex-shrink:0;font-family:'JetBrains Mono',monospace}

/* Empty */
.empty{text-align:center;padding:40px 20px;color:var(--t3)}
.empty-icon{font-size:40px;opacity:.35;margin-bottom:12px}
.empty-text{font-size:13px}

/* Update ticker */
.update-tick{font-size:10.5px;color:var(--t3);text-align:center;font-family:'JetBrains Mono',monospace}

/* Tooltip */
.tooltip{position:relative}
.tooltip:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);right:50%;
  transform:translateX(50%);background:var(--bg4);color:var(--t1);font-size:11px;
  padding:4px 8px;border-radius:6px;white-space:nowrap;border:1px solid var(--border);z-index:100}

/* Color coded branches */
.bc-elec{background:rgba(167,139,250,.15);color:#c4b5fd}
.bc-mj-m{background:rgba(0,200,255,.12);color:#67e8f9}
.bc-mj-f{background:rgba(0,230,152,.12);color:#6ee7b7}
.bc-zl-m{background:rgba(251,146,60,.12);color:#fda16a}
.bc-zl-f{background:rgba(244,185,66,.12);color:#fcd34d}
.bc-rm-f{background:rgba(255,77,109,.12);color:#fda4af}
.bc-rm-m{background:rgba(100,200,100,.12);color:#86efac}
.bc-eve{background:rgba(148,163,184,.12);color:#94a3b8}

/* Responsive */
@media(max-width:900px){
  .layout{grid-template-columns:1fr;grid-template-rows:64px auto 1fr}
  .sidebar{grid-row:2;overflow:visible;flex-direction:row;flex-wrap:wrap;padding:10px}
  main{grid-row:3}
}