@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Serif+SC:wght@400;700&family=Noto+Sans+SC:wght@400;700&family=Ma+Shan+Zheng&family=Zhi+Mang+Xing&family=ZCOOL+QingKe+HuangYou&display=swap";:root{--primary:#0d47a1;--on-primary:#fff;--primary-container:#d3e4ff;--on-primary-container:#001c38;--secondary:#1976d2;--accent:#ffc107;--background:#fefefe;--surface:#fff;--surface-variant:#f1f4f9;--on-surface:#1b1b1f;--on-surface-variant:#44474e;--outline:#74777f;--shadow:#00000014;--character-font:"Noto Serif SC", serif;--radius-sm:8px;--radius-md:12px;--radius-lg:24px;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.25s cubic-bezier(.4, 0, .2, 1)}@media (prefers-color-scheme:dark){:root{--primary:#adc6ff;--on-primary:#002e69;--primary-container:#004494;--on-primary-container:#d3e4ff;--secondary:#1976d2;--background:#1b1b1f;--surface:#111318;--surface-variant:#24262f;--on-surface:#e3e2e6;--on-surface-variant:#c4c6d0;--outline:#8e9099;--shadow:#0000004d}}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:var(--background);color:var(--on-surface);min-height:100vh;margin:0;font-family:Inter,sans-serif;position:relative;overflow-x:hidden}body:before{content:"";opacity:.03;pointer-events:none;z-index:9999;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");width:100%;height:100%;position:fixed;top:0;left:0}h1,h2,h3,h4{margin:0;font-weight:700}button{cursor:pointer;background:0 0;border:none;font-family:inherit}.card-lifted{background:var(--surface);border-radius:var(--radius-md);box-shadow:0 1px 2px var(--shadow), 0 4px 8px -2px var(--shadow), 0 8px 16px -4px var(--shadow);transition:transform var(--transition-normal), box-shadow var(--transition-normal)}.card-lifted:hover{box-shadow:0 2px 4px var(--shadow), 0 8px 16px -2px var(--shadow), 0 16px 32px -4px var(--shadow);transform:translateY(-2px)}.character-font{font-family:var(--character-font)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--background)}::-webkit-scrollbar-thumb{background:var(--surface-variant);border:2px solid var(--background);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--outline)}*{scrollbar-width:thin;scrollbar-color:var(--surface-variant) var(--background)}body[data-charbox-background=false] .char-box{background-color:#0000!important}body[data-charbox-border=false] .char-box{border-width:0!important;border-color:#0000!important}.layout-container{width:100vw;height:100vh;display:flex;overflow:hidden}.sidebar{background-color:var(--surface);border-right:1px solid var(--surface-variant);width:280px;padding:var(--spacing-lg);gap:var(--spacing-xl);z-index:10;flex-direction:column;display:flex}.sidebar-header{align-items:center;gap:var(--spacing-md);color:var(--primary);display:flex}.app-logo{object-fit:contain;width:40px;height:40px;filter:drop-shadow(0 0 8px var(--shadow))}.search-container{align-items:center;display:flex;position:relative}.search-icon{left:var(--spacing-md);color:var(--on-surface-variant);position:absolute}.search-container input{width:100%;padding:var(--spacing-md);border-radius:var(--radius-md);border:1px solid var(--outline);background:var(--surface-variant);color:var(--on-surface);transition:border-color var(--transition-fast);padding-left:44px;font-family:inherit}.search-container input:focus{border-color:var(--primary);outline:none}.search-container.disabled{opacity:.5;cursor:not-allowed}.search-container.disabled input{background:var(--background);border-color:var(--surface-variant);cursor:not-allowed}.search-container.disabled .search-icon{opacity:.5}.sidebar-nav{gap:var(--spacing-sm);flex-direction:column;flex:1;display:flex}.nav-item{align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);border-radius:var(--radius-sm);color:var(--on-surface-variant);transition:all var(--transition-fast);font-weight:500;display:flex}.nav-item:hover{background-color:var(--surface-variant);color:var(--on-surface)}.nav-item.active{background-color:var(--primary-container);color:var(--on-primary-container)}.sidebar-footer{margin-top:auto}.study-button{justify-content:center;align-items:center;gap:var(--spacing-md);width:100%;padding:var(--spacing-md);background-color:var(--primary);color:var(--on-primary);border-radius:var(--radius-md);font-weight:600;display:flex}.main-content{padding:var(--spacing-xl);background-color:var(--background);flex:1;overflow-y:auto}.mobile-nav{background:var(--surface);border-top:1px solid var(--surface-variant);height:72px;padding:0 var(--spacing-sm);padding-bottom:env(safe-area-inset-bottom);z-index:100;justify-content:space-around;align-items:center;display:none;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -2px 10px #0000000d}.mobile-nav-item{color:var(--on-surface-variant);min-width:64px;transition:all var(--transition-fast);flex-direction:column;align-items:center;gap:4px;padding:8px;font-size:11px;font-weight:500;display:flex}.mobile-nav-item.active{color:var(--primary)}.mobile-nav-item.study-action{position:relative;top:-20px}.study-fab{background:var(--primary);width:56px;height:56px;color:var(--on-primary);box-shadow:0 4px 12px var(--shadow);transition:transform var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;margin-bottom:4px;display:flex}.study-fab:active{transform:scale(.9)}.mobile-top-bar{margin-bottom:var(--spacing-md);z-index:50;background-color:var(--background);padding:var(--spacing-sm) 0;display:none;position:sticky;top:0}.mobile-search{align-items:center;width:100%;display:flex;position:relative}.mobile-search svg{left:var(--spacing-md);color:var(--on-surface-variant);pointer-events:none;position:absolute}.mobile-search input{border-radius:var(--radius-lg);border:1px solid var(--outline);background:var(--surface);width:100%;color:var(--on-surface);box-shadow:0 2px 8px var(--shadow);padding:12px 12px 12px 44px;font-size:1rem}@media (width<=768px){.sidebar{display:none}.mobile-nav{display:flex}.mobile-top-bar{display:block}.main-content{padding:var(--spacing-md);padding-bottom:90px}}.char-tooltip-container{cursor:help;display:inline-flex;position:relative}.char-tooltip-popup{background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius-md);padding:var(--spacing-md);box-shadow:0 12px 32px var(--shadow);z-index:10000;text-align:left;pointer-events:auto;min-width:200px;max-width:280px}.char-tooltip-popup:after{content:"";top:100%;left:var(--arrow-left,50%);border-style:solid;border-width:8px;border-color:var(--outline) transparent transparent transparent;position:absolute;transform:translate(-50%)}.tooltip-header{align-items:baseline;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);border-bottom:1px solid var(--surface-variant);padding-bottom:var(--spacing-xs);display:flex}.tooltip-meanings-list ol{color:var(--on-surface);margin:0;padding-left:1.2rem;font-size:.85rem}.tooltip-meanings-list li{margin-bottom:4px}.tooltip-meaning{color:var(--on-surface);margin:0;font-size:.85rem;line-height:1.4}.tooltip-type{text-transform:uppercase;color:var(--on-primary-container);background:var(--primary-container);border-radius:4px;padding:1px 6px;font-size:.7rem;font-weight:600}.tooltip-char{color:var(--primary);font-size:1.5rem;font-weight:600}.tooltip-pinyin{color:var(--secondary);font-size:.9rem;font-weight:500}.word-card{padding:var(--spacing-lg);gap:var(--spacing-md);flex-direction:column;display:flex;position:relative}.word-card .listen-button{top:var(--spacing-sm);right:var(--spacing-sm);color:var(--primary);padding:var(--spacing-sm);transition:background-color var(--transition-fast);border-radius:50%;position:absolute}.word-card .listen-button:hover{background-color:var(--primary-container)}.character{color:var(--on-surface);gap:4px;font-size:2.5rem;line-height:1;display:flex}.char-box{background-color:var(--surface-variant);min-width:1.2em;font-size:inherit;border:1px solid var(--outline);opacity:.9;border-radius:2px;justify-content:center;align-items:center;padding:4px;display:inline-flex}.pinyin{color:var(--secondary);margin:0;font-size:1.1rem;font-weight:500}.meaning{color:var(--on-surface-variant);margin:0;font-size:1rem;line-height:1.4}.tags{gap:var(--spacing-sm);flex-wrap:wrap;margin-top:auto;display:flex}.type-tag{background-color:var(--primary-container);color:var(--on-primary-container);text-transform:uppercase;border-radius:4px;padding:2px 8px;font-size:.75rem;font-weight:600}.category-tag{background-color:var(--surface-variant);color:var(--on-surface-variant);border-radius:4px;padding:2px 8px;font-size:.75rem}.custom-tag{color:#0369a1;text-transform:uppercase;background-color:#e0f2fe;border:1px solid #bae6fd;border-radius:4px;padding:2px 6px;font-size:.75rem;font-weight:600}.word-card.list{padding:var(--spacing-sm) var(--spacing-md);align-items:center;gap:var(--spacing-md);grid-template-columns:120px 140px 1.5fr 1fr 48px;display:grid}.word-card.list>*{min-width:0}.word-card.list .word-header{align-items:center;display:flex;overflow:hidden}.word-card.list .character{gap:2px;font-size:1.5rem}.word-card.list .char-box{font-size:inherit;min-width:1.1em;padding:2px}.word-card.list .pinyin{font-size:1rem}.word-card.list .meaning{white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;overflow:hidden}.word-card.list .tags{flex-wrap:nowrap;justify-content:flex-end;margin-top:0;overflow:hidden}.word-card.list .listen-button{justify-content:center;align-items:center;display:flex;position:static}.word-card.compact{align-items:center;gap:var(--spacing-lg);padding:var(--spacing-md);grid-template-columns:auto 1fr 44px;min-height:80px;display:grid}.word-card.compact .word-header{justify-content:flex-start;min-width:80px;display:flex}.word-card.compact .character{justify-content:flex-start;font-size:2.2rem}.word-card.compact.long-character .character{font-size:1.4rem}.word-card.compact .word-body{flex-direction:column;gap:2px;min-width:0;display:flex}.word-card.compact .pinyin{color:var(--secondary);font-size:.9rem}.word-card.compact .meaning{color:var(--on-surface);white-space:nowrap;text-overflow:ellipsis;font-size:1rem;overflow:hidden}.word-card.compact .tags{display:none}.word-card.compact .listen-button{justify-content:center;align-items:center;display:flex;position:static}@media (width<=900px){.word-card.list{grid-template-columns:80px 120px 1fr 48px}.word-card.list .tags{display:none}}@media (width<=600px){.word-card.list{gap:var(--spacing-sm);padding:var(--spacing-sm);grid-template-columns:70px 1fr 44px}.word-card.list .pinyin{display:none}.word-card.list .meaning{font-size:.85rem}}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;width:100vw;height:100vh;animation:fadeIn var(--transition-normal);background-color:#0006;justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}.modal-content{background-color:var(--surface);width:90%;max-width:600px;max-height:90vh;padding:var(--spacing-xl);border-radius:var(--radius-lg);animation:scaleIn var(--transition-normal);flex-direction:column;align-items:center;display:flex;position:relative;overflow:hidden auto}.close-button{top:var(--spacing-md);right:var(--spacing-md);color:var(--on-surface-variant);transition:color var(--transition-fast);position:absolute}.close-button:hover{color:var(--on-surface)}.modal-body{align-items:center;gap:var(--spacing-xl);flex-direction:column;width:100%;display:flex}.massive-character{justify-content:center;gap:var(--spacing-sm);color:var(--on-surface);flex-wrap:wrap;width:100%;font-size:clamp(4rem,15vw,10rem);line-height:1;display:flex}.massive-character.long-character{font-size:clamp(3rem,10vw,6rem)}.massive-character .char-box{background-color:var(--surface-variant);border-radius:var(--radius-md);padding:var(--spacing-md);aspect-ratio:1;min-width:1.2em;font-size:inherit;border:1px solid var(--outline);box-shadow:0 4px 12px var(--shadow);justify-content:center;align-items:center;display:flex}.word-info{text-align:center;align-items:center;gap:var(--spacing-sm);flex-direction:column;width:100%;display:flex}.modal-pinyin{color:var(--secondary);margin:0;font-size:2.2rem;font-weight:600}.modal-type-tag{background-color:var(--primary-container);color:var(--on-primary-container);text-transform:uppercase;border-radius:6px;padding:4px 12px;font-size:.9rem;font-weight:600}.modal-meaning{color:var(--on-surface-variant);margin-top:var(--spacing-md);max-width:100%;font-size:1.3rem;line-height:1.5}.modal-actions{gap:var(--spacing-md);display:flex}.big-listen-button{align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-xl);background-color:var(--primary);color:var(--on-primary);border-radius:var(--radius-md);transition:transform var(--transition-fast);font-weight:600;display:flex}.big-listen-button:active{transform:scale(.95)}.modal-categories{justify-content:center;gap:var(--spacing-sm);flex-wrap:wrap;display:flex}.modal-category-tag{background-color:var(--surface-variant);color:var(--on-surface-variant);border-radius:6px;padding:4px 12px;font-size:.85rem}.edit-form{gap:var(--spacing-md);flex-direction:column;width:100%;display:flex}.form-group{gap:var(--spacing-xs);text-align:left;flex-direction:column;display:flex}.form-group label{color:var(--on-surface-variant);font-size:.85rem;font-weight:600}.form-group input,.form-group textarea{padding:var(--spacing-md);border-radius:var(--radius-sm);border:1px solid var(--outline);background:var(--surface-variant);color:var(--on-surface);font-family:inherit}.form-group textarea{resize:vertical;min-height:100px}.form-actions{gap:var(--spacing-md);margin-top:var(--spacing-md);display:flex}.save-btn{justify-content:center;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background-color:var(--primary);color:var(--on-primary);border-radius:var(--radius-md);flex:1;font-weight:600;display:flex}.cancel-btn{padding:var(--spacing-md) var(--spacing-lg);color:var(--on-surface-variant);font-weight:500}.edit-btn,.delete-btn{padding:var(--spacing-md);color:var(--on-surface-variant);transition:all var(--transition-fast);border-radius:50%}.edit-btn:hover{background-color:var(--primary-container);color:var(--primary)}.delete-btn:hover{color:#d32f2f;background-color:#ffebee}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.add-vocab-btn{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--surface);color:var(--primary);border:1px solid var(--primary);border-radius:var(--radius-md);font-size:.9rem;font-weight:600;display:flex}.add-vocab-btn:hover{background-color:var(--primary-container)}.dictionary-view{gap:var(--spacing-xl);flex-direction:column;display:flex}.view-header{justify-content:space-between;align-items:center;display:flex}.view-toggle{background:var(--surface-variant);border-radius:var(--radius-md);border:1px solid var(--outline);padding:4px;display:flex}.word-container.grid{gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));display:grid}.word-container.list{gap:var(--spacing-sm);flex-direction:column;display:flex}.dictionary-state{justify-content:center;align-items:center;gap:var(--spacing-md);min-height:400px;color:var(--on-surface-variant);flex-direction:column;display:flex}.spinner{border:4px solid var(--surface-variant);border-top-color:var(--primary);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.dictionary-state.error{color:#b00020}.load-more-sentinel{padding:var(--spacing-xl);justify-content:center;width:100%;display:flex}.spinner.small{border-width:2px;width:24px;height:24px}.categories-view{gap:var(--spacing-lg);flex-direction:column;display:flex}.breadcrumb-row{align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-xs);display:flex}.breadcrumb-container{align-items:center;gap:var(--spacing-xs);flex-wrap:wrap;display:flex}.back-nav-btn.compact{background:var(--surface-variant);border:1px solid var(--outline);width:32px;height:32px;color:var(--primary);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:all .2s;display:flex}.back-nav-btn.compact:hover{background:var(--primary-container);border-color:var(--primary);transform:translate(-2px)}.breadcrumb-item{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);color:var(--on-surface-variant);cursor:pointer;background:0 0;border:none;font-size:.9rem;transition:all .2s;display:flex}.breadcrumb-item:hover{background:var(--surface-variant);color:var(--primary)}.breadcrumb-separator{color:var(--outline)}.explorer-grid{gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.folder-card{align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--outline);cursor:pointer;text-align:left;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.folder-card:hover{border-color:var(--primary);background:var(--primary-container);box-shadow:0 8px 16px var(--shadow);transform:translateY(-4px)}.folder-icon{background:var(--surface-variant);border-radius:var(--radius-md);justify-content:center;align-items:center;width:60px;height:60px;display:flex}.folder-info{flex-direction:column;gap:2px;display:flex}.folder-name{color:var(--on-surface);font-size:1.1rem;font-weight:600}.folder-meta{color:var(--on-surface-variant);font-size:.85rem}.explorer-header{margin-bottom:var(--spacing-lg);justify-content:space-between;align-items:flex-start;gap:var(--spacing-md);min-height:64px;display:flex}.header-left{flex:1}.view-toggle{background:var(--surface-variant);border-radius:var(--radius-md);border:1px solid var(--outline);align-self:flex-start;padding:4px;display:flex}.view-toggle button{border-radius:var(--radius-sm);color:var(--on-surface-variant);transition:all var(--transition-fast);justify-content:center;align-items:center;padding:6px 12px;display:flex}.view-toggle button.active{background:var(--surface);color:var(--primary);box-shadow:0 2px 4px var(--shadow)}.header-actions{align-items:center;gap:var(--spacing-md);display:flex}.study-category-btn{align-items:center;gap:var(--spacing-sm);background-color:var(--primary);color:var(--on-primary);border-radius:var(--radius-md);box-shadow:0 4px 12px var(--shadow);padding:8px 16px;font-size:.9rem;font-weight:600;transition:all .2s;display:flex}.study-category-btn:hover{filter:brightness(1.1);box-shadow:0 6px 16px var(--shadow);transform:translateY(-2px)}.study-category-btn:active{transform:scale(.95)}@media (width<=600px){.explorer-header{flex-direction:column;align-items:stretch}.header-actions{flex-direction:row-reverse;justify-content:space-between}.study-category-btn{flex:1;justify-content:center}.view-toggle{flex-shrink:0}.explorer-grid{gap:var(--spacing-md);grid-template-columns:1fr}.folder-card{padding:var(--spacing-sm) var(--spacing-md)}.folder-icon{width:48px;height:48px}.folder-icon svg{width:24px;height:24px}}.progress-view{gap:var(--spacing-xl);flex-direction:column;max-width:1000px;margin:0 auto;animation:.3s ease-out fadeIn;display:flex}.stats-grid{gap:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.stat-card{align-items:center;gap:var(--spacing-lg);padding:var(--spacing-xl);background-color:var(--surface);display:flex}.stat-icon{border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.stat-icon.learned{background-color:var(--primary-container);color:var(--on-primary-container)}.stat-icon.due{color:#f57c00;background-color:#fff3e0}.stat-icon.mastered{color:#388e3c;background-color:#e8f5e9}.stat-icon.remaining{background-color:var(--surface-variant);color:var(--on-surface-variant)}.stat-info{flex-direction:column;display:flex}.stat-value{color:var(--on-surface);font-size:1.8rem;font-weight:700}.stat-label{color:var(--on-surface-variant);font-size:.9rem}.progress-section{padding:var(--spacing-xl);background-color:var(--surface);gap:var(--spacing-lg);flex-direction:column;display:flex}.progress-section h3{color:var(--on-surface);margin:0;font-size:1.2rem}.mastery-bar{background-color:var(--surface-variant);border-radius:6px;height:12px;display:flex;overflow:hidden}.mastery-segment{height:100%;transition:width .5s ease-out}.mastery-segment.mastered{background-color:#4caf50}.mastery-segment.learning{background-color:var(--primary)}.mastery-segment.new{background-color:var(--outline);opacity:.3}.mastery-legend{gap:var(--spacing-xl);flex-wrap:wrap;display:flex}.legend-item{align-items:center;gap:var(--spacing-sm);color:var(--on-surface-variant);font-size:.9rem;display:flex}.dot{border-radius:50%;width:10px;height:10px}.dot.mastered{background-color:#4caf50}.dot.learning{background-color:var(--primary)}.dot.new{background-color:var(--outline)}.achievement-card{padding:0;overflow:hidden}.achievement-hero{align-items:center;gap:var(--spacing-xl);background:linear-gradient(135deg, var(--surface) 0%, var(--surface-variant) 100%);display:flex}.success-illustration{object-fit:cover;width:300px;height:200px}.achievement-content{padding:var(--spacing-lg);flex:1}.achievement-content h3{margin-bottom:var(--spacing-sm);color:var(--primary);font-size:1.5rem}.achievement-content p{color:var(--on-surface-variant);max-width:500px;line-height:1.6}@media (width<=768px){.achievement-hero{text-align:center;flex-direction:column}.success-illustration{width:100%;height:150px}.stats-grid{grid-template-columns:1fr 1fr}.stat-card{padding:var(--spacing-lg);text-align:center;flex-direction:column}}@media (prefers-color-scheme:dark){.stat-icon.due{color:#ffd180;background-color:#f57c001a}.stat-icon.mastered{color:#b9f6ca;background-color:#388e3c1a}}.flashcard-container{perspective:2000px;cursor:pointer;-webkit-tap-highlight-color:transparent;width:100%;max-width:500px;height:400px}.flashcard-inner{text-align:center;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.34,1.56,.64,1);position:relative}.flashcard-container.flipped .flashcard-inner{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{backface-visibility:hidden;width:100%;height:100%;padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:0 12px 40px var(--shadow);border:1px solid var(--outline);background-color:var(--surface);flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute}.flashcard-front{background-color:var(--surface)}.flashcard-back{background-color:var(--surface);transform:rotateY(180deg)}.character-display{gap:var(--spacing-md);color:var(--on-surface);font-size:8rem;line-height:1;display:flex}.character-display .char-box{background-color:var(--surface-variant);border-radius:var(--radius-md);aspect-ratio:1;width:1.2em;height:1.2em;font-size:inherit;border:1px solid var(--outline);justify-content:center;align-items:center;display:flex}.hint{margin-top:var(--spacing-xl);color:var(--on-surface-variant);text-transform:uppercase;letter-spacing:.1em;font-size:.9rem}.back-content{align-items:center;gap:var(--spacing-md);flex-direction:column;width:100%;display:flex}.character-small{color:var(--on-surface-variant);opacity:.5;gap:4px;font-size:3rem;display:flex}.character-small .char-box{background-color:var(--surface-variant);border-radius:var(--radius-sm);aspect-ratio:1;width:1.2em;height:1.2em;font-size:inherit;border:1px solid var(--outline);justify-content:center;align-items:center;display:flex}.pinyin{color:var(--secondary);font-size:2.5rem;font-weight:500}.meaning{color:var(--on-surface);max-width:90%;font-size:1.5rem}.meta{gap:var(--spacing-sm);margin-top:var(--spacing-sm);display:flex}.type{background-color:var(--primary-container);color:var(--on-primary-container);border-radius:4px;padding:2px 8px;font-size:.8rem;font-weight:600}.categories{color:var(--on-surface-variant);font-size:.8rem}.tts-button{margin-top:var(--spacing-lg);color:var(--primary);padding:var(--spacing-md);transition:background-color var(--transition-fast);border-radius:50%}.tts-button:hover{background-color:var(--surface-variant)}.study-overlay{background-color:var(--background);z-index:2000;flex-direction:column;width:100vw;height:100vh;animation:.4s cubic-bezier(.4,0,.2,1) slideUp;display:flex;position:fixed;top:0;left:0}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.study-header{padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--surface-variant);justify-content:space-between;align-items:center;display:flex}.session-progress{flex:1;max-width:400px}.progress-text{color:var(--on-surface-variant);margin-bottom:var(--spacing-xs);font-size:.9rem;font-weight:500}.progress-bar-bg{background-color:var(--surface-variant);border-radius:3px;height:6px;overflow:hidden}.progress-bar-fill{background-color:var(--primary);height:100%;transition:width .3s}.exit-button{color:var(--on-surface-variant);padding:var(--spacing-sm);transition:background-color var(--transition-fast), color var(--transition-fast);border-radius:50%}.exit-button:hover{background-color:var(--surface-variant);color:var(--on-surface)}.study-main{padding:var(--spacing-xl);flex:1;justify-content:center;align-items:center;display:flex}.study-footer{padding:var(--spacing-xl);background-color:var(--surface);border-top:1px solid var(--surface-variant);opacity:0;pointer-events:none;transition:all .3s;transform:translateY(20px)}.study-footer.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.scoring-controls{text-align:center;gap:var(--spacing-md);flex-direction:column;max-width:600px;margin:0 auto;display:flex}.scoring-hint{color:var(--on-surface-variant);margin:0;font-size:1rem}.scoring-buttons{justify-content:center;gap:var(--spacing-lg);display:flex}.score-btn{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-md);min-width:120px;transition:all var(--transition-fast);flex-direction:column;font-weight:600;display:flex}.score-1{color:#ff8a80;background-color:#d32f2f1a;border:1px solid #d32f2f33}.score-3{color:#ffd180;background-color:#f57c001a;border:1px solid #f57c0033}.score-5{color:#b9f6ca;background-color:#388e3c1a;border:1px solid #388e3c33}:root[data-theme=light] .score-1{color:#d32f2f;background-color:#ffebee}:root[data-theme=light] .score-3{color:#f57c00;background-color:#fff3e0}:root[data-theme=light] .score-5{color:#388e3c;background-color:#e8f5e9}.score-btn:hover{filter:brightness(.95);transform:translateY(-2px)}.score-btn:active{transform:scale(.95)}.empty-state{text-align:center;align-items:center;gap:var(--spacing-md);flex-direction:column;max-width:400px;margin:auto;display:flex}.success-icon{font-size:4rem}.back-button{margin-top:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-xl);background-color:var(--primary);color:var(--on-primary);border-radius:var(--radius-md);font-weight:600}.shortcut-legend{gap:var(--spacing-lg);color:var(--on-surface-variant);opacity:.6;pointer-events:none;font-size:.8rem;display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.shortcut-item{align-items:center;gap:6px;display:flex}kbd{background-color:var(--surface-variant);border:1px solid var(--outline);color:var(--on-surface);box-shadow:0 1px 0 var(--outline);border-radius:4px;padding:2px 6px;font-family:inherit;font-weight:600}@media (width<=900px){.shortcut-legend{display:none}}.settings-view{gap:var(--spacing-xl);flex-direction:column;max-width:800px;margin:0 auto;display:flex}.settings-section{padding:var(--spacing-lg);gap:var(--spacing-md);flex-direction:column;display:flex}.section-header{align-items:center;gap:var(--spacing-sm);color:var(--primary);display:flex}.section-description{color:var(--on-surface-variant);margin:0;font-size:.95rem}.font-grid{gap:var(--spacing-md);margin-top:var(--spacing-sm);grid-template-columns:repeat(auto-fill,minmax(180px,1fr));display:grid}.font-option{border:1px solid var(--outline);border-radius:var(--radius-md);transition:all var(--transition-normal);background:var(--surface);flex-direction:column;display:flex;overflow:hidden}.font-option:hover{border-color:var(--primary);background:var(--surface-variant)}.font-option.active{border-color:var(--primary);box-shadow:0 4px 12px var(--shadow);border-width:2px}.font-preview{background:var(--background);border-bottom:1px solid var(--surface-variant);justify-content:center;align-items:center;height:80px;display:flex}.font-preview span{color:var(--on-surface);font-size:2.5rem}.font-info{padding:var(--spacing-sm) var(--spacing-md);background:var(--surface);justify-content:space-between;align-items:center;display:flex}.font-name{color:var(--on-surface);font-size:.85rem;font-weight:500}.check-icon{color:var(--primary)}.settings-list{gap:var(--spacing-sm);flex-direction:column;display:flex}.setting-item{padding:var(--spacing-md);background:var(--surface-variant);border-radius:var(--radius-md);justify-content:space-between;align-items:center;transition:opacity .3s;display:flex}.setting-item.disabled{opacity:.5;pointer-events:none}.setting-info{align-items:center;gap:var(--spacing-md);color:var(--on-surface);display:flex}.setting-text{flex-direction:column;display:flex}.setting-label{font-size:1rem;font-weight:600}.setting-hint{color:var(--on-surface-variant);font-size:.8rem}.switch{width:52px;height:32px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:var(--outline);border-radius:32px;transition:all .4s;position:absolute;inset:0}.slider:before{content:"";background-color:#fff;border-radius:50%;width:24px;height:24px;transition:all .4s;position:absolute;bottom:4px;left:4px}input:checked+.slider{background-color:var(--primary)}input:focus+.slider{box-shadow:0 0 1px var(--primary)}input:checked+.slider:before{transform:translate(20px)}@media (width<=600px){.font-grid{grid-template-columns:1fr 1fr}.setting-item{padding:var(--spacing-sm) var(--spacing-md)}.setting-hint{display:none}}