:root{--ink:#2d1a24;--ink2:#5c3d4e;--ink3:#8c6b7a;--paper:#fff8fc;--paper2:#ffedf6;--paper3:#f5c6e0;--red:#f13596;--red-light:#ffedf6;--green:#1a6b3a;--green-light:#e8f4ed;--blue:#1a4a8a;--blue-light:#e8eef8;--amber:#c9a96e;--amber-light:#fbf3e8;--tone1:#f13596;--tone2:#c9a96e;--tone3:#1a6b3a;--tone4:#1a4a8a;--tone-neutral:#8c6b7a;--r:12px;--r-sm:8px;--shadow:0 1px 3px #2d1a240f, 0 4px 12px #2d1a240d;--shadow-lg:0 4px 16px #2d1a241a, 0 12px 40px #2d1a2412;--trans:.2s cubic-bezier(.4,0,.2,1)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-8px)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes tangtangDance{0%,to{transform:translateY(0)rotate(-3deg)scale(1)}25%{transform:translateY(-10px)rotate(3deg)scale(1.05)}50%{transform:translateY(-6px)rotate(-2deg)scale(1.02)}75%{transform:translateY(-12px)rotate(2deg)scale(1.04)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}@keyframes floatIn{0%{opacity:0;transform:translateY(20px)scale(.8)}to{opacity:1;transform:translateY(0)scale(1)}}body{background:var(--paper2);color:var(--ink);-moz-text-size-adjust:100%;text-size-adjust:100%;touch-action:pan-y;min-height:100vh;font-family:DM Sans,Noto Sans Thai,sans-serif;font-size:17px;overflow-x:hidden}html{touch-action:pan-y;overflow-x:hidden}#auth-screen{background:var(--paper);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.auth-card{border:1px solid var(--paper3);width:100%;max-width:380px;box-shadow:var(--shadow-lg);background:#fff;border-radius:16px;padding:40px 36px}.auth-logo{text-align:center;margin-bottom:32px}.auth-logo-zh{color:var(--red);letter-spacing:2px;font-family:Noto Serif SC,serif;font-size:32px;font-weight:700;display:block}.auth-logo-en{color:var(--ink3);letter-spacing:1px;text-transform:uppercase;margin-top:4px;font-size:13px}.auth-tabs{border-bottom:1px solid var(--paper3);margin-bottom:28px;display:flex}.auth-tab{text-align:center;color:var(--ink3);cursor:pointer;transition:var(--trans);border-bottom:2px solid #0000;flex:1;margin-bottom:-1px;padding:10px;font-size:14px;font-weight:500}.auth-tab.active{color:var(--red);border-bottom-color:var(--red)}.auth-form{flex-direction:column;gap:14px;display:flex}.auth-field{flex-direction:column;gap:6px;display:flex}.auth-field label{color:var(--ink2);letter-spacing:.3px;font-size:12px;font-weight:500}.auth-field input{border:1px solid var(--paper3);border-radius:var(--r-sm);color:var(--ink);background:var(--paper);transition:var(--trans);outline:none;padding:11px 14px;font-family:inherit;font-size:14px}.auth-field input:focus{border-color:var(--red);background:#fff;box-shadow:0 0 0 3px #c0392b1a}.btn-primary{background:var(--red);color:#fff;border-radius:var(--r-sm);cursor:pointer;transition:var(--trans);letter-spacing:.3px;border:none;margin-top:4px;padding:13px;font-family:inherit;font-size:14px;font-weight:600}.btn-primary:hover{background:#a93226;transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.auth-err{color:var(--red);text-align:center;min-height:16px;font-size:12px}.auth-guest{text-align:center;color:var(--ink3);margin-top:20px;font-size:12px}.auth-guest a{color:var(--red);cursor:pointer;font-weight:500;text-decoration:none}#app{display:none}#app.visible{display:block}.topbar{z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--paper3);background:#fff8fcf7;justify-content:space-between;align-items:center;height:56px;padding:0 20px;display:flex;position:sticky;top:0}.topbar-logo{color:var(--red);letter-spacing:1px;font-family:Noto Serif SC,serif;font-size:18px;font-weight:700}.topbar-right{align-items:center;gap:16px;display:flex}.xp-badge{color:var(--amber);background:#fbf3e8;border:1px solid #c9a96e;border-radius:20px;align-items:center;gap:5px;padding:5px 11px;font-size:12px;font-weight:600;display:flex}.streak-badge{color:var(--ink2);align-items:center;gap:4px;font-size:13px;font-weight:600;display:flex}.avatar-btn{background:var(--red);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-family:inherit;font-size:13px;font-weight:600;display:flex}.bottom-nav{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--paper3);padding:6px 0 max(6px, env(safe-area-inset-bottom));z-index:50;background:#fff8fcfa;display:flex;position:fixed;bottom:0;left:0;right:0}.nav-btn{color:var(--ink3);cursor:pointer;transition:color var(--trans);background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:3px;padding:6px 0;font-family:inherit;font-size:10px;font-weight:500;display:flex}.nav-btn .nav-icon{transition:transform var(--trans);font-size:20px;display:block}.nav-btn.active{color:var(--red)}.nav-btn.active .nav-icon{transform:scale(1.1)}.nav-btn.active:after{content:"";background:var(--red);border-radius:50%;width:4px;height:4px;margin:1px auto 0;display:block}.screen{min-height:calc(100vh - 116px);padding-bottom:80px;display:none}.screen.active{display:block}#screen-tangtang-chat.active{min-height:0!important;padding-bottom:0!important;display:flex!important}.home-header{color:#fff;background:linear-gradient(135deg,#6b1a6b,#f13596);padding:28px 20px 24px;position:relative;overflow:hidden}.home-header:before{content:"糖糖中文";color:#ffffff12;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:Noto Serif SC,serif;font-size:56px;font-weight:900;line-height:1;position:absolute;top:8px;right:-4px}.home-level-badge{color:#fff;background:#fff3;border-radius:20px;align-items:center;gap:5px;margin-bottom:8px;padding:3px 10px;font-size:11px;font-weight:700;display:inline-flex}.home-greeting{color:#ffffffbf;margin-bottom:4px;font-size:13px;font-weight:500}.home-name{margin-bottom:16px;font-size:22px;font-weight:800}.home-stats{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.home-stat{border-radius:var(--r-sm);text-align:center;background:#ffffff2e;padding:10px 8px}.home-stat-num{color:#fff;font-family:DM Sans,sans-serif;font-size:22px;font-weight:800;line-height:1}.home-stat-lbl{color:#ffffffbf;margin-top:3px;font-size:10px}.review-banner{background:var(--paper);border:1px solid var(--paper3);border-radius:var(--r);box-shadow:var(--shadow);cursor:pointer;transition:var(--trans);justify-content:space-between;align-items:center;gap:12px;margin:16px;padding:16px;display:flex}.review-banner:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}.review-banner-left{flex:1}.review-banner-title{color:var(--ink);margin-bottom:3px;font-size:15px;font-weight:600}.review-banner-sub{color:var(--ink3);font-size:12px}.review-banner-count{background:var(--red);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;min-width:48px;height:48px;font-size:18px;font-weight:700;display:flex}.section-title{color:var(--ink3);letter-spacing:.07em;text-transform:uppercase;padding:14px 16px 8px;font-size:10px;font-weight:700}.path-row{grid-template-columns:1fr 1fr;gap:10px;padding:0 16px;display:grid}#path-row-hsk{grid-template-columns:repeat(3,1fr)!important;gap:8px!important;padding:0 16px!important}#path-row-theme{grid-template-columns:1fr 1fr!important;gap:10px!important;padding:0 16px!important}.path-card{border:1px solid var(--paper3);border-radius:var(--r);cursor:pointer;transition:var(--trans);box-shadow:var(--shadow);background:#fff;padding:16px 14px}.path-card:hover{border-color:var(--red);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.path-card.active-path{border-color:var(--red);background:var(--red-light)}.path-icon{margin-bottom:8px;font-size:24px}.path-name{color:var(--ink);margin-bottom:2px;font-size:13px;font-weight:600}.path-sub{color:var(--ink3);margin-bottom:10px;font-size:11px}.prog-bar{background:var(--paper3);border-radius:2px;height:4px;overflow:hidden}.prog-fill{background:var(--red);border-radius:2px;height:100%;transition:width .6s}.lesson-section{padding:16px}.locked-lesson{opacity:.7}.locked-lesson:hover{border-color:#f13596!important}.lesson-card{cursor:pointer;transition:var(--trans);background:#fff;border:1px solid #f0ece4;border-radius:12px;align-items:center;gap:12px;margin-bottom:8px;padding:14px 16px;display:flex;box-shadow:0 1px 3px #1a18140a,0 2px 8px #1a181408}.lesson-card:hover{border-color:var(--red);box-shadow:var(--shadow-lg);transform:translateY(-1px)}.lesson-card.done{background:var(--green-light);border-color:#b8dfc7}.lesson-card.locked{opacity:.5;cursor:default}.lesson-card.locked:hover{box-shadow:var(--shadow);border-color:var(--paper3);transform:none}.lesson-num{background:linear-gradient(135deg,#fff0f8,#ffddf0);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:22px;display:flex}.lesson-card.done .lesson-num{background:var(--green-light)}.lesson-info{flex:1;min-width:0}.lesson-title{color:var(--ink);margin-bottom:2px;font-size:14px;font-weight:600}.lesson-sub{color:var(--ink3);margin-bottom:6px;font-size:11px}.lesson-pills{flex-wrap:wrap;gap:5px;display:flex}.pill{letter-spacing:.2px;border-radius:20px;align-items:center;padding:2px 8px;font-size:10px;font-weight:600;display:inline-flex}.pill-red{background:var(--red-light);color:var(--red)}.pill-green{background:var(--green-light);color:var(--green)}.pill-blue{background:var(--blue-light);color:var(--blue)}.pill-gray{background:var(--paper2);color:var(--ink3)}.detail-header{border-bottom:1px solid var(--paper3);background:#fff;padding:20px}.back-btn{color:var(--ink3);cursor:pointer;transition:color var(--trans);background:0 0;border:none;align-items:center;gap:6px;margin-bottom:14px;padding:0;font-family:inherit;font-size:13px;font-weight:500;display:inline-flex}.back-btn:hover{color:var(--red)}.detail-title{color:var(--ink);margin-bottom:4px;font-size:22px;font-weight:700}.detail-sub{color:var(--ink3);margin-bottom:14px;font-size:13px}.tone1{color:var(--tone1)}.tone2{color:var(--tone2)}.tone3{color:var(--tone3)}.tone4{color:var(--tone4)}.tone0{color:var(--tone-neutral)}.tab-bar{border-bottom:1px solid var(--paper3);z-index:40;background:#fff;display:flex;position:sticky;top:56px}.tab-btn{color:var(--ink3);cursor:pointer;transition:var(--trans);letter-spacing:.2px;background:0 0;border:none;border-bottom:2px solid #0000;flex-direction:column;flex:1;align-items:center;gap:2px;margin-bottom:-1px;padding:13px 6px;font-family:inherit;font-size:12px;font-weight:600;display:flex}.tab-btn .tab-ico{font-size:16px}.tab-btn.active{color:var(--red);border-bottom-color:var(--red)}.tab-pane{padding:16px;display:none}.tab-pane.active{display:block}.dialog-card{border:1px solid var(--paper3);border-radius:var(--r);box-shadow:var(--shadow);background:#fff;margin-bottom:12px;overflow:hidden}.dialog-header{background:var(--paper2);border-bottom:1px solid var(--paper3);color:var(--ink3);letter-spacing:.3px;justify-content:space-between;align-items:center;padding:10px 14px;font-size:11px;font-weight:600;display:flex}.dialog-line{border-bottom:1px solid var(--paper3);align-items:flex-start;gap:12px;padding:14px;display:flex}.dialog-line:last-child{border-bottom:none}.dialog-speaker-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-top:8px}.dot-a{background:var(--red)}.dot-b{background:var(--blue)}.dialog-line-content{flex:1}.dialog-cn{color:var(--ink);letter-spacing:.5px;margin-bottom:4px;font-family:Noto Serif SC,serif;font-size:20px}.dialog-py{margin-bottom:2px;font-size:12px;font-weight:500}.dialog-th{color:var(--ink3);font-size:12px}.speak-btn{border:1px solid var(--paper3);background:var(--paper);width:34px;height:34px;color:var(--ink3);cursor:pointer;transition:var(--trans);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-top:4px;font-size:15px;display:flex}.speak-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}.speak-btn.playing{background:var(--blue);color:#fff;border-color:var(--blue)}.play-all-btn{background:var(--blue);color:#fff;border-radius:var(--r-sm);cursor:pointer;width:100%;transition:var(--trans);border:none;justify-content:center;align-items:center;gap:8px;margin-top:10px;padding:12px;font-family:inherit;font-size:13px;font-weight:600;display:flex}.play-all-btn:hover{background:#153d73;transform:translateY(-1px)}.vocab-row{border-bottom:1px solid var(--paper3);grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 0;display:grid}.vocab-row:last-child{border-bottom:none}.vocab-zh{color:var(--ink);text-align:center;min-width:56px;font-family:Noto Serif SC,serif;font-size:24px}.vocab-info{min-width:0}.vocab-py{margin-bottom:2px;font-size:12px;font-weight:600}.vocab-th{color:var(--ink2);font-size:13px}.vocab-en{color:var(--ink3);font-size:11px}.vocab-audio-btn{border:1px solid var(--paper3);background:var(--paper);color:var(--ink3);cursor:pointer;transition:var(--trans);white-space:nowrap;border-radius:20px;padding:5px 12px;font-family:inherit;font-size:12px;font-weight:500}.vocab-audio-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}.vocab-audio-btn.playing{background:var(--blue);color:#fff;border-color:var(--blue)}.srs-wrap{padding:16px}.srs-progress-row{align-items:center;gap:10px;margin-bottom:14px;display:flex}.srs-progress-bar{background:var(--paper3);border-radius:3px;flex:1;height:5px;overflow:hidden}.srs-progress-fill{background:var(--red);border-radius:3px;height:100%;transition:width .5s}.srs-counter{color:var(--ink3);text-align:right;min-width:50px;font-size:12px;font-weight:600}.flip-scene{perspective:900px;cursor:pointer;height:220px;margin-bottom:16px}.flip-card{width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1);position:relative}.flip-scene.flipped .flip-card{transform:rotateY(180deg)}.flip-face{backface-visibility:hidden;border-radius:var(--r);box-shadow:var(--shadow-lg);flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:24px;display:flex;position:absolute;inset:0}.flip-front{border:1px solid var(--paper3);background:#fff}.flip-back{background:var(--ink);transform:rotateY(180deg)}.fc-zh{color:var(--ink);letter-spacing:2px;font-family:Noto Serif SC,serif;font-size:52px}.flip-back .fc-zh{color:#fff}.fc-py{font-size:16px;font-weight:600}.fc-hint{color:var(--ink3);margin-top:6px;font-size:11px}.flip-back .fc-hint{color:#fff6}.fc-th{color:#fff;font-size:22px;font-weight:600}.fc-en{color:#ffffff8c;font-size:14px}.srs-btns{grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;display:grid}.srs-btn{border-radius:var(--r);cursor:pointer;transition:var(--trans);border:none;flex-direction:column;align-items:center;gap:4px;padding:16px;font-family:inherit;font-size:14px;font-weight:600;display:flex}.srs-btn-sub{opacity:.7;font-size:10px;font-weight:400}.srs-hard{background:var(--red-light);color:var(--red);border:1.5px solid #f0c0bb}.srs-hard:hover{background:#f5ccc9;transform:translateY(-1px)}.srs-easy{background:var(--green-light);color:var(--green);border:1.5px solid #a8d8bc}.srs-easy:hover{background:#c0e4d0;transform:translateY(-1px)}.srs-speak-row{justify-content:center;margin-bottom:12px;display:flex}.srs-speak-btn{border:1px solid var(--paper3);background:var(--paper);color:var(--ink3);cursor:pointer;transition:var(--trans);border-radius:20px;align-items:center;gap:8px;padding:8px 20px;font-family:inherit;font-size:13px;font-weight:500;display:flex}.srs-speak-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}.srs-speak-btn.playing{background:var(--blue);color:#fff;border-color:var(--blue)}.srs-done{text-align:center;padding:40px 20px}.srs-done-icon{margin-bottom:16px;font-size:56px}.srs-done-title{color:var(--ink);margin-bottom:8px;font-size:24px;font-weight:700}.srs-done-sub{color:var(--ink3);margin-bottom:28px;font-size:14px}.quiz-wrap{padding:16px}.quiz-q-label{color:var(--ink3);letter-spacing:.3px;margin-bottom:8px;font-size:12px;font-weight:600}.quiz-q-card{border:1px solid var(--paper3);border-radius:var(--r);box-shadow:var(--shadow);text-align:center;background:#fff;margin-bottom:16px;padding:20px}.quiz-q-zh{color:var(--ink);margin-bottom:8px;font-family:Noto Serif SC,serif;font-size:40px}.quiz-q-text{color:var(--ink);font-size:15px;font-weight:600;line-height:1.5}.quiz-q-py{margin-top:4px;font-size:13px}.quiz-opts{flex-direction:column;gap:8px;display:flex}.quiz-opt{border:1.5px solid var(--paper3);border-radius:var(--r-sm);text-align:left;color:var(--ink);cursor:pointer;transition:var(--trans);box-shadow:var(--shadow);background:#fff;align-items:center;gap:12px;padding:14px 16px;font-family:inherit;font-size:14px;display:flex}.quiz-opt:hover:not(:disabled){border-color:var(--ink2);background:var(--paper);transform:translate(4px)}.quiz-opt:disabled{cursor:default}.quiz-opt.correct{border-color:var(--green);background:var(--green-light);color:var(--green)}.quiz-opt.wrong{border-color:var(--red);background:var(--red-light);color:var(--red)}.quiz-opt-letter{background:var(--paper2);width:26px;height:26px;color:var(--ink3);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:flex}.quiz-opt.correct .quiz-opt-letter{background:var(--green);color:#fff}.quiz-opt.wrong .quiz-opt-letter{background:var(--red);color:#fff}.quiz-result{text-align:center;padding:32px 20px}.result-score-ring{border:3px solid var(--red);width:100px;height:100px;box-shadow:var(--shadow-lg);background:#fff;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;margin:0 auto 20px;display:flex}.result-pct{color:var(--red);font-size:28px;font-weight:700}.result-pct-lbl{color:var(--ink3);font-size:10px}.result-title{margin-bottom:6px;font-size:20px;font-weight:700}.result-sub{color:var(--ink3);margin-bottom:24px;font-size:13px}.mark-done-btn{background:var(--green);color:#fff;border-radius:var(--r-sm);cursor:pointer;width:100%;transition:var(--trans);border:none;margin-bottom:10px;padding:14px;font-family:inherit;font-size:14px;font-weight:600}.mark-done-btn:hover{background:#155c30;transform:translateY(-1px)}.retry-btn{background:var(--paper2);width:100%;color:var(--ink2);border:1px solid var(--paper3);border-radius:var(--r-sm);cursor:pointer;transition:var(--trans);padding:12px;font-family:inherit;font-size:13px;font-weight:600}.retry-btn:hover{background:var(--paper3)}.vocab-mode-wrap{padding:16px}.vm-filter-row{scrollbar-width:none;gap:8px;padding-bottom:12px;display:flex;overflow-x:auto}.vm-filter-row::-webkit-scrollbar{display:none}.vm-filter{border:1px solid var(--paper3);color:var(--ink3);cursor:pointer;transition:var(--trans);background:#fff;border-radius:20px;flex-shrink:0;padding:6px 14px;font-family:inherit;font-size:12px;font-weight:600}.vm-filter.active{background:var(--red);border-color:var(--red);color:#fff}.vm-search{border:1px solid var(--paper3);border-radius:var(--r-sm);width:100%;color:var(--ink);transition:var(--trans);background:#fff;outline:none;margin-bottom:12px;padding:10px 14px;font-family:inherit;font-size:13px}.vm-search:focus{border-color:var(--red);box-shadow:0 0 0 3px #c0392b1a}.vm-stats{color:var(--ink3);margin-bottom:10px;font-size:12px}.vm-stats span{color:var(--ink2);font-weight:600}.vm-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;display:grid}.vm-card{border:1px solid var(--paper3);border-radius:var(--r);text-align:center;cursor:pointer;transition:var(--trans);box-shadow:var(--shadow);background:#fff;padding:14px 12px}.vm-card:hover{border-color:var(--red);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.vm-card.flipped{background:var(--ink);border-color:var(--ink)}.vm-front{flex-direction:column;align-items:center;gap:6px;display:flex}.vm-back{flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:100px;display:none}.vm-card.flipped .vm-front{display:none}.vm-card.flipped .vm-back{display:flex}.vm-zh{color:var(--ink);font-family:Noto Serif SC,serif;font-size:26px}.vm-card.flipped .vm-zh{color:#fff}.vm-py{font-size:12px;font-weight:600}.vm-th{color:#ffffffd9;font-size:13px}.vm-en{color:#fff6;font-size:11px}.vm-speak-btn{border:1px solid var(--paper3);background:var(--paper);cursor:pointer;color:var(--ink3);transition:var(--trans);border-radius:20px;margin-top:4px;padding:3px 10px;font-family:inherit;font-size:11px}.vm-speak-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}.profile-hero{color:#fff;background:linear-gradient(135deg,#6b1a6b 0%,#f13596 100%);align-items:center;gap:16px;padding:24px 20px;display:flex}.profile-avatar{background:var(--red);cursor:pointer;border:3px solid #ffffff4d;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:72px;height:72px;font-size:28px;font-weight:700;transition:all .2s;display:flex;position:relative;overflow:hidden}.profile-avatar:hover{opacity:.85}.profile-avatar img{object-fit:cover;border-radius:50%;width:100%;height:100%}.profile-avatar-edit{color:#fff;text-align:center;letter-spacing:.3px;background:#00000073;padding:3px 0;font-size:10px;font-weight:700;position:absolute;bottom:0;left:0;right:0}.profile-name{margin-bottom:3px;font-size:18px;font-weight:600}.profile-email{color:#ffffff73;margin-bottom:10px;font-size:12px}.profile-hsk{background:#ffffff1a;border:1px solid #ffffff26;border-radius:20px;align-items:center;gap:5px;padding:4px 10px;font-size:12px;font-weight:600;display:inline-flex}.profile-section{padding:16px}.profile-stat-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;display:grid}.profile-stat-box{border:1px solid var(--paper3);border-radius:var(--r);text-align:center;box-shadow:var(--shadow);background:#fff;padding:14px 10px}.psb-num{margin-bottom:2px;font-family:DM Sans;font-size:24px;font-weight:700}.psb-lbl{color:var(--ink3);font-size:10px;font-weight:500}.hsk-progress-section{border:1px solid var(--paper3);border-radius:var(--r);box-shadow:var(--shadow);background:#fff;margin-bottom:16px;padding:16px}.hsk-title{color:var(--ink);margin-bottom:14px;font-size:14px;font-weight:600}.hsk-row{align-items:center;gap:10px;margin-bottom:10px;display:flex}.hsk-lbl{color:var(--ink2);min-width:44px;font-size:12px;font-weight:600}.hsk-bar{background:var(--paper2);border-radius:3px;flex:1;height:6px;overflow:hidden}.hsk-fill{border-radius:3px;height:100%;transition:width .8s}.hsk-pct{color:var(--ink3);text-align:right;min-width:32px;font-size:11px}.done-lessons{border:1px solid var(--paper3);border-radius:var(--r);box-shadow:var(--shadow);background:#fff;overflow:hidden}.done-lesson-item{border-bottom:1px solid var(--paper3);align-items:center;gap:12px;padding:12px 16px;display:flex}.done-lesson-item:last-child{border-bottom:none}.done-lesson-icon{font-size:20px}.done-lesson-name{color:var(--ink);flex:1;font-size:13px;font-weight:600}.done-lesson-xp{color:var(--green);font-size:11px;font-weight:600}.logout-btn{background:var(--paper2);width:100%;color:var(--ink2);border:1px solid var(--paper3);border-radius:var(--r-sm);cursor:pointer;transition:var(--trans);margin-top:16px;padding:13px;font-family:inherit;font-size:13px;font-weight:600}.logout-btn:hover{background:var(--red-light);color:var(--red);border-color:var(--red)}#toast{background:var(--ink);color:#fff;z-index:200;opacity:0;pointer-events:none;white-space:nowrap;text-overflow:ellipsis;border-radius:20px;max-width:90vw;padding:10px 20px;font-size:13px;font-weight:500;transition:all .35s cubic-bezier(.4,0,.2,1);position:fixed;bottom:80px;left:50%;overflow:hidden;transform:translate(-50%)translateY(20px)}#toast.show{opacity:1;transform:translate(-50%)translateY(0)}.empty{text-align:center;color:var(--ink3);padding:48px 24px}.empty-icon{margin-bottom:12px;font-size:40px}.empty p{font-size:13px;font-weight:500}.btn-sm{background:var(--red);color:#fff;border-radius:var(--r-sm);cursor:pointer;transition:var(--trans);border:none;padding:9px 18px;font-family:inherit;font-size:13px;font-weight:600}.btn-sm:hover{background:#a93226;transform:translateY(-1px)}.divider{background:var(--paper3);height:1px;margin:12px 0}@keyframes bounce-dot{0%,to{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}.topic-cluster-section{padding:0 16px 4px}.topic-cluster-grid{grid-template-columns:1fr 1fr;gap:8px;padding:0 16px 12px;display:grid}.topic-cluster-card{background:var(--paper);border:1.5px solid var(--paper3);cursor:pointer;transition:var(--trans);border-radius:12px;flex-direction:column;gap:6px;padding:12px;display:flex}.topic-cluster-card:active{transform:scale(.98)}.tc-header{align-items:center;gap:8px;display:flex}.tc-icon{flex-shrink:0;font-size:22px}.tc-name{color:var(--ink);font-size:12px;font-weight:700;line-height:1.3}.tc-count{color:var(--ink3);margin-top:1px;font-size:10px}.tc-bar{background:var(--paper3);border-radius:2px;height:3px;overflow:hidden}.tc-bar-fill{border-radius:2px;height:3px;transition:width .6s}.tc-done{color:var(--ink3);margin-top:2px;font-size:10px}.topic-expand-panel{background:var(--paper);border:1.5px solid var(--paper3);border-radius:14px;margin:0 16px 16px;overflow:hidden}.topic-expand-header{cursor:pointer;align-items:center;gap:10px;padding:14px 16px;display:flex}.topic-expand-lessons{padding:0 12px 12px}@keyframes xpPop{0%{opacity:0;transform:translateY(0)scale(.6)}30%{opacity:1;transform:translateY(-18px)scale(1.15)}70%{opacity:1;transform:translateY(-34px)scale(1)}to{opacity:0;transform:translateY(-52px)scale(.9)}}@keyframes comboPulse{0%,to{transform:scale(1)}40%{transform:scale(1.22)}}@keyframes levelUpAnim{0%{opacity:0;transform:scale(.7)translateY(30px)}20%{opacity:1;transform:scale(1.08)translateY(-4px)}80%{opacity:1;transform:scale(1)translateY(0)}to{opacity:0;transform:scale(.95)translateY(-10px)}}@keyframes badgePop{0%{opacity:0;transform:translate(-50%)translateY(60px)scale(.8)}20%{opacity:1;transform:translate(-50%)translateY(-8px)scale(1.05)}80%{opacity:1;transform:translate(-50%)translateY(0)scale(1)}to{opacity:0;transform:translate(-50%)translateY(-20px)scale(.95)}}@keyframes heartBreak{0%{transform:scale(1)}30%{transform:scale(1.3)}60%{transform:scale(.8)rotate(-10deg)}to{transform:scale(1)rotate(0)}}@keyframes firePulse{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.15)scaleX(.93)}}@keyframes shakeNo{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.xp-float{pointer-events:none;z-index:9999;letter-spacing:-.3px;text-shadow:0 1px 4px #0000002e;font-size:17px;font-weight:800;animation:.9s ease-out forwards xpPop;position:fixed}.levelup-overlay{z-index:9998;pointer-events:none;background:#00000073;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.levelup-card{text-align:center;background:#fff;border-radius:20px;min-width:240px;padding:28px 36px;animation:2.4s forwards levelUpAnim;box-shadow:0 8px 40px #0003}.badge-toast{z-index:9997;pointer-events:none;background:#fff;border-radius:16px;align-items:center;gap:12px;min-width:260px;padding:14px 20px;animation:2.8s forwards badgePop;display:flex;position:fixed;bottom:90px;left:50%;box-shadow:0 4px 24px #00000026}.life-heart{font-size:20px;transition:transform .3s,opacity .3s;display:inline-block}.life-heart.lost{opacity:.25;filter:grayscale();animation:.4s heartBreak}#top-streak-fire{transform-origin:bottom;animation:1.2s ease-in-out infinite firePulse;display:inline-block}#screen-tangtang-chat{z-index:20;background:#fff0f8;flex-direction:column;display:none;position:fixed;inset:56px 0 62px;overflow:hidden}#screen-tangtang-chat.active{display:flex}.tt-header{background:linear-gradient(135deg,#6b1a6b,#f13596);flex-shrink:0;align-items:center;gap:12px;padding:14px 20px;display:flex}.tt-header-avatar{object-fit:contain;background:#ffffff38;border:2px solid #ffffff4d;border-radius:50%;flex-shrink:0;width:42px;height:42px;padding:4px}.tt-header-info{flex:1}.tt-header-name{color:#fff;font-size:15px;font-weight:800;line-height:1.2}.tt-header-sub{color:#fffc;margin-top:2px;font-size:11px}.tt-usage-pill{color:#fff;white-space:nowrap;text-shadow:0 1px 3px #0003;background:#ffffff40;border:1px solid #ffffff80;border-radius:20px;flex-shrink:0;padding:5px 12px;font-size:11px;font-weight:700}#tangtang-messages{-webkit-overflow-scrolling:touch;flex-direction:column;flex:1;gap:14px;padding:16px 16px 12px;display:flex;overflow-y:auto}.tt-msg-row{align-items:flex-end;gap:8px;display:flex}.tt-msg-row.user{flex-direction:row-reverse}.tt-msg-avatar{object-fit:contain;background:#fce4f3;border-radius:50%;flex-shrink:0;align-self:flex-end;width:30px;height:30px;padding:2px}.tt-bubble{white-space:pre-wrap;word-break:break-word;max-width:72%;padding:11px 15px;font-size:14px;line-height:1.75}.tt-bubble.assistant{color:var(--ink);background:#fff;border:1px solid #f5d8ec;border-radius:18px 18px 18px 4px;box-shadow:0 2px 10px #f1359614}.tt-bubble.user{color:#fff;background:linear-gradient(135deg,#f13596,#d4208a);border-radius:18px 18px 4px;box-shadow:0 3px 14px #f135964d}.tt-time{color:#c0a0b0;text-align:right;margin-top:3px;font-size:10px}.tt-msg-row.assistant .tt-time{text-align:left;padding-left:38px}#tangtang-input-wrap{padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #f0d8ec;flex-shrink:0;align-items:center;gap:10px;display:flex}#tangtang-input{color:var(--ink);background:#fff8fc;border:1.5px solid #f0d0e0;border-radius:24px;outline:none;flex:1;padding:11px 16px;font-family:inherit;font-size:14px;transition:border-color .2s,background .2s}#tangtang-input:focus{background:#fff;border-color:#f13596}#tangtang-send-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#f13596,#e0206e);border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:18px;transition:transform .15s,box-shadow .15s;display:flex;box-shadow:0 3px 12px #f1359659}#tangtang-send-btn:active{transform:scale(.92);box-shadow:0 1px 6px #f1359633}#tangtang-limit-bar{color:#9a7a8a;text-align:center;background:#fff5fb;border-top:1px solid #f0d0e0;flex-shrink:0;padding:5px 16px;font-size:11px}#pair-wrap{max-width:600px;margin:0 auto;padding:0 16px 48px;font-family:Noto Sans Thai,DM Sans,sans-serif}#pair-wrap .ph{z-index:30;background:#fff5fb;border-bottom:1.5px solid #f0d0e0;align-items:center;gap:12px;margin:0 -16px;padding:14px 0 12px 16px;display:flex;position:sticky;top:56px}#pair-wrap .ph-title{color:#1a0a12;font-size:18px;font-weight:800}.p-diff-row{gap:8px;margin:14px 0 12px;display:flex}.p-diff-btn{cursor:pointer;color:#5a3a4a;-webkit-tap-highlight-color:transparent;background:#fff;border:2px solid #f0d0e0;border-radius:14px;flex:1;padding:10px 6px;font-family:inherit;font-size:13px;font-weight:700;line-height:1.5;transition:all .15s}.p-diff-btn span{font-size:11px;font-weight:500;display:block}.p-diff-btn.active{color:#fff;background:linear-gradient(135deg,#f13596,#ff7b2f);border-color:#0000;box-shadow:0 4px 14px #f135964d}.p-top{gap:10px;margin:0 0 12px;display:flex}.p-stat{text-align:center;background:#fff;border:1.5px solid #f0d0e0;border-radius:14px;flex:1;padding:10px 8px;box-shadow:0 2px 10px #f1359612}.p-stat-v{color:#1a0a12;font-size:24px;font-weight:800;line-height:1}.p-stat-l{color:#9a7a8a;margin-top:3px;font-size:12px;font-weight:600}.p-level-row{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.p-badge{color:#fff;background:linear-gradient(135deg,#f13596,#ff7b2f);border-radius:99px;padding:5px 14px;font-size:13px;font-weight:700}.p-left{color:#9a7a8a;font-size:13px;font-weight:700}.p-combo{text-align:center;color:#ff7b2f;min-height:28px;margin-bottom:8px;font-size:16px;font-weight:800}.p-grid{grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;display:grid}.p-tile{cursor:pointer;aspect-ratio:1;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#fff;border:2.5px solid #f0d0e0;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;min-height:72px;padding:10px 6px;transition:transform .15s cubic-bezier(.34,1.56,.64,1),border-color .15s,background .15s;animation:.3s cubic-bezier(.34,1.56,.64,1) both pTileIn;display:flex;position:relative;overflow:hidden}@keyframes pTileIn{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.p-tile.zh-t{background:linear-gradient(145deg,#fff8fc,#ffedf6);border-color:#f9c0df}.p-tile.th-t{background:linear-gradient(145deg,#f0f6ff,#e2eeff);border-color:#b8d9f8}.p-tile.sel{border-color:#f13596;transform:scale(1.06);box-shadow:0 0 0 3px #f1359640;background:linear-gradient(145deg,#ffedf6,#ffd6ef)!important}.p-tile.mat{pointer-events:none;border-color:#06c755;animation:.4s cubic-bezier(.34,1.56,.64,1) pMatch;background:linear-gradient(145deg,#f0fff8,#d6f8ea)!important}.p-tile.mat:after{content:"✓";color:#06c755;font-size:13px;font-weight:800;position:absolute;top:4px;right:6px}.p-tile.wrg{border-color:#f44;animation:.35s pShake;background:linear-gradient(145deg,#fff0f0,#ffd6d6)!important}@keyframes pMatch{0%{transform:scale(1)}50%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes pShake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.p-zh{color:#1a0a12;text-align:center;font-family:Noto Serif SC,Noto Sans SC,sans-serif;font-size:clamp(20px,5vw,28px);font-weight:700;line-height:1.2}.p-py{color:#9a7a8a;text-align:center;margin-top:3px;font-size:clamp(9px,2.2vw,12px);font-style:italic}.p-th{color:#1a3a8a;text-align:center;padding:0 4px;font-size:clamp(12px,3vw,15px);font-weight:700;line-height:1.4}.p-result{text-align:center;background:#fff;border:1.5px solid #f0d0e0;border-radius:24px;padding:32px 24px;animation:.4s cubic-bezier(.34,1.56,.64,1) pTileIn;display:none;box-shadow:0 8px 32px #f135961f}.p-result.show{display:block}.p-res-stats{justify-content:center;gap:18px;margin:16px 0 24px;display:flex}.p-rs-v{color:#f13596;font-size:30px;font-weight:800}.p-rs-l{color:#9a7a8a;margin-top:3px;font-size:12px;font-weight:600}.p-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;border-radius:14px;width:100%;margin-bottom:10px;padding:15px;font-family:inherit;font-size:15px;font-weight:700}.p-btn-pink{color:#fff;background:linear-gradient(135deg,#f13596,#ff7b2f);box-shadow:0 4px 16px #f135964d}.p-btn-out{color:#5a3a4a;background:0 0;border:2px solid #f0d0e0}.p-start-btn{color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;letter-spacing:.3px;background:linear-gradient(135deg,#f13596,#ff7b2f);border:none;border-radius:16px;width:100%;margin-top:10px;padding:17px;font-family:inherit;font-size:17px;font-weight:800;box-shadow:0 6px 20px #f1359659}.p-timer-wrap{width:58px;height:58px;margin:0 auto;position:relative}.p-timer-svg{width:58px;height:58px;transform:rotate(-90deg)}.p-timer-text{color:#1a0a12;justify-content:center;align-items:center;font-size:17px;font-weight:800;display:flex;position:absolute;inset:0}@media (min-width:768px){#pair-wrap{max-width:680px;padding:0 24px 56px}.p-grid{gap:14px}.p-tile{border-radius:20px;min-height:96px;padding:14px 10px}.p-diff-btn{padding:12px 8px;font-size:15px}.p-stat-v{font-size:28px}.p-stat-l{font-size:13px}.p-badge{padding:6px 16px;font-size:14px}.p-combo{font-size:18px}.p-btn{padding:17px;font-size:16px}.p-start-btn{padding:19px;font-size:19px}.p-timer-wrap,.p-timer-svg{width:68px;height:68px}.p-timer-text{font-size:20px}}@media (min-width:1024px){#pair-wrap{max-width:760px;padding:0 32px 64px}.p-grid{gap:16px}.p-tile{border-radius:22px;min-height:110px;padding:16px 12px}.p-stat-v{font-size:32px}.p-res-stats{gap:28px}.p-rs-v{font-size:36px}}#wm-wrap{background:#fff5fb;max-width:480px;min-height:100vh;margin:0 auto;padding:0 0 24px;font-family:Noto Sans Thai,sans-serif}.wm-header{z-index:30;background:#fff;border-bottom:1.5px solid #f0d0e0;align-items:center;gap:10px;padding:10px 14px;display:flex;position:sticky;top:56px}.wm-nav{justify-content:space-between;align-items:center;gap:8px;padding:10px 14px 0;display:flex}.wm-nav-btn{cursor:pointer;color:#5a3a4a;text-align:center;background:#fff;border:1.5px solid #f0d0e0;border-radius:12px;flex:1;padding:10px 16px;font-family:inherit;font-size:13px;font-weight:700;transition:all .15s}.wm-nav-btn:active{background:#fce4f3}.wm-nav-btn:disabled{opacity:.3;cursor:default}.wm-nav-counter{color:#9a7a8a;text-align:center;min-width:54px;font-size:13px;font-weight:700}.wm-progress{background:#f0d0e0;border-radius:99px;height:4px;margin:10px 14px 0;overflow:hidden}.wm-progress-fill{background:linear-gradient(90deg,#f13596,#ff7b2f);border-radius:99px;height:100%;transition:width .3s}.wm-center-wrap{flex-direction:column;align-items:center;padding:16px 14px 0;display:flex}.wm-center-card{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:96px;height:96px;transition:transform .2s cubic-bezier(.34,1.56,.64,1);display:flex;box-shadow:0 8px 28px #f1359647}.wm-center-card:active{transform:scale(.93)!important}.wm-center-zh{color:#fff;font-family:Noto Sans SC,sans-serif;font-size:40px;font-weight:700;line-height:1}.wm-center-py{color:#fffffff2;margin-top:4px;font-size:18px;font-weight:600}.wm-meaning{color:#5a3a4a;margin-top:8px;font-size:14px;font-weight:600}.wm-trick{color:#5a3a4a;text-align:left;background:#fff;border:1.5px solid #f0d0e0;border-radius:12px;margin:10px 14px 0;padding:12px 14px;font-size:15px;line-height:1.8}.wm-trick-label{color:#f13596;margin-right:5px;font-size:13px;font-weight:700}.wm-hint{color:#9a7a8a;text-align:center;padding:8px 0 4px;font-size:11px;animation:2s infinite wmPulse}@keyframes wmPulse{0%,to{opacity:.4}50%{opacity:1}}.wm-nodes{grid-template-columns:repeat(3,1fr);gap:8px;padding:6px 14px 0;display:grid}.wm-node{cursor:pointer;text-align:center;opacity:0;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#fff;border:2px solid #f0d0e0;border-radius:14px;padding:10px 8px;transition:all .35s cubic-bezier(.34,1.56,.64,1);transform:scale(.7)translateY(12px);box-shadow:0 2px 8px #f1359612}.wm-node.visible{opacity:1;transform:scale(1)translateY(0)}.wm-node:active{transform:scale(.93)!important}.wm-node-combo{font-family:Noto Sans SC,sans-serif;font-size:18px;font-weight:700;line-height:1.2}.wm-node-py{color:#9a7a8a;margin-top:2px;font-size:9px;font-style:italic}.wm-node-th{color:#5a3a4a;margin-top:3px;font-size:10px;font-weight:600;line-height:1.3}@keyframes wmCenterPop{0%{transform:scale(1)}40%{transform:scale(1.13)}to{transform:scale(1)}}.wm-center-card.pop{animation:.4s cubic-bezier(.34,1.56,.64,1) wmCenterPop}.wm-lock-badge{color:#f13596;text-align:center;background:#fff0f8;border:1.5px solid #f9c0df;border-radius:10px;margin:8px 14px 0;padding:8px 12px;font-size:11px;font-weight:600}.wm-popup-overlay{z-index:200;background:#00000073;justify-content:center;align-items:flex-end;animation:.2s wmFade;display:flex;position:fixed;inset:0}@keyframes wmFade{0%{opacity:0}to{opacity:1}}.wm-popup{background:#fff;border-radius:24px 24px 0 0;width:100%;max-width:480px;padding:20px 18px 36px;animation:.3s cubic-bezier(.34,1.56,.64,1) wmSlide}@keyframes wmSlide{0%{transform:translateY(100%)}to{transform:translateY(0)}}.wm-popup-combo{text-align:center;font-family:Noto Sans SC,sans-serif;font-size:42px;font-weight:700;line-height:1.1}.wm-popup-py{color:#9a7a8a;text-align:center;margin-top:3px;font-size:14px;font-style:italic}.wm-popup-meaning{color:#1a0a12;text-align:center;margin:8px 0 14px;font-size:17px;font-weight:700}.wm-popup-parts{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-bottom:14px;display:flex}.wm-popup-part{text-align:center;background:#fff5fb;border:1.5px solid #f0d0e0;border-radius:12px;padding:8px 12px}.wm-popup-part-zh{font-family:Noto Sans SC,sans-serif;font-size:20px;font-weight:700}.wm-popup-part-label{color:#9a7a8a;margin-top:2px;font-size:10px}.wm-popup-op{color:#c0a0b0;font-size:20px;font-weight:700}.wm-popup-sentence{background:#f8f0ff;border-radius:12px;margin-bottom:14px;padding:11px 13px}.wm-popup-sent-zh{color:#1a0a12;margin-bottom:4px;font-family:Noto Sans SC,sans-serif;font-size:15px;font-weight:500}.wm-popup-sent-th{color:#5a3a4a;font-size:12px}.wm-popup-btns{gap:8px;display:flex}.wm-popup-close{cursor:pointer;color:#5a3a4a;background:#fff;border:1.5px solid #f0d0e0;border-radius:12px;flex:1;padding:12px;font-family:inherit;font-size:14px;font-weight:700}.wm-popup-speak{cursor:pointer;background:linear-gradient(135deg,#f13596,#ff7b2f);border:none;border-radius:12px;flex-shrink:0;width:48px;height:48px;font-size:20px}