@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ═══ DESIGN TOKENS ═══ */
:root{
  --blue:#2563eb;--blue-h:#1d4ed8;--blue-l:#bfdbfe;--blue-xl:#eff6ff;--blue-50:#dbeafe;
  --purple:#7c3aed;--purple-l:#ede9fe;--purple-50:#f5f3ff;
  --green:#059669;--green-l:#d1fae5;--green-50:#ecfdf5;
  --orange:#d97706;--orange-l:#fef3c7;--orange-50:#fffbeb;
  --red:#dc2626;--red-l:#fee2e2;--red-50:#fef2f2;
  --cyan:#0891b2;--cyan-l:#cffafe;
  --slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;
  --slate-300:#cbd5e1;--slate-400:#94a3b8;--slate-500:#64748b;
  --slate-600:#475569;--slate-700:#334155;--slate-800:#1e293b;--slate-900:#0f172a;
  --bg:#f1f5f9;--card:#ffffff;--text:#0f172a;--text-l:#64748b;--text-xs:#94a3b8;
  --border:#e8edf2;
  --radius-xs:6px;--radius-sm:8px;--radius:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:28px;
  --sidebar-w:272px;
  --shadow-xs:0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow:0 4px 8px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.03);
  --shadow-md:0 8px 20px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.04);
  --shadow-lg:0 16px 36px rgba(0,0,0,.1),0 6px 12px rgba(0,0,0,.05);
  --shadow-blue:0 8px 24px rgba(37,99,235,.22);
  --font:'Inter',system-ui,sans-serif;
  --font-display:'Plus Jakarta Sans','Inter',sans-serif;
  /* Gray aliases (used by app-new.css) */
  --gray-50:var(--slate-50);--gray-100:var(--slate-100);--gray-200:var(--slate-200);
  --gray-300:var(--slate-300);--gray-500:var(--slate-500);--gray-700:var(--slate-700);
  --gray-900:var(--slate-900);
  /* Legacy compat */
  --blue-h:#1d4ed8;
}

html{font-size:15px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}

/* ═══ LOGIN ═══ */
.login-screen{
  position:fixed;inset:0;z-index:9999;display:flex;
  background:#050c1f;
}
/* Left branding panel */
.login-left{
  width:44%;background:linear-gradient(145deg,#0f1f4a 0%,#1a3a8a 45%,#2e1065 100%);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:60px 56px;position:relative;overflow:hidden;
}
.login-left::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.login-left::after{
  content:'';position:absolute;bottom:-120px;right:-80px;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.25),transparent 70%);
}
.ll-orb{position:absolute;border-radius:50%;pointer-events:none}
.ll-orb1{width:300px;height:300px;top:-80px;left:-60px;background:radial-gradient(circle,rgba(37,99,235,.18),transparent 70%)}
.ll-orb2{width:200px;height:200px;bottom:20%;right:0;background:radial-gradient(circle,rgba(124,58,237,.15),transparent 70%)}
.ll-content{position:relative;z-index:1;max-width:400px}
.ll-logo{display:flex;align-items:center;gap:12px;margin-bottom:40px}
.ll-logo-icon{
  width:46px;height:46px;border-radius:13px;
  background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:.78rem;letter-spacing:.05em;
}
.ll-logo span{color:#fff;font-size:1.4rem;font-weight:800;font-family:var(--font-display)}
.ll-content h1{
  font-family:var(--font-display);font-size:2.2rem;font-weight:800;line-height:1.2;
  color:#fff;margin-bottom:14px;
}
.ll-content h1 span{background:linear-gradient(135deg,#93c5fd,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.ll-content>p{font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:32px;max-width:340px}
.ll-feats{display:flex;flex-direction:column;gap:12px;margin-bottom:36px}
.ll-feat{display:flex;align-items:center;gap:12px}
.ll-feat-icon{
  width:34px;height:34px;border-radius:9px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;color:rgba(255,255,255,.7);flex-shrink:0;
}
.ll-feat span{font-size:.82rem;color:rgba(255,255,255,.7);font-weight:500}
.ll-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:100px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.6);font-size:.72rem;font-weight:600;
}
.ll-badge i{color:#34d399;font-size:.75rem}

/* Right form panel */
.login-right{
  flex:1;background:#fff;display:flex;align-items:center;justify-content:center;
  padding:40px 32px;overflow-y:auto;
}
.login-box{width:100%;max-width:400px}
.login-box .logo-sm{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:4px}
.logo-sm .logo-icon{
  width:38px;height:38px;background:linear-gradient(135deg,var(--blue),var(--purple));
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:.7rem;
}
.logo-sm span{font-size:1.3rem;font-weight:800;font-family:var(--font-display);background:linear-gradient(135deg,var(--blue),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.login-tagline{text-align:center;font-size:.75rem;color:var(--text-xs);margin-bottom:22px}
.login-sub{color:var(--text-l);font-size:.82rem;text-align:center;margin-bottom:18px;font-weight:500}
.auth-tabs{display:flex;margin-bottom:20px;background:var(--slate-100);border-radius:10px;padding:3px;gap:3px}
.auth-tab{flex:1;padding:9px;border:none;background:none;font-weight:600;font-size:.8rem;cursor:pointer;border-radius:8px;transition:all .2s;font-family:var(--font);color:var(--text-l)}
.auth-tab.active{background:#fff;color:var(--blue);box-shadow:var(--shadow-sm)}
.auth-form{display:none}.auth-form.active{display:block}
.form-group{margin-bottom:13px}
.form-group label{display:block;font-size:.72rem;font-weight:700;margin-bottom:5px;color:var(--slate-600);text-transform:uppercase;letter-spacing:.04em}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:.85rem;font-family:var(--font);outline:none;background:#fff;
  color:var(--text);transition:all .2s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn-login{
  width:100%;padding:12px;border:none;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--blue),#4f46e5);color:#fff;
  font-size:.9rem;font-weight:700;cursor:pointer;transition:all .22s;margin-top:4px;
  font-family:var(--font);display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 4px 14px rgba(37,99,235,.35);
}
.btn-login:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(37,99,235,.45)}
.btn-login:active{transform:translateY(0)}
.back-link{display:block;text-align:center;margin-top:16px;color:var(--text-xs);font-size:.78rem;text-decoration:none;transition:color .2s}
.back-link:hover{color:var(--blue)}

/* ═══ APP SHELL ═══ */
.app{display:none}.app.active{display:flex;min-height:100vh}
canvas#matrixCanvas{display:none}

/* ═══ SIDEBAR ═══ */
.sidebar{
  width:var(--sidebar-w);background:var(--card);border-right:1px solid var(--border);
  position:fixed;top:0;bottom:0;left:0;z-index:100;
  display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:1px 0 0 var(--border);
}
.sidebar-logo{
  padding:18px 20px;display:flex;align-items:center;gap:11px;
  font-weight:800;font-size:1.05rem;border-bottom:1px solid var(--border);
  text-decoration:none;color:var(--text);
}
.sidebar-logo .logo-dot{
  width:36px;height:36px;background:linear-gradient(135deg,var(--blue),var(--purple));
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.68rem;font-weight:800;flex-shrink:0;
  box-shadow:0 4px 10px rgba(37,99,235,.3);
}
.sidebar-logo .logo-name{background:linear-gradient(135deg,var(--blue),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-family:var(--font-display)}
.sidebar-nav{flex:1;overflow-y:auto;padding:10px 10px;scrollbar-width:none}
.sidebar-nav::-webkit-scrollbar{display:none}
.nav-section{
  font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  color:var(--slate-400);padding:14px 12px 5px;
}
.sidebar-nav a{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);
  text-decoration:none;color:var(--slate-600);font-size:.83rem;font-weight:500;
  transition:all .18s;margin-bottom:1px;position:relative;
}
.sidebar-nav a:hover{background:var(--blue-xl);color:var(--blue)}
.sidebar-nav a:hover i{color:var(--blue);transform:scale(1.05)}
.sidebar-nav a.active{
  background:linear-gradient(90deg,rgba(37,99,235,.1),rgba(37,99,235,.04));
  color:var(--blue);font-weight:600;
}
.sidebar-nav a.active::before{
  content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;
  background:linear-gradient(180deg,var(--blue),var(--purple));
  border-radius:0 3px 3px 0;
}
.sidebar-nav a.active i{color:var(--blue)}
.sidebar-nav a i{
  width:18px;text-align:center;font-size:.85rem;flex-shrink:0;
  color:var(--slate-400);transition:transform .2s,color .18s;
}
.sidebar-user{
  padding:12px 14px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:10px;background:var(--slate-50);
}
.sidebar-user .avatar{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:.7rem;flex-shrink:0;
}
.sidebar-user .user-info .name{font-size:.8rem;font-weight:700;color:var(--text)}
.sidebar-user .user-info .role{font-size:.67rem;color:var(--text-xs)}

/* ═══ MAIN AREA ═══ */
.main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-height:100vh}
.topbar{
  height:60px;background:#fff;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;
  position:sticky;top:0;z-index:50;box-shadow:0 1px 0 var(--border);gap:12px;
}
.topbar-left{display:flex;align-items:center;gap:10px;flex-shrink:0}
.topbar h1{font-size:.95rem;font-weight:700;color:var(--text);font-family:var(--font-display)}
.topbar-search{
  flex:1;max-width:340px;position:relative;
}
.topbar-search i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-xs);font-size:.8rem;pointer-events:none}
.topbar-search input{
  width:100%;padding:7px 11px 7px 32px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:.82rem;font-family:var(--font);outline:none;background:var(--slate-50);
  color:var(--text);transition:all .2s;
}
.topbar-search input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.topbar-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.topbar-user{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--slate-50);cursor:default;margin-right:4px}
.tu-avatar{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,var(--blue),var(--purple));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.65rem;flex-shrink:0}
.tu-name{font-size:.79rem;font-weight:700;color:var(--text)}
.tu-role{font-size:.63rem;color:var(--text-xs)}
.topbar-actions{display:flex;align-items:center;gap:4px}
.topbar-actions button{
  width:34px;height:34px;border-radius:var(--radius-sm);border:1.5px solid var(--border);
  background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--slate-500);transition:all .18s;font-size:.82rem;position:relative;
}
.topbar-actions button:hover{background:var(--blue-xl);color:var(--blue);border-color:var(--blue-50)}
.menu-toggle{display:none}
.notif-badge{
  position:absolute;top:-4px;right:-4px;width:16px;height:16px;
  background:var(--red);color:#fff;border-radius:50%;font-size:.52rem;
  font-weight:800;display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;
}
.content{flex:1;padding:20px;background:var(--bg)}

/* ═══ PAGE TRANSITIONS ═══ */
.page-view{display:none}
.page-view.active{display:block;animation:pgIn .28s ease both}
@keyframes pgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* Stagger children on page entry */
.page-view.active>*{animation:pgIn .3s ease both}
.page-view.active>*:nth-child(1){animation-delay:.04s}
.page-view.active>*:nth-child(2){animation-delay:.09s}
.page-view.active>*:nth-child(3){animation-delay:.13s}
.page-view.active>*:nth-child(4){animation-delay:.17s}
.page-view.active>*:nth-child(5){animation-delay:.21s}

/* ═══ WELCOME CARD ═══ */
.welcome-card{
  background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 55%,#4338ca 100%);
  border-radius:var(--radius-lg);padding:22px 26px;margin-bottom:18px;
  display:flex;align-items:center;justify-content:space-between;
  color:#fff;position:relative;overflow:hidden;
  box-shadow:0 8px 28px rgba(37,99,235,.3);
}
.welcome-card::before{
  content:'';position:absolute;top:-40%;right:-5%;
  width:320px;height:320px;border-radius:50%;
  background:rgba(255,255,255,.05);pointer-events:none;
  animation:wcOrb 12s ease-in-out infinite;
}
.welcome-card::after{
  content:'';position:absolute;bottom:-60%;right:15%;
  width:240px;height:240px;border-radius:50%;
  background:rgba(255,255,255,.03);pointer-events:none;
  animation:wcOrb 18s ease-in-out infinite reverse;
}
@keyframes wcOrb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(10px,-12px) scale(1.05)}}
.wc-left{display:flex;align-items:center;gap:14px;z-index:1}
.wc-avatar{
  width:52px;height:52px;border-radius:14px;
  background:rgba(255,255,255,.15);backdrop-filter:blur(10px);
  border:2px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.95rem;flex-shrink:0;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.wc-left h2{font-size:1.1rem;font-weight:800;margin-bottom:3px;font-family:var(--font-display)}
.wc-left p{font-size:.75rem;opacity:.75}
.wc-right{z-index:1;text-align:right}
.wc-badge{font-size:.67rem;opacity:.7;margin-bottom:2px;display:flex;align-items:center;justify-content:flex-end;gap:4px}
.wc-val{font-size:1.7rem;font-weight:900;line-height:1;font-family:var(--font-display)}
.wc-lbl{font-size:.65rem;opacity:.65}
.welcome-card.wc-teacher{background:linear-gradient(135deg,#064e3b,#059669 55%,#0d9488);box-shadow:0 8px 28px rgba(5,150,105,.3)}
.welcome-card.wc-admin{background:linear-gradient(135deg,#2d1b69,#4f46e5 55%,#7c3aed);box-shadow:0 8px 28px rgba(79,70,229,.3)}
.welcome-card.wc-mgmt{background:linear-gradient(135deg,#0c1445,#1e3a8a 55%,#1d4ed8);box-shadow:0 8px 28px rgba(30,58,138,.3)}

/* ═══ KPI CARDS ═══ */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.kpi{
  background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;display:flex;align-items:center;gap:13px;
  transition:all .22s;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.kpi::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:var(--radius) var(--radius) 0 0;opacity:0;transition:opacity .22s}
.kpi:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.kpi:hover::after{opacity:1}
.kpi-icon{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:1.05rem;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.08);transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.kpi:hover .kpi-icon{transform:scale(1.08) rotate(-2deg)}
.kpi-val{font-size:1.55rem;font-weight:800;line-height:1;color:var(--text);font-family:var(--font-display)}
.kpi-lbl{font-size:.68rem;color:var(--text-l);margin-top:3px;font-weight:500}
.kpi-trend{display:inline-flex;align-items:center;gap:2px;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:100px;margin-top:5px}
.kpi-trend.up{background:var(--green-50);color:var(--green)}
.kpi-trend.down{background:var(--red-50);color:var(--red)}
.kpi-trend.neutral{background:var(--slate-100);color:var(--slate-500)}
/* Color variants */
.kpi-blue .kpi-icon{background:linear-gradient(135deg,var(--blue-xl),var(--blue-50));color:var(--blue)}
.kpi-blue::after,.kpi-blue{border-top-color:var(--blue)}
.kpi-blue:hover{box-shadow:var(--shadow-md),0 0 0 1px rgba(37,99,235,.08)}
.kpi-green .kpi-icon{background:linear-gradient(135deg,var(--green-50),var(--green-l));color:var(--green)}
.kpi-green{border-top-color:var(--green)}
.kpi-orange .kpi-icon{background:linear-gradient(135deg,var(--orange-50),var(--orange-l));color:var(--orange)}
.kpi-orange{border-top-color:var(--orange)}
.kpi-purple .kpi-icon{background:linear-gradient(135deg,var(--purple-50),var(--purple-l));color:var(--purple)}
.kpi-purple{border-top-color:var(--purple)}
.kpi-red .kpi-icon{background:linear-gradient(135deg,var(--red-50),var(--red-l));color:var(--red)}
.kpi-red{border-top-color:var(--red)}
.kpi-cyan .kpi-icon{background:linear-gradient(135deg,#ecfeff,var(--cyan-l));color:var(--cyan)}
.kpi-cyan{border-top-color:var(--cyan)}

/* ═══ QUICK NAV ═══ */
.qnav{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.qnav-title{font-size:.65rem;font-weight:800;color:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;margin-bottom:11px}
.qnav-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.qnav-item{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:11px 6px;border-radius:10px;cursor:pointer;
  transition:all .2s;border:1.5px solid transparent;text-align:center;
  position:relative;
}
.qnav-item:hover{background:var(--blue-xl);border-color:rgba(37,99,235,.15)}
.qnav-item:hover i{transform:scale(1.15) translateY(-1px);color:var(--blue)}
.qnav-item:hover span{color:var(--blue)}
.qnav-item:active{transform:scale(.96)}
.qnav-item .qnav-icon{
  width:38px;height:38px;border-radius:10px;
  background:var(--slate-100);
  display:flex;align-items:center;justify-content:center;
  transition:all .22s;
}
.qnav-item:hover .qnav-icon{background:rgba(37,99,235,.12)}
.qnav-item i{font-size:.95rem;color:var(--slate-500);transition:all .22s cubic-bezier(.34,1.56,.64,1)}
.qnav-item span{font-size:.61rem;font-weight:700;color:var(--slate-600);transition:color .2s}

/* ═══ DASH GRID ═══ */
.dash-cols{display:grid;grid-template-columns:3fr 2fr;gap:14px;margin-top:14px}
.dash-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;margin-top:14px}
.dash-card{
  background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow-sm);transition:box-shadow .22s;
}
.dash-card:hover{box-shadow:var(--shadow-md)}
.dash-card>h3{
  font-size:.85rem;font-weight:700;margin-bottom:14px;
  display:flex;align-items:center;gap:8px;color:var(--text);
  padding-bottom:12px;border-bottom:1px solid var(--border);
}
.dash-card>h3 .h3-icon{
  width:30px;height:30px;border-radius:8px;
  background:var(--blue-xl);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:.78rem;
}
.dash-card>h3 i{color:var(--blue);font-size:.82rem}
.dash-card>h3 .card-badge{
  margin-left:auto;font-size:.6rem;font-weight:700;
  padding:2px 8px;border-radius:100px;background:var(--slate-100);color:var(--text-l);
}

/* Quick items */
.quick-item{
  display:flex;align-items:center;gap:10px;padding:9px 8px;
  border-radius:var(--radius-sm);transition:background .18s;
}
.quick-item:hover{background:var(--slate-50)}
.quick-item+.quick-item{border-top:1px solid var(--border)}
.q-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.82rem;flex-shrink:0}
.q-text{flex:1;min-width:0}
.q-text h4{font-size:.8rem;font-weight:600;color:var(--text)}
.q-text p{font-size:.68rem;color:var(--text-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-time{font-size:.65rem;color:var(--text-xs);font-weight:600;flex-shrink:0;white-space:nowrap}
.qi-blue{background:var(--blue-50)}.qi-green{background:var(--green-l)}.qi-yellow{background:var(--orange-l)}
.qi-red{background:var(--red-l)}.qi-purple{background:var(--purple-l)}.qi-orange{background:#ffedd5}

/* ═══ EMPTY STATES ═══ */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center}
.empty-state .es-icon{
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,var(--blue-xl),var(--blue-50));
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;margin-bottom:12px;color:var(--blue);
  box-shadow:0 4px 12px rgba(37,99,235,.12);
}
.empty-state h4{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:5px}
.empty-state p{font-size:.78rem;color:var(--text-l);max-width:220px;line-height:1.5;margin-bottom:16px}
.empty-state.small{padding:22px 14px}
.empty-state.small .es-icon{width:42px;height:42px;font-size:1rem;margin-bottom:9px}
.empty-state.small h4{font-size:.82rem}
.empty-state.small p{font-size:.73rem;margin-bottom:0}

/* ═══ PAGE HEADER ═══ */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.page-header h2{font-size:1.05rem;font-weight:800;font-family:var(--font-display)}
.page-header p{font-size:.76rem;color:var(--text-l);margin-top:2px}

/* ═══ NOTES ═══ */
.toolbar,.notes-toolbar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.toolbar input,.notes-toolbar input{
  flex:1;min-width:180px;padding:9px 13px;border:1.5px solid var(--border);
  border-radius:var(--radius-sm);font-size:.82rem;outline:none;font-family:var(--font);
  background:#fff;color:var(--text);transition:all .2s;
}
.toolbar input:focus,.notes-toolbar input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.btn-add{
  padding:9px 18px;border:none;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--blue),#4f46e5);color:#fff;
  font-weight:700;cursor:pointer;font-size:.82rem;
  display:inline-flex;align-items:center;gap:6px;
  transition:all .22s;font-family:var(--font);
  box-shadow:0 3px 10px rgba(37,99,235,.3);
}
.btn-add:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(37,99,235,.4)}
.btn-add:active{transform:translateY(0)}
.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.note-card{
  background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);
  padding:16px;transition:all .22s;cursor:pointer;position:relative;
  box-shadow:var(--shadow-sm);
}
.note-card:hover{box-shadow:var(--shadow-md);border-color:var(--blue-l);transform:translateY(-2px)}
.note-card .note-date{font-size:.62rem;color:var(--text-xs);margin-bottom:6px;font-weight:500}
.note-card h4{font-size:.85rem;font-weight:700;margin-bottom:6px;color:var(--text)}
.note-body-preview{font-size:.78rem;color:var(--text-l);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.note-card .note-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:10px}
.note-card .note-tags span{padding:3px 8px;border-radius:6px;font-size:.6rem;font-weight:700;background:var(--blue-xl);color:var(--blue)}
.note-del{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:6px;border:none;background:transparent;color:var(--red);cursor:pointer;display:none;font-size:.78rem;align-items:center;justify-content:center}
.note-card:hover .note-del{display:flex}
.teacher-tag{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:6px;font-size:.6rem;font-weight:700;background:var(--green-l);color:var(--green);margin-bottom:6px}

/* ═══ STREAK ═══ */
.streak-bar{
  background:linear-gradient(135deg,var(--orange-50),var(--orange-l));
  border:1.5px solid #fcd34d;border-radius:var(--radius);
  padding:13px 18px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 2px 8px rgba(217,119,6,.12);
}
.btn-claim{
  padding:8px 18px;border:none;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--orange),var(--red));
  color:#fff;font-weight:700;cursor:pointer;font-size:.78rem;
  display:flex;align-items:center;gap:5px;
  box-shadow:0 3px 10px rgba(217,119,6,.3);transition:all .2s;
}
.btn-claim:hover{transform:scale(1.02);box-shadow:0 5px 14px rgba(217,119,6,.4)}
.streak-done{font-weight:600;color:var(--green);display:flex;align-items:center;gap:5px;font-size:.82rem}

/* ═══ CALENDAR ═══ */
.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.calendar-header h3{font-size:1rem;font-weight:700;font-family:var(--font-display)}
.calendar-header button{
  padding:7px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  background:var(--card);cursor:pointer;font-weight:600;font-size:.8rem;
  transition:all .18s;display:inline-flex;align-items:center;gap:5px;
}
.calendar-header button:hover{background:var(--blue-xl);color:var(--blue);border-color:var(--blue-50)}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.calendar-grid .day-name{background:var(--slate-50);padding:9px;text-align:center;font-size:.62rem;font-weight:800;color:var(--text-xs);text-transform:uppercase;letter-spacing:.05em}
.calendar-grid .day-cell{background:var(--card);padding:7px;min-height:70px;cursor:pointer;transition:background .15s;position:relative}
.calendar-grid .day-cell:hover{background:var(--blue-xl)}
.calendar-grid .day-cell.today{background:var(--blue-xl)}
.calendar-grid .day-cell.today .day-num{color:var(--blue);font-weight:800}
.calendar-grid .day-cell .day-num{font-size:.7rem;font-weight:600;margin-bottom:3px}
.calendar-grid .day-cell.other{opacity:.28;pointer-events:none}
.day-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--blue);margin-left:3px;vertical-align:top}
.day-editor{max-width:680px}
.day-editor h2{font-size:1.15rem;font-weight:800;margin-bottom:14px;font-family:var(--font-display)}
.btn-back{
  padding:7px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  background:var(--card);cursor:pointer;font-size:.8rem;font-weight:600;
  margin-bottom:14px;display:inline-flex;align-items:center;gap:5px;transition:all .18s;
}
.btn-back:hover{background:var(--blue-xl);color:var(--blue)}
.doc-attachments{margin-top:12px;padding:13px;background:var(--slate-50);border-radius:var(--radius);border:1.5px solid var(--border)}
.doc-attachments h4{font-size:.8rem;font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:5px}
.att-item{display:flex;align-items:center;gap:6px;padding:7px 10px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:4px;font-size:.78rem}
.att-item button{margin-left:auto;border:none;background:none;color:var(--red);cursor:pointer}
.file-upload-btn{
  display:inline-flex;align-items:center;gap:5px;padding:8px 14px;
  border:2px dashed var(--border);border-radius:var(--radius-sm);
  cursor:pointer;font-size:.8rem;font-weight:600;color:var(--blue);
  background:var(--blue-xl);transition:all .18s;
}
.file-upload-btn:hover{border-color:var(--blue)}

/* ═══ DOC EDITOR ═══ */
.doc-editor{border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:12px}
.doc-toolbar{display:flex;gap:3px;padding:7px 10px;background:var(--slate-50);border-bottom:1.5px solid var(--border);flex-wrap:wrap}
.doc-toolbar button{
  width:30px;height:30px;border:1px solid var(--border);border-radius:6px;
  background:var(--card);cursor:pointer;font-size:.75rem;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s;color:var(--slate-700);font-weight:600;
}
.doc-toolbar button:hover{background:var(--blue-xl);color:var(--blue);border-color:var(--blue-50)}
.doc-body{min-height:160px;padding:14px;font-size:.85rem;line-height:1.7;outline:none;font-family:var(--font)}
.doc-body:empty::before{content:attr(placeholder);color:var(--text-xs)}

/* ═══ RESOURCES ═══ */
.resources-filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.resources-filter button{
  padding:6px 14px;border:1.5px solid var(--border);border-radius:100px;
  background:var(--card);font-size:.78rem;font-weight:600;
  cursor:pointer;transition:all .18s;color:var(--text-l);
}
.resources-filter button.active,.resources-filter button:hover{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 2px 8px rgba(37,99,235,.25)}
.resources-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.resource-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:17px;transition:all .22s;box-shadow:var(--shadow-sm)}
.resource-card:hover{box-shadow:var(--shadow-md);border-color:var(--blue-l);transform:translateY(-1px)}
.resource-card h4{font-size:.85rem;font-weight:700;margin-bottom:4px;color:var(--text)}
.resource-card .r-meta{font-size:.68rem;color:var(--text-xs);margin-bottom:7px}
.resource-card p{font-size:.78rem;color:var(--text-l);line-height:1.5}
.resource-card .r-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:10px}
.resource-card .r-tags span{padding:3px 8px;border-radius:6px;font-size:.6rem;font-weight:700;background:var(--blue-xl);color:var(--blue)}

/* ═══ COMMUNITY ═══ */
.post-composer{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:15px;margin-bottom:14px;display:flex;gap:11px;align-items:flex-start;box-shadow:var(--shadow-sm)}
.post-avatar-composer{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--purple));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.72rem;flex-shrink:0;margin-top:2px}
.post-input-wrap{flex:1}
.post-composer textarea{width:100%;border:none;resize:none;font-family:var(--font);font-size:.85rem;outline:none;min-height:56px;background:transparent;color:var(--text)}
.post-composer-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.post-char-count{font-size:.66rem;color:var(--text-xs)}
.post-composer button{padding:7px 16px;border:none;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--blue),#4f46e5);color:#fff;font-weight:700;cursor:pointer;font-size:.78rem;display:inline-flex;align-items:center;gap:5px;box-shadow:0 2px 8px rgba(37,99,235,.25)}
.post-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:17px;margin-bottom:10px;box-shadow:var(--shadow-sm);transition:box-shadow .22s}
.post-card:hover{box-shadow:var(--shadow-md)}
.post-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.post-avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--purple));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.7rem;flex-shrink:0}
.post-name{font-weight:700;font-size:.84rem;color:var(--text)}
.post-time{font-size:.66rem;color:var(--text-xs)}
.post-body{font-size:.85rem;line-height:1.6;color:var(--text);margin-bottom:12px}
.post-actions{display:flex;gap:14px}
.post-actions button{border:none;background:none;color:var(--text-l);font-size:.78rem;cursor:pointer;display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:7px;transition:all .18s;font-weight:500}
.post-actions button:hover{background:var(--blue-xl);color:var(--blue)}

/* ═══ MODALS ═══ */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);padding:16px}
.modal-overlay.active{display:flex;animation:moverlay .2s ease}
@keyframes moverlay{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--card);border-radius:var(--radius-xl);padding:26px;
  width:100%;max-width:480px;max-height:90vh;overflow-y:auto;
  box-shadow:0 24px 64px rgba(0,0,0,.15),0 0 0 1px var(--border);
  animation:modalIn .28s cubic-bezier(.34,1.3,.64,1);
}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(-16px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-wide{max-width:620px}
.modal h3{font-size:.98rem;font-weight:800;margin-bottom:17px;display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display)}
.modal h3 button{border:none;background:none;font-size:1.1rem;cursor:pointer;color:var(--text-l);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:7px}
.modal h3 button:hover{background:var(--slate-100);color:var(--text)}
.btn-submit{
  width:100%;padding:11px;border:none;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--blue),#4f46e5);color:#fff;
  font-weight:700;font-size:.88rem;cursor:pointer;margin-top:6px;
  transition:all .22s;font-family:var(--font);
  box-shadow:0 4px 14px rgba(37,99,235,.3);
}
.btn-submit:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(37,99,235,.4)}
.note-photo-section{margin-top:12px;padding:13px;background:var(--slate-50);border-radius:var(--radius);border:1.5px solid var(--border)}
.note-photo-section h4{font-size:.8rem;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:5px}
.photo-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-top:8px}
.photo-item{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--border)}
.photo-item img{width:100%;height:65px;object-fit:cover;display:block}
.photo-item button{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;border:none;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;font-size:.65rem}

/* ═══ GRADE TABLE ═══ */
.grade-table{width:100%;border-collapse:collapse;font-size:.82rem}
.grade-table th{text-align:left;padding:10px 14px;background:var(--slate-50);font-weight:700;font-size:.67rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-xs);border-bottom:2px solid var(--border)}
.grade-table td{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--text)}
.grade-table tr:hover td{background:var(--blue-xl)}
.grade-badge{padding:3px 10px;border-radius:100px;font-size:.66rem;font-weight:700}
.gb-a{background:var(--green-l);color:var(--green)}.gb-b{background:var(--blue-xl);color:var(--blue)}.gb-na{background:var(--slate-100);color:var(--slate-500)}
.grade-input{width:65px;padding:5px 8px;border:1.5px solid var(--border);border-radius:6px;font-size:.8rem;text-align:center;font-family:var(--font)}
.grade-input:focus{outline:none;border-color:var(--blue)}

/* ═══ ATTENDANCE ═══ */
.att-controls{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.att-select,.att-date{padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.82rem;font-family:var(--font);outline:none;background:var(--card);color:var(--text)}
.att-select:focus,.att-date:focus{border-color:var(--blue)}
.student-att-list{margin-top:4px}
.sa-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.sa-info{display:flex;align-items:center;gap:10px}
.sa-avatar{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--purple));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.68rem}
.sa-info span{font-size:.85rem;font-weight:600;color:var(--text)}
.sa-btns{display:flex;gap:4px}
.sa-btn{width:34px;height:34px;border:1.5px solid var(--border);border-radius:7px;background:var(--card);cursor:pointer;font-weight:700;font-size:.72rem;transition:all .18s;font-family:var(--font)}
.sa-btn.sa-p.active{background:var(--green-l);color:var(--green);border-color:var(--green)}
.sa-btn.sa-a.active{background:var(--red-l);color:var(--red);border-color:var(--red)}
.sa-btn.sa-l.active{background:var(--orange-l);color:var(--orange);border-color:var(--orange)}
.sa-btn:hover:not(.active){background:var(--slate-100)}

/* ═══ ATT BARS ═══ */
.att-row{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.att-sub{font-size:.8rem;font-weight:600;min-width:180px;color:var(--text)}
.att-bar{flex:1;height:20px;background:var(--slate-100);border-radius:100px;overflow:hidden}
.att-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:100px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:.6rem;font-weight:700;color:#fff;transition:width .9s cubic-bezier(.23,1,.32,1)}
.att-fill.af-warn{background:linear-gradient(90deg,var(--orange),var(--red))}

/* ═══ CLASS CARDS ═══ */
.class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.class-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .22s;box-shadow:var(--shadow-sm)}
.class-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.cc-header{padding:16px 18px 12px}
.cc-header h4{font-size:.92rem;font-weight:700;color:var(--text)}
.cc-sem{font-size:.68rem;color:var(--text-l);margin-top:2px;display:block}
.cc-body{padding:0 18px 12px}
.cc-stat{font-size:.78rem;color:var(--slate-600);padding:3px 0;display:flex;align-items:center;gap:7px}
.cc-stat i{width:14px;color:var(--text-xs);font-size:.78rem}
.cc-actions{padding:11px 18px;border-top:1.5px solid var(--border);display:flex;gap:8px}
.cc-blue .cc-header{border-top:3px solid var(--blue)}.cc-green .cc-header{border-top:3px solid var(--green)}
.cc-purple .cc-header{border-top:3px solid var(--purple)}.cc-orange .cc-header{border-top:3px solid var(--orange)}
.cc-red .cc-header{border-top:3px solid var(--red)}
.btn-sm{
  padding:6px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  background:var(--card);font-size:.72rem;font-weight:600;cursor:pointer;
  transition:all .18s;font-family:var(--font);color:var(--slate-600);
  display:inline-flex;align-items:center;gap:4px;
}
.btn-sm:hover{background:var(--blue-xl);color:var(--blue);border-color:var(--blue-50)}
.btn-danger{color:var(--red);border-color:var(--red-l)}
.btn-danger:hover{background:var(--red-l);color:var(--red);border-color:var(--red)}
.btn-success{color:var(--green);border-color:var(--green-l)}
.btn-success:hover{background:var(--green-l);color:var(--green);border-color:var(--green)}

/* ═══ SCHEDULE ═══ */
.schedule-table{width:100%;border-collapse:collapse;font-size:.78rem}
.schedule-table th,.schedule-table td{padding:11px;border:1px solid var(--border);text-align:center;min-width:80px}
.schedule-table th{background:var(--slate-50);font-weight:700;font-size:.68rem;text-transform:uppercase;color:var(--text-xs);letter-spacing:.05em}
.sched-fill{border-radius:6px;font-weight:600;font-size:.72rem;padding:4px}
.sf-blue{background:var(--blue-xl);color:var(--blue-h)}.sf-green{background:var(--green-l);color:var(--green)}
.sf-purple{background:var(--purple-l);color:var(--purple)}.sf-orange{background:var(--orange-l);color:#92400e}
.schedule-table small{display:block;font-weight:400;opacity:.75;font-size:.62rem;margin-top:2px}

/* ═══ STUDENT CARDS ═══ */
.student-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.student-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:18px;text-align:center;transition:all .22s;box-shadow:var(--shadow-sm)}
.student-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.sc-avatar{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--purple));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.85rem;margin:0 auto 10px}
.student-card h4{font-size:.88rem;font-weight:700;color:var(--text)}
.student-card p{font-size:.72rem;color:var(--text-l);margin-bottom:8px}
.sc-stats{display:flex;justify-content:center;gap:12px}
.sc-stats span{font-size:.67rem;font-weight:600;color:var(--slate-600);display:flex;align-items:center;gap:3px}

/* ═══ ADMIN STYLES ═══ */
.admin-quick-stat{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:.82rem}
.admin-quick-stat:last-child{border:none;padding-bottom:0}
.admin-quick-stat span:first-child{color:var(--text-l)}
.aqs-val{font-weight:700;color:var(--blue)}.aqs-green{color:var(--green)!important}
.role-badge{padding:3px 10px;border-radius:100px;font-size:.63rem;font-weight:700}
.rb-student{background:var(--blue-xl);color:var(--blue)}.rb-teacher{background:var(--green-l);color:var(--green)}.rb-admin{background:var(--purple-l);color:var(--purple)}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}
.sd-active{background:var(--green)}.sd-inactive{background:var(--red)}
.admin-sections{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.export-list{display:flex;flex-direction:column;gap:8px}
.export-btn{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--card);cursor:pointer;font-size:.82rem;font-weight:600;transition:all .18s;font-family:var(--font);color:var(--slate-600)}
.export-btn:hover{background:var(--blue-xl);color:var(--blue);border-color:var(--blue-50)}

/* ═══ PERF BARS ═══ */
.perf-bar{margin-bottom:13px}
.perf-bar span{font-size:.78rem;font-weight:600;display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;color:var(--text)}
.perf-bar .bar{height:20px;background:var(--slate-100);border-radius:100px;overflow:hidden}
.perf-bar .bar-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:100px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:.6rem;font-weight:700;color:#fff;transition:width .9s cubic-bezier(.23,1,.32,1)}
.bf-green{background:linear-gradient(90deg,var(--green),#10b981)!important}
.bf-purple{background:linear-gradient(90deg,var(--purple),#8b5cf6)!important}
.bf-orange{background:linear-gradient(90deg,var(--orange),#fbbf24)!important}
.bf-cyan{background:linear-gradient(90deg,var(--cyan),#22d3ee)!important}

/* ═══ CLUBS ═══ */
.clubs-grid-app{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.club-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:20px;transition:all .22s;box-shadow:var(--shadow-sm)}
.club-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.club-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:12px;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.ci-blue{background:linear-gradient(135deg,var(--blue),#3b82f6)}.ci-green{background:linear-gradient(135deg,var(--green),#10b981)}
.ci-purple{background:linear-gradient(135deg,var(--purple),#8b5cf6)}.ci-orange{background:linear-gradient(135deg,var(--orange),#f59e0b)}
.ci-red{background:linear-gradient(135deg,var(--red),#f87171)}.ci-cyan{background:linear-gradient(135deg,var(--cyan),#22d3ee)}
.club-card h4{font-size:.9rem;font-weight:700;margin-bottom:5px;color:var(--text)}
.club-card p{font-size:.78rem;color:var(--text-l);margin-bottom:12px;line-height:1.5}
.club-meta{display:flex;justify-content:space-between;align-items:center}
.club-meta span{font-size:.7rem;color:var(--text-l);font-weight:600}
.btn-join{padding:5px 14px;border:1.5px solid var(--blue);border-radius:100px;background:transparent;color:var(--blue);font-size:.72rem;font-weight:700;cursor:pointer;transition:all .2s;font-family:var(--font)}
.btn-join:hover,.btn-join.joined{background:var(--blue);color:#fff}

/* ═══ MENTOR CARD ═══ */
.mentor-card{display:flex;align-items:center;gap:14px;padding:14px;background:linear-gradient(135deg,var(--blue-xl),var(--purple-50));border-radius:var(--radius);border:1.5px solid var(--blue-50)}
.mentor-avatar{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--blue),var(--purple));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1rem;flex-shrink:0;box-shadow:0 4px 12px rgba(37,99,235,.25)}
.mentor-info h4{font-size:.9rem;font-weight:700;color:var(--text)}
.mentor-info p{font-size:.78rem;color:var(--text-l)}
.mentor-email{color:var(--blue)!important;display:flex;align-items:center;gap:4px;margin-top:2px}
.mentor-card .btn-add{margin-left:auto}

/* ═══ INTERNSHIP CARDS ═══ */
.intern-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:18px;position:relative;transition:all .22s;box-shadow:var(--shadow-sm)}
.intern-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.intern-badge{position:absolute;top:12px;right:12px;padding:3px 10px;border-radius:100px;font-size:.6rem;font-weight:700}
.ib-new{background:var(--green-l);color:var(--green)}.ib-hot{background:var(--red-l);color:var(--red)}
.intern-card h4{font-size:.88rem;font-weight:700;margin-bottom:2px;color:var(--text)}
.intern-co{font-size:.75rem;font-weight:700;color:var(--blue);margin-bottom:7px;display:flex;align-items:center;gap:5px}
.intern-card>p{font-size:.78rem;color:var(--text-l)}
.intern-meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.intern-meta span{font-size:.82rem;font-weight:700;color:var(--green)}

/* ═══ STATUS BADGES ═══ */
.status-live{background:var(--green-l);color:var(--green);padding:3px 9px;border-radius:100px;font-size:.62rem;font-weight:700;animation:pulse 2s infinite}
.status-done{color:var(--green);font-weight:700;font-size:.72rem}
.badge-warn{background:var(--orange-l);color:#92400e;padding:3px 9px;border-radius:100px;font-size:.65rem;font-weight:700}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.text-red{color:var(--red);font-weight:600}

/* ═══ FEEDBACK ═══ */
.feedback-item{padding:14px;border-radius:var(--radius-sm);margin-bottom:10px;border:1.5px solid var(--border)}
.fi-pos{background:#f0fdf4;border-color:#bbf7d0}.fi-neg{background:#fef2f2;border-color:#fecaca}
.fi-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.fi-badge{padding:2px 8px;border-radius:100px;font-size:.62rem;font-weight:700}
.fb-pos{background:var(--green-l);color:var(--green)}.fb-neg{background:var(--red-l);color:var(--red)}
.fi-date{font-size:.66rem;color:var(--text-xs)}
.feedback-item p{font-size:.82rem;font-style:italic;color:var(--slate-600)}

/* ═══ NOTIFICATION PANEL ═══ */
.notif-panel{
  position:absolute;top:calc(100% + 8px);right:0;width:350px;
  background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);z-index:1000;overflow:hidden;
  animation:panelIn .22s cubic-bezier(.34,1.3,.64,1);
}
@keyframes panelIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.notif-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1.5px solid var(--border)}
.notif-header h4{font-size:.88rem;font-weight:700;color:var(--text)}
.notif-header button{background:none;border:none;color:var(--blue);font-size:.78rem;font-weight:700;cursor:pointer;font-family:var(--font)}
.notif-list{max-height:300px;overflow-y:auto}
.notif-item{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.notif-item:hover{background:var(--blue-xl)}
.notif-item strong{font-size:.82rem;color:var(--text);display:block;margin-bottom:2px}
.notif-item p{font-size:.74rem;color:var(--text-l);margin:0}
.notif-item small{font-size:.66rem;color:var(--text-xs);margin-top:3px;display:block}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:5px}
.notif-unread{background:var(--blue-xl)}

/* ═══ TOAST ═══ */
.toast{
  position:fixed;bottom:24px;right:24px;padding:12px 18px;border-radius:var(--radius-sm);
  font-size:.84rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:9px;
  z-index:10000;transform:translateX(120%);opacity:0;transition:all .35s cubic-bezier(.34,1.3,.64,1);
  box-shadow:var(--shadow-lg);border:1.5px solid var(--border);background:#fff;max-width:320px;
}
.toast.show{transform:translateX(0);opacity:1}
.toast-success{background:var(--green-50);border-color:#86efac;color:#065f46}
.toast-error{background:var(--red-50);border-color:#fca5a5;color:#991b1b}
.toast-info{background:var(--blue-xl);border-color:var(--blue-50);color:var(--blue-h)}

/* ═══ SIDEBAR OVERLAY ═══ */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:99;backdrop-filter:blur(2px)}
.sidebar-overlay.active{display:block}

/* ═══ BOTTOM NAV ═══ */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:60px;background:#fff;border-top:1px solid var(--border);z-index:100;justify-content:space-around;align-items:center;box-shadow:0 -4px 16px rgba(0,0,0,.06)}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--text-l);font-size:.57rem;font-weight:600;padding:5px;transition:all .2s}
.bottom-nav a.active{color:var(--blue)}
.bottom-nav a.active i{transform:scale(1.1)}
.bottom-nav a i{font-size:1.05rem;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}

/* ═══ SKELETON ═══ */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,var(--slate-100) 25%,var(--slate-50) 50%,var(--slate-100) 75%);background-size:400% 100%;animation:shimmer 1.6s ease infinite;border-radius:var(--radius-sm)}

/* ═══ GRADE SAVE BTN ═══ */
.grade-save-btn{display:inline-flex;align-items:center;gap:4px}

/* ═══ TOPBAR USER ═══ */
@media(max-width:520px){.tu-name,.tu-role{display:none}.topbar-user{border:none;background:none;padding:0}}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1100px){:root{--sidebar-w:240px}}
@media(max-width:1024px){
  .login-left{width:40%}
  .ll-content h1{font-size:1.8rem}
}
@media(max-width:768px){
  .login-screen{flex-direction:column}
  .login-left{width:100%;padding:32px 28px;flex:0 0 auto}
  .ll-feats{display:none}
  .ll-badge{display:none}
  .ll-content h1{font-size:1.5rem}
  .ll-content>p{display:none}
  .login-right{flex:1;width:100%;padding:28px 20px}
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .menu-toggle{display:flex!important}
  .bottom-nav{display:flex}
  .content{padding:14px;padding-bottom:76px}
  .kpi-row{grid-template-columns:1fr 1fr}
  .dash-cols,.dash-grid,.admin-sections{grid-template-columns:1fr}
  .calendar-grid .day-cell{min-height:44px;padding:4px}
  .modal-wide{max-width:95vw}
  .notes-grid,.resources-grid,.clubs-grid-app,.student-grid{grid-template-columns:1fr}
  .qnav-grid{grid-template-columns:repeat(4,1fr)}
  .att-row{flex-direction:column;align-items:flex-start;gap:4px}
  .att-sub{min-width:auto}
  .att-bar{width:100%}
  .schedule-table{font-size:.65rem;display:block;overflow-x:auto}
  .mentor-card{flex-direction:column;text-align:center}
  .toast{bottom:calc(60px + 10px);right:12px;left:12px;max-width:none}
  .topbar-search{display:none}
}
@media(max-width:480px){
  .kpi-row{grid-template-columns:1fr 1fr}
  .qnav-grid{grid-template-columns:repeat(4,1fr)}
  .welcome-card{flex-direction:column;text-align:center;gap:10px}
  .wc-left{justify-content:center}
  .content{padding:12px;padding-bottom:72px}
}

/* ═══ COURSE CARD EXTENSIONS ═══ */
.cc-cyan .cc-header{border-top:3px solid var(--cyan)}
.cc-footer{padding:11px 18px;border-top:1.5px solid var(--border);display:flex;gap:8px}

/* ═══ NOTICE ROWS ═══ */
.notice-row{display:flex;align-items:flex-start;gap:11px;padding:12px;border-radius:var(--radius-sm);margin-bottom:8px;border:1.5px solid var(--border);background:var(--card)}
.notice-row:last-child{margin-bottom:0}
.nr-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0}
.nr-body{flex:1;min-width:0}
.nr-title{font-size:.83rem;font-weight:700;color:var(--text);margin-bottom:2px}
.nr-content{font-size:.75rem;color:var(--text-l);margin-bottom:4px;line-height:1.5}
.nr-meta{font-size:.66rem;color:var(--text-xs)}
.nr-normal{border-left:3px solid var(--blue)}.nr-normal .nr-icon{background:var(--blue-xl);color:var(--blue)}
.nr-important{border-left:3px solid var(--orange)}.nr-important .nr-icon{background:var(--orange-50);color:var(--orange)}
.nr-urgent{border-left:3px solid var(--red)}.nr-urgent .nr-icon{background:var(--red-50);color:var(--red)}

/* ═══ AI ASSISTANT WIDGET ═══ */
.ai-fab{
  position:fixed;bottom:28px;right:28px;z-index:4000;
  display:flex;align-items:center;gap:8px;
  padding:12px 18px;border-radius:100px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  color:#fff;border:none;cursor:pointer;
  font-size:.82rem;font-weight:700;font-family:var(--font);
  box-shadow:0 8px 24px rgba(37,99,235,.35);
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
  overflow:hidden;
}
.ai-fab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 12px 32px rgba(37,99,235,.45)}
.ai-fab i{font-size:1rem}
.ai-fab-label{white-space:nowrap}
.ai-fab-ping{
  position:absolute;top:8px;right:10px;width:8px;height:8px;border-radius:50%;
  background:#10b981;box-shadow:0 0 0 0 rgba(16,185,129,.4);
  animation:aiPing 2s ease-in-out infinite;
}
@keyframes aiPing{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.4)}50%{box-shadow:0 0 0 6px rgba(16,185,129,0)}}

.ai-panel{
  position:fixed;bottom:86px;right:28px;z-index:4000;
  width:340px;max-height:500px;
  background:var(--card);border-radius:var(--radius-xl);
  box-shadow:0 24px 64px rgba(0,0,0,.18),0 8px 24px rgba(37,99,235,.1);
  border:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
  transform:scale(.85) translateY(24px);opacity:0;pointer-events:none;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .3s ease;
}
.ai-panel.open{transform:scale(1) translateY(0);opacity:1;pointer-events:all}

.ai-panel-header{
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  color:#fff;flex-shrink:0;
}
.ai-panel-avatar{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  position:relative;flex-shrink:0;
}
.ai-online-dot{
  position:absolute;bottom:1px;right:1px;width:9px;height:9px;border-radius:50%;
  background:#10b981;border:2px solid white;
}
.ai-panel-info{flex:1;min-width:0}
.ai-panel-name{font-weight:700;font-size:.88rem}
.ai-panel-status{font-size:.7rem;opacity:.75}
.ai-panel-close{
  background:rgba(255,255,255,.15);border:none;color:#fff;
  width:28px;height:28px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;
  transition:background .2s;
}
.ai-panel-close:hover{background:rgba(255,255,255,.25)}

.ai-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:0;scroll-behavior:smooth}
.ai-messages::-webkit-scrollbar{width:4px}
.ai-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

.ai-msg{display:flex;max-width:88%}
.ai-bot{align-self:flex-start}
.ai-user{align-self:flex-end;flex-direction:row-reverse}
.ai-bubble{
  padding:9px 13px;border-radius:14px;font-size:.8rem;line-height:1.55;
  animation:aiBubble .3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes aiBubble{from{opacity:0;transform:translateY(8px) scale(.95)}to{opacity:1;transform:none}}
.ai-bot .ai-bubble{background:var(--slate-100);color:var(--text);border-bottom-left-radius:4px}
.ai-user .ai-bubble{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;border-bottom-right-radius:4px}

/* Chip suggestions */
.ai-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ai-chip{
  padding:5px 10px;border-radius:100px;font-size:.72rem;font-weight:600;
  border:1px solid var(--border);background:#fff;color:var(--text);cursor:pointer;
  transition:all .2s ease;
}
.ai-chip:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* Typing indicator */
.ai-typing .ai-bubble{display:flex;gap:4px;align-items:center;padding:11px 14px}
.ai-typing .ai-dot{
  width:6px;height:6px;border-radius:50%;background:var(--slate-400);
  animation:aiTypeDot 1.2s ease-in-out infinite;
}
.ai-typing .ai-dot:nth-child(2){animation-delay:.2s}
.ai-typing .ai-dot:nth-child(3){animation-delay:.4s}
@keyframes aiTypeDot{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}

.ai-input-row{
  display:flex;align-items:center;gap:8px;padding:12px 14px;
  border-top:1px solid var(--border);flex-shrink:0;background:var(--card);
}
.ai-input{
  flex:1;border:1px solid var(--border);border-radius:100px;
  padding:8px 14px;font-size:.8rem;font-family:var(--font);outline:none;
  transition:border-color .2s;background:var(--slate-50);
}
.ai-input:focus{border-color:var(--blue)}
.ai-send{
  width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));
  color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:.8rem;transition:transform .2s ease;flex-shrink:0;
}
.ai-send:hover{transform:scale(1.1)}

@media(max-width:480px){
  .ai-panel{width:calc(100vw - 28px);right:14px;bottom:80px}
  .ai-fab{right:14px;bottom:14px;padding:10px 14px;font-size:.78rem}
  .ai-fab-label{display:none}
}

/* ═══ DASHBOARD IMPROVEMENTS ═══ */
/* KPI card animated entry */
.kpi-card{transition:all .35s cubic-bezier(.25,.46,.45,.94)}
.kpi-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.kpi-card .kv{transition:color .3s ease}
.kpi-card:hover .kv{color:var(--blue)}

/* Welcome card mesh gradient */
.welcome-card{background:linear-gradient(135deg,var(--blue) 0%,#6366f1 55%,var(--purple) 100%);position:relative;overflow:hidden}
.welcome-card::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M0 0h20v20H0V0zm20 20h20v20H20V20z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none}

/* Sidebar nav hover */
.nav-item{transition:all .2s cubic-bezier(.25,.46,.45,.94)}
.nav-item:hover{transform:translateX(3px)}

/* Page content smooth entry */
.page.active{animation:pageSlide .3s cubic-bezier(.25,.46,.45,.94)}
@keyframes pageSlide{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* KPI card icon glow */
.kpi-icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.kpi-card:hover .kpi-icon{transform:scale(1.15) rotate(-5deg)}

/* ═══════════════════════════════════════════════════════════
   PROFILE PAGE
═══════════════════════════════════════════════════════════ */
.profile-hero{display:flex;align-items:center;gap:22px;background:linear-gradient(135deg,var(--blue) 0%,#6366f1 55%,var(--purple) 100%);border-radius:var(--radius-xl);padding:28px 32px;color:#fff;margin-bottom:22px;position:relative;overflow:hidden}
.profile-hero::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M0 0h20v20H0V0zm20 20h20v20H20V20z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none}
.ph-avatar-wrap{position:relative;flex-shrink:0}
.ph-avatar{width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.2);border:3px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800;color:#fff;overflow:hidden}
.ph-avatar-edit{position:absolute;bottom:0;right:0;width:28px;height:28px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem;color:var(--blue);box-shadow:0 2px 8px rgba(0,0,0,.2);transition:transform .2s;z-index:1}
.ph-avatar-edit:hover{transform:scale(1.1)}
.ph-info{flex:1;min-width:0;position:relative;z-index:1}
.ph-info h2{font-size:1.4rem;font-weight:800;margin-bottom:4px}
.ph-info p{opacity:.8;font-size:.85rem;margin-bottom:10px}
.ph-badges{display:flex;flex-wrap:wrap;gap:6px}
.ph-badge{padding:3px 10px;border-radius:100px;font-size:.68rem;font-weight:700;background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.2)}
.ph-stats{display:flex;gap:20px;flex-shrink:0;position:relative;z-index:1}
.ph-stat{text-align:center}
.ph-sv{font-size:1.6rem;font-weight:800;line-height:1}
.ph-sl{font-size:.65rem;opacity:.7;margin-top:2px}
.profile-body{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.profile-section-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.psc-head{padding:14px 18px;font-size:.82rem;font-weight:700;color:var(--text);background:var(--slate-50);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.psc-head i{color:var(--blue)}
.psc-body{padding:18px}
@media(max-width:768px){.profile-body{grid-template-columns:1fr}.profile-hero{flex-direction:column;text-align:center}.ph-stats{justify-content:center}.ph-badges{justify-content:center}}

/* ═══════════════════════════════════════════════════════════
   AI CHAT PAGE
═══════════════════════════════════════════════════════════ */
.aic-layout{display:grid;grid-template-columns:220px 1fr;gap:0;height:calc(100vh - 140px);min-height:500px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden}
.aic-sidebar{background:var(--slate-50);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:14px 10px;gap:4px;overflow-y:auto}
.aic-mode-title{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-xs);padding:6px 8px 4px}
.aic-mode{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:var(--radius-sm);border:none;background:none;cursor:pointer;font-size:.8rem;font-weight:600;color:var(--text-l);transition:all .2s;width:100%;text-align:left}
.aic-mode i{width:16px;text-align:center;font-size:.85rem}
.aic-mode:hover{background:var(--slate-200);color:var(--text)}
.aic-mode.active{background:var(--blue);color:#fff}
.aic-topics{display:flex;flex-direction:column;gap:3px}
.aic-topic{padding:6px 10px;border-radius:6px;border:none;background:none;cursor:pointer;font-size:.75rem;color:var(--text-l);text-align:left;transition:all .2s}
.aic-topic:hover{background:var(--blue-xl);color:var(--blue)}
.aic-new-chat{margin-top:auto;padding:9px;border-radius:var(--radius-sm);border:1px dashed var(--border);background:none;cursor:pointer;font-size:.78rem;font-weight:600;color:var(--blue);display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s}
.aic-new-chat:hover{background:var(--blue-xl);border-color:var(--blue)}
.aic-main{display:flex;flex-direction:column;overflow:hidden}
.aic-top-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.aic-current-mode{font-weight:700;font-size:.85rem;display:flex;align-items:center;gap:8px;color:var(--blue)}
.aic-top-actions{display:flex;gap:6px}
.aic-top-actions button{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text-l);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.78rem;transition:all .2s}
.aic-top-actions button:hover{background:var(--slate-100);color:var(--text)}
.aic-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth}
.aic-welcome{text-align:center;padding:40px 20px;display:flex;flex-direction:column;align-items:center;gap:12px}
.aic-w-icon{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:#fff;margin-bottom:4px}
.aic-welcome h3{font-size:1.2rem;font-weight:800;color:var(--text)}
.aic-welcome p{color:var(--text-l);font-size:.85rem;max-width:380px}
.aic-starter-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:6px}
.aic-starter{padding:7px 13px;border-radius:100px;border:1px solid var(--border);background:var(--card);font-size:.75rem;font-weight:600;color:var(--text);cursor:pointer;transition:all .2s}
.aic-starter:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.aic-msg{display:flex;flex-direction:column;max-width:82%;animation:aicMsgIn .3s cubic-bezier(.16,1,.3,1)}
@keyframes aicMsgIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.aic-user{align-self:flex-end;align-items:flex-end}
.aic-bot{align-self:flex-start}
.aic-bubble{padding:11px 15px;border-radius:16px;font-size:.83rem;line-height:1.65;word-break:break-word}
.aic-user .aic-bubble{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;border-bottom-right-radius:4px}
.aic-bot .aic-bubble{background:var(--slate-100);color:var(--text);border-bottom-left-radius:4px}
.aic-msg-actions{display:flex;gap:4px;margin-top:4px;opacity:0;transition:opacity .2s}
.aic-msg:hover .aic-msg-actions{opacity:1}
.aic-msg-actions button{padding:3px 8px;border-radius:6px;border:1px solid var(--border);background:var(--card);font-size:.68rem;cursor:pointer;color:var(--text-l);transition:all .2s}
.aic-msg-actions button:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.aic-code-block{background:var(--slate-900);border-radius:10px;overflow:hidden;margin:8px 0;position:relative}
.aic-code-lang{font-size:.65rem;font-weight:700;color:var(--text-xs);padding:6px 12px;background:rgba(255,255,255,.05);text-transform:uppercase;letter-spacing:.05em}
.aic-code-block pre{margin:0;padding:14px;overflow-x:auto}
.aic-code-block code{font-family:'JetBrains Mono','Courier New',monospace;font-size:.78rem;color:#e2e8f0;white-space:pre}
.aic-copy-code{position:absolute;top:6px;right:8px;padding:3px 8px;border-radius:5px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.1);color:#fff;font-size:.65rem;cursor:pointer}
.aic-copy-code:hover{background:rgba(255,255,255,.2)}
.aic-inline-code{font-family:'JetBrains Mono',monospace;background:rgba(37,99,235,.08);color:var(--blue);padding:1px 5px;border-radius:4px;font-size:.82em}
.aic-h2{font-size:1rem;font-weight:800;margin:8px 0 4px;color:var(--text)}
.aic-h3{font-size:.9rem;font-weight:700;margin:6px 0 3px;color:var(--text)}
.aic-h4{font-size:.82rem;font-weight:700;margin:4px 0 2px;color:var(--blue)}
.aic-typing .aic-bubble{display:flex;gap:5px;align-items:center;padding:13px 15px}
.aic-input-area{padding:14px 16px;border-top:1px solid var(--border);display:flex;gap:10px;align-items:flex-end;flex-shrink:0}
.aic-textarea-wrap{flex:1;border:1.5px solid var(--border);border-radius:14px;overflow:hidden;background:var(--slate-50);transition:border-color .2s;display:flex;flex-direction:column}
.aic-textarea-wrap:focus-within{border-color:var(--blue)}
#aicInput{width:100%;padding:10px 14px;border:none;background:none;font-size:.85rem;font-family:var(--font);resize:none;outline:none;color:var(--text);max-height:180px;line-height:1.5}
.aic-input-tools{display:flex;gap:4px;padding:4px 8px 6px;border-top:1px solid var(--border)}
.aic-tool-btn{padding:4px 8px;border-radius:6px;border:1px solid var(--border);background:var(--card);font-size:.72rem;cursor:pointer;color:var(--text-l);transition:all .2s}
.aic-tool-btn:hover{background:var(--blue-xl);color:var(--blue);border-color:var(--blue)}
.aic-send-btn{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:transform .2s,box-shadow .2s;flex-shrink:0}
.aic-send-btn:hover{transform:scale(1.08);box-shadow:0 4px 14px rgba(37,99,235,.35)}
.aic-footer-note{text-align:center;font-size:.65rem;color:var(--text-xs);padding:6px;flex-shrink:0;border-top:1px solid var(--border)}
@media(max-width:768px){.aic-layout{grid-template-columns:1fr;height:auto}.aic-sidebar{flex-direction:row;flex-wrap:wrap;padding:8px;border-right:none;border-bottom:1px solid var(--border)}.aic-mode{width:auto;padding:6px 10px}.aic-mode-title,.aic-new-chat{display:none}.aic-topics{display:none}}

/* ═══════════════════════════════════════════════════════════
   WRITING TOOLS PAGE
═══════════════════════════════════════════════════════════ */
.wt-tabs{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}
.wt-tab{padding:9px 18px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card);font-size:.8rem;font-weight:600;cursor:pointer;color:var(--text-l);transition:all .2s;display:flex;align-items:center;gap:6px}
.wt-tab:hover{background:var(--blue-xl);color:var(--blue);border-color:var(--blue)}
.wt-tab.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.wt-panel{display:none}
.wt-panel.active{display:block}

/* Grammar */
.grammar-layout{display:grid;grid-template-columns:1fr 320px;gap:16px;margin-bottom:14px}
.grammar-input-pane,.grammar-results-pane{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.grammar-toolbar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--slate-50)}
.grammar-toolbar button{padding:5px 10px;border-radius:6px;border:1px solid var(--border);background:var(--card);font-size:.72rem;font-weight:600;cursor:pointer;color:var(--text-l);transition:all .2s}
.grammar-toolbar button:hover{background:var(--blue-xl);color:var(--blue);border-color:var(--blue)}
.grammar-wc{font-size:.72rem;color:var(--text-xs);font-weight:600;margin-right:auto}
#grammarInput{width:100%;padding:14px;border:none;outline:none;font-size:.85rem;font-family:var(--font);resize:none;color:var(--text);background:transparent;line-height:1.7}
.grammar-actions{padding:10px 14px;border-top:1px solid var(--border)}
.grammar-score{padding:20px;text-align:center;border-bottom:1px solid var(--border)}
.gs-ring{width:80px;height:80px;border-radius:50%;border:6px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;background:var(--slate-50)}
.gs-num{font-size:1.6rem;font-weight:800;color:var(--text)}
.gs-label{font-size:.72rem;color:var(--text-xs);font-weight:600}
.grammar-issues{padding:10px;display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}
.gi-empty{text-align:center;padding:24px 12px;color:var(--text-l);font-size:.8rem;display:flex;flex-direction:column;align-items:center;gap:8px}
.gi-issue{padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);animation:aicMsgIn .3s ease}
.gi-error{border-left:3px solid var(--red);background:var(--red-50)}
.gi-warning{border-left:3px solid var(--orange);background:var(--orange-50)}
.gi-style{border-left:3px solid var(--blue);background:var(--blue-xl)}
.gi-issue-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.gi-type{font-size:.72rem;font-weight:700;color:var(--text)}
.gi-fix-btn{padding:2px 8px;border-radius:4px;border:none;background:var(--green);color:#fff;font-size:.65rem;font-weight:700;cursor:pointer;transition:opacity .2s}
.gi-fix-btn:hover{opacity:.85}
.gi-issue-text{font-size:.73rem;color:var(--text-l);font-style:italic;margin-bottom:3px}
.gi-issue-desc{font-size:.71rem;color:var(--text-xs)}
.grammar-highlighted{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px}
.grammar-hl-label{font-size:.72rem;font-weight:700;color:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.grammar-hl-text{font-size:.85rem;line-height:1.7;color:var(--text)}
mark.hl-error{background:rgba(220,38,38,.15);color:var(--red);border-bottom:2px solid var(--red);border-radius:2px;padding:0 1px}
mark.hl-warning{background:rgba(217,119,6,.12);color:var(--orange);border-bottom:2px solid var(--orange);border-radius:2px;padding:0 1px}
mark.hl-style{background:rgba(37,99,235,.08);color:var(--blue);border-bottom:2px dashed var(--blue);border-radius:2px;padding:0 1px}
@media(max-width:768px){.grammar-layout{grid-template-columns:1fr}}

/* Paraphrase */
.para-modes{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px}
.para-mode{padding:7px 14px;border-radius:100px;border:1px solid var(--border);background:var(--card);font-size:.78rem;font-weight:600;cursor:pointer;color:var(--text-l);transition:all .2s}
.para-mode:hover{background:var(--blue-xl);color:var(--blue);border-color:var(--blue)}
.para-mode.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.para-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.para-pane{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px}
.para-pane-label{font-size:.75rem;font-weight:700;color:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
.para-copy{padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:var(--card);font-size:.68rem;font-weight:600;cursor:pointer;color:var(--text-l);transition:all .2s}
.para-copy:hover{background:var(--blue-xl);color:var(--blue)}
#paraInput{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;font-size:.83rem;font-family:var(--font);resize:vertical;outline:none;transition:border-color .2s;background:var(--slate-50)}
#paraInput:focus{border-color:var(--blue)}
.para-output{min-height:200px;font-size:.85rem;line-height:1.7;color:var(--text);white-space:pre-wrap;background:var(--slate-50);border-radius:var(--radius-sm);padding:10px;border:1px solid var(--border)}
@media(max-width:768px){.para-layout{grid-template-columns:1fr}}

/* Docs */
.doc-toolbar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:10px 14px;background:var(--slate-50);border:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;margin-bottom:0}
.doc-toolbar button{padding:5px 9px;border-radius:6px;border:1px solid var(--border);background:var(--card);font-size:.78rem;cursor:pointer;color:var(--text-l);transition:all .2s}
.doc-toolbar button:hover{background:var(--blue-xl);color:var(--blue);border-color:var(--blue)}
.doc-toolbar select{padding:5px 8px;border-radius:6px;border:1px solid var(--border);background:var(--card);font-size:.78rem;cursor:pointer;color:var(--text-l);outline:none;font-family:var(--font)}
.doc-sep{width:1px;height:20px;background:var(--border);margin:0 4px;flex-shrink:0}
.doc-title-input{width:100%;font-size:1.4rem;font-weight:800;color:var(--text);border:none;outline:none;padding:14px 18px 4px;font-family:var(--font-display,'Plus Jakarta Sans',sans-serif);background:var(--card);border-left:1px solid var(--border);border-right:1px solid var(--border)}
.doc-title-input::placeholder{color:var(--text-xs)}
.doc-editor{min-height:400px;padding:16px 20px;font-size:.9rem;line-height:1.8;color:var(--text);outline:none;background:var(--card);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.doc-editor h1{font-size:1.6rem;font-weight:800;margin:16px 0 8px}
.doc-editor h2{font-size:1.2rem;font-weight:700;margin:14px 0 6px}
.doc-editor h3{font-size:1rem;font-weight:700;margin:10px 0 4px}
.doc-editor pre{background:var(--slate-900);color:#e2e8f0;padding:14px;border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:.8rem;overflow-x:auto;margin:8px 0}
.doc-editor ul,.doc-editor ol{padding-left:22px;margin:6px 0}
.doc-editor hr{border:none;border-top:2px solid var(--border);margin:16px 0}
.doc-checkbox{display:flex;align-items:center;gap:8px;padding:4px 0}
.doc-checkbox.checked span{text-decoration:line-through;color:var(--text-xs)}
.doc-footer{display:flex;justify-content:space-between;padding:8px 14px;font-size:.72rem;color:var(--text-xs);border-top:1px solid var(--border);background:var(--slate-50)}

/* Spreadsheet */
.sheet-toolbar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:10px 14px;background:var(--slate-50);border:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;margin-bottom:0}
.sheet-toolbar button{padding:5px 9px;border-radius:6px;border:1px solid var(--border);background:var(--card);font-size:.75rem;cursor:pointer;color:var(--text-l);display:flex;align-items:center;gap:4px;transition:all .2s}
.sheet-toolbar button:hover{background:var(--blue-xl);color:var(--blue);border-color:var(--blue)}
.sheet-cell-ref{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;color:var(--blue);background:var(--blue-xl);padding:4px 8px;border-radius:5px;min-width:36px;text-align:center}
.sheet-formula-bar{flex:1;min-width:0;padding:5px 10px;border:1px solid var(--border);border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:.78rem;outline:none;background:var(--card);transition:border-color .2s}
.sheet-formula-bar:focus{border-color:var(--blue)}
.sheet-wrap{overflow:auto;border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);background:var(--card)}
.sheet-table{border-collapse:collapse;font-size:.78rem;font-family:var(--font);width:100%;table-layout:fixed}
.sheet-corner{width:40px;background:var(--slate-50);border:1px solid var(--border)}
.sheet-col-hdr{background:var(--slate-50);border:1px solid var(--border);padding:5px 8px;font-weight:700;color:var(--text-xs);text-align:center;font-size:.72rem;width:100px;position:sticky;top:0;z-index:2}
.sheet-row-hdr{background:var(--slate-50);border:1px solid var(--border);padding:5px 8px;font-weight:700;color:var(--text-xs);text-align:center;font-size:.72rem;width:40px;position:sticky;left:0;z-index:1}
.sheet-cell{border:1px solid var(--border);padding:5px 8px;min-width:100px;max-width:200px;outline:none;font-family:var(--font);color:var(--text);white-space:nowrap;overflow:hidden;cursor:cell;transition:background .15s}
.sheet-cell:hover{background:var(--blue-xl)}
.sheet-cell.selected{background:rgba(37,99,235,.12)!important;box-shadow:inset 0 0 0 2px var(--blue)}
.sheet-cell:focus{background:var(--blue-xl);box-shadow:inset 0 0 0 2px var(--blue)}

/* ═══════════════════════════════════════════════════════════
   NOTES TOPBAR — search · view toggle · filter chips
═══════════════════════════════════════════════════════════ */
.notes-topbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:11px 14px}
.notes-search-wrap{display:flex;align-items:center;gap:8px;flex:1;min-width:150px;background:var(--slate-50);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 11px}
.notes-search-wrap i{color:var(--text-xs);font-size:.8rem;flex-shrink:0}
.notes-search-wrap input{border:none;background:none;outline:none;font-size:.82rem;font-family:var(--font);color:var(--text);flex:1;min-width:0}
.notes-view-toggle{display:flex;gap:3px}
.ntv{width:31px;height:31px;border-radius:8px;border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:.8rem;color:var(--text-l);display:flex;align-items:center;justify-content:center;transition:all .2s}
.ntv:hover{background:var(--blue-xl);color:var(--blue);border-color:var(--blue)}
.ntv.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.notes-filter-chips{display:flex;gap:5px;flex-wrap:wrap}
.nfc{padding:5px 11px;border-radius:100px;border:1px solid var(--border);background:var(--card);font-size:.72rem;font-weight:600;cursor:pointer;color:var(--text-l);transition:all .2s;display:flex;align-items:center;gap:4px;white-space:nowrap}
.nfc:hover{background:var(--blue-xl);color:var(--blue);border-color:var(--blue)}
.nfc.active{background:var(--blue);color:#fff;border-color:var(--blue)}

/* Note type visual enhancements */
.note-card.nc-text{border-left:3px solid var(--blue)}
.note-card.nc-checklist{border-left:3px solid var(--green)}
.note-card.nc-code{border-left:3px solid var(--purple)}
.note-card.nc-image{border-left:3px solid var(--orange)}
.note-type-badge{display:inline-flex;align-items:center;gap:4px;font-size:.63rem;font-weight:700;padding:2px 7px;border-radius:100px;margin-bottom:5px}
.ntb-text{background:var(--blue-xl);color:var(--blue)}
.ntb-checklist{background:var(--green-l);color:var(--green)}
.ntb-code{background:var(--purple-l);color:var(--purple)}
.ntb-image{background:var(--orange-l);color:var(--orange)}
.note-pin-icon{position:absolute;top:10px;right:36px;color:var(--orange);font-size:.8rem}
.note-color-bar{position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--radius) var(--radius) 0 0}
.notes-grid.list-view{grid-template-columns:1fr!important}
.notes-grid.list-view .note-card{display:flex;align-items:flex-start;gap:12px;padding:12px 14px}
.notes-grid.list-view .note-card h4{margin-bottom:2px}
.note-checklist-preview{display:flex;flex-direction:column;gap:4px;margin:6px 0}
.ncp-item{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--text-l)}
.ncp-item.checked{text-decoration:line-through;opacity:.6}
.ncp-item i{font-size:.7rem;color:var(--green)}
.note-code-preview{background:var(--slate-900);color:#a5b4fc;padding:8px 10px;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:.72rem;overflow:hidden;max-height:60px;white-space:pre;margin:6px 0}

/* Note modal type / color / pin extras */
.note-type-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.nt-type-btn{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:100px;border:1.5px solid var(--border);background:var(--card);font-size:.75rem;font-weight:600;cursor:pointer;color:var(--text-l);transition:all .2s}
.nt-type-btn:hover{border-color:var(--blue);color:var(--blue)}
.nt-type-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.note-color-picker{display:flex;gap:6px;align-items:center}
.nc-color{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .2s}
.nc-color:hover,.nc-color.selected{transform:scale(1.2);border-color:var(--text)}
.note-pin-row{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--text-l);cursor:pointer;user-select:none}
#notePinToggle{width:36px;height:20px;border-radius:100px;background:var(--slate-200);position:relative;cursor:pointer;transition:background .2s;border:none;flex-shrink:0}
#notePinToggle.on{background:var(--orange)}
#notePinToggle::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .2s}
#notePinToggle.on::after{left:19px}
#noteChecklistSection,#noteCodeSection{display:none}
.checklist-add-row{display:flex;gap:8px;margin-top:8px}
.checklist-add-row input{flex:1;padding:6px 10px;border:1px solid var(--border);border-radius:6px;font-size:.82rem;outline:none;font-family:var(--font)}
.checklist-items{display:flex;flex-direction:column;gap:5px;margin-bottom:6px}
.cl-item{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid var(--border)}
.cl-item input[type=text]{flex:1;border:none;background:none;outline:none;font-size:.83rem;font-family:var(--font);color:var(--text)}
.cl-item .cl-del{border:none;background:none;color:var(--text-xs);cursor:pointer;font-size:.75rem;padding:2px 4px}
.cl-item .cl-del:hover{color:var(--red)}
#noteCodeArea{width:100%;min-height:120px;padding:10px 12px;background:var(--slate-900);color:#a5b4fc;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:'JetBrains Mono',monospace;font-size:.8rem;outline:none;resize:vertical}
.note-file-section{margin-top:10px}
.note-file-list{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.note-file-item{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--slate-50);border-radius:6px;font-size:.75rem;border:1px solid var(--border)}
.note-file-item i{color:var(--blue)}
.note-file-item .nf-del{margin-left:auto;border:none;background:none;color:var(--text-xs);cursor:pointer}
.note-file-item .nf-del:hover{color:var(--red)}

/* ═══════════════════════════════════════════════════════════
   CALENDAR NAV + LEGEND + UPCOMING
═══════════════════════════════════════════════════════════ */
.calendar-nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 16px}
.cal-nav-left{display:flex;align-items:center;gap:8px}
.cal-nav-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cal-nav-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:.82rem;color:var(--text-l);display:flex;align-items:center;justify-content:center;transition:all .2s}
.cal-nav-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.cal-nav-left h3{font-size:.95rem;font-weight:800;color:var(--text);min-width:120px;text-align:center}
.cal-today-btn{padding:6px 13px;border-radius:100px;border:1px solid var(--blue);background:var(--blue-xl);color:var(--blue);font-size:.74rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .2s}
.cal-today-btn:hover{background:var(--blue);color:#fff}
.cal-legend{display:flex;align-items:center;gap:8px;font-size:.7rem;color:var(--text-l);font-weight:600;flex-wrap:wrap}
.cl-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.day-dots{display:flex;gap:2px;justify-content:center;flex-wrap:wrap;margin-top:2px}
.day-entry-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.calendar-upcoming{margin-top:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.cu-header{padding:11px 16px;border-bottom:1px solid var(--border);font-size:.8rem;font-weight:700;color:var(--text);background:var(--slate-50);display:flex;align-items:center;gap:6px}
.cu-items{display:flex;flex-direction:column}
.cu-item{padding:10px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;cursor:pointer;transition:background .15s}
.cu-item:hover{background:var(--blue-xl)}
.cu-item:last-child{border-bottom:none}
.cu-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.cu-date{font-size:.68rem;font-weight:700;color:var(--text-xs);min-width:46px}
.cu-title{font-size:.82rem;font-weight:600;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cu-type{font-size:.63rem;font-weight:700;padding:2px 7px;border-radius:100px;background:var(--blue-xl);color:var(--blue)}

/* ═══════════════════════════════════════════════════════════
   DAY EDITOR — multi-entry system
═══════════════════════════════════════════════════════════ */
.de-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.btn-back{padding:7px 13px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:.78rem;font-weight:600;color:var(--text-l);display:flex;align-items:center;gap:6px;transition:all .2s;flex-shrink:0}
.btn-back:hover{background:var(--blue-xl);color:var(--blue);border-color:var(--blue)}
.de-title-wrap{flex:1;min-width:0}
.de-title-wrap h2{font-size:1rem;font-weight:800;color:var(--text);line-height:1.2}
.de-entry-count{font-size:.7rem;color:var(--text-xs);font-weight:600}

.day-type-picker{display:none;gap:8px;flex-wrap:wrap;margin-bottom:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px;animation:aicMsgIn .25s cubic-bezier(.16,1,.3,1)}
.day-type-picker.open{display:flex}
.dtp-opt{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 14px;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;border:1.5px solid transparent;background:none}
.dtp-opt:hover{background:var(--slate-50);border-color:var(--border)}
.dtp-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:transform .2s}
.dtp-opt:hover .dtp-icon{transform:scale(1.1)}
.dtp-opt span{font-size:.68rem;font-weight:700;color:var(--text);white-space:nowrap}

.day-entries-list{display:flex;flex-direction:column;gap:12px}
.de-empty{text-align:center;padding:48px 20px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--text-l);font-size:.85rem}
.de-empty i{display:block;font-size:2.5rem;margin-bottom:12px;opacity:.2}
.de-empty p{font-weight:600;margin-bottom:4px;color:var(--text)}
.de-empty small{font-size:.75rem}

.de-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;animation:aicMsgIn .3s cubic-bezier(.16,1,.3,1)}
.de-card-top{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid var(--border);background:var(--slate-50)}
.de-card-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0}
.de-card-type{font-size:.67rem;font-weight:700;color:var(--text-xs);text-transform:uppercase;letter-spacing:.06em}
.de-card-time{font-size:.66rem;color:var(--text-xs);margin-left:auto}
.de-card-del{width:24px;height:24px;border-radius:5px;border:none;background:var(--red-l);color:var(--red);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.7rem;transition:all .2s;flex-shrink:0}
.de-card-del:hover{background:var(--red);color:#fff}
.de-card-body{padding:13px}
.de-title-inp{width:100%;font-size:.88rem;font-weight:700;color:var(--text);border:none;outline:none;background:none;font-family:var(--font);margin-bottom:7px;padding:0}
.de-title-inp::placeholder{color:var(--text-xs);font-weight:600}
.de-editor{min-height:80px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);outline:none;font-size:.82rem;line-height:1.6;color:var(--text);background:var(--slate-50)}
.de-editor:focus{border-color:var(--blue);background:#fff}
.de-task-list{display:flex;flex-direction:column;gap:5px}
.de-task-item{display:flex;align-items:center;gap:8px}
.de-task-item input[type=checkbox]{width:15px;height:15px;cursor:pointer;accent-color:var(--green)}
.de-task-inp{flex:1;border:none;border-bottom:1px solid var(--border);outline:none;font-size:.82rem;background:none;color:var(--text);padding:3px 0;font-family:var(--font)}
.de-task-inp.done{text-decoration:line-through;color:var(--text-xs)}
.de-task-del{border:none;background:none;color:var(--text-xs);cursor:pointer;font-size:.7rem;padding:2px 4px}
.de-task-del:hover{color:var(--red)}
.de-add-task{margin-top:7px;padding:5px 10px;border-radius:6px;border:1px dashed var(--border);background:none;color:var(--text-l);font-size:.74rem;cursor:pointer;transition:all .2s;width:100%;text-align:left;font-family:var(--font)}
.de-add-task:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-xl)}
.de-code-area{width:100%;min-height:100px;padding:10px 12px;background:var(--slate-900);color:#a5b4fc;border:none;border-radius:var(--radius-sm);font-family:'JetBrains Mono','Courier New',monospace;font-size:.78rem;outline:none;resize:vertical}
.de-upload-zone{border:2px dashed var(--border);border-radius:var(--radius-sm);padding:20px;text-align:center;cursor:pointer;transition:all .2s;color:var(--text-l);font-size:.8rem}
.de-upload-zone:hover{border-color:var(--blue);background:var(--blue-xl);color:var(--blue)}
.de-file-list{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.de-file-item{display:flex;align-items:center;gap:8px;padding:5px 10px;background:var(--slate-50);border-radius:6px;font-size:.74rem;color:var(--text);border:1px solid var(--border)}
.de-file-item i{color:var(--blue);flex-shrink:0}
.de-file-del{margin-left:auto;border:none;background:none;color:var(--text-xs);cursor:pointer;font-size:.7rem}
.de-file-del:hover{color:var(--red)}
.de-reminder-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.de-reminder-row input[type=time],.de-reminder-row input[type=date]{padding:6px 10px;border:1px solid var(--border);border-radius:6px;font-size:.82rem;font-family:var(--font);outline:none;background:var(--slate-50);transition:border-color .2s}
.de-reminder-row input:focus{border-color:var(--blue)}
.de-res-url{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:6px;font-size:.82rem;font-family:var(--font);outline:none;background:var(--slate-50);transition:border-color .2s;margin-top:4px}
.de-res-url:focus{border-color:var(--blue)}
.de-card-footer{padding:9px 13px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:7px}
.de-save-btn{padding:6px 16px;border-radius:var(--radius-sm);border:none;background:var(--blue);color:#fff;font-size:.76rem;font-weight:700;cursor:pointer;transition:background .2s}
.de-save-btn:hover{background:var(--blue-h)}

/* ═══════════════════════════════════════════════
   DASHBOARD 2.0 — WELCOME CARD (.wc2)
═══════════════════════════════════════════════ */
.wc2{
  position:relative;border-radius:var(--radius-2xl);overflow:hidden;
  background:linear-gradient(135deg,#0f1f4a 0%,#1a3a8a 45%,#2e1065 100%);
  padding:28px 32px;margin-bottom:20px;
  box-shadow:0 20px 60px rgba(15,31,74,.35),0 8px 24px rgba(37,99,235,.2);
}
.wc2-mesh{
  position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.wc2::before{
  content:'';position:absolute;bottom:-100px;right:-60px;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.2),transparent 70%);pointer-events:none;
}
.wc2::after{
  content:'';position:absolute;top:-80px;left:40%;
  width:250px;height:250px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.15),transparent 70%);pointer-events:none;
}
.wc2-body{
  position:relative;z-index:1;display:flex;align-items:center;
  gap:28px;flex-wrap:wrap;
}
.wc2-left{display:flex;align-items:center;gap:20px;flex-shrink:0}
.wc2-av-wrap{
  position:relative;cursor:pointer;flex-shrink:0;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.wc2-av-wrap:hover{transform:scale(1.06)}
.wc2-av{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,.25),rgba(255,255,255,.1));
  border:2px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;font-weight:800;color:#fff;font-family:var(--font-display);
  backdrop-filter:blur(10px);
}
.wc2-av-ring{
  position:absolute;inset:-4px;border-radius:50%;
  border:2px solid transparent;
  background:linear-gradient(135deg,#60a5fa,#a78bfa,#34d399) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;mask-composite:exclude;
  animation:spinRing 8s linear infinite;
}
@keyframes spinRing{to{transform:rotate(360deg)}}
.wc2-online-dot{
  position:absolute;bottom:2px;right:2px;
  width:14px;height:14px;border-radius:50%;
  background:#34d399;border:2.5px solid #0f1f4a;
  box-shadow:0 0 0 0 rgba(52,211,153,.4);
  animation:onlinePulse 2s ease-out infinite;
}
@keyframes onlinePulse{
  0%{box-shadow:0 0 0 0 rgba(52,211,153,.4)}
  70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}
  100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}
}
.wc2-info{}
.wc2-greet{font-size:.72rem;color:rgba(255,255,255,.55);font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-bottom:2px}
.wc2-name{font-family:var(--font-display);font-size:1.55rem;font-weight:800;color:#fff;line-height:1.2;margin-bottom:8px}
.wc2-chips{display:flex;gap:7px;flex-wrap:wrap}
.wc2-chips span{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:100px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.75);font-size:.67rem;font-weight:600;
}
.wc2-chips span i{font-size:.62rem;opacity:.8}
.wc2-chip-online{background:rgba(52,211,153,.15)!important;border-color:rgba(52,211,153,.3)!important;color:#6ee7b7!important}

.wc2-mid{flex:1;min-width:200px;display:flex;flex-direction:column;gap:10px}
.wc2-quote-box{
  padding:14px 16px;border-radius:var(--radius-lg);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(8px);
}
.wc2-qico{color:rgba(255,255,255,.3);margin-bottom:6px;font-size:.9rem}
.wc2-quote-box p{color:rgba(255,255,255,.85);font-size:.83rem;line-height:1.6;font-style:italic;margin-bottom:4px}
.wc2-qby{font-size:.65rem;color:rgba(255,255,255,.4);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.wc2-datetime{font-size:.75rem;color:rgba(255,255,255,.5);font-weight:500;padding-left:2px}
.wc2-clock{color:rgba(255,255,255,.7);font-weight:700;font-variant-numeric:tabular-nums}

.wc2-right{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}
.wc2-ring-wrap{position:relative;width:80px;height:80px;flex-shrink:0}
.wc2-svg{width:80px;height:80px;transform:rotate(-90deg)}
.xr-track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:6}
.xr-fill{
  fill:none;stroke:url(#xpGrad);stroke-width:6;
  stroke-linecap:round;
  transition:stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1);
}
.wc2-ring-ct{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.wc2-xpnum{font-size:.95rem;font-weight:800;color:#fff;font-family:var(--font-display);line-height:1}
.wc2-xplbl{font-size:.55rem;color:rgba(255,255,255,.5);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.wc2-streak-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 12px;border-radius:100px;
  background:rgba(251,146,60,.15);border:1px solid rgba(251,146,60,.3);
  color:#fbbf24;font-size:.72rem;font-weight:700;
}
.wc2-streak-pill i{font-size:.7rem}
#streakWidget{display:none}

/* ═══ KPI ROW 2.0 ═══ */
.kpi2row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px}
@media(max-width:1100px){.kpi2row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.kpi2row{grid-template-columns:repeat(2,1fr)}}
.kpi2{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:14px 16px;cursor:pointer;
  transition:transform .2s,box-shadow .2s,border-color .2s;
  display:flex;align-items:center;gap:12px;
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.kpi2::before{
  content:'';position:absolute;inset:0;opacity:0;
  transition:opacity .2s;
}
.kpi2b::before{background:linear-gradient(135deg,rgba(59,130,246,.04),rgba(99,102,241,.04))}
.kpi2g::before{background:linear-gradient(135deg,rgba(16,185,129,.04),rgba(5,150,105,.04))}
.kpi2o::before{background:linear-gradient(135deg,rgba(245,158,11,.04),rgba(217,119,6,.04))}
.kpi2p::before{background:linear-gradient(135deg,rgba(139,92,246,.04),rgba(124,58,237,.04))}
.kpi2c::before{background:linear-gradient(135deg,rgba(6,182,212,.04),rgba(8,145,178,.04))}
.kpi2:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.kpi2:hover::before{opacity:1}
.kpi2ico{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1rem;flex-shrink:0;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.kpi2txt{flex:1;min-width:0}
.kpi2val{font-size:1.25rem;font-weight:800;color:var(--text);font-family:var(--font-display);line-height:1}
.kpi2lbl{font-size:.68rem;color:var(--text-xs);font-weight:600;margin-top:2px;text-transform:uppercase;letter-spacing:.04em}
.kpi2mini{position:absolute;bottom:10px;left:16px;right:16px}
.kpi2bar{height:3px;background:var(--slate-100);border-radius:4px;overflow:hidden}
.kpi2fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--blue),#6366f1);transition:width 1s cubic-bezier(.16,1,.3,1)}
.kpi2{padding-bottom:22px}

/* ═══ DASHBOARD GRID ═══ */
.d2grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  align-items:start;
}
@media(max-width:1200px){.d2grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.d2grid{grid-template-columns:1fr}}
.d2card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:16px 18px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:14px;
}
.d2span2{grid-column:span 2}
@media(max-width:1200px){.d2span2{grid-column:span 2}}
@media(max-width:700px){.d2span2{grid-column:span 1}}
.d2head{
  display:flex;align-items:center;gap:7px;
  font-size:.82rem;font-weight:700;color:var(--text);
}
.d2head i{font-size:.85rem;flex-shrink:0}
.d2badge{
  margin-left:auto;padding:2px 9px;border-radius:100px;
  background:var(--slate-100);color:var(--text-l);
  font-size:.64rem;font-weight:700;
}
.dc2link{
  margin-left:auto;background:none;border:none;cursor:pointer;
  color:var(--blue);font-size:.72rem;font-weight:700;
  padding:2px 6px;border-radius:6px;transition:background .15s;
}
.dc2link:hover{background:var(--blue-xl)}

/* QUICK LAUNCH */
.ql2grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
}
@media(max-width:900px){.ql2grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:600px){.ql2grid{grid-template-columns:repeat(3,1fr)}}
.ql2{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  cursor:pointer;padding:10px 6px;border-radius:var(--radius);
  transition:all .2s cubic-bezier(.16,1,.3,1);
  border:1px solid transparent;
}
.ql2:hover{background:var(--slate-50);border-color:var(--border);transform:translateY(-3px)}
.ql2i{
  width:44px;height:44px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  transition:transform .2s,box-shadow .2s;
}
.ql2:hover .ql2i{transform:scale(1.12);box-shadow:0 8px 20px rgba(0,0,0,.2)}
.ql2 span{font-size:.67rem;font-weight:700;color:var(--text-l);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* TODAY'S FOCUS */
.f2list{display:flex;flex-direction:column;gap:6px}
.f2item{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--slate-50);
  cursor:pointer;transition:all .15s;font-size:.8rem;color:var(--text);font-weight:500;
}
.f2item:hover{border-color:var(--blue-l);background:var(--blue-xl)}
.f2item input[type=checkbox]{width:15px;height:15px;flex-shrink:0;accent-color:var(--blue);cursor:pointer}
.f2item.done{background:var(--green-l);border-color:rgba(5,150,105,.2);color:var(--text-xs);text-decoration:line-through}
.f2bar-wrap{height:5px;background:var(--slate-100);border-radius:10px;overflow:hidden;margin-top:2px}
.f2bar{height:100%;background:linear-gradient(90deg,var(--blue),#6366f1);border-radius:10px;width:0%;transition:width .6s cubic-bezier(.16,1,.3,1)}

/* TODAY'S SCHEDULE */
.sch2{display:flex;flex-direction:column;gap:10px}
.sc2i{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:var(--radius-sm);
  background:var(--slate-50);border:1px solid var(--border);
  transition:all .2s;
}
.sc2i.sc2-live{
  background:linear-gradient(135deg,var(--blue-xl),rgba(99,102,241,.06));
  border-color:var(--blue-l);
}
.sc2i.sc2-done{opacity:.55}
.sc2dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.sc2dot-live{background:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.sc2time{font-size:.7rem;font-weight:700;color:var(--text-l);font-variant-numeric:tabular-nums;min-width:34px;flex-shrink:0}
.sc2body{flex:1;min-width:0}
.sc2name{font-size:.8rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc2loc{font-size:.67rem;color:var(--text-xs);margin-top:1px}
.sc2loc i{margin-right:3px;font-size:.6rem}
.sc2badge{
  padding:3px 9px;border-radius:100px;
  font-size:.62rem;font-weight:800;flex-shrink:0;
  display:flex;align-items:center;gap:5px;letter-spacing:.02em;
}
.sc2b-live{background:var(--blue);color:#fff}
.sc2b-next{background:var(--blue-l);color:var(--blue)}
.sc2b-done{background:var(--green-l);color:var(--green)}
.sc2b-up{background:var(--orange-l);color:var(--orange)}

.live-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 9px;border-radius:100px;
  background:rgba(37,99,235,.1);color:var(--blue);
  font-size:.64rem;font-weight:700;
}
.live-dot{
  width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0;
  animation:liveBlink .9s ease-in-out infinite alternate;
}
@keyframes liveBlink{0%{opacity:1}100%{opacity:.2}}

/* RECENT NOTES */
.dash-nonotes{
  text-align:center;padding:28px 20px;color:var(--text-l);font-size:.8rem;
}
.dash-nonotes i{font-size:1.8rem;opacity:.2;display:block;margin-bottom:8px;color:var(--blue)}
.dash-nonotes p{font-weight:600}
.drn-item{
  display:flex;gap:10px;padding:9px 11px;
  border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--slate-50);cursor:pointer;transition:all .15s;
  margin-bottom:8px;
}
.drn-item:hover{border-color:var(--blue-l);background:var(--blue-xl)}
.drn-ico{
  width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;flex-shrink:0;
  background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff;
}
.drn-body{flex:1;min-width:0}
.drn-title{font-size:.8rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drn-date{font-size:.67rem;color:var(--text-xs);margin-top:2px}

/* ACTIVITY FEED */
.act2{display:flex;flex-direction:column;gap:10px}
.ac2i{display:flex;align-items:center;gap:10px}
.ac2ic{
  width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;flex-shrink:0;
}
.ac2t{font-size:.8rem;font-weight:600;color:var(--text)}
.ac2s{font-size:.67rem;color:var(--text-xs);margin-top:1px}

/* SUBJECT PROGRESS */
.sub2{display:flex;flex-direction:column;gap:11px}
.sb2i{display:flex;flex-direction:column;gap:5px}
.sb2l{display:flex;justify-content:space-between;align-items:center}
.sb2l span:first-child{font-size:.78rem;font-weight:600;color:var(--text)}
.sb2pct{font-size:.7rem;font-weight:800;color:var(--text-l)}
.sb2bar{height:6px;background:var(--slate-100);border-radius:10px;overflow:hidden}
.sb2fill{height:100%;border-radius:10px;transition:width 1s cubic-bezier(.16,1,.3,1)}
.sb2overall{
  margin-top:4px;padding:8px 12px;border-radius:var(--radius-sm);
  background:var(--slate-50);border:1px solid var(--border);
  font-size:.75rem;color:var(--text-l);font-weight:500;
}
.sb2overall strong{color:var(--text)}

/* ANNOUNCEMENTS */
.ann2{display:flex;flex-direction:column;gap:10px}
.an2i{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 11px;border-radius:var(--radius-sm);
  background:var(--slate-50);border:1px solid var(--border);
  transition:border-color .15s;
}
.an2i:hover{border-color:var(--border)}
.an2-urgent{
  background:linear-gradient(135deg,var(--red-50),rgba(220,38,38,.04));
  border-color:rgba(220,38,38,.2);
}
.an2dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:4px}
.an2t{font-size:.8rem;font-weight:700;color:var(--text)}
.an2s{font-size:.67rem;color:var(--text-xs);margin-top:2px}

/* ═══════════════════════════════════════════════
   AI IDE PANEL
═══════════════════════════════════════════════ */
.aic-ide-panel{
  border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--slate-900);
  margin-bottom:12px;flex-shrink:0;
  animation:aicMsgIn .25s cubic-bezier(.16,1,.3,1);
}
.ide-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;background:#0f172a;border-bottom:1px solid rgba(255,255,255,.07);
  gap:8px;flex-wrap:wrap;
}
.ide-bar-left{display:flex;align-items:center;gap:8px}
.ide-lang-dot{
  width:10px;height:10px;border-radius:50%;
  background:#f59e0b;flex-shrink:0;
  box-shadow:0 0 6px currentColor;
}
.ide-lang-sel{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  color:#e2e8f0;border-radius:6px;padding:5px 10px;
  font-size:.75rem;font-weight:600;outline:none;cursor:pointer;font-family:var(--font);
}
.ide-bar-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ide-btn{
  padding:5px 12px;border-radius:6px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);color:#cbd5e1;
  font-size:.72rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:5px;
  transition:all .15s;font-family:var(--font);
}
.ide-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.ide-run{background:rgba(34,197,94,.15);color:#4ade80;border-color:rgba(34,197,94,.25)}
.ide-run:hover{background:rgba(34,197,94,.25);color:#86efac}
.ide-ask{background:rgba(139,92,246,.15);color:#a78bfa;border-color:rgba(139,92,246,.25)}
.ide-ask:hover{background:rgba(139,92,246,.25);color:#c4b5fd}
.ide-body{display:flex;min-height:140px;max-height:320px;overflow:hidden}
.ide-linenums{
  padding:10px 8px;background:#0a1628;color:#475569;
  font-family:'JetBrains Mono','Courier New',monospace;font-size:.72rem;
  line-height:1.7;text-align:right;user-select:none;white-space:pre;
  border-right:1px solid rgba(255,255,255,.06);min-width:36px;
  overflow:hidden;flex-shrink:0;
}
.ide-code{
  flex:1;border:none;outline:none;resize:none;
  background:var(--slate-900);color:#a5b4fc;
  font-family:'JetBrains Mono','Courier New',monospace;font-size:.78rem;
  line-height:1.7;padding:10px 14px;
  tab-size:2;
}
.ide-code::placeholder{color:#334155}
.ide-output{
  min-height:42px;max-height:120px;overflow-y:auto;
  padding:9px 14px;background:#020817;
  border-top:1px solid rgba(255,255,255,.06);
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:.74rem;color:#94a3b8;line-height:1.6;white-space:pre-wrap;
}
.ide-out-ph{color:#334155;font-style:italic}
.ide-output.has-error{color:#f87171}
.ide-output.has-result{color:#4ade80}

/* ═══ GRAMMAR LIVE PANEL ═══ */
.aic-gram-live{
  border:1px solid rgba(5,150,105,.25);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--card);margin-bottom:12px;flex-shrink:0;
  animation:aicMsgIn .25s cubic-bezier(.16,1,.3,1);
}
.agl-header{
  display:flex;align-items:center;gap:9px;
  padding:10px 14px;background:linear-gradient(135deg,var(--green-l),rgba(5,150,105,.06));
  border-bottom:1px solid rgba(5,150,105,.15);flex-wrap:wrap;
}
.agl-header span:first-of-type{font-size:.82rem;font-weight:700;color:var(--green);flex:1}
.agl-badge{
  padding:2px 10px;border-radius:100px;
  background:rgba(5,150,105,.12);color:var(--green);
  font-size:.67rem;font-weight:800;border:1px solid rgba(5,150,105,.2);
}
.agl-save{
  padding:5px 12px;border-radius:7px;border:1px solid rgba(5,150,105,.3);
  background:rgba(5,150,105,.1);color:var(--green);
  font-size:.72rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:5px;transition:all .15s;font-family:var(--font);
}
.agl-save:hover{background:var(--green);color:#fff}
.agl-inp{
  width:100%;border:none;outline:none;resize:none;
  padding:12px 16px;font-size:.85rem;line-height:1.7;
  font-family:var(--font);color:var(--text);
  background:var(--card);border-bottom:1px solid var(--border);
}
.agl-highlighted{
  padding:12px 16px;font-size:.85rem;line-height:1.7;
  min-height:60px;color:var(--text);
}
.agl-highlighted mark.err{background:#fee2e2;color:var(--red);border-radius:3px;text-decoration:underline wavy var(--red);text-decoration-skip-ink:none}
.agl-highlighted mark.warn{background:#fef3c7;color:var(--orange);border-radius:3px}

/* Grammar sidebar panel */
.aic-gram-score{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;background:var(--slate-50);border-radius:var(--radius);
  border:1px solid var(--border);
}
#aicGramScore{
  font-size:1.5rem;font-weight:800;color:var(--green);
  font-family:var(--font-display);line-height:1;
}
.ags-lbl{font-size:.67rem;color:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.aic-gram-issues{display:flex;flex-direction:column;gap:5px}
.agi-empty{
  text-align:center;padding:14px 10px;color:var(--text-xs);
  font-size:.75rem;background:var(--slate-50);border-radius:var(--radius-sm);
  border:1px dashed var(--border);
}
.agi-item{
  display:flex;align-items:flex-start;gap:7px;
  padding:6px 9px;border-radius:var(--radius-sm);
  font-size:.72rem;line-height:1.4;border:1px solid;
}
.agi-err{background:var(--red-50);border-color:rgba(220,38,38,.2);color:var(--red)}
.agi-warn{background:var(--orange-50);border-color:rgba(217,119,6,.2);color:var(--orange)}
.agi-sty{background:var(--purple-50);border-color:rgba(124,58,237,.2);color:var(--purple)}
.agi-item i{font-size:.65rem;margin-top:2px;flex-shrink:0}

/* ═══ RESEARCH NOTEBOOK ═══ */
.aic-sources-panel{
  display:flex;flex-direction:column;gap:6px;
}
.aic-src-list{
  display:flex;flex-direction:column;gap:5px;
  max-height:140px;overflow-y:auto;
}
.aic-no-src{
  text-align:center;padding:12px 10px;color:var(--text-xs);
  font-size:.72rem;background:var(--slate-50);border-radius:var(--radius-sm);
  border:1px dashed var(--border);
}
.aic-src-item{
  display:flex;align-items:center;gap:7px;
  padding:6px 9px;background:var(--slate-50);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:.72rem;color:var(--text);
}
.aic-src-item i{color:var(--blue);flex-shrink:0;font-size:.65rem}
.aic-src-item span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aic-src-item button{border:none;background:none;color:var(--text-xs);cursor:pointer;font-size:.65rem;flex-shrink:0;padding:0 2px}
.aic-src-item button:hover{color:var(--red)}
.aic-src-inp{
  width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:8px 10px;font-size:.75rem;outline:none;resize:vertical;
  font-family:var(--font);color:var(--text);background:var(--card);
  transition:border-color .15s;
}
.aic-src-inp:focus{border-color:var(--blue)}
.aic-add-src-btn{
  padding:7px 12px;border-radius:var(--radius-sm);
  border:1px dashed var(--blue-l);background:var(--blue-xl);color:var(--blue);
  font-size:.74rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:6px;justify-content:center;
  transition:all .15s;font-family:var(--font);
}
.aic-add-src-btn:hover{background:var(--blue);color:#fff;border-style:solid}
.aic-nb-gen{
  padding:9px 14px;border-radius:var(--radius-sm);
  border:none;background:linear-gradient(135deg,var(--blue),#6366f1);color:#fff;
  font-size:.76rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:7px;justify-content:center;
  transition:all .2s;font-family:var(--font);
  box-shadow:0 4px 12px rgba(37,99,235,.25);
}
.aic-nb-gen:hover{box-shadow:0 6px 20px rgba(37,99,235,.35);transform:translateY(-1px)}

.aic-notebook{
  border:1px solid var(--blue-l);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--card);margin-bottom:12px;flex-shrink:0;
  animation:aicMsgIn .25s cubic-bezier(.16,1,.3,1);
}
.nb-header{
  display:flex;align-items:center;gap:9px;
  padding:11px 15px;background:linear-gradient(135deg,var(--blue-xl),rgba(99,102,241,.06));
  border-bottom:1px solid var(--blue-l);
  font-size:.82rem;font-weight:700;color:var(--blue);
}
.nb-save{
  margin-left:auto;padding:5px 12px;border-radius:7px;
  border:1px solid var(--blue-l);background:rgba(37,99,235,.08);color:var(--blue);
  font-size:.72rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:5px;transition:all .15s;font-family:var(--font);
}
.nb-save:hover{background:var(--blue);color:#fff}
.nb-content{padding:16px;display:flex;flex-direction:column;gap:14px}
.nb-section{
  padding:12px 14px;background:var(--slate-50);
  border-radius:var(--radius);border:1px solid var(--border);
}
.nb-sec-title{
  font-size:.82rem;font-weight:800;color:var(--text);
  margin-bottom:7px;display:flex;align-items:center;gap:6px;
}
.nb-sec-title i{color:var(--blue);font-size:.8rem}
.nb-sec-body{font-size:.78rem;color:var(--text-l);line-height:1.7}
.nb-loading{
  text-align:center;padding:28px 20px;color:var(--text-l);font-size:.82rem;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.nb-loading i{font-size:1.5rem;color:var(--blue);animation:spin .8s linear infinite}
.nb-empty{
  text-align:center;padding:28px 20px;color:var(--text-xs);font-size:.8rem;
}

/* ═══ AI SAVE-TO-NOTES BUTTON ═══ */
.aic-save-notes-btn{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:8px;padding:5px 12px;border-radius:7px;
  border:1px solid var(--border);background:var(--slate-50);
  color:var(--text-l);font-size:.72rem;font-weight:700;cursor:pointer;
  transition:all .15s;font-family:var(--font);
}
.aic-save-notes-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.aic-save-notes-btn i{font-size:.65rem}

/* Responsive adjustments for main layout */
@media(max-width:900px){
  .wc2-mid{display:none}
  .wc2-body{gap:16px}
}
@media(max-width:600px){
  .wc2{padding:18px 18px}
  .wc2-right{display:none}
  .kpi2row{grid-template-columns:repeat(2,1fr)}
  .d2grid{grid-template-columns:1fr}
  .d2span2{grid-column:span 1}
  .ql2grid{grid-template-columns:repeat(4,1fr)}
}

/* ═══════════════════════════════════════════════
   FEE STRUCTURE PAGE — NPR
═══════════════════════════════════════════════ */
.fee-setup-banner{
  display:flex;align-items:center;gap:20px;
  padding:28px 32px;margin-bottom:20px;border-radius:var(--radius-xl);
  background:linear-gradient(135deg,var(--green-l),rgba(5,150,105,.08));
  border:1.5px solid rgba(5,150,105,.2);
}
.fsb-icon{
  width:64px;height:64px;border-radius:18px;flex-shrink:0;
  background:linear-gradient(135deg,#10b981,#059669);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.6rem;
  box-shadow:0 8px 24px rgba(5,150,105,.25);
}
.fsb-body h3{font-size:1.1rem;font-weight:800;color:var(--text);margin-bottom:4px}
.fsb-body p{font-size:.82rem;color:var(--text-l);line-height:1.6;max-width:480px}

.fee-kpi-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:12px;margin-bottom:16px;
}
@media(max-width:900px){.fee-kpi-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.fee-kpi-row{grid-template-columns:1fr}}
.fee-kpi{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:16px;display:flex;align-items:center;gap:12px;
  box-shadow:var(--shadow-sm);
}
.fkpi-icon{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;
}
.fkpi-total .fkpi-icon{background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff}
.fkpi-paid .fkpi-icon{background:linear-gradient(135deg,#10b981,#059669);color:#fff}
.fkpi-pending .fkpi-icon{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}
.fkpi-due .fkpi-icon{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}
.fkpi-val{font-size:1.05rem;font-weight:800;color:var(--text);font-family:var(--font-display);line-height:1}
.fkpi-lbl{font-size:.67rem;color:var(--text-xs);font-weight:600;margin-top:3px;text-transform:uppercase;letter-spacing:.04em}

.fee-progress-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow-sm);
}
.fpc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.fpc-header span:first-child{font-size:.85rem;font-weight:700;color:var(--text)}
#fpcPct{font-size:.78rem;font-weight:800;color:var(--green)}
.fpc-bar-wrap{height:10px;background:var(--slate-100);border-radius:10px;overflow:hidden;margin-bottom:14px}
.fpc-bar{height:100%;background:linear-gradient(90deg,#10b981,#059669);border-radius:10px;transition:width 1s cubic-bezier(.16,1,.3,1)}
.fpc-footer{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

.fee-records-wrap{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:16px 18px;margin-bottom:16px;box-shadow:var(--shadow-sm);
}
.frw-head{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.82rem;font-weight:700;color:var(--text);
  margin-bottom:14px;
}
.frw-head span{display:flex;align-items:center;gap:7px}
.fee-record-item{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 14px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--slate-50);
  margin-bottom:8px;transition:all .15s;flex-wrap:wrap;
}
.fee-record-item:hover{border-color:var(--blue-l);background:var(--blue-xl)}
.fri-left{display:flex;align-items:center;gap:11px;flex:1;min-width:0}
.fri-icon{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-xl);color:var(--blue);font-size:.85rem;
}
.fri-desc{font-size:.82rem;font-weight:700;color:var(--text)}
.fri-meta{font-size:.68rem;color:var(--text-xs);margin-top:2px}
.fri-right{display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap}
.fri-amount{font-size:.9rem;font-weight:800;color:var(--text);font-family:var(--font-display)}
.fri-status{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:100px;
  font-size:.67rem;font-weight:800;
}
.frs-paid{background:var(--green-l);color:var(--green)}
.frs-pending{background:var(--orange-l);color:var(--orange)}
.frs-overdue{background:var(--red-l);color:var(--red)}
.fri-del{
  border:none;background:none;color:var(--text-xs);cursor:pointer;
  font-size:.75rem;padding:4px 6px;border-radius:5px;transition:all .15s;
}
.fri-del:hover{background:var(--red-l);color:var(--red)}

.fri-paid{border-left:3px solid var(--green)}
.fri-pending{border-left:3px solid var(--orange)}
.fri-overdue{border-left:3px solid var(--red)}

.fee-ref-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:18px 20px;box-shadow:var(--shadow-sm);
}
.frc-head{
  font-size:.82rem;font-weight:800;color:var(--text);
  margin-bottom:14px;display:flex;align-items:center;gap:7px;
}
.fee-table-wrap{overflow-x:auto}
.fee-ref-table{width:100%;border-collapse:collapse;font-size:.76rem}
.fee-ref-table th{
  padding:9px 12px;background:var(--slate-50);color:var(--text-l);
  font-weight:700;text-align:left;border-bottom:2px solid var(--border);
  white-space:nowrap;
}
.fee-ref-table td{
  padding:9px 12px;border-bottom:1px solid var(--border);
  color:var(--text);font-weight:500;
}
.fee-ref-table tr:hover td{background:var(--blue-xl)}
.fee-ref-table td:nth-child(3),.fee-ref-table td:nth-child(4),.fee-ref-table td:nth-child(5){
  font-weight:700;color:var(--green);font-family:var(--font-display);
}
.fee-note{
  margin-top:12px;font-size:.72rem;color:var(--text-xs);
  display:flex;align-items:flex-start;gap:6px;line-height:1.5;
}
.fee-note i{color:var(--blue);flex-shrink:0;margin-top:2px}
.npm-tag{
  font-size:.74rem;font-weight:800;color:var(--green);
  background:var(--green-l);padding:3px 9px;border-radius:100px;
  border:1px solid rgba(5,150,105,.2);
}

/* ═══════════════════════════════════════════════
   AI TOOLS DIRECTORY
═══════════════════════════════════════════════ */
.ait-search-bar{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:14px 18px;margin-bottom:16px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:12px;
}
.ait-search-row{
  display:flex;align-items:center;gap:10px;
  padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--slate-50);
}
.ait-search-row i{color:var(--text-xs);font-size:.85rem;flex-shrink:0}
.ait-search-row input{
  flex:1;border:none;outline:none;font-size:.87rem;
  font-family:var(--font);color:var(--text);background:none;
}
.ait-filters{display:flex;gap:6px;flex-wrap:wrap}
.ait-filter{
  padding:5px 13px;border-radius:100px;border:1px solid var(--border);
  background:none;color:var(--text-l);font-size:.72rem;font-weight:700;
  cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:5px;
  font-family:var(--font);
}
.ait-filter:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-xl)}
.ait-filter.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.ait-filter i{font-size:.65rem}

.ait-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
}
.ait-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:16px;box-shadow:var(--shadow-sm);cursor:pointer;
  transition:all .2s cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column;gap:10px;
  position:relative;
}
.ait-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--blue-l)}
.ait-card-top{display:flex;align-items:flex-start;gap:10px}
.ait-ico{
  width:42px;height:42px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
}
.ait-card-head{flex:1;min-width:0}
.ait-name{
  font-size:.85rem;font-weight:800;color:var(--text);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.ait-badge{
  font-size:.6rem;font-weight:800;padding:2px 7px;border-radius:100px;
  background:linear-gradient(135deg,var(--blue),#6366f1);color:#fff;
  text-transform:uppercase;letter-spacing:.04em;
}
.ait-cat{font-size:.67rem;color:var(--text-xs);font-weight:600;text-transform:capitalize;margin-top:2px}
.ait-fav{
  width:28px;height:28px;border-radius:8px;border:1px solid var(--border);
  background:none;color:var(--text-xs);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:.75rem;
  transition:all .15s;flex-shrink:0;
}
.ait-fav:hover,.ait-fav.active{background:var(--red-l);color:var(--red);border-color:rgba(220,38,38,.25)}
.ait-desc{font-size:.77rem;color:var(--text-l);line-height:1.6;flex:1}
.ait-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--blue),#6366f1);color:#fff;
  font-size:.73rem;font-weight:700;text-decoration:none;
  transition:all .15s;align-self:flex-start;
}
.ait-link:hover{box-shadow:0 4px 12px rgba(37,99,235,.3);transform:translateY(-1px)}
.ait-link i{font-size:.62rem}

/* ═══════════════════════════════════════════════════════════
   APP PREMIUM UPGRADE — icons, responsive, spacing
═══════════════════════════════════════════════════════════ */

/* ── DASHBOARD KPI ROW ICON GLOW ────────────────────────── */
.kpi2{
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;
  border-radius:var(--radius-lg)!important;
  padding:16px 18px!important;
}
.kpi2:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.kpi2-icon{
  width:44px;height:44px;border-radius:12px;font-size:1.1rem;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),filter .3s ease;
  position:relative;
}
.kpi2:hover .kpi2-icon{transform:scale(1.15) rotate(-6deg);filter:brightness(1.15)}
.kpi2-val{font-size:1.5rem!important;font-weight:900!important;letter-spacing:-.02em}
.kpi2-label{font-size:.7rem!important;letter-spacing:.03em}

/* ── QUICK LAUNCH GRID ──────────────────────────────────── */
.ql2item{
  border-radius:16px!important;padding:16px 10px 14px!important;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease!important;
}
.ql2item:hover{transform:translateY(-5px) scale(1.04);box-shadow:var(--shadow-md)}
.ql2icon{
  width:46px;height:46px;border-radius:14px;font-size:1.15rem;
  margin:0 auto 10px;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  position:relative;
}
.ql2item:hover .ql2icon{transform:scale(1.2) rotate(-6deg)}
.ql2label{font-size:.73rem!important;font-weight:700!important;letter-spacing:.01em}

/* ── WELCOME CARD POLISH ────────────────────────────────── */
.wc2-name{font-size:1.65rem!important;letter-spacing:-.025em}
.wc2-greet{letter-spacing:.12em;font-size:.7rem}

/* ── SIDEBAR NAV LINK ICONS PREMIUM ────────────────────── */
.sidebar-nav a i{
  font-size:.85rem;width:18px;text-align:center;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.sidebar-nav a:hover i,.sidebar-nav a.active i{transform:scale(1.2) rotate(-4deg)}

/* ── PAGE CARD ICON UPGRADE ─────────────────────────────── */
.page-icon{
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  border-radius:14px!important;
}
.page-icon:hover{transform:scale(1.12) rotate(-5deg)}

/* ── BOTTOM NAV ICON ────────────────────────────────────── */
.bottom-nav a i{font-size:1.1rem;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.bottom-nav a.active i{transform:scale(1.15)}
.bottom-nav a{font-size:.62rem!important;gap:3px!important}

/* ── CONTENT AREA SPACING ───────────────────────────────── */
.content{padding:18px!important}
@media(max-width:768px){.content{padding:14px!important;padding-bottom:72px!important}}
@media(max-width:480px){.content{padding:12px!important;padding-bottom:68px!important}}

/* ── DASHBOARD GRID RESPONSIVE FIXES ───────────────────── */
@media(max-width:480px){
  .kpi2row{grid-template-columns:1fr 1fr!important}
  .kpi2{padding:14px!important}
  .kpi2-val{font-size:1.25rem!important}
  .ql2grid{grid-template-columns:repeat(3,1fr)!important}
  .ql2icon{width:40px;height:40px;font-size:1rem}
  .wc2-name{font-size:1.3rem!important}
  .wc2-av{width:48px!important;height:48px!important;font-size:1.1rem!important}
}

/* ── NOTE CARD ICON ─────────────────────────────────────── */
.note-card-header i{font-size:.8rem}
.note-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.note-card{transition:transform .3s ease,box-shadow .3s ease}

/* ── FEE KPI ICON UPGRADE ───────────────────────────────── */
.fkpi-icon{
  width:42px;height:42px;border-radius:12px;font-size:1rem;flex-shrink:0;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.fee-kpi:hover .fkpi-icon{transform:scale(1.18) rotate(-8deg)}
.fee-kpi{transition:transform .3s ease,box-shadow .3s ease}
.fee-kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}

/* ── AI TOOLS CARD ICON ─────────────────────────────────── */
.ait-ico{
  width:46px!important;height:46px!important;border-radius:13px!important;
  font-size:1.1rem!important;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.ait-card:hover .ait-ico{transform:scale(1.15) rotate(-6deg)}
.ait-card{border-radius:16px!important;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease!important}

/* ── AI CHAT MODE ICONS ─────────────────────────────────── */
.aic-mode i{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.aic-mode:hover i,.aic-mode.active i{transform:scale(1.15)}

/* ── TOPBAR PREMIUM ─────────────────────────────────────── */
.topbar{padding:0 18px!important}
.topbar-user{border-radius:10px!important;padding:7px 12px!important}
.tu-avatar{width:34px;height:34px;font-size:.8rem;border-radius:10px!important}

/* ── ATTENDANCE / GRADE ROWS ────────────────────────────── */
.att-row,.grade-row{border-radius:12px!important;padding:11px 14px!important}

/* ── RESOURCE/MATERIAL CARDS ────────────────────────────── */
.resource-card,.mat-card{border-radius:16px!important}
.resource-card:hover,.mat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.resource-card{transition:transform .3s ease,box-shadow .3s ease}

/* ── SCROLLBAR THIN ─────────────────────────────────────── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{border-radius:4px;background:var(--border-d)}

/* ═══════════════════════════════════════════════════════════
   WRITING TOOLS — New Components
═══════════════════════════════════════════════════════════ */

/* Tab slide animation */
@keyframes wt-panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.wt-panel.active{animation:wt-panelIn .25s cubic-bezier(.16,1,.3,1)}

/* Scrollable tabs on mobile */
.wt-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px;gap:5px}
.wt-tabs::-webkit-scrollbar{height:3px}
.wt-tab{white-space:nowrap;flex-shrink:0}

/* File Converter */
.conv-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.conv-upload-zone{
  border:2.5px dashed var(--border);border-radius:var(--radius-lg);
  padding:32px 20px;text-align:center;cursor:pointer;
  background:var(--slate-50);transition:all .25s;
}
.conv-upload-zone:hover,.conv-upload-zone.drag-over{
  border-color:var(--blue);background:var(--blue-xl);
}
.conv-upload-zone.drag-over{transform:scale(1.01)}

/* PDF Viewer */
.pdf-viewer-wrap{min-height:300px}
.pdf-viewer-wrap iframe{border-radius:12px;box-shadow:var(--shadow-md)}

/* Photo Gallery */
.photo-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;min-height:160px}
.photo-thumb{
  position:relative;border-radius:12px;overflow:hidden;
  cursor:pointer;aspect-ratio:1;background:var(--slate-100);
  border:1px solid var(--border);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;
}
.photo-thumb:hover{transform:scale(1.04);box-shadow:var(--shadow-md)}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.photo-thumb:hover img{transform:scale(1.07)}
.photo-thumb-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s;color:#fff;font-size:1.4rem;
}
.photo-thumb:hover .photo-thumb-overlay{opacity:1}
.photo-del-btn{
  position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;
  border:none;background:rgba(220,38,38,.85);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:.65rem;opacity:0;transition:opacity .2s;
}
.photo-thumb:hover .photo-del-btn{opacity:1}

/* Lightbox */
.photo-lightbox{
  position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
  backdrop-filter:blur(12px);
}
.photo-lightbox.open{opacity:1;pointer-events:all}
#lightboxImg{
  max-width:min(90vw,1200px);max-height:85vh;object-fit:contain;
  border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5);
  transition:opacity .25s,transform .25s;
}
.plb-close{
  position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.15);border:none;color:#fff;cursor:pointer;
  font-size:1rem;display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;
}
.plb-close:hover{background:rgba(255,255,255,.3);transform:scale(1.1)}
.plb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.12);border:none;color:#fff;cursor:pointer;
  font-size:1.1rem;display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;
}
.plb-nav:hover{background:rgba(255,255,255,.25);transform:translateY(-50%) scale(1.08)}
.plb-prev{left:20px}
.plb-next{right:20px}
.plb-info{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  padding:6px 16px;border-radius:100px;background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.8);font-size:.75rem;white-space:nowrap;
  backdrop-filter:blur(6px);
}

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — COMPLETE OVERHAUL
═══════════════════════════════════════════════════════════ */

/* ── 768px ── */
@media(max-width:768px){
  /* Writing tabs */
  .wt-tabs{flex-wrap:nowrap!important;overflow-x:auto}
  /* Converter */
  .conv-layout{grid-template-columns:1fr}
  /* Photo gallery */
  .photo-gallery{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  /* Nav lightbox */
  .plb-prev{left:8px}.plb-next{right:8px}
  .plb-nav{width:36px;height:36px;font-size:.9rem}
  /* Form row 2 */
  .form-row-2{grid-template-columns:1fr!important}
  /* Grade table overflow */
  .grade-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Sheet */
  .sheet-toolbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Doc toolbar */
  .doc-toolbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:3px}
}

/* ── 480px ── */
@media(max-width:480px){
  /* Content */
  .content{padding:10px;padding-bottom:74px}
  /* KPI */
  .kpi{padding:12px 10px;gap:10px}
  .kpi-val,.kpi2-val{font-size:1.1rem!important}
  .kpi-lbl,.kpi2-lbl{font-size:.62rem!important}
  .kpi-icon,.kpi2-icon{width:36px;height:36px;font-size:.85rem}
  /* Dash cards */
  .dash-card{padding:14px}
  /* Welcome card */
  .welcome-card{padding:16px!important}
  .wc-avatar{width:38px;height:38px;font-size:.85rem;flex-shrink:0}
  /* Quick nav */
  .qnav-item{padding:10px 5px;gap:4px}
  .qnav-item span{font-size:.6rem}
  /* Notes toolbar wrapping */
  .notes-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px}
  .notes-toolbar input{min-width:0;flex:1 1 140px}
  /* Bottom nav */
  .bottom-nav{height:58px}
  .bottom-nav a{font-size:.52rem;gap:1px}
  .bottom-nav a i{font-size:.95rem}
  /* Topbar */
  .topbar{padding:0 10px!important}
  #pageTitle{font-size:.82rem!important}
  /* Wt-tabs */
  .wt-tab{padding:7px 12px;font-size:.75rem;gap:4px}
  /* Photo gallery */
  .photo-gallery{grid-template-columns:repeat(3,1fr);gap:7px}
  /* Att controls */
  .att-controls{flex-direction:column;align-items:stretch}
  .att-controls .att-select,.att-controls .att-date{width:100%}
  /* Para layout */
  .para-layout{grid-template-columns:1fr}
  /* Profile */
  .profile-hero{padding:18px 16px!important;gap:14px}
  .ph-avatar{width:60px!important;height:60px!important;font-size:1.2rem!important}
  .ph-info h2{font-size:1.1rem!important}
  .ph-stats{gap:12px!important}
  .ph-sv{font-size:1.2rem!important}
  /* AIC sidebar mobile */
  .aic-mode span{display:none}
  .aic-mode{padding:8px;justify-content:center}
  /* Modal */
  .modal{padding:18px;border-radius:var(--radius-lg)}
}

/* ── 360px (tiny phones) ── */
@media(max-width:380px){
  .kpi-row{grid-template-columns:1fr 1fr!important;gap:8px}
  .qnav-grid{grid-template-columns:repeat(4,1fr)!important;gap:6px}
  .qnav-item span{font-size:.55rem}
  .qnav-item{padding:8px 4px}
  .photo-gallery{grid-template-columns:repeat(2,1fr)}
  .bottom-nav a{padding:4px 2px}
  .content{padding:8px;padding-bottom:70px}
  /* Login screen better on tiny phones */
  .login-left{padding:20px 16px}
  .ll-content h1{font-size:1.2rem}
  .login-right{padding:20px 16px}
}

/* ═══════════════════════════════════════════════════════════
   MICRO EFFECTS & POLISH
═══════════════════════════════════════════════════════════ */

/* Ripple on btn-submit */
.btn-submit,.btn-add,.btn-claim{position:relative;overflow:hidden}
.btn-submit::after,.btn-add::after,.btn-claim::after{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,.18);border-radius:inherit;
  transform:scale(0);opacity:0;transition:transform .4s,opacity .4s;
}
.btn-submit:active::after,.btn-add:active::after,.btn-claim:active::after{transform:scale(1);opacity:1;transition:0s}

/* Smooth page-view entry */
.page-view.active{animation:pageViewIn .3s cubic-bezier(.16,1,.3,1) both}
@keyframes pageViewIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* KPI entry animation */
.kpi,.kpi2{animation:kpiPop .4s cubic-bezier(.34,1.56,.64,1) both}
.kpi:nth-child(1),.kpi2:nth-child(1){animation-delay:.05s}
.kpi:nth-child(2),.kpi2:nth-child(2){animation-delay:.1s}
.kpi:nth-child(3),.kpi2:nth-child(3){animation-delay:.15s}
.kpi:nth-child(4),.kpi2:nth-child(4){animation-delay:.2s}
@keyframes kpiPop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Dash card fade-in */
.dash-card{animation:cardIn .35s cubic-bezier(.16,1,.3,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Focus ring */
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.12)!important}

/* Smooth hover lift for all cards */
.note-card,.resource-card,.class-card,.club-card,.intern-card,.student-card,.ait-card,.dash-card{
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease,border-color .25s ease!important;
}

/* btn-sm press feedback */
.btn-sm:active{transform:scale(.96)}
.btn-submit:active{transform:translateY(1px)}

/* Sidebar link hover */
.sidebar-nav a{transition:background .18s,color .18s,transform .18s,padding-left .18s}
.sidebar-nav a:hover{transform:translateX(3px);padding-left:17px!important}

/* Empty state fade in */
.empty-state,.empty-state.small{animation:cardIn .3s ease both}

/* Quick access card entries */
.qnav-item{transition:transform .22s cubic-bezier(.34,1.56,.64,1),background .2s,box-shadow .2s}
.qnav-item:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 6px 16px rgba(37,99,235,.15)}
.qnav-item:active{transform:scale(.96)}

/* Topbar user hover */
.topbar-user:hover{background:var(--blue-xl)!important;transition:background .2s}

/* Toast smooth slide */
.toast{transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .3s ease!important}