*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}:root{--bg:#f8f4ef;--bg-end:#f0ebe3;--surface:#fff;--surface2:#f4efe8;--surface3:#eae3da;--border:rgba(0,0,0,.07);--border-strong:rgba(0,0,0,.13);--text:#1e2a3a;--text-muted:#7a7a8a;--text-faint:#b0aaa8;--purple:#7c3aed;--purple-light:#8b5cf6;--purple-glow:rgba(124,58,237,.15);--green:#16a34a;--green-glow:rgba(22,163,74,.15);--red:#dc2626;--red-glow:rgba(220,38,38,.15);--orange:#d97706;--teal:#0d9488;--blue:#2563eb;--pink:#db2777;--yellow:#ca8a04;--dark-card:#1e2a3a;--dark-card2:#111827;--muted:#7a7a8a;--text-dark:#1e2a3a;--card-shadow:0 2px 16px rgba(0,0,0,.08);--card-shadow-sm:0 1px 6px rgba(0,0,0,.06);--card-shadow-dark:0 8px 32px rgba(0,0,0,.1);--sidebar-shadow:2px 0 16px rgba(0,0,0,.06);--sidebar-w:240px;--rightpanel-w:280px;--content-gap:24px}body,html{background:var(--bg);min-height:100vh}body{color:var(--text);font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased}.app-shell{display:flex;flex-direction:column;min-height:100vh;width:100%}.app-content{flex:1 1;padding-top:56px;padding-bottom:16px;width:100%}.top-bar{position:fixed;top:0;left:0;right:0;height:56px;background:transparent;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:none;display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:200}.top-bar-nav{display:none}.top-bar-nav-item{background:none;border:none;color:var(--text-muted);font-weight:600;font-size:.875rem;padding:6px 14px;border-radius:8px;cursor:pointer;font-family:Poppins,sans-serif;transition:background .15s,color .15s}.top-bar-nav-item:hover{background:var(--surface2);color:var(--text)}.top-bar-nav-item.active{background:rgba(124,58,237,.1);color:var(--purple)}@media (min-width:640px){.top-bar-nav{display:flex;gap:4px}.top-bar{padding:0 32px}}@media (min-width:1024px){.app-content>*{max-width:780px;margin-left:auto;margin-right:auto}}@media (min-width:640px){.bottom-nav{display:none!important}}@media (max-width:639px){.app-content{padding-bottom:80px}}@media (min-width:1024px){.app-content{padding-top:72px}}.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--card-shadow)}.card-elevated{background:var(--surface2);border:1px solid var(--border-strong);border-radius:16px;box-shadow:var(--card-shadow-dark)}button{cursor:pointer;font-family:inherit;border:none;outline:none;transition:background .15s,box-shadow .1s,transform .08s}button:active{transform:scale(.97)}.snky-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border-radius:14px;border-width:2px;border-style:solid;font-weight:700;font-size:15px;padding:0 22px;height:50px;line-height:1;text-align:center;-moz-user-select:none;user-select:none;-webkit-user-select:none;touch-action:manipulation;font-family:Poppins,sans-serif;letter-spacing:.01em;transition:background .12s,box-shadow .08s,transform .08s;outline:none;min-width:100px;cursor:pointer}@media (min-width:768px){.snky-btn{min-width:120px;padding:0 26px}}.snky-btn--primary{background:#fbeee0;border-color:#422800;box-shadow:4px 4px 0 0 #422800;color:#422800}.snky-btn--primary:hover:not(:disabled){background:#fff}.snky-btn--primary:active:not(:disabled){box-shadow:2px 2px 0 0 #422800;transform:translate(2px,2px)}.snky-btn--dark{background:#1e2a3a;border-color:#0a1120;box-shadow:4px 4px 0 0 #0a1120;color:#fff}.snky-btn--dark:hover:not(:disabled){background:#273447}.snky-btn--dark:active:not(:disabled){box-shadow:2px 2px 0 0 #0a1120;transform:translate(2px,2px)}.snky-btn--danger{background:#fff0f0;border-color:#7a1010;box-shadow:4px 4px 0 0 #7a1010;color:#7a1010}.snky-btn--danger:hover:not(:disabled){background:#fff}.snky-btn--danger:active:not(:disabled){box-shadow:2px 2px 0 0 #7a1010;transform:translate(2px,2px)}.snky-btn--create{background:#f3eefe;border-color:#4c1d95;box-shadow:4px 4px 0 0 #4c1d95;color:#4c1d95}.snky-btn--create:hover:not(:disabled){background:#fff}.snky-btn--create:active:not(:disabled){box-shadow:2px 2px 0 0 #4c1d95;transform:translate(2px,2px)}.snky-btn:disabled{opacity:.45;cursor:not-allowed}input{font-family:inherit;outline:none;background:var(--surface);color:var(--text);border-radius:10px;padding:.75rem 1rem;border:1.5px solid var(--border-strong);transition:border-color .15s,box-shadow .15s}input:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-glow)}a{text-decoration:none;color:inherit}.float-deco{position:fixed;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:.15}@media (min-width:1024px){.float-deco{display:none}}.answer-btn{width:100%;padding:16px 20px;border-radius:12px;background:var(--surface2);border:1.5px solid var(--border);color:var(--text);font-size:.95rem;font-weight:600;text-align:left;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s,transform .08s;font-family:inherit;display:flex;align-items:center;gap:12px}.answer-btn:hover:not(:disabled):not(.selected):not(.correct):not(.wrong){background:var(--surface3);border-color:var(--purple);box-shadow:0 0 0 2px var(--purple-glow);transform:translateY(-1px)}.answer-btn.selected{background:rgba(124,58,237,.2);border-color:var(--purple);box-shadow:0 0 0 2px var(--purple-glow)}.answer-btn.correct{background:rgba(34,197,94,.15);border-color:var(--green);box-shadow:0 0 12px var(--green-glow);color:#4ade80}.answer-btn.wrong{background:rgba(239,68,68,.12);border-color:var(--red);box-shadow:0 0 8px var(--red-glow);color:#f87171}.answer-btn:disabled{cursor:not-allowed}.answer-option-label{width:28px;height:28px;border-radius:8px;background:var(--surface3);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--text-muted);flex-shrink:0;transition:background .15s,color .15s}.correct .answer-option-label{background:var(--green);color:#fff;border-color:var(--green)}.wrong .answer-option-label{background:var(--red);color:#fff;border-color:var(--red)}.selected .answer-option-label{background:var(--purple);color:#fff;border-color:var(--purple)}.timer-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}.timer-ring svg{transform:rotate(-90deg)}.timer-ring-track{fill:none;stroke:var(--surface3)}.timer-ring-fill{fill:none;stroke:var(--purple);stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke .5s}.timer-ring-fill.warning{stroke:var(--orange)}.timer-ring-fill.danger{stroke:var(--red)}.timer-ring-label{position:absolute;font-weight:800;font-size:1rem;color:var(--text);font-family:Poppins,sans-serif}.question-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px;box-shadow:var(--card-shadow-dark);position:relative;overflow:hidden}.question-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--purple),var(--purple-light));border-radius:20px 20px 0 0}.question-text{font-size:1.25rem;font-weight:700;color:var(--text);line-height:1.5;margin-bottom:28px}@media (min-width:1024px){.question-text{font-size:1.5rem}}.leaderboard-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;transition:background .15s}.leaderboard-row:hover{background:var(--surface2)}.leaderboard-rank{font-weight:800;font-size:.85rem;color:var(--text-muted);width:20px;text-align:center;flex-shrink:0}.leaderboard-rank.gold{color:gold}.leaderboard-rank.silver{color:silver}.leaderboard-rank.bronze{color:#cd7f32}.leaderboard-score{margin-left:auto;font-size:.85rem}.leaderboard-score,.score-chip{font-weight:700;color:var(--purple-light)}.score-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(124,58,237,.15);border:1px solid rgba(124,58,237,.3);border-radius:8px;padding:6px 14px;font-size:.9rem}.progress-bar{width:100%;height:4px;background:var(--surface3);border-radius:2px;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--purple-light));border-radius:2px;transition:width .4s ease}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.15)}