:root{
  --ink:#0D1117;--ink2:#161B22;--ink3:#21262D;
  --gold:#C9A84C;--gold2:#E8C97A;--gold3:rgba(201,168,76,.12);
  --cream:#F0EAD6;--cream2:#FAF7F0;
  --red:#C0392B;--green:#1E8449;--blue:#1A5276;
  --border:rgba(201,168,76,.2);--border2:rgba(201,168,76,.08);
  --text:#E8E6E1;--muted:#8B8680;--muted2:#5A5550;
  --r:14px;--r2:10px;--r3:6px;
  --shadow:0 8px 32px rgba(0,0,0,.4);
  --shadow2:0 2px 8px rgba(0,0,0,.3);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{font-family:'Outfit',sans-serif;background:var(--ink);color:var(--text);min-height:100vh;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif}
button{cursor:pointer;font-family:'Outfit',sans-serif}
input,select,textarea{font-family:'Outfit',sans-serif}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:rgba(201,168,76,.3);border-radius:99px}

/* ─── SPLASH / LOGIN ─── */
#splash{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 100% 80% at 50% 0%,rgba(201,168,76,.15) 0%,transparent 60%),
    linear-gradient(160deg,#0D1117 0%,#131A24 60%,#0D1117 100%);
  overflow:hidden;
}
#splash::before{
  content:'';position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 79px,rgba(201,168,76,.04) 79px,rgba(201,168,76,.04) 80px),
    repeating-linear-gradient(90deg,transparent,transparent 79px,rgba(201,168,76,.04) 79px,rgba(201,168,76,.04) 80px);
  pointer-events:none;
}
.splash-inner{
  width:100%;max-width:440px;padding:2rem;
  animation:slideUp .6s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.splash-logo{text-align:center;margin-bottom:2.5rem}
.splash-emblem{
  display:inline-flex;align-items:center;justify-content:center;
  width:80px;height:80px;border-radius:20px;
  background:linear-gradient(135deg,#8B6914,#C9A84C,#E8C97A,#C9A84C);
  box-shadow:0 0 60px rgba(201,168,76,.35),inset 0 1px 0 rgba(255,255,255,.3);
  margin-bottom:1rem;position:relative;overflow:hidden;
}
.splash-emblem::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.15) 60%)}
.splash-emblem-text{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:700;color:#0D1117;letter-spacing:-1px;position:relative}
.splash-logo h1{font-size:1.7rem;font-weight:700;color:var(--cream);letter-spacing:-.5px}
.splash-logo p{font-size:.78rem;color:var(--gold);letter-spacing:2.5px;text-transform:uppercase;margin-top:.3rem}
.splash-card{
  background:rgba(22,27,34,.8);backdrop-filter:blur(24px);
  border:1px solid var(--border);border-radius:var(--r);
  padding:2rem;box-shadow:var(--shadow);
}
.splash-card h2{font-size:1.2rem;font-weight:600;margin-bottom:1.5rem;color:var(--cream);text-align:center}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.72rem;font-weight:600;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:.4rem}
.field input,.field select{
  width:100%;background:rgba(255,255,255,.05);
  border:1px solid rgba(201,168,76,.2);border-radius:var(--r2);
  padding:.75rem 1rem;color:var(--text);font-size:.9rem;outline:none;
  transition:border-color .2s,background .2s;
}
.field input:focus,.field select:focus{border-color:var(--gold);background:rgba(255,255,255,.08)}
.field input::placeholder{color:var(--muted2)}
.field select option{background:#1a1f27;color:var(--text)}
.err{background:rgba(192,57,43,.15);border:1px solid rgba(192,57,43,.35);color:#E74C3C;
  border-radius:var(--r3);padding:.55rem .9rem;font-size:.82rem;margin-top:.75rem;display:none;text-align:center}
.btn-primary{
  width:100%;padding:.85rem;
  background:linear-gradient(135deg,#8B6914,var(--gold),var(--gold2));
  color:#0D1117;border:none;border-radius:var(--r2);
  font-size:.95rem;font-weight:700;letter-spacing:.3px;
  transition:transform .15s,box-shadow .15s;margin-top:.5rem;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(201,168,76,.4)}
.btn-primary:active{transform:none}
.tabs-auth{display:flex;gap:0;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;margin-bottom:1.5rem}
.tabs-auth button{flex:1;padding:.6rem;border:none;background:none;color:var(--muted);font-size:.85rem;font-weight:500;transition:background .15s,color .15s}
.tabs-auth button.active{background:rgba(201,168,76,.18);color:var(--gold);font-weight:700}
.splash-footer{text-align:center;margin-top:1.2rem;font-size:.72rem;color:var(--muted2)}

/* ─── APP SHELL ─── */
#appShell{display:none;flex-direction:column;min-height:100vh}

/* Topbar */
.topbar{
  height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5rem;background:rgba(13,17,23,.95);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;
}
.topbar-brand{display:flex;align-items:center;gap:.75rem}
.tb-emblem{width:34px;height:34px;border-radius:8px;
  background:linear-gradient(135deg,#8B6914,var(--gold));
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-weight:700;font-size:.95rem;color:#0D1117}
.tb-brand-text{line-height:1}
.tb-brand-text strong{font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:700;color:var(--cream)}
.tb-brand-text small{display:block;font-size:.62rem;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase}
.topbar-right{display:flex;align-items:center;gap:.75rem}
.tb-user{font-size:.8rem;color:var(--muted);padding:.35rem .75rem;
  background:rgba(255,255,255,.04);border:1px solid var(--border2);border-radius:var(--r3)}
.tb-user strong{color:var(--gold)}
.btn-sm{padding:.4rem .9rem;border-radius:var(--r3);font-size:.78rem;font-weight:600;border:1px solid var(--border);background:rgba(201,168,76,.08);color:var(--gold);transition:background .15s}
.btn-sm:hover{background:rgba(201,168,76,.18)}
.btn-sm.danger{border-color:rgba(192,57,43,.35);background:rgba(192,57,43,.08);color:#E74C3C}
.btn-sm.danger:hover{background:rgba(192,57,43,.18)}

/* Main layout */
.app-body{display:flex;flex:1;min-height:calc(100vh - 60px)}

/* Sidebar */
.sidebar{
  width:220px;flex-shrink:0;background:var(--ink2);border-right:1px solid var(--border2);
  padding:1.25rem 0;position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto;
}
.sb-section{margin-bottom:.5rem}
.sb-label{font-size:.62rem;color:var(--muted2);letter-spacing:2px;text-transform:uppercase;padding:.5rem 1rem;margin-top:.5rem}
.sb-btn{
  display:flex;align-items:center;gap:.6rem;width:100%;padding:.6rem 1rem;
  border:none;background:none;color:var(--muted);border-radius:0;
  font-size:.83rem;font-weight:500;text-align:left;transition:background .12s,color .12s;
}
.sb-btn:hover{background:rgba(201,168,76,.07);color:var(--text)}
.sb-btn.active{background:rgba(201,168,76,.13);color:var(--gold);font-weight:600;border-right:3px solid var(--gold)}
.sb-btn .i{font-size:1rem;width:20px;text-align:center}
.sb-course-info{margin:1rem;padding:.75rem;background:rgba(201,168,76,.06);border:1px solid var(--border2);border-radius:var(--r3)}
.sb-course-info p{font-size:.7rem;color:var(--gold);font-weight:600;margin-bottom:.3rem}
.sb-course-info span{font-size:.75rem;color:var(--muted);display:block;line-height:1.5}

/* Main content */
.main{flex:1;padding:1.75rem;overflow-y:auto;min-width:0}
.page{display:none;animation:fadeIn .3s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Page header */
.pg-header{margin-bottom:1.75rem}
.pg-header h2{font-size:1.9rem;font-weight:700;color:var(--cream);letter-spacing:-.5px}
.pg-header p{font-size:.85rem;color:var(--muted);margin-top:.3rem}
.breadcrumb{font-size:.72rem;color:var(--muted2);margin-bottom:.4rem}
.breadcrumb em{color:var(--gold);font-style:normal}

/* Cards */
.card{background:rgba(255,255,255,.03);border:1px solid var(--border2);border-radius:var(--r);padding:1.5rem}
.card-title{font-size:.85rem;font-weight:700;color:var(--gold);letter-spacing:.5px;text-transform:uppercase;margin-bottom:1.1rem;display:flex;align-items:center;gap:.5rem}

/* Stats */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat{background:rgba(255,255,255,.03);border:1px solid var(--border2);border-radius:var(--r2);padding:1.2rem 1.4rem;position:relative;overflow:hidden;transition:transform .2s}
.stat:hover{transform:translateY(-3px)}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.s-gold::before{background:linear-gradient(90deg,var(--gold),var(--gold2))}
.s-red::before{background:linear-gradient(90deg,#C0392B,#E74C3C)}
.s-green::before{background:linear-gradient(90deg,#1E8449,#27AE60)}
.s-blue::before{background:linear-gradient(90deg,#1A5276,#2980B9)}
.s-purple::before{background:linear-gradient(90deg,#6C3483,#9B59B6)}
.stat-lbl{font-size:.68rem;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:.45rem}
.stat-val{font-family:'Cormorant Garamond',serif;font-size:2.1rem;font-weight:700;line-height:1}
.s-gold .stat-val{color:var(--gold)}
.s-red .stat-val{color:#E74C3C}
.s-green .stat-val{color:#27AE60}
.s-blue .stat-val{color:#2980B9}
.s-purple .stat-val{color:#9B59B6}
.stat-sub{font-size:.72rem;color:var(--muted);margin-top:.35rem}

/* Grid */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.25rem}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:1.25rem}
@media(max-width:900px){.g2,.g3{grid-template-columns:1fr}.sidebar{display:none}}

/* Table */
.tbl-wrap{overflow-x:auto;border-radius:var(--r2);border:1px solid var(--border2)}
table{width:100%;border-collapse:collapse;font-size:.83rem}
thead{background:rgba(201,168,76,.08)}
th{padding:.65rem .9rem;font-size:.68rem;font-weight:700;color:var(--gold);letter-spacing:1px;text-transform:uppercase;text-align:left;border-bottom:1px solid var(--border2);white-space:nowrap}
td{padding:.6rem .9rem;color:rgba(232,230,225,.85);border-bottom:1px solid rgba(201,168,76,.05);white-space:nowrap}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(201,168,76,.03)}

/* Badges */
.badge{display:inline-block;padding:.18rem .55rem;border-radius:99px;font-size:.7rem;font-weight:700;letter-spacing:.3px}
.b-aplus{background:rgba(30,132,73,.25);color:#27AE60;border:1px solid rgba(30,132,73,.3)}
.b-a{background:rgba(30,132,73,.18);color:#52BE80}
.b-b{background:rgba(26,82,118,.25);color:#5DADE2;border:1px solid rgba(26,82,118,.3)}
.b-c{background:rgba(243,156,18,.15);color:#F39C12;border:1px solid rgba(243,156,18,.25)}
.b-d{background:rgba(127,140,141,.15);color:#95A5A6}
.b-f{background:rgba(192,57,43,.2);color:#E74C3C;border:1px solid rgba(192,57,43,.3)}
.b-pass{background:rgba(30,132,73,.2);color:#27AE60}
.b-fail{background:rgba(192,57,43,.18);color:#E74C3C}

/* Progress */
.prog-wrap{margin-bottom:.7rem}
.prog-lbl{display:flex;justify-content:space-between;margin-bottom:.28rem;font-size:.78rem}
.prog-lbl span:first-child{color:rgba(232,230,225,.7)}
.prog-lbl span:last-child{color:var(--gold);font-weight:600}
.prog-track{height:5px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden}
.prog-fill{height:100%;border-radius:99px;transition:width 1.2s cubic-bezier(.22,1,.36,1)}

/* Form area */
.form-section{background:rgba(255,255,255,.03);border:1px solid var(--border2);border-radius:var(--r);padding:1.5rem;margin-bottom:1.25rem}
.form-section h3{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:600;color:var(--cream);margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--border2)}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem;margin-bottom:.9rem}
.f-field label{display:block;font-size:.68rem;font-weight:600;color:var(--gold);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:.35rem}
.f-field input,.f-field select,.f-field textarea{
  width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(201,168,76,.18);
  border-radius:var(--r3);padding:.65rem .85rem;color:var(--text);font-size:.85rem;outline:none;
  transition:border-color .2s,background .2s;
}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:var(--gold);background:rgba(255,255,255,.07)}
.f-field input::placeholder,.f-field textarea::placeholder{color:var(--muted2)}
.f-field select option{background:#1a1f27}
.f-field textarea{resize:vertical;min-height:70px}
.btn-add{padding:.6rem 1.25rem;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#0D1117;border:none;border-radius:var(--r3);font-size:.82rem;font-weight:700;transition:opacity .15s}
.btn-add:hover{opacity:.9}
.btn-outline{padding:.5rem 1rem;background:rgba(201,168,76,.08);border:1px solid var(--border);color:var(--gold);border-radius:var(--r3);font-size:.78rem;font-weight:600;transition:background .15s}
.btn-outline:hover{background:rgba(201,168,76,.18)}
.btn-del{padding:.3rem .6rem;background:rgba(192,57,43,.1);border:1px solid rgba(192,57,43,.25);color:#E74C3C;border-radius:4px;font-size:.72rem;transition:background .15s}
.btn-del:hover{background:rgba(192,57,43,.2)}
.btn-edit{padding:.3rem .6rem;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.25);color:var(--gold);border-radius:4px;font-size:.72rem;margin-right:.3rem}

/* Alert */
.alert{padding:.75rem 1rem;border-radius:var(--r3);font-size:.82rem;margin-bottom:1rem}
.alert-warn{background:rgba(243,156,18,.1);border:1px solid rgba(243,156,18,.25);color:#F39C12}
.alert-info{background:rgba(41,128,185,.1);border:1px solid rgba(41,128,185,.25);color:#5DADE2}
.alert-success{background:rgba(30,132,73,.1);border:1px solid rgba(30,132,73,.25);color:#27AE60}

/* Chart canvas */
.chart-box{position:relative;height:220px}

/* Tags */
.tag{display:inline-block;padding:.15rem .55rem;border-radius:99px;font-size:.7rem;font-weight:600}
.t-gold{background:rgba(201,168,76,.15);color:var(--gold);border:1px solid rgba(201,168,76,.25)}
.t-red{background:rgba(192,57,43,.15);color:#E74C3C;border:1px solid rgba(192,57,43,.25)}
.t-green{background:rgba(30,132,73,.15);color:#27AE60;border:1px solid rgba(30,132,73,.25)}

/* FCAR specific */
.clo-row{background:rgba(255,255,255,.02);border:1px solid var(--border2);border-radius:var(--r3);padding:1rem;margin-bottom:.75rem}
.clo-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.clo-num{font-size:.75rem;font-weight:700;color:var(--gold)}
.info-dl dt{font-size:.75rem;color:var(--muted);padding:.5rem 0;border-bottom:1px solid rgba(201,168,76,.06);font-weight:500}
.info-dl dd{font-size:.82rem;color:var(--text);font-weight:500;padding:.5rem 0;border-bottom:1px solid rgba(201,168,76,.06)}
.info-row{display:flex;gap:.5rem}
.info-row dt{min-width:140px}

/* Notification */
#notif{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;max-width:300px;display:none;
  padding:.8rem 1.2rem;border-radius:var(--r2);font-size:.85rem;font-weight:500;
  backdrop-filter:blur(20px);box-shadow:var(--shadow);transition:opacity .3s}

/* Print Styles */
@media print{
  body>*{display:none!important}
  #printArea{display:block!important;background:#fff;color:#000;font-family:'Outfit',sans-serif;padding:2cm}
  .pr-header{text-align:center;border-bottom:3px solid #C9A84C;padding-bottom:1rem;margin-bottom:1.5rem}
  .pr-logo-row{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:.5rem}
  .pr-logo-box{width:60px;height:60px;border-radius:12px;background:linear-gradient(135deg,#8B6914,#C9A84C);display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:1.5rem;font-weight:900;color:#fff}
  .pr-school{text-align:left}
  .pr-school h1{font-size:1.3rem;font-family:Georgia,serif;color:#0D1117}
  .pr-school p{font-size:.7rem;color:#C9A84C;letter-spacing:2px;text-transform:uppercase}
  .pr-title{font-size:1rem;font-weight:700;color:#8B6914;margin-top:.75rem;letter-spacing:1px;text-transform:uppercase}
  .pr-section{margin:1.2rem 0}
  .pr-section h3{font-size:.85rem;font-weight:700;color:#8B6914;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid #C9A84C;padding-bottom:.3rem;margin-bottom:.75rem}
  .pr-table{width:100%;border-collapse:collapse;font-size:.75rem;margin-bottom:1rem}
  .pr-table th{background:#f5f0e8;padding:.4rem .6rem;text-align:left;font-size:.65rem;color:#8B6914;text-transform:uppercase;letter-spacing:.5px;border:1px solid #e0d5b5}
  .pr-table td{padding:.4rem .6rem;border:1px solid #e8e2d0;color:#333}
  .pr-table tr:nth-child(even) td{background:#faf7f0}
  .pr-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1rem}
  .pr-info-item{background:#faf7f0;border:1px solid #e8e2d0;padding:.5rem .75rem;border-radius:4px}
  .pr-info-item dt{font-size:.62rem;color:#8B6914;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.2rem}
  .pr-info-item dd{font-size:.8rem;font-weight:600;color:#333}
  .pr-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1rem}
  .pr-stat-box{border:2px solid #C9A84C;border-radius:6px;padding:.5rem;text-align:center}
  .pr-stat-box p:first-child{font-size:.62rem;text-transform:uppercase;letter-spacing:.5px;color:#8B6914;margin-bottom:.2rem}
  .pr-stat-box strong{font-size:1.4rem;color:#0D1117;font-family:Georgia,serif}
  .pr-clo-box{background:#faf7f0;border:1px solid #e8e2d0;border-radius:6px;padding:.75rem;margin-bottom:.5rem}
  .pr-clo-box h4{font-size:.75rem;font-weight:700;color:#8B6914;margin-bottom:.3rem}
  .pr-clo-box p{font-size:.78rem;color:#333;line-height:1.5}
  .pr-footer{text-align:center;border-top:2px solid #C9A84C;padding-top:.75rem;margin-top:2rem;font-size:.68rem;color:#888}
  .pr-grade-bar{display:flex;margin-bottom:.3rem;align-items:center;gap:.5rem;font-size:.72rem}
  .pr-grade-bar span:first-child{min-width:60px;color:#555}
  .pr-bar-track{flex:1;height:12px;background:#eee;border-radius:3px;overflow:hidden}
  .pr-bar-fill{height:100%;background:#C9A84C;border-radius:3px}
  .pr-bar-cnt{min-width:25px;text-align:right;font-weight:700}
}