@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Outfit:wght@400;500;700;900&display=swap";:root{--bg-gradient-start:#0f172a;--bg-gradient-end:#1e1b4b;--text-primary:#f8fafc;--text-secondary:#cbd5e1;--accent-purple:#8b5cf6;--accent-purple-hover:#7c3aed;--accent-pink:#ec4899;--accent-blue:#3b82f6;--accent-blue-hover:#2563eb;--accent-green:#10b981;--accent-green-hover:#059669;--accent-orange:#f97316;--accent-red:#ef4444;--accent-teal:#14b8a6;--glass-bg:#ffffff0d;--glass-border:#ffffff1a;--glass-shadow:0 8px 32px 0 #0000004d}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,sans-serif}body{background:linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));color:var(--text-primary);-webkit-font-smoothing:antialiased;background-attachment:fixed;justify-content:center;align-items:center;min-height:100vh;display:flex;overflow-x:hidden}#root{justify-content:center;width:100%;display:flex}h1,h2,h3,h4,h5,h6{font-family:Outfit,sans-serif;font-weight:700}h1{text-align:center;background:linear-gradient(90deg,#a855f7,#ec4899);-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 4px #0000004d);-webkit-background-clip:text;margin-bottom:20px;font-size:3.5rem;font-weight:900}h2{margin-bottom:15px;font-size:2.5rem}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:16px;padding:30px}.screen-container{flex-direction:column;width:100%;max-width:1200px;min-height:100vh;padding:40px 20px;display:flex}.center-content{flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}input{border:1px solid var(--glass-border);color:#fff;background:#0f172a66;border-radius:12px;outline:none;width:100%;margin-bottom:15px;padding:14px 20px;font-size:1.1rem;font-weight:500;transition:all .3s}input::placeholder{color:#64748b}input:focus{border-color:var(--accent-purple);background:#0f172a99;box-shadow:0 0 0 3px #8b5cf64d}.btn{color:#fff;background:var(--accent-purple);cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:14px 28px;font-family:Outfit,sans-serif;font-size:1.1rem;font-weight:600;transition:all .2s;display:inline-flex;box-shadow:0 4px 14px #8b5cf663}.btn:hover:not(:disabled){background:var(--accent-purple-hover);transform:translateY(-2px);box-shadow:0 6px 20px #8b5cf680}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{color:#94a3b8;cursor:not-allowed;box-shadow:none;background:#334155}.btn-primary{background:var(--accent-purple);box-shadow:0 4px 14px #8b5cf663}.btn-primary:hover:not(:disabled){background:var(--accent-purple-hover);box-shadow:0 6px 20px #8b5cf680}.btn-success{background:var(--accent-green);box-shadow:0 4px 14px #10b98163}.btn-success:hover:not(:disabled){background:var(--accent-green-hover);box-shadow:0 6px 20px #10b98180}.btn-danger{background:var(--accent-red);box-shadow:0 4px 14px #ef444463}.btn-danger:hover:not(:disabled){background:#dc2626;box-shadow:0 6px 20px #ef444480}.btn-secondary{background:var(--accent-blue);box-shadow:0 4px 14px #3b82f663}.btn-secondary:hover:not(:disabled){background:var(--accent-blue-hover);box-shadow:0 6px 20px #3b82f680}.btn-warning{background:var(--accent-orange);box-shadow:0 4px 14px #f9731663}.btn-warning:hover:not(:disabled){background:#ea580c;box-shadow:0 6px 20px #f9731680}.btn-outline{border:1px solid var(--glass-border);box-shadow:none;background:0 0}.btn-outline:hover:not(:disabled){background:#ffffff1a}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0009;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.2s ease-out fadeIn;display:flex;position:fixed;top:0;left:0}.modal-content{width:90%;max-width:550px;max-height:90vh;animation:.3s ease-out slideUp;overflow-y:auto}.modal-content::-webkit-scrollbar{width:8px}.modal-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.quiz-card{border:1px solid var(--glass-border);background:#1e293b80;border-radius:16px;justify-content:space-between;align-items:center;margin-bottom:15px;padding:20px;transition:all .3s;display:flex}.quiz-card:hover{background:#1e293bcc;border-color:#fff3;transform:translate(4px)}.quiz-title{color:#fff;margin-bottom:4px;font-size:1.3rem;font-weight:700}.quiz-meta{color:var(--text-secondary);font-size:.95rem}.btn-answer{cursor:pointer;color:#fff;text-align:center;border:none;border-radius:16px;justify-content:center;align-items:center;width:100%;height:100%;min-height:160px;padding:20px;font-size:1.5rem;font-weight:700;transition:all .2s cubic-bezier(.175,.885,.32,1.275);display:flex;box-shadow:0 8px #0003,inset 0 2px #fff3}.btn-answer:hover{transform:translateY(-4px);box-shadow:0 12px #0003,inset 0 2px #fff3}.btn-answer:active{transform:translateY(4px);box-shadow:0 4px #0003,inset 0 2px #fff3}.color-0{background-color:var(--accent-pink)}.color-1{background-color:var(--accent-orange)}.color-2{background-color:var(--accent-purple)}.color-3{background-color:var(--accent-blue)}.color-4{background-color:var(--accent-red)}.color-tf-true{background-color:var(--accent-green)}.color-tf-false{background-color:var(--accent-red)}.options-grid{grid-template-columns:1fr 1fr;gap:24px;width:100%;margin-top:30px;display:grid}.options-grid>div:last-child:nth-child(odd){grid-column:1/-1}.option-card{color:#fff;border-radius:16px;align-items:center;padding:30px;font-size:1.8rem;font-weight:700;display:flex;box-shadow:0 8px #0003,inset 0 2px #fff3}.mobile-grid{grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;gap:16px;width:100%;height:70vh;padding:20px;display:grid}.header{justify-content:space-between;align-items:center;width:100%;margin-bottom:30px;padding:20px 30px;display:flex}.pin-display{text-align:center;font-size:1.8rem;font-weight:900}.pin-number{background:linear-gradient(90deg,#3b82f6,#8b5cf6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-family:Outfit,sans-serif;font-size:3.5rem;font-weight:900;display:block}.leaderboard-list{width:100%;max-width:700px;list-style:none}.leaderboard-item{opacity:0;border-radius:12px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:12px 20px;font-size:1.2rem;font-weight:700;animation:.5s cubic-bezier(.175,.885,.32,1.275) forwards slideIn;display:flex;transform:translate(-40px)}.leaderboard-item:first-child{color:#451a03;background:linear-gradient(135deg,#fbbf24,#f59e0b);border:2px solid #fcd34d;animation-delay:.1s}.leaderboard-item:nth-child(2){color:#0f172a;background:linear-gradient(135deg,#cbd5e1,#94a3b8);animation-delay:.2s}.leaderboard-item:nth-child(3){color:#fffbeb;background:linear-gradient(135deg,#d97706,#b45309);animation-delay:.3s}.leaderboard-item:nth-child(n+4){border:1px solid var(--glass-border);background:#1e293bcc;animation-delay:.4s}@keyframes slideIn{to{opacity:1;transform:translate(0)}}.timer-container{background:#ffffff1a;border-radius:8px;width:100%;height:16px;margin:20px 0;overflow:hidden;box-shadow:inset 0 2px 4px #0003}.timer-bar{background:linear-gradient(90deg, var(--accent-purple), var(--accent-pink));border-radius:8px;height:100%;transition:width 1s linear}.btn-link{color:var(--accent-blue);cursor:pointer;box-shadow:none;background:0 0;border:none;padding:8px 16px;font-size:1rem;font-weight:500;text-decoration:none;transition:color .2s}.btn-link:hover{color:#60a5fa;box-shadow:none;background:0 0;text-decoration:underline;transform:none}.toggle-switch{flex-shrink:0;width:44px;height:24px;display:inline-block;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{cursor:pointer;border:1px solid var(--glass-border);background-color:#0f172acc;border-radius:24px;transition:all .3s;position:absolute;inset:0}.toggle-slider:before{content:"";background-color:var(--text-secondary);border-radius:50%;width:16px;height:16px;transition:all .3s cubic-bezier(.175,.885,.32,1.275);position:absolute;bottom:3px;left:3px}input:checked+.toggle-slider{background-color:var(--accent-orange);border-color:var(--accent-orange)}.toggle-purple input:checked+.toggle-slider{background-color:var(--accent-purple);border-color:var(--accent-purple)}input:checked+.toggle-slider:before{background-color:#fff;transform:translate(20px)}