*,*:before,*:after{box-sizing:border-box}:root{--color-white: #ffffff;--color-light-grey: #f5f5f5;--color-green: #10b981;--color-dark-grey: #333333;--color-red: #ef4444;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--spacing-1: .25rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-5: 1.25rem;--spacing-6: 1.5rem;--spacing-8: 2rem;--spacing-10: 2.5rem;--spacing-12: 3rem;--spacing-16: 4rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--transition-fast: .15s ease-in-out;--transition-normal: .25s ease-in-out;--transition-slow: .35s ease-in-out}html{font-size:16px;line-height:1.5}body{margin:0;padding:0;font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--color-dark-grey);background-color:var(--color-light-grey);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;line-height:1.25;color:var(--color-dark-grey)}h1{font-size:var(--font-size-4xl)}h2{font-size:var(--font-size-3xl)}h3{font-size:var(--font-size-2xl)}h4{font-size:var(--font-size-xl)}h5{font-size:var(--font-size-lg)}h6{font-size:var(--font-size-base)}p{margin:0;color:var(--color-dark-grey)}button{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0;border:none;background:none;cursor:pointer;transition:all var(--transition-fast)}input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0;border:none;background:none;outline:none;transition:all var(--transition-fast)}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--color-green);outline-offset:2px}button,input,select,textarea{min-height:44px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.app-layout{display:grid;grid-template-columns:auto 1fr;height:100vh;overflow:hidden;background-color:var(--color-light-grey)}.main-content{display:flex;flex-direction:column;overflow-y:auto;background-color:var(--color-light-grey)}.main-header{display:none;position:fixed;top:0;left:0;right:0;height:80px;background-color:var(--color-white);box-shadow:var(--shadow-sm);z-index:1000;align-items:center;padding:0 var(--spacing-6);gap:var(--spacing-4)}.main-title{font-size:var(--font-size-xl);font-weight:700;color:var(--color-dark-grey);margin:0;background:var(--color-green);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.title-group h1{font-size:var(--font-size-2xl);color:var(--color-dark-grey);font-weight:700}.learning-container{flex-grow:1;display:flex;justify-content:center;align-items:center;padding:var(--spacing-6);background-color:var(--color-light-grey)}.hamburger-menu{display:none;position:relative;background:none;border:none;padding:0;margin:0;cursor:pointer;flex-direction:column;gap:var(--spacing-1);z-index:1001;border-radius:0;box-shadow:none;transition:none;justify-content:center;align-items:center;width:48px;height:48px}.hamburger-menu:hover{background:none;box-shadow:none;transform:none}.hamburger-menu span{display:block;width:28px;height:3px;background-color:var(--color-dark-grey);border-radius:1px;transition:all var(--transition-fast)}.overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#1f293780;z-index:999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@media(max-width:1023px){.overlay{top:80px;height:calc(100% - 80px)}}.welcome-container{text-align:center;max-width:600px;margin:0 auto}.welcome-container h1{font-size:var(--font-size-4xl);color:var(--color-dark-grey);margin-bottom:var(--spacing-4);font-weight:700}.welcome-container p{font-size:var(--font-size-xl);color:var(--color-dark-grey);margin-bottom:var(--spacing-8);line-height:1.6}.welcome-buttons{display:flex;gap:var(--spacing-4);justify-content:center;flex-wrap:wrap}.btn-primary,.btn-secondary{padding:var(--spacing-4) var(--spacing-8);border-radius:var(--radius-lg);text-decoration:none;font-size:var(--font-size-lg);font-weight:600;transition:all var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;min-height:48px;cursor:pointer;border:2px solid transparent}.btn-primary{background-color:var(--color-green);color:var(--color-white);box-shadow:var(--shadow-sm)}.btn-primary:hover{background-color:var(--color-green);box-shadow:var(--shadow-md)}.btn-secondary{background-color:var(--color-white);color:var(--color-dark-grey);border-color:var(--color-light-grey);box-shadow:var(--shadow-sm)}.btn-secondary:hover{background-color:var(--color-light-grey);border-color:var(--color-light-grey);box-shadow:var(--shadow-md)}.auth-container{min-height:100vh;background:var(--color-light-grey);display:flex;align-items:center;justify-content:center;padding:var(--spacing-6)}.split-screen-container{display:grid;grid-template-columns:1fr 1fr;max-width:1200px;width:100%;background-color:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);overflow:hidden;min-height:600px}.split-screen-visual{background:var(--color-green);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--spacing-12);color:var(--color-white);text-align:center}.visual-header{font-size:var(--font-size-4xl);font-weight:700;margin-bottom:var(--spacing-6);color:var(--color-white)}.visual-quote{font-size:var(--font-size-xl);color:#ffffffe6;line-height:1.6;margin:0}.split-screen-form{padding:var(--spacing-12);display:flex;flex-direction:column;justify-content:center}.split-screen-form h1,.split-screen-form p{margin:0}.initial-state-container h2{font-size:var(--font-size-3xl);color:var(--color-dark-grey);margin-bottom:var(--spacing-4);font-weight:600}.initial-state-container p{font-size:var(--font-size-lg);color:var(--color-dark-grey);margin-bottom:var(--spacing-8)}@media(min-width:1200px){.split-screen-container{max-width:1400px}.visual-header{font-size:3.5rem}.visual-quote{font-size:1.5rem}}@media(max-width:1199px)and (min-width:1024px){.split-screen-container{max-width:1000px}.visual-header{font-size:3rem}}@media(max-width:1023px)and (min-width:768px){.app-layout{display:block;height:100vh;overflow:hidden}.main-header{display:flex}.main-content{margin-top:80px;height:calc(100vh - 80px);overflow-y:auto;-webkit-overflow-scrolling:touch}.learning-container{padding:0 var(--spacing-5) var(--spacing-5);margin-top:0;min-height:100%;align-items:flex-start}.hamburger-menu{display:flex;background:none;border:none;padding:0;margin:0;box-shadow:none}.overlay{display:block}.split-screen-container{grid-template-columns:1fr;max-width:600px;min-height:auto}.split-screen-visual{padding:var(--spacing-8);min-height:300px}.visual-header{font-size:2.5rem}.visual-quote{font-size:1.25rem}.split-screen-form{padding:var(--spacing-8)}.welcome-container h1{font-size:2.5rem}.welcome-container p{font-size:1.125rem}.welcome-buttons{flex-direction:column;align-items:center;gap:var(--spacing-3)}.btn-primary,.btn-secondary{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-base);min-width:200px}}@media(max-width:767px){.app-layout{display:block;height:100vh;overflow:hidden}.main-header{display:flex;padding:0 var(--spacing-4)}.main-content{margin-top:80px;height:calc(100vh - 80px);overflow-y:auto;-webkit-overflow-scrolling:touch}.learning-container{padding:0 var(--spacing-4) var(--spacing-4);min-height:100%;margin-top:0;align-items:flex-start}.hamburger-menu{display:flex;padding:0;margin:0;background:none;border:none;box-shadow:none}.hamburger-menu span{width:24px;height:3px}.overlay{display:block}.split-screen-container{grid-template-columns:1fr;max-width:100%;min-height:auto;border-radius:var(--radius-lg)}.split-screen-visual{padding:var(--spacing-6);min-height:250px}.visual-header{font-size:2rem}.visual-quote{font-size:1.125rem}.split-screen-form{padding:var(--spacing-6)}.welcome-container h1{font-size:2rem;text-align:center}.welcome-container p{font-size:var(--font-size-base);text-align:center}.welcome-buttons{flex-direction:column;align-items:center;gap:var(--spacing-3)}.btn-primary,.btn-secondary{padding:var(--spacing-3) var(--spacing-5);font-size:var(--font-size-sm);min-width:180px;width:100%;max-width:280px}}@media(max-width:479px){.app-layout{height:100vh;overflow:hidden}.main-header{display:flex;padding:0 var(--spacing-3)}.main-content{margin-top:80px;height:calc(100vh - 80px);overflow-y:auto;-webkit-overflow-scrolling:touch}.learning-container{margin-top:0;min-height:100%;padding:0 var(--spacing-3) var(--spacing-3);align-items:flex-start}.hamburger-menu{padding:0;margin:0;background:none;border:none;box-shadow:none}.hamburger-menu span{width:20px;height:3px}.split-screen-visual{padding:var(--spacing-4);min-height:200px}.visual-header{font-size:1.75rem}.visual-quote{font-size:var(--font-size-base)}.split-screen-form{padding:var(--spacing-4)}.welcome-container h1{font-size:1.75rem}.welcome-container p{font-size:var(--font-size-sm)}.btn-primary,.btn-secondary{padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-sm);min-width:160px}}@media(max-height:500px)and (orientation:landscape){.learning-container{padding:var(--spacing-8) var(--spacing-2) var(--spacing-2)}.welcome-container h1{font-size:1.5rem;margin-bottom:var(--spacing-2)}.welcome-container p{font-size:var(--font-size-sm);margin-bottom:var(--spacing-4)}.welcome-buttons{flex-direction:row;gap:var(--spacing-2)}.btn-primary,.btn-secondary{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);min-width:140px}}@media(max-width:375px){.welcome-container h1{font-size:1.5rem}.welcome-container p{font-size:var(--font-size-sm)}.btn-primary,.btn-secondary{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);min-width:140px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loading{opacity:.6;pointer-events:none}.fade-in{animation:fadeIn var(--transition-normal) ease-in-out}.slide-in{animation:slideIn var(--transition-normal) ease-in-out}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}*{box-sizing:border-box}.auth-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:var(--spacing-6);background:var(--color-light-grey);width:100%;box-sizing:border-box;overflow-x:hidden}.split-screen-container{display:flex;width:100%;max-width:1200px;min-height:600px;background-color:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);overflow:hidden;border:1px solid var(--color-light-grey);box-sizing:border-box}.split-screen-visual{flex-basis:45%;display:flex;flex-direction:column;justify-content:center;padding:var(--spacing-12);color:var(--color-white);background:var(--color-green);position:relative;overflow:hidden}.split-screen-visual:before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');opacity:.3;pointer-events:none}.visual-header{font-size:var(--font-size-4xl);font-weight:700;margin-bottom:var(--spacing-6);position:relative;z-index:1;text-shadow:0 2px 4px rgba(0,0,0,.1)}.visual-quote{font-size:var(--font-size-2xl);font-weight:500;line-height:1.4;margin:0;position:relative;z-index:1;opacity:.95;text-shadow:0 1px 2px rgba(0,0,0,.1)}.split-screen-form{flex-basis:55%;display:flex;justify-content:center;align-items:center;padding:var(--spacing-8);background-color:var(--color-white);box-sizing:border-box;overflow-x:hidden}.cl-rootBox{width:100%;max-width:400px;box-sizing:border-box}.cl-card{background-color:transparent!important;box-shadow:none!important;border:none!important;padding:var(--spacing-6)!important}.cl-headerTitle{font-size:var(--font-size-3xl)!important;font-weight:700!important;color:var(--color-dark-grey)!important;margin-bottom:var(--spacing-2)!important;text-align:center!important;word-wrap:break-word!important;overflow-wrap:break-word!important;-webkit-hyphens:auto!important;hyphens:auto!important}.cl-headerSubtitle{font-size:var(--font-size-base)!important;color:var(--color-dark-grey)!important;text-align:center!important;margin-bottom:var(--spacing-6)!important;line-height:1.5!important;word-wrap:break-word!important;overflow-wrap:break-word!important;-webkit-hyphens:auto!important;hyphens:auto!important}.cl-formField{margin-bottom:var(--spacing-5)!important}.cl-formFieldLabel{font-size:var(--font-size-sm)!important;font-weight:600!important;color:var(--color-dark-grey)!important;margin-bottom:var(--spacing-2)!important}.cl-input{width:100%!important;padding:var(--spacing-3) var(--spacing-4)!important;font-size:var(--font-size-base)!important;border:1px solid var(--color-light-grey)!important;border-radius:var(--radius-lg)!important;background-color:var(--color-white)!important;color:var(--color-dark-grey)!important;transition:all var(--transition-fast)!important;box-shadow:var(--shadow-sm)!important}.cl-input:focus{outline:none!important;border-color:var(--color-green)!important;box-shadow:0 0 0 3px #10b9811a!important;transform:translateY(-1px)!important}.cl-input:hover{border-color:var(--color-light-grey)!important}.cl-formButtonPrimary{width:100%!important;padding:var(--spacing-3) var(--spacing-6)!important;font-size:var(--font-size-base)!important;font-weight:600!important;background:var(--color-green)!important;color:var(--color-white)!important;border:none!important;border-radius:var(--radius-lg)!important;cursor:pointer!important;transition:all var(--transition-fast)!important;box-shadow:var(--shadow-sm)!important;min-height:48px!important}.cl-formButtonPrimary:hover{background:var(--color-green)!important;transform:translateY(-2px)!important;box-shadow:var(--shadow-md)!important}.cl-formButtonPrimary:active{transform:translateY(0)!important}.cl-formButtonSecondary{width:100%!important;padding:var(--spacing-3) var(--spacing-6)!important;font-size:var(--font-size-base)!important;font-weight:600!important;background-color:var(--color-white)!important;color:var(--color-dark-grey)!important;border:1px solid var(--color-light-grey)!important;border-radius:var(--radius-lg)!important;cursor:pointer!important;transition:all var(--transition-fast)!important;box-shadow:var(--shadow-sm)!important;min-height:48px!important}.cl-formButtonSecondary:hover{background-color:var(--color-light-grey)!important;border-color:var(--color-light-grey)!important;transform:translateY(-1px)!important;box-shadow:var(--shadow-md)!important}.cl-footerActionLink{color:var(--color-dark-grey)!important;text-decoration:none!important;font-weight:600!important;transition:all var(--transition-fast)!important}.cl-footerActionLink:hover{color:var(--color-dark-grey)!important;text-decoration:underline!important}.cl-dividerLine{background-color:var(--color-light-grey)!important;height:1px!important}.cl-dividerText{color:var(--color-dark-grey)!important;font-size:var(--font-size-sm)!important;font-weight:500!important}.cl-socialButtonsBlockButton{border:1px solid var(--color-light-grey)!important;border-radius:var(--radius-lg)!important;background-color:var(--color-white)!important;color:var(--color-dark-grey)!important;transition:all var(--transition-fast)!important;box-shadow:var(--shadow-sm)!important}.cl-socialButtonsBlockButton:hover{background-color:var(--color-light-grey)!important;border-color:var(--color-light-grey)!important;transform:translateY(-1px)!important;box-shadow:var(--shadow-md)!important}.cl-alert{background:var(--color-light-grey)!important;border:1px solid var(--color-light-grey)!important;border-radius:var(--radius-lg)!important;color:var(--color-dark-grey)!important;padding:var(--spacing-3) var(--spacing-4)!important;margin-bottom:var(--spacing-4)!important;font-size:var(--font-size-sm)!important}.cl-alertText{color:var(--color-dark-grey)!important;font-weight:500!important}@media(max-width:1023px)and (min-width:768px){.split-screen-visual{padding:var(--spacing-8)}.visual-header{font-size:var(--font-size-3xl)}.visual-quote{font-size:var(--font-size-xl)}.split-screen-form{padding:var(--spacing-6)}.cl-headerTitle{font-size:var(--font-size-2xl)!important}}@media(max-width:767px){.auth-container{padding:var(--spacing-4)}.split-screen-visual{display:none}.split-screen-form{flex-basis:100%;padding:var(--spacing-4);width:100%;max-width:100%;box-sizing:border-box}.split-screen-container{min-height:auto;border-radius:var(--radius-lg);width:100%;max-width:100%;margin:0}.cl-rootBox{width:100%!important;max-width:100%!important;margin:0!important}.cl-card{width:100%!important;max-width:100%!important;padding:var(--spacing-4)!important;box-sizing:border-box!important}.cl-headerTitle{font-size:var(--font-size-xl)!important;word-wrap:break-word!important}.cl-headerSubtitle{font-size:var(--font-size-sm)!important;word-wrap:break-word!important}.cl-input{padding:var(--spacing-2) var(--spacing-3)!important;font-size:var(--font-size-sm)!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important}.cl-formButtonPrimary,.cl-formButtonSecondary{padding:var(--spacing-2) var(--spacing-4)!important;font-size:var(--font-size-sm)!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;min-height:44px!important;touch-action:manipulation!important}.cl-formField{width:100%!important;max-width:100%!important;box-sizing:border-box!important}}@media(max-width:479px){.auth-container{padding:var(--spacing-2)}.split-screen-container{margin:0;border-radius:var(--radius-lg);min-height:auto}.split-screen-form{padding:var(--spacing-3);width:100%;max-width:100%;box-sizing:border-box}.cl-rootBox{width:100%!important;max-width:100%!important;margin:0!important}.cl-card{padding:var(--spacing-3)!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important}.cl-headerTitle{font-size:var(--font-size-lg)!important;word-wrap:break-word!important}.cl-headerSubtitle{font-size:var(--font-size-xs)!important;word-wrap:break-word!important}.cl-input{padding:var(--spacing-2)!important;font-size:var(--font-size-sm)!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important}.cl-formButtonPrimary,.cl-formButtonSecondary{padding:var(--spacing-2) var(--spacing-3)!important;font-size:var(--font-size-sm)!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;min-height:44px!important;touch-action:manipulation!important}.cl-formField{width:100%!important;max-width:100%!important;box-sizing:border-box!important}}@media(max-width:320px){.auth-container{padding:var(--spacing-1)}.split-screen-container{border-radius:var(--radius-md);margin:0}.split-screen-form{padding:var(--spacing-2)}.cl-card{padding:var(--spacing-2)!important}.cl-headerTitle{font-size:var(--font-size-base)!important;line-height:1.2!important}.cl-headerSubtitle{font-size:.7rem!important;line-height:1.3!important}.cl-input{padding:var(--spacing-1) var(--spacing-2)!important;font-size:.8rem!important}.cl-formButtonPrimary,.cl-formButtonSecondary{padding:var(--spacing-1) var(--spacing-2)!important;font-size:.8rem!important;min-height:44px!important;touch-action:manipulation!important}.cl-formFieldLabel{font-size:.75rem!important}}.cl-input:focus-visible,.cl-formButtonPrimary:focus-visible,.cl-formButtonSecondary:focus-visible,.cl-footerActionLink:focus-visible,.cl-socialButtonsBlockButton:focus-visible{outline:2px solid var(--color-green)!important;outline-offset:2px!important}.cl-formButtonPrimary:disabled{opacity:.7!important;cursor:wait!important;transform:none!important;box-shadow:var(--shadow-sm)!important}.cl-card{animation:formSlideIn var(--transition-normal) ease-out!important}@keyframes formSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.sidebar{background-color:var(--color-white);padding:var(--spacing-8) var(--spacing-6);display:flex;flex-direction:column;gap:var(--spacing-2);border-right:1px solid var(--color-light-grey);transition:transform var(--transition-normal);box-shadow:var(--shadow-sm);width:250px;min-width:250px}.sidebar h1{margin:0 0 var(--spacing-4) 0;font-size:var(--font-size-2xl);color:var(--color-white);font-weight:700;overflow-wrap:break-word;background:var(--color-green);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:left;padding-left:var(--spacing-4)}.nav-item{display:block;width:100%;padding:var(--spacing-4) var(--spacing-4);background-color:transparent;border:none;border-radius:var(--radius-lg);text-align:left;font-size:var(--font-size-base);font-family:inherit;font-weight:500;cursor:pointer;transition:all var(--transition-fast) cubic-bezier(.4,0,.2,1);color:var(--color-dark-grey);text-decoration:none;position:relative;overflow:hidden;min-height:48px;display:flex;align-items:center}.nav-item:before{content:"";position:absolute;top:0;left:0;width:0;height:100%;background:var(--color-green);transition:width var(--transition-fast);z-index:-1;border-radius:var(--radius-lg)}.nav-item:hover{background-color:transparent;color:var(--color-white);transform:translate(6px);font-weight:600}.nav-item:hover:before{width:100%}.nav-item.active{background:var(--color-green);color:var(--color-white);font-weight:600;box-shadow:var(--shadow-md);transform:translate(4px)}.nav-item.active:before{display:none}.nav-item.active:hover{background:var(--color-green);transform:translate(6px);box-shadow:var(--shadow-lg)}.user-button-container{padding:var(--spacing-3) var(--spacing-4);border-radius:var(--radius-lg);transition:background-color var(--transition-fast);min-height:48px;display:flex;align-items:center}.user-button-container:hover{background-color:var(--color-light-grey)}.cl-userButton-root{justify-content:flex-start;width:100%}@media(max-width:1023px)and (min-width:768px){.sidebar{position:fixed;top:80px;left:0;height:calc(100% - 80px);z-index:1001;transform:translate(-100%);width:290px;max-width:85vw;box-shadow:var(--shadow-xl);padding:var(--spacing-8) var(--spacing-6)}.sidebar.open{transform:translate(0)}.sidebar h1{display:none}.nav-item{padding:var(--spacing-4) var(--spacing-4);font-size:var(--font-size-sm);min-height:48px}.user-button-container{padding:var(--spacing-3) var(--spacing-4);min-height:48px}}@media(max-width:767px){.sidebar{position:fixed;top:80px;left:0;height:calc(100% - 80px);z-index:1001;transform:translate(-100%);width:250px;max-width:90vw;box-shadow:var(--shadow-xl);padding:var(--spacing-6) var(--spacing-4)}.sidebar.open{transform:translate(0)}.sidebar h1{display:none}.nav-item{padding:var(--spacing-4) var(--spacing-4);font-size:var(--font-size-sm);min-height:48px}.user-button-container{padding:var(--spacing-3) var(--spacing-4);min-height:48px}}@media(max-width:479px){.sidebar{position:fixed;top:80px;left:0;height:calc(100% - 80px);z-index:1001;transform:translate(-100%);width:230px;max-width:95vw;box-shadow:var(--shadow-xl);padding:var(--spacing-5) var(--spacing-3)}.sidebar.open{transform:translate(0)}.sidebar h1{display:none}.sidebar-nav{margin-bottom:var(--spacing-6);padding:0}.nav-item{padding:var(--spacing-3) var(--spacing-3);font-size:var(--font-size-sm);min-height:44px}.user-button-container{padding:var(--spacing-3) var(--spacing-3);min-height:44px}}.sidebar{transition:transform var(--transition-normal) cubic-bezier(.4,0,.2,1)}.nav-item:focus-visible{outline:2px solid var(--color-green);outline-offset:2px}.sidebar.loading{opacity:.7;pointer-events:none}.modal-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#1f2937b3;display:flex;justify-content:center;align-items:center;z-index:2000;padding:var(--spacing-4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow-y:auto}.modal-content{background-color:var(--color-white);padding:0;border-radius:var(--radius-xl);width:clamp(350px,90vw,800px);display:flex;flex-direction:column;box-shadow:var(--shadow-xl);border:1px solid var(--color-light-grey);animation:modalSlideIn var(--transition-normal) ease-out;overflow:hidden;margin:auto}.modal-header{background:var(--color-white);color:var(--color-dark-grey);padding:var(--spacing-6);text-align:center;position:relative;border-bottom:1px solid var(--color-light-grey);flex-shrink:0}.modal-header h2{margin:0 0 var(--spacing-2) 0;font-size:var(--font-size-2xl);font-weight:700;display:flex;align-items:center;justify-content:center;gap:var(--spacing-2);color:#10b981}.modal-description{margin:0;font-size:var(--font-size-sm);opacity:.9;font-weight:400}.saving-indicator{color:#4ade80;font-size:.8em;font-weight:500;margin-left:var(--spacing-2);animation:saving-pulse 1.5s infinite ease-in-out}@keyframes saving-pulse{0%,to{opacity:1}50%{opacity:.7}}.settings-section{padding-top:var(--spacing-6);margin-bottom:0;border-top:1px solid var(--color-light-grey)}.settings-section.essential{padding-top:var(--spacing-4);border-top:none}.section-header{margin-bottom:var(--spacing-4);padding:0 var(--spacing-2)}.section-header h3{margin:0 0 var(--spacing-1) 0;color:#10b981;font-size:var(--font-size-lg);font-weight:600;display:flex;align-items:center;gap:var(--spacing-2);transition:color var(--transition-fast)}.section-header:hover h3{color:#059669}.section-header p{margin:0;font-size:var(--font-size-sm);color:#6b7280;font-weight:400}.setting-item{display:flex;flex-direction:column;gap:var(--spacing-2);margin-bottom:var(--spacing-5);padding:0 var(--spacing-2)}.setting-item label{display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--color-dark-grey);font-size:var(--font-size-sm);margin-bottom:var(--spacing-1)}.label-text{flex:1}.label-required{color:#ef4444;font-size:var(--font-size-xs);font-weight:500;background:#fef2f2;padding:2px 6px;border-radius:4px}.setting-description{font-size:var(--font-size-sm);color:#6b7280;line-height:1.5;margin:0 0 var(--spacing-2) 0}.help-link{color:#3b82f6;text-decoration:none;font-weight:500;margin-left:var(--spacing-1)}.help-link:hover{text-decoration:underline}.setting-item input,.setting-item select,.topic-textarea{width:100%;padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-base);border:1px solid #d1d5db;border-radius:var(--radius-md);background-color:var(--color-white);font-family:inherit;transition:all var(--transition-fast)}.setting-item select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:.9em auto;padding-right:2.5rem}.api-key-input{font-family:Courier New,monospace}.api-key-container{position:relative;display:flex;align-items:center;width:100%}.api-key-container .api-key-input{padding-right:40px}.api-key-toggle{position:absolute;right:1px;top:1px;bottom:1px;border:none;background:transparent;padding:0 10px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6b7280;border-radius:var(--radius-md)}.api-key-toggle:hover{color:#1f2937}.api-key-toggle:disabled{cursor:not-allowed;opacity:.5}.topic-textarea{min-height:160px;font-family:inherit}.clear-topic-button{margin-top:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);font-weight:500;border:1px solid #fca5a5;border-radius:var(--radius-md);background-color:#fef2f2;color:#dc2626;cursor:pointer;transition:all var(--transition-fast);font-family:inherit;align-self:flex-start}.clear-topic-button:hover:not(:disabled){background-color:#fee2e2;border-color:#f87171;color:#b91c1c}.clear-topic-button:disabled{opacity:.5;cursor:not-allowed;background-color:#fef2f2;color:#fca5a5}.clear-topic-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.input-with-unit{display:flex;align-items:center;gap:var(--spacing-2)}.input-with-unit input{flex:1}.input-unit{font-size:var(--font-size-sm);color:#6b7280;font-weight:500;min-width:60px;text-align:center}.toggle-container{display:flex;align-items:center;gap:var(--spacing-3)}.toggle-input{display:none}.toggle-label{position:relative;display:inline-block;width:60px;height:30px;cursor:pointer}.toggle-slider{position:absolute;inset:0;background-color:#d1d5db;border-radius:30px;transition:all var(--transition-fast)}.toggle-slider:before{position:absolute;content:"";height:24px;width:24px;left:3px;bottom:3px;background-color:#fff;border-radius:50%;transition:all var(--transition-fast);box-shadow:0 2px 4px #0003}.toggle-input:checked+.toggle-label .toggle-slider{background-color:#10b981}.toggle-input:checked+.toggle-label .toggle-slider:before{transform:translate(30px)}.toggle-input:disabled+.toggle-label{cursor:not-allowed;opacity:.6}.toggle-text{font-size:var(--font-size-sm);font-weight:500;color:var(--color-dark-grey);min-width:60px}.setting-item input:focus,.setting-item select:focus,.topic-textarea:focus{outline:none;border-color:var(--color-green);box-shadow:0 0 0 3px #10b98126}.setting-item input:hover:not(:disabled),.setting-item select:hover:not(:disabled),.topic-textarea:hover:not(:disabled){border-color:#9ca3af}.input-error{border-color:#ef4444!important;box-shadow:0 0 0 2px #ef44441a!important}.error-text{color:#ef4444;font-size:var(--font-size-xs);margin:var(--spacing-1) 0 0 0;font-weight:500}.modal-actions{display:flex;justify-content:center;gap:var(--spacing-3);margin-top:var(--spacing-6);padding:var(--spacing-6) var(--spacing-6) 0;border-top:1px solid var(--color-light-grey);background-color:var(--color-white);flex-shrink:0}.save-button{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-base);font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);background:#10b981;color:#fff;font-family:inherit}.save-button:hover{background:#059669}.save-button:disabled{opacity:.6;cursor:not-allowed;background:#9ca3af}@media(max-width:1023px)and (min-width:768px){.modal-backdrop{padding:var(--spacing-5)}.modal-content{width:70%;max-width:600px}.modal-scroll-wrapper{padding:var(--spacing-4);max-height:65vh}.settings-section{padding-top:var(--spacing-4)}.setting-item{margin-bottom:var(--spacing-4)}.modal-header h2{font-size:var(--font-size-xl)}}@media(max-width:767px){.modal-backdrop{padding:var(--spacing-4);align-items:flex-start;padding-top:var(--spacing-8)}.modal-content{width:95%;max-width:none;min-width:320px;max-height:90vh;margin-top:0}.modal-scroll-wrapper{padding:var(--spacing-3);max-height:calc(90vh - 150px)}.modal-header{padding:var(--spacing-4)}.modal-header h2{font-size:var(--font-size-xl)}.settings-section{padding-top:var(--spacing-4)}.section-header h3{font-size:var(--font-size-base)}.section-header p{font-size:var(--font-size-sm)}.setting-item{margin-bottom:var(--spacing-4)}.setting-item label{font-size:var(--font-size-sm)}.setting-item input,.setting-item select,.topic-textarea{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.modal-actions{padding-top:var(--spacing-4);flex-direction:column;gap:var(--spacing-3)}.save-button{width:100%;padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm)}}@media(max-width:479px){.modal-backdrop{padding:var(--spacing-3);padding-top:var(--spacing-6)}.modal-content{width:98%;min-width:280px}.modal-scroll-wrapper{padding:var(--spacing-2)}.modal-header{padding:var(--spacing-3)}.modal-header h2{font-size:var(--font-size-lg)}.settings-section{padding-top:var(--spacing-3)}.section-header h3{font-size:var(--font-size-sm)}.section-header p{font-size:var(--font-size-xs)}.setting-item{margin-bottom:var(--spacing-3)}.setting-item label{font-size:var(--font-size-xs)}.setting-item input,.setting-item select,.topic-textarea{padding:var(--spacing-2);font-size:var(--font-size-sm)}.modal-actions{padding-top:var(--spacing-3)}.save-button{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}}.save-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.modal-content.loading{opacity:.8;pointer-events:none}.modal-backdrop{animation:backdropFadeIn var(--transition-fast) ease-out}.sentence-display-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-6)}.sentence-card{background-color:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--spacing-8);width:80%;margin:0;display:flex;flex-direction:column;gap:var(--spacing-6);transition:all var(--transition-normal);border:1px solid var(--color-light-grey)}.sentence-card:hover{box-shadow:var(--shadow-xl);transform:translateY(-2px)}.sentence-container{text-align:center;margin-bottom:var(--spacing-4)}.target-sentence{font-size:2.5rem;font-weight:600;line-height:1.4;color:var(--color-dark-grey);margin-bottom:var(--spacing-4);display:flex;align-items:center;justify-content:center}.native-sentence{font-size:var(--font-size-xl);color:var(--color-dark-grey);min-height:1.5em;font-weight:500}.word{cursor:pointer;padding:0;transition:all var(--transition-fast);border-radius:var(--radius-sm);position:relative}.word:hover{font-weight:700;transform:scale(1.05)}.mode-toggle{display:flex;justify-content:center;margin:0;border:1px solid var(--color-light-grey);border-radius:var(--radius-lg);overflow:hidden;width:fit-content;background-color:var(--color-white);box-shadow:var(--shadow-sm)}.mode-toggle button{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-base);font-weight:600;border:none;cursor:pointer;background-color:transparent;color:var(--color-dark-grey);transition:all var(--transition-fast);position:relative}.mode-toggle button:first-child{border-right:none}.mode-toggle button:hover:not(.active){background-color:var(--color-light-grey);color:var(--color-dark-grey)}.mode-toggle button.active{background:var(--color-green);color:var(--color-white);font-weight:700}.actions button,.navigation button,.generate-button{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-base);font-weight:600;border-radius:var(--radius-lg);border:none;cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-shadow:var(--shadow-sm)}.star-button{background:transparent!important;color:inherit!important;padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-lg);cursor:pointer;transition:none!important;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;box-shadow:none!important;transform:none!important}.star-button:hover{background:transparent!important;color:inherit!important;box-shadow:none!important;transform:none!important;transition:none!important}.generate-button,.actions button:last-child{background:var(--color-green);color:var(--color-white)}.generate-button:hover,.actions button:last-child:hover{background:var(--color-green);transform:translateY(-2px);box-shadow:var(--shadow-md)}.actions button:first-child,.navigation button{background-color:var(--color-white);color:var(--color-dark-grey);border:1px solid var(--color-light-grey)}.actions button:first-child:hover,.navigation button:hover:not(:disabled){background-color:var(--color-light-grey);border-color:var(--color-light-grey);transform:translateY(-1px);box-shadow:var(--shadow-md)}.navigation button:disabled{visibility:hidden;cursor:not-allowed;transform:none}.speak-button{background:transparent;border:none;font-size:var(--font-size-2xl);cursor:pointer;transition:all var(--transition-fast);padding:var(--spacing-2);line-height:1;border-radius:var(--radius-lg);width:60px;height:60px;display:flex;align-items:center;justify-content:center}.inline-speak-button{background:transparent;border:none;cursor:pointer;transition:all var(--transition-fast);padding:0;line-height:1;border-radius:var(--radius-md);display:inline-flex;align-items:center;justify-content:center;margin-left:var(--spacing-3);vertical-align:middle;min-width:40px;min-height:40px}.inline-speak-button:hover{transform:scale(1.1)}.inline-speak-button:active{transform:scale(.95)}.inline-speak-button,.star-button{vertical-align:middle;display:inline-flex;align-items:center;justify-content:center}.actions,.navigation{display:flex;justify-content:center;align-items:center;gap:var(--spacing-4);flex-wrap:wrap}.navigation span{font-size:var(--font-size-lg);font-weight:600;color:var(--color-dark-grey);min-width:80px;text-align:center}.navigation .review-counter{display:block;width:100%;text-align:center;font-size:var(--font-size-lg);font-weight:600;color:var(--color-dark-grey);margin:0;padding:var(--spacing-2) 0}.review-decision{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-4);margin-top:var(--spacing-4);border-top:1px solid var(--color-light-grey);padding-top:var(--spacing-6);width:100%}.grade-instructions{text-align:center;margin-bottom:var(--spacing-4)}.grade-instructions p{font-size:var(--font-size-lg);font-weight:600;color:var(--color-dark-grey);margin:0}.grade-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-6);max-width:1000px;margin:0 auto;width:100%}.decision-button{padding:var(--spacing-4) var(--spacing-2);font-size:var(--font-size-sm);font-weight:600;border-radius:var(--radius-lg);border:none;cursor:pointer;transition:all var(--transition-fast);color:var(--color-white);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;min-height:80px}.decision-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md)}.decision-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.grade-icon{font-size:1.5rem;margin-bottom:var(--spacing-1);line-height:1}.grade-label{font-size:var(--font-size-base);font-weight:700;margin-bottom:var(--spacing-1);line-height:1.2}.grade-description{font-size:var(--font-size-xs);font-weight:400;opacity:.9;line-height:1.3;max-width:180px}.decision-button.forgot{background:linear-gradient(135deg,#dc2626,#b91c1c);border:2px solid #dc2626}.decision-button.forgot:hover:not(:disabled){background:linear-gradient(135deg,#b91c1c,#991b1b);border-color:#b91c1c}.decision-button.hard{background:linear-gradient(135deg,#f59e0b,#d97706);border:2px solid #f59e0b}.decision-button.hard:hover:not(:disabled){background:linear-gradient(135deg,#d97706,#b45309);border-color:#d97706}.decision-button.good{background:linear-gradient(135deg,#10b981,#059669);border:2px solid #10b981}.decision-button.good:hover:not(:disabled){background:linear-gradient(135deg,#059669,#047857);border-color:#059669}.decision-button.easy{background:linear-gradient(135deg,#3b82f6,#2563eb);border:2px solid #3b82f6}.decision-button.easy:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8);border-color:#3b82f6}@media(max-width:1023px)and (min-width:768px){.sentence-card{padding:var(--spacing-6);margin:0;width:85%}.target-sentence{font-size:2.25rem}.native-sentence{font-size:var(--font-size-lg)}.actions button,.navigation button,.generate-button,.mode-toggle button{padding:var(--spacing-2) var(--spacing-5);font-size:var(--font-size-sm)}}@media(max-width:767px){.sentence-display-container{padding:0 var(--spacing-2)}.sentence-card{padding:var(--spacing-5);margin:0;width:95%;gap:var(--spacing-5)}.target-sentence{font-size:1.75rem}.native-sentence{font-size:var(--font-size-base)}.speak-button{font-size:var(--font-size-xl);padding:var(--spacing-1);width:50px;height:50px}.inline-speak-button{margin-left:var(--spacing-1)}.inline-speak-button,.star-button{vertical-align:middle;display:inline-flex;align-items:center;justify-content:center}.actions,.navigation{flex-direction:column;width:100%;gap:var(--spacing-3)}.actions button,.navigation button,.generate-button{width:100%;padding:var(--spacing-2) var(--spacing-5);font-size:var(--font-size-sm)}.star-button{width:auto;min-width:44px}.mode-toggle{margin:0}.mode-toggle button{padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-sm)}.review-decision{flex-direction:column;gap:var(--spacing-3);padding-top:var(--spacing-4)}.grade-buttons{grid-template-columns:repeat(4,1fr);gap:var(--spacing-4);max-width:100%}.decision-button{padding:var(--spacing-3) var(--spacing-1);font-size:var(--font-size-xs);min-height:70px}.grade-icon{font-size:1rem}.grade-label{font-size:var(--font-size-xs)}.grade-description{font-size:10px;max-width:120px}.initial-state-container{padding:var(--spacing-8) var(--spacing-4);min-height:250px}.status-message{font-size:var(--font-size-base)}}@media(max-width:479px){.sentence-display-container{padding:0 var(--spacing-1)}.sentence-card{padding:var(--spacing-4);margin:0;width:98%;gap:var(--spacing-4)}.target-sentence{font-size:1.5rem}.native-sentence{font-size:var(--font-size-sm)}.speak-button{font-size:var(--font-size-lg);width:45px;height:45px}.inline-speak-button{margin-left:var(--spacing-1)}.inline-speak-button,.star-button{vertical-align:middle;display:inline-flex;align-items:center;justify-content:center}.actions button,.navigation button,.generate-button{padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-sm)}.mode-toggle button{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.grade-buttons{grid-template-columns:repeat(4,1fr);gap:var(--spacing-2);max-width:100%;overflow-x:auto}.decision-button{padding:var(--spacing-2) var(--spacing-1);font-size:10px;min-height:60px;min-width:50px}.grade-icon{font-size:.875rem}.grade-label{font-size:10px}.grade-description{font-size:9px;max-width:90px;line-height:1.1}.initial-state-container{padding:var(--spacing-6) var(--spacing-3);min-height:200px}.status-message{font-size:var(--font-size-sm)}.status-message.error.small{font-size:var(--font-size-xs);padding:var(--spacing-1) var(--spacing-3)}}.word:focus-visible,.actions button:focus-visible,.navigation button:focus-visible,.generate-button:focus-visible,.speak-button:focus-visible,.inline-speak-button:focus-visible,.decision-button:focus-visible,.star-button:focus-visible{outline:2px solid var(--color-green);outline-offset:2px}.sentence-card.loading{opacity:.7;pointer-events:none}.sentence-card{animation:cardSlideIn var(--transition-normal) ease-out}.search-container{width:80%;margin:0;display:flex;flex-direction:column;gap:var(--spacing-6)}.search-bar-container{position:relative;display:flex;align-items:center;background-color:var(--color-white);border:2px solid transparent;border-radius:var(--radius-lg);padding:0;transition:all var(--transition-fast);max-width:800px;width:30%;margin:0;box-shadow:var(--shadow-md)}.search-bar-container:focus-within{outline:none;border-color:var(--color-green);box-shadow:var(--shadow-lg)}.search-icon{color:var(--color-green);margin:0 var(--spacing-2) 0 var(--spacing-2);flex-shrink:0}.search-input{flex:1;border:none;outline:none;font-size:var(--font-size-base);color:var(--color-dark-grey);background:transparent;padding:0 var(--spacing-2) 0 0}.search-input:focus{outline:none;border:none}.search-input:focus-visible{outline:none;border:none}.search-input::placeholder{color:var(--color-grey)}.search-clear-button{background:none;border:none;cursor:pointer;padding:var(--spacing-1);display:flex;align-items:center;justify-content:center;color:var(--color-grey);transition:color var(--transition-fast);margin-left:var(--spacing-2);flex-shrink:0;border-radius:var(--radius-sm)}.search-clear-button:hover{color:var(--color-dark-grey);background-color:var(--color-light-grey)}.search-results{display:flex;flex-direction:column;gap:var(--spacing-4);max-height:60vh;overflow-y:auto}.search-results-count{font-size:var(--font-size-sm);color:var(--color-grey);margin:0;padding:0 var(--spacing-2)}.search-results-list{display:flex;flex-direction:column;gap:var(--spacing-3)}.search-result-item{background-color:var(--color-white);border:1px solid var(--color-light-grey);border-radius:var(--radius-lg);padding:var(--spacing-4);cursor:pointer;transition:all var(--transition-normal);display:flex;flex-direction:column;gap:var(--spacing-3)}.search-result-item:hover{border-color:var(--color-green);box-shadow:var(--shadow-md);transform:translateY(-2px)}.search-result-item:active{transform:translateY(0)}.search-result-target{font-size:var(--font-size-lg);font-weight:600;color:var(--color-dark-grey);line-height:1.5}.search-result-native{font-size:var(--font-size-base);color:var(--color-grey);line-height:1.4;font-style:italic}@media(max-width:768px){.search-container{width:95%}.search-bar-container{padding:var(--spacing-2) var(--spacing-3)}.search-input{font-size:var(--font-size-sm)}.search-results{max-height:50vh}.search-result-item{padding:var(--spacing-3)}.search-result-target{font-size:var(--font-size-base)}.search-result-native{font-size:var(--font-size-sm)}}.flashcards-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-6);padding:var(--spacing-4);min-height:100%;box-sizing:border-box}@media(max-width:1023px){.flashcards-container{padding-top:var(--spacing-2)}}.error-banner{background-color:#fee;color:#c33;padding:var(--spacing-4);border-radius:var(--radius-lg);width:90%;text-align:center;font-weight:500}.flashcards-sets-list{width:90%;max-width:1200px;max-height:calc(100vh - 140px);overflow-y:auto;display:flex;flex-direction:column;gap:var(--spacing-6)}@media(max-width:767px){.flashcards-sets-list{max-height:none;overflow-y:visible}}.sets-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-4)}.sets-header-actions{display:flex;gap:var(--spacing-3);align-items:center}.sets-header h2{margin:0;font-size:var(--font-size-2xl);color:var(--color-dark-grey)}.sets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-4)}.set-card{background-color:var(--color-white);border-radius:var(--radius-xl);padding:var(--spacing-6);transition:all var(--transition-normal);border:1px solid var(--color-light-grey);display:flex;flex-direction:column;gap:var(--spacing-4);min-height:140px;cursor:pointer}.set-card:hover{transform:translateY(-2px);border-color:var(--color-green);background-color:#f9fafb}.set-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-3);margin-bottom:var(--spacing-2)}.set-card-header h3{margin:0;font-size:var(--font-size-lg);font-weight:600;color:var(--color-dark-grey);flex:1;line-height:1.4;word-break:break-word}.set-description{color:var(--color-grey);font-size:var(--font-size-sm);margin:0;line-height:1.5;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.set-meta{color:var(--color-grey);font-size:var(--font-size-sm);margin:auto 0 0;font-weight:500;padding-top:var(--spacing-2);border-top:1px solid var(--color-light-grey)}.trash-meta{color:var(--color-grey);font-size:var(--font-size-xs);margin:0;font-style:italic;margin-top:var(--spacing-2)}.flashcards-create-edit{width:90%;max-width:1200px;background-color:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--spacing-8);border:1px solid var(--color-light-grey);max-height:calc(100vh - 140px);overflow-y:auto;display:flex;flex-direction:column;gap:var(--spacing-6)}@media(max-width:767px){.flashcards-create-edit{max-height:none;overflow-y:visible}}.flashcards-create-edit textarea{resize:none}.create-header{display:flex;justify-content:space-between;align-items:center}.create-header h2{margin:0;font-size:var(--font-size-2xl);color:var(--color-dark-grey)}.back-button{display:flex;align-items:center;gap:var(--spacing-2);background:var(--color-light-grey);border:none;padding:var(--spacing-3) var(--spacing-4);border-radius:var(--radius-lg);cursor:pointer;font-weight:500;transition:all var(--transition-fast)}.create-form{display:flex;flex-direction:column;gap:var(--spacing-6)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-2)}.form-group label{font-weight:500;color:var(--color-dark-grey);font-size:var(--font-size-sm)}.form-group input[type=text],.form-group input[type=number],.form-group input[type=date],.form-group textarea,.form-group select{padding:var(--spacing-3);border:1px solid var(--color-light-grey);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-family:inherit}.cards-section{display:flex;flex-direction:column;gap:var(--spacing-4)}.cards-header{display:flex;justify-content:space-between;align-items:center}.cards-header h3{margin:0;font-size:var(--font-size-lg);color:var(--color-dark-grey)}.cards-actions{display:flex;gap:var(--spacing-3)}.cards-actions button{display:flex;align-items:center;gap:var(--spacing-2);background:var(--color-green);color:#fff;border:none;padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-lg);cursor:pointer;font-weight:500;transition:all var(--transition-fast)}.import-section{background-color:var(--color-light-grey);padding:var(--spacing-4);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--spacing-4)}.import-options{display:flex;flex-direction:column;gap:var(--spacing-4);padding-bottom:var(--spacing-4);border-bottom:1px solid #ccc}.import-option-group{display:flex;flex-direction:column;gap:var(--spacing-2)}.import-option-label{font-weight:600;font-size:var(--font-size-sm);color:var(--color-dark-grey)}.radio-group{display:flex;flex-direction:column;gap:var(--spacing-2)}.radio-group label{display:flex;align-items:center;gap:var(--spacing-2);font-weight:400;cursor:pointer;font-size:var(--font-size-sm)}.radio-group label input[type=radio]{appearance:auto;width:auto}.custom-separator-input{padding:var(--spacing-2) var(--spacing-3);border:1px solid #ccc;border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-family:inherit;width:150px}.custom-separator-input:disabled{background-color:#f0f0f0;cursor:not-allowed;opacity:.6}.import-section textarea{width:100%;padding:var(--spacing-3);border:1px solid #ccc;border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-family:inherit}.import-actions{display:flex;gap:var(--spacing-3)}.import-actions button{padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-lg);border:none;cursor:pointer;font-weight:500;transition:all var(--transition-fast)}.import-actions button:first-child{background:var(--color-green);color:#fff}.import-actions button:last-child{background:var(--color-light-grey);color:var(--color-dark-grey)}.cards-list{display:flex;flex-direction:column;gap:var(--spacing-4);max-height:600px;overflow-y:auto;padding-right:var(--spacing-2)}@media(max-width:767px){.cards-list{max-height:none;overflow-y:visible}}.card-item{background-color:var(--color-light-grey);border-radius:var(--radius-lg);padding:var(--spacing-4);border:2px solid transparent;transition:all var(--transition-fast);display:flex;flex-direction:column;gap:var(--spacing-3)}.card-item.editing{border-color:var(--color-green);background-color:#f0fff4}.card-header{display:flex;align-items:center;gap:var(--spacing-3)}.card-header .star-button{background:none;border:none;cursor:pointer;padding:var(--spacing-1);color:#ffdc62;transition:all var(--transition-fast)}.card-header .star-button.starred{color:#ffdc62}.card-header .delete-card{background:none;border:none;cursor:pointer;padding:var(--spacing-1);color:#c33;transition:all var(--transition-fast)}.card-content{display:flex;flex-direction:row;gap:var(--spacing-4)}.card-field{display:flex;flex-direction:column;gap:var(--spacing-2);flex:1}.card-field label{font-size:var(--font-size-sm);font-weight:500;color:var(--color-dark-grey)}.field-with-tts{display:flex;gap:var(--spacing-2);align-items:flex-start}.field-with-tts input,.field-with-tts textarea{flex:1;padding:var(--spacing-3);border:1px solid #ccc;border-radius:var(--radius-lg);font-size:var(--font-size-base);font-family:inherit}.tts-button{background:transparent;border:none;cursor:pointer;padding:var(--spacing-2);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);flex-shrink:0}.tts-button:active{transform:scale(.95)}.card-field select{padding:var(--spacing-2);border:1px solid #ccc;border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-family:inherit}.study-options-section{border-top:1px solid var(--color-light-grey);padding-top:var(--spacing-6);display:flex;flex-direction:column;gap:var(--spacing-4)}.study-options-section h3{margin:0;font-size:var(--font-size-lg);color:var(--color-dark-grey)}.intervals-grid{display:flex;flex-direction:column;gap:var(--spacing-4)}.intervals-grid>div{display:flex;flex-direction:column;gap:var(--spacing-2)}.intervals-grid label{font-size:var(--font-size-sm);font-weight:500}.intervals-grid input{padding:var(--spacing-2);border:1px solid #ccc;border-radius:var(--radius-lg);font-size:var(--font-size-base)}.checkbox-group{display:flex;flex-direction:column;gap:var(--spacing-2)}.checkbox-group label{display:flex;align-items:center;font-weight:400}.form-actions{display:flex;justify-content:flex-end}.generate-button{background:var(--color-green);color:#fff;border:none;padding:var(--spacing-4) var(--spacing-6);border-radius:var(--radius-lg);cursor:pointer;font-weight:600;font-size:var(--font-size-base);transition:all var(--transition-fast);display:flex;align-items:center;gap:var(--spacing-2)}.generate-button:disabled{opacity:.6;cursor:not-allowed}.generate-button.delete-button{background:var(--color-red)!important;color:#fff!important}.generate-button.delete-button:hover:not(:disabled){background:var(--color-red)!important;opacity:.9}.flashcards-view{width:90%;max-width:1200px;padding:0;background-color:#fff;border-radius:var(--radius-xl);box-shadow:0 2px 16px #0000000f;animation:fadeIn .3s ease-in-out;height:calc(100vh - 140px);max-height:calc(100vh - 140px);overflow:hidden;display:flex;flex-direction:column;gap:0;border:1px solid var(--color-light-grey)}@media(max-width:767px){.flashcards-view{height:auto;max-height:none;overflow:visible}}.view-header{background:linear-gradient(to bottom,#fff,#f9fafb);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:1.75rem 2rem;border-bottom:1px solid var(--color-light-grey);margin-bottom:0}.view-header-content{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem}.view-title-section{flex:1;min-width:0}.view-header h2{margin:0 0 .625rem;font-size:1.75rem;font-weight:700;color:var(--color-dark-grey);line-height:1.3;word-break:break-word}.view-meta-info{display:flex;align-items:center;gap:.875rem;flex-wrap:wrap}.card-count-badge{display:inline-flex;align-items:center;padding:.35rem .75rem;background:var(--color-green);color:#fff;border-radius:12px;font-size:.8125rem;font-weight:600;box-shadow:0 1px 4px #159ce426}.view-description-preview{color:var(--color-grey);font-size:.9rem;font-weight:400;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.view-actions{display:flex;gap:.625rem;flex-shrink:0;flex-wrap:wrap}.view-action-btn{display:flex;align-items:center;gap:.5rem;padding:.625rem 1rem;font-size:.875rem;font-weight:600;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.view-action-primary{background:var(--color-green);color:#fff;box-shadow:0 2px 8px #159ce433}.view-action-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #159ce44d}.view-action-secondary{background:#fefefe;color:var(--color-dark-grey);border:1px solid #e5e7eb}.view-action-secondary:hover:not(:disabled){background:var(--color-light-grey);border-color:#bdc3c7;box-shadow:0 2px 8px #0000001a}.view-action-close{background:transparent;color:var(--color-grey);padding:.5rem;border-radius:var(--radius-lg);min-width:40px;justify-content:center;transition:all var(--transition-fast)}.view-action-close:hover:not(:disabled){background:#0000000d;color:var(--color-dark-grey)}.view-search-container{position:relative;padding:1.25rem 2rem;background:#fff;border-bottom:1px solid var(--color-light-grey)}.search-icon{position:absolute;top:50%;left:2.5rem;transform:translateY(-50%);color:var(--color-grey);pointer-events:none}.view-search-input{width:100%;padding:.75rem 3rem;border-radius:var(--radius-lg);border:1px solid var(--color-light-grey);font-size:.9375rem;font-family:inherit;transition:all var(--transition-fast);background:#fafafa}.view-search-input:focus{outline:none;border-color:var(--color-green);background:#fff;box-shadow:0 0 0 3px #159ce41a}.search-clear-btn{position:absolute;top:50%;right:2.5rem;transform:translateY(-50%);background:var(--color-light-grey);border:none;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-grey);transition:all var(--transition-fast);padding:0}.search-clear-btn:hover{background:#bdc3c7}.view-cards-scroll{flex:1 1 auto;display:flex;flex-direction:column;gap:0;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}@media(max-width:767px){.view-cards-scroll{overflow-y:visible;min-height:auto}}@media(max-width:900px){.flashcards-view{width:100%;max-width:none;height:auto;max-height:none;border-radius:0;border:none;box-shadow:none;padding:0;overflow:visible}.view-header{position:relative;border-radius:0;padding:1.25rem 1rem}.view-header-content{flex-direction:column;gap:1rem;align-items:stretch}.view-header h2{font-size:1.5rem}.view-actions{width:100%;justify-content:stretch}.view-action-btn{flex:1 1 auto;justify-content:center;min-width:0}.view-search-container{padding:1rem;flex-shrink:0;border-bottom:1px solid var(--color-light-grey)}.search-icon{left:1.5rem}.view-search-input{padding-left:2.5rem;padding-right:2.5rem;font-size:.9rem}.search-clear-btn{right:1.5rem}.grouped-cards-container{gap:1rem;padding:1rem}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;background:#fff}.empty-state-icon{color:var(--color-grey);margin-bottom:1.25rem;opacity:.5}.empty-state-message{font-size:1rem;color:var(--color-grey);margin:0 0 1.25rem;font-weight:500}.empty-state-action{padding:.625rem 1.25rem;background:var(--color-green);color:#fff;border:none;border-radius:var(--radius-lg);font-weight:600;cursor:pointer;transition:all var(--transition-fast);font-size:.9rem}.empty-state-action:hover{transform:translateY(-1px);box-shadow:0 2px 8px #159ce433}.grouped-cards-container{display:flex;flex-direction:column;gap:1.25rem;padding:1.5rem 2rem 2rem;background:#fff}.cards-list-view{display:flex;flex-direction:column;gap:1rem;padding:0}.card-item-view{background:#fff;border:1px solid var(--color-light-grey);border-radius:var(--radius-lg);padding:0;transition:all var(--transition-normal);box-shadow:0 1px 3px #0000000d;overflow:hidden;display:flex;flex-direction:column;position:relative}.card-item-view:hover{transform:translateY(-2px);border-color:var(--color-green);box-shadow:0 4px 12px #159ce41f}.card-item-header{display:flex;justify-content:space-between;align-items:center;padding:.875rem 1.125rem;background:var(--color-light-grey);border-bottom:1px solid #e0e0e0;min-height:48px}.card-star-indicator{display:flex;align-items:center;flex:1}.card-item-actions{display:flex;gap:.875rem;align-items:center}.card-action-btn{background:none;border:none;padding:.375rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);color:var(--color-grey);border-radius:var(--radius-lg);min-width:32px;min-height:32px}.card-action-btn:hover{background:#fff}.card-action-tts{color:var(--color-green)}.card-action-tts:hover{background:#f0fff4}.card-action-edit{color:#3b82f6}.card-action-edit:hover{background:#eff6ff}.card-action-delete{color:#ef4444}.card-action-delete:hover{background:#fef2f2}.card-item-content{display:grid;grid-template-columns:1fr auto 1fr;gap:0;padding:1rem .875rem;align-items:start}.card-side{display:flex;flex-direction:column;gap:.375rem;min-width:0}.card-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-grey);margin-bottom:.25rem}.card-text-wrapper{display:block;line-height:1.5}.card-text{white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;font-size:1rem;line-height:1.5;color:var(--color-dark-grey);display:inline}.card-term .card-text{font-weight:600;color:var(--color-dark-grey)}.card-definition .card-text{font-weight:400;color:#555}.card-divider{width:1px;background:var(--color-light-grey);margin:0 1.125rem;flex-shrink:0;align-self:stretch}.card-action-tts-inline{display:inline-block;margin-left:.375rem;vertical-align:middle;margin-top:-2px}.show-more-button{width:100%;padding:.75rem;background:var(--color-light-grey);border:1px solid #d0d0d0;border-radius:var(--radius-lg);cursor:pointer;font-weight:600;color:var(--color-grey);display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all var(--transition-fast);margin-top:.5rem;font-size:.875rem}.show-more-button:hover{background:#d9d9d9;border-color:var(--color-green);color:var(--color-green)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.flashcards-view::-webkit-scrollbar,.view-cards-scroll::-webkit-scrollbar{width:8px}.flashcards-view::-webkit-scrollbar-track,.view-cards-scroll::-webkit-scrollbar-track{background:transparent}.flashcards-view::-webkit-scrollbar-thumb,.view-cards-scroll::-webkit-scrollbar-thumb{background:#d0d0d0;border-radius:4px;transition:background var(--transition-fast)}.flashcards-view::-webkit-scrollbar-thumb:hover,.view-cards-scroll::-webkit-scrollbar-thumb:hover{background:#a0a0a0}.flashcards-study{display:flex;flex-direction:column;align-items:center;width:100%;max-width:1100px;margin:0 auto;min-height:100%;overflow-x:hidden;box-sizing:border-box;padding:1rem .75rem 3rem;gap:1rem}@media(max-width:768px){.flashcards-study{gap:.875rem;height:auto;max-height:none;overflow-y:visible;overflow-x:hidden;display:flex;flex-direction:column;padding-bottom:2.5rem}.study-header,.study-progress{flex-shrink:0}.study-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;max-height:calc(100vh - 260px);overflow:hidden}.card-header-row,.study-question{flex-shrink:0}.written-answer-feedback{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.answer-container.correct{max-height:150px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.study-card-container{margin-bottom:0}.study-bottom-actions{margin-top:0;flex-shrink:0;padding-bottom:2.5rem}.grading-container{padding-bottom:.75rem}}@media(min-width:1024px){.flashcards-study{height:100vh;max-height:100vh;overflow-y:auto}}.study-header{display:flex;justify-content:space-between;align-items:center;width:100%;flex-shrink:0}.study-header h2{margin:0;font-size:1.5rem;color:var(--color-dark-grey);font-weight:600}.study-header button{display:flex;align-items:center;gap:var(--spacing-2);background:var(--color-light-grey);color:var(--color-dark-grey);border:none;padding:.5rem .75rem;border-radius:var(--radius-lg);cursor:pointer;font-weight:500;font-size:.875rem;transition:all var(--transition-fast)}.study-header-actions{display:flex;gap:.5rem}.study-progress{text-align:center;color:var(--color-grey);font-size:.875rem;flex-shrink:0}.study-card{position:relative;background-color:var(--color-white);border-radius:var(--radius-xl);padding:clamp(1rem,3vw,1.5rem);width:100%;max-width:min(90vw,600px);margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;text-align:center;box-shadow:var(--shadow-lg);transition:transform .2s;border:1px solid var(--color-light-grey);flex-shrink:0;overflow:visible;gap:clamp(.5rem,1.5vw,.75rem);min-height:fit-content}@media(min-width:1024px){.study-card{max-width:900px;aspect-ratio:6 / 4;justify-content:space-between}.study-card:has(.retype-answer-form),.study-card:has(.written-answer-feedback),.study-card:has(.answer-container.correct){aspect-ratio:unset;min-height:450px;height:auto}}.card-header-row{display:flex;align-items:center;width:100%;position:relative}.edit-card-button{background:transparent;border:none;box-shadow:none;cursor:pointer;color:var(--color-green);padding:0;display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;min-height:18px;flex-shrink:0;margin-left:auto}.card-status-label{padding:clamp(.2rem,.5vw,.25rem) clamp(.5rem,1.5vw,.75rem);border-radius:6px;font-size:clamp(.6rem,1.5vw,.7rem);font-weight:600;color:#fff;text-transform:capitalize;box-shadow:0 1px 3px #0000001a;white-space:nowrap;flex-shrink:0}.status-new{background-color:#6b7280}.status-again{background-color:#ef4444}.status-hard{background-color:#d97706}.status-good{background-color:#22c55e}.status-easy{background-color:#3b82f6}.card-type-label{padding:clamp(.2rem,.5vw,.25rem) clamp(.5rem,1.5vw,.75rem);border-radius:6px;font-size:clamp(.6rem,1.5vw,.7rem);font-weight:500;color:var(--color-dark-grey);background-color:var(--color-light-grey);text-transform:capitalize;white-space:nowrap;flex-shrink:0;border:1px solid var(--color-grey);position:absolute;left:50%;transform:translate(-50%)}.study-question{text-align:center;border-radius:var(--radius-lg);width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:clamp(.75rem,2vw,1.25rem) 0;gap:clamp(.75rem,2vw,1.5rem);overflow:visible;min-height:fit-content;flex-shrink:0}.question-text{font-size:clamp(1.1rem,3.5vw,2rem);font-weight:600;color:var(--color-dark-grey);display:flex;align-items:center;justify-content:center;gap:.5rem;overflow-wrap:break-word;word-break:break-word;width:100%;line-height:1.3;max-width:100%;white-space:pre-wrap}.study-answer{display:flex;flex-direction:column;justify-content:flex-start;width:100%;gap:clamp(.5rem,1.5vw,1rem);overflow:visible}.study-answer hr{border:none;border-top:1px solid #e0e0e0;margin:0}.answer-text{font-size:clamp(1rem,3vw,1.75rem);color:var(--color-dark-grey);display:flex;align-items:center;justify-content:center;gap:.5rem;overflow-wrap:break-word;word-break:break-word;line-height:1.4;max-width:100%;white-space:pre-wrap}.tts-button-large{background:transparent;border:none;padding:var(--spacing-2);border-radius:var(--radius-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.tts-button-large:active{transform:scale(.95)}.study-actions{display:flex;justify-content:center;align-items:center;gap:.75rem}.show-answer-button{padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border-radius:8px;cursor:pointer;background-color:var(--color-green)!important;color:#fff!important;border:none;transition:background-color .2s}.study-bottom-actions{display:flex;justify-content:center;align-items:center;width:100%;flex-shrink:0;padding:.5rem 0}.skip-button{background-color:transparent;border:none;color:var(--color-green);padding:var(--spacing-3) var(--spacing-4);border-radius:var(--radius-lg);cursor:pointer;font-weight:600;transition:all var(--transition-fast)}.skip-button:hover{background-color:#e6f7f0}.grading-container{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.grade-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;width:100%;max-width:min(90vw,600px);flex-shrink:0}@media(min-width:1024px){.grade-buttons{max-width:900px}.study-bottom-actions{padding-bottom:.5rem}.grading-container{padding-bottom:0}}.decision-button{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.875rem .5rem;border:none;border-radius:10px;background-color:var(--background-color-light);cursor:pointer;transition:all .2s;text-align:center;min-height:60px}.decision-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.decision-button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.decision-button.forgot{background-color:#ef4444}.decision-button.forgot .grade-icon,.decision-button.forgot .grade-label{color:#fff}.decision-button.hard{background-color:#d97706}.decision-button.hard .grade-icon,.decision-button.hard .grade-label{color:#fff}.decision-button.good{background-color:#22c55e}.decision-button.good .grade-icon,.decision-button.good .grade-label{color:#fff}.decision-button.easy{background-color:#3b82f6}.decision-button.easy .grade-icon,.decision-button.easy .grade-label{color:#fff}.grade-label{font-weight:600;font-size:.875rem;color:var(--text-color)}.pagination-controls{display:flex;justify-content:center;align-items:center;gap:15px;padding:10px;background-color:var(--background-color-light);border-radius:8px}.pagination-controls button{padding:8px 16px;border:1px solid var(--border-color);border-radius:5px;background-color:var(--background-color);color:var(--text-color);cursor:pointer;transition:background-color .2s,color .2s}.pagination-controls button:disabled{opacity:.5;cursor:not-allowed}.pagination-controls span{font-weight:500;color:var(--text-color-secondary)}@media(max-width:992px){.grade-buttons{display:flex;flex-direction:column;gap:.75rem}.sets-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.flashcards-container{padding:calc(var(--spacing-4) + 12px) var(--spacing-2) var(--spacing-2) var(--spacing-2);gap:var(--spacing-4);overflow:visible;min-height:auto}.flashcards-sets-list,.flashcards-create-edit,.flashcards-view{width:100%;padding:var(--spacing-4)}.sets-grid{grid-template-columns:1fr}.sets-header,.create-header,.cards-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-3)}.cards-actions{flex-direction:column;width:100%}.cards-actions button{width:100%;justify-content:center}.card-content{flex-direction:column}.cards-list-view{gap:.875rem}.card-item-view{border-radius:var(--radius-lg)}.card-item-header{padding:.75rem .875rem;min-height:44px}.card-item-actions{gap:.625rem}.card-action-btn{min-width:28px;min-height:28px;padding:.25rem}.card-item-content{grid-template-columns:1fr;gap:.875rem;padding:.875rem .75rem}.card-divider{display:none}.card-term{border-bottom:1px solid var(--color-light-grey);padding-bottom:.875rem}.card-definition{padding-top:0}.card-text{font-size:.9375rem}.grade-buttons{grid-template-columns:repeat(2,1fr);gap:.625rem}.view-header{padding:1.25rem 1rem}.view-header-content{flex-direction:column;gap:1rem;align-items:stretch}.view-title-section{width:100%}.view-header h2{font-size:1.375rem}.view-meta-info{gap:.625rem}.card-count-badge{font-size:.75rem;padding:.3rem .625rem}.view-description-preview{font-size:.85rem}.view-actions{width:100%;gap:.5rem}.view-action-btn{flex:1 1 auto;min-width:0;justify-content:center;padding:.625rem .75rem;font-size:.8125rem}.view-action-close{flex:0 0 auto;min-width:44px}.view-search-container{padding:1rem}.search-icon{left:1.5rem}.view-search-input{padding:.75rem 2.5rem;font-size:.875rem}.search-clear-btn{right:1.5rem}.grouped-cards-container{padding:1rem;gap:1rem}.study-header{flex-direction:column;align-items:flex-start;gap:.75rem}.study-header{width:100%}.study-header h2{font-size:1.25rem}.view-actions{flex-wrap:wrap;width:100%}.study-header-actions{width:100%;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:.5rem}.study-header-actions button{justify-content:center;flex:0 1 auto}.flashcards-study{padding:1rem .5rem;gap:.875rem}.study-card{padding:1rem;max-width:min(95vw,550px)}.study-card-container{max-width:min(95vw,550px)}.study-card-front,.study-card-back{padding:1rem}.question-text{font-size:clamp(1.1rem,4vw,1.6rem)}.answer-text{font-size:clamp(1rem,3.5vw,1.3rem)}.mcq-options{grid-template-columns:1fr;gap:.625rem}.mcq-option{min-height:52px;padding:.875rem;font-size:.95rem}.decision-button{padding:.75rem .5rem;min-height:60px}.grade-label{font-size:.85rem}}@media(max-width:480px){.sets-header h2,.create-header h2{font-size:var(--font-size-xl)}.view-header{padding:1rem .875rem}.view-header h2{font-size:1.25rem;line-height:1.3}.view-meta-info{flex-direction:column;align-items:flex-start;gap:.5rem}.card-count-badge{font-size:.6875rem;padding:.25rem .5rem}.view-description-preview{font-size:.8125rem}.view-actions{width:100%;gap:.5rem}.view-action-btn{font-size:.75rem;padding:.5rem .625rem}.view-search-container{padding:.875rem}.search-icon{left:1.25rem}.view-search-input{font-size:.875rem;padding:.625rem 2.25rem}.search-clear-btn{right:1.25rem}.grouped-cards-container{padding:.875rem;gap:.875rem}.cards-list-view{gap:.75rem}.card-item-view{border-radius:var(--radius-lg)}.card-item-header{padding:.625rem .75rem;min-height:40px}.card-item-actions{gap:.5rem}.card-action-btn{min-width:24px;min-height:24px;padding:.2rem}.card-item-content{padding:.75rem .625rem;gap:.75rem}.card-side{gap:.25rem}.card-label{font-size:.6875rem}.card-text{font-size:.9375rem}.card-term{padding-bottom:.75rem}.flashcards-study{padding:.75rem .375rem 3rem;gap:.75rem;min-height:100%;display:flex;flex-direction:column}.study-card-container{flex-shrink:0;margin-bottom:0}.study-bottom-actions{flex-shrink:0;margin-top:0;padding:.5rem 0 2rem}.study-header{flex-shrink:0;padding-bottom:.25rem}.study-header h2{font-size:1.05rem;line-height:1.3}.study-header button{padding:.45rem .7rem;font-size:.8rem}.study-header-actions{width:100%;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:.375rem}.study-header-actions button{justify-content:center;flex:0 1 auto}.study-progress{font-size:.8rem;padding:.125rem 0}.study-card{max-width:min(97vw,440px);padding:.875rem;gap:.625rem}.study-card-container{max-width:min(97vw,440px);aspect-ratio:unset;height:auto;flex-shrink:0;margin-bottom:0}.study-card-flipper{height:auto;min-height:fit-content}.study-card-front,.study-card-back{padding:.875rem;height:auto;min-height:fit-content;overflow:visible;position:relative}.card-header-row{flex-shrink:0;margin-bottom:.5rem}.card-status-label,.card-type-label{font-size:.625rem;padding:.25rem .5rem}.study-question{padding:.875rem 0;gap:.875rem}.question-text{font-size:1.075rem;line-height:1.4}.study-answer{padding-top:.625rem;gap:.75rem}.answer-text{font-size:.975rem;line-height:1.4}.written-answer-form{flex-direction:column;gap:.75rem;margin-top:.5rem;width:100%}.written-answer-input{padding:.75rem;font-size:.95rem;width:100%;box-sizing:border-box}.written-answer-actions{width:100%;justify-content:space-between;gap:.625rem}.written-answer-actions button{flex:1;padding:.75rem}.mcq-options{grid-template-columns:1fr;gap:.625rem;margin-top:.5rem}.mcq-option{padding:.875rem .75rem;min-height:52px;font-size:.95rem;line-height:1.35}.true-false-container{gap:1rem;margin-top:.5rem}.true-false-proposed-answer{padding:1rem .875rem;font-size:1rem;line-height:1.4}.true-false-actions{gap:.875rem}.tf-button{padding:.875rem 1.25rem;font-size:1rem}.written-answer-feedback{gap:.875rem;margin-top:.5rem}.feedback-group{gap:.5rem}.feedback-label{font-size:.8rem}.answer-container{padding:.875rem .75rem;font-size:.95rem;line-height:1.4;white-space:pre-wrap}.retype-answer-form{padding-top:.875rem;gap:.625rem}.retype-answer-form p{font-size:.85rem}.retype-answer-input{padding:.75rem;font-size:.95rem;min-height:48px}.study-bottom-actions{flex-shrink:0;padding:.5rem 0 2.5rem;margin-bottom:0}.study-card-container,.study-card-flipper,.study-card-front,.study-card-back{min-height:220px}.flashcards-study{gap:.875rem}.grade-buttons{grid-template-columns:repeat(2,1fr);gap:.625rem}.decision-button{padding:.75rem .5rem;min-height:62px}.grade-label{font-size:.825rem}.study-bottom-actions{padding-bottom:2.5rem}.grading-container{padding-bottom:.75rem}.answer-feedback{gap:.875rem}.answer-feedback p{font-size:.95rem}.correct-pair{padding:.875rem;font-size:.95rem}.import-options,.radio-group{flex-direction:column}.radio-group label{width:100%}.custom-separator-input{width:100px}.study-options-modal{width:95vw;max-height:85vh}.modal-header{padding:var(--spacing-4)}.close-button{top:1rem;right:1rem}.modal-scroll-wrapper{padding:var(--spacing-2) var(--spacing-4) var(--spacing-4)}.toggle-switch-container{gap:.75rem;align-items:flex-start}.toggle-switch-container>span{font-size:.9rem;line-height:1.3;padding-top:.25rem}.toggle-switch{flex-shrink:0}}@media(max-height:750px){.flashcards-container{padding:var(--spacing-2);gap:.625rem}.flashcards-create-edit,.flashcards-view{padding:var(--spacing-5)}.create-form{gap:var(--spacing-3)}.set-card{padding:var(--spacing-4);gap:var(--spacing-2)}.flashcards-study{padding:.625rem .375rem;gap:.625rem}.study-header h2{font-size:1.1rem}.study-header button{padding:.4rem .65rem;font-size:.775rem}.study-progress{font-size:.775rem}.study-card,.study-card-front,.study-card-back{padding:.75rem}.question-text{font-size:1rem}.answer-text{font-size:.925rem}.grade-buttons{gap:.5rem}.decision-button{padding:.75rem .5rem;min-height:58px}.grade-label{font-size:.8rem}}@media(max-width:380px)and (max-height:670px){.flashcards-study{padding:.5rem .25rem 3rem;gap:.5rem;display:flex;flex-direction:column}.study-card-container{flex-shrink:0;margin-bottom:0}.study-bottom-actions{flex-shrink:0;margin-top:0;padding:.5rem 0 2.5rem}.grading-container{padding-bottom:.75rem}.study-header h2{font-size:.975rem}.study-header button{padding:.375rem .6rem;font-size:.75rem}.study-progress{font-size:.75rem}.study-card,.study-card-front,.study-card-back{padding:.675rem}.question-text{font-size:.975rem}.answer-text{font-size:.9rem}.mcq-option{padding:.7rem;min-height:46px;font-size:.875rem}.decision-button{padding:.725rem .4rem;min-height:56px}.grade-label{font-size:.775rem}}@media(max-width:480px){.retype-answer-input{overflow-y:visible;min-height:4rem;padding:1rem;line-height:1.4;resize:vertical}}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#1f2937b3;display:flex;justify-content:center;align-items:center;z-index:1000;padding:var(--spacing-4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:backdropFadeIn var(--transition-fast) ease-out}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background-color:var(--color-white);padding:0;border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);max-height:90vh;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--color-light-grey);animation:modalSlideIn var(--transition-normal) ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.study-options-modal{width:clamp(350px,90vw,800px)}.bypass-limit-modal{width:clamp(320px,85vw,500px);max-width:90vw}@media(max-width:380px){.bypass-limit-modal{width:95vw;margin:0 var(--spacing-2)}}.modal-scroll-wrapper{padding:var(--spacing-2) var(--spacing-6) var(--spacing-6);display:flex;flex-direction:column;gap:var(--spacing-4);overflow-y:auto}.modal-scroll-wrapper::-webkit-scrollbar{width:8px}.modal-scroll-wrapper::-webkit-scrollbar-track{background:var(--color-light-grey);border-radius:4px}.modal-scroll-wrapper::-webkit-scrollbar-thumb{background:#bdc3c7;border-radius:4px}.modal-scroll-wrapper::-webkit-scrollbar-thumb:hover{background:#95a5a6}.modal-body{padding:var(--spacing-6);display:flex;flex-direction:column;gap:var(--spacing-4)}.modal-body p{margin:0;color:var(--color-dark-grey)}.modal-hint{font-size:var(--font-size-sm);color:var(--color-grey);margin:0}.modal-actions{display:flex;justify-content:center;gap:1rem;padding:var(--spacing-6);border-top:1px solid var(--color-light-grey)}@media(max-width:480px){.modal-actions{flex-direction:column;gap:.75rem;padding:var(--spacing-4)}.modal-actions button{width:100%;min-height:44px}.modal-body,.modal-header{padding:var(--spacing-4)}.modal-header h3{font-size:var(--font-size-xl)}.close-button{top:1rem;right:1rem}}.modal-header{padding:var(--spacing-6);border-bottom:1px solid var(--color-light-grey);text-align:center;position:relative}.modal-header h3{margin:0;font-size:var(--font-size-2xl);color:var(--color-green)}.close-button{position:absolute;top:1.5rem;right:1.5rem;background:none;border:none;cursor:pointer;padding:var(--spacing-2);color:var(--color-grey);border-radius:var(--radius-lg);line-height:1;transition:all var(--transition-fast)}.toggle-switch-container{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;gap:1rem}.toggle-switch-container>span{flex:1;max-width:calc(100% - 70px)}.toggle-switch{position:relative;display:inline-block;width:50px;height:28px}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:28px}.slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--color-green)}input:focus+.slider{box-shadow:0 0 1px var(--color-green)}input:checked+.slider:before{transform:translate(22px)}.study-options-modal .form-group .checkbox-group{display:flex;flex-direction:column;gap:12px}.range-inputs{display:flex;align-items:center;gap:8px}.range-inputs input[type=number]{width:100px;text-align:center;padding:8px}.range-inputs span{color:var(--color-text-secondary)}.written-answer-form{display:flex;align-items:center;gap:.75rem;width:100%}.written-answer-form:not(:has(.written-answer-actions)){flex-direction:column}.written-answer-actions{display:flex;align-items:center;gap:.75rem}.written-answer-input{flex-grow:1;padding:clamp(.625rem,1.75vw,.875rem);border:2px solid var(--color-light-grey);border-radius:8px;font-size:clamp(.9rem,2.25vw,1.05rem);transition:all .2s;box-sizing:border-box}.written-answer-form:not(:has(.written-answer-actions)) .written-answer-input{width:100%;flex-grow:0;resize:none;overflow-y:hidden;font-family:inherit}.written-answer-input:focus{outline:none;border-color:var(--color-green)}.written-answer-input.correct{border-color:var(--color-green);background-color:#f0fff4}.written-answer-form:not(:has(.written-answer-actions)) .written-answer-input.correct{background-color:#e8f5e9}.written-answer-input.incorrect{border-color:#c33;background-color:#fee}.answer-text.correct{color:var(--color-green);font-weight:700}.answer-text.incorrect{color:#c33;font-weight:700}.written-answer-feedback{display:flex;flex-direction:column;gap:1rem;align-items:center;width:100%}.feedback-message.correct{color:var(--color-green);font-weight:600;font-size:var(--font-size-base)}.feedback-group{display:flex;flex-direction:column;align-items:center;width:100%;gap:.5rem;min-height:fit-content;flex-shrink:0}.feedback-label{font-size:.875rem;font-weight:600;margin:0;text-transform:uppercase;letter-spacing:.5px}.feedback-label.correct{color:#27ae60}.feedback-label.incorrect{color:#c33}.answer-container{width:100%;padding:clamp(.75rem,2vw,1rem);border-radius:10px;border:2px solid;font-size:clamp(.9rem,2.75vw,1.125rem);font-weight:600;text-align:center;display:flex;justify-content:center;align-items:center;gap:clamp(.5rem,1.5vw,.75rem);line-height:1.4;white-space:pre-wrap;min-height:fit-content;flex-wrap:wrap}.answer-container.correct{background-color:#e6f7f0;border-color:#27ae60;color:#27ae60}.answer-container.incorrect{background-color:#fee;border-color:#c33;color:#c33;text-decoration:line-through}.mcq-options{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;width:100%;max-width:100%}.mcq-option{padding:clamp(.75rem,2vw,1rem) clamp(.625rem,1.5vw,.875rem);font-size:clamp(.85rem,2.25vw,1rem);font-weight:500;border-radius:var(--radius-lg);border:2px solid var(--color-light-grey);background-color:var(--color-white);color:var(--color-dark-grey);cursor:pointer;text-align:center;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;min-height:clamp(50px,12vw,70px);line-height:1.3;word-break:break-word}.mcq-option:hover:not(:disabled){border-color:var(--color-green);background-color:#f0fff4;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.mcq-option:disabled{cursor:not-allowed;opacity:.9}.mcq-option.correct{border-color:var(--color-green);background-color:#e6f7f0;color:var(--color-green);font-weight:700}.mcq-option.incorrect{border-color:#c33;background-color:#fee;color:#c33;font-weight:700}@media(max-width:768px){.mcq-options{grid-template-columns:1fr}}.true-false-container{text-align:center;width:100%;display:flex;flex-direction:column;gap:1.25rem}.true-false-proposed-answer{font-size:clamp(1rem,3vw,1.5rem);padding:clamp(.875rem,2.5vw,1.25rem);background-color:#f8f9fa;border:2px solid var(--color-light-grey);border-radius:10px;font-weight:600;color:var(--color-dark-grey);line-height:1.4;white-space:pre-wrap}.true-false-actions{display:flex;justify-content:center;gap:1rem;max-width:500px;margin:0 auto}.tf-button{flex:1;padding:1rem 1.5rem;font-size:1.1rem;font-weight:600;border:none;border-radius:10px;cursor:pointer;transition:all .2s;color:#fff}.tf-button.true,.tf-button.false{background-color:var(--color-green)}.tf-button.true:hover,.tf-button.false:hover{background-color:#38a169;transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.answer-feedback{text-align:center;display:flex;flex-direction:column;gap:1rem}.answer-feedback.correct{color:var(--color-green)}.answer-feedback.incorrect{color:var(--color-red)}.answer-feedback p{font-size:clamp(1rem,2.5vw,1.125rem);margin:0;line-height:1.5}.correct-pair{padding:1rem;background-color:#f8f9fa;border:2px solid var(--color-light-grey);border-radius:10px;display:flex;justify-content:center;align-items:center;gap:.75rem;flex-wrap:wrap;font-size:clamp(1rem,2.5vw,1.125rem)}.correct-pair span{font-weight:600}.correct-pair .separator{font-weight:500;color:var(--color-grey)}.study-card-container{perspective:1000px;width:100%;max-width:min(90vw,600px);margin:0 auto;flex-shrink:0;min-height:fit-content;display:flex;flex-direction:column}@media(min-width:1024px){.study-card-container{max-width:900px;aspect-ratio:6 / 4}.study-card-container:has(.answer-container.correct){aspect-ratio:unset;height:auto}}.study-card-flipper{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d;cursor:pointer;min-height:fit-content;will-change:transform;transform:translateZ(0);-webkit-transform:translateZ(0)}.study-card-flipper.is-flipped{transform:rotateY(180deg) translateZ(0);-webkit-transform:rotateY(180deg) translateZ(0)}.study-card-front,.study-card-back{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);-webkit-transform:translateZ(0)}.study-card-back{transform:rotateY(180deg) translateZ(0);-webkit-transform:rotateY(180deg) translateZ(0)}.study-card-front,.study-card-back{background-color:var(--color-white);border:1px solid var(--color-border);border-radius:12px;padding:clamp(1rem,3vw,1.5rem);display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow-lg);overflow:hidden}.study-card-front .study-question,.study-card-back .study-answer{width:100%;flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:clamp(.5rem,2vw,1rem) 0;overflow-y:auto;min-height:0}@media(max-width:768px){.flashcards-study{gap:1rem}.study-card-container{flex-shrink:0;height:auto;min-height:250px;display:flex;flex-direction:column}.study-card-flipper{height:100%;min-height:250px;position:relative;flex:1 1 auto;will-change:transform}.study-card-front,.study-card-back{height:100%;min-height:250px;max-height:none;top:0;left:0;display:flex;flex-direction:column}.study-card-front .study-question,.study-card-back .study-answer{flex:1 1 auto;min-height:0;overflow-y:auto}.study-bottom-actions{flex-shrink:0;margin-top:0;padding-top:.75rem}}.written-answer-feedback .answer-container.incorrect{border-color:var(--color-red);background-color:#ffebee}.retype-answer-form{padding-top:1rem;border-top:1px solid #e0e0e0;width:100%;display:flex;flex-direction:column;gap:.75rem}.retype-answer-form p{margin:0;font-size:.875rem;color:var(--color-grey);font-weight:500}.retype-answer-input{width:100%;padding:clamp(.625rem,1.75vw,.875rem);border:2px solid var(--color-light-grey);border-radius:8px;font-size:clamp(.9rem,2.25vw,1.05rem);transition:all .2s;resize:none;overflow-y:hidden;box-sizing:border-box;font-family:inherit}.retype-answer-input:focus{outline:none;border-color:var(--color-green)}.retype-answer-input.correct{border-color:var(--color-green);background-color:#e8f5e9}.retype-answer-input.incorrect{border-color:#c33;background-color:#fee;color:#c33}.round-complete-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-8);background-color:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);text-align:center;width:90%;max-width:600px;border:1px solid var(--color-light-grey);animation:fadeIn .3s ease-in-out;gap:var(--spacing-4)}.round-complete-container h2{font-size:var(--font-size-2xl);color:var(--color-green);margin:0}.round-complete-container p{font-size:var(--font-size-lg);color:var(--color-dark-grey);margin:0}.round-complete-actions{display:flex;gap:var(--spacing-4)}.round-complete-actions button:not(.generate-button){background:var(--color-white);color:var(--color-dark-grey);border:1px solid var(--color-light-grey);padding:var(--spacing-4) var(--spacing-6);border-radius:var(--radius-lg);cursor:pointer;font-weight:600;font-size:var(--font-size-base);transition:all var(--transition-fast)}.round-complete-actions button:not(.generate-button):hover{background-color:var(--color-light-grey);border-color:#bdc3c7}.edit-card-modal-content{width:clamp(350px,90vw,1400px)}.edit-card-form{display:flex;gap:var(--spacing-4)}.edit-card-form .form-group{flex:1}.edit-card-form textarea{resize:none}@media(max-width:768px){.edit-card-form{flex-direction:column}}.collapsible-section{border:1px solid var(--border-color-light);border-radius:8px;margin-bottom:1.5rem;background-color:var(--background-color-secondary);overflow:hidden;transition:all .3s ease}.section-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.75rem 1rem;background-color:var(--background-color-tertiary);border:none;cursor:pointer;font-size:1.125rem;font-weight:600;color:var(--text-color-primary);text-align:left;transition:background-color .2s ease}.section-header:hover{background-color:var(--hover-color)}.section-title{flex-grow:1}.section-content{padding:1rem;border-top:1px solid var(--border-color-light);background-color:var(--background-color-primary)}@media(max-width:768px){.section-header{padding:.625rem .875rem;font-size:1rem}.section-content{padding:.75rem}}@media(max-width:480px){.section-header{padding:.5rem .75rem;font-size:.95rem}.section-content{padding:.625rem}}.unscramble-container{display:flex;flex-direction:column;align-items:center;width:100%;max-width:800px;margin:0 auto;padding:var(--spacing-4);gap:var(--spacing-6)}.initial-state-container{text-align:center;max-width:500px;margin:0 auto}.sentence-counter{font-size:var(--font-size-lg);color:var(--color-dark-grey);font-weight:500}.sentence-counter .current-number{font-weight:700;color:var(--color-green);min-width:auto;text-align:left}.word-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-3);padding:var(--spacing-5);min-height:100px;width:100%;background:var(--color-light-grey);border-radius:var(--radius-xl);transition:all var(--transition-fast)}.word-bank.incorrect-dropzone{background:var(--color-light-grey);animation:shake .5s ease-in-out}.word-bank.correct-dropzone{background:var(--color-light-grey);animation:successPulse .6s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes successPulse{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}.word-tile{padding:var(--spacing-3) var(--spacing-5);background-color:var(--color-white);border:1px solid var(--color-light-grey);border-radius:var(--radius-lg);font-size:var(--font-size-lg);cursor:grab;-webkit-user-select:none;user-select:none;box-shadow:var(--shadow-sm);transition:all var(--transition-fast);touch-action:none;font-weight:500;color:var(--color-dark-grey)}.word-tile.dragging{cursor:grabbing;box-shadow:var(--shadow-lg);transform:scale(1.05) rotate(2deg);z-index:10}.word-tile.incorrect{border-color:var(--color-error);background:#fef2f2;color:#dc2626;animation:shake .5s ease-in-out}.word-tile:hover:not(.dragging){transform:translateY(-2px);box-shadow:var(--shadow-md)}.feedback-message{font-weight:700;font-size:var(--font-size-xl);padding:var(--spacing-3) var(--spacing-5);border-radius:var(--radius-lg);text-align:center}.feedback-message.correct{color:var(--color-green);background:var(--color-light-grey);border:1px solid var(--color-green)}.feedback-message.incorrect{color:var(--color-dark-grey);background:var(--color-light-grey);border:1px solid var(--color-light-grey)}.actions-panel{display:flex;gap:var(--spacing-6);justify-content:center;flex-wrap:wrap}.action-button{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-base);font-weight:600;border-radius:var(--radius-lg);border:1px solid var(--color-light-grey);background-color:var(--color-white);color:var(--color-dark-grey);cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-shadow:var(--shadow-sm)}.action-button:hover:not(:disabled){background-color:var(--color-light-grey);border-color:var(--color-light-grey);transform:translateY(-1px);box-shadow:var(--shadow-md)}.action-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.action-button.generate-new{background:var(--color-green);color:var(--color-white);border:none;font-weight:700}.action-button.generate-new:hover:not(:disabled){background:var(--color-green);transform:translateY(-2px);box-shadow:var(--shadow-md)}.hint-box{padding:var(--spacing-4);background:var(--color-light-grey);border-left:4px solid var(--color-green);color:var(--color-dark-grey);width:100%;text-align:center;border-radius:0 var(--radius-lg) var(--radius-lg) 0;box-shadow:var(--shadow-sm)}.hint-label{font-weight:700;color:var(--color-dark-grey);margin-right:var(--spacing-2)}.hint-note{padding:var(--spacing-2);background:#0000000d;border-radius:var(--radius-md);text-align:center;font-style:italic;margin-top:var(--spacing-2)}.alternative-solution-note{margin-top:var(--spacing-2);padding:var(--spacing-2);background:#22c55e1a;border-radius:var(--radius-md);text-align:center;font-style:italic;border:1px solid rgba(34,197,94,.2)}.navigation{display:flex;justify-content:space-between;width:100%;gap:var(--spacing-4)}.navigation button{padding:var(--spacing-3) var(--spacing-6);border-radius:var(--radius-lg);border:1px solid var(--color-light-grey);background-color:var(--color-white);cursor:pointer;transition:all var(--transition-fast);font-weight:600;color:var(--color-dark-grey);box-shadow:var(--shadow-sm);min-height:44px}.navigation button:hover:not(:disabled){background-color:var(--color-light-grey);border-color:var(--color-light-grey);transform:translateY(-1px);box-shadow:var(--shadow-md)}.navigation button:disabled{background-color:var(--color-light-grey);color:var(--color-light-grey);cursor:not-allowed;border-color:var(--color-light-grey);transform:none;box-shadow:none}@media(max-width:1023px)and (min-width:768px){.unscramble-container{padding:var(--spacing-3)}.word-bank{padding:var(--spacing-4);gap:var(--spacing-2)}.word-tile{padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-base)}.actions-panel{gap:var(--spacing-5);flex-wrap:wrap;justify-content:center}.navigation button{padding:var(--spacing-2) var(--spacing-5);font-size:var(--font-size-sm)}}@media(max-width:767px){.unscramble-container{padding:var(--spacing-2)}.sentence-counter{font-size:var(--font-size-xs)}.word-bank{padding:var(--spacing-3);gap:var(--spacing-2);min-height:80px}.word-tile{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-base)}.feedback-message{font-size:var(--font-size-lg);padding:var(--spacing-2) var(--spacing-4)}.actions-panel{gap:var(--spacing-4);flex-direction:column;align-items:center}.action-button{padding:var(--spacing-2) var(--spacing-5);font-size:var(--font-size-sm)}.hint-box{padding:var(--spacing-3);font-size:var(--font-size-sm)}.navigation{flex-direction:column;gap:var(--spacing-3)}.navigation button{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-sm);width:100%;max-width:200px}}@media(max-width:479px){.unscramble-container{padding:var(--spacing-1)}.sentence-counter{font-size:var(--font-size-xs)}.word-bank{padding:var(--spacing-2);gap:var(--spacing-1);min-height:70px}.word-tile{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-sm)}.feedback-message{font-size:var(--font-size-base);padding:var(--spacing-1) var(--spacing-3)}.actions-panel{gap:var(--spacing-3)}.action-button{padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-sm)}.hint-box{padding:var(--spacing-2);font-size:var(--font-size-xs)}.navigation button{padding:var(--spacing-2) var(--spacing-5);font-size:var(--font-size-sm);max-width:180px}}.word-tile:focus-visible,.action-button:focus-visible,.navigation button:focus-visible,.generate-button:focus-visible{outline:2px solid var(--color-green);outline-offset:2px}.unscramble-container.loading{opacity:.7;pointer-events:none}.word-tile.loading{position:relative;overflow:hidden}.word-tile.loading:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:#fff6;animation:shimmer 1.5s infinite}.unscramble-container{animation:containerSlideIn var(--transition-normal) ease-out}@keyframes containerSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.comprehension-container{display:flex;flex-direction:column;gap:var(--spacing-6);width:100%;max-width:800px;margin:0 auto;padding:0 var(--spacing-2);position:relative}.error-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-3);background:#fef2f2;padding:var(--spacing-4);border-radius:var(--radius-lg);border:1px solid #dc2626;box-shadow:0 1px 3px #dc26261a}.retry-button{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);background:var(--color-green);color:var(--color-white);border:none;border-radius:var(--radius-lg);cursor:pointer;font-weight:600;transition:all var(--transition-fast)}.retry-button:hover{background:var(--color-dark-green);transform:translateY(-1px)}.status-message.error{color:#dc2626;font-weight:600}.status-message.error.small{color:#dc2626;font-size:var(--font-size-sm);font-weight:500}.sentence-counter{display:flex;align-items:center;justify-content:center;gap:var(--spacing-1);font-weight:600;color:var(--color-dark-grey);margin:var(--spacing-4) 0}.counter-current{color:var(--color-green);font-size:var(--font-size-lg)}.counter-separator,.counter-total{color:var(--color-grey)}.score-container{display:flex;gap:var(--spacing-6);justify-content:center;margin-bottom:var(--spacing-2);padding:var(--spacing-6);background-color:var(--color-white);border:1px solid var(--color-light-grey);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);transition:all var(--transition-fast)}.score-item{display:flex;align-items:center;gap:var(--spacing-2)}.score-label{font-weight:600;color:var(--color-dark-grey)}.score-value{font-weight:700;color:var(--color-green);font-size:var(--font-size-lg)}.passage-card,.question-card{background-color:var(--color-white);border:1px solid var(--color-light-grey);border-radius:var(--radius-xl);padding:var(--spacing-6);box-shadow:var(--shadow-md);transition:all var(--transition-fast)}.passage-card{display:flex;flex-direction:column;gap:var(--spacing-4)}.passage-header{display:flex;flex-direction:column}.passage-header h3{margin:0;font-size:var(--font-size-lg);color:var(--color-green);font-weight:600}.speak-button{background:transparent;border:none;font-size:var(--font-size-xl);cursor:pointer;transition:all var(--transition-fast);border-radius:var(--radius-lg);padding:var(--spacing-2);width:44px;height:44px;display:flex;align-items:center;justify-content:center}.passage-text{font-size:var(--font-size-lg);line-height:1.8;color:var(--color-dark-grey);margin:0}.passage-word{cursor:pointer;transition:all var(--transition-fast);border-radius:var(--radius-sm);position:relative}.passage-word:hover{font-weight:700}.comprehension-question{font-size:var(--font-size-xl);margin-bottom:var(--spacing-6);font-weight:600;color:var(--color-dark-grey);line-height:1.4}.mcq-options{display:flex;flex-direction:column;gap:var(--spacing-3)}.no-options-message{text-align:center;color:var(--color-grey);font-style:italic;padding:var(--spacing-4);background:var(--color-light-grey);border-radius:var(--radius-lg);margin:0}.mcq-option{width:100%;padding:var(--spacing-4);font-size:var(--font-size-base);text-align:left;background-color:var(--color-white);color:var(--color-dark-grey);border:2px solid var(--color-light-grey);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);font-weight:500;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-3)}.mcq-option:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md)}.mcq-option:before{content:"";position:absolute;top:0;left:0;width:0;height:100%;background:var(--color-light-grey);transition:width var(--transition-fast);z-index:0}.mcq-option{position:relative;z-index:1}.mcq-option:disabled{cursor:not-allowed;opacity:.6}.mcq-option.correct{border-color:var(--color-green);background:var(--color-light-green);color:var(--color-green);font-weight:600;box-shadow:var(--shadow-sm);animation:correctPulse .6s ease-out}.mcq-option.incorrect{border-color:#dc2626;background:#fef2f2;color:#dc2626;opacity:.9;animation:incorrectShake .6s ease-out}.option-text{flex:1}.correct-icon,.incorrect-icon{flex-shrink:0;animation:iconBounce .6s ease-out}@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes incorrectShake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes iconBounce{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.mcq-option:disabled:not(.correct):not(.incorrect){opacity:.4;background-color:var(--color-light-grey)}.button-row{display:flex;align-items:center;justify-content:center;gap:var(--spacing-8);margin-top:var(--spacing-6);padding:var(--spacing-4);background:var(--color-light-grey);border-radius:var(--radius-lg);border:1px solid var(--color-light-grey);animation:slideUp .5s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.continue-button{padding:var(--spacing-4);font-size:var(--font-size-lg);font-weight:600;color:var(--color-white);background:var(--color-green);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);flex:1;max-width:200px}.completion-message{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-5);background:var(--color-light-green);color:var(--color-green);border:1px solid var(--color-green);border-radius:var(--radius-lg);font-weight:600;font-size:var(--font-size-lg);animation:correctBounce .6s ease-out;flex:1;justify-content:center}.generate-new-button{padding:var(--spacing-4);font-size:var(--font-size-lg);font-weight:600;color:var(--color-dark-grey);background:var(--color-white);border:2px solid var(--color-light-grey);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);flex:1;max-width:300px}.continue-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.generate-new-button:hover{background-color:var(--color-light-grey);border-color:var(--color-light-grey);transform:translateY(-1px);box-shadow:var(--shadow-md)}.continue-button:active,.generate-new-button:active{transform:translateY(0)}@keyframes correctBounce{0%{transform:scale(.8)}50%{transform:scale(1.05)}to{transform:scale(1)}}.navigation{text-align:center;color:var(--color-dark-grey);margin-top:var(--spacing-4);font-size:var(--font-size-sm)}@media(max-width:1023px)and (min-width:768px){.comprehension-container{gap:var(--spacing-5);padding:0 var(--spacing-1)}.passage-card,.question-card,.score-container{padding:var(--spacing-5)}.passage-text{font-size:var(--font-size-base);line-height:1.7}.comprehension-question{font-size:var(--font-size-lg)}.mcq-option{padding:var(--spacing-3);font-size:var(--font-size-sm)}}@media(max-width:767px){.comprehension-container{gap:var(--spacing-4);padding:0}.passage-card,.question-card,.score-container{padding:var(--spacing-4);margin:0 var(--spacing-1)}.passage-header h3{font-size:var(--font-size-base)}.speak-button{font-size:var(--font-size-lg);padding:var(--spacing-1);width:40px;height:40px}.passage-text{font-size:var(--font-size-base);line-height:1.6}.comprehension-question{font-size:var(--font-size-lg);margin-bottom:var(--spacing-5)}.mcq-options{gap:var(--spacing-2)}.mcq-option{padding:var(--spacing-3);font-size:var(--font-size-sm)}.continue-button,.generate-new-button{padding:var(--spacing-3);font-size:var(--font-size-base)}.button-row{flex-direction:column;gap:var(--spacing-3)}.continue-button,.generate-new-button{max-width:none;width:100%}.completion-message{font-size:var(--font-size-base);padding:var(--spacing-2) var(--spacing-4)}.score-container{flex-direction:column;gap:var(--spacing-3)}.sentence-counter{margin:var(--spacing-3) 0}}@media(max-width:479px){.comprehension-container{gap:var(--spacing-3)}.passage-card,.question-card,.score-container{padding:var(--spacing-3);margin:0}.passage-header h3{font-size:var(--font-size-sm)}.speak-button{font-size:var(--font-size-base);width:36px;height:36px}.passage-text{font-size:var(--font-size-sm);line-height:1.5}.comprehension-question{font-size:var(--font-size-base);margin-bottom:var(--spacing-4)}.mcq-options{gap:var(--spacing-2)}.mcq-option,.continue-button,.generate-new-button{padding:var(--spacing-2);font-size:var(--font-size-sm)}.button-row{flex-direction:column;gap:var(--spacing-2);padding:var(--spacing-2)}.continue-button,.generate-new-button{max-width:none;width:100%}.completion-message{font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3)}.score-container{flex-direction:column;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3)}.score-item{gap:var(--spacing-1)}.score-label{font-size:var(--font-size-sm)}.score-value{font-size:var(--font-size-base)}.sentence-counter{margin:var(--spacing-2) 0}}.comprehension-container.loading{opacity:.7;pointer-events:none}.mcq-option.loading{position:relative;overflow:hidden}.mcq-option.loading:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:#fff6;animation:shimmer 1.5s infinite}.mcq-option:focus-visible{outline:2px solid var(--color-green);outline-offset:2px}.speak-button:focus-visible{outline:2px solid var(--color-white);outline-offset:2px}.passage-card,.question-card,.score-container{animation:cardSlideIn var(--transition-normal) ease-out}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;overflow:hidden}.confetti{position:absolute;width:10px;height:10px;background:var(--color-green);animation:confettiFall 3s linear forwards}@keyframes confettiFall{0%{transform:translateY(-100vh) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.write-a-response-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-8)}.write-a-response-card{width:80%;display:flex;flex-direction:column;gap:var(--spacing-6)}.initial-state-container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--spacing-12) var(--spacing-4);gap:var(--spacing-4);min-height:300px}.generate-button{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg);border-radius:var(--radius-lg);border:none;background:var(--color-green);color:var(--color-white);cursor:pointer;transition:all var(--transition-fast);font-weight:600;box-shadow:var(--shadow-sm)}.generate-button:hover{background:var(--color-green);transform:translateY(-2px);box-shadow:var(--shadow-md)}.status-message{font-size:var(--font-size-lg);color:var(--color-dark-grey);margin:0;font-weight:500}.status-message.error{color:var(--color-dark-grey);font-weight:600}.status-message.error.small{font-size:var(--font-size-sm);background:var(--color-light-grey);padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-lg);margin-bottom:calc(var(--spacing-2) * -1);border:1px solid var(--color-light-grey)}.question-card-write{background-color:var(--color-white);border:1px solid var(--color-light-grey);border-radius:var(--radius-xl);padding:var(--spacing-6);box-shadow:var(--shadow-md);transition:all var(--transition-fast)}.question-header{display:block}.unified-button-row{display:flex;justify-content:center;align-items:center;gap:var(--spacing-4);flex-wrap:wrap}.question-text{flex-grow:1;font-size:var(--font-size-2xl);line-height:1.6;font-weight:600;margin:0;color:var(--color-dark-grey)}.question-word{cursor:pointer;transition:all var(--transition-fast);border-radius:var(--radius-sm);position:relative}.question-word:hover{font-weight:700}.speak-button{background:transparent;border:none;font-size:var(--font-size-xl);cursor:pointer;transition:all var(--transition-fast);padding:var(--spacing-2);border-radius:var(--radius-lg);width:50px;height:50px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.speak-button:hover{transform:scale(1.1)}.speak-button:active{transform:scale(.95)}.speak-button-inline{background:transparent;border:none;font-size:var(--font-size-xl);cursor:pointer;transition:all var(--transition-fast);padding:var(--spacing-1);border-radius:var(--radius-lg);width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--spacing-2);vertical-align:middle;position:relative;top:-2px}.speak-button-inline:hover{transform:scale(1.1)}.speak-button-inline:active{transform:scale(.95)}.response-area{display:flex;flex-direction:column;gap:var(--spacing-4)}.response-input{width:100%;padding:var(--spacing-4);font-family:inherit;font-size:var(--font-size-lg);border:2px solid transparent;border-radius:var(--radius-lg);background-color:var(--color-white);color:var(--color-dark-grey);resize:none;min-height:250px;height:250px;transition:all var(--transition-fast);box-shadow:var(--shadow-md)}.response-input:focus{outline:none;border-color:var(--color-green);box-shadow:var(--shadow-lg)}.response-input:disabled{background-color:var(--color-white);cursor:not-allowed;opacity:.7}.submit-button{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg);font-weight:700;color:var(--color-white);background:var(--color-green);border:none;border-radius:var(--radius-lg);cursor:pointer;align-self:flex-end;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);min-height:48px}.submit-button:hover:not(:disabled){background:var(--color-green);transform:translateY(-2px);box-shadow:var(--shadow-md)}.submit-button:disabled{opacity:.7;cursor:wait;transform:none;box-shadow:var(--shadow-sm)}.feedback-box{background:var(--color-light-grey);border:1px solid var(--color-green);border-radius:var(--radius-lg);padding:var(--spacing-4) var(--spacing-6);animation:feedbackSlideIn .5s ease-in-out;box-shadow:var(--shadow-sm)}@keyframes feedbackSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.feedback-box h4{margin-top:0;margin-bottom:var(--spacing-2);color:var(--color-green);font-size:var(--font-size-lg);font-weight:700}.feedback-box p{margin-bottom:0;line-height:1.7;color:var(--color-dark-grey);font-size:var(--font-size-base)}.nav-button{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-base);font-weight:600;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);min-height:44px;box-shadow:var(--shadow-sm);display:inline-flex;align-items:center;justify-content:center}.nav-button.skip{background-color:var(--color-white);color:var(--color-dark-grey);border:1px solid var(--color-light-grey)}.nav-button.skip:hover{background-color:var(--color-light-grey);border-color:var(--color-light-grey);transform:translateY(-1px);box-shadow:var(--shadow-md)}.nav-button.next,.nav-button.submit{background:var(--color-green);color:var(--color-white);border:none;font-weight:700}.nav-button.next:hover,.nav-button.submit:hover{background:var(--color-green);transform:translateY(-2px);box-shadow:var(--shadow-md)}.nav-button.generate-new{background-color:var(--color-white);color:var(--color-dark-grey);border:1px solid var(--color-light-grey)}.nav-button.generate-new:hover{background-color:var(--color-light-grey);border-color:var(--color-light-grey);transform:translateY(-1px);box-shadow:var(--shadow-md)}.navigation{text-align:center;color:var(--color-dark-grey);font-size:var(--font-size-sm);width:100%;display:flex;justify-content:center;align-items:center}.navigation span{font-size:var(--font-size-lg);font-weight:600;color:var(--color-dark-grey)}.navigation .counter-current{color:var(--color-green);font-weight:700}@media(max-width:1023px)and (min-width:768px){.write-a-response-card{width:85%}.question-card-write{padding:var(--spacing-5)}.question-text{font-size:var(--font-size-xl)}.response-input{font-size:var(--font-size-base);padding:var(--spacing-3);min-height:200px;height:200px}.submit-button{padding:var(--spacing-2) var(--spacing-5);font-size:var(--font-size-base)}.nav-button{padding:var(--spacing-2) var(--spacing-5);font-size:var(--font-size-sm)}}@media(max-width:767px){.write-a-response-container{padding:0 var(--spacing-2)}.write-a-response-card{width:95%;gap:var(--spacing-5)}.question-card-write{padding:var(--spacing-4)}.question-header{display:block}.unified-button-row{flex-direction:column;gap:var(--spacing-3);align-items:stretch}.question-text{font-size:var(--font-size-xl);line-height:1.5}.speak-button{font-size:var(--font-size-lg);padding:var(--spacing-1);align-self:flex-end;width:45px;height:45px}.response-area{gap:var(--spacing-3)}.response-input{font-size:var(--font-size-base);padding:var(--spacing-3);min-height:180px;height:180px}.submit-button{padding:var(--spacing-2) var(--spacing-5);font-size:var(--font-size-base);align-self:stretch}.feedback-box{padding:var(--spacing-3) var(--spacing-5)}.feedback-box h4{font-size:var(--font-size-base)}.feedback-box p{font-size:var(--font-size-sm)}.nav-button{padding:var(--spacing-2) var(--spacing-5);font-size:var(--font-size-sm);width:100%}.initial-state-container{padding:var(--spacing-8) var(--spacing-4);min-height:250px}.status-message{font-size:var(--font-size-base)}}@media(max-width:479px){.write-a-response-container{padding:0 var(--spacing-1)}.write-a-response-card{width:98%;gap:var(--spacing-4)}.question-card-write{padding:var(--spacing-3)}.question-text{font-size:var(--font-size-lg)}.speak-button{font-size:var(--font-size-base);width:40px;height:40px}.response-input{font-size:var(--font-size-sm);padding:var(--spacing-2);min-height:150px;height:150px}.submit-button{padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-sm)}.feedback-box{padding:var(--spacing-2) var(--spacing-4)}.feedback-box h4{font-size:var(--font-size-sm)}.feedback-box p{font-size:var(--font-size-xs)}.nav-button{padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-sm)}.initial-state-container{padding:var(--spacing-6) var(--spacing-3);min-height:200px}.status-message{font-size:var(--font-size-sm)}.status-message.error.small{font-size:var(--font-size-xs);padding:var(--spacing-1) var(--spacing-3)}}.question-word:focus-visible,.submit-button:focus-visible,.speak-button:focus-visible,.nav-button:focus-visible{outline:2px solid var(--color-green);outline-offset:2px}.write-a-response-container.loading{opacity:.7;pointer-events:none}.response-input.loading{position:relative;overflow:hidden}.response-input.loading:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:#fff6;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{left:-100%}to{left:100%}}.question-card-write{animation:cardSlideIn var(--transition-normal) ease-out}@keyframes cardSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.loading-settings-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--color-green);display:flex;align-items:center;justify-content:center;z-index:9999;font-family:var(--font-family);animation:backgroundShift 3s ease-in-out infinite}@keyframes backgroundShift{0%,to{background:var(--color-green)}50%{background:var(--color-green)}}.loading-settings-content{text-align:center;color:var(--color-white);padding:var(--spacing-8);animation:contentFadeIn .8s ease-out}@keyframes contentFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.loading-spinner{margin-bottom:var(--spacing-8);display:flex;justify-content:center}.spinner-circle{width:80px;height:80px;border:4px solid rgba(255,255,255,.2);border-top:4px solid var(--color-white);border-radius:50%;animation:spin 1.2s linear infinite;box-shadow:var(--shadow-lg)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-title{font-size:var(--font-size-4xl);font-weight:700;margin:0 0 var(--spacing-4) 0;letter-spacing:-.02em;color:var(--color-white);text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.1)}.loading-subtitle{font-size:var(--font-size-lg);margin:0;opacity:.95;line-height:1.6;font-weight:400;color:var(--color-white);text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.1);white-space:nowrap}.loading-dots{display:inline-block;width:1.2em;text-align:center;font-weight:700;color:var(--color-white);animation:dotsPulse 1.5s ease-in-out infinite}@keyframes dotsPulse{0%,20%{opacity:0}50%{opacity:1}80%,to{opacity:0}}.loading-progress{margin-top:var(--spacing-6);width:100%;height:4px;background-color:#fff3;border-radius:2px;overflow:hidden}.loading-progress-bar{height:100%;background:var(--color-white);border-radius:2px;animation:progressMove 2s ease-in-out infinite}@keyframes progressMove{0%{transform:translate(-100%)}50%{transform:translate(0)}to{transform:translate(100%)}}@media(max-width:1023px)and (min-width:768px){.loading-settings-content{padding:var(--spacing-6)}.loading-title{font-size:var(--font-size-3xl)}.loading-subtitle{font-size:var(--font-size-base)}.spinner-circle{width:70px;height:70px;border-width:3px}}@media(max-width:767px){.loading-settings-content{padding:var(--spacing-5)}.loading-title{font-size:var(--font-size-2xl)}.loading-subtitle{font-size:var(--font-size-sm)}.spinner-circle{width:60px;height:60px;border-width:3px}.loading-progress{margin-top:var(--spacing-4)}}@media(max-width:479px){.loading-settings-content{padding:var(--spacing-4)}.loading-title{font-size:var(--font-size-xl)}.loading-subtitle{font-size:var(--font-size-xs)}.spinner-circle{width:50px;height:50px;border-width:2px}.loading-progress{margin-top:var(--spacing-3)}}@media(max-height:500px)and (orientation:landscape){.loading-settings-content{padding:var(--spacing-4)}.loading-title{font-size:var(--font-size-lg);margin-bottom:var(--spacing-2)}.loading-subtitle{font-size:var(--font-size-xs)}.spinner-circle{width:40px;height:40px;border-width:2px}.loading-spinner{margin-bottom:var(--spacing-4)}.loading-progress{margin-top:var(--spacing-2)}}@media(prefers-contrast:high){.loading-settings-container{background:var(--color-green)}.spinner-circle{border-color:#ffffff80;border-top-color:var(--color-white)}.loading-title,.loading-subtitle{text-shadow:0 0 4px rgba(0,0,0,.8)}}@media(prefers-reduced-motion:reduce){.loading-settings-container{animation:none}.spinner-circle{animation:none;border-top-color:var(--color-white)}.loading-dots{animation:none;opacity:1}.loading-progress-bar{animation:none;transform:translate(0)}.loading-settings-content{animation:none}}.loading-settings-container:focus-within{outline:2px solid var(--color-white);outline-offset:-2px}.loading-settings-container.error{background:var(--color-green)}.loading-settings-container.error .spinner-circle{border-color:#fff3;border-top-color:var(--color-white);animation:spin .5s linear infinite}.loading-settings-container.success{background:var(--color-green)}.loading-settings-container.success .spinner-circle{animation:none;border-color:var(--color-white);border-top-color:var(--color-white)}