.modal-overlay{display:none;position:fixed;inset:0;background:#0009;backdrop-filter:blur(4px);z-index:1000;align-items:center;justify-content:center;padding:20px}.modal-overlay.open{display:flex}.modal{background:var(--surface);border-radius:20px;padding:32px;max-width:400px;width:100%;position:relative;animation:modal-slide-up var(--d-slow) ease}@keyframes modal-slide-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.modal-close{position:absolute;top:16px;right:16px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--text2)}.modal-hanzi{font-family:var(--font-hanzi-display);font-size:64px;text-align:center;margin-bottom:8px}.modal-pinyin{text-align:center;color:var(--accent-ink);font-size:20px;font-weight:500;margin-bottom:8px}.modal-level{text-align:center;margin-bottom:20px}.modal-level span{background:var(--primary);color:var(--on-accent);font-size:12px;padding:3px 10px;border-radius:8px}.modal-meanings{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;background:var(--surface2);border-radius:12px;padding:16px}.meaning-row{display:flex;align-items:center;gap:12px;font-size:16px}.lang-badge{font-size:12px;font-weight:700;padding:2px 8px;border-radius:6px}.lang-badge.vi{background:var(--warning-bg);color:var(--status-learning)}.lang-badge.en{background:var(--info-bg);color:var(--info)}.modal-example{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:16px}.ex-label{font-size:12px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}.ex-zh{font-family:var(--font-hanzi);font-size:16px;color:var(--text);margin-bottom:4px;line-height:1.5}.ex-py{font-size:12px;color:var(--accent-ink);margin-bottom:6px}.ex-vi{font-size:13px;color:var(--text2);margin-bottom:2px}.ex-en{font-size:13px;color:var(--text3)}.coming-soon-banner{text-align:center;padding:40px 20px;background:var(--surface);border:1px dashed var(--border);border-radius:16px;color:var(--text2)}.coming-soon-banner .cs-icon{font-size:48px;margin-bottom:12px}.coming-soon-banner h3{font-size:18px;margin-bottom:8px;color:var(--text)}.coming-soon-banner p{font-size:14px}.comeback-overlay{background:var(--overlay)}.comeback-modal{max-width:430px;text-align:center;border:1px solid var(--border);box-shadow:var(--shadow-4)}.comeback-icon{font-size:44px;line-height:1;margin-bottom:14px}.comeback-modal h2{color:var(--text);font-size:var(--t-h2);margin-bottom:10px}.comeback-intro{color:var(--text2);font-size:var(--t-body);line-height:1.6;margin-bottom:20px}.comeback-achievements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:22px}.comeback-achievement{display:flex;flex-direction:column;gap:4px;padding:14px 10px;border:1px solid var(--border);border-radius:var(--r-3);background:var(--info-bg);color:var(--text2)}.comeback-achievement strong{color:var(--info);font-size:var(--t-h2)}.comeback-achievement span{font-size:var(--t-small)}.comeback-actions{display:flex;flex-direction:column;gap:10px}.comeback-cta,.comeback-reset{min-height:46px;width:100%;border-radius:var(--r-3);font-family:var(--font-ui);font-size:var(--t-body);font-weight:700;cursor:pointer;transition:transform var(--d-fast) var(--ease-out),opacity var(--d-fast) var(--ease-out)}.comeback-cta{border:1px solid var(--info-solid);background:var(--info-solid);color:var(--on-accent)}.comeback-reset{border:1px solid var(--border);background:var(--surface2);color:var(--text)}.comeback-cta:hover,.comeback-reset:hover{transform:translateY(-1px)}.comeback-cta:focus-visible,.comeback-reset:focus-visible{outline:2px solid var(--info);outline-offset:2px}.comeback-reset-note{color:var(--text3);font-size:var(--t-small);line-height:1.45}.comeback-spread{margin:-8px 0 18px;color:var(--text2);font-size:var(--t-small);line-height:1.5}@media(max-width:420px){.comeback-overlay{padding:14px}.comeback-modal{padding:26px 18px}}.settings-overlay{position:fixed;inset:0;background:#0009;z-index:1200;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px);animation:modal-fade-in var(--d-base) ease}.settings-modal{background:var(--bg);border:1px solid var(--border);border-radius:20px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;padding:0;box-shadow:0 20px 60px #00000080;animation:modal-slide-up var(--d-med) ease}.sm-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:1;border-radius:20px 20px 0 0}.sm-header h2{margin:0;font-size:17px;font-weight:700}.sm-header-actions{display:flex;align-items:center;gap:10px}.sm-reset-link{background:none;border:none;color:var(--text2);font-size:13px;cursor:pointer;display:flex;align-items:center;gap:4px}.sm-reset-link:hover{color:var(--accent-text)}.sm-close{background:var(--surface);border:1px solid var(--border);border-radius:50%;width:32px;height:32px;font-size:14px;cursor:pointer;color:var(--text2);transition:color var(--d-base),background-color var(--d-base),border-color var(--d-base),box-shadow var(--d-base),opacity var(--d-base),transform var(--d-base)}.sm-close:hover{background:var(--chau-hong);color:var(--on-accent);border-color:transparent}.sm-section{padding:16px 24px;border-bottom:1px solid var(--border)}.sm-section:last-of-type{border-bottom:none}.sm-section-title{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}.sm-lang-row{display:flex;gap:10px}.sm-lang-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border:2px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:14px;font-weight:600;cursor:pointer;transition:border-color var(--d-fast),background var(--d-fast)}.sm-lang-btn.active{border-color:var(--primary);background:var(--primary);color:var(--on-accent)}.sm-lang-btn:not(.active):hover{border-color:var(--primary)}.sm-lang-flag{font-size:18px}.sm-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--border)}.sm-row:last-child{border-bottom:none}.sm-row>label{font-size:14px;color:var(--text);flex:1;cursor:default}.sm-row>.sm-toggle{flex:0 0 auto;cursor:pointer}.sm-row-info{display:flex;flex-direction:column;gap:2px;flex:1}.sm-row-label{font-size:14px;font-weight:500;color:var(--text)}.sm-row-desc{font-size:12px;color:var(--text2)}.sm-control{flex-shrink:0}.sm-color-row{display:flex;gap:12px;flex-wrap:wrap}.sm-color-dot{width:34px;height:34px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:transform var(--d-fast),border-color var(--d-fast)}.sm-color-dot:hover{transform:scale(1.15)}.sm-color-dot.active{border-color:var(--text);transform:scale(1.1)}.sm-collapse-btn{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;color:var(--text2);font-size:14px;font-weight:600;cursor:pointer;padding:0;text-align:left}.sm-collapse-btn:hover{color:var(--accent-text)}.sm-collapse-icon{font-size:18px;transition:transform var(--d-base)}.sm-collapse-icon.open{transform:rotate(90deg)}.sm-advanced{margin-top:14px;display:flex;flex-direction:column;gap:0}.sm-adv-save{padding-top:12px;display:flex;justify-content:flex-end}.sm-control input[type=number],.sm-control select{background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;padding:6px 10px;width:100px;text-align:center;font-family:var(--font-ui)}.sm-control select{width:180px;text-align:left;cursor:pointer}.sm-control input:focus,.sm-control select:focus{outline:none;border-color:var(--primary)}.sm-control input:focus-visible,.sm-control select:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.sm-toggle{position:relative;display:inline-block;width:46px;height:26px;cursor:pointer}.sm-toggle input{opacity:0;width:0;height:0}.sm-slider{position:absolute;inset:0;background:var(--surface2);border-radius:26px;border:1px solid var(--border);transition:color var(--d-slow),background-color var(--d-slow),border-color var(--d-slow),box-shadow var(--d-slow),opacity var(--d-slow),transform var(--d-slow)}.sm-slider:before{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:var(--surface);bottom:2px;left:2px;transition:color var(--d-slow),background-color var(--d-slow),border-color var(--d-slow),box-shadow var(--d-slow),opacity var(--d-slow),transform var(--d-slow);box-shadow:0 1px 4px #0000004d}.sm-toggle input:checked+.sm-slider{background:var(--primary);border-color:var(--primary)}.sm-toggle input:checked+.sm-slider:before{transform:translate(20px)}.sm-actions{display:flex;gap:12px;padding:16px 24px 20px;position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--border)}.sm-btn-reset{flex:1;padding:11px;border-radius:12px;background:var(--surface);border:1px solid var(--border);color:var(--text2);font-size:14px;font-weight:600;cursor:pointer;transition:color var(--d-base),background-color var(--d-base),border-color var(--d-base),box-shadow var(--d-base),opacity var(--d-base),transform var(--d-base);font-family:var(--font-ui)}.sm-btn-reset:hover{border-color:var(--primary);color:var(--accent-text)}.sm-btn-save{flex:2;padding:11px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--accent));border:none;color:var(--on-accent);font-size:14px;font-weight:700;cursor:pointer;transition:color var(--d-base),background-color var(--d-base),border-color var(--d-base),box-shadow var(--d-base),opacity var(--d-base),transform var(--d-base);font-family:var(--font-ui);box-shadow:0 4px 12px #6366f14d}.sm-btn-save:hover{transform:translateY(-1px);box-shadow:0 6px 18px #6366f166}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes pmSpin{to{transform:rotate(360deg)}}.streak-card{position:relative;overflow:hidden}.streak-card .stat-num{color:var(--accent-ink)}.streak-fire{font-size:24px;vertical-align:middle;margin-left:2px}.sm-footer{text-align:center;padding:14px 24px;font-size:12px;color:var(--text3);border-top:1px solid var(--border);margin-top:8px}.sm-footer a{color:var(--text3);text-decoration:none}.sm-footer a:hover{color:var(--accent-text)}.sf-dot{margin:0 6px}.auth-legal{font-size:12px;color:var(--text3);text-align:center;margin-top:8px}.auth-legal a{color:var(--text3);text-decoration:underline}.auth-legal a:hover{color:var(--accent-text)}.auth-terms{display:flex;align-items:flex-start;gap:10px;min-height:44px;margin:4px 0 12px;font-size:13px;line-height:1.45;color:var(--text2);text-align:left;cursor:pointer}.auth-terms input{flex:0 0 auto;width:18px;height:18px;margin-top:1px;accent-color:var(--accent);cursor:pointer}.auth-terms a{color:var(--accent-text);text-decoration:underline}.pro-gate-overlay{position:fixed;inset:0;background:#0009;z-index:9000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}.pro-gate-card{background:var(--surface);border-radius:20px;padding:32px 28px;max-width:320px;width:90%;text-align:center;border:1.5px solid var(--border)}.pro-gate-icon{font-size:40px;margin-bottom:12px}.pro-gate-card h2{font-size:18px;font-weight:700;margin-bottom:8px}.pro-gate-card p{font-size:14px;color:var(--text2);margin-bottom:20px}.pro-gate-cta{display:block;width:100%;padding:12px;border-radius:10px;background:var(--primary);color:var(--on-accent);border:none;font-size:15px;font-weight:700;cursor:pointer;margin-bottom:10px;transition:opacity var(--d-fast)}.pro-gate-cta:hover{opacity:.88}.pro-gate-close{display:block;width:100%;padding:10px;border-radius:10px;border:1.5px solid var(--border);background:none;color:var(--text2);font-size:14px;cursor:pointer;transition:border-color var(--d-fast)}.pro-gate-close:hover{border-color:var(--primary)}

.modal-overlay{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:3000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;visibility:hidden;transition:opacity var(--d-med),visibility 0s linear var(--d-med)}.modal-overlay.open{opacity:1;pointer-events:all;visibility:visible;transition:opacity var(--d-med),visibility 0s}body.wd-modal-open{overflow:hidden}.wd-modal{background:var(--surface);border-radius:20px;max-width:520px;width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-4);animation:wdSlideUp var(--d-med) var(--ease-out) backwards}.wd-modal--dragging{animation:none;transition:none}.wd-drag-handle{display:none}@keyframes wdSlideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.wd-header{height:60px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);flex-shrink:0}.wd-header-left{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden}.wd-level-wrap{display:flex;align-items:center;flex-shrink:0}.wd-level-wrap span{font-size:12px;font-weight:700;letter-spacing:.05em;padding:5px 12px;border-radius:999px;background:var(--primary);color:var(--me-bach);white-space:nowrap;line-height:1}.wd-crumb{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wd-close{width:44px;height:44px;border-radius:12px;border:none;background:transparent;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--d-fast),color var(--d-fast);flex-shrink:0}.wd-close:hover{background:var(--surface2);color:var(--text)}.wd-body{flex:1;overflow-y:auto;padding:20px 22px 24px;scrollbar-width:thin;min-height:360px;overscroll-behavior:contain}.wd-body::-webkit-scrollbar{width:6px}.wd-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}.wd-hero{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:flex-start;padding:8px 0 4px;min-height:120px}.wd-hero-text{min-width:0;container-type:inline-size}.wd-hero.wd-hero--img{grid-template-columns:88px minmax(0,1fr) auto}.wd-img{width:88px;height:88px}@media(max-width:767px){.wd-hero.wd-hero--img{grid-template-columns:64px minmax(0,1fr) auto}.wd-img{width:64px;height:64px}}@media(max-width:420px){.wd-hero .wd-hero-actions{grid-template-columns:repeat(2,40px)}.wd-hero[data-noimg] .wd-hero-actions{grid-template-columns:repeat(3,40px)}}.wd-hanzi{font-family:var(--font-hanzi-display);font-size:72px;font-weight:500;line-height:1;color:var(--text);letter-spacing:-.01em}.wd-hero-text{--wd-res: calc(100cqi - 100px) ;--wd-real: 100cqi}.wd-hero--img .wd-hero-text{--wd-res: 100cqi}@media(max-width:767px){.wd-hero-text{--wd-res: calc(100cqi - 76px) }.wd-hero--img .wd-hero-text{--wd-res: 100cqi}}.wd-hero-text .wd-hanzi{white-space:nowrap;font-size:clamp(var(--hz-min, 36px),calc(var(--wd-c, var(--wd-res)) * .96 / var(--n, 2)),52px)}.wd-hanzi[data-len="1"]{--n: 1}.wd-hanzi[data-len="2"]{--n: 2}.wd-hanzi[data-len="3"]{--n: 3;--wd-c: var(--wd-real)}.wd-hanzi[data-len="3"][data-res]{--wd-c: var(--wd-res)}.wd-hanzi[data-len="4"]{--n: 4;--wd-c: var(--wd-real)}.wd-hanzi[data-len="5"]{--n: 5;--hz-min: 30px;--wd-c: var(--wd-real)}.wd-hanzi[data-len="6"]{--n: 6;--hz-min: 28px;--wd-c: var(--wd-real)}.wd-hanzi[data-len="7"]{--n: 7;--hz-min: 26px;--wd-c: var(--wd-real)}.wd-hanzi[data-len="8"]{--n: 8;--hz-min: 24px;--wd-c: var(--wd-real)}.wd-hanzi[data-len="3"][data-res]~.wd-hero-pinyin-row .wd-pinyin{font-size:clamp(16px,calc(var(--wd-res) * .11),var(--wd-py-max, 24px))}.wd-hanzi[data-len="3"]:not([data-res])~.wd-hero-pinyin-row .wd-pinyin,.wd-hanzi[data-len="4"]~.wd-hero-pinyin-row .wd-pinyin,.wd-hanzi[data-len="5"]~.wd-hero-pinyin-row .wd-pinyin,.wd-hanzi[data-len="6"]~.wd-hero-pinyin-row .wd-pinyin,.wd-hanzi[data-len="7"]~.wd-hero-pinyin-row .wd-pinyin,.wd-hanzi[data-len="8"]~.wd-hero-pinyin-row .wd-pinyin{font-size:clamp(16px,calc(var(--wd-real) * .11),var(--wd-py-max, 24px))}.wd-hero-pinyin-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}.wd-pinyin{font-size:24px;font-weight:400;color:var(--accent-ink);letter-spacing:.01em}.wd-pos-chip{font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--text3);background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:2px 9px;white-space:nowrap}.wd-waveform{display:none;align-items:flex-end;gap:3px;height:22px;margin-top:10px}.wd-modal--playing .wd-waveform{display:flex}.wd-waveform span{width:3px;border-radius:999px;background:var(--primary);animation:wdWave .8s var(--ease-in-out) infinite;height:30%}.wd-waveform span:nth-child(1){animation-delay:0s;height:35%}.wd-waveform span:nth-child(2){animation-delay:.07s;height:85%}.wd-waveform span:nth-child(3){animation-delay:.14s;height:55%}.wd-waveform span:nth-child(4){animation-delay:.21s;height:100%}.wd-waveform span:nth-child(5){animation-delay:.28s;height:45%}.wd-waveform span:nth-child(6){animation-delay:.35s;height:75%}.wd-waveform span:nth-child(7){animation-delay:.42s;height:30%}.wd-waveform span:nth-child(8){animation-delay:.49s;height:65%}@keyframes wdWave{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}.wd-hero-actions{display:grid;grid-template-columns:repeat(3,40px);grid-auto-rows:40px;gap:8px;padding-top:4px}.wd-icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color var(--d-fast),border-color var(--d-fast),color var(--d-fast),box-shadow var(--d-fast),transform var(--d-fast),opacity var(--d-fast),filter var(--d-fast)}.wd-icon-btn svg{width:16px;height:16px}.wd-icon-btn:hover{background:var(--surface2);color:var(--text)}.wd-icon-btn--accent{color:var(--accent-text);border-color:#dc26264d}.wd-icon-btn--accent:hover{background:var(--primary);color:var(--me-bach);border-color:var(--primary)}.wd-modal--playing .wd-icon-btn--accent{background:var(--primary);color:var(--me-bach);border-color:var(--primary);box-shadow:0 4px 14px #dc262659}.wd-stroke-container{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:16px;margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:10px}.wd-stroke-btns{display:flex;gap:8px}.wd-stroke-btn{background:var(--primary);color:var(--me-bach);border:none;border-radius:10px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:opacity var(--d-fast),transform var(--d-fast);font-family:var(--font-ui)}.wd-stroke-btn:hover{opacity:.85;transform:translateY(-1px)}.wd-stroke-btn--outline{background:transparent;border:1.5px solid var(--primary);color:var(--accent-text)}.wd-stroke-btn--outline:hover{background:var(--primary);color:var(--me-bach)}.wd-section{margin-top:22px}.wd-section-title{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);margin-bottom:10px}.wd-meanings{display:flex;flex-direction:column;gap:8px}.wd-meaning-row{display:flex;align-items:baseline;gap:10px;padding:3px 0}.wd-lang-badge{font-size:12px;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:6px;color:var(--me-bach);flex-shrink:0;line-height:1.5}.wd-lang-badge--vi{background:var(--hoang-kim);color:var(--on-gold)}.wd-lang-badge--en{background:var(--info-solid)}.wd-meaning-text{font-size:17px;font-weight:500;color:var(--text);line-height:1.4}.wd-meaning-text--en{font-size:15px;font-weight:400;color:var(--text2)}.wd-example-section{margin-top:22px}.wd-example-card{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}.wd-ex-zh{font-family:var(--font-hanzi);font-size:18px;color:var(--text);line-height:1.5;margin-bottom:2px}.wd-ex-py{font-size:13px;color:var(--accent-ink)}.wd-ex-vi{font-size:13px;color:var(--text2)}.wd-ex-en{font-size:12px;color:var(--text3);font-style:italic}.wd-example-card--empty{align-items:center;text-align:center;background:var(--surface);border-style:dashed;padding:22px 16px}.wd-example-card--empty .wd-ex-zh{font-family:inherit;font-size:14px;color:var(--text3);margin-bottom:0}.wd-example-card--empty .wd-ex-py,.wd-example-card--empty .wd-ex-vi,.wd-example-card--empty .wd-ex-en{display:none}.wd-footer{height:68px;padding:0 18px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);flex-shrink:0}.wd-footer-right{display:flex;gap:8px}.wd-btn{font-family:var(--font-ui);font-size:14px;font-weight:600;padding:9px 16px;border-radius:10px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background-color var(--d-fast),border-color var(--d-fast),color var(--d-fast),box-shadow var(--d-fast),transform var(--d-fast),opacity var(--d-fast),filter var(--d-fast);letter-spacing:.005em;white-space:nowrap;min-height:44px}.wd-btn svg{width:14px;height:14px;flex-shrink:0}.wd-btn--ghost{color:var(--text2);background:transparent;border-color:transparent}.wd-btn--ghost:hover{background:var(--surface2);color:var(--text)}.wd-btn--outline{color:var(--accent-text);border-color:#dc262666;background:transparent}.wd-btn--outline:hover{background:#dc262612;border-color:var(--primary)}.wd-btn--primary{color:var(--me-bach);background:var(--primary);box-shadow:0 4px 0 var(--chau-hong-2)}.wd-btn--primary:hover{transform:translateY(-1px);box-shadow:0 7px 20px #dc262666}[data-theme=dark] .wd-level-wrap span{box-shadow:0 0 0 1px #ef44444d,0 4px 12px #dc26264d}[data-theme=dark] .wd-hanzi{text-shadow:0 0 24px rgba(245,158,11,.12)}[data-theme=dark] .wd-btn--outline{border-color:color-mix(in srgb,var(--primary) 45%,transparent);color:color-mix(in srgb,var(--primary) 65%,var(--me-bach))}[data-theme=dark] .wd-btn--outline:hover{background:var(--primary-soft);color:color-mix(in srgb,var(--primary) 80%,var(--me-bach))}@media(max-width:767px){.modal-overlay{align-items:flex-end;padding:0;overscroll-behavior:none}.wd-modal{border-radius:20px 20px 0 0;max-height:calc(94dvh - env(safe-area-inset-top));touch-action:pan-y}.wd-drag-handle{height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;touch-action:none}.wd-drag-handle span{width:42px;height:4px;border-radius:var(--r-pill);background:var(--border-strong)}.wd-header{height:52px;padding-left:18px;touch-action:none}.wd-pinyin{font-size:20px}.wd-hero-text{--wd-py-max: 20px}.wd-body{min-height:0;padding:16px 18px 20px}.wd-footer{height:auto;padding:12px 18px calc(12px + env(safe-area-inset-bottom));flex-wrap:wrap}.wd-footer-right{flex:1}.wd-btn--primary{flex:1;justify-content:center}}.w-full{width:100%}.sr-xp{font-size:22px;font-weight:700;color:var(--accent-ink);text-align:center;margin:8px 0}.deck-list-view{display:flex;flex-direction:column;gap:2px}.hsk-list-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 16px;transition:color var(--d-base),background-color var(--d-base),border-color var(--d-base),box-shadow var(--d-base),opacity var(--d-base),transform var(--d-base);margin-bottom:2px}.hsk-list-row:hover{border-color:var(--primary);background:var(--surface2)}.hsk-expand-btn{background:var(--surface2);border:1px solid var(--border);border-radius:8px;width:28px;height:28px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out),transform var(--d-base) var(--ease-out);flex-shrink:0;color:var(--text2)}.hsk-expand-btn:hover{background:var(--primary);color:var(--me-bach);border-color:transparent}.hsk-expand-btn.expanded{transform:rotate(90deg)}.hsk-row-icon{font-size:22px;flex-shrink:0}.hsk-row-info{flex:1}.hsk-row-title{font-size:15px;font-weight:700;color:var(--text)}.hsk-row-sub{font-size:12px;color:var(--text2);margin-top:2px}.hsk-row-badges{display:flex;gap:4px;flex-wrap:wrap}.btn-learn-deck{background:var(--primary);color:var(--me-bach);border:none;border-radius:8px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:opacity var(--d-base) var(--ease-out),transform var(--d-fast) var(--ease-out);white-space:nowrap;flex-shrink:0;font-family:var(--font-ui)}.btn-learn-deck:hover{opacity:.85;transform:translateY(-1px)}.hsk-sub-row{align-items:center;gap:10px;padding:9px 16px 9px 40px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;margin-bottom:2px;transition:color var(--d-base),background-color var(--d-base),border-color var(--d-base),box-shadow var(--d-base),opacity var(--d-base),transform var(--d-base)}.hsk-sub-row:hover{border-color:var(--accent)}.hsk-sub-indent{color:var(--text3);font-size:14px;flex-shrink:0}.hsk-sub-icon{font-size:16px;flex-shrink:0}.hsk-sub-name{font-size:14px;font-weight:600;color:var(--text);flex:1}.hsk-sub-count{font-size:12px;color:var(--text2);white-space:nowrap}.hsk-sub-badges{display:flex;gap:4px}.btn-learn-sub{background:var(--surface);border:1px solid var(--primary);color:var(--accent-text);border-radius:8px;padding:5px 12px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:4px;cursor:pointer;transition:background var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out);white-space:nowrap;font-family:var(--font-ui)}.btn-learn-sub:hover{background:var(--primary);color:var(--me-bach)}.srs-badge{font-size:12px;font-weight:600;border-radius:6px;padding:2px 7px;white-space:nowrap}.srs-new{background:var(--info-bg);color:var(--info)}.srs-due{background:var(--status-learning-bg);color:var(--status-learning)}.srs-relearn{background:var(--danger-bg);color:var(--danger)}.srs-done{background:var(--status-mastered-bg);color:var(--status-mastered)}.deck-srs-badges{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0 2px}.deck-srs-stats{gap:8px;flex-wrap:wrap;padding:10px 0;margin-bottom:4px}.srs-stat{font-size:13px;font-weight:600;padding:5px 12px;border-radius:8px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}.srs-stat-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}.srs-stat.srs-new{background:var(--info-bg);color:var(--info)}.srs-stat.srs-due{background:var(--status-learning-bg);color:var(--status-learning)}.srs-stat.srs-relearn{background:var(--danger-bg);color:var(--danger)}.xp-bar-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin-bottom:16px}.xp-bar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.xp-label{font-size:14px;font-weight:700;color:var(--accent-ink)}.xp-level-label{font-size:12px;color:var(--text2)}.xp-bar-track{height:8px;background:var(--surface2);border-radius:99px;overflow:hidden}.xp-bar-fill{height:100%;background:linear-gradient(90deg,var(--progress-fill),var(--accent));border-radius:99px;transition:width .6s ease}.xp-bar-footer{font-size:12px;color:var(--text2);margin-top:6px}.streak-calendar{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin-bottom:20px}.sc-title{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:10px}.sc-days{display:flex;gap:6px;justify-content:space-between}.sc-day{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;padding:8px 4px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);transition:color var(--d-base),background-color var(--d-base),border-color var(--d-base),box-shadow var(--d-base),opacity var(--d-base),transform var(--d-base)}.sc-day.active{background:color-mix(in srgb,var(--hsk-8) 12%,transparent);border-color:var(--hsk-8)}.sc-day.today{border-color:var(--primary);box-shadow:0 0 0 2px rgba(var(--primary-rgb),.2)}.sc-dot{font-size:18px;line-height:1}.sc-label{font-size:12px;color:var(--text2);font-weight:600}.sc-day.active .sc-label{color:var(--hsk-8)}.wd-confusion-section{margin-top:18px}.wd-confusion-card{background:color-mix(in srgb,var(--accent) 7%,var(--surface2));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));border-left:3px solid var(--accent);border-radius:12px;padding:13px 15px;display:flex;flex-direction:column;gap:8px}.wd-conf-note{font-size:13px;color:var(--text);line-height:1.55;margin:0}.wd-conf-ex{display:flex;flex-direction:column;gap:2px;padding-top:8px;border-top:1px dashed var(--border)}.wd-conf-ex-zh{font-family:var(--font-hanzi);font-size:15px;color:var(--text)}.wd-conf-ex-py{font-size:var(--t-pinyin-min);color:var(--accent-ink)}.wd-conf-ex-vi{font-size:12px;color:var(--text2)}.wd-conf-title,.dd-conf-title{display:flex;align-items:center;flex-wrap:wrap;gap:5px}.dd-conf-link{border:0;border-bottom:1px solid currentColor;padding:0 1px;background:transparent;color:var(--accent-text);font:inherit;font-family:var(--font-hanzi);font-size:14px;font-weight:800;line-height:1.4;cursor:pointer}.dd-conf-link:hover{color:var(--accent-text)}.dd-conf-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:var(--r-1)}.dd-conf-sep{color:var(--text3)}.wd-icon-btn--save{color:var(--accent-ink);border-color:color-mix(in srgb,var(--hoang-kim) 30%,var(--border))}.wd-icon-btn--save:hover{background:#f59e0b1f;border-color:var(--hoang-kim);color:var(--accent-ink)}.wd-icon-btn--save.is-saved{background:#f59e0b2e;border-color:var(--hoang-kim);color:var(--accent-ink)}[data-theme=dark] .wd-icon-btn--save{color:var(--hoang-kim-3);border-color:color-mix(in srgb,var(--hoang-kim-3) 30%,var(--border))}[data-theme=dark] .wd-icon-btn--save:hover,[data-theme=dark] .wd-icon-btn--save.is-saved{background:#f59e0b26;border-color:var(--hoang-kim-3);color:var(--hoang-kim-3)}.dd-srs-row,.wd-srs-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;font-size:13px}.dd-srs-dot,.wd-srs-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.dd-srs-dot--new,.wd-srs-dot--new{background:var(--info)}.dd-srs-dot--learned,.wd-srs-dot--learned{background:var(--thuy-luc)}.dd-srs-label,.wd-srs-label{color:var(--text);font-weight:500}.dd-srs-due,.wd-srs-due{color:var(--text3);font-size:12px;margin-left:auto}.dd-srs-due{flex:0 0 calc(100% - 16px);margin-left:16px}.dd-srs-lapses,.wd-srs-lapses{flex:0 0 100%;padding-left:16px;color:var(--text2);font-size:12px}.dd-srs--due,.wd-srs--due{border-color:var(--status-learning);background:var(--status-learning-bg)}.dd-srs--new,.wd-srs--new{border-color:var(--info);background:var(--info-bg)}.dd-srs-cta,.wd-srs-cta{margin-top:6px;padding:8px 16px;border-radius:var(--r-pill);border:1.5px solid var(--primary);background:var(--primary-soft);color:var(--accent-text);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-ui);display:inline-flex;align-items:center;gap:6px;transition:background var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out)}.dd-srs-cta:hover,.wd-srs-cta:hover{background:var(--primary);color:var(--me-bach)}.wd-hanzi{font-size:52px;color:var(--accent-text)}.dd-btn{width:100%;padding:10px;border-radius:var(--r-3);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-ui);display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out)}.dd-btn-primary{background:var(--primary);color:var(--me-bach);border:none}.dd-btn-primary:hover{background:var(--chau-hong-2)}.dd-btn-ghost{background:var(--surface);color:var(--text2);border:1.5px solid var(--border)}.dd-btn-ghost:hover{border-color:var(--primary);color:var(--accent-text)}.dd-pron{margin:8px 16px 0;text-align:center}.dd-pron-open{width:100%;justify-content:center}.dd-pron-err{font-size:13px;color:var(--chau-hong);margin:6px 0 0}.dr-open{margin-top:12px}.dr-form{margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:var(--r-3);background:var(--surface2);display:flex;flex-direction:column;gap:8px}.dr-form label{font-size:13px;color:var(--text2)}.dr-form select,.dr-form textarea{width:100%;font:inherit;font-size:14px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2);padding:8px}.dr-form textarea{min-height:72px;resize:vertical}.dr-row{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}.dr-count{font-size:12px;color:var(--text3)}.dr-msg{font-size:13px;color:var(--text2);margin:0}.dr-msg--err{color:var(--danger)}.dr-mine{font-size:12px;color:var(--text3);margin:4px 0 0;padding-left:18px}.dr-mine li{margin:2px 0}.dd-section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-top:2px}.dd-chars{display:flex;flex-direction:column;gap:6px}.dd-char-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:10px}.dd-char-row--link{cursor:pointer}.dd-char-row--link:hover{border-color:var(--primary)}.dd-char-h{font-family:var(--font-zh-kai);font-size:24px;line-height:1;flex-shrink:0}.dd-char-info{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;min-width:0}.dd-char-py{font-size:var(--t-pinyin-min);color:var(--accent-ink)}.dd-char-hv{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:.03em}.dd-char-vi{font-size:13px;color:var(--text2)}.dd-rel-chips{display:flex;flex-wrap:wrap;gap:6px}.dd-rel-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:999px;cursor:pointer;font-family:var(--font-ui);color:var(--text);max-width:100%;transition:border-color var(--d-base) var(--ease-out)}.dd-rel-chip:hover{border-color:var(--primary)}.dd-rel-h{font-family:var(--font-hanzi);font-size:15px}.dd-rel-v{font-size:12px;color:var(--text2);max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dd-rel-lv{font-size:12px;color:var(--text3)}.wd-section>.dd-section-title{margin-bottom:10px}.dd-fam{display:flex;flex-direction:column;gap:10px;min-width:0;container-type:inline-size}.dd-fam-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:640px;position:relative}.dd-fam-item{display:flex;min-width:0;position:relative;z-index:1}.dd-fam--ring .dd-fam-grid{grid-auto-rows:1fr}.dd-fam--ring .dd-fam-grid:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(var(--border-control),var(--border-control)) center / 100% 1px no-repeat,linear-gradient(var(--border-control),var(--border-control)) center / 1px 100% no-repeat,linear-gradient(to top right,transparent calc(50% - .6px),var(--border-control) calc(50% - .6px),var(--border-control) calc(50% + .6px),transparent calc(50% + .6px)),linear-gradient(to bottom right,transparent calc(50% - .6px),var(--border-control) calc(50% - .6px),var(--border-control) calc(50% + .6px),transparent calc(50% + .6px))}.dd-fam-cell{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 8px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-3);color:var(--text);font-family:var(--font-ui);text-align:center;cursor:pointer;transition:border-color var(--d-base) var(--ease-out)}.dd-fam-cell:hover{border-color:var(--primary)}.dd-fam-cell:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.dd-fam-py{font-size:var(--t-pinyin-min);line-height:1.3;color:var(--accent-ink)}.dd-fam-h{font-family:var(--font-zh-kai);font-size:22px;line-height:1.25;color:var(--text);overflow-wrap:anywhere}.dd-fam-x{color:var(--accent-text)}.dd-fam-v,.dd-fam-cv{font-size:12px;line-height:1.35;color:var(--text2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.dd-fam-lv{font-size:12px;line-height:1.2;color:var(--text3)}.dd-fam-center{justify-content:center}.dd-fam-core{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 8px;background:var(--surface);border:1.5px solid var(--primary);border-radius:var(--r-3);text-align:center}.dd-fam-box{width:64px;height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-control);background:linear-gradient(var(--border),var(--border)) center / 100% 1px no-repeat,linear-gradient(var(--border),var(--border)) center / 1px 100% no-repeat,linear-gradient(to top right,transparent calc(50% - .5px),var(--border) calc(50% - .5px),var(--border) calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(to bottom right,transparent calc(50% - .5px),var(--border) calc(50% - .5px),var(--border) calc(50% + .5px),transparent calc(50% + .5px)),var(--surface)}.dd-fam-big{font-family:var(--font-hanzi-display);font-size:44px;font-weight:500;line-height:1;color:var(--text)}.dd-fam-cpy{font-size:13px;font-weight:600;color:var(--accent-ink)}.dd-fam--stack .dd-fam-grid{display:flex;flex-wrap:wrap;justify-content:center}.dd-fam--stack .dd-fam-item{flex:0 1 150px}.dd-fam--stack .dd-fam-center{flex:1 1 100%}.dd-fam--stack .dd-fam-core{flex:0 1 220px}.dd-fam-save{align-self:flex-start;min-height:36px;padding:6px 14px;border:1px solid var(--border-control);border-radius:8px;background:var(--surface);color:var(--accent-ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}.dd-fam-save:hover{border-color:var(--primary)}.dd-fam-save:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.dd-fam-save[aria-busy=true]{opacity:.6;cursor:progress}.dd-fam-more>summary{cursor:pointer;width:fit-content;padding:6px 2px;font-size:13px;font-weight:600;color:var(--accent-text)}.dd-fam-more>summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:4px}.dd-fam-more .dd-rel-chips{margin-top:8px}@container (max-width: 460px){.dd-fam--ring .dd-fam-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:10px}.dd-fam--ring .dd-fam-grid:before{display:none}.dd-fam--ring .dd-fam-center{order:-1;grid-column:1 / -1}.dd-fam--ring .dd-fam-core{flex:0 1 220px}.dd-fam--stack .dd-fam-grid{gap:10px}.dd-fam--stack .dd-fam-item:not(.dd-fam-center){flex:0 1 calc(50% - 5px)}}

.deck-tabs{display:flex;gap:var(--s-5);margin-bottom:20px;border-bottom:1px solid var(--border)}.dtab{padding:10px 2px;border:none;background:none;color:var(--text2);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font-ui);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out)}.dtab:hover{color:var(--text)}.dtab.active{color:var(--accent-text);border-bottom-color:var(--primary)}.deck-view-toggle{display:flex;gap:6px}.dvt-btn{width:34px;height:34px;border-radius:var(--r-2);border:1px solid var(--border);background:var(--surface);color:var(--text2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out)}.dvt-btn:hover{color:var(--text);border-color:var(--primary)}.dvt-btn.active{background:var(--primary);color:var(--me-bach);border-color:transparent}.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.deck-grid.list-view{grid-template-columns:1fr;gap:10px}.deck-avatar{--deck-avatar-color: var(--primary);width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--deck-avatar-color) 42%,var(--border));background:color-mix(in srgb,var(--deck-avatar-color) 14%,var(--surface));color:var(--deck-avatar-color);font-size:21px;line-height:1}.deck-avatar--system{font-family:var(--font-ui);font-size:17px;font-weight:800}.deck-avatar--compact{width:34px;height:34px;font-size:17px}.deck-avatar--compact.deck-avatar--system{font-size:14px}.deck-avatar--large{width:44px;height:44px;font-size:22px}.deck-avatar--large.deck-avatar--system{font-size:18px}.deck-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;cursor:pointer;transition:background-color var(--d-base),border-color var(--d-base),color var(--d-base),box-shadow var(--d-base),transform var(--d-base),opacity var(--d-base),filter var(--d-base);box-shadow:var(--shadow);position:relative}.deck-card:hover{transform:translateY(-3px);border-color:var(--primary);box-shadow:var(--shadow-2)}.deck-card-icon{margin-bottom:8px}.deck-card-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:4px}.deck-card-count{font-size:12px;color:var(--text2);margin-bottom:10px}.deck-progress-bar{height:6px;margin-bottom:6px}.deck-progress-fill{height:100%;border-radius:var(--r-pill);background:var(--progress-fill);transition:width var(--d-slow) var(--ease-out)}.deck-progress-pct{font-size:12px;color:var(--text3);margin-bottom:10px}.deck-card-menu{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--text3);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:6px;transition:color var(--d-base),background-color var(--d-base),border-color var(--d-base),box-shadow var(--d-base),opacity var(--d-base),transform var(--d-base)}.deck-card-menu:hover{background:var(--surface2);color:var(--text)}.deck-card-due{font-size:12px;color:var(--accent-ink);font-weight:600}.deck-grid.list-view .deck-card{display:flex;align-items:center;gap:16px;padding:14px 20px}.deck-grid.list-view .deck-card-icon{margin-bottom:0;flex-shrink:0}.deck-grid.list-view .deck-card-body{flex:1}.deck-grid.list-view .deck-card-title{font-size:15px;margin-bottom:2px}.deck-grid.list-view .deck-card-count{margin-bottom:4px}.deck-grid.list-view .deck-progress-bar{margin-bottom:0}.deck-card-create{border:2px dashed var(--border);background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text3);min-height:140px;font-size:14px;font-weight:500}.deck-card-create:hover{border-color:var(--primary);color:var(--accent-text);transform:translateY(-3px)}.deck-card-create .plus{font-size:32px}.my-decks-toolbar{display:flex;gap:10px;margin-bottom:16px}.btn-outline{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;transition:color var(--d-base),background-color var(--d-base),border-color var(--d-base),box-shadow var(--d-base),opacity var(--d-base),transform var(--d-base)}.btn-outline:hover{border-color:var(--primary);color:var(--accent-text)}.btn-back{font-family:var(--font-ui)}.deck-detail-meta{display:flex;gap:16px;margin-bottom:20px}.deck-detail-meta span{font-size:14px;font-weight:600;color:var(--text2);background:var(--surface2);padding:4px 12px;border-radius:20px}.mode-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:8px}.mode-btn{background:var(--surface);border:2px solid var(--border);border-radius:14px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:22px;cursor:pointer;transition:background-color var(--d-base),border-color var(--d-base),color var(--d-base),box-shadow var(--d-base),transform var(--d-base),opacity var(--d-base),filter var(--d-base);color:var(--text)}.mode-btn span{font-size:12px;font-weight:600;color:var(--text2);text-align:center;line-height:1.3}.mode-btn small{font-size:12px;color:var(--text3)}.mode-btn:hover:not(.disabled){border-color:var(--primary);transform:translateY(-2px)}.mode-btn.active{border-color:var(--primary);background:#c0392b14}.mode-btn.active span{color:var(--accent-text)}.mode-btn.disabled{opacity:.5;cursor:default}.deck-word-preview{margin-top:20px}.deck-word-preview-label{font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;margin-bottom:10px}.preview-word-grid{display:flex;flex-wrap:wrap;gap:8px}.preview-word-chip{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-family:var(--font-hanzi);font-size:16px;color:var(--text)}.preview-word-chip small{font-size:12px;color:var(--text2);margin-left:4px;font-family:var(--font-ui)}.vault-deck-list{display:flex;flex-direction:column;gap:12px}.vault-deck-item{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:14px}.vdi-icon{display:flex;flex-shrink:0}.vdi-info{flex:1}.vdi-title{font-size:15px;font-weight:700;color:var(--text)}.vdi-meta{font-size:12px;color:var(--text2);margin-top:2px}.vdi-actions{display:flex;gap:8px}.vdi-btn{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;transition:color var(--d-base),background-color var(--d-base),border-color var(--d-base),box-shadow var(--d-base),opacity var(--d-base),transform var(--d-base);white-space:nowrap}.vdi-btn:hover{background:var(--primary);color:var(--me-bach);border-color:transparent}.vdi-btn.danger:hover{background:var(--danger-bg);color:var(--danger);border-color:var(--danger)}.edit-deck-name-row{display:flex;gap:10px;margin-bottom:16px}.deck-name-input{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:15px;color:var(--text);outline:none;font-family:var(--font-ui);transition:color var(--d-base),background-color var(--d-base),border-color var(--d-base),box-shadow var(--d-base),opacity var(--d-base),transform var(--d-base)}.deck-name-input:focus{border-color:var(--primary)}.deck-name-input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.edit-deck-search{margin-bottom:16px}.edit-deck-search input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 16px;font-size:14px;color:var(--text);outline:none;font-family:var(--font-ui);transition:color var(--d-base),background-color var(--d-base),border-color var(--d-base),box-shadow var(--d-base),opacity var(--d-base),transform var(--d-base)}.edit-deck-search input:focus{border-color:var(--primary)}.edit-deck-search input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.edit-search-results{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:200px;overflow-y:auto}.edit-search-item{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:10px}.esi-hanzi{font-family:var(--font-hanzi);font-size:22px;flex-shrink:0}.esi-info{flex:1}.esi-pinyin{font-size:12px;color:var(--accent-ink)}.esi-meaning{font-size:13px;color:var(--text2)}.esi-add{background:var(--primary);color:var(--me-bach);border:none;border-radius:8px;width:28px;height:28px;font-size:16px;cursor:pointer;transition:transform var(--d-fast) var(--ease-out);flex-shrink:0}.esi-add:hover{transform:scale(1.1)}.esi-add.added{background:var(--success)}.edit-words-label{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:10px}.edit-words-list{display:flex;flex-wrap:wrap;gap:8px}.edit-word-chip{display:flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:6px 10px}.ewc-hanzi{font-family:var(--font-hanzi);font-size:18px}.ewc-meaning{font-size:12px;color:var(--text2)}.ewc-del{background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px;padding:0 2px;transition:color var(--d-base),background-color var(--d-base),border-color var(--d-base),box-shadow var(--d-base),opacity var(--d-base),transform var(--d-base)}.ewc-del:hover{color:var(--danger)}.popup-overlay{position:fixed;inset:0;background:#00000080;backdrop-filter:blur(4px);z-index:4000;display:flex;align-items:center;justify-content:center;padding:20px}.add-deck-popup{background:var(--surface);border-radius:16px;padding:20px;min-width:260px;max-width:320px;width:100%;box-shadow:0 20px 60px #0000004d;position:relative;animation:modal-slide-up var(--d-med) ease}.adp-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:14px}.adp-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;max-height:240px;overflow-y:auto}.adp-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:color var(--d-base),background-color var(--d-base),border-color var(--d-base),box-shadow var(--d-base),opacity var(--d-base),transform var(--d-base);font-size:14px;font-weight:500}.adp-item:hover{border-color:var(--primary)}.adp-item.in-deck{border-color:var(--success);color:var(--success)}.adp-item .adp-check{font-size:16px}.adp-deck-label{display:flex;align-items:center;gap:10px;min-width:0}.adp-new{width:100%;padding:10px;background:var(--surface2);border:1px dashed var(--border);border-radius:10px;color:var(--text2);font-size:14px;font-weight:600;cursor:pointer;transition:color var(--d-base),background-color var(--d-base),border-color var(--d-base),box-shadow var(--d-base),opacity var(--d-base),transform var(--d-base);margin-bottom:6px;font-family:var(--font-ui)}.adp-new:hover{border-color:var(--primary);color:var(--accent-text)}.adp-close{position:absolute;top:12px;right:12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:4px 8px;cursor:pointer;color:var(--text2);font-size:14px;transition:color var(--d-base),background-color var(--d-base),border-color var(--d-base),box-shadow var(--d-base),opacity var(--d-base),transform var(--d-base)}.adp-close:hover{background:var(--primary);color:var(--me-bach)}@media(max-width:768px){.mode-picker{grid-template-columns:repeat(2,1fr)}.deck-grid{grid-template-columns:repeat(2,1fr);gap:10px}.deck-grid.list-view{grid-template-columns:1fr}.deck-card{padding:14px}.vdi-actions{flex-direction:column;gap:4px}}.dhp-popup{position:fixed;z-index:8000;width:280px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 36px #0006;padding:14px;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity var(--d-fast) ease,transform var(--d-fast) ease}.dhp-popup.dhp-visible{opacity:1;transform:translateY(0)}.dhp-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.dhp-icon{display:flex}.dhp-title{font-size:14px;font-weight:700;flex:1}.dhp-pct{font-size:12px;color:var(--accent-text);font-weight:600}.dhp-bar-wrap{height:4px;background:var(--border);border-radius:2px;margin-bottom:10px;overflow:hidden}.dhp-bar-fill{height:100%;background:var(--progress-fill);border-radius:2px}.dhp-words{display:flex;flex-wrap:wrap;gap:6px}.dhp-word-chip{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:3px 8px;font-size:12px;font-family:var(--font-hanzi)}.dhp-word-chip small{color:var(--text2);font-size:12px;margin-left:3px;font-family:var(--font-ui, sans-serif)}.dhp-footer{margin-top:10px;font-size:12px;color:var(--text3);text-align:right}.deck-empty-state{padding:var(--s-8) var(--s-4);text-align:center;color:var(--text2);border:1px dashed var(--border);border-radius:var(--r-4);background:var(--surface)}.deck-empty-state img{width:112px;height:112px;object-fit:contain;display:block;margin:0 auto var(--s-3)}.deck-empty-state h3{margin:0 0 var(--s-1);color:var(--text);font-size:var(--t-h3)}.deck-empty-state p{margin:0 auto var(--s-4);max-width:34ch}@media(max-width:1024px){.dhp-popup{display:none!important}}.btn-exit{display:inline-flex;align-items:center;justify-content:center;background:var(--surface2);border:none;width:36px;height:36px;border-radius:50%;color:var(--text2);cursor:pointer;flex-shrink:0;transition:background var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out)}.btn-exit:hover{background:var(--danger-bg);color:var(--danger)}.btn-sm{padding:8px 14px;font-size:13px;white-space:nowrap}.btn-back{background:none;border:none;color:var(--accent-ink);cursor:pointer;font-size:.9rem;padding:4px 0}.fc-more{width:100%;margin-top:4px;text-align:left}.fc-more[hidden],.fc-more-panel[hidden],.fc-more-status[hidden],.fc-more-host[hidden]{display:none}.fc-more-btn{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--border-control);border-radius:var(--r-3);background:var(--surface);color:var(--text);font-family:var(--font-ui);font-size:14px;font-weight:600;text-align:left;cursor:pointer;transition:border-color var(--d-fast) var(--ease-out)}.fc-more-btn:hover{border-color:var(--primary)}.fc-more-label{flex-shrink:0}.fc-more-sub{flex:1;min-width:0;font-size:12px;font-weight:500;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fc-more-chev{flex-shrink:0;margin-left:auto;color:var(--text2);transition:transform var(--d-fast) var(--ease-out)}.fc-more.is-open .fc-more-chev{transform:rotate(180deg)}.fc-more-panel{margin-top:8px;cursor:auto}.fc-more-status{margin:0;font-size:13px;color:var(--text2)}.fc-more-host .dx{margin:0}

.streak-calendar{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin-bottom:20px}.sc-title{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:10px}.sc-days{display:flex;gap:6px;justify-content:space-between}.sc-day{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;padding:8px 4px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);transition:color var(--d-base),background-color var(--d-base),border-color var(--d-base),box-shadow var(--d-base),opacity var(--d-base),transform var(--d-base)}.sc-day.active{background:color-mix(in srgb,var(--hsk-8) 12%,transparent);border-color:var(--hsk-8)}.sc-day.today{border-color:var(--primary);box-shadow:0 0 0 2px rgba(var(--primary-rgb),.2)}.sc-label{font-size:12px;color:var(--text2);font-weight:600}.sc-day.active .sc-label{color:var(--hsk-8)}.streak-card{position:relative;overflow:hidden}.streak-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(234,88,12,.08),transparent);pointer-events:none}.streak-fire{font-size:18px;margin-left:2px}.streak-calendar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:28px;box-shadow:var(--shadow)}.sc-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:12px}.sc-days{display:flex;justify-content:space-between;gap:8px}.sc-day{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;padding:10px 6px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);transition:background-color var(--d-base),border-color var(--d-base),color var(--d-base),box-shadow var(--d-base),transform var(--d-base),opacity var(--d-base),filter var(--d-base)}.sc-day.today{border-color:var(--primary);box-shadow:0 0 0 2px #c0392b26}.sc-day.active{background:linear-gradient(135deg,#c0392b1a,#f39c121a);border-color:var(--accent)}[data-theme=dark] .sc-day.active{background:linear-gradient(135deg,#c0392b33,#f39c1226)}.sc-dot{font-size:18px;line-height:1}.sc-label{font-size:12px;font-weight:600;color:var(--text3)}.sc-day.today .sc-label{color:var(--accent-text);font-weight:700}.sc-day.active .sc-label{color:var(--accent-ink)}.modal-hanzi-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}.modal-tts-btn{background:var(--surface2);border:1px solid var(--border);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;transition:background-color var(--d-base),border-color var(--d-base),color var(--d-base),box-shadow var(--d-base),transform var(--d-base),opacity var(--d-base),filter var(--d-base);flex-shrink:0}.modal-tts-btn:hover{background:var(--primary);color:var(--on-accent);border-color:transparent;transform:scale(1.1)}.modal-stroke-container{text-align:center;margin-bottom:16px;padding:16px;background:var(--surface2);border:1px solid var(--border);border-radius:12px}.stroke-btns{display:flex;gap:10px;justify-content:center;margin-top:12px}.stroke-btn{padding:6px 16px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:color var(--d-base),background-color var(--d-base),border-color var(--d-base),box-shadow var(--d-base),opacity var(--d-base),transform var(--d-base)}.stroke-btn:hover{background:var(--primary);color:var(--on-accent);border-color:transparent}.stroke-btn.outline{background:transparent}.stroke-btn.outline:hover{background:var(--surface2);color:var(--accent-text);border-color:var(--primary)}.xp-bar-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:16px;box-shadow:var(--shadow)}.xp-bar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.xp-label{font-size:14px;font-weight:700;color:var(--accent-ink)}.xp-level-label{font-size:12px;color:var(--text2);font-weight:600}.xp-bar-track{height:8px;background:var(--border);border-radius:4px;overflow:hidden}.xp-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--progress-fill),var(--accent));transition:width .6s ease}.xp-bar-footer{margin-top:6px;font-size:12px;color:var(--text3)}

.ui-state{width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:var(--s-10) var(--s-6);font-family:var(--font-ui);color:var(--fg);position:relative}.ui-state__inner{width:100%;max-width:520px;text-align:center;display:flex;flex-direction:column;align-items:center}.ui-state__title{font-family:var(--font-ui);font-size:var(--t-h1);font-weight:700;letter-spacing:var(--tracking-tight);color:var(--fg);margin:var(--s-6) 0 var(--s-2);line-height:var(--lh-tight)}.ui-state__desc{font-size:var(--t-body-lg);color:var(--fg-2);line-height:var(--lh-normal);margin:0 0 var(--s-6);max-width:420px}.ui-state__actions{display:flex;flex-direction:column;gap:var(--s-3);align-items:center;width:100%}.ui-state__cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);padding:12px 22px;background:linear-gradient(135deg,var(--chau-hong),var(--chau-hong-2));color:var(--on-accent);border:none;border-radius:var(--r-3);font-family:var(--font-ui);font-weight:600;font-size:var(--t-body);cursor:pointer;box-shadow:var(--shadow-red);transition:transform var(--d-fast) var(--ease-out),box-shadow var(--d-base) var(--ease-out),filter var(--d-fast) var(--ease-out);text-decoration:none}.ui-state__cta:hover{transform:translateY(-1px);filter:brightness(1.04)}.ui-state__cta:active{transform:translateY(0)}.ui-state__cta--full{width:100%}.ui-state__cta .ui-state__icon{width:16px;height:16px;flex-shrink:0}.ui-state__link{background:transparent;border:none;font-family:var(--font-ui);font-size:var(--t-small);color:var(--fg-3);cursor:pointer;padding:4px 8px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-2);transition:color var(--d-fast) var(--ease-out)}.ui-state__link:hover{color:var(--fg)}.ui-state__link-row{display:inline-flex;align-items:center;gap:var(--s-3);font-size:var(--t-small)}.ui-state__link-sep{color:var(--border-2)}.ui-state__tip{margin-top:var(--s-8);display:inline-flex;align-items:center;gap:var(--s-2);padding:8px 14px;background:var(--warning-bg);border:1px solid var(--hoang-kim-3);border-radius:var(--r-pill);font-size:12px;color:var(--mac-hac-3);line-height:1.4}.ui-state__tip-label{font-weight:700;font-size:12px;color:var(--accent-ink);letter-spacing:.06em}.ui-state__tip strong{color:var(--mac-hac)}.ui-state__stats{display:inline-flex;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-4);padding:6px 4px;box-shadow:var(--shadow-2);margin-bottom:var(--s-6)}.ui-state__stat{flex:1;padding:10px 18px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:100px}.ui-state__stat-hanzi{font-family:var(--font-hanzi);font-size:18px;font-weight:500;opacity:.35;margin-bottom:2px}.ui-state__stat-value{font-size:24px;font-weight:700;color:var(--fg);letter-spacing:-.02em;display:inline-flex;align-items:center;gap:4px;line-height:1}.ui-state__stat-label{font-size:12px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.06em;font-weight:600}.ui-state__stat-divider{width:1px;background:var(--border);margin:4px 0;flex-shrink:0}.ui-state__stats--compact .ui-state__stat{flex-direction:row;gap:10px;padding:6px 18px}.ui-state__stats--compact .ui-state__stat-icon{width:32px;height:32px;border-radius:var(--r-2);background:var(--bg2);display:flex;align-items:center;justify-content:center;color:var(--fg-2);flex-shrink:0}.ui-state__stats--compact .ui-state__stat-text{text-align:left}.ui-state__stats--compact .ui-state__stat-label{display:block}.ui-state__stats--compact .ui-state__stat-value{font-size:15px}.ui-state--celebrate{position:relative;overflow:hidden}.ui-state--celebrate:before{content:"";position:absolute;top:-240px;left:50%;transform:translate(-50%);width:900px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(252,211,77,.3),transparent 60%);pointer-events:none;z-index:0}.ui-state--celebrate .ui-state__inner{position:relative;z-index:1}.ui-state__footer-note{margin-top:var(--s-8);font-size:var(--t-small);color:var(--fg-3);display:inline-flex;align-items:center;gap:6px}.ui-mascot{--mascot-size: 200px;position:relative;width:var(--mascot-size);height:var(--mascot-size);display:inline-block;flex-shrink:0}.ui-mascot>img{position:relative;width:100%;height:100%;object-fit:contain;z-index:2;transition:transform var(--d-base) var(--ease-out),filter var(--d-base) var(--ease-out)}.empty-state-img{display:block;width:160px;height:160px;object-fit:contain;margin:0 auto var(--s-4)}.ui-mascot>.empty-state-img{width:100%;height:100%;margin:0}.ui-mascot--has-pose:not(.is-fallback) .ui-mascot__zzz,.ui-mascot--has-pose:not(.is-fallback) .ui-mascot__wifi-off,.ui-mascot--has-pose:not(.is-fallback) .ui-mascot__q,.ui-mascot--has-pose:not(.is-fallback) .ui-mascot__warning,.ui-mascot--has-pose:not(.is-fallback) .ui-mascot__streak{display:none}.ui-mascot--sleep>img{transform:rotate(-8deg);filter:saturate(.9)}.ui-mascot--sad>img{transform:rotate(-3deg);filter:saturate(.85)}.ui-mascot--lost>img{transform:rotate(4deg)}.ui-mascot--concerned>img{transform:rotate(-2deg);filter:saturate(.95)}.ui-mascot--celebrate>img{transform:rotate(0);filter:saturate(1.1)}.ui-mascot__halo{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}.ui-mascot__zzz{position:absolute;top:calc(var(--mascot-size) * -.06);right:calc(var(--mascot-size) * -.04);z-index:3;pointer-events:none;font-family:var(--font-ui);font-weight:800;color:var(--accent-ink);text-shadow:0 2px 0 var(--surface),0 0 8px rgba(245,158,11,.3);line-height:1;text-align:left}.ui-mascot__zzz span{display:block}.ui-mascot__zzz span:nth-child(1){font-size:calc(var(--mascot-size) * .16);opacity:.65}.ui-mascot__zzz span:nth-child(2){font-size:calc(var(--mascot-size) * .22);opacity:.85;margin-left:calc(var(--mascot-size) * .04)}.ui-mascot__zzz span:nth-child(3){font-size:calc(var(--mascot-size) * .32);margin-left:calc(var(--mascot-size) * .1)}.ui-mascot__wifi-off{position:absolute;right:calc(var(--mascot-size) * -.04);bottom:calc(var(--mascot-size) * .02);width:calc(var(--mascot-size) * .36);height:calc(var(--mascot-size) * .36);border-radius:50%;background:var(--surface);box-shadow:0 6px 18px #1f29372e,inset 0 0 0 3px var(--danger-bg);display:flex;align-items:center;justify-content:center;z-index:3}.ui-mascot__wifi-off svg{width:62%;height:62%}.ui-mascot__q{position:absolute;top:calc(var(--mascot-size) * -.04);left:calc(var(--mascot-size) * -.06);font-family:var(--font-ui);font-weight:800;font-size:calc(var(--mascot-size) * .36);color:var(--accent-text);line-height:1;transform:rotate(-12deg);text-shadow:0 2px 0 var(--surface),0 6px 12px rgba(220,38,38,.25);z-index:3;pointer-events:none}.ui-mascot__warning{position:absolute;right:calc(var(--mascot-size) * -.04);top:calc(var(--mascot-size) * .02);width:calc(var(--mascot-size) * .34);height:calc(var(--mascot-size) * .34);border-radius:50%;background:var(--warning-bg);box-shadow:0 6px 18px #f59e0b47;display:flex;align-items:center;justify-content:center;z-index:3}.ui-mascot__warning svg{width:60%;height:60%}.ui-mascot__streak{position:absolute;right:calc(var(--mascot-size) * -.18);top:calc(var(--mascot-size) * .42);transform:rotate(8deg);background:var(--success-solid);color:var(--on-accent);padding:6px 12px;border-radius:var(--r-pill);font-family:var(--font-ui);font-weight:700;font-size:calc(var(--mascot-size) * .075);box-shadow:0 6px 16px #10b9815c;display:flex;align-items:center;gap:4px;z-index:4;white-space:nowrap}.ui-mascot__streak:before{content:"🔥";font-size:calc(var(--mascot-size) * .08)}@media(max-width:640px){.ui-state{padding:var(--s-8) var(--s-4)}.ui-state__title{font-size:22px}.ui-state__desc{font-size:var(--t-body)}.ui-mascot{--mascot-size: 160px}.ui-state__stats{flex-wrap:wrap}.ui-state__stat{min-width:80px;padding:10px 12px}}[data-theme=dark] .ui-state__tip{background:#f59e0b1f;border-color:#f59e0b59;color:var(--fg-2)}[data-theme=dark] .ui-state__tip strong{color:var(--fg)}[data-theme=dark] .ui-state__cta{box-shadow:0 8px 24px #dc262673}[data-theme=dark] .ui-mascot__wifi-off{background:var(--surface);box-shadow:0 6px 18px #0006,inset 0 0 0 3px #dc262640}[data-theme=dark] .ui-mascot__warning{background:#f59e0b2e}[data-theme=dark] .ui-mascot__q{text-shadow:0 2px 0 var(--surface),0 6px 12px rgba(220,38,38,.35)}.skel{position:relative;overflow:hidden;background:var(--surface2);border-radius:var(--r-2)}.skel:after{content:"";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:skel-shimmer 1.2s infinite}.skel-line{height:12px;width:100%}.skel-line+.skel-line{margin-top:var(--s-2)}.skel-card{min-height:84px;border-radius:var(--r-4)}@keyframes skel-shimmer{to{transform:translate(100%)}}[data-theme=dark] .skel:after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}

.ui-error-banner{display:flex;align-items:center;gap:14px;height:56px;padding:0 var(--s-8);background:linear-gradient(90deg,var(--warning-bg),color-mix(in srgb,var(--warning) 30%,var(--surface)));border-bottom:1px solid var(--hoang-kim-3);font-family:var(--font-ui);flex-shrink:0}.ui-error-banner__icon{width:32px;height:32px;border-radius:var(--r-2);background:#fff9;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent-ink)}.ui-error-banner__icon svg{width:18px;height:18px}.ui-error-banner__text{flex:1;font-size:var(--t-small);color:var(--mac-hac)}.ui-error-banner__text strong{font-weight:700}.ui-error-banner__text .sep{color:var(--mac-hac-3);margin:0 8px}.ui-error-banner__action{background:var(--surface);color:var(--mac-hac);border:1.5px solid var(--hoang-kim-2);border-radius:var(--r-2);padding:6px 14px;font-size:12px;font-weight:600;font-family:var(--font-ui);display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:background var(--d-fast) var(--ease-out)}.ui-error-banner__action:hover{background:var(--warning-bg)}.ui-error-banner__action svg{width:13px;height:13px}[data-theme=dark] .ui-error-banner{background:linear-gradient(90deg,#f59e0b24,#f59e0b40);border-bottom-color:#f59e0b73}[data-theme=dark] .ui-error-banner__text{color:var(--fg)}[data-theme=dark] .ui-error-banner__action{background:var(--surface);color:var(--fg)}.ui-error-page{position:relative;width:100%;min-height:calc(100vh - var(--topbar-h, 64px));background:var(--bg);font-family:var(--font-ui);color:var(--fg);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:var(--s-10) var(--s-6)}.ui-error-page:before{content:"";position:absolute;top:-200px;right:-200px;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(252,211,77,.25),transparent 65%);pointer-events:none}[data-theme=dark] .ui-error-page:before{background:radial-gradient(circle,rgba(252,211,77,.18),transparent 65%)}.ui-error-page__layout{position:relative;display:flex;align-items:center;gap:56px;max-width:1000px}.ui-error-page__copy{max-width:460px}.ui-error-page__code{font-family:var(--font-ui);font-size:96px;font-weight:700;line-height:1;letter-spacing:-.04em;margin-bottom:12px;background:linear-gradient(135deg,var(--chau-hong),var(--hero-grad-end));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:var(--accent-text)}.ui-error-page__title{font-size:30px;font-weight:700;letter-spacing:var(--tracking-tight);margin:0 0 10px;color:var(--fg)}.ui-error-page__desc{font-size:var(--t-body-lg);color:var(--fg-2);line-height:var(--lh-normal);margin:0 0 var(--s-6);max-width:420px}.ui-error-page__actions{display:flex;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}.ui-error-page__footnote{font-size:12px;color:var(--fg-3)}.ui-error-page__footnote a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;font-weight:500;cursor:pointer}.ui-error-page__watermark{position:absolute;bottom:32px;left:50%;transform:translate(-50%);font-family:var(--font-hanzi);font-size:13px;color:var(--fg-4);letter-spacing:.4em;white-space:nowrap}@media(max-width:768px){.ui-error-page__layout{flex-direction:column;gap:24px;text-align:center}.ui-error-page__copy{max-width:100%}.ui-error-page__code{font-size:72px}.ui-error-page__title{font-size:24px}.ui-error-page__actions{justify-content:center}}.ui-modal-overlay{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1100;display:flex;align-items:center;justify-content:center;padding:24px;animation:ui-fade-in var(--d-base) var(--ease-out)}.ui-modal-overlay[hidden]{display:none}@keyframes ui-fade-in{0%{opacity:0}to{opacity:1}}@keyframes ui-modal-up{0%{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.ui-modal{background:var(--surface);border-radius:var(--r-5);box-shadow:0 24px 60px #1f293759,0 8px 24px #1f29372e;overflow:hidden;position:relative;animation:ui-modal-up var(--d-slow) var(--ease-spring);font-family:var(--font-ui);color:var(--fg)}.ui-modal--md{width:100%;max-width:560px}.ui-modal--sm{width:100%;max-width:480px}[data-theme=dark] .ui-modal{box-shadow:0 24px 60px #0009,0 8px 24px #0006}.ui-modal__close{position:absolute;top:14px;right:14px;background:transparent;border:none;cursor:pointer;color:var(--fg-3);padding:6px;line-height:0;border-radius:var(--r-2);transition:background var(--d-fast) var(--ease-out),color var(--d-fast) var(--ease-out)}.ui-modal__close:hover{background:var(--bg2);color:var(--fg)}.ui-modal__close svg{width:20px;height:20px}.ui-modal__header{padding:24px 28px 0;display:flex;align-items:flex-start;gap:16px}.ui-modal__header-icon{width:44px;height:44px;border-radius:var(--r-3);display:flex;align-items:center;justify-content:center;flex-shrink:0}.ui-modal__header-icon--warning{background:var(--warning-bg);color:var(--accent-ink)}.ui-modal__header-icon--danger{background:var(--danger-bg);color:var(--accent-text)}.ui-modal__header-icon svg{width:22px;height:22px}.ui-modal__header-text{flex:1;min-width:0}.ui-modal__title{font-size:18px;font-weight:700;letter-spacing:var(--tracking-tight);margin:2px 0 6px;color:var(--fg)}.ui-modal__subtitle{font-size:14px;color:var(--fg-2);margin:0;line-height:var(--lh-normal)}.ui-modal__footer{padding:20px 28px 24px;display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}.ui-modal__btn-secondary{background:var(--surface);color:var(--fg);border:1.5px solid var(--border-2);border-radius:var(--r-3);padding:11px 22px;font-family:var(--font-ui);font-weight:600;font-size:var(--t-body);cursor:pointer;transition:background var(--d-fast) var(--ease-out),border-color var(--d-fast) var(--ease-out)}.ui-modal__btn-secondary:hover{background:var(--bg2);border-color:var(--fg-3)}.ui-confirm__preview{display:flex;justify-content:center;align-items:center;margin:4px 24px 0}.ui-confirm__preview img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2px solid var(--border-2)}.ui-confirm__meta{margin:12px 24px 0;padding:10px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-3);display:flex;flex-direction:column;gap:6px}.ui-confirm__row{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-body-sm)}.ui-confirm__k{color:var(--fg-3)}.ui-confirm__v{color:var(--fg-2)}.ui-confirm__v.is-strong{color:var(--fg);font-weight:700}.ui-modal__note{margin:8px 28px 0;padding:10px 14px;background:var(--bg2);border-radius:var(--r-3);font-size:12px;color:var(--fg-3);line-height:1.5}.ui-modal__note strong{color:var(--fg-2)}.ui-modal__note--warning{background:var(--warning-bg);border:1px solid var(--hoang-kim-3);color:var(--mac-hac-3)}.ui-modal__note--warning strong{color:var(--mac-hac)}[data-theme=dark] .ui-modal__note--warning{background:#f59e0b1f;border-color:#f59e0b59;color:var(--fg-2)}[data-theme=dark] .ui-modal__note--warning strong{color:var(--fg)}.ui-conflict-grid{padding:20px 28px 8px;display:flex;gap:14px}.ui-conflict-card{flex:1;background:var(--surface);border:2px solid var(--border);border-radius:var(--r-4);padding:16px 18px;position:relative;min-height:180px;cursor:pointer;transition:border-color var(--d-fast) var(--ease-out),background var(--d-fast) var(--ease-out),transform var(--d-fast) var(--ease-out)}.ui-conflict-card:hover{transform:translateY(-1px);border-color:var(--border-2)}.ui-conflict-card.is-selected{background:var(--danger-bg);border-color:var(--chau-hong)}[data-theme=dark] .ui-conflict-card.is-selected{background:#dc262626}.ui-conflict-card__check{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;background:var(--chau-hong);display:none;align-items:center;justify-content:center;color:var(--on-accent)}.ui-conflict-card.is-selected .ui-conflict-card__check{display:flex}.ui-conflict-card__check svg{width:14px;height:14px}.ui-conflict-card__head{display:flex;align-items:center;gap:8px;margin-bottom:12px}.ui-conflict-card__head-icon{color:var(--fg-2);flex-shrink:0}.ui-conflict-card__head-icon svg{width:16px;height:16px;display:block}.ui-conflict-card__label{font-size:var(--t-small);font-weight:700;color:var(--fg)}.ui-conflict-card.is-selected .ui-conflict-card__head-icon,.ui-conflict-card.is-selected .ui-conflict-card__label{color:var(--accent-text)}.ui-conflict-card__cloud-tag{margin-left:auto;font-size:12px;font-weight:600;padding:2px 6px;border-radius:var(--r-1);background:var(--bg2);color:var(--fg-3);letter-spacing:.04em;text-transform:uppercase}.ui-conflict-card__stats{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}.ui-conflict-card__row{display:flex;align-items:baseline;gap:8px}.ui-conflict-card__value{font-size:16px;font-weight:700;color:var(--fg);min-width:70px}.ui-conflict-card__caption{font-size:12px;color:var(--fg-3)}.ui-conflict-card__foot{padding-top:10px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--fg-3)}.ui-conflict-card__fresh{display:inline-flex;align-items:center;gap:4px;color:var(--success);font-weight:600}.ui-conflict-card__fresh:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--thuy-luc);display:inline-block}@media(max-width:560px){.ui-conflict-grid{flex-direction:column;padding:16px 20px 4px}.ui-modal__header{padding:20px 20px 0}.ui-modal__footer{padding:16px 20px 20px}.ui-modal__note{margin:8px 20px 0}}.ui-payment-modal{text-align:center;padding:28px 28px 24px}.ui-payment-modal__mascot-wrap{display:flex;justify-content:center;margin-bottom:6px}.ui-payment-modal__title{font-size:22px;font-weight:700;letter-spacing:var(--tracking-tight);color:var(--accent-text);margin:8px 0;display:inline-flex;align-items:center;gap:8px;justify-content:center}.ui-payment-modal__title-x{width:22px;height:22px;border-radius:50%;background:var(--chau-hong);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0}.ui-payment-modal__desc{font-size:14px;color:var(--fg-2);line-height:var(--lh-normal);margin:0 16px 22px}.ui-payment-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-3);padding:14px 16px;text-align:left;margin-bottom:20px}.ui-payment-card__row{display:flex;align-items:center;gap:10px;margin-bottom:8px}.ui-payment-card__icon{width:32px;height:32px;border-radius:var(--r-2);background:var(--pro-bg);display:flex;align-items:center;justify-content:center;color:var(--on-accent);font-size:14px;flex-shrink:0}.ui-payment-card__info{flex:1;min-width:0}.ui-payment-card__name{font-size:14px;font-weight:700;color:var(--fg)}.ui-payment-card__txid{font-size:12px;color:var(--fg-3);font-family:var(--font-mono)}.ui-payment-card__amount{font-size:16px;font-weight:700;color:var(--fg);white-space:nowrap}.ui-payment-card__amount sup{font-size:12px;color:var(--fg-3);margin-left:3px;font-weight:600;vertical-align:baseline}.ui-payment-card__status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--accent-text);padding-top:8px;border-top:1px dashed var(--border);font-weight:600}.ui-payment-card__status:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--chau-hong);animation:ui-pulse 1.6s var(--ease-in-out) infinite}@keyframes ui-pulse{0%,to{opacity:1}50%{opacity:.35}}