:root{--canvas: #FBF4E6;--surface: #FFFDF8;--surface-muted: #F5EFE3;--ink: #354052;--ink-muted: #6D7180;--line: #DED5C6;--line-strong: #AEB2B9;--brand: #E76F51;--brand-hover: #CE5C42;--brand-soft: #F8DDD5;--accent: var(--brand);--accent-hover: var(--brand-hover);--accent-soft: var(--brand-soft);--secondary: #2A7F84;--secondary-hover: #21686C;--secondary-soft: #DCEDEE;--magic: #8C7CC3;--magic-soft: #EAE6F5;--gold: #E4B84B;--gold-soft: #FAEDC4;--danger: #B84D46;--danger-soft: #F7DEDA;--success: #5E9E7E;--success-soft: #DCEDE3;--shadow-hard: 4px 4px 0 #D8CDBB;--shadow-hard-small: 2px 2px 0 #D8CDBB;--primary-pink: var(--brand);--primary-blue: var(--secondary);--primary-yellow: var(--gold);--primary-purple: var(--magic);--primary-green: var(--success);--light-pink: var(--brand-soft);--light-blue: var(--secondary-soft);--light-yellow: var(--gold-soft);--text-dark: var(--ink);--text-light: var(--ink-muted);--shadow: 0 12px 32px rgba(53, 64, 82, .1);--shadow-soft: 0 4px 14px rgba(53, 64, 82, .08);--border-radius: 12px}*{margin:0;padding:0;box-sizing:border-box}html{overflow-x:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;background:#f5f7fa;margin:0;padding:0;display:flex;height:100vh;overflow:hidden;overflow-x:hidden}body.sidebar-open{overflow:hidden}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:.8}50%{opacity:.5}}@keyframes typing{0%{opacity:0}to{opacity:1}}.typing-char{animation:typing .1s ease-in}.main-content{flex:1;height:100vh;overflow:hidden;background:#fff;margin-left:280px}.container{width:100%;height:100%;background:#fff;overflow:hidden;position:relative;display:flex;flex-direction:column;max-width:100%}.screen{display:none;animation:fadeIn .5s ease-in-out}.screen.active{display:flex;flex-direction:column;height:100%;overflow:visible;max-width:100%}#start-screen.active{display:flex;height:100%;overflow-y:auto;overflow-x:hidden}#game-screen.active{display:flex;flex-direction:column;height:100%;overflow:hidden}#finish-screen.active{display:block;height:100%;overflow-y:auto}#my-stories-screen.active,#wordbook-screen.active,#settings-screen.active{display:flex;flex-direction:column;height:100%;overflow-y:auto;overflow-x:hidden}.header{background:linear-gradient(135deg,var(--primary-pink),var(--primary-purple));color:#fff;padding:40px 30px;text-align:center;flex-shrink:0}.header h1{font-size:2.2em;margin-bottom:8px}.header p{font-size:1em;opacity:.9}.content{padding:30px 40px;flex:1;overflow-y:visible;overflow-x:visible;display:flex;flex-direction:column;max-width:100%}#start-screen .content{overflow-y:visible;overflow-x:visible;max-width:1000px;margin:0 auto;width:100%;padding:30px 40px;display:flex;flex-direction:column;justify-content:flex-start}.sidebar{position:fixed;left:0;top:0;width:280px;height:100vh;background:linear-gradient(180deg,#667eea,#764ba2);box-shadow:4px 0 20px #0000001a;overflow-y:auto;overflow-x:hidden;color:#fff;display:flex;flex-direction:column;z-index:1000}.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-track{background:#ffffff1a}.sidebar::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.sidebar::-webkit-scrollbar-thumb:hover{background:#ffffff80}.sidebar-header{padding:25px 20px;background:#ffffff1a;border-bottom:1px solid rgba(255,255,255,.2);position:relative}.app-title-section{text-align:center;margin-bottom:25px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.2)}.app-title{font-size:1.6em;font-weight:700;color:#fff;margin-bottom:8px;text-shadow:0 2px 4px rgba(0,0,0,.3)}.app-subtitle{font-size:.9em;color:#ffffffe6;margin:0;line-height:1.4}.sidebar-close-btn{display:none;position:absolute;top:15px;right:15px;width:35px;height:35px;border-radius:50%;background:#fff3;border:none;color:#fff;font-size:1.5em;cursor:pointer;align-items:center;justify-content:center;transition:all .3s ease}.sidebar-close-btn:active{background:#ffffff4d;transform:scale(.95)}.user-profile{display:flex;align-items:center;gap:15px;margin-bottom:20px}.user-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--primary-pink),var(--primary-yellow));display:flex;align-items:center;justify-content:center;font-size:2em;box-shadow:0 4px 15px #0003;cursor:pointer;transition:all .3s ease;border:3px solid rgba(255,255,255,.3)}.user-avatar:hover{transform:scale(1.05);box-shadow:0 6px 20px #0000004d}.user-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}.user-info{flex:1}.user-name{font-size:1.3em;font-weight:700;margin-bottom:5px}.user-level{font-size:.9em;opacity:.9}.user-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}.stat-item{text-align:center;background:#ffffff26;padding:10px 5px;border-radius:10px;transition:all .3s ease;cursor:default}.stat-item:hover{background:#ffffff40;transform:translateY(-2px)}.stat-value{font-size:1.5em;font-weight:700;display:block;margin-bottom:3px}.stat-label{font-size:.75em;opacity:.9}.sidebar-menu{padding:20px 0;flex:1}.menu-section{margin-bottom:25px}.menu-section-title{padding:0 20px 10px;font-size:.85em;opacity:.7;text-transform:uppercase;letter-spacing:1px}.menu-item{display:flex;align-items:center;gap:15px;padding:15px 20px;color:#fff;text-decoration:none;transition:all .3s ease;cursor:pointer;border-left:4px solid transparent}.menu-item:hover{background:#ffffff26;border-left-color:var(--primary-yellow);transform:translate(5px)}.menu-item:active{transform:translate(3px)}.menu-item.active{background:#fff3;border-left-color:var(--primary-yellow)}.menu-item.disabled{opacity:.5;cursor:not-allowed}.menu-item.disabled:hover{transform:none}.menu-item .icon{font-size:1.5em;width:30px;text-align:center}.menu-item .text{flex:1;font-size:1.05em}.menu-item .badge{background:var(--primary-pink);color:#fff;padding:3px 10px;border-radius:20px;font-size:.85em;font-weight:700}.menu-item .coming-soon{background:#ffffff4d;color:#fff;padding:3px 8px;border-radius:5px;font-size:.7em;opacity:.8;animation:pulse 2s ease-in-out infinite}.sidebar-footer{padding:20px;border-top:1px solid rgba(255,255,255,.2);margin-top:auto}.sidebar-footer .menu-item{padding:12px 0}.mobile-header{display:none;position:fixed;top:0;left:0;right:0;height:60px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;z-index:1100;box-shadow:0 2px 10px #0000001a;align-items:center;padding:0 15px}.mobile-menu-btn{width:45px;height:45px;border:none;background:#fff3;border-radius:10px;color:#fff;font-size:1.5em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.mobile-menu-btn:active{background:#ffffff4d;transform:scale(.95)}.mobile-header-title{flex:1;text-align:center;font-size:1.2em;font-weight:700}.mobile-user-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary-pink),var(--primary-yellow));display:flex;align-items:center;justify-content:center;font-size:1.3em;border:2px solid rgba(255,255,255,.5);cursor:pointer;transition:all .3s ease}.mobile-user-avatar:active{transform:scale(.95)}.mobile-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:1050;opacity:0;transition:opacity .3s ease}.mobile-overlay.active{opacity:1}button{border:none;padding:12px 32px;border-radius:50px;font-size:1.05em;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003}button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}button:active{transform:translateY(0)}.btn-primary{background:linear-gradient(135deg,var(--primary-pink),var(--primary-purple));color:#fff}.btn-secondary{background:linear-gradient(135deg,var(--primary-blue),var(--primary-green));color:#fff}.level-card{background:var(--light-blue);border:3px solid transparent;border-radius:12px;padding:14px 12px;text-align:center;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100px}.level-card:hover{transform:scale(1.05);border-color:var(--primary-blue)}.level-card.selected{border-color:var(--primary-blue);background:linear-gradient(135deg,var(--light-blue),var(--light-pink));box-shadow:0 4px 15px #4a90e24d}.level-card.has-selection{justify-content:space-between}.level-card input[type=radio]{display:none}.level-card .level-name{font-size:1.15em;font-weight:700;color:var(--primary-blue);text-align:center}.level-card .level-desc{font-size:.85em;color:var(--text-light)}.level-card .level-selection-info{display:none;font-size:.9em;color:#667eea;font-weight:600;background:linear-gradient(135deg,#667eea1a,#764ba21a);padding:6px 10px;border-radius:8px;margin-top:8px;text-align:center}.level-card.has-selection .level-selection-info{display:block}.theme-btn{background:#fff;border:3px solid var(--light-pink);border-radius:12px;padding:16px 12px;text-align:center;cursor:pointer;transition:all .3s ease;font-size:1em}.theme-btn:hover{transform:scale(1.05)}.theme-btn.selected{border-color:var(--primary-pink);background:linear-gradient(135deg,var(--light-pink),var(--light-yellow));box-shadow:0 4px 15px #ff69b44d}.theme-btn .emoji{font-size:1.8em;display:block;margin-bottom:6px}.word-btn{background:#fff;border:3px solid var(--light-pink);border-radius:15px;padding:20px 15px;text-align:center;cursor:pointer;transition:transform .3s ease,opacity .3s ease,border-color .3s ease,box-shadow .3s ease;font-size:1.2em;font-weight:700;color:var(--text-dark);position:relative;box-shadow:0 2px 8px #ff69b426}.word-btn:hover{transform:translateY(-5px);border-color:var(--primary-pink);box-shadow:0 6px 20px #ff69b44d}.word-btn.selected{background:linear-gradient(135deg,var(--primary-pink),var(--primary-purple));color:#fff;border-color:var(--primary-pink);box-shadow:0 6px 20px #ff69b466}.word-meta{font-size:.85em;color:var(--text-light);margin-bottom:5px}.word-main-text{font-size:1.35em;font-weight:700}.word-btn.selected .word-meta{color:#ffffffe6}.word-btn.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.word-btn.flipping-out{animation:flipOut .4s ease forwards}.word-btn.flipping-in{opacity:0;transform:rotateY(-90deg)}.word-btn.flipped-in{animation:flipIn .4s ease forwards}@keyframes flipOut{0%{transform:rotateY(0);opacity:1}to{transform:rotateY(90deg);opacity:0}}@keyframes flipIn{0%{transform:rotateY(-90deg);opacity:0}to{transform:rotateY(0);opacity:1}}.word-btn.first-appear{opacity:0;transform:translateY(30px) scale(.9);animation:firstAppear .5s ease forwards}@keyframes firstAppear{0%{opacity:0;transform:translateY(30px) scale(.9)}60%{transform:translateY(-5px) scale(1.02)}to{opacity:1;transform:translateY(0) scale(1)}}.input-group{display:flex;gap:15px;align-items:center}.input-with-toggle{position:relative;flex:1;max-width:100%;overflow:hidden}.input-with-toggle input{width:100%;padding:15px 160px 15px 20px;border:3px solid var(--light-blue);border-radius:50px;font-size:1.1em;outline:none;transition:border-color .3s ease;box-sizing:border-box;max-width:100%}.input-with-toggle input:focus{border-color:var(--primary-blue)}.input-toggle-container{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;background:#fffffff2;padding:4px 10px 4px 12px;border-radius:20px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:auto;z-index:10}.toggle-label{font-size:.85em;color:var(--text-dark);font-weight:500;white-space:nowrap}.inline-toggle-switch{position:relative;display:inline-block;width:44px;height:22px;cursor:pointer}.inline-toggle-switch input{opacity:0;width:0;height:0}.inline-toggle-slider{position:absolute;inset:0;background-color:#ccc;border-radius:22px;transition:all .3s ease}.inline-toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background-color:#fff;border-radius:50%;transition:all .3s ease;box-shadow:0 2px 4px #0003}.inline-toggle-switch input:checked+.inline-toggle-slider{background:linear-gradient(135deg,#667eea,#764ba2)}.inline-toggle-switch input:checked+.inline-toggle-slider:before{transform:translate(22px)}.inline-toggle-switch:hover .inline-toggle-slider{opacity:.9}.input-with-toggle input:focus~.input-toggle-container{background:#fff;box-shadow:0 2px 8px #0000001a}.input-group button{padding:15px 35px}.input-source-hint{margin-top:8px;padding-left:18px;color:var(--text-light);font-size:.9em}.input-source-hint button{margin-left:6px;padding:0;border:none;border-radius:0;background:transparent;color:var(--primary-blue);font:inherit;font-weight:700;box-shadow:none;cursor:pointer}.input-source-hint button:hover{transform:none;box-shadow:none;text-decoration:underline}.setting-select{width:100%;padding:12px 15px;border:2px solid var(--light-blue);border-radius:10px;font-size:1em;background:#fff;cursor:pointer;transition:border-color .3s ease}.setting-select:focus{outline:none;border-color:var(--primary-blue)}.setting-checkbox{width:20px;height:20px;margin-right:10px;cursor:pointer}.custom-wordlist-selector{position:relative;width:100%}.wordlist-selector-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea33}.wordlist-selector-header:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea4d}.wordlist-selected{display:flex;align-items:center;gap:12px;color:#fff;font-weight:500}.wordlist-icon{font-size:1.3em}.wordlist-name{font-size:1.05em}.dropdown-arrow{color:#fff;font-size:.8em;transition:transform .3s ease}.custom-wordlist-selector.active .dropdown-arrow{transform:rotate(180deg)}.wordlist-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border-radius:12px;box-shadow:0 8px 30px #00000026;max-height:0;overflow:hidden;opacity:0;transition:all .3s ease;z-index:100}.custom-wordlist-selector.active .wordlist-dropdown{max-height:500px;opacity:1;overflow-y:auto}.wordlist-option{display:flex;align-items:center;gap:12px;padding:14px 20px;cursor:pointer;transition:background .2s ease}.wordlist-option:hover{background:linear-gradient(to right,#667eea14,#764ba214)}.wordlist-option.active{background:linear-gradient(to right,#667eea1f,#764ba21f)}.wordlist-info{flex:1;display:flex;flex-direction:column;gap:2px}.wordlist-name-text{font-weight:500;color:var(--text-dark)}.wordlist-desc{font-size:.85em;color:var(--text-light)}.wordlist-count{font-size:.85em;color:var(--primary-purple);font-weight:500}.wordlist-divider{height:1px;background:linear-gradient(to right,transparent,rgba(102,126,234,.2),transparent);margin:8px 0}.wordlist-group-label{padding:12px 20px 8px;font-size:.85em;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px}.wordlist-add-custom{background:linear-gradient(to right,#667eea0d,#764ba20d);border-radius:0 0 12px 12px}.wordlist-add-custom:hover{background:linear-gradient(to right,#667eea1f,#764ba21f)}.wordlist-delete-btn{padding:6px 12px;background:#ef44441a;color:#ef4444;border:none;border-radius:6px;font-size:.85em;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:4px}.wordlist-delete-btn:hover{background:#ef444433;transform:scale(1.05)}.wordlist-delete-btn:active{transform:scale(.95)}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;justify-content:center;align-items:center;animation:fadeIn .3s ease}.modal.active{display:flex}.modal-content{background:#fff;border-radius:20px;max-width:650px;width:90%;max-height:90vh;position:relative;animation:slideUp .3s ease;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px #0003}.modal-body{flex:1;overflow-y:auto;padding:30px 35px 20px}.modal-footer{flex-shrink:0;padding:16px 35px;border-top:2px solid var(--light-blue);background:#fff}.modal-close{position:absolute;top:20px;right:20px;width:40px;height:40px;min-width:40px;min-height:40px;border-radius:50%;background:var(--light-pink);border:none;font-size:1.5em;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;padding:0;z-index:10}.modal-close:hover{background:var(--primary-pink);color:#fff;transform:rotate(90deg)}.word-detail-header{text-align:center;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid var(--light-blue)}.word-detail-header h2{font-size:2.5em;color:var(--primary-purple);margin-bottom:8px}.word-detail-header .pinyin{font-size:1.3em;color:var(--text-light)}.word-detail-section{margin-bottom:16px}.word-detail-section:last-child{margin-bottom:0}.word-detail-section h3{color:var(--primary-blue);margin-bottom:10px;font-size:1.1em;font-weight:600;display:flex;align-items:center;gap:6px}.word-detail-section .content{background:var(--light-blue);padding:14px 16px;border-radius:10px;line-height:1.75;font-size:1.05em;white-space:pre-line;max-height:none;overflow:visible}.definitions-list{white-space:normal}.definition-item{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(74,144,226,.2);line-height:1.8}.definition-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.part-of-speech{display:inline-block;background:linear-gradient(135deg,var(--primary-blue),var(--primary-purple));color:#fff;padding:4px 12px;border-radius:15px;font-size:.85em;font-weight:700;margin-right:10px;margin-bottom:8px;vertical-align:middle}.definition-text-content{display:inline;font-size:1.1em;line-height:1.8;color:var(--text-dark)}.example-item{padding:10px 0;line-height:1.8;font-size:1.05em;color:var(--text-dark)}.example-item:first-child{padding-top:0}.related-words{display:flex;flex-wrap:wrap;gap:8px;padding:0;background:transparent;pointer-events:none}.related-word-tag{display:inline-flex;align-items:center;padding:6px 13px;background:#fff;border:2px solid var(--primary-blue);border-radius:20px;color:var(--primary-blue);font-size:.95em;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #4a90e226;pointer-events:auto}.related-word-tag:hover{background:var(--primary-blue);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #4a90e24d}.related-word-tag.antonym{border-color:var(--primary-pink);color:var(--primary-pink);box-shadow:0 2px 8px #ec489926}.related-word-tag.antonym:hover{background:var(--primary-pink);color:#fff;box-shadow:0 4px 12px #ec48994d}.add-to-wordbook-btn{width:100%;margin:0}.toast{position:fixed;top:30px;left:50%;transform:translate(-50%);background:var(--primary-green);color:#fff;padding:15px 30px;border-radius:50px;box-shadow:0 4px 20px #0000004d;z-index:2100;display:none;animation:slideDown .3s ease}.toast.active{display:block}.loading{display:none;text-align:center;padding:40px}.loading.active{display:block}.loading-spinner{width:60px;height:60px;border:6px solid var(--light-blue);border-top-color:var(--primary-blue);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}.loading-text{font-size:1.2em;color:var(--text-light)}.inline-loading{display:inline-flex;align-items:center;gap:12px;padding:8px 0}.inline-loading-spinner{width:20px;height:20px;border:3px solid rgba(59,130,246,.2);border-top-color:var(--primary-blue);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}.inline-loading-text{font-size:1em;color:var(--text-light);font-style:italic}.message{display:flex;gap:15px;margin-bottom:12px;animation:slideIn .5s ease-out;overflow:visible;max-width:100%}.message-label{flex-shrink:0;width:100px;font-weight:700;font-size:.9em;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;padding-top:3px}.message-label.ai{color:var(--primary-blue)}.message-label.user{color:var(--primary-pink)}.message-label .emoji{font-size:2em;line-height:1}.message-label .name{font-size:.85em;text-align:center;line-height:1.2}.message-content{flex:1;line-height:2.2;font-size:1.35em;color:var(--text-dark);border-left:3px solid transparent;padding:8px 0 8px 15px;overflow:visible;word-wrap:break-word;overflow-wrap:break-word;max-width:100%}.message.ai .message-content{border-left-color:#3b82f64d}.message.user .message-content{border-left-color:#ec48994d}.clickable-word{color:var(--primary-purple);cursor:pointer;font-weight:700;transition:all .3s ease;padding:2px 6px;border-radius:6px;background:#9b59b61a;border-bottom:2px solid var(--primary-purple)}.clickable-word:hover{color:#fff;background:var(--primary-purple);transform:translateY(-2px)}.highlighted-word{color:var(--primary-pink);font-weight:700;padding:2px 6px;border-radius:6px;background:#ff69b426;border-bottom:3px solid var(--primary-pink);cursor:pointer;transition:all .3s ease}.highlighted-word:hover{color:#fff;background:var(--primary-pink);transform:translateY(-2px)}.stat-card{background:linear-gradient(135deg,var(--light-blue),var(--light-pink));border-radius:15px;padding:25px;box-shadow:0 4px 15px #0000001a}.stat-number{font-size:3em;font-weight:700;color:var(--primary-blue);margin-bottom:10px}.stat-label{font-size:1.1em;color:var(--text-light)}.info-box{background:var(--light-yellow);border-left:4px solid var(--primary-yellow);border-radius:10px;padding:15px;display:flex;gap:12px;align-items:start}.info-icon{font-size:1.5em;flex-shrink:0}.info-text{line-height:1.6;color:var(--text-dark)}.vocab-mode-card{background:#fff;border:3px solid var(--light-blue);border-radius:15px;padding:20px;cursor:pointer;transition:all .3s ease}.vocab-mode-card:hover{transform:translateY(-5px);border-color:var(--primary-blue);box-shadow:0 8px 20px #4a90e233}.vocab-mode-card.selected{border-color:var(--primary-purple);background:linear-gradient(135deg,var(--light-blue),var(--light-pink));box-shadow:0 8px 20px #9b59b64d}.mode-card-header{display:flex;align-items:center;gap:12px;margin-bottom:15px}.mode-card-icon{font-size:2em}.mode-card-title{flex:1}.mode-card-name{font-size:1.2em;font-weight:700;color:var(--text-dark);margin-bottom:5px}.mode-card-badge{display:inline-block;background:var(--primary-green);color:#fff;padding:3px 10px;border-radius:12px;font-size:.75em;font-weight:700}.mode-card-badge.coming-soon{background:var(--text-light)}.mode-card-description{color:var(--text-dark);line-height:1.6;margin-bottom:15px}.mode-card-features{display:flex;flex-direction:column;gap:8px}.feature-item{color:var(--primary-blue);font-size:.9em}.progress-circle{position:absolute;right:15px;bottom:15px;width:80px;height:80px;z-index:10;background:#fffffff2;border-radius:50%;box-shadow:0 4px 12px #00000026;pointer-events:auto}.progress-circle svg{transform:rotate(-90deg)}.progress-bg{fill:none;stroke:#667eea33;stroke-width:6}.progress-bar{fill:none;stroke:url(#progress-gradient);stroke-width:6;stroke-linecap:round;stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset .6s ease}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;font-weight:700;color:var(--primary-purple);font-size:1em;line-height:1;white-space:nowrap}.current-turn{font-size:1.2em}.turn-separator{font-size:1em;opacity:.7;margin:0 1px}.max-turn{font-size:1em;opacity:.8}@keyframes progressPulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}.progress-circle.updating .progress-text{animation:progressPulse .5s ease}.feedback-section{margin:20px 0;animation:fadeIn .3s ease}.feedback-message{background:linear-gradient(135deg,var(--light-blue),var(--light-pink));border:3px solid var(--primary-blue);border-radius:var(--border-radius);padding:20px;font-size:1em;color:var(--text-dark);box-shadow:var(--shadow)}.feedback-header{font-size:1em;font-weight:600;margin-bottom:10px;color:#6c757d}.feedback-score{background:#fff;border:2px solid var(--light-blue);border-radius:15px;padding:15px;margin-bottom:15px;box-shadow:0 2px 10px #0000000d}.score-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.score-title{font-size:.9em;color:var(--text-light);font-weight:500;margin-right:5px}.score-number{font-size:2em;font-weight:700;color:var(--primary-blue)}.score-label{font-size:.9em;color:var(--text-light)}.score-comment{font-size:1em;color:var(--text-dark);line-height:1.6}.optimized-sentence-container{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,var(--light-yellow),#fff8dc);border:3px solid var(--primary-yellow);border-radius:15px;padding:15px;margin-top:15px;box-shadow:0 2px 10px #ffd70033}.optimized-sentence-copy{flex:1}.optimized-sentence-label{margin-bottom:6px;color:var(--text-light);font-size:.86em;font-weight:700}.optimized-sentence-text{font-size:1.05em;line-height:1.6;color:var(--text-dark);font-weight:500}.optimized-sentence-text:before{content:"💡 ";font-size:1.2em}.apply-optimized-btn{flex-shrink:0;padding:10px 18px;border-radius:999px;background:linear-gradient(135deg,var(--primary-green),#27ae60);color:#fff;font-size:.95em;box-shadow:0 4px 12px #2ecc713d}.story-card{background:#fff;border:3px solid var(--light-blue);border-radius:15px;padding:20px;transition:all .3s ease;cursor:pointer;display:flex;flex-direction:column}.story-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px #00000026;border-color:var(--primary-blue)}.story-card.completed{border-color:var(--primary-green)}.story-card.in-progress{border-color:var(--primary-yellow)}.story-card-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:15px;gap:10px}.story-title-container{flex:1;display:flex;align-items:center;gap:8px}.story-card-title{font-size:1.3em;font-weight:700;color:var(--text-dark);margin:0;cursor:pointer;transition:color .3s ease}.story-card-title:hover{color:var(--primary-purple)}.btn-rename-inline{padding:4px 8px;background:transparent;border:none;font-size:.9em;cursor:pointer;opacity:.6;transition:all .3s ease}.btn-rename-inline:hover{opacity:1;transform:scale(1.2)}.story-status-badge{flex-shrink:0;padding:6px 12px;border-radius:20px;font-size:.85em;font-weight:700;white-space:nowrap}.story-status-badge.completed{background:linear-gradient(135deg,var(--light-green),#d4edda);color:var(--primary-green)}.story-status-badge.in-progress{background:linear-gradient(135deg,var(--light-yellow),#fff3cd);color:#856404}.story-card-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}.meta-item{font-size:.85em;color:var(--text-light);padding:4px 10px;background:var(--light-blue);border-radius:12px}.story-card-preview{flex:1;line-height:1.8;color:var(--text-dark);margin-bottom:15px;font-size:.95em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.story-card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:15px;border-top:2px solid var(--light-blue);gap:10px}.story-time{font-size:.85em;color:var(--text-light)}.story-actions{display:flex;gap:8px}.btn-action{padding:6px 12px;border:none;border-radius:20px;font-size:.85em;font-weight:700;cursor:pointer;transition:all .3s ease;background:#fff}.btn-view{border:2px solid var(--primary-blue);color:var(--primary-blue)}.btn-view:hover{background:var(--primary-blue);color:#fff}.btn-continue{border:2px solid var(--primary-green);color:var(--primary-green)}.btn-continue:hover{background:var(--primary-green);color:#fff}.btn-delete{border:2px solid var(--primary-pink);color:var(--primary-pink)}.btn-delete:hover{background:var(--primary-pink);color:#fff}.upload-wordlist-content{max-width:600px}.modal-title{text-align:center;color:var(--primary-purple);margin-bottom:25px;font-size:1.5em;font-weight:700}.upload-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-label{display:block;font-weight:600;color:var(--text-dark);font-size:1em}.form-input,.form-textarea{width:100%;padding:12px 15px;border:2px solid var(--light-blue);border-radius:10px;font-size:1em;font-family:inherit;transition:border-color .3s ease;box-sizing:border-box}.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--primary-blue)}.form-textarea{resize:vertical;min-height:60px}.btn-download-template{align-self:flex-start;padding:10px 20px;background:linear-gradient(135deg,var(--primary-blue),var(--primary-green));color:#fff;border:none;border-radius:50px;font-size:.95em;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea4d}.btn-download-template:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.upload-zone{border:2px dashed var(--primary-purple);border-radius:12px;padding:30px;text-align:center;background:linear-gradient(135deg,var(--light-blue),var(--light-pink));cursor:pointer;transition:all .3s ease}.upload-zone:hover{border-color:var(--primary-blue);background:linear-gradient(135deg,#e3f2fd,#fce4ec);transform:translateY(-2px)}.upload-icon{margin:0 0 10px;font-size:2.5em}.upload-text-main{margin:10px 0;color:var(--primary-purple);font-weight:600;font-size:1.05em}.upload-text-hint{margin:0;font-size:.85em;color:var(--text-light)}.upload-file-name{margin-top:10px;font-size:.9em;color:var(--primary-blue);font-weight:500}.upload-progress-section{display:none;margin:20px 0}.progress-bar-container{width:100%;height:25px;background:var(--light-blue);border-radius:12px;overflow:hidden;margin:10px 0}.progress-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--primary-blue),var(--primary-purple));transition:width .3s ease;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85em;font-weight:700}.upload-progress-text{text-align:center;color:var(--text-light);font-size:.9em;margin-top:10px}.modal-btn{flex:1;padding:12px 30px}.user-metadata{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.user-grade-badge{display:inline-flex;align-items:center;padding:4px 10px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:.85em;font-weight:600;border-radius:12px;cursor:pointer;transition:all .3s ease;white-space:nowrap}.user-grade-badge:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.user-grade-badge:before{content:"📚 ";margin-right:2px}.grade-selector-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.grade-selector-modal.show{opacity:1}.grade-selector-modal.closing{opacity:0}.grade-selector-overlay{position:absolute;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.grade-selector-overlay.required{cursor:not-allowed}.grade-selector-container{position:relative;z-index:1;background:#fff;border-radius:16px;width:90%;max-width:650px;max-height:85vh;overflow:hidden;box-shadow:0 20px 60px #0000004d;transform:translateY(20px);transition:transform .3s ease;display:flex;flex-direction:column}.grade-selector-modal.show .grade-selector-container{transform:translateY(0)}.grade-selector-header{padding:20px 25px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-align:center;flex-shrink:0}.grade-selector-header h2{margin:0 0 8px;font-size:1.6em}.grade-selector-hint{margin:0;font-size:.9em;opacity:.95}.grade-selector-info{padding:15px 25px;background:#f8f9ff;border-bottom:1px solid #e0e7ff;flex-shrink:0}.grade-selector-info p{margin:0 0 8px;font-weight:600;color:#667eea;font-size:.9em}.grade-selector-info ul{margin:0;padding-left:20px;list-style:none}.grade-selector-info ul li{margin-bottom:4px;font-size:.85em;color:#666;position:relative;padding-left:15px}.grade-selector-info ul li:before{content:"•";position:absolute;left:0;color:#667eea}.grade-selector-body{padding:20px 25px;flex:1;overflow-y:auto}.grade-options-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.grade-option-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 8px;border:2px solid #e0e0e0;border-radius:10px;background:#fff;cursor:pointer;transition:all .2s ease;box-shadow:none}.grade-option-btn:hover{border-color:#667eea;background:#f8f9ff;transform:translateY(-2px);box-shadow:0 3px 10px #667eea33}.grade-option-btn.selected{border-color:#667eea;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 3px 12px #667eea66}.grade-label{display:block;font-size:1em;font-weight:700;margin-bottom:3px}.grade-age{display:block;font-size:.75em;opacity:.8}.grade-selector-footer{padding:15px 25px;border-top:1px solid #e0e0e0;display:flex;gap:12px;justify-content:flex-end;flex-shrink:0}.grade-selector-footer .btn-primary,.grade-selector-footer .btn-secondary{padding:10px 25px;border-radius:8px;font-size:.95em;box-shadow:none}.grade-selector-footer .btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.grade-selector-footer .btn-primary:disabled:hover{transform:none;box-shadow:none}@media(max-width:768px){.grade-selector-container{width:95%;max-width:none;max-height:90vh}.grade-options-grid{grid-template-columns:repeat(4,1fr);gap:8px}.grade-option-btn{padding:10px 6px}.grade-label{font-size:.9em}.grade-age{font-size:.7em}.grade-selector-header{padding:15px 20px}.grade-selector-header h2{font-size:1.4em}.grade-selector-info{padding:12px 20px}.grade-selector-body{padding:15px 20px}.grade-selector-footer{padding:12px 20px}}@media(max-width:480px){.grade-options-grid{grid-template-columns:repeat(3,1fr)}}.stage-hint-container{margin:15px 0;padding:0;opacity:0;transform:translateY(-10px);transition:all .4s ease}.stage-hint-container.show{opacity:1;transform:translateY(0)}.stage-hint-text{padding:12px 20px;border-radius:12px;font-size:.95em;font-weight:600;text-align:center;box-shadow:0 2px 8px #0000001a}.stage-hint-container.hint-info .stage-hint-text{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.stage-hint-container.hint-warning .stage-hint-text{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;animation:pulse-warning 2s ease-in-out infinite}.stage-hint-container.hint-final .stage-hint-text{background:linear-gradient(135deg,#ec4899,#be185d);color:#fff;animation:pulse-final 1.5s ease-in-out infinite}@keyframes pulse-warning{0%,to{box-shadow:0 2px 8px #f59e0b4d}50%{box-shadow:0 4px 16px #f59e0b99}}@keyframes pulse-final{0%,to{box-shadow:0 2px 8px #ec48994d}50%{box-shadow:0 4px 16px #ec489999}}@media(max-width:768px){.stage-hint-text{font-size:.85em;padding:10px 15px}}.story-summary-container{margin-top:30px;padding:25px;background:linear-gradient(135deg,#f8f9ff,#fff5f8);border-radius:20px;border:2px solid #e0e7ff;opacity:0;transform:translateY(20px);transition:all .5s ease}.story-summary-container.show{opacity:1;transform:translateY(0)}.story-summary-loading{text-align:center;padding:20px}.story-summary-error{text-align:center;padding:15px;color:#f59e0b}.story-summary-header{margin-bottom:20px;text-align:center}.story-summary-header h3{margin:0;font-size:1.5em;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.story-summary-content{display:flex;flex-direction:column;gap:20px}.summary-section{padding:20px;background:#fff;border-radius:15px;box-shadow:0 2px 8px #0000000d}.summary-section h4{margin:0 0 12px;font-size:1.2em;color:#667eea}.summary-section p{margin:0;line-height:1.8;color:#444;font-size:1.05em}.summary-evaluation{border-left:4px solid #667eea}.summary-highlights{border-left:4px solid #f59e0b}.summary-highlights .highlights-list{margin:0;padding-left:20px;list-style:none}.summary-highlights .highlights-list li{margin-bottom:10px;padding-left:25px;position:relative;line-height:1.8;color:#444}.summary-highlights .highlights-list li:before{content:"✨";position:absolute;left:0;top:0}.summary-suggestions{border-left:4px solid #10b981;background:linear-gradient(135deg,#f0fdf4,#f0fdfa)}@media(max-width:768px){.story-summary-container{padding:20px;margin-top:20px}.summary-section{padding:15px}.summary-section h4{font-size:1.1em}.summary-section p{font-size:1em}}.level-modal-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:2000;opacity:0;transition:opacity .25s ease;align-items:center;justify-content:center}.level-modal-overlay.active{display:flex;opacity:1}.level-modal{background:#fff;border-radius:20px;box-shadow:0 10px 50px #0000004d;max-width:600px;width:90%;max-height:80vh;display:flex;flex-direction:column;transform:scale(.9) translateY(-20px);opacity:0;transition:all .25s ease-out}.level-modal-overlay.active .level-modal{transform:scale(1) translateY(0);opacity:1;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.level-modal-header{padding:25px 30px;background:linear-gradient(135deg,#667eea0d,#764ba20d);border-bottom:2px solid rgba(102,126,234,.1);border-radius:20px 20px 0 0;display:flex;align-items:center;justify-content:space-between}.level-modal-title{font-size:1.5em;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:flex;align-items:center;gap:10px}.level-modal-title span{-webkit-text-fill-color:initial;background:none}.level-modal-close{width:36px;height:36px;min-width:36px;min-height:36px;border-radius:50%;background:#f5f5f5;border:none;font-size:1.3em;line-height:1;color:#666;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;flex-shrink:0;padding:0}.level-modal-close:hover{background:linear-gradient(135deg,#ff6b6b,#ee5a6f);color:#fff;transform:rotate(90deg) scale(1.1);box-shadow:0 4px 12px #ff6b6b4d}.level-modal-close:active{transform:rotate(90deg) scale(.95)}.level-modal-body{padding:30px;overflow-y:auto;flex:1}.use-whole-unit-section{margin-bottom:25px;padding-bottom:25px;border-bottom:2px dashed rgba(102,126,234,.2)}.use-whole-unit-btn{width:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:18px 30px;border-radius:12px;font-size:1.1em;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea4d;display:flex;align-items:center;justify-content:center;gap:10px}.use-whole-unit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.use-whole-unit-btn:active{transform:translateY(0)}.use-whole-unit-btn.selected{background:linear-gradient(135deg,#48bb78,#38a169);box-shadow:0 4px 15px #48bb784d}.use-whole-unit-btn .icon{font-size:1.3em}.level-3-hint{text-align:center;color:var(--text-light);margin-bottom:20px;font-size:1.05em}.level-3-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.level-3-card{background:var(--light-blue);border:3px solid transparent;border-radius:12px;padding:15px 12px;text-align:center;cursor:pointer;transition:all .3s ease;position:relative}.level-3-card:hover{transform:translateY(-3px);border-color:var(--primary-blue);box-shadow:0 4px 15px #667eea33}.level-3-card.selected{background:linear-gradient(135deg,var(--primary-blue),var(--primary-purple));color:#fff;border-color:var(--primary-blue);box-shadow:0 4px 15px #667eea4d}.level-3-card-name{font-weight:700;font-size:1em;line-height:1.4}.level-3-card.selected .level-3-card-name{color:#fff}.level-3-card.selected:before{content:"✓";position:absolute;top:5px;right:5px;width:22px;height:22px;background:#ffffff4d;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9em}@media(max-width:768px){.level-modal{width:95%;max-height:85vh}.level-modal-header{padding:20px}.level-modal-title{font-size:1.3em}.level-modal-body{padding:20px}.level-3-cards-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.use-whole-unit-btn{padding:15px 20px;font-size:1em}}@keyframes input-pulse{0%,to{border-color:#667eea;box-shadow:0 0 #667eea66}50%{border-color:#764ba2;box-shadow:0 0 0 8px #764ba200}}@keyframes placeholder-glow{0%,to{opacity:.6}50%{opacity:1}}.story-naming input{transition:all .3s ease}.story-naming input:focus,.story-naming input.need-input-hint{animation:input-pulse 2s ease-in-out infinite}.story-naming input::placeholder{animation:placeholder-glow 2s ease-in-out infinite}.ai-recommendation-explanation{background:linear-gradient(135deg,#667eea0d,#764ba20d);border:2px solid rgba(102,126,234,.15);border-radius:16px;padding:24px;margin-bottom:20px}.explanation-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid rgba(102,126,234,.1)}.explanation-header .icon{font-size:2em}.explanation-header h3{font-size:1.4em;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0}.explanation-content{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}.explanation-item{display:flex;align-items:flex-start;gap:12px;padding:12px;background:#fff;border-radius:10px;transition:all .3s ease}.explanation-item:hover{transform:translate(5px);box-shadow:0 4px 12px #667eea26}.explanation-item .item-icon{font-size:1.5em;flex-shrink:0}.explanation-item .item-text{flex:1;font-size:.95em;line-height:1.6;color:var(--text-dark)}.explanation-item .item-text strong{color:#667eea;font-weight:600}.explanation-footer{text-align:center;font-size:.9em;color:var(--text-light);padding-top:16px;border-top:1px dashed rgba(102,126,234,.2)}.explanation-footer a{color:#667eea;text-decoration:none;font-weight:600;transition:all .2s ease}.explanation-footer a:hover{color:#764ba2;text-decoration:underline}.level-selector,.theme-selector{margin:12px 0}.level-selector{margin:15px 0}.level-selector h2,.theme-selector h2{color:var(--text-dark);margin-bottom:12px;font-size:1.2em}.level-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:15px}.theme-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:15px}.difficulty-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:15px;width:100%}#level-2-cards{max-height:none;overflow:visible}#wordlist-hierarchy-section{margin-bottom:18px;max-height:none;overflow:visible}#wordlist-hierarchy-section h2{color:var(--text-dark);margin-bottom:12px;font-size:1.2em}.start-button-container{text-align:center;margin-top:18px;margin-bottom:20px}#game-screen .content{flex:1;display:flex;flex-direction:column;overflow-y:auto;overflow-x:visible;padding:20px 40px 30px;justify-content:flex-start;max-width:100%}.story-display{flex:1;overflow-y:auto;overflow-x:visible;margin-bottom:30px;background:var(--light-blue);border-radius:15px!important;padding:20px;min-height:250px;max-height:450px;position:relative;max-width:100%;word-wrap:break-word}.word-choices-section{flex-shrink:0;margin-bottom:20px;max-width:100%;padding-top:8px;overflow:visible}.word-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px}.user-input-section{flex-shrink:0;background:var(--light-yellow);border-radius:15px;padding:25px;max-width:100%;overflow:visible}.selected-word-display{background:#fff;border-left:4px solid var(--primary-yellow);padding:15px;border-radius:10px;margin-bottom:15px;font-size:1.1em;color:var(--text-dark);white-space:nowrap;overflow-x:auto;overflow-y:hidden}.selected-word-display .word-main{color:var(--text-dark);font-weight:600;font-size:1.25em}.selected-word-display .word-meta{color:var(--text-light);font-size:.95em;margin-left:4px}.selected-word-display .word-separator{color:var(--text-light);margin:0 8px;font-weight:300}.selected-word-display .word-english{color:var(--primary-blue);font-style:italic;font-size:.95em}.selected-word-display .word-definition{color:var(--text-dark);font-size:1em}.selected-word-display .loading-text{color:var(--text-light);font-size:.9em;margin-left:10px}.finish-content{text-align:center}.celebration{font-size:5em;margin-bottom:20px;animation:bounce 1s infinite}.finish-content h2{color:var(--primary-purple);font-size:2.5em;margin-bottom:30px}.story-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:30px 0}.full-story-container{background:#fff;border-radius:15px;padding:30px;margin:30px 0;text-align:left;box-shadow:0 4px 15px #0000001a;max-height:400px;overflow-y:auto}.full-story-container h3{color:var(--primary-purple);margin-bottom:20px;font-size:1.5em}.full-story-text{line-height:2;font-size:1.2em;color:var(--text-dark)}.action-buttons{display:flex;gap:20px;justify-content:center;margin-top:30px}#settings-screen .content{justify-content:flex-start;align-items:stretch;padding:40px;overflow-y:visible;overflow-x:visible}.settings-section{background:#fff;border-radius:15px;padding:25px;margin-bottom:20px;box-shadow:0 2px 10px #0000000d;width:100%;max-width:800px;margin-left:auto;margin-right:auto}.section-title{color:var(--primary-purple);font-size:1.3em;margin-bottom:8px}.section-desc{color:var(--text-light);font-size:.9em;margin-bottom:20px}.current-mode-card{background:linear-gradient(135deg,var(--light-blue),var(--light-pink));border-radius:15px;padding:20px;margin-bottom:20px}.mode-header{display:flex;align-items:center;gap:15px;margin-bottom:15px}.mode-icon{font-size:2.5em}.mode-info{flex:1}.mode-name{font-size:1.3em;font-weight:700;color:var(--text-dark)}.mode-status{color:var(--primary-green);font-size:.9em;font-weight:700}.mode-description{color:var(--text-dark);line-height:1.6;margin-bottom:12px}.mode-stats{color:var(--text-light);font-size:.9em}.setting-item{margin-bottom:20px}.setting-label{display:block;font-weight:700;color:var(--text-dark);margin-bottom:8px;font-size:1.05em}.about-info{color:var(--text-dark);line-height:1.8}.settings-footer{margin-top:30px;padding-top:20px;border-top:2px solid var(--light-blue)}.vocab-mode-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:15px}.story-title-edit{display:flex;align-items:center;gap:10px;max-width:500px;margin:0 auto 10px}.story-title-edit input{flex:1;padding:12px 20px;border:3px solid var(--light-blue);border-radius:10px;font-size:1.2em;font-weight:700;text-align:center;transition:all .3s ease}.story-title-edit input:focus{outline:none;border-color:var(--primary-blue);box-shadow:0 0 0 3px #4a90e21a}.story-title-edit input.saved{border-color:var(--primary-green);background:#2ecc711a}.btn-title-confirm{width:50px;height:50px;min-width:50px;padding:0;background:var(--primary-green);color:#fff;border:none;border-radius:50%;font-size:1.5em;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #2ecc714d}.btn-title-confirm:hover{background:#27ae60;transform:scale(1.1)}.edit-hint{text-align:center;color:var(--text-light);font-size:.9em;margin-bottom:20px}#my-stories-screen .content{padding:30px 40px;max-width:1200px;margin:0 auto;overflow-y:visible;justify-content:flex-start}.stories-header{text-align:center;margin-bottom:30px}.stories-header h1{color:var(--primary-purple);font-size:2.5em;margin-bottom:10px}.stories-subtitle{color:var(--text-light);font-size:1.1em}.stories-stats-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:40px}.stat-card-mini{display:flex;align-items:center;gap:15px;background:#fff;border:3px solid var(--light-blue);border-radius:15px;padding:20px;transition:all .3s ease}.stat-card-mini:hover{transform:translateY(-5px);box-shadow:0 8px 20px #0000001a;border-color:var(--primary-blue)}.stat-icon{font-size:2.5em;flex-shrink:0}.stat-info{flex:1}.stat-number-mini{font-size:2em;font-weight:700;color:var(--primary-blue);line-height:1}.stat-label-mini{font-size:.9em;color:var(--text-light);margin-top:5px}.stories-list{margin-bottom:30px}.stories-section{margin-bottom:40px}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:15px;border-bottom:3px solid var(--light-blue)}.section-header h2{font-size:1.5em;color:var(--text-dark);margin:0}.section-count{color:var(--text-light);font-size:1em}.story-cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:20px}.empty-state{text-align:center;padding:60px 20px;color:var(--text-light)}.empty-icon{font-size:4em;margin-bottom:20px;opacity:.5}.empty-state p{font-size:1.2em;margin:10px 0}.empty-hint{font-size:.9em;opacity:.8}.stories-footer{text-align:center;padding-top:20px;border-top:2px solid var(--light-blue)}.story-detail-header-full{text-align:center;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid var(--light-blue)}.story-detail-header-full h2{font-size:2em;color:var(--primary-purple);margin-bottom:15px}.story-meta{display:flex;justify-content:center;gap:10px;margin-bottom:10px}.story-theme-badge,.story-level-badge{display:inline-block;padding:6px 15px;background:linear-gradient(135deg,var(--light-blue),var(--light-pink));border-radius:20px;font-size:.9em;font-weight:700;color:var(--text-dark)}.story-timestamps{color:var(--text-light);font-size:.9em}.story-detail-content,.story-detail-words{margin-bottom:30px}.story-detail-content h3,.story-detail-words h3{color:var(--primary-blue);margin-bottom:15px;font-size:1.2em}.story-full-text{background:var(--light-blue);padding:20px;border-radius:10px;line-height:2;font-size:1.1em;max-height:400px;overflow-y:auto}.words-tags{display:flex;flex-wrap:wrap;gap:8px}.word-tag{display:inline-block;padding:8px 15px;background:#fff;border:2px solid var(--primary-purple);border-radius:20px;color:var(--primary-purple);font-weight:700;font-size:.95em}.no-words{color:var(--text-light);font-style:italic}.login-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);display:none;align-items:center;justify-content:center;z-index:10000;overflow-y:auto}.login-screen.active{display:flex}.login-container{background:#fff;border-radius:30px;padding:50px 40px;max-width:500px;width:90%;box-shadow:0 20px 60px #0000004d;text-align:center;animation:slideUp .5s ease}.login-logo{margin-bottom:20px}.logo-icon{font-size:4em;line-height:1}.login-header{margin-bottom:30px}.login-title{font-size:2.5em;color:var(--primary-purple);margin-bottom:10px;font-weight:700}.login-subtitle{font-size:1.2em;color:var(--text-light)}.login-info{display:flex;justify-content:space-around;margin:30px 0;padding:20px;background:var(--light-blue);border-radius:15px}.info-item{display:flex;flex-direction:column;align-items:center;gap:8px}.info-icon{font-size:2em}.info-text{font-size:.85em;color:var(--text-dark);font-weight:500}.login-buttons{display:flex;flex-direction:column;gap:15px;margin:30px 0}.login-btn{width:100%;padding:0;border:none;border-radius:15px;cursor:pointer;transition:all .3s ease;overflow:hidden}.login-btn-google{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 8px 20px #667eea66}.login-btn-google:hover{transform:translateY(-3px);box-shadow:0 12px 30px #667eea80}.login-btn-guest{background:#667eea1a;border:2px solid rgba(102,126,234,.3)}.login-btn-guest:hover{background:#667eea26;border-color:#667eea80}.btn-content{display:flex;align-items:center;gap:15px;padding:18px 25px}.btn-icon{font-size:2em;flex-shrink:0}.btn-text{display:flex;flex-direction:column;align-items:flex-start;text-align:left;flex:1}.login-btn-google .btn-main,.login-btn-google .btn-hint{color:#fff}.login-btn-guest .btn-main{color:var(--text-dark)}.login-btn-guest .btn-hint{color:var(--text-light)}.btn-main{font-size:1.1em;font-weight:700;margin-bottom:3px}.btn-hint{font-size:.85em;opacity:.9}html.garden-door .classroom-login-hint{display:none}.login-footer{margin-top:30px;padding-top:20px;border-top:2px solid var(--light-blue);color:var(--text-light);font-size:.9em}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.login-container{padding:40px 25px}.login-title{font-size:2em}.login-info{flex-direction:column;gap:15px}}#wordbook-screen .content{justify-content:flex-start;padding:30px 40px;overflow-y:visible;overflow-x:visible}.wordbook-header{text-align:center;margin-bottom:30px}.wordbook-header h1{color:var(--primary-purple);font-size:2.5em;margin-bottom:10px}.wordbook-subtitle{color:var(--text-light);font-size:1.1em}.wordbook-stats-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:40px}.wordbook-list-container{margin-bottom:30px}#wordbook-words-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.wordbook-card{background:#fff;border:3px solid var(--light-blue);border-radius:15px;padding:20px;cursor:pointer;transition:all .3s ease;position:relative}.wordbook-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px #667eea33;border-color:var(--primary-purple)}.wordbook-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}.wordbook-card-word{font-size:1.8em;font-weight:700;color:var(--primary-purple)}.wordbook-card-remove{background:#e74c3c1a;border:none;border-radius:50%;width:28px;height:28px;font-size:1.2em;color:#e74c3c;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.wordbook-card-remove:hover{background:#e74c3c;color:#fff;transform:scale(1.1)}.wordbook-card-pinyin{color:var(--text-light);font-size:1em;margin-bottom:10px}.wordbook-card-translation{color:var(--primary-blue);font-style:italic;font-size:.95em;margin-bottom:10px}.wordbook-card-definition{color:var(--text-dark);line-height:1.6;font-size:1em;margin-bottom:15px}.wordbook-card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid var(--light-blue)}.wordbook-card-date{font-size:.85em;color:var(--text-light)}.wordbook-card-hint{font-size:.85em;color:var(--primary-purple);opacity:0;transition:opacity .3s ease}.wordbook-card:hover .wordbook-card-hint{opacity:1}.wordbook-footer{text-align:center;padding-top:20px;border-top:2px solid var(--light-blue)}@media(max-width:768px){#wordbook-words-list{grid-template-columns:1fr}.wordbook-header h1{font-size:2em}}.congratulations-container{position:relative;background:#fff;border-radius:24px;padding:50px 40px;max-width:500px;text-align:center;animation:bounceIn .6s cubic-bezier(.68,-.55,.265,1.55);box-shadow:0 20px 60px #0000004d}.modal-overlay.celebration{background:linear-gradient(135deg,#667eeacc,#764ba2cc)}.celebration-emoji{font-size:100px;margin:0;animation:scaleUp .8s cubic-bezier(.68,-.55,.265,1.55)}.celebration-title{font-size:28px;font-weight:700;margin:20px 0 10px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.celebration-message{font-size:16px;color:var(--text-light);margin-bottom:20px}.story-naming{margin:25px 0}.story-naming input{width:100%;padding:14px 24px;font-size:17px;font-weight:500;border:2px solid #667eea;border-radius:14px;text-align:center;outline:none;transition:all .3s ease;background:linear-gradient(135deg,#667eea0d,#764ba20d)}.story-naming input:focus{border-color:#764ba2;box-shadow:0 0 0 4px #667eea26;background:#fff}.story-naming input::placeholder{color:#999;font-weight:400}.quick-stats{display:flex;justify-content:space-around;margin:30px 0;gap:20px}.quick-stat{flex:1}.quick-stat .stat-number{display:block;font-size:40px;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:5px}.quick-stat .stat-label{display:block;font-size:14px;color:var(--text-light)}.celebration-btn{margin-top:20px;padding:15px 40px;font-size:18px;font-weight:700}.confetti-container{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;overflow:hidden;z-index:10000;display:none}.confetti-container.active{display:block}.confetti-piece{position:absolute;top:-20px;opacity:.9}.confetti-piece.square{width:12px;height:12px}.confetti-piece.rectangle{width:8px;height:16px}.confetti-piece.circle{width:10px;height:10px;border-radius:50%}.confetti-piece.fall-1{animation:confettiFall1 3s ease-out forwards}.confetti-piece.fall-2{animation:confettiFall2 3.5s ease-out forwards}.confetti-piece.fall-3{animation:confettiFall3 4s ease-out forwards}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes scaleUp{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}@keyframes confettiFall1{0%{transform:translateY(0) translate(0) rotate(0);opacity:.9}to{transform:translateY(110vh) translate(100px) rotate(720deg);opacity:0}}@keyframes confettiFall2{0%{transform:translateY(0) translate(0) rotate(0);opacity:.9}to{transform:translateY(110vh) translate(-80px) rotate(-540deg);opacity:0}}@keyframes confettiFall3{0%{transform:translateY(0) translate(0) rotate(0) scale(1);opacity:.9}50%{transform:translateY(55vh) translate(50px) rotate(360deg) scale(1.2);opacity:.7}to{transform:translateY(110vh) translate(-30px) rotate(900deg) scale(.8);opacity:0}}.section-heading{font-size:20px;font-weight:700;color:var(--primary-color);margin-bottom:15px;padding-bottom:8px;border-bottom:2px solid rgba(102,126,234,.2)}.report-section{margin-bottom:30px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:20px}.stat-card{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px 15px;border-radius:12px;text-align:center;opacity:0;transform:translateY(20px);transition:all .4s ease}.stat-card.fly-in{opacity:1;transform:translateY(0)}.stat-card.highlighted{background:linear-gradient(135deg,#f093fb,#f5576c);box-shadow:0 4px 15px #f5576c4d}.stat-card .stat-icon{font-size:28px;margin-bottom:5px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}.stat-card .stat-label{font-size:12px;font-weight:600;color:#ffffffd9;margin-bottom:8px;text-shadow:0 1px 2px rgba(0,0,0,.15)}.stat-card .stat-value{font-size:32px;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.2)}.timing-analysis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:25px}.timing-item{padding:15px 18px;border-radius:10px;display:flex;flex-direction:column;gap:5px;opacity:0;transform:translate(-20px);transition:all .4s ease}.timing-item.slide-in{opacity:1;transform:translate(0)}.timing-item.fastest{background:linear-gradient(135deg,#84fab0,#8fd3f4)}.timing-item.slowest{background:linear-gradient(135deg,#ffecd2,#fcb69f)}.timing-item .label{font-size:13px;font-weight:700;color:#000000b3}.timing-item .word{font-size:22px;font-weight:700;color:#000000d9}.timing-item .time{font-size:13px;color:#0009}.words-details-section{margin-bottom:25px}.words-details-section h3{font-size:18px;font-weight:700;color:var(--primary-color);margin-bottom:12px;padding-bottom:6px;border-bottom:2px solid rgba(102,126,234,.2)}.word-timing-bar{display:flex;align-items:center;gap:10px;margin-bottom:8px;opacity:0;transform:scaleX(0);transform-origin:left;transition:all .3s ease}.word-timing-bar.expand{opacity:1;transform:scaleX(1)}.word-timing-bar .word-text{min-width:55px;font-weight:700;font-size:15px;color:var(--text-dark)}.timing-bar-container{flex:1;background:#f0f0f0;height:28px;border-radius:14px;overflow:hidden}.timing-bar{background:linear-gradient(90deg,#667eea,#764ba2);height:100%;display:flex;align-items:center;justify-content:flex-end;padding:0 10px;color:#fff;font-size:12px;font-weight:700;transition:width .5s ease}.level-badge{min-width:42px;padding:3px 8px;background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;border-radius:10px;font-size:11px;font-weight:700;text-align:center}.story-line{opacity:0;transform:translateY(10px);transition:all .3s ease}.story-line.fade-in-line{opacity:1;transform:translateY(0)}.ai-summary-delayed{text-align:center;padding:30px;color:var(--text-light)}.ai-summary-delayed button{margin-top:15px}.story-title-display{text-align:center;font-size:20px;font-weight:700;color:var(--primary-color);margin-bottom:15px;padding:12px 20px;background:linear-gradient(135deg,#667eea14,#764ba214);border-radius:10px;border-left:4px solid var(--primary-color)}#full-story-text{background:#fff;padding:20px;border-radius:10px;border:1px solid rgba(102,126,234,.15);line-height:2}#full-story-text p{font-size:16px;margin-bottom:12px}.skeleton-loading{padding:20px;background:#fff;border-radius:10px;margin:0;border:1px solid rgba(102,126,234,.15)}.skeleton-header{height:24px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:6px;margin-bottom:12px}.skeleton-line{height:16px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px;margin-bottom:8px}.skeleton-line.short{width:60%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.screen-title{font-size:26px;font-weight:700;color:var(--primary-color);margin-bottom:25px;text-align:center}@media(max-width:768px){.stats-grid,.timing-analysis{grid-template-columns:1fr;gap:10px}.stat-card .stat-label{font-size:11px}.stat-card .stat-value{font-size:28px}.section-heading{font-size:18px}.congratulations-container{padding:40px 30px;margin:20px}.celebration-emoji{font-size:80px}.celebration-title{font-size:24px}.quick-stats{flex-direction:row;gap:15px}.quick-stat .stat-number{font-size:32px}}@media(max-width:768px){body{display:block;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;max-width:100vw}.mobile-header{display:flex}.sidebar{position:fixed;left:-280px;top:0;width:280px;height:100vh;transition:left .3s ease;z-index:1060}.sidebar.mobile-open{left:0}.sidebar-close-btn{display:flex}.main-content{margin-left:0;margin-top:60px;height:calc(100vh - 60px);background:#fff;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;max-width:100vw}.container{height:100%;min-height:calc(100vh - 60px);overflow-y:visible;overflow-x:hidden;max-width:100%}#start-screen.active{height:100%}#start-screen .content{padding:20px;min-height:calc(100vh - 60px);overflow-x:hidden;max-width:100%}.ai-recommendation-explanation{padding:16px;margin-bottom:16px}.explanation-header .icon{font-size:1.6em}.explanation-header h3{font-size:1.2em}.explanation-item{padding:10px;gap:10px}.explanation-item .item-icon{font-size:1.3em}.explanation-item .item-text{font-size:.9em}.explanation-footer{font-size:.85em}#start-screen .theme-selector h2,#start-screen .level-selector h2{font-size:1.2em}#game-screen.active{display:flex;flex-direction:column;height:auto;min-height:calc(100vh - 60px);overflow:visible}#game-screen .content{overflow-y:visible;overflow-x:visible;padding:20px;flex:1;display:flex;flex-direction:column;gap:20px;max-width:100%}#game-screen .story-display{flex:0 1 auto;max-height:350px;min-height:150px;margin-bottom:0;padding:15px;-webkit-overflow-scrolling:touch;overflow-x:visible;max-width:100%;word-wrap:break-word}.progress-circle{position:absolute;right:10px;bottom:10px;width:60px;height:60px}.progress-circle svg{width:60px;height:60px}.progress-text{font-size:.85em}.current-turn{font-size:1.3em}.turn-separator,.max-turn{font-size:.8em}#game-screen .word-choices-section{flex-shrink:0;margin-bottom:0;max-width:100%;padding-top:8px;overflow:visible}#game-screen .user-input-section{flex-shrink:0;padding:20px;max-width:100%;overflow:visible}#settings-screen .content{padding:20px;overflow-x:hidden;max-width:100%}.mobile-overlay{display:none}.mobile-overlay.active{display:block}.level-options{grid-template-columns:1fr}.word-choices{grid-template-columns:repeat(2,1fr);gap:10px}.input-group{flex-direction:column;gap:10px}.input-with-toggle input{font-size:16px;padding:15px 145px 15px 15px;max-width:100%;box-sizing:border-box}.input-toggle-container{right:8px;padding:3px 8px 3px 10px}.toggle-label{font-size:.8em}.inline-toggle-switch{width:40px;height:20px}.inline-toggle-slider:before{height:14px;width:14px}.inline-toggle-switch input:checked+.inline-toggle-slider:before{transform:translate(20px)}.input-group button{width:100%;padding:15px;font-size:1.1em}.input-source-hint{padding-left:4px;text-align:center}.selected-word-display{font-size:1em;padding:12px;white-space:normal;overflow-x:hidden;line-height:1.6;max-width:100%;word-wrap:break-word}.selected-word-display .word-separator{margin:0 6px}#finish-screen .header{padding:30px 20px;overflow-x:hidden;max-width:100%}#finish-screen .header h1{font-size:1.8em}#finish-screen .header p{font-size:.95em}#finish-screen .content{padding:20px;overflow-x:hidden;max-width:100%}.celebration{font-size:4em;margin-bottom:15px}.finish-content h2{font-size:1.8em;margin-bottom:20px}.story-stats{grid-template-columns:1fr;gap:15px;margin:20px 0}.stat-card{padding:20px}.full-story-container{padding:20px;max-height:300px;margin:20px 0}.full-story-container h3{font-size:1.3em;margin-bottom:15px}.full-story-text{font-size:1.1em;line-height:1.8}.action-buttons{flex-direction:column;gap:12px;margin-top:20px}.action-buttons button{width:100%;padding:15px;font-size:1.1em}.user-stats{grid-template-columns:repeat(3,1fr)}.sidebar-header{padding:20px}.app-title-section{margin-bottom:20px;padding-bottom:15px}.app-title{font-size:1.4em}.app-subtitle{font-size:.85em}.sidebar-menu{padding:10px 0}.toast{top:70px;max-width:90%;padding:12px 20px;font-size:.95em}.vocab-mode-options{grid-template-columns:1fr}.message-label{width:70px;font-size:.8em}.message-label .emoji{font-size:1.5em}.message-label .name{font-size:.75em}.message-content{font-size:1.1em;line-height:1.8;padding-left:10px;max-width:100%;word-wrap:break-word;overflow-wrap:break-word}.message{gap:10px;margin-bottom:15px;padding:12px;max-width:100%;overflow-x:hidden}.feedback-section{margin-bottom:20px}.feedback-message{padding:15px;font-size:.95em}.feedback-score{padding:12px}.score-number{font-size:1.8em}.score-label{font-size:.85em}.score-comment{font-size:.95em}.optimized-sentence-container{flex-direction:column;align-items:stretch;gap:10px;padding:12px}.optimized-sentence-text{font-size:1em}.apply-optimized-btn{width:100%;padding:12px;font-size:1em}.word-btn{padding:15px 10px;font-size:1.1em;min-height:50px}.theme-btn{padding:15px;font-size:1em}.theme-btn .emoji{font-size:1.8em;margin-bottom:5px}.difficulty-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.level-card{padding:15px;margin-bottom:10px}.level-name{font-size:1.2em}.level-desc{font-size:.9em}#wordlist-hierarchy-section>div:first-child{flex-direction:column!important;align-items:stretch!important;gap:12px!important}#hierarchy-title{font-size:1.2em!important}#current-wordlist-indicator{width:100%!important;justify-content:center!important;padding:10px 12px!important}.loading{padding:30px 20px}.loading-text{font-size:1em}.modal-content{margin:20px;max-height:calc(100vh - 80px);border-radius:15px}.modal-body{padding:20px}.modal-footer{padding:14px 20px}.modal-close{top:15px;right:15px;width:35px;height:35px;min-width:35px;min-height:35px;font-size:1.3em}.word-detail-header{margin-bottom:16px;padding-bottom:12px}.word-detail-header h2{font-size:2em}.word-detail-header .pinyin{font-size:1.2em}.word-detail-section{margin-bottom:14px}.word-detail-section h3{font-size:1em;margin-bottom:8px}.word-detail-section .content{font-size:1em;padding:12px 14px}.part-of-speech{font-size:.75em;padding:3px 10px;margin-right:8px;margin-bottom:6px}.definition-text-content{font-size:.95em}.definition-item{margin-bottom:10px;padding-bottom:10px}.related-words{gap:6px}.related-word-tag{padding:5px 11px;font-size:.9em}.example-item{font-size:.95em;padding:6px 0}.story-title-edit{flex-direction:column;gap:12px;max-width:100%}.story-title-edit input{font-size:1.1em;padding:10px 15px}.btn-title-confirm{width:100%;height:45px;border-radius:10px;font-size:1.2em}.edit-hint{font-size:.85em;margin-bottom:15px}#my-stories-screen .content{padding:20px;overflow-x:hidden;max-width:100%}#wordbook-screen .content{padding:20px;justify-content:flex-start;overflow-y:auto;overflow-x:hidden;max-width:100%}.stories-header h1{font-size:2em}.stories-subtitle{font-size:1em}.stories-stats-overview{grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:30px}.stat-card-mini{flex-direction:column;text-align:center;padding:15px;gap:10px}.stat-icon{font-size:2em}.stat-number-mini{font-size:1.8em}.stat-label-mini{font-size:.8em}.section-header{flex-direction:column;align-items:flex-start;gap:8px}.section-header h2{font-size:1.3em}.section-count{font-size:.9em}.story-cards-container{grid-template-columns:1fr;gap:15px}.story-card{padding:15px}.story-card-header{flex-direction:column;align-items:stretch;gap:12px}.story-card-title{font-size:1.2em}.btn-rename-inline{font-size:.85em}.story-status-badge{align-self:flex-start}.story-card-meta{gap:8px}.meta-item{font-size:.8em;padding:3px 8px}.story-card-preview{font-size:.9em;-webkit-line-clamp:2}.story-card-footer{flex-direction:column;align-items:stretch;gap:12px}.story-time{text-align:center}.story-actions{justify-content:space-between;flex-wrap:wrap}.btn-action{flex:1;min-width:80px;padding:8px 12px;font-size:.9em}.empty-state{padding:40px 15px}.empty-icon{font-size:3em}.empty-state p{font-size:1.1em}.story-detail-header-full h2{font-size:1.5em}.story-meta{flex-wrap:wrap;gap:8px}.story-theme-badge,.story-level-badge{font-size:.85em;padding:5px 12px}.story-timestamps{font-size:.85em}.story-detail-content h3,.story-detail-words h3{font-size:1.1em}.story-full-text{font-size:1em;padding:15px;max-height:300px}.words-tags{gap:6px}.word-tag{font-size:.9em;padding:6px 12px}.wordlist-selector-header{padding:14px 16px}.wordlist-icon{font-size:1.2em}.wordlist-name{font-size:1em}.wordlist-dropdown{max-height:400px}.wordlist-option{padding:12px 16px}.wordlist-name-text{font-size:.95em}.wordlist-desc,.wordlist-count{font-size:.8em}.wordlist-delete-btn{padding:5px 10px;font-size:.8em}.wordlist-group-label{padding:10px 16px 6px;font-size:.8em}}body{font-family:Noto Sans TC,PingFang TC,Microsoft JhengHei,system-ui,sans-serif;color:var(--ink);background:var(--canvas)}body *{background-image:none!important;text-shadow:none!important}h1,h2,h3,.app-title,.login-title,.story-card-title,.story-title-display,.story-full-text,#full-story-text{font-family:"Noto Serif TC",Songti TC,serif}.fa-solid,.fa-regular{width:1.15em;text-align:center;line-height:1}button,input,select,textarea{font:inherit}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(47,102,85,.28);outline-offset:3px}.main-content,.container{background:var(--canvas)}.content{color:var(--ink)}.btn-primary,.login-btn-google,.btn-title-confirm,.celebration-btn,.progress-bar-fill{background:var(--brand)!important;color:var(--surface)!important;border-color:var(--brand)!important;border-radius:10px!important;box-shadow:var(--shadow-soft)!important}.btn-primary:hover,.login-btn-google:hover,.btn-title-confirm:hover,.celebration-btn:hover{background:var(--brand-hover)!important;border-color:var(--brand-hover)!important;transform:translateY(-1px)}.btn-secondary,.btn-action,.modal-btn,.btn-download-template{background:var(--surface)!important;color:var(--brand)!important;border-color:var(--line-strong)!important;border-radius:10px!important;box-shadow:none!important}.btn-secondary:hover,.btn-action:hover,.modal-btn:hover,.btn-download-template:hover{background:var(--brand-soft)!important;border-color:var(--brand)!important;color:var(--brand-hover)!important}button:disabled,.disabled{opacity:.46!important;box-shadow:none!important}.login-screen{background:var(--canvas)!important}.login-container{background:var(--surface)!important;border:1px solid var(--line);border-radius:24px!important;box-shadow:0 24px 70px #26302c24!important}.logo-icon{color:var(--brand)!important;display:inline-flex;align-items:center;justify-content:center;gap:10px}.logo-icon .fa-pen-nib{color:var(--accent);font-size:.72em}.login-title,.app-title,.mobile-header-title{color:var(--brand)!important;letter-spacing:.04em}.login-subtitle,.app-subtitle,.login-footer{color:var(--ink-muted)!important}.login-info{background:var(--brand-soft)!important;border:1px solid rgba(47,102,85,.13);border-radius:14px!important}.info-icon,.item-icon,.mode-card-icon,.empty-icon,.stat-icon,.celebration-emoji{color:var(--brand)!important}.login-btn-google .btn-main,.login-btn-google .btn-hint{color:var(--surface)!important}#guest-login-prompt{background:var(--brand-soft)!important;border:1px solid rgba(47,102,85,.18)}#guest-login-prompt p{color:var(--brand-hover)!important}#guest-login-prompt button{color:var(--brand)!important;border:1px solid var(--line)!important}.sidebar{background:var(--brand)!important;box-shadow:8px 0 30px #26302c1f!important}.sidebar-header,.sidebar-footer,.app-title-section{border-color:#fffcf62e!important}.sidebar .app-title,.sidebar .app-subtitle,.sidebar .menu-item,.sidebar .user-name,.sidebar .stat-value,.sidebar .stat-label{color:var(--surface)!important}.user-avatar,.mobile-user-avatar{background:var(--gold-soft)!important;color:var(--brand)!important;border-color:#fffcf6a8!important;box-shadow:none!important}.user-stats,.stat-item{border-radius:10px!important}.menu-item{border-left:0!important;border-radius:0 10px 10px 0;margin-right:12px}.menu-item:hover,.menu-item.active{background:#fffcf624!important;transform:none!important}.menu-item.active{box-shadow:inset 3px 0 0 var(--gold)}.menu-item .badge{background:var(--gold-soft)!important;color:var(--brand-hover)!important}.menu-item .coming-soon{background:#fffcf624!important}.mobile-header{background:var(--brand)!important;box-shadow:0 2px 14px #26302c1f!important}.mobile-header-title{color:var(--surface)!important}.ai-recommendation-explanation,.settings-section,.stories-section,.wordbook-list-container,.report-section,.story-summary-container,.current-mode-card{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:var(--shadow-soft)!important}.explanation-header{border-color:var(--line)!important}.explanation-header .icon,.explanation-header h3,.section-title,.stories-header h1,.wordbook-header h1,.screen-title,.section-heading{color:var(--brand)!important}.explanation-item{background:var(--surface-muted)!important;border:1px solid transparent;border-radius:10px!important;box-shadow:none!important}.explanation-item:hover{border-color:#2f665533;transform:none!important}.explanation-footer,.section-desc,.stories-subtitle,.wordbook-subtitle{color:var(--ink-muted)!important;border-color:var(--line)!important}.theme-btn,.difficulty-card,.vocab-mode-card,.grade-option-btn,.level-3-card{background:var(--surface)!important;color:var(--ink)!important;border:2px solid var(--line)!important;border-radius:12px!important;box-shadow:none!important}.theme-btn:hover,.difficulty-card:hover,.vocab-mode-card:hover,.grade-option-btn:hover,.level-3-card:hover{border-color:var(--brand)!important;background:var(--brand-soft)!important;transform:translateY(-2px);box-shadow:var(--shadow-soft)!important}.theme-btn.selected,.difficulty-card.selected,.vocab-mode-card.selected,.grade-option-btn.selected,.level-3-card.selected{background:var(--brand)!important;color:var(--surface)!important;border-color:var(--brand)!important;box-shadow:0 0 0 3px #2f665524!important}.theme-btn .emoji,.theme-btn .theme-icon{color:var(--accent)}.theme-btn.selected .emoji,.theme-btn.selected .theme-icon{color:var(--surface)}.header,.wordlist-selector-header,.grade-selector-header{background:var(--brand)!important;color:var(--surface)!important}.level-card.selected,.wordlist-option.active,.wordlist-option:hover,.wordlist-add-custom,.wordlist-add-custom:hover{background:var(--brand-soft)!important;border-color:var(--brand)!important}.level-selection-info{background:var(--brand-soft)!important;color:var(--brand-hover)!important}.wordlist-divider{background:var(--line)!important}.inline-toggle-switch input:checked+.inline-toggle-slider{background:var(--brand)!important}.part-of-speech{background:var(--brand)!important;color:var(--surface)!important}.story-display{background:var(--surface)!important;border:1px solid var(--line);border-radius:14px!important}.message-label.ai,.message-label.user{color:var(--brand)!important}.message-label .emoji,.message-label .speaker-icon{color:var(--brand);font-size:1.45em}.message-content{background:var(--surface-muted);border:1px solid rgba(47,102,85,.12)!important;border-radius:10px;padding:12px 16px!important}.message.user .message-content{background:var(--accent-soft);border-color:#c65f4329!important}.word-btn{background:var(--surface)!important;color:var(--ink)!important;border:2px solid var(--line)!important;border-radius:12px!important;box-shadow:none!important}.word-btn:hover{border-color:var(--brand)!important;background:var(--brand-soft)!important;box-shadow:var(--shadow-soft)!important}.word-btn.selected{background:var(--brand)!important;color:var(--surface)!important;border-color:var(--brand)!important;box-shadow:0 0 0 3px #2f665524!important}.user-input-section{background:var(--gold-soft)!important;border:1px solid rgba(183,138,54,.24);border-radius:14px!important}.selected-word-display,.input-with-toggle input,.setting-select,.form-input,.form-textarea,.story-title-edit input,.story-naming input{background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line-strong)!important;border-radius:10px!important;box-shadow:none!important}.selected-word-display{border-left:1px solid var(--line-strong)!important}.input-with-toggle input:focus,.setting-select:focus,.form-input:focus,.form-textarea:focus,.story-title-edit input:focus,.story-naming input:focus{border-color:var(--brand)!important;box-shadow:0 0 0 3px #2f66551f!important}.inline-toggle-slider,.setting-checkbox:checked,.progress-bar{color:var(--brand)!important;stroke:var(--brand)!important}.clickable-word,.highlighted-word{color:var(--brand)!important;background:var(--brand-soft)!important;border-color:var(--brand)!important}.highlighted-word{color:var(--accent-hover)!important;background:var(--accent-soft)!important;border-color:var(--accent)!important}.feedback-message{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:var(--shadow-soft)!important}.stage-hint-container.hint-info .stage-hint-text,.stage-hint-container.hint-warning .stage-hint-text,.stage-hint-container.hint-final .stage-hint-text{border-radius:10px!important;box-shadow:var(--shadow-soft)!important}.stage-hint-container.hint-info .stage-hint-text{background:var(--brand)!important}.stage-hint-container.hint-warning .stage-hint-text{background:var(--gold)!important}.stage-hint-container.hint-final .stage-hint-text{background:var(--accent)!important}.feedback-score,.optimized-sentence-container{background:var(--surface-muted)!important;border:1px solid rgba(47,102,85,.15)!important;border-radius:10px!important;box-shadow:none!important}.optimized-sentence-container{background:var(--gold-soft)!important;border-color:#b78a3642!important}.apply-optimized-btn{background:var(--brand)!important;color:var(--surface)!important;border-radius:9px!important;box-shadow:none!important}.stat-card,.stat-card-mini,.story-card,.wordbook-card,.timing-item,.quick-stat{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:var(--shadow-soft)!important}.stat-card.highlighted{background:var(--accent-soft)!important;border-color:#c65f4347!important}.timing-item.fastest{background:var(--success-soft)!important}.timing-item.slowest{background:var(--gold-soft)!important}.timing-bar{background:var(--brand)!important}.story-card:hover,.wordbook-card:hover,.stat-card-mini:hover{border-color:var(--brand)!important;transform:translateY(-2px)}.story-card.completed,.story-card.in-progress{border-color:var(--line)!important}.story-status-badge.completed{background:var(--success-soft)!important;color:var(--success)!important}.story-status-badge.in-progress{background:var(--gold-soft)!important;color:#755916!important}.wordbook-card-word,.story-card-title,.stat-number-mini,.stat-value,.score-number{color:var(--brand)!important}.word-tag,.related-word-tag,.story-theme-badge,.story-level-badge,.level-badge,.user-grade-badge{background:var(--brand-soft)!important;color:var(--brand-hover)!important;border-color:#2f66552e!important}.btn-delete,.wordbook-card-remove,.wordlist-delete-btn{color:var(--danger)!important}.btn-delete:hover,.wordbook-card-remove:hover,.wordlist-delete-btn:hover{background:var(--danger-soft)!important;border-color:var(--danger)!important}.empty-state,.info-box,.about-info,.upload-zone,.grade-selector-info,.story-full-text{background:var(--surface-muted)!important;border-color:var(--line)!important;border-radius:12px!important}.upload-zone:hover{background:var(--brand-soft)!important;border-color:var(--brand)!important}.modal-content,.level-modal,.grade-selector-container,.congratulations-container,.vocab-mode-modal-content{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:0 22px 64px #26302c2e!important}.modal-overlay,.level-modal-overlay,.grade-selector-overlay{background:#26302c8f!important}.modal-overlay.celebration{background:#26302c9e!important}.level-modal-header{background:var(--surface-muted)!important;border-color:var(--line)!important}.use-whole-unit-btn,.use-whole-unit-btn.selected{background:var(--brand)!important;color:var(--surface)!important;border-color:var(--brand)!important;border-radius:10px!important;box-shadow:none!important}.use-whole-unit-btn:hover{background:var(--brand-hover)!important}.explanation-header h3,.celebration-title,.quick-stat .stat-number,.story-summary-header h3,.level-modal-title{color:var(--brand)!important;-webkit-text-fill-color:var(--brand)!important;background-clip:border-box!important;-webkit-background-clip:border-box!important}.skeleton-header,.skeleton-line{background:#e7e2d7!important}.modal-close,.level-modal-close,.sidebar-close-btn{background:var(--surface-muted)!important;color:var(--ink-muted)!important;border-radius:9px!important}.toast{background:var(--ink)!important;color:var(--surface)!important;border:1px solid rgba(255,252,246,.18);border-radius:10px!important;box-shadow:0 12px 34px #26302c33!important;display:flex;align-items:center;gap:10px}.toast .toast-icon{color:var(--gold)}.toast[data-tone=success] .toast-icon{color:#8fc4a6}.toast[data-tone=error] .toast-icon{color:#e7a39d}.toast[data-tone=warning] .toast-icon{color:#e4c176}.main-content:before,.login-screen:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")!important}.main-content>*,.login-screen>*{position:relative;z-index:1}h1,h2,h3{color:var(--ink)}.section-title,.stories-header h1,.wordbook-header h1,.screen-title,.section-heading,.explanation-header h3{color:var(--ink)!important}.section-title .fa-solid,.stories-header .fa-solid,.wordbook-header .fa-solid,.screen-title .fa-solid,.section-heading .fa-solid,.explanation-header .fa-solid{color:var(--brand)}.screen-title{display:inline-block;align-self:center;padding:8px 16px;background:var(--gold-soft)!important;border:2px solid var(--ink);border-radius:14px 10px;box-shadow:var(--shadow-hard-small);transform:rotate(-.5deg)}.btn-primary,.login-btn-google,.btn-title-confirm,.celebration-btn,.apply-optimized-btn,.use-whole-unit-btn,.use-whole-unit-btn.selected{background:var(--brand)!important;color:var(--surface)!important;border:2px solid var(--ink)!important;border-radius:12px 9px!important;box-shadow:3px 3px 0 var(--ink)!important}.btn-primary:hover,.login-btn-google:hover,.btn-title-confirm:hover,.celebration-btn:hover,.apply-optimized-btn:hover,.use-whole-unit-btn:hover{background:var(--brand-hover)!important;transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)!important}.btn-primary:active,.login-btn-google:active,.btn-title-confirm:active,.celebration-btn:active,.apply-optimized-btn:active,.use-whole-unit-btn:active{transform:translate(3px,3px);box-shadow:none!important}.btn-secondary,.btn-action,.modal-btn,.btn-download-template{color:var(--secondary)!important;border:2px solid var(--ink)!important;border-radius:10px 13px!important;box-shadow:var(--shadow-hard-small)!important}.btn-secondary:hover,.btn-action:hover,.modal-btn:hover,.btn-download-template:hover{background:var(--secondary-soft)!important;border-color:var(--ink)!important;color:var(--secondary-hover)!important;transform:translate(1px,1px);box-shadow:1px 1px #d8cdbb!important}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline-color:#2a7f8457}.login-container{border:2px solid var(--ink)!important;border-radius:26px 18px!important;box-shadow:8px 8px #e7c8b8!important}.logo-icon{color:var(--ink)!important;gap:12px}.logo-icon i{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border:2px solid var(--ink);border-radius:50% 46% 52% 48%;box-shadow:3px 3px 0 var(--ink)}.logo-icon .fa-book-open{color:var(--surface);background:var(--secondary);transform:rotate(-3deg)}.logo-icon .fa-pen-nib{color:var(--surface);background:var(--brand);font-size:.72em;transform:rotate(4deg)}.login-title,.app-title{color:var(--brand)!important}.login-info{background:var(--gold-soft)!important;border:2px solid var(--ink)!important;border-radius:14px 10px!important;box-shadow:var(--shadow-hard-small)}.login-info .info-item:nth-child(1) .info-icon{color:var(--brand)!important}.login-info .info-item:nth-child(2) .info-icon{color:var(--secondary)!important}.login-info .info-item:nth-child(3) .info-icon{color:var(--magic)!important}.sidebar{color:var(--ink)!important;background:#e8f1ef!important;border-right:2px solid var(--ink);box-shadow:4px 0 #cfddd8!important}.sidebar-header,.sidebar-footer,.app-title-section{background:transparent!important;border-color:#35405233!important}.sidebar .app-title{color:var(--brand)!important}.sidebar .app-subtitle,.sidebar .menu-item,.sidebar .user-name,.sidebar .stat-value,.sidebar .stat-label,.sidebar .menu-section-title{color:var(--ink)!important}.sidebar .menu-section-title{opacity:.66}.sidebar .stat-item{background:var(--surface)!important;border:1px solid var(--ink);box-shadow:2px 2px #c9d7d2}.user-avatar,.mobile-user-avatar{color:var(--surface)!important;background:var(--magic)!important;border:2px solid var(--ink)!important;box-shadow:var(--shadow-hard-small)!important}.menu-item{margin:3px 12px 3px 8px;border:2px solid transparent!important;border-radius:10px 14px}.menu-item:hover{color:var(--secondary-hover)!important;background:var(--secondary-soft)!important;border-color:var(--ink)!important}.menu-item.active{color:var(--ink)!important;background:var(--surface)!important;border-color:var(--ink)!important;box-shadow:3px 3px 0 var(--gold)!important}.menu-item .badge{color:var(--ink)!important;background:var(--gold)!important;border:1px solid var(--ink)}.menu-item .coming-soon{color:var(--ink-muted)!important;background:#fffdf8b3!important;border:1px solid var(--line-strong)}.mobile-header{background:var(--secondary)!important;border-bottom:2px solid var(--ink);box-shadow:0 3px #b9d3d2!important}.ai-recommendation-explanation,.settings-section,.stories-section,.wordbook-list-container,.report-section,.story-summary-container,.current-mode-card{border:2px solid var(--ink)!important;border-radius:16px 11px!important;box-shadow:var(--shadow-hard)!important}.explanation-item{background:var(--surface)!important;border:1px solid var(--line-strong);border-radius:10px 14px!important}.explanation-item:nth-child(1) .item-icon{color:var(--brand)!important}.explanation-item:nth-child(2) .item-icon{color:var(--secondary)!important}.explanation-item:nth-child(3) .item-icon{color:var(--magic)!important}.theme-btn{--theme-color: var(--secondary);border:2px solid var(--ink)!important;border-radius:12px 17px 11px 15px!important;box-shadow:var(--shadow-hard)!important;transform:rotate(-.6deg)}.theme-btn:nth-child(2n){transform:rotate(.6deg)}.theme-btn:hover{background:var(--surface)!important;border-color:var(--ink)!important;transform:translate(-1px,-2px) rotate(0);box-shadow:6px 6px #d8cdbb!important}.theme-btn.selected{color:var(--ink)!important;background:var(--gold-soft)!important;border-color:var(--ink)!important;box-shadow:4px 4px 0 var(--gold)!important;transform:rotate(0)}.theme-btn .emoji,.theme-btn .theme-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0 auto 9px;color:var(--surface)!important;background:var(--theme-color)!important;border:2px solid var(--ink);border-radius:50% 44% 52% 46%;box-shadow:2px 2px 0 var(--ink)}.theme-btn.selected .emoji,.theme-btn.selected .theme-icon{color:var(--surface)!important}.theme-btn[data-theme=cute_animals],.theme-btn[data-theme=friendship],.theme-btn[data-theme=youth_literature],.theme-btn[data-theme=human_nature]{--theme-color: var(--brand)}.theme-btn[data-theme=school_life],.theme-btn[data-theme=school_adventure],.theme-btn[data-theme=science_discovery],.theme-btn[data-theme=future_tech],.theme-btn[data-theme=urban_reality],.theme-btn[data-theme=scifi],.theme-btn[data-theme=campus]{--theme-color: var(--secondary)}.theme-btn[data-theme=toy_world],.theme-btn[data-theme=fantasy_adventure],.theme-btn[data-theme=fantasy_dream],.theme-btn[data-theme=philosophical],.theme-btn[data-theme=mystery],.theme-btn[data-theme=experimental],.theme-btn[data-theme=fantasy]{--theme-color: var(--magic)}.theme-btn[data-theme=family_daily],.theme-btn[data-theme=escape_room],.theme-btn[data-theme=historical]{--theme-color: var(--gold)}.theme-btn[data-theme=natural_exploration],.theme-btn[data-theme=growth_story],.theme-btn[data-theme=poetic],.theme-btn[data-theme=nature]{--theme-color: var(--success)}.difficulty-card,.vocab-mode-card,.grade-option-btn,.level-card,.level-3-card{border:2px solid var(--ink)!important;border-radius:11px 15px!important;box-shadow:var(--shadow-hard-small)!important}.difficulty-card.selected,.vocab-mode-card.selected,.grade-option-btn.selected,.level-card.selected,.level-3-card.selected{color:var(--ink)!important;background:var(--secondary-soft)!important;border-color:var(--ink)!important;box-shadow:3px 3px 0 var(--secondary)!important}.story-display{background:#fff9ee!important;border:2px solid var(--ink)!important;border-radius:15px 10px!important;box-shadow:inset 0 0 0 5px #e4b84b14}.message-label.ai{color:var(--magic)!important}.message-label.user{color:var(--brand)!important}.message-label .speaker-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;color:var(--surface)!important;border:2px solid var(--ink);border-radius:50% 44% 52% 46%;box-shadow:var(--shadow-hard-small)}.message-label.ai .speaker-icon{background:var(--magic)!important}.message-label.user .speaker-icon{background:var(--brand)!important}.message-content{color:var(--ink)!important;border:2px solid var(--ink)!important;border-radius:10px 15px 11px 14px;box-shadow:var(--shadow-hard-small)}.message.ai .message-content{background:var(--magic-soft)!important}.message.user .message-content{background:var(--brand-soft)!important}.progress-circle{background:var(--surface)!important;border:2px solid var(--ink);border-radius:50%;box-shadow:var(--shadow-hard-small)}.progress-bar{stroke:var(--secondary)!important}.word-btn{border:2px solid var(--ink)!important;border-radius:14px 9px!important;box-shadow:var(--shadow-hard)!important}.word-btn:nth-child(2n){border-radius:9px 14px!important}.word-btn:hover{background:var(--secondary-soft)!important;border-color:var(--ink)!important;transform:translate(-1px,-2px);box-shadow:6px 6px #d8cdbb!important}.word-btn.selected{color:var(--ink)!important;background:var(--gold)!important;border-color:var(--ink)!important;box-shadow:4px 4px 0 var(--ink)!important}.word-btn.selected:after{content:"";position:absolute;top:7px;right:8px;color:var(--secondary);font-family:"Font Awesome 6 Free";font-size:1rem;font-weight:900}.word-btn.selected .word-meta{color:var(--ink)!important}.user-input-section{background:var(--gold-soft)!important;border:2px solid var(--ink)!important;border-radius:16px 11px!important;box-shadow:var(--shadow-hard-small)}.selected-word-display,.input-with-toggle input,.setting-select,.form-input,.form-textarea,.story-title-edit input,.story-naming input{border:2px solid var(--ink)!important;border-radius:10px 13px!important}.input-with-toggle input:focus,.setting-select:focus,.form-input:focus,.form-textarea:focus,.story-title-edit input:focus,.story-naming input:focus{border-color:var(--secondary)!important;box-shadow:0 0 0 3px #2a7f8429!important}.inline-toggle-switch input:checked+.inline-toggle-slider,.progress-bar-fill{background:var(--secondary)!important}.clickable-word{color:var(--secondary-hover)!important;background:var(--secondary-soft)!important;border-color:var(--secondary)!important}.highlighted-word{color:var(--brand-hover)!important;background:var(--brand-soft)!important;border-color:var(--brand)!important}.feedback-message{border:2px solid var(--ink)!important;border-radius:15px 10px!important;box-shadow:var(--shadow-hard)!important}.feedback-score{background:var(--magic-soft)!important;border:2px solid var(--ink)!important}.optimized-sentence-container{background:var(--gold-soft)!important;border:2px solid var(--ink)!important}.score-number{color:var(--magic)!important}.story-card,.wordbook-card{border:2px solid var(--ink)!important;border-radius:14px 10px!important;box-shadow:var(--shadow-hard)!important}.story-card:nth-child(2n),.wordbook-card:nth-child(2n){border-radius:10px 14px!important}.story-card:hover,.wordbook-card:hover{border-color:var(--ink)!important;transform:translate(-1px,-2px);box-shadow:6px 6px #d8cdbb!important}.stat-card,.stat-card-mini,.timing-item,.quick-stat{border:2px solid var(--ink)!important;border-radius:12px 9px!important;box-shadow:var(--shadow-hard-small)!important}.stats-grid .stat-card:nth-child(1),.stories-stats-overview .stat-card-mini:nth-child(1){background:var(--secondary-soft)!important}.stats-grid .stat-card:nth-child(2),.stories-stats-overview .stat-card-mini:nth-child(2){background:var(--gold-soft)!important}.stats-grid .stat-card:nth-child(3),.stories-stats-overview .stat-card-mini:nth-child(3){background:var(--magic-soft)!important}.stories-stats-overview .stat-card-mini:nth-child(4){background:var(--success-soft)!important}.stat-icon,.empty-icon,.celebration-emoji{color:var(--secondary)!important}.stat-card.highlighted{background:var(--magic-soft)!important;border-color:var(--ink)!important}.wordbook-card-word,.story-card-title,.stat-number-mini,.stat-value{color:var(--secondary)!important}.story-status-badge.completed{color:var(--ink)!important;background:var(--success)!important;border:1px solid var(--ink)}.story-status-badge.in-progress{color:var(--ink)!important;background:var(--gold)!important;border:1px solid var(--ink)}.word-tag,.related-word-tag,.story-theme-badge,.story-level-badge,.level-badge,.user-grade-badge{color:var(--ink)!important;background:var(--secondary-soft)!important;border:1px solid var(--ink)!important;border-radius:8px 6px!important}.modal-content,.level-modal,.grade-selector-container,.congratulations-container,.vocab-mode-modal-content{border:2px solid var(--ink)!important;border-radius:18px 12px!important;box-shadow:8px 8px #35405257!important}.modal-close,.level-modal-close,.sidebar-close-btn{color:var(--ink)!important;background:var(--surface)!important;border:2px solid var(--ink)!important;border-radius:50%!important;box-shadow:var(--shadow-hard-small)}.celebration-emoji{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;color:var(--surface)!important;background:var(--success)!important;border:2px solid var(--ink);border-radius:50% 45% 52% 46%;box-shadow:4px 4px 0 var(--ink)}.toast{border:2px solid var(--ink);border-radius:11px 14px!important;box-shadow:4px 4px #35405261!important}.toast .toast-icon{color:var(--gold)!important}.toast[data-tone=success] .toast-icon{color:#94d0ad!important}.toast[data-tone=error] .toast-icon{color:#f0a196!important}@media(max-width:768px){.login-container{border-radius:20px 14px!important;box-shadow:5px 5px #e7c8b8!important}.message{gap:8px}.message-label{width:56px}.message-content{padding:10px 12px!important}.theme-btn,.theme-btn:nth-child(2n){transform:rotate(0);box-shadow:3px 3px #d8cdbb!important}.word-btn,.story-card,.wordbook-card,.ai-recommendation-explanation,.settings-section,.stories-section,.wordbook-list-container,.report-section,.story-summary-container{box-shadow:3px 3px #d8cdbb!important}.logo-icon i{width:48px;height:48px}}