:root{--bg-color:#f8fafc;--panel-bg:#fff;--text-primary:#334155;--text-secondary:#64748b;--accent-red:#e11d48;--accent-hover:#be123c;--border-light:#e2e8f0;--line-color:#cbd5e1;color:var(--text-primary);background-color:var(--bg-color);font-family:Inter,system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.5}body{justify-content:center;min-height:100vh;margin:0;display:flex}#root{box-sizing:border-box;width:100%;max-width:1000px;padding:1rem 2rem}.app-header{border-bottom:2px solid var(--border-light);background-color:var(--bg-color);z-index:1000;justify-content:space-between;align-items:center;margin-bottom:0;padding:.5rem 0 1.5rem;display:flex;position:sticky;top:0}.header-left{align-items:center;gap:.75rem;display:flex}.logo-icon{background-color:var(--accent-red);color:#fff;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.5rem;font-weight:700;display:flex}.logo-text{flex-direction:column;display:flex}.logo-text .title{font-size:1.25rem;font-weight:800;line-height:1.2}.logo-text .subtitle{color:var(--text-secondary);letter-spacing:.05em;font-size:.7rem;font-weight:700}.header-nav{gap:.5rem;display:flex}.nav-item{cursor:pointer;color:var(--text-secondary);background:0 0;border:1px solid #0000;border-radius:8px;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.95rem;font-weight:600;transition:all .2s;display:flex}.nav-item:hover{background-color:var(--bg-color);color:var(--text-primary)}.nav-item.active{color:var(--accent-red);border:1px solid var(--accent-red);background-color:#fff1f2}.header-right{align-items:center;gap:1rem;display:flex}.user-info{flex-direction:column;align-items:flex-end;display:flex}.username{font-size:.9rem;font-weight:700}.user-xp{color:#d97706;font-size:.75rem;font-weight:700}.icon-button{border:1px solid var(--border-light);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:1rem;transition:background-color .2s;display:flex}.icon-button:hover{background-color:var(--bg-color)}.search-container{border:1px solid var(--border-light);background:#fff;border-radius:12px;gap:.75rem;max-width:500px;margin-bottom:1rem;margin-left:auto;margin-right:auto;padding:.5rem;display:flex;box-shadow:0 4px 6px -1px #0000000d}.search-input{border:none;outline:none;flex:1;padding:.75rem 1rem;font-size:1rem}.search-button{border:1px solid var(--accent-red);color:var(--accent-red);cursor:pointer;background-color:#fff;border-radius:8px;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;transition:all .2s}.search-button:hover{background-color:#fff1f2}.error-text{color:var(--accent-red);text-align:center;font-weight:700}.infographic-panel{border:1px solid var(--border-light);background-color:var(--panel-bg);border-radius:16px;grid-template:"top-left divider top-right"1fr"bottom-left divider bottom-right"/300px 2px 1fr;gap:1.5rem 2rem;padding:1.5rem;display:grid;box-shadow:0 10px 15px -3px #0000000d}.quadrant-top-left{flex-direction:column;grid-area:top-left;justify-content:center;align-items:center;gap:1.5rem;display:flex}.divider-line{background-color:var(--border-light);border-radius:1px;grid-area:divider;width:2px;height:100%}.char-display-container{flex-direction:column;align-items:center;gap:1rem;display:flex}.char-writer{background:#ffffff80;border:2px dashed #94a3b8;border-radius:8px}.animate-button{border:1px solid var(--border-color);cursor:pointer;background-color:#fff;border-radius:6px;padding:.5rem 1rem;font-size:.9rem;font-weight:700}.animate-button:hover{background-color:#f1f5f9}.info-block{border:1px solid var(--border-light);text-align:center;background:#fff;border-radius:12px;grid-area:bottom-left;grid-template-columns:1fr 1fr;align-self:end;width:100%;display:grid;overflow:hidden}.info-pinyin{border-right:1px solid var(--border-light);border-bottom:1px solid var(--border-light);color:var(--accent-red);padding:.75rem;font-size:1.2rem;font-weight:700}.info-hanviet{border-bottom:1px solid var(--border-light);color:#0ea5e9;padding:.75rem;font-size:1.2rem;font-weight:700}.info-meaning{background-color:#f8fafc;grid-column:1/-1;padding:.75rem;font-size:1.1rem;font-weight:500}.components-list{flex-direction:column;grid-area:top-right;gap:1.5rem;display:flex}.breakdown-row{align-items:center;display:flex;position:relative}.comp-char-block{flex-direction:column;align-items:center;width:80px;display:flex}.comp-char-large{font-family:Kaiti,serif;font-size:4rem;font-weight:700;line-height:1}.comp-hanviet{color:#3b82f6;text-transform:uppercase;margin-top:-.25rem;font-size:.85rem;font-weight:700}.horizontal-arrow{color:var(--line-color);margin:0 1rem;font-size:1.5rem;transform:scaleY(.5)}.comp-image-placeholder{justify-content:center;align-items:center;width:60px;height:60px;margin:0 2rem;display:flex}.comp-image-placeholder img{object-fit:contain;max-width:100%;max-height:100%}.placeholder-box{border:1px dashed var(--line-color);width:100%;height:100%;color:var(--text-secondary);text-align:center;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;font-size:.75rem;display:flex}.comp-keyword-wrapper{flex-direction:column;flex:1;align-items:center;display:flex;position:relative}.comp-keyword-box{border:1px solid var(--line-color);text-align:center;z-index:2;background:#fff;border-radius:8px;min-width:120px;padding:.5rem 2rem;font-size:1.2rem;font-weight:700;box-shadow:0 2px 4px -1px #0000000d}.vertical-arrow{background-color:var(--line-color);z-index:1;width:2px;height:1.5rem;position:absolute;top:100%;left:50%;transform:translate(-50%)}.vertical-arrow:after{content:"";border-style:solid;border-width:8px 6px 0;border-color:var(--line-color) transparent transparent transparent;position:absolute;bottom:-4px;left:50%;transform:translate(-50%)}.mnemonic-box{border:1px solid var(--line-color);text-align:center;color:var(--accent-red);background:#fff;border-radius:12px;grid-area:bottom-right;align-self:end;padding:1rem 1.5rem;font-size:1.1rem;font-weight:600;position:relative;box-shadow:0 4px 6px -1px #0000000d}.tab-navigation{background-color:var(--bg-color);z-index:990;justify-content:center;gap:20px;margin-top:-10px;margin-bottom:20px;padding-top:10px;padding-bottom:10px;display:flex;position:sticky;top:74px}.tab-btn{background-color:var(--panel-bg);color:var(--text-secondary);border:1px solid var(--border-light);cursor:pointer;border-radius:8px;padding:10px 24px;font-size:1rem;font-weight:600;transition:all .2s}.tab-btn:hover{color:var(--text-primary);background-color:#f1f5f9}.dropdown-item:hover{background-color:#f1f5f9}.tab-btn.active{background-color:var(--accent-red);color:#fff;border-color:var(--accent-red)}.research-container{gap:20px;height:70vh;min-height:600px;display:flex}.research-sidebar{background-color:var(--panel-bg);border:1px solid var(--border-light);border-radius:12px;flex-direction:column;flex:0 0 300px;display:flex;overflow:hidden}.research-search{border-bottom:1px solid var(--border-light);padding:16px}.research-search input{border:1px solid var(--border-light);width:100%;color:var(--text-primary);background-color:#fff;border-radius:6px;padding:10px 16px;font-size:.95rem}.research-search input:focus{border-color:var(--accent-red);outline:none}.research-list{flex:1;padding:8px;overflow-y:auto}.research-list-item{cursor:pointer;color:var(--text-secondary);border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:4px;padding:12px 16px;transition:background-color .2s;display:flex}.research-list-item:hover{background-color:#f1f5f9}.research-list-item.active{color:var(--accent-red);background-color:#fff1f2;font-weight:700}.research-list-char{font-size:1.5rem}.research-list-pinyin{opacity:.7;font-size:.9rem}.research-list-more{text-align:center;color:var(--text-secondary);padding:10px;font-size:.85rem}.research-detail{background-color:var(--panel-bg);border:1px solid var(--border-light);border-radius:12px;flex-direction:column;flex:1;display:flex;overflow-y:auto}.research-placeholder{color:var(--text-secondary);margin:auto;font-size:1.1rem}.research-detail-content{padding:30px}.detail-header{border-bottom:1px solid var(--border-light);text-align:center;margin-bottom:20px;padding-bottom:20px}.detail-header-char{color:var(--accent-red);margin-bottom:10px;font-size:4rem;font-weight:700;line-height:1}.detail-pinyin{color:var(--text-secondary);font-size:1.2rem}.detail-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;display:grid}.detail-card{border:1px solid var(--border-light);background-color:#fff;border-radius:8px;padding:16px;box-shadow:0 1px 3px #00000005}.detail-card-title{color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:.75rem;font-weight:700}.detail-card-value{color:var(--text-primary);word-break:break-word;font-size:1rem;line-height:1.5}.clickable-char{color:var(--accent-red);cursor:pointer;padding:0 2px;-webkit-text-decoration:underline #0000;text-decoration:underline #0000;transition:all .2s;display:inline-block}.clickable-char:hover{-webkit-text-decoration-color:var(--accent-red);text-decoration-color:var(--accent-red);background-color:#fff1f2;border-radius:4px}.back-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;gap:5px;margin-bottom:20px;padding:0;font-size:1rem;font-weight:600;transition:color .2s;display:inline-flex}.back-btn:hover{color:var(--accent-red);text-decoration:underline}.detail-actions-top{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.detail-actions-top .back-btn{margin-bottom:0}.save-container{align-items:center;gap:15px;display:flex}.save-btn{background-color:var(--accent-red);color:#fff;cursor:pointer;border:none;border-radius:6px;padding:8px 16px;font-size:.9rem;font-weight:600;transition:all .2s}.save-btn:hover:not(:disabled){background-color:#b91c1c;transform:translateY(-1px)}.save-btn:disabled{cursor:not-allowed;background-color:#fca5a5}.save-status{color:var(--text-secondary);font-size:.85rem;font-weight:500}.detail-card-textarea{border:1px solid var(--border-color);resize:vertical;width:100%;min-height:80px;color:var(--text-primary);background-color:#fafafa;border-radius:6px;padding:10px;font-family:inherit;font-size:.95rem;line-height:1.5;transition:border-color .2s}.detail-card-textarea:focus{border-color:var(--accent-red);background-color:#fff;outline:none}.sidebar-tabs{background:#f1f5f9;border-radius:6px;margin:0 16px 8px;padding:4px;display:flex}.sidebar-tab{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:4px;flex:1;padding:6px 0;font-size:.85rem;font-weight:500;transition:all .2s}.sidebar-tab.active{color:#e11d48;background:#fff;box-shadow:0 1px 3px #0000001a}.detail-inner-tabs{border-bottom:1px solid #e2e8f0;gap:8px;margin-top:16px;margin-bottom:16px;padding-bottom:8px;display:flex;overflow-x:auto}.inner-tab{color:#64748b;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:20px;padding:6px 16px;font-weight:600;transition:all .2s}.inner-tab:hover{color:#0f172a;background:#f1f5f9}.inner-tab.active{color:#fff;background:#e11d48}.detail-meaning{color:var(--text-primary);margin-top:8px;font-size:1.1rem}.chiettu-workspace{align-items:flex-start;gap:30px;margin-top:20px;display:flex}.chiettu-svg-container{text-align:center;background:#fff;border-radius:12px;flex:1;padding:20px;box-shadow:0 4px 6px -1px #0000001a}.hanzi-svg{cursor:crosshair;border:1px dashed #cbd5e1;width:300px;height:300px;margin:0 auto}.hanzi-stroke-path{transition:fill .2s}.hanzi-stroke-path:hover{opacity:.8}.hint-text{color:#64748b;margin-top:15px;font-size:.9rem}.chiettu-components-panel{background:#fff;border-radius:12px;flex:1;padding:20px;box-shadow:0 4px 6px -1px #0000001a}.comp-list{flex-direction:column;gap:10px;margin-top:15px;display:flex}.comp-item{cursor:pointer;background:#f8fafc;border-left:4px solid #0000;border-radius:8px;align-items:center;gap:12px;padding:12px 15px;transition:all .2s;display:flex}.comp-item:hover{background:#f1f5f9}.comp-item.active{background:#e0f2fe;font-weight:600;box-shadow:0 2px 4px #0000000d}.comp-color-box{border-radius:4px;width:20px;height:20px}.comp-text{color:#334155}.save-btn{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8px;width:100%;margin-top:20px;padding:12px;font-weight:600;transition:background .2s}.save-btn:hover{background:#1d4ed8}.save-btn:disabled{cursor:not-allowed;background:#94a3b8}.tonghop-list{flex-direction:column;gap:10px;max-width:800px;margin:0 auto;padding:20px;display:flex}.tonghop-item{background:#fff;border-radius:8px;align-items:center;padding:10px 20px;transition:all .3s;display:flex;box-shadow:0 1px 3px #0000001a}.tonghop-item.highlighted-item{border:2px solid #10b981;transform:scale(1.02);box-shadow:0 0 10px #10b9814d}.tonghop-index{color:#94a3b8;text-align:center;border-right:1px solid #e2e8f0;width:40px;margin-right:15px;font-size:1.2rem;font-weight:700}.tonghop-char{color:#e11d48;text-align:center;width:60px;font-size:2rem;font-weight:700}.tonghop-info{flex-direction:column;flex:1;display:flex}.tonghop-info .pinyin{color:#334155;font-weight:500}.tonghop-info .meaning{color:#64748b;font-size:.9rem}.tonghop-actions{align-items:center;gap:10px;display:flex}.tonghop-actions span{font-size:1.5rem}.add-btn,.study-btn,.ready-btn{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:4px;padding:5px 15px;font-weight:700}.add-btn{background:#10b981;padding:5px 12px;font-size:1.2rem}.add-btn:hover{background:#059669}.study-btn{background:#6366f1}.ready-btn{background:#f59e0b}