/* HanBridge content: white surfaces, generous type and restrained deep teal. */
body .main:not(.page-home):not(.page-account){color:#47514f}
body .main:not(.page-home):not(.page-account) :is(.page-head h1,.section-heading h2,.panel>h2,.panel>h3,.course-card h3,.lesson-title h1,.lesson-body h2,.empty h3,.vocab-title strong,.question h3,.list-row h3){color:#202c2d;font-weight:600;letter-spacing:.005em}
body .main:not(.page-home):not(.page-account) :is(.panel>p,.course-card p,.list-row p,.vocab-card p,.writing-requirements li,.saved-response,.vocab-example){color:#47514f}
body .main:not(.page-home):not(.page-account) :is(.page-head p,.section-heading p,.eyebrow,.muted,.en,.card-kicker,.card-footer,.stat>span,.source-links,.source-links a,.writing-meter,.policy-note,.map-caption,.map-building small,.pinyin-line){color:#707977}
body.english .main:not(.page-home):not(.page-account) .en{color:#707977}
body .main:not(.page-home):not(.page-account) :is(.stat strong,.balance-card strong,.package .price){color:#202c2d;font-variant-numeric:tabular-nums;font-weight:600}
body .main:not(.page-home):not(.page-account) :is(.panel,.course-card,.vocab-card,.question){background:#fff;border-color:#e4e9e5;border-radius:16px;box-shadow:0 2px 10px #202c2d03}
body .main:not(.page-home):not(.page-account) .course-card:hover{border-color:#b9cbc0;box-shadow:0 9px 26px #202c2d09;transform:translateY(-3px)}
body .main:not(.page-home):not(.page-account) .course-card .card-footer{border-top-color:#e9ece8}
body .main:not(.page-home):not(.page-account) :is(.discovery-grid,.card-grid:has(.card-art[data-topic])) .course-card:nth-child(n){background:#fff;border-color:#e4e9e5;border-radius:16px}
body .main:not(.page-home):not(.page-account) :is(.discovery-grid,.card-grid:has(.card-art[data-topic])) .card-footer{border-top-color:#e9ece8}
body .main:not(.page-home):not(.page-account) :is(.card-art,.lesson-visual,.topic-illustration){background:#fffdf9}
body .main:not(.page-home):not(.page-account) .topic-illustration>span{color:#707977;border-color:#d9ded8;background:#ffffffb3;border-radius:10px}
body .main:not(.page-home):not(.page-account) .card-art .pill{color:#244c48;background:#fffffff2;border-color:#e3e7e3}
body .main:not(.page-home):not(.page-account) .round-arrow{color:#244c48;background:#fff;border-color:#dce4de;transition:background .18s,border-color .18s,transform .18s}
body .main:not(.page-home):not(.page-account) .round-arrow:hover{background:#edf3ef;border-color:#b9cbc0;transform:translateX(2px)}
body .main:not(.page-home):not(.page-account) .link-btn{color:#244c48}
body .main:not(.page-home):not(.page-account) .link-btn:hover{color:#173a36}
body .main:not(.page-home):not(.page-account) .pill{color:#707977;background:#f9faf8;border-color:#e3e7e3;border-radius:7px}
body .main:not(.page-home):not(.page-account) .pill:is(.accent,.blue){color:#244c48;background:#edf3ef;border-color:#dce5df}
body .main:not(.page-home):not(.page-account) .btn{border-radius:11px;min-height:44px;padding:11px 17px;font-weight:500;transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s}
body .main:not(.page-home):not(.page-account) .btn.small{min-height:38px;padding:8px 12px;border-radius:9px}
body .main:not(.page-home):not(.page-account) .btn:not(:disabled):active{transform:translateY(1px)}
body .main:not(.page-home):not(.page-account) .btn.secondary{color:#47514f;background:#fff;border-color:#dce2dc}
body .main:not(.page-home):not(.page-account) .btn.secondary:hover{color:#244c48;background:#f5f6f3;border-color:#bfcfc5}
body .main:not(.page-home):not(.page-account) .btn.soft{color:#244c48;background:#edf3ef;border-color:#edf3ef}
body .main:not(.page-home):not(.page-account) .btn.soft:hover{background:#e2ece5;border-color:#d5e1d8}
body .main:not(.page-home):not(.page-account) :is(input,textarea,select){color:#202c2d;background:#fff;border-color:#dce2dc;border-radius:10px}
body .main:not(.page-home):not(.page-account) :is(input,textarea)::placeholder{color:#818985}
body .main:not(.page-home):not(.page-account) label{color:#47514f}
body .main:not(.page-home):not(.page-account) :is(button,a,summary):focus-visible{outline:2px solid #668e7d;outline-offset:3px}

/* Discovery and summary cards keep the same calm, neutral palette. */
body .main:not(.page-home):not(.page-account) .topic-tile:nth-child(n){background:#fff;border-color:#e4e9e5;border-radius:14px;box-shadow:0 2px 10px #202c2d03;transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}
body .main:not(.page-home):not(.page-account) .topic-tile:hover{background:#fcfdfb;border-color:#b9cbc0;box-shadow:0 7px 20px #202c2d08;transform:translateY(-2px)}
body .main:not(.page-home):not(.page-account) .topic-tile:active{transform:translateY(0);box-shadow:0 1px 4px #202c2d04}
body .main:not(.page-home):not(.page-account) .topic-tile>strong{color:#202c2d;font-weight:600}
body .main:not(.page-home):not(.page-account) .topic-tile>span{color:#707977}
body .main:not(.page-home):not(.page-account) .topic-tile>.icon{color:#87958a}
body .main:not(.page-home):not(.page-account) .stat:nth-child(n){background:#fff;border-color:#e4e9e5;border-radius:16px;box-shadow:0 2px 10px #202c2d03;min-height:136px;padding:25px}
body .main:not(.page-home):not(.page-account) .balance-card{color:#687470;background:#fff;border-color:#e4e9e5;border-radius:18px;box-shadow:0 4px 18px #202c2d04}
body .main:not(.page-home):not(.page-account) .balance-card :is(small,.eyebrow),body .main:not(.page-home):not(.page-account) .package :is(.token-count,ul){color:#707977}
body .main:not(.page-home):not(.page-account) .balance-card>.icon{color:#87958a}
body .main:not(.page-home):not(.page-account) .list-row{border-bottom-color:#e9ece8}
body .main:not(.page-home):not(.page-account) details.panel>summary{color:#202c2d}
body .main:not(.page-home):not(.page-account) details.panel>summary:after{color:#87958a}
body .main:not(.page-home):not(.page-account) .empty{background:#fafbf8;border-color:#e3e7e3;border-radius:14px}
body .main:not(.page-home):not(.page-account) .empty p{color:#707977}
body .main:not(.page-home):not(.page-account) .empty-mark{color:#66816f;background:#eef2ec;border-radius:12px}
body .main:not(.page-home):not(.page-account) .error-screen{background:#fff8f6;border-color:#ead6ce}
body .main:not(.page-home):not(.page-account) .error-screen h3{color:#a15442}
body .main:not(.page-home):not(.page-account) .notice{color:#47514f;background:#f5f6f3;border-radius:10px}
body .main:not(.page-home):not(.page-account) .progress-bar{background:#e9eee8}
body .main:not(.page-home):not(.page-account) .progress-bar i{background:#66816f}
body .main:not(.page-home):not(.page-account) .table-scroll{border-color:#e4e9e5;border-radius:12px}
body .main:not(.page-home):not(.page-account) th{color:#687470;background:#f8faf7;font-size:12px;font-weight:600;padding:14px 16px;line-height:1.7}
body .main:not(.page-home):not(.page-account) td{color:#47514f;border-bottom-color:#e9ece8;font-size:13px;padding:16px;line-height:1.8;vertical-align:middle}
body .main:not(.page-home):not(.page-account) tbody tr{transition:background .16s}
body .main:not(.page-home):not(.page-account) tbody tr:hover{background:#fcfdfb}
body .main:not(.page-home):not(.page-account) td .btn{min-height:36px}
body .main:not(.page-home):not(.page-account) td .btn+.btn{margin-left:6px}
body .main:not(.page-home):not(.page-account) .footer{border-top-color:#e3e7e3;color:#707977}
body .main:not(.page-home):not(.page-account) .footer button{color:#707977}

/* A reading surface with a thin selection line instead of colored pill tabs. */
body .main:not(.page-home):not(.page-account) .level-switch{background:#f5f6f3;border-color:#e3e7e3;border-radius:10px}
body .main:not(.page-home):not(.page-account) .level-switch button{color:#707977;border-radius:7px}
body .main:not(.page-home):not(.page-account) .level-switch button.active{color:#244c48;background:#fff;box-shadow:0 1px 5px #202c2d08}
body .main:not(.page-home):not(.page-account) .tabs{background:#fff;border:0;border-bottom:1px solid #e3e7e3;border-radius:0;padding-bottom:0}
body .main:not(.page-home):not(.page-account) .tab{color:#707977;border-radius:0;background:transparent}
body .main:not(.page-home):not(.page-account) .tab:hover{color:#244c48;background:#f8faf7}
body .main:not(.page-home):not(.page-account) .tab.active{color:#244c48;background:#fff;box-shadow:inset 0 -2px 0 #244c48;font-weight:600}
body .main:not(.page-home):not(.page-account) .tab .en{color:inherit}
body .main:not(.page-home):not(.page-account) .lesson-tools{background:#fff;border-color:#e3e7e3;border-radius:12px}
body .main:not(.page-home):not(.page-account) .lesson-tools>summary{color:#47514f}
body .main:not(.page-home):not(.page-account) .lesson-tools>summary>span{color:#707977}
body .main:not(.page-home):not(.page-account) .lesson-tools>summary:after{color:#244c48}
body .main:not(.page-home):not(.page-account) .lesson-tools-content{border-top-color:#e3e7e3}
body .main:not(.page-home):not(.page-account) .lesson-tools .panel{border:0;background:transparent;box-shadow:none;border-radius:0}
body .main:not(.page-home):not(.page-account) .lesson-tools h3{color:#202c2d}
body .main:not(.page-home):not(.page-account) .zh-text{color:#202c2d}
body .main:not(.page-home):not(.page-account) .translation,body.english .main:not(.page-home):not(.page-account) .translation{color:#707977}
body .main:not(.page-home):not(.page-account) .glossary-word{color:#244c48;border-bottom-color:#b7c9bc}
body .main:not(.page-home):not(.page-account) .glossary-word:hover{background:#edf3ef}
body .main:not(.page-home):not(.page-account) .glossary-word rt{color:#818985}
body .main:not(.page-home):not(.page-account) .article-figure{border-color:#e3e7e3;border-radius:12px}
body .main:not(.page-home):not(.page-account) .article-figure figcaption{color:#707977;background:#fafbf8}
body .main:not(.page-home):not(.page-account) .article-figure figcaption span{color:#818985}
body .main:not(.page-home):not(.page-account) :is(.chapter-end,.vocab-actions,.source-links){border-top-color:#e3e7e3}
body .main:not(.page-home):not(.page-account) .vocab-actions button{color:#244c48}
body .main:not(.page-home):not(.page-account) .tone-1{color:#a5784e}
body .main:not(.page-home):not(.page-account) .tone-2{color:#527681}
body .main:not(.page-home):not(.page-account) .tone-3{color:#66816f}
body .main:not(.page-home):not(.page-account) .tone-4{color:#a16958}
body .main:not(.page-home):not(.page-account) .grammar-formula{color:#244c48;background:#f0f4ef;border-radius:12px}
body .main:not(.page-home):not(.page-account) .english-tip{color:#707977;background:#fafbf8;border-left-color:#b59768;border-radius:0 10px 10px 0}
body .main:not(.page-home):not(.page-account) .english-tip strong{color:#47514f}
body .main:not(.page-home):not(.page-account) .scaffolds{color:#47514f;background:#fafbf8;border-color:#e3e7e3;border-radius:10px}
body .main:not(.page-home):not(.page-account) .scaffolds summary{color:#47514f}
body .main:not(.page-home):not(.page-account) .writing-requirements .icon{color:#87958a}
body .main:not(.page-home):not(.page-account) .question-num{color:#244c48;background:#edf3ef;border-radius:8px}
body .main:not(.page-home):not(.page-account) .option{color:#47514f;background:#fff;border-color:#e3e7e3;border-radius:10px}
body .main:not(.page-home):not(.page-account) .option:hover{border-color:#bfcfc5;background:#fafbf8}
body .main:not(.page-home):not(.page-account) .option.selected{color:#244c48;background:#edf3ef;border-color:#668e7d}
body .main:not(.page-home):not(.page-account) .option.correct{color:#37624b;background:#eef5ee;border-color:#a7c3ab}
body .main:not(.page-home):not(.page-account) .feedback{color:#37624b;background:#eef5ee;border-radius:10px}
body .main:not(.page-home):not(.page-account) .option.wrong,body .main:not(.page-home):not(.page-account) .feedback.wrong{color:#a15442;background:#fff1ec;border-color:#d9a798}
body .main:not(.page-home):not(.page-account) .order-answer{color:#47514f;background:#f5f6f3;border-color:#cbd4ce}
body .main:not(.page-home):not(.page-account) .match-item{color:#47514f;background:#fff;border-color:#dce2dc;border-radius:10px}
body .main:not(.page-home):not(.page-account) .match-item.selected{color:#244c48;background:#edf3ef;border-color:#668e7d}
body .main:not(.page-home):not(.page-account) .match-item.matched{color:#37624b;background:#eef5ee;border-color:#a7c3ab}
body .main:not(.page-home):not(.page-account) .match-item.shake{color:#a15442;background:#fff1ec;border-color:#d9a798}
body .main:not(.page-home):not(.page-account) .match-line{stroke:#668e7d}
body .main:not(.page-home):not(.page-account) .match-line.error{stroke:#a15442}
body .main:not(.page-home):not(.page-account) .match-save{color:#707977}
body .main:not(.page-home):not(.page-account) .palace-map{background:#f7f6f1;border-radius:12px}
body .main:not(.page-home):not(.page-account) .palace-map .axis:before{background:#c8b797}
body .main:not(.page-home):not(.page-account) .map-building{color:#776344;background:#f2eddf;border-color:#d7c7a9}
body .main:not(.page-home):not(.page-account) .teaching-diagram svg{background:#f7f6f1}
body .main:not(.page-home):not(.page-account) .teaching-diagram>p{color:#707977}
body .main:not(.page-home):not(.page-account) .review-meaning{color:#244c48}

/* The same tone follows learning reports into dialogs and helper drawers. */
body .overlay{background:#202c2d38;backdrop-filter:blur(5px)}
body .modal{background:#fff;border-color:#e4e9e5;border-radius:20px;padding:30px;box-shadow:0 24px 80px #202c2d24;scrollbar-color:#cbd4ce transparent;animation:hb-content-enter .2s ease-out}
body .modal .modal-head h2,body .modal :is(.panel>h3,.learner-report strong,.learner-section>h3){color:#202c2d;font-weight:600;letter-spacing:.005em}
body .modal :is(.en,.modal-head .en,.policy-note,.auth-switch,.learner-report small,.learner-summary,.learner-section>.muted,.dimension p,.learner-error,.correction-summary li){color:#707977}
body.english .modal .en{color:#707977}
body .modal>p,body .modal .panel>p{color:#47514f}
body .overlay .modal label{color:#47514f}
body .modal :is(input,textarea,select),body .chat-form input{color:#202c2d;background:#fff;border-color:#dce2dc;border-radius:10px}
body .modal :is(input,textarea)::placeholder,body .chat-form input::placeholder{color:#818985}
body .modal :is(button,a,summary):focus-visible,body .chat-drawer :is(button,a):focus-visible{outline:2px solid #668e7d;outline-offset:3px}
body .modal .btn{border-radius:11px;min-height:44px;transition:background .18s,border-color .18s,color .18s,transform .18s}
body .modal .btn.small{min-height:38px}
body .modal .btn:not(:disabled):active{transform:translateY(1px)}
body .modal .btn.secondary{color:#47514f;background:#fff;border-color:#dce2dc}
body .modal .btn.secondary:hover{color:#244c48;background:#f5f6f3;border-color:#bfcfc5}
body .modal .btn.soft{color:#244c48;background:#edf3ef}
body .modal .close-modal{width:40px;height:40px;flex-shrink:0;color:#687470;background:#f6f8f4;border-radius:11px;transition:background .18s,color .18s,transform .18s}
body .modal .close-modal:hover{color:#244c48;background:#e9eee8}
body .modal .close-modal:active{transform:scale(.96)}
body .modal .panel{background:#fff;border-color:#e3e7e3;border-radius:12px;box-shadow:none}
body .modal .level-option{color:#47514f;background:#fff;border-color:#e3e7e3;border-radius:10px}
body .modal .level-option:hover{background:#f5f6f3;border-color:#cbd4ce}
body .modal .level-option small{color:#707977}
body .modal .level-option.active{color:#244c48;background:#edf3ef;border-color:#668e7d}
body .modal :is(.explain-card,.notice){color:#47514f;background:#f5f6f3;border-color:#e3e7e3;border-radius:10px}
body .modal .explain-card p{color:#707977}
body .modal .auth-switch button{color:#244c48}
body .modal-error{color:#a15442}
body .modal .quality-grid>div{color:#707977;background:#f5f6f3;border-radius:10px}
body .modal .quality-grid strong{color:#202c2d}
body .modal .progress-bar{background:#e9eee8}
body .modal .progress-bar i{background:#66816f}
body .modal .learner-summary,body .modal .learner-error{border-bottom-color:#e3e7e3}
body .modal .learner-report{border-color:#e3e7e3;border-radius:12px}
body .modal .learner-report>summary{background:#fafbf8}
body .modal .learner-report>summary:after{color:#244c48}
body .modal .learner-report-body>.panel{border:0;border-radius:0;background:transparent}
body .modal .feedback{color:#37624b;background:#eef5ee;border-radius:10px}
body .modal .feedback.wrong{color:#a15442;background:#fff1ec}
body .modal .report-score{color:#244c48}
body :is(.main:not(.page-home):not(.page-account),.modal) .score-ring{background:conic-gradient(#66816f calc(var(--score)*1%),#e9eee8 0)}
body :is(.main:not(.page-home):not(.page-account),.modal) .score-ring>div{color:#244c48}
body :is(.main:not(.page-home):not(.page-account),.modal) .score-ring small{color:#707977}
body :is(.main:not(.page-home):not(.page-account),.modal) .dimension{color:#47514f}
body :is(.main:not(.page-home):not(.page-account),.modal) .dimension p{color:#707977}
body :is(.main:not(.page-home):not(.page-account),.modal) .dimension small{color:#707977}
body :is(.main:not(.page-home):not(.page-account),.modal) .correction{border-bottom-color:#e3e7e3}
body :is(.main:not(.page-home):not(.page-account),.modal) .correction del{color:#a15442}
body :is(.main:not(.page-home):not(.page-account),.modal) .correction ins{color:#37624b}
body :is(.main:not(.page-home):not(.page-account),.modal) .correction-summary{border-color:#e3e7e3}
body :is(.main:not(.page-home):not(.page-account),.modal) .correction-summary li+li{border-top-color:#e3e7e3}
body :is(.main:not(.page-home):not(.page-account),.modal) .correction-summary strong{color:#244c48}
body :is(.main:not(.page-home):not(.page-account),.modal) .error-tags strong{border-left-color:#e3e7e3}
body :is(.main:not(.page-home):not(.page-account),.modal) .quality-grid>div{color:#707977;background:#f5f6f3;border-radius:10px}
body :is(.main:not(.page-home):not(.page-account),.modal) .quality-grid strong{color:#202c2d}
body :is(.main:not(.page-home):not(.page-account),.modal) .learner-report{border-color:#e3e7e3;border-radius:12px}
body :is(.main:not(.page-home):not(.page-account),.modal) .learner-report>summary{background:#fafbf8}
body :is(.main:not(.page-home):not(.page-account),.modal) .learner-report strong,body :is(.main:not(.page-home):not(.page-account),.modal) .learner-section>h3{color:#202c2d}
body :is(.main:not(.page-home):not(.page-account),.modal) .learner-report small,body :is(.main:not(.page-home):not(.page-account),.modal) .learner-summary{color:#707977}
body .chat-drawer{background:#fff;border-color:#e4e9e5;border-radius:18px;box-shadow:0 18px 55px #202c2d1a;animation:hb-content-enter .2s ease-out}
body .chat-header{border-bottom-color:#e3e7e3}
body .chat-header strong{color:#202c2d}
body .chat-header .en{color:#707977}
body .feature-icon{color:#244c48;background:#edf3ef;border-radius:8px}
body .chat-message{color:#47514f;background:#f5f6f3;border-radius:10px}
body .chat-message.user{color:#244c48;background:#edf3ef}
body .chat-form{border-top-color:#e3e7e3}
body .toast{color:#47514f;background:#fff;border-color:#dce2dc;border-radius:10px;box-shadow:0 8px 26px #202c2d0d}
body .toast.error{color:#a15442;border-color:#dfbcae}
body .generation h2{color:#202c2d}
body .generation p{color:#707977}
body .agent-node{color:#818985}
body .agent-node>span{color:#707977;background:#f5f6f3;border-color:#e3e7e3;border-radius:8px}
body .agent-node:after{background:#dce2dc}
body .agent-node.active>span{color:#244c48;background:#edf3ef;border-color:#668e7d;box-shadow:0 0 0 3px #edf3ef}
body .loading-bar{background:#e9eee8}
body .loading-bar:after{background:#66816f}

/* Consistent spacing makes pages feel like one workspace without extra frames. */
body .main:not(.page-home):not(.page-account){padding-top:38px}
body .main:not(.page-home):not(.page-account) .page-head{gap:22px;margin-bottom:30px}
body .main:not(.page-home):not(.page-account) .page-head h1{font-size:31px;line-height:1.45;letter-spacing:-.02em}
body .main:not(.page-home):not(.page-account) .page-illustration{width:74px;height:72px;object-fit:contain;filter:none}
body .main:not(.page-home):not(.page-account) .page-head p{font-size:13px;line-height:1.8}
body .main:not(.page-home):not(.page-account) .section-heading{margin-top:32px;margin-bottom:19px}
body .main:not(.page-home):not(.page-account) .section-heading h2{font-size:19px;font-weight:600;letter-spacing:-.01em}
body .main:not(.page-home):not(.page-account) .card-grid{gap:22px}
body .main:not(.page-home):not(.page-account) .filter-bar{margin-bottom:25px;gap:12px}
body .main:not(.page-home):not(.page-account) .course-card{transition:border-color .18s,box-shadow .18s,transform .18s}
body .main:not(.page-home):not(.page-account) .course-card-body{padding:23px}
body .main:not(.page-home):not(.page-account) .course-card h3{font-size:18px;line-height:1.6;letter-spacing:-.005em}
body .main:not(.page-home):not(.page-account) .course-card p{font-size:13px;line-height:1.8;margin-top:9px;margin-bottom:18px}
body .main:not(.page-home):not(.page-account) .card-footer{padding-top:14px;gap:10px;font-size:11px;line-height:1.6}
body .main:not(.page-home):not(.page-account) .panel{padding:28px;margin-bottom:24px}
body .main:not(.page-home):not(.page-account) .panel>h2{font-size:20px;line-height:1.6;margin-bottom:19px}
body .main:not(.page-home):not(.page-account) .panel>h3{font-size:17px;line-height:1.7}
body .main:not(.page-home):not(.page-account) .panel>p{font-size:14px;line-height:1.9}
body .main:not(.page-home):not(.page-account) .stats-grid{gap:18px;margin-bottom:28px}
body .main:not(.page-home):not(.page-account) .stat>span{font-size:13px}
body .main:not(.page-home):not(.page-account) .stat strong{font-size:36px;letter-spacing:-.025em;margin-top:11px}
body .main:not(.page-home):not(.page-account) .settings-grid{gap:24px}
body .main:not(.page-home):not(.page-account) .settings-grid>*{min-width:0}
body .main:not(.page-home):not(.page-account) .form-stack{gap:18px}
body .main:not(.page-home):not(.page-account) .form-stack>h2{margin-bottom:3px}
body .main:not(.page-home):not(.page-account) label{gap:8px;font-size:13px;line-height:1.7}
body .main:not(.page-home):not(.page-account) .list-row{padding-top:19px;padding-bottom:19px;gap:16px}
body .main:not(.page-home):not(.page-account) .list-row h3{font-size:14px;line-height:1.7}
body .main:not(.page-home):not(.page-account) .list-row p{font-size:13px;line-height:1.8;margin-top:3px}
body .main:not(.page-home):not(.page-account) .notice{padding:16px 18px;font-size:13px;line-height:1.85;background:#f7f9f5}
body .main:not(.page-home):not(.page-account) details.panel>summary{min-height:36px;font-weight:600}
body .main:not(.page-home):not(.page-account) .balance-card{padding:32px;margin-bottom:27px}
body .main:not(.page-home):not(.page-account) .balance-card strong{font-size:48px;letter-spacing:-.025em}
body .main:not(.page-home):not(.page-account) .package .price{font-size:34px;letter-spacing:-.025em;margin-top:22px}
body .main:not(.page-home):not(.page-account) .package .token-count{font-size:13px;line-height:1.8}
body .main:not(.page-home):not(.page-account) .package>.btn{margin-top:22px}

/* Reading and practice use deliberate type size rather than colored blocks. */
body .main:not(.page-home):not(.page-account) .lesson-title{margin-bottom:27px}
body .main:not(.page-home):not(.page-account) .lesson-title h1{font-size:30px;letter-spacing:-.015em;line-height:1.5}
body .main:not(.page-home):not(.page-account) .level-switch button{min-height:34px;transition:background .16s,color .16s}
body .main:not(.page-home):not(.page-account) .level-switch button:hover:not(.active){background:#ecefeb;color:#244c48}
body .main:not(.page-home):not(.page-account) .tabs{padding:0;gap:6px;margin-bottom:20px}
body .main:not(.page-home):not(.page-account) .tab{min-height:50px;padding:12px 8px;font-size:13px;transition:background .16s,color .16s}
body .main:not(.page-home):not(.page-account) .lesson-tools{border-radius:14px;margin-bottom:24px}
body .main:not(.page-home):not(.page-account) .lesson-tools>summary{min-height:50px;transition:background .16s}
body .main:not(.page-home):not(.page-account) .lesson-tools>summary:hover{background:#f8faf7}
body .main:not(.page-home):not(.page-account) .lesson-tools-content{padding:24px;gap:25px}
body .main:not(.page-home):not(.page-account) .lesson-tools .panel{padding:0;margin:0}
body .main:not(.page-home):not(.page-account) .lesson-body{padding:36px 42px}
body .main:not(.page-home):not(.page-account) .lesson-body h2{font-size:26px;letter-spacing:-.01em;line-height:1.6}
body .main:not(.page-home):not(.page-account) .zh-text{font-size:21px;line-height:2.35;letter-spacing:.025em}
body .main:not(.page-home):not(.page-account) .translation{font-size:14px;line-height:1.95;color:#687470}
body .main:not(.page-home):not(.page-account) .vocab-grid{gap:18px}
body .main:not(.page-home):not(.page-account) .vocab-card{padding:24px}
body .main:not(.page-home):not(.page-account) .vocab-title strong{font-size:28px;letter-spacing:-.02em}
body .main:not(.page-home):not(.page-account) .vocab-card p{font-size:13px;line-height:1.9}
body .main:not(.page-home):not(.page-account) .vocab-actions{gap:8px;padding-top:13px;margin-top:18px}
body .main:not(.page-home):not(.page-account) .vocab-actions button{min-height:36px;padding:6px 8px;margin-left:-8px;border-radius:8px;font-size:12px;transition:background .16s,color .16s}
body .main:not(.page-home):not(.page-account) .vocab-actions button:hover{background:#f1f5ef;color:#173a36}
body .main:not(.page-home):not(.page-account) .vocab-actions button:last-child{margin-right:-8px}
body .main:not(.page-home):not(.page-account) .grammar-formula{padding:21px 23px;background:#f6f8f4;font-size:23px}
body .main:not(.page-home):not(.page-account) .english-tip{background:#fafbf8}
body .main:not(.page-home):not(.page-account) .question{padding:27px}
body .main:not(.page-home):not(.page-account) .question h3{font-size:15px;line-height:1.85}
body .main:not(.page-home):not(.page-account) .option{min-height:44px;padding:12px 16px;font-size:13px;line-height:1.75;transition:background .16s,border-color .16s,color .16s}
body .main:not(.page-home):not(.page-account) .option:not(:disabled):active{transform:translateY(1px)}
body .main:not(.page-home):not(.page-account) .match-item{min-height:62px;line-height:1.8;transition:background .16s,border-color .16s,color .16s}
body .main:not(.page-home):not(.page-account) .scaffolds summary{min-height:27px}

body .modal .modal-head{margin-bottom:25px;gap:18px;align-items:flex-start}
body .modal .modal-head h2{font-size:24px;line-height:1.5;letter-spacing:-.015em}
body .modal .form-stack{gap:17px}
body .modal label{font-size:13px;line-height:1.7;gap:8px}
body .modal .modal-actions{gap:12px;margin-top:25px}
body .modal .panel{padding:24px}
body .modal .learner-report{border-radius:14px}
body .modal .learner-report>summary{padding:18px;transition:background .16s}
body .modal .learner-report>summary:hover{background:#f4f7f1}
body .modal .learner-report strong{font-size:14px;line-height:1.7}
body .modal .learner-report small{font-size:12px;line-height:1.7}
body .modal .learner-report-body{padding:21px}
body .modal .learner-report-body>.panel{padding:0}
body .modal .learner-section>h3{font-size:16px}
body .modal .learner-summary{font-size:13px;line-height:1.8;padding-bottom:18px}
body .modal .quality-grid>div{background:#f7f9f5;padding:18px}
body .modal .quality-grid strong{font-size:23px;font-variant-numeric:tabular-nums}
body .modal .level-option{min-height:65px;transition:background .16s,border-color .16s,color .16s}
body .chat-header{padding:20px}
body .chat-header strong{font-size:15px;line-height:1.7}
body .chat-header .en{font-size:11px;line-height:1.65}
body .chat-messages{padding:20px}
body .chat-message{padding:15px 16px;font-size:13px;line-height:1.9;border-radius:13px;background:#f6f8f4}
body .chat-message.user{background:#edf3ef}
body .chat-form{padding:14px;gap:10px}
body .chat-form input{min-width:0;font-size:13px}
body .chat-form .btn{min-height:44px}
body .chat-header [data-action=close-chat]{min-width:40px;min-height:40px;border-radius:10px;color:#687470;transition:background .16s,color .16s}
body .chat-header [data-action=close-chat]:hover{background:#f1f5ee;color:#244c48}
body .toast{padding:15px 22px;font-size:13px;line-height:1.75}

@keyframes hb-content-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

@media(min-width:601px) and (max-width:900px){
 body .main:not(.page-home):not(.page-account) .panel{padding:24px}
 body .main:not(.page-home):not(.page-account) .lesson-body{padding:30px}
}
@media(max-width:600px){
 body .main:not(.page-home):not(.page-account){padding-top:28px}
 body .main:not(.page-home):not(.page-account) .page-head{gap:15px;margin-bottom:24px}
 body .main:not(.page-home):not(.page-account) .page-head h1{font-size:26px}
 body .main:not(.page-home):not(.page-account) .page-head p{font-size:12px}
 body .main:not(.page-home):not(.page-account) .page-illustration{width:64px;height:62px}
 body .main:not(.page-home):not(.page-account) .section-heading{margin-top:28px;margin-bottom:16px}
 body .main:not(.page-home):not(.page-account) .section-heading h2{font-size:17px}
 body .main:not(.page-home):not(.page-account) :is(.panel,.course-card,.vocab-card,.question,.article-figure,.lesson-tools,.stat,.empty,.balance-card){border-radius:14px}
 body .main:not(.page-home):not(.page-account) :is(.discovery-grid,.card-grid:has(.card-art[data-topic])) .course-card:nth-child(n){border-radius:14px}
 body .main:not(.page-home):not(.page-account) .topic-tile:nth-child(n){border-radius:12px}
 body .main:not(.page-home):not(.page-account) .card-grid{gap:16px}
 body .main:not(.page-home):not(.page-account) .course-card-body{padding:19px 17px}
 body .main:not(.page-home):not(.page-account) .course-card h3{font-size:16px}
 body .main:not(.page-home):not(.page-account) .course-card p{font-size:12px;line-height:1.8;margin-top:7px;margin-bottom:14px}
 body .main:not(.page-home):not(.page-account) .card-footer{font-size:11px;padding-top:12px;gap:8px}
 body .main:not(.page-home):not(.page-account) .panel{padding:22px 19px;margin-bottom:19px}
 body .main:not(.page-home):not(.page-account) .panel>h2{font-size:19px;margin-bottom:17px}
 body .main:not(.page-home):not(.page-account) .panel>p{font-size:13px}
 body .main:not(.page-home):not(.page-account) .stats-grid{gap:12px;margin-bottom:23px}
 body .main:not(.page-home):not(.page-account) .stat:nth-child(n){min-height:116px;padding:20px 17px}
 body .main:not(.page-home):not(.page-account) .stat>span{font-size:12px}
 body .main:not(.page-home):not(.page-account) .stat strong{font-size:29px}
 body .main:not(.page-home):not(.page-account) .settings-grid{gap:0}
 body .main:not(.page-home):not(.page-account) .list-row{padding-top:17px;padding-bottom:17px;gap:13px}
 body .main:not(.page-home):not(.page-account) .list-row h3{font-size:13px}
 body .main:not(.page-home):not(.page-account) .list-row p{font-size:12px}
 body .main:not(.page-home):not(.page-account) .notice{padding:15px 16px;font-size:12px}
 body .main:not(.page-home):not(.page-account) .btn.small{min-height:42px;font-size:12px}
 body .main:not(.page-home):not(.page-account) .balance-card{padding:26px 22px}
 body .main:not(.page-home):not(.page-account) .balance-card strong{font-size:40px}
 body .main:not(.page-home):not(.page-account) .package .price{font-size:31px;margin-top:18px}
 body .main:not(.page-home):not(.page-account) .lesson-title h1{font-size:25px}
 body .main:not(.page-home):not(.page-account) .lesson-body{padding:25px 20px}
 body .main:not(.page-home):not(.page-account) .lesson-body h2{font-size:23px}
 body .main:not(.page-home):not(.page-account) .zh-text{font-size:18px;line-height:2.35}
 body .main:not(.page-home):not(.page-account) .translation{font-size:13px;line-height:1.9}
 body .main:not(.page-home):not(.page-account) .lesson-tools-content{padding:19px 16px;gap:22px;grid-template-columns:minmax(0,1fr)}
 body .main:not(.page-home):not(.page-account) .lesson-tools .panel{padding:0;margin:0}
 body .main:not(.page-home):not(.page-account) .lesson-tools label{font-size:12px}
 body .main:not(.page-home):not(.page-account) .lesson-tools .btn{min-height:44px;font-size:12px}
 body .main:not(.page-home):not(.page-account) .tabs{border-radius:0}
 body .main:not(.page-home):not(.page-account) .tab{border-radius:0;min-height:46px;padding:12px 3px;font-size:12px}
 body .main:not(.page-home):not(.page-account) .vocab-grid{gap:12px}
 body .main:not(.page-home):not(.page-account) .vocab-card{padding:18px 15px}
 body .main:not(.page-home):not(.page-account) .vocab-title strong{font-size:24px}
 body .main:not(.page-home):not(.page-account) .vocab-card p{font-size:12px}
 body .main:not(.page-home):not(.page-account) .vocab-actions button{min-height:40px;font-size:11px}
 body .main:not(.page-home):not(.page-account) .grammar-formula{padding:19px;font-size:21px}
 body .main:not(.page-home):not(.page-account) .question{padding:22px 18px}
 body .main:not(.page-home):not(.page-account) .question h3{font-size:14px}
 body .main:not(.page-home):not(.page-account) .option{font-size:12px;padding:12px 14px}
 body .main:not(.page-home):not(.page-account) .match-item{font-size:12px;padding:11px 8px}
 body .main:not(.page-home):not(.page-account) .table-scroll{border:0;border-radius:0}
 body .main:not(.page-home):not(.page-account) tbody tr{background:#fff;border-color:#e4e9e5;border-radius:12px;padding:14px;box-shadow:none}
 body .main:not(.page-home):not(.page-account) td,body .main:not(.page-home):not(.page-account) tbody tr:last-child td{border-bottom-color:#e9ece8;padding:11px 0;font-size:12px;gap:12px}
 body .main:not(.page-home):not(.page-account) td:last-child,body .main:not(.page-home):not(.page-account) tbody tr:last-child td:last-child{border-bottom:0}
 body .main:not(.page-home):not(.page-account) td:before{color:#687470;font-size:11px}
 body .main:not(.page-home):not(.page-account) td .btn{min-height:40px}
 body .modal,body .chat-drawer{border-radius:16px}
 body .modal{padding:25px 20px}
 body .modal .modal-head h2{font-size:22px}
 body .modal .modal-head{gap:13px;margin-bottom:22px}
 body .modal .btn.small{min-height:40px;font-size:12px}
 body .modal .panel{border-radius:12px;padding:20px 17px}
 body .modal .learner-report>summary{padding:16px}
 body .modal .learner-report strong{font-size:13px}
 body .modal .learner-report small{font-size:11px}
 body .modal .learner-summary{font-size:12px}
 body .modal .learner-report-body{padding:17px}
 body .modal .learner-report-body>.panel{padding:0}
 body .modal .quality-grid>div{padding:15px}
 body .chat-header{padding:16px}
 body .chat-messages{padding:16px}
 body .chat-form{padding:12px}
 body .toast{font-size:12px;padding:14px 18px}
}
@media(max-width:360px){
 body .main:not(.page-home):not(.page-account) .panel{padding:20px 16px}
 body .main:not(.page-home):not(.page-account) .course-card-body{padding:17px 14px}
 body .main:not(.page-home):not(.page-account) .course-card h3{font-size:15px}
 body .main:not(.page-home):not(.page-account) .course-card p{font-size:11px}
 body .main:not(.page-home):not(.page-account) .vocab-grid{grid-template-columns:minmax(0,1fr)}
 body .main:not(.page-home):not(.page-account) .lesson-body{padding:23px 16px}
 body .main:not(.page-home):not(.page-account) .tabs{gap:1px}
 body .main:not(.page-home):not(.page-account) .tab{font-size:11px;padding:12px 2px}
 body .main:not(.page-home):not(.page-account) .match-item{font-size:11px;padding:11px 6px}
 body .modal{padding:23px 17px}
 body .modal .modal-head h2{font-size:21px}
}

@media(prefers-reduced-motion:reduce){
 body .main:not(.page-home):not(.page-account) :is(.course-card,.topic-tile,.round-arrow,.btn,.option):is(:hover,:active),
 body .modal :is(.btn,.close-modal):active{transform:none}
 body :is(.modal,.chat-drawer){animation:none}
}
body.reduce-motion .main:not(.page-home):not(.page-account) :is(.course-card,.topic-tile,.round-arrow,.btn,.option):is(:hover,:active),
body.reduce-motion .modal :is(.btn,.close-modal):active{transform:none}