:root { --pat-navy:#0c1c30; --pat-blue:#3793D1; --pat-blue-dark:#1B6FA8; --pat-blue-light:#60a5fa; --pat-gray-100:#f8f9fa; --pat-gray-200:#e9ecef; --pat-gray-600:#6c757d; --pat-gray-700:#495057; }
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Inter',sans-serif; background:linear-gradient(135deg,#0A1628,#132744 50%,#1B3A5C); min-height:100vh; color:#fff; }
    .hero { text-align:center; padding:60px 20px 40px; }
    .hero h1 { font-size:2.4rem; font-weight:900; background:linear-gradient(135deg,#60a5fa,#3793D1,#22d3ee); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:12px; }
    .hero p { color:rgba(255,255,255,0.6); font-size:1.05rem; max-width:600px; margin:0 auto; line-height:1.6; }
    .hero .badge { display:inline-block; margin-top:16px; padding:6px 16px; background:rgba(55,147,209,0.15); border:1px solid rgba(55,147,209,0.3); border-radius:50px; font-size:0.8rem; font-weight:700; color:#60a5fa; text-transform:uppercase; letter-spacing:0.08em; }
    .tests-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; max-width:1100px; margin:0 auto; padding:0 20px 60px; }
    .test-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:20px; padding:28px; cursor:pointer; transition:all 0.3s ease; position:relative; overflow:hidden; }
    .test-card:hover { transform:translateY(-4px); border-color:rgba(55,147,209,0.4); box-shadow:0 12px 40px rgba(0,0,0,0.3); background:rgba(255,255,255,0.06); }
    .test-card .tc-icon { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:16px; }
    .test-card .tc-icon.blue { background:rgba(55,147,209,0.15); color:#60a5fa; }
    .test-card .tc-icon.green { background:rgba(34,197,94,0.15); color:#22c55e; }
    .test-card .tc-icon.purple { background:rgba(168,85,247,0.15); color:#a855f7; }
    .test-card .tc-icon.amber { background:rgba(245,158,11,0.15); color:#f59e0b; }
    .test-card .tc-icon.red { background:rgba(239,68,68,0.15); color:#ef4444; }
    .test-card .tc-icon.cyan { background:rgba(6,182,212,0.15); color:#06b6d4; }
    .test-card .tc-icon.rose { background:rgba(244,63,94,0.15); color:#f43f5e; }
    .test-card h3 { font-size:1.1rem; font-weight:800; margin-bottom:6px; color:#fff; }
    .test-card .tc-desc { font-size:0.88rem; color:rgba(255,255,255,0.5); line-height:1.5; margin-bottom:16px; }
    .test-card .tc-meta { display:flex; gap:12px; font-size:0.75rem; font-weight:600; color:rgba(255,255,255,0.35); }
    .test-card .tc-meta span { display:flex; align-items:center; gap:4px; }
    .test-card .tc-play { position:absolute; top:20px; right:20px; width:40px; height:40px; border-radius:50%; background:rgba(55,147,209,0.2); border:1px solid rgba(55,147,209,0.3); display:flex; align-items:center; justify-content:center; color:#60a5fa; font-size:0.9rem; transition:all 0.2s; }
    .test-card:hover .tc-play { background:rgba(55,147,209,0.4); transform:scale(1.1); }

    /* Test Runner Overlay */
    .test-runner { position:fixed; inset:0; z-index:99999; background:#0A1628; display:none; flex-direction:column; }
    .test-runner.active { display:flex; }
    .tr-topbar { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; background:rgba(12,28,48,0.95); border-bottom:1px solid rgba(255,255,255,0.06); }
    .tr-topbar h2 { font-size:1rem; font-weight:700; color:#fff; }
    .tr-topbar .tr-close { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.7); width:36px; height:36px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; }
    .tr-body { flex:1; display:flex; align-items:center; justify-content:center; padding:20px; }
    .tr-content { text-align:center; max-width:700px; width:100%; }
    .tr-instruction { margin-bottom:30px; }
    .tr-instruction h3 { font-size:1.6rem; font-weight:800; margin-bottom:8px; }
    .tr-instruction p { color:rgba(255,255,255,0.5); font-size:0.95rem; }
    .tr-btn { padding:16px 48px; border-radius:12px; border:none; font-size:1rem; font-weight:700; cursor:pointer; transition:all 0.2s; }
    .tr-btn-start { background:linear-gradient(135deg,#3793D1,#1B6FA8); color:#fff; box-shadow:0 4px 20px rgba(55,147,209,0.3); }
    .tr-btn-start:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(55,147,209,0.4); }
    .tr-btn-next { background:#22c55e; color:#fff; }
    .tr-score { font-size:4rem; font-weight:900; color:#60a5fa; margin:20px 0; }
    .tr-score-label { font-size:0.9rem; color:rgba(255,255,255,0.5); }
    .tr-timer { font-family:'JetBrains Mono',monospace; font-size:2rem; font-weight:700; color:#f59e0b; }
    .tr-feedback { font-size:1.2rem; font-weight:700; padding:20px; border-radius:12px; margin:16px 0; }
    .tr-feedback.correct { background:rgba(34,197,94,0.15); color:#22c55e; border:1px solid rgba(34,197,94,0.3); }
    .tr-feedback.wrong { background:rgba(239,68,68,0.15); color:#ef4444; border:1px solid rgba(239,68,68,0.3); }

    /* Stroop */
    .stroop-word { font-size:5rem; font-weight:900; margin:30px 0; transition:color 0.1s; }
    .stroop-options { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
    .stroopt-btn { padding:14px 28px; border-radius:12px; border:2px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.05); color:#fff; font-weight:700; font-size:0.95rem; cursor:pointer; transition:all 0.15s; min-width:100px; }
    .stroopt-btn:hover { border-color:#3793D1; background:rgba(55,147,209,0.15); }

    /* Reaction */
    .reaction-zone { width:300px; height:300px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:700; cursor:pointer; transition:background 0.1s; margin:20px auto; user-select:none; }
    .reaction-zone.waiting { background:rgba(239,68,68,0.2); border:3px solid #ef4444; color:#ef4444; }
    .reaction-zone.ready { background:rgba(245,158,11,0.2); border:3px solid #f59e0b; color:#f59e0b; }
    .reaction-zone.go { background:rgba(34,197,94,0.3); border:3px solid #22c55e; color:#22c55e; }
    .reaction-zone.result { background:rgba(55,147,209,0.2); border:3px solid #3793D1; color:#60a5fa; }

    /* N-Back */
    .nback-display { font-size:6rem; font-weight:900; color:#fff; margin:30px 0; min-height:120px; display:flex; align-items:center; justify-content:center; }
    .nback-btns { display:flex; gap:16px; justify-content:center; }
    .nback-btn { padding:16px 40px; border-radius:12px; border:2px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.05); color:#fff; font-weight:700; font-size:1.1rem; cursor:pointer; transition:all 0.15s; }
    .nback-btn.match { border-color:#22c55e; color:#22c55e; }
    .nback-btn.nomatch { border-color:#ef4444; color:#ef4444; }
    .nback-btn:hover { transform:scale(1.05); }

    /* Pursuit */
    #pursuit-canvas { border:2px solid rgba(255,255,255,0.1); border-radius:16px; background:rgba(0,0,0,0.3); cursor:none; }

    /* Pattern */
    .pattern-grid { display:grid; gap:8px; margin:20px auto; }
    .pattern-cell { width:60px; height:60px; border-radius:10px; background:rgba(255,255,255,0.05); border:2px solid rgba(255,255,255,0.1); transition:all 0.2s; }
    .pattern-cell.filled { background:rgba(55,147,209,0.4); border-color:#3793D1; }
    .pattern-cell.clickable { cursor:pointer; }
    .pattern-cell.clickable:hover { border-color:#60a5fa; background:rgba(55,147,209,0.2); }

    @keyframes fadeIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
    .fade-in { animation:fadeIn 0.4s ease; }