:root{--primary-color: #27CFF0;--primary-hover: #22b8d6;--secondary-color: #B3E5FC;--accent-color: #FFC107;--correct-color: #66BB6A;--incorrect-color: #E57373;--bg-body: #F4F7FE;--bg-card: #FFFFFF;--bg-sidebar: #FFFFFF;--text-main: #2B3674;--text-secondary: #A3AED0;--shadow-sm: 0 2px 4px rgba(0,0,0,.02);--shadow-md: 0 4px 12px rgba(0,0,0,.05);--shadow-lg: 0 10px 30px rgba(0,0,0,.08);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:var(--text-main);background-color:var(--bg-body);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;padding:0;min-width:320px;min-height:100vh;overflow-x:hidden}#root{width:100%;min-height:100vh;display:flex;flex-direction:column}.app-layout{display:flex;min-height:100vh;flex-direction:column;width:100%;overflow-x:hidden}.main-content{flex:1;padding:1rem 1rem 2rem;width:100%}.mobile-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:60px;background-color:#fff;border-bottom:1px solid #E0E5F2;width:100%;padding:0 1rem}.content-container{max-width:1200px;margin:0 auto;width:100%}.sidebar{display:none;width:250px;background-color:var(--bg-sidebar);border-right:1px solid #E0E5F2;position:fixed;height:100vh;padding:2rem 1rem;box-sizing:border-box;flex-direction:column}.logo-text{font-size:1.8rem;font-weight:800;color:var(--text-main);margin-bottom:3rem;padding-left:1rem;background:linear-gradient(135deg,var(--primary-color) 0%,#00f2fe 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.sidebar-nav{display:flex;flex-direction:column;gap:.5rem}.nav-item{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:12px;color:var(--text-secondary);text-decoration:none;font-weight:500;transition:all .2s ease}.nav-item:hover{background-color:#f4f7fe;color:var(--text-main)}.nav-item.active{background-color:var(--primary-color);color:#fff;box-shadow:0 4px 12px #27cff066}.logout-btn{margin-top:auto;display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:12px;color:#ef4444;background:none;border:none;font-weight:600;cursor:pointer;transition:all .2s ease;width:100%}.logout-btn:hover{background-color:#fef2f2}.mobile-logout-btn{background:#f8fafc;border:1px solid #E2E8F0;color:var(--text-secondary);cursor:pointer;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;justify-self:start;transition:all .2s ease}.mobile-logout-btn:hover{background:#fee2e2;color:#ef4444;border-color:#fecaca}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:70px;background-color:var(--bg-card);display:flex;justify-content:space-around;align-items:center;box-shadow:0 -2px 10px #0000000d;z-index:1000;padding-bottom:env(safe-area-inset-bottom)}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-secondary);text-decoration:none;flex:1;height:100%}.mobile-nav-item.active{color:var(--primary-color)}@media(min-width:768px){.app-layout{flex-direction:row}.sidebar{display:flex;position:sticky;top:0}.bottom-nav{display:none}.main-content{padding:2rem;overflow-y:auto}.mobile-header{display:none}}.card{background-color:var(--bg-card);border-radius:20px;padding:1.5rem;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease;border:1px solid transparent}.card:hover{box-shadow:var(--shadow-md)}.btn-primary{background:var(--primary-color);color:#fff;border:none;padding:.8rem 1.5rem;border-radius:30px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 10px #27cff04d;transition:all .2s ease}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px #27cff066}.btn-primary:disabled{background:#e2e8f0;color:#94a3b8;cursor:not-allowed;box-shadow:none;transform:none}.range-slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:5px;background:#e0e5f2;outline:none;cursor:pointer;position:relative;background-image:linear-gradient(var(--primary-color),var(--primary-color));background-size:var(--fill-percent, 0%) 100%;background-repeat:no-repeat}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid var(--primary-color);cursor:pointer;box-shadow:0 2px 6px #0000001a;transition:all .15s ease}.range-slider::-webkit-slider-thumb:hover{transform:scale(1.1);border-color:#0fb8d6;box-shadow:0 4px 10px #00000026}.range-slider::-webkit-slider-thumb:active{transform:scale(.95)}.range-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid var(--primary-color);cursor:pointer;box-shadow:0 2px 6px #0000001a;transition:all .15s ease}.range-slider::-moz-range-thumb:hover{transform:scale(1.1)}@media(max-width:767px){.add-container,.home-container,.dictionary-container,.review-container{padding:1rem!important;padding-bottom:120px!important;margin-bottom:0!important}}.mobile-hide{display:none}@media(min-width:768px){.mobile-hide{display:inline}}.sticky-action-container{margin-top:3rem;display:flex;justify-content:flex-end;position:sticky;bottom:20px;z-index:900}@media(max-width:767px){.sticky-action-container{position:fixed;bottom:85px;left:0;right:0;justify-content:center;padding:0;margin:0;z-index:900;pointer-events:none}.sticky-action-container .btn-primary{pointer-events:auto;box-shadow:0 8px 25px #27cff066}}.grid-srs{display:flex;flex-direction:column;gap:.6rem;padding:.5rem 0}.srs-card{display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;height:auto!important;padding:.8rem 1.2rem!important;border-radius:12px!important;width:100%}.srs-card-header{display:flex;align-items:center;gap:12px;flex:1}.srs-card-label{font-size:.9rem;font-weight:700;color:var(--text-main)}.srs-card-count{font-size:1.4rem;font-weight:800;color:var(--text-main);margin-left:auto}@media(min-width:1024px){.grid-srs{display:grid;grid-template-columns:repeat(5,1fr);flex-direction:row;gap:1rem}.srs-card{flex-direction:column!important;height:140px!important;padding:1.2rem!important;align-items:center}.srs-card-header{flex-direction:row;justify-content:space-between;width:100%;flex:none}.srs-card-label{font-size:.9rem}.srs-card-count{font-size:2.2rem;margin-left:0;align-self:flex-end}}.grid-dictionary{display:grid;grid-template-columns:1fr;gap:1rem;align-items:start}@media(min-width:480px){.grid-dictionary{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.grid-dictionary{grid-template-columns:repeat(4,1fr)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}.shake-animation{animation:shake .5s ease-in-out}@keyframes slideOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-30px)}}@keyframes slideIn{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.card-transition-out{animation:slideOut .15s ease-out forwards}.card-transition-in{animation:slideIn .15s ease-out}.flip-container{perspective:1000px;width:100%}.flip-card-inner{position:relative;width:100%;transition:transform .6s;transform-style:preserve-3d}.flip-card-inner.flipped{transform:rotateY(180deg)}.flip-card-front,.flip-card-back{-webkit-backface-visibility:hidden;backface-visibility:hidden;width:100%;background-color:var(--bg-card);border-radius:20px;padding:2rem;box-shadow:var(--shadow-sm);border:1px solid transparent}.flip-card-front{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;min-height:350px}.flip-card-back{transform:rotateY(180deg);position:absolute;top:0;left:0;height:100%;display:flex;flex-direction:column;text-align:left;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#E2E8F0 transparent}.flip-card-back::-webkit-scrollbar{width:6px}.flip-card-back::-webkit-scrollbar-track{background:transparent}.flip-card-back::-webkit-scrollbar-thumb{background-color:#e2e8f0;border-radius:20px}.review-title{font-size:4rem;margin-bottom:2.5rem;margin-top:0;word-break:break-all}@media(max-width:480px){.review-title{font-size:2.5rem;margin-bottom:1.5rem}.flip-card-front,.flip-card-back{padding:1.5rem 1rem}}