.header{position:fixed;top:0;left:0;width:100%;color:#fff;padding:20px;display:flex;justify-content:space-between;align-items:center;z-index:1000}.logo-container{font-size:1.5em;font-weight:700}.menu-icon{position:relative;width:40px;height:30px;cursor:pointer;z-index:1100}.menu-icon span{display:block;width:100%;height:4px;background-color:#fff;margin:6px 0;transition:all .3s ease-in-out}.menu-icon.opened span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.menu-icon.opened span:nth-child(2){opacity:0}.menu-icon.opened span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}.circular-menu{position:fixed;top:-200px;right:-200px;width:0;height:0;background-color:#e0b809d1;border-radius:50%;overflow:hidden;transition:all .6s ease-in-out;z-index:1000;display:flex;justify-content:center;align-items:center}.circular-menu.expanded{width:400px;height:400px;top:-100px;right:-80px}.circular-menu ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:15px;text-align:left}.circular-menu ul li{opacity:0;transform:translateY(20px);transition:all .5s ease}.circular-menu.expanded ul li{opacity:1;transform:translateY(0)}.circular-menu ul li a{color:#fff;text-decoration:none;font-size:1.2em;font-weight:700;transition:color .3s ease}.circular-menu ul li a:hover{color:#2155f0}.circular-menu ul li:first-child{margin-top:70px}html,body{height:100%;overflow:hidden}.home-container{height:100vh;width:100vw;position:relative;display:flex;justify-content:center;align-items:center;flex-direction:column}.background-image{position:fixed;top:0;left:0;width:100vw;height:100vh;background-image:url(/frontimage.jpeg);background-size:cover;background-position:center;background-attachment:fixed;z-index:-1}.grid-container{position:absolute;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);width:100%;height:30%;gap:20px;justify-items:center;align-items:center}.grid-item{display:flex;justify-content:center;align-items:center;position:relative}.animated-button{width:100%;height:100%;max-width:250px;max-height:250px;transition:transform .3s ease,box-shadow .3s ease;border-radius:10px;overflow:hidden;z-index:2}.animated-button img{width:100%;height:100%;object-fit:contain;border-radius:10px}.grid-item.left-bottom,.grid-item.right-bottom{height:auto;min-height:200px;max-height:250px}.grid-item.left-middle,.grid-item.right-middle{height:auto;min-height:180px;max-height:200px}.animated-button:hover{transform:scale(1.1);box-shadow:0 8px 15px #0003}@media (max-width: 1024px){.grid-container{gap:15px;height:50%}.animated-button{max-width:200px;max-height:200px}.grid-item.left-bottom,.grid-item.right-bottom{height:auto;min-height:180px}.grid-item.left-middle,.grid-item.right-middle{height:auto;min-height:160px}}@media (max-width: 768px){.grid-container{gap:10px;height:50%}.animated-button{max-width:180px;max-height:180px}.grid-item.left-bottom,.grid-item.right-bottom{height:auto;min-height:160px}.grid-item.left-middle,.grid-item.right-middle{height:auto;min-height:140px}}@media (max-width: 480px){.grid-container{grid-template-columns:1fr 1fr;gap:5px;height:auto;max-height:60vh;position:absolute;top:55%;width:100%;overflow-y:auto}.grid-item.left-middle{height:150px;grid-column:1;grid-row:1}.grid-item.left-bottom{height:100px;grid-column:1;grid-row:2}.grid-item.right-middle{height:150px;grid-column:2;grid-row:1}.grid-item.right-bottom{height:100px;grid-column:2;grid-row:2}.animated-button{max-width:180px;max-height:180px}.grid-item.center{display:none}}@media (min-width: 1025px){.grid-container{grid-template-columns:repeat(5,1fr);gap:20px;height:50%}.grid-item.left-bottom,.grid-item.right-bottom{height:250px}.grid-item.left-middle,.grid-item.right-middle{height:200px}}body{font-family:Arial,sans-serif;background:linear-gradient(135deg,#ccb38a,#3b4d42);display:flex;justify-content:center;align-items:center;min-height:100vh;overflow:hidden;transition:background .3s ease}.register-container{margin-top:96px;background:#ffffff26;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-radius:1.5rem;box-shadow:0 10px 30px #0000004d;padding:clamp(2rem,2vw,3rem);width:clamp(320px,40vw,600px);max-width:80vw;box-sizing:border-box;transition:transform .3s ease,backdrop-filter .3s ease,width .3s ease,padding .3s ease;animation:fadeIn 1s ease forwards;transform:translateY(-20px);opacity:0}@media (min-width: 1440px){.register-container{max-width:45vw;padding:4vw;box-shadow:0 12px 36px #0006}}.register-form{display:flex;flex-direction:column;gap:1.5rem}.input-group input{width:100%;padding:1.2rem;border:2px solid rgba(255,255,255,.3);background:#ffffff26;color:#003a97;border-radius:.8rem;font-size:clamp(1rem,1.5vw,1.2rem);outline:none;transition:border-color .3s ease,box-shadow .3s ease,padding .3s ease}.input-group label{position:absolute;top:50%;left:14px;color:#ffffffb3;font-size:clamp(1rem,1.2vw,1.2rem);pointer-events:none;transition:all .3s ease;transform:translateY(-50%);opacity:0;width:0;animation:labelTyping 1.5s steps(12,end) forwards}@keyframes labelTyping{0%{width:0;opacity:1}to{width:100%;opacity:1}}.input-group input:focus+label,.input-group input:not(:placeholder-shown)+label{top:5px;font-size:.9em;color:#ccb38a;animation:none}input.valid{border-color:#8bc34a}input.invalid{border-color:#e57373;animation:shake .3s ease}.error-message{color:#e57373;font-size:.9rem;text-align:center;margin-top:.5rem;padding:.5rem;font-weight:700;border:1px solid #ffc107;border-radius:5px;box-shadow:0 4px 8px #ffc10733;transition:all .3s ease}.success-message{color:#81c784;font-size:.9rem;text-align:center;margin-top:.5rem;padding:.5rem;font-weight:700;border:1px solid #4caf50;border-radius:5px;box-shadow:0 4px 8px #4caf5033;transition:all .3s ease}.register-btn{width:100%;padding:1.5rem;background:linear-gradient(90deg,#3b4d42,#ccb38a);color:#fff;font-size:clamp(1rem,2vw,1.2rem);border:none;border-radius:.8rem;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 20px #0000004d;position:relative;overflow:hidden}.register-btn:before{content:"";position:absolute;top:0;left:-100%;width:300%;height:100%;background:#ffffff40;transform:skew(-30deg);transition:all .4s ease}.register-btn:hover:before{left:100%}.register-btn:hover{background:linear-gradient(90deg,#34473d,#c1a77b);transform:scale(1.05)}.register-btn:active{background:linear-gradient(90deg,#2d3d35,#b5986e);transform:scale(.98)}.login-link{text-align:center;margin-top:20px;font-size:.9em;color:#ffffffd9}.login-link a{text-decoration:none;color:#ccb38a;transition:color .3s ease}.login-link a:hover{color:#b5986e;text-decoration:underline}@media (max-width: 480px){.register-container{padding:2rem}h2.animated-title{font-size:1.7em}.register-btn{font-size:1rem;padding:1rem}}.scratch-mark{position:fixed;bottom:5%;right:5%;width:20vw;max-width:200px;opacity:0;transform-origin:top right;animation:slashReveal 1.5s cubic-bezier(.25,1,.5,1) forwards,jingleEffect 10s ease-in-out 5s infinite;z-index:1;filter:drop-shadow(0 5px 8px rgba(0,0,0,.4))}@keyframes slashReveal{0%{opacity:0;transform:translateY(-100px) rotate(-15deg) scale(1.3);filter:blur(10px) brightness(1.5);clip-path:inset(0 0 100% 0)}30%{opacity:1;transform:translateY(-30px) rotate(-8deg) scale(1.1);filter:blur(5px) brightness(1.2);clip-path:inset(0 0 50% 0)}60%{transform:translateY(0) rotate(-3deg) scale(1.05);filter:blur(2px) brightness(1.1);clip-path:inset(0 0 0 0)}to{opacity:1;transform:translateY(0) scale(1) rotate(0);filter:blur(0)}}@keyframes jingleEffect{0%,to{transform:scale(1) rotate(0)}20%{transform:scale(1.02) rotate(.8deg);filter:brightness(1.1)}50%{transform:scale(1.03) rotate(-.8deg)}80%{transform:scale(1.01) rotate(.5deg)}}@keyframes repeatSlash{0%,95%{opacity:1;transform:scale(1) rotate(0)}to{opacity:0}}@media (max-width: 1024px){.scratch-mark{width:18vw;max-width:160px;bottom:5%;right:5%}}@media (max-width: 768px){.scratch-mark{display:none}}body{font-family:Arial,sans-serif;background:#f6c988;background:-moz-linear-gradient(90deg,rgba(246,201,136,1) 0%,rgba(124,95,49,1) 34%,rgba(67,55,8,1) 66%,rgba(29,57,35,1) 100%);background:-webkit-linear-gradient(90deg,rgba(246,201,136,1) 0%,rgba(124,95,49,1) 34%,rgba(67,55,8,1) 66%,rgba(29,57,35,1) 100%);background:linear-gradient(90deg,#f6c988,#7c5f31 34%,#433708 66%,#1d3923);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#f6c988",endColorstr="#1d3923",GradientType=1);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;padding:20px;color:#f5e9d1}body.dark-mode{background:linear-gradient(135deg,#3b4d42,#212121)}body:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:inherit;filter:blur(80px);opacity:.5;z-index:-1;animation:gradientShift 8s ease-in-out infinite alternate}@keyframes gradientShift{0%{background-position:0% 50%}to{background-position:100% 50%}}.dark-mode-toggle{position:fixed;top:20px;right:20px;width:clamp(2rem,3vw,3rem);height:clamp(2rem,3vw,3rem);background:#ffffff40;border-radius:50%;cursor:pointer;box-shadow:0 6px 15px #0000004d;transition:background .3s ease,width .3s ease,height .3s ease;display:flex;align-items:center;justify-content:center;z-index:10}.dark-mode-toggle:hover{background:#fff6}.dark-mode-toggle:before{content:"🌙";font-size:clamp(1rem,2vw,1.5rem);color:#3b4d42;transition:color .3s ease}body.dark-mode .dark-mode-toggle:before{content:"☀️";color:#ccb38a}.login-container{margin-top:96px;background:#ffffff26;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-radius:1.5rem;box-shadow:0 10px 30px #0000004d;padding:clamp(2rem,2vw,3rem);width:clamp(320px,40vw,600px);max-width:80vw;box-sizing:border-box;transition:transform .3s ease,backdrop-filter .3s ease,width .3s ease,padding .3s ease;animation:fadeIn 1s ease forwards;transform:translateY(-20px);opacity:0}@keyframes fadeIn{to{transform:translateY(0);opacity:1}}h2.animated-title{text-align:center;color:#f5e9d1;font-size:clamp(1.8rem,2.5vw,3rem);font-weight:700;white-space:nowrap;overflow:hidden;width:0;animation:typing 2s steps(12,end) forwards;margin-bottom:2vh}@keyframes typing{0%{width:0}to{width:100%}}.input-group{position:relative;display:flex;align-items:center}.input-group input{width:100%;padding:1.5rem 3rem 1.5rem 1.5rem;border:2px solid rgba(255,255,255,.3);background:#ffffff26;color:#003a97;border-radius:.8rem;font-size:clamp(1rem,1.5vw,1.2rem);outline:none;transition:border-color .3s ease,box-shadow .3s ease,padding .3s ease}.input-group .toggle-password{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1.5rem;cursor:pointer;color:#ffffffb3;transition:color .3s ease}.input-group .toggle-password:hover{color:#ccb38a}.input-group input:focus{border-color:#ccb38a;box-shadow:0 0 10px #ccb38acc}.input-group{position:relative;margin-bottom:2vh}.input-group input{width:100%;padding:1.5rem;border:2px solid rgba(255,255,255,.3);background:#ffffff26;color:#003a97;border-radius:.8rem;font-size:clamp(1rem,1.5vw,1.2rem);outline:none;transition:border-color .3s ease,box-shadow .3s ease,padding .3s ease}.input-group label{position:absolute;top:50%;left:14px;color:#ffffffb3;font-size:clamp(1rem,1.2vw,1.2rem);pointer-events:none;transition:all .3s ease;transform:translateY(-50%)}.input-group input:focus+label,.input-group input:not(:placeholder-shown)+label{top:5px;font-size:.9em;color:#ccb38a}input:focus{border-color:#ccb38a;box-shadow:0 0 10px #ccb38acc}input.valid{border-color:#4caf50}input.invalid{border-color:#f44336;background-color:#f443361a}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-5px)}to{transform:translate(0)}}.error-message{color:#ffdd00c1;background:linear-gradient(90deg,#7b530226,#ffda0a14);font-size:.9rem;text-align:center;margin-top:.5rem;padding:.8rem;font-weight:700;border:2px solid #ffc107;border-radius:8px;box-shadow:0 4px 10px #ffc10766;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .3s ease}.login-btn{width:100%;padding:1.5rem;background:linear-gradient(90deg,#3b4d42,#ccb38a);color:#fff;font-size:clamp(1rem,2vw,1.2rem);border:none;border-radius:.8rem;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 20px #0000004d;position:relative;overflow:hidden}.login-btn:before{content:"";position:absolute;top:0;left:-100%;width:300%;height:100%;background:#ffffff40;transform:skew(-30deg);transition:all .4s ease}.login-btn:hover:before{left:100%}.login-btn:hover{background:linear-gradient(90deg,#34473d,#c1a77b);transform:scale(1.05)}.login-btn:active{background:linear-gradient(90deg,#2d3d35,#b5986e);transform:scale(.98)}.register-link{text-align:center;margin-top:1.5vh;font-size:clamp(.8rem,1.5vw,1rem);color:#ffffffd9}.register-link a{text-decoration:none;color:#ccb38a;transition:color .3s ease}.register-link a:hover{color:#b5986e;text-decoration:underline}@media (min-width: 1440px){.login-container{max-width:45vw;padding:4vw;box-shadow:0 12px 36px #0006}.dark-mode-toggle{width:60px;height:60px}}.forgot-password-link{text-align:center;margin-top:1.5vh;font-size:clamp(.8rem,1.5vw,1rem);color:#ffffffd9}.forgot-password-link a{text-decoration:none;color:#ccb38a;transition:color .3s ease}.forgot-password-link a:hover{color:#b5986e;text-decoration:underline}.success-message{color:#4caf50;background:linear-gradient(90deg,#4caf5026,#c8e6c914);font-size:1rem;text-align:center;margin-top:1rem;padding:1rem;font-weight:700;border:2px solid #4caf50;border-radius:8px;box-shadow:0 4px 10px #4caf5066;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .3s ease}body{font-family:Arial,sans-serif;color:#f5e9d1;height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:10px;overflow:hidden}.profile-page{width:100%;max-width:1400px;height:100%;padding:10px;border-radius:10px;box-shadow:0 4px 10px #0003;display:flex;flex-direction:column;gap:5px;overflow:hidden;margin-top:80px}.quiz-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:100%;flex-grow:1}.quiz-section{background:#ffffff14;padding:10px;border-radius:8px;box-shadow:0 4px 10px #0003;display:flex;flex-direction:column;gap:8px;overflow:hidden;height:100%}.quiz-section:hover{transform:translateY(-3px);box-shadow:0 6px 12px #0000004d}.performance-chart{flex-grow:1;display:flex;justify-content:center;align-items:center;border-radius:8px;box-shadow:0 4px 10px #0003;padding:10px}.overall-stats{background:#ffffff26;border-radius:8px;padding:10px;box-shadow:0 4px 10px #0000001a;font-size:.9rem;color:#003a97}.overall-stats h2{font-size:1.2rem;margin-bottom:5px}.overall-stats p{margin:3px 0;font-size:.9rem;color:#ddd}.scroll-container{flex-grow:1;overflow-y:auto;padding:8px}.scroll-container table{width:100%;border-collapse:collapse;table-layout:fixed;color:#003a97;font-size:.85rem}.scroll-container th,.scroll-container td{padding:6px;text-align:center;border-bottom:1px solid rgba(255,255,255,.2);word-wrap:break-word}.scroll-container th{font-weight:700;color:#020daf;text-transform:uppercase;font-size:.85rem}.scroll-container tr:hover{background:#ffffff1a;transition:background .2s ease}.scroll-container .passed{color:#4caf50;font-weight:700}.scroll-container .failed{color:#e57373;font-weight:700}.filter-buttons{display:flex;gap:6px;justify-content:flex-start}.filter-buttons button{padding:6px 12px;font-size:.85rem;border:none;border-radius:6px;background:#ffffff1a;color:#003a97;cursor:pointer;transition:background .3s ease,transform .2s ease}.filter-buttons button:hover{background:#ffffff4d;transform:scale(1.05)}.filter-buttons button.active{background:#fff9;color:#34473d;font-weight:700}.pagination-controls{display:flex;justify-content:space-between;align-items:center;padding:5px 10px}.pagination-controls button{padding:5px 10px;font-size:.8rem;border:none;border-radius:6px;background:#ffffff1a;color:#003a97;cursor:pointer}.pagination-controls button:hover{background:#ffffff4d}.pagination-controls span{font-size:.85rem;color:#ddd}@media (max-width: 992px){.quiz-grid{grid-template-columns:1fr;gap:5px}.performance-chart{flex-grow:0;height:180px}}@media (max-width: 768px){.profile-page{padding:5px}.quiz-grid{gap:5px}.performance-chart{height:160px}}.auth-button{margin:0 10px;padding:10px 20px;font-size:16px;background-color:#2155f0;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background .3s ease}.auth-button:hover{background-color:#163dba}.clear-section{margin-top:20px;padding:10px;background-color:#fff9db;border:1px solid #ffe58f;border-radius:8px;text-align:center}.clear-section p{margin-bottom:10px;font-size:14px;color:#8c6d1f}.clear-button{padding:8px 16px;background-color:#e63946;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:700}.clear-button:hover{background-color:#c62828}[data-rmiz-ghost]{position:absolute;pointer-events:none}[data-rmiz-btn-zoom],[data-rmiz-btn-unzoom]{background-color:#000000b3;border-radius:50%;border:none;box-shadow:0 0 1px #ffffff80;color:#fff;height:40px;margin:0;outline-offset:2px;padding:9px;touch-action:manipulation;width:40px;-webkit-appearance:none;-moz-appearance:none;appearance:none}[data-rmiz-btn-zoom]:not(:focus):not(:active){position:absolute;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;pointer-events:none;white-space:nowrap;width:1px}[data-rmiz-btn-zoom]{position:absolute;inset:10px 10px auto auto;cursor:zoom-in}[data-rmiz-btn-unzoom]{position:absolute;inset:20px 20px auto auto;cursor:zoom-out;z-index:1}[data-rmiz-content=found] img,[data-rmiz-content=found] svg,[data-rmiz-content=found] [role=img],[data-rmiz-content=found] [data-zoom]{cursor:zoom-in}[data-rmiz-modal]::backdrop{display:none}[data-rmiz-modal][open]{position:fixed;width:100vw;width:100dvw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden}[data-rmiz-modal-overlay]{position:absolute;top:0;right:0;bottom:0;left:0;transition:background-color .3s}[data-rmiz-modal-overlay=hidden]{background-color:#fff0}[data-rmiz-modal-overlay=visible]{background-color:#fff}[data-rmiz-modal-content]{position:relative;width:100%;height:100%}[data-rmiz-modal-img]{position:absolute;cursor:zoom-out;image-rendering:high-quality;transform-origin:top left;transition:transform .3s}@media (prefers-reduced-motion: reduce){[data-rmiz-modal-overlay],[data-rmiz-modal-img]{transition-duration:.01ms!important}}:root{--progress-bg: #f3f3f3;--progress-fill-start: #4caf50;--progress-fill-end: #66bb6a;--progress-height: 30px;--border-radius: 15px;--transition-speed: .5s;--shadow-color: rgba(0, 0, 0, .2);--inner-glow: rgba(255, 255, 255, .3)}.progress-bar-container{width:100%;background:var(--progress-bg);border-radius:var(--border-radius);overflow:hidden;height:var(--progress-height);margin-bottom:5px;box-shadow:inset 0 2px 4px var(--shadow-color);position:relative}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--progress-fill-start),var(--progress-fill-end));transition:width var(--transition-speed) ease-in-out;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1rem;position:relative;border-radius:var(--border-radius) 0 0 var(--border-radius);box-shadow:inset 0 0 8px var(--inner-glow),0 2px 4px var(--shadow-color)}.progress-label{position:absolute;width:100%;text-align:center;z-index:1;text-shadow:1px 1px 3px rgba(0,0,0,.5)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;overflow-x:hidden;overflow-y:auto}.page-container{margin-top:68px;display:flex;flex-direction:column;min-height:100vh;padding:10px}.quiz-container{display:flex;flex-direction:column;align-items:center;max-width:800px;width:90%;background-color:#fff;border-radius:10px;box-shadow:0 4px 8px #0000001a;padding:20px;margin:auto;overflow:hidden}.question-container{display:flex;flex-direction:column;width:100%;height:450px;border-radius:10px;box-shadow:0 0 10px #0000001a;margin-bottom:10px;overflow:hidden}.question-image-box{flex:0 0 120px;width:100%;display:flex;justify-content:center;align-items:center;background-color:#f4f4f4;border-radius:8px;overflow:hidden}.question-content{flex:1;padding:4px;overflow:auto}.question-text{font-size:1.2em;line-height:1.5;color:#333;text-align:center;margin-bottom:10px}.question-navigation{display:flex;justify-content:center;flex-wrap:wrap;gap:1px;margin-bottom:10px}.review-mode .question-navigation button.active{border:2px solid yellow;background-color:#2118c6}.result-bar.red{background-color:#f44336;color:#fff;padding:15px;text-align:center;border-radius:5px}.stats-bar{display:flex;justify-content:space-between;padding:10px;background-color:#333;color:#fff;border-radius:5px;margin-bottom:10px}.info-bar{background-color:#666;color:#fff;padding:10px;display:flex;justify-content:space-between;border-radius:5px}.footer{text-align:center;padding:5px;margin-top:auto}.question-text{font-size:1.2em;line-height:1.5;color:#333;text-align:center}h3{color:#333;font-size:1.4em;font-weight:700;margin-top:40px}.question-container{display:flex!important;flex-direction:column!important;align-items:center;justify-content:center;width:100%;max-width:800px;margin:0 auto;min-height:300px;max-height:90vh;height:auto;border-radius:10px;box-shadow:0 0 10px var(--shadow-light);overflow:auto}:root{--primary-color: #007bff;--primary-hover: #0056b3;--secondary-color: #ff9800;--success-color: #4caf50;--error-color: #f44336;--neutral-color: #9e9e9e;--bg-light: #f4f4f4;--bg-hover: #e8e8e8;--bg-question-hover: #f9f9f9;--text-dark: #333;--text-light: #fff;--shadow-light: rgba(0, 0, 0, .1);--transition-speed: .3s}.page-container{display:flex;flex-direction:column;min-height:100vh;overflow:auto}.quiz-content{padding-top:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-height:100vh}.quiz-container{display:flex;flex-direction:column;max-width:100%;margin:0 auto;padding:20px;background-color:var(--bg-light);border-radius:10px;box-shadow:0 0 15px var(--shadow-light);overflow-y:auto;box-sizing:border-box;min-height:calc(100vh - 120px)}.clock-bar{display:flex;justify-content:space-between;background-color:#333;color:var(--text-light);padding:10px;border-radius:5px;margin-bottom:10px}.question-container{display:flex;flex-direction:column;height:70vh;max-width:800px;width:100%;margin:0 auto;background-color:#fff;border-radius:10px;box-shadow:0 0 10px var(--shadow-light);overflow:hidden}.question-container:hover{background-color:var(--bg-question-hover)}.question-header{width:100%;margin-bottom:15px}.question-header h3{margin-bottom:10px}.question-text{font-size:1.2em;line-height:1.5;margin-bottom:15px;color:var(--text-dark);width:100%}.option-box{display:flex;align-items:center;justify-content:flex-start;padding:10px;font-size:1.2em;border:1px solid #ddd;background-color:#fff;border-radius:10px;cursor:pointer;transition:background-color var(--transition-speed) ease;width:100%}.option-box:hover{background-color:var(--bg-hover)}.option-box.selected{background-color:#d0e8ff;border-color:var(--primary-color)}.option-letter-box{width:40px;height:40px;background-color:var(--primary-color);color:var(--text-light);border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:1.5em;margin-right:15px;text-align:center}.question-navigation{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:10px}.question-navigation button{width:50px;height:50px;background-color:var(--primary-color);color:var(--text-light);border:none;border-radius:10px;font-size:1em;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:background-color var(--transition-speed) ease}.question-navigation button:hover{background-color:var(--secondary-color)}.question-navigation button.correct{background-color:var(--success-color)}.question-navigation button.incorrect{background-color:var(--error-color)}.question-navigation button.unanswered{background-color:var(--neutral-color)}.review-mode .question-navigation button.active{border:2px solid yellow;background-color:var(--secondary-color)}.review-mode .question-navigation{margin-top:5px}.review-mode .question-navigation button{width:40px;height:40px}.exam-mode .question-navigation button.active{background-color:var(--secondary-color)}.navigation-buttons{display:flex;justify-content:space-between;margin-top:10px}.navigation-buttons button{background-color:var(--primary-color);color:var(--text-light);padding:10px 20px;border:none;border-radius:5px;cursor:pointer;transition:background-color var(--transition-speed) ease}.navigation-buttons button:hover{background-color:var(--secondary-color)}.action-buttons{display:flex;justify-content:space-around;margin-top:10px}.action-buttons button{background-color:var(--primary-color);color:var(--text-light);padding:10px 20px;border:none;border-radius:5px;cursor:pointer;transition:background-color var(--transition-speed) ease}.action-buttons button:hover{background-color:var(--primary-hover)}.result-bar{padding:15px;text-align:center;border-radius:5px;color:var(--text-light)}.result-bar.green{background-color:var(--success-color)}.result-bar.red{background-color:var(--error-color)}.stats-bar{display:flex;justify-content:space-between;padding:15px;background-color:#333;color:var(--text-light);border-radius:5px;margin-bottom:20px}.result-image{display:flex;justify-content:center;align-items:center;margin:0 20px}.pass-fail-image{max-width:50%;height:auto;border-radius:50%;object-fit:cover}.info-bar{background-color:#666;color:var(--text-light);padding:10px;display:flex;justify-content:space-between;border-radius:5px}.info-bar p{margin:0}.review-message{margin-top:5px;padding:10px;background-color:#eee;border-radius:5px;text-align:center;font-weight:700}.footer{text-align:center;padding:10px;color:var(--text-light)}.question-fixed-header{padding:10px;background-color:#fff;flex-shrink:0;border-bottom:1px solid #ccc;z-index:1;width:100%}.question-fixed-header h3{margin:0 0 10px;font-size:1.2em;color:var(--text-dark)}.question-fixed-header .question-text{font-size:1.1em;line-height:1.5;color:var(--text-dark)}.scrollable-options{overflow-y:auto;flex-grow:1;padding:10px;width:100%}.question-image-box img{max-width:100%;height:auto;display:block;margin:10px auto}@media (max-width: 768px){.question-container{height:70vh}.question-fixed-header h3,.question-fixed-header .question-text{font-size:1rem}.option-box{font-size:1rem;padding:10px}}.page-container{margin-top:90px;display:flex;flex-direction:column;min-height:100vh}.quiz-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;max-width:800px;width:90%;background-color:#fff;border-radius:10px;box-shadow:0 4px 8px #0000001a;padding:20px;box-sizing:border-box;position:relative}.question-container{display:flex;flex-direction:column;width:100%;height:450px;border-radius:10px;box-shadow:0 0 10px #0000001a;margin-bottom:20px;overflow:auto}.question-image-box{flex:0 0 180px;width:100%;display:flex;justify-content:center;align-items:center;background-color:#f4f4f4;border-radius:8px;overflow:hidden}.question-image{max-height:100%;width:auto;object-fit:cover;border-radius:8px}.question-content{flex:1;overflow-y:auto;padding:20px}.question-text{font-size:1.2em;line-height:1.5;color:#333;text-align:center;margin-bottom:20px}.answer-options{display:flex;flex-direction:column;gap:10px;width:100%}.option-box{display:flex;align-items:center;padding:10px;font-size:1.2em;border:1px solid #ddd;background-color:#fff;border-radius:10px;cursor:pointer;transition:background-color .3s ease;width:100%}.quiz-container>*{flex-shrink:0}.clock-bar{display:flex;justify-content:space-between;background-color:#333;color:#fff;padding:10px;border-radius:5px;margin-bottom:20px}.timer,.score{font-size:1.2em;font-weight:700}.question-container:hover{background-color:#f9f9f9}h3{color:#333;font-size:1.4em;font-weight:700;margin-bottom:10px}.option-text{color:#333;font-weight:500;font-size:1.2em;transition:color .3s ease}.option-box{display:flex;align-items:center;padding:10px;font-size:1.2em;border:1px solid #ddd;cursor:pointer;transition:background-color .3s ease;background-color:#fff;border-radius:10px;justify-content:start;width:100%}.option-letter-box{width:40px;height:40px;background-color:#007bff;color:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:1.5em;margin-right:15px;text-align:center}.option-box:hover{background-color:#e8e8e8}.option-box.correct{background-color:#c8e6c9}.option-box.incorrect{background-color:#ffcdd2}.option-box.unanswered{background-color:#e0e0e0;border:1px solid #ccc}.option-box.selected{background-color:#d0e8ff;border-color:#007bff}.question-navigation{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:20px}.question-navigation button{width:50px;height:50px;background-color:#007bff;color:#fff;border:none;border-radius:10px;font-size:1em;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:background-color .3s ease}.question-navigation button.correct{background-color:#4caf50}.question-navigation button.incorrect{background-color:#f44336}.question-navigation button.unanswered{background-color:#9e9e9e}.review-mode .question-navigation button.active{border:2px solid yellow;background-color:#ff9800}.question-navigation button:hover{background-color:#ff9800}.navigation-buttons{display:flex;justify-content:space-between;margin-top:20px}.navigation-buttons button{background-color:#007bff;color:#fff;padding:10px 20px;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.navigation-buttons button:hover{background-color:#ff9800}.action-buttons{display:flex;justify-content:space-around;margin-top:20px}.action-buttons button{background-color:#007bff;color:#fff;padding:10px 20px;border:none;border-radius:5px;cursor:pointer}.action-buttons button:hover{background-color:#0056b3}.result-bar.green{background-color:#4caf50;color:#fff;padding:15px;text-align:center;border-radius:5px}.result-bar.red{background-color:#f44336;color:#fff;padding:1px;text-align:center;border-radius:0}.stats-bar{display:flex;justify-content:space-between;padding:1px;background-color:#333;color:#fff;border-radius:0;margin-bottom:0}.time-taken,.final-score{font-size:1.1em;font-weight:700}.result-image{max-width:150px;width:100%;height:auto;border-radius:50%;object-fit:cover;display:block;margin:0 auto}.info-bar{background-color:#666;color:#fff;padding:0;display:flex;justify-content:space-between;border-radius:0}.review-message{margin-top:5px;padding:1px;background-color:#eee;border-radius:5px;text-align:center;font-weight:700}.review-mode .result-image{display:block;margin:0 auto;border-radius:50%;object-fit:cover}.review-mode .question-navigation{margin-top:5px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.review-mode .question-navigation button{width:40px;height:40px;background-color:#4caf50;color:#fff;border:none;border-radius:10px;cursor:pointer;transition:background-color .3s ease}.review-mode .question-navigation button.incorrect{background-color:#f44336}.review-mode .question-navigation button.unanswered{background-color:#9e9e9e}.review-mode .question-navigation button.correct{background-color:#4caf50}.exam-mode .question-navigation{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.exam-mode .question-navigation button{width:50px;height:50px;background-color:#007bff;color:#fff;border:none;border-radius:10px;font-size:1em;cursor:pointer}.exam-mode .question-navigation button.active{background-color:#ff9800}.exam-mode .question-navigation button.correct{background-color:#4caf50}.exam-mode .question-navigation button.incorrect{background-color:#f44336}.exam-mode .question-navigation button.unanswered{background-color:#9e9e9e}.exam-mode .question-navigation button:hover{background-color:#ff9800}.exam-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background-color:#f3f4f600;padding:20px}.exam-title{font-size:2rem;font-weight:700;color:#feed00f8;margin-bottom:20px;text-align:center}.exam-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:800px}.exam-group{display:flex;flex-direction:column;gap:16px}.exam-button{width:180px;padding:15px;font-size:1.2rem;font-weight:700;color:#fff;border:none;border-radius:12px;cursor:pointer;box-shadow:2px 4px 6px #0003;text-align:center;transition:transform .2s,background .3s;display:flex;justify-content:center;align-items:center}.exam-button:hover{transform:scale(1.05)}.blue{background-color:#3b82f6}.blue:hover{background-color:#2563eb}.red{background-color:#ef4444}.red:hover{background-color:#dc2626}.green{background-color:#10b981}.green:hover{background-color:#059669}.yellow{background-color:#f59e0b}.yellow:hover{background-color:#d97706}.purple{background-color:#8b5cf6}.purple:hover{background-color:#6d28d9}.orange{background-color:#f97316}.orange:hover{background-color:#ea580c}.pink{background-color:#ec4899}.pink:hover{background-color:#db2777}.teal{background-color:#14b8a6}.teal:hover{background-color:#0d9488}:root{--primary: #2563eb;--primary-dark: #1e40af;--accent: #facc15;--admin-color: #fd5400;--admin-bg: #fefce8;--admin-border: #eab308;--light-gray: #f0f4f8;--error-bg: #fee2e2;--error-text: #b91c1c;--error-border: #fecaca;--text-main: #333;--text-muted: #666;--text-subtle: #888;--highlight-bg: #ffffff;--highlight-border: #2563eb;--highlight-name: #1d4ed8}body{-webkit-font-smoothing:antialiased;font-smooth:always}.feedback-container{max-width:800px;margin:0 auto;padding:2rem;font-family:Segoe UI,sans-serif;color:var(--text-main)}.feedback-container h1{font-size:2rem;margin-top:4.5rem;margin-bottom:1.5rem;text-align:center;color:#000}.feedback-form{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem;background:var(--light-gray);padding:1.5rem;border-radius:10px;box-shadow:0 1px 4px #0000001a}.feedback-input,.feedback-textarea{padding:.75rem;border:1px solid #ccc;border-radius:8px;font-size:1rem;width:100%;resize:vertical;font-family:inherit}button:focus{outline:2px dashed var(--primary);outline-offset:3px}.feedback-submit{background-color:var(--primary);color:#fff;border:none;padding:.75rem;font-size:1rem;border-radius:8px;cursor:pointer;transition:background-color .2s ease-in-out}.feedback-submit:hover{background-color:var(--primary-dark)}.feedback-submit.small{font-size:.85rem;padding:.4rem .8rem;margin-top:.4rem}.star-select{display:flex;gap:8px;-webkit-user-select:none;user-select:none}.star-select button{background:none;border:none;font-size:1.6rem;color:#ccc;cursor:pointer;transition:color .2s,transform .15s;padding:0}.star-select button.filled{color:var(--accent);text-shadow:1px 1px 1px rgba(0,0,0,.25)}.star-select button:hover{transform:scale(1.2)}.feedback-filters{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;margin-bottom:1.5rem;gap:1rem}.feedback-filters label{font-weight:500;margin-right:.5rem}.feedback-filters select{padding:.4rem .6rem;border-radius:6px;border:1px solid #ccc;font-size:.95rem}.feedback-list{display:flex;flex-direction:column;gap:1.2rem}.feedback-card{border:2px solid #eab308;background:#b7dffa;padding:1rem 1.2rem;border-radius:8px;box-shadow:0 2px 6px #00000014;white-space:pre-wrap;transition:all .3s ease-in-out}.feedback-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--text-muted);margin-bottom:.4rem;gap:.6rem}.feedback-name{font-weight:600;color:#111827}.feedback-name.user-highlight{color:var(--highlight-name)}.feedback-date{font-style:italic;color:#555}.feedback-stars{color:var(--accent);font-size:1.2rem;text-shadow:0 0 2px #fff,1px 1px 2px rgba(0,0,0,.4)}.feedback-comment{font-size:1rem;line-height:1.5;color:var(--text-main);margin-top:.3rem}.char-counter{font-size:.85rem;color:var(--text-subtle);text-align:right;margin-top:-.5rem;margin-bottom:.5rem}.delete-button,.edit-button{background:transparent;border:none;font-size:1.1rem;cursor:pointer;padding:.2rem .4rem;border-radius:4px;transition:opacity .3s ease,background-color .2s ease;opacity:0}.delete-button{color:#ef4444}.edit-button{color:var(--primary)}.feedback-card:hover .delete-button,.feedback-card:hover .edit-button{opacity:1}.delete-button:hover{background-color:#ef44441a}.edit-button:hover{background-color:#2563eb1a}.edit-area{margin-top:.6rem;display:flex;flex-direction:column;gap:.5rem}.edit-area textarea{border:1px solid #60a5fa;background-color:#eff6ff}.edit-timer{font-size:.85rem;font-style:italic;color:#6b7280;background:#f9fafb;padding:.4rem .6rem;border-radius:6px;border:1px dashed #d1d5db}.emoji-picker{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem}.emoji-button{font-size:1.3rem;background:transparent;border:none;cursor:pointer;transition:transform .1s}.emoji-button:hover{transform:scale(1.2)}.feedback-error{background-color:var(--error-bg);color:var(--error-text);padding:.5rem .75rem;border-radius:6px;font-size:.95rem;border:1px solid var(--error-border)}.reply-form{display:flex;flex-direction:column;gap:.5rem;margin-top:.8rem}.reply-form .feedback-textarea{padding:.6rem;border:1px solid #ccc;border-radius:6px}.replies-section{margin-top:1rem;padding-left:1rem;border-left:3px solid #e5e7eb}.reply-card{background:#f0f5f8;margin-bottom:.5rem;border-radius:6px;font-size:.95rem;margin-left:.5rem;border-left:2px solid #ccc;padding:.6rem .8rem;transition:all .3s ease}.user-reply{background-color:#f1d7fa;border-left:4px solid var(--primary);box-shadow:0 0 0 1px #25d7eb1a}.reply-meta{font-size:.8rem;color:var(--text-muted);margin-bottom:.3rem}.admin-reply{background-color:#fffbea;border-left:4px solid #f59e0b;box-shadow:0 0 0 1px var(--accent);color:#222}.admin-logo{width:20px;height:20px;margin-right:6px;vertical-align:middle;object-fit:contain}.admin-name{font-weight:700;color:var(--admin-color);display:inline-flex;align-items:center}.feedback-card.admin{border:2px solid var(--admin-border);background-color:var(--admin-bg);box-shadow:0 0 0 2px #eab30833}.feedback-card.highlight-user{border:2px solid var(--highlight-border);background-color:var(--highlight-bg);box-shadow:0 0 0 2px #2563eb26}@media (max-width: 768px){.feedback-filters,.feedback-meta{flex-direction:column;align-items:flex-start}.delete-button,.edit-button{opacity:1!important}.feedback-submit{width:100%}}.suggestion-note{text-align:center;margin-top:1rem;margin-bottom:2rem;font-size:1.05rem;font-weight:500;color:#4b5563;background-color:#fff8dc;padding:.6rem 1rem;border-left:4px solid var(--accent);border-radius:8px;max-width:600px;margin-left:auto;margin-right:auto}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.suggestion-note{animation:fadeInUp .6s ease}.exam-container{max-width:900px;margin:0 auto;padding:2rem;background-color:#ffffff3b;border-radius:12px;box-shadow:0 0 12px #0000001a}.exam-info{text-align:left}.exam-info h1{font-size:2rem;margin-bottom:1rem;color:#1e2d40}.exam-info h2{font-size:1.4rem;margin-top:2rem;margin-bottom:1rem;color:#0d3b66}.exam-info p{font-size:1.1rem;line-height:1.6;color:#333}.exam-info ul{list-style:disc inside;padding-left:1rem;margin-top:1rem}.exam-info li{margin-bottom:.8rem;font-size:1.05rem}.exam-group{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:2.5rem;text-align:center}.exam-button{padding:1rem 2rem;font-size:1rem;font-weight:700;text-decoration:none;border-radius:8px;transition:transform .2s ease,background-color .3s;color:#fff;text-align:center;min-width:180px;box-shadow:0 2px 8px #0003}.exam-button:hover{transform:translateY(-4px);opacity:.9}.orange{background-color:#f57c00}.teal{background-color:#00897b}@media (max-width: 600px){.exam-group{flex-direction:column;align-items:center}.exam-button{width:100%;max-width:280px}}:root{--primary-bg: linear-gradient(90deg, rgba(246,201,136,1) 0%, rgba(124,95,49,1) 34%, rgba(67,55,8,1) 66%, rgba(29,57,35,1) 100%);--card-bg: rgba(255, 255, 255, .15);--text-color: #f5e9d1;--input-bg: rgba(255, 255, 255, .15);--input-border: rgba(255, 255, 255, .3);--input-focus: #ccb38a;--btn-gradient: linear-gradient(90deg, #3b4d42, #ccb38a);--btn-hover: linear-gradient(90deg, #34473d, #c1a77b);--btn-active: linear-gradient(90deg, #2d3d35, #b5986e);--success-color: #4caf50;--error-color: #f44336}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--primary-bg);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:1rem;color:var(--text-color);line-height:1.6}.password-reset-container{width:100%;max-width:28rem;margin:6rem auto 2rem;animation:fadeIn .5s ease-out forwards;opacity:0;transform:translateY(1rem)}.password-reset-box{background:var(--card-bg);backdrop-filter:blur(1rem) saturate(180%);-webkit-backdrop-filter:blur(1rem) saturate(180%);border-radius:1.25rem;padding:2rem;box-shadow:0 1rem 2rem #00000040;border:1px solid rgba(255,255,255,.1)}@keyframes fadeIn{to{opacity:1;transform:translateY(0)}}h2{text-align:center;color:var(--text-color);font-size:1.75rem;margin-bottom:1.5rem;font-weight:600;letter-spacing:.5px}.input-group{margin-bottom:1.25rem;position:relative}.input-group:last-of-type{margin-bottom:1.75rem}input[type=password]{width:100%;padding:1rem 1.25rem;background:var(--input-bg);border:2px solid var(--input-border);border-radius:.75rem;font-size:1rem;color:var(--text-color);transition:all .25s ease}input[type=password]::placeholder{color:#f5e9d1b3}input[type=password]:focus{border-color:var(--input-focus);box-shadow:0 0 0 3px #ccb38a4d;outline:none}.reset-btn{width:100%;padding:1rem;background:var(--btn-gradient);color:#fff;font-size:1rem;font-weight:600;border:none;border-radius:.75rem;cursor:pointer;transition:all .25s ease;position:relative;overflow:hidden;z-index:1}.reset-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:.5s;z-index:-1}.reset-btn:hover{background:var(--btn-hover);transform:translateY(-2px)}.reset-btn:hover:before{left:100%}.reset-btn:active{background:var(--btn-active);transform:translateY(0)}.reset-btn:disabled{opacity:.7;cursor:not-allowed;transform:none!important}.message-container{margin-top:1.5rem}.success-message{color:var(--success-color);background:#4caf501a;border:1px solid var(--success-color);border-radius:.5rem;padding:1rem;margin-bottom:1rem;text-align:center}.error-message{color:var(--error-color);background:#f443361a;border:1px solid var(--error-color);border-radius:.5rem;padding:1rem;margin-bottom:1rem;text-align:center}.security-tips{margin-top:1.75rem;padding:1rem;background:#00000026;border-radius:.5rem}.security-tips h4{margin-bottom:.5rem;font-size:1rem;color:var(--text-color)}.security-tips ul{padding-left:1.25rem;font-size:.875rem;opacity:.9}.security-tips li{margin-bottom:.25rem}@media (max-width: 480px){.password-reset-container{margin-top:4rem;padding:1rem}.password-reset-box{padding:1.5rem}h2{font-size:1.5rem}}