:root {
      --bg: #f4f7fb;
      --card: #ffffff;
      --muted: #6b7280;
      --accent: #4f46e5;
      --accent-2: #06b6d4;
      --success: #10b981;
      --danger: #ef4444;
      --glass: rgba(255, 255, 255, 0.6);
      --radius: 12px;
      --shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
      --star-yellow: #f59e0b;
      --text: #0f172a;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    /* Dark theme variables */
    body.dark {
      --bg: #071029;
      --card: #07182a;
      --muted: #9aa7b8;
      --accent: #8b5cf6;
      --accent-2: #06b6d4;
      --text: #e6eef8;
      --shadow: 0 6px 18px rgba(2, 6, 23, 0.6);
    }

    * {
      box-sizing: border-box
    }

    body {
      margin: 0;
      background: linear-gradient(180deg, #f7fbff 0%, var(--bg) 100%);
      color: var(--text);
      transition: background 220ms ease, color 220ms ease;
    }

    .container {
      max-width: 1100px;
      margin: 28px auto;
      padding: 20px;
    }

    .card {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 20px;
      transition: background 220ms ease, box-shadow 220ms ease;
    }

    #tabContent{
        width: 550px;
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .logo {
      width: 48px;
      height: 48px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 700
    }

    h1 {
      font-size: 18px;
      margin: 0
    }

    .sub {
      color: var(--muted);
      font-size: 13px
    }

    .auth-wrap {
      display: flex;
      gap: 12px;
      align-items: center
    }

    .btn {
      background: var(--accent);
      color: white;
      padding: 8px 12px;
      border-radius: 10px;
      border: 0;
      cursor: pointer;
      font-weight: 600;
      transition: background 220ms ease, transform 180ms ease;
    }

    .btn:hover {
      background: var(--accent-2);
      transform: translateY(-2px);
    }

    .btn.ghost {
      background: transparent;
      color: var(--accent);
      border: 1px solid rgba(79, 70, 229, 0.12)
    }

    .small {
      padding: 6px 10px;
      font-size: 13px;
      border-radius: 8px
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 18px
    }

    label {
      font-weight: 600;
      font-size: 13px;
      margin-bottom: 6px;
      display: block
    }

    input,
    select,
    textarea {
      padding: 10px;
      border-radius: 8px;
      border: 1px solid #e6e9ef;
      background: transparent;
      color: var(--text);
      transition: border-color 220ms ease;
    }

    input:focus, select:focus, textarea:focus {
      outline: none;
      border-color: var(--accent);
    }

    textarea {
      min-height: 80px
    }

    .muted {
      color: var(--muted);
      font-size: 13px
    }

    .center {
      display: flex;
      justify-content: center
    }

    nav.sidebar {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
      border-radius: 10px
    }

    .nav-btn {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: background 220ms ease, border-color 220ms ease;
    }

    .nav-btn:hover {
      background: rgba(79, 70, 229, 0.03)
    }

    .nav-btn.active {
      background: linear-gradient(90deg, rgba(79, 70, 229, 0.06), rgba(6, 182, 212, 0.02));
      border-color: rgba(79, 70, 229, 0.08);
      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.05)
    }

    .profile-card {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 12px;
      border-radius: 10px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), transparent);
    }

    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 10px;
      background: linear-gradient(135deg, #e9e5ff, #f8fcff);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: var(--accent);
      overflow: hidden;
      transition: transform 220ms ease;
    }

    .avatar:hover {
      transform: scale(1.05);
    }

    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .section {
      margin-top: 12px
    }

    .flex {
      display: flex;
      gap: 12px;
      align-items: center
    }

    table {
      width: 100%;
      border-collapse: collapse
    }

    table td,
    table th {
      padding: 10px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      text-align: left
    }

    .subjects-list {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 8px
    }

    .subject-pill {
      padding: 8px;
      border-radius: 8px;
      border: 1px solid rgba(79, 70, 229, 0.06);
      background: transparent;
      transition: background 220ms ease, transform 180ms ease;
    }

    .subject-pill:hover {
      background: rgba(79, 70, 229, 0.05);
      transform: translateY(-2px);
    }

    .quiz-area {
      display: grid;
      gap: 12px
    }

    .progress-wrap {
      background: rgba(79, 70, 229, 0.06);
      border-radius: 999px;
      padding: 6px
    }

    .progress-bar {
      height: 16px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      width: 0%;
      transition: width 400ms ease
    }

    .small-muted {
      font-size: 13px;
      color: var(--muted)
    }

    .toast {
      position: fixed;
      right: 18px;
      bottom: 18px;
      background: #111827;
      color: white;
      padding: 10px 14px;
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(2, 6, 23, 0.4);
      display: none;
      z-index: 9999;
      animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
      from { transform: translateY(20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    footer {
      margin-top: 18px;
      text-align: center;
      color: var(--muted);
      font-size: 13px
    }

    .stars {
      display: flex;
      gap: 6px;
      align-items: center
    }

    .star {
      font-size: 22px;
      color: #9ca3af;
      transition: color 300ms ease, transform 250ms ease
    }

    .star.filled {
      color: var(--star-yellow);
      transform: scale(1.05)
    }

    .ach-card {
      padding: 10px;
      border-radius: 10px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), transparent);
      border: 1px solid rgba(79, 70, 229, 0.03)
    }

    .subject-pill:hover{
        cursor: pointer;
        background-color: #193e45b0;
        color: #fff;
    }
    .controls {
      display: flex;
      gap: 8px;
      align-items: center
    }

    .top-controls {
      display: flex;
      gap: 8px;
      align-items: center
    }

    .icon-btn {
      background: transparent;
      border: 0;
      padding: 8px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 18px;
      color: var(--muted);
      transition: color 220ms ease, background 220ms ease;
    }

    .icon-btn:hover {
      background: rgba(79, 70, 229, 0.05);
    }

    .icon-btn.active {
      color: var(--accent)
    }

    .profile-photo-preview {
      width: 100%;
      height: 160px;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid rgba(0, 0, 0, 0.06)
    }

    .hidden {
      display: none
    }

    /* Leaderboard Styles */
    .leaderboard-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 12px;
    }

    .leaderboard-table th {
      background: rgba(79, 70, 229, 0.06);
      padding: 12px;
      text-align: left;
      font-weight: 600;
    }

    .leaderboard-table td {
      padding: 12px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .leaderboard-table tr:hover {
      background: rgba(79, 70, 229, 0.03);
    }

    .rank-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      font-weight: 700;
      font-size: 14px;
    }

    .rank-1 {
      background: linear-gradient(135deg, #FFD700, #FFA500);
      color: white;
    }

    .rank-2 {
      background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
      color: white;
    }

    .rank-3 {
      background: linear-gradient(135deg, #CD7F32, #8B4513);
      color: white;
    }

    .rank-other {
      background: rgba(79, 70, 229, 0.1);
      color: var(--accent);
    }

    .performance-score {
      font-weight: 700;
      color: var(--accent);
    }

    .leaderboard-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    .leaderboard-filter {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    @media (max-width:920px) {
      .grid {
        grid-template-columns: 1fr;
      }

      nav.sidebar {
        flex-direction: row;
        overflow-x: auto;
        padding: 10px
      }
    }