*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy: #0f1f3d; --navy-light: #1a2e52;
  --gold: #c9a84c; --gold-bg: #fdf8ee; --gold-light: #e2c47a;
  --cream: #f5f0e8; --cream-dark: #ede7d9;
  --text-dark: #0f1f3d; --text-muted: #6b7280;
  --sidebar-width: 275px; --border: #e5e7eb;
  --green: #16a34a; --green-bg: #f0fdf4; --green-border: #bbf7d0;
  --red: #dc2626; --red-bg: #fff1f2; --red-border: #fecdd3;
  --beginner: #16a34a; --beginner-bg: #dcfce7;
  --intermediate: #d97706; --intermediate-bg: #fef3c7;
  --advanced: #dc2626; --advanced-bg: #fee2e2; --blue: #3b84f7;
}
  body { font-family: 'Crimson Pro', Georgia, serif; background: var(--cream); color: var(--text-dark); min-height: 100vh; display: flex; overflow-x: hidden; position: relative;}

  /* SIDEBAR */
  .sidebar { width: var(--sidebar-width); background: var(--navy); min-height: 100vh; position: fixed; top:0; left:0; display:flex; flex-direction:column; z-index:100; }
  .sidebar-logo { display:flex; align-items:center; gap:10px; padding:18px 16px; border-bottom:1px solid rgba(255,255,255,0.08); }
  .logo-icon { width:100px; height:100px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-size:11px; font-weight:700; color:var(--navy); flex-shrink:0; }
  .logo-text { display:flex; flex-direction:column; line-height:1.1; }
  .logo-text .top { font-family:'Space Mono',monospace; font-size:20px; font-weight:700; color:#fff; letter-spacing:0.05em; }
  .logo-text .bot { font-family:'Space Mono',monospace; font-size:20px; font-weight:700; color:var(--gold); letter-spacing:0.05em; }
  .sidebar-nav { flex:1; padding:20px 0; overflow-y:auto; }
  .nav-section-label { font-family:'Space Mono',monospace; font-size:9px; font-weight:700; letter-spacing:0.12em; color:rgba(255,255,255,0.35); padding:0 16px 8px; margin-top:8px; }
  .nav-item { display:flex; align-items:center; gap:10px; padding:9px 16px; color:rgba(255,255,255,0.65); font-family:'Crimson Pro',serif; font-size:14px; cursor:pointer; transition:all 0.15s; border-left:2px solid transparent; text-decoration:none; }
  .nav-item:hover { color:#fff; background:rgba(255,255,255,0.05); }
  .nav-item.active { color:#fff; background:rgba(255,255,255,0.08); border-left-color:var(--gold); }
  .nav-icon { width:16px; height:16px; opacity:0.7; flex-shrink:0; display:inline-block; align-items:center; justify-content:center; vertical-align: middle; margin-right: 10px;}
  .nav-item.active .nav-icon { opacity:1; }
  .sidebar-footer { padding:14px 16px; border-top:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:space-between; }
  .user-info { display:flex; align-items:center; gap:8px; }
  .avatar { width:30px; height:30px; border-radius:50%; background:var(--navy-light); border:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-size:11px; color:rgba(255,255,255,0.7); font-family:'Space Mono',monospace; }

  a.profile-av-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  a.profile-av-link:hover {
    filter: brightness(1.07);
    box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.5);
  }
  .user-name { font-size:13px; color:rgba(255,255,255,0.8); line-height:1.2; }
  .user-role { font-size:10px; color:rgba(255,255,255,0.4); font-family:'Space Mono',monospace; letter-spacing:0.05em; }
  .logout-btn { background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.4); padding:4px; transition:color 0.15s; }
  .logout-btn:hover { color:rgba(255,255,255,0.7); }
  .sidebar-signin-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.sidebar-signin-btn:active {
    transform: translateY(0px);
}

.logout-btn:hover {
    color: var(--red, #fca5a5) !important; /* Turns soft red on hover */
    transform: translateX(2px); /* Subtle nudge effect */
}

  /* FOOTER */
  footer { background:var(--cream-dark); border-top:1px solid #ddd; padding:28px 64px; display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
  .footer-brand .name { font-family:'Space Mono',monospace; font-size:12px; font-weight:700; letter-spacing:0.12em; color:var(--navy); }
  .footer-brand .sub  { font-size:13px; color:var(--text-muted); margin-top:2px; }
  .footer-social { display:flex; gap:10px; }
  .social-btn { width:34px; height:34px; border:1px solid #d1d5db; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--navy); transition:all 0.15s; text-decoration:none; }
  .social-btn:hover { background:var(--navy); color:#fff; border-color:var(--navy); }
  .footer-bottom { background:var(--cream-dark); border-top:1px solid #e5e7eb; padding:14px 64px; display:flex; align-items:center; justify-content:space-between; }
  .footer-copy { font-size:12px; color:var(--text-muted); }
  .footer-disc { font-family:'Space Mono',monospace; font-size:9px; color:var(--text-muted); border:1px solid #d1d5db; padding:4px 10px; letter-spacing:0.06em; }
  
tef-announcement {
  display: block;
  width: 100%;
  margin-left: calc(-1 * var(--padding, 0px));
}

.pinned-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-top: 4px;
}