:root{--color-primary: #3a6ea5;--color-primary-dark: #2c5580;--color-accent: #c1272d;--color-success: #1e8a5f;--color-purple: #7b4397;--color-orange: #d97c1f;--color-teal: #0f766e;--color-bg: #f7f8fb;--color-surface: #ffffff;--color-border: #e2e5eb;--color-text: #1f2430;--color-text-muted: #6b7280;--radius: 10px;--shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .06)}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--color-bg);color:var(--color-text)}.app-shell{max-width:880px;margin:0 auto;padding:2rem 1.25rem 4rem}.user-bar{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;font-size:.85rem;color:var(--color-text-muted);margin-bottom:.5rem}.user-avatar{width:24px;height:24px;border-radius:50%}.app-header{text-align:center;margin-bottom:2rem}.app-header h1{font-size:1.9rem;margin:0 0 .4rem}.app-header p{color:var(--color-text-muted);margin:0}.nav-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.9rem;margin-top:1.5rem}.nav-card{border:none;border-radius:var(--radius);padding:1.4rem 1rem;font-size:1rem;font-weight:600;color:#fff;cursor:pointer;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}.nav-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0f172a1f}.nav-card .emoji{display:block;font-size:1.6rem;margin-bottom:.4rem}.nav-card.generate{background:var(--color-primary)}.nav-card.vocab{background:var(--color-success)}.nav-card.scenes{background:var(--color-purple)}.nav-card.profile{background:var(--color-teal)}.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem}.onboarding-panel{text-align:center;padding:3rem 1.5rem}.onboarding-panel h2{margin:.75rem 0 .5rem}.onboarding-panel p{color:var(--color-text-muted);max-width:420px;margin:0 auto 1.5rem}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap}.panel-header h2{margin:0;font-size:1.3rem}.btn{border:none;border-radius:8px;padding:.6rem 1.1rem;font-size:.92rem;font-weight:600;cursor:pointer;transition:filter .15s ease}.btn:hover{filter:brightness(.95)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff;width:100%;padding:.85rem;font-size:1rem}.btn-secondary{background:#eef1f6;color:var(--color-text)}.btn-danger{background:#fdecec;color:var(--color-accent)}.btn-ghost{background:transparent;color:var(--color-primary);padding:.4rem .6rem}.form-section{margin-bottom:1.5rem}.form-section h3{margin:0 0 .75rem;font-size:1rem;color:var(--color-primary-dark)}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem}.field label{display:block;font-size:.82rem;color:var(--color-text-muted);margin-bottom:.3rem}.field input,.field select,.field textarea{width:100%;padding:.55rem .7rem;border:1px solid var(--color-border);border-radius:7px;font-size:.92rem;font-family:inherit;background:#fff}.field textarea{resize:vertical;min-height:3.2rem}.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--color-primary);outline-offset:1px}.loading-state{text-align:center;padding:3rem 1rem}.spinner{width:42px;height:42px;margin:0 auto 1rem;border:4px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.progress-bar-track{height:8px;background:var(--color-border);border-radius:4px;overflow:hidden;margin:.75rem auto;max-width:320px}.progress-bar-fill{height:100%;background:var(--color-primary);transition:width .3s ease}.error-box{background:#fdecec;border:1px solid #f4b8b8;color:#8a2020;border-radius:var(--radius);padding:1rem;margin-top:1rem}.topic-block{margin-bottom:1.75rem}.topic-block h3{color:var(--color-primary-dark);margin:0}.topic-block-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:2px solid var(--color-border);padding-bottom:.4rem;margin-bottom:.4rem;flex-wrap:wrap}.qa-item{padding:.85rem 0;border-bottom:1px dashed var(--color-border)}.qa-item:last-child{border-bottom:none}.qa-question{font-weight:600;margin-bottom:.3rem}.qa-answer{color:var(--color-primary-dark);margin-bottom:.2rem}.qa-english{color:var(--color-text-muted);font-size:.88rem}.btn-audio{border:none;background:transparent;cursor:pointer;font-size:.9rem;margin-left:.4rem;padding:.1rem .3rem;vertical-align:middle}.btn-audio:disabled{opacity:.6;cursor:default}.reader-progress{text-align:center;color:var(--color-text-muted);font-size:.85rem;margin-bottom:.75rem}.reader-nav{display:flex;justify-content:space-between;gap:.75rem;margin-top:1.5rem}.reader-layout{display:flex;align-items:flex-start;gap:1.5rem}.reader-sidebar{width:230px;flex-shrink:0;max-height:75vh;overflow-y:auto;display:flex;flex-direction:column;gap:.15rem;position:sticky;top:1rem}.reader-sidebar-item{display:flex;align-items:baseline;gap:.5rem;text-align:left;border:none;background:transparent;border-radius:6px;padding:.45rem .6rem;font-size:.85rem;color:var(--color-text-muted);cursor:pointer}.reader-sidebar-item:hover{background:#f0f2f6}.reader-sidebar-item.active{background:#eef4fb;color:var(--color-primary-dark);font-weight:600}.reader-sidebar-num{flex-shrink:0;width:1.4rem;color:var(--color-text-muted);font-variant-numeric:tabular-nums}.reader-content{flex:1;min-width:0}@media (max-width: 720px){.reader-layout{flex-direction:column}.reader-sidebar{width:100%;max-height:none;flex-direction:row;overflow-x:auto;overflow-y:visible;position:static;padding-bottom:.4rem}.reader-sidebar-item{flex-shrink:0}}.player-toolbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}.player-toolbar select{padding:.4rem .6rem;border-radius:7px;border:1px solid var(--color-border)}.word-count{color:var(--color-text-muted);font-size:.85rem}.toggle-label{display:flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--color-text-muted)}.player-card{text-align:center;padding:1.5rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius);background:#fafbfd}.player-progress{color:var(--color-text-muted);font-size:.82rem;margin-bottom:.6rem}.player-word{font-size:1.7rem;margin-bottom:.6rem}.player-meta{display:flex;justify-content:center;gap:.4rem;margin-bottom:.6rem}.badge{background:#eef1f6;border-radius:20px;padding:.15rem .6rem;font-size:.75rem;color:var(--color-text-muted)}.player-forms{font-size:.85rem;color:var(--color-text-muted);margin-bottom:.3rem}.player-translation{margin:.8rem 0;font-size:.95rem}.player-translation div{margin-bottom:.2rem}.player-buttons{display:flex;justify-content:center;gap:.6rem;margin-top:1rem}.btn-player{background:#fff;border:1px solid var(--color-border);border-radius:8px;padding:.5rem .9rem;cursor:pointer;font-size:.9rem}.btn-player.playing{background:var(--color-success);color:#fff;border-color:var(--color-success)}.player-auto{margin-top:1rem}.scene-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.scene-card{border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;cursor:pointer;background:#fff;transition:transform .15s ease}.scene-card:hover{transform:translateY(-2px)}.scene-card-thumb{height:130px;display:flex;align-items:center;justify-content:center;overflow:hidden}.scene-card-thumb img{width:100%;height:100%;object-fit:cover}.scene-card-info{padding:.7rem .85rem}.scene-card-info h3{margin:0 0 .2rem;font-size:.95rem}.scene-card-info span{font-size:.8rem;color:var(--color-text-muted)}.scene-viewport{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--color-border);margin-bottom:1rem}.scene-canvas{position:relative;width:100%}.scene-canvas img{width:100%;display:block}.hotspot-marker{position:absolute;transform:translate(-50%,-50%);cursor:pointer}.hotspot-dot{width:16px;height:16px;border-radius:50%;background:var(--color-accent);border:3px solid white;box-shadow:0 0 0 2px #c1272d66;animation:pulse 1.8s ease infinite}.hotspot-marker.active .hotspot-dot{background:var(--color-primary);box-shadow:0 0 0 2px #3a6ea580}@keyframes pulse{0%,to{box-shadow:0 0 0 2px #c1272d66}50%{box-shadow:0 0 0 6px #c1272d26}}.hotspot-card{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:#fff;border-radius:8px;box-shadow:0 6px 20px #0f172a33;padding:.6rem .85rem;white-space:nowrap;font-size:.9rem;z-index:5}.hotspot-card.flip-below{bottom:auto;top:calc(100% + 8px)}.hotspot-card .article{color:var(--color-text-muted);margin-right:.25rem}.hotspot-card .translation{display:block;color:var(--color-text-muted);font-size:.8rem}.word-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.5rem}.word-chip{border:1px solid var(--color-border);border-radius:8px;padding:.5rem .7rem;cursor:pointer;background:#fff}.word-chip.active{border-color:var(--color-primary);background:#eef4fb}.word-chip .lb{display:block;font-weight:600;font-size:.9rem}.word-chip .en{display:block;font-size:.78rem;color:var(--color-text-muted)}