/* HanBridge white edition: a clean canvas with quiet lilac accents. */
:root{
 --paper:#fff;
 --white:#fff;
 --ink:#302d41;
 --dark:#302d41;
 --muted:#726f80;
 --line:#e8e7ef;
 --soft:#f2eefb;
 --accent:#7460c4;
 --accent-dark:#5e49aa;
 --blue:#596bac;
 --red:#a74660;
 --shadow:0 8px 28px #39334e09;
 background:#fff;
 color:var(--ink);
 color-scheme:light;
}
body,.shell{background:#fff}
.topbar,body:not(.home-mode) .topbar{background:#fffffffa;border-bottom-color:#eeedf3;backdrop-filter:blur(16px)}
.topbar-inner{gap:28px}
.brand{gap:10px}
.brand-symbol,.brand-image{width:44px;height:44px}
.brand-image{display:block;background:transparent}
.brand-name{gap:2px}
.brand-name strong{color:#493859;font-size:19px;line-height:1.25;letter-spacing:.035em;font-weight:600}
.brand-name small{color:#776780;font-size:9.5px;line-height:1.4;letter-spacing:.035em}
.breadcrumb,body:not(.home-mode) .breadcrumb{color:#767080}
.breadcrumb>a,body:not(.home-mode) .breadcrumb>a{color:#767080}
.breadcrumb strong,body:not(.home-mode) .breadcrumb strong{color:#42394f}
.account-popover,body:not(.home-mode) .account-popover{background:#fff;border-color:var(--line);box-shadow:0 12px 38px #332c4912}
.account-identity{border-bottom-color:var(--line)}
.account-popover>a:hover,.account-popover>button:hover{background:#f7f5fb}
.avatar{background:#f0ebf9;color:#67558f}
.balance-pill{color:#5f576f}
body:not(.home-mode) .top-actions>.level-pill{background:#faf9fd;border-color:#e9e5f1;color:#635472}
.footer,.main:not(.page-home) .footer{border-top-color:#eeecf3;color:#777180}
.footer button,.main:not(.page-home) .footer button{color:#70687b}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline-color:#a592d4}

/* One white welcome canvas; the composer is the visual anchor. */
.workspace-title strong{color:#51445f}
.workspace-actions button{color:#756882}
.workspace-actions button:hover{color:var(--accent-dark);background:#f5f1fb}
.workspace-actions .history-toggle{background:#faf8fd;border-color:#e9e3f2}
.workspace-actions .history-toggle[aria-expanded=true]{color:var(--accent-dark);background:#f0eafa;border-color:#d8cbea}
.generation-stage{background:#fff;padding-top:16px}
.generation-welcome{gap:12px}
.generation-welcome h1{color:#3d324f;font-size:34px;letter-spacing:.01em;font-weight:600}
.generation-composer{background:#fff}
.generation-composer:before{background:#fff;border-color:#e1dbe9;box-shadow:0 8px 32px #42335108}
.generation-composer:focus-within:before{border-color:#a992d0;box-shadow:0 0 0 3px #957bc611,0 8px 28px #42335108}
.generation-composer textarea{color:#3d344c}
.generation-composer textarea::placeholder{color:#786b85}
.composer-level{background:#f8f5fc;border-color:#e7dff1;color:#756282}
.composer-level select{color:#675084}
.composer-cost{color:#7b6789}
.generation-send{background:var(--accent);border-color:var(--accent);box-shadow:0 3px 10px #6e50ad16}
.generation-send:hover{background:var(--accent-dark);border-color:var(--accent-dark);box-shadow:0 5px 14px #6e50ad20}
.generation-send:disabled{background:#b5a9cd;border-color:#b5a9cd;color:#fff}
.is-generating .generation-send:disabled{background:#aa99c6;border-color:#aa99c6}
.composer-error{color:var(--red);border-top-color:#f1dfe6}
.generation-composer:has(.composer-error:not([hidden])):before{border-color:#dba6b7}
.topic-suggestion{background:#f3effa;border-color:#e9e2f2;box-shadow:none}
.topic-suggestion:nth-child(2){background:#faf6ec;border-color:#eee7d8}
.topic-suggestion:nth-child(3){background:#f0f4fa;border-color:#e4eaf3}
.topic-suggestion:nth-child(4){background:#fbf0f1;border-color:#f0e0e3}
.topic-suggestion:hover{box-shadow:0 7px 20px #41304f09;transform:translateY(-2px)}
.suggestion-copy strong,.topic-suggestion>strong{color:#665073;font-weight:600}
.topic-suggestion:nth-child(2) strong{color:#7d694b}
.topic-suggestion:nth-child(3) strong{color:#5c6b86}
.topic-suggestion:nth-child(4) strong{color:#8c5e6a}
.workspace-footnote,.workspace-footnote p{color:#7d6b88}
.reference-preview{color:#75608e}
.reference-preview:hover{color:var(--accent-dark)}

/* Keep the conversation readable against the same white canvas. */
.has-conversation .generation-stage{background:transparent;padding:0}
.has-conversation .generation-composer{background:#fff;border-color:#e1dbe9;box-shadow:0 5px 22px #42335106}
.has-conversation .generation-composer:focus-within{border-color:#a992d0;box-shadow:0 0 0 3px #957bc611}
.message-avatar.assistant{color:#7761a5;background:#f1ecf8;border-color:#e5dbf2}
.message-avatar.user{background:#f1edf6;color:#75667e}
.conversation-prompt>div{background:#f6f2fc;border-color:#e6ddef}
.conversation-prompt p{color:#55415f}
.message-label{color:#594363}
.message-label small{color:#796885}
.assistant-badge{background:#faf7fd;border-color:#e8e0f0;color:#7e6a8e}
.response-copy,.generation-status{color:#756580}
.generation-steps>span{background:#faf8fc;border-color:#e9e4f0;color:#756780}
.generation-steps b{border-color:#dfd6e9;color:#7c6987}
.generation-steps>span.active{color:#6b5290;background:#f3edf9;border-color:#ddcfea}
.generation-steps>span.active b{background:#8c70b7;border-color:#8c70b7}
.generation-steps>span.done{background:#f4f0fb;border-color:#e1d9ef;color:#735c94}
.generation-result{background:#fff;border-color:#e5ddec;box-shadow:0 7px 22px #42335107}
.result-copy h2{color:#45304f}
.result-copy>span,.result-copy p,.result-usage{color:#7e688d}
.generation-error{color:#a74a65;background:#fff8fa;border-color:#f0d4de}
.retry-generation,.retry-history{color:#725091;background:#f8f3fd;border-color:#e4d7f0}
.retry-generation:hover,.retry-history:hover{color:#60427f;background:#f0e6f9;border-color:#d1bde3}
.generation-history{background:#fff;border-color:#e5ddec;box-shadow:0 12px 44px #332b4715,0 3px 12px #332b4705}
.history-head{border-bottom-color:#eeebf3}
.history-head small,.history-item>span{color:#7d6a8a}
.close-history{background:#faf8fc;border-color:#e8e2ee;color:#7f688f}
.history-item{background:#fff;border-color:#ebe4f1}
.history-item strong{color:#654d72}
.history-item:hover{background:#fbf8ff;border-color:#dbcce8}
.history-item[aria-pressed=true]{background:#f4eefa;border-color:#cdb5e3}
.history-status{color:#795e8f;background:#f2eaf8}
.history-status.done{color:#70528c;background:#f1eafa}
.history-status.failed{color:#a4516a;background:#fbebf0}
.history-status.running,.history-status.queued{color:#745590;background:#f0e8f8}
.history-empty strong,.history-empty p{color:#7c6888}

/* White content surfaces with local pastel illustrations and summaries. */
.main:not(.page-home){color:#6f657a}
.main:not(.page-home) :is(.panel,.course-card,.vocab-card,.question){background:#fff;border-color:#e8e2ed;box-shadow:0 3px 15px #49345203}
.main:not(.page-home) .course-card:hover{box-shadow:0 9px 26px #4934520a}
.main:not(.page-home) :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){color:#44364f}
.main:not(.page-home) :is(.panel>p,.course-card p,.list-row p,.vocab-card p,.writing-requirements li,.option,.feedback,.saved-response){color:#71627b}
.main:not(.page-home) :is(.page-head p,.section-heading p,.muted,.en,.card-kicker,.card-footer,.stat>span,.source-links,.source-links a,.writing-meter,.policy-note,.map-caption,.map-building small){color:#77687f}
.main:not(.page-home) :is(.stat strong,.balance-card strong,.package .price){color:#483253}
.main:not(.page-home) .link-btn{color:#70528f}
.main:not(.page-home) .pill{color:#756185;background:#fcfaff;border-color:#e8e0f1}
.main:not(.page-home) .pill:is(.accent,.blue){color:#765594;background:#f5eefb;border-color:#e4d7f0}
.main:not(.page-home) .btn.secondary,.modal .btn.secondary{color:#71568c;background:#fff;border-color:#e4d9ed}
.main:not(.page-home) .btn.secondary:hover,.modal .btn.secondary:hover{background:#f9f5fd;border-color:#cdb9df}
.main:not(.page-home) .btn.soft{color:#6d518e;background:#f3ecfb}
.main:not(.page-home) :is(input,textarea,select),.modal :is(input,textarea,select){color:#4c3856;background:#fff;border-color:#e5dcea}
.main:not(.page-home) :is(input,textarea)::placeholder,.modal :is(input,textarea)::placeholder{color:#7d6887}
.main:not(.page-home) label,.modal label{color:#766280}
.main:not(.page-home) :is(input,textarea,select):focus,.modal :is(input,textarea,select):focus{border-color:#b69bce}
.main:not(.page-home) .topic-tile{background:#f4effa;border-color:#e9dff1}
.main:not(.page-home) .topic-tile:nth-child(5n+2){background:#faf6ec;border-color:#eee7d8}
.main:not(.page-home) .topic-tile:nth-child(5n+3){background:#f0f4fa;border-color:#e4eaf3}
.main:not(.page-home) .topic-tile:nth-child(5n+4){background:#fbf0f1;border-color:#f0e0e3}
.main:not(.page-home) .topic-tile:nth-child(5n){background:#f2f0f9;border-color:#e6e1ef}
.main:not(.page-home) .topic-tile>strong{color:#5c446a}
.main:not(.page-home) .topic-tile>span{color:#7b6986}
.main:not(.page-home) .topic-tile>.icon{color:#967baa}
.main:not(.page-home) .stat{background:#f5effb;border-color:#eadff3}
.main:not(.page-home) .stat:nth-child(4n+2){background:#fcf7eb;border-color:#f0e8d7}
.main:not(.page-home) .stat:nth-child(4n+3){background:#f2f5fb;border-color:#e7edf5}
.main:not(.page-home) .stat:nth-child(4n){background:#fcf1f3;border-color:#f2e2e6}
.main:not(.page-home) .balance-card{background:#f5effb;border-color:#eaddf2}
.main:not(.page-home) .balance-card small,.main:not(.page-home) .package .token-count{color:#7c5f8c}
.main:not(.page-home) .balance-card .eyebrow{color:#7c5f8c}
.main:not(.page-home) .list-row{border-bottom-color:#eee7f3}
.main:not(.page-home) .list-row h3{color:#5d456b}
.main:not(.page-home) details.panel>summary{color:#695074}
.main:not(.page-home) details.panel>summary:after{color:#9272a6}
.main:not(.page-home) .empty{background:#fcfaff;border-color:#eadff2}
.main:not(.page-home) .empty p{color:#7e6a8c}
.main:not(.page-home) .error-screen{background:#fff8fa;border-color:#efd3de}
.main:not(.page-home) .error-screen h3{color:#a84965}
.main:not(.page-home) .notice{background:#f8f4fd;color:#765c83}
.main:not(.page-home) .progress-bar{background:#eee7f6}
.main:not(.page-home) .progress-bar i{background:#9a7cc1}
.main:not(.page-home) .table-scroll{border-color:#eee6f4}
.main:not(.page-home) th{background:#faf7fd;color:#81638f}
.main:not(.page-home) td{color:#74617f;border-bottom-color:#eee6f3}

/* Chapters have a distinct selection state and an uncluttered reading surface. */
.main:not(.page-home) .level-switch{background:#f7f3fc;border:1px solid #e9e0f2}
.main:not(.page-home) .level-switch button{color:#806a8b}
.main:not(.page-home) .level-switch button.active{color:#70508e;background:#fff;box-shadow:0 2px 6px #4a32570b}
.main:not(.page-home) .tabs{background:#faf7fd;border:1px solid #e9e0f2}
.main:not(.page-home) .tab{color:#826c8d}
.main:not(.page-home) .tab.active{color:#715091;background:#fff;box-shadow:0 2px 8px #49345309,inset 0 -2px 0 #aa84c8;font-weight:600}
.main:not(.page-home) .lesson-tools{background:#fff;border-color:#e7deef}
.main:not(.page-home) .lesson-tools>summary{color:#7b6389}
.main:not(.page-home) .lesson-tools>summary>span{color:#7a6786}
.main:not(.page-home) .lesson-tools-content{border-top-color:#ebe2f1}
.main:not(.page-home) .lesson-tools .panel{border:0;background:transparent;box-shadow:none}
.main:not(.page-home) .lesson-tools h3{color:#62476e}
.main:not(.page-home) .zh-text{color:#493353}
.main:not(.page-home) .translation,body.english .main:not(.page-home) .translation{color:#7e648c}
.main:not(.page-home) .article-figure{border-color:#e6dced}
.main:not(.page-home) .article-figure figcaption{background:#fbf9fd;color:#7f6990}
.main:not(.page-home) .article-figure figcaption span{color:#7f698c}
.main:not(.page-home) .chapter-end,.main:not(.page-home) .vocab-actions{border-top-color:#eee6f4}
.main:not(.page-home) .vocab-actions button{color:#7e5d98}
.main:not(.page-home) .grammar-formula{background:#f6effc;color:#77528f}
.main:not(.page-home) .english-tip{background:#fcf9ff;border-left-color:#d5bae9;color:#80658e}
.main:not(.page-home) .english-tip strong{color:#765186}
.main:not(.page-home) .scaffolds{background:#fcfaff;border-color:#e9dff3;color:#7a5d86}
.main:not(.page-home) .scaffolds summary{color:#7a5d86}
.main:not(.page-home) .option{background:#fff;border-color:#e8dff0;color:#775f85}
.main:not(.page-home) .option:is(.selected,.correct){background:#f5ecff;border-color:#c6a1e1;color:#64407e}
.main:not(.page-home) .feedback{background:#f7effd;color:#765685}
.main:not(.page-home) .option.wrong,.main:not(.page-home) .feedback.wrong{background:#fff1f6;border-color:#e9b4c7;color:#a44a69}
.main:not(.page-home) .question-num{background:#f4eafa;color:#8865a2}

/* Overlays and helper surfaces belong to the same white visual system. */
.overlay{background:#31223f38;backdrop-filter:blur(5px)}
.modal{background:#fff;border-color:#e8dff0;box-shadow:0 20px 70px #49305818}
.modal-head h2{color:#50325f}
.modal-head .en,.modal .en,.modal>p,.modal .panel>p{color:#7d628b}
.modal .close-modal{background:#f9f3fd;color:#9973af}
.modal .close-modal:hover{background:#f0e3fa;color:#81599a}
.modal .panel{background:#fff;border-color:#e9dff1}
.modal .panel>h3{color:#634170}
.modal .level-option{background:#fff;border-color:#e6d8f0;color:#89679a}
.modal .level-option small{color:#826893}
.modal .level-option.active{background:#f5e9ff;border-color:#cba3e6;color:#744990}
.modal .explain-card,.modal .notice{background:#faf4ff;border-color:#e9d6f4;color:#805d8e}
.modal .explain-card p{color:#836890}
.modal .policy-note,.modal .auth-switch{color:#826590}
.modal-error{color:var(--red)}
.modal .quality-grid>div{background:#f8efff;color:#835f98}
.modal .learner-report>summary{background:#faf5ff}
.modal .learner-report strong,.modal .learner-section>h3{color:#754e87}
.modal .learner-report small,.modal .learner-summary,.modal .learner-section>.muted,.modal .dimension p{color:#80628e}
.chat-drawer{background:#fff;border-color:#e6d7ee;box-shadow:0 15px 40px #59316712}
.chat-header{border-bottom-color:#ebdff2}
.chat-header strong{color:#684575}
.chat-header .en{color:#886298}
.chat-message{background:#faf4ff;color:#885d98}
.chat-message.user{background:#f4e9fc;color:#835194}
.chat-form{border-top-color:#eadcf2}
.toast{background:#fff;border-color:#e6d5ef;box-shadow:0 8px 26px #64336f12;color:#856092}
.toast.error{border-color:#ecc3d2;color:var(--red)}

@media(max-width:800px){
 .topbar-inner{gap:18px}
 .brand-symbol,.brand-image{width:40px;height:40px}
 .generation-welcome h1{font-size:32px}
}
@media(max-width:600px){
 .topbar-inner{gap:12px}
 .brand{gap:8px}
 .brand-symbol,.brand-image{width:36px;height:36px}
 .brand-name strong{font-size:17px}
 .brand-name small{font-size:9px}
 .generation-stage{padding-top:16px}
 .generation-welcome h1{font-size:28px}
 .generation-composer:before{box-shadow:0 6px 22px #42335106}
 .topic-suggestion{gap:11px}
 .main:not(.page-home) .tabs{padding:4px;gap:2px}
 .main:not(.page-home) .table-scroll{border:0}
 .main:not(.page-home) tbody tr{background:#fff;border-color:#e8ddf0;box-shadow:0 3px 12px #49345203}
 .main:not(.page-home) td:before{color:#876294}
}
@media(max-width:374px){
 .topbar-inner{gap:8px}
 .brand-name strong{font-size:17px}
 .topic-suggestion{gap:9px}
 .main:not(.page-home) .tabs{gap:1px;padding:3px}
}
@media(prefers-reduced-motion:reduce){
 .topic-suggestion{transition:none}
 .topic-suggestion:hover{transform:none}
}