:root {
      --bg:#2e0a4a;
      --card:#1f1f2b;
      --radius:10px;
      --text:#e6e8ff;
      --muted:#8c8fc9;
      --accent:linear-gradient(135deg,#9f7cff,#6b4eff);
      font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    }
    *{box-sizing:border-box;}
    body{
      margin:0;
      min-height:100vh;
      background: var(--bg);
      color: var(--text);
      padding:16px;
    }
    .layout{
      max-width:1120px;
      margin:0 auto;
      display:grid;
      gap:24px;
      grid-template-columns: 1fr 320px;
    }
    .full{
      grid-column:1/-1;
    }
    .card{
      background: var(--card);
      border-radius: var(--radius);
      padding:22px 24px;
      display:flex;
      flex-direction:column;
      gap:14px;
      position:relative;
    }
    h1{
      margin:0;
      font-size:2rem;
      background: -webkit-linear-gradient(135deg,#b266ff,#7d5bff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .small{
      font-size:.75rem;
      color: var(--muted);
    }
    .tabs{
      display:flex;
      gap:8px;
      margin-bottom:8px;
      flex-wrap:wrap;
    }
    .tab{
      padding:10px 18px;
      border-radius:8px;
      cursor:pointer;
      background:#1f1f2b;
      border:1px solid rgba(255,255,255,.08);
      transition:.2s;
      font-weight:600;
    }
    .tab.active{
      background: var(--accent);
      border:none;
      color:#fff;
      box-shadow:0 20px 50px -10px rgba(159,124,255,.6);
    }
    .btn{
      padding:10px 16px;
      border:none;
      border-radius:8px;
      cursor:pointer;
      font-weight:600;
      background: var(--accent);
      color:#fff;
      transition:.2s;
    }
    .secondary{
      background:none;
      border:1px solid rgba(255,255,255,.15);
      color:#c7c9e6;
    }
    input, select{
      padding:10px 12px;
      border-radius:6px;
      border:1px solid rgba(255,255,255,.08);
      background:#1f1f2b;
      color:#fff;
      font-size:1rem;
      width:100%;
      outline:none;
    }
    .flex{
      display:flex;
      gap:16px;
      flex-wrap:wrap;
      align-items:center;
    }
    .stat-row{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }
    .stat{
      flex:1;
      min-width:120px;
      background: rgba(255,255,255,.03);
      border-radius:6px;
      padding:10px 14px;
    }
    .passage{
      background: rgba(255,255,255,.04);
      border-radius:6px;
      padding:14px;
      font-family: Arial, Helvetica, sans-serif;
      font-size:25px;
      line-height:1.35;
      max-height:100px;
      overflow:hidden;
      white-space:pre-wrap;
      word-break:break-word;
    }
    textarea{
      width:100%;
      min-height:100px;
      resize:none;
      background:#1f1f2b;
      border:none;
      border-radius:6px;
      padding:14px;
      font-family: monospace;
      font-size:14px;
      color:#fff;
      outline:none;
      line-height:1.3;
    }
    .score-table{
      width:100%;
      border-collapse: collapse;
      font-size:12px;
    }
    .score-table th, .score-table td{
      padding:8px 6px;
      text-align:left;
    }
    .score-table tr:nth-child(odd){ background: rgba(255,255,255,.02); }
    .badge{ padding:4px 10px; border-radius:999px; font-size:10px; display:inline-block; }
    .correct { color:#4ade80; }
    .incorrect { color:#f87171; }
    .current { background-color: #555; }
    .pill{ background: rgba(255,255,255,.08); padding:4px 12px; border-radius:999px; font-size:11px; }
    .leaderboard{
      max-height:320px;
      overflow:auto;
    }
    .hidden{ display:none; }
    .divider{ height:1px; background: rgba(255,255,255,.08); margin:12px 0; }
    .error{ color:#ff6b6b; }
    .success{ color:#6bf58f; }
    .tag{ background: rgba(255,255,255,.06); padding:3px 10px; border-radius:6px; font-size:11px; margin-right:6px; display:inline-block;}
    .inline{ display:inline-flex; gap:6px; align-items:center; }
    .link{ cursor:pointer; color:#afaaff; text-decoration:underline; font-size:.85rem; }
    form { display:flex; flex-direction:column; gap:10px; }
    .auth-box { display:flex; gap:22px; flex-wrap:wrap; }
    .form-wrapper { max-width:480px; width:100%; }

    #auth-message { margin-top:4px; }