/* ===== CSS VARIABLES ===== */
  :root {
    --bg:          #0f1117;
    --bg2:         #161b27;
    --bg3:         #1e2537;
    --border:      #2a3150;
    --border2:     #3a4468;
    --text:        #e8eaf6;
    --text2:       #8892b4;
    --text3:       #525e82;
    --accent:      #4f7cff;
    --accent2:     #3563e9;
    --green:       #2dd4a0;
    --green2:      #1a7a5e;
    --green-bg:    #0d2e24;
    --red:         #f4667a;
    --red2:        #c04057;
    --red-bg:      #2e0d15;
    --amber:       #f0b429;
    --amber-bg:    #2e2208;
    --purple:      #a78bfa;
    --radius:      12px;
    --radius-sm:   8px;
    --radius-lg:   18px;
    --shadow:      0 4px 24px rgba(0,0,0,.4);
    --shadow-sm:   0 2px 8px rgba(0,0,0,.3);
    --nav-w:       240px;
    --transition:  all .18s cubic-bezier(.4,0,.2,1);
  }

  /* ===== RESET ===== */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-size: 15px; }
  body {
    font-family: 'DM Sans', sans-serif !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    min-height: 100vh !important;
    display: flex !important;
    overflow: hidden !important;
  }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: none; outline: none; }
  input, select, textarea { font-family: inherit; }

  /* ===== SCROLLBAR ===== */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

  /* ===== SIDEBAR ===== */
  #sidebar {
    width: var(--nav-w) !important;
    min-height: 100vh !important;
    background: var(--bg2) !important;
    border-right: 1px solid var(--border) !important;
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0; left: 0 !important;
    z-index: 100 !important;
    transition: var(--transition) !important;
  }

  .sidebar-logo {
    padding: 28px 20px 20px !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .sidebar-logo .logo-mark {
    font-family: 'Fraunces', serif !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    line-height: 1 !important;
    letter-spacing: -.5px !important;
  }
  .sidebar-logo .logo-mark span { color: var(--accent); }
  .sidebar-logo .logo-sub {
    font-size: .72rem !important;
    color: var(--text3) !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    margin-top: 4px !important;
    font-weight: 500 !important;
  }

  .sidebar-section {
    padding: 14px 12px 6px !important;
    font-size: .68rem !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--text3) !important;
    font-weight: 600 !important;
  }

  .nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    margin: 1px 8px !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text2) !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    user-select: none !important;
  }
  .nav-item:hover { background: var(--bg3); color: var(--text); }
  .nav-item.active {
    background: linear-gradient(135deg, rgba(79,124,255,.18), rgba(79,124,255,.08)) !important;
    color: var(--accent) !important;
    border: 1px solid rgba(79,124,255,.2) !important;
  }
  .nav-item .nav-icon {
    width: 20px; height: 20px !important;
    display: flex; align-items: center; justify-content: center !important;
    font-size: 1rem; flex-shrink: 0 !important;
  }
  .nav-item .nav-badge {
    margin-left: auto !important;
    background: var(--accent) !important;
    color: #fff !important;
    font-size: .65rem !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 99px !important;
    min-width: 18px !important;
    text-align: center !important;
  }

  .sidebar-bottom {
    margin-top: auto !important;
    padding: 16px 8px !important;
    border-top: 1px solid var(--border) !important;
  }

  /* Exercice selector */
  .exercice-pill {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    background: var(--bg3) !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
    cursor: pointer !important;
    font-size: .82rem !important;
    color: var(--text2) !important;
    transition: var(--transition) !important;
  }
  .exercice-pill:hover { border-color: var(--accent); color: var(--accent); }
  .exercice-pill select {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    font-size: inherit !important;
    font-family: inherit !important;
    cursor: pointer !important;
    outline: none !important;
    flex: 1 !important;
    appearance: none !important;
  }
  .exercice-pill select option { background: var(--bg2); color: var(--text); }

  /* ===== MAIN CONTENT ===== */
  #main {
    margin-left: var(--nav-w) !important;
    flex: 1 !important;
    height: 100vh !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ===== TOPBAR ===== */
  #topbar {
    position: sticky; top: 0 !important;
    background: rgba(15,17,23,.85) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 32px !important;
    height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 50 !important;
  }
  .topbar-title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
  }
  .topbar-title span {
    color: var(--text3) !important;
    font-weight: 400 !important;
    font-size: .85rem !important;
    margin-left: 10px !important;
  }
  .topbar-actions {
    display: flex; align-items: center; gap: 10px !important;
  }