/* ═══ HACKER DARK THEME ═══ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --bg:#0a0a12;--card:rgba(16,16,28,.85);--text:#e2e8f0;--text-l:rgba(148,163,184,.7);
  --border:rgba(37,99,235,.12);--blue:#3b82f6;--blue-h:#2563eb;--blue-l:rgba(37,99,235,.12);--blue-xl:rgba(37,99,235,.06);
  --purple:#8b5cf6;--green:#10b981;--orange:#f59e0b;--red:#ef4444;--cyan:#06b6d4;
  --gray-50:rgba(255,255,255,.03);--gray-100:rgba(255,255,255,.05);--gray-200:rgba(255,255,255,.08);
  --gray-300:rgba(255,255,255,.12);--gray-500:rgba(148,163,184,.5);--gray-700:#cbd5e1;--gray-900:#f1f5f9;
  --shadow:0 2px 8px rgba(0,0,0,.3);--shadow-lg:0 8px 32px rgba(0,0,0,.4);
  --font:'Space Grotesk','Inter',system-ui,sans-serif;
  --glow-blue:0 0 20px rgba(37,99,235,.15);--glow-purple:0 0 20px rgba(139,92,246,.15);
}

body{background:var(--bg);color:var(--text);font-family:var(--font)}

/* Matrix Rain Canvas */
#matrixCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.06}

/* Login */
.login-screen{background:#050510}
.login-screen::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(37,99,235,.08),transparent 60%),radial-gradient(ellipse at 70% 30%,rgba(139,92,246,.06),transparent 50%)}
.login-box{background:rgba(16,16,28,.95);border:1px solid rgba(37,99,235,.15);backdrop-filter:blur(20px);box-shadow:0 0 60px rgba(37,99,235,.08),0 20px 60px rgba(0,0,0,.5)}
.login-box .login-sub{color:var(--text-l)}
.login-box label{color:var(--text-l)}
.login-box input,.login-box select{background:rgba(255,255,255,.04);border-color:rgba(37,99,235,.15);color:var(--text)}
.login-box input:focus,.login-box select:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(37,99,235,.15),var(--glow-blue)}
.login-box .btn-login{background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 4px 15px rgba(37,99,235,.3)}
.login-box .btn-login:hover{box-shadow:0 4px 25px rgba(37,99,235,.5);transform:translateY(-1px)}
.login-box .back-link{color:var(--text-l)}
.login-box .back-link:hover{color:var(--blue)}
.auth-tabs{border-color:rgba(37,99,235,.15)}
.auth-tab{background:rgba(255,255,255,.03);color:var(--text-l)}
.auth-tab.active{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff}

/* Sidebar */
.sidebar{background:rgba(10,10,18,.98);border-right:1px solid rgba(37,99,235,.1);backdrop-filter:blur(20px)}
.sidebar-logo{border-bottom-color:rgba(37,99,235,.1)}
.sidebar-logo span{color:var(--text)}
.sidebar-nav .nav-section{color:rgba(37,99,235,.5);font-family:'JetBrains Mono',monospace;letter-spacing:.12em}
.sidebar-nav a{color:rgba(226,232,240,.6)}
.sidebar-nav a:hover{background:rgba(37,99,235,.08);color:var(--blue)}
.sidebar-nav a.active{background:rgba(37,99,235,.12);color:var(--blue);box-shadow:inset 3px 0 0 var(--blue)}
.sidebar-user{border-top-color:rgba(37,99,235,.1)}
.sidebar-user .user-info .name{color:var(--text)}
.sidebar-user .user-info .role{color:var(--text-l)}

/* Topbar */
.topbar{background:rgba(10,10,18,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(37,99,235,.1)}
.topbar h1{color:var(--text);font-family:'Space Grotesk',sans-serif}
.topbar-actions button{border-color:rgba(37,99,235,.15);background:rgba(255,255,255,.03);color:var(--text-l)}
.topbar-actions button:hover{background:rgba(37,99,235,.1);color:var(--blue);border-color:var(--blue);box-shadow:var(--glow-blue)}

/* Content */
.content{background:var(--bg)}

/* Cards */
.dash-stat{background:var(--card);border:1px solid var(--border);backdrop-filter:blur(10px)}
.dash-stat:hover{box-shadow:var(--glow-blue);border-color:rgba(37,99,235,.25)}
.dash-stat .stat-val{color:#fff}
.dash-stat .stat-label{color:var(--text-l)}
.dash-card{background:var(--card);border:1px solid var(--border);backdrop-filter:blur(10px)}
.dash-card h3{color:var(--text)}

/* Colored stat borders glow */
.dash-stat.s-blue{border-left:3px solid var(--blue);box-shadow:inset 3px 0 12px rgba(37,99,235,.08)}
.dash-stat.s-green{border-left:3px solid var(--green);box-shadow:inset 3px 0 12px rgba(16,185,129,.08)}
.dash-stat.s-orange{border-left:3px solid var(--orange);box-shadow:inset 3px 0 12px rgba(245,158,11,.08)}
.dash-stat.s-purple{border-left:3px solid var(--purple);box-shadow:inset 3px 0 12px rgba(139,92,246,.08)}
.dash-stat.s-red{border-left:3px solid var(--red);box-shadow:inset 3px 0 12px rgba(239,68,68,.08)}
.dash-stat.s-cyan{border-left:3px solid var(--cyan);box-shadow:inset 3px 0 12px rgba(6,182,212,.08)}

/* Stat icons dark */
.s-blue .stat-icon{background:rgba(37,99,235,.15);color:#60a5fa}
.s-green .stat-icon{background:rgba(16,185,129,.15);color:#34d399}
.s-orange .stat-icon{background:rgba(245,158,11,.15);color:#fbbf24}
.s-purple .stat-icon{background:rgba(139,92,246,.15);color:#a78bfa}
.s-red .stat-icon{background:rgba(239,68,68,.15);color:#f87171}
.s-cyan .stat-icon{background:rgba(6,182,212,.15);color:#22d3ee}

/* Quick Items */
.quick-item{border-bottom-color:rgba(37,99,235,.08)}
.quick-item:hover{background:rgba(37,99,235,.06)}
.quick-item .q-text h4{color:var(--text)}
.quick-item .q-text p{color:var(--text-l)}
.quick-item .q-time{color:var(--text-l)}
.qi-blue{background:rgba(37,99,235,.15)!important}
.qi-green{background:rgba(16,185,129,.15)!important}
.qi-yellow{background:rgba(245,158,11,.15)!important}
.qi-red{background:rgba(239,68,68,.15)!important}
.qi-purple{background:rgba(139,92,246,.15)!important}
.qi-orange{background:rgba(251,146,60,.15)!important}

/* Welcome Banners */
.welcome-banner{border:1px solid rgba(37,99,235,.2);box-shadow:0 0 40px rgba(37,99,235,.1)}
.welcome-banner{background:linear-gradient(135deg,rgba(37,99,235,.2),rgba(139,92,246,.2));backdrop-filter:blur(20px)}
.welcome-banner.wb-teacher{background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(6,182,212,.15))}
.welcome-banner.wb-admin{background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(139,92,246,.2))}
.welcome-banner.wb-mgmt{background:linear-gradient(135deg,rgba(15,23,42,.8),rgba(30,58,95,.6))}

/* Service Grid */
.service-card{background:var(--card);border:1px solid var(--border);backdrop-filter:blur(10px)}
.service-card:hover{box-shadow:var(--glow-blue);border-color:rgba(37,99,235,.3);transform:translateY(-3px)}
.service-card span{color:var(--text-l)}

/* Streak */
.streak-bar{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2)}
.btn-claim{background:linear-gradient(135deg,var(--orange),var(--red));box-shadow:0 0 20px rgba(245,158,11,.2)}
.streak-done{color:var(--green)}

/* Notes */
.notes-toolbar input{background:rgba(255,255,255,.04);border-color:var(--border);color:var(--text)}
.notes-toolbar input:focus{border-color:var(--blue);box-shadow:var(--glow-blue)}
.btn-add{background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 2px 12px rgba(37,99,235,.2)}
.btn-add:hover{box-shadow:0 4px 20px rgba(37,99,235,.4)}
.note-card{background:var(--card);border:1px solid var(--border);backdrop-filter:blur(10px)}
.note-card:hover{box-shadow:var(--glow-blue);border-color:rgba(37,99,235,.25)}
.note-card .note-date{color:var(--text-l)}
.note-card h4{color:var(--text)}
.note-card .note-tags span{background:rgba(37,99,235,.12);color:#60a5fa}
.teacher-tag{background:rgba(16,185,129,.12);color:#34d399}

/* Doc Editor */
.doc-editor{border-color:var(--border)}
.doc-toolbar{background:rgba(255,255,255,.03);border-bottom-color:var(--border)}
.doc-toolbar button{border-color:var(--border);background:rgba(255,255,255,.03);color:var(--text-l)}
.doc-toolbar button:hover{background:rgba(37,99,235,.1);color:var(--blue)}
.doc-body{color:var(--text)}
.doc-body:empty::before{color:var(--text-l)}

/* Calendar */
.calendar-header button{border-color:var(--border);background:var(--card);color:var(--text)}
.calendar-header button:hover{background:rgba(37,99,235,.1);color:var(--blue)}
.calendar-header h3{color:var(--text)}
.calendar-grid{background:rgba(37,99,235,.08)}
.calendar-grid .day-name{background:rgba(255,255,255,.04);color:var(--text-l)}
.calendar-grid .day-cell{background:var(--card)}
.calendar-grid .day-cell:hover{background:rgba(37,99,235,.08)}
.calendar-grid .day-cell.today{background:rgba(37,99,235,.15)}
.calendar-grid .day-cell .day-num{color:var(--text)}
.calendar-grid .day-cell .day-note-preview{background:rgba(245,158,11,.12);color:#fbbf24}

/* Resources */
.resources-filter button{border-color:var(--border);background:var(--card);color:var(--text-l)}
.resources-filter button.active,.resources-filter button:hover{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;border-color:transparent}
.resource-card{background:var(--card);border:1px solid var(--border);backdrop-filter:blur(10px)}
.resource-card:hover{box-shadow:var(--glow-blue);border-color:rgba(37,99,235,.25)}
.resource-card h4{color:var(--text)}
.resource-card .r-meta{color:var(--text-l)}
.resource-card p{color:var(--text-l)}

/* Community */
.post-composer{background:var(--card);border-color:var(--border)}
.post-composer textarea{background:transparent;color:var(--text)}
.post-composer-footer{border-top-color:var(--border)}
.post-char-count{color:var(--text-l)}
.post-composer button{background:linear-gradient(135deg,var(--blue),var(--purple))}
.post-card{background:var(--card);border-color:var(--border)}
.post-card .post-name{color:var(--text)}
.post-card .post-body{color:rgba(226,232,240,.8)}
.post-card .post-actions button{color:var(--text-l)}
.post-card .post-actions button:hover{color:var(--blue)}

/* Grade Table */
.grade-table th{background:rgba(255,255,255,.03);color:var(--text-l);border-bottom-color:var(--border)}
.grade-table td{color:var(--text);border-bottom-color:rgba(37,99,235,.06)}
.grade-table tr:hover{background:rgba(37,99,235,.06)}
.gb-a{background:rgba(16,185,129,.15);color:#34d399}
.gb-b{background:rgba(37,99,235,.15);color:#60a5fa}
.grade-input{background:rgba(255,255,255,.05);border-color:var(--border);color:var(--text)}

/* Attendance Bars */
.att-sub{color:var(--text)}
.att-bar{background:rgba(255,255,255,.05)}
.att-fill{background:linear-gradient(90deg,rgba(37,99,235,.8),rgba(139,92,246,.8))}

/* Class Cards */
.class-card{background:var(--card);border:1px solid var(--border);backdrop-filter:blur(10px)}
.class-card:hover{box-shadow:var(--glow-blue);border-color:rgba(37,99,235,.25)}
.cc-header h4{color:var(--text)}
.cc-sem{color:var(--text-l)}
.cc-stat{color:var(--text-l)}
.cc-actions{border-top-color:rgba(37,99,235,.08)}
.btn-sm{border-color:var(--border);background:rgba(255,255,255,.03);color:var(--text-l)}
.btn-sm:hover{background:rgba(37,99,235,.1);color:var(--blue);border-color:rgba(37,99,235,.3)}

/* Teacher Attendance */
.att-select,.att-date{background:rgba(255,255,255,.04);border-color:var(--border);color:var(--text)}
.sa-row{border-bottom-color:rgba(37,99,235,.08)}
.sa-info span{color:var(--text)}
.sa-btn{border-color:var(--border);background:rgba(255,255,255,.03);color:var(--text-l)}
.sa-btn:hover{background:rgba(255,255,255,.06)}

/* Schedule Table */
.schedule-table th,.schedule-table td{border-color:rgba(37,99,235,.08);color:var(--text)}
.schedule-table th{background:rgba(255,255,255,.03)}
.sf-blue{background:rgba(37,99,235,.15);color:#60a5fa}
.sf-green{background:rgba(16,185,129,.15);color:#34d399}
.sf-purple{background:rgba(139,92,246,.15);color:#a78bfa}
.sf-orange{background:rgba(245,158,11,.15);color:#fbbf24}

/* Student Cards */
.student-card{background:var(--card);border:1px solid var(--border)}
.student-card:hover{box-shadow:var(--glow-blue)}
.student-card h4{color:var(--text)}
.student-card p{color:var(--text-l)}
.sc-stats span{color:var(--text-l)}

/* Admin */
.admin-quick-stat{border-bottom-color:rgba(37,99,235,.08);color:var(--text-l)}
.admin-quick-stat span:first-child{color:var(--text)}
.role-badge{border:1px solid}
.rb-student{background:rgba(37,99,235,.12);color:#60a5fa;border-color:rgba(37,99,235,.2)}
.rb-teacher{background:rgba(16,185,129,.12);color:#34d399;border-color:rgba(16,185,129,.2)}
.export-btn{border-color:var(--border);background:var(--card);color:var(--text-l)}
.export-btn:hover{background:rgba(37,99,235,.1);color:var(--blue);border-color:rgba(37,99,235,.3)}

/* Perf Bars dark */
.perf-bar span{color:var(--text)}
.perf-bar .bar{background:rgba(255,255,255,.05)}
.perf-bar .bar-fill{background:linear-gradient(90deg,var(--blue),var(--purple))}
.bf-green{background:linear-gradient(90deg,#059669,#10b981)!important}
.bf-purple{background:linear-gradient(90deg,#7c3aed,#8b5cf6)!important}
.bf-orange{background:linear-gradient(90deg,#f59e0b,#fbbf24)!important}
.bf-cyan{background:linear-gradient(90deg,#06b6d4,#22d3ee)!important}

/* Clubs */
.club-card{background:var(--card);border:1px solid var(--border)}
.club-card:hover{box-shadow:var(--glow-blue)}
.club-card h4{color:var(--text)}
.club-card p{color:var(--text-l)}
.club-meta span{color:var(--text-l)}
.btn-join{border-color:rgba(37,99,235,.3);color:var(--blue)}
.btn-join:hover,.btn-join.joined{background:linear-gradient(135deg,var(--blue),var(--purple));border-color:transparent}

/* Mentor */
.mentor-info h4{color:var(--text)}
.mentor-info p{color:var(--text-l)}

/* Internships */
.intern-card{background:var(--card);border:1px solid var(--border)}
.intern-card:hover{box-shadow:var(--glow-blue)}
.intern-card h4{color:var(--text)}
.intern-co{color:var(--blue)!important}
.ib-new{background:rgba(16,185,129,.15);color:#34d399}
.ib-hot{background:rgba(239,68,68,.15);color:#f87171}

/* Feedback */
.feedback-item{border-color:var(--border)}
.fi-pos{background:rgba(16,185,129,.06);border-color:rgba(16,185,129,.15)}
.fi-neg{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.15)}
.fb-pos{background:rgba(16,185,129,.15);color:#34d399}
.fb-neg{background:rgba(239,68,68,.15);color:#f87171}
.feedback-item p{color:var(--text-l)}

/* Badges */
.badge-warn{background:rgba(245,158,11,.12);color:#fbbf24;border:1px solid rgba(245,158,11,.2)}
.status-live{background:rgba(16,185,129,.2);color:#34d399;border:1px solid rgba(16,185,129,.3)}
.status-done{color:#34d399}

/* Modals */
.modal-overlay{background:rgba(0,0,0,.7);backdrop-filter:blur(8px)}
.modal{background:rgba(16,16,28,.98);border:1px solid rgba(37,99,235,.15);box-shadow:0 0 60px rgba(37,99,235,.1),0 20px 60px rgba(0,0,0,.5)}
.modal h3{color:var(--text)}
.modal h3 button{color:var(--text-l)}
.modal label{color:var(--text-l)}
.modal input,.modal textarea,.modal select{background:rgba(255,255,255,.04);border-color:rgba(37,99,235,.15);color:var(--text)}
.modal input:focus,.modal textarea:focus{border-color:var(--blue);box-shadow:var(--glow-blue)}
.btn-submit{background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 4px 15px rgba(37,99,235,.3)}

/* Bottom Nav */
.bottom-nav{background:rgba(10,10,18,.98);border-top:1px solid rgba(37,99,235,.1);backdrop-filter:blur(16px)}
.bottom-nav a{color:var(--text-l)}
.bottom-nav a.active{color:var(--blue)}

/* File Upload */
.file-upload-btn{border-color:rgba(37,99,235,.2);background:rgba(37,99,235,.06);color:var(--blue)}
.file-upload-btn:hover{border-color:var(--blue);box-shadow:var(--glow-blue)}
.doc-attachments{background:rgba(255,255,255,.02);border-color:var(--border)}
.att-item{background:rgba(255,255,255,.03);border-color:var(--border);color:var(--text)}
.note-photo-section{background:rgba(255,255,255,.02);border-color:var(--border)}

/* Badges Grid */
.badge-item{background:rgba(255,255,255,.03);border:1px solid var(--border)}
.badge-item span{color:var(--text)}
.badge-item small{color:var(--text-l)}

/* Day Editor */
.day-editor h2{color:var(--text)}
.btn-back{border-color:var(--border);background:var(--card);color:var(--text)}
.btn-back:hover{background:rgba(37,99,235,.1);color:var(--blue)}

/* Form */
.form-group label{color:var(--text-l)!important}
.form-group input,.form-group select,.form-group textarea{background:rgba(255,255,255,.04)!important;border-color:rgba(37,99,235,.15)!important;color:var(--text)!important}

/* Scrollbar Dark */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(37,99,235,.2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(37,99,235,.4)}

/* Glow animations */
@keyframes scanline{0%{top:-100%}100%{top:100%}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 5px rgba(37,99,235,.1)}50%{box-shadow:0 0 20px rgba(37,99,235,.2)}}
.dash-stat{animation:glowPulse 4s ease infinite}
.welcome-banner::before{content:'';position:absolute;top:0;left:-100%;width:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(37,99,235,.5),transparent);animation:scanline 3s linear infinite}

/* Toast Notifications */
.toast{position:fixed;bottom:24px;right:24px;padding:14px 20px;border-radius:12px;font-size:.85rem;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px;z-index:10000;transform:translateY(20px);opacity:0;transition:all .3s ease;backdrop-filter:blur(16px);font-family:var(--font)}
.toast.show{transform:translateY(0);opacity:1}
.toast-success{background:rgba(16,185,129,.2);border:1px solid rgba(16,185,129,.4);box-shadow:0 0 20px rgba(16,185,129,.15)}
.toast-error{background:rgba(239,68,68,.2);border:1px solid rgba(239,68,68,.4);box-shadow:0 0 20px rgba(239,68,68,.15)}
.toast-info{background:rgba(37,99,235,.2);border:1px solid rgba(37,99,235,.4);box-shadow:0 0 20px rgba(37,99,235,.15)}

/* Notification Panel */
.notif-panel{position:absolute;top:calc(100% + 8px);right:0;width:360px;background:rgba(16,16,28,.98);border:1px solid rgba(37,99,235,.15);border-radius:14px;box-shadow:0 0 40px rgba(0,0,0,.5),0 0 20px rgba(37,99,235,.08);z-index:1000;overflow:hidden;animation:fadeUp .2s ease}
.notif-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(37,99,235,.1)}
.notif-header h4{font-size:.88rem;color:var(--text)}
.notif-header button{background:none;border:none;color:var(--blue);font-size:.75rem;font-weight:600;cursor:pointer;font-family:var(--font)}
.notif-list{max-height:320px;overflow-y:auto}
.notif-item{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(37,99,235,.06);cursor:pointer;transition:background .2s}
.notif-item:hover{background:rgba(37,99,235,.06)}
.notif-item strong{font-size:.82rem;color:var(--text);display:block;margin-bottom:2px}
.notif-item p{font-size:.75rem;color:var(--text-l);margin:0}
.notif-item small{font-size:.68rem;color:rgba(37,99,235,.5);margin-top:3px;display:block}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px var(--blue);flex-shrink:0;margin-top:5px}
.notif-unread{background:rgba(37,99,235,.04)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Logo glow */
.sidebar-logo .logo-dot{box-shadow:0 0 12px rgba(37,99,235,.3)}
.sidebar-logo span{background:linear-gradient(135deg,var(--blue),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.login-box .logo-sm span{background:linear-gradient(135deg,var(--blue),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* Theme toggle */
#btnTheme{border-color:rgba(37,99,235,.15)!important;background:rgba(255,255,255,.03)!important;color:var(--blue)!important}
#btnTheme:hover{box-shadow:0 0 12px rgba(37,99,235,.2)!important}

/* Sidebar overlay dark */
.sidebar-overlay{background:rgba(0,0,0,.7)}

/* Topbar user dark */
.topbar-user .tu-name{color:var(--text)!important}
.topbar-user .tu-role{color:var(--text-l)!important}