:root{--primary-bg: #f3f7fe;--card-bg: #ffffff;--text-color: #334155;--heading-color: #1e293b;--border-color: #e2e8f0;--accent-color: #3b82f6;--accent-color-hover: #2563eb;--button-disabled-bg: #93c5fd;--focus-shadow-color: rgba(59, 130, 246, .4);--secondary-button-bg: #e0e7ff;--secondary-button-text: #4338ca;--secondary-button-hover-bg: #c7d2fe;--secondary-button-spinner: #4338ca;--tag-bg: #dbeafe;--tag-text: #1e40af;--generated-tag-bg: #60a5fa;--generated-tag-text: #ffffff;--copy-button-hover-bg: #f3f7fe;--copy-button-hover-border: #bfdbfe;--error-color: #dc2626;--error-bg: #fee2e2;--error-border: #fca5a5;--success-color: #16a34a;--shadow-color-sm: rgba(0, 0, 0, .05);--shadow-color-md1: rgba(0, 0, 0, .1);--shadow-color-md2: rgba(0, 0, 0, .1)}[data-theme=dark]{--primary-bg: #0f172a;--card-bg: #1e293b;--text-color: #cbd5e1;--heading-color: #f1f5f9;--border-color: #334155;--accent-color: #60a5fa;--accent-color-hover: #93c5fd;--button-disabled-bg: #334155;--focus-shadow-color: rgba(96, 165, 250, .4);--secondary-button-bg: #3730a3;--secondary-button-text: #e0e7ff;--secondary-button-hover-bg: #4338ca;--secondary-button-spinner: #e0e7ff;--tag-bg: #334155;--tag-text: #dbeafe;--generated-tag-bg: #3b82f6;--generated-tag-text: #ffffff;--copy-button-hover-bg: #334155;--copy-button-hover-border: #475569;--error-color: #fca5a5;--error-bg: #450a0a;--error-border: #991b1b;--success-color: #86efac;--shadow-color-sm: rgba(0, 0, 0, .15);--shadow-color-md1: rgba(0, 0, 0, .25);--shadow-color-md2: rgba(0, 0, 0, .15)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Poppins,sans-serif;background-color:var(--primary-bg);color:var(--text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .3s,color .3s;min-height:100vh}#root{width:100%;max-width:800px;margin:0 auto;padding:2rem 1rem}.app-container{display:flex;flex-direction:column;gap:1.5rem}.app-blurred{filter:blur(5px);transition:filter .3s ease-in-out;pointer-events:none;-webkit-user-select:none;user-select:none}.app-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.5rem}.title{font-size:1.8rem;color:var(--heading-color);font-weight:700;text-align:left;line-height:1.2}.header-right{display:flex;align-items:center;gap:1rem;flex-shrink:0}.user-email{font-size:.8rem;font-weight:500;background-color:var(--tag-bg);color:var(--tag-text);padding:.4rem .8rem;border-radius:6px;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.theme-toggle{background-color:transparent;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;width:40px;height:40px;display:flex;justify-content:center;align-items:center;color:var(--text-color);transition:background-color .2s,border-color .2s,color .2s;flex-shrink:0}.theme-toggle:hover{background-color:var(--card-bg);color:var(--accent-color)}.theme-toggle svg{width:22px;height:22px}.card{background-color:var(--card-bg);border-radius:12px;padding:2rem;box-shadow:0 4px 6px -1px var(--shadow-color-md1),0 2px 4px -2px var(--shadow-color-md2);animation:fadeIn .5s ease-out;border:1px solid var(--border-color);transition:background-color .3s,border-color .3s}.controls-card{padding:1rem 2rem 2rem;display:flex;flex-direction:column;gap:1.5rem}.mode-selector{display:flex;background-color:var(--primary-bg);padding:5px;border-radius:9px;border:1px solid var(--border-color);margin-bottom:.5rem}.mode-button{flex:1;padding:.5rem 1rem;border:none;background-color:transparent;color:var(--text-color);font-family:Poppins,sans-serif;font-weight:600;font-size:.9rem;border-radius:7px;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}.mode-button.active{background-color:var(--card-bg);color:var(--accent-color);box-shadow:0 2px 4px var(--shadow-color-sm)}.controls-wrapper{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;width:100%}.controls-wrapper.story-controls{flex-direction:column;align-items:stretch;gap:1.25rem}.control-group{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;flex:1;min-width:200px}.story-controls .control-group{min-width:240px}.control-group small{font-size:.75rem;color:var(--text-color);opacity:.8}.control-group small.error-text{color:var(--error-color);opacity:1;font-weight:500}.control-group label{font-weight:600;color:var(--heading-color);font-size:.9rem}.input-with-button{display:flex;gap:.5rem;width:100%}.input-with-button input{flex-grow:1}#scheme-select,#phase-select,#unit-select,#sound-input,#seed-words-input{width:100%;font-family:Poppins,sans-serif;padding:.6rem 1rem;border:1px solid var(--border-color);border-radius:8px;background-color:var(--card-bg);color:var(--text-color);font-size:1rem;font-weight:500;cursor:pointer;transition:border-color .2s,box-shadow .2s,background-color .2s,color .2s}#sound-input,#seed-words-input{cursor:text}#sound-input::placeholder,#seed-words-input::placeholder{color:#94a3b8;opacity:1}[data-theme=dark] #sound-input::placeholder,[data-theme=dark] #seed-words-input::placeholder{color:#64748b}#scheme-select:hover,#phase-select:hover,#unit-select:hover,#sound-input:hover,#seed-words-input:hover{border-color:var(--accent-color)}#scheme-select:focus,#phase-select:focus,#unit-select:focus,#sound-input:focus,#seed-words-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px var(--focus-shadow-color)}.unit-details-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding-bottom:1rem;margin-bottom:1.5rem;border-bottom:1px solid var(--border-color)}.unit-details-title-content{flex-grow:1}.unit-details-header h2{font-size:1.25rem;font-weight:600;color:var(--heading-color);margin-bottom:.5rem;padding-bottom:0;border-bottom:none}.unit-details-header .aim-description{margin-top:0}.unit-details-header .item-list.aim-tags{margin-top:0;margin-bottom:0}.aim-description{font-size:1rem;font-weight:500;color:var(--text-color)}.item-list.aim-tags{margin-top:0}.details-content{display:flex;flex-direction:column;gap:1.75rem;margin-top:1.5rem}.unit-detail-section:not(:last-child){padding-bottom:1rem;border-bottom:1px dashed var(--border-color)}.unit-detail-section h2{font-size:1.1rem;font-weight:600;color:var(--heading-color);margin-bottom:.75rem;padding-bottom:0;border-bottom:none}.unit-detail-section p{line-height:1.6}.grapheme-detail-block{padding:1.5rem;border:1px solid var(--border-color);border-radius:8px;background-color:var(--primary-bg)}.grapheme-detail-block:not(:last-child){margin-bottom:1rem}.grapheme-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.grapheme-header h2{margin-bottom:0;font-size:1.1rem;display:flex;align-items:center;gap:.75rem}.grapheme-highlight{display:inline-block;background-color:var(--accent-color);color:#fff;padding:.25rem .6rem;border-radius:6px;font-size:1.2rem;min-width:36px;text-align:center}.detail-item{margin-bottom:1rem;line-height:1.6}.detail-item:last-child{margin-bottom:0}.detail-item strong{display:block;margin-bottom:.5rem;color:var(--heading-color);font-weight:600;font-size:.9rem}.detail-item .item-list{margin-bottom:0;margin-top:.5rem}.detail-item p{margin-top:.25rem}.detail-item-group{display:flex;flex-direction:column;gap:1rem;margin-top:.5rem}.detail-item.nested{padding:1rem;background-color:var(--primary-bg);border:1px solid var(--border-color);border-radius:8px;margin-bottom:1rem}.detail-item.nested:last-child{margin-bottom:0}.detail-item.nested>strong{display:inline-block;background-color:var(--tag-bg);color:var(--tag-text);padding:.2rem .6rem;border-radius:6px;margin-bottom:.75rem}.example-words-container{margin-top:.75rem}.example-position-title{display:block;margin-bottom:.5rem;color:var(--text-color);font-weight:600;font-size:.85rem;text-transform:capitalize;opacity:.9}.item-list.small-tags .item-tag{font-size:.8rem;padding:.3rem .7rem}.phoneme-display{font-family:monospace;font-size:1.2rem;background-color:var(--primary-bg);padding:.25rem .5rem;border-radius:4px;display:inline-block}.grapheme-header+.phoneme-display{background-color:var(--card-bg)}.detail-list{list-style-type:none;padding-left:0;display:flex;flex-direction:column;gap:.5rem}.detail-list li{position:relative;padding-left:1.5rem;line-height:1.6}.detail-list li:before{content:"✓";position:absolute;left:0;color:var(--accent-color);font-weight:600}.small-list .detail-list{gap:.25rem}.small-list li{font-size:.9rem;line-height:1.5}.item-list{display:flex;flex-wrap:wrap;gap:.75rem}.item-list:not(:last-child){margin-bottom:1.5rem}.item-tag{background-color:var(--tag-bg);color:var(--tag-text);padding:.4rem .9rem;border-radius:9999px;font-weight:600;font-size:.875rem}.generation-section{display:flex;justify-content:center;margin-top:2rem;border-top:1px solid var(--border-color);padding-top:2rem}.generation-section.standalone{margin-top:0;border-top:none;padding-top:0}.generate-button{font-family:Poppins,sans-serif;background-color:var(--accent-color);color:#fff;border:none;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:background-color .2s,transform .2s,box-shadow .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.generate-button.secondary{background-color:var(--secondary-button-bg);color:var(--secondary-button-text)}.generate-button.secondary:hover:not(:disabled){background-color:var(--secondary-button-hover-bg)}.generate-button.secondary .spinner{border-color:var(--secondary-button-spinner);border-bottom-color:transparent}.generate-button svg{width:20px;height:20px}.generate-button:hover:not(:disabled){background-color:var(--accent-color-hover);transform:translateY(-2px);box-shadow:0 4px 6px -1px var(--shadow-color-md1),0 2px 4px -2px var(--shadow-color-md2)}.generate-button:disabled{background-color:var(--button-disabled-bg);cursor:not-allowed;opacity:.7}.secondary-button{font-family:Poppins,sans-serif;background-color:var(--secondary-button-bg);color:var(--secondary-button-text);border:1px solid transparent;padding:.5rem 1rem;font-size:.875rem;font-weight:600;border-radius:8px;cursor:pointer;transition:background-color .2s,box-shadow .2s;display:flex;align-items:center;justify-content:center;gap:.5rem;flex-shrink:0}.secondary-button:hover:not(:disabled){background-color:var(--secondary-button-hover-bg);box-shadow:0 2px 4px var(--shadow-color-sm)}.secondary-button:disabled{cursor:not-allowed;opacity:.6}.secondary-button svg{width:18px;height:18px}.secondary-button .spinner{width:18px;height:18px;border-width:2px;border-color:var(--secondary-button-spinner);border-bottom-color:transparent}.status-message{text-align:center;margin-top:1.5rem;font-weight:500;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:2rem}.status-message.inline .spinner{width:18px;height:18px;border-width:2px}.error-message{color:var(--error-color);background-color:var(--error-bg);border:1px solid var(--error-border);border-radius:8px}.word-bank-container{margin-top:1rem;padding:1rem;background-color:var(--primary-bg);border-radius:8px;animation:fadeIn .3s ease-out}.word-bank-container small{font-weight:600;font-size:.8rem;color:var(--heading-color);margin-bottom:.75rem}.word-bank-tag{cursor:pointer;border:1px solid transparent;transition:background-color .2s,border-color .2s}.word-bank-tag:hover{background-color:var(--card-bg);border-color:var(--accent-color)}.generated-words,.story-output{margin-top:2rem}.story-output{margin-top:0}.generated-words-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.generated-words-header h2{margin-bottom:0;border-bottom:none}.button-group{display:flex;align-items:center;gap:.5rem}.copy-button{background-color:transparent;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;width:40px;height:40px;display:flex;justify-content:center;align-items:center;transition:background-color .2s,border-color .2s}.copy-button:hover{background-color:var(--copy-button-hover-bg);border-color:var(--copy-button-hover-border)}.copy-button svg{width:20px;height:20px;color:var(--text-color)}.copy-button.copied svg{color:var(--success-color)}.generated-tag{background-color:var(--generated-tag-bg);color:var(--generated-tag-text)}.word-group h3{font-size:1.1rem;font-weight:600;color:var(--tag-text);margin-bottom:1rem}.generated-words hr,.story-output hr{border:none;border-top:1px solid var(--border-color);margin:1.5rem 0}.generated-plans,.follow-up-activities{margin-top:2rem;display:flex;flex-direction:column;gap:1.5rem}.follow-up-activities{padding:2rem}.follow-up-activities .generated-words-header{margin-bottom:0}.activity-plan-card{border:1px solid var(--border-color);border-radius:8px;padding:1.5rem;background-color:var(--primary-bg);animation:fadeIn .5s ease-out}.follow-up-activities .activity-plan-card{background-color:var(--card-bg)}.activity-plan-card h2{font-size:1.2rem;color:var(--heading-color);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}.activity-plan-card h3{font-size:1.1rem;color:var(--heading-color);margin-top:1.5rem;margin-bottom:.75rem;font-weight:600}.activity-plan-card h3:first-child{margin-top:0}.activity-plan-card h4{font-size:1rem;color:var(--heading-color);margin-top:1rem;margin-bottom:.5rem;font-weight:600}.activity-plan-card p{margin-bottom:.75rem;line-height:1.6}.activity-plan-card ul,.activity-plan-card ol{margin-bottom:.75rem;padding-left:1.5rem}.activity-plan-card ul li,.activity-plan-card ol li{list-style-position:outside;margin-bottom:.5rem;line-height:1.6}.activity-plan-card strong{font-weight:600;color:var(--heading-color)}[data-theme=dark] .activity-plan-card strong{color:var(--accent-color)}.story-pages-container{display:flex;flex-direction:column;gap:1.25rem}.story-page{padding-bottom:1rem;border-bottom:1px dashed var(--border-color)}.story-page:last-child{border-bottom:none;padding-bottom:0}.story-page h3{font-size:.9rem;font-weight:600;color:var(--accent-color);margin-bottom:.5rem}.story-page p{line-height:1.8;font-size:1.05rem;margin:0}strong.target-word{color:var(--tag-text);background-color:var(--tag-bg);padding:.1em .4em;border-radius:4px;font-weight:600}.teacher-notes{margin-top:1rem}.teacher-notes h3{font-size:1.25rem;font-weight:600;color:var(--heading-color);margin-bottom:1.5rem}.notes-section{margin-bottom:1.5rem}.notes-section:last-child{margin-bottom:0}.notes-section h4{font-size:1rem;font-weight:600;color:var(--heading-color);margin-bottom:.75rem}.notes-section p{line-height:1.6}.empty-state{text-align:center;padding:3rem 2rem;font-size:1.1rem;color:var(--text-color);font-weight:500}.loader-container{display:flex;justify-content:center;align-items:center;padding:4rem}.spinner{width:48px;height:48px;border:5px solid var(--accent-color);border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}.login-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fadeIn .3s ease-out}.login-modal{max-width:420px;width:90%;text-align:center;padding:2.5rem 2rem}.login-modal h2{font-size:1.75rem;margin-bottom:.5rem;color:var(--heading-color);border:none}.login-modal p{margin-bottom:1.5rem;color:var(--text-color)}.login-form{display:flex;flex-direction:column;gap:1rem}.login-modal input{width:100%;font-family:Poppins,sans-serif;padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:8px;background-color:var(--card-bg);color:var(--text-color);font-size:1rem;font-weight:500;transition:border-color .2s,box-shadow .2s}.login-modal input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px var(--focus-shadow-color)}.login-modal .generate-button{width:100%;margin-top:.5rem}.login-error{color:var(--error-color);font-weight:500;font-size:.9rem;margin-top:1rem;margin-bottom:0!important}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){body,#root{padding:1rem .5rem}.title{font-size:1.4rem;text-align:left}.controls-wrapper{flex-direction:column;align-items:center}.control-group{width:100%;max-width:320px}.control-group select,.control-group input{width:100%}.card{padding:1.5rem}.controls-card{padding:1rem 1.5rem 1.5rem}}