/* Mount-level #desktop-* page styles moved to css/desktop/pages/*.css (balanced). * QA/Grade styles intentionally remain managed with their own page files / ongoing UI work. */ /* Desktop-only presentation for the web deployment. */ @media (min-width: 0px) { html { font-size: 14px !important; } html.ui-density-cozy { zoom: 0.94; } html.ui-density-standard { zoom: 1; } @supports not (zoom: 1) { html.ui-density-cozy { font-size: 13.2px !important; } } body { overflow-x:hidden; --desktop-left-width:clamp(286px,15vw,300px); --desktop-right-width:clamp(370px,19vw,392px); } #app { min-height: 100vh; box-sizing: border-box; padding-left:calc(var(--desktop-left-width) + 24px); padding-right:24px; } #app > * { box-sizing: border-box; max-width: 100%; } #desktop-nav { position:fixed; inset:0 auto 0 0; width:var(--desktop-left-width); z-index:100; isolation:isolate; pointer-events:auto; background:#111114; color:#96939f; border-right:1px solid #29292f; padding:24px 18px; box-sizing:border-box; transition:width .2s ease; } .desktop-nav-pages { display:flex; flex-direction:column; margin-top:18px; } #desktop-nav .desktop-nav-item { position:relative; display:flex; align-items:center; width:calc(100% + 36px); box-sizing:border-box; color:inherit; text-decoration:none; text-align:left; font-family:inherit; line-height:1.45; padding:14px 22px; border:0; border-radius:0; background:transparent; font-size:16px; margin:0 -18px; cursor:pointer; } #desktop-nav .desktop-nav-item:hover { background:#17171b; color:#d4d1d9; } #desktop-nav .desktop-nav-item.active { background:#1b1b20; color:#f1eff4; font-weight:600; } #desktop-nav .desktop-nav-item.active::before { content:''; position:absolute; top:10px; bottom:10px; left:0; width:3px; background:#2ed8c5; } #desktop-nav .desktop-nav-badge { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:18px; margin-left:auto; padding:0 5px; border:1px solid rgba(53,214,197,.28); border-radius:3px; background:rgba(23,143,131,.14); color:#43ddcd; font-size:10px; font-weight:700; line-height:1; letter-spacing:.04em; } .desktop-nav-brand { color:#f4f2f6; font-size:16px; font-weight:600; padding:0 6px 18px; margin-bottom:0; } .desktop-nav-brand span { display:block; color:#85818f; font-size:13px; font-weight:400; margin-top:8px; } .desktop-nav-toggle { position:absolute; top:22px; right:12px; border:0; background:none; color:#35d6c5; cursor:pointer; font-size:18px; } #desktop-nav.collapsed { width:72px; padding:22px 10px; background:transparent; border-right:0; pointer-events:none; } #desktop-nav.collapsed .desktop-nav-pages { display:none; } #desktop-nav.collapsed .desktop-nav-footer { display:none; } #desktop-nav.collapsed .desktop-nav-brand { font-size:0; padding-left:0; padding-right:0; } #desktop-nav.collapsed .desktop-nav-brand span { display:none; } #desktop-nav.collapsed .desktop-nav-brand { display:none; } #desktop-nav.collapsed .desktop-nav-toggle { position:relative; top:0; right:auto; width:52px; height:52px; border-radius:4px; background:#1d1d22; border:1px solid #303038; color:#aaa; font-size:0; pointer-events:auto; box-shadow:none; } #desktop-nav.collapsed .desktop-nav-toggle::after { content:'☰'; font-size:28px; line-height:1; } body.route-auth #desktop-nav { display:none; } body.route-auth #app { width:100%; padding-left:0; padding-right:0; } /* Legacy Taro login/register must stay hidden; desktop auth owns this route. */ body.route-auth #app .min-h-screen, body.route-auth #app .taro_page, body.route-auth #app taro-page-core { display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } body.desktop-nav-collapsed #app { padding-left:24px; } body.route-has-context #app { width:calc(100% - var(--desktop-right-width)); height:100vh; overflow-y:auto; padding-right:24px; } body.route-has-context.context-collapsed #app { width:100%; padding-right:24px; } body.route-has-context #app .min-h-screen { max-width:1180px; margin:0 auto; } #desktop-contextbar { position:fixed; top:0; right:0; bottom:0; width:var(--desktop-right-width); z-index:90; box-sizing:border-box; display:flex; flex-direction:column; background:#121216; border-left:1px solid #2a2a31; color:#d6d3dc; padding:26px 20px 0; transform:translateX(0); opacity:1; transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .28s ease,box-shadow .42s ease; box-shadow:-18px 0 44px rgba(0,0,0,.16); } #desktop-contextbar h2 { margin:0 0 8px; font-size:18px; color:#f1eff4; } #desktop-contextbar .context-sub { color:#85818e; font-size:13px; margin-bottom:26px; } #desktop-contextbar textarea { display:block; width:100%; resize:none; box-sizing:border-box; padding:12px; border-radius:4px; border:1px solid #303038; background:#0d0d10; color:#ecebf0; font:inherit; font-size:15px; line-height:1.6; } #desktop-contextbar textarea::placeholder { color:#6f6b77; } #desktop-contextbar a { display:flex; align-items:center; justify-content:center; margin-top:12px; min-height:42px; border-radius:4px; color:#fff; background:#292931; text-decoration:none; font-size:15px; } #desktop-contextbar .context-section { margin-top:34px; padding-top:18px; border-top:1px solid #28282f; } #desktop-contextbar .context-section h3 { margin:0 0 14px; font-size:14px; color:#aaa6b1; } #desktop-contextbar .context-item { padding:12px 0; border-bottom:1px solid #222228; font-size:14px; color:#8f8b97; } #desktop-contextbar .context-toggle { position:absolute; z-index:6; top:24px; left:14px; display:grid; place-items:center; width:28px; height:32px; border:0; background:transparent; color:#35d6c5; font-size:22px; line-height:1; cursor:pointer; padding:0; } #desktop-contextbar .assistant-head { padding-left:30px; } body.context-collapsed #desktop-contextbar { width:var(--desktop-right-width); padding:26px 20px 0; border-left:1px solid #2a2a31; background:#121216; overflow:visible; transform:translateX(100%); opacity:1; pointer-events:none; box-shadow:none; } body.context-collapsed #desktop-contextbar > *:not(.context-toggle) { opacity:0; transform:translateX(28px); } body.context-collapsed #desktop-contextbar .context-toggle { position:fixed; left:auto; right:18px; top:24px; width:32px; height:32px; border-radius:4px; background:#15151a; border:1px solid #2b2b33; } body.context-collapsed #desktop-contextbar .context-toggle { left:auto !important; right:18px !important; pointer-events:auto; opacity:1; transform:translateX(calc(-1 * var(--desktop-right-width))) !important; } #desktop-contextbar > *:not(.context-toggle) { transition:opacity .26s ease,transform .38s cubic-bezier(.2,.8,.2,1); } #desktop-contextbar.context-entering { transform:translateX(100%); opacity:0; } #desktop-contextbar .assistant-head { position:relative; z-index:3; flex:0 0 auto; display:flex; align-items:center; gap:10px; min-height:58px; padding-bottom:20px; border-bottom:1px solid #28282f; background:#121216; } #desktop-contextbar .assistant-identity { min-width:0; flex:1; } #desktop-contextbar .agent-new-chat { width:30px; height:30px; flex:0 0 auto; border:1px solid #303038; border-radius:3px; background:transparent; color:#aaa6b1; font-size:20px; line-height:1; cursor:pointer; } #desktop-contextbar .agent-beta-notice { display:grid; gap:3px; margin:10px 12px 0; padding:9px 10px; border:1px solid rgba(53,214,197,.28); border-radius:5px; background:rgba(18,68,63,.34); color:#a9c6c1; font-size:10px; line-height:1.5; } #desktop-contextbar .agent-beta-notice b { color:#62e5d8; font-size:10px; letter-spacing:.06em; } #desktop-contextbar .agent-context-chip { position:relative; z-index:3; flex:0 0 auto; box-sizing:border-box; min-height:38px; margin:14px 0 16px; padding:8px 10px; border:1px solid #28282f; border-radius:3px; background:#121216; color:#777380; font-size:11px; line-height:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #desktop-contextbar .assistant-mark { width:36px; height:36px; border-radius:4px; display:grid; place-items:center; background:#173c38; color:#35d6c5; font-weight:700; } #desktop-contextbar .assistant-name { color:#f1eff4; font-weight:600; } #desktop-contextbar .assistant-status { color:#777380; font-size:12px; margin-top:3px; } #desktop-contextbar .context-tabs { order:2; flex:0 0 auto; display:flex; gap:18px; margin:0; border-bottom:1px solid #2b2b31; background:#121216; } #desktop-contextbar .context-tab { border:0; background:transparent; color:#85818e; padding:0 0 10px; cursor:pointer; font-size:12px; border-bottom:2px solid transparent; } #desktop-contextbar .context-tab.active { color:#f1eff4; border-bottom-color:#35d6c5; } #desktop-contextbar .context-panel[hidden] { display:none; } #desktop-contextbar .context-panel { order:3; flex:1 1 auto; min-height:0; } #desktop-contextbar .context-panel-enter { animation:contextPanelIn .4s cubic-bezier(.2,.8,.2,1) both; } #desktop-contextbar .context-chat { display:flex; flex-direction:column; min-height:0; height:100%; overflow:hidden; } #desktop-contextbar .agent-history-panel { overflow-y:auto; padding:20px 0; } #desktop-contextbar .agent-history-head { display:flex; align-items:center; justify-content:space-between; gap:10px; } #desktop-contextbar .agent-history-head h3 { margin:0; color:#ecebf0; font-size:16px; } #desktop-contextbar .agent-history-head button { padding:6px 8px; border:1px solid #303038; border-radius:3px; background:transparent; color:#a9a5ae; font-size:11px; cursor:pointer; } #desktop-contextbar .agent-history-head button:hover { border-color:#267a70; color:#35d6c5; } #desktop-contextbar .agent-history-panel > p { margin:7px 0 14px; color:#777380; font-size:11px; line-height:1.5; } #desktop-contextbar .agent-conversation-list { display:grid; gap:6px; } #desktop-contextbar .agent-conversation-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px; align-items:center; padding:8px; border:1px solid #28282f; background:#15151a; } #desktop-contextbar .agent-conversation-item.active { border-color:#287c72; background:#13211f; } #desktop-contextbar .agent-conversation-open { min-width:0; padding:0; border:0; background:transparent; color:#d9d6df; text-align:left; cursor:pointer; } #desktop-contextbar .agent-conversation-open strong,#desktop-contextbar .agent-conversation-open small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #desktop-contextbar .agent-conversation-open strong { font-size:12px; font-weight:600; } #desktop-contextbar .agent-conversation-open small { margin-top:3px; color:#75717c; font-size:10px; } #desktop-contextbar .agent-conversation-actions { display:flex; gap:3px; } #desktop-contextbar .agent-conversation-actions button { width:23px; height:23px; padding:0; border:1px solid transparent; border-radius:3px; background:transparent; color:#777380; cursor:pointer; font-size:13px; } #desktop-contextbar .agent-conversation-actions button:hover { border-color:#303038; color:#d9d6df; } #desktop-contextbar .context-chat-messages { flex:1 1 0; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:18px 0 12px; } #desktop-contextbar .context-message { margin-bottom:14px; padding:0; border:0; background:transparent; } #desktop-contextbar .context-message.user { padding:10px 12px; border-left:2px solid #35d6c5; background:#142522; } #desktop-contextbar .context-message.error { border-left-color:#7a8584; } #desktop-contextbar .context-message > span { display:block; margin-bottom:5px; color:#777f7e; font-size:12px; font-weight:600; } #desktop-contextbar .context-message.user > span { color:#35d6c5; } #desktop-contextbar .context-message-text { color:#d5d7d7; font-size:15px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; } #desktop-contextbar .context-message-text.is-markdown { white-space:normal; } #desktop-contextbar .context-message-text.is-markdown > :first-child { margin-top:0; } #desktop-contextbar .context-message-text.is-markdown > :last-child { margin-bottom:0; } #desktop-contextbar .context-message-text.is-markdown p { margin:0 0 10px; } #desktop-contextbar .context-message-text.is-markdown h2, #desktop-contextbar .context-message-text.is-markdown h3, #desktop-contextbar .context-message-text.is-markdown h4, #desktop-contextbar .context-message-text.is-markdown h5 { margin:16px 0 7px; color:#f0eeee; font-size:15px; line-height:1.45; } #desktop-contextbar .context-message-text.is-markdown h2 { font-size:17px; } #desktop-contextbar .context-message-text.is-markdown ul, #desktop-contextbar .context-message-text.is-markdown ol { margin:7px 0 11px; padding-left:21px; } #desktop-contextbar .context-message-text.is-markdown li { margin:4px 0; padding-left:2px; } #desktop-contextbar .context-message-text.is-markdown a { display:inline; min-height:0; margin:0; border-radius:0; background:transparent; color:#55d9ca; text-decoration:underline; text-underline-offset:2px; } #desktop-contextbar .context-message-text.is-markdown code { padding:1px 4px; border:1px solid #30343a; border-radius:3px; background:#101418; color:#b8e5de; font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } #desktop-contextbar .context-message-text.is-markdown pre { max-width:100%; margin:9px 0 12px; padding:10px; overflow:auto; border:1px solid #2d3338; background:#0d1013; } #desktop-contextbar .context-message-text.is-markdown pre code { padding:0; border:0; background:transparent; color:#d5dcdf; white-space:pre; } #desktop-contextbar .context-message-text.is-markdown blockquote { margin:9px 0 12px; padding:2px 0 2px 10px; border-left:2px solid #3c8d84; color:#abb7b5; } #desktop-contextbar .context-message-text.is-markdown hr { margin:14px 0; border:0; border-top:1px solid #30343a; } #desktop-contextbar .agent-markdown-table { max-width:100%; margin:9px 0 12px; overflow-x:auto; } #desktop-contextbar .agent-markdown-table table { width:100%; min-width:300px; border-collapse:collapse; font-size:12px; line-height:1.5; } #desktop-contextbar .agent-markdown-table th, #desktop-contextbar .agent-markdown-table td { padding:7px 8px; border:1px solid #30343a; text-align:left; vertical-align:top; } #desktop-contextbar .agent-markdown-table th { background:#111a1a; color:#dff3ef; font-weight:700; } #desktop-contextbar .agent-message-actions { display:flex; justify-content:flex-end; gap:4px; margin-top:8px; opacity:.25; transition:opacity .15s ease; } #desktop-contextbar .context-message:hover .agent-message-actions { opacity:1; } #desktop-contextbar .agent-message-actions button { width:25px; height:25px; padding:0; border:1px solid #303038; border-radius:3px; background:transparent; color:#8d8995; cursor:pointer; font-size:13px; } #desktop-contextbar .agent-message-actions button:hover { color:#35d6c5; border-color:#267a70; } #desktop-contextbar .context-message.pending .context-message-text { color:#8d9494; } #desktop-contextbar .agent-run { margin:0 0 12px; padding:11px 12px; border:1px solid #292f32; border-left:2px solid #268f83; background:#121718; } #desktop-contextbar .agent-run-head { display:flex; align-items:center; justify-content:space-between; gap:8px; } #desktop-contextbar .agent-run-head span { color:#35d6c5; font-size:10px; font-weight:700; letter-spacing:.08em; } #desktop-contextbar .agent-run-head b { color:#8e9a98; font-size:10px; font-weight:600; } #desktop-contextbar .agent-run.is-done .agent-run-head b { color:#6fd4c7; } #desktop-contextbar .agent-run.is-error { border-left-color:#a87777; } #desktop-contextbar .agent-run.is-error .agent-run-head b { color:#d09090; } #desktop-contextbar .agent-run > p { margin:7px 0 9px; color:#d7dbda; font-size:12px; line-height:1.45; } #desktop-contextbar .agent-run ol { display:grid; gap:5px; margin:0; padding:0; list-style:none; } #desktop-contextbar .agent-run li { display:grid; grid-template-columns:17px minmax(0,1fr) auto; align-items:center; gap:6px; color:#797f7e; font-size:11px; } #desktop-contextbar .agent-run li i { display:grid; place-items:center; width:16px; height:16px; border:1px solid #3a4140; border-radius:50%; color:#747d7a; font-size:9px; font-style:normal; } #desktop-contextbar .agent-run li em { color:#6d7674; font-size:10px; font-style:normal; } #desktop-contextbar .agent-run li.active { color:#d9f1ed; } #desktop-contextbar .agent-run li.active i { border-color:#35d6c5; color:#35d6c5; } #desktop-contextbar .agent-run li.active em { color:#35d6c5; } #desktop-contextbar .agent-run li.done { color:#a9b5b2; } #desktop-contextbar .agent-run li.done i { border-color:#378e83; background:#173c38; color:#70e4d4; } #desktop-contextbar .agent-run li.done em { color:#7db9b0; } #desktop-contextbar .agent-run li.error i { border-color:#a87777; color:#d09090; } #desktop-contextbar .agent-run li.error em { color:#d09090; } #desktop-contextbar .context-chat-form { position:relative; z-index:4; flex:0 0 auto; display:grid; grid-template-columns:36px minmax(0,1fr) 42px; gap:8px; align-items:end; padding:12px 0 14px; border-top:1px solid #28282f; background:inherit; } #desktop-contextbar .context-chat-input { min-height:48px; max-height:128px; overflow-y:auto; } #desktop-contextbar .context-chat-form .agent-attach-button { width:36px; min-height:42px; padding:0; flex:0 0 36px; font-size:21px; } #desktop-contextbar .context-chat-send { width:42px; height:42px; border:1px solid #257e74; border-radius:4px; background:#178f83; color:#fff; font-size:22px; cursor:pointer; } #desktop-contextbar .context-chat-send:disabled { cursor:wait; opacity:.45; } #desktop-contextbar .context-rank { overflow-y:auto; padding:2px 0 18px; } #desktop-contextbar .rank-head { display:flex; justify-content:space-between; align-items:center; margin:20px 0 8px; } #desktop-contextbar .rank-head strong { color:#f1eff4; font-size:15px; } #desktop-contextbar .rank-head span { color:#6f6b77; font-size:11px; } #desktop-contextbar .rank-desc { color:#777380; font-size:12px; margin-bottom:8px; } #desktop-contextbar .rank-row { display:grid; grid-template-columns:22px minmax(0,1fr) 54px; gap:8px; align-items:center; padding:13px 0; border-bottom:1px solid #222228; } #desktop-contextbar .rank-no { color:#777380; font-weight:700; } #desktop-contextbar .rank-row:nth-child(-n+3) .rank-no, #desktop-contextbar .rank-row:nth-child(-n+3) .rank-count { color:#35d6c5; } #desktop-contextbar .rank-question { color:#d8d5dd; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #desktop-contextbar .rank-question small { display:block; margin-top:3px; color:#74717b; font-size:11px; font-weight:400; } #desktop-contextbar .rank-count { color:#8e8996; text-align:right; font-size:13px; } #desktop-contextbar .agent-answer-records { margin:14px 0; max-height:240px; overflow-y:auto; border-top:1px solid #28282f; } #desktop-contextbar .agent-answer-record { padding:11px 2px; border-bottom:1px solid #28282f; } #desktop-contextbar .agent-answer-record div { display:flex; gap:8px; justify-content:space-between; } #desktop-contextbar .agent-run-records { margin:14px 0; padding-top:12px; border-top:1px solid #28282f; } #desktop-contextbar .agent-run-records h4 { margin:0 0 7px; color:#d9d6df; font-size:12px; } #desktop-contextbar .agent-run-records > p { margin:0; color:#777380; font-size:11px; line-height:1.55; } #desktop-contextbar .agent-run-records article { position:relative; padding:8px 0 8px 8px; border-left:2px solid #2b514d; border-bottom:1px solid #24242b; } #desktop-contextbar .agent-run-records article:last-child { border-bottom:0; } #desktop-contextbar .agent-run-records article > div { display:flex; gap:7px; justify-content:space-between; } #desktop-contextbar .agent-run-records strong { min-width:0; overflow:hidden; color:#bdb9c4; font-size:11px; text-overflow:ellipsis; white-space:nowrap; } #desktop-contextbar .agent-run-records time { flex:0 0 auto; color:#6f6b76; font-size:9px; } #desktop-contextbar .agent-run-records .run-status { display:block; margin-top:3px; color:#7fb8b0; font-size:10px; } #desktop-contextbar .agent-run-records .run-status.error { color:#c58b8b; } #desktop-contextbar .agent-run-records .run-status.stopped { color:#9d9aa4; } #desktop-contextbar .agent-answer-record strong { color:#ddd9e2; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #desktop-contextbar .agent-answer-record time,#desktop-contextbar .agent-answer-record small,#desktop-contextbar .agent-answer-record p { color:#777380; font-size:10px; } #desktop-contextbar .agent-answer-record p { margin:5px 0; line-height:1.5; } #desktop-contextbar .agent-answer-empty,.people-loading,.people-setup { padding:28px 4px; color:#777380; font-size:12px; } #desktop-contextbar .people-panel { position:relative; z-index:1; overflow-y:auto; box-sizing:border-box; margin-top:0; padding:18px 0 28px; border-top:1px solid #28282f; scroll-padding-bottom:28px; scrollbar-gutter:stable; overscroll-behavior:contain; transition:opacity .16s ease,transform .16s ease,filter .16s ease; } #desktop-contextbar .people-panel.is-leaving { opacity:0; transform:translateY(10px); filter:blur(4px); } #desktop-contextbar .people-feature { min-height:145px; margin:0 -20px; padding:20px; border-bottom:1px solid #28282f; animation:peopleFeatureIn .48s cubic-bezier(.2,.8,.2,1) both; } #desktop-contextbar .people-feature-title { display:flex; align-items:center; gap:12px; color:#f1eff4; font-size:16px; } #desktop-contextbar .people-feature-title i { color:#35d6c5; font-style:normal; font-size:24px; line-height:1; } #desktop-contextbar .people-feature-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:30px; } #desktop-contextbar .people-feature-stats span { min-width:0; padding:10px 4px; border:1px solid #286a63; border-radius:6px; background:#111b1a; color:#8d9795; text-align:center; font-size:9px; line-height:1.3; box-shadow:inset 0 0 18px rgba(53,214,197,.035); animation:peopleStatIn .46s cubic-bezier(.2,.8,.2,1) both; overflow:hidden; } #desktop-contextbar .people-feature-stats span:nth-child(2) { animation-delay:.07s; } #desktop-contextbar .people-feature-stats span:nth-child(3) { animation-delay:.14s; } #desktop-contextbar .people-feature-stats span:nth-child(4) { animation-delay:.21s; } #desktop-contextbar .people-feature-stats b { display:block; margin-bottom:4px; color:#35d6c5; font-size:14px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; word-break:break-word; } #desktop-contextbar .people-activity-legend { margin:10px 0 0; color:#7a8280; font-size:10px; line-height:1.5; } #desktop-contextbar .people-rank-card { margin:18px 0 22px; padding:18px 14px 6px; border:1px solid #33514e; border-radius:6px; background:#101014; box-shadow:0 0 0 1px rgba(53,214,197,.025),0 18px 45px rgba(0,0,0,.2); animation:peopleCardIn .55s .08s cubic-bezier(.2,.8,.2,1) both; } #desktop-contextbar .people-head { display:flex; justify-content:space-between; align-items:center; padding:0 0 12px; } #desktop-contextbar .people-head strong { color:#f1eff4; font-size:16px; } #desktop-contextbar .people-refresh { width:29px; height:29px; border:1px solid #34343d; border-radius:4px; background:transparent; color:#9a96a2; font-size:21px; line-height:1; cursor:pointer; } #desktop-contextbar .people-refresh:hover { border-color:#268b7f; color:#35d6c5; } #desktop-contextbar .people-rank-tabs { display:flex; gap:22px; border-bottom:1px solid #292930; } #desktop-contextbar .people-rank-tabs button { position:relative; padding:0 0 10px; border:0; border-bottom:3px solid transparent; background:transparent; color:#777380; font-size:12px; cursor:pointer; } #desktop-contextbar .people-rank-tabs button.active { color:#e9e6ed; border-bottom-color:#35d6c5; } #desktop-contextbar .people-rank-tabs i { position:absolute; top:-7px; right:-10px; min-width:15px; height:15px; padding:0 4px; border-radius:8px; background:#35d6c5; color:#0d1716; font-size:9px; font-style:normal; line-height:15px; } #desktop-contextbar .people-feedback { margin:10px 0 0; padding:8px; border:1px solid #285f59; border-radius:4px; background:#142826; color:#63d8ca; font-size:10px; } #desktop-contextbar .people-feedback.error { border-color:#653d42; background:#2b1b1e; color:#e2a2aa; } #desktop-contextbar .people-score-note { margin:13px 0 5px; color:#777380; font-size:10px; line-height:1.5; } #desktop-contextbar .people-head span { color:#777380; font-size:11px; } #desktop-contextbar .people-row { display:grid; grid-template-columns:20px minmax(0,1fr) auto 52px; gap:8px; align-items:center; padding:13px 0; border-bottom:1px solid rgba(53,214,197,.055); opacity:0; animation:peopleRowIn .48s cubic-bezier(.18,.82,.25,1) forwards; animation-delay:calc(70ms + min(var(--people-row-index),12) * 42ms); } #desktop-contextbar .people-row:hover { background:#121c1b; transform:translateX(3px); } #desktop-contextbar .people-row > b,#desktop-contextbar .people-row > span { color:#35d6c5; font-size:14px; } #desktop-contextbar .people-row div strong,#desktop-contextbar .people-row div small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #desktop-contextbar .people-row div strong { color:#e4e1e8; font-size:12px; } #desktop-contextbar .people-row div small { margin-top:4px; color:#74717b; font-size:9px; } #desktop-contextbar .people-actions { display:flex; align-items:center; justify-content:flex-end; gap:5px; } #desktop-contextbar .people-row button { padding:5px 7px; border:1px solid #268b7f; border-radius:5px; background:transparent; color:#35d6c5; font-size:9px; white-space:nowrap; cursor:pointer; } #desktop-contextbar .people-row button.muted { border-color:#3a3a43; color:#92909a; } #desktop-contextbar .people-row button:disabled { opacity:.45; cursor:wait; } #desktop-contextbar .people-avatar { width:20px; height:20px; border-radius:50%; background:#193330; text-align:center; font-size:10px!important; line-height:20px; } #desktop-contextbar .people-empty { padding:30px 8px; color:#777380; text-align:center; } #desktop-contextbar .people-empty strong,#desktop-contextbar .people-empty span { display:block; } #desktop-contextbar .people-empty strong { margin-bottom:7px; color:#aaa6b1; font-size:12px; } #desktop-contextbar .people-empty span { font-size:10px; line-height:1.6; } #desktop-contextbar .people-auto-more { display:block; width:100%; height:1px; overflow:hidden; } #desktop-contextbar .people-list-end { margin:12px 0 2px; color:#6f747b; text-align:center; font-size:10px; } #desktop-contextbar .people-row em { color:#777380; font-size:9px; font-style:normal; } #desktop-contextbar .people-row > span { text-align:right; font-size:18px; font-weight:600; } #desktop-contextbar .people-row > span small { display:block; color:#777380; font-size:8px; font-weight:400; white-space:nowrap; } @keyframes contextPanelIn { from { opacity:0; transform:translateY(16px) scale(.985); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } } @keyframes peopleFeatureIn { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:none; } } @keyframes peopleStatIn { from { opacity:0; transform:translateY(14px) scale(.94); } to { opacity:1; transform:none; } } @keyframes peopleCardIn { from { opacity:0; transform:translateY(22px) scale(.975); box-shadow:none; } to { opacity:1; transform:none; } } @keyframes peopleRowIn { from { opacity:0; transform:translateX(22px); filter:blur(3px); } to { opacity:1; transform:none; filter:none; } } @media (prefers-reduced-motion:reduce) { #desktop-contextbar,#desktop-contextbar > *,#desktop-contextbar .context-panel-enter,#desktop-contextbar .people-feature,#desktop-contextbar .people-rank-card,#desktop-contextbar .people-row,#desktop-contextbar .people-feature-stats span { animation:none!important; transition:none!important; opacity:1; transform:none; filter:none; } } body.desktop-dark { background:#0d0d10; color:#ecebf0; --primary:173 65% 52%; --primary-foreground:240 10% 5%; --secondary:174 28% 20%; --secondary-foreground:170 42% 90%; --accent:173 65% 52%; --accent-foreground:240 10% 5%; --background:240 10% 5%; --foreground:240 8% 92%; --card:240 8% 10%; --card-foreground:240 8% 92%; --muted:240 6% 16%; --muted-foreground:240 5% 64%; --border:240 6% 21%; --input:240 6% 21%; --glass-bg:rgba(22,22,27,.88); --glass-border:rgba(255,255,255,.1); --glass-shadow:none; } body.desktop-dark:not(.route-qa):not(.route-grade) #app, body.desktop-dark:not(.route-qa):not(.route-grade) page { background:#0d0d10 !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app .taro_page, body.desktop-dark:not(.route-qa):not(.route-grade) #app .taro_page_show, body.desktop-dark:not(.route-qa):not(.route-grade) #app .taro-tabbar__panel, body.desktop-dark:not(.route-qa):not(.route-grade) #app taro-page-core, body.desktop-dark:not(.route-qa):not(.route-grade) #app .min-h-screen { background:#0d0d10 !important; color:#ecebf0 !important; } body.desktop-dark.route-has-context:not(.route-qa):not(.route-grade) #app, body.desktop-dark.route-has-context:not(.route-qa):not(.route-grade) #app > div, body.desktop-dark.route-has-context:not(.route-qa):not(.route-grade) #app .taro_page, body.desktop-dark.route-has-context:not(.route-qa):not(.route-grade) #app .taro_page_show, body.desktop-dark.route-has-context:not(.route-qa):not(.route-grade) #app .taro-tabbar__panel, body.desktop-dark.route-has-context:not(.route-qa):not(.route-grade) #app taro-page-core, body.desktop-dark.route-has-context:not(.route-qa):not(.route-grade) #app .min-h-screen { background-color:transparent !important; background-image:none !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app .rounded-xl, body.desktop-dark:not(.route-qa):not(.route-grade) #app .rounded-2xl, body.desktop-dark:not(.route-qa):not(.route-grade) #app .glass-card, body.desktop-dark:not(.route-qa):not(.route-grade) #app .glass-card-frosted { background-color:#15151a !important; border-color:#2b2b33 !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app [style*="255, 255, 255"], body.desktop-dark:not(.route-qa):not(.route-grade) #app [style*="255,255,255"] { background:#15151a !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app .rounded-full { background-color:#24242b !important; border-color:#34343d !important; } body.desktop-dark .bg-gradient-primary, body.desktop-dark .bg-gradient-subtle { background:#24242b !important; } body.desktop-dark:not(.route-qa):not(.route-grade) .glass-card, body.desktop-dark:not(.route-qa):not(.route-grade) .glass-card-frosted, body.desktop-dark:not(.route-qa):not(.route-grade) .glass-input { box-shadow:none; } #theme-toggle { width:100%; margin:18px 0 0; border:1px solid #303038; border-radius:4px; background:transparent; color:#9d98a8; padding:10px; cursor:pointer; font-size:13px; } #theme-toggle:disabled { cursor:not-allowed; opacity:.58; } .desktop-nav-footer { position:absolute; z-index:1; left:0; right:0; bottom:0; pointer-events:auto; display:flex; flex-direction:column; max-height:calc(100vh - 250px); overflow-y:auto; padding:18px 22px 22px; border-top:1px solid #292933; background:#111114; } .desktop-nav-user { color:#e5e2e9; font-size:14px; padding:0 10px; } .desktop-nav-user > div { display:flex; align-items:center; flex-wrap:wrap; gap:7px; } .desktop-nav-user strong { min-width:0; overflow:hidden; color:inherit; font-size:13px; text-overflow:ellipsis; white-space:nowrap; } .desktop-nav-user span { display:block; color:#777380; font-size:12px; margin-top:5px; } .desktop-role-badge { flex:0 0 auto; padding:2px 5px; border:1px solid #3a3a43; border-radius:3px; background:#24242b; color:#aaa6b1; font-size:9px; font-weight:700; line-height:1.25; } .desktop-role-badge.is-student { border-color:#285f59; background:#142826; color:#63d8ca; } .desktop-role-badge.is-admin { border-color:#64552e; background:#2a2417; color:#e0bc61; } .desktop-role-badge.is-super { border-color:#604b79; background:#251c31; color:#c6a3ef; } .desktop-role-badge.is-initial { border-color:#7b5832; background:#302116; color:#efc078; } .desktop-feature-access-marker { position:fixed; z-index:81; top:22px; right:28px; display:inline-flex; align-items:center; gap:7px; min-height:28px; padding:0 10px; border:1px solid; border-radius:5px; font-size:11px; font-weight:750; pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.18); } .desktop-feature-access-marker i { font-size:16px; } .desktop-feature-access-marker.is-free { border-color:#317a70; background:#102a27; color:#88e6d8; } .desktop-feature-access-marker.is-beta { border-color:#765590; background:#281d33; color:#e0bcff; } .desktop-feature-access-marker.is-summer { border-color:#8b6a31; background:#302718; color:#f2cf80; } .desktop-feature-access-marker.is-pro { border-color:#b48738; background:#342818; color:#f5cd76; } .desktop-role-badge.is-visitor { border-color:#526276; background:#1d2631; color:#adc2d8; } .desktop-role-badge.is-pro { border-color:#2f9d8f; background:linear-gradient(135deg,#15332f,#1c4f47); color:#7ff0df; letter-spacing:.06em; text-transform:none; } .desktop-role-badge.is-summer { border-color:#c9a24a; background:linear-gradient(135deg,#2f2616,#4a3818); color:#f6d78a; letter-spacing:.06em; text-transform:none; } .pro-upgrade-link { width:100%; display:flex; align-items:center; gap:8px; margin-top:16px; padding:10px; border:1px solid rgba(53,214,197,.38); border-radius:4px; background:rgba(23,143,131,.12); color:#dffaf6; font:600 13px/1.2 inherit; cursor:pointer; } .pro-upgrade-link.is-member { border-color:rgba(53,214,197,.28); background:rgba(23,143,131,.08); cursor:default; } .pro-upgrade-link.is-ultra { border-color:rgba(201,162,74,.42); background:rgba(164,120,28,.14); color:#f6e4b4; } .pro-upgrade-link.is-ultra span { background:#c9a24a; color:#2a1f0c; } .pro-upgrade-link span { padding:2px 5px; border-radius:2px; background:#35d6c5; color:#102522; font-size:9px; font-weight:800; letter-spacing:.06em; }.pro-upgrade-link i { margin-left:auto; color:#35d6c5; font-size:19px; font-style:normal; } .pro-upgrade-link.is-ultra i { color:#c9a24a; } .customer-support-link { display:flex; align-items:center; width:100%; margin-top:12px; padding:8px 10px; border:0; background:transparent; color:#aaa7b1; font:inherit; font-size:12px; text-align:left; cursor:pointer; }.customer-support-link:hover { color:#dce8e6; }.customer-support-link i { margin-left:auto; color:#35d6c5; font-size:18px; font-style:normal; } .desktop-admin-link { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1px 6px; align-items:center; width:100%; margin-top:7px; padding:7px 8px; box-sizing:border-box; border:1px solid rgba(224,168,65,.34); border-radius:5px; background:rgba(177,122,22,.10); color:#f5dfad; text-decoration:none; } .desktop-admin-link span { min-width:0; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:750; } .desktop-admin-link span b { display:inline-flex; width:17px; height:17px; align-items:center; justify-content:center; color:#f0c66b; font-size:14px; font-weight:800; line-height:1; } .desktop-admin-link small { grid-column:1; color:#bcae90; font-size:9px; line-height:1.25; } .desktop-admin-link i { grid-column:2; grid-row:1 / span 2; color:#e3b44e; font-size:15px; font-style:normal; } .desktop-admin-link:hover { border-color:#e3b44e; background:rgba(177,122,22,.2); } .desktop-admin-payment-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#e05f5f; color:#fff; font-size:10px; font-weight:800; font-style:normal; line-height:1; } .desktop-admin-payment-badge[hidden] { display:none !important; } .desktop-admin-payment-notice { position:fixed; right:24px; bottom:24px; left:auto; top:auto; z-index:2147483000; display:flex; align-items:center; justify-content:space-between; gap:14px; width:min(420px, calc(100vw - 48px)); padding:14px 16px; border:1px solid rgba(240,184,74,.48); border-radius:16px; background:linear-gradient(135deg,rgba(28,34,45,.97),rgba(18,38,43,.97)); box-shadow:0 18px 48px rgba(0,0,0,.34); color:#f8fafc; box-sizing:border-box; backdrop-filter:blur(14px); animation:desktop-admin-payment-notice-in .28s ease both; } @keyframes desktop-admin-payment-notice-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } .desktop-admin-payment-notice-main { display:flex; align-items:center; gap:12px; min-width:0; } .desktop-admin-payment-notice-mark { flex:0 0 auto; display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:linear-gradient(135deg,#f0b84a,#2dd4bf); color:#101827; font-size:20px; font-weight:900; } .desktop-admin-payment-notice-copy { min-width:0; } .desktop-admin-payment-notice-copy strong { display:block; font-size:15px; line-height:1.25; color:#fff; } .desktop-admin-payment-notice-copy span { display:block; margin-top:4px; font-size:12px; line-height:1.45; color:#cbd5e1; } .desktop-admin-payment-notice-actions { display:flex; flex-direction:column; gap:6px; flex:0 0 auto; } .desktop-admin-payment-notice-actions button { border:0; border-radius:999px; font:800 12px/1 inherit; cursor:pointer; padding:9px 12px; } .desktop-admin-payment-notice-actions [data-admin-payment-notice-open] { background:#f0b84a; color:#1a1203; box-shadow:0 10px 22px rgba(240,184,74,.22); } .desktop-admin-payment-notice-actions [data-admin-payment-notice-dismiss] { background:transparent; color:#cbd5e1; border:1px solid rgba(203,213,225,.28); } body.desktop-light .desktop-admin-link { border-color:rgba(174,122,26,.36); background:rgba(255,247,221,.7); color:#795710; } body.desktop-light .desktop-admin-link small { color:#7a6428; } body.desktop-light .desktop-admin-link i { color:#9d7219; } body.desktop-light .desktop-admin-payment-notice { border-color:#e2c27a; background:linear-gradient(135deg,#fff9ec,#f4fff9); box-shadow:0 16px 36px rgba(70,84,88,.14); color:#31454b; } body.desktop-light .desktop-admin-payment-notice-copy strong { color:#24383d; } body.desktop-light .desktop-admin-payment-notice-copy span { color:#55686e; } body.desktop-light .desktop-admin-payment-notice-actions [data-admin-payment-notice-dismiss] { color:#55686e; border-color:#d5e0e2; } .desktop-daylight-wip-toast { position:fixed; left:50%; bottom:36px; z-index:2147483001; display:grid; gap:4px; width:max-content; max-width:min(420px, calc(100vw - 40px)); padding:12px 18px; border:1px solid rgba(23,143,131,.28); border-radius:12px; background:rgba(255,255,255,.94); color:#24383d; box-shadow:0 14px 36px rgba(40,60,70,.16); transform:translateX(-50%); animation:desktop-daylight-wip-in .26s ease both; pointer-events:none; } .desktop-daylight-wip-toast strong { font-size:14px; font-weight:750; line-height:1.3; color:#173038; } .desktop-daylight-wip-toast span { font-size:12px; line-height:1.4; color:#5d7279; } .desktop-daylight-wip-toast.is-leaving { animation:desktop-daylight-wip-out .28s ease both; } @keyframes desktop-daylight-wip-in { from { opacity:0; transform:translate(-50%, 10px); } to { opacity:1; transform:translate(-50%, 0); } } @keyframes desktop-daylight-wip-out { from { opacity:1; transform:translate(-50%, 0); } to { opacity:0; transform:translate(-50%, 8px); } } .desktop-student-preview-link { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; align-items:center; width:100%; margin:0 0 8px; padding:9px 10px; box-sizing:border-box; border:1px solid rgba(82,178,166,.48); border-radius:4px; background:rgba(37,142,130,.14); color:#c7f0e9; font:inherit; text-align:left; cursor:pointer; }.desktop-student-preview-link span { min-width:0; font-size:12px; font-weight:700; }.desktop-student-preview-link small { grid-column:1; color:#8cbab3; font-size:10px; }.desktop-student-preview-link i { grid-column:2; grid-row:1 / span 2; color:#5dd3c1; font-size:19px; font-style:normal; }.desktop-student-preview-link:hover { border-color:#5dd3c1; background:rgba(37,142,130,.24); }.desktop-student-preview-link.is-active { border-color:rgba(213,132,92,.58); background:rgba(177,91,49,.16); color:#f5d4bd; }.desktop-student-preview-link.is-active small { color:#d9ac90; }.desktop-student-preview-link.is-active i { color:#ebac7d; } .desktop-student-preview-link select { grid-column:2; grid-row:1 / span 2; width:138px; min-height:30px; padding:0 7px; border:1px solid rgba(93,211,193,.42); border-radius:4px; outline:0; background:#122826; color:#d7f4ef; font:600 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; cursor:pointer; }.desktop-student-preview-link.is-active select { border-color:rgba(235,172,125,.52); background:#332017; color:#ffe1ce; } body.desktop-light .desktop-student-preview-link { border-color:rgba(31,140,128,.38); background:rgba(232,251,247,.84); color:#166b61; } body.desktop-light .desktop-student-preview-link small { color:#548982; } body.desktop-light .desktop-student-preview-link i { color:#168a7d; } body.desktop-light .desktop-student-preview-link.is-active { border-color:rgba(181,92,42,.38); background:rgba(255,240,229,.88); color:#92461e; } body.desktop-light .desktop-student-preview-link.is-active small { color:#a46e4d; } body.desktop-light .desktop-student-preview-link.is-active i { color:#b65b28; } .desktop-profile-student-preview { width:100%; max-width:760px; margin:18px auto 0; padding:12px 14px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; align-items:center; border:1px solid rgba(88,75,162,.25); border-radius:10px; background:linear-gradient(135deg,rgba(246,243,255,.96),rgba(238,249,248,.9)); color:#4c3a8b; text-align:left; cursor:pointer; box-sizing:border-box; }.desktop-profile-student-preview span { font-size:13px; font-weight:750; }.desktop-profile-student-preview small { grid-column:1; color:#777087; font-size:11px; }.desktop-profile-student-preview i { grid-column:2; grid-row:1 / span 2; color:#6850c5; font-size:20px; font-style:normal; }.desktop-profile-student-preview:hover { border-color:rgba(103,80,199,.5); background:#f3efff; }body.desktop-dark .desktop-profile-student-preview { border-color:rgba(110,211,197,.28); background:rgba(35,78,75,.25); color:#b9eee7; } body.desktop-dark .desktop-profile-student-preview small { color:#95bbb6; } body.desktop-dark .desktop-profile-student-preview i { color:#74d8ca; } .desktop-home-footer { width:100%; margin-top:16px; padding:13px 0 0; border:0; border-top:1px solid #292933; border-radius:0; background:transparent; color:#777380; text-align:left; font:inherit; font-size:13px; cursor:pointer; } .desktop-home-footer:hover, .desktop-home-footer.active { color:#35d6c5; } #desktop-nav.collapsed #theme-toggle, .desktop-nav-footer { padding:18px 20px 16px; } .desktop-nav-user { padding:0; font-size:13px; } .desktop-nav-user span { margin-top:4px; font-size:11px; } .desktop-nav-language { display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding:10px 0; border-top:1px solid #292933; border-bottom:1px solid #292933; color:#777380; font-size:11px; } .desktop-nav-language b { min-width:24px; padding:4px 6px; border-radius:3px; background:#292930; color:#d6d3dc; text-align:center; font-size:11px; } .desktop-home-footer { display:block; width:100%; margin-top:10px; padding:6px 0 0; border:0; color:#85818e; font-size:11px; } body.desktop-light .desktop-nav-language { border-color:#d6dbe2; color:#69707b; } body.desktop-light .desktop-nav-language b { background:#e8edf2; color:#4d5661; } body.desktop-light #desktop-today { background:rgba(250,249,253,.86); backdrop-filter:blur(24px); } body.desktop-dark #desktop-today { background:#0d0d10; color:#ecebf0; } body.desktop-dark #desktop-today .today-card, body.desktop-dark #desktop-today .progress-panel { background:#15151a; border-color:#2b2b33; box-shadow:none; } body.desktop-dark #desktop-today .stat { background:#1d1d23; } body.desktop-dark #desktop-today .today-subtitle, body.desktop-dark #desktop-today .today-kicker, body.desktop-dark #desktop-today .activity small, body.desktop-dark #desktop-today .recommend span { color:#8d8995; } body.desktop-dark .bg-gradient-primary, body.desktop-light .bg-gradient-primary { background:#2a2a31 !important; background-image:none !important; } body.desktop-dark .bg-gradient-subtle, body.desktop-light .bg-gradient-subtle { background:#202027 !important; background-image:none !important; } body.desktop-dark .bg-background { background-color:#0d0d10 !important; } body.desktop-dark .bg-card, body.desktop-dark .bg-white { background-color:#15151a !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app taro-view-core { background-color:transparent !important; background-image:none !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app .glass-card, body.desktop-dark:not(.route-qa):not(.route-grade) #app .glass-card-frosted, body.desktop-dark:not(.route-qa):not(.route-grade) #app .bg-card, body.desktop-dark:not(.route-qa):not(.route-grade) #app .bg-white { background:#15151a !important; border-color:#2b2b33 !important; color:#ecebf0 !important; box-shadow:none !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app [style*="box-shadow"], body.desktop-light #app [style*="box-shadow"] { box-shadow:none !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app [style*="border:"] { border-width:1px !important; border-color:#2b2b33 !important; } body.desktop-light #app [style*="border:"] { border-width:1px !important; border-color:rgba(255,255,255,.78) !important; } #app [style*="border-radius"]:not([style*="50%"]):not([style*="999"]):not(.rounded-full) { border-radius:4px !important; } #app .border-2, #app .border-4 { border-width:1px !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app .glass-input, body.desktop-dark:not(.route-qa):not(.route-grade) #app .glass-input-active, body.desktop-dark:not(.route-qa):not(.route-grade) #app taro-input-core, body.desktop-dark:not(.route-qa):not(.route-grade) #app taro-textarea-core, body.desktop-dark:not(.route-qa):not(.route-grade) #app input, body.desktop-dark:not(.route-qa):not(.route-grade) #app textarea { background:#111116 !important; color:#ecebf0 !important; border-color:#303038 !important; box-shadow:none !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app taro-button-core { background-color:#24242b !important; background-image:none !important; border-color:#33333c !important; box-shadow:none !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app * { color:#c9c6d0 !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app .text-foreground, body.desktop-dark:not(.route-qa):not(.route-grade) #app h1, body.desktop-dark:not(.route-qa):not(.route-grade) #app h2, body.desktop-dark:not(.route-qa):not(.route-grade) #app h3, body.desktop-dark:not(.route-qa):not(.route-grade) #app strong { color:#ecebf0 !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app .text-muted-foreground, body.desktop-dark:not(.route-qa):not(.route-grade) #app .text-gray-400, body.desktop-dark:not(.route-qa):not(.route-grade) #app .text-gray-500, body.desktop-dark:not(.route-qa):not(.route-grade) #app .text-gray-700 { color:#9894a1 !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app .text-primary, body.desktop-dark:not(.route-qa):not(.route-grade) #app .text-accent { color:#35d6c5 !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app .text-primary-foreground, body.desktop-dark:not(.route-qa):not(.route-grade) #app .text-white, body.desktop-dark:not(.route-qa):not(.route-grade) #app taro-button-core { color:#fff !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app taro-input-core::placeholder, body.desktop-dark:not(.route-qa):not(.route-grade) #app taro-textarea-core::placeholder, body.desktop-dark:not(.route-qa):not(.route-grade) #app input::placeholder, body.desktop-dark:not(.route-qa):not(.route-grade) #app textarea::placeholder { color:#777380 !important; } body.desktop-dark .border, body.desktop-dark .border-b, body.desktop-dark .border-t, body.desktop-dark .border-border, body.desktop-dark .border-input { border-color:#2b2b33 !important; } body.desktop-light .bg-background { background-color:rgba(246,246,250,.72) !important; } body.desktop-light:not(.route-qa):not(.route-grade) .bg-card, body.desktop-light:not(.route-qa):not(.route-grade) .bg-white, body.desktop-light:not(.route-qa):not(.route-grade) .glass-card, body.desktop-light:not(.route-qa):not(.route-grade) .glass-card-frosted { background-color:rgba(255,255,255,.62) !important; backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%); border-color:rgba(255,255,255,.78) !important; } body.desktop-light { background:#edf1f6; --primary:174 71% 33%; --primary-foreground:0 0% 100%; --secondary:174 28% 90%; --secondary-foreground:174 55% 24%; --accent:174 71% 33%; --accent-foreground:0 0% 100%; --gradient-primary:rgba(255,255,255,.72); --gradient-secondary:rgba(255,255,255,.62); --gradient-subtle:rgba(255,255,255,.46); } body.desktop-light #app, body.desktop-light page, body.desktop-light #app .taro_page, body.desktop-light #app taro-page-core { background:#edf1f6 !important; background-image:none !important; } body.desktop-light:not(.route-qa):not(.route-grade) #app .min-h-screen { background:rgba(242,245,249,.72) !important; background-image:none !important; } body.desktop-light:not(.route-auth) #app [style*="linear-gradient"]:not(button):not(taro-button-core):not(.logo-linka) { background:rgba(255,255,255,.52) !important; background-image:none !important; } body.desktop-light .bg-gradient-primary, body.desktop-light .bg-gradient-subtle, body.desktop-light .capsule-selected, body.desktop-light .bubble-loader-fill { background:rgba(255,255,255,.64) !important; background-image:none !important; color:#2c2933 !important; box-shadow:none !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.82) !important; } body.desktop-light:not(.route-qa):not(.route-grade) #app .rounded-xl, body.desktop-light:not(.route-qa):not(.route-grade) #app .rounded-2xl { background-color:rgba(255,255,255,.56) !important; backdrop-filter:blur(20px) saturate(135%); -webkit-backdrop-filter:blur(20px) saturate(135%); } body.desktop-light #desktop-nav, body.desktop-light #desktop-contextbar { background:rgba(255,255,255,.66); color:#34313b; border-color:rgba(215,220,228,.9); backdrop-filter:blur(24px) saturate(135%); -webkit-backdrop-filter:blur(24px) saturate(135%); box-shadow:none; } body.desktop-light #desktop-nav .desktop-nav-item:hover, body.desktop-light #desktop-nav .desktop-nav-item.active, body.desktop-light #desktop-contextbar a { background:rgba(255,255,255,.74); color:#25222b; } body.desktop-light #desktop-nav .desktop-nav-item.active::before { background:#20a99b; } body.desktop-light .desktop-nav-brand, body.desktop-light #desktop-contextbar h2, body.desktop-light #desktop-contextbar .assistant-name { color:#25222b; } body.desktop-light .desktop-nav-footer { background:rgba(255,255,255,.38); border-color:#d6dbe2; } body.desktop-light .pro-upgrade-link { background:rgba(23,143,131,.08); border-color:rgba(23,143,131,.3); color:#1c5b54; } body.desktop-light .desktop-home-footer { border-color:#d6dbe2; color:#69707b; } body.desktop-light .desktop-home-footer:hover, body.desktop-light .desktop-home-footer.active { color:#178f83; } body.desktop-light #desktop-contextbar textarea { background:rgba(255,255,255,.58); color:#252a31; border-color:#cfd5dd; } body.desktop-light #desktop-contextbar textarea::placeholder { color:#7a808b; } body.desktop-light #desktop-contextbar .assistant-status, body.desktop-light #desktop-contextbar .context-tab, body.desktop-light #desktop-contextbar .context-item, body.desktop-light #desktop-contextbar .rank-desc, body.desktop-light #desktop-contextbar .rank-head span { color:#686f7a; } body.desktop-light #desktop-contextbar .context-tab.active, body.desktop-light #desktop-contextbar .rank-head strong, body.desktop-light #desktop-contextbar .rank-question { color:#252a31; } body.desktop-light #desktop-contextbar .assistant-head, body.desktop-light #desktop-contextbar .context-tabs, body.desktop-light #desktop-contextbar .context-section, body.desktop-light #desktop-contextbar .context-item, body.desktop-light #desktop-contextbar .rank-row { border-color:#d6dbe2; } body.desktop-light #app .text-primary, body.desktop-light #app .text-accent { color:#178f83 !important; } body.desktop-light #app input, body.desktop-light #app textarea, body.desktop-light #app taro-input-core, body.desktop-light #app taro-textarea-core { color:#252a31 !important; } body.desktop-light #app input::placeholder, body.desktop-light #app textarea::placeholder, body.desktop-light #app taro-input-core::placeholder, body.desktop-light #app taro-textarea-core::placeholder { color:#7a808b !important; } body.desktop-dark .capsule-selected { background:#3b3b45 !important; box-shadow:none !important; } body.desktop-light .capsule-selected { background:rgba(255,255,255,.82) !important; color:#20242b !important; border-color:#ccd2da !important; box-shadow:none !important; } body.desktop-dark .bubble-loader-fill { background:#35d6c5 !important; box-shadow:none !important; } body.desktop-light .bubble-loader-fill { background:#29b8a9 !important; box-shadow:none !important; } body.desktop-dark:not(.route-qa):not(.route-grade) page, body.desktop-light page { background:#0d0d10 !important; background-image:none !important; } body.desktop-light page { background:rgba(247,247,250,.92) !important; } body.desktop-dark .logo-linka { background:linear-gradient(120deg,#ff82a0,#a77bf4 52%,#4f9ef8) !important; -webkit-background-clip:text !important; background-clip:text !important; filter:drop-shadow(0 0 10px rgba(167,123,244,.22)); } body.desktop-dark .animate-orbit, body.desktop-dark .animate-orbit-reverse { filter:saturate(.9) brightness(.95); } body.desktop-dark .animate-orbit-reverse + div { background:linear-gradient(135deg,rgba(255,182,200,.72),rgba(147,197,253,.72)) !important; border-color:rgba(255,255,255,.72) !important; box-shadow:0 0 14px rgba(167,123,244,.22); } #desktop-home { display:block; position:fixed; inset:0 var(--desktop-right-width) 0 var(--desktop-left-width); z-index:80; overflow-y:auto; margin:0; padding:42px 28px 60px; background:#09090b; color:#ecebf0; box-sizing:border-box; } body.desktop-nav-collapsed #desktop-home { left:0; } body.route-dashboard #desktop-nav { display:none; } body.route-dashboard #desktop-home { inset:0; } body.route-dashboard #app { padding-left:0; padding-right:0; } body.context-collapsed #desktop-home { right:0; } #desktop-home { padding:0; overflow:hidden; } #desktop-home .home-inner { position:relative; min-height:100vh; max-width:none; margin:0; display:flex; align-items:center; justify-content:center; } #desktop-home .home-topbar { position:absolute; z-index:8; top:0; left:0; right:0; height:74px; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:0 46px; border-bottom:1px solid rgba(60,60,68,.55); background:rgba(9,9,11,.72); backdrop-filter:blur(14px); } #desktop-home .home-topbar button,#desktop-home .home-topbar a { border:0; background:transparent; color:#aaa6b1; font-family:inherit; font-size:13px; font-weight:600; line-height:1.2; text-decoration:none; cursor:pointer; } #desktop-home .home-topbar button:hover,#desktop-home .home-topbar a:hover { color:#fff; } #desktop-home .home-brand { padding:0 !important; color:#fff !important; font-size:18px !important; font-weight:750 !important; } #desktop-home .home-brand span { display:inline-block; margin-left:9px; padding:4px 7px; border:1px solid rgba(53,214,197,.42); border-radius:3px; color:#72e5da; font-size:9px; font-weight:800; letter-spacing:.1em; vertical-align:2px; } #desktop-home .home-topbar nav { display:flex; align-items:center; gap:26px; } #desktop-home .home-topbar .home-language { padding:8px 11px; border:1px solid #303038; border-radius:4px; color:#e0dde4; } #desktop-home .home-kicker { color:#8c8794; font-size:13px; text-transform:uppercase; } #desktop-home h1 { margin:12px 0 16px; color:#fff; font-size:64px; font-weight:800; line-height:.92; letter-spacing:0; } #desktop-home .home-sub { max-width:360px; margin:0; color:#b5b2bb; font-size:15px; line-height:1.75; } #desktop-home .map-panel { position:absolute; inset:0; border:0; background:#09090b; overflow:hidden; } #desktop-home .china-map { position:absolute; top:96px; right:2%; width:min(66vw,1260px); height:auto; aspect-ratio:1000 / 560; display:block; overflow:visible; opacity:.95; } #desktop-home .map-aura { fill:url(#mapAura); transform-origin:505px 282px; animation:map-aura-breathe 7.4s ease-in-out infinite; } #desktop-home .china-shape { fill:#101016; stroke:#555561; stroke-width:1.25; stroke-linejoin:round; filter:url(#mapGlow); } #desktop-home .network-orbits { fill:none; stroke:#35d6c5; stroke-width:1; stroke-dasharray:3 7; opacity:.4; transform-origin:660px 230px; animation:network-orbit-spin 16s linear infinite; } #desktop-home .network-orbits circle:last-child { stroke-dasharray:1 12; opacity:.45; animation:network-orbit-breathe 3.4s ease-in-out infinite; } #desktop-home .network-lines { fill:none; stroke:#35d6c5; stroke-width:1.15; stroke-dasharray:5 9; opacity:.65; filter:url(#mapGlow); animation:network-line-flow 7.2s linear infinite; } #desktop-home .network-packets circle { fill:#e4fffb; stroke:#35d6c5; stroke-width:1; } #desktop-home .school-node { cursor:pointer; outline:none; } #desktop-home .school-node .node-hit { fill:transparent; } #desktop-home .school-node .node { fill:#35d6c5; stroke:#071312; stroke-width:2; filter:url(#nodeGlow); transition:fill .18s ease,transform .18s ease; transform-box:fill-box; transform-origin:center; } #desktop-home .school-node.has-students .node { fill:#e1fffb; stroke:#35d6c5; stroke-width:2.4; } #desktop-home .school-node.has-students .node-halo { opacity:.48; } #desktop-home .school-node .node-pulse { fill:none; stroke:#35d6c5; stroke-width:1; opacity:0; transform-origin:center; animation:school-node-pulse 3.6s ease-out infinite; animation-delay:var(--node-delay); } #desktop-home .school-node .node-halo { fill:none; stroke:#35d6c5; stroke-width:1; opacity:.25; transition:r .18s ease,opacity .18s ease; } #desktop-home .school-node text { fill:#9b97a2; font-size:10px; font-weight:500; pointer-events:none; } #desktop-home .school-label { opacity:.42; pointer-events:none; transition:opacity .15s ease,transform .15s ease; } #desktop-home .school-label rect { fill:rgba(5,5,7,.76); stroke:rgba(53,214,197,.10); stroke-width:1; } #desktop-home .school-node.active .school-label,#desktop-home .school-node:hover .school-label,#desktop-home .school-node:focus .school-label { opacity:1; transform:translateY(-2px); } #desktop-home .school-node.active .school-label rect { fill:rgba(5,11,12,.92); stroke:rgba(53,214,197,.34); } #desktop-home .school-node:hover .node, #desktop-home .school-node:focus .node, #desktop-home .school-node.active .node { fill:#d9fffb; transform:scale(1.16); } #desktop-home .school-node:hover .node-halo, #desktop-home .school-node:focus .node-halo, #desktop-home .school-node.active .node-halo { opacity:.8; } #desktop-home .school-node:hover text, #desktop-home .school-node:focus text { fill:#ecebf0; font-size:11px; } @keyframes map-aura-breathe { 0%,100% { opacity:.54; transform:scale(.9); } 50% { opacity:1; transform:scale(1.08); } } @keyframes map-scan-drift { from { stroke-dashoffset:0; } to { stroke-dashoffset:-180; } } @keyframes network-line-flow { from { stroke-dashoffset:0; } to { stroke-dashoffset:-112; } } @keyframes network-orbit-spin { to { transform:rotate(360deg); } } @keyframes network-orbit-breathe { 0%,100% { opacity:.18; } 50% { opacity:.62; } } @keyframes school-node-pulse { 0% { opacity:.72; transform:scale(.48); } 72%,100% { opacity:0; transform:scale(3.2); } } #desktop-home .home-copy { position:absolute; z-index:5; top:50%; left:46px; width:380px; transform:translateY(-58%); text-align:left; text-shadow:0 4px 30px rgba(0,0,0,.9); } #desktop-home .home-kicker { color:#35d6c5; font-size:10px; font-weight:700; letter-spacing:.14em; } #desktop-home .home-actions { display:flex; align-items:center; justify-content:flex-start; gap:10px; margin-top:26px; text-shadow:none; } #desktop-home .home-actions button { padding:11px 18px; border:1px solid #35d6c5; border-radius:4px; background:#178f83; color:#fff; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; } #desktop-home .home-actions button:hover { background:#1da699; } #desktop-home .home-actions span { display:inline-flex; align-items:center; gap:8px; padding:10px 13px; border:1px solid #303038; border-radius:4px; background:rgba(9,9,11,.65); color:#aaa6b1; font-size:11px; } #desktop-home .home-actions i { width:6px; height:6px; border-radius:50%; background:#35d6c5; box-shadow:0 0 12px #35d6c5; } #desktop-home .map-note { display:none; } #desktop-home .map-legend { position:absolute; right:34px; top:98px; z-index:3; display:flex; gap:18px; color:#777380; font-size:10px; } #desktop-home .map-legend span { display:flex; align-items:center; gap:6px; } #desktop-home .map-legend i { width:7px; height:7px; border-radius:50%; background:#35d6c5; } #desktop-home .map-legend span:last-child i { width:18px; height:1px; border-radius:0; background:#2a766d; } #desktop-home .home-stats { position:absolute; z-index:6; left:7%; right:7%; bottom:22px; display:grid; grid-template-columns:.62fr .72fr .78fr 1.48fr; border:1px solid #292930; border-radius:5px; background:rgba(9,9,11,.74); backdrop-filter:blur(12px); } #desktop-home .home-stat { padding:16px 22px; text-align:center; border-right:1px solid #292930; } #desktop-home .home-stat:last-child { border-right:0; } #desktop-home .home-stat strong { display:block; font-size:25px; color:#ecebf0; } #desktop-home .home-stat span { color:#85818e; font-size:12px; } #desktop-home .school-inspector { display:flex; align-items:center; justify-content:space-between; gap:20px; text-align:left; min-width:0; } #desktop-home .school-inspector > div { min-width:0; } #desktop-home .school-inspector strong { font-size:18px; color:#35d6c5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #desktop-home .school-inspector span { display:block; margin-top:5px; } #desktop-home .school-inspector-list { display:block; margin-top:8px; color:#aaa6b1; font-size:11px; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #desktop-home .school-exam-link { flex:0 0 auto; padding:9px 12px; border:1px solid #268b7f; border-radius:4px; color:#35d6c5; font-size:11px; text-decoration:none; } #desktop-home .school-exam-link:hover { background:#178f83; color:#fff; } #desktop-home .home-stats.is-highlighted { animation:home-stats-highlight 1.1s ease; } #desktop-home .home-gbc-mark { position:absolute; z-index:7; right:46px; bottom:102px; width:auto; height:auto; transform:none; pointer-events:none; } #desktop-home .home-gbc-mark::before { content:"GBC"; position:static; display:block; color:rgba(116,222,213,.34); font-size:clamp(28px,3.4vw,54px); font-weight:900; line-height:.84; letter-spacing:.04em; text-align:right; } #desktop-home .home-gbc-mark::after { content:"URBAN PLANNING"; position:static; display:block; margin-top:8px; color:rgba(116,222,213,.42); font-size:clamp(8px,.72vw,11px); font-weight:800; letter-spacing:.24em; text-align:right; } #desktop-home .home-gbc-mark span, #desktop-home .home-gbc-mark strong, #desktop-home .home-gbc-mark i { display:none; } #desktop-home .home-about-panel { position:absolute; z-index:20; top:90px; left:50%; width:min(820px,calc(100% - 64px)); padding:28px 30px 30px; box-sizing:border-box; border:1px solid #3a5d5b; border-radius:8px; background:rgba(10,12,15,.98); box-shadow:0 28px 90px rgba(0,0,0,.62); opacity:0; pointer-events:none; transform:translate(-50%,-12px); transition:opacity .2s ease,transform .2s ease; } #desktop-home .home-about-panel.is-open { opacity:1; pointer-events:auto; transform:translate(-50%,0); } #desktop-home .home-about-panel > button { position:absolute; top:14px; right:16px; border:0; background:transparent; color:#a9b8b6; font-size:24px; cursor:pointer; } #desktop-home .home-about-panel header > span { color:#62d8ca; font-size:9px; font-weight:800; letter-spacing:.14em; } #desktop-home .home-about-panel h2 { margin:9px 0 8px; color:#f0f4f4; font-size:27px; } #desktop-home .home-about-panel header p { margin:0; color:#9ca7a7; font-size:12px; } #desktop-home .home-about-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:22px; } #desktop-home .home-about-grid article { min-height:124px; padding:15px; box-sizing:border-box; border:1px solid #283a3a; border-radius:5px; background:#11171a; } #desktop-home .home-about-grid i { color:#52ccbf; font-size:9px; font-style:normal; font-weight:800; } #desktop-home .home-about-grid strong { display:block; margin-top:7px; color:#e8eeee; font-size:14px; } #desktop-home .home-about-grid p { margin:7px 0 0; color:#a5afaf; font-size:10px; line-height:1.65; } @keyframes home-stats-highlight { 0%,100% { box-shadow:none; } 35% { box-shadow:0 0 0 1px rgba(53,214,197,.20),0 0 28px rgba(53,214,197,.12); } } body.desktop-light #desktop-home, body.desktop-light #desktop-home .map-panel { background:#edf1f6; color:#252830; } body.desktop-light #desktop-home h1 { color:#17191e; } body.desktop-light #desktop-home .home-sub, body.desktop-light #desktop-home .school-node text { color:#5f646e; fill:#5f646e; } body.desktop-light #desktop-home .china-shape { fill:rgba(255,255,255,.5); stroke:#aeb5bf; } body.desktop-light #desktop-home .network-lines { stroke:#239f92; opacity:.5; } body.desktop-light #desktop-home .school-node .node { stroke:#edf1f6; } body.desktop-light #desktop-home .school-node:hover text, body.desktop-light #desktop-home .school-node:focus text { fill:#20232a; } body.desktop-light #desktop-home .home-live { color:#4d535d; border-color:#cbd1d9; background:rgba(255,255,255,.42); } body.desktop-light #desktop-home .home-stats, body.desktop-light #desktop-home .home-stat { border-color:#cfd5dd; } body.desktop-light #desktop-home .home-stat strong { color:#20232a; } body.desktop-light #desktop-home .home-stat span, body.desktop-light #desktop-home .map-note, body.desktop-light #desktop-home .map-legend { color:#6a707b; } body.desktop-light #desktop-home .home-topbar { border-color:rgba(190,199,209,.75); background:rgba(244,248,251,.78); } body.desktop-light #desktop-home .home-brand { color:#17191e !important; } body.desktop-light #desktop-home .home-topbar button,body.desktop-light #desktop-home .home-topbar a { color:#555d67; } body.desktop-light #desktop-home .home-actions span,body.desktop-light #desktop-home .home-stats { background:rgba(248,251,253,.78); border-color:#cfd5dd; color:#5f6670; } @media (max-width:1100px) { #desktop-home h1 { font-size:52px; } #desktop-home .home-copy { left:28px; width:310px; } #desktop-home .home-sub { font-size:14px; } #desktop-home .home-topbar { padding:0 28px; } #desktop-home .home-topbar nav { gap:18px; } } @media (max-width:760px) { #desktop-home h1 { font-size:42px; } #desktop-home .home-topbar nav a:nth-of-type(2),#desktop-home .home-topbar nav button[data-home-about] { display:none; } #desktop-home .home-copy { left:18px; width:calc(100% - 36px); } #desktop-home .home-stats { left:18px; right:18px; grid-template-columns:1fr 1fr; } #desktop-home .school-inspector,#desktop-home .home-gbc-mark { display:none; } #desktop-home .home-about-panel { top:82px; width:calc(100% - 28px); padding:23px 18px; } #desktop-home .home-about-grid { grid-template-columns:1fr; } } #desktop-today { display:block !important; position:fixed; inset:0 var(--desktop-right-width) 0 var(--desktop-left-width); z-index:80; overflow-y:auto; margin:0; padding:60px 28px 72px; color:#211f28; background:#faf9fd; box-sizing:border-box; } body.desktop-nav-collapsed #desktop-today { left:0; } body.context-collapsed #desktop-today { right:0; } #desktop-today .today-inner { max-width:1260px; margin:0 auto; } #desktop-today .today-kicker { color:#8a8497; font-size:14px; margin-bottom:38px; } #desktop-today h1 { margin:0; font-size:34px; line-height:1.35; letter-spacing:0; } #desktop-today .today-subtitle { margin:18px 0 30px; color:#706b7b; font-size:16px; } #desktop-today .today-actions { display:flex; gap:10px; margin-bottom:58px; } #desktop-today .today-actions button { padding:9px 14px; border:1px solid #303038; border-radius:4px; background:transparent; color:#a9a5b0; cursor:pointer; } #desktop-today .today-actions button:first-child { border-color:#267a70; color:#35d6c5; } #desktop-today .today-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; } #desktop-today .today-card { background:#fff; border:1px solid #ebe8f2; border-radius:6px; padding:22px; box-shadow:none; } #desktop-today .today-card h2 { margin:0 0 18px; font-size:16px; } #desktop-today .progress-card { grid-column:span 12; } #desktop-today .progress-panel { padding:22px; background:#fff; border:1px solid #ebe8f2; border-radius:6px; } #desktop-today .streak-card { grid-column:span 4; } #desktop-today .record-card { grid-column:span 6; } #desktop-today .record-card:nth-of-type(3), #desktop-today .record-card:nth-of-type(4) { grid-column:span 4; } #desktop-today .recommend-card { grid-column:span 12; } #desktop-today .today-card-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; } #desktop-today .today-card-heading h2 { margin:0; } #desktop-today .today-card-heading span { color:#777184; font-size:12px; } #desktop-today .stat-row { display:flex; gap:10px; margin-top:22px; } #desktop-today .stat { flex:1; background:#f8f6fc; border-radius:4px; padding:14px; } #desktop-today .stat strong { display:block; font-size:25px; color:#42dccc; text-shadow:0 0 14px rgba(66,220,204,.14); } #desktop-today .stat span { display:block; margin-top:5px; color:#777184; font-size:12px; } #desktop-today .heatmap-frame { padding:18px 20px 24px; border:1px solid #ebe8f2; background:#f9fbfb; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; } #desktop-today .heatmap-months { position:relative; height:16px; margin-bottom:10px; color:#888c94; font:11px/16px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; } #desktop-today .heatmap-months span { position:absolute; top:0; width:max-content; transform:translateX(-15%); white-space:nowrap; } #desktop-today .heatmap-months span:first-child { transform:none; } #desktop-today .heatmap { display:grid; grid-template-columns:repeat(var(--heat-columns),minmax(10px,1fr)); gap:3px; width:100%; } #desktop-today .heatmap-stage { position:relative; min-width:689px; } #desktop-today .heatmap-stage .heatmap { transition:opacity .18s ease,transform .18s ease; } #desktop-today .heatmap-stage .heatmap-real { position:absolute; top:34px; left:0; right:0; opacity:0; transform:scale(.985); } #desktop-today .heatmap-stage.show-heatmap .heatmap-intro { opacity:0; transform:scale(.985); pointer-events:none; } #desktop-today .heatmap-stage.show-heatmap .heatmap-real { opacity:1; transform:scale(1); } #desktop-today .heatmap i { --cell-color:#edf1f2; --enter-start:#f3f5f5; --enter-peak:#8fd4ca; display:block; aspect-ratio:1; min-width:0; border-radius:2px; background:var(--cell-color); transform:scale(.94); } #desktop-today .heatmap .heat-level-0 { --cell-color:#edf1f2; } #desktop-today .heatmap .heat-level-1 { --cell-color:#edf1f2; } #desktop-today .heatmap .heat-level-2 { --cell-color:#cfe7e3; } #desktop-today .heatmap .heat-level-3 { --cell-color:#87cfc5; } #desktop-today .heatmap .heat-level-4 { --cell-color:#238f83; } #desktop-today .heatmap .logo-pixel { --logo-flash:#24ded0; background:var(--cell-color); box-shadow:none; transform:scale(.94); transition:background .32s ease,box-shadow .32s ease,transform .32s ease; } #desktop-today .heatmap .logo-row-0 { --logo-flash:#e2fffb; --logo-rest:#bcfff7; } #desktop-today .heatmap .logo-row-1 { --logo-flash:#cefff8; --logo-rest:#8cf8ed; } #desktop-today .heatmap .logo-row-2 { --logo-flash:#94fff1; --logo-rest:#51e9dc; } #desktop-today .heatmap .logo-row-3 { --logo-flash:#51ebdd; --logo-rest:#20cdc1; } #desktop-today .heatmap .logo-row-4 { --logo-flash:#21d9ce; --logo-rest:#09b9b0; } #desktop-today .heatmap .logo-row-5 { --logo-flash:#12c7be; --logo-rest:#06a89f; } #desktop-today .heatmap .logo-row-6 { --logo-flash:#0bb1aa; } #desktop-today .heatmap .logo-pixel.is-lit { background:var(--logo-flash); box-shadow:0 0 8px rgba(45,212,191,.45); transform:scale(1); } #desktop-today .heatmap.heatmap-real i { animation:none; opacity:1; transform:scale(.94); } #desktop-today .heatmap.heatmap-real .heat-level-1 { --cell-color:#edf1f2; } #desktop-today .heatmap.heatmap-enter :is(.heat-level-2,.heat-level-3,.heat-level-4) { animation:heatmap-enter .4s ease both; animation-delay:var(--reveal-delay); } body.desktop-dark #desktop-today .heatmap-frame { background:#111115; border-color:#2b2b33; } body.desktop-dark #desktop-today .heatmap i { --cell-color:#1d1d23; --enter-start:#202126; --enter-peak:#35d6c5; } body.desktop-dark #desktop-today .heatmap .heat-level-0 { --cell-color:#1d1d23; } body.desktop-dark #desktop-today .heatmap.heatmap-real .heat-level-1 { --cell-color:#1d1d23; } body.desktop-dark #desktop-today .heatmap .heat-level-2 { --cell-color:#213431; } body.desktop-dark #desktop-today .heatmap .heat-level-3 { --cell-color:#24534e; } body.desktop-dark #desktop-today .heatmap .heat-level-4 { --cell-color:#267a70; } @keyframes linka-pixel { 0%,6% { background:var(--logo-rest); box-shadow:none; opacity:1; transform:scale(.94); } 13%,78% { background:var(--logo-flash); box-shadow:0 0 12px rgba(80,224,214,.58); opacity:1; transform:scale(1); } 89%,100% { background:var(--logo-rest); box-shadow:none; opacity:1; transform:scale(.94); } } @keyframes heatmap-cycle { 0%,5%,42%,100% { opacity:.14; } 55%,94% { opacity:1; } } @keyframes heatmap-enter { 0% { background:var(--enter-start); opacity:.35; transform:scale(.72); } 48% { background:var(--enter-peak); opacity:.82; transform:scale(1); } 100% { background:var(--cell-color); opacity:1; transform:scale(.94); } } body.desktop-light #desktop-today .heatmap .logo-pixel.is-lit { box-shadow:0 0 7px rgba(23,143,131,.24); } @keyframes linka-pixel-light { 0%,6% { background:var(--logo-rest); box-shadow:none; opacity:1; transform:scale(.94); } 13%,78% { background:var(--logo-flash); box-shadow:0 0 9px rgba(23,143,131,.24); opacity:1; transform:scale(1); } 89%,100% { background:var(--logo-rest); box-shadow:none; opacity:1; transform:scale(.94); } } #desktop-today .activity { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid #f0eef4; font-size:14px; } #desktop-today .activity:last-child { border-bottom:0; } #desktop-today .activity small { color:#948ea0; } #desktop-today .recommend { display:flex; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid #f0eef4; } #desktop-today .recommend:last-child { border-bottom:0; } #desktop-today .recommend b { display:block; font-size:14px; } #desktop-today .recommend span { color:#918a9c; font-size:12px; } .agent-quick-tools { display:flex; flex-wrap:wrap; gap:6px; padding:10px 0 2px; border-top:1px solid #28282f; } .agent-quick-tools button { flex:1 1 auto; min-height:30px; padding:5px 7px; border:1px solid #303038; border-radius:3px; background:#17171c; color:#aaa6b1; cursor:pointer; font-size:11px; } .agent-attach-button { flex:1 1 auto; min-height:30px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; padding:5px 7px; border:1px solid #303038; border-radius:3px; background:#17171c; color:#aaa6b1; cursor:pointer; font-size:11px; } .agent-attach-button input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } .context-chat-dropzone { position:relative; outline:1px dashed transparent; outline-offset:-8px; transition:outline-color .15s ease,background .15s ease; } .context-chat-dropzone.drag-active { outline-color:#35d6c5; background:#10201e; } #desktop-contextbar.agent-drag-active { box-shadow:inset 0 0 0 2px #35d6c5; } .context-drop-hint { position:absolute; inset:12px; z-index:4; display:none; place-items:center; border:1px dashed #35d6c5; background:rgba(13,13,16,.94); color:#35d6c5; font-size:14px; pointer-events:none; } .context-chat-dropzone.drag-active .context-drop-hint { display:grid; } .agent-command-hints { display:flex; gap:6px; padding:8px 0; overflow-x:auto; scrollbar-width:none; } .agent-command-hints::-webkit-scrollbar { display:none; } .agent-command-hints button { flex:0 0 auto; padding:6px 8px; border:1px solid #28282f; border-radius:3px; background:transparent; color:#777380; font-size:10px; cursor:pointer; } .agent-command-hints button:hover { border-color:#267a70; color:#35d6c5; } .agent-composer-help { padding:6px 0 10px; color:#5f5b66; font-size:10px; } #desktop-contextbar .context-chat-send.is-running { border-color:#6f3d45; background:#6f3d45; font-size:14px; } .agent-tools-panel { overflow-y:auto; padding:22px 0; } .agent-tools-panel h3 { margin:0 0 8px; color:#ecebf0; font-size:16px; } .agent-tools-panel p { margin:0 0 20px; color:#85818e; font-size:13px; line-height:1.7; } .agent-memory-card { margin-bottom:18px; padding:13px; border:1px solid #2b2b33; border-left:2px solid #267a70; background:#111115; } .agent-memory-card strong { display:block; margin-bottom:8px; color:#d8d5dd; font-size:12px; } .agent-memory-text { color:#8d8995; font-size:12px; line-height:1.75; white-space:pre-line; } .agent-memory-card button { margin-top:10px; padding:5px 0; border:0; background:transparent; color:#6f6b77; font-size:11px; cursor:pointer; } .agent-memory-card button:hover { color:#35d6c5; } .agent-tools-panel > button { display:block; width:100%; margin-bottom:9px; padding:12px; border:1px solid #303038; border-radius:4px; background:#17171c; color:#d8d5dd; text-align:left; cursor:pointer; } .agent-tools-panel > button:hover { border-color:#267a70; color:#35d6c5; } .agent-tools-panel small { display:block; margin-top:15px; color:#6f6b77; line-height:1.6; } .agent-modal { position:fixed; inset:0; z-index:300; display:grid; place-items:center; } .agent-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.68); } .agent-modal-dialog { position:relative; width:min(520px,calc(100vw - 40px)); max-height:calc(100vh - 60px); overflow-y:auto; box-sizing:border-box; border:1px solid #303038; border-radius:6px; background:#15151a; color:#ecebf0; box-shadow:0 24px 80px rgba(0,0,0,.45); } .agent-modal-dialog header { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid #292930; } .agent-modal-dialog h2 { margin:0; font-size:18px; } .agent-modal-dialog header button { width:32px; height:32px; border:0; background:transparent; color:#8d8995; font-size:24px; cursor:pointer; } .agent-modal-dialog form { padding:20px 22px; } .agent-modal-dialog label { display:block; margin-bottom:16px; color:#aaa6b1; font-size:13px; } .agent-modal-dialog input, .agent-modal-dialog textarea, .agent-modal-dialog select { display:block; width:100%; box-sizing:border-box; margin-top:7px; padding:11px 12px; border:1px solid #303038; border-radius:4px; background:#0d0d10; color:#ecebf0; font:inherit; } .agent-modal-dialog textarea { min-height:92px; resize:vertical; } .agent-modal-note, .agent-modal-status { color:#85818e; font-size:12px; line-height:1.65; } .agent-modal-status { min-height:20px; color:#35d6c5; } .agent-modal-dialog footer { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; } .agent-modal-dialog footer button { padding:10px 18px; border:1px solid #303038; border-radius:4px; background:transparent; color:#aaa6b1; cursor:pointer; } .agent-modal-dialog footer button[type="submit"] { border-color:#178f83; background:#178f83; color:#fff; } body.desktop-light .agent-modal-dialog { background:#fff; color:#25222b; border-color:#d6dbe2; } body.desktop-light .agent-modal-dialog input, body.desktop-light .agent-modal-dialog textarea { background:#f6f7f9; color:#25222b; border-color:#cfd5dd; } @media (max-width:1500px) { #desktop-today .streak-card,#desktop-today .record-card,#desktop-today .record-card:nth-of-type(3),#desktop-today .record-card:nth-of-type(4) { grid-column:span 12; } } @media (prefers-reduced-motion:reduce) { #desktop-today .heatmap .logo-pixel { animation:none; background:#35d6c5; } body.desktop-light #desktop-today .heatmap .logo-pixel { background:#178f83; } } #desktop-checkin { position:fixed; inset:0 var(--desktop-right-width) 0 var(--desktop-left-width); z-index:81; overflow-y:auto; box-sizing:border-box; background:#0d0d10; color:#ecebf0; } body.desktop-nav-collapsed #desktop-checkin { left:0; } body.context-collapsed #desktop-checkin { right:0; } #desktop-checkin * { box-sizing:border-box; letter-spacing:0; } #desktop-checkin button { font:inherit; } #desktop-checkin .checkin-shell { width:min(1180px,calc(100% - 64px)); margin:0 auto; padding:42px 0 64px; } #desktop-checkin .checkin-header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:26px; } #desktop-checkin .checkin-header > div:first-child { display:flex; align-items:flex-start; gap:16px; } #desktop-checkin .checkin-back { width:36px; height:36px; padding:0; border:1px solid #303038; border-radius:4px; background:transparent; color:#aaa6b1; cursor:pointer; } #desktop-checkin .checkin-eyebrow { display:block; margin-bottom:5px; color:#35d6c5; font-size:10px; font-weight:700; } #desktop-checkin h1,#desktop-checkin h2,#desktop-checkin p { margin:0; } #desktop-checkin h1 { font-size:26px; line-height:1.2; } #desktop-checkin .checkin-header p { margin-top:7px; color:#777380; font-size:13px; } #desktop-checkin .checkin-month-nav { display:flex; align-items:center; gap:14px; } #desktop-checkin .checkin-month-nav button { width:30px; height:30px; border:1px solid #292930; border-radius:4px; background:transparent; color:#5f5b66; } #desktop-checkin .checkin-month-nav strong { min-width:112px; color:#c9c6d0; text-align:center; font-size:13px; } #desktop-checkin .checkin-hero { display:flex; align-items:center; justify-content:space-between; gap:32px; min-height:154px; padding:28px 30px; border:1px solid #285b55; border-left:3px solid #35d6c5; border-radius:6px; background:#111916; } #desktop-checkin .checkin-state { display:flex; align-items:center; gap:22px; } #desktop-checkin .checkin-mark { width:64px; height:64px; flex:0 0 auto; display:grid; place-items:center; border:1px solid #267a70; border-radius:50%; color:#35d6c5; font-size:23px; font-weight:700; } #desktop-checkin .checkin-state span { color:#35d6c5; font-size:10px; font-weight:700; } #desktop-checkin .checkin-state h2 { margin-top:6px; font-size:22px; } #desktop-checkin .checkin-state p { margin-top:8px; color:#8d8995; font-size:13px; } #desktop-checkin .checkin-primary { min-width:192px; height:64px; display:flex; align-items:center; gap:13px; padding:0 20px; border:1px solid #35d6c5; border-radius:4px; background:#35d6c5; color:#08110f; text-align:left; cursor:pointer; } #desktop-checkin .checkin-primary b { font-size:24px; line-height:1; } #desktop-checkin .checkin-primary span { font-weight:700; font-size:15px; } #desktop-checkin .checkin-primary small { display:block; margin-top:3px; font-size:10px; font-weight:500; opacity:.7; } #desktop-checkin .checkin-primary.is-done { border-color:#2b4c47; background:#1c302c; color:#82cfc5; cursor:default; } #desktop-checkin .checkin-stats { display:grid; grid-template-columns:repeat(3,1fr); margin:16px 0; overflow:hidden; border:1px solid #292930; border-radius:6px; background:#15151a; } #desktop-checkin .checkin-stats > div { padding:18px 24px; border-right:1px solid #292930; } #desktop-checkin .checkin-stats > div:last-child { border-right:0; } #desktop-checkin .checkin-stats span,#desktop-checkin .checkin-stats i { display:block; color:#777380; font-size:11px; font-style:normal; } #desktop-checkin .checkin-stats strong { display:block; margin:6px 0 3px; color:#ecebf0; font-size:26px; } #desktop-checkin .checkin-stats strong small { color:#8d8995; font-size:12px; } #desktop-checkin .checkin-content { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(260px,.8fr); gap:16px; } #desktop-checkin .checkin-calendar,#desktop-checkin .checkin-log { padding:24px; border:1px solid #292930; border-radius:6px; background:#15151a; } #desktop-checkin .checkin-section-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; } #desktop-checkin .checkin-section-head h2 { font-size:16px; } #desktop-checkin .checkin-legend { display:flex; align-items:center; gap:7px; color:#777380; font-size:10px; } #desktop-checkin .checkin-legend i,#desktop-checkin .checkin-legend b { width:9px; height:9px; display:inline-block; border-radius:2px; background:#267a70; } #desktop-checkin .checkin-legend b { margin-left:6px; border:1px solid #35d6c5; background:transparent; } #desktop-checkin .checkin-weekdays,#desktop-checkin .checkin-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; } #desktop-checkin .checkin-weekdays { margin-bottom:7px; color:#6f6b77; font-size:10px; text-align:center; } #desktop-checkin .checkin-day { position:relative; height:54px; display:flex; align-items:flex-start; justify-content:space-between; padding:9px 10px; border:1px solid #24242b; border-radius:3px; background:#111115; color:#777380; font-size:12px; } #desktop-checkin .checkin-day.is-empty { border-color:transparent; background:transparent; } #desktop-checkin .checkin-day.is-checked { border-color:#27423e; background:#182522; color:#d6f6f2; } #desktop-checkin .checkin-day.is-today { border-color:#35d6c5; color:#35d6c5; } #desktop-checkin .checkin-day i { align-self:flex-end; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:#267a70; color:#d6fffa; font-size:10px; font-style:normal; } #desktop-checkin .checkin-section-head button { border:0; background:transparent; color:#35d6c5; cursor:pointer; font-size:11px; } #desktop-checkin .checkin-log-list article { display:grid; grid-template-columns:38px minmax(0,1fr) 20px; gap:11px; align-items:center; padding:14px 0; border-bottom:1px solid #24242b; } #desktop-checkin .checkin-log-list time { color:#777380; font-size:11px; } #desktop-checkin .checkin-log-list strong,#desktop-checkin .checkin-log-list span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #desktop-checkin .checkin-log-list strong { color:#d8d5dd; font-size:12px; } #desktop-checkin .checkin-log-list span { margin-top:4px; color:#6f6b77; font-size:10px; } #desktop-checkin .checkin-log-list article > i { color:#35d6c5; font-style:normal; } #desktop-checkin .checkin-empty { padding:42px 0; text-align:center; } #desktop-checkin .checkin-empty strong,#desktop-checkin .checkin-empty span { display:block; } #desktop-checkin .checkin-empty span { margin-top:8px; color:#777380; font-size:11px; } #desktop-checkin .checkin-tip { margin-top:20px; padding:14px; border-left:2px solid #267a70; background:#111916; } #desktop-checkin .checkin-tip span { color:#35d6c5; font-size:10px; } #desktop-checkin .checkin-tip p { margin-top:6px; color:#8d8995; font-size:11px; line-height:1.6; } body.desktop-light #desktop-checkin { background:#edf1f6; color:#252a31; } body.desktop-light #desktop-checkin .checkin-hero { background:#edf9f6; border-color:#b8dcd6; } body.desktop-light #desktop-checkin .checkin-stats,body.desktop-light #desktop-checkin .checkin-calendar,body.desktop-light #desktop-checkin .checkin-log { background:#fff; border-color:#d9dee5; } body.desktop-light #desktop-checkin .checkin-stats > div { border-color:#d9dee5; } body.desktop-light #desktop-checkin .checkin-stats strong,body.desktop-light #desktop-checkin h1,body.desktop-light #desktop-checkin h2 { color:#252a31; } body.desktop-light #desktop-checkin .checkin-day { background:#f6f8fa; border-color:#e5e8ed; color:#68707a; } body.desktop-light #desktop-checkin .checkin-day.is-checked { background:#e6f4f1; border-color:#b9ddd7; color:#176f66; } @media (max-width:1250px) { #desktop-checkin .checkin-shell { width:calc(100% - 40px); } #desktop-checkin .checkin-content { grid-template-columns:1fr; } } body:not(.route-qa):not(.route-grade) #app .glass-card, body:not(.route-qa):not(.route-grade) #app .glass-card-frosted { max-width: 1280px; margin-left: auto; margin-right: auto; } /* The compiled mobile pages use small utility labels. Increase their desktop reading size without touching mobile. */ #app { font-size:16px; line-height:1.65; } #app .text-xs { font-size:.875rem !important; line-height:1.55 !important; } #app .text-sm { font-size:1rem !important; line-height:1.65 !important; } #app .text-base { font-size:1.0625rem !important; line-height:1.7 !important; } #app .text-lg { font-size:1.125rem !important; line-height:1.6 !important; } #app .text-xl { font-size:1.25rem !important; line-height:1.5 !important; } #app .text-2xl { font-size:1.5rem !important; line-height:1.4 !important; } #app .text-3xl { font-size:1.75rem !important; line-height:1.35 !important; } #app .text-5xl { font-size:2.25rem !important; line-height:1.2 !important; } #app .leading-relaxed, #app .whitespace-pre-wrap { font-size:1.0625rem !important; line-height:1.75 !important; } /* Keep the two long-form workflows scannable on a desktop monitor. */ #app .min-h-screen.px-6.pt-8.pb-8 { max-width: 1440px; margin: 0 auto; padding-left: 2rem; padding-right: 2rem; } body:not(.route-qa):not(.route-grade) #app .min-h-screen.px-6.pt-8.pb-8 > .glass-card { max-width: none; } #app .min-h-screen.px-5.py-8 { max-width: 1440px; margin: 0 auto; padding-left: 2rem; padding-right: 2rem; } body:not(.route-qa):not(.route-grade) #app .min-h-screen.px-5.py-8 > .glass-card { max-width: none; } #app .grid-cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #app textarea { font-size: 1rem; line-height: 1.65; } #app button { font-size: 0.95rem; } body:not(.route-qa):not(.route-grade) #app .glass-card, body:not(.route-qa):not(.route-grade) #app .glass-card-frosted, body:not(.route-qa):not(.route-grade) #app .rounded-xl, body:not(.route-qa):not(.route-grade) #app .rounded-2xl { border-radius:6px !important; } #app button.rounded-full, #app taro-button-core.rounded-full { border-radius:4px !important; } #app .glass-input, #app .glass-input-active, #app input, #app textarea, #app taro-input-core, #app taro-textarea-core { border-radius:4px !important; } #app taro-button-core, #app button { border-radius:4px !important; } body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app [style*="linear-gradient"] { background:#15151a !important; background-image:none !important; box-shadow:none !important; } body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app button[style*="linear-gradient"], body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app taro-button-core[style*="linear-gradient"] { background:#178f83 !important; color:#fff !important; } body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app [style*="background-clip: text"], body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app [style*="background-clip:text"], body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app [style*="-webkit-background-clip: text"], body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app [style*="-webkit-background-clip:text"] { background:none !important; background-image:none !important; color:#35d6c5 !important; -webkit-text-fill-color:#35d6c5 !important; } body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app [style*="height: 3px"][style*="linear-gradient"], body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app [style*="height:3px"][style*="linear-gradient"], body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app [style*="height: 4px"][style*="linear-gradient"], body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app [style*="height:4px"][style*="linear-gradient"] { background:#35d6c5 !important; } body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app [style*="#7B6CF6"], body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app [style*="#C17AF4"], body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app [style*="#A77BF4"] { background:#173c38 !important; color:#35d6c5 !important; border-color:#24665f !important; box-shadow:none !important; } body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app button[style*="#7B6CF6"], body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app button[style*="#C17AF4"], body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app button[style*="#A77BF4"] { background:#178f83 !important; color:#fff !important; } body.desktop-dark:not(.route-auth):not(.route-admin):not(.route-qa):not(.route-grade) #app [style*="font-size: 10px"], body.desktop-dark:not(.route-auth):not(.route-admin):not(.route-qa):not(.route-grade) #app [style*="font-size:10px"] { font-size:12px !important; line-height:1.5 !important; } body.desktop-dark:not(.route-auth):not(.route-admin):not(.route-qa):not(.route-grade) #app [style*="font-size: 11px"], body.desktop-dark:not(.route-auth):not(.route-admin):not(.route-qa):not(.route-grade) #app [style*="font-size:11px"] { font-size:13px !important; line-height:1.55 !important; } body.desktop-dark:not(.route-auth):not(.route-admin):not(.route-qa):not(.route-grade) #app [style*="font-size: 12px"], body.desktop-dark:not(.route-auth):not(.route-admin):not(.route-qa):not(.route-grade) #app [style*="font-size:12px"] { font-size:14px !important; line-height:1.6 !important; } body.desktop-dark:not(.route-auth):not(.route-admin):not(.route-qa):not(.route-grade) #app [style*="font-size: 13px"], body.desktop-dark:not(.route-auth):not(.route-admin):not(.route-qa):not(.route-grade) #app [style*="font-size:13px"] { font-size:15px !important; line-height:1.65 !important; } body.route-learning #app .min-h-screen { width:100%; max-width:1120px; margin:0 auto; padding-left:32px !important; padding-right:32px !important; } body.route-learning #app .desktop-section-heading { display:block; margin-top:26px !important; margin-bottom:14px !important; color:#ecebf0 !important; font-size:18px !important; font-weight:650 !important; line-height:1.4 !important; } body.route-learning:not(.route-qa):not(.route-grade) #app .glass-card, body.route-learning:not(.route-qa):not(.route-grade) #app .glass-card-frosted { border-color:#292930 !important; background:#141418 !important; } body.route-learning #app [class*="border-b"], body.route-learning #app [style*="border-bottom"] { border-color:#292930 !important; } body.route-learning.desktop-light #app .desktop-section-heading { color:#252a31 !important; } body.route-learning.desktop-light:not(.route-qa):not(.route-grade) #app .glass-card, body.route-learning.desktop-light:not(.route-qa):not(.route-grade) #app .glass-card-frosted { background:rgba(255,255,255,.62) !important; border-color:rgba(205,212,221,.86) !important; } body.route-admin #app { padding-right:28px; } body.route-admin #app .min-h-screen { width:100%; max-width:1500px; margin:0 auto; padding-left:28px !important; padding-right:28px !important; box-sizing:border-box; } body.route-admin #app [style*="font-size: 10px"], body.route-admin #app [style*="font-size:10px"] { font-size:11px !important; line-height:1.45 !important; } body.route-admin #app [style*="font-size: 11px"], body.route-admin #app [style*="font-size:11px"] { font-size:12px !important; line-height:1.5 !important; } body.route-admin #app [style*="font-size: 12px"], body.route-admin #app [style*="font-size:12px"] { font-size:13px !important; line-height:1.5 !important; } body.route-admin #app [style*="font-size: 13px"], body.route-admin #app [style*="font-size:13px"] { font-size:14px !important; line-height:1.5 !important; } body.route-admin #app [style*="font-size: 14px"], body.route-admin #app [style*="font-size:14px"] { font-size:14px !important; line-height:1.5 !important; } body.route-admin #app [style*="font-size: 15px"], body.route-admin #app [style*="font-size:15px"] { font-size:15px !important; line-height:1.5 !important; } body.route-admin #app button, body.route-admin #app taro-button-core, body.route-admin #app input, body.route-admin #app textarea, body.route-admin #app select { min-height:34px; font-size:13px !important; box-sizing:border-box; } body.route-admin.desktop-dark #app [style*="linear-gradient"] { background:#17171c !important; background-image:none !important; box-shadow:none !important; } body.route-admin.desktop-dark #app, body.route-admin.desktop-dark #app .taro_page, body.route-admin.desktop-dark #app .taro_page_show, body.route-admin.desktop-dark #app taro-page-core, body.route-admin.desktop-dark #app page, body.route-admin.desktop-dark #app .min-h-screen { background:#09090b !important; background-image:none !important; color:#ecebf0 !important; } body.route-admin.desktop-dark #app .bg-white, body.route-admin.desktop-dark #app .bg-card, body.route-admin.desktop-dark:not(.route-qa):not(.route-grade) #app .glass-card, body.route-admin.desktop-dark:not(.route-qa):not(.route-grade) #app .glass-card-frosted, body.route-admin.desktop-dark:not(.route-qa):not(.route-grade) #app .rounded-xl, body.route-admin.desktop-dark:not(.route-qa):not(.route-grade) #app .rounded-2xl, body.route-admin.desktop-dark #app [style*="background: #fff"], body.route-admin.desktop-dark #app [style*="background:#fff"], body.route-admin.desktop-dark #app [style*="background: #FFF"], body.route-admin.desktop-dark #app [style*="background:#FFF"], body.route-admin.desktop-dark #app [style*="background: rgb(255, 255, 255)"], body.route-admin.desktop-dark #app [style*="background:rgba(255,255,255"], body.route-admin.desktop-dark #app [style*="background: rgba(255,255,255"] { background-color:#111114 !important; background-image:none !important; border-color:#292930 !important; box-shadow:none !important; } body.route-admin.desktop-dark #app input, body.route-admin.desktop-dark #app textarea, body.route-admin.desktop-dark #app select, body.route-admin.desktop-dark #app taro-input-core, body.route-admin.desktop-dark #app taro-textarea-core { background:#0c0c0f !important; border-color:#34343c !important; color:#ecebf0 !important; } body.route-admin.desktop-dark #app input::placeholder, body.route-admin.desktop-dark #app textarea::placeholder { color:#777380 !important; } body.route-admin.desktop-dark #app table { width:100%; border-collapse:collapse; color:#d8d5dd; } body.route-admin.desktop-dark #app th, body.route-admin.desktop-dark #app td { border-color:#292930 !important; } body.route-admin.desktop-dark #app .overflow-x-auto { max-width:100%; overflow-x:auto !important; } body.route-admin.desktop-light #app [style*="linear-gradient"] { background:rgba(255,255,255,.62) !important; background-image:none !important; box-shadow:none !important; } body.route-admin #app [style*="background-clip: text"] { background:none !important; color:#35d6c5 !important; -webkit-text-fill-color:#35d6c5 !important; } body.route-admin.desktop-light #app [style*="background-clip: text"] { color:#178f83 !important; -webkit-text-fill-color:#178f83 !important; } body.route-admin #app [style*="#D94070"], body.route-admin #app [style*="#7B6CF6"], body.route-admin #app [style*="#C17AF4"], body.route-admin #app [style*="#A77BF4"] { color:#35d6c5 !important; } body.route-admin.desktop-light #app [style*="#D94070"], body.route-admin.desktop-light #app [style*="#7B6CF6"], body.route-admin.desktop-light #app [style*="#C17AF4"], body.route-admin.desktop-light #app [style*="#A77BF4"] { color:#178f83 !important; } body.route-admin #app .desktop-legacy-topbar, body.route-learning #app .desktop-legacy-topbar, body.route-high-score-library #app .desktop-legacy-topbar, body.route-exams #app .desktop-legacy-topbar, body.route-tool-page #app .desktop-legacy-topbar, body.route-qa-RETIRED #app .desktop-legacy-topbar, body.route-grade-RETIRED #app .desktop-legacy-topbar { display:none !important; } body.route-admin #app .admin-people-summary { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; margin-top:8px; color:#8d929b; } body.route-admin #app .admin-people-summary strong { color:#35d6c5 !important; font-size:22px !important; line-height:1 !important; } body.route-admin #app .admin-people-summary span { color:#c7c9ce !important; font-size:14px !important; } body.route-admin #app .admin-people-summary small { flex-basis:100%; color:#777c85 !important; font-size:12px !important; } body.route-admin.desktop-light #app .admin-people-summary strong { color:#178f83 !important; } body.route-admin.desktop-light #app .admin-people-summary span { color:#34383f !important; } #desktop-admin-operations { max-width:1120px; margin:0 auto 18px; padding:18px 20px; border:1px solid #2c3037; background:#15191e; color:#e9edf0; } #desktop-admin-operations header,.admin-ops-section-title { display:flex; align-items:center; justify-content:space-between; gap:16px; } #desktop-admin-operations header > div > span { color:#35d6c5; font-size:10px; }.admin-ops-section-title span { display:block; margin-top:4px; color:#858e98; font-size:11px; } #desktop-admin-operations h2 { margin:5px 0 0; font-size:20px; }.admin-ops-section-title strong { font-size:14px; } #desktop-admin-operations header > a { color:#35d6c5; font-size:12px; text-decoration:none; } #desktop-admin-operations nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:18px; } #desktop-admin-operations nav a { display:block; padding:11px 12px; border:1px solid #2d343d; background:#11151a; color:#dce3e7; text-decoration:none; } #desktop-admin-operations nav a.active,#desktop-admin-operations nav a:hover { border-color:#35d6c5; background:#152826; }.admin-ops-permissions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:16px 0; padding:13px 0; border-top:1px solid #2a3037; border-bottom:1px solid #2a3037; } .admin-ops-permissions b,.admin-ops-permissions span { display:block; }.admin-ops-permissions b { color:#e9edf0; font-size:12px; }.admin-ops-permissions span { margin-top:5px; color:#89939d; font-size:10px; line-height:1.5; } .admin-ops-tokens { padding-top:2px; }.admin-ops-section-title button { padding:6px 10px; border:1px solid #365e59; background:transparent; color:#35d6c5; font-size:11px; cursor:pointer; } .admin-ops-loading,.admin-ops-error,.admin-ops-token-empty { margin:14px 0 0; padding:14px; background:#101419; color:#89939d; font-size:12px; }.admin-ops-error { color:#edaa9f; }.admin-ops-token-empty strong,.admin-ops-token-empty span { display:block; }.admin-ops-token-empty strong { color:#dce6e5; margin-bottom:5px; }.admin-ops-token-empty span { line-height:1.55; } .admin-ops-token-total { display:flex; align-items:baseline; gap:8px; margin-top:14px; }.admin-ops-token-total strong { color:#35d6c5; font-size:25px; }.admin-ops-token-total span { color:#89939d; font-size:11px; } .admin-ops-token-table { margin-top:10px; border-top:1px solid #2b3138; }.admin-ops-token-row { display:grid; grid-template-columns:minmax(120px,1.5fr) repeat(3,minmax(70px,1fr)) minmax(90px,1fr); gap:10px; align-items:center; padding:9px 4px; border-bottom:1px solid #262c33; color:#aeb8c1; font-size:11px; }.admin-ops-token-row strong { overflow:hidden; color:#e2e8eb; text-overflow:ellipsis; white-space:nowrap; }.admin-ops-token-row b { color:#35d6c5; }.admin-ops-token-row time { color:#7e8994; }.admin-ops-token-head { color:#76818b; font-size:10px; } body.desktop-light.route-admin #desktop-admin-operations { border-color:#d9e1e9; background:rgba(255,255,255,.8); color:#27313a; } body.desktop-light.route-admin #desktop-admin-operations nav a,body.desktop-light.route-admin .admin-ops-loading,body.desktop-light.route-admin .admin-ops-token-empty { border-color:#dce5ec; background:rgba(247,250,252,.9); color:#647384; } body.desktop-light.route-admin #desktop-admin-operations nav a { color:#34414c; } body.desktop-light.route-admin .admin-ops-permissions b,body.desktop-light.route-admin .admin-ops-token-empty strong,body.desktop-light.route-admin .admin-ops-token-row strong { color:#283640; } body.desktop-light.route-admin .admin-ops-permissions,body.desktop-light.route-admin .admin-ops-token-table,body.desktop-light.route-admin .admin-ops-token-row { border-color:#e1e7ed; } @media (max-width:760px) { #desktop-admin-operations nav,.admin-ops-permissions { grid-template-columns:1fr; }.admin-ops-token-row { grid-template-columns:minmax(90px,1fr) repeat(3,minmax(52px,auto)); }.admin-ops-token-row time { display:none; } } /* Dense, low-layer desktop presentation aligned with the dashboard reference. */ body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app, body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app .taro_page, body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app .taro_page_show, body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app .taro-tabbar__panel, body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app taro-page-core, body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app .min-h-screen { background:#09090b !important; background-image:none !important; } body.route-has-context #app { padding-left:calc(var(--desktop-left-width) + 28px); padding-right:28px; } #app { font-size:14px; line-height:1.55; } #app .text-xs { font-size:11px !important; line-height:1.45 !important; } #app .text-sm { font-size:13px !important; line-height:1.5 !important; } #app .text-base { font-size:14px !important; line-height:1.55 !important; } #app .text-lg { font-size:15px !important; line-height:1.5 !important; } #app .text-xl { font-size:17px !important; line-height:1.45 !important; } #app .text-2xl { font-size:20px !important; line-height:1.35 !important; } #app .text-3xl { font-size:24px !important; line-height:1.3 !important; } #app .text-5xl { font-size:32px !important; line-height:1.15 !important; } #app .leading-relaxed, #app .whitespace-pre-wrap { font-size:14px !important; line-height:1.65 !important; } #app textarea { font-size:14px; line-height:1.6; } #app button, #app taro-button-core { font-size:13px; } body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app .min-h-screen > .glass-card, body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app .min-h-screen > .glass-card-frosted, body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app .min-h-screen > taro-view-core > .glass-card, body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app .min-h-screen > taro-view-core > .glass-card-frosted { max-width:1120px; background:transparent !important; border-color:transparent !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app .glass-card, body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app .glass-card-frosted, body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app .rounded-xl, body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app .rounded-2xl { background:#111114 !important; border-color:#25252b !important; box-shadow:none !important; } body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app input, body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app textarea, body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app taro-input-core, body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app taro-textarea-core { min-height:34px; background:#0c0c0f !important; border-color:#303038 !important; } body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app button, body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app taro-button-core { min-height:34px; box-shadow:none !important; } body.desktop-dark:not(.route-auth):not(.route-admin):not(.route-qa):not(.route-grade) #app [style*="font-size: 10px"], body.desktop-dark:not(.route-auth):not(.route-admin):not(.route-qa):not(.route-grade) #app [style*="font-size:10px"] { font-size:11px !important; line-height:1.4 !important; } body.desktop-dark:not(.route-auth):not(.route-admin):not(.route-qa):not(.route-grade) #app [style*="font-size: 11px"], body.desktop-dark:not(.route-auth):not(.route-admin):not(.route-qa):not(.route-grade) #app [style*="font-size:11px"] { font-size:12px !important; line-height:1.45 !important; } body.desktop-dark:not(.route-auth):not(.route-admin):not(.route-qa):not(.route-grade) #app [style*="font-size: 12px"], body.desktop-dark:not(.route-auth):not(.route-admin):not(.route-qa):not(.route-grade) #app [style*="font-size:12px"] { font-size:13px !important; line-height:1.5 !important; } body.desktop-dark:not(.route-auth):not(.route-admin):not(.route-qa):not(.route-grade) #app [style*="font-size: 13px"], body.desktop-dark:not(.route-auth):not(.route-admin):not(.route-qa):not(.route-grade) #app [style*="font-size:13px"] { font-size:14px !important; line-height:1.55 !important; } #desktop-contextbar { padding:22px 18px 0; } #desktop-contextbar .assistant-head { padding-bottom:16px; } #desktop-contextbar .assistant-name { font-size:14px; } #desktop-contextbar .context-message { padding:10px; } #desktop-contextbar .context-message-text { font-size:13px; line-height:1.6; } #desktop-contextbar .context-tab { padding:13px 4px; font-size:13px; } #desktop-contextbar textarea { padding:10px; font-size:13px; } .desktop-nav-footer { padding:16px 20px 18px; } .desktop-nav-user { font-size:13px; } } /* Auth page follows the homepage header and its school-distribution map. */ @media (min-width:981px) { html body.route-auth #app .desktop-auth-homebar { top:0 !important; left:0 !important; right:0 !important; min-height:74px !important; padding:0 46px !important; background:rgba(9,12,16,.9) !important; border-bottom:1px solid rgba(126,159,161,.12) !important; } html body.route-auth #app .desktop-auth-homebar-brand { gap:15px !important; color:#effaf8 !important; } html body.route-auth #app .desktop-auth-homebar-mark { display:none !important; } html body.route-auth #app .desktop-auth-homebar-wordmark { display:inline-flex !important; align-items:center !important; gap:8px !important; font-size:18px !important; letter-spacing:.03em !important; } html body.route-auth #app .desktop-auth-homebar-wordmark b { color:#57dfd1 !important; font-size:18px !important; } html body.route-auth #app .desktop-auth-homebar-wordmark i { color:#839091 !important; font-style:normal !important; } html body.route-auth #app .desktop-auth-homebar-wordmark strong { color:#f0f8f7 !important; font-size:18px !important; letter-spacing:.01em !important; } html body.route-auth #app .desktop-auth-homebar-brand > em { padding-left:15px !important; border-left:1px solid rgba(125,157,159,.28) !important; color:#9baaaa !important; font-size:10px !important; font-style:normal !important; letter-spacing:.02em !important; } html body.route-auth #app .desktop-auth-homebar-actions { gap:20px !important; } html body.route-auth #app .desktop-auth-homebar-actions button { min-width:0 !important; height:34px !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:#aab8b8 !important; font-size:12px !important; box-shadow:none !important; } html body.route-auth #app .desktop-auth-homebar-actions button:last-child { padding:0 13px !important; border:1px solid rgba(83,222,209,.66) !important; border-radius:999px !important; color:#dffcf7 !important; } html body.route-auth #app .desktop-auth-homebar-actions button.is-active { border-color:rgba(83,222,209,.66) !important; background:rgba(53,214,197,.12) !important; color:#effffd !important; } html body.route-auth #app #desktop-auth-stage { min-height:465px !important; } html body.route-auth #app .desktop-auth-mosaic { display:none !important; } html body.route-auth #app .desktop-auth-home-map { position:absolute !important; z-index:0 !important; top:50% !important; right:-8vw !important; width:min(52vw,670px) !important; opacity:.84 !important; transform:translateY(-50%) !important; filter:drop-shadow(0 0 20px rgba(53,214,197,.14)) !important; } html body.route-auth #app .auth-map-shape { fill:rgba(224,245,243,.055) !important; stroke:rgba(153,210,205,.46) !important; stroke-width:2 !important; } html body.route-auth #app .auth-map-lines { fill:none !important; stroke:rgba(53,214,197,.72) !important; stroke-width:1.4 !important; stroke-dasharray:6 8 !important; } html body.route-auth #app .auth-map-nodes circle { fill:#66f1de !important; stroke:#e9fffc !important; stroke-width:1.2 !important; } } /* Auth bilingual composition final owner. */ @media (min-width:981px) { html body.route-auth #app .min-h-screen.desktop-auth-page, html body.route-auth #app .min-h-screen { grid-template-columns:minmax(0,1fr) minmax(370px,430px) !important; gap:clamp(70px,9vw,158px) !important; } html body.route-auth #app #desktop-auth-stage { min-height:420px !important; } html body.route-auth #app .desktop-auth-stage-copy { padding-left:3px !important; } html body.route-auth #app .desktop-auth-public-beta { display:inline-flex !important; align-items:center !important; gap:8px !important; margin:0 0 20px !important; color:#ff9b8b !important; font:700 10px/1 "IBM Plex Mono",Menlo,monospace !important; letter-spacing:.13em !important; } html body.route-auth #app .desktop-auth-public-beta::before { width:28px !important; height:2px !important; background:#5c8dff !important; content:"" !important; } html body.route-auth #app .desktop-auth-public-beta b { color:#70ebdd !important; font-family:"PingFang SC",sans-serif !important; font-size:11px !important; letter-spacing:0 !important; } html body.route-auth #app .desktop-auth-stage-copy h1, html body.route-auth #app .desktop-auth-stage-copy [data-auth-stage-title] { margin:0 !important; color:#f4fbfa !important; font-size:clamp(42px,4.2vw,64px) !important; letter-spacing:.045em !important; } html body.route-auth #app .desktop-auth-stage-copy h1 i, html body.route-auth #app .desktop-auth-stage-copy [data-auth-stage-title] i { color:#63e8d9 !important; } html body.route-auth #app .desktop-auth-cn-title { margin-top:15px !important; color:#c2d5d5 !important; font-family:"PingFang SC","Hiragino Sans GB",sans-serif !important; font-size:19px !important; font-weight:500 !important; letter-spacing:.12em !important; } html body.route-auth #app .desktop-auth-stage-sub { display:flex !important; align-items:center !important; gap:10px !important; margin-top:22px !important; color:#809595 !important; font-size:10px !important; letter-spacing:.12em !important; } html body.route-auth #app .desktop-auth-stage-sub::before { width:5px !important; height:5px !important; border-radius:50% !important; background:#ff9b8b !important; box-shadow:0 0 12px rgba(255,155,139,.58) !important; content:"" !important; } html body.route-auth #app .desktop-auth-panel { max-width:430px !important; padding:28px 30px 30px !important; border-color:rgba(132,186,187,.22) !important; border-radius:8px !important; background:rgba(14,19,24,.86) !important; box-shadow:0 18px 60px rgba(0,0,0,.24) !important; } html body.route-auth #app .desktop-auth-panel::before { content:"CREATE YOUR ACCOUNT" !important; margin-bottom:22px !important; color:#a9f5e9 !important; font:700 10px/1 "IBM Plex Mono",Menlo,monospace !important; letter-spacing:.16em !important; } html body.route-auth #app .desktop-auth-panel .desktop-auth-mode-switch { margin:0 0 20px !important; padding:0 !important; border:0 !important; border-bottom:1px solid rgba(139,181,181,.18) !important; border-radius:0 !important; background:transparent !important; } html body.route-auth #app .desktop-auth-tab { height:38px !important; padding:0 16px !important; color:#809092 !important; font-size:12px !important; } html body.route-auth #app .desktop-auth-tab.capsule-selected, html body.route-auth #app .desktop-auth-tab[aria-pressed="true"] { border-bottom:2px solid #63e8d9 !important; background:transparent !important; color:#f0fffd !important; box-shadow:none !important; } html body.route-auth #app .desktop-auth-form-body { gap:10px !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; } html body.route-auth #app .desktop-auth-form-body > div { border-color:rgba(137,181,182,.14) !important; border-radius:5px !important; background:rgba(5,10,14,.42) !important; box-shadow:none !important; } html body.route-auth #app .desktop-auth-panel :is(input,taro-input-core) { min-height:44px !important; border-color:rgba(146,191,192,.2) !important; border-radius:5px !important; background:#0a0e12 !important; font-size:13px !important; } html body.route-auth #app .desktop-auth-panel :is(input,taro-input-core):focus { border-color:#5c8dff !important; box-shadow:0 0 0 3px rgba(92,141,255,.13) !important; } html body.route-auth #app .desktop-auth-primary { min-height:46px !important; border-radius:5px !important; background:#63e8d9 !important; color:#06201e !important; box-shadow:0 9px 24px rgba(99,232,217,.16) !important; font-size:13px !important; } } /* Registration composition: a bilingual mark and one clean form surface. */ @media (min-width:981px) { html body.route-auth #app .min-h-screen.desktop-auth-page, html body.route-auth #app .min-h-screen { grid-template-columns:minmax(0,1fr) minmax(370px,430px) !important; gap:clamp(70px,9vw,158px) !important; } html body.route-auth #app #desktop-auth-stage { min-height:420px !important; } html body.route-auth #app .desktop-auth-stage-copy { padding-left:3px !important; } html body.route-auth #app .desktop-auth-public-beta { display:inline-flex !important; align-items:center !important; gap:8px !important; margin:0 0 20px !important; color:#ff9b8b !important; font:700 10px/1 "IBM Plex Mono",Menlo,monospace !important; letter-spacing:.13em !important; } html body.route-auth #app .desktop-auth-public-beta::before { width:28px !important; height:2px !important; background:#5c8dff !important; content:"" !important; } html body.route-auth #app .desktop-auth-public-beta b { color:#70ebdd !important; font-family:"PingFang SC",sans-serif !important; font-size:11px !important; letter-spacing:0 !important; } html body.route-auth #app .desktop-auth-stage-copy h1, html body.route-auth #app .desktop-auth-stage-copy [data-auth-stage-title] { margin:0 !important; color:#f4fbfa !important; font-size:clamp(42px,4.2vw,64px) !important; letter-spacing:.045em !important; } html body.route-auth #app .desktop-auth-stage-copy h1 i, html body.route-auth #app .desktop-auth-stage-copy [data-auth-stage-title] i { color:#63e8d9 !important; } html body.route-auth #app .desktop-auth-cn-title { margin-top:15px !important; color:#c2d5d5 !important; font-family:"PingFang SC","Hiragino Sans GB",sans-serif !important; font-size:19px !important; font-weight:500 !important; letter-spacing:.12em !important; } html body.route-auth #app .desktop-auth-stage-sub { display:flex !important; align-items:center !important; gap:10px !important; margin-top:22px !important; color:#809595 !important; font-size:10px !important; letter-spacing:.12em !important; } html body.route-auth #app .desktop-auth-stage-sub::before { width:5px !important; height:5px !important; border-radius:50% !important; background:#ff9b8b !important; box-shadow:0 0 12px rgba(255,155,139,.58) !important; content:"" !important; } html body.route-auth #app .desktop-auth-panel { max-width:430px !important; padding:28px 30px 30px !important; border-color:rgba(132,186,187,.22) !important; border-radius:8px !important; background:rgba(14,19,24,.86) !important; box-shadow:0 18px 60px rgba(0,0,0,.24) !important; } html body.route-auth #app .desktop-auth-panel::before { content:"CREATE YOUR ACCOUNT" !important; margin-bottom:22px !important; color:#a9f5e9 !important; font:700 10px/1 "IBM Plex Mono",Menlo,monospace !important; letter-spacing:.16em !important; } html body.route-auth #app .desktop-auth-panel .desktop-auth-mode-switch { margin:0 0 20px !important; padding:0 !important; border:0 !important; border-bottom:1px solid rgba(139,181,181,.18) !important; border-radius:0 !important; background:transparent !important; } html body.route-auth #app .desktop-auth-tab { height:38px !important; padding:0 16px !important; color:#809092 !important; font-size:12px !important; } html body.route-auth #app .desktop-auth-tab.capsule-selected, html body.route-auth #app .desktop-auth-tab[aria-pressed="true"] { border-bottom:2px solid #63e8d9 !important; background:transparent !important; color:#f0fffd !important; box-shadow:none !important; } html body.route-auth #app .desktop-auth-form-body { gap:10px !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; } html body.route-auth #app .desktop-auth-form-body > div { border-color:rgba(137,181,182,.14) !important; border-radius:5px !important; background:rgba(5,10,14,.42) !important; box-shadow:none !important; } html body.route-auth #app .desktop-auth-panel :is(input,taro-input-core) { min-height:44px !important; border-color:rgba(146,191,192,.2) !important; border-radius:5px !important; background:#0a0e12 !important; font-size:13px !important; } html body.route-auth #app .desktop-auth-panel :is(input,taro-input-core):focus { border-color:#5c8dff !important; box-shadow:0 0 0 3px rgba(92,141,255,.13) !important; } html body.route-auth #app .desktop-auth-primary { min-height:46px !important; border-radius:5px !important; background:#63e8d9 !important; color:#06201e !important; box-shadow:0 9px 24px rgba(99,232,217,.16) !important; font-size:13px !important; } } /* Registration lockup: one clear uppercase brand, no footer ornament. */ @media (min-width:981px) { body.route-auth #desktop-studio-credit { display:none !important; } html body.route-auth #app #desktop-auth-stage .desktop-auth-stage-copy h1, html body.route-auth #app #desktop-auth-stage .desktop-auth-stage-copy [data-auth-stage-title] { max-width:none !important; margin:16px 0 11px !important; color:#eefbf8 !important; font-family:"Arial Narrow","Avenir Next Condensed","Helvetica Neue",Arial,sans-serif !important; font-size:clamp(36px,3.7vw,58px) !important; font-weight:800 !important; line-height:1 !important; letter-spacing:.035em !important; white-space:nowrap !important; } html body.route-auth #app .desktop-auth-stage-copy h1 i, html body.route-auth #app .desktop-auth-stage-copy [data-auth-stage-title] i { color:#45daca !important; font-style:normal !important; } html body.route-auth #app .desktop-auth-kicker { display:none !important; } html body.route-auth #app .desktop-auth-public-beta { margin-top:0 !important; color:#6c8585 !important; } html body.route-auth #app .desktop-auth-stage-sub { max-width:none !important; color:#79d9ce !important; font-family:"IBM Plex Mono",Menlo,monospace !important; font-size:10px !important; font-weight:600 !important; letter-spacing:.1em !important; text-transform:uppercase !important; } } /* ============================================================ AUTH GATEWAY — full-bleed asymmetric registration experience Kept at EOF: this page has legacy mobile rem rules underneath it. ============================================================ */ @media (min-width: 981px) { html body.route-auth, html body.route-auth #app, html body.route-auth #app > .taro_page { width: 100% !important; min-width: 0 !important; min-height: 100vh !important; margin: 0 !important; background: #070b10 !important; } html body.route-auth #app .min-h-screen.desktop-auth-page, html body.route-auth #app .min-h-screen { isolation: isolate !important; display: grid !important; grid-template-columns: minmax(0, 1.18fr) minmax(400px, 0.82fr) !important; grid-template-rows: minmax(0, 1fr) !important; align-items: start !important; gap: clamp(48px, 7vw, 144px) !important; width: 100% !important; max-width: none !important; min-height: 100vh !important; margin: 0 !important; padding: clamp(104px, 10vh, 132px) clamp(44px, 8vw, 154px) 68px !important; overflow-x: clip !important; overflow-y: auto !important; color: #edf8f6 !important; background: radial-gradient(ellipse 62% 74% at 18% 52%, rgba(34, 222, 197, .14), transparent 62%), radial-gradient(ellipse 42% 55% at 78% 22%, rgba(70, 112, 255, .16), transparent 69%), linear-gradient(116deg, #071015 0%, #080d13 48%, #0a0d17 100%) !important; } /* Decorative layers must not occupy grid tracks — otherwise stage/panel fall to row 2 and the first viewport looks blank. */ html body.route-auth #app #desktop-auth-ambient, html body.route-auth #app .desktop-auth-ambient { position: absolute !important; inset: 0 !important; z-index: 0 !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; overflow: hidden !important; } html body.route-auth #app #desktop-auth-homebar, html body.route-auth #app .desktop-auth-homebar { position: absolute !important; z-index: 10 !important; } html body.route-auth #app .desktop-auth-brand, html body.route-auth #app .desktop-auth-credit, html body.route-auth #app .desktop-studio-inline-credit { display: none !important; } html body.route-auth #app .min-h-screen::before, html body.route-auth #app .min-h-screen::after { position: absolute !important; z-index: -1 !important; pointer-events: none !important; content: "" !important; } html body.route-auth #app .min-h-screen::before { inset: 0 !important; opacity: .34 !important; background-image: linear-gradient(rgba(131, 247, 230, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(131, 247, 230, .055) 1px, transparent 1px) !important; background-size: 48px 48px !important; mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.48) 48%, transparent 86%) !important; } html body.route-auth #app .min-h-screen::after { width: min(52vw, 760px) !important; height: min(52vw, 760px) !important; right: -20vw !important; top: 8vh !important; border: 1px solid rgba(112, 250, 233, .13) !important; border-radius: 50% !important; box-shadow: 0 0 0 56px rgba(112,250,233,.025), 0 0 0 112px rgba(112,250,233,.018) !important; } html body.route-auth #app #desktop-auth-stage { grid-column: 1 !important; grid-row: 1 !important; position: relative !important; z-index: 2 !important; align-self: stretch !important; min-height: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; } html body.route-auth #app .desktop-auth-stage-copy { max-width: 620px !important; padding: 0 0 20px !important; } html body.route-auth #app .desktop-auth-stage-visual { inset: 50% -10vw auto auto !important; width: min(55vw, 720px) !important; transform: translateY(-50%) !important; opacity: .92 !important; } html body.route-auth #app .desktop-auth-kicker { display: flex !important; align-items: center !important; gap: 11px !important; color: #6ff3df !important; font-size: 11px !important; letter-spacing: .2em !important; } html body.route-auth #app .desktop-auth-kicker::before { width: 34px !important; height: 1px !important; background: currentColor !important; content: "" !important; } html body.route-auth #app .desktop-auth-stage-copy h1, html body.route-auth #app .desktop-auth-stage-copy [data-auth-stage-title] { max-width: 590px !important; margin: 22px 0 20px !important; color: #f5fffd !important; font-size: clamp(44px, 4.4vw, 74px) !important; font-weight: 800 !important; line-height: 1.06 !important; letter-spacing: -.045em !important; } html body.route-auth #app .desktop-auth-stage-sub { max-width: 455px !important; color: #b5c6c8 !important; font-size: 15px !important; line-height: 1.85 !important; } html body.route-auth #app .desktop-auth-stage-status { margin-top: 8px !important; border-color: rgba(130, 245, 226, .2) !important; border-radius: 999px !important; background: rgba(13, 39, 43, .42) !important; color: #c0d7d4 !important; } html body.route-auth #app .desktop-auth-feature-list { max-width: 600px !important; margin-top: 42px !important; gap: 10px !important; } html body.route-auth #app .desktop-auth-feature-list li { min-height: 94px !important; padding: 15px 16px !important; border-color: rgba(126, 240, 225, .16) !important; border-radius: 12px !important; background: linear-gradient(145deg, rgba(24,48,53,.72), rgba(13,20,29,.42)) !important; backdrop-filter: blur(10px) !important; } html body.route-auth #app .desktop-auth-panel { grid-column: 2 !important; grid-row: 1 !important; align-self: start !important; justify-self: stretch !important; position: relative !important; z-index: 3 !important; width: 100% !important; max-width: 480px !important; max-height: calc(100vh - 140px) !important; min-width: 0 !important; margin: 0 !important; padding: clamp(28px, 3vw, 42px) !important; overflow-x: hidden !important; overflow-y: auto !important; border: 1px solid rgba(164, 247, 237, .22) !important; border-radius: 24px !important; background: linear-gradient(145deg, rgba(21, 32, 43, .88), rgba(10, 15, 24, .88)) !important; box-shadow: 0 30px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08) !important; backdrop-filter: blur(24px) saturate(130%) !important; } html body.route-auth #app .desktop-auth-panel::before { margin-bottom: 18px !important; color: #71f6e2 !important; font-size: 10px !important; letter-spacing: .22em !important; } html body.route-auth #app .desktop-auth-panel > div { min-width: 0 !important; } html body.route-auth #app .desktop-auth-panel .desktop-auth-mode-switch { display: flex !important; gap: 4px !important; margin: 0 0 28px !important; padding: 4px !important; border: 1px solid rgba(160, 241, 231, .12) !important; border-radius: 12px !important; background: rgba(2, 8, 13, .46) !important; } html body.route-auth #app .desktop-auth-tab { flex: 1 1 0 !important; min-width: 0 !important; height: 42px !important; padding: 0 10px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #93a8ae !important; font-size: 13px !important; } html body.route-auth #app .desktop-auth-tab.capsule-selected, html body.route-auth #app .desktop-auth-tab[aria-pressed="true"] { background: linear-gradient(135deg, #3ce3cf, #6ba9fc) !important; color: #06201e !important; font-weight: 800 !important; box-shadow: 0 8px 22px rgba(61, 221, 204, .2) !important; } html body.route-auth #app .desktop-auth-form-body { display: grid !important; gap: 14px !important; } html body.route-auth #app .desktop-auth-panel :is(input, taro-input-core) { box-sizing: border-box !important; width: 100% !important; min-height: 50px !important; padding: 0 15px !important; border: 1px solid rgba(166, 223, 222, .16) !important; border-radius: 10px !important; background: rgba(4, 12, 19, .66) !important; color: #effdfa !important; font-size: 14px !important; } html body.route-auth #app .desktop-auth-primary { width: 100% !important; min-height: 52px !important; margin-top: 8px !important; border: 0 !important; border-radius: 10px !important; background: linear-gradient(104deg, #51ead7, #80b4ff) !important; color: #061c20 !important; font-size: 15px !important; font-weight: 800 !important; box-shadow: 0 12px 30px rgba(67, 218, 206, .22) !important; } } @media (max-width: 980px) { html body.route-auth #app .min-h-screen.desktop-auth-page, html body.route-auth #app .min-h-screen { display: block !important; width: 100% !important; min-height: 100vh !important; padding: 92px 20px 44px !important; background: radial-gradient(circle at 16% 10%, rgba(45,225,202,.18), transparent 38%), #080d13 !important; } html body.route-auth #app #desktop-auth-stage { display: none !important; } html body.route-auth #app .desktop-auth-panel { width: min(100%, 480px) !important; margin: 0 auto !important; padding: 28px 20px !important; border-radius: 20px !important; } html body.route-auth #app .desktop-auth-homebar { left: 20px !important; right: 20px !important; top: 20px !important; } } /* Auth input repair: browser autofill must remain part of the dark portal. */ @media (min-width:981px) { html body.route-auth #app .desktop-auth-panel { padding: 28px !important; border-color: #30343b !important; border-radius: 10px !important; background: rgba(15, 17, 22, 0.76) !important; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28) !important; } /* Registration has more fields than login. Keep it a focused continuation of the homepage visual system instead of letting the lower controls fall below the viewport. */ html body.route-auth.auth-register #app .desktop-auth-panel { align-self:center !important; max-height:calc(100vh - 96px) !important; max-width:456px !important; padding:24px 28px !important; border-color:rgba(130, 235, 220, .10) !important; border-radius:0 !important; background:rgba(11, 19, 25, .72) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 16px 42px rgba(0,0,0,.16) !important; scrollbar-width:thin; scrollbar-color:#3b8d86 transparent; } html body.route-auth.auth-register #app .desktop-auth-panel::before { content:"PUBLIC BETA · 公测版" !important; display:block !important; margin-bottom:14px !important; color:#35d6c5 !important; font-size:10px !important; font-weight:800 !important; letter-spacing:.08em !important; } html body.route-auth.auth-register #app .desktop-auth-panel .desktop-auth-mode-switch { margin-bottom:16px !important; padding:0 !important; border-width:0 0 1px !important; border-radius:0 !important; border-color:rgba(180, 229, 222, .13) !important; background:transparent !important; } html body.route-auth.auth-register #app .desktop-auth-panel .desktop-auth-form-body { gap:10px !important; } html body.route-auth.auth-register #app .desktop-auth-panel .desktop-auth-form-body > div { border-radius:6px !important; } html body.route-auth.auth-register #app .desktop-auth-panel :is(label,small,span,p) { font-size:10px !important; line-height:1.45 !important; } html body.route-auth.auth-register #app .desktop-auth-tab { height:38px !important; font-size:11px !important; font-size:12px !important; } html body.route-auth.auth-register #app .desktop-auth-panel :is(input, taro-input-core) { min-height:40px !important; border-color:rgba(180, 229, 222, .12) !important; border-radius:5px !important; background:rgba(4, 12, 17, .72) !important; font-size:12px !important; } html body.route-auth.auth-register #app .desktop-auth-primary { min-height:42px !important; margin-top:4px !important; border-radius:8px !important; background:linear-gradient(100deg, #35d6c5, #45aa9d) !important; box-shadow:0 10px 22px rgba(53, 214, 197, .20), 0 0 22px rgba(53, 214, 197, .13) !important; font-size:12px !important; } html body.route-auth.auth-register #app .desktop-auth-primary:hover { box-shadow:0 12px 28px rgba(53, 214, 197, .28), 0 0 32px rgba(53, 214, 197, .20) !important; transform:translateY(-1px); } html body.route-auth.auth-register #app .desktop-auth-panel div:has(> input:focus) { border-color:rgba(53, 214, 197, .60) !important; box-shadow:0 0 0 2px rgba(53, 214, 197, .10), 0 0 18px rgba(53, 214, 197, .08) !important; } html body.route-auth #app .desktop-auth-panel::before { margin-bottom: 18px !important; color: #4edacd !important; } html body.route-auth #app .desktop-auth-panel :is(input, taro-input-core) { min-height: 46px !important; border-color: #343941 !important; border-radius: 7px !important; background: #111419 !important; color: #edf4f2 !important; -webkit-text-fill-color: #edf4f2 !important; caret-color: #57dfd0 !important; box-shadow: none !important; } html body.route-auth #app .desktop-auth-panel input:-webkit-autofill, html body.route-auth #app .desktop-auth-panel input:-webkit-autofill:hover, html body.route-auth #app .desktop-auth-panel input:-webkit-autofill:focus { border-color: #343941 !important; -webkit-text-fill-color: #edf4f2 !important; box-shadow: 0 0 0 1000px #111419 inset !important; transition: background-color 9999s ease-out 0s; } html body.route-auth #app .desktop-auth-panel div:has(> input:focus) { border-color: #3fbeb1 !important; outline: 0 !important; box-shadow: 0 0 0 2px rgba(63, 190, 177, 0.1) !important; } } /* Official WeChat QR entry — intentionally lives outside the route mounts so it remains available while users move between desktop learning pages. */ #linka-wechat-qr-entry { position:fixed; right:calc(var(--desktop-right-width) - 1px); top:50%; z-index:10020; font-family:"IBM Plex Sans","PingFang SC","Microsoft YaHei",sans-serif; transform:translateY(-50%); } .linka-wechat-qr-trigger { display:flex; flex-direction:column; align-items:center; gap:7px; min-width:42px; padding:11px 8px 12px; border:1px solid rgba(105,224,188,.34); border-right:0; border-radius:10px 0 0 10px; background:linear-gradient(160deg,rgba(14,47,50,.96),rgba(7,27,32,.96)); color:#c8f8ef; box-shadow:-10px 12px 28px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.06); font:700 11px/1.1 inherit; cursor:pointer; backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease; } .linka-wechat-qr-trigger:hover { transform:translateX(-5px); border-color:rgba(129,245,211,.72); background:linear-gradient(160deg,#165f5d,#0c393e); box-shadow:-12px 14px 32px rgba(0,0,0,.22),0 0 20px rgba(61,221,192,.12); } .linka-wechat-qr-trigger:focus-visible,.linka-wechat-qr-close:focus-visible { outline:3px solid #67dfbb; outline-offset:3px; } .linka-wechat-qr-icon { display:grid; place-items:center; width:25px; height:25px; border:1px solid rgba(189,255,237,.35); border-radius:8px; background:linear-gradient(145deg,#35c4a2,#16846f); color:#fff; font-size:13px; font-weight:800; box-shadow:0 4px 12px rgba(37,190,157,.26); } .linka-wechat-qr-backdrop { position:fixed; inset:0; z-index:10030; display:grid; place-items:center; padding:24px; background:rgba(2,12,16,.62); backdrop-filter:blur(5px); } .linka-wechat-qr-backdrop[hidden] { display:none; } .linka-wechat-qr-card { position:relative; width:min(348px,100%); box-sizing:border-box; padding:29px 25px 23px; overflow:hidden; border:1px solid rgba(111,231,193,.3); border-radius:22px; background:linear-gradient(145deg,#123b3b,#0b2027); color:#effff9; box-shadow:0 28px 80px rgba(0,0,0,.45); text-align:center; } .linka-wechat-qr-card::before { position:absolute; inset:-90px auto auto -60px; width:190px; height:190px; border-radius:50%; background:rgba(81,227,185,.13); content:""; filter:blur(4px); pointer-events:none; } .linka-wechat-qr-card > * { position:relative; } .linka-wechat-qr-eyebrow { display:block; color:#80e8c6; font-size:11px; font-weight:700; letter-spacing:.12em; } .linka-wechat-qr-card h2 { margin:8px 0 6px; color:#fff; font-size:23px; line-height:1.25; } .linka-wechat-qr-card p { margin:0 auto 17px; color:#b5d7d0; font-size:13px; line-height:1.65; } .linka-wechat-qr-card img { display:block; width:min(255px,100%); height:auto; margin:0 auto 11px; border-radius:11px; background:#fff; } .linka-wechat-qr-card small { color:#91bcb2; font-size:12px; } .linka-wechat-qr-close { position:absolute; top:10px; right:11px; display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:50%; background:transparent; color:#b8d6d0; font-size:26px; font-weight:300; line-height:1; cursor:pointer; } .linka-wechat-qr-close:hover { background:rgba(255,255,255,.1); color:#fff; } body.linka-wechat-qr-open { overflow:hidden; } body.desktop-light .linka-wechat-qr-trigger { border-color:#a5d8d0; background:linear-gradient(160deg,#fff,#f2fbf9); color:#1b6158; box-shadow:-8px 12px 24px rgba(20,73,68,.09),inset 0 1px rgba(255,255,255,.94); } body.desktop-light .linka-wechat-qr-trigger:hover { background:linear-gradient(160deg,#fff,#e5f8f4); } body.context-collapsed #linka-wechat-qr-entry { right:0; } @media (max-width:980px) { #linka-wechat-qr-entry { right:14px; top:auto; bottom:18px; transform:none; } .linka-wechat-qr-trigger { flex-direction:row; gap:7px; min-width:0; padding:9px 12px 9px 9px; border:1px solid rgba(105,224,188,.34); border-radius:999px; } .linka-wechat-qr-trigger:hover { transform:translateY(-2px); } .linka-wechat-qr-card { padding:27px 20px 20px; } } /* ============================================================ QA + GRADING — final visual system One quiet workspace language: tonal surfaces, deliberate spacing, and a single teal interaction cue. Kept last to neutralize legacy desktop treatments without changing Taro page behaviour. ============================================================ */ @media (min-width:981px) { html body.route-qa #app .min-h-screen, html body.route-grade #app .min-h-screen, html body.route-grade #app .desktop-grade-workspace { background: radial-gradient(760px 280px at 72% -8%, rgba(53,214,197,.07), transparent 62%), #0b0f13 !important; } html body.route-qa #app #desktop-qa-header, html body.route-grade #app #desktop-grade-header { margin-bottom:28px !important; padding-bottom:20px !important; border-bottom:1px solid rgba(197,214,218,.10) !important; } html body.route-qa #app .desktop-qa-content, html body.route-qa #app .glass-card, html body.route-qa #app .glass-card-frosted, html body.route-grade #app .desktop-grade-typebar, html body.route-grade #app .desktop-grade-question-panel, html body.route-grade #app .desktop-grade-answer-panel, html body.route-grade #app .desktop-grade-history-shortcut { border:0 !important; border-radius:16px !important; background:#12181e !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 12px 28px rgba(0,0,0,.12) !important; } html body.route-qa #app .desktop-qa-content, html body.route-qa #app .glass-card, html body.route-qa #app .glass-card-frosted { margin-bottom:16px !important; } html body.route-qa #app .desktop-qa-question-types, html body.route-qa #app .desktop-qa-question-entry > div:first-child, html body.route-grade #app .desktop-grade-question-panel > div:first-child, html body.route-grade #app .desktop-grade-answer-panel > div:first-child { border-bottom:1px solid rgba(197,214,218,.08) !important; } html body.route-qa #app .desktop-qa-question-types { padding:22px 24px 20px !important; } html body.route-qa #app .desktop-qa-question-entry > div:last-child { padding:20px 24px 24px !important; } html body.route-grade #app .desktop-grade-content { gap:18px !important; } html body.route-grade #app .desktop-grade-typebar { padding:18px 22px !important; } html body.route-grade #app .desktop-grade-question-panel, html body.route-grade #app .desktop-grade-answer-panel { min-height:452px !important; } /* Selection is conveyed with fill and light, rather than repeated outlines. */ html body.route-qa #app .desktop-qa-question-type, html body.route-grade #app .desktop-grade-type-option, html body.route-grade #app .desktop-grade-typebar button, html body.route-grade #app .desktop-grade-typebar taro-button-core, html body.route-grade #app .desktop-grade-input-modebar { border:0 !important; border-radius:9px !important; background:rgba(255,255,255,.055) !important; box-shadow:none !important; } html body.route-qa #app .desktop-qa-question-type.is-active, html body.route-qa #app .desktop-qa-question-type[aria-pressed="true"], html body.route-grade #app .desktop-grade-type-option.capsule-selected, html body.route-grade #app .desktop-grade-type-option.is-active, html body.route-grade #app .desktop-grade-type-option[aria-pressed="true"], html body.route-grade #app .desktop-grade-typebar .capsule-selected { background:rgba(53,214,197,.18) !important; color:#d9fffb !important; box-shadow:inset 0 0 0 1px rgba(97,234,219,.14) !important; } /* Inputs sit in a recessed writing well; focus adds the only bright rail. */ html body.route-qa #app textarea, html body.route-qa #app taro-textarea-core, html body.route-grade #app textarea, html body.route-grade #app taro-textarea-core { border:1px solid rgba(197,214,218,.07) !important; border-radius:11px !important; background:#0c1116 !important; box-shadow:inset 0 1px 2px rgba(0,0,0,.24) !important; } html body.route-qa #app textarea:focus, html body.route-grade #app textarea:focus { border-color:rgba(83,228,212,.64) !important; box-shadow:0 0 0 3px rgba(53,214,197,.11) !important; } html body.route-qa #app .desktop-qa-submit, html body.route-grade #app .desktop-grade-submit { border:0 !important; border-radius:10px !important; background:linear-gradient(135deg,#2cc7b7,#15968a) !important; color:#06201d !important; box-shadow:0 10px 22px rgba(28,166,152,.18) !important; } html body.route-qa #app .desktop-qa-submit:hover, html body.route-grade #app .desktop-grade-submit:hover { background:linear-gradient(135deg,#53dfd0,#20ae9f) !important; transform:translateY(-1px) !important; } html body.desktop-light.route-qa #app .desktop-qa-content, html body.desktop-light.route-qa #app .glass-card, html body.desktop-light.route-grade #app .desktop-grade-typebar, html body.desktop-light.route-grade #app .desktop-grade-question-panel, html body.desktop-light.route-grade #app .desktop-grade-answer-panel, html body.desktop-light.route-grade #app .desktop-grade-history-shortcut { background:#f7fafb !important; } html body.desktop-light.route-qa #app textarea, html body.desktop-light.route-grade #app textarea { background:#fff !important; } /* Q&A deliberately inherits grading's palette and removes its old answer-frame. */ html body.route-qa #app .desktop-qa-answer-card, html body.route-qa #app [data-workspace-section="answer"] { border:0 !important; border-left:0 !important; border-radius:16px !important; background:#12181e !important; box-shadow:inset 2px 0 0 rgba(53,214,197,.62), inset 0 1px 0 rgba(255,255,255,.035), 0 12px 28px rgba(0,0,0,.12) !important; } html body.route-qa #app .desktop-qa-answer-card::before { content:'' !important; position:absolute !important; top:22px !important; bottom:22px !important; left:0 !important; width:2px !important; border-radius:0 2px 2px 0 !important; background:#35d6c5 !important; box-shadow:0 0 14px rgba(53,214,197,.30) !important; } html body.route-qa #app .desktop-qa-question-entry, html body.route-qa #app .desktop-qa-question-types { background:transparent !important; } html body.route-qa #app .desktop-qa-question-type { color:#9ba9b0 !important; } html body.route-qa #app .desktop-qa-question-type:hover { background:rgba(53,214,197,.10) !important; color:#dffaf6 !important; } html body.desktop-light.route-qa #app .desktop-qa-answer-card, html body.desktop-light.route-qa #app [data-workspace-section="answer"] { background:#f7fafb !important; box-shadow:inset 2px 0 #168f83,0 12px 28px rgba(31,45,51,.05) !important; } } /* Final city leisure-study floor plan: two full rooms, split by one physical wall. */ /* Native grading page: component-owned structure, no runtime DOM rewriting. */ @media (min-width:981px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-native { width:100% !important; max-width:none !important; min-height:100vh !important; margin:0 !important; padding:36px 46px 72px !important; background:#08090b !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native > div:first-child { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; max-width:1320px !important; margin:0 auto 24px !important; padding:0 0 24px !important; border-bottom:1px solid #24262d !important; background:transparent !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native > .desktop-grade-RETIRED-content { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:16px !important; width:100% !important; max-width:1320px !important; margin:0 auto !important; padding:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native .desktop-grade-RETIRED-typebar,body.route-grade-RETIRED #app .desktop-grade-RETIRED-native > .desktop-grade-RETIRED-content > button,body.route-grade-RETIRED #app .desktop-grade-RETIRED-native > .desktop-grade-RETIRED-content > div:last-child { grid-column:1 / -1 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native .desktop-grade-RETIRED-typebar,body.route-grade-RETIRED #app .desktop-grade-RETIRED-native .desktop-grade-RETIRED-question-panel,body.route-grade-RETIRED #app .desktop-grade-RETIRED-native .desktop-grade-RETIRED-answer-panel { margin:0 !important; border:1px solid #2b3038 !important; border-radius:7px !important; background:#11161b !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native .desktop-grade-RETIRED-typebar { padding:18px 20px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native .desktop-grade-RETIRED-question-panel,body.route-grade-RETIRED #app .desktop-grade-RETIRED-native .desktop-grade-RETIRED-answer-panel { min-height:456px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native textarea { min-height:300px !important; background:#090d11 !important; } /* UI-only refinement: aligns the native grading page with the other dark workspaces. */ body.route-grade-RETIRED #app .desktop-grade-RETIRED-native > div:first-child { min-height:124px !important; padding:8px 4px 26px !important; border-bottom-color:#242b32 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native > div:first-child > div:first-child { gap:14px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native > div:first-child p { color:#f4f6f8 !important; font-size:30px !important; font-weight:760 !important; letter-spacing:-.02em !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native > div:first-child > p { color:#89939d !important; font-size:13px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native > div:first-child [class*="clipboard"] { color:#46d3c4 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native > div:first-child [class*="rounded-2xl"] { width:42px !important; height:42px !important; border:1px solid #24433f !important; border-radius:7px !important; background:#102824 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar { display:grid !important; grid-template-columns:144px minmax(0,1fr) !important; align-items:center !important; min-height:82px !important; padding:17px 20px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar::before { content:'01 题型定位' !important; color:#e8ecee !important; font-size:16px !important; font-weight:740 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar > div { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button { min-height:38px !important; border:1px solid #2c333b !important; border-radius:5px !important; background:#171c21 !important; color:#9ea8b1 !important; font-size:13px !important; font-weight:650 !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button.capsule-selected { border-color:#38cdbd !important; background:#153e39 !important; color:#e4fffb !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel,body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { overflow:hidden !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child,body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { min-height:66px !important; padding:0 20px !important; border-bottom:1px solid #263039 !important; background:#12191e !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child p,body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child p { color:#edf1f2 !important; font-size:16px !important; font-weight:720 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child,body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child { padding:18px 20px 20px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native textarea:focus { border-color:#46d3c4 !important; box-shadow:0 0 0 3px rgba(70,211,196,.11) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:nth-child(2) > div:first-child { min-height:42px !important; padding:3px !important; border:1px solid #29343c !important; border-radius:5px !important; background:#0e1419 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:nth-child(2) > div:first-child button { min-height:34px !important; border-radius:4px !important; color:#98a4ae !important; font-size:13px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:nth-child(2) > div:first-child button.capsule-selected { background:#1d514b !important; color:#edfffc !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > button { min-height:46px !important; border-radius:5px !important; background:#35cfc0 !important; color:#06201d !important; font-size:14px !important; font-weight:800 !important; box-shadow:0 10px 24px rgba(53,207,192,.15) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native > .desktop-grade-RETIRED-native-hero { display:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native > #desktop-grade-header-RETIRED { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:28px !important; max-width:1320px !important; min-height:0 !important; margin:0 auto 26px !important; padding:2px 2px 25px !important; border-bottom:1px solid #242b32 !important; background:transparent !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native > #desktop-grade-header-RETIRED span { display:block !important; margin:0 0 8px !important; color:#42d4c4 !important; font-size:10px !important; font-weight:800 !important; letter-spacing:.08em !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native > #desktop-grade-header-RETIRED h1 { margin:0 0 8px !important; color:#f5f7f8 !important; font-size:31px !important; font-weight:780 !important; line-height:1.18 !important; letter-spacing:-.025em !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native > #desktop-grade-header-RETIRED p { max-width:650px !important; margin:0 !important; color:#88939d !important; font-size:13px !important; font-weight:500 !important; line-height:1.65 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native > #desktop-grade-header-RETIRED a { display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; min-width:104px !important; min-height:38px !important; padding:0 13px !important; border:1px solid #33404a !important; border-radius:5px !important; background:#12191f !important; color:#d4dddf !important; font-size:12px !important; font-weight:700 !important; text-decoration:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native > #desktop-grade-header-RETIRED a:hover { border-color:#42d4c4 !important; background:#132a28 !important; color:#effffc !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-native > #desktop-grade-header-RETIRED i { color:#42d4c4 !important; font-size:15px !important; } } /* Official learning hub: primary entries do not use icon columns. */ /* Retired custom QA/grade workspaces. Native #app owns these routes — never hide it. */ @media (min-width:981px) { body.route-qa-RETIRED #desktop-qa-workspace-RETIRED, body.route-grade-RETIRED #desktop-grade-workspace-redesign-RETIRED { display:none !important; } body.route-qa-RETIRED #app, body.route-grade-RETIRED #app { visibility:visible !important; pointer-events:auto !important; opacity:1 !important; } } /* Fixed desktop AI workspaces. These do not depend on the legacy Taro pages. */ @media (min-width:981px) { #desktop-qa-workspace-RETIRED,#desktop-grade-workspace-redesign-RETIRED { display:none !important; visibility:hidden !important; pointer-events:none !important; } body.desktop-nav-collapsed #desktop-qa-workspace-RETIRED,body.desktop-nav-collapsed #desktop-grade-workspace-redesign-RETIRED { left:0!important; } body.context-collapsed #desktop-qa-workspace-RETIRED,body.context-collapsed #desktop-grade-workspace-redesign-RETIRED { right:0!important; } #desktop-qa-workspace-RETIRED .ai-workspace-head-RETIRED,#desktop-grade-workspace-redesign-RETIRED .ai-workspace-head-RETIRED { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; min-height:132px; margin:0 0 26px; padding:0 0 23px; border-bottom:1px solid #292e34; } .ai-workspace-head-RETIRED span { display:block; color:#42dacb; font-size:11px; font-weight:800; } .ai-workspace-head-RETIRED h1 { margin:7px 0 8px; color:#f0f5f5; font-size:30px; line-height:1.2; } .ai-workspace-head-RETIRED p { margin:0; color:#a2afb3; font-size:14px; } .ai-workspace-head-RETIRED a { padding:10px 14px; border:1px solid #344047; border-radius:5px; color:#d8e5e4; text-decoration:none; font-size:13px; } .qa-workspace-body-RETIRED { display:grid; gap:14px; }.qa-mode-RETIRED { display:flex; justify-content:flex-end; gap:8px; align-items:center; min-height:46px; }.qa-mode-RETIRED b { margin-right:auto; color:#cdd6d7; font-size:15px; }.qa-mode-RETIRED button,.qa-types-RETIRED button,.grade-typebar-RETIRED button { height:36px; border:1px solid #303940; border-radius:5px; background:#171b20; color:#aeb9bd; font:650 13px inherit; cursor:pointer; }.qa-mode-RETIRED button { min-width:72px; }.qa-mode-RETIRED button.active,.qa-types-RETIRED button.active,.grade-typebar-RETIRED button.active { border-color:#2d9187; background:#174740; color:#dffefa; } .qa-card-RETIRED,.grade-card-RETIRED,.grade-typebar-RETIRED,.grade-history-RETIRED { border:1px solid #2b343b; border-radius:6px; background:#11161b; }.qa-card-RETIRED { padding:20px; }.qa-card-RETIRED h2,.grade-card-RETIRED h2 { margin:0 0 17px; color:#edf3f3; font-size:17px; }.qa-types-RETIRED,.grade-typebar-RETIRED > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.qa-form-RETIRED textarea,.grade-card-RETIRED textarea { display:block; width:100%; min-height:184px; padding:15px; border:1px solid #26343b; border-radius:5px; background:#091015; color:#e9f0f1; box-sizing:border-box; resize:vertical; font:14px/1.7 inherit; }.qa-form-RETIRED label { display:block; margin:14px 0; color:#a7b3b6; font-size:13px; }.qa-form-RETIRED button,.grade-submit-RETIRED { min-height:44px; border:0; border-radius:5px; background:#31cfc0; color:#06211e; font:750 14px inherit; cursor:pointer; }.qa-form-RETIRED button { display:block; width:176px; margin-left:auto; } .grade-typebar-RETIRED { display:grid; grid-template-columns:140px 1fr; align-items:center; gap:18px; padding:16px 20px; margin-bottom:16px; }.grade-typebar-RETIRED b { color:#eaf2f2; font-size:16px; }.grade-workspace-body-RETIRED { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.grade-card-RETIRED { min-width:0; overflow:hidden; }.grade-card-RETIRED h2 { margin:0; padding:18px 20px; border-bottom:1px solid #283239; }.grade-card-RETIRED textarea { min-height:300px; margin:16px; width:calc(100% - 32px); }.answer-card { display:grid; grid-template-rows:auto 54px 1fr; }.grade-answer-modes-RETIRED { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid #29333a; }.grade-answer-modes-RETIRED button { border:0; border-right:1px solid #29333a; border-radius:0; background:#0c1217; color:#aab7ba; font:650 14px inherit; cursor:pointer; }.grade-answer-modes-RETIRED button:last-child { border-right:0; }.grade-answer-modes-RETIRED button.active { background:#1a504a; color:#e5fffb; }.grade-submit-RETIRED,.grade-history-RETIRED { grid-column:1/-1; }.grade-submit-RETIRED { width:100%; }.grade-history-RETIRED { display:flex; flex-direction:column; gap:4px; padding:16px 20px; color:#f0f5f5; text-decoration:none; }.grade-history-RETIRED span { color:#9eabb0; font-size:13px; } } /* Unified redesign for non-Yibentong learning card pages. */ @media (min-width:981px) { body.route-learning-card-detail:not(.route-yibentong-anki):not(.route-yibentong-puzzle) { --desktop-left-width:280px !important; background:#08090b !important; } body.route-learning-card-detail:not(.route-yibentong-anki):not(.route-yibentong-puzzle) #app { width:calc(100vw - var(--desktop-right-width)) !important; max-width:calc(100vw - var(--desktop-right-width)) !important; min-height:100vh !important; padding-left:var(--desktop-left-width) !important; padding-right:0 !important; background:#08090b !important; } body.context-collapsed.route-learning-card-detail:not(.route-yibentong-anki):not(.route-yibentong-puzzle) #app { width:100vw !important; max-width:100vw !important; } body.route-learning-card-detail #app .desktop-subject-study-redesign { --subject-accent:#62d3c5; --subject-panel:#11151a; --subject-panel-strong:#151b21; --subject-line:#29333b; display:grid !important; grid-template-columns:minmax(0,1fr) !important; align-content:start !important; gap:20px !important; width:min(1180px,calc(100% - 72px)) !important; min-height:100vh !important; margin:0 auto !important; padding:42px 0 88px !important; background: radial-gradient(circle at 18% 0%, rgba(78,170,164,.12), transparent 34%), linear-gradient(180deg,#090b0e 0%,#08090b 42%,#090a0d 100%) !important; color:#edf1f2 !important; } body.route-learning-card-detail #app .desktop-subject-hero { position:relative !important; display:grid !important; grid-template-columns:minmax(0,1fr) 330px !important; gap:24px !important; overflow:hidden !important; padding:26px !important; border:1px solid rgba(115,132,148,.28) !important; border-radius:10px !important; background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018) 46%, rgba(98,211,197,.055)), #101419 !important; box-shadow:0 24px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05) !important; } body.route-learning-card-detail #app .desktop-subject-hero::before { content:"STUDY CARDS"; position:absolute; right:24px; top:18px; color:rgba(255,255,255,.04); font-size:56px; font-weight:900; line-height:1; pointer-events:none; } body.route-learning-card-detail #app .desktop-subject-hero > :first-child { grid-column:1 !important; min-width:0 !important; padding:0 !important; background:transparent !important; } body.route-learning-card-detail #app .desktop-subject-hero h1, body.route-learning-card-detail #app .desktop-subject-hero .text-2xl { color:#f6f8f8 !important; font-size:30px !important; font-weight:800 !important; line-height:1.25 !important; } body.route-learning-card-detail #app .desktop-subject-hero p { margin-top:8px !important; color:#9aa7ad !important; font-size:13px !important; } body.route-learning-card-detail #app .desktop-subject-hero > .mt-3 { grid-column:2 !important; align-self:stretch !important; margin:0 !important; padding:18px !important; border:1px solid rgba(98,211,197,.18) !important; border-radius:10px !important; background:linear-gradient(180deg,rgba(98,211,197,.08),rgba(255,255,255,.025)),#151a20 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important; } body.route-learning-card-detail #app .desktop-subject-hero > .mt-3 span { color:#d8dddd !important; } body.route-learning-card-detail #app .desktop-subject-body { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:16px !important; padding:0 !important; } body.route-learning-card-detail #app .desktop-subject-chapter-panel { overflow:hidden !important; margin:0 !important; border:1px solid var(--subject-line) !important; border-radius:10px !important; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),var(--subject-panel) !important; box-shadow:0 16px 42px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035) !important; } body.route-learning-card-detail #app .desktop-subject-chapter-panel > .flex.items-center { min-height:58px !important; padding:0 18px !important; border-bottom:1px solid var(--subject-line) !important; background:var(--subject-panel-strong) !important; } body.route-learning-card-detail #app .desktop-subject-chapter-panel > .flex.items-center span:first-of-type { color:#f1f4f4 !important; font-size:15px !important; font-weight:750 !important; } body.route-learning-card-detail #app .desktop-subject-chapter-row { min-height:48px !important; margin:0 !important; padding:0 14px !important; border:1px solid #2b343d !important; border-left:3px solid rgba(98,211,197,.42) !important; border-radius:8px !important; background:rgba(18,24,30,.9) !important; color:#dfe4e4 !important; cursor:pointer !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important; transition:background .14s ease,border-color .14s ease,transform .14s ease,box-shadow .14s ease !important; } body.route-learning-card-detail #app .desktop-subject-chapter-row:hover { border-color:rgba(98,211,197,.44) !important; background:#17231f !important; box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04) !important; transform:translateX(3px) !important; } body.route-learning-card-detail #app .desktop-subject-chapter-row .text-foreground { overflow:hidden !important; color:#dde3e3 !important; font-size:14px !important; line-height:1.35 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } body.route-learning-card-detail #app .desktop-subject-start-button { height:48px !important; min-height:48px !important; border-radius:6px !important; font-size:14px !important; font-weight:750 !important; box-shadow:none !important; transition:transform .14s ease,filter .14s ease,border-color .14s ease !important; } body.route-learning-card-detail #app .desktop-subject-start-button:hover { transform:translateY(-1px) !important; filter:brightness(1.08) !important; } body.route-learning-card-detail #app .desktop-subject-start-button.is-order { background:linear-gradient(135deg,#1a9f93,#4b77d5) !important; color:#fff !important; } body.route-learning-card-detail #app .desktop-subject-start-button.is-random { border:1px solid rgba(98,211,197,.42) !important; background:rgba(98,211,197,.07) !important; color:#72d9ce !important; } } /* Left navigation uses one fixed row and one badge treatment on every route. */ #desktop-nav .desktop-nav-item { display:flex !important; align-items:center !important; justify-content:flex-start !important; min-height:56px !important; height:56px !important; margin:0 !important; padding:0 24px !important; border:0 !important; border-radius:0 !important; box-sizing:border-box !important; font-family:inherit !important; font-size:16px !important; font-weight:700 !important; line-height:1 !important; letter-spacing:0 !important; } #desktop-nav .desktop-nav-badge { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:26px !important; height:22px !important; margin:0 0 0 auto !important; padding:0 5px !important; border:0 !important; border-radius:5px !important; box-sizing:border-box !important; background:#35d6c5 !important; color:#071512 !important; font-size:11px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:0 !important; } @media (max-width:980px) { body.route-learning-card-detail #app .desktop-subject-study-redesign { background:#08090b !important; } body.route-learning-card-detail #app .desktop-subject-hero { margin:0 12px !important; border-radius:8px !important; } body.route-learning-card-detail #app .desktop-subject-body { padding-right:14px !important; padding-left:14px !important; } } /* Desktop catalog reader for non-Yibentong subject cards. */ @media (max-width:980px) { .subject-reader-shell { padding:0 12px 24px; } .subject-reader-head, .subject-reader-workspace { display:flex; flex-direction:column; } .subject-reader-nav, .subject-reader-main { max-height:none; } .subject-anki-topic-picker > div { grid-template-columns:1fr; } .subject-anki-topic-card { grid-template-columns:34px minmax(0,1fr); } .subject-anki-topic-card b { display:none; } } /* Last-mile Yibentong layout guard: compact filters and four visible volumes. */ @media (min-width:981px) { body.route-yibentong-anki #app .desktop-yibentong-workspace { grid-template-columns:1fr !important; gap:12px !important; } body.route-yibentong-anki #app .desktop-yibentong-quick, body.route-yibentong-anki #app #desktop-yibentong-volumes, body.route-yibentong-anki #app .desktop-yibentong-filters, body.route-yibentong-anki #app .desktop-yibentong-volume { grid-column:1 / -1 !important; } body.route-yibentong-anki #app .desktop-yibentong-filters { min-height:0 !important; padding:16px !important; } body.route-yibentong-anki #app .desktop-yibentong-filters > div { display:grid !important; grid-template-columns:64px minmax(0,1fr) !important; align-items:center !important; gap:12px !important; padding:0 !important; border:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-filters > div > :last-child, body.route-yibentong-anki #app .desktop-yibentong-filters > div > div:last-child, body.route-yibentong-anki #app .desktop-yibentong-filters > div .flex { display:flex !important; flex-wrap:wrap !important; gap:8px !important; } body.route-yibentong-anki #app .desktop-yibentong-filters :is(button,taro-button-core,.rounded-full) { flex:0 0 auto !important; width:auto !important; min-width:64px !important; max-width:max-content !important; height:32px !important; min-height:32px !important; padding:0 12px !important; } body.route-yibentong-anki #app .desktop-yibentong-stats [style*="background: rgb(123, 92, 246)"], body.route-yibentong-anki #app .desktop-yibentong-stats [style*="background-color: rgb(123, 92, 246)"], body.route-yibentong-anki #app .desktop-yibentong-stats [style*="background: rgba(123, 92, 246"] { display:none !important; } body.route-yibentong-anki #app #desktop-yibentong-volumes { display:grid !important; grid-template-columns:1fr !important; gap:12px !important; padding:16px !important; border:1px solid var(--card-line,#30333c) !important; border-radius:7px !important; background:var(--card-panel,#101014) !important; } body.route-yibentong-anki #app #desktop-yibentong-volumes header { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:16px !important; padding:0 0 12px !important; border-bottom:1px solid var(--card-line-soft,#272a31) !important; } body.route-yibentong-anki #app #desktop-yibentong-volumes header h2 { margin:4px 0 0 !important; font-size:17px !important; line-height:1.25 !important; } body.route-yibentong-anki #app #desktop-yibentong-volumes header p { margin:0 !important; max-width:420px !important; font-size:12px !important; line-height:1.5 !important; } body.route-yibentong-anki #app #desktop-yibentong-volumes > div { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:10px !important; } body.route-yibentong-anki #app #desktop-yibentong-volumes a { display:grid !important; grid-template-columns:32px minmax(0,1fr) auto !important; grid-template-rows:auto auto auto !important; align-items:center !important; gap:4px 10px !important; min-height:76px !important; padding:12px !important; border:1px solid var(--card-line,#30333c) !important; border-radius:7px !important; background:var(--card-panel-2,#151820) !important; } body.route-yibentong-anki #app #desktop-yibentong-volumes a i { grid-row:1 / span 3 !important; width:30px !important; height:30px !important; margin:0 !important; border:1px solid #2e6f68 !important; border-radius:6px !important; background:transparent !important; color:var(--card-accent,#24b8aa) !important; font-size:14px !important; } body.route-yibentong-anki #app #desktop-yibentong-volumes a strong { font-size:13px !important; line-height:1.25 !important; } body.route-yibentong-anki #app #desktop-yibentong-volumes a b, body.route-yibentong-anki #app #desktop-yibentong-volumes a small { margin:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; font-size:10px !important; line-height:1.25 !important; } body.route-yibentong-anki #app #desktop-yibentong-volumes a em { grid-column:3 !important; grid-row:1 / span 3 !important; align-self:center !important; margin:0 !important; font-size:11px !important; } } /* Points center: growth status and paid AI credits use separate ledgers. */ body.route-points #app .desktop-points-workspace { width:100% !important; max-width:none !important; min-height:100vh !important; margin:0 !important; padding:42px var(--desktop-page-gutter,40px) 64px !important; background:transparent !important; background-image:none !important; box-sizing:border-box !important; } body.route-points #app .desktop-points-legacy { display:none !important; } #desktop-points-redesign { --points-panel:var(--shell-surface); --points-panel-strong:var(--shell-strong); --points-line:var(--shell-line); --points-text:var(--shell-text); --points-muted:var(--shell-muted); --points-faint:var(--shell-faint); --points-teal:var(--shell-accent); --points-teal-soft:var(--shell-accent-soft); --points-amber:#e3a13a; --points-amber-soft:rgba(227,161,58,.1); width:100%; max-width:none; color:var(--points-text); letter-spacing:0; } #desktop-points-redesign * { box-sizing:border-box; letter-spacing:0; } #desktop-points-header { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; min-height:88px; margin:0 0 16px; padding:0 0 22px; border-bottom:1px solid var(--points-line); } #desktop-points-header > div { min-width:0; } #desktop-points-header span, .points-panel header span, .points-ledger header span { display:block; color:var(--points-teal); font-size:10px; font-weight:750; line-height:1.2; } #desktop-points-header h1 { margin:8px 0 7px; color:var(--points-text); font-size:29px; line-height:1.15; } #desktop-points-header p { max-width:720px; margin:0; color:var(--points-muted); font-size:13px; line-height:1.55; } #desktop-points-header > a { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; min-height:36px; padding:0 12px; border:1px solid var(--points-line); border-radius:4px; color:var(--points-muted); font-size:12px; text-decoration:none; } #desktop-points-header > a:hover { border-color:var(--points-teal); color:var(--points-teal); } .points-dashboard { display:grid; gap:12px; } .points-overview { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(390px,.85fr); min-height:164px; overflow:hidden; border:1px solid var(--points-line); border-radius:6px; background:var(--points-panel); } .points-score-block { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:24px 28px; border-right:1px solid var(--points-line); } .points-score-label { display:flex; align-items:center; gap:7px; color:var(--points-muted); font-size:11px; } .points-score-label i { color:var(--points-teal); font-size:15px; } .points-score-line { display:flex; align-items:flex-end; gap:14px; margin-top:7px; } .points-score-line strong { color:var(--points-text); font-size:48px; font-weight:750; line-height:1; } .points-score-line em { margin-bottom:4px; padding:4px 8px; border:1px solid rgba(57,184,169,.35); border-radius:3px; background:rgba(57,184,169,.08); color:#55cbbb; font-size:11px; font-style:normal; } .points-progress-copy { display:flex; justify-content:space-between; gap:16px; margin-top:17px; color:var(--points-faint); font-size:10px; } .points-progress-copy b { color:var(--points-muted); font-weight:600; } .points-progress { height:5px; margin-top:7px; overflow:hidden; background:rgba(128,132,140,.16); } .points-progress i { display:block; height:100%; background:var(--points-teal); } .points-overview-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .points-overview-stats article { display:flex; align-items:center; gap:11px; min-width:0; padding:18px; border-right:1px solid var(--points-line); border-bottom:1px solid var(--points-line); } .points-overview-stats article:nth-child(2) { border-right:0; } .points-overview-stats article:last-child { grid-column:1 / -1; border-right:0; border-bottom:0; } .points-overview-stats article > i { display:grid; place-items:center; width:32px; height:32px; flex:0 0 auto; border-radius:4px; background:var(--points-teal-soft); color:var(--points-teal); font-size:16px; } .points-overview-stats .points-ai-stat > i { background:var(--points-amber-soft); color:var(--points-amber); } .points-overview-stats strong,.points-overview-stats span { display:block; } .points-overview-stats strong { color:var(--points-text); font-size:15px; line-height:1.2; } .points-overview-stats span { margin-top:4px; color:var(--points-faint); font-size:10px; line-height:1.35; } .points-main-grid { display:grid; grid-template-columns:minmax(350px,.8fr) minmax(500px,1.2fr); gap:12px; } .points-panel,.points-ledger { overflow:hidden; border:1px solid var(--points-line); border-radius:6px; background:var(--points-panel); } .points-panel > header,.points-ledger > header { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:56px; padding:11px 16px; border-bottom:1px solid var(--points-line); } .points-panel h2,.points-ledger h2 { margin:4px 0 0; color:var(--points-text); font-size:14px; line-height:1.2; } .points-panel header p { margin:0; color:var(--points-faint); font-size:10px; text-align:right; } .points-level-list { display:grid; padding:8px; } .points-level-row { display:grid; grid-template-columns:10px minmax(0,1fr) auto 70px; align-items:center; gap:8px; min-height:39px; padding:0 10px; border-bottom:1px solid color-mix(in srgb,var(--points-line) 72%,transparent); } .points-level-row:last-child { border-bottom:0; } .points-level-row.is-current { border:1px solid rgba(57,184,169,.34); background:rgba(57,184,169,.07); } .points-level-dot { width:8px; height:8px; border-radius:50%; background:var(--level-color); } .points-level-row strong { color:var(--points-muted); font-size:11px; font-weight:550; } .points-level-row.is-current strong { color:var(--points-text); font-weight:700; } .points-level-row em { padding:2px 5px; border-radius:3px; background:var(--points-teal-soft); color:var(--points-teal); font-size:9px; font-style:normal; } .points-level-row small { color:var(--points-faint); font-size:10px; text-align:right; } .points-rule-list { display:grid; padding:5px 14px; } .points-rule-row { display:grid; grid-template-columns:30px minmax(0,1fr) 44px 104px; align-items:center; gap:9px; min-height:47px; border-bottom:1px solid color-mix(in srgb,var(--points-line) 72%,transparent); } .points-rule-row:last-child { border-bottom:0; } .points-rule-row > i { display:grid; place-items:center; width:28px; height:28px; border-radius:4px; background:var(--points-panel-strong); color:var(--points-muted); font-size:14px; } .points-rule-row div { min-width:0; } .points-rule-row strong,.points-rule-row span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .points-rule-row strong { color:var(--points-text); font-size:11px; } .points-rule-row span { margin-top:3px; color:var(--points-faint); font-size:9px; } .points-rule-row b { color:var(--points-teal); font-size:12px; text-align:right; } .points-rule-row small { color:var(--points-muted); font-size:9px; text-align:right; } .points-ledger > header b { display:inline-flex; align-items:center; gap:5px; color:var(--points-muted); font-size:10px; font-weight:550; } .points-ledger > header b i { color:var(--points-teal); font-size:13px; } .points-ledger-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .points-ledger-grid article { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:12px; min-width:0; min-height:126px; padding:20px; } .points-ledger-grid article:first-child { border-right:1px solid var(--points-line); } .points-ledger-grid article > i { display:grid; place-items:center; width:36px; height:36px; border-radius:4px; background:var(--points-teal-soft); color:var(--points-teal); font-size:18px; } .points-ledger-grid article.is-ai > i { background:var(--points-amber-soft); color:var(--points-amber); } .points-ledger-grid article div { min-width:0; } .points-ledger-grid strong { display:block; color:var(--points-text); font-size:13px; } .points-ledger-grid p { margin:6px 0 7px; color:var(--points-muted); font-size:10px; line-height:1.55; } .points-ledger-grid small { color:var(--points-faint); font-size:9px; } .points-ledger-grid button { align-self:center; min-height:34px; padding:0 10px; border:1px solid rgba(227,161,58,.48); border-radius:4px; background:transparent; color:var(--points-amber); font-size:10px; cursor:pointer; white-space:nowrap; } .points-ledger-grid button:hover { background:var(--points-amber-soft); } .points-billing-policy { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; border:1px solid var(--points-line); border-radius:6px; background:var(--points-panel); } .points-billing-policy article { display:flex; align-items:flex-start; gap:9px; min-width:0; min-height:72px; padding:14px 16px; border-right:1px solid var(--points-line); } .points-billing-policy article:last-child { border-right:0; } .points-billing-policy i { flex:0 0 auto; margin-top:1px; color:var(--points-faint); font-size:15px; } .points-billing-policy strong,.points-billing-policy span { display:block; } .points-billing-policy strong { color:var(--points-text); font-size:10px; } .points-billing-policy span { margin-top:5px; color:var(--points-faint); font-size:9px; line-height:1.5; } body.desktop-light #desktop-points-redesign { --points-amber:#b97816; --points-amber-soft:#fff7e8; } body.desktop-light .points-score-line em { color:#177e74; } @media (max-width:1180px) { .points-overview { grid-template-columns:minmax(0,1fr) 360px; } .points-main-grid { grid-template-columns:1fr; } } @media (max-width:820px) { body.route-points #app .desktop-points-workspace { padding:28px 20px 48px !important; } #desktop-points-header { align-items:flex-start; flex-direction:column; min-height:0; } .points-overview { grid-template-columns:1fr; } .points-score-block { border-right:0; border-bottom:1px solid var(--points-line); } .points-ledger-grid,.points-billing-policy { grid-template-columns:1fr; } .points-ledger-grid article:first-child,.points-billing-policy article { border-right:0; border-bottom:1px solid var(--points-line); } .points-billing-policy article:last-child { border-bottom:0; } } @media (max-width:560px) { .points-score-block { padding:20px; } .points-score-line strong { font-size:40px; } .points-overview-stats { grid-template-columns:1fr; } .points-overview-stats article,.points-overview-stats article:nth-child(2) { grid-column:1; border-right:0; } .points-rule-row { grid-template-columns:30px minmax(0,1fr) 40px; } .points-rule-row small { display:none; } .points-ledger-grid article { grid-template-columns:34px minmax(0,1fr); } .points-ledger-grid button { grid-column:2; justify-self:start; } } /* Stable desktop headers for the legacy Q&A and grading workspaces. */ @media (min-width:981px) { body { --desktop-page-gutter:64px; } body:not(.route-auth) #app .min-h-screen { width:100% !important; max-width:none !important; margin:0 !important; padding:54px var(--desktop-page-gutter) 76px !important; box-sizing:border-box !important; } #desktop-broadcast .data-shell, .exam-hub-shell, .exam-paper-shell, .official-library-shell { width:100% !important; max-width:none !important; margin:0 !important; padding:54px var(--desktop-page-gutter) 76px !important; box-sizing:border-box !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED, body.route-grade-RETIRED #desktop-grade-header-RETIRED { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:28px !important; min-height:143px !important; margin:0 0 27px !important; padding:0 0 25px !important; border-bottom:1px solid var(--shell-line) !important; background:transparent !important; box-sizing:border-box !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED > div, body.route-grade-RETIRED #desktop-grade-header-RETIRED > div { min-width:0; } body.route-qa-RETIRED #desktop-qa-header-RETIRED span, body.route-grade-RETIRED #desktop-grade-header-RETIRED span { display:block; color:#35d6c5 !important; font-size:10px !important; font-weight:700; line-height:1.3; } body.route-qa-RETIRED #desktop-qa-header-RETIRED h1, body.route-grade-RETIRED #desktop-grade-header-RETIRED h1 { margin:7px 0 9px !important; color:var(--shell-text) !important; font-size:30px !important; font-weight:700; line-height:1.2 !important; letter-spacing:0 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED p, body.route-grade-RETIRED #desktop-grade-header-RETIRED p { max-width:680px; margin:0 !important; color:var(--shell-muted) !important; font-size:14px !important; line-height:1.5 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED a, body.route-grade-RETIRED #desktop-grade-header-RETIRED a { flex:0 0 auto; padding:9px 13px; border:1px solid #268b7f; border-radius:4px; background:#178f83; color:#fff !important; font-size:12px; text-decoration:none; white-space:nowrap; } body.route-grade-RETIRED #app .min-h-screen > .desktop-grade-RETIRED-legacy-header { display:none !important; } body.route-grade-RETIRED #app .min-h-screen > .desktop-grade-RETIRED-content { width:100% !important; margin:0 0 18px !important; padding:28px 40px !important; border:1px solid var(--shell-line) !important; border-radius:6px !important; background:var(--shell-surface) !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .min-h-screen > .desktop-grade-RETIRED-content > * { max-width:none !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .min-h-screen > .desktop-grade-RETIRED-content:last-child { margin-bottom:0 !important; } body.route-qa-RETIRED #app .min-h-screen > div:not(.desktop-qa-RETIRED-legacy-header) { margin-bottom:18px !important; } } /* Compact account footer: keep the utilities, but make their hierarchy calm. */ @media (min-width:0px) { #desktop-nav .desktop-nav-footer { display:flex; gap:0; max-height:none; overflow:visible; padding:18px 22px 16px; } #desktop-nav .desktop-nav-user { padding:0; } #desktop-nav .desktop-nav-user > div { gap:6px; } #desktop-nav .desktop-nav-user strong { font-size:13px; } #desktop-nav .desktop-nav-user span { margin-top:4px; font-size:11px; } #desktop-nav .desktop-nav-footer-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid #292933; } #desktop-nav .customer-support-link, #desktop-nav .pro-upgrade-link { min-height:34px; margin:0; padding:8px 9px; border-radius:4px; font-size:11px; } #desktop-nav .customer-support-link { border:1px solid #303038; background:transparent; } #desktop-nav .pro-upgrade-link { border-color:rgba(53,214,197,.38); background:rgba(23,143,131,.10); } #desktop-nav .pro-upgrade-link span { font-size:8px; } #desktop-nav .customer-support-link i, #desktop-nav .pro-upgrade-link i { font-size:15px; } #desktop-nav #theme-toggle, #desktop-nav .desktop-home-footer { display:block; width:100%; min-height:30px; margin-top:12px; padding:10px 0 0; border-top:1px solid #292933; color:#8d8995; font-size:11px; text-decoration:none; } #desktop-nav .desktop-home-footer:hover { color:#35d6c5; } body.desktop-light #desktop-nav .desktop-nav-footer-actions, body.desktop-light #desktop-nav .desktop-home-footer { border-color:#e0e6ec; } } /* Official learning center: templates, card study, and writing practice share one workspace. */ .official-interactive-entry > i { border-color:#477b75 !important; background:#102522 !important; color:#6bd3bc !important; } .interactive-learning-shell { width:min(1320px,calc(100% - 56px)); margin:0 auto; padding:42px 0 72px; } .interactive-learning-head { padding:4px 0 34px; border-bottom:1px solid #2b3037; } .interactive-learning-head > a { display:inline-block; margin-bottom:30px; color:#8d98a6; font-size:13px; text-decoration:none; } .interactive-learning-head > a:hover { color:#6bd3bc; } .interactive-learning-head > span,.interactive-section-title span,.interactive-board-card header span { color:#6bd3bc; font-size:10px; font-weight:800; letter-spacing:.13em; } .interactive-hero { display:flex; align-items:end; justify-content:space-between; gap:32px; }.interactive-learning-head h1 { margin:9px 0 12px; font-size:46px; letter-spacing:-.06em; }.interactive-learning-head p { max-width:720px; margin:0; color:#939ba7; font-size:15px; line-height:1.72; } .interactive-hero > aside { display:grid; grid-template-columns:auto 1fr; column-gap:11px; min-width:210px; padding:18px 20px; border:1px solid #254d49; border-radius:8px; background:linear-gradient(135deg,#102220,#11151a); }.interactive-hero > aside i { grid-row:span 2; display:grid; place-items:center; width:36px; height:36px; border-radius:5px; background:#16443e; color:#6bd3bc; font-size:20px; }.interactive-hero > aside span { color:#73d8ca; font-size:10px; font-weight:800; letter-spacing:.1em; }.interactive-hero > aside strong { margin-top:5px; color:#e8f3f1; font-size:15px; line-height:1.35; } .interactive-learning-stats { display:flex; gap:0; margin-top:31px; }.interactive-learning-stats b { display:flex; align-items:baseline; gap:7px; padding:0 28px; border-left:1px solid #283038; color:#6bd3bc; font-size:22px; }.interactive-learning-stats b:first-child { padding-left:0; border-left:0; }.interactive-learning-stats small { color:#9299a3; font-size:12px; font-weight:500; } .interactive-learning-layout { padding-top:34px; } .interactive-section-title { display:flex; align-items:end; justify-content:space-between; margin-bottom:16px; }.interactive-section-title h2,.interactive-board-card h2 { margin:7px 0 0; font-size:23px; }.interactive-section-title p { margin:0; color:#77808b; font-size:12px; } .interactive-lesson-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.interactive-lesson-card { position:relative; min-height:238px; padding:23px; overflow:hidden; border:1px solid #2c323a; border-radius:8px; background:linear-gradient(145deg,#15191f,#111318); color:inherit; text-align:left; cursor:pointer; transition:.2s ease; }.interactive-lesson-card::after { position:absolute; right:-36px; bottom:-48px; width:150px; height:150px; border:1px solid color-mix(in srgb,var(--lesson-color) 35%,transparent); border-radius:50%; content:''; opacity:.38; }.interactive-lesson-card:hover { border-color:var(--lesson-color); background:linear-gradient(145deg,#19211f,#12161a); transform:translateY(-3px); box-shadow:0 16px 38px rgba(0,0,0,.22); }.interactive-lesson-card > i { display:grid; place-items:center; width:38px; height:38px; margin-bottom:23px; border:1px solid color-mix(in srgb,var(--lesson-color) 45%,#384047); border-radius:6px; color:var(--lesson-color); font-size:21px; }.interactive-lesson-card > span { color:var(--lesson-color); font-size:10px; font-weight:800; letter-spacing:.09em; }.interactive-lesson-card h3 { margin:8px 0; font-size:20px; }.interactive-lesson-card p { min-height:54px; margin:0; color:#9099a4; font-size:12px; line-height:1.6; }.interactive-lesson-card b { position:absolute; bottom:21px; color:#cdd4db; font-size:12px; }.interactive-lesson-card em { margin-left:6px; color:var(--lesson-color); font-size:17px; font-style:normal; } .interactive-study-bar { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:20px; height:58px; padding:0 24px; border-bottom:1px solid #2a3036; background:#101216; }.interactive-study-bar button,.interactive-study-bar a { border:0; background:none; color:#9da6b0; font:inherit; font-size:12px; text-decoration:none; cursor:pointer; }.interactive-study-bar a { color:#6bd3bc; }.interactive-study-bar div { display:flex; align-items:baseline; gap:10px; }.interactive-study-bar span { color:#7c8792; font-size:11px; }.interactive-study-bar strong { font-size:14px; }.interactive-study-frame { display:block; width:100%; height:calc(100vh - 58px); border:0; background:#fff; } body.desktop-light .interactive-learning-head { border-color:#dce3e9; } body.desktop-light .interactive-learning-head p,body.desktop-light .interactive-lesson-card p { color:#657180; } body.desktop-light .interactive-lesson-card { border-color:#dbe3e8; background:#fff; } body.desktop-light .interactive-lesson-card:hover { background:#f7fcfb; } body.desktop-light .interactive-study-bar { border-color:#dce3e9; background:#fff; } @media (max-width:1080px) { .interactive-lesson-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.interactive-hero { align-items:start; flex-direction:column; }.interactive-learning-shell { width:min(100% - 36px,900px); } } @media (max-width:680px) { .interactive-lesson-grid { grid-template-columns:1fr; }.interactive-learning-stats { flex-wrap:wrap; gap:12px; }.interactive-learning-stats b { padding:0 14px; }.interactive-learning-stats b:first-child { width:100%; }.interactive-section-title { align-items:start; flex-direction:column; gap:8px; } } .official-templates-shell { width:min(1320px,calc(100% - 56px)); margin:0 auto; padding:48px 0 78px; box-sizing:border-box; } .official-templates-shell a { color:inherit; text-decoration:none; } .official-templates-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding-bottom:26px; border-bottom:1px solid #292930; } .official-templates-head.is-community { min-height:116px; } .official-templates-head span { color:#35d6c5; font-size:10px; font-weight:800; letter-spacing:0; } .official-templates-head h1 { margin:8px 0 10px; color:#f7f5f9; font-size:38px; line-height:1.08; font-weight:850; } .official-templates-head p { max-width:680px; margin:0; color:#8b8792; font-size:14px; line-height:1.65; } .official-templates-head > a,.official-templates-loading > a { flex:0 0 auto; min-height:36px; padding:9px 13px; border:1px solid #2f6e67; border-radius:5px; background:#12201f; color:#35d6c5; font-size:12px; font-weight:700; } .official-templates-community-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,390px); gap:18px; align-items:stretch; margin:20px 0 16px; } .official-templates-community-hero > div:first-child { min-height:164px; padding:24px; border:1px solid #2c2d34; border-radius:7px; background:#111115; } .official-templates-community-hero > div:first-child span,.official-template-section-title span { color:#35d6c5; font-size:10px; font-weight:800; } .official-templates-community-hero h2,.official-template-section-title h2 { margin:8px 0 0; color:#f0edf4; font-size:26px; line-height:1.18; font-weight:820; } .official-templates-community-hero p { max-width:620px; margin:12px 0 0; color:#96919c; font-size:14px; line-height:1.7; } .official-templates-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:22px 0 14px; } .official-templates-toolbar label { display:flex; align-items:center; gap:10px; min-width:320px; flex:1; min-height:46px; padding:0 12px 0 14px; border:1px solid #2c2d35; border-radius:6px; background:#111115; color:#77737e; } .official-templates-toolbar input { width:100%; border:0; outline:0; background:transparent; color:#ecebf0; font:inherit; font-size:14px; } .official-templates-toolbar label:focus-within { border-color:#35d6c5; box-shadow:0 0 0 3px rgba(53,214,197,.12); } .official-templates-toolbar [data-template-clear] { display:grid; place-items:center; width:26px; height:26px; padding:0; border:1px solid #2d615c; border-radius:4px; background:#13211f; color:#35d6c5; font-size:18px; line-height:1; cursor:pointer; } .official-templates-toolbar div { display:flex; gap:8px; } .official-templates-toolbar button { min-height:36px; padding:0 12px; border:1px solid #303038; border-radius:5px; background:#121216; color:#87838e; font:700 12px/1 inherit; cursor:pointer; } .official-templates-toolbar button.active { border-color:#35d6c5; background:#173c38; color:#35d6c5; box-shadow:0 0 16px rgba(53,214,197,.18); } .official-templates-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; border:1px solid #292930; border-radius:6px; overflow:hidden; background:#111115; } .official-templates-summary article { min-height:78px; padding:17px 20px; border-right:1px solid #292930; } .official-templates-summary article:last-child { border-right:0; } .official-templates-summary strong,.official-templates-summary span { display:block; } .official-templates-summary strong { color:#35d6c5; font-size:24px; line-height:1; } .official-templates-summary span { margin-top:8px; color:#85818c; font-size:12px; } .official-template-community-layout { display:grid; grid-template-columns:minmax(220px,270px) minmax(0,1fr); gap:18px; align-items:start; } .official-template-topic-rail { position:sticky; top:24px; display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid #292930; border-radius:7px; background:#111115; } .official-template-topic-rail strong { margin-bottom:4px; color:#eeeaf0; font-size:14px; } .official-template-topic-rail button { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; min-height:36px; padding:0 10px; border:1px solid #282930; border-radius:5px; background:#141419; color:#aaa6b0; text-align:left; cursor:pointer; } .official-template-topic-rail button:hover,.official-template-topic-rail button.active { border-color:#35d6c5; color:#35d6c5; background:#112522; box-shadow:inset 3px 0 0 #35d6c5; } .official-template-topic-rail span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .official-template-topic-rail b { color:#35d6c5; font-size:11px; } .official-template-feed { min-width:0; } .official-template-recent { margin-bottom:18px; } .official-template-section-title { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:10px; padding-bottom:12px; border-bottom:1px solid #292930; } .official-template-section-title h2 { font-size:22px; } .official-template-recent > div:last-child { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; } .official-template-post { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:14px; min-height:150px; min-width:0; padding:18px; border:1px solid #2b2c33; border-radius:7px; background:#111115; transition:border-color .16s ease, background .16s ease, transform .16s ease; } .official-template-post:hover { border-color:#35d6c5; background:#13201e; transform:translateY(-1px); } .official-template-avatar { display:grid; place-items:center; width:40px; height:40px; border:1px solid #2b766e; border-radius:5px; background:#122c29; color:#35d6c5; font-size:16px; font-weight:800; } .official-template-post div:nth-child(2) { min-width:0; } .official-template-post div:nth-child(2) > span { display:block; color:#35d6c5; font-size:11px; font-weight:850; } .official-template-post strong { display:block; margin-top:7px; color:#f4f1f7; font-size:18px; line-height:1.36; font-weight:820; } .official-template-post p { margin:7px 0 0; color:#9a96a0; font-size:13px; line-height:1.6; } .official-template-post small { display:block; margin-top:10px; color:#77737e; font-size:11px; } .official-template-post > b { align-self:center; color:#35d6c5; font-size:12px; white-space:nowrap; } .official-template-topic { margin-top:14px; border:1px solid #292930; border-radius:7px; background:#111115; overflow:hidden; } .official-template-topic > header { display:flex; align-items:center; gap:14px; min-height:90px; padding:20px 24px; border-bottom:1px solid #25252c; background:linear-gradient(90deg,rgba(53,214,197,.08),rgba(17,17,21,0)); } .official-template-topic > header > div { min-width:0; } .official-template-topic > header i { display:grid; place-items:center; width:38px; height:38px; border:1px solid #29796f; border-radius:5px; background:#122b28; color:#35d6c5; font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; } .official-template-topic h2 { margin:0; color:#f4f1f7; font-size:24px; line-height:1.2; font-weight:840; } .official-template-topic p { margin:5px 0 0; color:#77737e; font-size:12px; line-height:1.45; } .official-template-issue-list { padding:4px 22px 20px; } .official-template-issue-list section { padding-top:8px; } .official-template-issue-list section + section { margin-top:12px; padding-top:14px; border-top:1px solid #292a30; } .official-template-issue-list h3 { display:flex; align-items:center; gap:8px; margin:0 0 10px; color:#35d6c5; font-size:17px; line-height:1.35; font-weight:820; } .official-template-issue-list h3 small { padding:2px 7px; border-radius:99px; background:#25262d; color:#8e8a94; font-size:10px; } .official-template-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 18px; min-width:0; padding:14px 0; border-top:1px solid #24242a; } .official-template-row strong { color:#f0edf4; font-size:16px; line-height:1.45; font-weight:760; } .official-template-row p { grid-column:1; min-width:0; margin:0; color:#9a96a0; font-size:13px; line-height:1.65; overflow-wrap:anywhere; } .official-template-row span { grid-column:2; grid-row:1 / span 2; align-self:center; color:#35d6c5; font-size:12px; font-weight:700; } .official-template-row:hover strong { color:#35d6c5; } .official-template-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:220px; margin-top:14px; border:1px dashed #2d615c; border-radius:7px; background:#101413; color:#827f89; } .official-template-empty strong { color:#35d6c5; font-size:18px; } .official-templates-loading { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; min-height:360px; color:#8b8792; } .official-templates-loading i { color:#35d6c5; font-size:28px; animation:spin 1s linear infinite; } .official-templates-loading strong { color:#f1eff4; font-size:18px; } .official-template-reader { display:grid; grid-template-columns:220px minmax(0,1fr); gap:22px; margin-top:24px; align-items:start; } .official-template-reader aside { position:sticky; top:24px; padding:18px; border:1px solid #292930; border-radius:7px; background:#111115; } .official-template-reader aside span { display:block; margin-top:16px; color:#77737e; font-size:10px; font-weight:800; } .official-template-reader aside span:first-child { margin-top:0; } .official-template-reader aside strong { display:block; margin-top:6px; color:#e9e6ed; font-size:14px; line-height:1.5; } .official-template-reader > section { border:1px solid #292930; border-radius:7px; background:#111115; overflow:hidden; } .official-template-reader-title { padding:28px 32px; border-bottom:1px solid #25252c; background:linear-gradient(90deg,rgba(53,214,197,.09),rgba(17,17,21,0)); } .official-template-reader-title small { color:#35d6c5; font-size:10px; font-weight:800; } .official-template-reader-title h2 { margin:8px 0 0; color:#f8f5fb; font-size:32px; line-height:1.25; font-weight:850; } .official-template-content { padding:32px; } .official-template-content p { margin:0 0 20px; color:#c9c6cf; font-size:16px; line-height:2; white-space:pre-wrap; overflow-wrap:anywhere; } body.desktop-light .official-templates-head,.desktop-light .official-template-topic,.desktop-light .official-templates-summary,.desktop-light .official-template-reader aside,.desktop-light .official-template-reader > section,.desktop-light .official-templates-community-hero > div:first-child,.desktop-light .official-template-topic-rail,.desktop-light .official-template-section-title,.desktop-light .official-template-post,.desktop-light .official-template-empty { border-color:#dce3ea; } body.desktop-light .official-template-topic,.desktop-light .official-templates-summary,.desktop-light .official-template-reader aside,.desktop-light .official-template-reader > section,.desktop-light .official-templates-toolbar label,.desktop-light .official-templates-community-hero > div:first-child,.desktop-light .official-template-topic-rail,.desktop-light .official-template-post { background:#fff; } body.desktop-light .official-templates-head h1,.desktop-light .official-template-topic h2,.desktop-light .official-template-row strong,.desktop-light .official-template-reader aside strong,.desktop-light .official-template-reader-title h2,.desktop-light .official-templates-community-hero h2,.desktop-light .official-template-section-title h2,.desktop-light .official-template-topic-rail strong,.desktop-light .official-template-post strong { color:#222b35; } body.desktop-light .official-templates-head p,.desktop-light .official-template-topic p,.desktop-light .official-template-row p,.desktop-light .official-template-content p,.desktop-light .official-templates-community-hero p,.desktop-light .official-template-post p { color:#5f6874; } body.desktop-light .official-template-topic-rail button { border-color:#e0e6ed; background:#f8fafc; color:#526172; } body.desktop-light .official-template-topic-rail button:hover,body.desktop-light .official-template-topic-rail button.active { border-color:#1da99b; background:#eaf8f6; color:#137f75; } .desktop-light .official-templates-toolbar [data-template-clear] { border-color:#bfe5e1; background:#eefaf8; color:#137f75; } .desktop-light .official-template-empty { background:#f8fbfc; color:#657384; } /* Q&A and grading are native Taro pages. Keep them visible while the shell provides the desktop frame and sidebars. */ body.route-qa-RETIRED #app, body.route-grade-RETIRED #app { visibility:visible !important; pointer-events:auto !important; } #pro-upgrade-modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; box-sizing:border-box; } .pro-upgrade-backdrop { position:absolute; inset:0; background:rgba(5,8,12,.56); backdrop-filter:blur(8px); } .pro-upgrade-dialog { position:relative; width:min(680px,100%); max-height:calc(100vh - 40px); padding:30px; box-sizing:border-box; overflow-y:auto; border:1px solid #30353d; border-radius:8px; background:#14181d; color:#edf1f4; box-shadow:0 28px 80px rgba(0,0,0,.36); } .pro-close { position:absolute; top:14px; right:16px; width:30px; height:30px; border:0; border-radius:4px; background:transparent; color:#9da7b2; font-size:24px; cursor:pointer; z-index:2; } .pro-eyebrow { display:inline-block; margin-right:36px; color:#35d6c5; font:700 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; } .pro-upgrade-dialog h2 { margin:9px 0 7px; color:#f4f7f8; font-size:26px; line-height:1.25; } .pro-upgrade-dialog > p { margin:0 0 16px; color:#9ea8b3; font-size:13px; line-height:1.55; } .membership-tiers { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin-bottom:14px; } .membership-tier { padding:13px 14px; border:1px solid #303842; border-radius:6px; background:#101419; color:#cfd7dc; text-align:left; } .membership-tier.active { border-color:#35d6c5; background:#152a28; } .membership-tier strong,.membership-tier span,.membership-tier small { display:block; } .membership-tier strong { color:#eaf3f2; font-size:13px; letter-spacing:.08em; } .membership-tier span { margin-top:6px; color:#9ba8b0; font-size:11px; line-height:1.45; min-height:0; } .membership-tier small { margin-top:8px; color:#35d6c5; font-size:11px; line-height:1.4; } .pro-member-summary { margin:0 0 14px; padding:10px 12px; border:1px solid rgba(53,214,197,.22); border-radius:6px; background:rgba(21,42,40,.55); color:#d7f7f2; font-size:12px; line-height:1.5; } .pro-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .pro-plan { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-height:148px; padding:18px 14px 14px; border:1px solid #303842; border-radius:6px; background:#1a2027; color:#eff4f6; text-align:left; cursor:pointer; overflow:visible; } .pro-plan:hover,.pro-plan.selected { border-color:#35d6c5; background:#17302e; } .pro-plan.recommended { border-color:#2b968b; } .pro-plan::before,.pro-plan::after { content:none !important; display:none !important; } .pro-plan-badge { position:absolute; top:8px; right:8px; left:auto; padding:2px 6px; border-radius:3px; background:#35d6c5; color:#112523; font-size:10px; font-weight:800; line-height:1.2; z-index:1; } .pro-plan-name { display:block; padding-right:42px; font-size:14px; line-height:1.3; font-weight:700; } .pro-plan-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 8px; margin:2px 0 0; color:#35d6c5; line-height:1.1; } .pro-plan-original { color:#7f8b95; font-size:12px; font-weight:600; text-decoration:line-through; } .pro-plan-price em { font-size:24px; font-style:normal; font-weight:750; color:#35d6c5; } .pro-plan-tag { font-size:10px; font-style:normal; font-weight:700; color:#86e8da; opacity:.9; } .pro-plan-note { display:block; margin-top:auto; color:#9ca7b1; font-size:11px; line-height:1.4; } .pro-plan.is-locked .pro-plan-price em,.pro-plan.is-locked .pro-plan-tag { color:#77828b; } .pro-selected { min-height:20px; margin:18px 0 10px; color:#9ea8b3; font-size:12px; }.pro-confirm { width:100%; padding:12px; border:0; border-radius:4px; background:#178f83; color:#fff; font-weight:700; cursor:pointer; }.pro-confirm:disabled { background:#2e353d; color:#7e8892; cursor:not-allowed; } .pro-payment-form { display:grid; grid-template-columns:174px minmax(0,1fr); gap:18px; margin-top:18px; padding-top:18px; border-top:1px solid #303842; } .pro-payment-form[hidden] { display:none !important; } .pro-payment-steps { grid-column:1 / -1; display:flex; gap:8px; margin-bottom:2px; } .pro-payment-steps span { flex:1; padding:7px 9px; border:1px solid #344550; border-radius:4px; background:#151b21; color:#9eabb5; font-size:10px; font-weight:700; } .pro-payment-steps span:first-child { border-color:#2e887e; background:#13302d; color:#86e8da; } .pro-payment-qr { display:flex; flex-direction:column; align-items:center; gap:9px; padding:12px; border:1px solid #303842; border-radius:6px; background:#101419; color:#b8c4cc; font-size:12px; } .pro-payment-qr img { display:block; width:148px; height:148px; object-fit:cover; background:#fff; } .pro-payment-fields { display:grid; gap:10px; } .pro-payment-order-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 13px; border:1px solid #315e5a; border-radius:6px; background:linear-gradient(120deg,#142b29,#17212b); } .pro-payment-order-summary span { display:grid; gap:4px; color:#91a5a7; font-size:10px; } .pro-payment-order-summary b { color:#dff9f5; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; letter-spacing:.04em; } .pro-payment-order-summary strong { color:#a8c0bd; font-size:11px; font-weight:650; } .pro-payment-order-summary em { margin-left:5px; color:#5ee6d5; font-size:22px; font-style:normal; font-weight:800; } .pro-payment-fields label { display:grid; gap:5px; color:#b7c0c9; font-size:12px; } .pro-payment-fields input { width:100%; min-width:0; padding:9px 10px; box-sizing:border-box; border:1px solid #3b4651; border-radius:4px; outline:0; background:#101419; color:#eef4f6; font:inherit; font-size:13px; } .pro-payment-fields input:focus { border-color:#35d6c5; box-shadow:0 0 0 2px rgba(53,214,197,.14); } .pro-payment-fields input[type="file"] { padding:7px; color:#99a6b0; font-size:11px; } .pro-payment-note,.pro-payment-status { grid-column:1 / -1; margin:0; font-size:12px; line-height:1.55; } .pro-payment-note { color:#91a0aa; }.pro-payment-status { min-height:18px; color:#4fe0d0; } .pro-submit-payment { grid-column:1 / -1; width:100%; padding:12px; border:0; border-radius:4px; background:#35d6c5; color:#102522; font-weight:800; cursor:pointer; } .pro-submit-payment:disabled { background:#33413f; color:#8fa5a0; cursor:default; } body.desktop-light .pro-upgrade-dialog { background:rgba(255,255,255,.96); border-color:#d3dce5; color:#202937; } .desktop-light .pro-upgrade-dialog h2 { color:#202937; } .desktop-light .pro-plan { background:#f7fafc; border-color:#d7e0e8; color:#283340; } .desktop-light .pro-plan:hover,.desktop-light .pro-plan.selected { background:#eaf7f5; border-color:#1d9b8e; } .desktop-light .pro-upgrade-dialog > p,.desktop-light .pro-selected,.desktop-light .pro-plan-note { color:#647384; } .desktop-light .pro-member-summary { border-color:#b7e3dd; background:#eef9f7; color:#1f5f58; } .desktop-light .pro-plan-original { color:#8a97a3; } .desktop-light .pro-plan-price em,.desktop-light .pro-plan-tag { color:#178f83; } .pro-plan.is-locked { border-color:#394149; background:#15191e; color:#77828b; cursor:not-allowed; opacity:.72; } .pro-plan.is-locked .pro-plan-price,.pro-plan.is-locked .pro-plan-note { color:#77828b; } .pro-one-time-note { margin:10px 0 0; color:#7f8b95; font-size:11px; line-height:1.5; } body.desktop-light .customer-support-link { color:#657180; }.desktop-light .customer-support-link:hover { color:#1d7e74; } body.desktop-light .membership-tier { border-color:#d7e0e8; background:#f8fafc; color:#33424f; }.desktop-light .membership-tier.active { border-color:#1d9b8e; background:#eaf7f5; }.desktop-light .membership-tier strong { color:#20303c; }.desktop-light .membership-tier span { color:#667688; }.desktop-light .membership-tier small { color:#178f83; } body.desktop-light .pro-payment-form { border-color:#dbe3ea; }.desktop-light .pro-payment-qr { border-color:#d5e0e8; background:rgba(248,251,253,.86); color:#596979; }.desktop-light .pro-payment-fields label { color:#526170; }.desktop-light .pro-payment-fields input { border-color:#cfdbe5; background:rgba(255,255,255,.82); color:#23303c; }.desktop-light .pro-payment-note { color:#6a7988; }.desktop-light .pro-payment-status { color:#138d81; } @media (max-width:620px) { .pro-upgrade-dialog { padding:24px 18px; }.pro-plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.pro-payment-form { grid-template-columns:1fr; }.pro-payment-qr { flex-direction:row; justify-content:center; }.pro-payment-qr img { width:110px; height:110px; } } #linka-support-modal, #linka-student-login-dialog, #course-wechat-qr-modal, #course-enrollment-modal, #course-package-detail-modal, #course-upload-modal { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:20px; box-sizing:border-box; }.support-backdrop { position:absolute; inset:0; background:rgba(5,8,12,.58); backdrop-filter:blur(8px); }.support-dialog { position:relative; width:min(390px,100%); padding:28px; box-sizing:border-box; border:1px solid #303842; border-radius:8px; background:#14181d; color:#e8edf0; text-align:center; box-shadow:0 28px 80px rgba(0,0,0,.4); }.support-close { position:absolute; top:12px; right:14px; border:0; background:transparent; color:#9da7b2; font-size:24px; cursor:pointer; }.support-dialog > span { color:#35d6c5; font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; }.support-dialog h2 { margin:10px 0 8px; font-size:22px; }.support-dialog p { margin:0 auto 18px; color:#a0abb4; font-size:12px; line-height:1.65; text-align:left; }.support-dialog img { display:block; width:min(250px,76vw); height:auto; margin:0 auto 12px; background:#fff; }.support-dialog small { display:block; color:#7f8b95; font-size:10px; }.desktop-light .support-dialog { border-color:#d3dce5; background:rgba(255,255,255,.97); color:#25313b; }.desktop-light .support-dialog p { color:#657483; }.desktop-light .support-dialog small { color:#768594; } @media (min-width:0px) { html, body { background:#0d0d10; } body.desktop-dark * { scrollbar-color:#34343b #0d0d10; } body.desktop-light * { scrollbar-color:#bec4cd transparent; } body.desktop-dark *::-webkit-scrollbar, body.desktop-light *::-webkit-scrollbar { width:7px; height:7px; } body.desktop-dark *::-webkit-scrollbar-track { background:#0d0d10; } body.desktop-light *::-webkit-scrollbar-track { background:transparent; } body.desktop-dark *::-webkit-scrollbar-thumb { background:#34343b; border-radius:0; } body.desktop-light *::-webkit-scrollbar-thumb { background:#bec4cd; border-radius:0; } } /* Light desktop: clear canvas, translucent surfaces and no dark-mode residue. */ @media (min-width:0px) { html:has(body.desktop-light), body.desktop-light { background:#f7f9fc; } body.desktop-light:not(.route-auth) #app, body.desktop-light:not(.route-auth) #app > div, body.desktop-light:not(.route-auth) #app .taro_page, body.desktop-light:not(.route-auth) #app .taro_page_show, body.desktop-light:not(.route-auth) #app .taro-tabbar__panel, body.desktop-light:not(.route-auth) #app taro-page-core, body.desktop-light:not(.route-auth):not(.route-qa):not(.route-grade) #app .min-h-screen, body.desktop-light:not(.route-auth) page { background-color:transparent !important; background-image:none !important; } body.desktop-light.route-has-context #app { border-left:1px solid rgba(210,218,228,.7); border-right:1px solid rgba(210,218,228,.7); } body.desktop-light:not(.route-qa):not(.route-grade) #app .bg-card, body.desktop-light:not(.route-qa):not(.route-grade) #app .bg-white, body.desktop-light:not(.route-qa):not(.route-grade) #app .glass-card, body.desktop-light:not(.route-qa):not(.route-grade) #app .glass-card-frosted, body.desktop-light:not(.route-qa):not(.route-grade) #app .rounded-xl, body.desktop-light:not(.route-qa):not(.route-grade) #app .rounded-2xl { background-color:rgba(255,255,255,.48) !important; border-color:rgba(211,219,229,.64) !important; box-shadow:0 1px 0 rgba(255,255,255,.9) inset !important; backdrop-filter:blur(18px) saturate(125%); -webkit-backdrop-filter:blur(18px) saturate(125%); } body.desktop-light #desktop-nav, body.desktop-light #desktop-contextbar { background:rgba(255,255,255,.58); border-color:rgba(207,216,226,.76); backdrop-filter:blur(28px) saturate(130%); -webkit-backdrop-filter:blur(28px) saturate(130%); } body.desktop-light #desktop-contextbar .context-tabs { background:rgba(255,255,255,.34); } body.desktop-light #desktop-contextbar .context-message { background:rgba(255,255,255,.52); border-left-color:#c8d0da; } body.desktop-light #desktop-contextbar .context-message.user { background:rgba(225,246,242,.68); border-left-color:#20a99b; } body.desktop-light #desktop-contextbar .context-message-text, body.desktop-light #desktop-contextbar .agent-tools-panel h3, body.desktop-light #desktop-contextbar .agent-history-head h3, body.desktop-light #desktop-contextbar .agent-memory-card strong { color:#2d333b; } body.desktop-light #desktop-contextbar .context-message-text.is-markdown h2, body.desktop-light #desktop-contextbar .context-message-text.is-markdown h3, body.desktop-light #desktop-contextbar .context-message-text.is-markdown h4, body.desktop-light #desktop-contextbar .context-message-text.is-markdown h5 { color:#202733; } body.desktop-light #desktop-contextbar .context-message-text.is-markdown a { color:#137f75; } body.desktop-light #desktop-contextbar .context-message-text.is-markdown code { border-color:#d7e0e5; background:#f1f5f6; color:#23564f; } body.desktop-light #desktop-contextbar .context-message-text.is-markdown pre { border-color:#dce3e8; background:#f4f7f8; } body.desktop-light #desktop-contextbar .context-message-text.is-markdown pre code { color:#2d3940; } body.desktop-light #desktop-contextbar .context-message-text.is-markdown blockquote { color:#5f6d70; } body.desktop-light #desktop-contextbar .agent-markdown-table th, body.desktop-light #desktop-contextbar .agent-markdown-table td { border-color:#d9e1e6; } body.desktop-light #desktop-contextbar .agent-markdown-table th { background:#edf5f3; color:#234a45; } body.desktop-light #desktop-contextbar .agent-message-actions button, body.desktop-light #desktop-contextbar .agent-command-hints button, body.desktop-light #desktop-contextbar .agent-quick-tools button, body.desktop-light #desktop-contextbar .agent-attach-button, body.desktop-light #desktop-contextbar .agent-tools-panel > button { background:rgba(255,255,255,.48); border-color:rgba(196,206,217,.82); color:#59616c; } body.desktop-light #desktop-contextbar .agent-quick-tools, body.desktop-light #desktop-contextbar .context-chat-form { border-color:rgba(203,212,222,.78); } body.desktop-light #desktop-contextbar .agent-memory-card { background:rgba(255,255,255,.42); border-color:rgba(202,212,222,.78); border-left-color:#20a99b; } body.desktop-light #desktop-contextbar .agent-tools-panel p, body.desktop-light #desktop-contextbar .agent-memory-text, body.desktop-light #desktop-contextbar .agent-tools-panel small, body.desktop-light #desktop-contextbar .agent-composer-help { color:#737b86; } body.desktop-light #desktop-contextbar .context-drop-hint { background:rgba(247,251,251,.94); color:#178f83; } body.desktop-light #desktop-contextbar .agent-history-panel > p, body.desktop-light #desktop-contextbar .agent-conversation-open small { color:#737b86; } body.desktop-light #desktop-contextbar .agent-conversation-item { border-color:#dfe5eb; background:#fff; } body.desktop-light #desktop-contextbar .agent-conversation-item.active { border-color:#52a99f; background:#edf8f6; } body.desktop-light #desktop-contextbar .agent-conversation-open { color:#2d333b; } } /* Unified contrast and surface hierarchy for legacy pages with inline themes. */ @media (min-width:0px) { body.desktop-light { --shell-canvas:#f7f9fc; --shell-surface:rgba(255,255,255,.72); --shell-strong:#fff; --shell-line:#d8e0e9; --shell-text:#202733; --shell-muted:#687382; --shell-faint:#8a95a3; --shell-accent:#178f83; --shell-accent-soft:#e4f3f0; } body.desktop-dark { --shell-canvas:#09090b; --shell-surface:#111114; --shell-strong:#15151a; --shell-line:#292930; --shell-text:#ecebf0; --shell-muted:#aaa6b1; --shell-faint:#777380; --shell-accent:#35d6c5; --shell-accent-soft:#173c38; } body.route-exams #app .min-h-screen, body.route-profile #app .min-h-screen, body.route-grade-RETIRED #app .min-h-screen, body.route-qa-RETIRED #app .min-h-screen { color:var(--shell-text) !important; } body.desktop-light:not(.route-auth).route-exams #app .min-h-screen, body.desktop-light:not(.route-auth).route-profile #app .min-h-screen, body.desktop-light:not(.route-auth).route-qa-RETIRED #app .min-h-screen, body.desktop-dark:not(.route-auth).route-exams #app .min-h-screen, body.desktop-dark:not(.route-auth).route-profile #app .min-h-screen, body:not(.route-auth).route-grade-RETIRED #app .min-h-screen, body:not(.route-auth).route-qa-RETIRED #app .min-h-screen { background:transparent !important; background-image:none !important; } body.desktop-light:not(.route-auth).route-exams #app .min-h-screen[style*="linear-gradient"]:not(button):not(taro-button-core):not(.logo-linka), body.desktop-light:not(.route-auth).route-profile #app .min-h-screen[style*="linear-gradient"]:not(button):not(taro-button-core):not(.logo-linka), body.desktop-light:not(.route-auth).route-qa-RETIRED #app .min-h-screen[style*="linear-gradient"]:not(button):not(taro-button-core):not(.logo-linka) { background:transparent !important; background-image:none !important; } body.route-exams #app .min-h-screen { max-width:1180px; padding:32px 20px 72px !important; } body.route-exams #app .min-h-screen > div:first-child { padding-top:0 !important; padding-bottom:22px !important; } body.desktop-light:not(.route-auth) #app p, body.desktop-light:not(.route-auth) #app span, body.desktop-light:not(.route-auth) #app label { text-shadow:0 0 transparent; } body.desktop-light:not(.route-auth) #app .text-foreground, body.desktop-light:not(.route-auth) #app h1, body.desktop-light:not(.route-auth) #app h2, body.desktop-light:not(.route-auth) #app h3, body.desktop-light:not(.route-auth) #app strong { color:var(--shell-text) !important; } body.desktop-light:not(.route-auth) #app .text-muted-foreground, body.desktop-light:not(.route-auth) #app .text-gray-400, body.desktop-light:not(.route-auth) #app .text-gray-500, body.desktop-light:not(.route-auth) #app .text-gray-700 { color:var(--shell-muted) !important; } body.desktop-light:not(.route-auth) #app input::placeholder, body.desktop-light:not(.route-auth) #app textarea::placeholder, body.desktop-light:not(.route-auth) #app taro-input-core::placeholder, body.desktop-light:not(.route-auth) #app taro-textarea-core::placeholder { color:#75808e !important; opacity:1; } body.route-exams.desktop-light #app [style*="linear-gradient(160deg"] { background:transparent !important; background-image:none !important; } body.route-exams.desktop-light #app [style*="linear-gradient(135deg"] { background:var(--shell-accent-soft) !important; background-image:none !important; color:var(--shell-accent) !important; } body.route-exams.desktop-light #app [style*="rgba(255,255,255"], body.route-exams.desktop-light #app [style*="rgba(255, 255, 255"] { background:var(--shell-surface) !important; border-color:var(--shell-line) !important; box-shadow:0 1px 2px rgba(24,39,55,.04) !important; } body.route-exams.desktop-light #app [style*="#2C1654"], body.route-exams.desktop-light #app [style*="rgb(44, 22, 84)"] { color:var(--shell-text) !important; } body.route-exams.desktop-light #app [style*="rgba(100,80,140"], body.route-exams.desktop-light #app [style*="rgba(100, 80, 140"] { color:var(--shell-muted) !important; } body.route-exams.desktop-dark #app [style*="linear-gradient(160deg"] { background:var(--shell-canvas) !important; background-image:none !important; } body.route-exams.desktop-dark #app [style*="rgba(255,255,255"], body.route-exams.desktop-dark #app [style*="rgba(255, 255, 255"] { background:var(--shell-surface) !important; border-color:var(--shell-line) !important; box-shadow:none !important; } body.route-exams.desktop-dark #app [style*="#2C1654"], body.route-exams.desktop-dark #app [style*="rgb(44, 22, 84)"] { color:var(--shell-text) !important; } body.route-exams.desktop-dark #app [style*="rgba(100,80,140"], body.route-exams.desktop-dark #app [style*="rgba(100, 80, 140"] { color:var(--shell-muted) !important; } body.route-exams #app input, body.route-exams #app textarea, body.route-exams #app taro-input-core, body.route-exams #app taro-textarea-core { background:var(--shell-strong) !important; border:1px solid var(--shell-line) !important; color:var(--shell-text) !important; } body.route-exams #app [class*="flex-col"][style*="gap: 16px"] { gap:12px !important; } body.route-exams #app [style*="cursor: pointer"] { transition:background-color .16s ease,border-color .16s ease; } body.route-exams.desktop-light #app [style*="cursor: pointer"]:hover { background:rgba(255,255,255,.96) !important; border-color:#c5d1dd !important; } body.route-exams.desktop-dark #app [style*="cursor: pointer"]:hover { background:#18181d !important; border-color:#383840 !important; } body.route-qa-RETIRED.desktop-light:not(.route-qa):not(.route-grade) #app .glass-card, body.route-qa-RETIRED.desktop-light:not(.route-qa):not(.route-grade) #app .glass-card-frosted { background:rgba(255,255,255,.74) !important; border-color:var(--shell-line) !important; } body.route-qa-RETIRED.desktop-light #app .__linka_perf_dead [style*="#7B6CF6"], body.route-qa-RETIRED.desktop-light #app .__linka_perf_dead [style*="#A77BF4"] { color:var(--shell-accent) !important; border-color:#b9ddd8 !important; } body.desktop-light #desktop-focus, body.desktop-light #desktop-learning-report { background:var(--shell-canvas); color:var(--shell-text); } body.desktop-light .focus-summary, body.desktop-light .focus-timer-panel, body.desktop-light .focus-insights, body.desktop-light .focus-history, body.desktop-light .report-summary, body.desktop-light .report-panel { background:var(--shell-surface); border-color:var(--shell-line); } body.desktop-light .focus-summary > div, body.desktop-light .report-summary div, body.desktop-light .focus-log article, body.desktop-light .report-row { border-color:var(--shell-line); } body.desktop-light .focus-summary strong, body.desktop-light .report-summary strong, body.desktop-light .focus-section-head h2, body.desktop-light .report-panel h2 { color:var(--shell-text); } } /* Study room is desktop-owned (#desktop-study-room). Never polish/paint the legacy Taro page — that briefly resurfaced the old podium before mount. */ @media (min-width:981px) { body.route-study-room #app, body.route-study-room #container { visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } } /* Admin dashboard: override its legacy light inline theme and keep a stable canvas. */ body.route-admin-dashboard #app .min-h-screen { width:100%; max-width:none; padding:0 0 72px !important; background:#09090b !important; color:#ecebf0 !important; } body.route-admin-dashboard #app .min-h-screen > div:first-child { min-height:60px; padding-right:32px !important; padding-left:32px !important; border-bottom:1px solid #292930 !important; background:#111114 !important; } body.route-admin-dashboard #app .min-h-screen > .px-4 { width:min(1400px,calc(100% - 64px)); margin:0 auto; padding:24px 0 0 !important; box-sizing:border-box; } body.route-admin-dashboard.desktop-dark #app [style*="background: white"], body.route-admin-dashboard.desktop-dark #app [style*="background:white"] { background:#15151a !important; border-color:#303038 !important; box-shadow:none !important; } body.route-admin-dashboard.desktop-dark #app [style*="rgba(0,0,0,0.04)"], body.route-admin-dashboard.desktop-dark #app [style*="rgba(0, 0, 0, 0.04)"], body.route-admin-dashboard.desktop-dark #app [style*="rgba(0,0,0,0.06)"], body.route-admin-dashboard.desktop-dark #app [style*="rgba(0, 0, 0, 0.06)"] { background:#1b1b20 !important; border-color:#303038 !important; } body.route-admin-dashboard.desktop-dark #app [style*="color: #111"], body.route-admin-dashboard.desktop-dark #app [style*="color:#111"], body.route-admin-dashboard.desktop-dark #app [style*="color: #222"], body.route-admin-dashboard.desktop-dark #app [style*="color:#222"], body.route-admin-dashboard.desktop-dark #app [style*="color: #333"], body.route-admin-dashboard.desktop-dark #app [style*="color:#333"] { color:#ecebf0 !important; } body.route-admin-dashboard.desktop-dark #app [style*="rgba(0,0,0,0.45)"], body.route-admin-dashboard.desktop-dark #app [style*="rgba(0, 0, 0, 0.45)"] { color:#aaa6b1 !important; } body.route-admin-dashboard.desktop-dark #app svg text { fill:#8d8995 !important; } body.route-admin-dashboard.desktop-dark #app svg circle:first-of-type { stroke:#34343c !important; } body.route-admin-dashboard #app button { border-radius:4px !important; } body.route-admin-dashboard #app .grid { gap:12px !important; } body.route-admin-dashboard #app [style*="borderRadius: 14"], body.route-admin-dashboard #app [style*="border-radius: 14"] { border-radius:6px !important; } @media (max-width:900px) { body.route-admin-dashboard #app .min-h-screen > .px-4 { width:calc(100% - 32px); } } /* Keep the restored full dashboard aligned with the black/teal desktop shell. */ body.route-admin-dashboard #app [style*="background: rgb(245, 243, 255)"], body.route-admin-dashboard #app [style*="background:#f5f3ff"], body.route-admin-dashboard #app [style*="background: #f5f3ff"] { background:#09090b !important; } body.route-admin-dashboard #app [style*="background: rgb(124, 79, 196)"], body.route-admin-dashboard #app [style*="background:#7C4FC4"], body.route-admin-dashboard #app [style*="background: #7C4FC4"] { background:#168f83 !important; border-color:#31c8b8 !important; } body.route-admin-dashboard #app [style*="color: rgb(124, 79, 196)"], body.route-admin-dashboard #app [style*="color:#7C4FC4"], body.route-admin-dashboard #app [style*="color: #7C4FC4"] { color:#38cbbb !important; } body.route-admin-dashboard #app svg [stroke="#7C4FC4"] { stroke:#38cbbb !important; } body.route-admin-dashboard #app svg [fill="#7C4FC4"] { fill:#38cbbb !important; } /* Administrator operations dashboard: independent black and green workspace. */ .admin-dashboard-shell { width:min(1460px,calc(100% - 64px)); margin:0 auto; padding:42px 0 72px; box-sizing:border-box; } .admin-dashboard-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding-bottom:24px; border-bottom:1px solid #24302e; } .admin-dashboard-head span { display:block; color:#35d6c5; font:700 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; } .admin-dashboard-head h1 { margin:8px 0 7px; color:#f4faf8; font-size:30px; line-height:1.15; } .admin-dashboard-head p { margin:0; color:#83918e; font-size:13px; } .admin-dashboard-head > div:last-child { display:flex; align-items:center; gap:12px; } .admin-dashboard-head time { color:#75827f; font-size:11px; } .admin-dashboard-head button { min-height:36px; padding:0 14px; border:1px solid #277f75; border-radius:4px; background:#12332f; color:#c9f4ef; font:700 11px/1 inherit; cursor:pointer; } .admin-dashboard-head button:hover { border-color:#35d6c5; background:#16443f; } .admin-dashboard-nav { display:flex; gap:4px; margin:18px 0; padding:4px; border:1px solid #222b29; background:#0e1211; } .admin-dashboard-nav a { padding:10px 16px; border-radius:3px; color:#7f8b88; font-size:12px; font-weight:600; text-decoration:none; } .admin-dashboard-nav a:hover,.admin-dashboard-nav a.active { background:#15332f; color:#4cddcc; } .admin-dashboard-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } .admin-dashboard-kpis article { min-height:120px; padding:19px; border:1px solid #25302e; border-top:2px solid #2a8b80; border-radius:5px; background:#101514; box-sizing:border-box; } .admin-dashboard-kpis span,.admin-dashboard-kpis small { display:block; color:#788682; font-size:11px; } .admin-dashboard-kpis strong { display:block; margin:14px 0 12px; color:#f1f8f6; font-size:28px; line-height:1; } .admin-dashboard-kpis small { color:#64716e; } .admin-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,.8fr); gap:12px; margin-top:12px; } .admin-dashboard-panel { min-width:0; padding:20px; border:1px solid #25302e; border-radius:5px; background:#101514; box-sizing:border-box; } .admin-dashboard-panel > header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:20px; } .admin-dashboard-panel header span { display:block; color:#319d91; font:700 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; } .admin-dashboard-panel h2 { margin:7px 0 0; color:#e7efed; font-size:16px; } .admin-dashboard-panel > header > b { color:#64736f; font:600 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; } .admin-dashboard-activity { min-height:280px; } .admin-dashboard-bars { height:188px; display:flex; align-items:stretch; gap:4px; padding-top:8px; border-bottom:1px solid #27312f; } .admin-dashboard-bars i { min-width:0; flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:7px; height:100%; font-style:normal; } .admin-dashboard-bars b { width:100%; max-width:24px; height:var(--bar); min-height:4px; border-radius:2px 2px 0 0; background:#2fb9aa; box-shadow:0 0 14px rgba(47,185,170,.12); } .admin-dashboard-bars i:nth-child(3n) b { background:#43d2c1; } .admin-dashboard-bars small { min-height:12px; color:#52605d; font-size:8px; white-space:nowrap; } .admin-dashboard-bars i:not(:first-child):not(:nth-child(5n)):not(:last-child) small { visibility:hidden; } .admin-dashboard-health-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .admin-dashboard-health-list div { min-height:78px; padding:13px; border:1px solid #222d2a; background:#0c1110; } .admin-dashboard-health-list span,.admin-dashboard-health-list strong { display:block; } .admin-dashboard-health-list span { color:#6e7d79; font-size:10px; } .admin-dashboard-health-list strong { margin-top:12px; color:#dce8e5; font-size:20px; } .admin-dashboard-tokens { grid-column:1; } .admin-dashboard-tokens > header > strong { color:#44d4c3; font-size:24px; text-align:right; } .admin-dashboard-tokens > header > strong small { display:block; margin-top:6px; color:#66736f; font-size:9px; font-weight:500; } .admin-dashboard-token-summary { display:flex; gap:22px; padding:11px 13px; border:1px solid #21302d; background:#0c1210; color:#687773; font-size:10px; } .admin-dashboard-token-summary b { margin-left:5px; color:#b8c8c4; } .admin-dashboard-token-head,.admin-dashboard-token-row { display:grid; grid-template-columns:34px minmax(100px,1fr) 90px 90px 100px; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid #202927; font-size:11px; } .admin-dashboard-token-head { color:#56635f; font-size:9px; } .admin-dashboard-token-row i { color:#3b8e84; font-style:normal; }.admin-dashboard-token-row strong { color:#cdd8d5; }.admin-dashboard-token-row span { color:#73817d; }.admin-dashboard-token-row b { color:#43cbbb; } .admin-dashboard-alerts { grid-column:2; grid-row:2; } .admin-dashboard-alerts a { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0; border-top:1px solid #232d2b; color:#a7b5b1; font-size:11px; text-decoration:none; } .admin-dashboard-alerts a b { color:#39b9aa; font-size:10px; white-space:nowrap; }.admin-dashboard-alerts p { margin:16px 0 0; padding:12px; border-left:2px solid #2a8b80; background:#0c1210; color:#65746f; font-size:10px; line-height:1.65; } .admin-dashboard-empty,.admin-dashboard-loading,.admin-dashboard-error { display:grid; place-items:center; min-height:180px; color:#66736f; font-size:12px; } .admin-dashboard-loading { min-height:60vh; } .admin-dashboard-error { align-content:center; gap:10px; min-height:60vh; }.admin-dashboard-error strong { color:#dfe9e6; font-size:18px; }.admin-dashboard-error span { color:#7b8985; }.admin-dashboard-error button { padding:9px 13px; border:1px solid #2b8e82; border-radius:4px; background:#153630; color:#d2f4ef; cursor:pointer; } @media (max-width:1050px) { .admin-dashboard-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }.admin-dashboard-grid { grid-template-columns:1fr; }.admin-dashboard-tokens,.admin-dashboard-alerts { grid-column:1; grid-row:auto; } } @media (max-width:700px) { .admin-dashboard-shell { width:calc(100% - 28px); padding-top:26px; }.admin-dashboard-head { align-items:flex-start; flex-direction:column; }.admin-dashboard-head > div:last-child { width:100%; justify-content:space-between; }.admin-dashboard-nav { overflow-x:auto; }.admin-dashboard-nav a { white-space:nowrap; }.admin-dashboard-kpis { grid-template-columns:1fr; }.admin-dashboard-token-head,.admin-dashboard-token-row { grid-template-columns:28px minmax(90px,1fr) 72px; }.admin-dashboard-token-head span:first-of-type,.admin-dashboard-token-row span:first-of-type { display:none; }.admin-dashboard-token-head span:last-of-type,.admin-dashboard-token-row span:last-of-type { display:none; } } .focus-shell { width:min(1120px,calc(100% - 56px)); margin:0 auto; padding:38px 0 70px; } .focus-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-bottom:26px; border-bottom:1px solid #242429; } .focus-head > div:first-child { display:flex; align-items:flex-start; gap:16px; } .focus-back { width:36px; height:36px; flex:0 0 auto; border:1px solid #303036; border-radius:4px; background:#111114; color:#aaaab2; font-size:20px; } .focus-head span,.focus-eyebrow { display:block; margin-bottom:7px; color:#6f7079; font:600 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; } .focus-head h1 { margin:0; font-size:30px; line-height:1.25; letter-spacing:0; } .focus-head p { margin:8px 0 0; color:#80818a; font-size:13px; } .focus-status { display:flex; align-items:center; gap:8px; margin-top:5px; padding:7px 10px; border:1px solid #292a2f; border-radius:16px; color:#777982; font-size:11px; } .focus-status i { width:6px; height:6px; border-radius:50%; background:#2bb9a8; } .focus-summary { display:grid; grid-template-columns:repeat(4,1fr); margin:26px 0; border:1px solid #27272d; border-radius:6px; background:#111114; } .focus-summary > div { min-width:0; padding:18px 20px; border-right:1px solid #27272d; } .focus-summary > div:last-child { border-right:0; } .focus-summary span { display:block; color:#81828a; font-size:12px; } .focus-summary strong { display:block; margin:8px 0 5px; color:#f0f0f2; font-size:22px; font-variant-numeric:tabular-nums; } .focus-summary small { color:#5f6068; font-size:10px; } .classroom-panel { margin:0 0 18px; padding:22px 24px 20px; border:1px solid #27272d; border-radius:6px; background:#111114; } .classroom-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; } .classroom-head h2 { margin:0; color:#ececf0; font-size:17px; letter-spacing:0; } .classroom-note { margin:7px 0 0; color:#74757e; font-size:11px; } .classroom-stats { display:grid; grid-template-columns:auto auto; column-gap:7px; align-items:baseline; padding:7px 0 0 16px; border-left:1px solid #2a2b30; text-align:right; } .classroom-stats strong { color:#48ccbd; font:600 24px/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; } .classroom-stats span { color:#a6a7ad; font-size:10px; } .classroom-stats b { grid-column:1 / -1; margin-top:7px; color:#666770; font-size:10px; font-weight:500; } .classroom-layout { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 116px; gap:22px; align-items:center; margin-top:20px; padding:18px 20px; border:1px solid #25262b; background:#0c0c0f; } .classroom-board { grid-column:1; width:min(208px,45%); justify-self:center; padding:7px 14px; border:1px solid #3a4241; border-radius:3px; background:#17211f; color:#8bb7b1; font-size:10px; text-align:center; } .classroom-board i { display:inline-block; width:4px; height:4px; margin-left:6px; border-radius:50%; background:#43c6b7; vertical-align:middle; } .classroom-seats { grid-column:1; display:grid; grid-template-columns:repeat(6,minmax(42px,1fr)); gap:12px 14px; padding:12px 8px 2px; } .classroom-seat { position:relative; min-width:0; aspect-ratio:1.13; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:4px; border:1px solid #292a30; border-radius:4px; background:#151519; color:#777982; transition:border-color .16s ease,background .16s ease,transform .16s ease; } .classroom-seat:not(:disabled):hover { border-color:#56867f; background:#17211f; transform:translateY(-1px); } .classroom-seat > span { display:grid; width:21px; height:21px; place-items:center; border-radius:50%; background:#24252a; color:#777982; font-size:10px; font-weight:700; } .classroom-seat small { overflow:hidden; max-width:100%; color:#575861; font-size:8px; line-height:1; text-overflow:ellipsis; white-space:nowrap; } .classroom-seat b { position:absolute; top:4px; left:5px; color:#4e4f57; font-size:7px; font-weight:500; } .classroom-seat.is-occupied { border-color:#354a47; background:#12201e; } .classroom-seat.is-occupied > span { background:#28665e; color:#dff9f5; } .classroom-seat.is-occupied small { color:#77aaa3; } .classroom-seat.is-mine { border-color:#42c3b4; background:#17322e; box-shadow:0 0 0 1px rgba(66,195,180,.16); } .classroom-seat.is-mine > span { background:#49cbbb; color:#09201e; } .classroom-seat.is-mine small { color:#b7ebe4; } .classroom-seat:disabled { cursor:default; } .classroom-legend { grid-column:2; grid-row:1 / span 2; display:grid; gap:12px; padding-left:16px; border-left:1px solid #24252a; } .classroom-legend div { display:flex; align-items:center; gap:7px; color:#777982; font-size:9px; white-space:nowrap; } .classroom-legend i { width:10px; height:10px; border:1px solid #484950; border-radius:2px; background:#17171b; } .classroom-legend i.is-occupied { border-color:#356c65; background:#28665e; } .classroom-legend i.is-mine { border-color:#42c3b4; background:#49cbbb; } .focus-main-grid { display:grid; grid-template-columns:minmax(0,1.28fr) minmax(320px,.72fr); gap:18px; align-items:stretch; } .focus-timer-panel,.focus-insights,.focus-history { border:1px solid #27272d; border-radius:6px; background:#111114; } .focus-timer-panel { padding:24px; } .focus-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; } .focus-section-head h2 { margin:0; font-size:17px; letter-spacing:0; } .focus-category-control { display:flex; gap:6px; } .focus-category { width:150px; height:34px; padding:0 30px 0 10px; border:1px solid #313239; border-radius:4px; background:#151519; color:#d1d1d6; font-size:12px; } .focus-manage-categories { width:34px; height:34px; flex:0 0 auto; border:1px solid #313239; border-radius:4px; background:#151519; color:#8e9098; font-size:17px; } .focus-manage-categories:hover { border-color:#49726d; color:#41bbae; } .focus-presets { display:grid; grid-template-columns:repeat(3,1fr) 1.35fr; gap:8px; margin-top:22px; } .focus-presets button,.focus-presets label { height:34px; border:1px solid #2b2c32; border-radius:4px; background:#151519; color:#85868f; text-align:center; font-size:11px; } .focus-presets button.active { border-color:#37746d; color:#45cabb; background:#14211f; } .focus-presets label { display:flex; align-items:center; justify-content:center; gap:5px; padding-left:8px; } .focus-presets input { width:45px; border:0; background:transparent; color:#d8d8dc; text-align:center; outline:0; } .focus-clock { --progress:0deg; width:224px; aspect-ratio:1; display:grid; place-items:center; margin:28px auto 22px; border-radius:50%; background:conic-gradient(#28aa9b var(--progress),#24252b 0); position:relative; } .focus-clock::before { content:''; position:absolute; inset:8px; border-radius:50%; background:#111114; } .focus-clock > div { position:relative; z-index:1; text-align:center; } .focus-clock strong { display:block; font:500 48px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:0; font-variant-numeric:tabular-nums; } .focus-clock span { display:block; margin-top:13px; color:#777982; font-size:11px; } .focus-task { display:block; width:100%; height:40px; padding:0 12px; border:1px solid #2b2c32; border-radius:4px; outline:0; background:#0d0d10; color:#e1e1e5; font-size:12px; } .focus-task:focus { border-color:#3a5753; } .focus-controls { display:grid; grid-template-columns:1fr 42px; gap:8px; margin-top:10px; } .focus-controls button { height:42px; border-radius:4px; } .focus-primary { border:1px solid #3a645f; background:#172421; color:#d6f3ef; font-weight:650; } .focus-primary:hover { background:#1c302c; } .focus-reset { border:1px solid #303138; background:#17171b; color:#8c8d96; font-size:18px; } .focus-insights { padding:24px; } .focus-week-total { color:#3bc1b2; font-size:14px; } .focus-view-tabs,.report-tabs { display:flex; padding:3px; border:1px solid #2d2e34; border-radius:4px; background:#0d0d10; } .focus-view-tabs button,.report-tabs button { min-width:42px; height:27px; border:0; border-radius:3px; background:transparent; color:#74757e; font-size:10px; } .focus-view-tabs button.active,.report-tabs button.active { background:#24252a; color:#e1e1e5; } .focus-view-total { display:flex; justify-content:space-between; align-items:center; margin-top:22px; color:#777982; font-size:10px; } .focus-bars { height:178px; display:grid; grid-template-columns:repeat(7,1fr); gap:10px; align-items:end; margin:24px 0 26px; padding:0 5px 24px; border-bottom:1px solid #27272d; } .focus-bars > div { height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; } .focus-bars span { min-height:14px; color:#777982; font-size:9px; } .focus-bars i { display:block; width:13px; min-height:4px; border-radius:2px 2px 0 0; background:#303138; } .focus-bars .today i { background:#2bb9a8; } .focus-bars small { position:absolute; transform:translateY(20px); color:#666771; font-size:9px; } .focus-category-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; } .focus-category-title h3 { margin:0; font-size:13px; } .focus-category-title span { color:#666771; font-size:10px; } .focus-category-list > div { display:grid; grid-template-columns:66px minmax(50px,1fr) 62px; gap:9px; align-items:center; margin:11px 0; } .focus-category-list span,.focus-category-list strong { color:#8b8c94; font-size:10px; } .focus-category-list strong { text-align:right; font-weight:500; } .focus-category-list i { height:4px; overflow:hidden; border-radius:2px; background:#25262c; } .focus-category-list b { display:block; height:100%; border-radius:2px; background:#358f85; } .focus-empty { margin:26px 0 0; color:#62636b; font-size:11px; line-height:1.7; } .focus-month-heading { display:flex; align-items:center; justify-content:space-between; margin:22px 0 14px; } .focus-month-heading strong { font-size:12px; } .focus-month-heading button { width:28px; height:28px; border:1px solid #2d2e34; border-radius:3px; background:#151519; color:#84858d; } .focus-month-weekdays,.focus-month-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; } .focus-month-weekdays span { padding:4px 0; color:#5f6068; text-align:center; font-size:9px; } .focus-month-grid > i,.focus-month-grid > div { aspect-ratio:1; min-width:0; } .focus-month-grid > div { display:flex; flex-direction:column; justify-content:space-between; padding:5px; border:1px solid #25262b; border-radius:3px; background:rgba(43,185,168,var(--day-level)); } .focus-month-grid span { color:#aaaab1; font-size:9px; } .focus-month-grid b { color:#d9f0ed; text-align:right; font-size:8px; font-weight:500; } .focus-history { margin-top:18px; padding:22px 24px; } .focus-add-record { padding:7px 10px; border:1px solid #303138; border-radius:4px; background:transparent; color:#94959d; font-size:11px; } .focus-log { margin-top:16px; } .focus-log article { display:grid; grid-template-columns:82px minmax(0,1fr) 90px; align-items:center; gap:15px; padding:12px 4px; border-top:1px solid #24252a; } .focus-log time { color:#b9bac0; font:500 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; } .focus-log time small { display:block; margin-top:3px; color:#5e5f67; font-size:8px; } .focus-log article div strong,.focus-log article div span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .focus-log article div strong { color:#c9c9ce; font-size:11px; } .focus-log article div span { margin-top:4px; color:#65666e; font-size:10px; } .focus-log article > b { color:#3ab7a8; text-align:right; font-size:11px; font-weight:600; } .focus-empty-log { padding:28px 0 18px; text-align:center; } .focus-empty-log strong,.focus-empty-log span { display:block; } .focus-empty-log strong { color:#999aa2; font-size:12px; } .focus-empty-log span { margin-top:7px; color:#5f6068; font-size:10px; } @media (max-width:1200px) { .focus-main-grid { grid-template-columns:1fr; } .focus-insights { min-height:360px; } } @media (max-width:780px) { .focus-shell { width:calc(100% - 28px); padding-top:20px; } .focus-summary { grid-template-columns:1fr 1fr; } .focus-summary > div:nth-child(2) { border-right:0; } .focus-summary > div:nth-child(-n+2) { border-bottom:1px solid #27272d; } .classroom-panel { padding:18px 14px; } .classroom-head { gap:12px; } .classroom-stats { padding-left:10px; } .classroom-layout { grid-template-columns:1fr; gap:14px; padding:14px 8px; } .classroom-board,.classroom-seats { grid-column:1; } .classroom-seats { gap:8px; padding:7px 0 0; } .classroom-legend { grid-column:1; grid-row:auto; grid-template-columns:repeat(3,1fr); gap:5px; padding:10px 2px 0; border-top:1px solid #24252a; border-left:0; } .classroom-legend div { justify-content:center; gap:5px; } .focus-presets { grid-template-columns:1fr 1fr; } } .report-shell { width:min(1120px,calc(100% - 56px)); margin:0 auto; padding:38px 0 70px; } .report-head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding-bottom:26px; border-bottom:1px solid #242429; } .report-head > div:first-child { display:flex; gap:16px; } .report-head h1 { margin:0; font-size:30px; } .report-head p { margin:8px 0 0; color:#777982; font-size:12px; } .report-summary { display:grid; grid-template-columns:repeat(4,1fr); margin:26px 0 18px; border:1px solid #27272d; border-radius:6px; background:#111114; } .report-summary div { padding:18px 20px; border-right:1px solid #27272d; } .report-summary div:last-child { border-right:0; } .report-summary span { display:block; color:#777982; font-size:11px; } .report-summary strong { display:block; margin-top:8px; font-size:21px; font-variant-numeric:tabular-nums; } .report-grid { display:grid; grid-template-columns:1.5fr .8fr; gap:18px; } .report-panel { padding:22px 24px; border:1px solid #27272d; border-radius:6px; background:#111114; } .report-panel h2 { margin:0; font-size:16px; } .report-trend-bars { height:230px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(8px,1fr); align-items:end; gap:6px; margin-top:25px; padding:0 4px 24px; border-bottom:1px solid #25262b; overflow:hidden; } .report-trend-bars > div { height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; } .report-trend-bars span { min-height:12px; color:#73747c; font-size:8px; } .report-trend-bars i { width:min(16px,70%); min-height:3px; background:#368f85; border-radius:2px 2px 0 0; } .report-trend-bars small { position:absolute; transform:translateY(18px); color:#5e5f67; font-size:8px; } .report-category-list { margin-top:22px; } .report-category-list > div { margin:15px 0; } .report-category-list > div > div { display:flex; justify-content:space-between; } .report-category-list strong,.report-category-list span,.report-category-list small { color:#8d8e96; font-size:10px; } .report-category-list i { display:block; height:5px; margin:7px 0 5px; border-radius:3px; background:#25262b; } .report-category-list b { display:block; height:100%; border-radius:3px; background:#39978c; } .report-records { margin-top:18px; } .report-export { padding:7px 11px; border:1px solid #303138; border-radius:4px; background:transparent; color:#95969e; font-size:10px; } .report-table { margin-top:16px; } .report-row { display:grid; grid-template-columns:130px 120px minmax(0,1fr) 90px; gap:16px; align-items:center; padding:12px 4px; border-top:1px solid #25262b; font-size:10px; } .report-row > span:first-child small { display:block; margin-top:3px; color:#5e5f67; } .report-row strong { color:#c2c2c8; } .report-row > span { color:#85868e; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .report-row > b { color:#3bb8a9; text-align:right; } .report-table-head { color:#666770; border-top:0; } @media (max-width:1100px) { .report-grid { grid-template-columns:1fr; } } .desktop-data-page { position:fixed; inset:0 var(--desktop-right-width) 0 var(--desktop-left-width); z-index:82; overflow-y:auto; background:#0d0d10; color:#ecebf0; } body.desktop-nav-collapsed .desktop-data-page { left:0; } body.context-collapsed .desktop-data-page { right:0; } .data-shell { width:min(980px,calc(100% - 56px)); margin:0 auto; padding:48px 0 72px; } .data-shell header { padding-bottom:26px; border-bottom:1px solid #28282f; } .data-shell header > span,.broadcast-head > div > span { color:#35d6c5; font-size:10px; letter-spacing:0; } .data-shell h1 { margin:7px 0 8px; font-size:30px; }.data-shell header p { margin:0; color:#777982; font-size:12px; } .library-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }.library-settings,.library-section-head > button { padding:8px 12px; border:1px solid #303038; border-radius:4px; background:transparent; color:#aaa6b1; font-size:11px; } .library-section { padding:26px 0 6px; }.library-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:14px; }.library-section-head h2 { margin:0; font-size:17px; }.library-section-head p { margin:6px 0 0; color:#777982; font-size:11px; }.library-section-head > button { border-color:#268b7f; color:#35d6c5; } .library-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.library-grid article { position:relative; min-height:82px; padding:16px; border:1px solid #292930; border-radius:5px; background:#141418; }.library-grid strong,.library-grid small { display:block; }.library-grid strong { color:#e2dfe7; font-size:13px; }.library-grid small { margin-top:7px; color:#777982; font-size:10px; }.library-grid button { position:absolute; top:9px; right:9px; width:22px; height:22px; padding:0; border:0; border-radius:3px; background:transparent; color:#777982; font-size:18px; line-height:1; }.library-grid button:hover { background:#292930; color:#ef9898; } .library-grid article[draggable=true],.profile-library-grid article[draggable=true] { cursor:grab; transition:border-color .15s ease,opacity .15s ease,transform .15s ease; } .library-grid article[draggable=true]:hover,.profile-library-grid article[draggable=true]:hover { border-color:#285f59; } .library-grid article.is-dragging,.profile-library-grid article.is-dragging { opacity:.48; cursor:grabbing; transform:scale(.98); border-color:#35d6c5; } .data-tabs { display:flex; gap:24px; margin-top:22px; border-bottom:1px solid #28282f; } .data-tabs button { padding:11px 0; border:0; border-bottom:2px solid transparent; background:transparent; color:#777982; }.data-tabs button.active { color:#35d6c5; border-color:#35d6c5; } .data-list article { display:flex; justify-content:space-between; gap:22px; padding:18px 4px; border-bottom:1px solid #24242a; } .data-list article strong { font-size:14px; }.data-list article p,.data-list article time { color:#777982; font-size:11px; }.data-list article p { margin:6px 0 0; } .data-empty,.data-loading { padding:54px 0; color:#777982; text-align:center; } .profile-page-shell { width:min(1080px,calc(100% - 64px)); margin:0 auto; padding:42px 0 72px; } .profile-page-head { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:0 0 24px; border-bottom:1px solid #292930; } .profile-person { display:flex; align-items:center; gap:15px; min-width:0; } .profile-person-avatar { display:grid; place-items:center; width:58px; height:58px; flex:0 0 auto; border:1px solid #397b74; border-radius:6px; background:#142b29; color:#45d6c6; font-size:23px; font-weight:750; } .profile-person-avatar img { display:block; width:100%; height:100%; border-radius:inherit; object-fit:cover; } .profile-person > div { min-width:0; }.profile-person small,.profile-section-head span { color:#35d6c5; font-size:10px; font-weight:700; } .profile-person h1 { margin:5px 0 4px; overflow:hidden; color:#eeebf1; font-size:25px; text-overflow:ellipsis; white-space:nowrap; } .profile-person p { margin:0; color:#85818c; font-size:12px; } .profile-head-actions { display:flex; gap:8px; }.profile-head-actions a,.profile-head-actions button,.profile-section-head > button,.profile-section-head > a,.profile-account-row button { min-height:34px; padding:0 12px; border:1px solid #303038; border-radius:4px; background:transparent; color:#aaa6b1; font-family:inherit; font-size:11px; font-weight:600; line-height:32px; text-decoration:none; cursor:pointer; } .profile-head-actions a:hover,.profile-head-actions button:hover,.profile-account-row button:hover { border-color:#477b75; color:#35d6c5; } .profile-archive,.profile-knowledge { padding:30px 0 0; } .profile-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; } .profile-section-head h2 { margin:5px 0 0; color:#ece9ef; font-size:22px; }.profile-section-head p { margin:7px 0 0; color:#7d7984; font-size:12px; } .profile-section-head > button,.profile-section-head > a { border-color:#327b72; color:#35d6c5; } .profile-section-head > a { display:inline-flex; align-items:center; gap:7px; } .profile-section-head > a:hover { border-color:#35d6c5; background:rgba(53,214,197,.06); } .profile-archive-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:21px; border-top:1px solid #292930; border-bottom:1px solid #292930; } .profile-archive-summary > button { min-width:0; min-height:72px; padding:13px 18px; border:0; border-right:1px solid #292930; background:transparent; font:inherit; text-align:left; cursor:pointer; transition:background .18s ease; }.profile-archive-summary > button:last-child { border-right:0; } .profile-archive-summary > button:hover,.profile-archive-summary > button.active { background:rgba(53,214,197,.06); } .profile-archive-summary strong,.profile-archive-summary span { display:block; }.profile-archive-summary strong { color:#e9e6ed; font-size:22px; }.profile-archive-summary span { margin-top:5px; color:#77737e; font-size:11px; } .profile-archive-tabs { display:flex; gap:22px; overflow-x:auto; margin-top:15px; border-bottom:1px solid #292930; } .profile-archive-tabs button { flex:0 0 auto; padding:10px 0; border:0; border-bottom:2px solid transparent; background:transparent; color:#77737e; font:600 11px/1.2 inherit; cursor:pointer; } .profile-archive-tabs button.active { border-color:#35d6c5; color:#35d6c5; } .profile-archive-sync { display:flex; align-items:center; gap:7px; min-height:28px; color:#6c6973; font-size:10px; }.profile-archive-sync i:first-child:not([class]) { width:6px; height:6px; border:1px solid #35d6c5; border-right-color:transparent; border-radius:50%; animation:profile-archive-spin .8s linear infinite; }.profile-archive-sync.is-done { color:#408d84; }.profile-archive-sync.is-done i { font-size:14px; } @keyframes profile-archive-spin { to { transform:rotate(360deg); } } .profile-archive-list { min-height:116px; max-height:408px; overflow-y:auto; scrollbar-gutter:stable; } .profile-archive-row { display:grid; width:100%; grid-template-columns:54px minmax(0,1fr) 92px 18px; align-items:center; gap:15px; min-height:68px; padding:11px 4px; border:0; border-bottom:1px solid #24242a; background:transparent; font:inherit; text-align:left; cursor:pointer; transition:background .16s ease; } .profile-archive-row:hover,.profile-archive-row:focus-visible { background:rgba(53,214,197,.045); outline:0; } .profile-archive-row > span { color:#39bcae; font-size:10px; }.profile-archive-row > div { min-width:0; } .profile-archive-row > i { color:#54515b; font-size:14px; transition:transform .16s ease,color .16s ease; }.profile-archive-row:hover > i { color:#35d6c5; transform:translateX(2px); } .profile-archive-list strong { display:block; overflow:hidden; color:#dedbe3; font-size:13px; text-overflow:ellipsis; white-space:nowrap; } .profile-archive-list p { margin:5px 0 0; overflow:hidden; color:#787580; font-size:10px; text-overflow:ellipsis; white-space:nowrap; } .profile-archive-list time { color:#6c6973; font-size:10px; text-align:right; } .profile-archive-list::-webkit-scrollbar { width:7px; } .profile-archive-list::-webkit-scrollbar-track { background:transparent; } .profile-archive-list::-webkit-scrollbar-thumb { border-radius:4px; background:#3a3941; } .profile-archive-empty { display:flex; align-items:center; justify-content:space-between; min-height:116px; color:#77737e; }.profile-archive-empty strong { font-size:13px; font-weight:500; }.profile-archive-empty a { color:#35d6c5; font-size:11px; text-decoration:none; } .profile-archive-focused .profile-knowledge, .profile-archive-focused .profile-account-row, .profile-archive-focused .profile-archive-tabs, .profile-archive-focused .profile-dashboard-panel, .profile-archive-focused #pixel-cat-profile-slot { display:none; } .profile-level-badge > b { display:inline-flex; align-items:baseline; gap:4px; } .profile-level-badge > b small { color:inherit; font-size:10px; font-weight:650; } .profile-archive-focused .profile-archive-summary { display:none; } .profile-library-focused .profile-archive,.profile-library-focused .profile-account-row { display:none; } .profile-library-focused .profile-knowledge { margin-top:0; border-top:0; } .profile-library-focused .profile-knowledge .library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .profile-library-detail .profile-knowledge .library-grid { display:none; } .profile-library-detail .profile-section-head { align-items:center; padding-bottom:22px; border-bottom:1px solid #292930; } .profile-library-detail .profile-section-head h2 { font-size:26px; } .profile-library-detail .profile-section-head p { max-width:560px; } .profile-archive-focused .profile-archive { margin-top:0; padding-top:8px; } .profile-archive-focused .profile-archive-list { max-height:none; min-height:420px; } .profile-archive-jump { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 8px; padding-bottom:14px; border-bottom:1px solid #292930; } .profile-archive-jump a { padding:8px 12px; border:1px solid #303038; border-radius:6px; color:#a8a4ae; font-size:12px; font-weight:600; text-decoration:none; } .profile-archive-jump a:hover { border-color:#3a8f85; color:#35d6c5; } .profile-archive-jump a.active { border-color:#2f8f84; background:#152826; color:#35d6c5; } body.desktop-light .profile-archive-jump { border-color:#d6dee6; } body.desktop-light .profile-archive-jump a { border-color:#d0d9e0; color:#5a6570; } body.desktop-light .profile-archive-jump a.active { border-color:#178f83; background:#e8f7f4; color:#178f83; } .profile-record-drawer { position:fixed; inset:0; z-index:240; pointer-events:none; } .profile-record-backdrop { position:absolute; inset:0; border:0; background:rgba(4,5,7,.58); opacity:0; cursor:default; transition:opacity .18s ease; } .profile-record-drawer aside { position:absolute; top:0; right:0; display:flex; width:min(560px,calc(100vw - 48px)); height:100%; flex-direction:column; border-left:1px solid #2a2b31; background:#101114; color:#e9e8ec; box-shadow:-18px 0 54px rgba(0,0,0,.26); transform:translateX(100%); transition:transform .2s ease; } .profile-record-drawer.is-open { pointer-events:auto; }.profile-record-drawer.is-open .profile-record-backdrop { opacity:1; }.profile-record-drawer.is-open aside { transform:translateX(0); } .profile-record-drawer aside > header { display:flex; align-items:center; justify-content:space-between; min-height:70px; padding:0 26px; border-bottom:1px solid #292a30; } .profile-record-drawer aside > header > div { display:flex; align-items:center; gap:11px; }.profile-record-drawer aside > header span { color:#35d6c5; font-size:11px; font-weight:700; }.profile-record-drawer aside > header time { color:#6d6c75; font-size:10px; } .profile-record-drawer [data-close-record] { display:grid; width:34px; height:34px; place-items:center; border:1px solid #303139; border-radius:4px; background:transparent; color:#92919a; cursor:pointer; }.profile-record-drawer [data-close-record]:hover { border-color:#456f6a; color:#35d6c5; } .profile-record-content { flex:1; overflow-y:auto; padding:30px 28px 44px; } .profile-record-heading { padding-bottom:25px; border-bottom:1px solid #292a30; }.profile-record-heading small { display:block; margin-bottom:9px; color:#74737c; font-size:11px; }.profile-record-heading h2 { margin:0; color:#f0eff2; font-size:21px; line-height:1.55; letter-spacing:0; overflow-wrap:anywhere; } .profile-record-fields section { padding:22px 0; border-bottom:1px solid #25262b; }.profile-record-fields h3 { margin:0 0 11px; color:#777781; font-size:10px; font-weight:700; }.profile-record-fields section > div { color:#d1d0d5; font-size:13px; line-height:1.85; white-space:pre-wrap; overflow-wrap:anywhere; } .profile-record-action { display:flex; align-items:center; justify-content:center; gap:7px; min-height:48px; margin:0 28px 24px; border:1px solid #327b72; border-radius:4px; color:#35d6c5; font-size:12px; font-weight:700; text-decoration:none; }.profile-record-action:hover { background:rgba(53,214,197,.07); } .profile-knowledge { margin-top:12px; border-top:1px solid #292930; }.profile-knowledge .library-grid { grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:18px; } .profile-knowledge .library-grid article { min-height:76px; background:#121216; outline:none; } .profile-knowledge .library-grid article:focus-visible { border-color:#35d6c5; box-shadow:0 0 0 2px rgba(53,214,197,.12); } .profile-knowledge .library-card-arrow { position:absolute; right:12px; bottom:12px; color:#55525d; font-size:15px; transition:transform .16s ease,color .16s ease; } .profile-knowledge .library-grid article:hover .library-card-arrow { color:#35d6c5; transform:translateX(2px); } .profile-account-row { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-top:30px; padding:17px 0; border-top:1px solid #292930; border-bottom:1px solid #292930; } .profile-account-row strong,.profile-account-row span { display:block; }.profile-account-row strong { color:#cfccd4; font-size:13px; }.profile-account-row span { margin-top:5px; color:#716e77; font-size:10px; } body.desktop-light .profile-page-head,body.desktop-light .profile-archive-summary,body.desktop-light .profile-archive-summary > button,body.desktop-light .profile-archive-tabs,body.desktop-light .profile-archive-row,body.desktop-light .profile-knowledge,body.desktop-light .profile-account-row { border-color:#d6dee6; } body.desktop-light .profile-archive-list::-webkit-scrollbar-thumb { background:#c1ccd6; } body.desktop-light .profile-person-avatar { border-color:#8fc9c2; background:#e8f7f4; color:#168c80; } body.desktop-light .profile-person h1,body.desktop-light .profile-section-head h2,body.desktop-light .profile-archive-summary strong,body.desktop-light .profile-archive-list strong,body.desktop-light .profile-account-row strong { color:#25303a; } body.desktop-light .profile-knowledge .library-grid article { background:rgba(255,255,255,.72); } body.desktop-light .profile-archive-summary > button:hover,body.desktop-light .profile-archive-summary > button.active,body.desktop-light .profile-archive-row:hover,body.desktop-light .profile-archive-row:focus-visible { background:rgba(22,140,128,.055); } body.desktop-light .profile-record-backdrop { background:rgba(31,41,51,.32); } body.desktop-light .profile-record-drawer aside { border-color:#d4dde5; background:#f8fafc; color:#25303a; box-shadow:-18px 0 54px rgba(45,58,70,.16); } body.desktop-light .profile-record-drawer aside > header,body.desktop-light .profile-record-heading,body.desktop-light .profile-record-fields section { border-color:#dce3e9; } body.desktop-light .profile-record-heading h2 { color:#25303a; } body.desktop-light .profile-record-fields section > div { color:#3f4c57; } body.desktop-light .profile-record-drawer [data-close-record] { border-color:#cbd5de; color:#71808d; } /* Personal workspace: a clear path from the next action to the study archive. */ body.route-profile #desktop-my-data .profile-dashboard-heading > span,.profile-viz-head > span { color:#4ad9ca; font-size:10px; font-weight:750; letter-spacing:.11em; } @media (max-width:900px) { .profile-page-shell { width:min(100% - 36px,720px); padding-top:28px; }.profile-page-head,.profile-section-head { align-items:flex-start; }.profile-knowledge .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.profile-archive-tabs { gap:17px; } } @media (max-width:620px) { .profile-page-head,.profile-section-head,.profile-account-row { flex-direction:column; }.profile-archive-summary { grid-template-columns:1fr 1fr; }.profile-archive-summary > button:nth-child(even) { border-right:0; }.profile-archive-summary > button:nth-child(-n+4) { border-bottom:1px solid #292930; }.profile-archive-summary > button:last-child { grid-column:1/-1; }.profile-archive-row { grid-template-columns:46px minmax(0,1fr) 18px; }.profile-archive-row time { grid-column:2; text-align:left; }.profile-archive-row > i { grid-column:3; grid-row:1/3; }.profile-knowledge .library-grid { grid-template-columns:1fr; }.profile-record-drawer aside { width:100vw; }.profile-record-content { padding:24px 20px 38px; }.profile-record-action { margin:0 20px 18px; } } .desktop-moved-to-broadcast { display:none !important; } .broadcast-learning { margin-top:24px; padding:20px; border:1px solid #292930; border-radius:5px; background:#111115; } .broadcast-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:16px; } .broadcast-section-head span { color:#35d6c5; font-size:10px; } .broadcast-section-head h2 { margin:5px 0 0; font-size:18px; } .broadcast-section-head p { margin:7px 0 0; color:#777982; font-size:11px; } .broadcast-section-head button { border:0; background:transparent; color:#aaa6b1; cursor:pointer; } .broadcast-learning-grid { display:grid; grid-template-columns:1fr; gap:16px; } .broadcast-learning-grid > section { min-width:0; border:1px solid #292930; border-radius:4px; overflow:hidden; } .broadcast-template-entry { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:14px; width:100%; min-height:84px; padding:16px 18px; border:1px solid #285f59; border-radius:4px; background:#111715; color:#e6e8e8; text-align:left; cursor:pointer; } .broadcast-template-entry:hover { border-color:#35d6c5; background:#121c1a; } .broadcast-template-entry > span { color:#35d6c5; font-size:26px; } .broadcast-template-entry h3 { margin:0; font-size:15px; } .broadcast-template-entry p { margin:6px 0 0; color:#777982; font-size:11px; } .broadcast-template-entry b { color:#35d6c5; font-size:11px; font-weight:600; } .broadcast-resource-head { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:62px; padding:12px 16px; border-bottom:1px solid #292930; } .broadcast-resource-head h3 { margin:0; font-size:14px; }.broadcast-resource-head span { display:block; margin-top:5px; color:#777982; font-size:10px; } .broadcast-resource-head button { flex:0 0 auto; padding:7px 10px; border:1px solid #303038; border-radius:4px; background:transparent; color:#35d6c5; cursor:pointer; font-size:11px; } .broadcast-resource-list > button { display:flex; align-items:center; gap:10px; width:100%; min-height:50px; padding:10px 14px; border:0; border-bottom:1px solid #292930; background:transparent; color:#d4d1d9; text-align:left; cursor:pointer; } .broadcast-resource-list > button:last-child { border-bottom:0; } .broadcast-resource-list > button:hover { background:#19191e; } .broadcast-resource-list > button span { color:#35d6c5; font-size:17px; } .broadcast-resource-list > button strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; } .broadcast-resource-list > button i { color:#777982; font-size:18px; font-style:normal; } .broadcast-resource-list .data-loading,.broadcast-resource-list .data-empty { padding:18px 14px; } .broadcast-card-image,.broadcast-detail-image { display:block; width:min(100%,520px); max-height:360px; margin:12px 0; border-radius:4px; object-fit:cover; border:1px solid #292930; } .broadcast-feedback { margin:14px 0 0; color:#df9191; font-size:11px; }.broadcast-file-note { display:block; margin-top:6px; color:#777982; font-size:10px; }.broadcast-upload-preview { display:block; max-width:180px; max-height:120px; margin-top:10px; border-radius:4px; object-fit:cover; } .broadcast-modal { position:fixed; inset:0; z-index:500; display:grid; place-items:center; }.broadcast-modal > div { position:absolute; inset:0; background:rgba(0,0,0,.68); }.broadcast-modal form { position:relative; width:min(520px,calc(100% - 32px)); padding:24px; border:1px solid #303038; border-radius:6px; background:#15151a; }.broadcast-modal h2 { margin:0 0 20px; }.broadcast-modal label { display:block; margin:14px 0; color:#aaa6b1; font-size:12px; }.broadcast-modal input,.broadcast-modal textarea { width:100%; box-sizing:border-box; margin-top:7px; padding:10px; border:1px solid #303038; border-radius:4px; background:#0d0d10; color:#ecebf0; }.broadcast-modal textarea { height:150px; resize:vertical; }.broadcast-modal footer { display:flex; justify-content:flex-end; gap:8px; }.broadcast-modal button { padding:8px 16px; border:1px solid #303038; border-radius:4px; background:#24242b; color:#ecebf0; }.broadcast-modal button[type=submit] { background:#178f83; border-color:#178f83; }.broadcast-modal form > p { color:#e17b7b; font-size:11px; } /* ── Broadcast head ── */ .broadcast-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:26px; border-bottom:1px solid #1e1e25; } .broadcast-head-left { flex:1; min-width:0; } .broadcast-head-label { display:flex; align-items:baseline; gap:10px; } .broadcast-head-label span { color:#35d6c5; font-size:10px; letter-spacing:.08em; font-weight:600; } .broadcast-head-left h1 { margin:4px 0 0; font-size:30px; font-weight:700; letter-spacing:-.4px; } .broadcast-head-left p { margin:8px 0 0; color:#888490; font-size:13px; } .broadcast-head-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; margin-top:4px; } .bc-compose-btn { padding:10px 20px; border:0; border-radius:5px; background:#178f83; color:#fff; font:600 13px/1.3 inherit; cursor:pointer; transition:background .15s; } .bc-compose-btn:hover { background:#1aa898; } .bc-friend-requests-btn { position:relative; display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border:1px solid #2d2d35; border-radius:5px; background:transparent; color:#c4c0cb; font:13px/1.3 inherit; cursor:pointer; transition:border-color .15s,color .15s; } .bc-friend-requests-btn:hover { border-color:#494952; color:#f0edf4; } .bc-req-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:#e05f5f; color:#fff; font-size:10px; font-weight:700; } /* ── Filter bar ── */ .broadcast-explorer { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:20px; padding-bottom:16px; border-bottom:1px solid #1e1e25; } .broadcast-filter-tabs { display:flex; gap:3px; } .broadcast-filter-tabs button { min-height:34px; padding:0 15px; border:1px solid transparent; border-radius:4px; background:transparent; color:#77747f; cursor:pointer; font-size:13px; transition:all .12s; } .broadcast-filter-tabs button:hover { color:#c8c4d0; background:#1a1a20; } .broadcast-filter-tabs button.active { background:#222228; color:#f0edf4; border-color:#35353e; font-weight:600; } .broadcast-filter-options { display:flex; align-items:center; gap:12px; } .bc-filter-group { display:flex; align-items:center; gap:5px; } .bc-filter-label { color:#55525d; font-size:11px; } .broadcast-filter-options button { min-height:28px; padding:0 10px; border:1px solid #2a2a32; border-radius:3px; background:#111115; color:#6a6774; cursor:pointer; font-size:11px; transition:all .12s; } .broadcast-filter-options button:hover { border-color:#3e3e48; color:#b0adb8; } .broadcast-filter-options button.active { border-color:#35d6c5; color:#35d6c5; background:#0d2926; } .bc-ranking-btn { padding:7px 12px; border:1px solid #2a2a32; border-radius:3px; background:transparent; color:#777480; cursor:pointer; font-size:11px; white-space:nowrap; transition:color .12s; } .bc-ranking-btn:hover { color:#c8c4d0; } /* ── Feed & cards ── */ .broadcast-feed { display:grid; gap:14px; padding-top:22px; } .broadcast-card { padding:20px 22px; border:1px solid #242429; border-radius:7px; background:#111115; transition:border-color .15s; } .broadcast-card:hover { border-color:#2e2e36; } .broadcast-card.official { border-left:3px solid #35d6c5; } /* avatar + meta row */ .bc-card-meta { display:flex; align-items:center; gap:10px; margin-bottom:14px; } .bc-avatar { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:34px; height:34px; border-radius:50%; font-size:14px; font-weight:700; color:#fff; } .bc-avatar-1 { background:#2a7d6f; } .bc-avatar-2 { background:#5a4a8a; } .bc-avatar-3 { background:#7a4060; } .bc-avatar-4 { background:#3d6e9a; } .bc-avatar-5 { background:#7a6020; } .bc-avatar-6 { background:#4a7a3a; } .bc-card-who { flex:1; min-width:0; } .bc-card-who b { display:block; color:#c8c4d2; font-size:13px; font-weight:600; } .bc-card-who time { color:#666270; font-size:11px; } .bc-add-friend { flex-shrink:0; padding:5px 12px; border:1px solid #2e3e3c; border-radius:4px; background:transparent; color:#35d6c5; font-size:11px; font-weight:600; cursor:pointer; transition:all .12s; } .bc-add-friend:hover { background:#0d2926; border-color:#35d6c5; } .bc-add-friend-sent { color:#666270 !important; border-color:#222228 !important; cursor:default; } .bc-friend-state { flex-shrink:0; display:inline-flex; align-items:center; gap:7px; } .bc-friend-state em { color:#77727f; font-size:11px; font-style:normal; white-space:nowrap; } .bc-add-friend.muted { border-color:#282832; color:#8b8794; } .bc-add-friend.muted:hover { border-color:#44424d; background:#191820; color:#d8d4de; } /* card content */ .broadcast-card h2 { margin:0 0 9px; font-size:16px; font-weight:600; line-height:1.45; color:#e4e1ea; } .broadcast-card p { margin:0 0 13px; color:#9d99a7; font-size:13px; line-height:1.75; } /* footer */ .broadcast-question footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:13px; border-top:1px solid #1e1e24; } .bc-topic-tag { display:inline-block; padding:3px 9px; border-radius:3px; font-size:11px; font-weight:600; letter-spacing:.02em; } .bc-topic-ask { background:#2a1e3a; color:#b97ae8; } .bc-topic-share { background:#0e2a26; color:#35d6c5; } .bc-topic-skill { background:#17223a; color:#7fb2ff; } .bc-topic-checkin { background:#0e2418; color:#52c978; } .bc-topic-exp { background:#2a2010; color:#d4922a; } .bc-topic-general { background:#1e1e28; color:#7e7a8a; } /* action buttons */ .broadcast-actions { display:flex; align-items:center; gap:4px; flex-wrap:wrap; } .broadcast-actions button,.bc-btn-discuss,.bc-btn-like,.bc-btn-bookmark,.bc-btn-delete { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border:1px solid transparent; border-radius:4px; background:transparent; color:#66626f; cursor:pointer; font:inherit; font-size:12px; transition:all .12s; } .broadcast-actions button:hover,.bc-btn-discuss:hover { color:#b8b4c0; background:#1a1a22; } .bc-btn-like:hover,.bc-btn-like.active { color:#e06b9a; background:#2a1520; border-color:#3a1e2a; } .bc-btn-delete { color:#c98989 !important; } .bc-btn-delete:hover { color:#f0a8a8 !important; background:#2a1717 !important; border-color:#4a2a2a !important; } .bc-btn-bookmark:hover,.bc-btn-bookmark.active { color:#35d6c5; background:#0d2926; border-color:#1e3e3a; } .bc-btn-discuss:hover { color:#8888cc; background:#1a1a26; } .broadcast-actions button:disabled,.bc-btn-like:disabled,.bc-btn-bookmark:disabled { opacity:.5; cursor:wait; } .broadcast-skill-file { display:flex; align-items:center; gap:12px; width:min(100%,520px); margin:12px 0 14px; padding:12px 14px; border:1px solid #263754; border-radius:5px; background:#111a28; color:#d9e7ff; text-decoration:none; } .broadcast-skill-file:hover { border-color:#4e83c8; background:#132033; } .broadcast-skill-file > i { flex:0 0 auto; color:#7fb2ff; font-size:22px; } .broadcast-skill-file span { display:flex; min-width:0; flex-direction:column; gap:3px; } .broadcast-skill-file b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#eaf2ff; font-size:13px; } .broadcast-skill-file small { color:#7f91ac; font-size:11px; } /* topic pill form */ .bc-form-topic-row { display:block; } .bc-topic-pills { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; } .bc-topic-pills label { cursor:pointer; } .bc-topic-pills input[type=radio] { position:absolute; opacity:0; width:0; height:0; } .bc-topic-pills span { display:inline-block; padding:5px 13px; border:1px solid #2d2d38; border-radius:4px; background:#111115; color:#777480; font-size:12px; transition:all .12s; } .bc-topic-pills input:checked + span { border-color:#35d6c5; color:#35d6c5; background:#0d2926; } .bc-topic-pills label:hover span { border-color:#3a3a44; color:#c0bcc8; } /* knowledge library import modal */ .agent-library-import { padding:0 0 4px; } .agent-library-import p { margin:0 0 16px; color:#9d99a7; font-size:13px; } .agent-library-drop { position:relative; display:flex; align-items:center; justify-content:center; min-height:90px; border:1px dashed #35353e; border-radius:6px; background:#0e0e12; color:#666270; font-size:13px; cursor:pointer; transition:border-color .15s,background .15s; } .agent-library-drop:hover { border-color:#35d6c5; background:#0d1e1c; color:#35d6c5; } body.desktop-light .desktop-data-page { background:#edf1f6; color:#252830; } body.desktop-light .broadcast-card,body.desktop-light .broadcast-modal form { background:rgba(255,255,255,.72); border-color:#d6dbe2; } body.desktop-light .broadcast-card h2,body.desktop-light .data-list article strong { color:#252830; } body.desktop-light .broadcast-learning,body.desktop-light .broadcast-learning-grid > section { background:rgba(255,255,255,.62); border-color:#d6dbe2; } body.desktop-light .broadcast-learning-grid h3,body.desktop-light .broadcast-resource-list > button { border-color:#d6dbe2; color:#252830; } body.desktop-light .broadcast-resource-head { border-color:#d6dbe2; } body.desktop-light .broadcast-resource-head button { border-color:#cbd5df; color:#178f83; } body.desktop-light .broadcast-template-entry { border-color:#9dcfc9; background:rgba(255,255,255,.72); color:#252830; } body.desktop-light .broadcast-explorer { border-color:#d6dbe2; } body.desktop-light .broadcast-filter-tabs,body.desktop-light .broadcast-filter-tabs button,body.desktop-light .broadcast-filter-options button { border-color:#d6dbe2; background:rgba(255,255,255,.58); color:#687382; } body.desktop-light .broadcast-filter-tabs button.active,body.desktop-light .broadcast-filter-options button.active { background:#fff; color:#202733; } body.desktop-light .library-grid article { background:rgba(255,255,255,.72); border-color:#d6dbe2; } body.desktop-light .library-grid strong { color:#252830; } @media (max-width:820px) { .library-grid { grid-template-columns:1fr 1fr; } } @media (max-width:900px) { .broadcast-learning-grid { grid-template-columns:1fr; }.broadcast-explorer { align-items:stretch; flex-direction:column; }.broadcast-filter-tabs { overflow-x:auto; }.broadcast-filter-tabs button { flex:0 0 auto; }.broadcast-filter-options { align-items:flex-start; } } .ai-workspace-shell-RETIRED { width:100% !important; max-width:none !important; margin:0 !important; padding:54px 54px 76px !important; box-sizing:border-box; } .ai-workspace-head-RETIRED .broadcast-head-actions button, .ai-workspace-head-RETIRED .broadcast-head-actions a { min-height:38px; padding:0 18px; border:1px solid #303038; border-radius:4px; background:#111115; color:#d8d6de; font:700 12px/1.2 inherit; cursor:pointer; text-decoration:none; } .ai-workspace-head-RETIRED .broadcast-head-actions .bc-compose-btn { border-color:#178f83; background:#178f83; color:#fff; } .ai-workspace-tabs { margin-top:20px; } .ai-workspace-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); gap:18px; align-items:start; padding-top:22px; } .ai-grade-grid { grid-template-columns:repeat(2,minmax(0,1fr)) minmax(280px,340px); } .ai-workspace-card { min-width:0; border:1px solid #242429; border-radius:7px; background:#111115; box-sizing:border-box; } .ai-workspace-composer,.ai-workspace-result { padding:22px; } .ai-workspace-side { padding:20px; } .ai-grade-grid > .ai-workspace-card:not(.ai-workspace-side) { padding:22px; } .ai-grade-grid .ai-workspace-result { grid-column:1 / span 2; } .ai-grade-grid .ai-workspace-side { grid-column:3; grid-row:1 / span 2; } .ai-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; } .ai-card-head span { display:block; color:#35d6c5; font-size:10px; font-weight:800; letter-spacing:.08em; } .ai-card-head h2 { margin:5px 0 0; color:#e7e5ec; font-size:16px; line-height:1.35; } .ai-card-head small { color:#77747f; font-size:11px; } .ai-workspace-card textarea { width:100%; min-height:220px; padding:14px; border:1px solid #303038; border-radius:4px; background:#0d0d10; color:#ecebf0; box-sizing:border-box; font:500 14px/1.7 inherit; resize:vertical; } .ai-workspace-card textarea:focus { border-color:#35d6c5; outline:0; } .ai-prompt-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .ai-prompt-row button { min-height:32px; padding:0 12px; border:1px solid #2a2a32; border-radius:3px; background:#15151b; color:#8f8b98; font:700 11px/1.2 inherit; cursor:pointer; } .ai-prompt-row button:hover { border-color:#35d6c5; color:#35d6c5; } .ai-output { min-height:220px; padding:16px 18px; border:1px solid #242429; border-radius:5px; background:#0d0d10; color:#aaa6b1; font-size:14px; line-height:1.8; white-space:pre-wrap; } .ai-mini-list { display:grid; gap:0; border-top:1px solid #242429; } .ai-mini-list a { display:flex; align-items:center; justify-content:space-between; min-height:46px; border-bottom:1px solid #242429; color:#c9c6cf; font-size:13px; text-decoration:none; } .ai-mini-list a::after { content:'›'; color:#35d6c5; } .ai-mini-list a:hover { color:#35d6c5; } body.desktop-light .ai-workspace-card { border-color:#d6dbe2; background:rgba(255,255,255,.72); } body.desktop-light .ai-workspace-card textarea, body.desktop-light .ai-output { border-color:#cfd8e2; background:#fff; color:#202733; } body.desktop-light .ai-card-head h2 { color:#25303a; } body.desktop-light .ai-mini-list a { border-color:#d6dbe2; color:#455160; } @media (max-width:1100px) { .ai-workspace-grid,.ai-grade-grid { grid-template-columns:1fr; } .ai-grade-grid .ai-workspace-result,.ai-grade-grid .ai-workspace-side { grid-column:auto; grid-row:auto; } } /* High-score template administration and library: desktop hierarchy and EigenFlux-style actions. */ body.route-high-score-admin #app .min-h-screen { --accent:#35d6c5; --panel:#111114; --panel-2:#151519; --line:#292930; max-width:1280px; } body.desktop-dark.route-high-score-admin:not(.route-qa):not(.route-grade) #app .min-h-screen, body.desktop-dark.route-high-score-library:not(.route-qa):not(.route-grade) #app .min-h-screen { background:#09090b !important; color:#e8e8eb !important; } body.route-high-score-admin #app button { border-color:#303138 !important; border-radius:4px !important; background:#121216 !important; color:#b8b9c0 !important; box-shadow:none !important; } body.route-high-score-admin #app button:hover { border-color:#35d6c5 !important; color:#35d6c5 !important; background:#111b19 !important; } body.route-high-score-admin #app button[class*="bg-primary"], body.route-high-score-admin #app button:has([class*="eye-check"]), body.route-high-score-admin #app button:has([class*="plus"]) { border-color:#268b7f !important; background:#178f83 !important; color:#fff !important; } body.route-high-score-admin #app [style*="linear-gradient"] { background:#09090b !important; } body.route-high-score-admin #app [style*="glass-bg"], body.route-high-score-admin #app [class*="backdrop-blur"] { border-color:#292930 !important; background:#111114 !important; box-shadow:none !important; } body.route-high-score-admin #app .admin-topic-grid { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; align-items:stretch !important; gap:12px !important; width:100% !important; } body.route-high-score-admin #app .admin-topic-grid > * { width:auto !important; min-width:0 !important; margin:0 !important; transform:none !important; } body.route-high-score-admin #app .admin-topic-grid > *:hover { border-color:#285f59 !important; background:#141a19 !important; } body.route-high-score-library #app .desktop-template-action { display:inline-flex !important; width:auto !important; min-width:112px; max-width:220px; min-height:36px; margin:0 !important; padding:9px 16px !important; border:1px solid #268b7f !important; border-radius:4px !important; background:transparent !important; color:#35d6c5 !important; box-shadow:none !important; } body.route-high-score-library #app .desktop-template-action.is-primary { background:#178f83 !important; color:#fff !important; } body.route-high-score-library #app .desktop-template-action:hover { border-color:#35d6c5 !important; background:#1d9c90 !important; color:#fff !important; } body.route-high-score-library #app .desktop-recall-action { min-height:48px !important; border-width:1px !important; border-radius:5px !important; box-shadow:none !important; font-weight:650 !important; transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease !important; } body.route-high-score-library #app .desktop-recall-action:hover { transform:translateY(-1px); } body.route-high-score-library #app .desktop-recall-action.is-missed { background:#211517 !important; border-color:#613139 !important; color:#db929a !important; } body.route-high-score-library #app .desktop-recall-action.is-missed:hover { background:#29181b !important; border-color:#9d4c58 !important; } body.route-high-score-library #app .desktop-recall-action.is-fuzzy { background:#211b14 !important; border-color:#655033 !important; color:#d5ad70 !important; } body.route-high-score-library #app .desktop-recall-action.is-fuzzy:hover { background:#292015 !important; border-color:#a77b3e !important; } body.route-high-score-library #app .desktop-recall-action.is-remembered { background:#31d9c1 !important; border-color:#72ffe9 !important; color:#06201c !important; box-shadow:0 0 0 1px rgba(114,255,233,.13),0 0 18px rgba(49,217,193,.30),0 8px 28px rgba(0,0,0,.20) !important; } body.route-high-score-library #app .desktop-recall-action.is-remembered:hover { background:#56ead5 !important; border-color:#a0fff1 !important; box-shadow:0 0 0 1px rgba(160,255,241,.18),0 0 25px rgba(49,217,193,.42),0 10px 32px rgba(0,0,0,.24) !important; } @media (max-width:1050px) { body.route-high-score-admin #app .admin-topic-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } /* High-score template library is a mobile-authored screen. On desktop it needs a real reading canvas and explicit color protection for accent buttons. */ @media (min-width:981px) { body.route-high-score-library #app { width:auto !important; padding-left:var(--desktop-left-width) !important; padding-right:0 !important; } body.desktop-nav-collapsed.route-high-score-library #app { padding-left:0 !important; } body.route-high-score-library #app .min-h-screen { width:min(1240px,calc(100% - 64px)) !important; max-width:1240px !important; min-height:100vh !important; margin:0 auto !important; padding:40px 0 76px !important; box-sizing:border-box !important; font-size:15px !important; line-height:1.58 !important; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; } body.route-high-score-library #app .min-h-screen > div { max-width:none !important; box-sizing:border-box !important; } body.route-high-score-library #app .min-h-screen > div[style*="padding"] { padding-right:0 !important; padding-left:0 !important; } body.route-high-score-library #app .min-h-screen > div:first-child { margin-bottom:20px !important; } body.route-high-score-library #app .min-h-screen > div:first-child > div, body.route-high-score-library #app .min-h-screen [style*="rgba(255,255,255,0.88)"], body.route-high-score-library #app .min-h-screen [style*="rgba(255, 255, 255, 0.88)"], body.route-high-score-library:not(.route-qa):not(.route-grade) #app .glass-card, body.route-high-score-library:not(.route-qa):not(.route-grade) #app .glass-card-frosted, body.route-high-score-library:not(.route-qa):not(.route-grade) #app .rounded-xl, body.route-high-score-library:not(.route-qa):not(.route-grade) #app .rounded-2xl { border-radius:8px !important; box-shadow:none !important; } body.desktop-dark.route-high-score-library #app .min-h-screen > div:first-child > div, body.desktop-dark.route-high-score-library #app .min-h-screen [style*="rgba(255,255,255,0.88)"], body.desktop-dark.route-high-score-library #app .min-h-screen [style*="rgba(255, 255, 255, 0.88)"] { border:1px solid #363943 !important; background:#121318 !important; } body.desktop-light.route-high-score-library #app .min-h-screen > div:first-child > div, body.desktop-light.route-high-score-library #app .min-h-screen [style*="rgba(255,255,255,0.88)"], body.desktop-light.route-high-score-library #app .min-h-screen [style*="rgba(255, 255, 255, 0.88)"] { border:1px solid rgba(204,216,228,.92) !important; background:rgba(255,255,255,.88) !important; } body.route-high-score-library #app :is(h1,h2,h3) { font-size:clamp(22px,2vw,30px) !important; line-height:1.25 !important; letter-spacing:0 !important; } body.route-high-score-library #app p[style*="fontSize:20"], body.route-high-score-library #app p[style*="font-size: 20"], body.route-high-score-library #app [style*="font-size:20"], body.route-high-score-library #app [style*="fontSize:20"] { font-size:26px !important; line-height:1.25 !important; } body.route-high-score-library #app p, body.route-high-score-library #app span, body.route-high-score-library #app div, body.route-high-score-library #app button, body.route-high-score-library #app input, body.route-high-score-library #app textarea { letter-spacing:0 !important; } body.route-high-score-library #app p[style*="fontSize:12"], body.route-high-score-library #app span[style*="fontSize:12"], body.route-high-score-library #app div[style*="fontSize:12"], body.route-high-score-library #app [style*="font-size:12"], body.route-high-score-library #app [style*="fontSize:12"] { font-size:13px !important; line-height:1.5 !important; } body.route-high-score-library #app p[style*="fontSize:13"], body.route-high-score-library #app span[style*="fontSize:13"], body.route-high-score-library #app div[style*="fontSize:13"], body.route-high-score-library #app [style*="font-size:13"], body.route-high-score-library #app [style*="fontSize:13"] { font-size:14px !important; line-height:1.55 !important; } body.route-high-score-library #app p[style*="fontSize:14"], body.route-high-score-library #app span[style*="fontSize:14"], body.route-high-score-library #app div[style*="fontSize:14"], body.route-high-score-library #app [style*="font-size:14"], body.route-high-score-library #app [style*="fontSize:14"] { font-size:15px !important; line-height:1.62 !important; } body.route-high-score-library #app p[style*="fontSize:15"], body.route-high-score-library #app span[style*="fontSize:15"], body.route-high-score-library #app div[style*="fontSize:15"], body.route-high-score-library #app [style*="font-size:15"], body.route-high-score-library #app [style*="fontSize:15"] { font-size:17px !important; line-height:1.58 !important; } body.route-high-score-library #app [style*="lineClamp"], body.route-high-score-library #app [style*="-webkit-line-clamp"] { -webkit-line-clamp:5 !important; } body.route-high-score-library #app .flex.flex-col.gap-3 { gap:16px !important; } body.route-high-score-library #app .flex.gap-2[style*="overflow"] { gap:10px !important; padding-bottom:8px !important; } body.route-high-score-library #app input, body.route-high-score-library #app textarea, body.route-high-score-library #app taro-input-core, body.route-high-score-library #app taro-textarea-core { min-height:44px !important; border-radius:6px !important; font-size:15px !important; line-height:1.6 !important; } body.route-high-score-library #app textarea { min-height:128px !important; } } body.route-high-score-library #app :is(button,taro-button-core,.desktop-template-action,.desktop-recall-action) { align-items:center !important; justify-content:center !important; gap:8px !important; border-radius:6px !important; font-weight:700 !important; } body.route-high-score-library #app :is(button,taro-button-core,.desktop-template-action,.desktop-recall-action) :is(i,span,div,[class*="i-mdi"]) { color:inherit !important; -webkit-text-fill-color:currentColor !important; } body.route-high-score-library #app :is(button,taro-button-core,.desktop-template-action.is-primary), body.route-high-score-library #app button:is([style*="#3DBF7A"],[style*="#20B09A"],[style*="#10B981"],[style*="rgb(61, 191, 122)"],[style*="rgb(32, 176, 154)"]) { border-color:#178f83 !important; background:#178f83 !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; } body.route-high-score-library #app :is(button,taro-button-core,.desktop-template-action.is-primary) *, body.route-high-score-library #app button:is([style*="#3DBF7A"],[style*="#20B09A"],[style*="#10B981"],[style*="rgb(61, 191, 122)"],[style*="rgb(32, 176, 154)"]) * { color:#fff !important; -webkit-text-fill-color:#fff !important; } body.route-high-score-library #app .desktop-recall-action.is-remembered, body.route-high-score-library #app .desktop-recall-action.is-remembered * { color:#06201c !important; -webkit-text-fill-color:#06201c !important; } /* Legacy feature routes are mobile-first pages. Normalize them as desktop tools. */ @media (min-width:0px) { body.route-tool-page #app { width:100%; padding-right:32px; } body.route-tool-page #app .min-h-screen { width:100%; max-width:1240px; min-height:100vh; margin:0 auto; padding:28px 24px 72px !important; background:transparent !important; background-image:none !important; color:var(--shell-text) !important; } body.route-tool-page #app .min-h-screen > div:first-child { border-color:var(--shell-line) !important; } body.desktop-dark.route-tool-page #app [style*="background: rgb(255"], body.desktop-dark.route-tool-page #app [style*="background-color: rgb(255"], body.desktop-dark.route-tool-page #app [style*="background: rgb(250"], body.desktop-dark.route-tool-page #app [style*="background: rgb(248"], body.desktop-dark.route-tool-page #app [style*="background: rgb(245"], body.desktop-dark.route-tool-page #app [style*="background: #fff"], body.desktop-dark.route-tool-page #app [style*="background:#fff"], body.desktop-dark.route-tool-page #app [style*="background: #F"], body.desktop-dark.route-tool-page #app [style*="background:#F"] { background:#15151a !important; background-image:none !important; border-color:#303038 !important; } body.desktop-dark.route-tool-page #app [style*="color: rgb(44"], body.desktop-dark.route-tool-page #app [style*="color: #2C"], body.desktop-dark.route-tool-page #app [style*="color:#2C"] { color:#ecebf0 !important; } body.desktop-dark.route-tool-page #app [style*="color: rgb(100"], body.desktop-dark.route-tool-page #app [style*="color: rgba(100"] { color:#aaa6b1 !important; } body.route-exams #app [style*="background-clip: text"], body.route-exams #app [style*="-webkit-background-clip: text"] { background:none !important; background-image:none !important; color:var(--shell-text) !important; -webkit-text-fill-color:var(--shell-text) !important; } body.route-tool-page #app textarea { min-height:120px; } body.route-tool-page #app input,body.route-tool-page #app textarea,body.route-tool-page #app taro-input-core,body.route-tool-page #app taro-textarea-core { background:var(--shell-strong) !important; color:var(--shell-text) !important; border-color:var(--shell-line) !important; } body.route-tool-page #app [style*="position: fixed"] { max-width:100vw; } } /* Personal tools: legacy mobile views need a stable desktop reading column. */ body.route-personal-tool #app .min-h-screen { width:100%; max-width:1040px; min-height:calc(100vh - 40px); margin:0 auto; padding:24px 28px 56px !important; box-sizing:border-box; } body.route-personal-tool #app .min-h-screen > div { max-width:100%; } body.route-personal-tool:not(.route-qa):not(.route-grade) #app .rounded-xl, body.route-personal-tool:not(.route-qa):not(.route-grade) #app .rounded-2xl, body.route-personal-tool:not(.route-qa):not(.route-grade) #app .glass-card, body.route-personal-tool:not(.route-qa):not(.route-grade) #app .glass-card-frosted { background:var(--shell-surface) !important; border:1px solid var(--shell-line) !important; box-shadow:0 8px 24px rgba(29,45,63,.045) !important; } body.route-personal-tool #app [class*="items-center"][class*="justify-center"] { min-height:260px; padding:32px 20px !important; } body.route-personal-tool #app [class*="items-center"][class*="justify-center"] > * { max-width:520px; } body.route-personal-tool #app [style*="maxWidth: '"], body.route-personal-tool #app [style*="max-width:"] { max-width:100%; } body.route-personal-tool #app [class*="text-muted"], body.route-personal-tool #app [class*="text-gray"] { color:var(--shell-muted) !important; opacity:1 !important; } body.route-personal-tool #app [class*="text-foreground"], body.route-personal-tool #app h1, body.route-personal-tool #app h2, body.route-personal-tool #app h3 { color:var(--shell-text) !important; } /* White desktop: a brighter glass canvas with crisp surfaces and readable hierarchy. */ body.desktop-light { background:linear-gradient(135deg,#f8fbff 0%,#edf4f8 55%,#f7fafc 100%) !important; --shell-canvas:#f3f7fb; --shell-surface:rgba(255,255,255,.84); --shell-strong:rgba(255,255,255,.94); --shell-line:rgba(202,214,226,.88); --shell-text:#202937; --shell-muted:#657384; --shell-faint:#8290a0; } body.desktop-light #desktop-nav, body.desktop-light #desktop-contextbar { background:rgba(255,255,255,.82) !important; border-color:rgba(203,214,226,.92) !important; box-shadow:0 10px 34px rgba(61,80,101,.06) !important; } body.desktop-light #app { background:transparent !important; } body.desktop-light:not(.route-qa):not(.route-grade) #app .bg-card, body.desktop-light:not(.route-qa):not(.route-grade) #app .bg-white, body.desktop-light:not(.route-qa):not(.route-grade) #app .glass-card, body.desktop-light:not(.route-qa):not(.route-grade) #app .glass-card-frosted, body.desktop-light:not(.route-qa):not(.route-grade) #app .rounded-xl, body.desktop-light:not(.route-qa):not(.route-grade) #app .rounded-2xl { background-color:rgba(255,255,255,.78) !important; border-color:rgba(205,216,228,.86) !important; box-shadow:0 8px 22px rgba(42,60,80,.045) !important; } body.desktop-light #desktop-contextbar .context-message { background:rgba(255,255,255,.78); border-color:rgba(205,216,228,.82); } body.desktop-light #desktop-contextbar .context-chat-form, body.desktop-light #desktop-contextbar .context-tabs, body.desktop-light #desktop-contextbar .assistant-head { border-color:rgba(205,216,228,.82); } /* Exam bank: preserve the legacy routes, but give their mobile-first hub a calm desktop hierarchy. */ body.route-exams #app .min-h-screen { max-width:1180px; padding:32px 28px 72px !important; } body.route-exams #app .min-h-screen > div:first-child { min-height:76px; padding:0 4px 18px !important; background:transparent !important; border:0 !important; } body.route-exams #app .min-h-screen > div:first-child [class*="bg-gradient"], body.route-exams #app .min-h-screen > div:first-child [style*="linear-gradient"] { background:transparent !important; background-image:none !important; } body.route-exams #app .min-h-screen > div:first-child [class*="text-primary-foreground"] { color:var(--shell-text) !important; } body.route-exams #app .min-h-screen > div:first-child p, body.route-exams #app .min-h-screen > div:first-child span { color:var(--shell-muted) !important; } body.route-exams #app .min-h-screen > div:first-child h1, body.route-exams #app .min-h-screen > div:first-child h2, body.route-exams #app .min-h-screen > div:first-child [class*="font-bold"] { color:var(--shell-text) !important; font-weight:700 !important; } body.route-exams #app .min-h-screen > div { border-color:var(--shell-line) !important; } body.route-exams #app .min-h-screen [class*="text-muted"], body.route-exams #app .min-h-screen [class*="text-gray"] { color:var(--shell-muted) !important; opacity:1 !important; } body.route-exams #app .min-h-screen [class*="text-foreground"], body.route-exams #app .min-h-screen h1, body.route-exams #app .min-h-screen h2, body.route-exams #app .min-h-screen h3 { color:var(--shell-text) !important; } body.route-exams #app .min-h-screen [class*="bg-gradient-primary"] { background:#178f83 !important; background-image:none !important; } body.route-exams #app .min-h-screen button[class*="bg-gradient-primary"] { border-color:#178f83 !important; color:#fff !important; } body.route-exams #app .min-h-screen [class*="rounded-xl"], body.route-exams #app .min-h-screen [class*="rounded-2xl"], body.route-exams #app .min-h-screen .glass-card, body.route-exams #app .min-h-screen .glass-card-frosted { border-radius:6px !important; box-shadow:none !important; } body.route-exams #app .min-h-screen [class*="grid"] { gap:12px !important; } body.route-exams #app .min-h-screen button { min-height:38px; } body.route-exams #app .min-h-screen button:hover { border-color:#338f85 !important; background-color:rgba(53,214,197,.08) !important; } /* Q&A workspace: remove the mobile gradient banner and restore a quiet desktop reading hierarchy. */ body.route-qa-RETIRED #app .min-h-screen { width:min(1320px,calc(100% - 80px)); max-width:none; min-height:100vh; margin:0 auto; padding:40px 0 72px !important; background:transparent !important; } body.route-qa-RETIRED #app .min-h-screen::before { display:none; } body.route-qa-RETIRED #app .min-h-screen::after { content:''; display:block; clear:both; } body.route-qa-RETIRED #desktop-qa-header-RETIRED { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:0 0 24px; margin-bottom:22px; border-bottom:1px solid var(--shell-line); } body.route-qa-RETIRED #desktop-qa-header-RETIRED > div { min-width:0; } body.route-qa-RETIRED #desktop-qa-header-RETIRED span { display:block; color:#35d6c5; font-size:10px; font-weight:700; letter-spacing:0; } body.route-qa-RETIRED #desktop-qa-header-RETIRED h1 { margin:9px 0 7px; color:var(--shell-text); font-size:28px; line-height:1.2; } body.route-qa-RETIRED #desktop-qa-header-RETIRED p { max-width:620px; margin:0; color:var(--shell-muted); font-size:12px; line-height:1.6; } body.route-qa-RETIRED #desktop-qa-header-RETIRED a { flex:0 0 auto; padding:9px 13px; border:1px solid #268b7f; border-radius:4px; background:#178f83; color:#fff; font-size:12px; text-decoration:none; } body.route-qa-RETIRED #desktop-qa-header-RETIRED a:hover { background:#117a70; } body.route-qa-RETIRED #app .min-h-screen > div { width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; box-sizing:border-box !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-legacy-header { display:none !important; } body.route-qa-RETIRED #app .min-h-screen > div:first-child [class*="bg-gradient"], body.route-qa-RETIRED #app .min-h-screen > div:first-child [style*="linear-gradient"], body.route-qa-RETIRED #app .min-h-screen > div:first-child [style*="var(--gradient"] { background:transparent !important; background-image:none !important; } body.route-qa-RETIRED #app .min-h-screen > div:first-child [class*="text-primary-foreground"] { color:var(--shell-text) !important; } body.route-qa-RETIRED #app .min-h-screen > div:first-child h1, body.route-qa-RETIRED #app .min-h-screen > div:first-child h2, body.route-qa-RETIRED #app .min-h-screen > div:first-child [class*="font-bold"] { color:var(--shell-text) !important; font-size:22px !important; font-weight:700 !important; } body.route-qa-RETIRED #app .min-h-screen > div:first-child p, body.route-qa-RETIRED #app .min-h-screen > div:first-child span { color:var(--shell-muted) !important; } body.route-qa-RETIRED #app .min-h-screen > div:not(:first-child) { border-color:var(--shell-line) !important; } body.route-qa-RETIRED:not(.route-qa):not(.route-grade) #app .glass-card,body.route-qa-RETIRED:not(.route-qa):not(.route-grade) #app .glass-card-frosted { border:1px solid var(--shell-line) !important; border-radius:6px !important; background:var(--shell-surface) !important; box-shadow:none !important; } body.route-qa-RETIRED #app textarea { min-height:150px !important; padding:14px !important; font-size:15px !important; line-height:1.65 !important; } body.route-qa-RETIRED #app input,body.route-qa-RETIRED #app textarea,body.route-qa-RETIRED #app taro-input-core,body.route-qa-RETIRED #app taro-textarea-core { background:var(--shell-strong) !important; color:var(--shell-text) !important; border:1px solid var(--shell-line) !important; } body.route-qa-RETIRED #app .__linka_perf_dead [class*="rounded-full"],body.route-qa-RETIRED #app .__linka_perf_dead [class*="rounded-xl"],body.route-qa-RETIRED #app .__linka_perf_dead [class*="rounded-2xl"] { border-radius:6px !important; } body.route-qa-RETIRED #app button[class*="bg-gradient-primary"],body.route-qa-RETIRED #app button[style*="var(--gradient-primary)"] { min-height:46px; background:#178f83 !important; background-image:none !important; border:1px solid #178f83 !important; box-shadow:none !important; color:#fff !important; } body.route-qa-RETIRED #app button[class*="bg-gradient-primary"]:hover,body.route-qa-RETIRED #app button[style*="var(--gradient-primary)"]:hover { background:#117a70 !important; } body.route-qa-RETIRED #app .__linka_perf_dead [class*="text-muted"],body.route-qa-RETIRED #app [class*="text-gray"] { color:var(--shell-muted) !important; opacity:1 !important; } body.route-qa-RETIRED #app .__linka_perf_dead [class*="text-foreground"],body.route-qa-RETIRED #app h1,body.route-qa-RETIRED #app h2,body.route-qa-RETIRED #app h3,body.route-qa-RETIRED #app strong { color:var(--shell-text) !important; } @media (max-width:980px) { body.route-qa-RETIRED #app .min-h-screen { width:calc(100% - 40px); padding-top:28px !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED { align-items:flex-start; flex-direction:column; } } /* Grading workspace: crisp solid panels and a single green action hierarchy. */ body.route-grade-RETIRED #app .min-h-screen { width:min(1240px,calc(100% - 64px)); max-width:none; margin:0 auto; padding:30px 0 64px !important; background:#09090b !important; color:#ecebf0 !important; } body.route-grade-RETIRED #app .min-h-screen > div:first-child { min-height:auto !important; padding:0 4px 22px !important; border-bottom:1px solid #2b2b31 !important; background:transparent !important; background-image:none !important; box-shadow:none !important; } body.route-grade-RETIRED #app .min-h-screen > div:first-child > div[style*="position: absolute"] { display:none !important; } body.route-grade-RETIRED #app .min-h-screen > div:not(:first-child),body.route-grade-RETIRED:not(.route-qa):not(.route-grade) #app .glass-card,body.route-grade-RETIRED:not(.route-qa):not(.route-grade) #app .glass-card-frosted { border:1px solid #2b2b31 !important; border-radius:5px !important; background:#111114 !important; background-image:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } body.route-grade-RETIRED #app .__linka_perf_dead [style*="rgba(255,255,255"],body.route-grade-RETIRED #app .__linka_perf_dead [style*="rgba(255, 255, 255"] { border-color:#303038 !important; background:#15151a !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } body.route-grade-RETIRED #app .__linka_perf_dead [style*="linear-gradient"],body.route-grade-RETIRED #app .__linka_perf_dead [class*="bg-gradient"] { background:#111114 !important; background-image:none !important; box-shadow:none !important; } body.route-grade-RETIRED #app h1,body.route-grade-RETIRED #app h2,body.route-grade-RETIRED #app h3,body.route-grade-RETIRED #app [class*="font-bold"],body.route-grade-RETIRED #app .__linka_perf_dead [class*="text-foreground"] { color:#f1eff4 !important; opacity:1 !important; } body.route-grade-RETIRED #app p,body.route-grade-RETIRED #app span,body.route-grade-RETIRED #app label,body.route-grade-RETIRED #app .__linka_perf_dead [class*="text-muted"],body.route-grade-RETIRED #app [class*="text-gray"] { color:#aaa6b1 !important; opacity:1 !important; } body.route-grade-RETIRED #app textarea,body.route-grade-RETIRED #app input,body.route-grade-RETIRED #app taro-textarea-core,body.route-grade-RETIRED #app taro-input-core { border:1px solid #34343c !important; border-radius:4px !important; background:#0d0d10 !important; color:#ecebf0 !important; opacity:1 !important; } body.route-grade-RETIRED #app textarea::placeholder,body.route-grade-RETIRED #app input::placeholder { color:#74717b !important; opacity:1 !important; } body.route-grade-RETIRED #app button { border-color:#34343c !important; border-radius:4px !important; color:#c9c6d0 !important; box-shadow:none !important; } body.route-grade-RETIRED #app button:hover { border-color:#35d6c5 !important; color:#eafffc !important; } body.route-grade-RETIRED #app button[class*="bg-gradient-primary"],body.route-grade-RETIRED #app button[class*="bg-primary"],body.route-grade-RETIRED #app button[style*="linear-gradient"] { background:#178f83 !important; background-image:none !important; border-color:#178f83 !important; color:#fff !important; font-weight:700 !important; } body.route-grade-RETIRED #app button[class*="bg-gradient-primary"] span,body.route-grade-RETIRED #app button[class*="bg-primary"] span { color:#fff !important; } body.route-grade-RETIRED #app .capsule-selected { border-color:#35d6c5 !important; background:#173c38 !important; color:#dffffa !important; } body.route-grade-RETIRED #app .capsule-selected span { color:#dffffa !important; } body.route-grade-RETIRED #app [class*="text-primary"],body.route-grade-RETIRED #app .__linka_perf_dead [style*="#7B5EA7"],body.route-grade-RETIRED #app .__linka_perf_dead [style*="#7B6CF6"] { color:#35d6c5 !important; } @media (max-width:980px) { body.route-grade-RETIRED #app .min-h-screen { width:calc(100% - 36px); padding-top:24px !important; } } /* Community feed and discussion sheet. */ .broadcast-question footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:15px; padding-top:12px; border-top:1px solid #292930; } .broadcast-question footer small { color:#7c7884; }.broadcast-question footer button { border:0; background:transparent; color:#35d6c5; font:600 12px/1.2 inherit; cursor:pointer; } .broadcast-question footer button:hover { color:#a9fff5; } .broadcast-discussion > section { position:relative; width:min(720px,calc(100% - 32px)); max-height:84vh; overflow-y:auto; padding:0; border:1px solid #303038; border-radius:6px; background:#15151a; color:#ecebf0; } .broadcast-discussion > section > header { display:flex; justify-content:space-between; gap:20px; padding:22px 24px 16px; border-bottom:1px solid #292930; } .broadcast-discussion > section > header span { color:#35d6c5; font-size:11px; font-weight:700; }.broadcast-discussion > section h2 { margin:8px 0; font-size:20px; }.broadcast-discussion > section header p { margin:0; color:#817d88; font-size:12px; }.broadcast-discussion > section header button { width:28px; height:28px; padding:0; border:1px solid #35353d; border-radius:3px; background:transparent; color:#aaa6b1; font-size:20px; cursor:pointer; } .broadcast-discussion > section > article { padding:18px 24px; border-bottom:1px solid #292930; color:#c7c3cc; font-size:14px; line-height:1.75; white-space:pre-wrap; } .broadcast-replies { padding:18px 24px; }.broadcast-replies h3 { margin:0 0 12px; font-size:14px; }.broadcast-replies > article { padding:12px 0; border-bottom:1px solid #292930; }.broadcast-replies > article:last-child { border-bottom:0; }.broadcast-replies > article div { display:flex; justify-content:space-between; gap:12px; }.broadcast-replies b { color:#d9d6df; font-size:12px; }.broadcast-replies time { color:#777380; font-size:11px; }.broadcast-replies p { margin:7px 0 0; color:#b8b4bf; font-size:13px; line-height:1.65; white-space:pre-wrap; } .broadcast-discussion form { padding:16px 24px 22px; border-top:1px solid #292930; }.broadcast-discussion form textarea { width:100%; height:82px; box-sizing:border-box; padding:10px; border:1px solid #35353d; border-radius:4px; background:#0d0d10; color:#ecebf0; font:13px/1.6 inherit; resize:vertical; }.broadcast-discussion form footer { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }.broadcast-discussion form button { padding:8px 12px; border:1px solid #35353d; border-radius:4px; background:transparent; color:#bdb9c4; font:600 12px/1.2 inherit; cursor:pointer; }.broadcast-discussion form button[type=submit] { border-color:#178f83; background:#178f83; color:#fff; }.broadcast-discussion form > p { margin:8px 0 0; color:#df9191; font-size:11px; } body.desktop-light .broadcast-discussion > section { background:#fff; color:#202733; border-color:#d6dbe2; }.desktop-light .broadcast-discussion > section > header,.desktop-light .broadcast-discussion > section > article,.desktop-light .broadcast-replies > article,.desktop-light .broadcast-discussion form { border-color:#e1e6ec; }.desktop-light .broadcast-discussion > section > article,.desktop-light .broadcast-replies p { color:#596575; }.desktop-light .broadcast-discussion form textarea { background:#f6f8fa; border-color:#cfd8e2; color:#202733; } /* Exam list: explicit dark hierarchy for the inline-styled legacy question bank. */ body.desktop-dark.route-exams { --exam-surface:#15181d; --exam-surface-raised:#191d23; --exam-control:#1d2128; --exam-line:#363c46; --exam-title:#f3f5f7; --exam-meta:#aeb7c2; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen { color:var(--exam-title) !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen > .px-4.pt-3.flex.flex-col { gap:12px !important; } /* Notice, search and filter surfaces. */ body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="rgba(149, 128, 218, 0.08)"][style*="rgba(149, 128, 218, 0.2)"] { background:#14191d !important; border-color:#33444a !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="rgba(149, 128, 218, 0.08)"][style*="rgba(149, 128, 218, 0.2)"] > span { color:#bcc7ce !important; font-size:12px !important; line-height:1.65 !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="rgba(255, 255, 255, 0.88)"], body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="rgba(255,255,255,0.88)"] { background:var(--exam-surface) !important; border-color:var(--exam-line) !important; box-shadow:0 1px 0 rgba(255,255,255,.025) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 10px 14px"]:focus-within { border-color:#4fb6aa !important; box-shadow:0 0 0 3px rgba(56,214,197,.08) !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen input { color:var(--exam-title) !important; caret-color:#38d6c5; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen input::placeholder, body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen textarea::placeholder { color:#98a2ae !important; opacity:1; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 12px 16px"] button[style*="rgba(149, 128, 218, 0.08)"], body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 12px 16px"] button[style*="rgba(149,128,218,0.08)"] { min-height:36px; padding:0 12px !important; border:1px solid #39404a !important; border-radius:4px !important; background:var(--exam-control) !important; color:#d2d8de !important; font-size:12px !important; font-weight:600 !important; box-shadow:none !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 12px 16px"] button[style*="rgba(149, 128, 218, 0.08)"]:hover, body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 12px 16px"] button[style*="rgba(149,128,218,0.08)"]:hover { border-color:#4d887f !important; background:#222b2d !important; color:#e7f7f4 !important; } /* Question cards previously missed the cursor-based legacy selector entirely. */ body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px 18px"] { position:relative; cursor:pointer; background:var(--exam-surface) !important; border-color:var(--exam-line) !important; box-shadow:inset 3px 0 0 rgba(56,214,197,.18) !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px 18px"]:hover { background:var(--exam-surface-raised) !important; border-color:#4d887f !important; box-shadow:inset 3px 0 0 #38d6c5 !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px 18px"]:focus-visible { outline:2px solid #35d6c5 !important; outline-offset:2px; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px 18px"] > p[style*="-webkit-line-clamp: 2"] { margin-bottom:10px !important; color:var(--exam-title) !important; font-size:15px !important; font-weight:600 !important; line-height:1.65 !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px 18px"] > .flex.items-center:last-child span, body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px 18px"] > .flex.items-center:last-child div { color:var(--exam-meta) !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px 18px"] > .flex.items-center:last-child > span { font-size:13px !important; font-weight:500 !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px 18px"] > .flex.items-center:last-child > .flex span { color:#9fa9b5 !important; font-size:12px !important; } /* Keep all four tag meanings visible without returning to the light palette. */ body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="rgba(149, 128, 218, 0.15)"], body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="rgba(149,128,218,0.15)"] { background:#292640 !important; color:#c7bfff !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="rgba(192, 132, 160, 0.12)"], body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="rgba(192,132,160,0.12)"] { background:#35252e !important; color:#e7afc7 !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="rgba(108, 122, 142, 0.08)"], body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="rgba(108,122,142,0.08)"] { background:#242932 !important; color:#c2cad5 !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="rgba(16, 185, 129, 0.1)"], body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="rgba(16,185,129,0.10)"] { background:#17342d !important; color:#7ee2ba !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 3px 10px"] { font-size:12px !important; line-height:1.4 !important; } /* Topic investigation board: keep the legacy inline UI in one dark workspace. */ @media (min-width:981px) { body.desktop-dark.route-exams { background:#090a0d !important; } body.desktop-dark.route-exams #app { background:#090a0d !important; } body.desktop-dark.route-exams #app .min-h-screen { width:100% !important; max-width:none !important; min-height:100vh !important; margin:0 !important; padding:46px 34px 72px !important; background:#090a0d !important; color:#eef1f4 !important; } body.desktop-dark.route-exams #app .min-h-screen > div { max-width:none !important; } body.desktop-dark.route-exams #app .min-h-screen > .px-4, body.desktop-dark.route-exams #app .min-h-screen [class*="bg-background"], body.desktop-dark.route-exams #app .min-h-screen [style*="background: rgb(255"], body.desktop-dark.route-exams #app .min-h-screen [style*="background-color: rgb(255"], body.desktop-dark.route-exams #app .min-h-screen [style*="background: #fff"], body.desktop-dark.route-exams #app .min-h-screen [style*="background-color: #fff"] { background:#090a0d !important; } body.desktop-dark.route-exams #app .min-h-screen :is(h1,h2,h3,strong,b,[class*="text-foreground"],[class*="text-gray-900"],[class*="text-slate-900"]) { color:#f3f5f7 !important; opacity:1 !important; } body.desktop-dark.route-exams #app .min-h-screen :is(p,span,small,label,[class*="text-muted"],[class*="text-gray-"],[class*="text-slate-"]) { opacity:1 !important; } body.desktop-dark.route-exams #app .min-h-screen > div:first-child { padding-bottom:16px !important; background:#090a0d !important; } body.desktop-dark.route-exams #app .min-h-screen > div:first-child h1, body.desktop-dark.route-exams #app .min-h-screen > div:first-child [class*="font-bold"] { color:#f3f5f7 !important; } body.desktop-dark.route-exams #app .min-h-screen input, body.desktop-dark.route-exams #app .min-h-screen textarea, body.desktop-dark.route-exams #app .min-h-screen taro-input-core, body.desktop-dark.route-exams #app .min-h-screen taro-textarea-core { background:#0f1116 !important; border-color:#303640 !important; color:#eef1f4 !important; } body.desktop-dark.route-exams #app .min-h-screen button, body.desktop-dark.route-exams #app .min-h-screen [role="button"] { border-radius:5px !important; box-shadow:none !important; } body.desktop-dark.route-exams #app .min-h-screen [style*="border-radius: 12px"], body.desktop-dark.route-exams #app .min-h-screen [style*="border-radius:12px"], body.desktop-dark.route-exams #app .min-h-screen [class*="rounded-xl"], body.desktop-dark.route-exams #app .min-h-screen [class*="rounded-2xl"], body.desktop-dark.route-exams #app .min-h-screen .glass-card, body.desktop-dark.route-exams #app .min-h-screen .glass-card-frosted { border:1px solid #2f3540 !important; border-radius:7px !important; background:#13161c !important; background-image:none !important; color:#eef1f4 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } body.desktop-dark.route-exams #app .min-h-screen [style*="border-bottom"], body.desktop-dark.route-exams #app .min-h-screen [style*="border-top"] { border-color:#2f3540 !important; } body.desktop-dark.route-exams #app .min-h-screen [style*="rgba(255, 255, 255"], body.desktop-dark.route-exams #app .min-h-screen [style*="rgba(255,255,255"], body.desktop-dark.route-exams #app .min-h-screen [style*="rgb(255, 255, 255"], body.desktop-dark.route-exams #app .min-h-screen [style*="#ffffff"], body.desktop-dark.route-exams #app .min-h-screen [style*="#fff"] { background:#13161c !important; border-color:#2f3540 !important; color:#eef1f4 !important; } body.desktop-dark.route-exams #app .min-h-screen [style*="color: rgb(17"], body.desktop-dark.route-exams #app .min-h-screen [style*="color:#111"], body.desktop-dark.route-exams #app .min-h-screen [style*="color: #111"], body.desktop-dark.route-exams #app .min-h-screen [style*="color: rgb(31"], body.desktop-dark.route-exams #app .min-h-screen [style*="color:#1"], body.desktop-dark.route-exams #app .min-h-screen [style*="color: #1"] { color:#eef1f4 !important; } body.desktop-dark.route-exams #app .min-h-screen [style*="color: rgb(107"], body.desktop-dark.route-exams #app .min-h-screen [style*="color: rgb(113"], body.desktop-dark.route-exams #app .min-h-screen [style*="color: rgb(148"], body.desktop-dark.route-exams #app .min-h-screen [style*="color:#6"], body.desktop-dark.route-exams #app .min-h-screen [style*="color: #6"], body.desktop-dark.route-exams #app .min-h-screen [style*="color:#9"], body.desktop-dark.route-exams #app .min-h-screen [style*="color: #9"] { color:#aab3bf !important; } body.desktop-dark.route-exams #app .min-h-screen [style*="height: 1px"], body.desktop-dark.route-exams #app .min-h-screen [style*="height:1px"] { background:#3b424d !important; } } /* Filter sheets should remain in the same dark reading environment. */ body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app [style*="justify-content: flex-end"] > [style*="max-height: 65vh"] { background:#171a20 !important; color:var(--exam-title) !important; border:1px solid var(--exam-line) !important; box-shadow:0 -16px 48px rgba(0,0,0,.38) !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app [style*="max-height: 65vh"] [style*="rgba(149, 128, 218, 0.06)"] { background:var(--exam-control) !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app [style*="max-height: 65vh"] [style*="padding: 10px 12px"]:hover { background:#20282a !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen button { font-weight:600 !important; } .desktop-exam-list-shell { max-width:1180px; margin:0 auto; } .desktop-exam-list-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:18px; border-bottom:1px solid #242a32; } .desktop-exam-list-head span { display:block; color:#35d6c5; font-size:10px; font-weight:800; } .desktop-exam-list-head h1 { margin:6px 0; font-size:26px; line-height:1.15; } .desktop-exam-list-head p { margin:0; color:#8d98a4; font-size:13px; } .desktop-exam-list-head nav { display:flex; gap:8px; flex:0 0 auto; } .desktop-exam-list-head a, .desktop-exam-list-toolbar button { border:1px solid #303743; border-radius:8px; background:#171b22; color:#d9eef0; padding:9px 13px; font-size:12px; font-weight:700; text-decoration:none; } .desktop-exam-list-toolbar { display:grid; grid-template-columns:minmax(220px,1.6fr) repeat(4,minmax(110px,1fr)) auto auto; gap:8px; margin:16px 0 10px; } .desktop-exam-list-toolbar label, .desktop-exam-list-toolbar input, .desktop-exam-list-toolbar select { min-width:0; height:38px; border:1px solid #2a313b; border-radius:8px; background:#12161c; color:#f4f6f8; font-size:13px; } .desktop-exam-list-toolbar label { display:flex; align-items:center; gap:8px; padding:0 12px; } .desktop-exam-list-toolbar input, .desktop-exam-list-toolbar select { padding:0 12px; } .desktop-exam-list-toolbar label input { flex:1; height:auto; padding:0; border:0; background:transparent; } .desktop-exam-list-status { margin:0; color:#8d98a4; font-size:12px; } .desktop-exam-list-summary { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:30px; margin-bottom:10px; } .desktop-exam-list-summary > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; } .desktop-exam-list-summary button { display:inline-flex; align-items:center; gap:5px; min-height:26px; padding:3px 7px; border:1px solid #2b3b3b; border-radius:4px; background:#121c1c; color:#b9d5d2; font-size:11px; cursor:pointer; } .desktop-exam-list-summary button small { color:#708b89; font-size:10px; } .desktop-exam-list-summary button i { color:#35d6c5; font-style:normal; } .desktop-exam-list-status strong { display:block; color:#f4f6f8; margin-bottom:4px; } .desktop-exam-list-results { display:grid; gap:7px; } .desktop-exam-question-card { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 15px; border:1px solid #252c36; border-radius:8px; background:#131820; color:inherit; text-decoration:none; } .desktop-exam-question-card:hover { border-color:#31766f; background:#161d24; } .desktop-exam-question-main { min-width:0; } .desktop-exam-question-card strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#f4f6f8; font-size:13px; line-height:1.55; } .desktop-exam-question-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; } .desktop-exam-question-tags span { display:inline-flex; align-items:center; min-height:20px; padding:2px 6px; border:1px solid #29323b; border-radius:3px; background:#10141a; color:#87929d; font-size:10px; line-height:1.2; } .desktop-exam-question-tags .tag-0 { color:#a9bec1; } .desktop-exam-question-tags .tag-1 { color:#8fa8c0; } .desktop-exam-question-tags .tag-2 { color:#b1a8c4; } .desktop-exam-question-tags .tag-3 { color:#8db6a1; } .desktop-exam-question-card > b { display:inline-flex; align-items:center; gap:5px; padding-left:12px; border-left:1px solid #252d35; } .desktop-exam-question-card b { flex:0 0 auto; color:#35d6c5; font-size:12px; } .desktop-exam-question-card b i { font-style:normal; font-size:15px; } /* Exam question list focus pass: reduce the empty header band and make the working controls/list read as the primary task. */ @media (min-width:981px) { body.desktop-dark.route-exams #app .min-h-screen { padding-top:24px !important; } body.desktop-dark.route-exams #app .min-h-screen > div:first-child { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; min-height:0 !important; margin-bottom:14px !important; padding:0 0 16px !important; border-bottom:1px solid #242a32 !important; } body.desktop-dark.route-exams #app .min-h-screen > div:first-child:empty::before { content:'真题题库'; color:#f4f6f8; font-size:22px; font-weight:800; line-height:1.2; } body.desktop-dark.route-exams #app .min-h-screen > div:first-child:empty::after { content:'搜索关键词，或用院校、题型、年份快速收窄范围'; color:#87919d; font-size:12px; } body.desktop-dark.route-exams #app #desktop-exam-list-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:0 0 14px; padding:0 0 18px; border-bottom:1px solid #242a32; background:transparent !important; } body.desktop-dark.route-exams #app #desktop-exam-list-header span { display:block; color:#35d6c5 !important; font-size:10px !important; font-weight:800; letter-spacing:0; } body.desktop-dark.route-exams #app #desktop-exam-list-header h1 { margin:7px 0 7px; color:#f4f6f8 !important; font-size:24px !important; line-height:1.2; } body.desktop-dark.route-exams #app #desktop-exam-list-header p { max-width:620px; margin:0; color:#8d98a4 !important; font-size:12px !important; line-height:1.55; } body.desktop-dark.route-exams #app #desktop-exam-list-header nav { display:flex; gap:8px; flex:0 0 auto; } body.desktop-dark.route-exams #app #desktop-exam-list-header a, body.desktop-dark.route-exams #app #desktop-exam-list-header button { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 12px; border:1px solid #303844; border-radius:5px; background:#11161c; color:#cbd4dd; font:inherit; font-size:12px; font-weight:700; text-decoration:none; cursor:pointer; } body.desktop-dark.route-exams #app #desktop-exam-list-header a:hover, body.desktop-dark.route-exams #app #desktop-exam-list-header button:hover { border-color:#35d6c5; color:#f0fffd; } body.desktop-dark.route-exams #app #desktop-exam-list-header .exam-list-back { border-color:#2c786f; background:#12211f; color:#57d9cb; } body.desktop-dark.route-exams #app #desktop-exam-list-header .exam-list-back i { margin-right:6px; font-size:14px; } body.desktop-dark.route-exams #app #desktop-exam-list-header + .desktop-legacy-topbar { display:none !important; } body.desktop-dark.route-exams #app .min-h-screen > .px-4.pt-3.flex.flex-col { gap:10px !important; } body.desktop-dark.route-exams #app .min-h-screen [style*="rgba(149, 128, 218, 0.08)"][style*="rgba(149, 128, 218, 0.2)"] { min-height:0 !important; padding:9px 12px !important; border-color:#2f4549 !important; background:#0f171a !important; } body.desktop-dark.route-exams #app .min-h-screen [style*="padding: 10px 14px"] { min-height:46px !important; border-color:#3b454f !important; background:#10141a !important; } body.desktop-dark.route-exams #app .min-h-screen [style*="padding: 10px 14px"]:focus-within { border-color:#35d6c5 !important; background:#11191d !important; } body.desktop-dark.route-exams #app .min-h-screen [style*="padding: 12px 16px"] { padding:10px 14px !important; border-color:#252b33 !important; background:#101319 !important; } body.desktop-dark.route-exams #app .min-h-screen [style*="padding: 12px 16px"] button[style*="rgba(149, 128, 218, 0.08)"], body.desktop-dark.route-exams #app .min-h-screen [style*="padding: 12px 16px"] button[style*="rgba(149,128,218,0.08)"] { min-height:32px !important; color:#b8c2ce !important; } body.desktop-dark.route-exams #app .min-h-screen [style*="padding: 16px 18px"] { min-height:92px !important; padding:14px 16px !important; border-color:#2b323b !important; background:#12161c !important; box-shadow:inset 2px 0 0 rgba(53,214,197,.12) !important; } body.desktop-dark.route-exams #app .min-h-screen [style*="padding: 16px 18px"]:first-of-type, body.desktop-dark.route-exams #app .min-h-screen [style*="padding: 16px 18px"]:hover { border-color:#3c8d85 !important; background:#151b21 !important; box-shadow:inset 3px 0 0 #35d6c5 !important; } body.desktop-dark.route-exams #app .min-h-screen [style*="padding: 16px 18px"] > p[style*="-webkit-line-clamp: 2"] { margin:8px 0 12px !important; font-size:14px !important; line-height:1.55 !important; } body.desktop-dark.route-exams #app .min-h-screen [style*="padding: 3px 10px"] { padding:3px 8px !important; border-radius:4px !important; font-size:11px !important; font-weight:700 !important; } body.desktop-dark.route-exams #app .min-h-screen [style*="padding: 16px 18px"] > .flex.items-center:last-child { padding-top:2px !important; opacity:.78; } body.desktop-dark.route-exams #desktop-contextbar { background:#0d0e12 !important; } body.desktop-dark.route-exams #desktop-contextbar .assistant-head { margin-bottom:14px; border-bottom-color:#252a32; } body.desktop-dark.route-exams #desktop-contextbar .agent-context-chip { margin-bottom:12px; padding:10px 12px; border-color:#242a32; background:#101319; color:#8f99a5; } body.desktop-dark.route-exams #desktop-contextbar { overflow:hidden; } body.desktop-dark.route-exams #desktop-contextbar .people-feature { min-height:0; padding:14px; border:1px solid #26313a; border-radius:6px; background:#0f1718; } body.desktop-dark.route-exams #desktop-contextbar .people-feature-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; } body.desktop-dark.route-exams #desktop-contextbar .people-feature-stats span { min-height:54px; border-color:#244a46; background:#101a18; } body.desktop-dark.route-exams #desktop-contextbar .people-feature-stats b { color:#35d6c5; font-size:13px; } body.desktop-dark.route-exams #desktop-contextbar .people-rank-card { margin-top:14px; border-color:#252b33; background:#11141a; } body.desktop-dark.route-exams #desktop-contextbar .people-row { grid-template-columns:20px minmax(0,1fr) auto minmax(48px,auto); gap:8px; padding:10px 0; } body.desktop-dark.route-exams #desktop-contextbar .people-row > span:last-child { display:block; text-align:right; } } .exam-hub-shell { width:min(1080px,calc(100% - 56px)); margin:0 auto; padding:56px 0 76px; } .exam-hub-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding-bottom:28px; border-bottom:1px solid #292930; } .exam-hub-head span,.exam-section-head span { display:block; color:#35d6c5; font-size:10px; font-weight:700; letter-spacing:.08em; } .exam-hub-head h1 { margin:7px 0 9px; font-size:30px; line-height:1.2; letter-spacing:0; }.exam-hub-head p { margin:0; color:#8d8995; font-size:14px; } .exam-hub-head > a { padding:9px 12px; border:1px solid #303038; border-radius:4px; color:#aaa6b1; font-size:12px; white-space:nowrap; } .exam-start { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr); gap:14px; margin:24px 0 44px; } .exam-start-redesign { grid-template-columns:minmax(0,1.35fr) minmax(340px,.9fr); align-items:stretch; margin-bottom:38px; } .exam-start-main { min-height:214px; padding:28px; border:1px solid #277c73; border-radius:6px; background:#101a18; } .exam-start-main > span { color:#35d6c5; font-size:10px; font-weight:700; } .exam-start-main h2 { margin:24px 0 10px; font-size:25px; }.exam-start-main p { max-width:590px; margin:0; color:#99959f; font-size:13px; line-height:1.75; } .exam-start-main .exam-library-count { display:block; margin-bottom:5px; color:#52cfc0; font-size:12px; font-weight:700; } .exam-start-main b { display:inline-flex; margin-top:24px; padding:10px 14px; border-radius:4px; background:#178f83; color:#fff; font-size:12px; } .exam-start-main:hover { border-color:#35d6c5; background:#111f1c; } .exam-quick { display:grid; grid-template-rows:1fr 1fr; gap:10px; }.exam-quick > a { display:flex; align-items:center; gap:13px; padding:17px; border:1px solid #292930; border-radius:6px; background:#121216; } .exam-quick > a:hover { border-color:#3e8f86; background:#151b1a; }.exam-quick i,.exam-analysis-grid i { color:#35d6c5; font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; } .exam-quick div,.exam-analysis-grid div { flex:1; min-width:0; }.exam-quick strong,.exam-quick span { display:block; }.exam-quick strong { color:#e9e6ed; font-size:14px; }.exam-quick span { margin-top:7px; color:#7f7c86; font-size:11px; }.exam-quick b { color:#35d6c5; } .exam-history-panel { min-height:214px; display:flex; flex-direction:column; justify-content:space-between; gap:18px; padding:24px; border:1px solid #34313b; border-radius:6px; background:#141319; } .exam-history-panel > span { color:#b8a67d; font-size:10px; font-weight:700; letter-spacing:.08em; } .exam-history-panel h2 { margin:0; color:#f0ecdf; font-size:22px; line-height:1.25; } .exam-history-panel p { margin:0; color:#8f8a93; font-size:13px; line-height:1.7; } .exam-history-panel div { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .exam-history-panel a { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 13px; border:1px solid #433b2d; border-radius:5px; background:#191713; color:#dbc891 !important; font-size:12px; font-weight:700; } .exam-history-panel a:hover { border-color:#c2a760; background:#211d14; color:#ffe2a1 !important; } .exam-analysis,.exam-topics { margin-top:34px; }.exam-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding-bottom:12px; border-bottom:1px solid #292930; }.exam-section-head h2 { margin:5px 0 0; font-size:17px; }.exam-section-head p,.exam-section-head > a { margin:0; color:#84808a; font-size:12px; }.exam-section-head > a { color:#42cabb; } .exam-analysis-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:12px; border:1px solid #292930; border-radius:6px; overflow:hidden; background:#111115; }.exam-analysis-grid a { display:flex; align-items:center; gap:12px; min-height:76px; padding:14px 17px; border-right:1px solid #292930; }.exam-analysis-grid a:last-child { border-right:0; }.exam-analysis-grid a:hover { background:#151b1a; }.exam-analysis-grid strong,.exam-analysis-grid span { display:block; }.exam-analysis-grid strong { color:#ddd9e1; font-size:13px; }.exam-analysis-grid span { margin-top:5px; color:#77737d; font-size:10px; }.exam-analysis-grid b { color:#77737d; } .exam-topic-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }.exam-topic-grid a { display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; min-height:78px; padding:14px 16px; border:1px solid #292930; border-radius:5px; background:#111115; }.exam-topic-grid a:hover { border-color:#3b837a; background:#141a19; }.exam-topic-grid i { color:#67636d; font-size:10px; font-style:normal; }.exam-topic-grid strong { color:#ddd9e1; font-size:13px; }.exam-topic-grid span { grid-column:2; margin-top:5px; color:#35d6c5; font-size:10px; } .exam-mode-section { margin-top:30px; } .exam-mode-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .exam-mode-grid a { grid-template-columns:34px minmax(0,1fr); min-height:96px; align-content:center; } .exam-mode-grid i { display:grid; place-items:center; width:24px; height:24px; border-radius:4px; background:#1b2624; color:#35d6c5; font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; } .exam-mode-grid span { color:#87838d; font-size:11px; line-height:1.55; } .exam-hub-v2 { position:relative; } .exam-hub-v2:before { content:""; position:fixed; inset:0 var(--desktop-right-width) 0 var(--desktop-left-width); pointer-events:none; background:radial-gradient(circle at 23% 8%,rgba(53,214,197,.14),transparent 30%),radial-gradient(circle at 73% 18%,rgba(194,167,96,.10),transparent 26%),linear-gradient(180deg,rgba(15,18,20,.88),rgba(9,9,11,0) 34%); } body.desktop-nav-collapsed .exam-hub-v2:before { left:0; } body.context-collapsed .exam-hub-v2:before { right:0; } .exam-hub-v2 > * { position:relative; z-index:1; } .exam-hub-hero { align-items:flex-end; padding:0 0 25px; border:0; border-bottom:1px solid var(--shell-line); border-radius:0; background:transparent; box-shadow:none; } .exam-hub-hero h1 { font-size:30px; } .exam-hub-hero p { max-width:680px; color:var(--shell-muted); line-height:1.5; } .exam-hero-actions { display:flex; align-items:center; gap:10px; } .exam-hero-actions a { padding:11px 14px; border:1px solid rgba(53,214,197,.36); border-radius:5px; color:#d8fffb !important; background:rgba(53,214,197,.08); font-size:12px; font-weight:700; white-space:nowrap; } .exam-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:14px 0 18px; overflow:hidden; border:1px solid #292930; border-radius:8px; background:#292930; } .exam-flow div { display:grid; grid-template-columns:34px minmax(0,1fr); gap:4px 12px; align-items:center; min-height:78px; padding:16px 18px; background:rgba(17,17,21,.88); } .exam-flow i { grid-row:1 / span 2; display:grid; place-items:center; width:28px; height:28px; border-radius:5px; background:#122d29; color:#35d6c5; font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; } .exam-flow strong { color:#f2eff5; font-size:14px; } .exam-flow span { color:#817d87; font-size:11px; line-height:1.45; } .exam-start-v2 { grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr); gap:16px; margin-top:0; margin-bottom:36px; } .exam-primary-card { position:relative; min-height:320px; padding:34px; overflow:hidden; background:linear-gradient(135deg,#0f2824 0%,#101816 54%,#19150d 100%); border-color:rgba(53,214,197,.62); box-shadow:0 18px 55px rgba(0,0,0,.28),0 0 0 1px rgba(53,214,197,.10) inset; } .exam-primary-card:after { content:""; position:absolute; right:-54px; top:-70px; width:230px; height:230px; border:1px solid rgba(53,214,197,.22); border-radius:50%; box-shadow:0 0 80px rgba(53,214,197,.16) inset; } .exam-primary-card em { position:absolute; right:24px; top:22px; padding:6px 9px; border:1px solid rgba(53,214,197,.28); border-radius:999px; color:#9ffbf1; background:rgba(53,214,197,.08); font-size:11px; font-style:normal; font-weight:700; } .exam-primary-card h2 { margin-top:48px; font-size:34px; letter-spacing:0; } .exam-primary-card p { max-width:640px; color:#a9a5ad; font-size:14px; } .exam-primary-card b { margin-top:30px; padding:12px 16px; border-radius:5px; background:#24a99d; color:#06110f; font-weight:800; } .exam-side-stack { display:grid; grid-template-rows:auto 1fr; gap:16px; } .exam-topic-feature { min-height:132px; display:flex; flex-direction:column; justify-content:space-between; gap:10px; padding:22px; border:1px solid rgba(53,214,197,.24); border-radius:8px; background:linear-gradient(135deg,#121216,#151f1d); } .exam-topic-feature span { color:#35d6c5; font-size:10px; font-weight:800; letter-spacing:.08em; } .exam-topic-feature h2 { margin:0; color:#f0eef5; font-size:21px; } .exam-topic-feature p { margin:0; color:#8d8995; font-size:12px; line-height:1.65; } .exam-topic-feature b { color:#35d6c5; font-size:12px; } .exam-history-panel { border-radius:8px; } .exam-glow-section { padding:18px; border:1px solid rgba(53,214,197,.14); border-radius:8px; background:rgba(13,13,16,.56); } .exam-analysis-v2 { border-color:rgba(53,214,197,.18); background:rgba(13,18,18,.95); } .exam-analysis-v2 a { min-height:92px; } .exam-analysis-v2 a:hover,.exam-mode-v2 a:hover,.exam-topic-feature:hover { transform:translateY(-1px); border-color:#35d6c5; box-shadow:0 14px 32px rgba(0,0,0,.22); } .exam-mode-v2 { gap:12px; } .exam-mode-v2 a { min-height:118px; border-radius:8px; background:linear-gradient(180deg,#131318,#101013); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; } .exam-mode-v2 i { width:28px; height:28px; border-radius:6px; } .exam-topic-library-shell { width:min(1120px,calc(100% - 56px)); } .exam-topic-library-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:24px; } .exam-topic-library-grid a { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:14px; min-height:92px; padding:18px; border:1px solid #292930; border-radius:6px; background:#111115; } .exam-topic-library-grid a:hover { border-color:#3b837a; background:#141a19; } .exam-topic-library-grid i { display:grid; place-items:center; width:36px; height:36px; border-radius:5px; background:#132522; color:#35d6c5; font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; } .exam-topic-library-grid strong,.exam-topic-library-grid span { display:block; } .exam-topic-library-grid strong { color:#eeeaf1; font-size:15px; line-height:1.35; } .exam-topic-library-grid span { margin-top:6px; color:#85818d; font-size:12px; line-height:1.5; } .exam-topic-library-grid b { color:#35d6c5; font-size:18px; } .exam-topic-library-history { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; margin-top:18px; padding:18px; border:1px solid #34313b; border-radius:6px; background:#141319; } .exam-topic-library-history span { display:block; color:#b8a67d; font-size:10px; font-weight:700; letter-spacing:.08em; } .exam-topic-library-history strong { display:block; margin-top:5px; color:#f0ecdf; font-size:16px; } .exam-topic-library-history p { margin:5px 0 0; color:#8f8a93; font-size:12px; } .exam-topic-library-history a { padding:10px 12px; border:1px solid #433b2d; border-radius:5px; color:#dbc891 !important; font-size:12px; font-weight:700; white-space:nowrap; } .exam-topic-library-history a:hover { border-color:#c2a760; background:#211d14; color:#ffe2a1 !important; } .exam-school-shell { width:min(1120px,calc(100% - 56px)); } .school-bank-toolbar { display:grid; grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr); gap:12px; margin-top:24px; } .school-bank-toolbar label { display:flex; align-items:center; gap:9px; height:42px; padding:0 13px; border:1px solid #2f2f37; border-radius:5px; background:#111115; color:#78747f; } .school-bank-toolbar input { width:100%; border:0; outline:0; background:transparent; color:#eeeaf1; font:600 13px/1.2 inherit; } .school-bank-toolbar input::placeholder { color:#6f6b76; } .school-bank-toolbar section { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid #2f2f37; border-radius:5px; overflow:hidden; background:#111115; } .school-bank-toolbar section div { display:flex; flex-direction:column; justify-content:center; min-height:42px; padding:0 14px; border-right:1px solid #292930; } .school-bank-toolbar section div:last-child { border-right:0; } .school-bank-toolbar strong { color:#f2eff5; font-size:17px; line-height:1.1; } .school-bank-toolbar span { margin-top:4px; color:#817d88; font-size:10px; } .school-bank-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; } .school-bank-card { display:grid; grid-template-columns:38px minmax(0,1fr) 72px auto; align-items:center; gap:14px; min-height:104px; padding:16px; border:1px solid #2f2f37; border-radius:6px; background:#111115; } .school-bank-card:hover { border-color:#3b837a; background:#141a19; } .school-bank-card > i { display:grid; place-items:center; width:30px; height:30px; border-radius:5px; background:#1a2624; color:#35d6c5; font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; } .school-bank-card strong,.school-bank-card span { display:block; } .school-bank-card strong { color:#eeeaf1; font-size:15px; line-height:1.35; } .school-bank-card span { margin-top:5px; color:#85818d; font-size:11px; } .school-bank-card p { height:5px; margin:12px 0 0; border-radius:999px; overflow:hidden; background:#2b2933; } .school-bank-card p b { display:block; height:100%; border-radius:999px; background:#35d6c5; } .school-bank-card mark { justify-self:end; background:transparent; color:#d9d5df; font:800 16px/1.15 ui-monospace,SFMono-Regular,Menlo,monospace; text-align:right; } .school-bank-card mark small { display:block; margin-top:4px; color:#77737d; font:600 10px/1.1 inherit; } .school-bank-card em { color:#35d6c5; font-style:normal; font-size:18px; } .exam-history { display:flex; align-items:center; gap:10px; margin-top:12px; padding:13px 15px; border-top:1px solid #292930; }.exam-history > span { margin-right:auto; color:#77737d; font-size:11px; }.exam-history a { padding:7px 10px; border:1px solid #303038; border-radius:4px; color:#aaa6b1 !important; font-size:11px; }.exam-history a:hover { border-color:#35d6c5; color:#35d6c5 !important; }.desktop-light .exam-hub-head { border-color:#dce3ea; }.desktop-light .exam-hub-head p,.desktop-light .exam-section-head p { color:#6d7783; }.desktop-light .exam-hub-head > a { border-color:#d1dae4; color:#56616e; }.desktop-light .exam-start-main { background:#f2fbf9; border-color:#8fcfc6; }.desktop-light .exam-history-panel,.desktop-light .exam-topic-library-history { background:#fffaf0; border-color:#ead9af; }.desktop-light .exam-history-panel h2,.desktop-light .exam-topic-library-history strong { color:#2c2616; }.desktop-light .exam-history-panel p,.desktop-light .exam-topic-library-history p { color:#756b5a; }.desktop-light .exam-history-panel a,.desktop-light .exam-topic-library-history a { background:#fff; border-color:#e1cf9f; color:#7c5a12 !important; }.desktop-light .exam-quick > a,.desktop-light .exam-analysis-grid,.desktop-light .exam-topic-grid a,.desktop-light .exam-topic-library-grid a,.desktop-light .school-bank-toolbar label,.desktop-light .school-bank-toolbar section,.desktop-light .school-bank-card { background:#fff; border-color:#dce3ea; }.desktop-light .exam-mode-grid i,.desktop-light .exam-topic-library-grid i,.desktop-light .school-bank-card > i { background:#e9f6f4; }.desktop-light .exam-start-main h2,.desktop-light .exam-quick strong,.desktop-light .exam-analysis-grid strong,.desktop-light .exam-topic-grid strong,.desktop-light .exam-topic-library-grid strong,.desktop-light .school-bank-card strong,.desktop-light .school-bank-toolbar strong { color:#25303a; }.desktop-light .school-bank-card p { background:#e2e7ef; }.desktop-light .school-bank-toolbar input { color:#25303a; }.desktop-light .exam-section-head,.desktop-light .exam-history { border-color:#dce3ea; } .desktop-light .exam-hub-hero { background:transparent; border-color:var(--shell-line); box-shadow:none; } .desktop-light .exam-hero-actions a { background:#e9f7f5; border-color:#9ed8d1; color:#126c63 !important; } .desktop-light .exam-flow { background:#dce3ea; border-color:#dce3ea; } .desktop-light .exam-flow div,.desktop-light .exam-glow-section { background:#fff; } .desktop-light .exam-flow strong,.desktop-light .exam-topic-feature h2 { color:#25303a; } .desktop-light .exam-flow span,.desktop-light .exam-topic-feature p { color:#6d7783; } .desktop-light .exam-primary-card { background:linear-gradient(135deg,#edfdfa,#fff 58%,#fff8e6); border-color:#8fcfc6; } .desktop-light .exam-topic-feature { background:#fff; border-color:#dce3ea; } .desktop-light .exam-primary-card b { color:#fff; } @media (max-width:900px) { .exam-hub-hero { padding:22px; }.exam-hub-hero h1 { font-size:32px; }.exam-flow { grid-template-columns:1fr; }.exam-start-v2 { grid-template-columns:1fr; }.exam-primary-card { min-height:260px; padding:28px; }.exam-primary-card h2 { margin-top:34px; font-size:29px; }.exam-side-stack { grid-template-rows:auto; }.exam-analysis-v2 a:last-child { border-bottom:0; } } @media (max-width:900px) { .school-dashboard-overview,.school-dashboard-grid,.school-dashboard-insights,.school-year-questions { grid-template-columns:1fr; }.school-year-question-panel > header,.school-year-question-list > article > header { align-items:flex-start; flex-direction:column; }.school-year-heatmap { min-height:160px; }.school-dashboard-shell { width:min(100% - 32px,680px); } } .topic-dash-shell { width:min(1120px,calc(100% - 56px)); margin:0 auto; padding:54px 0 76px; } .topic-dash-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:24px; border-bottom:1px solid #292930; } .topic-dash-head span { display:block; color:#35d6c5; font-size:10px; font-weight:700; letter-spacing:.08em; } .topic-dash-head h1 { margin:8px 0 9px; color:#f3f1f5; font-size:30px; line-height:1.2; letter-spacing:0; } .topic-dash-head p { max-width:620px; margin:0; color:#908c98; font-size:14px; line-height:1.65; } .topic-dash-head > a { flex:0 0 auto; padding:9px 12px; border:1px solid #35353d; border-radius:4px; color:#c4c0c9; font-size:12px; white-space:nowrap; } .topic-dash-head > a:hover { border-color:#35d6c5; color:#43ddcd; } .topic-dash-toolbar { display:grid; grid-template-columns:minmax(260px,.9fr) minmax(0,1.4fr); gap:12px; margin-top:22px; } .topic-dash-toolbar label { display:flex; align-items:center; gap:9px; height:42px; padding:0 13px; border:1px solid #2f2f37; border-radius:5px; background:#111115; color:#78747f; } .topic-dash-toolbar input { width:100%; border:0; outline:0; background:transparent; color:#eeeaf1; font:600 13px/1.2 inherit; } .topic-dash-toolbar input::placeholder { color:#6f6b76; } .topic-dash-toolbar > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } .topic-dash-toolbar button { height:42px; border:1px solid #2f2f37; border-radius:5px; background:#111115; color:#8b8792; font:700 12px/1.2 inherit; cursor:pointer; } .topic-dash-toolbar button span { margin-left:4px; color:#66626d; font-weight:600; } .topic-dash-toolbar button.active { border-color:#35d6c5; background:#10201e; color:#35d6c5; } .topic-dash-overview { display:grid; grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr); align-items:stretch; gap:12px; margin-top:16px; padding:18px; border:1px solid #2f2f37; border-radius:6px; background:#121216; } .topic-dash-overview > div { display:flex; flex-direction:column; justify-content:center; gap:6px; padding-right:12px; border-right:1px solid #292930; } .topic-dash-overview > div span { color:#35d6c5; font-size:10px; font-weight:800; letter-spacing:.08em; } .topic-dash-overview > div b { color:#edeaf0; font-size:16px; } .topic-dash-overview section { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; } .topic-dash-overview section div { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:78px; border-right:1px solid #292930; } .topic-dash-overview section div:last-child { border-right:0; } .topic-dash-overview strong { color:#f2eff5; font-size:25px; line-height:1.1; } .topic-dash-overview span { margin-top:7px; color:#817d88; font-size:11px; } .topic-dash-list { display:flex; flex-direction:column; gap:10px; margin-top:14px; } .topic-dash-row { display:grid; grid-template-columns:38px minmax(0,1fr) 72px; align-items:center; gap:14px; min-height:106px; padding:16px; border:1px solid #2f2f37; border-radius:6px; background:#111115; } .topic-dash-row:hover { border-color:#3b837a; background:#141a19; } .topic-dash-row > i { display:grid; place-items:center; width:30px; height:30px; border-radius:5px; background:#1a2624; color:#35d6c5; font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; } .topic-dash-row header { display:flex; align-items:center; gap:10px; } .topic-dash-row strong { flex:1; min-width:0; color:#eeeaf1; font-size:15px; line-height:1.35; } .topic-dash-row header span { padding:3px 7px; border-radius:999px; font-size:10px; font-weight:800; white-space:nowrap; } .topic-dash-row header span.up { background:rgba(240,180,41,.13); color:#f0b429; } .topic-dash-row header span.stable { background:rgba(149,144,168,.13); color:#aaa5b7; } .topic-dash-row header span.down { background:rgba(184,169,240,.14); color:#b8a9f0; } .topic-dash-row p { height:5px; margin:13px 0 10px; border-radius:999px; overflow:hidden; background:#2b2933; } .topic-dash-row p b { display:block; height:100%; border-radius:999px; background:#6f5cff; } .topic-dash-row footer { display:flex; align-items:center; gap:10px; color:#85818d; font-size:11px; } .topic-dash-row footer em { margin-left:auto; color:#a6a1ad; font-style:normal; } .topic-dash-row mark { justify-self:end; background:transparent; color:#d9d5df; font:800 16px/1.15 ui-monospace,SFMono-Regular,Menlo,monospace; text-align:right; } .topic-dash-row mark small { display:block; margin-top:4px; color:#77737d; font:600 10px/1.1 inherit; } .analysis-447-schools { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; } .analysis-447-schools span { display:inline-flex; align-items:center; min-height:22px; padding:0 8px; border:1px solid rgba(53,214,197,.28); border-radius:999px; background:rgba(53,214,197,.08); color:#b7f2eb; font-size:11px; font-weight:700; line-height:1.2; } .analysis-447-schools.muted span { border-color:#2f2f37; background:#15151a; color:#77737d; } .topic-dash-empty { padding:46px 18px; border:1px dashed #303038; border-radius:6px; color:#85818d; text-align:center; font-size:13px; } .school-detail-shell { width:min(1120px,calc(100% - 56px)); margin:0 auto; padding:52px 0 80px; } .topic-detail-shell { width:min(1360px,calc(100% - 56px)); margin:0 auto; padding:52px 0 80px; } .school-detail-loading { margin-top:18px; padding:42px 18px; border:1px solid #2d2d35; border-radius:8px; background:#121216; color:#8d8995; text-align:center; } .topic-detail-loading { margin-top:18px; padding:42px 18px; border:1px solid #2d2d35; border-radius:8px; background:#121216; color:#8d8995; text-align:center; } .school-detail-head, .school-detail-hero, .topic-detail-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; padding:22px; border:1px solid #2d3438; border-radius:8px; background:linear-gradient(135deg,#10171a,#111216 62%,#15131a); } .school-detail-head button, .school-detail-hero button, .topic-detail-head button { display:grid; place-items:center; width:38px; height:38px; border:1px solid #293238; border-radius:7px; background:#12181b; color:#35d6c5; } .school-detail-head span, .school-detail-hero span, .topic-detail-head span, .topic-detail-grid header span, .topic-detail-samples header span, .school-detail-command header span, .school-detail-grid header span { color:#35d6c5; font-size:10px; font-weight:850; letter-spacing:.08em; } .school-detail-head h1, .school-detail-hero h1, .topic-detail-head h1 { margin:6px 0 0; color:#f4f1f6; font-size:34px; line-height:1.15; font-weight:850; } .school-detail-head p, .school-detail-hero p, .topic-detail-head p { margin:8px 0 0; color:#96919d; font-size:13px; } .school-detail-hero nav { display:flex; gap:10px; } .topic-detail-head nav { display:flex; gap:10px; } .school-detail-hero nav a, .topic-detail-head nav a { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 14px; border:1px solid #304b4b; border-radius:7px; background:#10201e; color:#bff7ef; font-size:12px; font-weight:780; text-decoration:none; white-space:nowrap; } .school-detail-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:14px; } .topic-detail-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:14px; } .school-detail-stats article, .topic-detail-stats article { min-height:88px; padding:16px; border:1px solid #2d2d35; border-radius:8px; background:#121216; } .school-detail-stats strong { display:block; color:#f2eff5; font-size:25px; line-height:1.1; font-weight:850; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .topic-detail-stats strong { display:block; color:#f2eff5; font-size:25px; line-height:1.1; font-weight:850; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .school-detail-stats span, .topic-detail-stats span { display:block; margin-top:9px; color:#817d88; font-size:12px; } .school-detail-command { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); gap:12px; margin-top:14px; } .school-detail-command article, .school-detail-grid article { padding:18px; border:1px solid #2d2d35; border-radius:8px; background:#121216; } .school-detail-command h2, .school-detail-grid h2 { margin:6px 0 0; color:#efedf2; font-size:18px; font-weight:830; } .school-word-cloud { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:16px; min-height:112px; } .school-word-cloud a { display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border:1px solid rgba(53,214,197,.15); border-radius:6px; background:#171822; color:#c8faf4; font-size:calc(12px * var(--word-level)); font-weight:800; text-decoration:none; } .school-detail-command article > p { margin:16px 0 0; color:#9a96a0; font-size:13px; line-height:1.75; } .school-type-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; } .school-type-list span { display:inline-flex; align-items:center; gap:8px; min-height:28px; padding:0 9px; border:1px solid #303038; border-radius:6px; background:#16161c; color:#bdb8c4; font-size:12px; } .school-type-list b { color:#35d6c5; font-weight:850; } .school-detail-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.82fr); gap:12px; margin-top:14px; } .school-year-bars, .school-topic-rank { display:grid; gap:8px; margin-top:16px; } .school-year-bars a { display:grid; grid-template-columns:54px minmax(0,1fr) 36px; align-items:center; gap:10px; min-height:28px; color:inherit; text-decoration:none; } .school-year-bars span { color:#a8a3ae; font-size:12px; } .school-year-bars i, .school-topic-rank span { height:8px; overflow:hidden; border-radius:999px; background:#242331; } .school-year-bars b, .school-topic-rank b { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#35d6c5,#6f5cff); } .school-year-bars strong { color:#d7d3dc; font-size:12px; text-align:right; } .school-topic-rank a { display:grid; grid-template-columns:34px minmax(0,1fr) 36px; align-items:center; gap:10px; min-height:48px; padding:9px; border:1px solid #292930; border-radius:7px; background:#111115; color:inherit; text-decoration:none; } .school-topic-rank i { display:grid; place-items:center; width:28px; height:28px; border-radius:6px; background:#1a2624; color:#35d6c5; font-size:11px; font-style:normal; font-weight:850; } .school-topic-rank strong { display:block; color:#e9e6ed; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .school-topic-rank span { display:block; margin-top:7px; } .school-topic-rank em { color:#d8d5dd; font-style:normal; font-size:12px; font-weight:800; text-align:right; } .exam-analysis-grid a.exam-analysis-primary { background:linear-gradient(135deg,rgba(53,214,197,.14),rgba(111,92,255,.10)); border-color:rgba(53,214,197,.34); } .exam-analysis-grid a.exam-analysis-primary strong { color:#f5fffd; font-size:17px; } .exam-analysis-grid a.exam-analysis-primary i { background:#35d6c5; color:#071715; } .school-dashboard-shell { width:min(1240px,calc(100% - 56px)); } .school-dashboard-hero { position:relative; overflow:hidden; } .school-dashboard-hero::after { content:''; position:absolute; right:22px; bottom:-34px; width:260px; height:120px; border:1px solid rgba(53,214,197,.16); border-radius:999px 999px 0 0; opacity:.35; pointer-events:none; } .school-dashboard-stats article:first-child { background:linear-gradient(135deg,rgba(53,214,197,.16),#121216 64%); border-color:rgba(53,214,197,.3); } .school-dashboard-overview, .school-dashboard-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.86fr); gap:12px; margin-top:14px; } .school-dashboard-overview > article, .school-dashboard-grid > article, .school-year-question-panel { padding:18px; border:1px solid #2d2d35; border-radius:8px; background:#121216; } .school-dashboard-overview header span, .school-dashboard-grid header span, .school-year-question-panel header span { color:#35d6c5; font-size:10px; font-weight:850; letter-spacing:.08em; } .school-dashboard-overview h2, .school-dashboard-grid h2, .school-year-question-panel h2 { margin:6px 0 0; color:#efedf2; font-size:18px; font-weight:830; } .school-dashboard-insights { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .school-dashboard-insights > header { grid-column:1 / -1; } .school-dashboard-insights section { min-height:86px; padding:12px; border:1px solid #292930; border-radius:7px; background:#111115; } .school-dashboard-insights section strong { display:block; color:#f2eff5; font-size:13px; } .school-dashboard-insights section p { margin:8px 0 0; color:#a6a1ad; font-size:12px; line-height:1.65; } .school-year-heatmap { display:flex; align-items:end; gap:8px; min-height:190px; margin-top:18px; padding:12px 6px 0; overflow-x:auto; } .school-year-heatmap a { display:grid; grid-template-rows:minmax(86px,1fr) auto auto; justify-items:center; gap:7px; min-width:42px; color:inherit; text-decoration:none; } .school-year-heatmap i { align-self:end; display:block; width:22px; min-height:14px; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,#35d6c5,#6f5cff); box-shadow:0 0 18px rgba(53,214,197,.16); } .school-year-heatmap strong { color:#d9d5df; font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; writing-mode:vertical-rl; } .school-year-heatmap span { color:#817d88; font-size:10px; white-space:nowrap; } .school-metric-bars { display:grid; gap:10px; margin-top:18px; } .school-metric-bars a { display:grid; grid-template-columns:92px minmax(0,1fr) 42px; align-items:center; gap:10px; min-height:34px; color:inherit; text-decoration:none; } .school-metric-bars span { min-width:0; overflow:hidden; color:#a8a3ae; font-size:12px; text-overflow:ellipsis; white-space:nowrap; } .school-metric-bars i { height:8px; overflow:hidden; border-radius:999px; background:#242331; } .school-metric-bars b { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#35d6c5,#6f5cff); } .school-metric-bars strong { color:#d7d3dc; font-size:12px; text-align:right; } .school-year-question-panel { margin-top:14px; } .school-year-question-panel > header { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; } .school-year-question-panel > header > a { flex:0 0 auto; display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border:1px solid #304b4b; border-radius:7px; background:#10201e; color:#bff7ef; font-size:12px; font-weight:780; text-decoration:none; } .school-year-question-list { display:grid; gap:12px; margin-top:18px; } .school-year-question-list > article { scroll-margin-top:24px; padding:16px; border:1px solid #292930; border-radius:8px; background:#111115; } .school-year-question-list > article > header { display:flex; align-items:center; justify-content:space-between; gap:14px; } .school-year-question-list > article > header strong { color:#f1eef4; font:850 24px/1 ui-monospace,SFMono-Regular,Menlo,monospace; } .school-year-question-list > article > header span { display:block; margin-top:6px; color:#8f8a96; font-size:12px; } .school-year-question-list > article > header a { color:#35d6c5; font-size:12px; font-weight:780; text-decoration:none; white-space:nowrap; } .school-year-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; } .school-year-tags span, .school-year-tags em { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border:1px solid #303038; border-radius:999px; background:#16161c; color:#bdb8c4; font-size:11px; font-style:normal; } .school-year-tags span { border-color:rgba(53,214,197,.25); color:#bff7ef; } .school-year-questions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:14px; } .school-year-questions a { min-height:104px; padding:12px; border:1px solid #292930; border-radius:7px; background:#15151a; color:inherit; text-decoration:none; } .school-year-questions a:hover { border-color:#3b837a; background:#151c1b; } .school-year-questions p { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; min-height:49px; margin:0; overflow:hidden; color:#e4e0e8; font-size:13px; line-height:1.55; } .school-year-questions footer { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; } .school-year-questions footer span { max-width:100%; padding:3px 7px; border-radius:999px; background:#202029; color:#938f9a; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .school-year-questions .school-year-more { display:flex; align-items:center; justify-content:center; min-height:62px; border-style:dashed; color:#35d6c5; font-weight:800; } .topic-detail-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.9fr); gap:12px; margin-top:14px; } .topic-detail-grid.is-wide { grid-template-columns:1fr; } .topic-detail-command { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:12px; margin-top:14px; } .topic-detail-grid article, .topic-detail-command article, .topic-detail-plan, .topic-detail-samples { padding:18px; border:1px solid #2d2d35; border-radius:8px; background:#121216; } .topic-detail-grid h2, .topic-detail-command h2, .topic-detail-plan h2, .topic-detail-samples h2 { margin:6px 0 0; color:#efedf2; font-size:18px; font-weight:830; } .topic-detail-cloud { display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:8px; margin-top:16px; } .topic-detail-cloud a { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:36px; padding:0 10px; border:1px solid rgba(53,214,197,.22); border-radius:7px; background:linear-gradient(180deg,rgba(53,214,197,.1),rgba(255,255,255,.025)); color:#d6fff9; text-decoration:none; } .topic-detail-cloud a:hover { border-color:rgba(53,214,197,.55); background:#14201f; } .topic-detail-cloud span { min-width:0; overflow:hidden; color:inherit; font-size:12px; font-weight:800; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; } .topic-detail-cloud strong { flex:0 0 auto; color:#35d6c5; font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; } .topic-detail-cloud .level-0 { border-color:rgba(53,214,197,.45); background:linear-gradient(135deg,rgba(53,214,197,.18),rgba(111,92,255,.10)); } .topic-detail-cloud .level-1 { border-color:rgba(53,214,197,.32); } .topic-detail-cloud .level-2, .topic-detail-cloud .level-3 { border-color:rgba(111,92,255,.22); color:#ddd8ff; } .topic-detail-cloud .level-4, .topic-detail-cloud .level-5 { border-color:#303038; color:#aaa5b7; background:#16161c; } .topic-detail-insights { display:grid; gap:10px; margin-top:16px; } .topic-detail-insights section { padding:12px; border:1px solid #292930; border-radius:7px; background:#111115; } .topic-detail-insights strong { display:block; color:#35d6c5; font-size:12px; font-weight:850; } .topic-detail-insights p { margin:7px 0 0; color:#a8a3ae; font-size:12px; line-height:1.65; } .topic-detail-plan { margin-top:14px; } .topic-detail-plan > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; } .topic-detail-plan article { min-height:104px; padding:14px; border:1px solid #292930; border-radius:8px; background:linear-gradient(180deg,#15171d,#111115); } .topic-detail-plan i { display:grid; place-items:center; width:30px; height:24px; border-radius:999px; background:#172622; color:#35d6c5; font:850 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; } .topic-detail-plan strong { display:block; margin-top:12px; color:#f0edf4; font-size:14px; } .topic-detail-plan p { margin:7px 0 0; color:#918d99; font-size:12px; line-height:1.65; } .topic-detail-bars, .topic-detail-schools { display:grid; gap:9px; margin-top:16px; } .topic-detail-bars div, .topic-detail-schools a { display:grid; grid-template-columns:86px minmax(0,1fr) 42px; align-items:center; gap:10px; min-height:34px; color:inherit; text-decoration:none; } .topic-detail-bars span, .topic-detail-schools span { color:#a8a3ae; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .topic-detail-bars i, .topic-detail-schools i { height:8px; overflow:hidden; border-radius:999px; background:#242331; } .topic-detail-bars b, .topic-detail-schools b { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#35d6c5,#6f5cff); } .topic-detail-bars strong, .topic-detail-schools strong { color:#d7d3dc; font-size:12px; text-align:right; } .topic-detail-yearline { display:flex; align-items:end; gap:7px; min-height:154px; margin-top:16px; padding:12px 8px 4px; overflow-x:auto; } .topic-detail-yearline a { display:grid; grid-template-rows:1fr auto auto; align-items:end; justify-items:center; gap:6px; min-width:34px; height:132px; color:inherit; text-decoration:none; } .topic-detail-yearline i { display:block; width:12px; min-height:12px; border-radius:999px 999px 3px 3px; background:linear-gradient(180deg,#35d6c5,#6f5cff); } .topic-detail-yearline span { color:#85818d; font-size:10px; writing-mode:vertical-rl; } .topic-detail-yearline strong { color:#d8d5dd; font-size:10px; } .topic-detail-samples { margin-top:14px; } .topic-detail-samples > header { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:12px; padding-bottom:13px; border-bottom:1px solid #292930; } .topic-detail-samples > header a { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 12px; border:1px solid #304b4b; border-radius:7px; background:#10201e; color:#bff7ef; font-size:12px; font-weight:780; text-decoration:none; white-space:nowrap; } .topic-detail-samples > a { display:block; padding:14px 0; border-bottom:1px solid #24242b; color:inherit; text-decoration:none; } .topic-detail-samples > a:last-child { border-bottom:0; } .topic-detail-samples p { margin:0; color:#f0eef3; font-size:14px; line-height:1.65; } .topic-detail-samples footer { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; } .topic-detail-samples footer span { display:inline-flex; align-items:center; min-height:22px; padding:0 8px; border:1px solid #303038; border-radius:999px; background:#16161c; color:#918d99; font-size:11px; } .topic-detail-empty { padding:42px 18px; border:1px dashed #303038; border-radius:7px; color:#85818d; text-align:center; font-size:13px; } .theory-school-shell { width:min(980px,calc(100% - 56px)); } .theory-old-shell { padding-bottom:96px; } .theory-old-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:18px; } .theory-old-summary div { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:82px; border:1px solid #2f2f37; border-radius:6px; background:#111115; } .theory-old-summary strong { color:#35d6c5; font-size:22px; line-height:1.1; } .theory-old-summary span { margin-top:7px; color:#817d88; font-size:11px; } .theory-old-info { margin-top:14px; padding:13px 16px; border:1px solid #2f2f37; border-left:3px solid #35d6c5; border-radius:6px; background:#111115; color:#8f8a96; font-size:12px; line-height:1.7; } .theory-old-info strong { color:#e9e5ee; } .theory-old-table { margin-top:14px; border:1px solid #2f2f37; border-radius:6px; overflow:hidden; background:#111115; } .theory-old-table-title { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; border-bottom:1px solid #292930; } .theory-old-table-title div { display:flex; align-items:center; gap:8px; min-width:0; } .theory-old-table-title i { color:#35d6c5; font-size:16px; } .theory-old-table-title strong { color:#f0edf4; font-size:14px; } .theory-old-table-title span { color:#817d88; font-size:11px; } .theory-old-note { display:flex; align-items:center; gap:7px; padding:8px 14px; border-bottom:1px solid #24242b; background:#101916; color:#35d6c5; font-size:11px; } .theory-old-table-head,.theory-old-table-row { display:grid; grid-template-columns:.8fr 3.5fr 1.5fr 1.8fr 2fr; align-items:center; gap:8px; padding:8px 14px; } .theory-old-table-head { background:#12181a; color:#35d6c5; font-size:11px; font-weight:800; } .theory-old-table-row { min-height:38px; border-top:1px solid #24242b; } .theory-old-table-row:nth-child(odd) { background:#121216; } .theory-old-table-row > span { color:#85818d; font-size:11px; font-weight:700; } .theory-old-table-row strong { color:#eeeaf1; font-size:12px; line-height:1.4; } .theory-old-table em,.theory-old-card em { display:inline-flex; align-items:center; width:max-content; max-width:100%; padding:3px 7px; border-radius:5px; font-style:normal; font-size:10px; font-weight:800; white-space:nowrap; } .theory-tier-985 { background:rgba(149,128,218,.15); color:#b8a9f0; } .theory-tier-211 { background:rgba(90,158,238,.14); color:#8fc4ff; } .theory-tier-plain { background:rgba(149,144,168,.13); color:#aaa5b7; } .theory-exam-plain { background:rgba(149,128,218,.15); color:#b8a9f0; } .theory-exam-design { background:rgba(60,185,155,.13); color:#62d8bd; } .theory-exam-quick { background:rgba(90,158,238,.14); color:#8fc4ff; } .theory-old-legend { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:11px 14px; border-top:1px solid #292930; color:#817d88; font-size:10px; } .theory-old-stat-head { margin-top:20px; color:#817d88; font-size:11px; } .theory-old-stat-head div { display:flex; align-items:center; gap:8px; } .theory-old-stat-head i { color:#35d6c5; font-size:15px; } .theory-old-stat-head strong { color:#eeeaf1; font-size:13px; } .theory-old-card { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:14px; min-height:104px; padding:16px 18px; border:1px solid #2f2f37; border-radius:6px; background:#111115; } .theory-old-card:hover { border-color:#3b837a; background:#141a19; } .theory-old-card > i { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:#1a2624; color:#35d6c5; font:800 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; } .theory-old-card header { display:flex; align-items:center; gap:10px; } .theory-old-card header strong { min-width:0; color:#eeeaf1; font-size:15px; line-height:1.35; } .theory-old-card mark { background:rgba(53,214,197,.1); border-radius:6px; color:#35d6c5; font-size:11px; font-weight:800; padding:2px 7px; } .theory-old-card p { margin:4px 0 10px; color:#85818d; font-size:11px; line-height:1.5; } .theory-old-card footer { display:flex; flex-wrap:wrap; gap:6px; } .theory-old-card footer em { gap:4px; border-radius:8px; } .theory-old-card footer small { opacity:.72; font-size:10px; } .theory-topic-0 { background:rgba(149,128,218,.12); color:#b8a9f0; } .theory-topic-1 { background:rgba(90,158,238,.11); color:#8fc4ff; } .theory-topic-2 { background:rgba(60,185,155,.11); color:#62d8bd; } .theory-topic-3 { background:rgba(255,170,60,.11); color:#e0b274; } .theory-topic-4 { background:rgba(149,144,168,.12); color:#aaa5b7; } .theory-old-card > b { color:#35d6c5; font-size:18px; } .theory-old-foot { margin:18px 0 0; color:#716d78; font-size:11px; text-align:center; } .theory-school-list { display:grid; grid-template-columns:1fr; gap:12px; margin-top:16px; } .theory-school-card { display:grid; grid-template-columns:42px minmax(0,1fr) 86px; align-items:center; gap:16px; min-height:118px; padding:18px; border:1px solid #2f2f37; border-radius:6px; background:#111115; } .theory-school-card:hover { border-color:#3b837a; background:#141a19; } .theory-school-card > i { display:grid; place-items:center; width:34px; height:34px; border-radius:5px; background:#1a2624; color:#35d6c5; font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; } .theory-school-card header { display:flex; align-items:center; gap:12px; } .theory-school-card strong { flex:1; min-width:0; color:#eeeaf1; font-size:17px; line-height:1.35; } .theory-school-card header span { color:#aaa5b7; font-size:12px; white-space:nowrap; } .theory-school-card p { height:6px; margin:14px 0 12px; border-radius:999px; overflow:hidden; background:#2b2933; } .theory-school-card p b { display:block; height:100%; border-radius:999px; background:#35d6c5; } .theory-school-card footer { display:flex; flex-wrap:wrap; gap:8px; } .theory-school-card footer em { padding:4px 8px; border:1px solid #303038; border-radius:999px; color:#9c98a3; font-size:11px; font-style:normal; } .theory-school-card mark { justify-self:end; background:transparent; color:#d9d5df; font:800 18px/1.15 ui-monospace,SFMono-Regular,Menlo,monospace; text-align:right; } .theory-school-card mark small { display:block; margin-top:4px; color:#77737d; font:600 10px/1.1 inherit; } .exam-paper-shell { width:min(1100px,calc(100% - 56px)); margin:0 auto; padding:54px 0 76px; } .exam-paper-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:25px; border-bottom:1px solid #292930; } .exam-paper-head span { display:block; color:#35d6c5; font-size:10px; font-weight:700; letter-spacing:.08em; }.exam-paper-head h1 { margin:8px 0 9px; color:#f3f1f5; font-size:30px; line-height:1.2; }.exam-paper-head p { max-width:580px; margin:0; color:#96929e; font-size:14px; line-height:1.65; } .exam-paper-head > a,.exam-paper-head > button { flex:0 0 auto; padding:9px 12px; border:1px solid #35353d; border-radius:4px; background:transparent; color:#c4c0c9; font:600 12px/1.2 inherit; cursor:pointer; white-space:nowrap; }.exam-paper-head > a:hover,.exam-paper-head > button:hover { border-color:#3b9387; color:#43ddcd; } .exam-paper-picker { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:24px 0 14px; }.exam-paper-picker label { display:flex; flex-direction:column; gap:7px; color:#8d8995; font-size:11px; font-weight:600; }.exam-paper-picker select { min-width:280px; height:40px; padding:0 34px 0 12px; border:1px solid #35353d; border-radius:4px; outline:0; background:#15151a; color:#f0eef3; font:600 14px/1.2 inherit; }.exam-paper-picker select:focus { border-color:#35d6c5; }.exam-paper-picker strong { color:#aaa6b1; font-size:12px; font-weight:500; } .exam-paper-group { margin-top:28px; }.exam-paper-group > header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:12px; padding-bottom:13px; border-bottom:1px solid #2b2b32; }.exam-paper-group > header > div { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:5px 10px; }.exam-paper-group > header span { grid-row:1 / span 2; display:grid; place-items:center; min-width:38px; height:38px; border:1px solid #267e74; border-radius:4px; background:#122c29; color:#42d2c1; font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }.exam-paper-group > header h2 { margin:0; color:#eeeaf1; font-size:18px; line-height:1.2; }.exam-paper-group > header p { margin:0; color:#77737e; font-size:11px; }.exam-paper-group > header > strong { color:#85818d; font-size:11px; font-weight:600; }.exam-paper-group-empty { padding:28px 18px; border:1px dashed #303038; color:#716e78; text-align:center; font-size:12px; } .exam-paper-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.exam-paper-grid button { min-height:146px; display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:17px; border:1px solid #2f2f37; border-radius:5px; background:#121216; color:inherit; text-align:left; cursor:pointer; transition:border-color .16s ease,background-color .16s ease; }.exam-paper-grid button:hover { border-color:#3e8f86; background:#151b1a; }.exam-paper-grid button > span { color:#43ddcd; font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }.exam-paper-grid button strong { color:#ece9ef; font-size:15px; line-height:1.4; }.exam-paper-grid button small { min-height:30px; color:#85818e; font-size:11px; line-height:1.45; }.exam-paper-grid button b { margin-top:auto; color:#43ddcd; font-size:11px; } .exam-paper-loading { padding:56px 0; color:#85818e; text-align:center; font-size:14px; }.exam-paper-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:24px 0 18px; padding:12px 14px; border:1px solid #2f2f37; background:#121216; color:#918d99; font-size:12px; }.exam-paper-toolbar button { padding:9px 12px; border:1px solid #287e73; border-radius:4px; background:#173c38; color:#dffaf6; font:600 12px/1.2 inherit; cursor:pointer; }.exam-paper-toolbar button:hover { border-color:#35d6c5; }.exam-paper-toolbar button:disabled,.exam-paper-question button:disabled { cursor:wait; opacity:.65; } .exam-paper-section { margin-top:24px; border:1px solid #2f2f37; background:#111114; }.exam-paper-section h2 { display:flex; align-items:center; gap:10px; margin:0; padding:14px 17px; border-bottom:1px solid #2a2a31; color:#ece9ef; font-size:16px; }.exam-paper-section h2 small { color:#85818e; font-size:11px; font-weight:500; }.exam-paper-question { padding:17px; border-bottom:1px solid #24242b; }.exam-paper-question:last-child { border-bottom:0; }.exam-paper-question-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }.exam-paper-question-head > span { display:grid; place-items:center; width:24px; height:24px; border:1px solid #39413f; border-radius:3px; color:#43ddcd; font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }.exam-paper-question-head button { padding:6px 9px; border:1px solid #35353d; border-radius:3px; background:transparent; color:#b4b1ba; font:600 11px/1.2 inherit; cursor:pointer; }.exam-paper-question-head button:hover { border-color:#3b9387; color:#43ddcd; }.exam-paper-question > p { margin:12px 0 0; color:#f0eef3; font-size:15px; font-weight:500; line-height:1.75; white-space:pre-wrap; }.exam-paper-answer { margin-top:14px; padding:13px 14px; border-left:2px solid #35d6c5; background:#121f1d; color:#d7e9e6; font-size:13px; line-height:1.8; white-space:pre-wrap; }.exam-paper-answer.is-loading { color:#9ccbc5; }.exam-paper-answer.is-error { border-left-color:#a0767f; background:#21171a; color:#d7b8bd; } .exam-paper-footer { margin-top:34px; padding-top:18px; border-top:1px solid #292930; color:#716d78; font-size:11px; font-weight:600; text-align:center; }.desktop-light .exam-paper-head,.desktop-light .exam-paper-group > header { border-color:#d5dee8; }.desktop-light .exam-paper-head h1,.desktop-light .exam-paper-group > header h2,.desktop-light .exam-paper-grid button strong,.desktop-light .exam-paper-section h2,.desktop-light .exam-paper-question > p { color:#202937; }.desktop-light .exam-paper-head p,.desktop-light .exam-paper-picker label,.desktop-light .exam-paper-picker strong,.desktop-light .exam-paper-grid button small { color:#667385; }.desktop-light .exam-paper-head > a,.desktop-light .exam-paper-head > button,.desktop-light .exam-paper-picker select,.desktop-light .exam-paper-grid button,.desktop-light .exam-paper-toolbar,.desktop-light .exam-paper-section { border-color:#d5dee8; background:rgba(255,255,255,.8); }.desktop-light .exam-paper-picker select { color:#202937; }.desktop-light .exam-paper-grid button:hover { border-color:#72aaa2; background:#f7fcfb; }.desktop-light .exam-paper-section h2,.desktop-light .exam-paper-question { border-color:#e0e7ee; }.desktop-light .exam-paper-question-head button { border-color:#cfdbe4; color:#5f6c7d; }.desktop-light .exam-paper-answer { background:#eef9f6; color:#315f59; } .desktop-light .exam-paper-footer { border-color:#d5dee8; color:#8591a0; }.desktop-light .topic-dash-head,.desktop-light .topic-dash-overview > div,.desktop-light .topic-dash-overview section div { border-color:#d5dee8; }.desktop-light .topic-dash-head h1,.desktop-light .topic-dash-overview > div b,.desktop-light .topic-dash-overview strong,.desktop-light .topic-dash-row strong { color:#202937; }.desktop-light .topic-dash-head p,.desktop-light .topic-dash-overview span,.desktop-light .topic-dash-row footer { color:#667385; }.desktop-light .topic-dash-head > a,.desktop-light .topic-dash-toolbar label,.desktop-light .topic-dash-toolbar button,.desktop-light .topic-dash-overview,.desktop-light .topic-dash-row { border-color:#d5dee8; background:#fff; }.desktop-light .topic-dash-toolbar input { color:#202937; }.desktop-light .topic-dash-toolbar button.active { background:#eef9f6; }.desktop-light .topic-dash-row > i { background:#e9f6f4; }.desktop-light .topic-dash-row p { background:#e2e7ef; } .desktop-light .analysis-447-schools span { border-color:#b9e7df; background:#eefaf8; color:#25786f; } .desktop-light .analysis-447-schools.muted span { border-color:#d5dee8; background:#f5f7fa; color:#7b8795; } @media (max-width:900px) { .exam-paper-shell { width:min(100% - 32px,680px); padding-top:32px; }.exam-paper-head { align-items:flex-start; flex-direction:column; }.exam-paper-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.exam-paper-picker { align-items:stretch; flex-direction:column; }.exam-paper-picker select { width:100%; min-width:0; } } @media (max-width:900px) { .topic-dash-shell { width:min(100% - 32px,680px); padding-top:32px; }.topic-dash-head { align-items:flex-start; flex-direction:column; }.topic-dash-toolbar,.topic-dash-overview { grid-template-columns:1fr; }.topic-dash-toolbar > div,.topic-dash-overview section { grid-template-columns:repeat(2,minmax(0,1fr)); }.topic-dash-overview > div { border-right:0; border-bottom:1px solid #292930; padding:0 0 14px; }.topic-dash-overview section div:nth-child(2) { border-right:0; }.topic-dash-row { grid-template-columns:34px minmax(0,1fr); }.topic-dash-row mark { grid-column:2; justify-self:start; text-align:left; }.topic-dash-row footer { flex-wrap:wrap; }.topic-dash-row footer em { width:100%; margin-left:0; } } .official-library-shell { width:min(1080px,calc(100% - 56px)); margin:0 auto; padding:56px 0 76px; }.official-library-shell header { padding-bottom:28px; border-bottom:1px solid #292930; }.official-library-shell header span { color:#35d6c5; font-size:10px; font-weight:700; }.official-library-shell h1 { margin:8px 0; font-size:30px; }.official-library-shell header p { margin:0; color:#8d8995; font-size:14px; } .official-library-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:24px; }.official-library-grid a { display:flex; align-items:center; gap:16px; min-height:118px; padding:19px; border:1px solid #2d2d35; border-radius:6px; background:#121216; color:inherit; text-decoration:none; }.official-library-grid a:hover { background:#151b1a; border-color:#3e8f86; }.official-library-grid i { display:grid; place-items:center; width:32px; height:32px; flex:0 0 auto; background:#173c38; color:#35d6c5; font-size:11px; font-style:normal; font-weight:700; }.official-library-grid div { flex:1; min-width:0; }.official-library-grid strong,.official-library-grid span { display:block; }.official-library-grid strong { color:#f0edf4; font-size:16px; }.official-library-grid span { margin-top:8px; color:#88838e; font-size:12px; line-height:1.5; }.official-library-grid b { color:#42cabb; font-size:12px; white-space:nowrap; } .official-feature { margin-top:28px; padding:22px; border:1px solid #2d2d35; border-radius:6px; background:#111115; }.official-feature > div > span,.official-section-heading span { color:#35d6c5; font-size:10px; font-weight:700; }.official-feature h2,.official-section-heading h2 { margin:7px 0; font-size:20px; }.official-feature > div > p { margin:0 0 18px; color:#817d88; font-size:12px; }.official-feature > a { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:16px; min-height:84px; padding:16px 18px; border:1px solid #268b7f; border-radius:5px; background:#101a18; color:#ecebf0; text-decoration:none; transition:transform .2s ease,border-color .2s ease,background .2s ease; }.official-feature > a:hover { transform:translateY(-2px); border-color:#35d6c5; background:#12221f; }.official-feature > a > i { color:#35d6c5; font-size:28px; }.official-feature > a strong,.official-feature > a span { display:block; }.official-feature > a span { margin-top:6px; color:#817d88; font-size:11px; }.official-feature > a b { color:#35d6c5; font-size:12px; }.official-section-heading { margin-top:32px; padding-top:26px; border-top:1px solid #292930; }.desktop-light .official-library-shell header { border-color:#dce3ea; }.desktop-light .official-library-shell header p,.desktop-light .official-library-grid span { color:#717c88; }.desktop-light .official-library-grid a { background:#fff; border-color:#dce3ea; }.desktop-light .official-library-grid strong { color:#25303a; }.desktop-light .official-library-grid a:hover { background:#f5faf9; } .desktop-light .official-feature { background:#fff; border-color:#dce3ea; }.desktop-light .official-feature > a { background:#edf8f6; color:#25303a; }.desktop-light .official-section-heading { border-color:#dce3ea; } @media (max-width:900px) { .official-library-shell { width:min(100% - 32px,680px); padding-top:32px; }.official-library-grid { grid-template-columns:1fr; } } #desktop-profile-library,#desktop-profile-archive { position:static !important; inset:auto !important; float:none !important; clear:both; width:100% !important; max-width:none !important; grid-column:1/-1; flex:0 0 100%; align-self:stretch; box-sizing:border-box; margin:16px 0; padding:18px; border:1px solid rgba(167,123,244,.16); border-radius:8px; background:rgba(255,255,255,.72); box-shadow:none; } .profile-library-title { display:flex; align-items:center; justify-content:space-between; gap:16px; }.profile-library-title span,.profile-library-title small { display:block; }.profile-library-title span { color:#2f2940; font-size:15px; font-weight:700; }.profile-library-title small { margin-top:4px; color:#8f8998; font-size:11px; }.profile-library-title button { padding:6px 10px; border:1px solid rgba(38,139,127,.55); border-radius:6px; background:rgba(45,210,190,.07); color:#16a99a; font-size:11px; } .profile-library-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:14px 0; }.profile-library-grid article { position:relative; min-height:64px; padding:11px; border:1px solid rgba(167,123,244,.14); border-radius:7px; background:rgba(250,248,255,.8); }.profile-library-grid strong,.profile-library-grid small { display:block; }.profile-library-grid strong { padding-right:18px; color:#40394c; font-size:12px; }.profile-library-grid small { margin-top:6px; color:#9891a0; font-size:10px; }.profile-library-grid button { position:absolute; top:7px; right:7px; border:0; background:transparent; color:#9891a0; font-size:18px; line-height:1; } .profile-archive-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:14px; } .profile-archive-links a { min-width:0; padding:13px; border:1px solid rgba(167,123,244,.14); border-radius:7px; background:rgba(250,248,255,.8); color:inherit; text-decoration:none; } .profile-archive-links a:hover { border-color:rgba(22,169,154,.55); background:rgba(45,210,190,.06); } .profile-archive-links strong,.profile-archive-links small { display:block; }.profile-archive-links strong { color:#40394c; font-size:12px; }.profile-archive-links small { margin-top:6px; color:#9891a0; font-size:10px; } .profile-library-grid article:focus-visible,.profile-library-grid article.active { outline:none; border-color:#16a99a !important; background:rgba(45,210,190,.08) !important; box-shadow:inset 0 0 0 1px rgba(22,169,154,.18); } .profile-library-data > strong { margin-right:auto; color:#40394c; font-size:11px; } .profile-library-data { display:flex; gap:18px; border-bottom:1px solid rgba(167,123,244,.16); }.profile-library-data button { padding:9px 0; border:0; border-bottom:2px solid transparent; background:transparent; color:#908999; font-size:11px; }.profile-library-data button.active { color:#16a99a; border-color:#16a99a; }.profile-library-list { min-height:42px; }.profile-library-list > p { margin:11px 0 2px; color:#908999; font-size:11px; }.profile-library-list article { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid rgba(167,123,244,.1); }.profile-library-list article strong,.profile-library-list article small { display:block; }.profile-library-list article strong { color:#40394c; font-size:11px; }.profile-library-list article small,.profile-library-list article time { margin-top:3px; color:#9891a0; font-size:10px; } body.desktop-dark #desktop-profile-library { background:#15151a; border-color:#2b2b33; } body.desktop-dark .profile-library-title span,body.desktop-dark .profile-library-grid strong,body.desktop-dark .profile-library-list article strong { color:#e5e2e9; } body.desktop-dark .profile-library-grid article { background:#1d1d23; border-color:#303038; } body.desktop-dark #desktop-profile-archive { background:#15151a; border-color:#2b2b33; } body.desktop-dark .profile-archive-links a { background:#1d1d23; border-color:#303038; } body.desktop-dark .profile-archive-links strong,body.desktop-dark .profile-library-data > strong { color:#e5e2e9; } @media (max-width:760px) { .profile-library-grid,.profile-archive-links { grid-template-columns:1fr 1fr; } } @media (min-width:0px) { .taro-tabbar__tabbar { display:none !important; } .taro-tabbar__panel { padding-bottom:0 !important; } } /* Learning card library: larger Yibentong volumes and one independent route per book. */ body.route-learning .desktop-yibentong-cards { margin-bottom:22px !important; } body.route-learning .desktop-yibentong-card { min-height:84px; padding:20px 22px !important; cursor:pointer; } body.route-learning .desktop-yibentong-card + .desktop-yibentong-card { border-top:1px solid var(--shell-line) !important; } #desktop-subject-card-library { margin:0 20px 34px; padding:18px; border:1px solid rgba(126,138,155,.22); border-radius:10px; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),rgba(13,16,20,.78); box-shadow:0 18px 48px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.035); } #desktop-subject-card-library > header { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; padding-bottom:13px; border-bottom:1px solid rgba(126,138,155,.2); } #desktop-subject-card-library > header span { display:block; margin-bottom:5px; color:#48d1c4; font-size:11px; font-weight:800; letter-spacing:.08em; } #desktop-subject-card-library > header p { margin:0; color:var(--shell-muted); font-size:12px; line-height:1.4; } #desktop-subject-card-library h2 { margin:0; color:var(--shell-text); font-size:20px; font-weight:800; line-height:1.2; } .desktop-subject-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .desktop-subject-card-grid a { --subject-tone:#35d6c5; position:relative; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:15px; min-height:124px; padding:19px; overflow:hidden; border:1px solid rgba(128,140,162,.24); border-radius:8px; background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.014) 58%,color-mix(in srgb,var(--subject-tone) 13%,transparent)),#12161b; color:inherit; text-decoration:none; box-sizing:border-box; box-shadow:inset 0 1px 0 rgba(255,255,255,.035); transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease; } .desktop-subject-card-grid a::after { content:""; position:absolute; inset:auto 0 0; height:2px; background:linear-gradient(90deg,var(--subject-tone),transparent); opacity:.54; } .desktop-subject-card-grid a:hover { border-color:color-mix(in srgb,var(--subject-tone) 58%,#ffffff 0%); background:linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.02) 56%,color-mix(in srgb,var(--subject-tone) 20%,transparent)),#151a20; box-shadow:0 18px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05); transform:translateY(-2px); } .desktop-subject-card-grid i { display:grid; place-items:center; width:42px; height:42px; flex:0 0 auto; border:1px solid color-mix(in srgb,var(--subject-tone) 44%,#303844); border-radius:7px; background:color-mix(in srgb,var(--subject-tone) 18%,#1b2028); color:color-mix(in srgb,var(--subject-tone) 72%,#ffffff); font-size:11px; font-style:normal; font-weight:800; } .desktop-subject-card-grid div { flex:1; min-width:0; } .desktop-subject-card-grid strong,.desktop-subject-card-grid span,.desktop-subject-card-grid small { display:block; } .desktop-subject-card-grid strong { color:var(--shell-text); font-size:16px; font-weight:800; line-height:1.35; } .desktop-subject-card-grid span { margin-top:7px; color:var(--shell-muted); font-size:12px; line-height:1.45; } .desktop-subject-card-grid small { margin-top:9px; color:color-mix(in srgb,var(--subject-tone) 64%,#8b9099); font-size:9px; font-weight:800; letter-spacing:.08em; line-height:1.2; } .desktop-subject-card-grid b { color:color-mix(in srgb,var(--subject-tone) 70%,#e7eaef); font-size:12px; font-weight:800; white-space:nowrap; } .desktop-subject-card-grid b em { font-style:normal; font-size:15px; } @media (max-width:760px) { .desktop-subject-card-grid { grid-template-columns:1fr; } #desktop-subject-card-library { margin-right:16px; margin-left:16px; padding:14px; } #desktop-subject-card-library > header { align-items:flex-start; flex-direction:column; gap:4px; } .desktop-subject-card-grid a { grid-template-columns:40px minmax(0,1fr); min-height:112px; } .desktop-subject-card-grid b { grid-column:2; justify-self:start; } } /* Yibentong Anki is authored as a compact mobile screen. Keep its desktop canvas aligned with the shell and neutralize transparent gradient headings. */ body.route-yibentong-anki #app { width:auto !important; padding-left:var(--desktop-left-width) !important; padding-right:0 !important; } body.desktop-nav-collapsed.route-yibentong-anki #app { padding-left:0 !important; } body.route-yibentong-anki #app .min-h-screen { width:min(1120px,calc(100% - 56px)) !important; max-width:1120px !important; margin:0 auto !important; padding-right:0 !important; padding-left:0 !important; } body.route-yibentong-anki #app .min-h-screen > div:first-child { padding-top:32px !important; } body.route-yibentong-anki #app [style*="background-clip: text"], body.route-yibentong-anki #app [style*="backgroundClip: text"] { background:none !important; color:#35d6c5 !important; -webkit-text-fill-color:#35d6c5 !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col { gap:12px !important; } body.route-yibentong-anki #app button { min-height:0; } body.learning-card-copy-protected #app { -webkit-user-select:none !important; user-select:none !important; } body.learning-card-copy-protected #app input, body.learning-card-copy-protected #app textarea { -webkit-user-select:text !important; user-select:text !important; } /* Learning cards desktop readability pass. The underlying screen is authored with compact mobile typography, so scale its information hierarchy without changing the card-learning behavior or data flow. */ @media (min-width:981px) { body.route-yibentong-anki #app .min-h-screen { width:min(1200px,calc(100% - 64px)) !important; max-width:1200px !important; padding-bottom:72px !important; font-synthesis:none; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; } body.route-yibentong-anki #app .min-h-screen > div:first-child { padding-top:40px !important; padding-bottom:20px !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col { gap:16px !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div, body.route-yibentong-anki #app .min-h-screen > div:first-child > .mt-3 { border-radius:8px !important; } body.route-yibentong-anki #app .min-h-screen > div:first-child > .mt-3 { min-height:76px; padding:15px 20px !important; } body.route-yibentong-anki #app svg[aria-label="整体进度"] { width:62px; height:62px; } body.route-yibentong-anki #app [style*="width: 54px"][style*="height: 54px"] { width:62px !important; height:62px !important; } body.route-yibentong-anki #app [style*="font-size: 9px"] { font-size:11px !important; } body.route-yibentong-anki #app [style*="font-size: 10px"] { font-size:12px !important; } body.route-yibentong-anki #app [style*="font-size: 11px"] { font-size:13px !important; } body.route-yibentong-anki #app [style*="font-size: 12px"] { font-size:14px !important; } body.route-yibentong-anki #app [style*="font-size: 13px"] { font-size:15px !important; } body.route-yibentong-anki #app [style*="font-size: 14px"] { font-size:16px !important; } body.route-yibentong-anki #app [style*="font-size: 15px"] { font-size:18px !important; } body.route-yibentong-anki #app [style*="font-size: 16px"] { font-size:18px !important; } body.route-yibentong-anki #app [style*="font-size: 17px"] { font-size:21px !important; } body.route-yibentong-anki #app [style*="font-size: 20px"] { font-size:24px !important; } body.route-yibentong-anki #app [style*="font-size: 22px"] { font-size:28px !important; } body.route-yibentong-anki #app [style*="letter-spacing"] { letter-spacing:0 !important; } body.route-yibentong-anki #app :is(p,span,button,taro-button-core) { line-height:1.45; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:first-child { padding:18px 20px !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:first-child > .flex.gap-2 > :is(button,taro-button-core) { min-height:102px !important; padding:17px 14px !important; border-radius:6px !important; } body.route-yibentong-anki #app :is(button,taro-button-core).rounded-full { min-height:32px !important; padding:6px 11px !important; border-radius:4px !important; } body.route-yibentong-anki #app :is(button,taro-button-core).rounded-lg { min-height:34px !important; border-radius:5px !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div > .flex.items-center.gap-3 { min-height:72px; padding-top:16px !important; padding-bottom:16px !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div > .flex.flex-col.px-3 { gap:8px !important; padding:8px 14px 14px !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div > .flex.flex-col.px-3 > .px-3.py-3 { padding:14px 15px !important; border-radius:6px !important; } } body.desktop-dark.route-yibentong-anki { --card-page-surface:#14161b; --card-page-raised:#1a1d23; --card-page-line:#3a3f49; --card-page-text:#f5f6f8; --card-page-muted:#bdc1ca; --card-page-faint:#979da8; --card-page-accent:#42ddcc; } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app .min-h-screen > .flex.flex-col > div, body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app .min-h-screen > div:first-child > .mt-3 { background:var(--card-page-surface) !important; border-color:var(--card-page-line) !important; } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app .min-h-screen > .flex.flex-col > div:first-child > .flex.gap-2 > :is(button,taro-button-core), body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app .min-h-screen > .flex.flex-col > div > .flex.flex-col.px-3 > .px-3.py-3 { background:var(--card-page-raised) !important; border-color:var(--card-page-line) !important; } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app [style*="font-weight: 700"], body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app [style*="font-weight: 800"] { color:var(--card-page-text) !important; } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app .min-h-screen > div:first-child > p, body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app [style*="color: rgba(26, 19, 48"] { color:var(--card-page-muted) !important; } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app [class*="i-mdi"] { color:var(--card-page-accent) !important; } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app [style*="linear-gradient"]:not([style*="background-clip"]), body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app [style*="linear-gradient"]:not([style*="backgroundClip"]), body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app :is(button,taro-button-core)[style*="background: rgb(123, 92, 246)"] { background:#178f83 !important; background-image:none !important; border-color:#249f93 !important; } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app :is(button,taro-button-core)[style*="linear-gradient"] *, body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app :is(button,taro-button-core)[style*="background: rgb(123, 92, 246)"] * { color:#fff !important; } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app .min-h-screen > .flex.flex-col > div:first-child > .flex.gap-2 > :is(button,taro-button-core):hover, body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app .min-h-screen > .flex.flex-col > div > .flex.flex-col.px-3 > .px-3.py-3:hover { border-color:#36988f !important; background:#1b2525 !important; } .admin-portal-shell { width:min(1240px,calc(100% - 56px)); margin:0 auto; padding:38px 0 64px; } .admin-portal-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding-bottom:24px; border-bottom:1px solid #292930; } .admin-portal-head > div:first-child > span,.admin-portal-group header span { color:#35d6c5; font-size:10px; font-weight:750; letter-spacing:.08em; } .admin-portal-head h1 { margin:6px 0 5px; color:#f2eff4; font-size:30px; line-height:1.2; letter-spacing:0; } .admin-portal-head p { margin:0; color:#88848f; font-size:12px; } .admin-portal-head-actions { display:flex; gap:8px; } .admin-portal-head-actions a { padding:9px 12px; border:1px solid #303038; border-radius:4px; color:#bcb8c2; font-size:11px; text-decoration:none; } .admin-portal-head-actions a:first-child { border-color:#277f75; background:#17302d; color:#52d8ca; } .admin-portal-summary { display:grid; grid-template-columns:120px 120px 150px minmax(0,1fr); align-items:center; margin:18px 0; border:1px solid #292930; border-radius:5px; background:#111114; } .admin-portal-summary > div { padding:14px 17px; border-right:1px solid #292930; } .admin-portal-summary strong,.admin-portal-summary span { display:block; } .admin-portal-summary strong { color:#f0edf3; font-size:19px; line-height:1.1; } .admin-portal-summary span { margin-top:5px; color:#77737e; font-size:10px; } .admin-portal-summary p { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin:0; padding:0 16px; } .admin-portal-summary p b { margin-right:5px; color:#77737e; font-size:10px; } .admin-portal-summary p a { padding:6px 9px; border:1px solid #2b3333; border-radius:3px; color:#9bbab6; font-size:10px; text-decoration:none; } .admin-portal-group { margin-top:12px; border:1px solid #292930; border-radius:5px; background:#101013; } .admin-portal-group > header { display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid #25252b; } .admin-portal-group header > div { display:flex; align-items:baseline; gap:10px; } .admin-portal-group h2 { margin:0; color:#dedbe2; font-size:14px; } .admin-portal-group header small { color:#696571; font-size:10px; } .admin-portal-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); } .admin-portal-grid a { display:flex; align-items:center; gap:11px; min-width:0; min-height:66px; padding:11px 14px; border-right:1px solid #232329; border-bottom:1px solid #232329; color:inherit; text-decoration:none; box-sizing:border-box; } .admin-portal-grid a:nth-child(4n) { border-right:0; } .admin-portal-grid a:hover { background:#14201f; } .admin-portal-grid i { display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto; border-radius:4px; background:#182624; color:#35d6c5; font-size:14px; } .admin-portal-grid div { min-width:0; flex:1; } .admin-portal-grid strong,.admin-portal-grid span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .admin-portal-grid strong { color:#ddd9e1; font-size:12px; } .admin-portal-grid span { margin-top:4px; color:#74707b; font-size:9px; } .admin-portal-grid b { color:#55515c; font-size:16px; } body.desktop-light .admin-portal-head,body.desktop-light .admin-portal-group > header { border-color:#d7e0e8; } body.desktop-light .admin-portal-head h1,body.desktop-light .admin-portal-group h2,body.desktop-light .admin-portal-grid strong,body.desktop-light .admin-portal-summary strong { color:#202937; } body.desktop-light .admin-portal-summary,body.desktop-light .admin-portal-group { border-color:#d7e0e8; background:rgba(255,255,255,.82); } body.desktop-light .admin-portal-summary > div,body.desktop-light .admin-portal-grid a { border-color:#e1e7ed; } body.desktop-light .admin-portal-grid a:hover { background:#edf8f6; } @media (max-width:980px) { .admin-portal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.admin-portal-grid a:nth-child(2n) { border-right:0; }.admin-portal-summary { grid-template-columns:repeat(3,1fr); }.admin-portal-summary p { grid-column:1/-1; justify-content:flex-start; min-height:48px; border-top:1px solid #292930; }.admin-portal-head { align-items:flex-start; flex-direction:column; } } /* Stable page rhythm for the profile and points workspaces. */ body.route-profile #app .desktop-profile-layout, body.route-points #app .min-h-screen { width:min(1240px,calc(100% - 80px)); max-width:none; margin:0 auto; padding:40px 0 72px !important; box-sizing:border-box; } body.route-profile #app .desktop-profile-layout > * { width:100% !important; max-width:none !important; margin-right:0 !important; margin-left:0 !important; box-sizing:border-box; } body.route-profile #app .desktop-profile-layout > * + * { margin-top:14px !important; } body.route-profile #desktop-profile-library { margin:14px 0 0 !important; padding:20px; border-color:var(--shell-line); border-radius:6px; background:var(--shell-surface); } body.route-profile .profile-library-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:16px 0; } body.route-profile .profile-library-grid article { min-height:82px; padding:14px; border-color:var(--shell-line); border-radius:5px; background:var(--shell-strong); } body.route-profile .profile-library-grid strong { font-size:13px; } body.route-profile .profile-library-grid small { margin-top:9px; font-size:11px; } body.route-profile .profile-library-data { gap:22px; border-color:var(--shell-line); } body.route-profile .profile-library-list { min-height:36px; } /* Profile workspace: teal is reserved for the single primary path. */ body.route-profile #app .desktop-profile-layout { --profile-accent:#39cfc0; --profile-accent-soft:rgba(57,207,192,.09); display:flex !important; flex-direction:column; gap:0; } body.route-profile #app .desktop-profile-layout > * + * { margin-top:12px !important; } body.route-profile #app .desktop-profile-layout .profile-identity { min-height:118px !important; padding:8px 4px 22px !important; border:0 !important; border-bottom:1px solid var(--shell-line) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.route-profile #app .desktop-profile-layout .profile-identity, body.route-profile #app .desktop-profile-layout .profile-identity * { background-image:none !important; box-shadow:none !important; } body.route-profile #app .desktop-profile-layout .profile-identity [style*="background"] { background-color:transparent !important; } body.route-profile #app .desktop-profile-layout .profile-identity img { border:1px solid var(--shell-line) !important; } body.route-profile #app .desktop-profile-layout .profile-identity button { border-color:var(--shell-line) !important; border-radius:4px !important; background:transparent !important; color:var(--shell-muted) !important; } body.route-profile #app .desktop-profile-layout .profile-identity button:first-of-type { border-color:rgba(57,207,192,.55) !important; color:var(--profile-accent) !important; } body.route-profile #app .desktop-profile-layout .profile-overview { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 !important; overflow:hidden; border:1px solid var(--shell-line) !important; border-radius:5px !important; background:var(--shell-surface) !important; box-shadow:none !important; } body.route-profile #app .desktop-profile-layout .profile-overview > * { min-height:92px !important; margin:0 !important; border:0 !important; border-right:1px solid var(--shell-line) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.route-profile #app .desktop-profile-layout .profile-overview > *:last-child { border-right:0 !important; } body.route-profile #app .desktop-profile-layout .profile-overview [style*="background"] { background-color:transparent !important; } body.route-profile #app .desktop-profile-layout .profile-points-entry { min-height:60px !important; border:1px solid rgba(57,207,192,.46) !important; border-left:3px solid var(--profile-accent) !important; border-radius:5px !important; background:transparent !important; box-shadow:none !important; } body.route-profile #app .desktop-profile-layout .profile-points-entry [style*="background"] { background-color:transparent !important; } body.route-profile #app .desktop-profile-layout .profile-tools { padding:18px 20px 20px !important; border:1px solid var(--shell-line) !important; border-radius:5px !important; background:var(--shell-surface) !important; box-shadow:none !important; } body.route-profile #app .desktop-profile-layout .profile-tools [style*="background"] { background-color:transparent !important; background-image:none !important; } body.route-profile #app .desktop-profile-layout .profile-tools [class*="grid"] { column-gap:8px !important; row-gap:6px !important; } body.route-profile #app .desktop-profile-layout .profile-tools [class*="rounded"] { border-radius:4px !important; } body.route-profile #app .desktop-profile-layout .profile-tools [class*="i-mdi"] { color:var(--shell-muted) !important; } body.route-profile #app .desktop-profile-layout .profile-tools [class*="cursor"]:hover { background:var(--shell-strong) !important; } body.route-profile #app .desktop-profile-layout .profile-settings-entry { min-height:54px !important; border:1px solid var(--shell-line) !important; border-radius:5px !important; background:transparent !important; box-shadow:none !important; } body.route-profile #app .desktop-profile-layout .profile-settings-entry [style*="background"] { background-color:transparent !important; } body.route-profile #desktop-profile-library { margin-top:12px !important; background:transparent; } body.route-profile .profile-library-title button { border-color:rgba(57,207,192,.55); background:transparent; color:var(--profile-accent); } body.route-profile .profile-library-grid article { background:transparent; } body.route-profile .profile-library-grid article:hover { border-color:rgba(57,207,192,.5); background:var(--profile-accent-soft); } body.route-profile .profile-library-data button.active { color:var(--profile-accent); border-color:var(--profile-accent); } @media (max-width:760px) { body.route-profile #app .desktop-profile-layout .profile-overview { grid-template-columns:1fr; } body.route-profile #app .desktop-profile-layout .profile-overview > * { border-right:0 !important; border-bottom:1px solid var(--shell-line) !important; } body.route-profile #app .desktop-profile-layout .profile-overview > *:last-child { border-bottom:0 !important; } } body.route-points #app .min-h-screen { color:var(--shell-text) !important; } #desktop-points-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:18px; padding-bottom:22px; border-bottom:1px solid var(--shell-line); } #desktop-points-header span { display:block; color:var(--shell-accent); font-size:10px; font-weight:700; } #desktop-points-header h1 { margin:8px 0 6px; color:var(--shell-text); font-size:28px; line-height:1.2; } #desktop-points-header p { margin:0; color:var(--shell-muted); font-size:12px; } #desktop-points-header a { padding:9px 12px; border:1px solid var(--shell-line); border-radius:4px; color:var(--shell-muted); font-size:12px; text-decoration:none; } #desktop-points-header a:hover { border-color:var(--shell-accent); color:var(--shell-accent); } body.route-points .desktop-points-content { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px !important; padding:0 !important; } body.route-points .desktop-points-content > * { min-width:0; margin:0 !important; border:1px solid var(--shell-line) !important; border-radius:6px !important; background:var(--shell-surface) !important; box-shadow:none !important; box-sizing:border-box; } body.route-points .desktop-points-content > :first-child { grid-column:1/-1; min-height:210px; padding:26px 32px !important; } body.route-points .desktop-points-content > :first-child [style*="position: absolute"] { display:none !important; } body.route-points .desktop-points-content > :last-child { grid-column:1/-1; } body.route-points .desktop-points-content [style*="background:rgba(255,255,255"], body.route-points .desktop-points-content [style*="background: rgba(255,255,255"] { background:var(--shell-strong) !important; border-color:var(--shell-line) !important; } @media (max-width:900px) { body.route-profile #app .desktop-profile-layout,body.route-points #app .min-h-screen { width:calc(100% - 40px); padding-top:28px !important; } body.route-profile .profile-library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } body.route-points .desktop-points-content { grid-template-columns:1fr; } body.route-points .desktop-points-content > * { grid-column:1 !important; } } /* Grade page final pass: remove nested frames and keep only functional boundaries. */ body.route-grade-RETIRED #app .min-h-screen > div:first-child { border-bottom:0 !important; padding-bottom:14px !important; } body.route-grade-RETIRED #app .min-h-screen > div:not(:first-child), body.route-grade-RETIRED:not(.route-qa):not(.route-grade) #app .glass-card, body.route-grade-RETIRED:not(.route-qa):not(.route-grade) #app .glass-card-frosted, body.route-grade-RETIRED #app .glass-input, body.route-grade-RETIRED #app .glass-input-active { border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.route-grade-RETIRED #app .glass-divider, body.route-grade-RETIRED #app [class*="divide-"] > :not([hidden]) ~ :not([hidden]) { border-color:transparent !important; } body.route-grade-RETIRED #app .__linka_perf_dead [style*="rgba(255,255,255"], body.route-grade-RETIRED #app .__linka_perf_dead [style*="rgba(255, 255, 255"] { border-color:transparent !important; background:transparent !important; } body.route-grade-RETIRED #app textarea, body.route-grade-RETIRED #app input, body.route-grade-RETIRED #app taro-textarea-core, body.route-grade-RETIRED #app taro-input-core { border:1px solid #34343c !important; border-radius:4px !important; background:#111114 !important; } body.route-grade-RETIRED #app textarea:focus, body.route-grade-RETIRED #app input:focus, body.route-grade-RETIRED #app taro-textarea-core:focus-within, body.route-grade-RETIRED #app taro-input-core:focus-within { border-color:#35d6c5 !important; outline:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit { min-height:46px !important; border:1px solid #20a697 !important; border-radius:4px !important; background:#20a697 !important; background-image:none !important; color:#fff !important; font-weight:700 !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit * { color:#fff !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit:hover { border-color:#2bc4b3 !important; background:#2bc4b3 !important; color:#fff !important; } /* Desktop page frame: keep every workspace aligned to the Broadcast baseline. */ @media (min-width:981px) { /* The page frame owns the 54px gutter. Do not stack an app-level gutter on top of it, and fully release the left rail space when navigation folds. */ body:not(.route-auth) #app { padding-left:var(--desktop-left-width) !important; padding-right:0 !important; } body.desktop-nav-collapsed:not(.route-auth) #app { padding-left:0 !important; } body:not(.route-auth) #app .min-h-screen { width:100% !important; max-width:none !important; margin:0 !important; padding:54px 54px 76px !important; box-sizing:border-box !important; } body.route-qa-RETIRED #app .min-h-screen > *, body.route-grade-RETIRED #app .min-h-screen > *, body.route-learning #app .min-h-screen > * { width:100% !important; max-width:none !important; margin-right:0 !important; margin-left:0 !important; box-sizing:border-box !important; } body:not(.route-auth) #app .min-h-screen > div:first-child:not([hidden]), body.route-qa-RETIRED #desktop-qa-header-RETIRED, #desktop-points-header, .exam-hub-head, .exam-paper-head { min-height:143px !important; margin:0 0 27px !important; padding:0 0 25px !important; border-bottom:1px solid var(--shell-line) !important; box-sizing:border-box !important; } .exam-hub-shell, .exam-paper-shell, .official-library-shell { width:100% !important; max-width:none !important; margin:0 !important; padding:54px 54px 76px !important; box-sizing:border-box !important; } /* Primary workspaces share one topbar type scale and vertical rhythm. */ body.route-qa-RETIRED #desktop-qa-header-RETIRED, body.route-grade-RETIRED #app .min-h-screen > div:first-child, body.route-learning #app .min-h-screen > div:first-child, #desktop-broadcast .broadcast-head, .official-library-shell > header, .exam-hub-head { min-height:143px !important; margin:0 0 27px !important; padding:0 0 25px !important; border-bottom:1px solid var(--shell-line) !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .min-h-screen > div:not(:first-child), body.route-learning #app .min-h-screen > div:not(:first-child) { margin-right:0 !important; margin-left:0 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED h1, body.route-grade-RETIRED #app .min-h-screen > div:first-child h1, body.route-grade-RETIRED #app .min-h-screen > div:first-child h2, body.route-learning #app .min-h-screen > div:first-child h1, body.route-learning #app .min-h-screen > div:first-child h2, #desktop-broadcast .broadcast-head h1, .official-library-shell > header h1, .exam-hub-head h1 { margin:7px 0 9px !important; font-size:30px !important; line-height:1.2 !important; letter-spacing:0 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED p, body.route-grade-RETIRED #app .min-h-screen > div:first-child p, body.route-learning #app .min-h-screen > div:first-child p, #desktop-broadcast .broadcast-head p, .official-library-shell > header p, .exam-hub-head p { margin:0 !important; font-size:14px !important; line-height:1.5 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED span, body.route-grade-RETIRED #app .min-h-screen > div:first-child > span, body.route-grade-RETIRED #app .min-h-screen > div:first-child > div > span, body.route-learning #app .min-h-screen > div:first-child > span, body.route-learning #app .min-h-screen > div:first-child > div > span, #desktop-broadcast .broadcast-head > div > span, .official-library-shell > header > span, .exam-hub-head > div > span { font-size:10px !important; line-height:1.3 !important; letter-spacing:0 !important; } #desktop-broadcast .data-shell { width:100% !important; max-width:none !important; margin:0 !important; padding:54px 54px 76px !important; box-sizing:border-box !important; } } /* Grade redesign: one flat workspace, shared rails, and controls only where interaction needs a visible boundary. This intentionally removes the old card-inside-card treatment from the question and answer sections. */ @media (min-width:981px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { background:#090a0c !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED { min-height:156px !important; margin-bottom:34px !important; padding-bottom:28px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content { position:relative; width:100% !important; margin:0 0 42px !important; padding:0 0 36px !important; border:0 !important; border-bottom:1px solid #24262d !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content:last-child { border-bottom:0 !important; margin-bottom:0 !important; padding-bottom:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > div { width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > div:first-child { display:flex !important; align-items:center !important; min-height:46px; margin-bottom:20px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h2, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h3 { margin:0 !important; color:#f1eff4 !important; font-size:20px !important; font-weight:700 !important; line-height:1.35 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content taro-textarea-core { display:block !important; width:100% !important; height:190px !important; min-height:190px !important; padding:16px 18px !important; border:1px solid #30333c !important; border-radius:4px !important; background:#0d0e11 !important; color:#e9e7ed !important; font-size:15px !important; line-height:1.7 !important; box-sizing:border-box !important; resize:vertical !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content textarea:focus, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content taro-textarea-core:focus { border-color:#2eb9ab !important; outline:2px solid rgba(53,214,197,.12) !important; outline-offset:0; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content textarea::placeholder, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content taro-textarea-core::placeholder { color:#76737e !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content [class*="grid"] { width:100% !important; margin:0 0 18px !important; padding:0 !important; gap:8px !important; background:transparent !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content [class*="grid"] button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content [class*="grid"] taro-button-core { min-height:44px !important; border:1px solid transparent !important; border-radius:4px !important; background:transparent !important; color:#8e8b96 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content [class*="grid"] button:hover, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content [class*="grid"] taro-button-core:hover { border-color:#285f5a !important; color:#35d6c5 !important; background:#101b1a !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit { min-height:48px !important; padding:0 22px !important; border:1px solid #277e75 !important; border-radius:4px !important; background:#178f83 !important; color:#fff !important; font-weight:700 !important; } } @media (max-width:980px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-content { border:0 !important; border-bottom:1px solid #24262d !important; border-radius:0 !important; background:transparent !important; padding:0 0 24px !important; } } /* Light custom workspaces use the same clean white canvas as app routes. */ body.desktop-light #desktop-exam-papers, body.desktop-light #desktop-exam-hub, body.desktop-light #desktop-official-library { background:var(--shell-canvas) !important; } /* EigenFlux-inspired accent language: luminous teal marks decisive UI states. */ @media (min-width:0px) { body.desktop-dark { --ef-accent:#38d6c5; --ef-accent-hover:#4ee1d1; --ef-accent-deep:#15998c; --ef-accent-ink:#071b19; --ef-accent-soft:rgba(56,214,197,.11); --ef-accent-line:rgba(56,214,197,.48); --ef-accent-glow:0 0 0 1px rgba(56,214,197,.16),0 4px 14px rgba(31,195,180,.22),0 0 24px rgba(56,214,197,.12); } /* Primary actions keep the bright filled treatment seen in the reference. */ body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app button[style*="linear-gradient"], body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app taro-button-core[style*="linear-gradient"], body.desktop-dark:not(.route-qa):not(.route-grade) #app .desktop-grade-RETIRED-submit, body.desktop-dark #desktop-home .home-actions button, body.desktop-dark #desktop-contextbar .context-chat-send, body.desktop-dark #desktop-contextbar .agent-modal-dialog footer button[type="submit"] { border-color:var(--ef-accent) !important; background:var(--ef-accent) !important; background-image:none !important; color:var(--ef-accent-ink) !important; font-weight:700 !important; box-shadow:var(--ef-accent-glow) !important; transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease !important; } body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app button[style*="linear-gradient"] *, body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app taro-button-core[style*="linear-gradient"] *, body.desktop-dark:not(.route-qa):not(.route-grade) #app .desktop-grade-RETIRED-submit *, body.desktop-dark #desktop-home .home-actions button *, body.desktop-dark #desktop-contextbar .context-chat-send *, body.desktop-dark #desktop-contextbar .agent-modal-dialog footer button[type="submit"] * { color:var(--ef-accent-ink) !important; } body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app button[style*="linear-gradient"]:hover, body.desktop-dark:not(.route-auth):not(.route-qa):not(.route-grade) #app taro-button-core[style*="linear-gradient"]:hover, body.desktop-dark:not(.route-qa):not(.route-grade) #app .desktop-grade-RETIRED-submit:hover, body.desktop-dark #desktop-home .home-actions button:hover, body.desktop-dark #desktop-contextbar .context-chat-send:hover, body.desktop-dark #desktop-contextbar .agent-modal-dialog footer button[type="submit"]:hover { border-color:var(--ef-accent-hover) !important; background:var(--ef-accent-hover) !important; box-shadow:0 0 0 1px rgba(78,225,209,.2),0 5px 18px rgba(31,195,180,.3),0 0 30px rgba(56,214,197,.16) !important; transform:translateY(-1px); } /* Selected capsules and positive badges get the compact verified-chip feel. */ body.desktop-dark:not(.route-qa):not(.route-grade) #app .capsule-selected, body.desktop-dark #desktop-nav .desktop-nav-badge, body.desktop-dark #desktop-contextbar .people-rank-tabs i, body.desktop-dark #desktop-contextbar .agent-run li.done i, body.desktop-dark .desktop-role-badge.is-student { border-color:var(--ef-accent-line) !important; background:var(--ef-accent) !important; color:var(--ef-accent-ink) !important; font-weight:700 !important; box-shadow:0 0 0 1px rgba(56,214,197,.1),0 3px 12px rgba(31,195,180,.2) !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app .capsule-selected * { color:var(--ef-accent-ink) !important; } /* Secondary controls stay quiet until interaction, then pick up a teal edge. */ body.desktop-dark:not(.route-qa):not(.route-grade) #app button:not(:disabled), body.desktop-dark:not(.route-qa):not(.route-grade) #app taro-button-core:not(:disabled), body.desktop-dark #desktop-contextbar button:not(:disabled), body.desktop-dark #desktop-nav button:not(:disabled) { transition:border-color .16s ease,color .16s ease,background-color .16s ease,box-shadow .16s ease,transform .16s ease; } body.desktop-dark:not(.route-qa):not(.route-grade) #app button:not(:disabled):hover, body.desktop-dark:not(.route-qa):not(.route-grade) #app taro-button-core:not(:disabled):hover, body.desktop-dark #desktop-contextbar .agent-quick-tools button:hover, body.desktop-dark #desktop-contextbar .agent-attach-button:hover, body.desktop-dark #desktop-contextbar .agent-tools-panel > button:hover { border-color:var(--ef-accent-line) !important; background:var(--ef-accent-soft) !important; color:var(--ef-accent) !important; } /* Focus and active navigation share the same restrained ambient glow. */ body.desktop-dark:not(.route-qa):not(.route-grade) #app input:focus, body.desktop-dark:not(.route-qa):not(.route-grade) #app textarea:focus, body.desktop-dark:not(.route-qa):not(.route-grade) #app taro-input-core:focus-within, body.desktop-dark:not(.route-qa):not(.route-grade) #app taro-textarea-core:focus-within, body.desktop-dark #desktop-contextbar textarea:focus { border-color:var(--ef-accent-line) !important; outline:0 !important; box-shadow:0 0 0 3px rgba(56,214,197,.08) !important; } body.desktop-dark #desktop-nav .desktop-nav-item.active::before, body.desktop-dark #desktop-contextbar .context-tab.active, body.desktop-dark #desktop-contextbar .people-rank-tabs button.active { filter:drop-shadow(0 0 6px rgba(56,214,197,.5)); } @media (prefers-reduced-motion:reduce) { body.desktop-dark:not(.route-qa):not(.route-grade) #app button, body.desktop-dark:not(.route-qa):not(.route-grade) #app taro-button-core, body.desktop-dark #desktop-contextbar button { transition:none !important; transform:none !important; } } } /* Refined light theme: soft tonal separation instead of outlined panels. */ @media (min-width:0px) { body.desktop-light { --shell-canvas:#f4f7fa; --shell-surface:rgba(255,255,255,.84); --shell-strong:#fff; --shell-line:#e2e7ed; } html:has(body.desktop-light), body.desktop-light { background:var(--shell-canvas); } body.desktop-light.route-has-context #app { border-left:0; border-right:0; } body.desktop-light #desktop-nav, body.desktop-light #desktop-contextbar { background:rgba(255,255,255,.82); border-color:#e6ebf0; box-shadow:none; backdrop-filter:blur(24px) saturate(115%); -webkit-backdrop-filter:blur(24px) saturate(115%); } body.desktop-light .desktop-nav-footer { background:rgba(249,251,252,.86); border-color:#e7ebf0; } body.desktop-light #desktop-nav .desktop-nav-item:hover { background:#f5f8fa; } body.desktop-light #desktop-nav .desktop-nav-item.active { background:#f0f6f5; } body.desktop-light:not(.route-qa):not(.route-grade) #app .bg-card, body.desktop-light:not(.route-qa):not(.route-grade) #app .bg-white, body.desktop-light:not(.route-qa):not(.route-grade) #app .glass-card, body.desktop-light:not(.route-qa):not(.route-grade) #app .glass-card-frosted, body.desktop-light:not(.route-qa):not(.route-grade) #app .rounded-xl, body.desktop-light:not(.route-qa):not(.route-grade) #app .rounded-2xl { background-color:rgba(255,255,255,.88) !important; border-color:#e2e7ed !important; box-shadow:0 1px 2px rgba(28,39,52,.025),0 8px 24px rgba(28,39,52,.035) !important; backdrop-filter:none; -webkit-backdrop-filter:none; } body.desktop-light #app .border, body.desktop-light #app .border-t, body.desktop-light #app .border-r, body.desktop-light #app .border-b, body.desktop-light #app .border-l, body.desktop-light #app .border-border, body.desktop-light #app .border-input, body.desktop-light #app [class*="divide-x"] > :not([hidden]) ~ :not([hidden]), body.desktop-light #app [class*="divide-y"] > :not([hidden]) ~ :not([hidden]) { border-color:#e4e9ee !important; } body.desktop-light #app [style*="border:"] { border-color:#e2e7ed !important; } body.desktop-light #desktop-contextbar .assistant-head, body.desktop-light #desktop-contextbar .context-tabs, body.desktop-light #desktop-contextbar .context-section, body.desktop-light #desktop-contextbar .context-item, body.desktop-light #desktop-contextbar .rank-row, body.desktop-light #desktop-contextbar .agent-quick-tools, body.desktop-light #desktop-contextbar .context-chat-form { border-color:#e6ebf0; } body.desktop-light #desktop-contextbar .context-message { background:#f7f9fb; border-left-color:#dce2e8; } body.desktop-light #desktop-contextbar .context-message.user { background:#edf8f6; border-left-color:#20a99b; } body.desktop-light #desktop-contextbar textarea, body.desktop-light #desktop-contextbar .agent-message-actions button, body.desktop-light #desktop-contextbar .agent-command-hints button, body.desktop-light #desktop-contextbar .agent-quick-tools button, body.desktop-light #desktop-contextbar .agent-attach-button, body.desktop-light #desktop-contextbar .agent-tools-panel > button { background:#fff; border-color:#dfe5eb; box-shadow:0 1px 2px rgba(28,39,52,.025); } } @media (min-width:981px) { body.route-qa-RETIRED #desktop-qa-header-RETIRED, body.route-grade-RETIRED #desktop-grade-header-RETIRED { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:28px !important; min-height:143px !important; margin:0 0 27px !important; padding:0 0 25px !important; border-bottom:1px solid var(--shell-line) !important; background:transparent !important; box-sizing:border-box !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED span, body.route-grade-RETIRED #desktop-grade-header-RETIRED span { display:block; color:#35d6c5 !important; font-size:10px !important; font-weight:700; line-height:1.3; } body.route-qa-RETIRED #desktop-qa-header-RETIRED h1, body.route-grade-RETIRED #desktop-grade-header-RETIRED h1 { margin:7px 0 9px !important; color:var(--shell-text) !important; font-size:30px !important; font-weight:700; line-height:1.2 !important; letter-spacing:0 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED p, body.route-grade-RETIRED #desktop-grade-header-RETIRED p { max-width:680px; margin:0 !important; color:var(--shell-muted) !important; font-size:14px !important; line-height:1.5 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED a, body.route-grade-RETIRED #desktop-grade-header-RETIRED a { flex:0 0 auto; padding:9px 13px; border:1px solid #268b7f; border-radius:4px; background:#178f83; color:#fff !important; font-size:12px; text-decoration:none; white-space:nowrap; } body.route-grade-RETIRED #app .min-h-screen > .desktop-grade-RETIRED-legacy-header { display:none !important; } body.route-grade-RETIRED #app .min-h-screen > .desktop-grade-RETIRED-content { margin:0 0 18px !important; padding:28px 34px !important; border:1px solid var(--shell-line) !important; border-radius:6px !important; background:var(--shell-surface) !important; box-shadow:none !important; } body.route-grade-RETIRED #app .min-h-screen > .desktop-grade-RETIRED-content:last-child { margin-bottom:0 !important; } } /* Final desktop frame: every primary workspace uses the same fixed side gutter. */ @media (min-width:981px) { body { --desktop-page-gutter:64px; } body:not(.route-auth) #app .min-h-screen { width:100% !important; max-width:none !important; margin:0 !important; padding:54px var(--desktop-page-gutter) 76px !important; box-sizing:border-box !important; } #desktop-broadcast .data-shell, .exam-hub-shell, .exam-paper-shell, .official-library-shell { width:100% !important; max-width:none !important; margin:0 !important; padding:54px var(--desktop-page-gutter) 76px !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .min-h-screen > .desktop-grade-RETIRED-content { width:100% !important; margin:0 0 18px !important; padding:28px 40px !important; border:1px solid var(--shell-line) !important; border-radius:6px !important; background:var(--shell-surface) !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .min-h-screen > .desktop-grade-RETIRED-content > * { max-width:none !important; box-sizing:border-box !important; } } /* Final navigation footer layout. */ #desktop-nav .desktop-nav-footer { display:flex; gap:0; max-height:none; overflow:visible; padding:18px 22px 16px; } #desktop-nav .desktop-nav-user { padding:0; } #desktop-nav .desktop-nav-user > div { gap:6px; } #desktop-nav .desktop-nav-user strong { font-size:13px; } #desktop-nav .desktop-nav-user span { margin-top:4px; font-size:11px; } #desktop-nav .desktop-nav-footer-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid #292933; } #desktop-nav .customer-support-link,#desktop-nav .pro-upgrade-link { min-height:34px; margin:0; padding:8px 9px; border-radius:4px; font-size:11px; } #desktop-nav .customer-support-link { border:1px solid #303038; background:transparent; } #desktop-nav .pro-upgrade-link { border-color:rgba(53,214,197,.38); background:rgba(23,143,131,.10); } #desktop-nav .pro-upgrade-link span { font-size:8px; } #desktop-nav .customer-support-link i,#desktop-nav .pro-upgrade-link i { font-size:15px; } #desktop-nav #theme-toggle { min-height:36px; margin:10px 0 0; padding:8px 10px; font-size:11px; } #desktop-nav .desktop-home-footer { display:block; width:100%; min-height:30px; margin-top:12px; padding:10px 0 0; border-top:1px solid #292933; color:#8d8995; font-size:11px; text-decoration:none; } #desktop-nav .desktop-home-footer:hover { color:#35d6c5; } body.desktop-light #desktop-nav .desktop-nav-footer-actions,body.desktop-light #desktop-nav .desktop-home-footer { border-color:#e0e6ec; } /* Account area: compact, readable and utility-first. */ #desktop-nav .desktop-nav-footer { padding:14px 18px 14px; } #desktop-nav .desktop-nav-user > div { min-height:24px; } #desktop-nav .desktop-nav-user strong { font-size:12px; } #desktop-nav .desktop-nav-user span { margin-top:3px; font-size:10px; } #desktop-nav .desktop-role-badge { padding:2px 5px; font-size:9px; } #desktop-nav .desktop-nav-footer-actions { gap:8px; margin-top:11px; padding-top:11px; } #desktop-nav .customer-support-link, #desktop-nav .pro-upgrade-link { min-height:34px; padding:7px 8px; font-size:11px; } #desktop-nav .pro-upgrade-link span { padding:2px 4px; font-size:8px; } #desktop-nav .desktop-admin-link { display:flex; align-items:center; min-height:36px; margin-top:6px; padding:6px 9px; } #desktop-nav .desktop-admin-link span { font-size:11px; } #desktop-nav .desktop-admin-link span b { width:15px; height:15px; font-size:12px; } #desktop-nav .desktop-admin-link small { display:none; } #desktop-nav .desktop-admin-link i { margin-left:auto; font-size:14px; } #desktop-nav #theme-toggle { min-height:34px; margin-top:8px; padding:7px 9px; font-size:17px; line-height:1; letter-spacing:0; } #desktop-nav .desktop-admin-tools { display:flex; align-items:center; justify-content:flex-end; gap:7px; width:100%; margin-top:8px; padding-top:8px; border-top:1px solid #292933; } #desktop-nav .desktop-admin-tools .desktop-admin-link, #desktop-nav .desktop-admin-tools #theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:32px; height:30px; min-height:30px; margin:0; padding:0; border-radius:6px; font-size:16px; line-height:1; } #desktop-nav .desktop-admin-tools .desktop-admin-link span { gap:0; font-size:0; } #desktop-nav .desktop-admin-tools .desktop-admin-link span b { width:auto; height:auto; font-size:17px; } #desktop-nav .desktop-admin-tools .desktop-admin-link i, #desktop-nav .desktop-admin-tools .desktop-admin-link small { display:none; } #desktop-nav .desktop-admin-tools .desktop-admin-payment-badge { position:absolute; transform:translate(9px,-9px); min-width:13px; width:auto; height:13px; padding:0 3px; font-size:8px; } body.desktop-light #desktop-nav .desktop-admin-tools { border-color:#e0e6ec; } #desktop-nav .desktop-home-footer { min-height:25px; margin-top:8px; padding-top:8px; font-size:11px; } /* Q&A and grading share a deliberate content baseline instead of inherited mobile gutters. */ @media (min-width:981px) { body.route-qa-RETIRED #desktop-qa-header-RETIRED { margin-left:24px !important; margin-right:24px !important; } body.route-qa-RETIRED #app .min-h-screen > .desktop-qa-RETIRED-content { width:100% !important; max-width:none !important; margin:0 0 18px !important; box-sizing:border-box !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED { margin-left:40px !important; margin-right:40px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content { padding:26px 40px 30px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content taro-textarea-core { display:block; width:100% !important; max-width:none !important; min-height:128px; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content [class*="grid"] { column-gap:16px !important; row-gap:18px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h2, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h3 { margin-top:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > * + * { margin-top:20px; } } @media (max-width:980px) { body.route-qa-RETIRED #app .min-h-screen, body.route-grade-RETIRED #app .min-h-screen { width:100% !important; max-width:none !important; margin:0 !important; padding:28px 20px 52px !important; box-sizing:border-box !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED, body.route-grade-RETIRED #desktop-grade-header-RETIRED { align-items:flex-start !important; flex-direction:column; min-height:auto !important; padding-bottom:20px !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED a, body.route-grade-RETIRED #desktop-grade-header-RETIRED a { align-self:flex-start; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content { width:100% !important; margin:0 0 14px !important; padding:20px !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content taro-textarea-core { width:100% !important; max-width:none !important; box-sizing:border-box !important; } } /* The header and each top-level module share the same outer left and right edge. */ @media (min-width:981px) { body.route-qa-RETIRED #desktop-qa-header-RETIRED, body.route-grade-RETIRED #desktop-grade-header-RETIRED { margin-left:0 !important; margin-right:0 !important; } body.route-qa-RETIRED #app .min-h-screen > .desktop-qa-RETIRED-content { width:100% !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content { width:100% !important; margin-left:0 !important; margin-right:0 !important; box-sizing:border-box !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content { max-width:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content [class*="max-w"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-content [class*="max-w"], body.route-qa-RETIRED #app .desktop-qa-RETIRED-content [style*="max-width"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-content [style*="max-width"] { max-width:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content .glass-card, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content .glass-card-frosted, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content .glass-card, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content .glass-card-frosted { width:100% !important; } } /* Remove nested legacy width caps so first-level borders match the topbar. */ @media (min-width:981px) { body.route-qa-RETIRED #app .min-h-screen [class*="max-w"], body.route-grade-RETIRED #app .min-h-screen [class*="max-w"], body.route-qa-RETIRED #app .__linka_perf_dead .min-h-screen [style*="max-width"], body.route-grade-RETIRED #app .__linka_perf_dead .min-h-screen [style*="max-width"] { max-width:none !important; } body.route-qa-RETIRED #app .min-h-screen [class*="mx-auto"], body.route-grade-RETIRED #app .min-h-screen [class*="mx-auto"] { margin-left:0 !important; margin-right:0 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content > *, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > * { width:100% !important; max-width:none !important; box-sizing:border-box !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content textarea, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content taro-textarea-core { width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; } } /* Legacy form shells add their own horizontal padding on direct children. */ @media (min-width:981px) { body.route-qa-RETIRED #app .min-h-screen > div:not(:first-child), body.route-grade-RETIRED #app .min-h-screen > div:not(:first-child) { width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; box-sizing:border-box !important; } body.route-qa-RETIRED #app .min-h-screen > div:not(:first-child) > div, body.route-grade-RETIRED #app .min-h-screen > div:not(:first-child) > div { max-width:none !important; margin-left:0 !important; margin-right:0 !important; } } /* Final grade-page rails: the legacy form must not create a second inner grid. */ @media (min-width:981px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { padding-left:46px !important; padding-right:46px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content { width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; padding-left:30px !important; padding-right:30px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content > *, body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content [class*="max-w"] { width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content taro-textarea-core { width:100% !important; min-width:0 !important; margin-left:0 !important; margin-right:0 !important; } } /* Final flat-layout overrides. */ @media (min-width:981px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { padding-left:46px !important; padding-right:46px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content { padding:0 0 36px !important; border:0 !important; border-bottom:1px solid #24262d !important; border-radius:0 !important; background:transparent !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content:last-child { padding-bottom:0 !important; border-bottom:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > div { padding-left:0 !important; padding-right:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } } /* Homepage map: center the visual field and give the network more presence. */ /* Admin workspace polish: consistent density and readable analytics modules. */ body.route-admin-dashboard #app .min-h-screen, body.route-admin-dashboard #desktop-admin-dashboard { font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; } body.route-admin-dashboard #app .min-h-screen > .px-4 { padding-top:20px !important; } body.route-admin-dashboard #app .min-h-screen > .px-4 > * { margin-bottom:14px !important; } body.route-admin-dashboard #app .min-h-screen [class*="rounded"], body.route-admin-dashboard #app .min-h-screen [style*="borderRadius"] { border-radius:6px !important; } body.route-admin-dashboard #app .min-h-screen [class*="p-8"], body.route-admin-dashboard #app .min-h-screen [class*="p-10"] { padding:18px !important; } body.route-admin-dashboard #app .min-h-screen [class*="text-3xl"], body.route-admin-dashboard #app .min-h-screen [class*="text-4xl"], body.route-admin-dashboard #app .min-h-screen [class*="text-5xl"] { font-size:22px !important; line-height:1.25 !important; } body.route-admin-dashboard #app .min-h-screen svg { display:block; max-height:250px; } body.route-admin-dashboard #app .min-h-screen svg text { font-size:11px !important; letter-spacing:0 !important; } body.route-admin-dashboard #app .min-h-screen [class*="h-96"], body.route-admin-dashboard #app .min-h-screen [class*="h-["] { max-height:270px !important; } body.route-admin-dashboard #app .min-h-screen table th, body.route-admin-dashboard #app .min-h-screen table td { padding:10px 12px !important; font-size:12px !important; } body.route-admin-dashboard .admin-dashboard-shell { width:min(1380px,calc(100% - 72px)); padding-top:30px; } body.route-admin-dashboard .admin-dashboard-head { padding-bottom:18px; } body.route-admin-dashboard .admin-dashboard-head h1 { font-size:26px; } body.route-admin-dashboard .admin-dashboard-kpis article { min-height:104px; padding:16px; } body.route-admin-dashboard .admin-dashboard-kpis strong { margin:10px 0 8px; font-size:25px; } body.route-admin-dashboard .admin-dashboard-panel { padding:16px; } body.route-admin-dashboard .admin-dashboard-panel > header { margin-bottom:14px; } body.route-admin-dashboard .admin-dashboard-activity { min-height:248px; } body.route-admin-dashboard .admin-dashboard-bars { height:150px; } body.route-admin-dashboard .admin-dashboard-nav { margin:14px 0; } @media (max-width:760px) { body.route-admin-dashboard .admin-dashboard-shell { width:calc(100% - 28px); padding-top:20px; } } /* Student account list: keep identifiers visible on the dark admin canvas. */ body.route-admin #app table { table-layout:auto !important; min-width:680px; } body.route-admin #app table th, body.route-admin #app table td { color:#dce7e5 !important; border-color:#293631 !important; vertical-align:middle !important; } body.route-admin.desktop-dark #app table th { color:#9eafab !important; } body.route-admin.desktop-dark #app table td:first-child, body.route-admin.desktop-dark #app table td strong, body.route-admin.desktop-dark #app table td b { color:#f0faf7 !important; font-weight:600 !important; } body.route-admin #app table td:first-child, body.route-admin #app [class*="truncate"], body.route-admin #app [class*="text-ellipsis"] { overflow:visible !important; max-width:none !important; text-overflow:clip !important; white-space:normal !important; word-break:break-word !important; } body.route-admin.desktop-dark #app input, body.route-admin.desktop-dark #app textarea, body.route-admin.desktop-dark #app select { color:#f1faf8 !important; background:#101716 !important; border-color:#38514c !important; } body.route-admin.desktop-dark #app input::placeholder, body.route-admin.desktop-dark #app textarea::placeholder { color:#81928e !important; } body.route-admin #app .overflow-x-auto { overflow-x:auto !important; scrollbar-color:#35504b #101413; } body.route-admin #app .overflow-x-auto > table { width:100% !important; } /* Grading workspace v2: compact, aligned and task-focused. */ body.route-grade-RETIRED #desktop-grade-header-RETIRED a { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 13px; border-color:#343740; background:#14161a; color:#d8d6dd !important; font-weight:600; } body.route-grade-RETIRED #desktop-grade-header-RETIRED a:hover { border-color:#2b9d92; color:#45d7c8 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED a i { color:#35d6c5; font-size:16px; } @media (min-width:981px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { width:min(1180px,calc(100% - 48px)) !important; padding:42px 0 64px !important; background:#090a0c !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED { min-height:auto !important; margin:0 !important; padding:0 0 28px !important; border-bottom:1px solid #262930 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED h1 { margin:6px 0 7px !important; font-size:28px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; align-items:stretch !important; gap:18px !important; width:100% !important; margin:0 !important; padding:28px 0 0 !important; border:0 !important; background:transparent !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-typebar { position:relative; grid-column:1 / -1; display:grid !important; grid-template-columns:94px minmax(0,1fr) !important; align-items:center !important; gap:14px !important; min-height:60px; margin:0 !important; padding:8px !important; border:1px solid #2b2e35 !important; border-radius:6px !important; background:#111317 !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar::before { content:'选择题型'; padding-left:12px; color:#aaa8b0; font-size:13px; font-weight:600; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar > div { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:6px !important; width:100% !important; margin:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core { min-height:42px !important; padding:0 14px !important; border:1px solid transparent !important; border-radius:4px !important; background:transparent !important; color:#9c99a3 !important; font-size:14px !important; font-weight:600 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button:hover, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core:hover { border-color:#315b57 !important; background:#111e1d !important; color:#45d7c8 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar .capsule-selected { border-color:#2c8178 !important; background:#17312e !important; color:#dffbf7 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { display:flex !important; flex-direction:column !important; min-width:0; min-height:360px; margin:0 !important; padding:0 !important; overflow:hidden; border:1px solid #2b2e35 !important; border-radius:6px !important; background:#111317 !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { flex:0 0 58px; min-height:58px !important; margin:0 !important; padding:0 18px !important; border-bottom:1px solid #262930 !important; background:#14161a !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child { display:flex !important; flex-direction:column !important; flex:1 1 auto; min-height:0; margin:0 !important; padding:18px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h2, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h3, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content .desktop-grade-RETIRED-question-panel p, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content .desktop-grade-RETIRED-answer-panel p { font-size:16px !important; line-height:1.4 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core { height:244px !important; min-height:244px !important; max-height:440px; padding:15px 16px !important; border:1px solid #333740 !important; border-radius:4px !important; background:#0c0e11 !important; font-size:14px !important; line-height:1.7 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child > div:last-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:last-child { display:flex !important; flex:1 1 auto !important; min-height:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child > div:last-child textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:last-child textarea { height:100% !important; min-height:244px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; min-height:42px; margin:0 0 14px !important; padding:3px !important; overflow:visible !important; gap:3px !important; border:1px solid #2c3037 !important; border-radius:5px !important; background:#0d0f12 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child button { min-width:0; min-height:34px !important; border:0 !important; border-radius:3px !important; background:transparent !important; color:#8f8d96 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child .capsule-selected { background:#1b4742 !important; color:#e4fffb !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child .capsule-selected * { color:#e4fffb !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit { grid-column:1 / -1; justify-self:end; width:280px !important; min-height:48px !important; margin:2px 0 0 !important; border-radius:4px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-processing { grid-column:1 / -1; min-height:130px; margin:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-history-shortcut { display:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > *:not(.desktop-grade-RETIRED-typebar):not(.desktop-grade-RETIRED-question-panel):not(.desktop-grade-RETIRED-answer-panel):not(.desktop-grade-RETIRED-submit):not(.desktop-grade-RETIRED-history-shortcut) { grid-column:1 / -1; } } @media (max-width:980px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { padding:28px 20px 52px !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED { gap:18px !important; margin:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content { display:grid !important; grid-template-columns:1fr !important; gap:14px !important; padding:22px 0 0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { width:100% !important; margin:0 !important; padding:0 !important; border:1px solid #2b2e35 !important; border-radius:6px !important; background:#111317 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar { padding:8px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-history-shortcut { display:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit { width:100% !important; } } /* One page rail for every desktop workspace. The shell remains full bleed; headings, controls and first-level sections all start on this inset. */ @media (min-width:981px) { body { --desktop-page-gutter:clamp(32px,3vw,48px); } body:not(.route-auth) #app .min-h-screen { width:100% !important; max-width:none !important; margin:0 !important; padding:54px var(--desktop-page-gutter) 76px !important; box-sizing:border-box !important; } #desktop-today { --today-page-gutter:clamp(18px,1.7vw,28px); padding:42px var(--today-page-gutter) 64px !important; } #desktop-today .today-inner, #desktop-broadcast .data-shell, .exam-hub-shell, .exam-paper-shell, .official-library-shell, .profile-page-shell, #desktop-checkin .checkin-shell, .focus-shell, .report-shell, .admin-portal-shell, .admin-dashboard-shell { width:100% !important; max-width:none !important; margin:0 !important; padding:54px var(--desktop-page-gutter) 76px !important; box-sizing:border-box !important; } #desktop-today .today-inner { max-width:none !important; margin:0 !important; padding:0 !important; } #desktop-today .today-kicker { margin-bottom:24px !important; font-size:13px !important; letter-spacing:0 !important; } #desktop-today h1 { max-width:760px; font-size:38px !important; line-height:1.24 !important; font-weight:650 !important; letter-spacing:0 !important; } #desktop-today .today-subtitle { max-width:720px; margin:14px 0 24px !important; font-size:15px !important; line-height:1.7 !important; } #desktop-today .today-actions { margin-bottom:36px !important; } #desktop-today .today-grid { gap:14px !important; } #desktop-today .today-card, #desktop-today .progress-panel { border-radius:4px !important; } #desktop-today .progress-panel { padding:18px !important; } #desktop-today .today-card-heading { margin-bottom:12px !important; } #desktop-today .today-card-heading h2, #desktop-today .today-card h2 { font-size:15px !important; font-weight:620 !important; letter-spacing:0 !important; } #desktop-today .heatmap-frame { padding:15px 16px 19px !important; } #desktop-today .heatmap-months { height:15px !important; margin-bottom:8px !important; font-size:10px !important; line-height:15px !important; } #desktop-today .heatmap-months span { transform:none !important; } #desktop-today .heatmap { grid-template-columns:repeat(var(--heat-columns),minmax(12px,1fr)) !important; gap:3px !important; } #desktop-today .heatmap-stage { min-width:792px !important; } #desktop-today .heatmap-stage .heatmap-real { top:30px !important; } #desktop-today .stat-row { gap:8px !important; margin-top:16px !important; } #desktop-today .stat { padding:12px 14px !important; border-radius:3px !important; } #desktop-today .stat strong { font-size:27px !important; line-height:1.08 !important; } #desktop-today .stat span { margin-top:6px !important; font-size:11px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { width:100% !important; max-width:none !important; margin:0 !important; padding:42px var(--desktop-page-gutter) 64px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar::before { white-space:nowrap; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core { height:300px !important; min-height:300px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-submit { justify-self:end !important; width:280px !important; max-width:280px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-legacy-footer { display:none !important; } #desktop-home .home-topbar { padding-right:var(--desktop-page-gutter); padding-left:var(--desktop-page-gutter); } #desktop-home .home-copy { left:var(--desktop-page-gutter); } #desktop-home .map-legend { right:var(--desktop-page-gutter); } #desktop-home .home-stats { right:var(--desktop-page-gutter); left:var(--desktop-page-gutter); } } /* Grading alignment pass: every visible edge follows the same panel rails. */ @media (min-width:981px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { position:relative !important; display:grid !important; grid-template-rows:58px minmax(0,1fr) !important; height:438px !important; min-height:438px !important; overflow:visible !important; border:0 !important; border-radius:0 !important; background:transparent !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { width:100% !important; min-width:0 !important; margin:0 !important; padding:0 18px !important; border:1px solid #2b2e35 !important; border-radius:6px !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child { display:block !important; width:100% !important; min-width:0 !important; margin:0 !important; padding:14px 0 0 !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child > *, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > * { width:100% !important; max-width:none !important; margin-right:0 !important; margin-left:0 !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child > div:has(textarea), body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:has(textarea), body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child > div:has(taro-textarea-core), body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:has(taro-textarea-core) { height:366px !important; min-height:0 !important; padding:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core { display:block !important; width:100% !important; height:366px !important; min-height:366px !important; max-height:366px !important; margin:0 !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child { position:absolute !important; z-index:2; top:8px; right:10px; width:min(56%,310px) !important; min-height:40px !important; margin:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:last-child { width:100% !important; height:366px !important; margin:0 !important; padding:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-submit { grid-column:1 / -1 !important; justify-self:stretch !important; width:100% !important; max-width:none !important; margin:0 !important; } } /* Q&A alignment pass: remove inherited mobile insets from each form layer. */ @media (min-width:981px) { body.route-qa-RETIRED #app .min-h-screen > .desktop-qa-RETIRED-content { width:100% !important; max-width:none !important; margin:0 0 18px !important; padding-right:0 !important; padding-left:0 !important; box-sizing:border-box !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content > div { width:100% !important; max-width:none !important; margin-right:0 !important; margin-left:0 !important; box-sizing:border-box !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea), body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) { overflow:visible !important; border:0 !important; border-radius:0 !important; background:transparent !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea) > div:first-child, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) > div:first-child { width:100% !important; min-height:68px !important; margin:0 !important; padding:0 18px !important; border:1px solid #2b2e35 !important; border-radius:6px !important; background:#14161a !important; box-sizing:border-box !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea) > div:last-child, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) > div:last-child { width:100% !important; margin:0 !important; padding:14px 0 0 !important; box-sizing:border-box !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea) > div:last-child > *, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) > div:last-child > * { width:100% !important; max-width:none !important; margin-right:0 !important; margin-left:0 !important; box-sizing:border-box !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content textarea, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-textarea-core { display:block !important; width:100% !important; min-height:190px !important; margin:0 !important; box-sizing:border-box !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[class*="bg-gradient-primary"], body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[style*="var(--gradient-primary)"], body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-button-core[class*="bg-gradient-primary"] { display:flex !important; width:100% !important; max-width:none !important; margin-right:0 !important; margin-left:0 !important; box-sizing:border-box !important; } } body.route-qa-RETIRED.desktop-light #app .desktop-qa-RETIRED-content:has(textarea) > div:first-child, body.route-qa-RETIRED.desktop-light #app .desktop-qa-RETIRED-content:has(taro-textarea-core) > div:first-child { border-color:#d9dfe6 !important; background:#f7f9fb !important; } /* Restore the desktop Q&A mode switch after the compact mobile hero is hidden. */ body.route-qa-RETIRED #desktop-qa-header-RETIRED .desktop-qa-RETIRED-header-actions { display:flex; align-items:center; gap:12px; flex:0 0 auto; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED { display:flex; align-items:center; gap:3px; padding:3px; border:1px solid #343740; border-radius:999px; background:#17191e; box-shadow:inset 0 1px 0 rgba(255,255,255,.03); } body.route-qa-RETIRED #desktop-qa-mode-RETIRED button { min-width:58px; height:32px; padding:0 14px; border:0; border-radius:999px; background:transparent; color:#8e929c; font:600 13px/32px inherit; cursor:pointer; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED button:hover { color:#dddfe5; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED button.active { background:#f0f1f4; color:#17191e; box-shadow:0 1px 4px rgba(0,0,0,.22); } body.route-qa-RETIRED.desktop-light #desktop-qa-mode-RETIRED { border-color:#d5dbe3; background:#edf1f5; } body.route-qa-RETIRED.desktop-light #desktop-qa-mode-RETIRED button { color:#667080; } body.route-qa-RETIRED.desktop-light #desktop-qa-mode-RETIRED button:hover { color:#252b34; } body.route-qa-RETIRED.desktop-light #desktop-qa-mode-RETIRED button.active { background:#20252d; color:#fff; } /* The compiled answer renderer uses 12-13px inline type; scale it for desktop reading. */ @media (min-width:981px) { body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-card > div:nth-child(2) span { font-size:15px !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body { padding:9px 20px 22px !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body p, body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body span:not([class*="i-mdi"]), body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body div:not([class*="i-mdi"]) { font-size:16px !important; line-height:1.9 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body > div > div > div:first-child span { font-size:15px !important; line-height:1.5 !important; } } @media (max-width:1180px) { body.route-qa-RETIRED #desktop-qa-header-RETIRED { align-items:flex-start; } body.route-qa-RETIRED #desktop-qa-header-RETIRED .desktop-qa-RETIRED-header-actions { align-items:flex-end; flex-direction:column-reverse; } } @media (max-width:980px) { body.route-qa-RETIRED #desktop-qa-header-RETIRED .desktop-qa-RETIRED-header-actions { align-items:flex-start; } } /* Keep the answer-mode selector compact and optically centered in its header. */ @media (min-width:981px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { padding-right:calc(min(50%,260px) + 28px) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child { top:29px !important; right:12px !important; width:min(50%,260px) !important; height:42px !important; min-height:42px !important; max-height:42px !important; padding:3px !important; gap:3px !important; transform:translateY(-50%); border-radius:5px !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child taro-button-core { height:34px !important; min-height:34px !important; max-height:34px !important; padding:0 8px !important; border-radius:3px !important; line-height:1 !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child button > div, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child taro-button-core > div { font-size:14px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child span { font-size:12px !important; line-height:1 !important; white-space:nowrap; } } /* Dark-mode contrast pass. Keep the near-black canvas while making every information tier readable across compiled pages and desktop workspaces. */ @media (min-width:0px) { body.desktop-dark { color-scheme:dark; --shell-canvas:#090a0c; --shell-surface:#121318; --shell-strong:#18191f; --shell-line:#363943; --shell-line-strong:#474b57; --shell-text:#f2f2f5; --shell-muted:#b8b6c0; --shell-faint:#92909b; --shell-accent:#42ddcc; --shell-accent-soft:#173c38; --ef-dark-canvas:#090a0c; --ef-dark-surface:#121318; --ef-dark-raised:#18191f; --ef-dark-line:#363943; --ef-dark-line-strong:#474b57; --ef-dark-text:#f2f2f5; --ef-dark-text-secondary:#d0cdd5; --ef-dark-text-muted:#aaa8b2; --ef-dark-text-faint:#8e8c97; --ef-dark-accent:#42ddcc; } body.desktop-dark, body.desktop-dark:not(.route-qa):not(.route-grade) #app, body.desktop-dark:not(.route-qa):not(.route-grade) page, body.desktop-dark #desktop-today, body.desktop-dark .desktop-data-page, body.desktop-dark [id^="desktop-"] { color:var(--ef-dark-text); } body.desktop-dark:not(.route-qa):not(.route-grade) #app * { color:var(--ef-dark-text-secondary) !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app :is(h1,h2,h3,h4,h5,h6,strong,.text-foreground) { color:var(--ef-dark-text) !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app :is(.text-muted-foreground,.text-gray-400,.text-gray-500,.text-gray-600,.text-gray-700) { color:var(--ef-dark-text-muted) !important; opacity:1 !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app :is(.text-primary,.text-accent,[class*="text-primary"],[class*="text-accent"]) { color:var(--ef-dark-accent) !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app :is(.text-white,.text-primary-foreground) { color:#fff !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app :is(.glass-card,.glass-card-frosted,.bg-card,.bg-white,.rounded-xl,.rounded-2xl) { background-color:var(--ef-dark-surface) !important; border-color:var(--ef-dark-line) !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app :is(.border,.border-b,.border-t,.border-l,.border-r,.border-border,.border-input), body.desktop-dark:not(.route-qa):not(.route-grade) #app [class*="divide-y"] > :not([hidden]) ~ :not([hidden]) { border-color:var(--ef-dark-line) !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app :is(input,textarea,select,taro-input-core,taro-textarea-core,.glass-input,.glass-input-active) { background:var(--ef-dark-canvas) !important; border-color:var(--ef-dark-line-strong) !important; color:var(--ef-dark-text) !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app :is(input,textarea,taro-input-core,taro-textarea-core)::placeholder { color:var(--ef-dark-text-faint) !important; opacity:1 !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app :is(button,taro-button-core):disabled { opacity:.58 !important; } body.desktop-dark #desktop-nav { background:#111216; border-color:var(--ef-dark-line); color:var(--ef-dark-text-muted); } body.desktop-dark #desktop-nav .desktop-nav-brand { color:var(--ef-dark-text); } body.desktop-dark #desktop-nav .desktop-nav-brand span, body.desktop-dark #desktop-nav .desktop-nav-user span, body.desktop-dark #desktop-nav .desktop-home-footer { color:var(--ef-dark-text-faint); } body.desktop-dark #desktop-nav .desktop-nav-item:hover { background:#191a20; color:var(--ef-dark-text-secondary); } body.desktop-dark #desktop-nav .desktop-nav-item.active { background:#202127; color:var(--ef-dark-text); } body.desktop-dark #desktop-nav .desktop-nav-item.active::before { background:var(--ef-dark-accent); } body.desktop-dark #desktop-nav :is(#theme-toggle,.customer-support-link,.pro-upgrade-link) { border-color:var(--ef-dark-line-strong); color:var(--ef-dark-text-muted); } body.desktop-dark #desktop-contextbar { background:#121318; border-color:var(--ef-dark-line); color:var(--ef-dark-text-secondary); } body.desktop-dark #desktop-contextbar :is(.assistant-head,.context-tabs) { background:#121318; border-color:var(--ef-dark-line); } body.desktop-dark #desktop-contextbar :is(h2,h3,.assistant-name,.rank-head strong,.rank-question,.agent-history-head h3) { color:var(--ef-dark-text); } body.desktop-dark #desktop-contextbar :is(.context-sub,.assistant-status,.agent-context-chip,.context-tab,.context-item,.rank-desc,.rank-head span,.rank-no,.rank-count,.rank-question small,.agent-history-panel > p,.agent-conversation-open small,.agent-composer-help) { color:var(--ef-dark-text-faint); } body.desktop-dark #desktop-contextbar :is(.context-message-text,.agent-conversation-open,.agent-run > p) { color:var(--ef-dark-text-secondary); } body.desktop-dark #desktop-contextbar :is(textarea,.agent-new-chat,.agent-history-head button,.agent-message-actions button) { border-color:var(--ef-dark-line-strong); } body.desktop-dark #desktop-contextbar textarea::placeholder { color:var(--ef-dark-text-faint); opacity:1; } body.desktop-dark #desktop-contextbar .context-tab.active, body.desktop-dark #desktop-contextbar .context-toggle { color:var(--ef-dark-accent); } body.desktop-dark #desktop-contextbar .context-message { background:#191a20; border-left-color:#444852; } body.desktop-dark #desktop-contextbar .context-message.user { background:#142724; border-left-color:var(--ef-dark-accent); } body.desktop-dark [id^="desktop-"] :is(h1,h2,h3,h4,strong) { color:var(--ef-dark-text); } body.desktop-dark [id^="desktop-"] p { color:var(--ef-dark-text-muted); } body.desktop-dark [id^="desktop-"] :is(small,time) { color:var(--ef-dark-text-faint); } body.desktop-dark #desktop-home .home-sub { color:var(--ef-dark-text-secondary); } body.desktop-dark #desktop-home .school-node text { fill:#aaa8b2; } body.desktop-dark #desktop-home .map-legend, body.desktop-dark #desktop-home .home-stat span, body.desktop-dark #desktop-home .map-note { color:var(--ef-dark-text-faint); } body.desktop-dark #desktop-home .home-stats { border-color:var(--ef-dark-line); background:rgba(9,10,12,.86); } body.desktop-dark #desktop-home .home-stat { border-color:var(--ef-dark-line); } body.desktop-dark #desktop-today :is(.today-kicker,.today-subtitle,.activity small,.recommend span,.heatmap-months,.stat span) { color:var(--ef-dark-text-muted); } body.desktop-dark #desktop-today :is(.today-card,.progress-panel,.heatmap-frame,.stat) { border-color:var(--ef-dark-line); } body.desktop-dark #desktop-today .heatmap-frame { background:var(--ef-dark-surface); } body.desktop-dark #desktop-today .heatmap :is(.heat-level-0,.heat-level-1) { --cell-color:#24262d; } body.desktop-dark :is( .checkin-header p,.checkin-state p,.checkin-stats span,.checkin-stats i,.checkin-legend, .checkin-weekdays,.checkin-day,.checkin-log-list time,.checkin-log-list span,.checkin-empty span,.checkin-tip p, .focus-head span,.focus-eyebrow,.focus-head p,.focus-status,.focus-summary span,.focus-summary small, .focus-clock span,.focus-view-total,.focus-bars span,.focus-bars small,.focus-category-title span, .focus-category-list span,.focus-category-list strong,.focus-empty,.focus-month-weekdays span, .focus-log time small,.focus-log article div span,.focus-empty-log span, .report-head p,.report-summary span,.report-trend-bars span,.report-trend-bars small, .report-category-list strong,.report-category-list span,.report-category-list small,.report-row > span,.report-table-head, .library-grid small,.broadcast-section-head p,.broadcast-resource-head span,.broadcast-card b,.broadcast-card time,.broadcast-card small, .official-library-shell header p,.official-library-grid span,.official-feature > div > p,.official-feature > a span, .profile-section-head p,.profile-archive-summary span,.profile-archive-list p,.profile-archive-list time,.profile-account-row span, .exam-hub-head p,.exam-start-main p,.exam-quick span,.exam-section-head p,.exam-analysis-grid span, .admin-portal-head p,.admin-portal-summary span,.admin-portal-group header small,.admin-portal-grid span, .admin-dashboard-head p,.admin-dashboard-head time,.admin-dashboard-kpis span,.admin-dashboard-kpis small, .admin-dashboard-panel > header > b,.admin-dashboard-health-list span,.admin-dashboard-token-summary, .admin-dashboard-token-head,.admin-dashboard-token-row span,.admin-dashboard-alerts p ) { color:var(--ef-dark-text-faint) !important; opacity:1 !important; } body.desktop-dark :is( .focus-summary,.focus-timer-panel,.focus-insights,.focus-history,.report-summary,.report-panel, .checkin-stats,.checkin-calendar,.checkin-log,.library-grid article,.broadcast-card,.broadcast-learning, .broadcast-learning-grid > section,.official-library-grid a,.official-feature,.exam-quick > a, .exam-analysis-grid,.exam-topic-grid a,.admin-portal-summary,.admin-portal-group,.admin-dashboard-panel, .admin-dashboard-kpis article ) { border-color:var(--ef-dark-line); } body.desktop-dark :is(a,button,input,textarea,select,taro-button-core,taro-input-core,taro-textarea-core):focus-visible { outline:2px solid var(--ef-dark-accent) !important; outline-offset:2px !important; } } /* Final rails for the rebuilt points workspace. */ body.route-points #app .desktop-points-workspace { width:100% !important; max-width:none !important; margin:0 !important; padding:42px var(--desktop-page-gutter,40px) 64px !important; box-sizing:border-box !important; } body.route-points #desktop-points-redesign #desktop-points-header { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:28px !important; min-height:88px !important; margin:0 0 16px !important; padding:0 0 22px !important; border-bottom:1px solid var(--points-line) !important; } body.route-points #desktop-points-redesign #desktop-points-header h1 { margin:8px 0 7px !important; color:var(--points-text) !important; font-size:29px !important; line-height:1.15 !important; } body.route-points #desktop-points-redesign #desktop-points-header p { max-width:720px !important; margin:0 !important; color:var(--points-muted) !important; font-size:13px !important; line-height:1.55 !important; } body.route-points #desktop-points-redesign #desktop-points-header > a { display:inline-flex !important; align-items:center !important; width:auto !important; min-height:36px !important; margin:0 !important; padding:0 12px !important; border:1px solid var(--points-line) !important; border-radius:4px !important; background:transparent !important; color:var(--points-muted) !important; } body.route-points #desktop-points-redesign :is(.points-overview,.points-panel,.points-ledger,.points-billing-policy) { background:var(--points-panel) !important; border-color:var(--points-line) !important; box-shadow:none !important; } body.route-points #desktop-points-redesign :is(.points-score-block,.points-overview-stats article,.points-panel > header,.points-ledger > header,.points-level-row,.points-rule-row,.points-ledger-grid article,.points-billing-policy article) { border-color:var(--points-line) !important; } /* GBC points lab: a compact, high-contrast command surface. */ body.route-points #desktop-points-redesign { --points-panel:#10151d; --points-panel-strong:#161e29; --points-line:#2b3747; --points-text:#f2f7fb; --points-muted:#aab9ca; --points-faint:#718096; --points-teal:#39e1ce; --points-teal-soft:rgba(57,225,206,.13); --points-amber:#ffbf4f; --points-amber-soft:rgba(255,191,79,.13); } body.route-points #app .desktop-points-workspace { background-color:#090c12 !important; background-image:linear-gradient(rgba(69,91,116,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(69,91,116,.1) 1px,transparent 1px) !important; background-size:32px 32px !important; } body.route-points #desktop-points-redesign #desktop-points-header { min-height:106px !important; padding:0 0 26px !important; border-bottom-color:#324356 !important; } body.route-points #desktop-points-redesign #desktop-points-header span { color:var(--points-teal) !important; letter-spacing:1.3px !important; } body.route-points #desktop-points-redesign #desktop-points-header h1 { display:flex; align-items:center; gap:12px; font-size:34px !important; } body.route-points #desktop-points-redesign #desktop-points-header h1 b { padding:5px 9px 4px; border:1px solid rgba(255,191,79,.68); border-radius:3px; color:var(--points-amber); font-size:12px; font-weight:750; line-height:1; letter-spacing:1px; } body.route-points #desktop-points-redesign #desktop-points-header > a { min-height:38px !important; border-color:#405065 !important; color:#c9d4df !important; transition:transform .18s ease,border-color .18s ease,color .18s ease !important; } body.route-points #desktop-points-redesign #desktop-points-header > a:hover { transform:translateX(-3px); border-color:var(--points-teal) !important; color:var(--points-teal) !important; } body.route-points #desktop-points-redesign .points-dashboard { gap:16px; } body.route-points #desktop-points-redesign .points-overview { grid-template-columns:minmax(360px,1.12fr) minmax(190px,.38fr) minmax(290px,.7fr); min-height:224px; border-color:#38495c !important; border-radius:7px; background:#10151d !important; box-shadow:0 18px 44px rgba(0,0,0,.22) !important; } body.route-points #desktop-points-redesign .points-score-block { position:relative; overflow:hidden; padding:31px 32px; border-right:1px solid #35465a !important; } body.route-points #desktop-points-redesign .points-score-block:after { content:''; position:absolute; right:-24px; bottom:-24px; width:120px; height:120px; border:1px solid rgba(57,225,206,.25); transform:rotate(45deg); } body.route-points #desktop-points-redesign .points-score-topline { display:flex; align-items:center; justify-content:space-between; gap:16px; } body.route-points #desktop-points-redesign .points-score-label { color:#b7c4d2; font-weight:650; letter-spacing:1px; } body.route-points #desktop-points-redesign .points-live-dot { display:inline-flex; align-items:center; gap:6px; color:#7f91a4; font-size:10px; } body.route-points #desktop-points-redesign .points-live-dot:before { content:''; width:6px; height:6px; border-radius:50%; background:var(--points-teal); box-shadow:0 0 0 4px rgba(57,225,206,.13); } body.route-points #desktop-points-redesign .points-score-line { gap:16px; margin-top:14px; } body.route-points #desktop-points-redesign .points-score-line strong { font-size:64px; letter-spacing:1px; text-shadow:0 0 22px rgba(57,225,206,.15); } body.route-points #desktop-points-redesign .points-score-line em { padding:5px 9px; border-color:rgba(57,225,206,.46); border-radius:2px; background:rgba(57,225,206,.1); color:var(--points-teal); font-weight:700; } body.route-points #desktop-points-redesign .points-progress { height:7px; background:#263240; } body.route-points #desktop-points-redesign .points-progress i { background:var(--points-teal); box-shadow:0 0 14px rgba(57,225,206,.65); } body.route-points #desktop-points-redesign .points-gbc-mark { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; overflow:hidden; border-right:1px solid #35465a; background:#151d28; text-align:center; } body.route-points #desktop-points-redesign .points-gbc-mark:before { content:''; position:absolute; width:118px; height:118px; border:1px solid rgba(255,191,79,.45); transform:rotate(45deg); } body.route-points #desktop-points-redesign .points-gbc-mark > * { position:relative; z-index:1; } body.route-points #desktop-points-redesign .points-gbc-mark span { color:var(--points-amber); font-size:34px; font-weight:800; line-height:1; letter-spacing:2px; } body.route-points #desktop-points-redesign .points-gbc-mark strong { color:#fff6dc; font-size:17px; letter-spacing:2px; } body.route-points #desktop-points-redesign .points-gbc-mark small { color:#9d8c6d; font-size:8px; letter-spacing:1px; } body.route-points #desktop-points-redesign .points-gbc-mark i { position:absolute; top:19px; right:20px; color:var(--points-amber); font-size:17px; } body.route-points #desktop-points-redesign .points-overview-stats { grid-template-columns:1fr; } body.route-points #desktop-points-redesign .points-overview-stats article { padding:15px 21px; border-right:0 !important; border-bottom-color:#35465a !important; } body.route-points #desktop-points-redesign .points-overview-stats article:last-child { grid-column:auto; } body.route-points #desktop-points-redesign .points-overview-stats article > i { width:34px; height:34px; border-radius:3px; } body.route-points #desktop-points-redesign .points-overview-stats strong { font-size:16px; } body.route-points #desktop-points-redesign .points-main-grid { grid-template-columns:minmax(340px,.73fr) minmax(520px,1.27fr); gap:16px; } body.route-points #desktop-points-redesign :is(.points-panel,.points-ledger,.points-billing-policy) { border-color:#35465a !important; border-radius:7px; background:#10151d !important; box-shadow:0 12px 30px rgba(0,0,0,.14) !important; } body.route-points #desktop-points-redesign :is(.points-panel > header,.points-ledger > header) { min-height:62px; padding:12px 18px; border-bottom-color:#35465a !important; } body.route-points #desktop-points-redesign :is(.points-panel,.points-ledger) header span { color:var(--points-teal); letter-spacing:1.1px; } body.route-points #desktop-points-redesign :is(.points-panel,.points-ledger) h2 { font-size:15px; } body.route-points #desktop-points-redesign .points-level-list { padding:10px; } body.route-points #desktop-points-redesign .points-level-row { min-height:44px; border-bottom-color:#293747 !important; } body.route-points #desktop-points-redesign .points-level-row.is-current { border-color:rgba(57,225,206,.6) !important; background:rgba(57,225,206,.09); box-shadow:inset 3px 0 0 var(--points-teal); } body.route-points #desktop-points-redesign .points-level-row em { border-radius:2px; font-weight:700; } body.route-points #desktop-points-redesign .points-rule-list { padding:7px 18px; } body.route-points #desktop-points-redesign .points-rule-row { min-height:52px; border-bottom-color:#293747 !important; } body.route-points #desktop-points-redesign .points-rule-row > i { border:1px solid #334357; border-radius:3px; background:#18212d; color:var(--points-teal); } body.route-points #desktop-points-redesign .points-rule-row b { color:var(--points-amber); font-size:13px; } body.route-points #desktop-points-redesign .points-ledger-grid article { min-height:132px; padding:20px 22px; } body.route-points #desktop-points-redesign .points-ledger-grid article > i { border-radius:3px; } body.route-points #desktop-points-redesign .points-ledger-grid article.is-ai { background:rgba(255,191,79,.035); } body.route-points #desktop-points-redesign .points-ledger-grid button { display:inline-flex; align-items:center; gap:5px; border-color:rgba(255,191,79,.7); border-radius:3px; color:#ffce70; font-weight:700; } body.route-points #desktop-points-redesign .points-ledger-grid button:hover { background:rgba(255,191,79,.12); } body.route-points #desktop-points-redesign .points-billing-policy article { padding:17px 18px; } body.route-points #desktop-points-redesign .points-billing-policy i { color:var(--points-teal); } /* Larger type baseline for long study sessions. */ body.route-points #desktop-points-redesign #desktop-points-header p { font-size:14px !important; line-height:1.65 !important; } body.route-points #desktop-points-redesign #desktop-points-header > a { font-size:13px !important; } body.route-points #desktop-points-redesign .points-score-label { font-size:12px; } body.route-points #desktop-points-redesign .points-live-dot { font-size:11px; } body.route-points #desktop-points-redesign .points-progress-copy { font-size:12px; } body.route-points #desktop-points-redesign .points-overview-stats span { font-size:11px; line-height:1.45; } body.route-points #desktop-points-redesign .points-panel header p { font-size:11px; } body.route-points #desktop-points-redesign :is(.points-panel,.points-ledger) header span { font-size:11px; } body.route-points #desktop-points-redesign :is(.points-panel,.points-ledger) h2 { font-size:17px; } body.route-points #desktop-points-redesign .points-level-row { grid-template-columns:33px 9px minmax(0,1fr) auto 76px; gap:8px; min-height:47px; padding:0 11px; } body.route-points #desktop-points-redesign .points-level-rank { color:var(--level-color); font-size:10px; font-weight:800; letter-spacing:.7px; } body.route-points #desktop-points-redesign .points-level-dot { width:7px; height:7px; background:var(--level-color); box-shadow:0 0 10px color-mix(in srgb,var(--level-color) 60%,transparent); } body.route-points #desktop-points-redesign .points-level-row strong { font-size:13px; } body.route-points #desktop-points-redesign .points-level-row small { font-size:11px; } body.route-points #desktop-points-redesign .points-level-row em { padding:3px 6px; font-size:10px; } body.route-points #desktop-points-redesign .points-level-row.is-current .points-level-rank { color:#071112; background:var(--points-teal); padding:3px 4px; border-radius:2px; } body.route-points #desktop-points-redesign .points-rule-row { grid-template-columns:32px minmax(0,1fr) 48px 110px; gap:11px; min-height:59px; } body.route-points #desktop-points-redesign .points-rule-row > i { width:30px; height:30px; font-size:15px; } body.route-points #desktop-points-redesign .points-rule-row strong { font-size:13px; } body.route-points #desktop-points-redesign .points-rule-row span { margin-top:4px; font-size:11px; } body.route-points #desktop-points-redesign .points-rule-row b { font-size:14px; } body.route-points #desktop-points-redesign .points-rule-row small { font-size:11px; } body.route-points #desktop-points-redesign .points-ledger-grid strong { font-size:15px; } body.route-points #desktop-points-redesign .points-ledger-grid p { margin:7px 0; font-size:12px; line-height:1.6; } body.route-points #desktop-points-redesign .points-ledger-grid small { font-size:11px; } body.route-points #desktop-points-redesign .points-ledger-grid button { min-height:38px; font-size:12px; } body.route-points #desktop-points-redesign .points-billing-policy strong { font-size:12px; } body.route-points #desktop-points-redesign .points-billing-policy span { margin-top:6px; font-size:11px; line-height:1.55; } @media (max-width:1180px) { body.route-points #desktop-points-redesign .points-overview { grid-template-columns:minmax(0,1fr) 220px; } body.route-points #desktop-points-redesign .points-gbc-mark { display:none; } } @media (max-width:820px) { body.route-points #desktop-points-redesign .points-overview { grid-template-columns:1fr; } body.route-points #desktop-points-redesign .points-score-block { border-right:0 !important; } body.route-points #desktop-points-redesign .points-main-grid { grid-template-columns:1fr; } body.route-points #desktop-points-redesign .points-overview-stats { grid-template-columns:repeat(3,minmax(0,1fr)); } body.route-points #desktop-points-redesign .points-overview-stats article { border-right:1px solid #35465a !important; border-bottom:0 !important; } body.route-points #desktop-points-redesign .points-overview-stats article:last-child { border-right:0 !important; } } @media (max-width:560px) { body.route-points #desktop-points-redesign #desktop-points-header h1 { align-items:flex-start; flex-direction:column; font-size:30px !important; } body.route-points #desktop-points-redesign .points-score-line strong { font-size:52px; } body.route-points #desktop-points-redesign .points-overview-stats { grid-template-columns:1fr; } body.route-points #desktop-points-redesign .points-overview-stats article { border-right:0 !important; border-bottom:1px solid #35465a !important; } body.route-points #desktop-points-redesign .points-rule-row { grid-template-columns:32px minmax(0,1fr) 46px; gap:8px; } body.route-points #desktop-points-redesign .points-rule-row small { display:none; } } /* Full-paper reading mode: the original paper text is the primary content. */ @media (max-width:820px) { body.route-points #app .desktop-points-workspace { padding:28px 20px 48px !important; } body.route-points #desktop-points-redesign #desktop-points-header { align-items:flex-start !important; flex-direction:column !important; min-height:0 !important; } #desktop-exam-papers .exam-paper-question > p { font-size:17px; line-height:1.85; } } /* Exam workspaces: cleaner density, wider readable areas, and full school names. */ #desktop-exam-hub :is(.exam-flow,.exam-primary-card,.exam-topic-feature,.exam-history-panel,.exam-analysis-grid,.exam-mode-grid a), #desktop-exam-topics :is(.exam-topic-library-grid a,.exam-topic-library-history), #desktop-exam-schools :is(.school-bank-toolbar label,.school-bank-toolbar section,.school-bank-card), #desktop-exam-papers :is(.exam-paper-picker select,.exam-paper-group-empty,.exam-paper-grid button,.exam-paper-toolbar,.exam-paper-section), #desktop-exam-topic-dashboard :is(.topic-dash-toolbar label,.topic-dash-toolbar button,.topic-dash-overview,.topic-dash-row), #desktop-exam-theory-schools :is(.theory-old-summary div,.theory-old-info,.theory-old-table,.theory-old-card) { border-color:#262b33; border-radius:6px; background:#121419; box-shadow:none; } #desktop-exam-hub :is(.exam-primary-card,.exam-topic-feature,.exam-analysis-grid a,.exam-mode-grid a):hover, #desktop-exam-topics .exam-topic-library-grid a:hover, #desktop-exam-schools .school-bank-card:hover, #desktop-exam-papers .exam-paper-grid button:hover, #desktop-exam-topic-dashboard .topic-dash-row:hover, #desktop-exam-theory-schools .theory-old-card:hover { border-color:#2d8d82; background:#141a1e; } #desktop-exam-schools .school-bank-card > i, #desktop-exam-schools .school-bank-card > i *, #desktop-exam-theory-schools :is(.theory-old-table-row em,.theory-old-legend em,.theory-old-card footer em), #desktop-exam-theory-schools :is(.theory-old-table-row em,.theory-old-legend em,.theory-old-card footer em) * { -webkit-text-fill-color:currentColor; background-clip:border-box; -webkit-background-clip:border-box; text-shadow:none; } body.desktop-light #desktop-exam-hub :is(.exam-flow,.exam-primary-card,.exam-topic-feature,.exam-history-panel,.exam-analysis-grid,.exam-mode-grid a), body.desktop-light #desktop-exam-topics :is(.exam-topic-library-grid a,.exam-topic-library-history), body.desktop-light #desktop-exam-schools :is(.school-bank-toolbar label,.school-bank-toolbar section,.school-bank-card), body.desktop-light #desktop-exam-papers :is(.exam-paper-picker,.exam-paper-grid button,.exam-paper-toolbar,.exam-paper-section), body.desktop-light #desktop-exam-topic-dashboard :is(.topic-dash-toolbar label,.topic-dash-toolbar button,.topic-dash-overview,.topic-dash-row), body.desktop-light #desktop-exam-447-analysis :is(.topic-dash-overview,.topic-dash-row), body.desktop-light #desktop-exam-theory-schools :is(.theory-old-summary div,.theory-old-info,.theory-old-table,.theory-old-card) { border-color:#d9e1ea; background:#fff; } /* Double-theory dashboard: decision-first layout instead of a dense reference table. */ @media (max-width:900px) { #desktop-nav, #desktop-contextbar { display:none !important; } body:not(.route-auth) #app, body.route-has-context #app { padding-right:0 !important; padding-left:0 !important; } #desktop-exam-hub, #desktop-exam-topics, #desktop-exam-schools, #desktop-exam-papers, #desktop-exam-topic-dashboard, #desktop-exam-447-analysis, #desktop-exam-theory-schools { inset:0 !important; width:100vw !important; max-width:100vw !important; } #desktop-exam-hub .exam-hub-shell, #desktop-exam-topics .exam-hub-shell, #desktop-exam-schools .exam-hub-shell, #desktop-exam-papers .exam-paper-shell, #desktop-exam-topic-dashboard .topic-dash-shell, #desktop-exam-theory-schools .topic-dash-shell { padding:32px 18px 56px !important; } #desktop-exam-schools .school-bank-toolbar, #desktop-exam-topic-dashboard .topic-dash-toolbar, #desktop-exam-topic-dashboard .topic-dash-overview { grid-template-columns:1fr; min-width:0; } #desktop-exam-schools .school-bank-toolbar section { grid-template-columns:repeat(3,minmax(0,1fr)); } #desktop-exam-schools .school-bank-card { grid-template-columns:34px minmax(0,1fr); gap:12px; min-width:0; padding:14px; } #desktop-exam-schools .school-bank-card mark, #desktop-exam-schools .school-bank-card em { grid-column:2; justify-self:start; text-align:left; } #desktop-exam-schools .school-bank-card em { display:none; } #desktop-exam-papers .exam-paper-picker select { min-width:0; } #desktop-exam-theory-schools .theory-command, #desktop-exam-theory-schools .theory-toolbar, #desktop-exam-theory-schools .theory-main-grid { grid-template-columns:1fr; } #desktop-exam-theory-schools .theory-old-summary, #desktop-exam-theory-schools .theory-toolbar > div { grid-template-columns:repeat(2,minmax(0,1fr)); } #desktop-exam-theory-schools .theory-old-summary div:nth-child(2) { border-right:0; } #desktop-exam-theory-schools .theory-old-summary div:nth-child(-n+2) { border-bottom:1px solid #262b33; } #desktop-exam-theory-schools .theory-old-table-head { display:none; } #desktop-exam-theory-schools .theory-old-table-row { grid-template-columns:38px minmax(0,1fr); gap:7px 10px; padding:12px 14px; } #desktop-exam-theory-schools .theory-old-table-row em, #desktop-exam-theory-schools .theory-old-table-row mark { grid-column:2; } } /* Exam legacy pages: add green glow and clearer color roles on dark ranking views. */ body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen { background: radial-gradient(circle at 24% 5%,rgba(53,214,197,.12),transparent 28%), radial-gradient(circle at 76% 20%,rgba(101,210,169,.08),transparent 24%), #090a0d !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen > .px-4, body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [class*="bg-background"] { background:transparent !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="border-radius: 12px"], body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="border-radius:12px"], body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [class*="rounded-xl"], body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [class*="rounded-2xl"], body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen .glass-card, body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen .glass-card-frosted { background:linear-gradient(180deg,rgba(21,27,34,.96),rgba(15,18,24,.98)) !important; border-color:#2d3742 !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 12px 16px"] { border-color:rgba(53,214,197,.22) !important; background:rgba(15,20,25,.86) !important; box-shadow:0 0 0 1px rgba(53,214,197,.04),0 18px 46px rgba(0,0,0,.18) !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 12px 16px"] button { border-color:rgba(53,214,197,.28) !important; background:#132024 !important; color:#d9f6f2 !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 12px 16px"] button:hover { border-color:#35d6c5 !important; background:#15302f !important; color:#f0fffd !important; box-shadow:0 0 18px rgba(53,214,197,.16) !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 12px 16px"] button[style*="background: rgba(149, 128, 218, 0.08)"], body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 12px 16px"] button[style*="background:rgba(149,128,218,0.08)"] { background:#132024 !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px 18px"] { overflow:hidden; border-color:#303a45 !important; background:linear-gradient(180deg,#151920,#10141a) !important; box-shadow:inset 3px 0 0 rgba(53,214,197,.22),0 1px 0 rgba(255,255,255,.03) !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px 18px"]::before { content:''; position:absolute; inset:-1px auto -1px 0; width:92px; pointer-events:none; background:linear-gradient(90deg,rgba(53,214,197,.16),transparent); opacity:.68; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px 18px"]::after { content:''; position:absolute; top:-60px; right:-44px; width:140px; height:140px; pointer-events:none; border-radius:50%; background:radial-gradient(circle,rgba(53,214,197,.12),transparent 68%); opacity:.6; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px 18px"]:hover { border-color:#35d6c5 !important; background:linear-gradient(180deg,#172128,#111a20) !important; box-shadow:inset 3px 0 0 #35d6c5,0 0 0 1px rgba(53,214,197,.12),0 18px 46px rgba(0,0,0,.28),0 0 28px rgba(53,214,197,.12) !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px 18px"]:nth-of-type(1), body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px 18px"]:nth-of-type(2), body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px 18px"]:nth-of-type(3) { border-color:rgba(53,214,197,.48) !important; box-shadow:inset 3px 0 0 #35d6c5,0 0 24px rgba(53,214,197,.10) !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px 18px"] :is(strong,b) { color:#f4faf9 !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px 18px"] [class*="i-mdi-fire"], body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px 18px"] [class*="i-mdi-trending"] { color:#35d6c5 !important; filter:drop-shadow(0 0 7px rgba(53,214,197,.55)); } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px 18px"] [style*="font-size: 16px"][style*="font-weight"] { color:#dffbf7 !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 3px 10px"], body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 2px 6px"], body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 1px 5px"] { border:1px solid rgba(53,214,197,.18) !important; background:rgba(53,214,197,.11) !important; color:#9df3e9 !important; box-shadow:0 0 12px rgba(53,214,197,.06) !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="rgba(149, 128, 218, 0.15)"], body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="rgba(149,128,218,0.15)"] { border-color:rgba(155,136,255,.28) !important; background:rgba(123,108,246,.18) !important; color:#cfc8ff !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="rgba(16, 185, 129, 0.1)"], body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="rgba(16,185,129,0.10)"] { border-color:rgba(53,214,197,.34) !important; background:rgba(53,214,197,.14) !important; color:#8cf0e4 !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="color: rgb(123"], body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="color:#7B"], body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="color: #7B"] { color:#35d6c5 !important; } body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="background: linear-gradient"], body.desktop-dark.route-exams:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="background:linear-gradient"] { background:linear-gradient(90deg,#35d6c5,#65d2a9) !important; box-shadow:0 0 18px rgba(53,214,197,.22) !important; } /* Final interaction polish: glowing segmented controls and clean button labels. */ body.route-qa-RETIRED #desktop-qa-mode-RETIRED { gap:8px !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED button { min-width:76px !important; height:36px !important; padding:0 17px !important; border:1px solid #303038 !important; border-radius:5px !important; background:#17181d !important; color:#8f919a !important; box-shadow:none !important; font-size:13px !important; font-weight:800 !important; line-height:34px !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED button:hover { border-color:#28766d !important; color:#c9fff8 !important; background:#14201f !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED button.active, body.route-qa-RETIRED #desktop-qa-mode-RETIRED button[aria-pressed="true"] { border-color:#35d6c5 !important; background:#35d6c5 !important; color:#07110f !important; box-shadow:0 0 0 1px rgba(53,214,197,.32),0 0 18px rgba(53,214,197,.55),0 8px 24px rgba(53,214,197,.18) !important; text-shadow:none !important; } body.route-qa-RETIRED.desktop-light #desktop-qa-mode-RETIRED button { border-color:#ccd4dd !important; background:#eef2f5 !important; color:#69717d !important; } body.route-qa-RETIRED.desktop-light #desktop-qa-mode-RETIRED button.active, body.route-qa-RETIRED.desktop-light #desktop-qa-mode-RETIRED button[aria-pressed="true"] { border-color:#178f83 !important; background:#35d6c5 !important; color:#061311 !important; box-shadow:0 0 0 1px rgba(23,143,131,.28),0 0 18px rgba(53,214,197,.42),0 8px 20px rgba(23,143,131,.16) !important; } body #app :is(button,taro-button-core,[role="button"]) { -webkit-user-select:none !important; user-select:none !important; } body #app :is(button,taro-button-core,[role="button"]) :is(span,strong,b,div:not([class*="i-mdi"])) { background:transparent !important; background-color:transparent !important; background-image:none !important; -webkit-text-fill-color:currentColor !important; text-shadow:none !important; } body :is(#desktop-home,#desktop-today,#desktop-broadcast,#desktop-exam-hub,#desktop-exam-topics,#desktop-exam-schools,#desktop-exam-papers,#desktop-exam-topic-dashboard,#desktop-exam-theory-schools,#desktop-course-hub,#desktop-official-library,#desktop-official-templates,#desktop-my-data,#desktop-admin-dashboard,#desktop-admin-portal) :is(button,a,[role="button"],i,em,mark,b,strong,span) > :is(span,strong,b,small,em) { background:transparent !important; background-color:transparent !important; background-image:none !important; -webkit-text-fill-color:currentColor !important; text-shadow:none !important; } body.route-auth #app :is(button,taro-button-core,[role="button"]) { overflow:hidden !important; color:#fff !important; } body.route-auth #app :is(button,taro-button-core,[role="button"]) :is(span,strong,b,div:not([class*="i-mdi"])) { color:inherit !important; } body.route-auth #app div:has(> input:focus) { border-color:#35d6c5 !important; outline:2px solid #35d6c5 !important; outline-offset:2px !important; box-shadow:0 0 0 2px #0d0d10 !important; } @media (min-width:981px) { body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body, body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body :is(p,span,div,li) { font-size:16px !important; line-height:1.9 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body :is(h1,h2,h3,strong,b) { font-size:17px !important; line-height:1.65 !important; } } /* Unified context layout: an open assistant rail always reduces the workspace. */ /* Four stable context destinations: conversation, history, archive, ranking. */ #app:empty { background:#070b10; } html.desktop-theme-dark-boot, html.desktop-theme-dark-boot body, html.desktop-theme-dark-boot #app, html.desktop-theme-dark-boot #app > .taro_page, html.desktop-theme-dark-boot #app .min-h-screen { background-color:#070b10 !important; color:#edf8f6; } html.desktop-theme-dark-boot body.route-auth, html.desktop-theme-dark-boot body.route-auth #app, html.desktop-theme-dark-boot body.route-auth #app .min-h-screen { background:#070b10 !important; } #desktop-contextbar .context-tabs { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 !important; width:100%; } #desktop-contextbar .context-tab { min-width:0; padding:0 3px 11px !important; overflow:hidden; font-size:11px !important; font-weight:650; text-align:center; text-overflow:ellipsis; white-space:nowrap; } /* Full light theme for every context panel, including archive and ranking. */ body.desktop-light #desktop-contextbar, body.desktop-light #desktop-contextbar .assistant-head, body.desktop-light #desktop-contextbar .context-tabs, body.desktop-light #desktop-contextbar .agent-context-chip { background:#f7f9fb !important; border-color:#d7dee6 !important; color:#2b333d !important; } body.desktop-light #desktop-contextbar :is(.context-chat,.agent-history-panel,.agent-tools-panel,.context-rank,.people-panel) { background:#f7f9fb !important; color:#303944 !important; } body.desktop-light #desktop-contextbar :is(.context-message,.agent-conversation-item,.agent-memory-card,.people-rank-card,.people-feature,.context-chat-form) { background:#fff !important; border-color:#d8e0e7 !important; color:#303944 !important; box-shadow:none !important; } body.desktop-light #desktop-contextbar .context-message.user { background:#e9f7f4 !important; border-left-color:#1aa797 !important; } body.desktop-light #desktop-contextbar :is(.context-message-text,.agent-memory-text,.people-head strong,.people-row div strong,.people-feature-title,.agent-tools-panel h3) { color:#27313b !important; } body.desktop-light #desktop-contextbar :is(.agent-tools-panel p,.people-score-note,.people-row div small,.people-row > span small,.assistant-status,.agent-context-chip) { color:#6d7782 !important; } body.desktop-light #desktop-contextbar .people-feature-stats span { background:#edf8f6 !important; border-color:#86c8c0 !important; color:#61716f !important; } body.desktop-light #desktop-contextbar .people-rank-tabs, body.desktop-light #desktop-contextbar .people-row { border-color:#e1e7ed !important; } body.desktop-light #desktop-contextbar .people-row:hover { background:#eef7f5 !important; } /* Yibentong overview: one continuous workspace instead of nested cards. */ @media (min-width:981px) { body.route-yibentong-anki #app .min-h-screen { width:min(1260px,calc(100% - 48px)) !important; max-width:1260px !important; padding:28px 0 72px !important; } body.route-yibentong-anki #app .min-h-screen > div:first-child { padding:0 0 24px !important; border-bottom:1px solid var(--shell-line) !important; } body.route-yibentong-anki #app .min-h-screen > div:first-child > .mt-3 { min-height:72px; margin-top:20px !important; padding:14px 10px !important; border-width:1px 0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col { gap:0 !important; margin-top:14px; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div { margin:0 !important; padding:20px 12px !important; border-width:0 0 1px !important; border-color:var(--shell-line) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:first-child { padding:18px 0 !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:first-child > .flex.gap-2 { gap:0 !important; overflow:hidden; border:1px solid var(--shell-line); border-radius:6px; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:first-child > .flex.gap-2 > :is(button,taro-button-core) { min-height:88px !important; padding:14px 12px !important; border:0 !important; border-right:1px solid var(--shell-line) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:first-child > .flex.gap-2 > :last-child { border-right:0 !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:nth-child(2) { display:grid; gap:0; padding:8px 0 !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:nth-child(2) > div { padding:10px 12px !important; border-bottom:1px solid rgba(128,135,146,.14); } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:nth-child(2) > div:last-child { border-bottom:0; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:nth-child(n+3) > .flex.items-center.gap-3 { min-height:64px; padding:0 !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div > .flex.flex-col.px-3 { padding:8px 0 0 !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div > .flex.flex-col.px-3 > .px-3.py-3 { margin:0 !important; padding:13px 14px !important; border:0 !important; border-top:1px solid rgba(128,135,146,.16) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.route-yibentong-anki #app :is(p,span,button,taro-button-core) { font-size:max(13px,1em); } } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app .min-h-screen > .flex.flex-col > div, body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app .min-h-screen > div:first-child > .mt-3, body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app .min-h-screen > .flex.flex-col > div:first-child > .flex.gap-2 > :is(button,taro-button-core), body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app .min-h-screen > .flex.flex-col > div > .flex.flex-col.px-3 > .px-3.py-3 { background:transparent !important; color:var(--ef-dark-text-secondary) !important; } body.desktop-light.route-yibentong-anki #app .min-h-screen, body.desktop-light.route-learning-card-detail #app .min-h-screen { background:#f7f9fb !important; color:#26313b !important; } body.desktop-light.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div, body.desktop-light.route-yibentong-anki #app .min-h-screen > div:first-child > .mt-3, body.desktop-light.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:first-child > .flex.gap-2 > :is(button,taro-button-core) { background:transparent !important; border-color:#d9e0e7 !important; color:#2c3742 !important; } body.desktop-light.route-yibentong-anki #app :is(p,span,strong,b,button,taro-button-core) { color:#35414d !important; } body.desktop-light.route-yibentong-anki #app [class*="i-mdi"] { color:#178f83 !important; } /* All card-reading routes share a readable desktop canvas and theme. */ @media (min-width:981px) { body.route-learning-card-detail #app .min-h-screen { width:min(1120px,calc(100% - 48px)) !important; max-width:1120px !important; margin:0 auto !important; padding:34px 0 72px !important; font-size:15px !important; line-height:1.7 !important; } body.route-learning-card-detail #app [style*="font-size: 10px"] { font-size:12px !important; } body.route-learning-card-detail #app [style*="font-size: 11px"] { font-size:13px !important; } body.route-learning-card-detail #app [style*="font-size: 12px"] { font-size:14px !important; } body.route-learning-card-detail #app [style*="font-size: 13px"] { font-size:15px !important; } body.route-learning-card-detail #app [style*="font-size: 14px"] { font-size:16px !important; } body.route-learning-card-detail #app [style*="letter-spacing"] { letter-spacing:0 !important; } } body.desktop-dark.route-learning-card-detail:not(.route-qa):not(.route-grade) #app :is(.glass-card,.glass-card-frosted,.bg-card,.rounded-xl,.rounded-2xl) { background:#15171c !important; border-color:#3a3e48 !important; } body.desktop-light.route-learning-card-detail #app :is(.glass-card,.glass-card-frosted,.bg-card,.rounded-xl,.rounded-2xl) { background:#fff !important; border-color:#d9e0e7 !important; color:#2b3641 !important; } /* Explicit access states. Developer accounts keep every learning-card route open. */ body.learning-card-developer #app [aria-disabled="true"], body.learning-card-developer #app [data-locked="true"] { pointer-events:auto !important; opacity:1 !important; filter:none !important; } /* Broadcast topbar: match the shared desktop header after adding two actions. */ #desktop-contextbar .people-row div strong { color:#f0edf4 !important; font-size:14px !important; font-weight:700 !important; } #desktop-contextbar .people-row div small { margin-top:4px !important; font-size:10px !important; } #desktop-contextbar .people-row div strong .people-level { display:inline-block; max-width:none; margin-left:6px; padding:2px 5px; border:1px solid color-mix(in srgb,var(--people-level-color) 42%,transparent); border-radius:4px; color:var(--people-level-color); font-size:9px !important; font-style:normal; font-weight:800; vertical-align:middle; } #desktop-contextbar .people-row div strong .people-identity-badge { display:inline-flex; align-items:center; gap:4px; height:19px; margin-left:6px; padding:0 7px 0 5px; border-radius:999px; font-size:10px !important; font-style:normal; font-weight:800; line-height:19px; letter-spacing:0; vertical-align:middle; white-space:nowrap; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 5px 14px rgba(0,0,0,.18); } #desktop-contextbar .people-row div strong .people-identity-badge i { position:relative; display:inline-block; width:12px; height:12px; flex:0 0 auto; } #desktop-contextbar .people-row div strong .people-identity-badge.member i { border-radius:4px; background:linear-gradient(135deg,#fff4b8 0%,#f6c768 45%,#d99022 100%); transform:rotate(45deg); box-shadow:0 0 0 1px rgba(255,236,153,.34),0 0 10px rgba(250,204,21,.28); } #desktop-contextbar .people-row div strong .people-identity-badge.member i::before { content:""; position:absolute; inset:2px 5px 5px 2px; border-radius:2px; background:rgba(255,255,255,.70); } #desktop-contextbar .people-row div strong .people-identity-badge.admin i { width:12px; height:13px; background:linear-gradient(135deg,#bdfcf1 0%,#68d1bf 48%,#3486d7 100%); clip-path:polygon(50% 0,100% 18%,88% 78%,50% 100%,12% 78%,0 18%); box-shadow:0 0 0 1px rgba(134,242,227,.32),0 0 10px rgba(104,209,191,.25); } #desktop-contextbar .people-row div strong .people-identity-badge.admin i::before { content:""; position:absolute; left:4px; top:3px; width:4px; height:7px; border-right:1.5px solid rgba(8,47,73,.74); border-bottom:1.5px solid rgba(8,47,73,.74); transform:rotate(38deg); } #desktop-contextbar .people-row div strong .people-identity-badge span { display:inline-block; } #desktop-contextbar .people-row div strong .people-identity-badge.member { border:1px solid rgba(245,158,11,.50); background:linear-gradient(135deg,rgba(92,52,13,.72),rgba(245,158,11,.18)); color:#ffe08a; } #desktop-contextbar .people-row div strong .people-identity-badge.admin { border:1px solid rgba(104,209,191,.52); background:linear-gradient(135deg,rgba(7,45,51,.76),rgba(96,165,250,.16)); color:#a7fff2; } #desktop-contextbar .people-row.people-row--member, #desktop-contextbar .people-row.people-row--admin { position:relative; padding-left:8px !important; border-radius:8px; } #desktop-contextbar .people-row.people-row--member::before, #desktop-contextbar .people-row.people-row--admin::before { content:""; position:absolute; left:0; top:13px; bottom:13px; width:2px; border-radius:999px; } #desktop-contextbar .people-row.people-row--member { background:linear-gradient(90deg,rgba(245,158,11,.075),rgba(245,158,11,0) 48%); } #desktop-contextbar .people-row.people-row--member::before { background:linear-gradient(180deg,#fff0a8,#d99022); box-shadow:0 0 12px rgba(245,158,11,.32); } #desktop-contextbar .people-row.people-row--member > b { color:#f6c768 !important; text-shadow:0 0 12px rgba(245,158,11,.22); } #desktop-contextbar .people-row.people-row--admin { background:linear-gradient(90deg,rgba(104,209,191,.085),rgba(96,165,250,0) 50%); } #desktop-contextbar .people-row.people-row--admin::before { background:linear-gradient(180deg,#a7fff2,#4f9ef8); box-shadow:0 0 12px rgba(104,209,191,.34); } #desktop-contextbar .people-row.people-row--admin > b { color:#86f2e3 !important; text-shadow:0 0 12px rgba(104,209,191,.24); } #desktop-contextbar .people-row div .people-request-note { display:block; margin:5px 0 0; color:#aaa1b1; font-size:10px !important; line-height:1.45; white-space:normal; } #desktop-contextbar .people-row button:not(.muted) { padding:6px 10px !important; border-color:#35d6c5 !important; background:#178f83 !important; color:#f7fffd !important; font-size:10px !important; font-weight:700 !important; box-shadow:0 0 0 1px rgba(53,214,197,.18),0 8px 20px rgba(23,143,131,.18); } #desktop-contextbar .people-row button:not(.muted):hover { border-color:#55f2e4 !important; background:#1fb6a7 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit { min-height:54px !important; border:1px solid #35d6c5 !important; background:#178f83 !important; background-image:none !important; color:#ffffff !important; font-size:16px !important; font-weight:800 !important; opacity:1 !important; box-shadow:0 0 0 1px rgba(53,214,197,.22),0 12px 28px rgba(23,143,131,.24) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit *, body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit span, body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit i, body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit svg { color:#ffffff !important; fill:#ffffff !important; stroke:#ffffff !important; opacity:1 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit:hover { border-color:#55f2e4 !important; background:#1fb6a7 !important; color:#ffffff !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit:disabled, body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit[disabled] { border-color:#287e73 !important; background:#115a52 !important; color:#d9fffa !important; opacity:.78 !important; cursor:not-allowed !important; } /* Native Q&A / grading polish: keep the original React logic, only refine shell UI. */ @media (min-width:981px) { body.route-qa-RETIRED, body.route-grade-RETIRED { --qa-grade-gutter:clamp(42px,3vw,54px); --qa-grade-bg:#08090b; --qa-grade-panel:#111114; --qa-grade-panel-2:#14161a; --qa-grade-line:#1e1e25; --qa-grade-line-strong:#343740; --qa-grade-text:#f3f4f6; --qa-grade-muted:#888490; --qa-grade-accent:#35d6c5; } body.route-qa-RETIRED #app .min-h-screen, body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { width:100% !important; max-width:none !important; margin:0 !important; padding:54px var(--qa-grade-gutter) 76px !important; box-sizing:border-box !important; background:var(--qa-grade-bg) !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED, body.route-grade-RETIRED #desktop-grade-header-RETIRED { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:28px !important; min-height:auto !important; margin:0 0 20px !important; padding:0 0 26px !important; border-bottom:1px solid var(--qa-grade-line) !important; background:transparent !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED span, body.route-grade-RETIRED #desktop-grade-header-RETIRED span { display:block !important; color:var(--qa-grade-accent) !important; font-size:10px !important; font-weight:700 !important; line-height:1.3 !important; letter-spacing:0 !important; text-transform:uppercase; } body.route-qa-RETIRED #desktop-qa-header-RETIRED h1, body.route-grade-RETIRED #desktop-grade-header-RETIRED h1 { margin:7px 0 9px !important; color:var(--qa-grade-text) !important; font-size:30px !important; font-weight:700 !important; line-height:1.2 !important; letter-spacing:0 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED p, body.route-grade-RETIRED #desktop-grade-header-RETIRED p { max-width:680px !important; margin:0 !important; color:var(--qa-grade-muted) !important; font-size:14px !important; font-weight:500 !important; line-height:1.5 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED a, body.route-grade-RETIRED #desktop-grade-header-RETIRED a { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:92px !important; min-height:38px !important; margin:0 !important; padding:0 13px !important; border:1px solid var(--qa-grade-line-strong) !important; border-radius:4px !important; background:var(--qa-grade-panel-2) !important; color:#d8d6dd !important; font-size:12px !important; font-weight:650 !important; line-height:1 !important; box-shadow:none !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED a:hover, body.route-grade-RETIRED #desktop-grade-header-RETIRED a:hover { border-color:var(--qa-grade-accent) !important; color:#ecfffc !important; background:#111b1a !important; box-shadow:none !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED a i, body.route-qa-RETIRED #desktop-qa-header-RETIRED a i { display:none !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child { border-color:var(--qa-grade-line) !important; border-radius:4px !important; background:var(--qa-grade-panel-2) !important; box-shadow:none !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED { width:max-content !important; margin:0 0 20px !important; padding:0 !important; overflow:hidden !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core { border-radius:0 !important; color:#9497a0 !important; background:transparent !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED button.active, body.route-qa-RETIRED #desktop-qa-mode-RETIRED button[aria-pressed="true"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar .capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .capsule-selected { background:#24252a !important; color:#f5f6f8 !important; box-shadow:none !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED button.active::after, body.route-qa-RETIRED #desktop-qa-mode-RETIRED button[aria-pressed="true"]::after { display:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-typebar { margin-bottom:8px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar::before { color:#7e828b !important; font-size:13px !important; font-weight:700 !important; letter-spacing:0 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea) > div:first-child, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) > div:first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { border-color:var(--qa-grade-line) !important; border-radius:4px !important; background:var(--qa-grade-panel) !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-legacy-header, body.route-qa-RETIRED #app .desktop-legacy-topbar { display:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content.desktop-qa-RETIRED-legacy-header, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content.desktop-legacy-topbar, body.route-grade-RETIRED #app .desktop-grade-RETIRED-legacy-intro { display:none !important; width:0 !important; height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; overflow:hidden !important; } /* Retired: hiding first div before shell header mounts caused refresh≠SPA dual pages. */ body.route-qa-RETIRED #app .min-h-screen > div:first-child:not(#desktop-qa-header-RETIRED), body.route-qa-RETIRED #app .min-h-screen > div:first-child:not(#desktop-qa-header-RETIRED) * { display:revert !important; } body.route-qa-RETIRED #app .__linka_perf_dead [style*="linear-gradient"], body.route-grade-RETIRED #app .__linka_perf_dead [style*="linear-gradient"] { background:var(--qa-grade-panel) !important; background-image:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content [class*="i-mdi"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-content [class*="i-mdi"] { display:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content { width:100% !important; max-width:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)), body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar { display:block !important; margin:0 0 18px !important; padding:18px 20px !important; border:1px solid var(--qa-grade-line) !important; border-radius:4px !important; background:var(--qa-grade-panel) !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:not(:has(textarea)):not(:has(taro-textarea-core)):not(:has(button)):not(.desktop-qa-RETIRED-answer-card) { display:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) > div, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar > div { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; width:100% !important; max-width:none !important; margin:0 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) button, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) taro-button-core { min-height:38px !important; border:1px solid var(--qa-grade-line-strong) !important; border-radius:4px !important; background:#0f1014 !important; color:#d8d6dd !important; font-size:13px !important; font-weight:650 !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) button[class*="active"], body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) button[aria-pressed="true"], body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) .capsule-selected { border-color:var(--qa-grade-accent) !important; background:#122624 !important; color:#eafffc !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea), body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core), body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { margin:0 0 18px !important; overflow:hidden !important; border:1px solid var(--qa-grade-line) !important; border-radius:4px !important; background:var(--qa-grade-panel) !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea) > div:first-child, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) > div:first-child { min-height:58px !important; padding:0 20px !important; border:0 !important; border-bottom:1px solid var(--qa-grade-line) !important; background:var(--qa-grade-panel) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea) > div:last-child, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) > div:last-child { padding:22px 26px !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > * { color:var(--qa-grade-text) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content h1, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content h2, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content h3, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h1, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h2, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h3 { color:var(--qa-grade-text) !important; font-weight:720 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content textarea, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core { border-color:var(--qa-grade-line-strong) !important; border-radius:4px !important; background:#0e0f13 !important; color:var(--qa-grade-text) !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content textarea:focus, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-textarea-core:focus-within, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea:focus, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea:focus, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core:focus-within, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core:focus-within { border-color:var(--qa-grade-accent) !important; outline:0 !important; box-shadow:0 0 0 1px rgba(53,214,197,.18) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[class*="bg-gradient-primary"], body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[style*="var(--gradient-primary)"], body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-button-core[class*="bg-gradient-primary"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit { min-height:44px !important; border:1px solid var(--qa-grade-accent) !important; border-radius:4px !important; background:#35d6c5 !important; background-image:none !important; color:#061312 !important; font-size:14px !important; font-weight:800 !important; box-shadow:0 0 18px rgba(53,214,197,.22) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[class*="bg-gradient-primary"]:hover, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[style*="var(--gradient-primary)"]:hover, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-button-core[class*="bg-gradient-primary"]:hover, body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit:hover { border-color:#72f4e8 !important; background:#4ee6d8 !important; background-image:none !important; color:#061312 !important; box-shadow:0 0 22px rgba(53,214,197,.3) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-card, body.route-grade-RETIRED #app .desktop-grade-RETIRED-processing, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > *:not(.desktop-grade-RETIRED-typebar):not(.desktop-grade-RETIRED-question-panel):not(.desktop-grade-RETIRED-answer-panel):not(.desktop-grade-RETIRED-submit):not(.desktop-grade-RETIRED-history-shortcut) { border:1px solid var(--qa-grade-line) !important; border-radius:8px !important; background:var(--qa-grade-panel) !important; box-shadow:none !important; } body.route-qa-RETIRED #desktop-contextbar, body.route-grade-RETIRED #desktop-contextbar { border-left-color:var(--qa-grade-line) !important; background:#101115 !important; } body.route-qa-RETIRED #desktop-contextbar .context-tab.active, body.route-grade-RETIRED #desktop-contextbar .context-tab.active { color:var(--qa-grade-text) !important; box-shadow:inset 0 -2px 0 var(--qa-grade-accent) !important; } body.route-qa-RETIRED #desktop-contextbar button:not(.context-toggle), body.route-grade-RETIRED #desktop-contextbar button:not(.context-toggle) { border-color:rgba(53,214,197,.55) !important; background:transparent !important; color:var(--qa-grade-accent) !important; box-shadow:none !important; } } /* Native Q&A and grading render inside Taro's #app. Never hide that root: the former standalone-workspace rule made a hard refresh end on a blank screen before the enhancer could run. */ @media (min-width:981px) { body.route-qa-RETIRED #app, body.route-grade-RETIRED #app { visibility:visible !important; pointer-events:auto !important; } } /* Final native QA / grading pass: match Official and Exam workspaces. */ @media (min-width:981px) { body.route-qa-RETIRED, body.route-grade-RETIRED { --qa-final-bg:#08090b; --qa-final-panel:#111216; --qa-final-panel-soft:#14161a; --qa-final-line:#262a31; --qa-final-line-strong:#343944; --qa-final-text:#f1f3f4; --qa-final-muted:#8b9099; --qa-final-accent:#35d6c5; } body.route-qa-RETIRED #app .min-h-screen, body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { width:100% !important; max-width:none !important; margin:0 !important; padding:54px clamp(42px,3vw,54px) 76px !important; background:var(--qa-final-bg) !important; background-image:none !important; box-sizing:border-box !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED, body.route-grade-RETIRED #desktop-grade-header-RETIRED { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:28px !important; margin:0 0 22px !important; padding:0 0 26px !important; border-bottom:1px solid var(--qa-final-line) !important; background:transparent !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED > div, body.route-grade-RETIRED #desktop-grade-header-RETIRED > div { min-width:0 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED span, body.route-grade-RETIRED #desktop-grade-header-RETIRED span { display:block !important; color:var(--qa-final-accent) !important; font-size:10px !important; font-weight:750 !important; line-height:1.3 !important; letter-spacing:0 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED h1, body.route-grade-RETIRED #desktop-grade-header-RETIRED h1 { margin:7px 0 9px !important; color:var(--qa-final-text) !important; font-size:30px !important; font-weight:720 !important; line-height:1.2 !important; letter-spacing:0 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED p, body.route-grade-RETIRED #desktop-grade-header-RETIRED p { max-width:720px !important; margin:0 !important; color:var(--qa-final-muted) !important; font-size:14px !important; line-height:1.5 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED a, body.route-grade-RETIRED #desktop-grade-header-RETIRED a { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:92px !important; min-height:38px !important; padding:0 13px !important; border:1px solid var(--qa-final-line-strong) !important; border-radius:4px !important; background:var(--qa-final-panel-soft) !important; color:#d8d6dd !important; font-size:12px !important; font-weight:650 !important; text-decoration:none !important; box-shadow:none !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED a:hover, body.route-grade-RETIRED #desktop-grade-header-RETIRED a:hover { border-color:var(--qa-final-accent) !important; color:var(--qa-final-accent) !important; background:#101b1a !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-legacy-header, body.route-qa-RETIRED #app .desktop-legacy-topbar, body.route-grade-RETIRED #app .desktop-grade-RETIRED-legacy-header, body.route-grade-RETIRED #app .desktop-grade-RETIRED-legacy-intro { display:none !important; } /* Retired: hiding first div before shell header mounts caused refresh≠SPA dual pages. */ body.route-qa-RETIRED #app .min-h-screen > div:first-child:not(#desktop-qa-header-RETIRED), body.route-qa-RETIRED #app .min-h-screen > div:first-child:not(#desktop-qa-header-RETIRED) * { display:revert !important; } body.route-qa-RETIRED #app .__linka_perf_dead [style*="linear-gradient"], body.route-grade-RETIRED #app .__linka_perf_dead [style*="linear-gradient"] { background:var(--qa-final-panel) !important; background-image:none !important; } body.route-qa-RETIRED #app [class*="i-mdi"], body.route-grade-RETIRED #app [class*="i-mdi"] { display:none !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) { display:block !important; width:100% !important; max-width:none !important; margin:0 0 18px !important; padding:18px 20px !important; border:1px solid var(--qa-final-line) !important; border-radius:4px !important; background:var(--qa-final-panel) !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED, body.route-qa-RETIRED #desktop-qa-mode-RETIRED > *, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar > div, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) > div { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; width:100% !important; max-width:none !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) button, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) taro-button-core { min-height:38px !important; border:1px solid var(--qa-final-line-strong) !important; border-radius:4px !important; background:#0f1014 !important; color:#d8d6dd !important; font-size:13px !important; font-weight:650 !important; box-shadow:none !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED button.active, body.route-qa-RETIRED #desktop-qa-mode-RETIRED button[aria-pressed="true"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar .capsule-selected, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content .capsule-selected { border-color:var(--qa-final-accent) !important; background:#10201e !important; color:#eafffc !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea), body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core), body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { overflow:hidden !important; margin:0 0 18px !important; border:1px solid var(--qa-final-line) !important; border-radius:4px !important; background:var(--qa-final-panel) !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea) > div:first-child, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) > div:first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { min-height:58px !important; padding:0 20px !important; border:0 !important; border-bottom:1px solid var(--qa-final-line) !important; border-radius:0 !important; background:var(--qa-final-panel) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea) > div:last-child, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) > div:last-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child { padding:22px 26px !important; } body.route-qa-RETIRED #app textarea, body.route-qa-RETIRED #app taro-textarea-core, body.route-grade-RETIRED #app textarea, body.route-grade-RETIRED #app taro-textarea-core, body.route-qa-RETIRED #app input, body.route-grade-RETIRED #app input { border:1px solid var(--qa-final-line-strong) !important; border-radius:4px !important; background:#0d0e11 !important; color:var(--qa-final-text) !important; box-shadow:none !important; } body.route-qa-RETIRED #app textarea:focus, body.route-grade-RETIRED #app textarea:focus, body.route-qa-RETIRED #app input:focus, body.route-grade-RETIRED #app input:focus { border-color:var(--qa-final-accent) !important; outline:0 !important; } body.route-qa-RETIRED #app button[class*="bg-gradient-primary"], body.route-qa-RETIRED #app button[style*="var(--gradient-primary)"], body.route-qa-RETIRED #app taro-button-core[class*="bg-gradient-primary"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit { width:100% !important; min-height:44px !important; border:1px solid var(--qa-final-accent) !important; border-radius:4px !important; background:var(--qa-final-accent) !important; background-image:none !important; color:#061312 !important; font-size:14px !important; font-weight:800 !important; box-shadow:0 0 18px rgba(53,214,197,.2) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-card, body.route-grade-RETIRED #app .desktop-grade-RETIRED-processing { border:1px solid var(--qa-final-line) !important; border-radius:4px !important; background:var(--qa-final-panel) !important; box-shadow:none !important; } } /* Keep the ranking rail independently scrollable inside the fixed sidebar. */ #desktop-contextbar { overflow:hidden; } #desktop-contextbar .context-panel { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow:hidden; } #desktop-contextbar .context-panel[hidden] { display:none !important; } #desktop-contextbar .context-rank:not([hidden]) { display:flex !important; flex-direction:column; flex:1 1 auto; min-height:0; overflow:hidden; padding:0; } #desktop-contextbar .context-rank > .people-panel { flex:1 1 auto; width:100%; height:auto; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch; padding-bottom:36px; scrollbar-gutter:stable; } /* Template reader: visible hierarchy without turning the article into one accent color. */ .official-template-content > p { margin:0 0 14px; color:#c5c8d0; font-size:16px; line-height:1.9; } .official-template-content > .template-section-heading { margin:34px 0 14px; padding:9px 0 9px 14px; border-left:3px solid #42d8c8; background:linear-gradient(90deg,rgba(53,214,197,.1),rgba(53,214,197,0)); color:#5ff2e3; font-size:22px; font-weight:800; line-height:1.48; } .official-template-content > .template-subsection-heading { margin:24px 0 10px; color:#8ee8de; font-size:18px; font-weight:780; line-height:1.6; } /* Paper hotspot redesign: clearer reading workflow and denser hierarchy. */ .official-templates-shell .official-hotspot-head { min-height:128px; align-items:flex-end; } .official-templates-shell .official-hotspot-head h1 { font-size:42px; } .official-templates-shell .official-hotspot-head p { max-width:760px; color:#a09ba6; } .official-hotspot-hero { grid-template-columns:minmax(0,1fr) minmax(330px,420px); margin:22px 0 18px; } .official-hotspot-hero > div:first-child { min-height:178px; padding:26px 28px; border-color:#2d403e; background: linear-gradient(135deg,rgba(53,214,197,.105),rgba(255,255,255,.02) 48%,rgba(255,255,255,.012)), #111316; } .official-hotspot-hero h2 { max-width:720px; font-size:28px; } .official-hotspot-steps { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; } .official-hotspot-steps b { min-height:28px; padding:6px 10px; border:1px solid rgba(53,214,197,.24); border-radius:5px; background:rgba(53,214,197,.07); color:#79e2d7; font-size:11px; font-weight:800; } .official-hotspot-hero .official-templates-summary { height:100%; grid-template-columns:1fr; } .official-hotspot-hero .official-templates-summary article { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:14px; min-height:0; padding:18px 22px; border-right:0; border-bottom:1px solid #292930; } .official-hotspot-hero .official-templates-summary article:last-child { border-bottom:0; } .official-hotspot-hero .official-templates-summary strong { min-width:54px; font-size:28px; } .official-hotspot-hero .official-templates-summary span { margin:0; color:#a09ba6; } .official-hotspot-toolbar { position:sticky; top:0; z-index:5; margin:18px 0 16px; padding:10px; border:1px solid #24252b; border-radius:8px; background:rgba(12,12,15,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } .official-hotspot-toolbar label { min-height:44px; border-radius:6px; background:#101116; } .official-hotspot-toolbar > div { padding:4px; border:1px solid #292930; border-radius:6px; background:#101116; } .official-hotspot-layout { grid-template-columns:minmax(240px,300px) minmax(0,1fr); gap:18px; } .official-hotspot-rail { top:82px; gap:6px; padding:14px; border-radius:8px; background:#101115; } .official-hotspot-rail-title { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:8px; padding:2px 2px 12px; border-bottom:1px solid #25262c; } .official-hotspot-rail-title span { color:#77737e; font-size:10px; } .official-hotspot-rail button { grid-template-columns:30px minmax(0,1fr) auto; min-height:38px; border-radius:6px; } .official-hotspot-rail button em { color:#666c73; font-size:10px; font-style:normal; font-weight:800; } .official-hotspot-rail button.active em, .official-hotspot-rail button:hover em { color:#35d6c5; } .official-hotspot-feed { display:grid; gap:18px; } .official-hotspot-recent { margin:0; } .official-hotspot-recent > div:last-child { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .official-hotspot-card { min-height:230px; grid-template-columns:44px minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; padding:20px; border-radius:8px; background: linear-gradient(150deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 52%,rgba(53,214,197,.035)), #111217; } .official-hotspot-card > b { grid-column:2; align-self:end; justify-self:start; margin-top:14px; } .official-hotspot-card strong { font-size:18px; } .official-hotspot-card p { display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; } .official-hotspot-topic { margin-top:0; border-radius:8px; } .official-hotspot-topic + .official-hotspot-topic { margin-top:14px; } .official-hotspot-topic > header { min-height:82px; padding:18px 22px; } .official-hotspot-topic h2 { font-size:22px; } .official-hotspot-row { grid-template-columns:minmax(0,1fr) 76px; padding:15px 0; } .official-hotspot-row strong { font-size:16px; } .official-hotspot-row p { max-width:760px; } .official-hotspot-row span { justify-self:end; } .official-hotspot-row-wrap { position:relative; } .official-hotspot-row-wrap .official-hotspot-row { padding-right:104px; } .official-hotspot-priority-badge { display:inline-flex; align-items:center; margin-right:8px; padding:2px 6px; border-radius:4px; background:rgba(245,180,52,.15); color:#f5c35a; font-size:11px; font-style:normal; line-height:1.35; vertical-align:2px; } .official-hotspot-priority-toggle { position:absolute; right:0; top:14px; min-height:28px; padding:0 8px; border:1px solid #3c3a35; border-radius:5px; background:#171719; color:#a9a59b; font-size:11px; cursor:pointer; } .official-hotspot-priority-toggle:hover, .official-hotspot-priority-toggle.active { border-color:#d6a536; background:#302813; color:#ffd46b; } body.desktop-light .official-hotspot-toolbar { border-color:#dce3ea; background:rgba(247,249,251,.92); } body.desktop-light .official-hotspot-hero > div:first-child, body.desktop-light .official-hotspot-rail, body.desktop-light .official-hotspot-card, body.desktop-light .official-hotspot-topic { border-color:#dce3ea; background:#fff; } body.desktop-light .official-hotspot-steps b { border-color:#bfe5e1; background:#eefaf8; color:#137f75; } body.desktop-light .official-hotspot-toolbar label, body.desktop-light .official-hotspot-toolbar > div { border-color:#dce3ea; background:#fff; } @media (max-width:1120px) { .official-hotspot-hero, .official-hotspot-layout { grid-template-columns:1fr; } .official-hotspot-rail { position:static; } .official-hotspot-recent > div:last-child { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:720px) { .official-templates-shell .official-hotspot-head h1 { font-size:34px; } .official-hotspot-toolbar { align-items:stretch; } .official-hotspot-toolbar, .official-hotspot-toolbar > div, .official-hotspot-recent > div:last-child { grid-template-columns:1fr; } .official-hotspot-toolbar { display:grid; } .official-hotspot-card, .official-template-post { grid-template-columns:1fr; } .official-hotspot-card > b { grid-column:1; } } /* Paper hotspot usage pass: make search and reading targets the primary surface. */ .official-templates-shell .official-hotspot-head { min-height:96px; padding-bottom:18px; } .official-templates-shell .official-hotspot-head h1 { margin:6px 0 6px; font-size:36px; } .official-templates-shell .official-hotspot-head p { max-width:620px; font-size:13px; line-height:1.55; } .official-hotspot-head > a { margin-bottom:2px; } .official-hotspot-hero { grid-template-columns:minmax(0,1fr) minmax(240px,320px); gap:14px; margin:16px 0 12px; } .official-hotspot-hero > div:first-child { min-height:118px; padding:18px 20px; } .official-hotspot-hero h2 { max-width:640px; font-size:24px; } .official-hotspot-hero p { margin-top:8px; max-width:680px; font-size:13px; line-height:1.55; } .official-hotspot-steps { margin-top:14px; } .official-hotspot-steps b { min-height:24px; padding:5px 9px; } .official-hotspot-hero .official-templates-summary article { min-height:52px; padding:12px 16px; } .official-hotspot-hero .official-templates-summary strong { min-width:44px; font-size:24px; } .official-hotspot-toolbar { top:0; margin:12px 0 14px; padding:8px; } .official-hotspot-toolbar label { min-height:42px; } .official-hotspot-layout { grid-template-columns:minmax(220px,270px) minmax(0,1fr); gap:16px; } .official-hotspot-rail { top:70px; max-height:calc(100vh - 96px); overflow:auto; } .official-hotspot-rail-title { position:sticky; top:0; z-index:1; background:#101115; } .official-hotspot-rail button { min-height:34px; } .official-hotspot-recent .official-template-section-title { margin-bottom:8px; padding-bottom:9px; } .official-hotspot-recent > div:last-child { grid-template-columns:repeat(2,minmax(0,1fr)); } .official-hotspot-card { min-height:168px; padding:16px; } .official-hotspot-card:nth-child(n+3) { min-height:132px; } .official-hotspot-card strong { margin-top:4px; font-size:16px; line-height:1.34; } .official-hotspot-card p { margin-top:6px; -webkit-line-clamp:3; font-size:12px; line-height:1.55; } .official-hotspot-card small { margin-top:8px; } .official-hotspot-topic > header { min-height:68px; padding:14px 18px; } .official-hotspot-topic h2 { font-size:20px; } .official-template-issue-list { padding:0 18px 14px; } .official-template-issue-list section { padding-top:14px; } .official-template-issue-list h3 { font-size:15px; } .official-hotspot-row { padding:12px 0; } .official-hotspot-row p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } body.desktop-light .official-hotspot-rail-title { background:#fff; } @media (max-width:1120px) { .official-hotspot-recent > div:last-child { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:720px) { .official-templates-shell .official-hotspot-head { min-height:auto; } .official-templates-shell .official-hotspot-head h1 { font-size:30px; } .official-hotspot-hero { margin-top:12px; } .official-hotspot-recent > div:last-child { grid-template-columns:1fr; } } .official-template-content > :first-child { margin-top:0; } body.desktop-light .official-template-content > p { color:#4f5b68; } body.desktop-light .official-template-content > .template-section-heading { border-left-color:#178f83; color:#137f75; } /* Paper hotspot polished pass: make latest entries structured and title-led. */ .official-templates-shell .official-hotspot-head h1 { color:#35d67c; } .official-hotspot-recent { padding:16px; border:1px solid #282a30; border-radius:8px; background:#101115; } .official-hotspot-recent .official-template-section-title { align-items:center; margin:0 0 14px; padding:0 0 12px; } .official-hotspot-recent .official-template-section-title h2 { color:#35d67c; font-size:20px; } .official-hotspot-recent .official-template-section-title span { color:#35d67c; } .official-hotspot-recent > div:last-child { grid-template-columns:1fr 1fr; gap:10px; } .official-hotspot-card, .official-hotspot-card:nth-child(n+3) { min-height:156px; grid-template-columns:36px minmax(0,1fr) 52px; grid-template-rows:1fr; gap:12px; padding:16px; border-color:#292d32; background:#14161a; } .official-hotspot-card:hover { border-color:#35d67c; background:#172019; } .official-hotspot-card .official-template-avatar { width:36px; height:36px; border-color:rgba(53,214,124,.42); background:rgba(53,214,124,.1); color:#6ee89b; } .official-hotspot-card div:nth-child(2) > span { color:#35d67c; } .official-hotspot-card strong { display:-webkit-box; min-height:44px; margin-top:5px; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .official-hotspot-card p { min-height:57px; -webkit-line-clamp:3; } .official-hotspot-card small { display:flex; align-items:center; gap:8px; min-height:24px; margin-top:10px; color:#85808a; } .official-hotspot-card small em, .official-hotspot-card small time { display:inline-flex; align-items:center; max-width:100%; min-height:22px; padding:0 8px; border:1px solid #2b3035; border-radius:5px; color:#9d98a2; font-size:11px; font-style:normal; line-height:1; } .official-hotspot-card small em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .official-hotspot-card > b { grid-column:3; align-self:center; justify-self:end; margin:0; color:#35d67c; } body.desktop-light .official-templates-shell .official-hotspot-head h1, body.desktop-light .official-hotspot-recent .official-template-section-title h2 { color:#139452; } body.desktop-light .official-hotspot-recent, body.desktop-light .official-hotspot-card, body.desktop-light .official-hotspot-card:nth-child(n+3) { border-color:#dce3ea; background:#fff; } body.desktop-light .official-hotspot-card:hover { border-color:#139452; background:#f4fbf7; } body.desktop-light .official-hotspot-card .official-template-avatar { border-color:#bce7cf; background:#edf9f1; color:#139452; } body.desktop-light .official-hotspot-card small em, body.desktop-light .official-hotspot-card small time { border-color:#dce3ea; color:#687382; background:#f7f9fb; } @media (max-width:720px) { .official-hotspot-recent { padding:12px; } .official-hotspot-card, .official-hotspot-card:nth-child(n+3) { grid-template-columns:36px minmax(0,1fr); } .official-hotspot-card > b { grid-column:2; justify-self:start; margin-top:4px; } } body.desktop-light .official-template-content > .template-subsection-heading { color:#376f98; } /* Hotspot detail contrast pass: stronger green hierarchy and clearer reading panels. */ .official-template-detail-head h1 { color:#35d67c; } .official-template-detail-head > div > span { color:#35d67c; } .official-template-reader { gap:24px; } .official-template-reader aside { border-color:#31373b; background: linear-gradient(180deg,rgba(53,214,124,.09),rgba(20,21,25,0) 46%), #14161a; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); } .official-template-reader aside span { color:#6ddf97; } .official-template-reader aside strong { color:#f3f5f2; } .official-template-reader > section { border-color:#33373d; background:#15171b; box-shadow:0 18px 38px rgba(0,0,0,.22); } .official-template-reader-title { padding:30px 34px; border-bottom-color:#30363b; background: linear-gradient(90deg,rgba(53,214,124,.16),rgba(53,214,124,.045) 46%,rgba(20,22,25,0)), #18201b; } .official-template-reader-title small { color:#7ff0a5; } .official-template-reader-title h2 { color:#ffffff; } .official-template-content { background: linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 180px), #111217; } .official-template-content > p { color:#d4d7dd; } .official-template-content > .template-section-heading { margin:38px 0 18px; padding:12px 16px; border-left:4px solid #35d67c; border-radius:0 6px 6px 0; background:linear-gradient(90deg,rgba(53,214,124,.18),rgba(53,214,124,.055)); color:#86f0a9; } .official-template-content > .template-subsection-heading { color:#f0f4ee; } body.desktop-light .official-template-detail-head h1, body.desktop-light .official-template-detail-head > div > span { color:#139452; } body.desktop-light .official-template-reader aside, body.desktop-light .official-template-reader > section { border-color:#d5dee7; background:#fff; box-shadow:0 16px 34px rgba(37,50,64,.08); } body.desktop-light .official-template-reader-title { border-bottom-color:#dce3ea; background:linear-gradient(90deg,#eaf8ef,#fff); } body.desktop-light .official-template-reader-title small, body.desktop-light .official-template-reader aside span { color:#139452; } body.desktop-light .official-template-content { background:#fbfcfd; } body.desktop-light .official-template-content > .template-section-heading { border-left-color:#139452; background:linear-gradient(90deg,#e7f7ec,#f8fcfa); color:#139452; } body.desktop-light .official-template-content > .template-subsection-heading { color:#263241; }/* Native exam/detail pages: prevent dark-mode text nodes from rendering as black chips. */ body.desktop-dark:is(.route-exams,.route-tool-page):not(.route-qa):not(.route-grade) #app :is(h1,h2,h3,h4,p,span,strong,b,small,em,mark,label)[style*="background"], body.desktop-dark:is(.route-exams,.route-tool-page):not(.route-qa):not(.route-grade) #app :is(h1,h2,h3,h4,p,span,strong,b,small,em,mark,label)[style*="linear-gradient"], body.desktop-dark:is(.route-exams,.route-tool-page):not(.route-qa):not(.route-grade) #app :is(button,a,[role="button"]) > :is(span,strong,b,small,em,mark){ background:transparent !important; background-color:transparent !important; background-image:none !important; box-shadow:none !important; }body.desktop-dark:is(.route-exams,.route-tool-page):not(.route-qa):not(.route-grade) #app :is(button,a,[role="button"]):is([style*="background"],[style*="linear-gradient"]){ box-shadow:none !important; } /* History exam analysis pages: brighter hierarchy for topic and school drilldowns. */ body.desktop-dark.route-history-analysis { --history-canvas:#07090c; --history-panel:#12161d; --history-panel-strong:#171d25; --history-line:#2f3b48; --history-text:#f3f8f8; --history-muted:#a8b4bf; --history-accent:#36e0c3; --history-accent-2:#74f08c; --history-warm:#f2b866; } body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app { background:var(--history-canvas) !important; } body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen { max-width:1180px !important; padding:48px 36px 92px !important; background: radial-gradient(circle at 18% 4%,rgba(54,224,195,.14),transparent 28%), linear-gradient(180deg,#080b0f 0%,#07090c 48%,#07090c 100%) !important; color:var(--history-text) !important; } body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen > div:first-child { min-height:126px !important; margin-bottom:26px !important; padding:0 0 30px !important; border-bottom:1px solid var(--history-line) !important; background:transparent !important; } body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen > div:first-child :is(h1,h2,p,span,strong,b,small) { background:transparent !important; background-image:none !important; } body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen > div:first-child :is(h1,h2,strong,[style*="font-size: 24"],[style*="font-size:24"]) { color:var(--history-accent) !important; -webkit-text-fill-color:var(--history-accent) !important; text-shadow:0 0 22px rgba(54,224,195,.18) !important; } body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen > div:first-child :is(p,span,small) { color:var(--history-muted) !important; } body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app button:is([style*="width: 38"],[style*="width:38"],[style*="width: 40"],[style*="width:40"]) { border:1px solid var(--history-line) !important; background:#121821 !important; color:var(--history-text) !important; } body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 12px 14px"], body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding:12px 14px"], body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 12px 16px"], body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding:12px 16px"], body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px"], body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding:16px"] { border-color:var(--history-line) !important; background:linear-gradient(180deg,var(--history-panel-strong),var(--history-panel)) !important; box-shadow:0 14px 34px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04) !important; } body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 12px 14px"]:hover, body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 12px 16px"]:hover, body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 16px"]:hover { border-color:rgba(54,224,195,.58) !important; background:#18232a !important; } body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen :is(h1,h2,h3,strong,b,[style*="font-weight: 700"],[style*="font-weight:700"]) { color:var(--history-text) !important; -webkit-text-fill-color:var(--history-text) !important; } body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen :is(p,span,small,label,em) { color:var(--history-muted) !important; } body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="font-size: 30"], body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="font-size:30"], body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="font-size: 24"], body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="font-size:24"] { color:var(--history-accent) !important; -webkit-text-fill-color:var(--history-accent) !important; } body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="background: linear-gradient"], body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="background:linear-gradient"] { background-image:linear-gradient(135deg,var(--history-accent),var(--history-accent-2)) !important; } body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen button[style*="linear-gradient"], body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [role="button"][style*="linear-gradient"] { color:#07110f !important; font-weight:800 !important; } body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 3px 10px"], body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding:3px 10px"], body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding: 2px 6px"], body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="padding:2px 6px"] { border:1px solid rgba(54,224,195,.24) !important; background:rgba(54,224,195,.1) !important; color:#a5ffec !important; } body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="height: 1px"], body.desktop-dark.route-history-analysis:not(.route-qa):not(.route-grade) #app .min-h-screen [style*="height:1px"] { background:linear-gradient(90deg,rgba(54,224,195,.4),rgba(54,224,195,0)) !important; } /* Random drill is a compact desktop form; keep its mobile-first inline colors theme-safe. */ @media (min-width:981px) { body.route-exam-drill #app .min-h-screen { max-width:none !important; padding:30px var(--desktop-page-gutter,64px) 72px !important; } body.route-exam-drill #app .min-h-screen > .px-4.flex.items-center:first-child { min-height:82px !important; margin:0 0 24px !important; padding:0 0 20px !important; border-bottom:1px solid var(--shell-line) !important; box-sizing:border-box; } body.route-exam-drill #app .min-h-screen > .px-4.flex.items-center:first-child > button:first-child { width:38px !important; height:38px !important; min-height:38px !important; border:1px solid var(--shell-line) !important; border-radius:4px !important; background:var(--shell-surface) !important; box-shadow:none !important; } body.route-exam-drill #app .min-h-screen > .px-4.flex.items-center:first-child > button:first-child [class*="i-mdi"] { color:var(--shell-text) !important; } body.route-exam-drill #app .min-h-screen > .px-4.flex.items-center:first-child p:first-child { color:var(--shell-text) !important; font-size:22px !important; font-weight:750 !important; } body.route-exam-drill #app .min-h-screen > .px-4.flex.flex-col { width:100% !important; max-width:none !important; gap:14px !important; padding:0 !important; } body.route-exam-drill #app .min-h-screen > .px-4.flex.flex-col > div[style*="padding: 20px 16px"] { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(280px,.46fr); gap:18px 24px !important; width:100%; margin:0 !important; padding:24px 28px !important; border:1px solid var(--shell-line) !important; border-radius:6px !important; background:var(--shell-surface) !important; box-shadow:none !important; box-sizing:border-box; } body.route-exam-drill #app .min-h-screen > .px-4.flex.flex-col > div[style*="padding: 20px 16px"] > p:first-child { grid-column:1 / -1; margin:0 !important; color:var(--shell-text) !important; font-size:17px !important; } body.route-exam-drill #app .min-h-screen > .px-4.flex.flex-col > div[style*="padding: 20px 16px"] > div { min-width:0; margin:0 !important; } body.route-exam-drill #app .min-h-screen > .px-4.flex.flex-col > div[style*="padding: 20px 16px"] > div > p { color:var(--shell-muted) !important; font-size:12px !important; } body.route-exam-drill #app .min-h-screen > .px-4.flex.flex-col > div[style*="padding: 20px 16px"] > div:first-of-type > div { min-height:46px; padding:0 14px !important; border:1px solid var(--shell-line); border-radius:4px !important; background:var(--shell-strong) !important; box-sizing:border-box; cursor:pointer; } body.route-exam-drill #app .min-h-screen > .px-4.flex.flex-col > div[style*="padding: 20px 16px"] > div:first-of-type > div span { color:var(--shell-text) !important; } body.route-exam-drill #app .min-h-screen > .px-4.flex.flex-col > div[style*="padding: 20px 16px"] > div:nth-of-type(2) > div { min-height:46px; } body.route-exam-drill #app .min-h-screen > .px-4.flex.flex-col > div[style*="padding: 20px 16px"] > div:nth-of-type(2) > div > span { color:var(--shell-text) !important; font-size:24px !important; } body.route-exam-drill #app .min-h-screen > .px-4.flex.flex-col > div[style*="padding: 20px 16px"] > div:nth-of-type(2) button { width:38px !important; height:38px !important; min-height:38px !important; border:1px solid var(--shell-line) !important; border-radius:4px !important; background:var(--shell-strong) !important; } body.route-exam-drill #app .min-h-screen > .px-4.flex.flex-col > div[style*="padding: 20px 16px"] > div:nth-of-type(2) button [class*="i-mdi"] { color:var(--shell-accent) !important; } body.route-exam-drill #app .min-h-screen > .px-4.flex.flex-col > div[style*="padding: 20px 16px"] > button:last-child { grid-column:1 / -1; justify-self:end; width:220px !important; min-height:46px !important; border:1px solid #178f83 !important; border-radius:4px !important; background:#178f83 !important; color:#fff !important; } body.route-exam-drill #app .min-h-screen > .px-4.flex.flex-col > div[style*="padding: 20px 16px"] > button:last-child:hover { border-color:#35d6c5 !important; background:#1aa597 !important; } body.route-exam-drill #app .min-h-screen > .px-4.flex.flex-col > div[style*="padding: 20px 16px"] > button:last-child * { color:#fff !important; } } body.desktop-dark.route-exam-drill:not(.route-qa):not(.route-grade) #app .min-h-screen > div[style*="position: fixed"] > div { border:1px solid #343842 !important; border-bottom:0 !important; background:#15171c !important; color:#e2e5e9 !important; } body.desktop-dark.route-exam-drill:not(.route-qa):not(.route-grade) #app .min-h-screen > div[style*="position: fixed"] > div > div:first-child { border-color:#343842 !important; } body.desktop-dark.route-exam-drill:not(.route-qa):not(.route-grade) #app .min-h-screen > div[style*="position: fixed"] span { color:#d8dce2 !important; } body.desktop-dark.route-exam-drill:not(.route-qa):not(.route-grade) #app .min-h-screen > div[style*="position: fixed"] > div > div:last-child > div:hover { background:#1c2927 !important; } @media (max-width:980px) { body.route-exam-drill #app .min-h-screen > .px-4.flex.flex-col > div[style*="padding: 20px 16px"] { display:block !important; } body.route-exam-drill #app .min-h-screen > .px-4.flex.flex-col > div[style*="padding: 20px 16px"] > * + * { margin-top:16px !important; } body.route-exam-drill #app .min-h-screen > .px-4.flex.flex-col > div[style*="padding: 20px 16px"] > button:last-child { width:100% !important; } } /* Yibentong overview: restore the knowledge puzzle and keep text legible in both themes. */ #desktop-yibentong-puzzle { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:52px; margin-top:12px; padding:10px 12px; border:1px solid var(--shell-line); border-radius:5px; background:var(--shell-surface); color:var(--shell-text); text-decoration:none; box-sizing:border-box; } #desktop-yibentong-puzzle:hover { border-color:#35d6c5; background:rgba(53,214,197,.06); } #desktop-yibentong-puzzle > i { display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(53,214,197,.42); border-radius:4px; color:#35d6c5; font-size:16px; } #desktop-yibentong-puzzle > span { min-width:0; } #desktop-yibentong-puzzle strong,#desktop-yibentong-puzzle small { display:block; } #desktop-yibentong-puzzle strong { color:var(--shell-text); font-size:13px; line-height:1.25; } #desktop-yibentong-puzzle small { margin-top:3px; color:var(--shell-muted); font-size:11px; line-height:1.35; } #desktop-yibentong-puzzle > b { color:#35d6c5; font-size:19px; font-weight:500; } @media (min-width:981px) { body.route-yibentong-anki #app .min-h-screen > div:first-child > .flex.items-center.gap-3 > .flex.items-end.gap-2 > p { font-size:27px !important; } body.route-yibentong-anki #app .min-h-screen > div:first-child > .flex.items-center.gap-3 > .flex.items-end.gap-2 > div { margin:0 0 3px !important; padding:3px 7px !important; border:1px solid rgba(53,214,197,.45) !important; border-radius:3px !important; background:transparent !important; color:#35d6c5 !important; font-size:10px !important; line-height:1.2 !important; } body.route-yibentong-anki #app .min-h-screen > div:first-child > .flex.items-center.gap-3 > .flex.items-end.gap-2 > div * { color:inherit !important; } body.route-yibentong-anki #desktop-yibentong-puzzle { margin-right:10px; margin-left:10px; } } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app .min-h-screen > div:first-child > .flex.items-center.gap-3 > .flex.items-end.gap-2 > div { background:#132321 !important; color:#46dfcf !important; } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app :is(button,taro-button-core).rounded-full { border-color:#353b45 !important; background:#1a1d23 !important; } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app :is(button,taro-button-core).rounded-full :is(span,div) { color:#bfc6d0 !important; } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app :is(button,taro-button-core).rounded-full[style*="background: rgb(123, 92, 246)"], body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app :is(button,taro-button-core).rounded-full[style*="background:rgb(123,92,246)"] { border-color:#178f83 !important; background:#178f83 !important; } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app :is(button,taro-button-core).rounded-full[style*="background: rgb(123, 92, 246)"] :is(span,div), body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app :is(button,taro-button-core).rounded-full[style*="background:rgb(123,92,246)"] :is(span,div) { color:#fff !important; } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app :is(button,taro-button-core).rounded-lg[style*="linear-gradient"] { border:1px solid #249f93 !important; background:#178f83 !important; } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app :is(button,taro-button-core).rounded-lg[style*="linear-gradient"] :is(span,div,[class*="i-mdi"]) { color:#fff !important; } body.desktop-dark.route-yibentong-anki #desktop-yibentong-puzzle { border-color:#2f4445; background:#131a1d; } body.desktop-dark.route-yibentong-anki #desktop-yibentong-puzzle strong { color:#e4e8eb; } body.desktop-dark.route-yibentong-anki #desktop-yibentong-puzzle small { color:#9ca6b0; } body.desktop-light.route-yibentong-anki #app .min-h-screen > div:first-child > .flex.items-center.gap-3 > .flex.items-end.gap-2 > div { border-color:#67bdb4 !important; background:#edf8f6 !important; color:#137f75 !important; } body.desktop-light.route-yibentong-anki #app :is(button,taro-button-core).rounded-full { border-color:#d7e0e7 !important; background:#fff !important; } body.desktop-light.route-yibentong-anki #app :is(button,taro-button-core).rounded-full :is(span,div) { color:#4e5b68 !important; } body.desktop-light.route-yibentong-anki #app :is(button,taro-button-core).rounded-full[style*="background: rgb(123, 92, 246)"], body.desktop-light.route-yibentong-anki #app :is(button,taro-button-core).rounded-full[style*="background:rgb(123,92,246)"], body.desktop-light.route-yibentong-anki #app :is(button,taro-button-core).rounded-lg[style*="linear-gradient"] { border-color:#178f83 !important; background:#178f83 !important; } body.desktop-light.route-yibentong-anki #app :is(button,taro-button-core).rounded-full[style*="background: rgb(123, 92, 246)"] :is(span,div), body.desktop-light.route-yibentong-anki #app :is(button,taro-button-core).rounded-full[style*="background:rgb(123,92,246)"] :is(span,div), body.desktop-light.route-yibentong-anki #app :is(button,taro-button-core).rounded-lg[style*="linear-gradient"] :is(span,div,[class*="i-mdi"]) { color:#fff !important; } /* Yibentong final desktop pass: keep the page quiet, aligned, and readable. */ @media (min-width:981px) { body.route-has-context:not(.context-collapsed).route-yibentong-anki #app, body.route-has-context:not(.context-collapsed).route-learning-card-detail #app { width:calc(100vw - var(--desktop-right-width)) !important; max-width:calc(100vw - var(--desktop-right-width)) !important; } body.route-yibentong-anki #app .min-h-screen { width:min(1080px,calc(100% - 56px)) !important; max-width:1080px !important; padding-top:30px !important; } body.route-yibentong-anki #app .min-h-screen > div:first-child { display:grid !important; grid-template-columns:auto minmax(0,1fr) minmax(220px,280px); align-items:center; column-gap:14px; row-gap:12px; padding:0 0 22px !important; } body.route-yibentong-anki #app .min-h-screen > div:first-child > button:first-child { grid-column:1; grid-row:1; } body.route-yibentong-anki #app .min-h-screen > div:first-child > .flex.items-center.gap-3 { grid-column:2; min-width:0; } body.route-yibentong-anki #app .min-h-screen > div:first-child > p { grid-column:2; margin-top:-8px !important; color:var(--shell-muted) !important; font-size:13px !important; } body.route-yibentong-anki #desktop-yibentong-puzzle { grid-column:3; grid-row:1 / span 2; align-self:center; margin:0 !important; } body.route-yibentong-anki #app .min-h-screen > div:first-child > .mt-3 { grid-column:1 / -1; display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 !important; min-height:68px !important; margin-top:12px !important; padding:12px 0 !important; } body.route-yibentong-anki #app .min-h-screen > div:first-child > .mt-3 > * { justify-content:center !important; min-width:0; border-right:1px solid var(--shell-line); } body.route-yibentong-anki #app .min-h-screen > div:first-child > .mt-3 > :last-child { border-right:0; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col { margin-top:12px !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:first-child > p, body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:nth-child(2) > div > p:first-child, body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:nth-child(n+3) > .flex.items-center.gap-3 p:first-child { color:#39d6c7 !important; font-size:12px !important; font-weight:700 !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:first-child > .flex.gap-2 > :is(button,taro-button-core) { min-height:78px !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:first-child > .flex.gap-2 > :is(button,taro-button-core) :is(p,span,div) { font-size:13px !important; } body.route-yibentong-anki #app :is(button,taro-button-core).rounded-full { min-width:0 !important; height:34px !important; padding:0 13px !important; font-size:12px !important; font-weight:600 !important; } body.route-yibentong-anki #app :is(button,taro-button-core).rounded-lg[style*="linear-gradient"] { height:42px !important; min-height:42px !important; padding:0 18px !important; border-radius:5px !important; font-size:13px !important; font-weight:700 !important; } } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app :is(p,span,strong,b,button,taro-button-core,div:not([class*="i-mdi"])) { -webkit-text-fill-color:currentColor !important; } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app :is(p,span,strong,b) { color:#dfe4e8 !important; } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app .min-h-screen > div:first-child > p, body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app .min-h-screen small { color:#98a3ad !important; } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app :is(button,taro-button-core).rounded-full { border-color:#303640 !important; background:#181b21 !important; color:#c7ced6 !important; } body.desktop-dark.route-yibentong-anki:not(.route-qa):not(.route-grade) #app :is(button,taro-button-core).rounded-full[style*="background"] { border-color:#178f83 !important; background:#178f83 !important; color:#fff !important; } body.desktop-light.route-yibentong-anki #app :is(p,span,strong,b) { color:#2f3b46 !important; } body.learning-card-developer #app :is([aria-disabled="true"],[data-locked="true"],[disabled]) { cursor:pointer !important; pointer-events:auto !important; opacity:1 !important; filter:none !important; } body.learning-card-developer #app :is(.locked,.is-locked,.membership-lock,.paywall,.vip-mask,.lock-mask) { display:none !important; } @media (min-width:981px) { body.route-yibentong-anki #app .min-h-screen { --yt-line:rgba(137,148,162,.22); --yt-panel:#111318; --yt-panel-soft:#151820; --yt-text:#eef2f5; --yt-muted:#9aa4af; --yt-accent:#35d6c5; width:min(1040px,calc(100% - 48px)) !important; max-width:1040px !important; padding-top:28px !important; color:var(--yt-text) !important; } body.route-yibentong-anki #app .min-h-screen > div:first-child { display:grid !important; grid-template-columns:44px minmax(0,1fr) 236px !important; align-items:center !important; gap:10px 12px !important; padding:0 0 18px !important; border-bottom:1px solid var(--yt-line) !important; } body.route-yibentong-anki #app .min-h-screen > div:first-child > button:first-child { width:36px !important; height:36px !important; border-radius:5px !important; border:1px solid var(--yt-line) !important; background:var(--yt-panel-soft) !important; } body.route-yibentong-anki #app .min-h-screen > div:first-child > .flex.items-center.gap-3 { grid-column:2 !important; min-height:0 !important; padding:0 !important; } body.route-yibentong-anki #app .min-h-screen > div:first-child > p { grid-column:2 !important; margin:0 !important; font-size:12px !important; line-height:1.35 !important; } body.route-yibentong-anki #desktop-yibentong-puzzle { grid-column:3 !important; grid-row:1 / span 2 !important; min-height:46px !important; padding:8px 10px !important; background:var(--yt-panel-soft) !important; } body.route-yibentong-anki #app .min-h-screen > div:first-child > .mt-3 { grid-column:1 / -1 !important; display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; align-items:center !important; min-height:66px !important; margin:16px 0 0 !important; padding:0 !important; overflow:hidden !important; border:1px solid var(--yt-line) !important; border-radius:6px !important; background:var(--yt-panel) !important; } body.route-yibentong-anki #app .min-h-screen > div:first-child > .mt-3 > * { min-height:66px !important; padding:0 10px !important; border-right:1px solid var(--yt-line) !important; } body.route-yibentong-anki #app .min-h-screen > div:first-child > .mt-3 > :last-child { border-right:0 !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col { gap:14px !important; margin-top:18px !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div { padding:0 !important; border:0 !important; background:transparent !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:first-child { display:grid !important; gap:8px !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:first-child > p, body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:nth-child(2) > div > p:first-child { margin:0 !important; padding:0 2px !important; border:0 !important; color:var(--yt-accent) !important; font-size:12px !important; line-height:1.35 !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:first-child > .flex.gap-2 { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:0 !important; overflow:hidden !important; border:1px solid var(--yt-line) !important; border-radius:6px !important; background:var(--yt-panel) !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:first-child > .flex.gap-2 > :is(button,taro-button-core) { min-height:82px !important; border:0 !important; border-right:1px solid var(--yt-line) !important; background:transparent !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:first-child > .flex.gap-2 > :last-child { border-right:0 !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:nth-child(2) { display:grid !important; gap:10px !important; padding:14px 0 !important; border-top:1px solid var(--yt-line) !important; border-bottom:1px solid var(--yt-line) !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:nth-child(2) > div { display:grid !important; grid-template-columns:72px minmax(0,1fr) !important; align-items:center !important; gap:12px !important; padding:0 !important; border:0 !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:nth-child(2) > div > .flex, body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:nth-child(2) > div > div:last-child { display:flex !important; flex-wrap:wrap !important; gap:8px !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:nth-child(2) [style*="background: rgb(26, 19, 48)"], body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:nth-child(2) [style*="background-color: rgb(26, 19, 48)"], body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:nth-child(2) [style*="background: rgba(123, 92, 246"] { display:none !important; } body.route-yibentong-anki #app :is(button,taro-button-core).rounded-full { height:32px !important; min-height:32px !important; border-radius:4px !important; border:1px solid var(--yt-line) !important; background:var(--yt-panel-soft) !important; color:#cbd3dc !important; box-shadow:none !important; } body.route-yibentong-anki #app :is(button,taro-button-core).rounded-full[style*="background"] { border-color:#168f84 !important; background:#168f84 !important; color:#fff !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:nth-child(n+3) { padding:16px 12px !important; border:1px solid var(--yt-line) !important; border-radius:6px !important; background:var(--yt-panel) !important; } body.route-yibentong-anki #app .min-h-screen > .flex.flex-col > div:nth-child(n+3) > .flex.items-center.gap-3 { min-height:58px !important; padding:0 !important; } body.route-yibentong-anki #app :is(p,span,strong,b,button,taro-button-core,div) { letter-spacing:0 !important; text-shadow:none !important; } } body.desktop-light.route-yibentong-anki #app .min-h-screen { --yt-line:#d9e2ea; --yt-panel:#fff; --yt-panel-soft:#f3f7f8; --yt-text:#25313c; --yt-muted:#697684; --yt-accent:#168f84; background:#f7f9fb !important; } body.desktop-light.route-yibentong-anki #app :is(button,taro-button-core).rounded-full { color:#52616f !important; } /* Learning card system redesign: restrained desktop UI, not all-green controls. */ @media (min-width:981px) { body:is(.route-yibentong-anki,.route-learning-card-detail) #app { background:#090a0d !important; } body:is(.route-yibentong-anki,.route-learning-card-detail) #app .min-h-screen { --lc-bg:#090a0d; --lc-panel:#111318; --lc-panel-2:#171a21; --lc-line:#2b313a; --lc-text:#eef1f4; --lc-muted:#98a2ae; --lc-soft:#c6ced7; --lc-accent:#25c7b7; --lc-blue:#70a7ff; --lc-amber:#d5a24e; width:min(1060px,calc(100% - 56px)) !important; max-width:1060px !important; margin:0 auto !important; padding:30px 0 72px !important; background:var(--lc-bg) !important; color:var(--lc-text) !important; font-size:14px !important; line-height:1.55 !important; } body.route-yibentong-anki #app .desktop-yibentong-redesign > .desktop-yibentong-hero { display:grid !important; grid-template-columns:40px minmax(0,1fr) 230px !important; gap:10px 14px !important; align-items:center !important; margin:0 0 18px !important; padding:0 0 18px !important; border-bottom:1px solid var(--lc-line) !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > button:first-child { width:36px !important; height:36px !important; min-height:36px !important; padding:0 !important; border:1px solid var(--lc-line) !important; border-radius:6px !important; background:var(--lc-panel-2) !important; color:var(--lc-accent) !important; box-shadow:none !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > .flex.items-center.gap-3, body.route-yibentong-anki #app .desktop-yibentong-hero > p { grid-column:2 !important; min-width:0 !important; margin:0 !important; padding:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > p { color:var(--lc-muted) !important; font-size:12px !important; } body.route-yibentong-anki #desktop-yibentong-puzzle { grid-column:3 !important; grid-row:1 / span 2 !important; min-height:48px !important; margin:0 !important; border-color:var(--lc-line) !important; background:var(--lc-panel) !important; } body.route-yibentong-anki #app .desktop-yibentong-stats { grid-column:1 / -1 !important; display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; min-height:68px !important; margin:14px 0 0 !important; padding:0 !important; overflow:hidden !important; border:1px solid var(--lc-line) !important; border-radius:8px !important; background:var(--lc-panel) !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > * { min-height:68px !important; border-right:1px solid var(--lc-line) !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > :last-child { border-right:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-workspace { display:grid !important; gap:14px !important; margin:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-quick, body.route-yibentong-anki #app .desktop-yibentong-filters, body.route-yibentong-anki #app .desktop-yibentong-volume { margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; } body.route-yibentong-anki #app .desktop-yibentong-quick { display:grid !important; gap:8px !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; border:0 !important; background:transparent !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 > :is(button,taro-button-core) { min-height:76px !important; border:1px solid var(--lc-line) !important; border-radius:7px !important; background:var(--lc-panel) !important; color:var(--lc-soft) !important; box-shadow:none !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 > :is(button,taro-button-core):first-child { border-color:rgba(37,199,183,.58) !important; background:#10211f !important; } body.route-yibentong-anki #app .desktop-yibentong-filters { display:grid !important; gap:10px !important; padding:14px !important; border:1px solid var(--lc-line) !important; border-radius:8px !important; background:var(--lc-panel) !important; } body.route-yibentong-anki #app .desktop-yibentong-filters > div { display:grid !important; grid-template-columns:72px minmax(0,1fr) !important; align-items:center !important; gap:12px !important; padding:0 !important; border:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-filters > div > :last-child { display:flex !important; flex-wrap:wrap !important; gap:8px !important; } body.route-yibentong-anki #app .desktop-yibentong-filters [style*="background: rgb(26, 19, 48)"], body.route-yibentong-anki #app .desktop-yibentong-filters [style*="background-color: rgb(26, 19, 48)"], body.route-yibentong-anki #app .desktop-yibentong-filters [style*="background: rgba(123, 92, 246"] { display:none !important; } body.route-yibentong-anki #app .desktop-yibentong-volume { padding:15px 14px !important; border:1px solid var(--lc-line) !important; border-radius:8px !important; background:var(--lc-panel) !important; } body.route-yibentong-anki #app .desktop-yibentong-volume > .flex.items-center.gap-3 { min-height:54px !important; padding:0 !important; } body:is(.route-yibentong-anki,.route-learning-card-detail) #app :is(button,taro-button-core,[role="button"],a) { border-radius:6px !important; box-shadow:none !important; } body:is(.route-yibentong-anki,.route-learning-card-detail) #app :is(button,taro-button-core).rounded-full { min-height:30px !important; height:30px !important; padding:0 12px !important; border:1px solid var(--lc-line) !important; background:var(--lc-panel-2) !important; color:var(--lc-soft) !important; font-size:12px !important; font-weight:600 !important; } body:is(.route-yibentong-anki,.route-learning-card-detail) #app :is(button,taro-button-core).rounded-full[style*="background"] { border-color:rgba(37,199,183,.62) !important; background:#153532 !important; color:#d9fffb !important; } body:is(.route-yibentong-anki,.route-learning-card-detail) #app :is(button,taro-button-core)[style*="linear-gradient"] { border:1px solid rgba(37,199,183,.65) !important; background:#168f84 !important; background-image:none !important; color:#fff !important; } body.route-learning-card-detail #app .desktop-card-reader-redesign { display:grid !important; gap:16px !important; } body.route-learning-card-detail #app .desktop-card-reader-head { margin:0 !important; padding:0 0 16px !important; border-bottom:1px solid var(--lc-line) !important; background:transparent !important; } body.route-learning-card-detail #app .desktop-card-reader-panel, body.route-learning-card-detail #app .desktop-card-reader-content { margin:0 !important; padding:18px !important; border:1px solid var(--lc-line) !important; border-radius:8px !important; background:var(--lc-panel) !important; box-shadow:none !important; } body.route-learning-card-detail #app :is(.glass-card,.glass-card-frosted,.bg-card,.rounded-xl,.rounded-2xl) { border-color:var(--lc-line) !important; background:var(--lc-panel) !important; box-shadow:none !important; } body:is(.route-yibentong-anki,.route-learning-card-detail) #app :is(p,span,strong,b,div:not([class*="i-mdi"])) { -webkit-text-fill-color:currentColor !important; color:inherit; letter-spacing:0 !important; text-shadow:none !important; } } body.desktop-light:is(.route-yibentong-anki,.route-learning-card-detail) #app { background:#f7f9fb !important; } body.desktop-light:is(.route-yibentong-anki,.route-learning-card-detail) #app .min-h-screen { --lc-bg:#f7f9fb; --lc-panel:#fff; --lc-panel-2:#f2f6f8; --lc-line:#d8e1e9; --lc-text:#26313b; --lc-muted:#697684; --lc-soft:#435260; --lc-accent:#168f84; color:var(--lc-text) !important; } /* Profile workspace polish: clearer entry points and less mixed hierarchy. */ body.route-profile .profile-page-shell { width:min(1120px,calc(100% - 56px)); padding-top:34px; } body.route-profile .profile-page-head { min-height:96px; padding:0 0 22px; border-color:var(--profile-line); } body.route-profile .profile-person { display:flex; align-items:center; gap:16px; min-width:0; } body.route-profile .profile-person-avatar { width:54px; height:54px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(37,199,183,.42); border-radius:8px; background:#10211f; color:var(--profile-accent); font-size:24px; font-weight:800; } body.route-profile .profile-person small, body.route-profile .profile-section-head span { color:var(--profile-accent); font-size:10px; font-weight:800; letter-spacing:.06em; } body.route-profile .profile-person h1 { margin:5px 0 0; color:var(--profile-text); font-size:28px; line-height:1.15; } body.route-profile .profile-person p { margin:7px 0 0; color:var(--profile-muted); font-size:13px; } body.route-profile .profile-quick-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:12px 0 24px; } body.route-profile .profile-workflow-panel { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.9fr); gap:12px; margin:20px 0 12px; } body.route-profile .profile-workflow-primary, body.route-profile .profile-workflow-side { border:1px solid var(--profile-line); border-radius:8px; background:linear-gradient(135deg,rgba(37,199,183,.10),rgba(37,199,183,.025) 58%,transparent),var(--profile-panel); } body.route-profile .profile-workflow-primary { min-height:180px; padding:22px; } body.route-profile .profile-workflow-primary span { color:var(--profile-accent); font-size:11px; font-weight:850; } body.route-profile .profile-workflow-primary h2 { margin:10px 0 0; color:var(--profile-text); font-size:24px; line-height:1.25; } body.route-profile .profile-workflow-primary p { max-width:620px; margin:10px 0 0; color:var(--profile-muted); font-size:13px; line-height:1.7; } body.route-profile .profile-workflow-primary div { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; } body.route-profile .profile-workflow-primary a { display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 15px; border:1px solid rgba(37,199,183,.42); border-radius:6px; background:#168f84; color:#fff; font-size:12px; font-weight:800; text-decoration:none; } body.route-profile .profile-workflow-primary a:not(:first-child) { background:transparent; color:#d7f5f2; } body.route-profile .profile-workflow-side { display:grid; padding:10px; } body.route-profile .profile-workflow-side a { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; min-height:52px; padding:11px 12px; border-bottom:1px solid rgba(128,140,162,.12); color:inherit; text-decoration:none; } body.route-profile .profile-workflow-side a:last-child { border-bottom:0; } body.route-profile .profile-workflow-side strong, body.route-profile .profile-workflow-side span { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.route-profile .profile-workflow-side strong { color:var(--profile-text); font-size:13px; } body.route-profile .profile-workflow-side span { grid-row:2; color:var(--profile-muted); font-size:11px; } body.route-profile .profile-quick-actions a { display:grid; grid-template-columns:36px minmax(0,1fr); gap:4px 12px; align-items:center; min-height:70px; padding:12px; border:1px solid var(--profile-line); border-radius:8px; background:var(--profile-panel); color:inherit; text-decoration:none; } body.route-profile .profile-quick-actions a:hover { border-color:rgba(37,199,183,.56); background:#111d1d; } body.route-profile .profile-quick-actions i { grid-row:1 / span 2; width:32px; height:32px; display:grid; place-items:center; border-radius:7px; background:#173c38; color:var(--profile-accent); font-style:normal; font-weight:800; } body.route-profile .profile-quick-actions strong, body.route-profile .profile-quick-actions span { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.route-profile .profile-quick-actions strong { color:var(--profile-text); font-size:14px; } body.route-profile .profile-quick-actions span { color:var(--profile-muted); font-size:11px; } body.route-profile .profile-dashboard-panel { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr); gap:12px; margin:20px 0 24px; } body.route-profile .profile-dashboard-main, body.route-profile .profile-dashboard-viz { border:1px solid var(--profile-line); border-radius:8px; background:linear-gradient(135deg,rgba(37,199,183,.09),rgba(37,199,183,.02) 62%,transparent),var(--profile-panel); } body.route-profile .profile-dashboard-main { min-height:214px; padding:24px; } body.route-profile .profile-dashboard-main > span { color:var(--profile-accent); font-size:11px; font-weight:850; } body.route-profile .profile-dashboard-main h2 { margin:10px 0 0; color:var(--profile-text); font-size:26px; line-height:1.2; } body.route-profile .profile-dashboard-main p { max-width:680px; margin:10px 0 0; color:var(--profile-muted); font-size:13px; line-height:1.7; } body.route-profile .profile-dashboard-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:22px; } body.route-profile .profile-dashboard-stats a { min-width:0; padding:14px 15px; border:1px solid rgba(128,140,162,.18); border-radius:7px; background:rgba(8,12,15,.35); color:inherit; text-decoration:none; } body.route-profile .profile-dashboard-stats strong, body.route-profile .profile-dashboard-stats span { display:block; } body.route-profile .profile-dashboard-stats strong { color:var(--profile-accent); font-size:26px; line-height:1; } body.route-profile .profile-dashboard-stats span { margin-top:8px; color:var(--profile-muted); font-size:11px; } body.route-profile .profile-dashboard-viz { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:end; gap:10px; min-height:214px; padding:18px 18px 16px; } body.route-profile .profile-dashboard-viz button { display:grid; grid-template-rows:minmax(72px,1fr) auto auto; gap:7px; align-items:end; min-width:0; height:100%; border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; } body.route-profile .profile-dashboard-viz i { display:block; width:100%; min-height:8px; border-radius:4px 4px 2px 2px; background:linear-gradient(180deg,#37d7c8,#168f84); box-shadow:0 8px 18px rgba(37,199,183,.12); } body.route-profile .profile-dashboard-viz strong { color:var(--profile-text); font-size:16px; line-height:1; text-align:center; } body.route-profile .profile-dashboard-viz span { color:var(--profile-muted); font-size:11px; text-align:center; } body.route-profile .profile-archive, body.route-profile .profile-knowledge { margin-top:0; padding:20px 0 0; border-top:1px solid var(--profile-line); } body.route-profile .profile-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; } body.route-profile .profile-section-head h2 { margin:5px 0 0; color:var(--profile-text); font-size:20px; } body.route-profile .profile-section-head p { margin:7px 0 0; color:var(--profile-muted); font-size:12px; } /* Profile archive: restore a comfortable reading size for dense records. */ body.route-profile .profile-head-actions a, body.route-profile .profile-head-actions button { min-height:42px; padding:0 17px; border-color:#405064; background:#111720; color:#d9e3ec; font-size:13px; font-weight:750; line-height:40px; } body.route-profile .profile-head-actions a:first-child { border-color:rgba(37,199,183,.7); background:#10302d; color:#8df1e5; } body.route-profile .profile-archive { padding-top:28px; } body.route-profile .profile-section-head span { font-size:12px; letter-spacing:.08em; } body.route-profile .profile-section-head h2 { font-size:26px; } body.route-profile .profile-section-head p { margin-top:9px; color:#a8b4c1; font-size:14px; line-height:1.6; } body.route-profile .profile-archive-summary { margin-top:20px; } body.route-profile .profile-archive-summary > button { min-height:98px; padding:17px 22px; } body.route-profile .profile-archive-summary strong { font-size:30px; } body.route-profile .profile-archive-summary span { margin-top:8px; color:#a6b1be; font-size:13px; font-weight:650; } body.route-profile .profile-archive-tabs { gap:13px; margin-top:18px; padding:5px; border:1px solid var(--profile-line); border-radius:8px; background:var(--profile-panel); } body.route-profile .profile-archive-tabs button { min-height:36px; padding:0 11px; border-radius:5px; color:#aab6c4; font-size:13px; line-height:36px; } body.route-profile .profile-archive-tabs button.active { border:0; background:#164b46; color:#9cf2e8; } body.route-profile .profile-archive-sync { min-height:36px; color:#a6b2c0; font-size:12px; } body.route-profile .profile-archive-sync.is-done { color:#63cfc2; } body.route-profile .profile-archive-list { max-height:460px; } body.route-profile .profile-archive-row { grid-template-columns:72px minmax(0,1fr) 112px 22px; gap:18px; min-height:82px; padding:14px 12px; } body.route-profile .profile-archive-row > span { color:#54ded0; font-size:13px; font-weight:750; } body.route-profile .profile-archive-list strong { color:#f0f5f9; font-size:16px; line-height:1.35; } body.route-profile .profile-archive-list p { margin-top:6px; color:#a3afbd; font-size:12px; line-height:1.45; } body.route-profile .profile-archive-list time { color:#acb7c4; font-size:12px; font-weight:600; } body.route-profile .profile-archive-row > i { color:#7d8d9d; font-size:17px; } @media (max-width:720px) { body.route-profile .profile-head-actions { width:100%; } body.route-profile .profile-head-actions a, body.route-profile .profile-head-actions button { flex:1; text-align:center; } body.route-profile .profile-section-head h2 { font-size:23px; } body.route-profile .profile-archive-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } body.route-profile .profile-archive-summary > button { min-height:82px; } body.route-profile .profile-archive-row { grid-template-columns:58px minmax(0,1fr) 18px; gap:12px; } body.route-profile .profile-archive-list time { grid-column:2; grid-row:2; text-align:left; } } /* GBC points: a single-focus growth dashboard. */ body.route-points #desktop-points-redesign { --points-ink:#090d12; --points-surface:#101720; --points-surface-2:#141e29; --points-rule:#2b3a4d; --points-text:#f2f7fb; --points-muted:#9baaba; --points-teal:#39dcc8; --points-amber:#ffc45b; } body.route-points #app .desktop-points-workspace { background-color:var(--points-ink) !important; background-image:linear-gradient(rgba(66,86,109,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(66,86,109,.1) 1px,transparent 1px) !important; background-size:38px 38px !important; } body.route-points #desktop-points-redesign #desktop-points-header { min-height:106px !important; margin-bottom:22px !important; padding-bottom:25px !important; border-color:var(--points-rule) !important; } body.route-points #desktop-points-redesign #desktop-points-header > div > span { color:var(--points-teal) !important; font-size:11px !important; font-weight:800 !important; letter-spacing:1.4px !important; } body.route-points #desktop-points-redesign #desktop-points-header h1 { font-size:34px !important; } body.route-points #desktop-points-redesign #desktop-points-header h1 b { padding:5px 9px; border:1px solid rgba(255,196,91,.7); border-radius:3px; color:var(--points-amber); font-size:12px; letter-spacing:1px; } body.route-points #desktop-points-redesign #desktop-points-header p { max-width:none !important; color:var(--points-muted) !important; font-size:14px !important; } body.route-points #desktop-points-redesign #desktop-points-header > a { min-height:40px !important; border-color:#3a4b60 !important; color:#d1dbe4 !important; font-size:13px !important; } body.route-points #desktop-points-redesign .points-dashboard { gap:18px; } body.route-points #desktop-points-redesign .points-focus { display:grid; grid-template-columns:minmax(0,1.2fr) 220px minmax(240px,.65fr); min-height:256px; overflow:hidden; border:1px solid #3b4d62; border-radius:8px; background:var(--points-surface); box-shadow:0 18px 42px rgba(0,0,0,.22); } body.route-points #desktop-points-redesign .points-focus-main { position:relative; padding:30px 34px; border-right:1px solid var(--points-rule); } body.route-points #desktop-points-redesign .points-focus-main:after { content:''; position:absolute; right:-48px; bottom:-48px; width:138px; height:138px; border:1px solid rgba(57,220,200,.3); transform:rotate(45deg); } body.route-points #desktop-points-redesign .points-kicker { position:relative; z-index:1; display:block; color:var(--points-teal); font-size:11px; font-weight:800; letter-spacing:1.3px; } body.route-points #desktop-points-redesign .points-focus-number { position:relative; z-index:1; display:flex; align-items:baseline; gap:12px; margin-top:10px; } body.route-points #desktop-points-redesign .points-focus-number strong { color:var(--points-text); font-size:68px; line-height:1; text-shadow:0 0 20px rgba(57,220,200,.15); } body.route-points #desktop-points-redesign .points-focus-number span { color:#b9c6d2; font-size:15px; font-weight:700; } body.route-points #desktop-points-redesign .points-focus-progress { position:relative; z-index:1; max-width:480px; margin-top:25px; } body.route-points #desktop-points-redesign .points-focus-progress > div { display:flex; justify-content:space-between; gap:14px; color:#a2b1c0; font-size:12px; } body.route-points #desktop-points-redesign .points-focus-progress b { color:var(--points-teal); } body.route-points #desktop-points-redesign .points-focus-progress i { display:block; height:8px; margin-top:9px; overflow:hidden; background:#273548; } body.route-points #desktop-points-redesign .points-focus-progress em { display:block; height:100%; background:var(--points-teal); box-shadow:0 0 12px rgba(57,220,200,.6); } body.route-points #desktop-points-redesign .points-focus-level { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; overflow:hidden; border-right:1px solid var(--points-rule); background:#151d28; text-align:center; } body.route-points #desktop-points-redesign .points-focus-level:before { content:''; position:absolute; width:130px; height:130px; border:1px solid rgba(255,196,91,.44); transform:rotate(45deg); } body.route-points #desktop-points-redesign .points-focus-level > * { position:relative; z-index:1; } body.route-points #desktop-points-redesign .points-focus-level span { color:#a89469; font-size:11px; font-weight:700; } body.route-points #desktop-points-redesign .points-focus-level strong { color:var(--points-amber); font-size:39px; line-height:1; letter-spacing:1px; } body.route-points #desktop-points-redesign .points-focus-level b { color:#fff4d9; font-size:16px; } body.route-points #desktop-points-redesign .points-focus-level small { color:#aa9365; font-size:8px; letter-spacing:1px; } body.route-points #desktop-points-redesign .points-focus-side { display:grid; grid-template-rows:1fr 1fr; } body.route-points #desktop-points-redesign .points-focus-side article { display:flex; align-items:center; gap:13px; padding:21px; border-bottom:1px solid var(--points-rule); } body.route-points #desktop-points-redesign .points-focus-side article:last-child { border-bottom:0; } body.route-points #desktop-points-redesign .points-focus-side i { display:grid; place-items:center; width:36px; height:36px; border:1px solid rgba(57,220,200,.33); border-radius:3px; color:var(--points-teal); font-size:18px; } body.route-points #desktop-points-redesign .points-focus-side strong,.points-focus-side span { display:block; } body.route-points #desktop-points-redesign .points-focus-side strong { color:var(--points-text); font-size:19px; } body.route-points #desktop-points-redesign .points-focus-side span { margin-top:4px; color:#a4b1bd; font-size:12px; } body.route-points #desktop-points-redesign .points-content-grid { display:grid; grid-template-columns:minmax(380px,.85fr) minmax(520px,1.15fr); gap:18px; } body.route-points #desktop-points-redesign :is(.points-route-panel,.points-missions-panel) { overflow:hidden; border:1px solid #34465a; border-radius:8px; background:var(--points-surface); } body.route-points #desktop-points-redesign :is(.points-route-panel,.points-missions-panel) > header { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:72px; padding:14px 19px; border-bottom:1px solid var(--points-rule); } body.route-points #desktop-points-redesign :is(.points-route-panel,.points-missions-panel) header span { display:block; color:var(--points-teal); font-size:10px; font-weight:800; letter-spacing:1.2px; } body.route-points #desktop-points-redesign :is(.points-route-panel,.points-missions-panel) header h2 { margin:5px 0 0; color:var(--points-text); font-size:17px; } body.route-points #desktop-points-redesign :is(.points-route-panel,.points-missions-panel) header p { margin:0; color:#92a1b1; font-size:11px; text-align:right; } body.route-points #desktop-points-redesign .points-route-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px; } body.route-points #desktop-points-redesign .points-route-item { display:grid; grid-template-columns:32px 9px minmax(0,1fr) auto; align-items:center; gap:8px; min-height:48px; padding:0 9px; border-bottom:1px solid rgba(70,91,113,.44); } body.route-points #desktop-points-redesign .points-route-item:nth-last-child(-n+2) { border-bottom:0; } body.route-points #desktop-points-redesign .points-route-item b { color:var(--level-color); font-size:10px; letter-spacing:.7px; } body.route-points #desktop-points-redesign .points-route-item > span { width:7px; height:7px; border-radius:50%; background:var(--level-color); box-shadow:0 0 10px color-mix(in srgb,var(--level-color) 60%,transparent); } body.route-points #desktop-points-redesign .points-route-item strong { color:#bdc9d5; font-size:13px; } body.route-points #desktop-points-redesign .points-route-item small { color:#8191a2; font-size:10px; } body.route-points #desktop-points-redesign .points-route-item.is-current { border:1px solid rgba(57,220,200,.62); background:rgba(57,220,200,.08); } body.route-points #desktop-points-redesign .points-route-item.is-current strong { color:var(--points-text); } body.route-points #desktop-points-redesign .points-mission-list { padding:4px 18px 9px; } body.route-points #desktop-points-redesign .points-mission-row { display:grid; grid-template-columns:35px minmax(0,1fr) 48px 96px; align-items:center; gap:10px; min-height:59px; border-bottom:1px solid rgba(70,91,113,.44); } body.route-points #desktop-points-redesign .points-mission-row:last-child { border-bottom:0; } body.route-points #desktop-points-redesign .points-mission-row > i { display:grid; place-items:center; width:30px; height:30px; border:1px solid #3a4d61; border-radius:3px; color:var(--points-teal); font-size:15px; } body.route-points #desktop-points-redesign .points-mission-row strong,.points-mission-row span { display:block; } body.route-points #desktop-points-redesign .points-mission-row strong { color:var(--points-text); font-size:13px; } body.route-points #desktop-points-redesign .points-mission-row span { margin-top:3px; color:#8f9faf; font-size:11px; } body.route-points #desktop-points-redesign .points-mission-row b { color:var(--points-amber); font-size:14px; text-align:right; } body.route-points #desktop-points-redesign .points-mission-row small { color:#9aa8b6; font-size:10px; text-align:right; } body.route-points #desktop-points-redesign .points-ledger-simple { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:22px; min-height:104px; padding:19px 22px; border:1px solid #34465a; border-radius:8px; background:#111923; } body.route-points #desktop-points-redesign .points-ledger-copy span { display:block; color:var(--points-amber); font-size:10px; font-weight:800; letter-spacing:1.1px; } body.route-points #desktop-points-redesign .points-ledger-copy strong { display:block; margin-top:5px; color:var(--points-text); font-size:16px; } body.route-points #desktop-points-redesign .points-ledger-copy p { margin:5px 0 0; color:#9baaba; font-size:12px; } body.route-points #desktop-points-redesign .points-ledger-facts { display:grid; gap:7px; color:#b8c4d0; font-size:12px; } body.route-points #desktop-points-redesign .points-ledger-facts i { color:var(--points-teal); } body.route-points #desktop-points-redesign .points-ledger-simple button { min-height:40px; padding:0 13px; border:1px solid rgba(255,196,91,.68); border-radius:3px; background:transparent; color:#ffd274; font:700 12px inherit; white-space:nowrap; cursor:pointer; } body.route-points #desktop-points-redesign .points-ledger-simple button:hover { background:rgba(255,196,91,.1); } @media (max-width:1180px) { body.route-points #desktop-points-redesign .points-focus { grid-template-columns:minmax(0,1fr) 240px; } body.route-points #desktop-points-redesign .points-focus-level { display:none; } body.route-points #desktop-points-redesign .points-content-grid { grid-template-columns:1fr; } } @media (max-width:760px) { body.route-points #desktop-points-redesign .points-focus { grid-template-columns:1fr; } body.route-points #desktop-points-redesign .points-focus-main { border-right:0; border-bottom:1px solid var(--points-rule); } body.route-points #desktop-points-redesign .points-focus-side { grid-template-columns:1fr 1fr; grid-template-rows:1fr; } body.route-points #desktop-points-redesign .points-focus-side article { border-right:1px solid var(--points-rule); border-bottom:0; } body.route-points #desktop-points-redesign .points-focus-side article:last-child { border-right:0; } body.route-points #desktop-points-redesign .points-route-list { grid-template-columns:1fr; } body.route-points #desktop-points-redesign .points-route-item:nth-last-child(-n+2) { border-bottom:1px solid rgba(70,91,113,.44); } body.route-points #desktop-points-redesign .points-route-item:last-child { border-bottom:0; } body.route-points #desktop-points-redesign .points-ledger-simple { grid-template-columns:1fr; gap:13px; } } @media (max-width:520px) { body.route-points #desktop-points-redesign .points-focus-main { padding:24px 20px; } body.route-points #desktop-points-redesign .points-focus-number strong { font-size:56px; } body.route-points #desktop-points-redesign .points-focus-side { grid-template-columns:1fr; } body.route-points #desktop-points-redesign .points-focus-side article { border-right:0; border-bottom:1px solid var(--points-rule); } body.route-points #desktop-points-redesign .points-mission-list { padding:4px 12px; } body.route-points #desktop-points-redesign .points-mission-row { grid-template-columns:34px minmax(0,1fr) 48px; } body.route-points #desktop-points-redesign .points-mission-row small { display:none; } } /* Shared filtering language: compact pill controls instead of framed toolbars. */ body.desktop-dark:not(.route-qa):not(.route-grade) #app :is(.bc-filter-group,.broadcast-filter-options,.course-filter-row,.desktop-yibentong-filters,.official-templates-toolbar > div) { display:flex; flex-wrap:wrap; gap:8px; } body.desktop-dark:not(.route-qa):not(.route-grade) #app :is(.bc-filter-group,.broadcast-filter-options,.course-filter-row,.desktop-yibentong-filters,.official-templates-toolbar > div) button { min-height:36px; padding:0 14px; border:1px solid #34465a; border-radius:999px; background:#111923; color:#aebdcb; font-size:13px; font-weight:700; line-height:34px; } body.desktop-dark:not(.route-qa):not(.route-grade) #app :is(.bc-filter-group,.broadcast-filter-options,.course-filter-row,.desktop-yibentong-filters,.official-templates-toolbar > div) button:hover { border-color:rgba(57,220,200,.7); color:#d9f7f3; } body.desktop-dark:not(.route-qa):not(.route-grade) #app :is(.bc-filter-group,.broadcast-filter-options,.course-filter-row,.desktop-yibentong-filters,.official-templates-toolbar > div) button.active { border-color:rgba(57,220,200,.82); background:#164b46; color:#9cf2e8; box-shadow:inset 0 0 0 1px rgba(57,220,200,.14); } /* Question bank: readable content first, filters as secondary pill controls. */ /* Points hero: remove decorative empty space and keep the status readable. */ body.route-points #desktop-points-redesign .points-focus { grid-template-columns:minmax(0,1.18fr) minmax(370px,.82fr); grid-template-rows:1fr 1fr; min-height:228px; } body.route-points #desktop-points-redesign .points-focus-main { grid-row:1 / span 2; padding:28px 34px; } body.route-points #desktop-points-redesign .points-focus-main:after { display:none; } body.route-points #desktop-points-redesign .points-focus-number strong { font-size:60px; text-shadow:none; } body.route-points #desktop-points-redesign .points-focus-progress { margin-top:20px; } body.route-points #desktop-points-redesign .points-focus-level { align-items:flex-start; justify-content:center; gap:4px; padding:18px 24px; border-right:0; border-bottom:1px solid var(--points-rule); background:#121a24; text-align:left; } body.route-points #desktop-points-redesign .points-focus-level:before { display:none; } body.route-points #desktop-points-redesign .points-focus-level span { color:#98a9b9; font-size:11px; } body.route-points #desktop-points-redesign .points-focus-level strong { color:var(--points-amber); font-size:30px; letter-spacing:.5px; } body.route-points #desktop-points-redesign .points-focus-level b { color:var(--points-text); font-size:16px; } body.route-points #desktop-points-redesign .points-focus-level small { color:#8191a1; font-size:9px; letter-spacing:.8px; } body.route-points #desktop-points-redesign .points-focus-side { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:1fr; } body.route-points #desktop-points-redesign .points-focus-side article { gap:10px; padding:16px 18px; border-right:1px solid var(--points-rule); border-bottom:0; } body.route-points #desktop-points-redesign .points-focus-side article:last-child { border-right:0; } body.route-points #desktop-points-redesign .points-focus-side i { width:31px; height:31px; font-size:16px; } body.route-points #desktop-points-redesign .points-focus-side strong { font-size:17px; } body.route-points #desktop-points-redesign .points-focus-side span { color:#a2b0be; font-size:11px; } @media (max-width:1180px) { body.route-points #desktop-points-redesign .points-focus-level { display:flex; } } @media (max-width:980px) { body.route-points #desktop-points-redesign .points-focus { grid-template-columns:1fr; grid-template-rows:auto; } body.route-points #desktop-points-redesign .points-focus-main { grid-row:auto; border-right:0; border-bottom:1px solid var(--points-rule); } body.route-points #desktop-points-redesign .points-focus-level { display:flex; border-bottom:1px solid var(--points-rule); } } @media (max-width:520px) { body.route-points #desktop-points-redesign .points-focus-side { grid-template-columns:1fr; } body.route-points #desktop-points-redesign .points-focus-side article { border-right:0; border-bottom:1px solid var(--points-rule); } body.route-points #desktop-points-redesign .points-focus-side article:last-child { border-bottom:0; } } /* Today workspace must never run below the visible context rail. */ body.route-profile .profile-archive-summary { overflow:hidden; margin-top:16px; border:1px solid var(--profile-line); border-radius:8px; background:var(--profile-panel); } body.route-profile .profile-archive-summary > button { min-height:76px; border-right:1px solid var(--profile-line); } body.route-profile .profile-archive-summary strong { color:var(--profile-text); font-size:24px; } body.route-profile .profile-archive-tabs { gap:8px; margin-top:14px; padding:4px; border:1px solid var(--profile-line); border-radius:8px; background:var(--profile-panel); } body.route-profile .profile-archive-tabs button { min-height:30px; padding:0 10px; border:0; border-radius:5px !important; } body.route-profile .profile-archive-tabs button.active { background:#153532; color:#d9fffb; } body.route-profile .profile-archive-list { min-height:128px; max-height:330px; margin-top:10px; border:1px solid var(--profile-line); border-radius:8px; background:var(--profile-panel); } body.route-profile .profile-archive-row { padding:12px 14px; } body.route-profile .profile-archive-empty { min-height:124px; padding:0 18px; } body.route-profile .profile-archive-empty div { min-width:0; } body.route-profile .profile-archive-empty strong, body.route-profile .profile-archive-empty span { display:block; } body.route-profile .profile-archive-empty span { margin-top:6px; color:var(--profile-muted); font-size:11px; } body.route-profile .profile-knowledge .library-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; } body.route-profile .profile-knowledge .library-grid article { min-height:92px; border-color:var(--profile-line); border-radius:8px; background:var(--profile-panel); } body.route-profile .profile-knowledge .library-grid article:hover { border-color:rgba(37,199,183,.52); background:#111d1d; } body.route-profile .profile-knowledge .library-shelf-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; padding:18px 16px 24px; border:1px solid var(--profile-line); border-radius:8px; background:#0e151d; box-shadow:inset 0 -8px 0 #273544; } body.route-profile .profile-knowledge .library-shelf-grid .library-shelf-book { display:flex; align-items:flex-start; flex-direction:column; justify-content:flex-end; min-height:202px; padding:16px 14px 18px; border:1px solid rgba(233,242,245,.2); border-radius:5px 5px 2px 2px; background:#246c69; box-shadow:5px 5px 0 rgba(0,0,0,.2); color:#f2fbfa; overflow:hidden; } body.route-profile .profile-knowledge .library-shelf-grid .library-shelf-book:hover { transform:translateY(-4px); border-color:#b4f6ed; background:#2b7b76; } body.route-profile .profile-knowledge .library-shelf-book-2 { background:#a76235; } body.route-profile .profile-knowledge .library-shelf-book-2:hover { background:#ba7040; } body.route-profile .profile-knowledge .library-shelf-book-3 { background:#3d5f8c; } body.route-profile .profile-knowledge .library-shelf-book-3:hover { background:#4a70a1; } body.route-profile .profile-knowledge .library-shelf-book-4 { background:#70528d; } body.route-profile .profile-knowledge .library-shelf-book-4:hover { background:#8162a1; } body.route-profile .profile-knowledge .library-shelf-book-5 { background:#556d47; } body.route-profile .profile-knowledge .library-shelf-book-5:hover { background:#647d54; } body.route-profile .profile-knowledge .library-shelf-grid .library-shelf-index { align-self:flex-start; color:rgba(255,255,255,.74); font-size:11px; font-weight:800; letter-spacing:.08em; } body.route-profile .profile-knowledge .library-shelf-grid strong { margin-top:auto; padding-top:18px; color:#fff; font-size:17px; line-height:1.4; } body.route-profile .profile-knowledge .library-shelf-grid small { margin-top:9px; color:rgba(255,255,255,.78); font-size:12px; } body.route-profile .profile-knowledge .library-shelf-grid .library-card-arrow { position:absolute; right:12px; bottom:14px; color:rgba(255,255,255,.88); } .profile-library-locked-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:48px 24px; } .profile-library-locked { width:min(100%,620px); display:flex; flex-direction:column; align-items:center; text-align:center; padding:58px 42px; border:1px solid rgba(125,139,151,.28); border-radius:12px; background:rgba(18,25,31,.78); box-shadow:0 18px 56px rgba(0,0,0,.2); } .profile-library-locked-icon { width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#35d6c5; background:rgba(53,214,197,.12); font-size:25px; } .profile-library-locked > span,.profile-library-locked-inline > div > span { margin-top:18px; color:#35d6c5; font-size:11px; font-weight:700; letter-spacing:.12em; } .profile-library-locked h1,.profile-library-locked h2 { margin:9px 0 0; color:#f3f7f8; font-size:26px; } .profile-library-locked p { margin:10px 0 0; color:#9daab2; font-size:14px; line-height:1.7; } .profile-library-locked > a { margin-top:24px; padding:10px 16px; border:1px solid rgba(53,214,197,.35); border-radius:6px; color:#35d6c5; font-size:14px; } .profile-knowledge-locked { padding:0 !important; border:0 !important; background:transparent !important; } .profile-library-locked-inline { width:100%; min-height:162px; flex-direction:row; justify-content:center; gap:18px; padding:28px 32px; text-align:left; } .profile-library-locked-inline > div:last-child { display:flex; flex-direction:column; align-items:flex-start; } .profile-library-locked-inline > div > span { margin-top:0; } .profile-library-locked-inline h2 { font-size:20px; } body.desktop-light .profile-library-locked { background:rgba(255,255,255,.8); border-color:#d6dee6; box-shadow:0 14px 42px rgba(32,49,59,.1); } body.desktop-light .profile-library-locked h1,body.desktop-light .profile-library-locked h2 { color:#20313b; } body.desktop-light .profile-library-locked p { color:#64737d; } body.route-profile .profile-library-detail-intro { display:flex; flex-direction:column; align-items:flex-start; gap:7px; margin-top:18px; padding:16px 18px; border:1px solid var(--profile-line); border-left:4px solid var(--profile-accent); border-radius:7px; background:var(--profile-panel); } body.route-profile .profile-library-detail-intro span { color:var(--profile-accent); font-size:11px; font-weight:800; letter-spacing:.08em; } body.route-profile .profile-library-detail-intro strong { color:var(--profile-text); font-size:18px; } body.route-profile .profile-library-detail-intro small { color:var(--profile-muted); font-size:12px; } .profile-library-focused .profile-archive { display:none !important; } body.route-profile .profile-knowledge .library-grid article button[data-remove-section] { display:none; } body.route-profile .profile-knowledge.is-managing .library-grid article button[data-remove-section] { display:grid; place-items:center; } body.route-profile .profile-knowledge.is-managing .library-grid article { cursor:grab; } body.route-profile .profile-library-manage-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0 -2px; padding:10px 12px; border:1px solid var(--profile-line); border-radius:7px; background:var(--profile-panel-2); } body.route-profile .profile-library-manage-bar[hidden] { display:none; } body.route-profile .profile-library-manage-bar span { color:var(--profile-muted); font-size:12px; } body.route-profile .profile-library-manage-bar button { min-height:30px; padding:0 11px; border:1px solid rgba(37,199,183,.48); border-radius:6px; background:transparent; color:#a5eee5; font-size:12px; font-weight:800; cursor:pointer; } body.route-profile .profile-library-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; } body.route-profile .profile-library-actions label, body.route-profile .profile-library-actions button, body.route-profile .profile-library-actions a { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 13px; border:1px solid rgba(37,199,183,.48); border-radius:6px; background:#153532; color:#d9fffb; font-size:12px; font-weight:800; text-decoration:none; cursor:pointer; } body.route-profile .profile-library-actions button { background:transparent; } body.route-profile .profile-library-actions .profile-library-primary { background:#16786f; border-color:#38cdbd; color:#edfffd; } body.route-profile .profile-library-actions input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; } body.route-profile .profile-library-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0 10px; } body.route-profile .profile-library-overview article { min-height:70px; padding:13px 14px; border:1px solid var(--profile-line); border-radius:8px; background:var(--profile-panel); } body.route-profile .profile-library-overview strong, body.route-profile .profile-library-overview span { display:block; } body.route-profile .profile-library-overview strong { color:var(--profile-text); font-size:24px; line-height:1; } body.route-profile .profile-library-overview span { margin-top:8px; color:var(--profile-muted); font-size:11px; } body.route-profile .profile-account-row { margin-top:24px; padding:16px; border:1px solid var(--profile-line); border-radius:8px; background:var(--profile-panel); } body.route-profile #desktop-contextbar .people-feature { min-height:auto; padding-top:16px; padding-bottom:16px; } body.route-profile #desktop-contextbar .people-feature-stats { margin-top:16px; } body.route-profile #desktop-contextbar .people-rank-card { box-shadow:none; } body.desktop-light.route-profile .profile-quick-actions a, body.desktop-light.route-profile .profile-dashboard-main, body.desktop-light.route-profile .profile-dashboard-viz, body.desktop-light.route-profile .profile-dashboard-stats a, body.desktop-light.route-profile .profile-archive-summary, body.desktop-light.route-profile .profile-archive-tabs, body.desktop-light.route-profile .profile-archive-list, body.desktop-light.route-profile .profile-knowledge .library-grid article, body.desktop-light.route-profile .profile-library-overview article, body.desktop-light.route-profile .profile-account-row { background:#fff; } body.desktop-light.route-profile .profile-library-manage-bar { background:#f3f7f8; } body.desktop-light.route-profile .profile-knowledge .library-shelf-grid { background:#eaf0f2; box-shadow:inset 0 -8px 0 #aab9bf; } body.desktop-light.route-profile .profile-library-manage-bar button { color:#147d73; } body.desktop-light.route-profile .profile-person-avatar, body.desktop-light.route-profile .profile-quick-actions i { background:#e8f6f3; } @media (max-width:1200px) { body.route-profile .profile-workflow-panel { grid-template-columns:1fr; } body.route-profile .profile-dashboard-panel { grid-template-columns:1fr; } body.route-profile .profile-quick-actions, body.route-profile .profile-knowledge .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } body.route-profile .profile-knowledge .library-shelf-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:720px) { body.route-profile .profile-quick-actions, body.route-profile .profile-knowledge .library-grid, body.route-profile .profile-dashboard-stats, body.route-profile .profile-library-overview { grid-template-columns:1fr; } body.route-profile .profile-knowledge .library-shelf-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } body.route-profile .profile-dashboard-viz { grid-template-columns:repeat(5,minmax(42px,1fr)); overflow-x:auto; } body.route-profile .profile-library-actions, body.route-profile .profile-library-manage-bar { align-items:stretch; flex-wrap:wrap; justify-content:flex-start; } } /* Personal library editor: sections can now receive typed notes directly. */ .profile-library-editor { display:grid; gap:14px; margin-top:18px; padding:18px; border:1px solid #2b3038; border-radius:8px; background:#111318; } .profile-library-detail .profile-library-editor { grid-template-columns:minmax(280px,380px) minmax(0,1fr); align-items:start; gap:22px; margin-top:22px; padding:0; border:0; background:transparent; } .profile-library-editor-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; } .profile-library-detail .profile-library-editor-head, .profile-library-detail .profile-library-editor label { padding:18px; border:1px solid #2b3038; border-radius:8px; background:#111318; } .profile-library-detail .profile-library-editor-head { grid-column:1; } .profile-library-detail .profile-library-editor label { grid-column:1; } .profile-library-detail .profile-library-editor-head button { display:none; } .profile-library-editor-head strong, .profile-library-editor-head span { display:block; } .profile-library-editor-head strong { color:#eef1f4; font-size:15px; } .profile-library-editor-head span { margin-top:5px; color:#89939f; font-size:12px; } .profile-library-editor-head button, .profile-library-modal-card footer button { min-height:34px; padding:0 13px; border:1px solid #2f6f69; border-radius:6px; background:#153532; color:#d9fffb; font:700 12px/32px inherit; cursor:pointer; } .profile-library-editor label, .profile-library-modal-card label { display:grid; gap:7px; color:#9fa8b3; font-size:12px; font-weight:700; } .profile-library-editor input, .profile-library-editor textarea, .profile-library-modal-card input { width:100%; box-sizing:border-box; border:1px solid #303641; border-radius:6px; background:#0b0d11; color:#eef1f4; font:14px/1.6 inherit; outline:none; } .profile-library-editor input, .profile-library-modal-card input { height:38px; padding:0 12px; } .profile-library-editor textarea { min-height:116px; padding:10px 12px; resize:vertical; } .profile-library-editor input:focus, .profile-library-editor textarea:focus, .profile-library-modal-card input:focus { border-color:#25c7b7; box-shadow:0 0 0 2px rgba(37,199,183,.12); } .profile-library-note-list { display:grid; gap:0; border-top:1px solid #252b33; } .profile-library-detail .profile-library-note-list { grid-column:2; grid-row:1 / span 3; min-height:360px; padding:4px 18px 10px; border:1px solid #2b3038; border-radius:8px; background:#111318; } .profile-library-note-list > p { margin:13px 0 0; color:#7f8995; font-size:12px; } .profile-library-note-list article { display:grid; grid-template-columns:minmax(0,1fr) 88px; gap:14px; padding:13px 0; border-bottom:1px solid #252b33; } .profile-library-note-list strong { display:block; color:#eef1f4; font-size:13px; } .profile-library-note-list p { display:-webkit-box; margin:5px 0 0; overflow:hidden; color:#9aa4af; font-size:12px; line-height:1.6; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .profile-library-note-list time { color:#697482; font-size:11px; text-align:right; } .profile-library-note-row { display:grid; width:100%; min-height:68px; grid-template-columns:48px minmax(0,1fr) 90px 18px; align-items:center; gap:14px; padding:11px 4px; border:0; border-bottom:1px solid #252b33; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; } .profile-library-note-row:hover, .profile-library-note-row:focus-visible { background:rgba(53,214,197,.045); outline:0; } .profile-library-note-row > span { color:#39bcae; font-size:10px; } .profile-library-note-row > div { min-width:0; } .profile-library-note-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .profile-library-note-row p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .profile-library-note-row > i { color:#54515b; font-size:14px; transition:transform .16s ease,color .16s ease; } .profile-library-note-row:hover > i { color:#35d6c5; transform:translateX(2px); } .profile-library-modal { position:fixed; inset:0; z-index:260; display:grid; place-items:center; } .profile-library-modal-backdrop { position:absolute; inset:0; border:0; background:rgba(4,5,7,.62); } .profile-library-modal-card { position:relative; z-index:1; display:grid; gap:16px; width:min(420px,calc(100vw - 40px)); padding:20px; border:1px solid #303641; border-radius:8px; background:#111318; color:#eef1f4; box-shadow:0 22px 72px rgba(0,0,0,.34); } .profile-library-modal-card header, .profile-library-modal-card footer { display:flex; align-items:center; justify-content:space-between; gap:12px; } .profile-library-modal-card header strong { font-size:16px; } .profile-library-modal-card header button { width:30px; height:30px; border:1px solid #303641; border-radius:6px; background:transparent; color:#98a2ae; cursor:pointer; } .profile-library-modal-card footer { justify-content:flex-end; } .profile-library-modal-card footer button:first-child { border-color:#303641; background:transparent; color:#a5aeb8; } body.desktop-light .profile-library-editor, body.desktop-light .profile-library-modal-card { border-color:#d8e1e9; background:#fff; color:#26313b; } body.desktop-light .profile-library-detail .profile-section-head { border-color:#d6dee6; } body.desktop-light .profile-library-detail .profile-library-editor { background:transparent; } body.desktop-light .profile-library-detail .profile-library-editor-head, body.desktop-light .profile-library-detail .profile-library-editor label, body.desktop-light .profile-library-detail .profile-library-note-list { border-color:#d8e1e9; background:#fff; } body.desktop-light .profile-library-editor-head strong, body.desktop-light .profile-library-note-list strong, body.desktop-light .profile-library-modal-card header strong { color:#26313b; } body.desktop-light .profile-library-editor-head span, body.desktop-light .profile-library-editor label, body.desktop-light .profile-library-note-list p, body.desktop-light .profile-library-modal-card label { color:#667482; } body.desktop-light .profile-library-editor input, body.desktop-light .profile-library-editor textarea, body.desktop-light .profile-library-modal-card input { border-color:#d5dee7; background:#f8fafc; color:#26313b; } body.desktop-light .profile-library-note-list, body.desktop-light .profile-library-note-list article, body.desktop-light .profile-library-note-row { border-color:#e1e7ee; } body.desktop-light .profile-library-note-row:hover, body.desktop-light .profile-library-note-row:focus-visible { background:rgba(22,140,128,.055); } @media (max-width:900px) { .profile-library-focused .profile-knowledge .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .profile-library-detail .profile-library-editor { grid-template-columns:1fr; } .profile-library-detail .profile-library-editor-head, .profile-library-detail .profile-library-editor label, .profile-library-detail .profile-library-note-list { grid-column:auto; grid-row:auto; } } @media (max-width:620px) { .profile-library-focused .profile-knowledge .library-grid { grid-template-columns:1fr; } .profile-library-note-row { grid-template-columns:42px minmax(0,1fr) 18px; } .profile-library-note-row time { grid-column:2; text-align:left; } .profile-library-note-row > i { grid-column:3; grid-row:1/3; } } /* Final unified learning-card pages: no top color slabs, one quiet card layout. */ @media (min-width:981px) { body:is(.route-yibentong-anki,.route-learning-card-detail) #app { width:calc(100vw - var(--desktop-right-width)) !important; max-width:calc(100vw - var(--desktop-right-width)) !important; padding-left:calc(var(--desktop-left-width) + 24px) !important; padding-right:24px !important; background:#090a0d !important; } body.context-collapsed:is(.route-yibentong-anki,.route-learning-card-detail) #app { width:100vw !important; max-width:100vw !important; } body.desktop-nav-collapsed:is(.route-yibentong-anki,.route-learning-card-detail) #app { padding-left:24px !important; } body:is(.route-yibentong-anki,.route-learning-card-detail) #app .min-h-screen { --card-canvas:#090a0d; --card-panel:#111318; --card-panel-2:#161922; --card-line:#2d333d; --card-line-soft:#242a32; --card-text:#eef1f4; --card-muted:#98a2ae; --card-faint:#737f8c; --card-accent:#24b8aa; width:min(1040px,calc(100% - 48px)) !important; max-width:1040px !important; margin:0 auto !important; padding:32px 0 76px !important; background:var(--card-canvas) !important; color:var(--card-text) !important; } body:is(.route-yibentong-anki,.route-learning-card-detail) #app :is([style*="linear-gradient"],[class*="bg-gradient"],.desktop-card-neutral-block):not(button):not(taro-button-core):not(.logo-linka) { background:transparent !important; background-image:none !important; box-shadow:none !important; } body:is(.route-yibentong-anki,.route-learning-card-detail) #app :is([style*="background-clip: text"],[style*="backgroundClip: text"]) { background:none !important; background-image:none !important; color:var(--card-text) !important; -webkit-text-fill-color:var(--card-text) !important; } body.route-yibentong-anki #app .desktop-yibentong-redesign { display:grid !important; gap:14px !important; } body.route-yibentong-anki #app .desktop-yibentong-hero { display:grid !important; grid-template-columns:40px minmax(0,1fr) 220px !important; align-items:center !important; gap:8px 12px !important; margin:0 !important; padding:0 0 16px !important; border:0 !important; border-bottom:1px solid var(--card-line) !important; background:transparent !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > button:first-child { width:36px !important; height:36px !important; min-height:36px !important; border:1px solid var(--card-line) !important; border-radius:6px !important; background:var(--card-panel) !important; color:var(--card-muted) !important; } body.route-yibentong-anki #app .desktop-yibentong-hero [style*="font-size: 24px"], body.route-yibentong-anki #app .desktop-yibentong-hero [style*="font-size:24px"] { color:var(--card-text) !important; font-size:26px !important; font-weight:800 !important; } body.route-yibentong-anki #desktop-yibentong-puzzle { min-height:50px !important; border:1px solid var(--card-line) !important; border-radius:7px !important; background:var(--card-panel) !important; } body.route-yibentong-anki #app .desktop-yibentong-stats { display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; min-height:74px !important; margin:12px 0 0 !important; border:1px solid var(--card-line) !important; border-radius:7px !important; background:var(--card-panel) !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > * { min-height:74px !important; border-right:1px solid var(--card-line-soft) !important; background:transparent !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > :last-child { border-right:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-workspace { display:grid !important; grid-template-columns:repeat(12,minmax(0,1fr)) !important; gap:14px !important; } body.route-yibentong-anki #app .desktop-yibentong-quick { grid-column:1 / -1 !important; padding:0 !important; border:0 !important; background:transparent !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 > :is(button,taro-button-core) { min-height:76px !important; border:1px solid var(--card-line) !important; border-radius:7px !important; background:var(--card-panel) !important; color:var(--card-text) !important; } body.route-yibentong-anki #app .desktop-yibentong-filters, body.route-yibentong-anki #app .desktop-yibentong-volume, body.route-learning-card-detail #app .desktop-card-reader-panel, body.route-learning-card-detail #app .desktop-card-reader-content { border:1px solid var(--card-line) !important; border-radius:7px !important; background:var(--card-panel) !important; box-shadow:none !important; } body.route-yibentong-anki #app .desktop-yibentong-redesign > .desktop-yibentong-hero, body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .flex.flex-col.desktop-yibentong-workspace { margin:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-filters { grid-column:1 / 5 !important; min-height:0 !important; padding:16px !important; } body.route-yibentong-anki #app .desktop-yibentong-volume { grid-column:5 / -1 !important; min-height:0 !important; padding:16px !important; } body.route-yibentong-anki #app .desktop-yibentong-volume > .flex.items-center.gap-3 { min-height:58px !important; padding:10px 0 !important; border:0 !important; border-bottom:1px solid var(--card-line-soft) !important; border-radius:0 !important; background:transparent !important; } body.route-yibentong-anki #app .desktop-yibentong-volume > .flex.items-center.gap-3:last-child { border-bottom:0 !important; } body.route-learning-card-detail #app .desktop-card-reader-redesign { display:grid !important; gap:14px !important; } body.route-learning-card-detail #app .desktop-card-reader-head { min-height:0 !important; margin:0 !important; padding:0 0 16px !important; border:0 !important; border-bottom:1px solid var(--card-line) !important; background:transparent !important; } body.route-learning-card-detail #app .desktop-card-reader-panel, body.route-learning-card-detail #app .desktop-card-reader-content { margin:0 !important; padding:18px !important; } body.route-learning-card-detail #app :is(.glass-card,.glass-card-frosted,.bg-card,.rounded-xl,.rounded-2xl,[class*="shadow"]) { border-color:var(--card-line) !important; border-radius:7px !important; background:var(--card-panel) !important; box-shadow:none !important; } body:is(.route-yibentong-anki,.route-learning-card-detail) #app .desktop-card-action, body:is(.route-yibentong-anki,.route-learning-card-detail) #app :is(button,taro-button-core).rounded-full { min-height:32px !important; height:auto !important; padding:7px 12px !important; border:1px solid var(--card-line) !important; border-radius:6px !important; background:var(--card-panel-2) !important; color:var(--card-muted) !important; box-shadow:none !important; font-size:12px !important; font-weight:650 !important; } body:is(.route-yibentong-anki,.route-learning-card-detail) #app .desktop-card-action.is-primary, body:is(.route-yibentong-anki,.route-learning-card-detail) #app :is(button,taro-button-core)[style*="linear-gradient"] { border-color:#1f9e93 !important; background:#168f84 !important; background-image:none !important; color:#fff !important; } body:is(.route-yibentong-anki,.route-learning-card-detail) #app .desktop-card-action.is-quiet { border-color:var(--card-line) !important; background:transparent !important; color:var(--card-muted) !important; } body:is(.route-yibentong-anki,.route-learning-card-detail) #app :is(button,taro-button-core).rounded-full[style*="background"]:not([style*="linear-gradient"]) { border-color:#35514f !important; background:#172321 !important; color:#cfe4e1 !important; } body:is(.route-yibentong-anki,.route-learning-card-detail) #app :is(p,span,strong,b,div:not([class*="i-mdi"])) { -webkit-text-fill-color:currentColor !important; letter-spacing:0 !important; text-shadow:none !important; } } body.desktop-light:is(.route-yibentong-anki,.route-learning-card-detail) #app, body.desktop-light:is(.route-yibentong-anki,.route-learning-card-detail) #app .min-h-screen { --card-canvas:#f7f9fb; --card-panel:#fff; --card-panel-2:#f3f6f8; --card-line:#d8e1e9; --card-line-soft:#e4e9ef; --card-text:#26313b; --card-muted:#697684; --card-faint:#8793a0; background:var(--card-canvas) !important; color:var(--card-text) !important; } /* Yibentong overview final fix: compact filters, visible four-volume entry, no stray color bars. */ @media (min-width:981px) { body.route-yibentong-anki #app { overflow-x:hidden !important; } body.route-yibentong-anki #app .desktop-yibentong-redesign { width:100% !important; max-width:1040px !important; grid-template-columns:1fr !important; } body.route-yibentong-anki #app .desktop-yibentong-hero { grid-template-columns:40px minmax(0,1fr) !important; } body.route-yibentong-anki #desktop-yibentong-puzzle { grid-column:1 / -1 !important; grid-row:auto !important; max-width:320px !important; margin-left:52px !important; } body.route-yibentong-anki #app .desktop-yibentong-stats [style*="background: rgb(123, 92, 246)"], body.route-yibentong-anki #app .desktop-yibentong-stats [style*="background-color: rgb(123, 92, 246)"], body.route-yibentong-anki #app .desktop-yibentong-stats [style*="background: rgba(123, 92, 246"] { display:none !important; } body.route-yibentong-anki #app .desktop-yibentong-workspace { grid-template-columns:1fr !important; gap:12px !important; } body.route-yibentong-anki #app .desktop-yibentong-quick, body.route-yibentong-anki #app #desktop-yibentong-volumes, body.route-yibentong-anki #app .desktop-yibentong-filters, body.route-yibentong-anki #app .desktop-yibentong-volume { grid-column:1 / -1 !important; } body.route-yibentong-anki #app .desktop-yibentong-filters { display:grid !important; gap:12px !important; padding:16px !important; } body.route-yibentong-anki #app .desktop-yibentong-filters > div { display:grid !important; grid-template-columns:64px minmax(0,1fr) !important; align-items:center !important; gap:12px !important; padding:0 !important; border:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-filters > div > :last-child, body.route-yibentong-anki #app .desktop-yibentong-filters > div .flex, body.route-yibentong-anki #app .desktop-yibentong-filters > div [class*="gap"] { display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:8px !important; } body.route-yibentong-anki #app .desktop-yibentong-filters :is(button,taro-button-core,.rounded-full) { flex:0 0 auto !important; width:auto !important; min-width:64px !important; max-width:max-content !important; height:32px !important; min-height:32px !important; padding:0 12px !important; justify-content:center !important; border-color:var(--card-line) !important; background:var(--card-panel-2) !important; color:var(--card-muted) !important; } body.route-yibentong-anki #app .desktop-yibentong-filters :is(button,taro-button-core,.rounded-full)[style*="background"] { border-color:#2e6f68 !important; background:#15302e !important; color:#d9fffb !important; } #desktop-yibentong-volumes { display:grid !important; gap:12px !important; padding:16px !important; border:1px solid var(--card-line) !important; border-radius:7px !important; background:var(--card-panel) !important; } #desktop-yibentong-volumes header { display:flex !important; align-items:end !important; justify-content:space-between !important; gap:16px !important; padding:0 0 12px !important; border-bottom:1px solid var(--card-line-soft) !important; } #desktop-yibentong-volumes header span { color:var(--card-accent) !important; font-size:10px !important; font-weight:800 !important; letter-spacing:.08em !important; } #desktop-yibentong-volumes header h2 { margin:4px 0 0 !important; color:var(--card-text) !important; font-size:17px !important; } #desktop-yibentong-volumes header p { margin:0 !important; color:var(--card-muted) !important; font-size:12px !important; } #desktop-yibentong-volumes > div { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:10px !important; } #desktop-yibentong-volumes a { display:grid !important; grid-template-columns:34px minmax(0,1fr) auto !important; align-items:center !important; gap:8px 10px !important; min-height:76px !important; padding:12px !important; border:1px solid var(--card-line) !important; border-radius:7px !important; background:var(--card-panel-2) !important; color:var(--card-text) !important; text-decoration:none !important; } #desktop-yibentong-volumes a i { grid-row:1 / span 3 !important; display:grid !important; place-items:center !important; width:30px !important; height:30px !important; border:1px solid #2e6f68 !important; border-radius:6px !important; color:var(--card-accent) !important; font-style:normal !important; font-weight:800 !important; } #desktop-yibentong-volumes a strong, #desktop-yibentong-volumes a b, #desktop-yibentong-volumes a small { overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #desktop-yibentong-volumes a strong { color:var(--card-text) !important; font-size:13px !important; } #desktop-yibentong-volumes a b { color:var(--card-muted) !important; font-size:11px !important; font-weight:600 !important; } #desktop-yibentong-volumes a small { color:var(--card-faint) !important; font-size:10px !important; } #desktop-yibentong-volumes a em { grid-column:3 !important; grid-row:1 / span 3 !important; color:var(--card-accent) !important; font-size:11px !important; font-style:normal !important; } } body.desktop-light #desktop-yibentong-volumes { border-color:var(--card-line) !important; background:var(--card-panel) !important; } /* EigenFlux frame parity: final desktop rails for every workspace page. */ @media (min-width:981px) { body { --desktop-left-width:318px !important; --desktop-right-width:472px !important; --desktop-page-gutter:56px !important; --desktop-page-top:62px !important; } body:not(.route-auth) #app { padding-left:var(--desktop-left-width) !important; padding-right:0 !important; } body.route-has-context #app { width:calc(100% - var(--desktop-right-width)) !important; padding-right:0 !important; } body.route-has-context.context-collapsed #app { width:100% !important; } #desktop-nav { width:var(--desktop-left-width) !important; padding:28px 22px 0 !important; background:#0b0b0d !important; border-right:1px solid #26272d !important; box-shadow:none !important; } .desktop-nav-brand { padding:0 4px 24px !important; font-size:16px !important; line-height:1.2 !important; } .desktop-nav-brand span { margin-top:10px !important; font-size:13px !important; } .desktop-nav-pages { margin:0 -22px !important; } #desktop-nav .desktop-nav-item { width:100% !important; margin:0 !important; padding:17px 24px !important; font-size:16px !important; line-height:1.35 !important; } #desktop-nav .desktop-nav-item.active::before { top:9px !important; bottom:9px !important; width:3px !important; } .desktop-nav-toggle { top:28px !important; right:26px !important; } #desktop-nav .desktop-nav-footer { left:0 !important; right:0 !important; padding:18px 22px 18px !important; border-top:1px solid #26272d !important; background:#0b0b0d !important; } #desktop-contextbar { width:var(--desktop-right-width) !important; padding:28px 22px 0 !important; background:#0b0b0d !important; border-left:1px solid #26272d !important; box-shadow:none !important; } #desktop-contextbar .context-toggle { top:28px !important; left:20px !important; } #desktop-contextbar .assistant-head { min-height:66px !important; padding-left:38px !important; padding-bottom:18px !important; background:#0b0b0d !important; } #desktop-contextbar .context-tabs { margin:0 -22px !important; padding:0 22px !important; justify-content:space-between !important; gap:0 !important; background:#0b0b0d !important; } body:not(.route-auth) #app .min-h-screen, #desktop-broadcast .data-shell, .exam-hub-shell, .exam-paper-shell, .official-library-shell, .profile-page-shell, #desktop-checkin .checkin-shell, .focus-shell, .report-shell, .admin-portal-shell, .admin-dashboard-shell { width:100% !important; max-width:none !important; margin:0 !important; padding:var(--desktop-page-top) var(--desktop-page-gutter) 76px !important; box-sizing:border-box !important; } #desktop-today { inset:0 var(--desktop-right-width) 0 var(--desktop-left-width) !important; padding:var(--desktop-page-top) var(--desktop-page-gutter) 76px !important; } body.desktop-nav-collapsed #desktop-today { left:0 !important; } body.context-collapsed #desktop-today { right:0 !important; } #desktop-today .today-inner { width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; } #desktop-today .today-kicker { margin-bottom:38px !important; font-size:14px !important; line-height:1.3 !important; } #desktop-today h1 { max-width:1080px !important; font-size:34px !important; line-height:1.32 !important; font-weight:650 !important; } #desktop-today .today-subtitle { max-width:1040px !important; margin:22px 0 42px !important; font-size:15px !important; line-height:1.75 !important; } #desktop-today .today-actions { margin-bottom:58px !important; } #desktop-today .today-grid { gap:20px !important; } #desktop-today .today-card-heading { margin-bottom:18px !important; } #desktop-today .progress-panel { padding:24px !important; } #desktop-today .heatmap-frame { padding:24px 24px 25px !important; } #desktop-today .heatmap-months { height:17px !important; margin-bottom:9px !important; font-size:11px !important; line-height:17px !important; } #desktop-today .heatmap { grid-template-columns:repeat(var(--heat-columns),minmax(11px,1fr)) !important; gap:3px !important; } #desktop-today .heatmap-stage { min-width:742px !important; } #desktop-today .heatmap-stage .heatmap-real { top:33px !important; } #desktop-today .stat-row { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:14px !important; margin-top:24px !important; } #desktop-today .stat { padding:22px 18px !important; } #desktop-today .stat strong { font-size:26px !important; line-height:1.1 !important; } #desktop-today .streak-card, #desktop-today .record-card, #desktop-today .record-card:nth-of-type(3), #desktop-today .record-card:nth-of-type(4) { grid-column:span 4 !important; } #desktop-today .recommend-card { grid-column:span 12 !important; } } /* EigenFlux tone pass: black rails, restrained typography, accent-only highlights. */ @media (min-width:981px) { body, #desktop-nav, #desktop-contextbar, #desktop-today { font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important; } body.desktop-dark { --ef-frame-bg:#08080a; --ef-rail-bg:#0b0b0d; --ef-panel-bg:#111115; --ef-panel-soft:#15151a; --ef-line:#24252b; --ef-line-strong:#343640; --ef-text:#f1eff4; --ef-muted:#8a8692; --ef-faint:#66636f; --ef-accent:#35d6c5; } body.desktop-dark #desktop-nav, body.desktop-dark #desktop-contextbar { background:var(--ef-rail-bg) !important; color:var(--ef-muted) !important; } body.desktop-dark #desktop-today { background:var(--ef-frame-bg) !important; } #desktop-nav .desktop-nav-brand { font-weight:700 !important; color:#f4f3f6 !important; } #desktop-nav .desktop-nav-brand span { color:#7c7884 !important; font-weight:500 !important; } #desktop-nav .desktop-nav-item { color:#9b97a2 !important; font-weight:650 !important; } #desktop-nav .desktop-nav-item:hover { background:#15161a !important; color:#d7d4dc !important; } #desktop-nav .desktop-nav-item.active { background:#1a1b20 !important; color:#f2f0f5 !important; } #desktop-contextbar .assistant-mark { width:40px !important; height:40px !important; border-radius:4px !important; background:#173c38 !important; color:var(--ef-accent) !important; box-shadow:none !important; } #desktop-contextbar .assistant-name { color:var(--ef-text) !important; font-size:15px !important; font-weight:750 !important; } #desktop-contextbar .assistant-status, #desktop-contextbar .agent-context-chip { color:var(--ef-muted) !important; font-size:12px !important; } #desktop-contextbar .agent-context-chip { min-height:44px !important; margin:16px 0 14px !important; padding:10px 12px !important; border:1px solid var(--ef-line) !important; border-radius:3px !important; background:#0d0d10 !important; } #desktop-contextbar .context-tab { color:#8d8995 !important; font-size:12px !important; font-weight:700 !important; } #desktop-contextbar .context-tab.active { color:var(--ef-accent) !important; border-bottom-color:var(--ef-accent) !important; filter:none !important; } #desktop-contextbar .people-panel { padding:20px 0 28px !important; border-top:0 !important; background:transparent !important; } #desktop-contextbar .people-feature { min-height:126px !important; margin:0 -22px !important; padding:24px 22px 18px !important; border-bottom:1px solid var(--ef-line) !important; background:transparent !important; } #desktop-contextbar .people-feature-title { color:var(--ef-text) !important; font-size:18px !important; font-weight:800 !important; } #desktop-contextbar .people-feature-title i, #desktop-contextbar .context-toggle { color:var(--ef-accent) !important; filter:none !important; } #desktop-contextbar .people-feature-stats { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:6px !important; margin-top:34px !important; } #desktop-contextbar .people-feature-stats span { min-width:0 !important; padding:10px 4px !important; border:1px solid rgba(53,214,197,.36) !important; border-radius:5px !important; background:#101715 !important; color:#8b9097 !important; box-shadow:none !important; font-size:9px !important; line-height:1.3 !important; overflow:hidden !important; } #desktop-contextbar .people-feature-stats b { color:var(--ef-accent) !important; font-size:13px !important; font-weight:800 !important; overflow-wrap:anywhere !important; } #desktop-contextbar .people-activity-legend { margin:10px 2px 0 !important; color:#7d8684 !important; font-size:10px !important; line-height:1.5 !important; } #desktop-contextbar .people-rank-card { margin:18px 0 0 !important; padding:20px 16px 8px !important; border:1px solid var(--ef-line-strong) !important; border-radius:8px !important; background:#101013 !important; box-shadow:none !important; overflow:hidden !important; } #desktop-contextbar .people-row { grid-template-columns:22px minmax(0,1fr) auto minmax(48px,auto) !important; gap:8px !important; min-width:0 !important; } #desktop-contextbar .people-row > div { min-width:0 !important; } #desktop-contextbar .people-head { display:grid !important; grid-template-columns:minmax(0,1fr) auto 36px !important; gap:14px !important; padding-bottom:14px !important; } #desktop-contextbar .people-head strong { color:var(--ef-text) !important; font-size:19px !important; font-weight:800 !important; } #desktop-contextbar .people-head span { color:#85818d !important; font-size:13px !important; font-weight:600 !important; white-space:nowrap !important; } #desktop-contextbar .people-refresh, #desktop-contextbar .agent-new-chat { border-color:var(--ef-line-strong) !important; background:transparent !important; color:#8b8794 !important; box-shadow:none !important; } #desktop-contextbar .people-rank-tabs { gap:34px !important; border-bottom:1px solid var(--ef-line) !important; } #desktop-contextbar .people-rank-tabs button { padding-bottom:11px !important; border-bottom-width:2px !important; color:#85818d !important; font-size:15px !important; font-weight:700 !important; } #desktop-contextbar .people-rank-tabs button.active { color:var(--ef-text) !important; border-bottom-color:var(--ef-accent) !important; filter:none !important; } #desktop-contextbar .people-feedback.error { margin:12px 0 0 !important; border-color:#6a383f !important; background:#2a171b !important; color:#e3a4ad !important; } #desktop-contextbar .people-score-note { margin:18px 0 12px !important; color:#77737f !important; font-size:14px !important; line-height:1.55 !important; } #desktop-contextbar .people-row { grid-template-columns:34px minmax(0,1fr) 102px 82px !important; gap:12px !important; padding:15px 0 !important; border-bottom:1px solid #1d1e23 !important; } #desktop-contextbar .people-row:hover { background:transparent !important; transform:none !important; } #desktop-contextbar .people-row > b { color:var(--ef-accent) !important; font-size:22px !important; font-weight:800 !important; } #desktop-contextbar .people-row:nth-child(n+4) > b { color:#77737f !important; } #desktop-contextbar .people-row div strong { color:#ebe9ef !important; font-size:16px !important; font-weight:750 !important; } #desktop-contextbar .people-row div small { color:#66636f !important; font-size:12px !important; } #desktop-contextbar .people-row > span { color:var(--ef-accent) !important; text-align:right !important; font-size:25px !important; font-weight:800 !important; } #desktop-contextbar .people-row > span small { color:#66636f !important; font-size:11px !important; font-weight:500 !important; } #desktop-contextbar .people-row button:not(.muted) { min-width:78px !important; height:32px !important; padding:0 12px !important; border:1.5px solid #15958a !important; border-radius:8px !important; background:transparent !important; color:#2ee4d3 !important; font-size:14px !important; font-weight:850 !important; line-height:30px !important; text-shadow:0 0 10px rgba(46,228,211,.22) !important; box-shadow:none !important; } #desktop-contextbar .people-row button:not(.muted):hover { background:rgba(46,228,211,.08) !important; border-color:#2ee4d3 !important; color:#6ffff2 !important; } #desktop-nav { font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important; } #desktop-nav .desktop-nav-brand { display:grid !important; grid-template-columns:22px minmax(0,1fr) !important; align-items:start !important; gap:10px !important; padding:0 4px 28px !important; font-size:17px !important; font-weight:780 !important; letter-spacing:0 !important; } #desktop-nav .desktop-nav-brand i { display:grid !important; place-items:center !important; width:18px !important; height:18px !important; margin-top:1px !important; color:#f1eff4 !important; font-size:13px !important; font-style:normal !important; line-height:1 !important; } #desktop-nav .desktop-nav-brand > div { min-width:0 !important; color:#f1eff4 !important; font-size:17px !important; font-weight:780 !important; line-height:1.15 !important; } #desktop-nav .desktop-nav-brand span { display:block !important; font-size:13px !important; font-weight:520 !important; color:#77737f !important; letter-spacing:0 !important; margin-top:10px !important; line-height:1.25 !important; } #desktop-nav .desktop-nav-item { min-height:58px !important; padding:0 24px !important; color:#92909a !important; font-size:16px !important; font-weight:650 !important; line-height:58px !important; letter-spacing:0 !important; } #desktop-nav .desktop-nav-item.active { color:#f2f0f5 !important; background:#191a1f !important; font-weight:680 !important; } #desktop-nav .desktop-nav-item.active::before { top:10px !important; bottom:10px !important; width:3px !important; background:#35d6c5 !important; } #desktop-nav .desktop-nav-badge { min-width:22px !important; height:19px !important; border-radius:4px !important; background:var(--ef-accent) !important; color:#051311 !important; font-size:11px !important; font-weight:850 !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app :is(.glass-card,.glass-card-frosted,.bg-card,.bg-white,.rounded-xl,.rounded-2xl), body.desktop-dark :is(.broadcast-card,.library-grid article,.official-library-grid a,.exam-quick > a,.profile-section,.checkin-stats,.checkin-calendar,.checkin-log,.focus-summary,.focus-insights,.report-panel) { border:1px solid #2f3139 !important; border-radius:6px !important; background:#101014 !important; box-shadow:none !important; color:#ecebf0 !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app :is(.glass-card,.glass-card-frosted,.bg-card,.bg-white,.rounded-xl,.rounded-2xl):hover, body.desktop-dark :is(.broadcast-card,.library-grid article,.official-library-grid a,.exam-quick > a):hover { border-color:#3a3d46 !important; background:#131419 !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app :is(h1,h2,h3,strong,b), body.desktop-dark :is(.broadcast-card h2,.official-library-grid strong,.library-grid strong) { color:#f1eff4 !important; letter-spacing:0 !important; } body.desktop-dark:not(.route-qa):not(.route-grade) #app :is(p,small,time,label,span:not(.desktop-nav-badge)) { letter-spacing:0 !important; } #desktop-home { background:#070709 !important; } #desktop-home .home-topbar { height:72px !important; border-bottom-color:#23242a !important; background:rgba(7,7,9,.84) !important; } #desktop-home .home-brand { font-size:17px !important; font-weight:820 !important; } #desktop-home .home-topbar button, #desktop-home .home-topbar a { font-size:13px !important; font-weight:700 !important; color:#8f8b96 !important; } #desktop-home .home-topbar button:hover, #desktop-home .home-topbar a:hover { color:#f1eff4 !important; } #desktop-home .map-panel { background: radial-gradient(circle at 72% 30%,rgba(53,214,197,.12),transparent 24%), radial-gradient(circle at 58% 58%,rgba(53,214,197,.06),transparent 32%), #070709 !important; } #desktop-home h1 { font-size:70px !important; font-weight:850 !important; letter-spacing:0 !important; } #desktop-home .home-sub { max-width:410px !important; color:#b7b3bd !important; font-size:16px !important; } #desktop-home .home-actions button { border-color:#178f83 !important; background:#178f83 !important; color:#fff !important; font-size:13px !important; font-weight:800 !important; } #desktop-home .home-actions span, #desktop-home .home-stats { border-color:#2b2d34 !important; background:rgba(10,10,13,.82) !important; } #desktop-home .home-stat strong { color:#f1eff4 !important; font-size:28px !important; font-weight:820 !important; } #desktop-home .school-inspector strong { color:var(--ef-accent) !important; } #desktop-home .home-gbc-mark { display:none !important; } body.route-yibentong-anki #app { background:#070709 !important; } body.route-yibentong-anki #app .min-h-screen { width:min(1240px,calc(100% - 48px)) !important; max-width:1240px !important; padding:34px 0 76px !important; } body.route-yibentong-anki #app .desktop-yibentong-redesign { display:grid !important; grid-template-columns:repeat(12,minmax(0,1fr)) !important; gap:16px !important; align-content:start !important; } body.route-yibentong-anki #app .desktop-yibentong-hero { grid-column:1 / -1 !important; display:grid !important; grid-template-columns:44px minmax(0,1fr) 260px !important; gap:12px 16px !important; align-items:center !important; min-height:0 !important; margin:0 !important; padding:0 0 16px !important; border-bottom:1px solid #2a2c33 !important; background:transparent !important; } body.route-yibentong-anki #app .desktop-yibentong-hero :is(h1,h2,p,span,strong,b,div) { letter-spacing:0 !important; text-shadow:none !important; } body.route-yibentong-anki #app .desktop-yibentong-hero [style*="font-size: 24px"], body.route-yibentong-anki #app .desktop-yibentong-hero [style*="font-size:24px"] { color:#f1eff4 !important; font-size:32px !important; font-weight:850 !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > button:first-child { width:42px !important; height:42px !important; min-height:42px !important; border:1px solid #343741 !important; border-radius:7px !important; background:#101014 !important; } body.route-yibentong-anki #desktop-yibentong-puzzle { grid-column:3 !important; grid-row:1 / span 2 !important; min-height:64px !important; border:1px solid #30333c !important; border-radius:7px !important; background:#101014 !important; } body.route-yibentong-anki #app .desktop-yibentong-stats { grid-column:1 / -1 !important; display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; min-height:92px !important; margin:2px 0 0 !important; padding:0 !important; border:1px solid #30333c !important; border-radius:7px !important; background:#101014 !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > * { display:grid !important; place-items:center !important; min-height:92px !important; border-right:1px solid #272a31 !important; background:transparent !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > :last-child { border-right:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-workspace { grid-column:1 / -1 !important; display:grid !important; grid-template-columns:repeat(12,minmax(0,1fr)) !important; gap:18px !important; } body.route-yibentong-anki #app .desktop-yibentong-quick { grid-column:1 / -1 !important; display:grid !important; gap:12px !important; padding:0 !important; border:0 !important; background:transparent !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:12px !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 > :is(button,taro-button-core) { min-height:78px !important; border:1px solid #30333c !important; border-radius:7px !important; background:#101014 !important; color:#d9dce2 !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 > :is(button,taro-button-core):hover { border-color:#168f84 !important; background:#121d1b !important; } body.route-yibentong-anki #app .desktop-yibentong-filters { grid-column:1 / 5 !important; display:grid !important; gap:16px !important; min-height:250px !important; padding:20px !important; border:1px solid #30333c !important; border-radius:7px !important; background:#101014 !important; } body.route-yibentong-anki #app .desktop-yibentong-filters > div { display:grid !important; grid-template-columns:74px minmax(0,1fr) !important; gap:12px !important; align-items:start !important; } body.route-yibentong-anki #app .desktop-yibentong-filters > div > :last-child { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; } body.route-yibentong-anki #app .desktop-yibentong-volume { grid-column:5 / -1 !important; min-height:250px !important; padding:20px !important; border:1px solid #30333c !important; border-radius:7px !important; background:#101014 !important; } body.route-yibentong-anki #app .desktop-yibentong-volume > .flex.items-center.gap-3 { min-height:90px !important; padding:16px !important; border:1px solid #272a31 !important; border-radius:7px !important; background:#14161b !important; } body.route-yibentong-anki #app :is(button,taro-button-core).rounded-full { min-height:34px !important; height:34px !important; border-radius:5px !important; border:1px solid #2f333c !important; background:#151820 !important; color:#c8ced7 !important; } body.route-yibentong-anki #app :is(button,taro-button-core).rounded-full[style*="background"], body.route-yibentong-anki #app :is(button,taro-button-core)[style*="background: rgb(22, 143, 132)"] { border-color:#15958a !important; background:#168f84 !important; color:#fff !important; } body.route-yibentong-anki #app :is(button,taro-button-core)[style*="linear-gradient"] { border:1px solid #15958a !important; border-radius:7px !important; background:#168f84 !important; background-image:none !important; color:#fff !important; box-shadow:0 0 18px rgba(37,199,183,.18) !important; } #desktop-yibentong-volumes { grid-column:1 / -1 !important; display:grid !important; grid-template-columns:240px minmax(0,1fr) !important; gap:18px !important; padding:20px !important; border:1px solid #30333c !important; border-radius:7px !important; background:#101014 !important; } #desktop-yibentong-volumes header { min-width:0 !important; } #desktop-yibentong-volumes header span { display:block !important; color:#35d6c5 !important; font-size:11px !important; font-weight:850 !important; line-height:1.2 !important; } #desktop-yibentong-volumes header h2 { margin:10px 0 8px !important; color:#f1eff4 !important; font-size:24px !important; font-weight:850 !important; line-height:1.2 !important; } #desktop-yibentong-volumes header p { margin:0 !important; color:#8d94a0 !important; font-size:13px !important; line-height:1.65 !important; } #desktop-yibentong-volumes > div { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:12px !important; } #desktop-yibentong-volumes a { position:relative !important; display:grid !important; grid-template-rows:auto auto auto 1fr auto !important; min-height:172px !important; padding:16px !important; border:1px solid #2c3038 !important; border-radius:7px !important; background:#14161b !important; color:inherit !important; text-decoration:none !important; box-sizing:border-box !important; } #desktop-yibentong-volumes a:hover { border-color:#168f84 !important; background:#13201f !important; } #desktop-yibentong-volumes i { display:grid !important; place-items:center !important; width:34px !important; height:34px !important; margin-bottom:14px !important; border-radius:5px !important; background:#168f84 !important; color:#fff !important; font-size:18px !important; font-style:normal !important; font-weight:850 !important; } #desktop-yibentong-volumes strong { color:#f1eff4 !important; font-size:18px !important; font-weight:850 !important; } #desktop-yibentong-volumes b { margin-top:7px !important; color:#bfc4cc !important; font-size:13px !important; font-weight:650 !important; } #desktop-yibentong-volumes small { margin-top:12px !important; color:#7e8793 !important; font-size:12px !important; line-height:1.55 !important; } #desktop-yibentong-volumes em { align-self:end !important; margin-top:14px !important; color:#35d6c5 !important; font-size:12px !important; font-style:normal !important; font-weight:800 !important; } #desktop-contextbar .people-actions { justify-content:center !important; } #desktop-contextbar .people-actions button[data-friend-action="send"] { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:78px !important; min-width:78px !important; height:30px !important; min-height:30px !important; padding:0 !important; border:1px solid #168f84 !important; border-radius:8px !important; background:transparent !important; color:#35d6c5 !important; font-size:13px !important; font-weight:800 !important; line-height:28px !important; opacity:1 !important; box-shadow:none !important; text-shadow:none !important; } #desktop-contextbar .people-actions button[data-friend-action="send"]:hover { border-color:#35d6c5 !important; background:rgba(53,214,197,.08) !important; color:#7ef8ee !important; } #desktop-today .today-kicker, #desktop-today .today-subtitle, #desktop-today .today-card-heading span, #desktop-today .heatmap-months, #desktop-today .stat span, #desktop-today .activity small, #desktop-today .recommend span { color:#8d8995 !important; } #desktop-today h1 { color:#f3f1f5 !important; } #desktop-today .today-card-heading h2, #desktop-today .today-card h2 { color:#f0eef3 !important; } #desktop-today .progress-panel, #desktop-today .today-card { border-color:var(--ef-line-strong) !important; background:#101014 !important; box-shadow:none !important; } #desktop-today .heatmap-frame { border-color:var(--ef-line-strong) !important; background:#101014 !important; } #desktop-today .stat { background:#17171c !important; } } /* Ranking rail: match the compact EigenFlux leaderboard proportions and palette. */ @media (min-width:981px) { body { --desktop-right-width:406px !important; } #desktop-contextbar .people-rank-card { margin:18px 0 0 !important; padding:20px 13px 8px !important; border:1px solid #27272a !important; border-radius:8px !important; background:#111114 !important; box-shadow:none !important; } #desktop-contextbar .people-head { grid-template-columns:minmax(0,1fr) auto 30px !important; gap:10px !important; padding:0 0 14px !important; } #desktop-contextbar .people-head strong { color:#fafafa !important; font-size:16px !important; font-weight:700 !important; letter-spacing:.01em !important; } #desktop-contextbar .people-head span { color:#717179 !important; font-size:12px !important; font-weight:500 !important; } #desktop-contextbar .people-refresh { width:30px !important; height:30px !important; border:1px solid #27272a !important; border-radius:7px !important; color:#717179 !important; font-size:19px !important; } #desktop-contextbar .people-rank-tabs { gap:28px !important; border-bottom-color:#27272a !important; } #desktop-contextbar .people-rank-tabs button { padding:0 0 10px !important; color:#717179 !important; font-size:13px !important; font-weight:600 !important; } #desktop-contextbar .people-rank-tabs button.active { color:#fafafa !important; border-bottom-color:#68d1bf !important; } #desktop-contextbar .people-score-note { margin:15px 0 8px !important; color:#717179 !important; font-size:12px !important; line-height:1.55 !important; } #desktop-contextbar .people-list { border-bottom:1px dashed #27272a !important; } #desktop-contextbar .people-row { grid-template-columns:24px minmax(0,1fr) 68px 54px !important; gap:8px !important; min-height:60px !important; padding:11px 0 !important; border-bottom:0 !important; box-sizing:border-box !important; overflow:hidden !important; } #desktop-contextbar .people-row > b { color:#68d1bf !important; font-size:16px !important; font-weight:600 !important; } #desktop-contextbar .people-row:nth-child(n+4) > b { color:#717179 !important; } #desktop-contextbar .people-row div strong { color:#fafafa !important; font-size:16px !important; font-weight:500 !important; line-height:1.35 !important; } #desktop-contextbar .people-row > div:nth-child(2) { min-width:0 !important; } #desktop-contextbar .people-row div small { margin-top:4px !important; color:#717179 !important; font-size:12px !important; font-weight:400 !important; line-height:1.35 !important; } #desktop-contextbar .people-row > span { color:#7ff4e5 !important; text-align:right !important; font-size:18px !important; font-weight:600 !important; line-height:1.1 !important; font-variant-numeric:tabular-nums !important; min-width:0 !important; } #desktop-contextbar .people-row > span small { margin-top:5px !important; color:#717179 !important; font-size:11px !important; font-weight:400 !important; line-height:1.25 !important; } #desktop-contextbar .people-actions { justify-content:center !important; min-width:0 !important; } #desktop-contextbar .people-actions button[data-friend-action="send"], #desktop-contextbar .people-row button:not(.muted) { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:58px !important; min-width:0 !important; height:25px !important; min-height:25px !important; padding:0 !important; border:1px solid #3d716a !important; border-radius:7px !important; background:transparent !important; color:#68d1bf !important; font-size:12px !important; font-weight:600 !important; line-height:23px !important; opacity:1 !important; box-shadow:none !important; text-shadow:none !important; } #desktop-contextbar .people-actions button[data-friend-action="send"]:hover, #desktop-contextbar .people-row button:not(.muted):hover { border-color:#68d1bf !important; background:rgba(104,209,191,.07) !important; color:#8be3d4 !important; } } /* The official learning center uses the blue course palette, including its ranking rail. */ @media (min-width:981px) { body.route-learning #desktop-contextbar .people-feature-stats span { border-color:#394d73 !important; background:#121722 !important; box-shadow:inset 0 0 18px rgba(119,143,198,.04) !important; } body.route-learning #desktop-contextbar .people-feature-stats b, body.route-learning #desktop-contextbar .people-row > b, body.route-learning #desktop-contextbar .people-row > span { color:#9baed9 !important; } body.route-learning #desktop-contextbar .people-rank-tabs button.active { border-bottom-color:#9aadd9 !important; } body.route-learning #desktop-contextbar .people-actions button[data-friend-action="send"], body.route-learning #desktop-contextbar .people-row button:not(.muted) { border-color:#4b608d !important; color:#9baed9 !important; } body.route-learning #desktop-contextbar .people-actions button[data-friend-action="send"]:hover, body.route-learning #desktop-contextbar .people-row button:not(.muted):hover { border-color:#9baed9 !important; background:rgba(119,143,198,.08) !important; color:#c3cce0 !important; } } /* Learning workspace compatibility layer: supersedes the older overlapping layout rules. */ @media (min-width:981px) { body:is(.route-yibentong-anki,.route-yibentong-puzzle) { --desktop-left-width:280px !important; } body:is(.route-yibentong-anki,.route-yibentong-puzzle) #app { width:calc(100vw - var(--desktop-right-width)) !important; max-width:calc(100vw - var(--desktop-right-width)) !important; padding-left:var(--desktop-left-width) !important; padding-right:0 !important; } body.context-collapsed:is(.route-yibentong-anki,.route-yibentong-puzzle) #app { width:100vw !important; max-width:100vw !important; } body.route-yibentong-anki #app .min-h-screen { width:min(1320px,calc(100% - 72px)) !important; max-width:1320px !important; margin:0 auto !important; padding:40px 0 84px !important; } body.route-yibentong-anki #app .desktop-yibentong-redesign, body.route-yibentong-anki #app .desktop-yibentong-workspace { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:18px !important; width:100% !important; } body.route-yibentong-anki #app .desktop-yibentong-hero { grid-column:1 / -1 !important; grid-template-columns:44px minmax(0,1fr) 284px !important; } body.route-yibentong-anki #desktop-yibentong-puzzle { grid-column:3 !important; grid-row:1 / span 2 !important; width:100% !important; max-width:none !important; margin:0 !important; } body.route-yibentong-anki #desktop-yibentong-puzzle > span { display:block !important; width:auto !important; min-width:150px !important; } body.route-yibentong-anki #desktop-yibentong-puzzle :is(strong,small) { white-space:nowrap !important; word-break:keep-all !important; } body.route-yibentong-anki #app .desktop-yibentong-quick, body.route-yibentong-anki #app #desktop-yibentong-volumes, body.route-yibentong-anki #app .desktop-yibentong-filters, body.route-yibentong-anki #app .desktop-yibentong-volume { grid-column:1 / -1 !important; width:100% !important; min-width:0 !important; } #desktop-yibentong-volumes { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:16px !important; } #desktop-yibentong-volumes header { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:24px !important; padding-bottom:16px !important; border-bottom:1px solid #272a31 !important; } #desktop-yibentong-volumes > div { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:12px !important; } #desktop-yibentong-volumes a { display:grid !important; grid-template-columns:40px minmax(0,1fr) !important; grid-template-rows:auto auto auto auto !important; gap:4px 12px !important; min-width:0 !important; min-height:126px !important; } #desktop-yibentong-volumes a i { grid-column:1 !important; grid-row:1 / span 3 !important; margin:0 !important; } #desktop-yibentong-volumes a :is(strong,b,small) { grid-column:2 !important; min-width:0 !important; margin:0 !important; } #desktop-yibentong-volumes a em { grid-column:1 / -1 !important; grid-row:4 !important; margin-top:10px !important; } body.route-yibentong-anki #app .desktop-yibentong-filters { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:12px !important; min-height:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-filters > div { grid-template-columns:86px minmax(0,1fr) !important; } body.route-yibentong-anki #app .desktop-yibentong-filters > div > :last-child { display:flex !important; flex-wrap:wrap !important; grid-template-columns:none !important; } body.route-yibentong-anki #app .desktop-yibentong-volume { min-height:0 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-redesign { width:min(1320px,calc(100% - 72px)) !important; max-width:1320px !important; min-height:100vh !important; margin:0 auto !important; padding:40px 0 88px !important; display:grid !important; grid-template-columns:minmax(0,1fr) !important; align-content:start !important; gap:16px !important; background:#070709 !important; color:#eef1f4 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero { padding:22px 24px !important; border:1px solid #30333c !important; border-radius:9px !important; background:#101014 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero > .flex.items-center { gap:22px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero svg { width:92px !important; height:92px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero .flex.flex-col.flex-1 { gap:10px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero .flex.flex-col.flex-1 > .flex:first-child > span:first-child { font-size:30px !important; line-height:1.2 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero .flex.flex-col.flex-1 span { font-size:13px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-tabs, body.route-yibentong-puzzle #app .desktop-puzzle-status-tabs, body.route-yibentong-puzzle #app .desktop-puzzle-content { padding:0 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-tabs > div, body.route-yibentong-puzzle #app .desktop-puzzle-status-tabs > div { padding:6px !important; border:1px solid #30333c !important; border-radius:8px !important; background:#101014 !important; gap:6px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-tabs button, body.route-yibentong-puzzle #app .desktop-puzzle-status-tabs button { min-height:44px !important; padding:9px 14px !important; border-radius:6px !important; font-size:15px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-content { display:grid !important; gap:18px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume { margin:0 !important; padding:20px !important; border:1px solid #30333c !important; border-radius:9px !important; background:#101014 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-head { margin:0 0 16px !important; padding:0 0 14px !important; border:0 !important; border-bottom:1px solid #272a31 !important; background:transparent !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-head span:first-child, body.route-yibentong-puzzle #app .desktop-puzzle-topic > .flex.items-center > span:nth-child(2) { font-size:18px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-head span { font-size:13px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-board { padding:18px !important; border:1px solid #272a31 !important; border-radius:8px !important; background:#14161b !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic { margin-bottom:22px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic:last-child { margin-bottom:0 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic > .flex.items-center { gap:9px !important; min-height:36px !important; margin-bottom:10px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic > .flex.items-center > span { font-size:13px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-grid { display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:9px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile { position:relative !important; min-width:0 !important; min-height:104px !important; padding:25px 10px 13px !important; border-radius:8px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile > span:first-child { position:absolute !important; top:8px !important; left:9px !important; font-size:10px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile > span:not(:first-child) { max-width:94% !important; font-size:15px !important; line-height:1.5 !important; word-break:normal !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile > [class*="i-mdi"] { margin-bottom:5px !important; font-size:14px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-legend { margin:0 !important; padding:14px 18px !important; border:1px solid #30333c !important; border-radius:8px !important; background:#101014 !important; gap:18px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-legend span { font-size:12px !important; } } @media (min-width:981px) and (max-width:1280px) { #desktop-yibentong-volumes > div, body.route-yibentong-puzzle #app .desktop-puzzle-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } body.desktop-light:is(.route-yibentong-anki,.route-yibentong-puzzle) #app, body.desktop-light.route-yibentong-puzzle #app .desktop-puzzle-redesign { background:#f5f7fa !important; } body.desktop-light.route-yibentong-puzzle #app :is(.desktop-puzzle-hero,.desktop-puzzle-volume-tabs > div,.desktop-puzzle-status-tabs > div,.desktop-puzzle-volume,.desktop-puzzle-legend) { border-color:#d8e1e9 !important; background:#fff !important; color:#26313b !important; } body.desktop-light.route-yibentong-puzzle #app .desktop-puzzle-board { border-color:#e1e7ed !important; background:#f7f9fb !important; } /* Dense desktop controls: use the full row instead of preserving the mobile stack. */ @media (min-width:981px) { body.route-yibentong-anki #app .desktop-yibentong-workspace { gap:10px !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 > :is(button,taro-button-core) { min-height:64px !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.items-center.gap-2.mb-3 { display:none !important; } body.route-yibentong-anki #app .desktop-yibentong-filters { display:grid !important; grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) !important; align-items:center !important; gap:10px 18px !important; min-height:0 !important; padding:12px 16px !important; } body.route-yibentong-anki #app .desktop-yibentong-filters > :nth-child(1), body.route-yibentong-anki #app .desktop-yibentong-filters > :nth-child(4) { display:flex !important; align-items:center !important; gap:7px !important; min-width:max-content !important; margin:0 !important; padding:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-filters > :nth-child(2), body.route-yibentong-anki #app .desktop-yibentong-filters > :nth-child(5) { display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:7px !important; min-width:0 !important; margin:0 !important; padding:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-filters > :nth-child(3) { display:none !important; } body.route-yibentong-anki #app .desktop-yibentong-filters > :nth-child(n+6) { grid-column:1 / -1 !important; width:100% !important; margin:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-filters :is(button,taro-button-core,.rounded-full) { flex:0 0 auto !important; width:auto !important; min-width:70px !important; max-width:none !important; height:30px !important; min-height:30px !important; padding:0 11px !important; white-space:nowrap !important; } body.route-yibentong-anki #app #desktop-yibentong-volumes { gap:10px !important; padding:14px !important; } body.route-yibentong-anki #app #desktop-yibentong-volumes header { padding-bottom:10px !important; } body.route-yibentong-anki #app #desktop-yibentong-volumes a { min-height:100px !important; padding:12px !important; } body.route-yibentong-anki #app .desktop-yibentong-volume { padding:12px 16px !important; } } @media (min-width:981px) and (max-width:1180px) { body.route-yibentong-anki #app .desktop-yibentong-filters { grid-template-columns:auto minmax(0,1fr) !important; } } /* Keep the intro pixels and the final heatmap on the exact same grid origin. */ /* Final interaction alignment and stable heatmap transition. */ @media (min-width:981px) { #desktop-today .heatmap-grids .heatmap, #desktop-today .heatmap-stage.show-heatmap .heatmap-intro, #desktop-today .heatmap-stage.show-heatmap .heatmap-real { transform:none !important; transform-origin:top left !important; } #desktop-contextbar .people-row > div:nth-child(2), #desktop-contextbar .people-actions { align-self:start !important; margin-top:1px !important; } } /* Knowledge puzzle v2: coordinated board, books and jigsaw pieces. */ @media (min-width:981px) { body.route-yibentong-puzzle #app { background:radial-gradient(circle at 78% 4%,rgba(104,209,191,.07),transparent 27%),#08090c !important; } body.route-yibentong-puzzle #app .desktop-puzzle-redesign { width:min(1440px,calc(100% - 64px)) !important; max-width:1440px !important; padding:34px 0 96px !important; gap:18px !important; background:transparent !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero { position:relative !important; min-height:160px !important; padding:28px 32px !important; overflow:hidden !important; border:1px solid #30343c !important; border-radius:18px !important; background:linear-gradient(115deg,rgba(104,209,191,.12),transparent 42%),linear-gradient(180deg,#15171c,#101216) !important; box-shadow:0 22px 60px rgba(0,0,0,.22) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero::after { content:'' !important; position:absolute !important; right:34px !important; top:-28px !important; width:126px !important; height:126px !important; border:1px solid rgba(104,209,191,.15) !important; border-radius:24px !important; background:rgba(104,209,191,.035) !important; transform:rotate(15deg) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero > .flex.items-center { position:relative !important; z-index:1 !important; gap:28px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero svg { width:108px !important; height:108px !important; filter:drop-shadow(0 12px 24px rgba(0,0,0,.28)) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero .flex.flex-col.flex-1 > .flex:first-child > span:first-child { color:#fafafa !important; font-size:30px !important; font-weight:750 !important; letter-spacing:-.02em !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero .flex.flex-col.flex-1 span { color:#9499a4 !important; font-size:14px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-tabs > div, body.route-yibentong-puzzle #app .desktop-puzzle-status-tabs > div { padding:7px !important; border:1px solid #2b2f36 !important; border-radius:14px !important; background:#101216 !important; gap:7px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-tabs button, body.route-yibentong-puzzle #app .desktop-puzzle-status-tabs button { min-height:46px !important; padding:10px 16px !important; border:1px solid transparent !important; border-radius:10px !important; color:#858b96 !important; background:transparent !important; font-size:14px !important; font-weight:650 !important; transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-tabs button:hover, body.route-yibentong-puzzle #app .desktop-puzzle-status-tabs button:hover { border-color:#343942 !important; background:#171a20 !important; color:#d9dde3 !important; transform:translateY(-1px) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-content { gap:22px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume { position:relative !important; padding:22px !important; overflow:hidden !important; border:1px solid #2c3038 !important; border-radius:18px !important; background:#101216 !important; box-shadow:0 18px 48px rgba(0,0,0,.16) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume::before { content:'PUZZLE BOOK' !important; position:absolute !important; top:20px !important; right:22px !important; color:#555c67 !important; font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace !important; letter-spacing:.14em !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-head { position:relative !important; min-height:56px !important; margin:0 0 18px !important; padding:0 150px 16px 14px !important; border-bottom:1px solid #2a2e35 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-head::before { content:'' !important; position:absolute !important; left:0 !important; top:2px !important; bottom:18px !important; width:3px !important; border-radius:3px !important; background:#68d1bf !important; box-shadow:0 0 16px rgba(104,209,191,.28) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-head span:first-child { color:#f5f6f8 !important; font-size:19px !important; font-weight:720 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-board { padding:18px !important; overflow:visible !important; border:1px solid #282c33 !important; border-radius:14px !important; background:linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px),#0c0e12 !important; background-size:28px 28px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic { margin-bottom:26px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic > .flex.items-center { min-height:38px !important; margin-bottom:14px !important; gap:10px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic > .flex.items-center::before { content:'\25C8' !important; display:grid !important; place-items:center !important; width:22px !important; height:22px !important; border:1px solid rgba(104,209,191,.28) !important; border-radius:6px !important; background:rgba(104,209,191,.06) !important; color:#68d1bf !important; font-size:9px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic > .flex.items-center > span:nth-child(2) { color:#dfe3e8 !important; font-size:16px !important; font-weight:680 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-grid { grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:14px !important; overflow:visible !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile { position:relative !important; isolation:isolate !important; min-height:124px !important; padding:30px 16px 16px !important; overflow:visible !important; border-radius:13px !important; box-shadow:0 10px 26px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.025) !important; transition:transform .16s ease,filter .16s ease !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile::before { content:'' !important; position:absolute !important; z-index:-1 !important; top:50% !important; right:-8px !important; width:16px !important; height:16px !important; margin-top:-8px !important; border-radius:50% !important; background:inherit !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile::after { content:'' !important; position:absolute !important; z-index:2 !important; left:50% !important; bottom:-8px !important; width:16px !important; height:16px !important; margin-left:-8px !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:50% !important; background:#0c0e12 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile:nth-child(5n)::before { display:none !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile:hover { z-index:4 !important; transform:translateY(-4px) !important; filter:brightness(1.13) saturate(1.08) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile > span:not(:first-child) { max-width:100% !important; color:#dce0e5 !important; font-size:14px !important; font-weight:560 !important; line-height:1.5 !important; text-align:left !important; } body.route-yibentong-puzzle #app .desktop-puzzle-legend { padding:16px 20px !important; border:1px solid #2c3038 !important; border-radius:14px !important; background:#101216 !important; gap:22px !important; } } @media (min-width:981px) and (max-width:1500px) { body.route-yibentong-puzzle #app .desktop-puzzle-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile:nth-child(5n)::before { display:block !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile:nth-child(4n)::before { display:none !important; } } /* Knowledge puzzle readability guard: the source page ships mobile-scale 6–10px text. */ @media (min-width:981px) { body.route-yibentong-puzzle #app .desktop-puzzle-volume-tabs button, body.route-yibentong-puzzle #app .desktop-puzzle-status-tabs button { font-size:15px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic > .flex.items-center > span:nth-child(2) { font-size:17px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile > span:not(:first-child) { font-size:15px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-legend span { font-size:13px !important; } } /* Learning overview v3: shared page gutters, compact summary and clear quick actions. */ @media (min-width:981px) { body:is(.route-yibentong-anki,.route-yibentong-puzzle) { --desktop-left-width:318px !important; } body.desktop-nav-collapsed:is(.route-yibentong-anki,.route-yibentong-puzzle) #app { padding-left:0 !important; } body.route-yibentong-anki #app .min-h-screen, body.route-yibentong-puzzle #app .desktop-puzzle-redesign { width:100% !important; max-width:none !important; margin:0 !important; padding:var(--desktop-page-top) var(--desktop-page-gutter) 88px !important; box-sizing:border-box !important; } body.route-yibentong-anki #app .desktop-yibentong-redesign { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:20px !important; width:100% !important; max-width:none !important; min-height:0 !important; align-content:start !important; } body.route-yibentong-anki #app .desktop-yibentong-hero { position:relative !important; display:grid !important; grid-template-columns:44px minmax(0,1fr) 270px !important; grid-template-rows:auto auto auto !important; gap:7px 16px !important; align-items:center !important; min-height:0 !important; height:auto !important; margin:0 !important; padding:22px !important; overflow:hidden !important; border:1px solid #2d3138 !important; border-radius:12px !important; background:linear-gradient(118deg,rgba(104,209,191,.075),transparent 35%),#0f1115 !important; box-shadow:none !important; } body.route-yibentong-anki #app .desktop-yibentong-hero::after { content:'' !important; position:absolute !important; top:-54px !important; right:210px !important; width:150px !important; height:150px !important; border:1px solid rgba(104,209,191,.09) !important; border-radius:34px !important; transform:rotate(18deg) !important; pointer-events:none !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > button:first-child { grid-column:1 !important; grid-row:1 / span 2 !important; align-self:start !important; width:44px !important; height:44px !important; min-height:44px !important; border:1px solid #343942 !important; border-radius:9px !important; background:#14171c !important; color:#68d1bf !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > .flex.items-center.gap-3 { grid-column:2 !important; grid-row:1 !important; min-width:0 !important; margin:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > p { grid-column:2 !important; grid-row:2 !important; margin:0 !important; color:#8d95a0 !important; font-size:13px !important; line-height:1.5 !important; } body.route-yibentong-anki #app .desktop-yibentong-hero [style*="font-size: 24px"], body.route-yibentong-anki #app .desktop-yibentong-hero [style*="font-size:24px"] { color:#f3f5f7 !important; font-size:30px !important; font-weight:760 !important; line-height:1.18 !important; letter-spacing:-.025em !important; } body.route-yibentong-anki #desktop-yibentong-puzzle { grid-column:3 !important; grid-row:1 / span 2 !important; align-self:stretch !important; width:100% !important; max-width:none !important; min-height:66px !important; margin:0 !important; padding:13px 15px !important; border:1px solid #343942 !important; border-radius:10px !important; background:#14171c !important; } body.route-yibentong-anki #desktop-yibentong-puzzle:hover { border-color:#3d716a !important; background:#14201f !important; } body.route-yibentong-anki #desktop-yibentong-puzzle strong { color:#edf1f3 !important; font-size:15px !important; } body.route-yibentong-anki #desktop-yibentong-puzzle small { margin-top:3px !important; color:#7f8791 !important; font-size:12px !important; } body.route-yibentong-anki #app .desktop-yibentong-stats { grid-column:1 / -1 !important; grid-row:3 !important; display:flex !important; flex-wrap:nowrap !important; align-items:stretch !important; width:100% !important; min-height:88px !important; height:auto !important; margin:16px 0 0 !important; padding:0 !important; overflow:hidden !important; border:1px solid #2b3037 !important; border-radius:10px !important; background:#0b0d11 !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > * { position:relative !important; display:grid !important; flex:1 1 0 !important; place-items:center !important; min-width:0 !important; min-height:88px !important; margin:0 !important; padding:12px 10px !important; border:0 !important; border-right:1px solid #252a31 !important; background:transparent !important; box-sizing:border-box !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child { flex:0 0 108px !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > :last-child { border-right:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-stats [style*="123, 92, 246"], body.route-yibentong-anki #app .desktop-yibentong-stats [style*="#7B5CF6"], body.route-yibentong-anki #app .desktop-yibentong-stats [style*="#7b5cf6"] { display:none !important; } body.route-yibentong-anki #app .desktop-yibentong-workspace { display:grid !important; grid-template-columns:minmax(0,1fr) !important; align-content:start !important; justify-content:stretch !important; gap:16px !important; width:100% !important; min-height:0 !important; height:auto !important; margin:0 !important; padding:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-redesign > .desktop-yibentong-workspace { margin:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-workspace > * { margin-top:0 !important; margin-bottom:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-quick { display:grid !important; gap:13px !important; width:100% !important; min-height:0 !important; padding:18px !important; border:1px solid #2d3138 !important; border-radius:12px !important; background:#0f1115 !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.items-center.gap-2.mb-3 { display:flex !important; align-items:center !important; gap:8px !important; width:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; color:#aeb5bd !important; font-size:13px !important; font-weight:650 !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 > :is(button,taro-button-core) { min-height:96px !important; padding:16px 18px !important; border:1px solid #30353d !important; border-radius:10px !important; background:#14171c !important; color:#e2e6ea !important; box-shadow:none !important; transition:transform .16s ease,border-color .16s ease,background .16s ease !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 > :is(button,taro-button-core):first-child { border-color:#356860 !important; background:linear-gradient(135deg,rgba(104,209,191,.09),transparent 55%),#131a1a !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 > :is(button,taro-button-core):hover { transform:translateY(-2px) !important; border-color:#4b7d76 !important; background:#17201f !important; } body.route-yibentong-anki #app .desktop-yibentong-quick :is(i,[class*="i-mdi"]) { color:#68d1bf !important; font-size:20px !important; } body.route-yibentong-anki #app :is(#desktop-yibentong-volumes,.desktop-yibentong-filters,.desktop-yibentong-volume) { border-radius:12px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-redesign { gap:20px !important; background:transparent !important; } } @media (min-width:981px) and (max-width:1260px) { body.route-yibentong-anki #app .desktop-yibentong-hero { grid-template-columns:44px minmax(0,1fr) !important; } body.route-yibentong-anki #desktop-yibentong-puzzle { grid-column:1 / -1 !important; grid-row:auto !important; } } /* Course hub: student-facing PDF answer archive. */ .course-hub-shell { width:min(1180px,calc(100% - 64px)); margin:0 auto; padding:46px 0 74px; } .course-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:46px; align-items:end; min-height:320px; padding:48px 52px; overflow:hidden; border:1px solid #262b2f; border-radius:14px; background:radial-gradient(circle at 82% 16%,rgba(51,214,194,.16),transparent 31%),linear-gradient(125deg,#101415 0%,#111315 58%,#0d1212 100%); box-shadow:0 24px 70px rgba(0,0,0,.22); } .course-hero::before { content:""; position:absolute; inset:0; opacity:.28; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:38px 38px; mask-image:linear-gradient(90deg,#000,transparent 78%); } .course-hero::after { content:"SUMMER\A COURSE"; white-space:pre; position:absolute; top:28px; right:34px; color:rgba(255,255,255,.025); font-size:72px; font-weight:800; line-height:.86; letter-spacing:-.06em; text-align:right; pointer-events:none; } .course-hero-copy,.course-progress-card { position:relative; z-index:1; } .course-live { display:flex; align-items:center; gap:9px; color:#6be2d3; font-size:11px; font-weight:800; letter-spacing:.14em; } .course-live i { width:7px; height:7px; border-radius:50%; background:#54dac9; box-shadow:0 0 0 5px rgba(84,218,201,.10),0 0 18px rgba(84,218,201,.72); } .course-hero h1 { margin:21px 0 16px; color:#f5f7f8; font-size:42px; line-height:1.14; letter-spacing:-.035em; } .course-hero-copy > p { max-width:650px; margin:0; color:#9aa1a8; font-size:15px; line-height:1.85; } .course-hero-actions { display:flex; align-items:center; gap:22px; margin-top:32px; } .course-hero-actions > button { display:inline-flex; align-items:center; gap:14px; min-height:44px; padding:0 20px; border:1px solid #62d8c9; border-radius:6px; background:#38b9aa; color:#07110f; font-size:13px; font-weight:800; cursor:pointer; box-shadow:0 9px 25px rgba(36,176,159,.16); } .course-hero-actions > button:hover { transform:translateY(-1px); background:#54d2c3; } .course-hero-actions > button b { font-size:15px; } .course-hero-actions > span { color:#7f888e; font-size:11px; } .course-hero-actions > span i { margin-right:4px; color:#50cfc0; } .course-hero-actions > .course-schedule-rule { padding:7px 9px; border:1px solid rgba(80,207,192,.28); border-radius:999px; background:rgba(80,207,192,.08); color:#b7ebe5; font-weight:750; } .course-progress-card { padding:22px 22px 20px; border:1px solid rgba(118,218,205,.19); border-radius:10px; background:rgba(5,10,11,.58); backdrop-filter:blur(14px); } .course-progress-card > span { color:#74dacd; font-size:9px; font-weight:800; letter-spacing:.15em; } .course-progress-card > div:nth-of-type(1) { display:flex; align-items:baseline; gap:7px; margin-top:16px; } .course-progress-card strong { color:#fff; font-size:40px; line-height:1; letter-spacing:-.06em; } .course-progress-card em { color:#8e969c; font-size:11px; font-style:normal; } .course-progress-track { height:4px; margin-top:18px; overflow:hidden; border-radius:8px; background:#252b2d; } .course-progress-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#20a99a,#6ce0d2); transition:width .35s ease; } .course-progress-card p { margin:14px 0 0; color:#7e878d; font-size:10px; line-height:1.5; } .course-toolbar { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-top:48px; padding-bottom:20px; border-bottom:1px solid #25282d; scroll-margin-top:24px; } .course-toolbar > div:first-child > span { color:#42c9ba; font-size:10px; font-weight:800; letter-spacing:.13em; } .course-toolbar h2 { margin:8px 0 0; color:#edf0f2; font-size:25px; line-height:1.2; } .course-toolbar-actions { display:flex; align-items:center; gap:10px; } .course-search { display:flex; align-items:center; gap:8px; width:220px; height:38px; padding:0 12px; box-sizing:border-box; border:1px solid #2a2e33; border-radius:6px; background:#111317; color:#6f777e; } .course-search input { width:100%; border:0; outline:0; background:transparent; color:#e8eaec; font-size:11px; } .course-search input::placeholder { color:#686f75; } .course-admin-upload { height:38px; padding:0 14px; border:1px solid #399e93; border-radius:6px; background:#153431; color:#65ddcf; font-size:11px; font-weight:700; cursor:pointer; } .course-admin-upload[hidden] { display:none !important; } .course-filter-row { display:flex; gap:6px; padding:18px 0 20px; } .course-filter-row button { min-width:68px; height:30px; padding:0 12px; border:1px solid transparent; border-radius:5px; background:transparent; color:#777f86; font-size:11px; cursor:pointer; } .course-filter-row button:hover { color:#cbd0d4; } .course-filter-row button.active { border-color:#304b49; background:#14211f; color:#64d9cb; } .course-answer-grid { display:grid; gap:10px; } .course-answer-card { display:grid; grid-template-columns:88px minmax(0,1fr) 126px; gap:24px; align-items:center; min-height:140px; padding:20px 22px 20px 18px; border:1px solid #25292e; border-radius:9px; background:#111318; transition:border-color .18s ease,background .18s ease,transform .18s ease; } .course-answer-card.is-ready:hover { transform:translateY(-1px); border-color:#3b756f; background:#121817; } .course-card-number { align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center; border-right:1px solid #262a2e; } .course-card-number span { color:#5d666d; font-size:8px; font-weight:800; letter-spacing:.12em; } .course-card-number strong { margin:8px 0 4px; color:#dfe3e5; font-size:34px; font-weight:650; line-height:1; letter-spacing:-.06em; } .course-card-number em { color:#626a70; font-size:9px; font-style:normal; } .course-card-main { min-width:0; } .course-card-status { display:flex; align-items:center; gap:12px; } .course-card-status > span { color:#70787e; font-size:9px; font-weight:800; letter-spacing:.06em; } .is-ready .course-card-status > span { color:#50cfc0; } .course-card-status > span i { display:inline-block; width:5px; height:5px; margin-right:6px; border-radius:50%; background:#50cfc0; box-shadow:0 0 9px rgba(80,207,192,.7); vertical-align:1px; } .course-card-status time { padding-left:12px; border-left:1px solid #292d32; color:#646c72; font-size:9px; } .course-card-main h3 { margin:10px 0 5px; overflow:hidden; color:#e8ebed; font-size:16px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; } .course-card-main > p { margin:0; color:#7c848b; font-size:11px; line-height:1.55; } .course-file-meta { display:flex; align-items:center; gap:6px; margin-top:12px; color:#646d73; font-size:9px; } .course-file-meta i { color:#c76868; font-size:15px; } .course-download { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:126px; height:70px; box-sizing:border-box; border:1px solid #367d75; border-radius:6px; background:#122321; color:#58d5c6; font-size:10px; font-weight:800; text-decoration:none; cursor:pointer; } .course-download:hover { border-color:#59d7c8; background:#17302d; color:#77eadc; } .course-download i { font-size:20px; } .course-download.pending { border-color:#292d32; background:#15171a; color:#666e75; cursor:not-allowed; } .course-list-loading,.course-empty { display:flex; min-height:240px; flex-direction:column; align-items:center; justify-content:center; border:1px dashed #2b3034; border-radius:9px; color:#6f777e; } .course-list-loading i { margin-bottom:10px; font-size:22px; animation:course-spin 1s linear infinite; } .course-empty i { margin-bottom:10px; color:#4d565d; font-size:30px; } .course-empty strong { color:#aeb4b9; font-size:13px; } .course-empty span { margin-top:7px; font-size:10px; } @keyframes course-spin { to { transform:rotate(360deg); } } .course-help { display:flex; align-items:center; gap:14px; margin-top:28px; padding:18px 20px; border:1px solid #252a2e; border-radius:8px; background:#0f1114; } .course-help > i { color:#4d9e95; font-size:22px; } .course-help > div { flex:1; min-width:0; } .course-help strong,.course-help span { display:block; } .course-help strong { color:#bdc3c7; font-size:11px; } .course-help span { margin-top:4px; color:#6e767c; font-size:10px; } .course-help button { border:0; background:transparent; color:#56cabc; font-size:10px; cursor:pointer; } #course-upload-modal { position:fixed; inset:0; z-index:420; display:grid; place-items:center; padding:24px; } .course-upload-backdrop { position:absolute; inset:0; background:rgba(3,5,6,.76); backdrop-filter:blur(8px); } .course-upload-dialog { position:relative; width:min(520px,calc(100vw - 48px)); box-sizing:border-box; padding:30px; border:1px solid #30373a; border-radius:12px; background:#121619; color:#eef1f2; box-shadow:0 34px 100px rgba(0,0,0,.5); } .course-upload-close { position:absolute; top:16px; right:17px; width:30px; height:30px; border:0; background:transparent; color:#7b848a; font-size:24px; cursor:pointer; } .course-upload-dialog > span { color:#51cfc0; font-size:9px; font-weight:800; letter-spacing:.14em; } .course-upload-dialog h2 { margin:9px 0 8px; font-size:23px; } .course-upload-dialog > p { margin:0; color:#7f898f; font-size:11px; line-height:1.65; } .course-upload-dialog form { display:grid; gap:14px; margin-top:24px; } .course-upload-dialog label:not(.course-upload-publish) { display:grid; gap:7px; color:#9aa2a7; font-size:10px; font-weight:700; } .course-upload-dialog select,.course-upload-dialog input[type="text"],.course-upload-dialog input:not([type]) { width:100%; height:40px; padding:0 12px; box-sizing:border-box; border:1px solid #30363a; border-radius:6px; outline:0; background:#0d1012; color:#e7eaeb; } .course-upload-dialog input[type="file"] { padding:11px; border:1px dashed #364044; border-radius:6px; background:#0d1012; color:#8f989d; font-size:10px; } .course-upload-publish { display:flex; align-items:center; gap:9px; color:#9aa2a7; font-size:10px; } .course-upload-submit { height:42px; border:1px solid #58d4c5; border-radius:6px; background:#36b3a4; color:#07110f; font-weight:800; cursor:pointer; } .course-upload-submit:disabled { opacity:.6; cursor:wait; } .course-upload-status { min-height:16px; color:#8a9398; font-size:10px; } .course-upload-status.success { color:#5ed9ca; } .course-upload-status.error { color:#e98080; } body.desktop-light .course-hero { border-color:#d9e3e3; background:radial-gradient(circle at 82% 16%,rgba(45,188,172,.16),transparent 31%),linear-gradient(125deg,#fff,#f2f8f7); box-shadow:0 22px 60px rgba(53,78,75,.09); } body.desktop-light .course-hero::before { opacity:.7; background-image:linear-gradient(rgba(26,94,85,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(26,94,85,.045) 1px,transparent 1px); } body.desktop-light .course-hero::after { color:rgba(18,85,77,.035); } body.desktop-light .course-hero h1,body.desktop-light .course-toolbar h2,body.desktop-light .course-card-main h3 { color:#202b30; } body.desktop-light .course-hero-copy > p,body.desktop-light .course-card-main > p { color:#69777c; } body.desktop-light .course-progress-card { border-color:#bcded9; background:rgba(255,255,255,.72); } body.desktop-light .course-progress-card strong { color:#253236; } body.desktop-light .course-toolbar { border-color:#d8e0e3; } body.desktop-light .course-search,body.desktop-light .course-answer-card,body.desktop-light .course-help { border-color:#dce4e6; background:#fff; } body.desktop-light .course-search input { color:#263238; } body.desktop-light .course-filter-row button.active { border-color:#b9dcd7; background:#eaf6f4; color:#188f82; } body.desktop-light .course-card-number { border-color:#e0e7e9; } body.desktop-light .course-card-number strong { color:#344047; } body.desktop-light .course-answer-card.is-ready:hover { border-color:#91c9c1; background:#fbfefd; } body.desktop-light .course-download { border-color:#83c7be; background:#ebf8f6; color:#168f82; } body.desktop-light .course-download.pending { border-color:#dce3e5; background:#f6f8f8; color:#8a9499; } body.desktop-light .course-upload-dialog { border-color:#d6e1e2; background:#fff; color:#253035; } body.desktop-light .course-upload-dialog select,body.desktop-light .course-upload-dialog input[type="text"],body.desktop-light .course-upload-dialog input:not([type]),body.desktop-light .course-upload-dialog input[type="file"] { border-color:#d6e0e2; background:#f7f9fa; color:#253035; } @media (max-width:1100px) { .course-hub-shell { width:min(100% - 40px,900px); } .course-hero { grid-template-columns:1fr; gap:28px; padding:40px; } .course-progress-card { width:min(360px,100%); box-sizing:border-box; } } @media (max-width:760px) { .course-hub-shell { width:calc(100% - 28px); padding-top:22px; } .course-hero { min-height:0; padding:30px 24px; border-radius:10px; } .course-hero h1 { font-size:32px; } .course-hero-actions,.course-toolbar { align-items:flex-start; flex-direction:column; } .course-toolbar-actions,.course-search { width:100%; } .course-admin-upload { white-space:nowrap; } .course-answer-card { grid-template-columns:64px minmax(0,1fr); gap:16px; padding:17px 16px 17px 10px; } .course-download { grid-column:2; width:100%; height:40px; flex-direction:row; } .course-card-number strong { font-size:27px; } .course-help { align-items:flex-start; } } .course-back-link { display:inline-flex; align-items:center; margin-bottom:18px; color:#6faaa3; font-size:11px; text-decoration:none; } .course-back-link:hover { color:#65ddcf; } .course-resource-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:18px; } .course-resource-overview article { display:flex; align-items:center; gap:14px; min-height:88px; padding:16px 18px; box-sizing:border-box; border:1px solid #252a2e; border-radius:8px; background:#101317; } .course-resource-overview article > i { display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; border-radius:8px; background:#142b29; color:#50cfc0; font-size:20px; } .course-resource-overview span,.course-resource-overview strong,.course-resource-overview small { display:block; } .course-resource-overview span { color:#6e777d; font-size:9px; font-weight:700; } .course-resource-overview strong { margin-top:4px; color:#dfe3e5; font-size:13px; } .course-resource-overview small { margin-top:4px; color:#626a70; font-size:9px; } .course-access-note { display:flex; align-items:center; gap:13px; margin-top:10px; padding:13px 16px; border:1px solid #3a3430; border-radius:7px; background:#181511; } .course-access-note > i { color:#d4a569; font-size:20px; } .course-access-note strong,.course-access-note span { display:block; } .course-access-note strong { color:#d4bd9e; font-size:10px; } .course-access-note span { margin-top:3px; color:#83766a; font-size:9px; } .course-answer-card.is-locked { opacity:.78; } .course-download.is-locked { color:#8b8074; } .course-catalog-shell { width:min(1180px,calc(100% - 64px)); margin:0 auto; padding:52px 0 78px; } .course-center-head { display:flex; align-items:flex-end; justify-content:space-between; gap:36px; padding:42px 0 34px; border-bottom:1px solid #252a2e; } .course-center-head > div > span,.course-catalog-heading > div > span { color:#50cfc0; font-size:10px; font-weight:800; letter-spacing:.14em; } .course-center-head h1 { margin:12px 0 10px; color:#f1f3f4; font-size:40px; line-height:1.1; } .course-center-head p { margin:0; color:#818a90; font-size:14px; } .course-center-head aside { display:flex; align-items:baseline; gap:9px; padding:18px 22px; border:1px solid #2b3437; border-radius:9px; background:#101416; } .course-center-head aside strong { color:#65ddcf; font-size:34px; } .course-center-head aside span { color:#7a8489; font-size:10px; } .course-catalog-section { margin-top:38px; } .course-catalog-section + .course-catalog-section { margin-top:54px; padding-top:38px; border-top:1px solid #252a2e; } .course-catalog-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; } .course-catalog-heading h2 { margin:8px 0 0; color:#e9ecee; font-size:23px; } .course-catalog-count { color:#65ddcf; font-size:11px; font-weight:700; } .course-material-intro { margin:10px 0 0; color:#7e888e; font-size:11px; } .course-package-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px; } .course-package-card { overflow:hidden; border:1px solid #5a4a70; border-radius:11px; background:linear-gradient(142deg,#171420,#101216 66%); } .course-package-card > header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:19px 20px 16px; border-bottom:1px solid #3c3546; background:linear-gradient(112deg,rgba(123,88,172,.24),rgba(17,18,22,.1)); } .course-package-card header span { color:#d2a9ef; font-size:9px; font-weight:800; letter-spacing:.13em; } .course-package-card h3 { margin:7px 0 4px; color:#f1ebf6; font-size:19px; line-height:1.35; } .course-package-card header p { margin:0; color:#a99eb1; font-size:10px; } .course-package-price { display:flex; flex-direction:column; align-items:flex-end; flex:0 0 auto; } .course-package-price small { color:#8d818e; font-size:9px; text-decoration:line-through; } .course-package-price strong { margin-top:5px; color:#ffc985; font-size:25px; line-height:1; } .course-package-card ol { display:grid; gap:8px; margin:0; padding:16px 20px 17px 37px; } .course-package-card li { padding-left:2px; color:#c6becd; font-size:11px; line-height:1.45; } .course-package-card li::marker { color:#c79be7; font-weight:800; } .course-package-card footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 20px; border-top:1px solid #3c3546; background:rgba(9,11,14,.3); } .course-package-card footer span { color:#c9aa7c; font-size:10px; line-height:1.4; } .course-package-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex:0 0 auto; } .course-package-actions button,.course-package-actions a { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:0 10px; border:1px solid #40384b; border-radius:6px; background:transparent; color:#c9c0d2; font-size:11px; font-weight:800; text-decoration:none; cursor:pointer; white-space:nowrap; } .course-package-actions a { border-color:#7a5094; background:#6f4289; color:#fff; } .course-package-actions button:hover { border-color:#725d83; color:#f0e7f7; } .course-package-actions a:hover { background:#80509c; } .course-package-actions a i { margin-left:4px; font-size:16px; font-style:normal; } .course-material-section { margin-top:44px; padding-top:24px; border-top:1px solid rgba(112,207,197,.16); } .course-material-section .course-material-intro { max-width:620px; margin-top:7px; } .course-material-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; } .course-material-card { display:grid; grid-template-columns:76px minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; min-height:132px; overflow:hidden; padding:0; box-sizing:border-box; border:1px solid #2f3738; border-radius:7px; background:#111519; box-shadow:0 8px 20px rgba(0,0,0,.13); transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease; } .course-material-card:hover { border-color:#3e756f; box-shadow:0 12px 26px rgba(0,0,0,.2); transform:translateY(-2px); } .course-material-visual { position:relative; display:grid; grid-row:1 / span 2; height:auto; min-height:100%; place-items:center; overflow:hidden; background:linear-gradient(135deg,#17292c,#2a2436 58%,#171a20); } .course-material-visual::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:24px 24px; opacity:.55; } .course-material-visual::after { content:""; position:absolute; inset:auto 20px 0; height:30px; background:radial-gradient(ellipse at center,rgba(0,0,0,.34),rgba(0,0,0,0) 68%); } .course-material-book { position:relative; z-index:1; display:grid; width:46px; height:65px; place-items:center; overflow:hidden; border-radius:3px; background:linear-gradient(135deg,#253b4b,#44345f); box-shadow:0 8px 14px rgba(0,0,0,.3); } .course-material-book::after { content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.16); border-radius:4px; pointer-events:none; } .course-material-book > span { position:relative; z-index:1; color:rgba(255,255,255,.86); font-size:7px; font-weight:800; line-height:1.4; letter-spacing:.08em; text-align:center; } .course-material-visual.has-cover { background:linear-gradient(135deg,#16292b,#222737 52%,#10161a); } .course-material-visual.has-cover::after { display:block; } .course-material-visual img { display:block !important; width:100%; height:100%; object-fit:cover; object-position:center; opacity:1 !important; visibility:visible !important; } .course-material-card.is-landscape-cover .course-material-visual { height:auto; } .course-material-card.is-landscape-cover .course-material-book { width:60px; max-width:80%; height:auto; aspect-ratio:1219/842; background:#214376; } .course-material-card.is-landscape-cover .course-material-book img { object-fit:contain; } .course-material-copy { min-width:0; padding:11px 12px 3px; } .course-material-copy > span { display:block; overflow:hidden; color:#70cfc5; font-size:10px; font-weight:800; line-height:1.5; text-overflow:ellipsis; white-space:nowrap; } .course-material-card strong { display:-webkit-box; min-height:19px; margin-top:4px; overflow:hidden; color:#eef2f2; font-size:13px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:1; } .course-material-card p { display:-webkit-box; min-height:16px; margin:3px 0 0; overflow:hidden; color:#94a0a5; font-size:10px; line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:1; } .course-material-card footer { grid-column:2; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:4px; padding:7px 12px 9px; border-top:1px solid #293033; } .course-material-card footer small { display:none; } .course-material-card footer div { display:flex; align-items:center; flex-direction:row; gap:7px; min-width:0; } .course-material-card footer b { color:#f0c384; font-size:13px; line-height:1; } .course-material-card footer span { color:#86aaa5; font-size:10px; } .course-material-card footer a { display:inline-flex; align-items:center; color:#67d5c8; font-size:9px; font-weight:800; text-decoration:none; white-space:nowrap; } .course-material-card footer a i { margin-left:3px; font-size:15px; font-style:normal; vertical-align:-1px; } .course-catalog-section-actions { display:flex; align-items:center; gap:16px; } .course-catalog-section-actions > a { color:#7edbd0; font-size:11px; font-weight:700; text-decoration:none; } .course-catalog-section-actions > a i { margin-left:4px; font-size:16px; font-style:normal; vertical-align:-1px; } .course-payment-guide { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:18px; padding:20px 24px; border:1px solid #725e91; border-radius:10px; background:linear-gradient(112deg,rgba(82,58,111,.28),rgba(17,20,24,.96)); } .course-payment-guide span { color:#c79ce5; font-size:9px; font-weight:800; letter-spacing:.12em; } .course-payment-guide h2 { margin:7px 0 5px; color:#f0e6f7; font-size:17px; } .course-payment-guide p { margin:0; color:#aaa2b2; font-size:11px; line-height:1.65; } .course-payment-gift { display:flex; align-items:center; gap:8px; margin-top:11px; } .course-payment-gift b { display:inline-flex; padding:4px 7px; border:1px solid rgba(255,188,93,.5); border-radius:4px; background:rgba(231,152,65,.13); color:#ffd08c; font-size:9px; } .course-payment-gift span { color:#f3d9ab; font-size:10px; font-weight:700; letter-spacing:0; } .course-payment-guide > div:last-child { display:flex; gap:9px; flex:0 0 auto; } .course-payment-guide a,.course-payment-guide button { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 15px; border:1px solid #b984db; border-radius:6px; background:#a96bcc; color:#fff; font-size:11px; font-weight:800; text-decoration:none; cursor:pointer; } .course-payment-guide button:last-child { border-color:#5a646d; background:transparent; color:#c5cbd0; } .course-payment-guide button:disabled { cursor:not-allowed; opacity:.65; } .course-school-section { margin-top:18px; padding:22px 24px 24px; border:1px solid #2e3e45; border-radius:10px; background:#10161a; } .course-school-section > header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; } .course-school-section header span { color:#73c8d7; font-size:9px; font-weight:800; letter-spacing:.12em; } .course-school-section h2 { margin:7px 0 5px; color:#edf1f2; font-size:18px; } .course-school-section p { margin:0; color:#88949a; font-size:10px; } .course-school-section header > b { color:#83d8d1; font-size:11px; } .course-school-section > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:18px; } .course-school-section article { min-height:80px; padding:13px; box-sizing:border-box; border:1px solid #29363b; border-radius:7px; background:#121b1e; } .course-school-section article i,.course-school-section article strong,.course-school-section article span { display:block; } .course-school-section article i { color:#55929a; font-size:9px; font-style:normal; } .course-school-section article strong { margin-top:6px; color:#e5eaeb; font-size:13px; } .course-school-section article span { margin-top:5px; color:#7e8c91; font-size:9px; } .course-topic-matrix { margin-top:18px; padding:26px 28px 22px; border:1px solid #5e4773; border-radius:8px; background:linear-gradient(135deg,#1a1520 0%,#111318 68%,#101419 100%); box-shadow:inset 0 1px rgba(255,255,255,.035); } .course-topic-matrix > header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; } .course-topic-matrix > header span { color:#d6b1f0; font-size:11px; font-weight:800; letter-spacing:.1em; } .course-topic-matrix h2 { margin:8px 0 7px; color:#faf5ff; font-size:24px; line-height:1.28; } .course-topic-matrix > header p { margin:0; color:#c2b8ca; font-size:13px; line-height:1.65; } .course-topic-matrix-tools { display:flex; flex:0 0 auto; align-items:flex-end; flex-direction:column; gap:9px; } .course-topic-matrix > header b { color:#f0d5ff; font-size:13px; } .course-topic-matrix-controls { display:flex; align-items:center; gap:9px; } .course-topic-matrix-controls span { min-width:86px; color:#c7bbd1 !important; font-size:11px !important; font-weight:700; letter-spacing:.04em !important; text-align:center; } .course-topic-matrix-controls button { display:grid; width:34px; height:34px; place-items:center; padding:0; border:1px solid #69517c; border-radius:5px; background:#2a2033; color:#ead6f8; font-size:25px; line-height:1; cursor:pointer; transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease; } .course-topic-matrix-controls button:hover:not(:disabled),.course-topic-matrix-controls button:focus-visible { border-color:#d4adf1; background:#493357; color:#fff; outline:0; transform:translateY(-1px); } .course-topic-matrix-controls button:disabled { cursor:default; opacity:.35; } .course-topic-matrix-scroll { margin:22px -6px -2px; overflow-x:auto; padding:0 6px 14px; scrollbar-color:#9b72b5 #17131d; scrollbar-width:thin; scroll-snap-type:x mandatory; } .course-topic-matrix-scroll:focus-visible { outline:2px solid #c99be8; outline-offset:4px; } .course-topic-matrix-grid { display:flex; align-items:flex-start; gap:16px; min-width:max-content; } .course-topic-matrix-grid article { width:clamp(270px,20vw,310px); flex:0 0 auto; overflow:hidden; border:1px solid #50405d; border-radius:7px; background:#17141c; scroll-snap-align:start; box-shadow:0 8px 20px rgba(3,2,6,.18); transition:border-color .18s ease,transform .18s ease,background .18s ease; } .course-topic-matrix-grid article:hover { border-color:#ae82ca; background:#1c1721; transform:translateY(-3px); } .course-topic-matrix-grid article > header { min-height:112px; padding:16px 17px 15px; box-sizing:border-box; border-bottom:1px solid #4d4057; background:linear-gradient(135deg,#362646,#211928); } .course-topic-matrix-grid article i { color:#e1b8fa; font-size:11px; font-style:normal; font-weight:800; letter-spacing:.08em; } .course-topic-matrix-grid article h3 { margin:9px 0 0; color:#fffaff; font-size:16px; line-height:1.42; } .course-topic-matrix-grid article small { display:block; margin-top:8px; color:#c9b5d4; font-size:11px; } .course-topic-matrix-grid ol { display:flex; margin:0; padding:16px 17px 18px; flex-direction:column; gap:10px; } .course-topic-matrix-grid li { position:relative; margin:0; padding-left:23px; color:#e0d7e5; font-size:13px; line-height:1.6; } .course-topic-matrix-grid li::marker { content:''; } .course-topic-matrix-grid li::before { content:counter(list-item,decimal-leading-zero); position:absolute; top:1px; left:0; color:#d5a4f1; font-size:10px; font-weight:800; } @media (max-width:760px) { .course-topic-matrix { padding:20px 17px 16px; } .course-topic-matrix > header { gap:14px; } .course-topic-matrix h2 { font-size:20px; } .course-topic-matrix > header p { max-width:220px; font-size:12px; } .course-topic-matrix-tools { gap:7px; } .course-topic-matrix-grid article { width:min(286px,79vw); } } .course-catalog-tabs { display:flex; gap:6px; } .course-catalog-tabs button { height:30px; padding:0 13px; border:1px solid transparent; border-radius:5px; background:transparent; color:#737c82; font-size:10px; } .course-catalog-tabs button.active { border-color:#35504d; background:#14211f; color:#58d4c5; } .course-catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:20px; } .course-catalog-card { display:grid; grid-template-columns:190px minmax(0,1fr); min-height:238px; overflow:hidden; border:1px solid #292e32; border-radius:12px; background:#111418; color:inherit; text-decoration:none; transition:transform .2s ease,border-color .2s ease,background .2s ease; } .course-catalog-card:hover { transform:translateY(-2px); border-color:#548a84; background:#121817; } .course-cover { position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:24px; overflow:hidden; background:linear-gradient(145deg,#729bf5 0%,#9e8ce8 46%,#e783c5 100%); } .course-theme-recitation .course-cover { background:linear-gradient(145deg,#1d8f86 0%,#2f6f9f 48%,#7c5aa8 100%); } .course-theme-autumn .course-cover { background:linear-gradient(145deg,#4b719a 0%,#5b84af 46%,#7f6fa8 100%); } .course-theme-quick .course-cover { background:linear-gradient(145deg,#694783 0%,#9365a7 48%,#d18da7 100%); } .course-cover::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 14% 16%,rgba(255,255,255,.34),transparent 28%),linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:auto,28px 28px,28px 28px; } .course-cover > * { position:relative; z-index:1; } .course-cover > span { color:rgba(255,255,255,.82); font-size:9px; font-weight:800; letter-spacing:.13em; } .course-cover > strong { color:#fff; font-size:48px; line-height:1; letter-spacing:-.08em; text-shadow:0 10px 28px rgba(76,66,125,.18); } .course-cover > b { align-self:flex-start; padding:5px 8px; border:1px solid rgba(255,255,255,.5); border-radius:99px; background:rgba(255,255,255,.14); color:#fff; font-size:9px; } .course-catalog-copy { display:flex; flex-direction:column; padding:28px 26px 24px; } .course-theory-gift { display:inline-flex; align-self:flex-start; margin:0 0 9px; padding:5px 8px; border:1px solid rgba(255,190,105,.42); border-radius:4px; background:rgba(217,139,55,.13); color:#ffd08c; font-size:9px; font-weight:800; letter-spacing:.02em; } .course-catalog-copy > span { color:#6faaa3; font-size:10px; } .course-catalog-copy h3 { margin:11px 0 13px; color:#e8ebed; font-size:21px; line-height:1.35; } .course-catalog-copy > p { margin:0; color:#727b81; font-size:10px; } .course-catalog-copy > p i { margin-right:7px; color:#50cfc0; } .course-catalog-copy > div { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:22px; border-top:1px solid #292e32; } .course-catalog-copy em { color:#858e94; font-size:10px; font-style:normal; } .course-card-price { display:flex; align-items:baseline; gap:7px; color:#ffd08c; font-size:22px; font-weight:850; line-height:1; } .course-card-price del { color:#827872; font-size:10px; font-weight:650; text-decoration-thickness:1px; } .course-card-price small { color:#af9b7c; font-size:9px; font-weight:700; } .course-payment-guide h2 del { margin-right:5px; color:#a896a1; font-size:12px; font-weight:500; text-decoration-thickness:1px; } .course-theory-promo { display:flex; align-items:center; gap:13px; margin-top:38px; padding:13px 17px; border:1px solid rgba(222,158,71,.55); border-radius:7px; background:linear-gradient(90deg,rgba(222,158,71,.18),rgba(55,39,18,.12)); } .course-theory-promo > span { flex:0 0 auto; padding:5px 8px; border-radius:3px; background:#d9984b; color:#21170c; font-size:10px; font-weight:850; } .course-theory-promo strong { color:#f3dfbc; font-size:13px; } .course-theory-promo small { margin-left:auto; color:#bcae9c; font-size:10px; } .course-catalog-copy b { color:#55d0c1; font-size:10px; } .course-catalog-copy b i { margin-left:5px; font-size:16px; font-style:normal; } .course-catalog-placeholder { display:flex; min-height:238px; box-sizing:border-box; flex-direction:column; align-items:center; justify-content:center; padding:30px; border:1px dashed #30363a; border-radius:12px; color:#697279; text-align:center; } .course-catalog-placeholder > i { color:#465057; font-size:34px; } .course-catalog-placeholder strong { margin-top:15px; color:#9da5aa; font-size:12px; } .course-catalog-placeholder span { max-width:310px; margin-top:8px; font-size:10px; line-height:1.7; } .course-hero.course-theme-recitation::after { content:"RECITE\A CAMP"; } .course-hero.course-theme-autumn::after { content:"AUTUMN\A RECITE"; } .course-hero.course-theme-quick::after { content:"QUICK\A DESIGN"; } .course-calendar-months { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .course-calendar-month { overflow:hidden; border:1px solid #252a2e; border-radius:10px; background:#101317; } .course-calendar-month header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 18px; border-bottom:1px solid #252a2e; } .course-calendar-month header strong { color:#e4e8ea; font-size:15px; } .course-calendar-month header span { color:#697279; font-size:10px; word-spacing:8px; white-space:nowrap; } .course-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); } .course-calendar-day { min-height:104px; padding:9px 8px; box-sizing:border-box; border-right:1px solid #20252a; border-bottom:1px solid #20252a; color:#5f686f; } .course-calendar-day:nth-child(7n) { border-right:0; } .course-calendar-day > span { display:block; margin-bottom:7px; font-size:10px; } .course-calendar-day b,.course-calendar-day small { display:block; } .course-calendar-day b { color:#5bd6c8; font-size:9px; line-height:1.35; } .course-calendar-day small { margin-top:4px; color:#cbd2d5; font-size:10px; line-height:1.4; } .course-calendar-day small em { display:block; margin-top:2px; color:#7f9f9a; font-size:8px; font-style:normal; } .course-calendar-day.is-outside { background:#0c0e11; color:#333a40; } .course-calendar-day.has-course { background:#121a1a; } .course-calendar-event { margin-top:6px; padding:5px 5px 4px; border-left:3px solid #62cfc1; border-radius:3px; background:rgba(91,214,200,.09); } .course-calendar-event b { color:#7ae0d4; font-size:8px; line-height:1.35; } .course-calendar-event small { margin-top:2px; color:#cbd2d5; font-size:8px; line-height:1.35; } .course-calendar-event small em { color:inherit; opacity:.78; } .course-calendar-event.course-tone-gbc-summer-theory-2026 { border-color:#64b6e8; background:rgba(77,153,212,.13); }.course-calendar-event.course-tone-gbc-summer-theory-2026 b { color:#8acdf2; } .course-calendar-event.course-tone-gbc-autumn-recitation-2026 { border-color:#5ed1b7; background:rgba(50,178,145,.13); }.course-calendar-event.course-tone-gbc-autumn-recitation-2026 b { color:#79dec7; } .course-calendar-event.course-tone-gbc-autumn-essay-2026 { border-color:#b58be5; background:rgba(145,99,205,.14); }.course-calendar-event.course-tone-gbc-autumn-essay-2026 b { color:#d0aff5; } .course-calendar-event.course-tone-gbc-past-paper-2026 { border-color:#e4ae6f; background:rgba(207,145,64,.14); }.course-calendar-event.course-tone-gbc-past-paper-2026 b { color:#f2c68e; } .course-calendar-event.course-tone-gbc-skills-hotspot-2026 { border-color:#e59b83; background:rgba(206,107,81,.14); }.course-calendar-event.course-tone-gbc-skills-hotspot-2026 b { color:#f1b39e; } .course-calendar-event.course-tone-gbc-theory-sprint-2026 { border-color:#ea83aa; background:rgba(214,86,135,.14); }.course-calendar-event.course-tone-gbc-theory-sprint-2026 b { color:#f5a9c5; } .course-calendar-event.course-tone-gbc-quick-prep-2026 { border-color:#b98ae8; background:rgba(147,94,204,.15); }.course-calendar-event.course-tone-gbc-quick-prep-2026 b { color:#d2aff5; } .course-calendar-event.course-tone-gbc-quick-summer-2026 { border-color:#d785ba; background:rgba(206,95,161,.15); }.course-calendar-event.course-tone-gbc-quick-summer-2026 b { color:#ebacd0; } .course-calendar-event.course-tone-gbc-quick-autumn-2026 { border-color:#9d8ce5; background:rgba(116,98,203,.15); }.course-calendar-event.course-tone-gbc-quick-autumn-2026 b { color:#c1b7f5; } .course-calendar-event.course-tone-gbc-quick-national-2026 { border-color:#d69a66; background:rgba(196,119,48,.15); }.course-calendar-event.course-tone-gbc-quick-national-2026 b { color:#efbd8e; } .course-calendar-event.course-tone-gbc-quick-sprint-2026 { border-color:#dc719f; background:rgba(200,64,123,.15); }.course-calendar-event.course-tone-gbc-quick-sprint-2026 b { color:#f0a2c0; } .course-schedule-groups { display:grid; gap:18px; margin-top:28px; } .course-schedule-group { border:1px solid #252a2e; border-radius:10px; background:#101317; } .course-schedule-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-bottom:1px solid #252a2e; } .course-schedule-head span { color:#edf1f2; font-size:17px; font-weight:750; } .course-schedule-head strong { color:#65ddcf; font-size:11px; } .course-schedule-list { display:grid; } .course-schedule-list article { display:grid; grid-template-columns:96px minmax(0,1fr); gap:18px; padding:17px 20px; border-bottom:1px solid #20252a; } .course-schedule-list article > div > span em { margin-left:7px; color:#6d9b95; font-size:9px; font-style:normal; } .course-schedule-list article:last-child { border-bottom:0; } .course-schedule-list time { color:#64d9cb; font-size:11px; font-weight:800; } .course-schedule-list span { color:#6f777e; font-size:10px; } .course-schedule-list h3 { margin:6px 0 6px; color:#e8ebed; font-size:15px; line-height:1.35; } .course-schedule-list p { margin:0; color:#7c848b; font-size:11px; line-height:1.55; } .course-schedule-instructor { display:inline-flex; align-items:center; width:max-content; max-width:100%; margin-top:7px; padding:3px 7px; box-sizing:border-box; border:1px solid rgba(94,219,206,.36); border-radius:4px; background:rgba(80,207,192,.08); color:#73ded3; font-size:10px; font-weight:800; line-height:1.35; overflow-wrap:anywhere; } body.desktop-light .course-resource-overview article,body.desktop-light .course-center-head aside,body.desktop-light .course-catalog-card { border-color:#dce4e6; background:#fff; } body.desktop-light .course-resource-overview strong,body.desktop-light .course-center-head h1,body.desktop-light .course-catalog-heading h2,body.desktop-light .course-catalog-copy h3 { color:#253136; } body.desktop-light .course-access-note { border-color:#eadbc8; background:#fff9f1; } body.desktop-light .course-catalog-placeholder { border-color:#d4dde0; } body.desktop-light .course-calendar-month,body.desktop-light .course-schedule-group { border-color:#dce4e6; background:#fff; } body.desktop-light .course-material-card { border-color:#dce4e6; background:#fff; } body.desktop-light .course-material-card strong { color:#253136; } body.desktop-light .course-material-card footer { border-color:#e5eaec; } body.desktop-light .course-calendar-month header,body.desktop-light .course-schedule-head,body.desktop-light .course-schedule-list article { border-color:#e0e7e9; } body.desktop-light .course-calendar-month header strong,body.desktop-light .course-schedule-head span,body.desktop-light .course-schedule-list h3 { color:#253136; } body.desktop-light .course-calendar-day { border-color:#edf1f2; } body.desktop-light .course-calendar-day.is-outside { background:#f5f7f8; } body.desktop-light .course-calendar-day.has-course { background:#f0fbf9; } body.desktop-light .course-calendar-day small { color:#38464b; } body.desktop-light .course-schedule-instructor { border-color:#9edbd5; background:#effbf9; color:#168a7f; } @media (max-width:1400px) { .course-hero { grid-template-columns:minmax(0,1fr) 250px; gap:28px; padding:38px; } .course-hero h1 { font-size:36px; } .course-hub-shell,.course-catalog-shell { width:min(100% - 44px,1080px); } } @media (max-width:980px) { .course-resource-overview,.course-catalog-grid,.course-calendar-months,.course-package-grid { grid-template-columns:1fr; } .course-material-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .course-catalog-card { grid-template-columns:160px minmax(0,1fr); } } @media (max-width:640px) { .course-center-head,.course-catalog-heading { align-items:flex-start; flex-direction:column; } .course-center-head h1 { font-size:32px; } .course-catalog-card { grid-template-columns:1fr; } .course-package-card footer { align-items:flex-start; flex-direction:column; } .course-package-actions { justify-content:flex-start; flex-wrap:wrap; width:100%; } .course-material-section { margin-top:32px; padding-top:18px; } .course-material-grid { grid-template-columns:1fr; gap:9px; } .course-material-card { min-height:0; } .course-cover { min-height:150px; } .course-calendar-day { min-height:86px; padding:7px 5px; } .course-calendar-day small { font-size:9px; } .course-calendar-month header { align-items:flex-start; flex-direction:column; } .course-schedule-list article { grid-template-columns:1fr; gap:8px; } } /* Final Anki page light-surface guard: keeps the learning-card header out of the dark shell theme. */ @media (min-width:981px) { body.route-yibentong-anki, body.route-yibentong-anki #app, body.route-yibentong-anki #app .min-h-screen, body.route-yibentong-anki #app .desktop-yibentong-redesign { background:#f5f8f8 !important; color:#182624 !important; } body.route-yibentong-anki #app .desktop-yibentong-hero { border-bottom:1px solid #dce8e7 !important; background:#f5f8f8 !important; color:#182624 !important; } body.route-yibentong-anki #app .desktop-yibentong-hero [style*="font-size: 24px"], body.route-yibentong-anki #app .desktop-yibentong-hero [style*="font-size:24px"] { color:#168f84 !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > button:first-child { border-color:#c9dcda !important; background:#ffffff !important; box-shadow:0 8px 22px rgba(32,76,72,.08) !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > button:first-child :is(svg,path,span,div) { color:#168f84 !important; stroke:#168f84 !important; } body.route-yibentong-anki #app .desktop-yibentong-hero :is(.rounded-full,[style*="ANKI"]) { border-color:#84c8c0 !important; background:#e9f7f5 !important; color:#168f84 !important; } } /* Restore core navigation even when a previous session left the sidebar collapsed. */ @media (min-width:981px) { #desktop-nav.collapsed { pointer-events:auto !important; } #desktop-nav.collapsed .desktop-nav-pages { display:flex !important; margin:12px 0 0 !important; gap:6px !important; } #desktop-nav.collapsed .desktop-nav-item[data-nav-label] { justify-content:center !important; width:52px !important; min-height:44px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border:1px solid #303038 !important; border-radius:6px !important; background:#111216 !important; color:#d8dcdf !important; font-size:0 !important; line-height:1 !important; } #desktop-nav.collapsed .desktop-nav-item[data-nav-label]::after { content:attr(data-nav-label) !important; font-size:12px !important; font-weight:760 !important; line-height:1 !important; } #desktop-nav.collapsed #desktop-course-hub-link::after { font-size:10px !important; letter-spacing:-.06em !important; } #desktop-nav.collapsed .desktop-nav-item[data-nav-label] .desktop-nav-badge { display:none !important; } } @media (min-width:981px) { body.route-qa-RETIRED #desktop-qa-header-RETIRED, body.route-grade-RETIRED #desktop-grade-header-RETIRED { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:28px !important; min-height:143px !important; margin:0 0 27px !important; padding:0 0 25px !important; border-bottom:1px solid var(--shell-line) !important; box-sizing:border-box !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED h1, body.route-grade-RETIRED #desktop-grade-header-RETIRED h1 { margin:7px 0 9px !important; font-size:30px !important; line-height:1.2 !important; letter-spacing:0 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED p, body.route-grade-RETIRED #desktop-grade-header-RETIRED p { margin:0 !important; font-size:14px !important; line-height:1.5 !important; } } /* Final learning overview guard: dark shell, unified gutters and responsive header. */ @media (min-width:981px) { body.route-yibentong-anki, body.route-yibentong-anki #app, body.route-yibentong-anki #app .min-h-screen, body.route-yibentong-anki #app .desktop-yibentong-redesign { background:#070709 !important; color:#eef1f4 !important; } body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero { position:relative !important; display:grid !important; grid-template-columns:44px minmax(0,1fr) 270px !important; grid-template-rows:auto auto auto !important; gap:7px 16px !important; align-items:center !important; min-height:0 !important; height:auto !important; margin:0 !important; padding:22px !important; overflow:hidden !important; border:1px solid #2d3138 !important; border-radius:12px !important; background:linear-gradient(118deg,rgba(104,209,191,.075),transparent 35%),#0f1115 !important; color:#eef1f4 !important; box-shadow:none !important; } body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero > .flex.items-center.gap-3 { grid-column:2 !important; grid-row:1 !important; } body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero > p { grid-column:2 !important; grid-row:2 !important; } body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero [style*="font-size: 24px"], body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero [style*="font-size:24px"] { color:#f3f5f7 !important; font-size:30px !important; font-weight:760 !important; line-height:1.18 !important; letter-spacing:-.025em !important; -webkit-text-fill-color:#f3f5f7 !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > button:first-child { border-color:#343942 !important; background:#14171c !important; box-shadow:none !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > * { gap:4px !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > * > :is(strong,b,small,span) { display:block !important; margin:0 !important; text-align:center !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 > :is(button,taro-button-core) { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:5px !important; text-align:center !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 > :is(button,taro-button-core) :is(strong,small) { display:block !important; margin:0 !important; line-height:1.35 !important; } } @media (min-width:981px) and (max-width:1600px) { body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero { grid-template-columns:44px minmax(0,1fr) !important; grid-template-rows:auto auto auto auto !important; } body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero #desktop-yibentong-puzzle { grid-column:1 / -1 !important; grid-row:3 !important; } body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero .desktop-yibentong-stats { grid-column:1 / -1 !important; grid-row:4 !important; } } /* Final hero collision fix: title, puzzle and stats must never share a row. */ @media (min-width:981px) { body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero { display:grid !important; grid-template-columns:44px minmax(0,1fr) 270px !important; grid-template-rows:auto auto auto !important; align-items:center !important; gap:8px 16px !important; min-height:0 !important; padding:20px !important; overflow:visible !important; border:1px solid #2d3138 !important; border-radius:10px !important; background:#0f1115 !important; background-image:none !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > button:first-child { grid-column:1 !important; grid-row:1 !important; align-self:start !important; width:40px !important; height:40px !important; min-height:40px !important; } body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero > .flex.items-center.gap-3 { grid-column:2 !important; grid-row:1 !important; min-width:0 !important; padding:0 !important; margin:0 !important; } body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero > p { grid-column:2 !important; grid-row:2 !important; margin:0 !important; color:#9aa4af !important; font-size:13px !important; line-height:1.45 !important; } body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero #desktop-yibentong-puzzle { grid-column:3 !important; grid-row:1 / span 2 !important; align-self:stretch !important; min-height:72px !important; margin:0 !important; } body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero .desktop-yibentong-stats { grid-column:1 / -1 !important; grid-row:3 !important; display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; min-height:82px !important; margin:12px 0 0 !important; padding:0 !important; overflow:hidden !important; border:1px solid #303641 !important; border-radius:8px !important; background:#111318 !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > * { min-width:0 !important; min-height:82px !important; padding:0 10px !important; border-right:1px solid #262c35 !important; background:transparent !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > :last-child { border-right:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-stats [style*="123, 92, 246"], body.route-yibentong-anki #app .desktop-yibentong-stats [style*="#7B5CF6"], body.route-yibentong-anki #app .desktop-yibentong-stats [style*="#7b5cf6"] { display:none !important; } body.route-yibentong-anki #app .desktop-yibentong-hero [style*="font-size: 24px"], body.route-yibentong-anki #app .desktop-yibentong-hero [style*="font-size:24px"] { max-width:100% !important; overflow:hidden !important; color:#f3f5f7 !important; font-size:29px !important; line-height:1.18 !important; letter-spacing:0 !important; text-overflow:ellipsis !important; white-space:nowrap !important; -webkit-text-fill-color:#f3f5f7 !important; } } @media (min-width:981px) and (max-width:1600px) { body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero { grid-template-columns:44px minmax(0,1fr) !important; grid-template-rows:auto auto auto auto !important; } body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero #desktop-yibentong-puzzle { grid-column:1 / -1 !important; grid-row:3 !important; min-height:58px !important; } body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero .desktop-yibentong-stats { grid-row:4 !important; } } /* First-load Anki guard: keep the original title block, puzzle entry and stats from collapsing into one row. */ @media (min-width:981px) { body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero { grid-template-columns:44px minmax(0,1fr) minmax(250px,340px) !important; grid-template-areas: "back title puzzle" "back meta puzzle" "stats stats stats" !important; align-items:center !important; gap:10px 18px !important; overflow:hidden !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > button:first-child { grid-area:back !important; } body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero > .flex.items-center.gap-3 { grid-area:title !important; max-width:100% !important; min-width:0 !important; overflow:hidden !important; } body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero > p { grid-area:meta !important; } body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero #desktop-yibentong-puzzle { grid-area:puzzle !important; width:auto !important; } body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero > .desktop-yibentong-stats { grid-area:stats !important; width:100% !important; box-sizing:border-box !important; } body.route-yibentong-anki #app .desktop-yibentong-stats .flex.items-center.gap-3, body.route-yibentong-anki #app .desktop-yibentong-stats .flex.items-end.gap-2 { min-width:0 !important; overflow:hidden !important; } body.route-yibentong-anki #app .desktop-yibentong-stats [style*="font-size: 24px"], body.route-yibentong-anki #app .desktop-yibentong-stats [style*="font-size:24px"] { font-size:18px !important; white-space:nowrap !important; } } @media (min-width:981px) and (max-width:1600px) { body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign > .desktop-yibentong-hero { grid-template-columns:44px minmax(0,1fr) !important; grid-template-areas: "back title" "back meta" "puzzle puzzle" "stats stats" !important; } } /* Final top-card guard: the native Anki header can render the progress ring, title and status counters inside the same stats strip on first paint. */ @media (min-width:981px) { body.route-yibentong-anki #app .desktop-yibentong-hero > .desktop-yibentong-stats { grid-template-columns:minmax(320px,1.45fr) repeat(4,minmax(0,1fr)) !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child { display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:18px !important; min-width:320px !important; padding:0 24px !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child :is(.flex.items-center.gap-3,.flex.items-center.gap-2) { flex:1 1 auto !important; min-width:0 !important; overflow:visible !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child [style*="font-size: 24px"], body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child [style*="font-size:24px"], body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child [style*="font-size: 28px"], body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child [style*="font-size:28px"] { display:block !important; max-width:230px !important; overflow:hidden !important; color:#f4fbfb !important; font-size:28px !important; font-weight:800 !important; line-height:1.12 !important; text-overflow:ellipsis !important; white-space:nowrap !important; -webkit-text-fill-color:#f4fbfb !important; } } .friend-chat-modal { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:18px; box-sizing:border-box; } .friend-chat-backdrop { position:absolute; inset:0; border:0; background:rgba(5,8,12,.62); backdrop-filter:blur(8px); cursor:pointer; } .friend-chat-dialog { position:relative; display:grid; grid-template-rows:auto minmax(260px,52vh) auto; width:min(520px,100%); max-height:calc(100vh - 36px); border:1px solid #30363d; border-radius:8px; overflow:hidden; background:#14181d; color:#eef2f3; box-shadow:0 30px 90px rgba(0,0,0,.46); } .friend-chat-dialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-bottom:1px solid #283039; } .friend-chat-dialog header span { display:block; margin-bottom:5px; color:#35d6c5; font-size:10px; font-weight:800; letter-spacing:.08em; } .friend-chat-dialog h2 { margin:0; font-size:18px; line-height:1.25; } .friend-chat-dialog header button { width:30px; height:30px; border:0; border-radius:4px; background:transparent; color:#9ca6ae; font-size:24px; cursor:pointer; } .friend-chat-messages { display:flex; flex-direction:column; gap:10px; min-height:0; padding:18px; overflow-y:auto; background:#101418; } .friend-chat-loading,.friend-chat-empty { margin:auto; color:#7f8b95; font-size:12px; } .friend-chat-bubble { align-self:flex-start; max-width:82%; } .friend-chat-bubble.mine { align-self:flex-end; } .friend-chat-bubble div { padding:10px 12px; border:1px solid #2c343b; border-radius:8px 8px 8px 2px; background:#1a2026; color:#edf1f2; font-size:13px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; } .friend-chat-bubble.mine div { border-color:#178f83; border-radius:8px 8px 2px 8px; background:#178f83; color:#fff; } .friend-chat-bubble time { display:block; margin-top:4px; color:#6f7b83; font-size:10px; } .friend-chat-bubble.mine time { text-align:right; } .friend-chat-form { display:grid; gap:8px; padding:14px; border-top:1px solid #283039; background:#14181d; } .friend-chat-form textarea { width:100%; min-height:74px; max-height:150px; padding:11px 12px; box-sizing:border-box; border:1px solid #303840; border-radius:6px; outline:0; resize:vertical; background:#0d1114; color:#edf1f2; font:13px/1.5 inherit; } .friend-chat-form footer { display:flex; align-items:center; justify-content:space-between; gap:10px; } .friend-chat-form p { min-height:18px; margin:0; color:#e17b7b; font-size:11px; } .friend-chat-form button { min-width:74px; height:34px; border:1px solid #178f83; border-radius:5px; background:#178f83; color:#fff; font-size:12px; font-weight:700; cursor:pointer; } .friend-chat-form button:disabled { opacity:.56; cursor:wait; } body.desktop-light .friend-chat-dialog { border-color:#d6e0e6; background:#fff; color:#25313b; } body.desktop-light .friend-chat-dialog header,body.desktop-light .friend-chat-form { border-color:#dfe6ec; background:#fff; } body.desktop-light .friend-chat-messages { background:#f4f7f8; } body.desktop-light .friend-chat-bubble div { border-color:#dbe3e8; background:#fff; color:#25313b; } body.desktop-light .friend-chat-bubble.mine div { border-color:#159487; background:#159487; color:#fff; } body.desktop-light .friend-chat-form textarea { border-color:#d5dee5; background:#f8fafb; color:#25313b; } .friend-note-modal { position:fixed; inset:0; z-index:1300; display:grid; place-items:center; padding:18px; box-sizing:border-box; } .friend-note-backdrop { position:absolute; inset:0; border:0; background:rgba(5,8,12,.68); backdrop-filter:blur(8px); cursor:pointer; } .friend-note-dialog { position:relative; width:min(520px,calc(100vw - 36px)); border:1px solid #30363d; border-radius:8px; background:#14181d; color:#eef2f3; box-shadow:0 30px 90px rgba(0,0,0,.46); overflow:hidden; } .friend-note-dialog label { display:block; padding:24px; color:#e8edf0; font-size:16px; font-weight:700; line-height:1.45; } .friend-note-dialog textarea { display:block; width:100%; min-height:92px; margin-top:16px; padding:11px 12px; box-sizing:border-box; border:1px solid #374047; border-radius:6px; outline:0; resize:vertical; background:#0d1114; color:#edf1f2; font:13px/1.5 inherit; } .friend-note-dialog textarea:focus { border-color:#35d6c5; box-shadow:0 0 0 2px rgba(53,214,197,.14); } .friend-note-dialog footer { display:flex; justify-content:flex-end; gap:10px; padding:14px 18px; border-top:1px solid #283039; background:#12161a; } .friend-note-dialog button { min-width:72px; height:34px; border:1px solid #303840; border-radius:5px; background:transparent; color:#aeb7bf; font-weight:700; cursor:pointer; } .friend-note-dialog button[type="submit"] { border-color:#178f83; background:#178f83; color:#fff; } body.desktop-light .friend-note-dialog { border-color:#d6e0e6; background:#fff; color:#25313b; } body.desktop-light .friend-note-dialog label { color:#25313b; } body.desktop-light .friend-note-dialog textarea { border-color:#d5dee5; background:#f8fafb; color:#25313b; } body.desktop-light .friend-note-dialog footer { border-color:#dfe6ec; background:#fff; } @media (min-width:981px) and (max-width:1280px) { body.route-yibentong-anki #app .desktop-yibentong-hero > .desktop-yibentong-stats { grid-template-columns:minmax(280px,1.35fr) repeat(4,minmax(0,1fr)) !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child { min-width:280px !important; padding:0 18px !important; } } /* Light theme final pass: override late dark-only desktop tuning. */ @media (min-width:981px) { body.desktop-light { --ef-frame-bg:#f2f5f8; --ef-rail-bg:#fbfcfd; --ef-panel-bg:#ffffff; --ef-panel-soft:#f6faf9; --ef-line:#dbe3ea; --ef-line-strong:#cbd7df; --ef-text:#24313b; --ef-muted:#667481; --ef-faint:#8b96a1; --ef-accent:#168f84; background:#f2f5f8 !important; color:var(--ef-text) !important; } body.desktop-light #desktop-nav, body.desktop-light #desktop-contextbar { border-color:var(--ef-line) !important; background:rgba(251,252,253,.96) !important; color:var(--ef-muted) !important; box-shadow:none !important; } body.desktop-light #desktop-nav .desktop-nav-brand, body.desktop-light #desktop-nav .desktop-nav-brand > div, body.desktop-light #desktop-nav .desktop-nav-brand i { color:var(--ef-text) !important; } body.desktop-light #desktop-nav .desktop-nav-brand span, body.desktop-light #desktop-nav .desktop-nav-item, body.desktop-light .desktop-nav-user span { color:var(--ef-muted) !important; } body.desktop-light #desktop-nav .desktop-nav-item:hover { background:#eef6f5 !important; color:var(--ef-text) !important; } body.desktop-light #desktop-nav .desktop-nav-item.active { background:#e8f5f3 !important; color:#123f3a !important; } body.desktop-light #desktop-nav .desktop-nav-item.active::before, body.desktop-light #desktop-nav .desktop-nav-badge { background:var(--ef-accent) !important; } body.desktop-light #desktop-nav .desktop-nav-badge { color:#fff !important; border-color:var(--ef-accent) !important; } body.desktop-light .desktop-nav-footer { border-color:var(--ef-line) !important; background:rgba(251,252,253,.98) !important; } body.desktop-light .desktop-nav-user, body.desktop-light .desktop-nav-user strong { color:var(--ef-text) !important; } body.desktop-light #desktop-contextbar .assistant-head, body.desktop-light #desktop-contextbar .context-tabs, body.desktop-light #desktop-contextbar .context-chat-form { border-color:var(--ef-line) !important; background:rgba(251,252,253,.96) !important; } body.desktop-light #desktop-contextbar .assistant-mark { background:#e2f4f1 !important; color:var(--ef-accent) !important; } body.desktop-light #desktop-contextbar :is(.assistant-name,.people-feature-title,.people-head strong,.people-row div strong,.context-message-text,.agent-memory-text) { color:var(--ef-text) !important; } body.desktop-light #desktop-contextbar :is(.assistant-status,.agent-context-chip,.people-score-note,.people-head span,.people-row div small,.people-row > span small,.context-tab) { color:var(--ef-muted) !important; } body.desktop-light #desktop-contextbar .agent-context-chip, body.desktop-light #desktop-contextbar .people-rank-card, body.desktop-light #desktop-contextbar .context-message, body.desktop-light #desktop-contextbar .agent-conversation-item, body.desktop-light #desktop-contextbar .agent-memory-card { border-color:var(--ef-line) !important; background:#fff !important; color:var(--ef-text) !important; } body.desktop-light #desktop-contextbar .people-panel, body.desktop-light #desktop-contextbar .people-feature { background:transparent !important; border-color:var(--ef-line) !important; } body.desktop-light #desktop-contextbar .people-feature-stats span { border-color:#9ed4cd !important; background:#edf8f6 !important; color:#63727d !important; } body.desktop-light #desktop-contextbar .people-feature-stats b, body.desktop-light #desktop-contextbar .people-row > b, body.desktop-light #desktop-contextbar .people-row > span, body.desktop-light #desktop-contextbar .context-tab.active, body.desktop-light #desktop-contextbar .context-toggle { color:var(--ef-accent) !important; } body.desktop-light #desktop-contextbar .people-row:nth-child(n+4) > b { color:#7c8792 !important; } body.desktop-light #desktop-contextbar .people-rank-tabs, body.desktop-light #desktop-contextbar .people-list { border-color:var(--ef-line) !important; } body.desktop-light #desktop-contextbar .people-rank-tabs button.active { color:var(--ef-text) !important; border-bottom-color:var(--ef-accent) !important; } body.desktop-light #desktop-contextbar .people-row button:not(.muted), body.desktop-light #desktop-contextbar .people-actions button[data-friend-action="send"] { border-color:#79bcb4 !important; background:#fff !important; color:var(--ef-accent) !important; } body.desktop-light #desktop-contextbar .people-row button:not(.muted):hover, body.desktop-light #desktop-contextbar .people-actions button[data-friend-action="send"]:hover { border-color:var(--ef-accent) !important; background:#e8f5f3 !important; color:#0f766c !important; } body.desktop-light :is(#desktop-exam-hub,#desktop-exam-topics,#desktop-exam-schools,#desktop-exam-papers,#desktop-exam-topic-dashboard,#desktop-exam-theory-schools) { background:#f3f6f8 !important; color:var(--ef-text) !important; } body.desktop-light :is(#desktop-exam-hub,#desktop-exam-topics,#desktop-exam-schools,#desktop-exam-papers,#desktop-exam-topic-dashboard,#desktop-exam-theory-schools) :is(.exam-hub-head,.exam-paper-head,.topic-dash-head) { border-bottom-color:var(--ef-line-strong) !important; } body.desktop-light :is(#desktop-exam-hub,#desktop-exam-topics,#desktop-exam-schools,#desktop-exam-papers,#desktop-exam-topic-dashboard,#desktop-exam-theory-schools) :is(h1,h2,h3,strong,b) { color:var(--ef-text) !important; } body.desktop-light :is(#desktop-exam-hub,#desktop-exam-topics,#desktop-exam-schools,#desktop-exam-papers,#desktop-exam-topic-dashboard,#desktop-exam-theory-schools) :is(p,span,small,footer,em) { color:var(--ef-muted); } body.desktop-light #desktop-exam-hub :is(.exam-flow,.exam-primary-card,.exam-topic-feature,.exam-history-panel,.exam-analysis-grid,.exam-mode-grid a), body.desktop-light #desktop-exam-topics :is(.exam-topic-library-grid a,.exam-topic-library-history), body.desktop-light #desktop-exam-schools :is(.school-bank-toolbar label,.school-bank-toolbar section,.school-bank-card), body.desktop-light #desktop-exam-papers :is(.exam-paper-picker select,.exam-paper-group-empty,.exam-paper-grid button,.exam-paper-toolbar,.exam-paper-section), body.desktop-light #desktop-exam-topic-dashboard :is(.topic-dash-toolbar label,.topic-dash-toolbar button,.topic-dash-overview,.topic-dash-row), body.desktop-light #desktop-exam-theory-schools :is(.theory-old-summary div,.theory-old-info,.theory-old-table,.theory-old-card) { border-color:var(--ef-line) !important; background:#fff !important; box-shadow:none !important; } body.desktop-light #desktop-exam-hub :is(.exam-primary-card,.exam-topic-feature,.exam-analysis-grid a,.exam-mode-grid a):hover, body.desktop-light #desktop-exam-topics .exam-topic-library-grid a:hover, body.desktop-light #desktop-exam-schools .school-bank-card:hover, body.desktop-light #desktop-exam-papers .exam-paper-grid button:hover, body.desktop-light #desktop-exam-topic-dashboard .topic-dash-row:hover, body.desktop-light #desktop-exam-theory-schools .theory-old-card:hover { border-color:#98cfc8 !important; background:#f8fcfb !important; } body.desktop-light #desktop-exam-theory-schools .theory-old-summary div strong, body.desktop-light #desktop-exam-theory-schools .theory-old-table-title i, body.desktop-light #desktop-exam-theory-schools .theory-old-table-title strong, body.desktop-light #desktop-exam-theory-schools .theory-old-table-title span { color:var(--ef-accent) !important; } body.desktop-light #desktop-exam-theory-schools .theory-old-info { color:#687682 !important; } body.desktop-light #desktop-exam-theory-schools .theory-old-table { overflow:hidden; background:#fff !important; } body.desktop-light #desktop-exam-theory-schools .theory-old-note { border-top:1px solid var(--ef-line) !important; border-bottom:1px solid var(--ef-line) !important; background:#eff9f7 !important; color:#168f84 !important; } body.desktop-light #desktop-exam-theory-schools .theory-old-table-head { background:#eef7f6 !important; border-bottom:1px solid var(--ef-line) !important; } body.desktop-light #desktop-exam-theory-schools .theory-old-table-head span { color:#29635d !important; } body.desktop-light #desktop-exam-theory-schools .theory-old-table-row { background:#fff !important; border-bottom:1px solid #edf1f4 !important; color:#4b5863 !important; } body.desktop-light #desktop-exam-theory-schools .theory-old-table-row:nth-child(even) { background:#f8fafb !important; } body.desktop-light #desktop-exam-theory-schools .theory-old-table-row strong { color:#27323b !important; } body.desktop-light #desktop-exam-theory-schools :is(.theory-tier-985,.theory-tier-211,.theory-tier-plain,.theory-exam-plain,.theory-exam-design,.theory-exam-quick) { color:#168f84 !important; -webkit-text-fill-color:#168f84 !important; } body.desktop-light #desktop-exam-theory-schools .theory-tier-985 { background:#eee8ff !important; color:#6a4fc6 !important; -webkit-text-fill-color:#6a4fc6 !important; } body.desktop-light #desktop-exam-theory-schools .theory-tier-211 { background:#e5f1ff !important; color:#23699b !important; -webkit-text-fill-color:#23699b !important; } body.desktop-light #desktop-exam-theory-schools .theory-tier-plain { background:#f2f4f6 !important; color:#677380 !important; -webkit-text-fill-color:#677380 !important; } body.desktop-light #desktop-exam-theory-schools .theory-exam-plain { background:#f0eaff !important; color:#6652bd !important; -webkit-text-fill-color:#6652bd !important; } body.desktop-light #desktop-exam-theory-schools .theory-exam-design { background:#e4f7f3 !important; color:#148d7e !important; -webkit-text-fill-color:#148d7e !important; } body.desktop-light #desktop-exam-theory-schools .theory-exam-quick { background:#e6f2ff !important; color:#236ea5 !important; -webkit-text-fill-color:#236ea5 !important; } } /* Absolute final header fix: stats must stay a compact five-column counter row. */ @media (min-width:981px) { body.route-yibentong-anki #app .desktop-yibentong-hero > .desktop-yibentong-stats { grid-area:stats !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child { min-width:0 !important; padding:0 10px !important; justify-content:center !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child [style*="font-size: 24px"], body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child [style*="font-size:24px"], body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child [style*="font-size: 28px"], body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child [style*="font-size:28px"] { max-width:100% !important; font-size:18px !important; line-height:1.2 !important; } } /* Yibentong Anki stable desktop layout: single source of truth after legacy overrides. */ @media (min-width:981px) { body.route-yibentong-anki #desktop-yibentong-volumes { display:none !important; } body.route-yibentong-anki #app { padding-left:var(--desktop-left-width) !important; padding-right:var(--desktop-right-width) !important; background:#070709 !important; box-sizing:border-box !important; overflow-x:hidden !important; } body.desktop-nav-collapsed.route-yibentong-anki #app { padding-left:0 !important; } body.context-collapsed.route-yibentong-anki #app { padding-right:0 !important; } body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:18px !important; width:min(760px,calc(100% - 32px)) !important; max-width:760px !important; margin:0 auto !important; padding:48px 0 80px !important; background:transparent !important; } body.route-yibentong-anki #app .desktop-yibentong-hero { display:grid !important; grid-template-columns:minmax(0,1fr) !important; grid-template-areas: "stats" "puzzle" "meta" !important; gap:14px 18px !important; min-height:0 !important; padding:0 !important; overflow:visible !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.route-yibentong-anki #app .desktop-yibentong-hero::after, body.route-yibentong-anki #app .desktop-yibentong-hero > button:first-child { display:none !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > .flex.items-center.gap-3 { display:none !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > p { grid-area:meta !important; margin:0 !important; padding-left:0 !important; color:#89939f !important; font-size:13px !important; line-height:1.45 !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > .desktop-yibentong-stats { grid-area:stats !important; display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; min-height:72px !important; width:100% !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border:1px solid #2b3038 !important; border-radius:8px !important; background:#101318 !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > * { display:flex !important; align-items:center !important; justify-content:center !important; min-width:0 !important; min-height:72px !important; padding:10px 14px !important; border:0 !important; border-right:1px solid #252b33 !important; background:transparent !important; box-sizing:border-box !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child { grid-column:1 / -1 !important; justify-content:flex-start !important; gap:14px !important; min-width:0 !important; border-bottom:1px solid #252b33 !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > :last-child { border-right:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child [style*="font-size: 22px"], body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child [style*="font-size:22px"], body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child [style*="font-size: 24px"], body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child [style*="font-size:24px"], body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child [style*="font-size: 28px"], body.route-yibentong-anki #app .desktop-yibentong-stats > :first-child [style*="font-size:28px"] { display:block !important; max-width:210px !important; overflow:hidden !important; color:#f4f7f8 !important; font-size:24px !important; font-weight:800 !important; line-height:1.16 !important; text-overflow:ellipsis !important; white-space:nowrap !important; -webkit-text-fill-color:#f4f7f8 !important; } body.route-yibentong-anki #app .desktop-yibentong-stats [style*="background: rgb(123, 92, 246)"], body.route-yibentong-anki #app .desktop-yibentong-stats [style*="background-color: rgb(123, 92, 246)"], body.route-yibentong-anki #app .desktop-yibentong-stats [style*="background: rgba(123, 92, 246"], body.route-yibentong-anki #app .desktop-yibentong-stats [style*="#7B5CF6"], body.route-yibentong-anki #app .desktop-yibentong-stats [style*="#7b5cf6"] { display:none !important; } body.route-yibentong-anki #desktop-yibentong-puzzle { grid-area:puzzle !important; display:flex !important; align-items:center !important; gap:14px !important; min-height:72px !important; width:auto !important; margin:0 !important; padding:16px 18px !important; border:1px solid #2b3038 !important; border-radius:8px !important; background:#101318 !important; color:#eaf0f1 !important; text-decoration:none !important; box-sizing:border-box !important; } body.route-yibentong-anki #desktop-yibentong-puzzle i { color:#42d6c8 !important; font-size:26px !important; } body.route-yibentong-anki #desktop-yibentong-puzzle strong { color:#f2f6f7 !important; font-size:15px !important; } body.route-yibentong-anki #desktop-yibentong-puzzle small { color:#89939f !important; font-size:12px !important; } body.route-yibentong-anki #app .desktop-yibentong-workspace { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:14px !important; margin:0 !important; padding:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-quick, body.route-yibentong-anki #app .desktop-yibentong-filters, body.route-yibentong-anki #app .desktop-yibentong-volume { width:100% !important; margin:0 !important; border:1px solid #2b3038 !important; border-radius:8px !important; background:#101318 !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-yibentong-anki #app .desktop-yibentong-quick { display:grid !important; gap:10px !important; padding:14px !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.items-center.gap-2.mb-3 { min-height:18px !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:0 !important; overflow:hidden !important; border:1px solid #252b33 !important; border-radius:7px !important; background:#11151b !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 > :is(button,taro-button-core) { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; min-height:92px !important; padding:14px 16px !important; border:0 !important; border-right:1px solid #252b33 !important; border-radius:0 !important; background:transparent !important; color:#edf1f2 !important; text-align:center !important; box-shadow:none !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 > :is(button,taro-button-core):last-child { border-right:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-filters { display:grid !important; grid-template-columns:minmax(0,1fr) !important; align-items:stretch !important; gap:12px !important; padding:14px !important; min-height:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-filters > div { display:grid !important; grid-template-columns:76px minmax(0,1fr) !important; align-items:center !important; gap:10px !important; min-width:0 !important; min-height:70px !important; margin:0 !important; padding:12px 14px !important; border:1px solid #252b33 !important; border-radius:7px !important; background:#11151b !important; box-sizing:border-box !important; } body.route-yibentong-anki #app .desktop-yibentong-filters > div > :first-child { display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:7px !important; min-width:0 !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; color:#87929e !important; white-space:nowrap !important; } body.route-yibentong-anki #app .desktop-yibentong-filters > div > :last-child, body.route-yibentong-anki #app .desktop-yibentong-filters > div .flex { display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:flex-start !important; gap:7px !important; min-width:0 !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; } body.route-yibentong-anki #app .desktop-yibentong-filters :is(button,taro-button-core,.rounded-full) { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:64px !important; min-height:32px !important; height:auto !important; padding:6px 12px !important; border:1px solid #315f58 !important; border-radius:5px !important; background:#102421 !important; color:#dbe7e6 !important; line-height:1.25 !important; white-space:nowrap !important; box-shadow:none !important; } body.route-yibentong-anki #app .desktop-yibentong-volume { overflow:hidden !important; } body.route-yibentong-anki #app .desktop-yibentong-volume > .flex.items-center.gap-3 { min-height:80px !important; padding:16px !important; border:0 !important; background:#11151b !important; } body.route-yibentong-anki #app .desktop-yibentong-volume > .flex.flex-col { padding:0 12px 14px !important; gap:8px !important; } body.route-yibentong-anki #app .desktop-yibentong-volume button { border-radius:6px !important; } } @media (min-width:981px) and (max-width:1360px) { body.route-yibentong-anki #app .desktop-yibentong-hero { grid-template-columns:minmax(0,1fr) !important; grid-template-areas:"stats" "puzzle" "meta" !important; } body.route-yibentong-anki #app .desktop-yibentong-filters { grid-template-columns:minmax(0,1fr) !important; } } /* Home map light-mode polish: keep the network page bright and readable. */ /* Final override for the Yibentong Anki desktop page. Earlier legacy rules mix width and padding reservations for the assistant rail; this keeps one model. */ @media (min-width:981px) { body.route-yibentong-anki { --ybt-panel:#101419; --ybt-panel-soft:#151a20; --ybt-border:#2a343b; --ybt-border-active:#36756e; --ybt-text:#eef4f5; --ybt-muted:#8f9ba5; --ybt-accent:#35d6c5; } body.route-has-context:not(.context-collapsed).route-yibentong-anki #app { width:calc(100vw - var(--desktop-left-width) - var(--desktop-right-width)) !important; max-width:calc(100vw - var(--desktop-left-width) - var(--desktop-right-width)) !important; margin-left:var(--desktop-left-width) !important; margin-right:var(--desktop-right-width) !important; padding-left:0 !important; padding-right:0 !important; overflow-x:hidden !important; } body.context-collapsed.route-yibentong-anki #app { width:calc(100vw - var(--desktop-left-width)) !important; max-width:calc(100vw - var(--desktop-left-width)) !important; margin-left:var(--desktop-left-width) !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; } body.desktop-nav-collapsed.route-yibentong-anki #app { width:calc(100vw - var(--desktop-right-width)) !important; max-width:calc(100vw - var(--desktop-right-width)) !important; margin-left:0 !important; } body.desktop-nav-collapsed.context-collapsed.route-yibentong-anki #app { width:100vw !important; max-width:100vw !important; margin:0 !important; } body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign { width:min(920px,calc(100% - 56px)) !important; max-width:920px !important; min-width:0 !important; margin:0 auto !important; padding:38px 0 72px !important; gap:16px !important; } body.route-yibentong-anki #app .desktop-yibentong-hero { grid-template-columns:minmax(0,1fr) minmax(260px,340px) !important; grid-template-areas: "stats puzzle" "meta puzzle" !important; align-items:stretch !important; gap:12px !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > .desktop-yibentong-stats, body.route-yibentong-anki #desktop-yibentong-puzzle, body.route-yibentong-anki #app .desktop-yibentong-quick, body.route-yibentong-anki #app .desktop-yibentong-filters, body.route-yibentong-anki #app .desktop-yibentong-volume { border:1px solid var(--ybt-border) !important; border-radius:8px !important; background:linear-gradient(180deg,var(--ybt-panel-soft),var(--ybt-panel)) !important; box-shadow:0 18px 42px rgba(0,0,0,.18) !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > .desktop-yibentong-stats { grid-template-columns:repeat(4,minmax(0,1fr)) !important; min-height:82px !important; } body.route-yibentong-anki #app .desktop-yibentong-stats > * { min-height:82px !important; padding:12px 16px !important; } body.route-yibentong-anki #desktop-yibentong-puzzle { min-height:100% !important; padding:18px 20px !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > p { padding:0 2px !important; color:var(--ybt-muted) !important; } body.route-yibentong-anki #app .desktop-yibentong-quick, body.route-yibentong-anki #app .desktop-yibentong-filters { padding:16px !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 { border-color:#26313a !important; background:#0f151a !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 > :is(button,taro-button-core) { min-height:86px !important; transition:background .16s ease,border-color .16s ease,color .16s ease !important; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2 > :is(button,taro-button-core):hover, body.route-yibentong-anki #app .desktop-yibentong-volume:hover { border-color:var(--ybt-border-active) !important; background:#14201f !important; } body.route-yibentong-anki #app .desktop-yibentong-filters { gap:10px !important; } body.route-yibentong-anki #app .desktop-yibentong-filters > div { grid-template-columns:88px minmax(0,1fr) !important; min-height:62px !important; padding:10px 12px !important; background:#0f151a !important; } body.route-yibentong-anki #app .desktop-yibentong-volume > .flex.items-center.gap-3 { min-height:76px !important; background:#121922 !important; } } @media (min-width:981px) and (max-width:1500px) { body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign { width:min(860px,calc(100% - 44px)) !important; } body.route-yibentong-anki #app .desktop-yibentong-hero { grid-template-columns:minmax(0,1fr) !important; grid-template-areas:"stats" "puzzle" "meta" !important; } } @media (max-width:980px) { body.route-yibentong-anki #app, body.route-has-context.route-yibentong-anki #app { width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; } } /* Yibentong card page learning-flow cleanup. Keep this after legacy overrides. */ @media (min-width:981px) { body.route-yibentong-anki { --ybt-bg:#080b0d; --ybt-surface:#10161b; --ybt-surface-2:#131b21; --ybt-line:#26333b; --ybt-line-strong:#31514d; --ybt-text:#eef5f5; --ybt-sub:#90a0aa; --ybt-accent:#2ecfc0; --ybt-blue:#62a8ff; } body.route-yibentong-anki #app { background:var(--ybt-bg) !important; } body.route-yibentong-anki #app .min-h-screen.desktop-yibentong-redesign, body.route-yibentong-anki #desktop-yibentong-landing > .min-h-screen.desktop-yibentong-redesign { width:min(1040px,calc(100% - 48px)) !important; max-width:1040px !important; padding-top:28px !important; gap:14px !important; } body.route-yibentong-anki #desktop-yibentong-page-topbar { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:24px !important; width:100% !important; margin:0 0 4px !important; padding:0 2px 18px !important; border:0 !important; border-bottom:1px solid rgba(128,140,162,.22) !important; background:transparent !important; box-shadow:none !important; } body.route-yibentong-anki #desktop-yibentong-page-topbar span { display:block; margin-bottom:6px; color:var(--ybt-accent); font-size:11px; font-weight:850; } body.route-yibentong-anki #desktop-yibentong-page-topbar h1 { margin:0; color:var(--ybt-text); font-size:28px; font-weight:850; line-height:1.15; } body.route-yibentong-anki #desktop-yibentong-page-topbar p { margin:7px 0 0; color:var(--ybt-sub); font-size:13px; line-height:1.55; } body.route-yibentong-anki #desktop-yibentong-page-topbar nav { display:flex; align-items:center; gap:10px; flex:0 0 auto; } body.route-yibentong-anki #desktop-yibentong-page-topbar a { display:inline-flex; align-items:center; justify-content:center; min-width:88px; height:36px; padding:0 14px; border:1px solid var(--ybt-line); border-radius:6px; background:var(--ybt-surface); color:#dce6e7; font-size:12px; font-weight:760; text-decoration:none; } body.route-yibentong-anki #desktop-yibentong-page-topbar a:last-child { border-color:#168f84; background:#168f84; color:#fff; } body.route-yibentong-anki #app .desktop-yibentong-hero { grid-template-columns:minmax(0,1fr) 320px !important; grid-template-areas:"stats puzzle" "meta puzzle" !important; gap:12px !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > .desktop-yibentong-stats, body.route-yibentong-anki #desktop-yibentong-puzzle, body.route-yibentong-anki #desktop-yibentong-study-modes, body.route-yibentong-anki #app .desktop-yibentong-quick, body.route-yibentong-anki #app .desktop-yibentong-filters, body.route-yibentong-anki #app .desktop-yibentong-volume { border:1px solid var(--ybt-line) !important; border-radius:8px !important; background:var(--ybt-surface) !important; box-shadow:none !important; } body.route-yibentong-anki #app .desktop-yibentong-hero > .desktop-yibentong-stats { overflow:hidden !important; } body.route-yibentong-anki #desktop-yibentong-study-modes { padding:16px !important; } body.route-yibentong-anki #desktop-yibentong-study-modes header { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:12px; } body.route-yibentong-anki #desktop-yibentong-study-modes header span { color:var(--ybt-accent); font-size:12px; font-weight:800; } body.route-yibentong-anki #desktop-yibentong-study-modes header strong { color:var(--ybt-sub); font-size:12px; font-weight:600; } body.route-yibentong-anki .desktop-yibentong-mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } body.route-yibentong-anki .desktop-yibentong-mode-grid a { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:82px; padding:16px; border:1px solid var(--ybt-line); border-radius:8px; background:var(--ybt-surface-2); color:var(--ybt-text); text-decoration:none; box-sizing:border-box; } body.route-yibentong-anki .desktop-yibentong-mode-grid a:hover { border-color:var(--ybt-line-strong); background:#14201f; } body.route-yibentong-anki .desktop-yibentong-mode-grid i { display:grid; place-items:center; width:42px; height:42px; border-radius:7px; background:rgba(46,207,192,.12); color:var(--ybt-accent); font-size:22px; } body.route-yibentong-anki .desktop-yibentong-mode-grid .is-catalog i { background:rgba(98,168,255,.12); color:var(--ybt-blue); } body.route-yibentong-anki .desktop-yibentong-mode-grid b, body.route-yibentong-anki .desktop-yibentong-mode-grid small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.route-yibentong-anki .desktop-yibentong-mode-grid b { color:var(--ybt-text); font-size:15px; line-height:1.35; } body.route-yibentong-anki .desktop-yibentong-mode-grid small { margin-top:4px; color:var(--ybt-sub); font-size:12px; line-height:1.35; } body.route-yibentong-anki .desktop-yibentong-mode-grid em { display:inline-flex; align-items:center; justify-content:center; min-width:52px; height:32px; padding:0 12px; border-radius:6px; background:#168f84; color:#fff; font-size:12px; font-style:normal; font-weight:800; } body.route-yibentong-anki #app .desktop-yibentong-quick > .flex.gap-2, body.route-yibentong-anki #app .desktop-yibentong-filters > div { background:var(--ybt-surface-2) !important; } body.route-yibentong-anki #app .desktop-yibentong-volume { overflow:hidden !important; } body.route-yibentong-anki #app .desktop-yibentong-volume > .flex.items-center.gap-3 { display:grid !important; grid-template-columns:auto minmax(0,1fr) auto !important; align-items:center !important; gap:14px !important; min-height:78px !important; padding:16px !important; background:#121a22 !important; } body.route-yibentong-anki #app .desktop-yibentong-volume > .flex.items-center.gap-3 > .flex-1, body.route-yibentong-anki #app .desktop-yibentong-volume > .flex.items-center.gap-3 > div:nth-child(2) { min-width:0 !important; } body.route-yibentong-anki #app .desktop-yibentong-volume > .flex.items-center.gap-3 button, body.route-yibentong-anki #app .desktop-yibentong-volume > .flex.items-center.gap-3 taro-button-core { min-width:86px !important; min-height:36px !important; padding:8px 14px !important; border-radius:6px !important; white-space:nowrap !important; } body.route-learning-card-detail #app #desktop-subject-reader .subject-reader-shell.is-yibentong-reader { width:min(1180px,calc(100% - 48px)); max-width:1180px; } body.route-learning-card-detail #app #desktop-subject-reader .subject-reader-workspace { grid-template-columns:300px minmax(0,1fr) !important; min-height:calc(100vh - 210px); } body.route-learning-card-detail #app #desktop-subject-reader .subject-reader-nav { position:sticky; top:18px; align-self:start; } body.route-learning-card-detail #app #desktop-subject-reader .subject-reader-main { min-width:0; } } @media (min-width:981px) and (max-width:1500px) { body.route-yibentong-anki #app .desktop-yibentong-hero { grid-template-columns:minmax(0,1fr) !important; grid-template-areas:"stats" "puzzle" "meta" !important; } } @media (max-width:980px) { body.route-yibentong-anki #desktop-yibentong-study-modes { margin:0 16px 10px !important; padding:14px !important; border:1px solid rgba(38,51,59,.18) !important; border-radius:8px !important; background:#fff !important; } body.route-yibentong-anki #desktop-yibentong-page-topbar { margin:0 16px 10px !important; padding:16px 0 12px !important; border-bottom:1px solid rgba(38,51,59,.14) !important; } body.route-yibentong-anki #desktop-yibentong-page-topbar nav { display:flex; gap:8px; margin-top:12px; } body.route-yibentong-anki #desktop-yibentong-study-modes header { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; } body.route-yibentong-anki .desktop-yibentong-mode-grid { display:grid; grid-template-columns:1fr; gap:10px; } body.route-yibentong-anki .desktop-yibentong-mode-grid a { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:70px; padding:12px; border:1px solid rgba(38,51,59,.14); border-radius:8px; color:#1f2c35; text-decoration:none; } } /* Final guard: the subject catalog reader is a reading surface, not an Anki card list. */ /* Yibentong cover-integrated card interface. */ :root { --ybt-cover-blue:#3f7db8; --ybt-cover-blue-deep:#203f86; --ybt-cover-ink:#eef6ff; } body.route-yibentong-anki #desktop-yibentong-cover-panel { display:grid; grid-template-columns:minmax(270px,360px) minmax(0,1fr); gap:0; overflow:hidden; margin-bottom:18px; border:1px solid rgba(89,143,207,.42); border-radius:10px; background: linear-gradient(115deg,rgba(63,125,184,.20),rgba(63,125,184,.04) 42%,transparent), var(--ybt-surface,#101418); } body.route-yibentong-anki .desktop-yibentong-cover-art { min-height:360px; padding:16px; overflow:hidden; background:linear-gradient(180deg,#13233d,#0c1421); } body.route-yibentong-anki .desktop-yibentong-cover-art img { width:100%; height:100%; min-height:328px; object-fit:contain; object-position:center; display:block; border-radius:8px; box-shadow:0 18px 38px rgba(0,0,0,.28); } body.route-yibentong-anki .desktop-yibentong-cover-copy { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:28px 30px; } body.route-yibentong-anki .desktop-yibentong-cover-copy span { color:#75b4ff; font-size:11px; font-weight:850; } body.route-yibentong-anki .desktop-yibentong-cover-copy strong { margin-top:10px; color:var(--ybt-cover-ink); font-size:28px; line-height:1.22; } body.route-yibentong-anki .desktop-yibentong-cover-copy p { max-width:520px; margin:12px 0 0; color:#aab7c9; font-size:14px; line-height:1.7; } body.route-yibentong-anki .desktop-yibentong-volume-picker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:22px; } body.route-yibentong-anki .desktop-yibentong-volume-picker a { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-height:58px; padding:10px 12px; border:1px solid rgba(117,180,255,.26); border-radius:8px; background:rgba(255,255,255,.025); color:#dce9f5; text-decoration:none; } body.route-yibentong-anki .desktop-yibentong-volume-picker a.active { border-color:#2ecfc0; background:rgba(46,207,192,.12); } body.route-yibentong-anki .desktop-yibentong-volume-picker b, body.route-yibentong-anki .desktop-yibentong-volume-picker small { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.route-yibentong-anki .desktop-yibentong-volume-picker b { color:#f1f8fb; font-size:13px; font-weight:840; } body.route-yibentong-anki .desktop-yibentong-volume-picker small { margin-top:5px; color:#8fa1b1; font-size:11px; line-height:1.35; } body.route-yibentong-anki .desktop-yibentong-cover-copy div { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; } body.route-yibentong-anki .desktop-yibentong-cover-copy a { display:inline-flex; align-items:center; justify-content:center; height:38px; padding:0 15px; border:1px solid rgba(117,180,255,.38); border-radius:7px; background:rgba(63,125,184,.16); color:#dbeeff; font-size:12px; font-weight:780; text-decoration:none; } body.route-yibentong-anki .desktop-yibentong-cover-copy a:first-child { border-color:#2ecfc0; background:#168f84; color:#fff; } body.route-yibentong-anki .desktop-yibentong-cover-copy .desktop-yibentong-volume-picker a { display:flex; height:auto; padding:10px 12px; border-color:rgba(117,180,255,.26); background:rgba(255,255,255,.025); color:#dce9f5; } body.route-yibentong-anki .desktop-yibentong-cover-copy .desktop-yibentong-volume-picker a:first-child { border-color:rgba(117,180,255,.26); background:rgba(255,255,255,.025); color:#dce9f5; } body.route-yibentong-anki .desktop-yibentong-cover-copy .desktop-yibentong-volume-picker a.active { border-color:#2ecfc0; background:rgba(46,207,192,.12); } /* Official learning center redesign: task-first desktop workspace. */ /* Official learning center workbench: clearer hierarchy and guided study flow. */ /* Official learning center refined: keep direct entries, improve priority and rhythm. */ body.route-yibentong-anki #app .desktop-yibentong-hero { border-color:rgba(89,143,207,.34) !important; background: linear-gradient(120deg,rgba(63,125,184,.14),transparent 44%), #0f1319 !important; } body.route-yibentong-anki #desktop-yibentong-study-modes, body.route-yibentong-anki #app .desktop-yibentong-quick, body.route-yibentong-anki #app .desktop-yibentong-filters, body.route-yibentong-anki #app .desktop-yibentong-volume, body.route-yibentong-anki #app #desktop-yibentong-volumes { border-color:rgba(89,143,207,.26) !important; } @media (max-width:980px) { #desktop-official-library .official-library-v2 .official-yibentong-entry { grid-template-columns:112px minmax(0,1fr); min-height:178px; padding:14px; } #desktop-official-library .official-library-v2 .official-yibentong-entry figure { width:112px; height:146px; } #desktop-official-library .official-library-v2 .official-yibentong-entry strong { font-size:22px; } #desktop-official-library .official-library-v2 .official-yibentong-entry b { grid-column:1 / -1; } body.route-yibentong-anki #desktop-yibentong-cover-panel { grid-template-columns:1fr; margin:0 16px 10px !important; } body.route-yibentong-anki .desktop-yibentong-cover-art, body.route-yibentong-anki .desktop-yibentong-cover-art img { min-height:178px; } body.route-yibentong-anki .desktop-yibentong-cover-copy { padding:18px; } body.route-yibentong-anki .desktop-yibentong-cover-copy strong { font-size:22px; } } /* Final Yibentong complete catalog surface. */ @media (min-width:981px) { body.route-yibentong-anki #desktop-yibentong-full-catalog { padding:16px !important; border:1px solid var(--ybt-line) !important; border-radius:8px !important; background:var(--ybt-surface) !important; } body.route-yibentong-anki #desktop-yibentong-full-catalog > header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:12px; } body.route-yibentong-anki #desktop-yibentong-full-catalog > header span { display:block; color:var(--ybt-accent); font-size:12px; font-weight:850; } body.route-yibentong-anki #desktop-yibentong-full-catalog > header strong { display:block; margin-top:4px; color:var(--ybt-sub); font-size:12px; font-weight:620; } body.route-yibentong-anki #desktop-yibentong-full-catalog > header a { display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0 14px; border:1px solid #168f84; border-radius:6px; background:#168f84; color:#fff; font-size:12px; font-weight:800; text-decoration:none; white-space:nowrap; } body.route-yibentong-anki .desktop-yibentong-full-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } body.route-yibentong-anki .desktop-yibentong-full-grid article { min-width:0; overflow:hidden; border:1px solid var(--ybt-line); border-radius:8px; background:var(--ybt-surface-2); } body.route-yibentong-anki .desktop-yibentong-full-grid details { min-width:0; } body.route-yibentong-anki .desktop-yibentong-full-grid summary { cursor:pointer; list-style:none; } body.route-yibentong-anki .desktop-yibentong-full-grid summary::-webkit-details-marker { display:none; } body.route-yibentong-anki .desktop-yibentong-full-head { display:grid; grid-template-columns:38px minmax(0,1fr) auto 22px; align-items:center; gap:11px; padding:13px 14px; border-bottom:1px solid rgba(128,140,162,.16); } body.route-yibentong-anki .desktop-yibentong-full-head i { display:grid; place-items:center; width:38px; height:38px; border-radius:7px; background:#168f84; color:#fff; font-size:17px; font-style:normal; font-weight:850; } body.route-yibentong-anki .desktop-yibentong-full-head strong, body.route-yibentong-anki .desktop-yibentong-full-head span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.route-yibentong-anki .desktop-yibentong-full-head strong { color:var(--ybt-text); font-size:15px; line-height:1.35; } body.route-yibentong-anki .desktop-yibentong-full-head span { margin-top:3px; color:var(--ybt-sub); font-size:12px; } body.route-yibentong-anki .desktop-yibentong-full-head a { display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 12px; border:1px solid var(--ybt-line-strong); border-radius:6px; color:#dff7f5; font-size:12px; font-weight:800; text-decoration:none; white-space:nowrap; } body.route-yibentong-anki .desktop-yibentong-full-head em { display:grid; place-items:center; width:22px; height:22px; border-radius:5px; color:var(--ybt-sub); font-size:15px; font-style:normal; transition:transform .16s ease; } body.route-yibentong-anki .desktop-yibentong-full-grid details[open] .desktop-yibentong-full-head em { transform:rotate(180deg); } body.route-yibentong-anki .desktop-yibentong-full-grid ul { display:grid; gap:0; margin:0; padding:8px 12px 12px; list-style:none; } body.route-yibentong-anki .desktop-yibentong-full-grid li { border-bottom:1px solid rgba(128,140,162,.1); } body.route-yibentong-anki .desktop-yibentong-full-grid li:last-child { border-bottom:0; } body.route-yibentong-anki .desktop-yibentong-full-grid li span { color:var(--ybt-accent); font-size:11px; font-weight:850; } body.route-yibentong-anki .desktop-yibentong-full-grid li b { overflow:hidden; color:#dce6e7; font-size:12px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; } body.route-yibentong-anki .desktop-yibentong-full-grid li small { color:var(--ybt-sub); font-size:11px; white-space:nowrap; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader, body.route-learning-card-detail #app #desktop-subject-reader .subject-reader-shell.is-yibentong-reader { width:min(1180px,calc(100% - 48px)) !important; max-width:1180px !important; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-workspace, body.route-learning-card-detail #app #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-workspace { grid-template-columns:300px minmax(0,1fr) !important; min-height:calc(100vh - 210px) !important; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-topic-strip { margin:14px 0 16px; padding:16px; border:1px solid rgba(128,140,162,.18); border-radius:8px; background:rgba(16,20,25,.78); } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-topic-strip header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-topic-strip header strong { color:#f2f4f4; font-size:16px; font-weight:850; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-topic-strip header span { color:#7f8b93; font-size:12px; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-topic-strip > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-topic-strip .subject-reader-topic-button { display:grid; grid-template-columns:36px minmax(0,1fr); gap:11px; align-items:center; min-height:64px; padding:12px; border:1px solid rgba(128,140,162,.18); border-radius:7px; background:rgba(255,255,255,.035); color:inherit; text-align:left; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-topic-strip .subject-reader-topic-button.active { border-color:color-mix(in srgb,var(--subject-tone) 62%,#46535a); background:color-mix(in srgb,var(--subject-tone) 14%,#151b20); } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-topic-strip .subject-reader-topic-button span, #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-nav [data-reader-key] > span { display:grid; place-items:center; width:36px; height:36px; border-radius:7px; background:rgba(46,207,192,.14); color:color-mix(in srgb,var(--subject-tone) 78%,#fff); font-size:12px; font-weight:850; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-topic-strip .subject-reader-topic-button strong { display:block; min-width:0; overflow:hidden; color:#edf1f1; font-size:13px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-topic-strip .subject-reader-topic-button small { display:block; margin-top:4px; color:#7f8b93; font-size:11px; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-nav, body.route-learning-card-detail #app #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-nav { max-height:calc(100vh - 172px) !important; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-nav [data-subject-reader-list] { display:grid; gap:10px; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-topic-button { min-height:66px; margin:0; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-nav [data-reader-key] { display:grid; grid-template-columns:42px minmax(0,1fr); gap:11px; align-items:center; min-height:58px; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-nav .subject-reader-nav-point { margin-top:8px; border-color:rgba(128,140,162,.2); background:rgba(255,255,255,.035); } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-nav .subject-reader-nav-subitem { grid-template-columns:48px minmax(0,1fr); min-height:46px; margin:6px 0 0 26px; padding:8px 10px; border-color:rgba(128,140,162,.12); background:rgba(0,0,0,.12); } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-nav .subject-reader-nav-subitem > span { width:48px; height:28px; border-radius:5px; font-size:11px; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-nav .subject-reader-nav-subitem strong { font-size:12px; font-weight:740; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-nav .subject-reader-nav-subitem small { color:#717d85; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group { border:1px solid rgba(128,140,162,.16); border-radius:7px; background:rgba(255,255,255,.025); overflow:hidden; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group + .subject-reader-point-group { margin-top:10px; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group summary { display:grid; grid-template-columns:minmax(0,1fr) 20px; align-items:center; gap:8px; list-style:none; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group summary::-webkit-details-marker { display:none; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group summary > button { border:0; border-radius:0; background:transparent; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group summary > em { color:#738088; font-style:normal; transition:transform .18s ease; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group[open] summary > em { transform:rotate(180deg); } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group > div { display:grid; gap:6px; padding:0 10px 10px 58px; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group > div:empty { display:none; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group > div [data-reader-key] { grid-template-columns:48px minmax(0,1fr); min-height:44px; padding:8px 10px; border-color:rgba(128,140,162,.12); background:rgba(0,0,0,.12); } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-point-group > div [data-reader-key] > span { width:48px; height:28px; border-radius:5px; font-size:11px; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-main > header { position:relative; top:auto; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-fine-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:16px 28px; border-bottom:1px solid rgba(128,140,162,.16); background:rgba(15,20,24,.82); } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-fine-nav button { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:10px; align-items:center; min-height:48px; padding:10px 12px; border:1px solid rgba(128,140,162,.18); border-radius:7px; background:rgba(255,255,255,.035); color:inherit; text-align:left; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-fine-nav button.active { border-color:color-mix(in srgb,var(--subject-tone) 58%,#42515b); background:color-mix(in srgb,var(--subject-tone) 14%,#151b20); } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-fine-nav span { display:grid; place-items:center; width:32px; height:28px; border-radius:6px; background:rgba(46,207,192,.14); color:color-mix(in srgb,var(--subject-tone) 78%,#fff); font-size:11px; font-weight:850; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-fine-nav strong { min-width:0; overflow:hidden; color:#e9eeee; font-size:13px; font-weight:780; text-overflow:ellipsis; white-space:nowrap; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader .subject-reader-fine-nav small { color:#7f8b93; font-size:11px; white-space:nowrap; } #desktop-subject-reader .subject-reader-shell.is-yibentong-reader [data-reader-nav-toggle] { display:inline-flex; align-items:center; justify-content:center; width:auto; min-height:0; height:26px; margin:0; padding:0 9px; border:1px solid rgba(46,207,192,.28); border-radius:6px; background:rgba(46,207,192,.08); color:#8cebe2; font-size:11px; font-weight:800; } #desktop-subject-reader.subject-reader-nav-collapsed .subject-reader-shell.is-yibentong-reader .subject-reader-workspace { grid-template-columns:72px minmax(0,1fr) !important; } #desktop-subject-reader.subject-reader-nav-collapsed .subject-reader-shell.is-yibentong-reader .subject-reader-nav { overflow:hidden; padding:12px 10px; } #desktop-subject-reader.subject-reader-nav-collapsed .subject-reader-shell.is-yibentong-reader .subject-reader-nav-title { display:grid; gap:8px; justify-items:center; padding:0; border:0; } #desktop-subject-reader.subject-reader-nav-collapsed .subject-reader-shell.is-yibentong-reader .subject-reader-nav-title strong, #desktop-subject-reader.subject-reader-nav-collapsed .subject-reader-shell.is-yibentong-reader .subject-reader-nav-title span, #desktop-subject-reader.subject-reader-nav-collapsed .subject-reader-shell.is-yibentong-reader [data-subject-reader-list] { display:none; } } @media (max-width:980px) { body.route-yibentong-anki #desktop-yibentong-full-catalog { margin:0 16px 10px !important; padding:14px !important; border:1px solid rgba(38,51,59,.18) !important; border-radius:8px !important; background:#fff !important; } body.route-yibentong-anki .desktop-yibentong-full-grid { display:grid; grid-template-columns:1fr; gap:10px; } } /* Keep the Yibentong landing focused: custom entry + complete catalog only. */ @media (min-width:981px) { body.route-yibentong-anki #app .desktop-yibentong-quick, body.route-yibentong-anki #app .desktop-yibentong-filters, body.route-yibentong-anki #app .desktop-yibentong-volume, body.route-yibentong-anki #app #desktop-yibentong-volumes { display:none !important; } body.route-learning-card-detail #app #desktop-subject-reader .subject-reader-volume-switch { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } body.route-learning-card-detail #app #desktop-subject-reader .subject-reader-volume-switch a { display:inline-flex !important; align-items:center !important; justify-content:center !important; height:32px !important; min-width:72px !important; padding:0 12px !important; border:1px solid rgba(128,140,162,.28) !important; border-radius:6px !important; background:rgba(255,255,255,.035) !important; color:#c8d4d6 !important; font-size:12px !important; font-weight:800 !important; text-decoration:none !important; } body.route-learning-card-detail #app #desktop-subject-reader .subject-reader-volume-switch a.active { border-color:#2ecfc0 !important; background:#168f84 !important; color:#fff !important; } } @media (max-width:980px) { body.route-yibentong-anki #app .desktop-yibentong-quick, body.route-yibentong-anki #app .desktop-yibentong-filters, body.route-yibentong-anki #app .desktop-yibentong-volume, body.route-yibentong-anki #app #desktop-yibentong-volumes { display:none !important; } } /* Anki study left outline: preserve point/subpoint hierarchy and full titles. */ body.route-yibentong-anki .desktop-yibentong-topic-link { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:9px; min-height:36px; color:inherit; text-decoration:none; } body.route-yibentong-anki .desktop-yibentong-topic-link:hover b { color:#f4ffff; } /* Yibentong reader refresh: keep the page as a quiet two-column reading tool. */ /* Grading split workspace: two clear panes, no overlap or compressed controls. */ @media (min-width:981px) { body.route-grade-RETIRED { --grade-split-bg:#08090b; --grade-split-panel:#101216; --grade-split-panel-2:#15171c; --grade-split-line:#292d35; --grade-split-line-strong:#3a404b; --grade-split-text:#f2f4f7; --grade-split-muted:#8c929d; --grade-split-accent:#35d6c5; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { width:100% !important; max-width:none !important; margin:0 !important; padding:38px clamp(32px,3vw,48px) 64px !important; overflow:visible !important; background:var(--grade-split-bg) !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED { display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:end !important; gap:24px !important; min-height:auto !important; margin:0 0 22px !important; padding:0 0 22px !important; border-bottom:1px solid var(--grade-split-line) !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED span { color:var(--grade-split-muted) !important; font-size:11px !important; font-weight:800 !important; letter-spacing:0 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED h1 { margin:6px 0 8px !important; color:var(--grade-split-text) !important; font-size:32px !important; line-height:1.18 !important; letter-spacing:0 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED p { max-width:720px !important; margin:0 !important; color:var(--grade-split-muted) !important; font-size:14px !important; line-height:1.55 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED a { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:40px !important; padding:0 15px !important; border:1px solid var(--grade-split-line-strong) !important; border-radius:6px !important; background:#14171c !important; color:#dfe5ea !important; font-size:13px !important; font-weight:700 !important; text-decoration:none !important; box-shadow:none !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED a:hover { border-color:var(--grade-split-accent) !important; color:#effffb !important; background:#10201f !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content { display:grid !important; grid-template-columns:minmax(460px,1.12fr) minmax(380px,.88fr) !important; grid-auto-rows:auto !important; align-items:start !important; gap:18px 20px !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; overflow:visible !important; border:0 !important; background:transparent !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-typebar { grid-column:1 / -1 !important; position:static !important; display:grid !important; grid-template-columns:108px minmax(0,1fr) !important; align-items:center !important; gap:14px !important; min-height:62px !important; margin:0 !important; padding:9px !important; overflow:visible !important; border:1px solid var(--grade-split-line) !important; border-radius:8px !important; background:linear-gradient(90deg,rgba(53,214,197,.07),rgba(255,255,255,.025) 42%,rgba(53,214,197,.035)),var(--grade-split-panel) !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar::before { content:'题型' !important; padding-left:13px !important; color:#abb2bc !important; font-size:13px !important; font-weight:800 !important; white-space:nowrap !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar > div { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; width:100% !important; margin:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core { display:flex !important; align-items:center !important; justify-content:center !important; min-width:0 !important; min-height:44px !important; padding:0 12px !important; border:1px solid transparent !important; border-radius:6px !important; background:transparent !important; color:#a0a6b0 !important; font-size:14px !important; font-weight:750 !important; line-height:1.2 !important; white-space:normal !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button:hover, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core:hover, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar .capsule-selected { border-color:rgba(53,214,197,.45) !important; background:#172321 !important; color:#effffb !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { position:static !important; display:grid !important; grid-template-rows:auto minmax(0,1fr) !important; height:auto !important; min-height:560px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border:1px solid var(--grade-split-line) !important; border-radius:8px !important; background:var(--grade-split-panel) !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel { grid-column:1 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { grid-column:2 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { width:100% !important; min-height:62px !important; margin:0 !important; padding:16px 18px !important; border:0 !important; border-bottom:1px solid var(--grade-split-line) !important; border-radius:0 !important; background:var(--grade-split-panel-2) !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child { position:static !important; display:flex !important; flex-direction:column !important; gap:14px !important; width:100% !important; min-height:0 !important; margin:0 !important; padding:16px !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h1, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h2, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h3, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel p, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel p { margin:0 !important; color:var(--grade-split-text) !important; font-size:16px !important; font-weight:760 !important; line-height:1.45 !important; letter-spacing:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child { position:static !important; display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:6px !important; width:100% !important; min-height:42px !important; margin:0 !important; padding:4px !important; overflow:visible !important; border:1px solid var(--grade-split-line) !important; border-radius:7px !important; background:#0c0e12 !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child taro-button-core { min-width:0 !important; min-height:34px !important; padding:0 8px !important; border:1px solid transparent !important; border-radius:5px !important; background:transparent !important; color:#9da3ad !important; font-size:13px !important; font-weight:750 !important; white-space:normal !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child .capsule-selected { border-color:rgba(53,214,197,.42) !important; background:#17312e !important; color:#effffb !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child > div:has(textarea), body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:has(textarea), body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child > div:has(taro-textarea-core), body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:has(taro-textarea-core), body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child > div:last-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:last-child { display:flex !important; flex:1 1 auto !important; width:100% !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core { display:block !important; width:100% !important; height:auto !important; min-height:410px !important; max-height:none !important; margin:0 !important; padding:16px !important; border:1px solid var(--grade-split-line-strong) !important; border-radius:7px !important; background:#0b0d11 !important; color:var(--grade-split-text) !important; font-size:14px !important; line-height:1.7 !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea:focus, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea:focus, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core:focus-within, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core:focus-within { border-color:var(--grade-split-accent) !important; outline:0 !important; box-shadow:0 0 0 1px rgba(53,214,197,.16) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-submit { grid-column:1 / -1 !important; justify-self:stretch !important; width:100% !important; max-width:none !important; min-height:52px !important; margin:0 !important; border:1px solid var(--grade-split-accent) !important; border-radius:8px !important; background:linear-gradient(135deg,#31dece 0%,#159989 100%) !important; color:#fff !important; font-size:15px !important; font-weight:850 !important; box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 14px 34px rgba(20,162,148,.16) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-processing, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > *:not(.desktop-grade-RETIRED-typebar):not(.desktop-grade-RETIRED-question-panel):not(.desktop-grade-RETIRED-answer-panel):not(.desktop-grade-RETIRED-submit):not(.desktop-grade-RETIRED-history-shortcut) { grid-column:1 / -1 !important; margin:0 !important; border:1px solid var(--grade-split-line) !important; border-radius:8px !important; background:var(--grade-split-panel) !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-history-shortcut, body.route-grade-RETIRED #app .desktop-grade-RETIRED-legacy-footer { display:none !important; } } @media (min-width:981px) and (max-width:1240px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { min-height:500px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel { grid-column:1 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { grid-column:2 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core { min-height:320px !important; } } @media (min-width:981px) and (max-width:1080px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content { grid-template-columns:1fr !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { grid-column:1 !important; } } @media (max-width:980px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { padding:24px 18px 52px !important; overflow:visible !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED { display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:14px !important; margin:0 0 18px !important; padding:0 0 18px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content { display:grid !important; grid-template-columns:1fr !important; gap:14px !important; padding:0 !important; overflow:visible !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-typebar, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { position:static !important; width:100% !important; height:auto !important; min-height:0 !important; margin:0 !important; overflow:hidden !important; border-radius:8px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar > div, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child { display:grid !important; grid-template-columns:1fr !important; gap:6px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child { position:static !important; width:100% !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core { height:auto !important; min-height:260px !important; max-height:none !important; } } /* Grading official/exam style pass: match the quieter paper/course pages. */ @media (min-width:981px) { body.route-grade-RETIRED { --grade-split-bg:#09090b; --grade-split-panel:#111114; --grade-split-panel-2:#14161b; --grade-split-line:#2f2f37; --grade-split-line-strong:#35353d; --grade-split-text:#ece9ef; --grade-split-muted:#8d8995; --grade-split-accent:#35d6c5; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { padding:54px clamp(32px,3vw,48px) 76px !important; background:var(--grade-split-bg) !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED { min-height:0 !important; margin:0 !important; padding:0 0 25px !important; border-bottom:1px solid #292930 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED span { color:var(--grade-split-accent) !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.08em !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED h1 { margin:8px 0 9px !important; color:#f3f1f5 !important; font-size:30px !important; font-weight:780 !important; line-height:1.2 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED p { max-width:680px !important; color:#96929e !important; font-size:14px !important; line-height:1.65 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED a { min-height:36px !important; padding:9px 12px !important; border:1px solid #35353d !important; border-radius:4px !important; background:transparent !important; color:#c4c0c9 !important; font:600 12px/1.2 inherit !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED a:hover { border-color:#3b9387 !important; color:#43ddcd !important; background:transparent !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content { gap:14px 16px !important; padding-top:24px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-typebar { min-height:54px !important; padding:6px !important; border:1px solid var(--grade-split-line) !important; border-radius:5px !important; background:var(--grade-split-panel) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar::before { padding-left:11px !important; color:#85818e !important; font-size:12px !important; font-weight:700 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar > div { gap:6px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core { min-height:38px !important; border-radius:4px !important; color:#aaa6b1 !important; font-size:13px !important; font-weight:650 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button:hover, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core:hover { border-color:#3e8f86 !important; background:#151b1a !important; color:#43ddcd !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar .capsule-selected { border-color:#35d6c5 !important; background:#173c38 !important; color:#dffaf6 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { min-height:540px !important; border:1px solid var(--grade-split-line) !important; border-radius:5px !important; background:var(--grade-split-panel) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { min-height:54px !important; padding:14px 17px !important; border-bottom:1px solid #2a2a31 !important; background:var(--grade-split-panel) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child { gap:12px !important; padding:17px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h1, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h2, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h3, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel p, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel p { color:#ece9ef !important; font-size:16px !important; font-weight:760 !important; line-height:1.4 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child { min-height:40px !important; padding:3px !important; border:1px solid #2f2f37 !important; border-radius:4px !important; background:#121216 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child taro-button-core { min-height:32px !important; border-radius:3px !important; color:#aaa6b1 !important; font-size:12px !important; font-weight:650 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child button:hover, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child taro-button-core:hover { border-color:#3b9387 !important; color:#43ddcd !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child .capsule-selected { border-color:#35d6c5 !important; background:#173c38 !important; color:#dffaf6 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core { min-height:390px !important; border:1px solid #35353d !important; border-radius:4px !important; background:#0d0d10 !important; color:#f0eef3 !important; font-size:14px !important; line-height:1.75 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea:focus, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea:focus, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core:focus-within, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core:focus-within { border-color:#35d6c5 !important; box-shadow:0 0 0 3px rgba(53,214,197,.12) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-submit { min-height:48px !important; border:1px solid #287e73 !important; border-radius:4px !important; background:#173c38 !important; background-image:none !important; color:#dffaf6 !important; font-size:14px !important; font-weight:760 !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-submit:hover { border-color:#35d6c5 !important; background:#1b4944 !important; color:#ffffff !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-processing, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > *:not(.desktop-grade-RETIRED-typebar):not(.desktop-grade-RETIRED-question-panel):not(.desktop-grade-RETIRED-answer-panel):not(.desktop-grade-RETIRED-submit):not(.desktop-grade-RETIRED-history-shortcut) { border:1px solid var(--grade-split-line) !important; border-radius:5px !important; background:var(--grade-split-panel) !important; } } /* ============================================================ EigenFlux workspace language (reference screenshots) Principles: - few borders; separate with spacing / soft fills - Chinese-first typography, quiet English labels - teal only on capsules / active accents - Broadcast side gutters (64px) Visual only. ============================================================ */ @media (min-width:981px) { body.route-qa-RETIRED, body.route-grade-RETIRED, #desktop-exam-hub { --ef-font: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", "IBM Plex Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif; --ef-bg: #0b0c0e; --ef-soft: #12141a; --ef-softer: #161920; --ef-text: #f3f4f6; --ef-muted: #aeb4bd; --ef-faint: #8e959f; --ef-line: rgba(255,255,255,.11); --ef-accent: #35d6c5; --ef-accent-ink: #06201c; --ef-gutter: var(--desktop-page-gutter, 64px); } body.route-qa-RETIRED #app, body.route-grade-RETIRED #app, #desktop-exam-hub { background: var(--ef-bg) !important; color: var(--ef-text) !important; font-family: var(--ef-font) !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.route-qa-RETIRED #app *, body.route-grade-RETIRED #app *, #desktop-exam-hub * { font-family: inherit !important; } /* ---------- Shared page rails (Broadcast gutters) ---------- */ body.route-qa-RETIRED #app .min-h-screen, body.route-grade-RETIRED #app .min-h-screen, body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace, #desktop-exam-hub .exam-hub-shell { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 48px var(--ef-gutter) 72px !important; box-sizing: border-box !important; background: transparent !important; background-image: none !important; } /* Hide noisy legacy brand hero / orbit logo on QA */ body.route-qa-RETIRED #app .desktop-qa-RETIRED-legacy-header, body.route-qa-RETIRED #app .desktop-legacy-topbar, body.route-grade-RETIRED #app .desktop-grade-RETIRED-legacy-header, body.route-grade-RETIRED #app .desktop-grade-RETIRED-legacy-intro, body.route-grade-RETIRED #app .desktop-legacy-topbar, body.route-qa-RETIRED #app .animate-orbit, body.route-qa-RETIRED #app .animate-orbit-reverse, body.route-qa-RETIRED #app [class*="animate-orbit"], body.route-qa-RETIRED #app .__linka_perf_dead [style*="width:88px"][style*="height:88px"], body.route-qa-RETIRED #app .__linka_perf_dead [style*="width: 88px"][style*="height: 88px"], body.route-qa-RETIRED #app .__linka_perf_dead [style*="width:110px"][style*="height:110px"], body.route-qa-RETIRED #app .__linka_perf_dead [style*="width: 110px"][style*="height: 110px"] { display: none !important; } /* ---------- Headers: title-led, one hairline only ---------- */ body.route-qa-RETIRED #desktop-qa-header-RETIRED, body.route-grade-RETIRED #desktop-grade-header-RETIRED, #desktop-exam-hub .exam-hub-head, #desktop-exam-hub .exam-hub-hero { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 24px !important; min-height: 0 !important; margin: 0 0 28px !important; padding: 0 0 20px !important; border: 0 !important; border-bottom: 1px solid var(--ef-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED span, body.route-grade-RETIRED #desktop-grade-header-RETIRED span, #desktop-exam-hub .exam-hub-head span, #desktop-exam-hub .exam-hub-hero span, #desktop-exam-hub .exam-section-head span { display: block !important; color: var(--ef-faint) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .04em !important; text-transform: none !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED h1, body.route-grade-RETIRED #desktop-grade-header-RETIRED h1, #desktop-exam-hub .exam-hub-head h1, #desktop-exam-hub .exam-hub-hero h1 { margin: 6px 0 8px !important; color: var(--ef-text) !important; font-size: 28px !important; font-weight: 650 !important; letter-spacing: -.02em !important; line-height: 1.2 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED p, body.route-grade-RETIRED #desktop-grade-header-RETIRED p, #desktop-exam-hub .exam-hub-head p, #desktop-exam-hub .exam-hub-hero p, #desktop-exam-hub .exam-section-head p { max-width: 560px !important; margin: 0 !important; color: var(--ef-muted) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.55 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED a, body.route-grade-RETIRED #desktop-grade-header-RETIRED a, #desktop-exam-hub .exam-hub-head > a, #desktop-exam-hub .exam-hub-hero > a { min-height: 32px !important; padding: 0 12px !important; border: 0 !important; border-radius: 999px !important; background: rgba(53,214,197,.12) !important; color: var(--ef-accent) !important; font-size: 12px !important; font-weight: 650 !important; box-shadow: none !important; } /* ---------- QA / Grade: almost borderless boards ---------- */ body.route-qa-RETIRED #app .desktop-qa-RETIRED-content, body.route-qa-RETIRED:not(.route-qa):not(.route-grade) #app .glass-card, body.route-qa-RETIRED:not(.route-qa):not(.route-grade) #app .glass-card-frosted, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content, body.route-grade-RETIRED:not(.route-qa):not(.route-grade) #app .glass-card, body.route-grade-RETIRED:not(.route-qa):not(.route-grade) #app .glass-card-frosted { width: 100% !important; margin: 0 0 14px !important; padding: 18px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-typebar { grid-column: 1 / -1 !important; display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 0 4px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar::before { display: none !important; content: none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar > div { display: contents !important; } /* Glowing capsules only — no chip trays */ body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child taro-button-core, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button:not([class*="bg-gradient-primary"]):not([class*="bg-primary"]), body.route-grade-RETIRED #app button:not([class*="bg-gradient-primary"]):not([class*="bg-primary"]):not(.desktop-grade-RETIRED-submit) { min-height: 28px !important; height: 28px !important; padding: 0 12px !important; border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.05) !important; color: var(--ef-muted) !important; font-size: 12px !important; font-weight: 600 !important; box-shadow: none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar .capsule-selected, body.route-grade-RETIRED #app .capsule-selected, body.route-qa-RETIRED #app .capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .capsule-selected { background: var(--ef-accent) !important; color: var(--ef-accent-ink) !important; box-shadow: 0 0 0 1px rgba(53,214,197,.18), 0 0 16px rgba(53,214,197,.28) !important; } body.route-grade-RETIRED #app .capsule-selected *, body.route-qa-RETIRED #app .capsule-selected * { color: var(--ef-accent-ink) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } /* Soft filled panes, no outline frames */ body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { display: grid !important; grid-template-rows: 44px minmax(0, 1fr) !important; min-height: 420px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; border-radius: 12px !important; background: var(--ef-soft) !important; box-shadow: none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 0 16px !important; border: 0 !important; border-bottom: 1px solid var(--ef-line) !important; background: transparent !important; color: var(--ef-text) !important; font-size: 13px !important; font-weight: 600 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child::before, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--ef-accent); box-shadow: 0 0 8px rgba(53,214,197,.55); } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child { display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 14px !important; border: 0 !important; background: transparent !important; } body.route-qa-RETIRED #app textarea, body.route-grade-RETIRED #app textarea, body.route-qa-RETIRED #app taro-textarea-core, body.route-grade-RETIRED #app taro-textarea-core, body.route-qa-RETIRED #app input, body.route-grade-RETIRED #app input { border: 0 !important; border-radius: 10px !important; background: rgba(0,0,0,.28) !important; color: var(--ef-text) !important; box-shadow: none !important; font-size: 14px !important; line-height: 1.7 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core { flex: 1 1 auto !important; min-height: 280px !important; } body.route-qa-RETIRED #app textarea:focus, body.route-grade-RETIRED #app textarea:focus, body.route-qa-RETIRED #app taro-textarea-core:focus-within, body.route-grade-RETIRED #app taro-textarea-core:focus-within { box-shadow: inset 0 0 0 1px rgba(53,214,197,.35) !important; outline: 0 !important; } body.route-qa-RETIRED #app button[class*="bg-gradient-primary"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit, body.route-grade-RETIRED #app button[class*="bg-gradient-primary"], body.route-grade-RETIRED #app button[class*="bg-primary"] { grid-column: 1 / -1 !important; justify-self: end !important; min-width: 140px !important; min-height: 36px !important; margin-left: auto !important; padding: 0 16px !important; border: 0 !important; border-radius: 999px !important; background: var(--ef-accent) !important; background-image: none !important; color: var(--ef-accent-ink) !important; font-size: 13px !important; font-weight: 700 !important; box-shadow: 0 0 18px rgba(53,214,197,.28) !important; } body.route-qa-RETIRED #app button[class*="bg-gradient-primary"] span, body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit span { color: var(--ef-accent-ink) !important; } body.route-qa-RETIRED #app h1, body.route-qa-RETIRED #app h2, body.route-qa-RETIRED #app h3, body.route-qa-RETIRED #app strong, body.route-grade-RETIRED #app h1, body.route-grade-RETIRED #app h2, body.route-grade-RETIRED #app h3, body.route-grade-RETIRED #app strong { color: var(--ef-text) !important; font-weight: 650 !important; } body.route-qa-RETIRED #app p, body.route-qa-RETIRED #app span, body.route-qa-RETIRED #app label, body.route-grade-RETIRED #app p, body.route-grade-RETIRED #app span, body.route-grade-RETIRED #app label { color: var(--ef-muted) !important; } /* ---------- Exam hub: strip nested frames / glow borders ---------- */ #desktop-exam-hub.exam-hub-v2:before, #desktop-exam-hub .exam-primary-card:after { display: none !important; content: none !important; } #desktop-exam-hub .exam-glow-section, #desktop-exam-hub .exam-start-main, #desktop-exam-hub .exam-primary-card, #desktop-exam-hub .exam-topic-feature, #desktop-exam-hub .exam-history-panel, #desktop-exam-hub .exam-mode-grid > *, #desktop-exam-hub .exam-quick, #desktop-exam-hub .exam-analysis-grid a, #desktop-exam-hub .exam-flow > div { border: 1px solid rgba(255,255,255,.08) !important; box-shadow: none !important; background: #14171d !important; border-radius: 12px !important; } #desktop-exam-hub .exam-primary-card { background: linear-gradient(160deg, rgba(53,214,197,.15), #171b20 44%, #14171d) !important; border-color: rgba(53,214,197,.22) !important; } #desktop-exam-hub .exam-primary-card em, #desktop-exam-hub .exam-primary-card > span, #desktop-exam-hub .exam-topic-feature > span, #desktop-exam-hub .exam-history-panel > span { color: #9da5af !important; font-size: 11px !important; letter-spacing: .03em !important; } #desktop-exam-hub .exam-primary-card h2, #desktop-exam-hub .exam-topic-feature h2, #desktop-exam-hub .exam-history-panel h2, #desktop-exam-hub .exam-section-head h2 { color: var(--ef-text) !important; font-size: 22px !important; font-weight: 650 !important; letter-spacing: -.01em !important; } #desktop-exam-hub .exam-primary-card p, #desktop-exam-hub .exam-topic-feature p, #desktop-exam-hub .exam-history-panel p, #desktop-exam-hub .exam-mode-grid p, #desktop-exam-hub .exam-analysis-grid span { color: var(--ef-muted) !important; font-size: 13px !important; line-height: 1.6 !important; } #desktop-exam-hub .exam-primary-card b, #desktop-exam-hub .exam-topic-feature b, #desktop-exam-hub .exam-start-main b { border: 0 !important; border-radius: 999px !important; background: #35d6c5 !important; color: #041916 !important; box-shadow: 0 0 16px rgba(53,214,197,.25) !important; font-weight: 700 !important; } #desktop-exam-hub .exam-analysis-grid { border: 0 !important; background: transparent !important; gap: 10px !important; } #desktop-exam-hub .exam-analysis-grid a { border: 1px solid rgba(255,255,255,.08) !important; background: #14171d !important; } #desktop-exam-hub .exam-analysis-grid strong, #desktop-exam-hub .exam-mode-grid strong, #desktop-exam-hub .exam-flow strong { color:#f2f4f6 !important; } #desktop-exam-hub .exam-analysis-grid span, #desktop-exam-hub .exam-mode-grid span, #desktop-exam-hub .exam-flow span { color:#a6adb6 !important; } #desktop-exam-hub .exam-analysis-grid i, #desktop-exam-hub .exam-mode-grid i, #desktop-exam-hub .exam-flow i { color:#4be0d0 !important; } #desktop-exam-hub .exam-library-count { color:#4be0d0 !important; font-weight:700 !important; } #desktop-exam-hub .exam-section-head h2 { margin-top:5px !important; } #desktop-exam-hub .exam-section-head p { color:#aeb4bd !important; } #desktop-exam-hub .exam-history-panel a { font-weight:700 !important; } #desktop-exam-hub .exam-analysis-grid a:hover, #desktop-exam-hub .exam-primary-card:hover, #desktop-exam-hub .exam-topic-feature:hover, #desktop-exam-hub .exam-mode-grid > *:hover { background: var(--ef-softer) !important; } #desktop-exam-hub .exam-history-panel a { border: 0 !important; border-radius: 999px !important; background: rgba(53,214,197,.10) !important; color: var(--ef-accent) !important; } #desktop-exam-hub .exam-section-head { border: 0 !important; margin-bottom: 14px !important; padding: 0 !important; } body.desktop-light.route-qa-RETIRED #app, body.desktop-light #desktop-exam-hub { background: #f3f5f8 !important; color: #1f2933 !important; } body.desktop-light #desktop-exam-hub .exam-primary-card, body.desktop-light #desktop-exam-hub .exam-topic-feature, body.desktop-light #desktop-exam-hub .exam-history-panel, body.desktop-light #desktop-exam-hub .exam-glow-section, body.desktop-light #desktop-exam-hub .exam-analysis-grid a, body.desktop-light #desktop-exam-hub .exam-mode-grid > * { background: #fff !important; } } @media (max-width:1100px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace > .desktop-grade-RETIRED-content { grid-template-columns: 1fr !important; } } /* When a desktop-owned page is open, keep the Taro #app out of sight and out of the hit-test path. Leaving it visible resurfaces the legacy purple exam/home UI underneath custom hubs (真题中心 / 课程 / 广播…). Native QA/Grade soft-nav keeps #app visible via route-qa / route-grade. */ body.desktop-custom-view:not(.route-qa):not(.route-grade) #app, body.desktop-custom-view:not(.route-qa):not(.route-grade) #container { visibility: hidden !important; pointer-events: none !important; opacity: 0 !important; } body.desktop-custom-view { overflow: hidden; } body.desktop-custom-view #desktop-grade-workspace-redesign-RETIRED, body.desktop-custom-view #desktop-qa-workspace-RETIRED { visibility:visible !important; pointer-events:auto !important; } body.route-grade-RETIRED #desktop-grade-workspace-redesign-RETIRED { display:none !important; visibility:hidden !important; pointer-events:none !important; } body.desktop-nav-collapsed.route-grade-RETIRED #desktop-grade-workspace-redesign-RETIRED { left:0 !important; } body.context-collapsed.route-grade-RETIRED #desktop-grade-workspace-redesign-RETIRED { right:0 !important; } /* Exam hub final readability pass. Keep these declarations last so generic text-repair rules cannot make action labels transparent or low contrast. */ /* Exam hub actions must remain readable before hover. */ /* Q&A UI redesign: make the route read as one focused answer workspace. */ @media (min-width:981px) { body.route-qa-RETIRED { --qa-work-bg:#090a0d; --qa-work-panel:#111318; --qa-work-panel-raised:#151820; --qa-work-line:#242832; --qa-work-line-strong:#39404c; --qa-work-text:#f4f6f8; --qa-work-muted:#8f98a6; --qa-work-soft:#b8c0cb; --qa-work-accent:#35d6c5; --qa-work-accent-ink:#061311; } body.route-qa-RETIRED #app .min-h-screen { display:grid !important; grid-template-columns:minmax(0,1fr) !important; align-content:start !important; gap:0 !important; min-height:100vh !important; padding:34px clamp(34px,3.2vw,56px) 64px !important; background: linear-gradient(180deg,rgba(53,214,197,.055),rgba(53,214,197,0) 270px), var(--qa-work-bg) !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED { display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:start !important; gap:24px !important; margin:0 0 18px !important; padding:0 0 18px !important; border-bottom:1px solid var(--qa-work-line) !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED span { color:var(--qa-work-accent) !important; font-size:11px !important; font-weight:800 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED h1 { margin:6px 0 8px !important; color:var(--qa-work-text) !important; font-size:28px !important; font-weight:800 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED p { max-width:720px !important; color:var(--qa-work-muted) !important; font-size:13px !important; line-height:1.65 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED a { min-height:36px !important; padding:0 14px !important; border:1px solid var(--qa-work-line-strong) !important; border-radius:6px !important; background:var(--qa-work-panel-raised) !important; color:var(--qa-work-soft) !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED a:hover { border-color:var(--qa-work-accent) !important; background:#12201f !important; color:#effffc !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED { display:flex !important; width:max-content !important; max-width:100% !important; gap:6px !important; margin:0 0 14px !important; padding:5px !important; border:1px solid var(--qa-work-line) !important; border-radius:8px !important; background:#0e1015 !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED > * { display:flex !important; gap:6px !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED button { width:auto !important; min-width:86px !important; height:34px !important; padding:0 14px !important; border:0 !important; border-radius:6px !important; background:transparent !important; color:#939ba8 !important; font-size:13px !important; font-weight:750 !important; line-height:34px !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED button.active, body.route-qa-RETIRED #desktop-qa-mode-RETIRED button[aria-pressed="true"] { background:var(--qa-work-accent) !important; color:var(--qa-work-accent-ink) !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content { width:100% !important; max-width:1040px !important; margin-right:auto !important; margin-left:auto !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea), body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) { border:1px solid var(--qa-work-line) !important; border-radius:8px !important; background:var(--qa-work-panel) !important; box-shadow:0 18px 60px rgba(0,0,0,.24) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea) > div:first-child, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) > div:first-child { min-height:54px !important; padding:0 18px !important; border:0 !important; border-bottom:1px solid var(--qa-work-line) !important; border-radius:8px 8px 0 0 !important; background:var(--qa-work-panel-raised) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea) > div:last-child, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) > div:last-child { padding:18px !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content textarea, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-textarea-core { min-height:210px !important; padding:16px !important; border:1px solid #2d3340 !important; border-radius:7px !important; background:#0b0d12 !important; color:var(--qa-work-text) !important; font-size:15px !important; line-height:1.75 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content textarea:focus, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-textarea-core:focus-within { border-color:var(--qa-work-accent) !important; box-shadow:0 0 0 2px rgba(53,214,197,.12) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[class*="bg-gradient-primary"], body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[style*="var(--gradient-primary)"], body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-button-core[class*="bg-gradient-primary"] { min-height:46px !important; border:0 !important; border-radius:7px !important; background:var(--qa-work-accent) !important; color:var(--qa-work-accent-ink) !important; font-size:15px !important; font-weight:850 !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) { max-width:1040px !important; margin:0 auto 14px !important; padding:12px !important; border:1px solid var(--qa-work-line) !important; border-radius:8px !important; background:#0f1116 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) > div { gap:8px !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) button, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) taro-button-core { min-height:36px !important; border-color:#303643 !important; border-radius:6px !important; background:#141720 !important; color:#c8ced8 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-card { max-width:1040px !important; margin:18px auto 0 !important; border:1px solid var(--qa-work-line) !important; border-radius:8px !important; background:#101318 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body { padding:18px 22px 24px !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body p, body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body span:not([class*="i-mdi"]), body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body div:not([class*="i-mdi"]) { color:#dbe3ea !important; font-size:15px !important; line-height:1.9 !important; } } /* Q&A full visual redesign: bright editorial workspace with stronger hierarchy. */ @media (min-width:981px) { body.route-qa-RETIRED { --qa-redesign-bg:#eef3f7; --qa-redesign-bg-2:#f8fafc; --qa-redesign-panel:#ffffff; --qa-redesign-panel-soft:#f4f8fb; --qa-redesign-ink:#16202b; --qa-redesign-text:#263443; --qa-redesign-muted:#667589; --qa-redesign-subtle:#8995a5; --qa-redesign-line:#dce5ee; --qa-redesign-line-strong:#c4d1df; --qa-redesign-teal:#168f83; --qa-redesign-teal-2:#23b7a8; --qa-redesign-blue:#315f9f; --qa-redesign-warm:#b7791f; --qa-redesign-shadow:0 22px 60px rgba(27,43,62,.12); } body.route-qa-RETIRED #app, body.route-qa-RETIRED #container { background:var(--qa-redesign-bg) !important; } body.route-qa-RETIRED #app .min-h-screen { width:100% !important; min-height:100vh !important; padding:34px clamp(30px,4vw,72px) 72px !important; background: radial-gradient(circle at 14% -8%,rgba(35,183,168,.16),transparent 34%), radial-gradient(circle at 88% 4%,rgba(49,95,159,.12),transparent 30%), linear-gradient(180deg,#f8fafc 0%,#eef3f7 42%,#e9eff5 100%) !important; color:var(--qa-redesign-text) !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED { width:min(1120px,100%) !important; margin:0 auto 22px !important; padding:0 0 22px !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:end !important; gap:28px !important; border-bottom:1px solid rgba(196,209,223,.9) !important; background:transparent !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED span { color:var(--qa-redesign-teal) !important; font-size:10px !important; font-weight:900 !important; line-height:1.2 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED h1 { margin:8px 0 8px !important; color:var(--qa-redesign-ink) !important; font-size:30px !important; font-weight:900 !important; line-height:1.12 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED p { max-width:760px !important; color:var(--qa-redesign-muted) !important; font-size:15px !important; font-weight:520 !important; line-height:1.72 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED a { min-width:96px !important; min-height:40px !important; padding:0 16px !important; border:1px solid var(--qa-redesign-line-strong) !important; border-radius:8px !important; background:rgba(255,255,255,.72) !important; color:#334155 !important; font-size:13px !important; font-weight:800 !important; box-shadow:0 8px 22px rgba(27,43,62,.06) !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED a:hover { border-color:rgba(22,143,131,.42) !important; background:#fff !important; color:var(--qa-redesign-teal) !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED { width:min(1120px,100%) !important; max-width:1120px !important; margin:0 auto 16px !important; padding:8px !important; display:flex !important; gap:8px !important; border:1px solid var(--qa-redesign-line) !important; border-radius:12px !important; background:rgba(255,255,255,.76) !important; box-shadow:0 14px 34px rgba(27,43,62,.08) !important; backdrop-filter:blur(14px) !important; -webkit-backdrop-filter:blur(14px) !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED > * { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; width:100% !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED button { min-width:0 !important; height:42px !important; padding:0 16px !important; border:1px solid transparent !important; border-radius:9px !important; background:transparent !important; color:#5d6b7c !important; font-size:14px !important; font-weight:850 !important; line-height:40px !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED button:hover { border-color:#d5e0ea !important; background:#f7fafc !important; color:var(--qa-redesign-ink) !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED button.active, body.route-qa-RETIRED #desktop-qa-mode-RETIRED button[aria-pressed="true"] { border-color:rgba(22,143,131,.22) !important; background:linear-gradient(180deg,#1db7a8,#168f83) !important; color:#fff !important; box-shadow:0 10px 22px rgba(22,143,131,.22) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content { width:min(1120px,100%) !important; max-width:1120px !important; margin-right:auto !important; margin-left:auto !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) { width:min(1120px,100%) !important; max-width:1120px !important; margin:0 auto 16px !important; padding:10px !important; border:1px solid var(--qa-redesign-line) !important; border-radius:12px !important; background:rgba(255,255,255,.72) !important; box-shadow:0 12px 32px rgba(27,43,62,.07) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) > div { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) button, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) taro-button-core { min-height:42px !important; border:1px solid transparent !important; border-radius:9px !important; background:#f3f7fa !important; color:#516074 !important; font-size:14px !important; font-weight:800 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) button:hover, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) taro-button-core:hover { border-color:#cddbe7 !important; background:#fff !important; color:var(--qa-redesign-ink) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content .capsule-selected, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[aria-pressed="true"] { border-color:rgba(22,143,131,.28) !important; background:#e4f8f5 !important; color:var(--qa-redesign-teal) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea), body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) { position:relative !important; overflow:hidden !important; margin:0 auto 20px !important; border:1px solid rgba(196,209,223,.95) !important; border-radius:16px !important; background:var(--qa-redesign-panel) !important; box-shadow:var(--qa-redesign-shadow) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea)::before, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core)::before { content:'' !important; position:absolute !important; top:0 !important; right:0 !important; left:0 !important; height:4px !important; background:linear-gradient(90deg,var(--qa-redesign-teal),var(--qa-redesign-blue),var(--qa-redesign-warm)) !important; pointer-events:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea) > div:first-child, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) > div:first-child { min-height:64px !important; padding:4px 24px 0 !important; border:0 !important; border-bottom:1px solid var(--qa-redesign-line) !important; border-radius:16px 16px 0 0 !important; background:linear-gradient(180deg,#fff,#f8fbfd) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea) > div:first-child :is(h1,h2,h3,strong,span,p,div):not([class*="i-mdi"]), body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) > div:first-child :is(h1,h2,h3,strong,span,p,div):not([class*="i-mdi"]) { color:var(--qa-redesign-ink) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea) > div:last-child, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) > div:last-child { padding:24px !important; background:#fff !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content textarea, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-textarea-core { min-height:240px !important; padding:18px 20px !important; border:1px solid #ccd9e5 !important; border-radius:12px !important; background:#f8fafc !important; color:var(--qa-redesign-ink) !important; font-size:16px !important; font-weight:520 !important; line-height:1.78 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.8) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content textarea::placeholder { color:#98a5b4 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content textarea:focus, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-textarea-core:focus-within { border-color:var(--qa-redesign-teal-2) !important; background:#fff !important; outline:0 !important; box-shadow:0 0 0 4px rgba(35,183,168,.13) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content input, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-input-core { min-height:42px !important; border:1px solid #ccd9e5 !important; border-radius:10px !important; background:#f8fafc !important; color:var(--qa-redesign-ink) !important; font-size:15px !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[class*="bg-gradient-primary"], body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[style*="var(--gradient-primary)"], body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-button-core[class*="bg-gradient-primary"] { min-height:52px !important; border:0 !important; border-radius:12px !important; background:linear-gradient(180deg,#23b7a8,#168f83) !important; color:#fff !important; font-size:16px !important; font-weight:900 !important; letter-spacing:0 !important; box-shadow:0 16px 34px rgba(22,143,131,.24) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[class*="bg-gradient-primary"]:hover, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[style*="var(--gradient-primary)"]:hover, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-button-core[class*="bg-gradient-primary"]:hover { background:linear-gradient(180deg,#2ecfc0,#157f75) !important; color:#fff !important; box-shadow:0 18px 38px rgba(22,143,131,.3) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-card { overflow:hidden !important; margin:22px auto 0 !important; border:1px solid var(--qa-redesign-line) !important; border-radius:16px !important; background:#fff !important; box-shadow:0 18px 48px rgba(27,43,62,.1) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-card > div:first-child, body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-card > div:nth-child(2) { background:linear-gradient(180deg,#ffffff,#f7fafc) !important; border-color:var(--qa-redesign-line) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-card :is(h1,h2,h3,strong,b) { color:var(--qa-redesign-ink) !important; font-weight:900 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body { padding:24px 28px 30px !important; background:#fff !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body p, body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body li, body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body span:not([class*="i-mdi"]), body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body div:not([class*="i-mdi"]) { color:#2f3e4f !important; font-size:16px !important; line-height:1.92 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content [style*="#7B6CF6"], body.route-qa-RETIRED #app .desktop-qa-RETIRED-content [style*="#A77BF4"], body.route-qa-RETIRED #app .desktop-qa-RETIRED-content [style*="#7C4FC4"] { color:var(--qa-redesign-teal) !important; } body.route-qa-RETIRED #desktop-contextbar { border-left:1px solid #d7e0ea !important; background:#f8fafc !important; color:var(--qa-redesign-text) !important; } body.route-qa-RETIRED #desktop-contextbar .assistant-head, body.route-qa-RETIRED #desktop-contextbar .context-tabs, body.route-qa-RETIRED #desktop-contextbar .context-chat-form { border-color:#dfe7ef !important; background:#f8fafc !important; } body.route-qa-RETIRED #desktop-contextbar .assistant-name, body.route-qa-RETIRED #desktop-contextbar h3, body.route-qa-RETIRED #desktop-contextbar strong, body.route-qa-RETIRED #desktop-contextbar .rank-question { color:#1f2b38 !important; } body.route-qa-RETIRED #desktop-contextbar p, body.route-qa-RETIRED #desktop-contextbar span, body.route-qa-RETIRED #desktop-contextbar small, body.route-qa-RETIRED #desktop-contextbar .assistant-status, body.route-qa-RETIRED #desktop-contextbar .agent-context-chip { color:#68778a !important; } body.route-qa-RETIRED #desktop-contextbar .context-tab.active { color:var(--qa-redesign-teal) !important; } } /* Dark Q&A final direction: align with Broadcast and keep the glowing green controls. */ @media (min-width:981px) { body.route-qa-RETIRED { --qa-dark-bg:#08090b; --qa-dark-panel:#121318; --qa-dark-panel-2:#17191f; --qa-dark-line:#2a2c33; --qa-dark-line-strong:#3a3d46; --qa-dark-text:#f4f5f7; --qa-dark-muted:#9a9aa3; --qa-dark-soft:#c8c8d0; --qa-dark-green:#35d6c5; --qa-dark-green-2:#18b9a8; --qa-dark-green-ink:#07110f; } body.route-qa-RETIRED #app, body.route-qa-RETIRED #container { background:var(--qa-dark-bg) !important; } body.route-qa-RETIRED #app .min-h-screen { width:100% !important; max-width:none !important; margin:0 !important; padding:54px var(--desktop-page-gutter,64px) 76px !important; background:var(--qa-dark-bg) !important; color:var(--qa-dark-text) !important; box-sizing:border-box !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED { width:100% !important; max-width:none !important; margin:0 0 24px !important; padding:0 0 26px !important; display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:28px !important; border-bottom:1px solid var(--qa-dark-line) !important; background:transparent !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED > div { min-width:0 !important; flex:1 1 auto !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED span { display:block !important; color:var(--qa-dark-green) !important; font-size:10px !important; font-weight:700 !important; line-height:1.3 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED h1 { margin:7px 0 9px !important; color:var(--qa-dark-text) !important; font-size:30px !important; font-weight:700 !important; line-height:1.2 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED p { max-width:680px !important; margin:0 !important; color:var(--qa-dark-muted) !important; font-size:14px !important; line-height:1.5 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED .desktop-qa-RETIRED-header-actions { display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:8px !important; flex:0 0 auto !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED a { min-width:92px !important; min-height:38px !important; padding:0 13px !important; border:1px solid var(--qa-dark-line-strong) !important; border-radius:4px !important; background:var(--qa-dark-panel-2) !important; color:#d8d6dd !important; font-size:12px !important; font-weight:650 !important; box-shadow:none !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED a:hover { border-color:var(--qa-dark-green) !important; color:#eafffc !important; background:#14201f !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)), body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea), body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core), body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-card { width:100% !important; max-width:none !important; margin-right:0 !important; margin-left:0 !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED { display:flex !important; gap:8px !important; margin:0 0 18px !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED > * { display:flex !important; gap:8px !important; width:auto !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED button, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) button, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) taro-button-core { width:auto !important; min-width:82px !important; height:38px !important; min-height:38px !important; padding:0 16px !important; border:1px solid #303038 !important; border-radius:6px !important; background:#17181d !important; color:#a9a8b1 !important; font-size:13px !important; font-weight:800 !important; line-height:36px !important; box-shadow:none !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED button:hover, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) button:hover, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) taro-button-core:hover { border-color:#28766d !important; background:#14201f !important; color:#cafff8 !important; } body.route-qa-RETIRED #desktop-qa-mode-RETIRED button.active, body.route-qa-RETIRED #desktop-qa-mode-RETIRED button[aria-pressed="true"], body.route-qa-RETIRED #app .desktop-qa-RETIRED-content .capsule-selected, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[aria-pressed="true"] { border-color:var(--qa-dark-green) !important; background:var(--qa-dark-green) !important; color:var(--qa-dark-green-ink) !important; box-shadow: 0 0 0 1px rgba(53,214,197,.34), 0 0 18px rgba(53,214,197,.55), 0 8px 24px rgba(53,214,197,.18) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) { display:block !important; margin:0 0 18px !important; padding:18px 20px !important; border:1px solid var(--qa-dark-line) !important; border-radius:4px !important; background:var(--qa-dark-panel) !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(button):not(:has(textarea)):not(:has(taro-textarea-core)) > div { display:flex !important; flex-wrap:wrap !important; gap:8px !important; width:100% !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea), body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) { overflow:hidden !important; margin:0 0 18px !important; border:1px solid var(--qa-dark-line) !important; border-radius:6px !important; background:var(--qa-dark-panel) !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea)::before, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core)::before { display:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea) > div:first-child, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) > div:first-child { min-height:58px !important; padding:0 20px !important; border:0 !important; border-bottom:1px solid var(--qa-dark-line) !important; border-radius:6px 6px 0 0 !important; background:var(--qa-dark-panel-2) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea) > div:first-child :is(h1,h2,h3,strong,span,p,div):not([class*="i-mdi"]), body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) > div:first-child :is(h1,h2,h3,strong,span,p,div):not([class*="i-mdi"]) { color:var(--qa-dark-text) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea) > div:last-child, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) > div:last-child { padding:22px 24px !important; background:var(--qa-dark-panel) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content textarea, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-textarea-core, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content input, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-input-core { border:1px solid var(--qa-dark-line-strong) !important; border-radius:5px !important; background:#0d0e12 !important; color:var(--qa-dark-text) !important; font-size:15px !important; line-height:1.75 !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content textarea, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-textarea-core { min-height:220px !important; padding:16px !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content textarea:focus, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-textarea-core:focus-within { border-color:var(--qa-dark-green) !important; background:#0b0f11 !important; box-shadow:0 0 0 1px rgba(53,214,197,.22),0 0 18px rgba(53,214,197,.18) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[class*="bg-gradient-primary"], body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[style*="var(--gradient-primary)"], body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-button-core[class*="bg-gradient-primary"] { min-height:48px !important; border:1px solid var(--qa-dark-green) !important; border-radius:6px !important; background:var(--qa-dark-green) !important; color:var(--qa-dark-green-ink) !important; font-size:15px !important; font-weight:900 !important; box-shadow:0 0 0 1px rgba(53,214,197,.35),0 0 22px rgba(53,214,197,.52),0 10px 28px rgba(53,214,197,.18) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[class*="bg-gradient-primary"]:hover, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[style*="var(--gradient-primary)"]:hover, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-button-core[class*="bg-gradient-primary"]:hover { background:#47eadb !important; color:var(--qa-dark-green-ink) !important; box-shadow:0 0 0 1px rgba(53,214,197,.45),0 0 28px rgba(53,214,197,.68),0 12px 30px rgba(53,214,197,.22) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-card { margin:18px 0 0 !important; border:1px solid var(--qa-dark-line) !important; border-radius:6px !important; background:var(--qa-dark-panel) !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-card > div:first-child, body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-card > div:nth-child(2), body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body { background:var(--qa-dark-panel) !important; border-color:var(--qa-dark-line) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-card :is(h1,h2,h3,strong,b) { color:var(--qa-dark-text) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body p, body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body li, body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body span:not([class*="i-mdi"]), body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-body div:not([class*="i-mdi"]) { color:#d8d6dd !important; font-size:15px !important; line-height:1.9 !important; } body.route-qa-RETIRED #desktop-contextbar { border-left-color:var(--qa-dark-line) !important; background:#101115 !important; color:var(--qa-dark-text) !important; } body.route-qa-RETIRED #desktop-contextbar .assistant-head, body.route-qa-RETIRED #desktop-contextbar .context-tabs, body.route-qa-RETIRED #desktop-contextbar .context-chat-form { border-color:var(--qa-dark-line) !important; background:#101115 !important; } body.route-qa-RETIRED #desktop-contextbar :is(.assistant-name,h3,strong,.rank-question) { color:var(--qa-dark-text) !important; } body.route-qa-RETIRED #desktop-contextbar :is(p,span,small,.assistant-status,.agent-context-chip) { color:#898892 !important; } body.route-qa-RETIRED #desktop-contextbar .context-tab.active, body.route-qa-RETIRED #desktop-contextbar .context-chat-send { color:var(--qa-dark-green) !important; } } /* Dark Q&A emergency repair: remove leaked light styles and legacy mobile blocks. */ @media (min-width:981px) { body.route-qa-RETIRED #app .desktop-qa-RETIRED-legacy-header, body.route-qa-RETIRED #app .desktop-legacy-topbar, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content.desktop-qa-RETIRED-legacy-header, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content.desktop-legacy-topbar { display:none !important; width:0 !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; overflow:hidden !important; } /* Retired: hiding first div before shell header mounts caused refresh≠SPA dual pages. */ body.route-qa-RETIRED #app .min-h-screen > div:first-child:not(#desktop-qa-header-RETIRED), body.route-qa-RETIRED #app .min-h-screen > div:first-child:not(#desktop-qa-header-RETIRED) * { display:revert !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea), body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) { border-color:#2b2c33 !important; background:#121318 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea) *, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) * { border-color:#2b2c33 !important; background-color:transparent !important; color:#d8d6dd !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea) > div, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) > div { background:#121318 !important; background-image:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea) > div:first-child, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) > div:first-child { background:#17191f !important; border-bottom:1px solid #2b2c33 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content textarea, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-textarea-core { background:#0d0e12 !important; background-color:#0d0e12 !important; color:#f4f5f7 !important; border-color:#3a3d46 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content textarea::placeholder { color:#7f818b !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[class*="bg-gradient-primary"], body.route-qa-RETIRED #app .desktop-qa-RETIRED-content button[style*="var(--gradient-primary)"], body.route-qa-RETIRED #app .desktop-qa-RETIRED-content taro-button-core[class*="bg-gradient-primary"] { background:#35d6c5 !important; background-color:#35d6c5 !important; color:#07110f !important; border-color:#35d6c5 !important; box-shadow:0 0 0 1px rgba(53,214,197,.35),0 0 22px rgba(53,214,197,.52),0 10px 28px rgba(53,214,197,.18) !important; } body.route-qa-RETIRED #desktop-contextbar, body.route-qa-RETIRED #desktop-contextbar * { background-color:transparent !important; color:inherit !important; } body.route-qa-RETIRED #desktop-contextbar { background:#101115 !important; border-left-color:#2a2c33 !important; color:#d8d6dd !important; } body.route-qa-RETIRED #desktop-contextbar .assistant-head, body.route-qa-RETIRED #desktop-contextbar .context-tabs, body.route-qa-RETIRED #desktop-contextbar .context-chat-form, body.route-qa-RETIRED #desktop-contextbar .people-rank-card, body.route-qa-RETIRED #desktop-contextbar .people-feature, body.route-qa-RETIRED #desktop-contextbar .context-message, body.route-qa-RETIRED #desktop-contextbar .agent-memory-card { background:#101115 !important; border-color:#2a2c33 !important; } body.route-qa-RETIRED #desktop-contextbar .agent-context-chip, body.route-qa-RETIRED #desktop-contextbar .context-chat-input, body.route-qa-RETIRED #desktop-contextbar .people-row { background:#14161a !important; border-color:#2a2c33 !important; } body.route-qa-RETIRED #desktop-contextbar :is(.assistant-name,h3,strong,.rank-question,.people-head strong,.people-row div strong) { color:#f0eef3 !important; } body.route-qa-RETIRED #desktop-contextbar :is(p,span,small,.assistant-status,.agent-context-chip,.people-score-note,.people-row div small,.people-row > span small) { color:#8d8994 !important; } body.route-qa-RETIRED #desktop-contextbar :is(.context-tab.active,.people-rank-tabs button.active,.context-chat-send) { color:#35d6c5 !important; } body.route-qa-RETIRED #desktop-contextbar .context-chat-send { background:#178f83 !important; border-color:#35d6c5 !important; color:#fff !important; } } /* Final desktop-dark Q&A surface. Keep one route and only the native mode switcher. */ @media (min-width:981px) { body.route-qa-RETIRED { --qa-ui-bg:#0a0b0e; --qa-ui-panel:#15171d; --qa-ui-raised:#191c23; --qa-ui-control:#23272f; --qa-ui-input:#0e1014; --qa-ui-line:#353a44; --qa-ui-line-soft:#2a2e36; --qa-ui-text:#f7f8fa; --qa-ui-muted:#a9aeb8; --qa-ui-faint:#858b96; --qa-ui-green:#35d6c5; --qa-ui-green-hover:#55eadb; --qa-ui-green-ink:#061714; } body.route-qa-RETIRED #app, body.route-qa-RETIRED #container, body.route-qa-RETIRED #app .min-h-screen { background:var(--qa-ui-bg) !important; background-image:none !important; color:var(--qa-ui-text) !important; } body.route-qa-RETIRED #app .min-h-screen { width:100% !important; max-width:none !important; margin:0 !important; padding:54px var(--desktop-page-gutter,64px) 76px !important; box-sizing:border-box !important; } body.route-qa-RETIRED #app #desktop-grade-header-RETIRED, body.route-qa-RETIRED #app #desktop-exam-list-header, body.route-qa-RETIRED #app .desktop-grade-RETIRED-legacy-header, body.route-qa-RETIRED #app .desktop-grade-RETIRED-legacy-intro { display:none !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED { margin:0 0 22px !important; padding:0 0 24px !important; border-bottom:1px solid var(--qa-ui-line-soft) !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED h1 { color:var(--qa-ui-text) !important; font-size:32px !important; font-weight:750 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED p { color:var(--qa-ui-muted) !important; font-size:15px !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED a { min-width:92px !important; min-height:36px !important; border:1px solid #3b4049 !important; border-radius:999px !important; background:#191c22 !important; color:#dce0e6 !important; font-size:13px !important; box-shadow:none !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED a:hover { border-color:rgba(53,214,197,.82) !important; background:#15231f !important; color:#effffc !important; box-shadow:0 0 15px rgba(53,214,197,.2) !important; } /* Remove the native logo/profile block; reserve one compact row for modes. */ body.route-qa-RETIRED #app #free-chat-hero-RETIRED.desktop-qa-RETIRED-native-intro { position:relative !important; display:block !important; width:100% !important; min-height:36px !important; height:36px !important; margin:0 0 20px !important; padding:0 !important; overflow:visible !important; border:0 !important; border-radius:0 !important; background:transparent !important; background-image:none !important; box-shadow:none !important; } body.route-qa-RETIRED #app #free-chat-hero-RETIRED > * { display:none !important; } body.route-qa-RETIRED #app #free-chat-hero-RETIRED > div:first-child { display:flex !important; width:100% !important; height:36px !important; margin:0 !important; padding:0 !important; align-items:center !important; justify-content:flex-end !important; background:transparent !important; } body.route-qa-RETIRED #app #free-chat-hero-RETIRED > div:first-child > * { display:none !important; } body.route-qa-RETIRED #app #free-chat-hero-RETIRED .desktop-qa-RETIRED-native-modebar { display:flex !important; width:auto !important; height:36px !important; gap:9px !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; background-image:none !important; box-shadow:none !important; } body.route-qa-RETIRED #app #free-chat-hero-RETIRED .desktop-qa-RETIRED-native-mode { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:74px !important; height:34px !important; min-height:34px !important; padding:0 18px !important; border:1px solid #3b404a !important; border-radius:999px !important; background:#1b1e24 !important; background-image:none !important; color:#b8bdc6 !important; font-size:13px !important; font-weight:720 !important; line-height:32px !important; box-shadow:none !important; } body.route-qa-RETIRED #app #free-chat-hero-RETIRED .desktop-qa-RETIRED-native-mode:hover { border-color:#3d8b82 !important; background:#182722 !important; color:#edfffc !important; } body.route-qa-RETIRED #app #free-chat-hero-RETIRED .desktop-qa-RETIRED-native-mode.is-active, body.route-qa-RETIRED #app #free-chat-hero-RETIRED .desktop-qa-RETIRED-native-mode[aria-pressed="true"] { border-color:#67f0e1 !important; background:var(--qa-ui-green) !important; color:var(--qa-ui-green-ink) !important; box-shadow:0 0 0 1px rgba(53,214,197,.28),0 0 19px rgba(53,214,197,.64),0 8px 22px rgba(53,214,197,.18) !important; } body.route-qa-RETIRED #app #free-chat-hero-RETIRED .desktop-qa-RETIRED-native-mode-free { display:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea), body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) { width:100% !important; max-width:none !important; margin:0 0 20px !important; padding:0 !important; overflow:hidden !important; border:1px solid var(--qa-ui-line) !important; border-radius:7px !important; background:var(--qa-ui-panel) !important; box-shadow:0 18px 42px rgba(0,0,0,.18) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types { display:block !important; min-height:0 !important; margin:0 !important; padding:26px 28px 24px !important; border:0 !important; border-bottom:1px solid var(--qa-ui-line-soft) !important; border-radius:0 !important; background:var(--qa-ui-raised) !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types > div:first-child { display:flex !important; min-height:0 !important; margin:0 0 18px !important; padding:0 !important; align-items:center !important; border:0 !important; background:transparent !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types > div:first-child :is(p,span,strong) { color:var(--qa-ui-text) !important; font-size:17px !important; font-weight:760 !important; line-height:1.35 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types > div:last-child { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:12px !important; width:100% !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-width:0 !important; height:40px !important; min-height:40px !important; padding:0 16px !important; border:1px solid #3b404a !important; border-radius:999px !important; background:var(--qa-ui-control) !important; background-image:none !important; color:#c5cad2 !important; font-size:14px !important; font-weight:720 !important; line-height:38px !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type:hover { border-color:#3d8279 !important; background:#1c2b28 !important; color:#f2fffd !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type.is-active, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type[aria-pressed="true"] { border-color:#61ecdc !important; background:var(--qa-ui-green) !important; color:var(--qa-ui-green-ink) !important; box-shadow:0 0 0 1px rgba(53,214,197,.22),0 0 17px rgba(53,214,197,.48) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry { display:block !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:var(--qa-ui-panel) !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry > div:first-child { display:flex !important; min-height:68px !important; margin:0 !important; padding:0 28px !important; align-items:center !important; border:0 !important; border-bottom:1px solid var(--qa-ui-line-soft) !important; background:transparent !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry > div:first-child :is(p,span,strong) { color:var(--qa-ui-text) !important; font-size:17px !important; font-weight:760 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry > div:last-child { display:flex !important; flex-direction:column !important; gap:18px !important; padding:24px 28px 28px !important; background:transparent !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry textarea, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry taro-textarea-core { width:100% !important; min-height:220px !important; padding:17px 18px !important; border:1px solid #3d434e !important; border-radius:6px !important; background:var(--qa-ui-input) !important; background-color:var(--qa-ui-input) !important; color:var(--qa-ui-text) !important; font-size:16px !important; line-height:1.7 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.02) !important; box-sizing:border-box !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry textarea::placeholder { color:var(--qa-ui-faint) !important; opacity:1 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry textarea:focus, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry taro-textarea-core:focus-within { border-color:var(--qa-ui-green) !important; background:#0c1212 !important; box-shadow:0 0 0 1px rgba(53,214,197,.2),0 0 18px rgba(53,214,197,.14) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry span, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry label { color:#d7dbe1 !important; font-size:15px !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-submit { align-self:flex-end !important; width:auto !important; min-width:146px !important; height:42px !important; min-height:42px !important; margin:0 0 0 auto !important; padding:0 22px !important; border:1px solid #65f0e0 !important; border-radius:999px !important; background:var(--qa-ui-green) !important; background-image:none !important; color:var(--qa-ui-green-ink) !important; font-size:14px !important; font-weight:820 !important; line-height:40px !important; box-shadow:0 0 0 1px rgba(53,214,197,.28),0 0 20px rgba(53,214,197,.52),0 9px 22px rgba(53,214,197,.16) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-submit > div { width:auto !important; padding:0 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-submit:hover { background:var(--qa-ui-green-hover) !important; color:var(--qa-ui-green-ink) !important; box-shadow:0 0 0 1px rgba(53,214,197,.36),0 0 27px rgba(53,214,197,.66),0 10px 24px rgba(53,214,197,.2) !important; } } /* EigenFlux-style clean frames: one outline per major work area. */ @media (min-width:981px) { body.route-qa-RETIRED #desktop-qa-header-RETIRED h1, body.route-grade-RETIRED #desktop-grade-header-RETIRED h1 { font-size:30px !important; font-weight:760 !important; line-height:1.16 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED p, body.route-grade-RETIRED #desktop-grade-header-RETIRED p { color:#a7abb3 !important; font-size:14px !important; line-height:1.6 !important; } body.route-qa-RETIRED #app #free-chat-hero-RETIRED > div:first-child > div:last-child { display:flex !important; width:auto !important; height:36px !important; gap:10px !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; } body.route-qa-RETIRED #app #free-chat-hero-RETIRED > div:first-child > div:last-child button { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:78px !important; height:36px !important; min-height:36px !important; padding:0 20px !important; border:0 !important; border-radius:999px !important; background:#1b1d22 !important; background-image:none !important; color:#bec2ca !important; font-size:14px !important; font-weight:720 !important; line-height:36px !important; box-shadow:none !important; } body.route-qa-RETIRED #app #free-chat-hero-RETIRED > div:first-child > div:last-child button:nth-child(3) { display:none !important; } body.route-qa-RETIRED #app #free-chat-hero-RETIRED > div:first-child > div:last-child button.is-active, body.route-qa-RETIRED #app #free-chat-hero-RETIRED > div:first-child > div:last-child button[aria-pressed="true"] { background:#35d6c5 !important; color:#061714 !important; box-shadow:0 0 0 1px rgba(53,214,197,.22),0 0 18px rgba(53,214,197,.6) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea), body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) { display:grid !important; grid-template-columns:1fr !important; gap:18px !important; overflow:visible !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry { width:100% !important; margin:0 !important; border:1px solid #2b2d33 !important; border-radius:6px !important; background:#111216 !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types { display:block !important; padding:24px 28px 26px !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types > div:first-child { display:flex !important; margin:0 0 20px !important; padding:0 !important; border:0 !important; background:transparent !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types > div:first-child :is(p,span,strong), body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry > div:first-child :is(p,span,strong) { color:#f5f6f8 !important; font-size:19px !important; font-weight:760 !important; line-height:1.4 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type-row { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:12px !important; width:100% !important; margin:0 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type { width:100% !important; height:44px !important; min-height:44px !important; padding:0 18px !important; border:0 !important; border-radius:999px !important; background:#1c1e24 !important; color:#c6cad1 !important; font-size:15px !important; font-weight:720 !important; line-height:44px !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type:hover { background:#1b2926 !important; color:#effffc !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type.is-active, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type[aria-pressed="true"] { background:#35d6c5 !important; color:#061714 !important; box-shadow:0 0 0 1px rgba(53,214,197,.22),0 0 16px rgba(53,214,197,.48) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry { display:block !important; padding:0 !important; overflow:hidden !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry > div:first-child { display:flex !important; min-height:72px !important; padding:0 28px !important; align-items:center !important; border:0 !important; border-bottom:1px solid #24262b !important; background:transparent !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry > div:last-child { display:flex !important; flex-direction:column !important; gap:20px !important; padding:26px 28px 28px !important; background:transparent !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry textarea, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry taro-textarea-core, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry [class*="glass-input"] { width:100% !important; min-height:230px !important; padding:18px 20px !important; border:0 !important; border-radius:5px !important; background:#0b0c0f !important; color:#f3f4f6 !important; font-size:16px !important; line-height:1.75 !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry textarea:focus, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry taro-textarea-core:focus-within { outline:0 !important; box-shadow:inset 0 0 0 1px rgba(53,214,197,.5) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry span, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry label { font-size:16px !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-submit { min-width:156px !important; height:44px !important; min-height:44px !important; border:0 !important; border-radius:999px !important; background:#35d6c5 !important; color:#061714 !important; font-size:15px !important; box-shadow:0 0 18px rgba(53,214,197,.52) !important; } body.route-grade-RETIRED, body.route-grade-RETIRED #app, body.route-grade-RETIRED #container, body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { background:#08090b !important; background-image:none !important; color:#f5f6f8 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { width:100% !important; max-width:none !important; margin:0 !important; padding:54px var(--desktop-page-gutter,64px) 76px !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app #desktop-qa-header-RETIRED, body.route-grade-RETIRED #app #desktop-exam-list-header, body.route-grade-RETIRED #app .desktop-qa-RETIRED-native-intro, body.route-grade-RETIRED #app .desktop-grade-RETIRED-legacy-header, body.route-grade-RETIRED #app .desktop-grade-RETIRED-legacy-intro, body.route-grade-RETIRED #app .desktop-grade-RETIRED-history-shortcut { display:none !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:28px !important; margin:0 0 26px !important; padding:0 0 24px !important; border:0 !important; border-bottom:1px solid #24262b !important; background:transparent !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED > div { min-width:0 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED span { color:#35d6c5 !important; font-size:11px !important; font-weight:720 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED a { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:38px !important; padding:0 16px !important; border:0 !important; border-radius:999px !important; background:#1a1c21 !important; color:#d9dce2 !important; font-size:14px !important; text-decoration:none !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:18px !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar { grid-column:1 / -1 !important; display:block !important; min-height:0 !important; margin:0 !important; padding:24px 28px 26px !important; border:1px solid #2b2d33 !important; border-radius:6px !important; background:#111216 !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar::before { content:'选择题型' !important; display:block !important; margin:0 0 20px !important; padding:0 !important; color:#f5f6f8 !important; font-size:19px !important; font-weight:760 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar > div { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:12px !important; width:100% !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core { width:100% !important; height:44px !important; min-height:44px !important; padding:0 18px !important; border:0 !important; border-radius:999px !important; background:#1c1e24 !important; color:#c6cad1 !important; font-size:15px !important; font-weight:720 !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar .capsule-selected { background:#35d6c5 !important; color:#061714 !important; box-shadow:0 0 0 1px rgba(53,214,197,.22),0 0 16px rgba(53,214,197,.48) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { display:grid !important; grid-template-rows:auto minmax(0,1fr) !important; min-height:520px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border:1px solid #2b2d33 !important; border-radius:6px !important; background:#111216 !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel { grid-column:1 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { grid-column:2 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { display:flex !important; min-height:72px !important; padding:0 24px !important; align-items:center !important; border:0 !important; border-bottom:1px solid #24262b !important; background:transparent !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child :is(p,span,strong), body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child :is(p,span,strong) { color:#f5f6f8 !important; font-size:19px !important; font-weight:760 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child { display:flex !important; flex-direction:column !important; gap:16px !important; padding:20px !important; background:transparent !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; width:100% !important; min-height:0 !important; padding:0 !important; border:0 !important; background:transparent !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child taro-button-core { height:38px !important; min-height:38px !important; border:0 !important; border-radius:999px !important; background:#1c1e24 !important; color:#bfc3cb !important; font-size:14px !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child .capsule-selected { background:#17332f !important; color:#dcfff9 !important; box-shadow:0 0 14px rgba(53,214,197,.22) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel [class*="glass-input"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel [class*="glass-input"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core { width:100% !important; min-height:340px !important; padding:18px 20px !important; border:0 !important; border-radius:5px !important; background:#0b0c0f !important; color:#f3f4f6 !important; font-size:16px !important; line-height:1.75 !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea:focus, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea:focus, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core:focus-within, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core:focus-within { outline:0 !important; box-shadow:inset 0 0 0 1px rgba(53,214,197,.5) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit { grid-column:1 / -1 !important; justify-self:end !important; width:auto !important; min-width:166px !important; height:46px !important; min-height:46px !important; margin:2px 0 0 !important; padding:0 24px !important; border:0 !important; border-radius:999px !important; background:#35d6c5 !important; color:#061714 !important; font-size:15px !important; font-weight:800 !important; box-shadow:0 0 19px rgba(53,214,197,.5) !important; } } @media (min-width:981px) and (max-width:1120px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-content { grid-template-columns:1fr !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { grid-column:1 !important; } } /* Final puzzle scale guard: intentionally more specific than legacy puzzle passes. */ @media (min-width:981px) { body.route-yibentong-puzzle #app .desktop-puzzle-redesign.desktop-puzzle-redesign { gap:18px !important; padding:38px var(--desktop-page-gutter,56px) 96px !important; background:linear-gradient(180deg,rgba(41,208,184,.08),transparent 340px),#080a0e !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero.desktop-puzzle-hero { min-height:206px !important; padding:34px 38px !important; border-radius:8px !important; background:linear-gradient(100deg,rgba(15,25,30,.98),rgba(7,14,18,.68)),url('/static/images/course-material-covers/yibentong-cover-v4.png') right center/360px auto no-repeat,#0d1418 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero.desktop-puzzle-hero::after { content:'KNOWLEDGE ATLAS' !important; display:block !important; right:32px !important; bottom:24px !important; width:auto !important; height:auto !important; border:0 !important; border-radius:0 !important; background:transparent !important; transform:none !important; color:rgba(224,255,249,.22) !important; font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace !important; letter-spacing:.18em !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero .flex.flex-col.flex-1 > .flex:first-child > span:first-child { font-size:34px !important; line-height:1.05 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero .flex.flex-col.flex-1 span { font-size:14px !important; line-height:1.7 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume.desktop-puzzle-volume { padding:24px !important; border-radius:8px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-head.desktop-puzzle-volume-head { min-height:52px !important; margin-bottom:20px !important; padding:1px 0 15px 15px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-head span:first-child { font-size:20px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-board.desktop-puzzle-board { padding:22px !important; border-radius:7px !important; background-size:32px 32px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic.desktop-puzzle-topic { margin-bottom:28px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic > .flex.items-center { min-height:38px !important; margin-bottom:14px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic > .flex.items-center > span:nth-child(2) { font-size:16px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-grid.desktop-puzzle-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:16px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile.desktop-puzzle-tile { min-height:150px !important; padding:38px 17px 16px !important; border-radius:7px !important; transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease,filter .24s ease !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile.desktop-puzzle-tile::before { right:-8px !important; width:16px !important; height:16px !important; margin-top:-8px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile.desktop-puzzle-tile::after { bottom:-8px !important; width:16px !important; height:16px !important; margin-left:-8px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile > span:first-child { top:12px !important; left:13px !important; font-size:10px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile > span:not(:first-child) { font-size:15px !important; font-weight:660 !important; line-height:1.48 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile.desktop-puzzle-tile:hover { transform:translateY(-7px) scale(1.025) !important; box-shadow:0 24px 42px rgba(0,0,0,.36),0 0 0 1px rgba(115,232,213,.22),inset 0 1px rgba(255,255,255,.12) !important; } } @media (min-width:981px) and (max-width:1260px) { body.route-yibentong-puzzle #app .desktop-puzzle-grid.desktop-puzzle-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; } } /* Knowledge puzzle v4: immersive course map. This deliberately replaces the compact v3 surface. */ @media (min-width:981px) { body.route-yibentong-puzzle #app, body.desktop-light.route-yibentong-puzzle #app { background:#080a0e !important; } body.route-yibentong-puzzle #app .desktop-puzzle-redesign { gap:18px !important; padding:38px var(--desktop-page-gutter,56px) 96px !important; background:linear-gradient(180deg,rgba(41,208,184,.08),transparent 340px),#080a0e !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero { position:relative !important; min-height:206px !important; padding:34px 38px !important; overflow:hidden !important; border:1px solid #294039 !important; border-radius:8px !important; background:linear-gradient(100deg,rgba(15,25,30,.98) 0%,rgba(12,20,25,.91) 52%,rgba(7,14,18,.68) 100%),url('/static/images/course-material-covers/yibentong-cover-v4.png') right center/360px auto no-repeat,#0d1418 !important; box-shadow:0 24px 64px rgba(0,0,0,.28),inset 0 1px rgba(232,255,251,.08) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero::after { content:'KNOWLEDGE ATLAS' !important; display:block !important; position:absolute !important; right:32px !important; bottom:24px !important; width:auto !important; height:auto !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:rgba(224,255,249,.22) !important; font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace !important; letter-spacing:.18em !important; transform:none !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero > .flex.items-center { position:relative !important; z-index:1 !important; gap:0 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero svg { display:none !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero .flex.flex-col.flex-1 { gap:9px !important; max-width:620px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero .flex.flex-col.flex-1 > .flex:first-child::before { content:'GBC LEARNING SYSTEM'; display:block; margin-bottom:11px; color:#59dcca; font-size:11px; font-weight:800; letter-spacing:.14em; } body.route-yibentong-puzzle #app .desktop-puzzle-hero .flex.flex-col.flex-1 > .flex:first-child > span:first-child { color:#f3faf9 !important; font-size:34px !important; font-weight:760 !important; letter-spacing:0 !important; line-height:1.05 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero .flex.flex-col.flex-1 span { color:#a1b0b0 !important; font-size:14px !important; line-height:1.7 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-tabs > div, body.route-yibentong-puzzle #app .desktop-puzzle-status-tabs > div { padding:5px !important; border:1px solid #27343a !important; border-radius:8px !important; background:#10151b !important; box-shadow:inset 0 1px rgba(255,255,255,.025) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-tabs button, body.route-yibentong-puzzle #app .desktop-puzzle-status-tabs button { min-height:42px !important; padding:8px 16px !important; border-radius:5px !important; font-size:13px !important; letter-spacing:0 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-content { gap:20px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume { padding:24px !important; border:1px solid #28343a !important; border-radius:8px !important; background:#10161b !important; box-shadow:0 18px 44px rgba(0,0,0,.16) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-head { min-height:52px !important; margin:0 0 20px !important; padding:1px 0 15px 15px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-head::before { top:0 !important; bottom:18px !important; width:4px !important; background:#65dec9 !important; box-shadow:0 0 18px rgba(101,222,201,.45) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-head span:first-child { font-size:20px !important; letter-spacing:0 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-head span { font-size:12px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-board { padding:22px !important; border:1px solid #243139 !important; border-radius:7px !important; background:linear-gradient(rgba(130,176,181,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(130,176,181,.05) 1px,transparent 1px),#0b1015 !important; background-size:32px 32px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic { margin-bottom:28px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic > .flex.items-center { min-height:38px !important; margin-bottom:14px !important; gap:10px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic > .flex.items-center::before { width:22px !important; height:22px !important; border-radius:5px !important; font-size:9px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic > .flex.items-center > span:nth-child(2) { font-size:16px !important; font-weight:700 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:16px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile { min-height:150px !important; padding:38px 17px 16px !important; overflow:visible !important; border-radius:7px !important; box-shadow:0 13px 28px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.06) !important; transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease,filter .24s ease !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile::before { right:-8px !important; width:16px !important; height:16px !important; margin-top:-8px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile::after { bottom:-8px !important; width:16px !important; height:16px !important; margin-left:-8px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile > span:first-child { top:12px !important; left:13px !important; font-size:10px !important; letter-spacing:.05em !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile > span:not(:first-child) { font-size:15px !important; font-weight:660 !important; line-height:1.48 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile:hover { z-index:5 !important; transform:translateY(-7px) scale(1.025) !important; filter:brightness(1.12) saturate(1.12) !important; box-shadow:0 24px 42px rgba(0,0,0,.36),0 0 0 1px rgba(115,232,213,.22),inset 0 1px rgba(255,255,255,.12) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-legend { padding:16px 20px !important; border-radius:7px !important; gap:22px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-legend span { font-size:12px !important; } } @media (min-width:981px) and (max-width:1260px) { body.route-yibentong-puzzle #app .desktop-puzzle-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; } } @media (prefers-reduced-motion:reduce) { body.route-yibentong-puzzle #app .desktop-puzzle-tile { transition:none !important; } } /* Final dark grading workspace: fixed controls and EigenFlux-style major frames. */ @media (min-width:981px) { body.route-grade-RETIRED, body.route-grade-RETIRED #container, body.route-grade-RETIRED #app { background:#090a0c !important; background-image:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { width:100% !important; max-width:none !important; margin:0 !important; padding:52px var(--desktop-page-gutter,64px) 76px !important; background:transparent !important; box-sizing:border-box !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:28px !important; min-height:0 !important; margin:0 0 28px !important; padding:0 0 24px !important; border:0 !important; border-bottom:1px solid #26292e !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED span { color:#35d6c5 !important; font-size:10px !important; font-weight:720 !important; letter-spacing:0 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED h1 { margin:7px 0 9px !important; color:#f7f8fa !important; font-size:30px !important; font-weight:760 !important; line-height:1.15 !important; letter-spacing:0 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED p { max-width:660px !important; margin:0 !important; color:#a8adb6 !important; font-size:14px !important; line-height:1.65 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED a { display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 auto !important; height:38px !important; min-height:38px !important; padding:0 17px !important; border:1px solid #30343b !important; border-radius:999px !important; background:#15171b !important; color:#e2e5e9 !important; font-size:14px !important; font-weight:680 !important; text-decoration:none !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:18px !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; overflow:visible !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar { grid-column:1 / -1 !important; display:grid !important; grid-template-columns:170px minmax(0,1fr) !important; align-items:center !important; gap:24px !important; min-height:88px !important; margin:0 !important; padding:20px 24px !important; border:1px solid #2a2d32 !important; border-radius:7px !important; background:#111316 !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar::before { content:'选择题型' !important; display:block !important; margin:0 !important; color:#f4f5f7 !important; font-size:20px !important; font-weight:740 !important; line-height:1.4 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar > div, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-options { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:12px !important; width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; position:relative !important; z-index:3 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:42px !important; min-height:42px !important; margin:0 !important; padding:0 18px !important; pointer-events:auto !important; cursor:pointer !important; border:1px solid transparent !important; border-radius:999px !important; background:#1a1d22 !important; background-image:none !important; color:#c5cad1 !important; font-size:15px !important; font-weight:700 !important; line-height:40px !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option:hover { background:#20252a !important; color:#f1f5f4 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option.capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option.is-active, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option[aria-pressed="true"] { border-color:#5de9da !important; background:#35d6c5 !important; color:#061714 !important; box-shadow:0 0 0 1px rgba(53,214,197,.2),0 0 18px rgba(53,214,197,.5) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { display:grid !important; grid-template-rows:72px minmax(420px,1fr) !important; min-width:0 !important; min-height:520px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; position:relative !important; border:1px solid #2a2d32 !important; border-radius:7px !important; background:#111316 !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel { grid-column:1 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { grid-column:2 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { display:flex !important; align-items:center !important; min-width:0 !important; min-height:72px !important; margin:0 !important; padding:0 22px !important; border:0 !important; border-bottom:1px solid #25282d !important; background:transparent !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { padding-right:292px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child::before, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child::before { display:none !important; content:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child :is(p,span,strong), body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child :is(p,span,strong) { overflow:hidden !important; color:#f5f6f8 !important; font-size:18px !important; font-weight:740 !important; line-height:1.4 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child { display:flex !important; flex-direction:column !important; gap:16px !important; min-width:0 !important; min-height:420px !important; margin:0 !important; padding:20px !important; border:0 !important; background:transparent !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar { display:grid !important; grid-template-columns:repeat(3,78px) !important; gap:6px !important; width:246px !important; height:40px !important; min-width:246px !important; min-height:40px !important; margin:0 !important; padding:0 !important; position:absolute !important; top:16px !important; right:18px !important; z-index:8 !important; overflow:visible !important; border:0 !important; background:transparent !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar taro-button-core { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:78px !important; min-width:78px !important; max-width:78px !important; height:40px !important; min-height:40px !important; margin:0 !important; padding:0 9px !important; pointer-events:auto !important; cursor:pointer !important; border:1px solid transparent !important; border-radius:999px !important; background:#1a1d22 !important; background-image:none !important; color:#c4c9d0 !important; font-size:14px !important; font-weight:700 !important; line-height:38px !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode:hover { background:#20252a !important; color:#f2f5f5 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode.capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode.is-active, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode[aria-pressed="true"] { border-color:#5de9da !important; background:#35d6c5 !important; color:#061714 !important; box-shadow:0 0 0 1px rgba(53,214,197,.2),0 0 16px rgba(53,214,197,.46) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode.capsule-selected *, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode.is-active *, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode[aria-pressed="true"] * { color:#061714 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child > div, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:not(.desktop-grade-RETIRED-input-modebar) { border:0 !important; background:transparent !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel [class*="glass-input"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel [class*="glass-input"] { flex:1 1 auto !important; width:100% !important; min-height:360px !important; margin:0 !important; padding:19px 20px !important; border:0 !important; border-radius:6px !important; background:#0b0d10 !important; background-image:none !important; color:#f2f4f6 !important; font-size:16px !important; line-height:1.75 !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea:focus, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea:focus, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core:focus-within, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core:focus-within { outline:0 !important; box-shadow:inset 0 0 0 1px rgba(53,214,197,.52) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit { grid-column:1 / -1 !important; justify-self:end !important; width:auto !important; min-width:170px !important; height:46px !important; min-height:46px !important; margin:2px 0 0 auto !important; padding:0 25px !important; pointer-events:auto !important; cursor:pointer !important; border:1px solid #61ebdc !important; border-radius:999px !important; background:#35d6c5 !important; background-image:none !important; color:#061714 !important; font-size:15px !important; font-weight:800 !important; box-shadow:0 0 0 1px rgba(53,214,197,.22),0 0 20px rgba(53,214,197,.5) !important; } } @media (min-width:981px) and (max-width:1120px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-content { grid-template-columns:1fr !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { grid-column:1 !important; } } /* Exam text rendering repair and word-cloud redesign. */ /* Grade page social-reference theme: flat black workspace with segmented controls and cyan emphasis. */ @media (min-width:981px) { body.route-grade-RETIRED { --grade-ref-bg:#08090b; --grade-ref-panel:#131417; --grade-ref-panel-2:#17181c; --grade-ref-control:#202126; --grade-ref-control-active:#303136; --grade-ref-line:#2c2d33; --grade-ref-line-soft:#23242a; --grade-ref-title:#f6f7f8; --grade-ref-text:#d8d9de; --grade-ref-muted:#9b9ca6; --grade-ref-accent:#35d6c5; --grade-ref-accent-ink:#061715; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { padding:42px 54px 78px !important; background:var(--grade-ref-bg) !important; color:var(--grade-ref-text) !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED { align-items:flex-start !important; min-height:150px !important; margin:0 0 26px !important; padding:0 0 18px !important; border-bottom:0 !important; background:transparent !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED span { display:none !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED h1 { margin:0 0 18px !important; color:var(--grade-ref-title) !important; font-size:44px !important; font-weight:850 !important; line-height:1.08 !important; letter-spacing:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option *, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button *, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core * { font-size:19px !important; font-weight:700 !important; line-height:1.2 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED p { max-width:760px !important; color:var(--grade-ref-muted) !important; font-size:24px !important; font-weight:650 !important; line-height:1.35 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED a { margin-top:8px !important; padding:0 18px !important; min-height:42px !important; display:inline-flex !important; align-items:center !important; border:1px solid var(--grade-ref-line) !important; border-radius:8px !important; background:var(--grade-ref-panel-2) !important; color:var(--grade-ref-text) !important; font-size:14px !important; font-weight:750 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:0 24px !important; max-width:1120px !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar { grid-column:1 / -1 !important; display:flex !important; width:max-content !important; max-width:100% !important; margin:0 0 50px !important; padding:0 !important; overflow:hidden !important; border:1px solid var(--grade-ref-line) !important; border-radius:8px !important; background:var(--grade-ref-control) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-options, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar > div { display:flex !important; gap:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core { min-width:142px !important; min-height:58px !important; padding:0 24px !important; border:0 !important; border-right:1px solid var(--grade-ref-line-soft) !important; border-radius:0 !important; background:transparent !important; color:var(--grade-ref-muted) !important; font-size:19px !important; font-weight:760 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar :is(button,taro-button-core):last-child { border-right:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option.capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option.is-active, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option[aria-pressed="true"] { background:var(--grade-ref-control-active) !important; color:var(--grade-ref-title) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option.capsule-selected::after, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option.is-active::after, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option[aria-pressed="true"]::after { content:'1'; margin-left:12px; color:var(--grade-ref-accent); font-weight:850; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { min-height:430px !important; padding:36px 40px 38px !important; border:1px solid var(--grade-ref-line-soft) !important; border-radius:0 !important; background:var(--grade-ref-panel) !important; box-shadow:inset -1px 0 0 rgba(255,255,255,.025) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { min-height:40px !important; margin:0 0 24px !important; padding:0 0 18px !important; border-bottom:1px solid var(--grade-ref-line-soft) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h1, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h2, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h3, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel strong, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel strong { color:var(--grade-ref-title) !important; font-size:24px !important; font-weight:830 !important; line-height:1.25 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel p, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel p, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel span, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel span { color:var(--grade-ref-muted) !important; font-size:16px !important; line-height:1.6 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar { display:inline-flex !important; width:max-content !important; max-width:100% !important; margin:0 0 18px !important; overflow:hidden !important; border:1px solid var(--grade-ref-line) !important; border-radius:8px !important; background:var(--grade-ref-control) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar taro-button-core { min-height:40px !important; padding:0 18px !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:var(--grade-ref-muted) !important; font-size:15px !important; font-weight:760 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode.capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode.is-active, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode[aria-pressed="true"] { background:var(--grade-ref-control-active) !important; color:var(--grade-ref-title) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel [class*="glass-input"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel [class*="glass-input"] { width:100% !important; min-height:250px !important; padding:20px !important; border:1px solid var(--grade-ref-line-soft) !important; border-radius:0 !important; background:#0c0d10 !important; color:var(--grade-ref-title) !important; font-size:16px !important; line-height:1.7 !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea:focus, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea:focus, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core:focus-within, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core:focus-within { border-color:rgba(53,214,197,.7) !important; box-shadow:0 0 0 1px rgba(53,214,197,.2),0 0 18px rgba(53,214,197,.14) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit { grid-column:1 / -1 !important; justify-self:end !important; min-width:178px !important; min-height:44px !important; margin:26px 0 0 !important; padding:0 26px !important; border:1px solid rgba(53,214,197,.75) !important; border-radius:999px !important; background:var(--grade-ref-accent) !important; color:var(--grade-ref-accent-ink) !important; font-size:15px !important; font-weight:850 !important; box-shadow:0 0 0 1px rgba(53,214,197,.22),0 0 24px rgba(53,214,197,.5) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit *, body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit span { color:var(--grade-ref-accent-ink) !important; } } @media (max-width:980px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { padding:28px 18px 56px !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED h1 { font-size:30px !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED p { font-size:18px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content { display:block !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar { width:100% !important; margin-bottom:24px !important; overflow-x:auto !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core { flex:1 0 auto !important; min-width:104px !important; min-height:50px !important; padding:0 14px !important; font-size:16px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { min-height:0 !important; margin-bottom:16px !important; padding:24px 18px !important; } } /* Grade workspace redesign: align with the mature Q&A desktop workbench. */ @media (min-width:981px) { body.route-grade-RETIRED { --grade-ui-bg:#0a0b0e; --grade-ui-panel:#111216; --grade-ui-raised:#15171d; --grade-ui-control:#1c1e24; --grade-ui-input:#0b0c0f; --grade-ui-line:#2b2d33; --grade-ui-line-soft:#24262b; --grade-ui-text:#f5f6f8; --grade-ui-muted:#a8adb6; --grade-ui-faint:#7f858f; --grade-ui-accent:#35d6c5; --grade-ui-accent-hover:#55eadb; --grade-ui-accent-ink:#061714; } body.route-grade-RETIRED, body.route-grade-RETIRED #container, body.route-grade-RETIRED #app, body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { background:var(--grade-ui-bg) !important; background-image:none !important; color:var(--grade-ui-text) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { width:100% !important; max-width:none !important; margin:0 !important; padding:54px var(--desktop-page-gutter,64px) 76px !important; box-sizing:border-box !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED, body.route-qa-RETIRED #desktop-qa-header-RETIRED { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:28px !important; min-height:0 !important; margin:0 0 22px !important; padding:0 0 24px !important; border:0 !important; border-bottom:1px solid var(--grade-ui-line-soft) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED > div, body.route-qa-RETIRED #desktop-qa-header-RETIRED > div { min-width:0 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED span, body.route-qa-RETIRED #desktop-qa-header-RETIRED span { display:block !important; color:var(--grade-ui-accent) !important; font-size:10px !important; font-weight:720 !important; line-height:1.3 !important; letter-spacing:0 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED h1, body.route-qa-RETIRED #desktop-qa-header-RETIRED h1 { margin:7px 0 9px !important; color:var(--grade-ui-text) !important; font-size:30px !important; font-weight:760 !important; line-height:1.15 !important; letter-spacing:0 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED p, body.route-qa-RETIRED #desktop-qa-header-RETIRED p { max-width:700px !important; margin:0 !important; color:var(--grade-ui-muted) !important; font-size:14px !important; font-weight:400 !important; line-height:1.65 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED a, body.route-qa-RETIRED #desktop-qa-header-RETIRED a { display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 auto !important; min-width:92px !important; height:38px !important; min-height:38px !important; padding:0 17px !important; border:1px solid #30343b !important; border-radius:999px !important; background:#15171b !important; color:#e2e5e9 !important; font-size:14px !important; font-weight:680 !important; text-decoration:none !important; box-shadow:none !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED a:hover, body.route-qa-RETIRED #desktop-qa-header-RETIRED a:hover { border-color:rgba(53,214,197,.72) !important; background:#15231f !important; color:#effffc !important; box-shadow:0 0 15px rgba(53,214,197,.2) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:18px !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; overflow:visible !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar { grid-column:1 / -1 !important; display:grid !important; grid-template-columns:170px minmax(0,1fr) !important; align-items:center !important; gap:24px !important; width:100% !important; max-width:none !important; min-height:88px !important; margin:0 !important; padding:20px 24px !important; overflow:visible !important; border:1px solid var(--grade-ui-line) !important; border-radius:6px !important; background:var(--grade-ui-panel) !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar::before { content:'选择题型' !important; display:block !important; margin:0 !important; color:var(--grade-ui-text) !important; font-size:19px !important; font-weight:760 !important; line-height:1.4 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar > div, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-options { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:12px !important; width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-width:0 !important; height:44px !important; min-height:44px !important; margin:0 !important; padding:0 18px !important; border:0 !important; border-radius:999px !important; background:var(--grade-ui-control) !important; background-image:none !important; color:#c6cad1 !important; font-size:15px !important; font-weight:720 !important; line-height:44px !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option::after { display:none !important; content:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option:hover, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button:hover, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core:hover { background:#1b2926 !important; color:#effffc !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option.capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option.is-active, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option[aria-pressed="true"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar .capsule-selected { border:0 !important; background:var(--grade-ui-accent) !important; color:var(--grade-ui-accent-ink) !important; box-shadow:0 0 0 1px rgba(53,214,197,.22),0 0 16px rgba(53,214,197,.48) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { display:grid !important; grid-template-rows:72px minmax(430px,1fr) !important; min-width:0 !important; min-height:526px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border:1px solid var(--grade-ui-line) !important; border-radius:6px !important; background:var(--grade-ui-panel) !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel { grid-column:1 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { grid-column:2 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { display:flex !important; align-items:center !important; min-width:0 !important; min-height:72px !important; margin:0 !important; padding:0 28px !important; border:0 !important; border-bottom:1px solid var(--grade-ui-line-soft) !important; background:transparent !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child :is(p,span,strong), body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child :is(p,span,strong), body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h1, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h2, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content h3 { overflow:hidden !important; color:var(--grade-ui-text) !important; font-size:19px !important; font-weight:760 !important; line-height:1.4 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child { display:flex !important; flex-direction:column !important; gap:18px !important; min-width:0 !important; min-height:430px !important; margin:0 !important; padding:26px 28px 28px !important; border:0 !important; background:transparent !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; width:100% !important; max-width:360px !important; min-height:38px !important; margin:0 !important; padding:0 !important; position:static !important; overflow:visible !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar taro-button-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child taro-button-core { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:38px !important; min-height:38px !important; padding:0 14px !important; border:0 !important; border-radius:999px !important; background:var(--grade-ui-control) !important; color:#bfc3cb !important; font-size:14px !important; font-weight:700 !important; line-height:38px !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode.capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode.is-active, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode[aria-pressed="true"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child .capsule-selected { background:#17332f !important; color:#dcfff9 !important; box-shadow:0 0 14px rgba(53,214,197,.22) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel [class*="glass-input"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel [class*="glass-input"] { flex:1 1 auto !important; width:100% !important; min-height:320px !important; margin:0 !important; padding:18px 20px !important; border:0 !important; border-radius:5px !important; background:var(--grade-ui-input) !important; color:var(--grade-ui-text) !important; font-size:16px !important; line-height:1.75 !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea::placeholder, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea::placeholder { color:var(--grade-ui-faint) !important; opacity:1 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea:focus, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea:focus, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core:focus-within, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core:focus-within { outline:0 !important; border-color:transparent !important; box-shadow:inset 0 0 0 1px rgba(53,214,197,.5) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit { grid-column:1 / -1 !important; justify-self:end !important; align-self:center !important; width:auto !important; min-width:166px !important; height:46px !important; min-height:46px !important; margin:2px 0 0 auto !important; padding:0 24px !important; border:0 !important; border-radius:999px !important; background:var(--grade-ui-accent) !important; background-image:none !important; color:var(--grade-ui-accent-ink) !important; font-size:15px !important; font-weight:800 !important; line-height:46px !important; box-shadow:0 0 19px rgba(53,214,197,.5) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit *, body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit span { color:var(--grade-ui-accent-ink) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit:hover { background:var(--grade-ui-accent-hover) !important; color:var(--grade-ui-accent-ink) !important; box-shadow:0 0 27px rgba(53,214,197,.66),0 10px 24px rgba(53,214,197,.2) !important; } } @media (min-width:981px) and (max-width:1120px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-content { grid-template-columns:1fr !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { grid-column:1 !important; } } @media (max-width:980px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { padding:28px 18px 56px !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED { align-items:flex-start !important; flex-direction:column !important; gap:14px !important; margin-bottom:20px !important; padding-bottom:20px !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED h1 { font-size:32px !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED p { font-size:15px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content { display:block !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar { display:block !important; width:100% !important; margin:0 0 16px !important; padding:20px 18px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar::before { margin-bottom:14px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar > div, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-options { display:grid !important; grid-template-columns:1fr !important; gap:10px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { display:block !important; min-height:0 !important; margin-bottom:16px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { min-height:60px !important; padding:0 18px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child { min-height:0 !important; padding:20px 18px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-submit { width:100% !important; margin-top:8px !important; } } /* True final QA + grading surface. Match the solid dark exam workspace. */ @media (min-width:981px) { body.route-qa-RETIRED, body.route-grade-RETIRED { --native-work-bg:#090a0c; --native-work-panel:#111316; --native-work-panel-raised:#15181c; --native-work-input:#0b0d10; --native-work-control:#1a1d22; --native-work-line:#2d3137; --native-work-line-soft:#25292e; --native-work-text:#f5f7f8; --native-work-muted:#a7adb5; --native-work-accent:#35d6c5; --native-work-accent-ink:#061714; } body.route-qa-RETIRED #app, body.route-qa-RETIRED #container, body.route-qa-RETIRED #app .min-h-screen, body.route-grade-RETIRED #app, body.route-grade-RETIRED #container, body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { background:var(--native-work-bg) !important; background-color:var(--native-work-bg) !important; background-image:none !important; } body.route-qa-RETIRED #app :is(.desktop-qa-RETIRED-content,.desktop-qa-RETIRED-question-types,.desktop-qa-RETIRED-question-entry,.glass-card,.glass-card-frosted), body.route-grade-RETIRED #app :is(.desktop-grade-RETIRED-content,.desktop-grade-RETIRED-typebar,.desktop-grade-RETIRED-question-panel,.desktop-grade-RETIRED-answer-panel,.glass-card,.glass-card-frosted) { opacity:1 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED, body.route-grade-RETIRED #desktop-grade-header-RETIRED { margin-bottom:28px !important; padding-bottom:24px !important; border-bottom:1px solid var(--native-work-line-soft) !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED h1, body.route-grade-RETIRED #desktop-grade-header-RETIRED h1 { color:var(--native-work-text) !important; font-size:30px !important; font-weight:760 !important; letter-spacing:0 !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED p, body.route-grade-RETIRED #desktop-grade-header-RETIRED p { color:var(--native-work-muted) !important; font-size:14px !important; line-height:1.65 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(textarea), body.route-qa-RETIRED #app .desktop-qa-RETIRED-content:has(taro-textarea-core) { display:grid !important; grid-template-columns:1fr !important; gap:18px !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; overflow:visible !important; border:0 !important; border-radius:0 !important; background:transparent !important; background-image:none !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry { width:100% !important; margin:0 !important; border:1px solid var(--native-work-line) !important; border-radius:6px !important; background:var(--native-work-panel) !important; background-color:var(--native-work-panel) !important; background-image:none !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types { padding:24px 28px 26px !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types > div:first-child, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry > div:first-child { border:0 !important; background:transparent !important; background-image:none !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry > div:first-child { border-bottom:1px solid var(--native-work-line-soft) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry > div:last-child { background:transparent !important; background-image:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type { pointer-events:auto !important; cursor:pointer !important; border:0 !important; background:var(--native-work-control) !important; background-image:none !important; color:#c7ccd2 !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type.is-active, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type.capsule-selected, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type[aria-pressed="true"] { background:var(--native-work-accent) !important; color:var(--native-work-accent-ink) !important; box-shadow:0 0 0 1px rgba(53,214,197,.2),0 0 17px rgba(53,214,197,.48) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry textarea, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry taro-textarea-core { border:0 !important; background:var(--native-work-input) !important; background-color:var(--native-work-input) !important; background-image:none !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { border:1px solid var(--native-work-line) !important; border-radius:6px !important; background:var(--native-work-panel) !important; background-color:var(--native-work-panel) !important; background-image:none !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-options { position:relative !important; z-index:6 !important; pointer-events:auto !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core { position:relative !important; z-index:7 !important; pointer-events:auto !important; cursor:pointer !important; border:0 !important; background:var(--native-work-control) !important; background-image:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option.capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option.is-active, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option[aria-pressed="true"] { background:var(--native-work-accent) !important; color:var(--native-work-accent-ink) !important; box-shadow:0 0 0 1px rgba(53,214,197,.2),0 0 17px rgba(53,214,197,.48) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { position:relative !important; grid-template-rows:72px minmax(430px,1fr) !important; min-height:526px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { padding-right:292px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child.desktop-grade-RETIRED-input-modebar { display:grid !important; grid-template-columns:repeat(3,78px) !important; gap:6px !important; width:246px !important; max-width:246px !important; min-width:246px !important; height:40px !important; min-height:40px !important; margin:0 !important; padding:0 !important; position:absolute !important; top:16px !important; right:18px !important; z-index:12 !important; overflow:visible !important; pointer-events:auto !important; border:0 !important; border-radius:0 !important; background:transparent !important; background-image:none !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar taro-button-core { width:78px !important; min-width:78px !important; max-width:78px !important; height:40px !important; min-height:40px !important; margin:0 !important; padding:0 8px !important; pointer-events:auto !important; cursor:pointer !important; border:0 !important; border-radius:999px !important; background:var(--native-work-control) !important; background-image:none !important; color:#c4c9cf !important; font-size:14px !important; font-weight:700 !important; box-shadow:none !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode.capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode.is-active, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode[aria-pressed="true"] { background:var(--native-work-accent) !important; color:var(--native-work-accent-ink) !important; box-shadow:0 0 0 1px rgba(53,214,197,.2),0 0 16px rgba(53,214,197,.46) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode.capsule-selected *, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode.is-active *, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode[aria-pressed="true"] * { color:var(--native-work-accent-ink) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child { min-height:430px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel [class*="glass-input"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel [class*="glass-input"] { border:0 !important; background:var(--native-work-input) !important; background-color:var(--native-work-input) !important; background-image:none !important; box-shadow:none !important; } } /* Interaction-state specificity repair. */ @media (min-width:981px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar .desktop-grade-RETIRED-type-options > .desktop-grade-RETIRED-type-option.capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar .desktop-grade-RETIRED-type-options > .desktop-grade-RETIRED-type-option.is-active, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar .desktop-grade-RETIRED-type-options > .desktop-grade-RETIRED-type-option[aria-pressed="true"] { border:0 !important; background:#35d6c5 !important; background-color:#35d6c5 !important; background-image:none !important; color:#061714 !important; box-shadow:0 0 0 1px rgba(53,214,197,.24),0 0 18px rgba(53,214,197,.56) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types .desktop-qa-RETIRED-question-type-row > .desktop-qa-RETIRED-question-type.capsule-selected, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types .desktop-qa-RETIRED-question-type-row > .desktop-qa-RETIRED-question-type.is-active, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types .desktop-qa-RETIRED-question-type-row > .desktop-qa-RETIRED-question-type[aria-pressed="true"] { border:0 !important; background:#35d6c5 !important; background-color:#35d6c5 !important; background-image:none !important; color:#061714 !important; box-shadow:0 0 0 1px rgba(53,214,197,.24),0 0 18px rgba(53,214,197,.54) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { padding-right:250px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar { grid-template-columns:repeat(3,68px) !important; width:216px !important; max-width:216px !important; min-width:216px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar > .desktop-grade-RETIRED-input-mode { width:68px !important; min-width:68px !important; max-width:68px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar > .desktop-grade-RETIRED-input-mode.capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar > .desktop-grade-RETIRED-input-mode.is-active, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar > .desktop-grade-RETIRED-input-mode[aria-pressed="true"] { border:0 !important; background:#35d6c5 !important; background-color:#35d6c5 !important; background-image:none !important; color:#061714 !important; box-shadow:0 0 0 1px rgba(53,214,197,.22),0 0 17px rgba(53,214,197,.52) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-submit { justify-self:end !important; width:auto !important; min-width:178px !important; max-width:none !important; height:46px !important; min-height:46px !important; margin:2px 0 0 auto !important; padding:0 26px !important; border:0 !important; border-radius:999px !important; background:#35d6c5 !important; background-color:#35d6c5 !important; background-image:none !important; color:#061714 !important; box-shadow:0 0 0 1px rgba(53,214,197,.22),0 0 20px rgba(53,214,197,.52) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child.desktop-grade-RETIRED-input-modebar { grid-template-columns:repeat(3,68px) !important; width:216px !important; max-width:216px !important; min-width:216px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child.desktop-grade-RETIRED-input-modebar > .desktop-grade-RETIRED-input-mode { width:68px !important; min-width:68px !important; max-width:68px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child.desktop-grade-RETIRED-input-modebar > .desktop-grade-RETIRED-input-mode.capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child.desktop-grade-RETIRED-input-modebar > .desktop-grade-RETIRED-input-mode.is-active, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child.desktop-grade-RETIRED-input-modebar > .desktop-grade-RETIRED-input-mode[aria-pressed="true"] { background:#35d6c5 !important; background-color:#35d6c5 !important; background-image:none !important; color:#061714 !important; box-shadow:0 0 0 1px rgba(53,214,197,.22),0 0 17px rgba(53,214,197,.52) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry .desktop-qa-RETIRED-submit { align-self:flex-end !important; width:auto !important; min-width:156px !important; height:44px !important; min-height:44px !important; margin:0 0 0 auto !important; padding:0 23px !important; border:0 !important; border-radius:999px !important; background:#35d6c5 !important; background-color:#35d6c5 !important; background-image:none !important; color:#061714 !important; font-size:15px !important; font-weight:800 !important; box-shadow:0 0 0 1px rgba(53,214,197,.22),0 0 19px rgba(53,214,197,.52) !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry .desktop-qa-RETIRED-submit * { color:#061714 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-content .desktop-qa-RETIRED-question-entry > div:last-child > button.desktop-qa-RETIRED-submit, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content .desktop-qa-RETIRED-question-entry > div:last-child > taro-button-core.desktop-qa-RETIRED-submit { background:#35d6c5 !important; background-color:#35d6c5 !important; background-image:none !important; color:#061714 !important; box-shadow:0 0 0 1px rgba(53,214,197,.22),0 0 19px rgba(53,214,197,.52) !important; } } /* Final overrides for the official learning hub primary cards. */ /* Final QA/grade surface polish: denser panels, calmer controls, no title overlap. */ @media (min-width:981px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { padding-top:44px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content { gap:16px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-typebar, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar { grid-template-columns:1fr !important; gap:16px !important; min-height:118px !important; margin:0 0 18px !important; padding:24px 30px 28px !important; border-color:#30333a !important; border-radius:6px !important; background:#111417 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar::before { display:block !important; content:'选择题型' !important; color:#f2f4f7 !important; font-size:20px !important; line-height:1.2 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar > div, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-options { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:14px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core { height:42px !important; min-height:42px !important; border-radius:999px !important; background:#1d2025 !important; color:#b9bec7 !important; font-size:15px !important; font-weight:720 !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar .capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar .desktop-grade-RETIRED-type-option.is-active, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar .desktop-grade-RETIRED-type-option[aria-pressed="true"] { background:#35d6c5 !important; color:#061714 !important; box-shadow:0 0 0 1px rgba(53,214,197,.18),0 8px 22px rgba(53,214,197,.18) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { border-color:#30333a !important; background:#111417 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { min-height:76px !important; padding:0 26px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child :is(p,span,strong), body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child :is(p,span,strong) { font-size:21px !important; line-height:1.25 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { padding-right:244px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child.desktop-grade-RETIRED-input-modebar { grid-template-columns:repeat(3,64px) !important; gap:8px !important; width:208px !important; min-width:208px !important; max-width:208px !important; height:36px !important; min-height:36px !important; top:19px !important; right:20px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar taro-button-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar > .desktop-grade-RETIRED-input-mode { width:64px !important; min-width:64px !important; max-width:64px !important; height:36px !important; min-height:36px !important; padding:0 8px !important; border-radius:999px !important; background:#1d2025 !important; color:#b9bec7 !important; font-size:13px !important; font-weight:720 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar .capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar .desktop-grade-RETIRED-input-mode.is-active, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar .desktop-grade-RETIRED-input-mode[aria-pressed="true"] { background:#35d6c5 !important; color:#061714 !important; box-shadow:0 0 0 1px rgba(53,214,197,.18),0 8px 18px rgba(53,214,197,.16) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core { border-radius:6px !important; background:#090b0e !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry { border-color:#30333a !important; background:#111417 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type { min-height:40px !important; border-radius:5px !important; background:#121419 !important; color:#b9bec7 !important; font-size:15px !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type.is-active, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type.capsule-selected, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type[aria-pressed="true"] { background:#35d6c5 !important; color:#061714 !important; box-shadow:0 0 0 1px rgba(53,214,197,.18),0 8px 20px rgba(53,214,197,.18) !important; } } /* Global desktop navigation standard: match the broadcast page side entry rail. */ @media (min-width:981px) { body { --desktop-left-width:300px !important; } #desktop-nav { width:var(--desktop-left-width) !important; padding:26px 20px 18px !important; background:#111114 !important; border-right:1px solid #292a31 !important; box-shadow:none !important; } #desktop-nav .desktop-nav-brand { display:flex !important; align-items:flex-start !important; gap:12px !important; min-height:58px !important; margin:0 !important; padding:0 8px 22px !important; color:#f3f1f5 !important; font-size:18px !important; font-weight:760 !important; line-height:1.25 !important; } #desktop-nav .desktop-nav-brand i { display:inline-grid !important; place-items:center !important; width:18px !important; height:22px !important; flex:0 0 auto !important; margin-top:1px !important; color:#f3f1f5 !important; font-size:15px !important; font-style:normal !important; line-height:1 !important; } #desktop-nav .desktop-nav-brand > div { min-width:0 !important; } #desktop-nav .desktop-nav-brand span { display:block !important; margin-top:7px !important; color:#8b8793 !important; font-size:13px !important; font-weight:520 !important; line-height:1.35 !important; } #desktop-nav .desktop-nav-toggle { top:25px !important; right:15px !important; width:26px !important; height:26px !important; padding:0 !important; color:#35d6c5 !important; font-size:20px !important; line-height:26px !important; } #desktop-nav .desktop-nav-pages { display:flex !important; flex-direction:column !important; gap:0 !important; margin:18px -20px 0 !important; } #desktop-nav .desktop-nav-item { width:100% !important; min-height:56px !important; margin:0 !important; padding:0 24px !important; border:0 !important; border-radius:0 !important; color:#aaa7b2 !important; background:transparent !important; font-size:16px !important; font-weight:700 !important; line-height:56px !important; letter-spacing:0 !important; } #desktop-nav .desktop-nav-item:hover { background:#17181d !important; color:#d8d5de !important; } #desktop-nav .desktop-nav-item.active { background:#1b1c21 !important; color:#f4f2f6 !important; font-weight:760 !important; } #desktop-nav .desktop-nav-item.active::before { top:10px !important; bottom:10px !important; left:0 !important; width:3px !important; border-radius:0 2px 2px 0 !important; background:#35d6c5 !important; } #desktop-nav .desktop-nav-badge { min-width:27px !important; height:20px !important; margin-left:auto !important; padding:0 7px !important; border-radius:5px !important; font-size:11px !important; font-weight:800 !important; } #desktop-nav .desktop-nav-footer { left:0 !important; right:0 !important; bottom:0 !important; padding:18px 24px 20px !important; border-top:1px solid #292a31 !important; background:#111114 !important; } #desktop-nav .desktop-nav-user { padding:0 !important; color:#f1eff4 !important; font-size:13px !important; font-weight:760 !important; line-height:1.35 !important; } #desktop-nav .desktop-nav-user span { display:block !important; margin-top:5px !important; color:#85818e !important; font-size:11px !important; font-weight:520 !important; } #desktop-nav .desktop-nav-footer-actions { grid-template-columns:1fr 1fr !important; gap:8px !important; margin-top:15px !important; padding-top:14px !important; } #desktop-nav .customer-support-link, #desktop-nav .pro-upgrade-link, #desktop-nav #theme-toggle { border-radius:4px !important; font-size:11px !important; font-weight:680 !important; } #desktop-nav .desktop-home-footer { margin-top:12px !important; padding-top:10px !important; font-size:11px !important; } body.desktop-nav-collapsed #app { padding-left:24px !important; } body:not(.desktop-nav-collapsed):not(.route-auth):not(.route-dashboard) #app { padding-left:calc(var(--desktop-left-width) + 24px) !important; } body.desktop-light #desktop-nav { background:rgba(255,255,255,.82) !important; border-color:rgba(203,214,226,.92) !important; } body.desktop-light #desktop-nav .desktop-nav-item { color:#626b76 !important; } body.desktop-light #desktop-nav .desktop-nav-item:hover { background:#f5f8fa !important; color:#2f3944 !important; } body.desktop-light #desktop-nav .desktop-nav-item.active { background:#f0f6f5 !important; color:#25303a !important; } } /* Knowledge puzzle v3: compact command surface, shared with the Today workspace. */ @media (min-width:981px) { body.route-yibentong-puzzle #app, body.desktop-light.route-yibentong-puzzle #app { background:#080b0f !important; } body.route-yibentong-puzzle #app .desktop-puzzle-redesign { gap:12px !important; padding:34px var(--desktop-page-gutter,56px) 84px !important; background:linear-gradient(180deg,rgba(93,225,211,.035),transparent 210px) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero { min-height:0 !important; padding:17px 20px !important; border:1px solid #27313a !important; border-radius:8px !important; background:linear-gradient(100deg,rgba(67,208,191,.12),rgba(78,127,222,.05) 48%,transparent 72%),#10151b !important; box-shadow:none !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero::after, body.route-yibentong-puzzle #app .desktop-puzzle-hero svg { display:none !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero > .flex.items-center { gap:0 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero .flex.flex-col.flex-1 { gap:4px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero .flex.flex-col.flex-1 > .flex:first-child > span:first-child { color:#f2f7f8 !important; font-size:21px !important; font-weight:700 !important; letter-spacing:0 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero .flex.flex-col.flex-1 span { color:#8d9aa6 !important; font-size:12px !important; line-height:1.45 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-tabs, body.route-yibentong-puzzle #app .desktop-puzzle-status-tabs { display:flex !important; align-items:center !important; min-width:0 !important; padding:0 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-tabs > div, body.route-yibentong-puzzle #app .desktop-puzzle-status-tabs > div { width:100% !important; padding:3px !important; border:1px solid #263039 !important; border-radius:7px !important; background:#0e1319 !important; gap:3px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-tabs button, body.route-yibentong-puzzle #app .desktop-puzzle-status-tabs button { min-height:34px !important; padding:6px 11px !important; border-radius:5px !important; color:#8995a1 !important; font-size:12px !important; font-weight:650 !important; line-height:1.2 !important; transition:background .18s ease,color .18s ease,transform .18s ease !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-tabs button:hover, body.route-yibentong-puzzle #app .desktop-puzzle-status-tabs button:hover { border-color:transparent !important; background:#1a252d !important; color:#dce8e8 !important; transform:translateY(-1px) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-content { gap:14px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume { padding:16px !important; border:1px solid #27313a !important; border-radius:8px !important; background:#10151b !important; box-shadow:none !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume::before { display:none !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-head { min-height:0 !important; margin:0 0 12px !important; padding:0 0 11px 10px !important; border-bottom:1px solid #263039 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-head::before { top:1px !important; bottom:12px !important; width:2px !important; background:#51d7c3 !important; box-shadow:0 0 12px rgba(81,215,195,.42) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-head span:first-child { font-size:15px !important; font-weight:700 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-head span { font-size:11px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-board { padding:14px !important; border:1px solid #202a33 !important; border-radius:7px !important; background:linear-gradient(rgba(120,159,181,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(120,159,181,.045) 1px,transparent 1px),#0b1015 !important; background-size:24px 24px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic { margin-bottom:18px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic > .flex.items-center { min-height:30px !important; margin-bottom:8px !important; gap:7px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic > .flex.items-center::before { width:17px !important; height:17px !important; border-radius:4px !important; font-size:7px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic > .flex.items-center > span:nth-child(2) { font-size:13px !important; font-weight:680 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-grid { gap:9px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile { min-height:92px !important; padding:25px 11px 11px !important; border-radius:7px !important; box-shadow:inset 0 1px rgba(255,255,255,.04) !important; transition:transform .18s ease,box-shadow .18s ease,filter .18s ease !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile::before { right:-5px !important; width:10px !important; height:10px !important; margin-top:-5px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile::after { bottom:-5px !important; width:10px !important; height:10px !important; margin-left:-5px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile:hover { transform:translateY(-3px) scale(1.012) !important; box-shadow:0 10px 22px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.09) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile > span:first-child { top:7px !important; left:8px !important; font-size:9px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile > span:not(:first-child) { font-size:12px !important; font-weight:600 !important; line-height:1.4 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-legend { padding:11px 14px !important; border-radius:7px !important; gap:14px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-legend span { font-size:11px !important; } } /* Grade workspace balance pass: compact header rhythm and aligned work panels. */ @media (min-width:981px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { width:100% !important; max-width:1280px !important; margin:0 auto !important; padding:42px 44px 72px !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED { margin:0 0 24px !important; padding:0 0 22px !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED h1 { font-size:34px !important; line-height:1.16 !important; } body.route-grade-RETIRED #desktop-grade-header-RETIRED p { max-width:720px !important; font-size:15px !important; line-height:1.6 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:16px !important; align-items:stretch !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-typebar, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar { display:grid !important; grid-template-columns:150px minmax(0,1fr) !important; align-items:center !important; gap:22px !important; min-height:82px !important; margin:0 !important; padding:18px 22px !important; border:1px solid #2d3037 !important; border-radius:6px !important; background:#111316 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar::before { content:'选择题型' !important; margin:0 !important; color:#f2f4f7 !important; font-size:18px !important; font-weight:760 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar > div, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-options { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core { height:40px !important; min-height:40px !important; padding:0 16px !important; border-radius:999px !important; background:#1b1e23 !important; color:#b9bec7 !important; font-size:14px !important; font-weight:720 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { display:grid !important; grid-template-rows:70px minmax(360px,1fr) !important; min-height:492px !important; border:1px solid #2d3037 !important; border-radius:6px !important; background:#111316 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { min-height:70px !important; padding:0 22px !important; border-bottom:1px solid #24272d !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child::after, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child::after { content:'' !important; display:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child :is(p,span,strong), body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child :is(p,span,strong) { font-size:18px !important; line-height:1.3 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { padding-right:228px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child { min-height:360px !important; padding:20px 22px 22px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child.desktop-grade-RETIRED-input-modebar { grid-template-columns:repeat(3,60px) !important; gap:7px !important; width:194px !important; min-width:194px !important; max-width:194px !important; height:34px !important; min-height:34px !important; top:18px !important; right:18px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar taro-button-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar > .desktop-grade-RETIRED-input-mode { width:60px !important; min-width:60px !important; max-width:60px !important; height:34px !important; min-height:34px !important; font-size:13px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core { min-height:300px !important; padding:16px 18px !important; border-radius:5px !important; background:#090b0e !important; font-size:15px !important; line-height:1.7 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > *:not(.desktop-grade-RETIRED-typebar):not(.desktop-grade-RETIRED-question-panel):not(.desktop-grade-RETIRED-answer-panel):not(.desktop-grade-RETIRED-submit):not(.desktop-grade-RETIRED-history-shortcut) { grid-column:1 / -1 !important; margin-top:0 !important; border-color:#2d3037 !important; border-radius:6px !important; background:#111316 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-submit { grid-column:1 / -1 !important; justify-self:end !important; min-width:172px !important; height:44px !important; min-height:44px !important; margin:0 !important; padding:0 24px !important; border-radius:999px !important; } } @media (min-width:981px) and (max-width:1180px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-content { grid-template-columns:1fr !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { grid-column:1 !important; } } /* QA and grading final layout pass: keep native logic, clean the desktop surface. */ @media (min-width:981px) { body.route-qa-RETIRED #app .min-h-screen, body.route-grade-RETIRED #app .min-h-screen, body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { width:min(1360px,calc(100% - 72px)) !important; padding-top:34px !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar { padding:22px 28px 24px !important; border:1px solid #2c3036 !important; border-radius:6px !important; background:#111418 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types { display:grid !important; grid-template-columns:190px minmax(0,1fr) !important; align-items:center !important; column-gap:28px !important; min-height:96px !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types > div:first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar::before { min-width:0 !important; color:#f3f5f7 !important; font-size:20px !important; font-weight:760 !important; line-height:1.25 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type-row, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-options { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:12px !important; width:100% !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core { height:38px !important; min-height:38px !important; border:1px solid transparent !important; border-radius:999px !important; background:#1b1f24 !important; color:#b9bec6 !important; font-size:14px !important; font-weight:730 !important; box-shadow:none !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type.is-active, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type.capsule-selected, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type[aria-pressed="true"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option.capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option.is-active, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option[aria-pressed="true"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar .capsule-selected { border-color:rgba(53,214,197,.28) !important; background:#35d6c5 !important; color:#061714 !important; box-shadow:0 0 0 1px rgba(53,214,197,.18),0 6px 18px rgba(53,214,197,.18) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar { display:grid !important; grid-template-columns:190px minmax(0,1fr) !important; align-items:center !important; column-gap:28px !important; min-height:96px !important; margin-bottom:18px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar::before { margin:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry { border:1px solid #2c3036 !important; border-radius:6px !important; background:#111418 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { padding-right:26px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child.desktop-grade-RETIRED-input-modebar { position:static !important; display:inline-grid !important; grid-template-columns:repeat(3,72px) !important; align-self:flex-end !important; gap:8px !important; width:auto !important; min-width:0 !important; max-width:none !important; height:36px !important; min-height:36px !important; margin:-4px 0 4px auto !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar taro-button-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar > .desktop-grade-RETIRED-input-mode { width:72px !important; min-width:72px !important; max-width:72px !important; height:36px !important; min-height:36px !important; border:1px solid transparent !important; border-radius:999px !important; background:#1b1f24 !important; color:#b9bec6 !important; font-size:13px !important; font-weight:730 !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode.capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode.is-active, body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-mode[aria-pressed="true"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-input-modebar .capsule-selected { border-color:rgba(53,214,197,.26) !important; background:#35d6c5 !important; color:#061714 !important; box-shadow:0 0 0 1px rgba(53,214,197,.16),0 6px 16px rgba(53,214,197,.16) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry textarea, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry taro-textarea-core { border:0 !important; border-radius:5px !important; background:#090c0f !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-history-shortcut i, body.route-grade-RETIRED #app .desktop-grade-RETIRED-history-shortcut [class*="i-mdi"], body.route-grade-RETIRED #app .desktop-grade-RETIRED-history-shortcut > :first-child { display:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-history-shortcut { display:flex !important; align-items:center !important; min-height:68px !important; padding:18px 22px !important; border-color:#2c3036 !important; border-radius:6px !important; background:#111418 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-history-shortcut::before { content:''; width:4px; height:34px; margin-right:18px; border-radius:999px; background:#35d6c5; box-shadow:0 0 14px rgba(53,214,197,.34); } body.route-grade-RETIRED #app .desktop-grade-RETIRED-history-shortcut :is(strong,h2,h3,p,span) { color:#eef2f4 !important; } body.route-grade-RETIRED #app .min-h-screen > div:first-child:not(#desktop-grade-header-RETIRED):not(.desktop-grade-RETIRED-workspace):not(.desktop-grade-RETIRED-content), body.route-grade-RETIRED #app .desktop-grade-RETIRED-legacy-header, body.route-grade-RETIRED #app .desktop-grade-RETIRED-legacy-intro, body.route-grade-RETIRED #app .desktop-legacy-topbar { display:none !important; } body.route-grade-RETIRED #app .min-h-screen > div:first-child[style*="height"], body.route-grade-RETIRED #app .min-h-screen > div:first-child[style*="min-height"] { display:none !important; } } /* Final page-header rail. Keep every left-nav workspace on one desktop grid. */ @media (min-width:981px) { body { --desktop-page-gutter:56px; --desktop-header-height:144px; --desktop-header-bottom-gap:28px; } /* A page owns its inset exactly once: custom pages use their shell; native pages use min-h-screen. This removes the accumulated page-specific gutters. */ #desktop-today, #desktop-broadcast .data-shell, .exam-hub-shell, .exam-paper-shell, .official-library-shell, .profile-page-shell, #desktop-checkin .checkin-shell, .focus-shell, .report-shell, .admin-portal-shell, .admin-dashboard-shell { width:100% !important; max-width:none !important; margin:0 !important; padding:54px var(--desktop-page-gutter) 76px !important; box-sizing:border-box !important; } #desktop-today .today-inner { width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; } body:not(.route-auth) #app .min-h-screen, body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { padding-left:var(--desktop-page-gutter) !important; padding-right:var(--desktop-page-gutter) !important; } /* Shared title block geometry: title, description, actions and divider line now begin and end on the exact same page rail across every main workspace. */ #desktop-broadcast .broadcast-head, #desktop-exam-hub .exam-hub-head, #desktop-exam-topics .exam-hub-head, #desktop-exam-schools .exam-hub-head, #desktop-exam-papers .exam-paper-head, #desktop-exam-topic-dashboard .topic-dash-head, #desktop-exam-theory-schools .topic-dash-head, #desktop-qa-header-RETIRED, #desktop-grade-header-RETIRED { width:100% !important; min-height:var(--desktop-header-height) !important; margin:0 0 var(--desktop-header-bottom-gap) !important; padding:0 0 25px !important; box-sizing:border-box !important; } #desktop-qa-header-RETIRED, #desktop-grade-header-RETIRED { margin-left:0 !important; margin-right:0 !important; } #desktop-broadcast .broadcast-head-actions > button { min-height:38px !important; } } /* Broadcast is the canonical desktop page header. Native and custom routes must use its actual viewport rail, not an additional app or shell inset. */ @media (min-width:981px) { body:not(.desktop-nav-collapsed).route-qa-RETIRED #app, body:not(.desktop-nav-collapsed).route-grade-RETIRED #app { padding-left:var(--desktop-left-width) !important; padding-right:0 !important; } body.desktop-nav-collapsed.route-qa-RETIRED #app, body.desktop-nav-collapsed.route-grade-RETIRED #app { padding-left:0 !important; padding-right:0 !important; } /* Grade used to inherit a min-screen inset and then add a workspace inset. */ body.route-grade-RETIRED #app .min-h-screen { padding:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace, body.route-qa-RETIRED #app .min-h-screen { width:100% !important; max-width:none !important; margin:0 !important; padding:54px var(--desktop-page-gutter) 76px !important; box-sizing:border-box !important; } /* Custom pages use the same full-width shell as broadcast. */ #desktop-course-hub .course-catalog-shell, #desktop-course-hub .course-hub-shell, #desktop-exam-topic-dashboard .topic-dash-shell, #desktop-exam-theory-schools .topic-dash-shell, #desktop-official-library .official-library-shell, #desktop-official-templates .official-templates-shell { width:100% !important; max-width:none !important; margin:0 !important; padding:54px var(--desktop-page-gutter) 76px !important; box-sizing:border-box !important; } /* Every primary header inherits the broadcast geometry and type scale. */ #desktop-course-hub .course-center-head, #desktop-official-library .official-library-head, #desktop-official-templates .official-templates-head, #desktop-exam-topic-dashboard .topic-dash-head, #desktop-exam-theory-schools .topic-dash-head { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; width:100% !important; min-height:var(--desktop-header-height) !important; margin:0 0 var(--desktop-header-bottom-gap) !important; padding:0 0 25px !important; border-bottom:1px solid #292a31 !important; box-sizing:border-box !important; } #desktop-course-hub .course-center-head > div > span, #desktop-official-library .official-library-head > div > span, #desktop-official-templates .official-templates-head > div > span, #desktop-exam-topic-dashboard .topic-dash-head > div > span, #desktop-exam-theory-schools .topic-dash-head > div > span { display:block !important; color:#35d6c5 !important; font-size:10px !important; font-weight:700 !important; line-height:1.3 !important; letter-spacing:0 !important; } #desktop-course-hub .course-center-head h1, #desktop-official-library .official-library-head h1, #desktop-official-templates .official-templates-head h1, #desktop-exam-topic-dashboard .topic-dash-head h1, #desktop-exam-theory-schools .topic-dash-head h1 { margin:7px 0 9px !important; font-size:30px !important; font-weight:700 !important; line-height:1.2 !important; letter-spacing:0 !important; } #desktop-course-hub .course-center-head p, #desktop-official-library .official-library-head p, #desktop-official-templates .official-templates-head p, #desktop-exam-topic-dashboard .topic-dash-head p, #desktop-exam-theory-schools .topic-dash-head p { max-width:680px !important; margin:0 !important; font-size:14px !important; line-height:1.5 !important; } } /* Final profile archive type rail. */ body.route-profile .profile-head-actions a, body.route-profile .profile-head-actions button { min-height:42px !important; padding:0 17px !important; border-color:#405064 !important; background:#111720 !important; color:#d9e3ec !important; font-size:13px !important; font-weight:750 !important; line-height:40px !important; } body.route-profile .profile-head-actions a:first-child { border-color:rgba(37,199,183,.7) !important; background:#10302d !important; color:#8df1e5 !important; } body.route-profile .profile-archive { padding-top:28px !important; } body.route-profile .profile-archive .profile-section-head span { font-size:12px !important; letter-spacing:.08em !important; } body.route-profile .profile-archive .profile-section-head h2 { font-size:26px !important; } body.route-profile .profile-archive .profile-section-head p { margin-top:9px !important; color:#a8b4c1 !important; font-size:14px !important; line-height:1.6 !important; } body.route-profile .profile-archive-summary { margin-top:20px !important; } body.route-profile .profile-archive-summary > button { min-height:98px !important; padding:17px 22px !important; } body.route-profile .profile-archive-summary strong { font-size:30px !important; } body.route-profile .profile-archive-summary span { margin-top:8px !important; color:#a6b1be !important; font-size:13px !important; font-weight:650 !important; } body.route-profile .profile-archive-tabs { gap:13px !important; margin-top:18px !important; padding:5px !important; border:1px solid var(--profile-line) !important; border-radius:8px !important; background:var(--profile-panel) !important; } body.route-profile .profile-archive-tabs button { min-height:36px !important; padding:0 11px !important; border-radius:5px !important; color:#aab6c4 !important; font-size:13px !important; line-height:36px !important; } body.route-profile .profile-archive-tabs button.active { border:0 !important; background:#164b46 !important; color:#9cf2e8 !important; } body.route-profile .profile-archive-sync { min-height:36px !important; color:#a6b2c0 !important; font-size:12px !important; } body.route-profile .profile-archive-sync.is-done { color:#63cfc2 !important; } body.route-profile .profile-archive-list { max-height:460px !important; } body.route-profile .profile-archive-row { grid-template-columns:72px minmax(0,1fr) 112px 22px !important; gap:18px !important; min-height:82px !important; padding:14px 12px !important; } body.route-profile .profile-archive-row > span { color:#54ded0 !important; font-size:13px !important; font-weight:750 !important; } body.route-profile .profile-archive-list strong { color:#f0f5f9 !important; font-size:16px !important; line-height:1.35 !important; } body.route-profile .profile-archive-list p { margin-top:6px !important; color:#a3afbd !important; font-size:12px !important; line-height:1.45 !important; } body.route-profile .profile-archive-list time { color:#acb7c4 !important; font-size:12px !important; font-weight:600 !important; } body.route-profile .profile-archive-row > i { color:#7d8d9d !important; font-size:17px !important; } /* Q&A uses the same page rail and title treatment as Broadcast. Keep this final rule independent of the native page variant so the header survives asynchronous route mounts as well as theme switches. */ @media (min-width:981px) { body.route-qa-RETIRED #app .min-h-screen { width:100% !important; max-width:none !important; margin:0 !important; padding:54px var(--desktop-page-gutter,56px) 76px !important; box-sizing:border-box !important; } body.route-qa-RETIRED #desktop-qa-header-RETIRED.desktop-qa-RETIRED-page-header { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:28px !important; width:100% !important; min-height:var(--desktop-header-height,144px) !important; margin:0 0 var(--desktop-header-bottom-gap,28px) !important; padding:0 0 25px !important; border-bottom:1px solid #292a31 !important; border-radius:0 !important; background:transparent !important; box-sizing:border-box !important; } } @media (max-width:720px) { body.route-profile .profile-head-actions { width:100% !important; } body.route-profile .profile-head-actions a,body.route-profile .profile-head-actions button { flex:1; text-align:center; } body.route-profile .profile-archive .profile-section-head h2 { font-size:23px !important; } body.route-profile .profile-archive-summary { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } body.route-profile .profile-archive-summary > button { min-height:82px !important; } body.route-profile .profile-archive-row { grid-template-columns:58px minmax(0,1fr) 18px !important; gap:12px !important; } body.route-profile .profile-archive-list time { grid-column:2; grid-row:2; text-align:left; } } /* Knowledge puzzle atlas - final load layer. Keep this at the file end. */ @media (min-width:981px) { body.route-yibentong-puzzle #app .desktop-puzzle-redesign.desktop-puzzle-redesign { gap:18px !important; padding:38px var(--desktop-page-gutter,56px) 96px !important; background:linear-gradient(180deg,rgba(41,208,184,.08),transparent 340px),#080a0e !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero.desktop-puzzle-hero { min-height:206px !important; padding:34px 38px !important; overflow:hidden !important; border:1px solid #294039 !important; border-radius:8px !important; background:linear-gradient(100deg,rgba(15,25,30,.98),rgba(7,14,18,.68)),url('/static/images/course-material-covers/yibentong-cover-v4.png') right center/360px auto no-repeat,#0d1418 !important; box-shadow:0 24px 64px rgba(0,0,0,.28),inset 0 1px rgba(232,255,251,.08) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero.desktop-puzzle-hero::after { content:'KNOWLEDGE ATLAS' !important; display:block !important; right:32px !important; bottom:24px !important; width:auto !important; height:auto !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:rgba(224,255,249,.22) !important; font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace !important; letter-spacing:.18em !important; transform:none !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero svg { display:none !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero .flex.flex-col.flex-1 { gap:9px !important; max-width:620px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero .flex.flex-col.flex-1 > .flex:first-child > span:first-child { font-size:34px !important; font-weight:760 !important; line-height:1.05 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-hero .flex.flex-col.flex-1 span { font-size:14px !important; line-height:1.7 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-tabs button,body.route-yibentong-puzzle #app .desktop-puzzle-status-tabs button { min-height:42px !important; padding:8px 16px !important; font-size:13px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume.desktop-puzzle-volume { padding:24px !important; border-radius:8px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-head.desktop-puzzle-volume-head { min-height:52px !important; margin-bottom:20px !important; padding:1px 0 15px 15px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-volume-head span:first-child { font-size:20px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-board.desktop-puzzle-board { padding:22px !important; border-radius:7px !important; background-size:32px 32px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic.desktop-puzzle-topic { margin-bottom:28px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic > .flex.items-center { min-height:38px !important; margin-bottom:14px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-topic > .flex.items-center > span:nth-child(2) { font-size:16px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-grid.desktop-puzzle-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:16px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile.desktop-puzzle-tile { min-height:150px !important; padding:38px 17px 16px !important; border-radius:7px !important; box-shadow:0 13px 28px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.06) !important; transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease,filter .24s ease !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile.desktop-puzzle-tile::before { right:-8px !important; width:16px !important; height:16px !important; margin-top:-8px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile.desktop-puzzle-tile::after { bottom:-8px !important; width:16px !important; height:16px !important; margin-left:-8px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile > span:first-child { top:12px !important; left:13px !important; font-size:10px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile > span:not(:first-child) { font-size:15px !important; font-weight:660 !important; line-height:1.48 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-tile.desktop-puzzle-tile:hover { z-index:5 !important; transform:translateY(-7px) scale(1.025) !important; filter:brightness(1.12) saturate(1.12) !important; box-shadow:0 24px 42px rgba(0,0,0,.36),0 0 0 1px rgba(115,232,213,.22),inset 0 1px rgba(255,255,255,.12) !important; } } @media (min-width:981px) and (max-width:1260px) { body.route-yibentong-puzzle #app .desktop-puzzle-grid.desktop-puzzle-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; } } /* Keep the answer capture choices inside their card so the selected mode and its working area read as one task, rather than two disconnected bands. */ @media (min-width:981px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { padding-right:22px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child { display:flex !important; flex-direction:column !important; gap:16px !important; min-height:0 !important; padding:18px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child.desktop-grade-RETIRED-input-modebar { position:static !important; display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; flex:0 0 46px !important; width:100% !important; min-width:0 !important; height:46px !important; min-height:46px !important; margin:0 !important; padding:3px !important; gap:3px !important; border:1px solid #2a353c !important; border-radius:6px !important; background:#0b1014 !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-mode, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar taro-button-core { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-width:0 !important; height:38px !important; min-height:38px !important; padding:0 10px !important; border:0 !important; border-radius:4px !important; background:transparent !important; color:#a7b3b7 !important; font-size:14px !important; font-weight:650 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-mode.capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-mode.is-active, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-mode[aria-pressed="true"] { background:#1d514b !important; color:#ecfffc !important; box-shadow:inset 0 0 0 1px rgba(83,230,213,.22) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:last-child { display:flex !important; flex:1 1 auto !important; min-height:238px !important; margin:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:last-child > * { flex:1 1 auto; min-height:238px !important; } } /* AI workspaces: distinct diagnostic and inquiry surfaces. */ @media (min-width:981px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-workspace { max-width:none !important; padding-top:46px !important; background: linear-gradient(90deg, rgba(53,214,197,.055) 1px, transparent 1px) 0 0/72px 72px, linear-gradient(rgba(53,214,197,.04) 1px, transparent 1px) 0 0/72px 72px, #090c10 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:18px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar { grid-column:1/-1 !important; grid-template-columns:206px minmax(0,1fr) !important; min-height:104px !important; padding:18px 24px !important; border-color:#294542 !important; background:linear-gradient(90deg,rgba(25,143,131,.16),rgba(17,20,24,.96) 44%) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar::before { content:'01 题型定位' !important; color:#e8f6f4 !important; font:700 18px/1.3 "IBM Plex Sans",sans-serif !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel { position:relative; min-height:502px !important; overflow:hidden; border-color:#28333a !important; border-radius:8px !important; background:#101419 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel::before, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel::before { content:attr(data-stage); position:absolute; top:17px; left:20px; z-index:3; color:#4ce1d0; font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { min-height:74px !important; padding:17px 22px 14px 53px !important; border-bottom:1px solid #253037 !important; background:linear-gradient(90deg,rgba(53,214,197,.08),transparent 62%) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { padding-right:228px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:last-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child { padding:18px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel textarea, body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel taro-textarea-core, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel taro-textarea-core { min-height:330px !important; border:1px solid #202a31 !important; border-radius:5px !important; background:#0a0e12 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-submit { grid-column:1/-1 !important; min-width:210px !important; height:50px !important; margin:4px 0 0 auto !important; border-radius:5px !important; box-shadow:0 10px 28px rgba(53,214,197,.2) !important; } body.route-qa-RETIRED #app .min-h-screen { background:linear-gradient(180deg,rgba(22,91,99,.12),transparent 260px),#090c10 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry, body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-card { border-color:#28373a !important; border-radius:8px !important; background:#10161a !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types { display:block !important; min-height:0 !important; padding:18px 20px !important; background:#10161a !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type-row { display:flex !important; align-items:center !important; flex-wrap:wrap !important; gap:8px !important; width:100% !important; margin-top:12px !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-type { flex:0 0 auto !important; width:auto !important; min-width:88px !important; padding:0 16px !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry { position:relative; padding-top:0 !important; overflow:hidden; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry > div:first-child { padding:18px 20px 14px !important; border-bottom:1px solid #27343a !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry textarea, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry taro-textarea-core { min-height:205px !important; padding:18px !important; border:1px solid #202d33 !important; border-radius:5px !important; background:#090e12 !important; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-card { position:relative; overflow:hidden; } body.route-qa-RETIRED #app .desktop-qa-RETIRED-answer-card::before { content:'AI INSIGHT'; display:block; padding:12px 18px; border-bottom:1px solid #27343a; color:#50dfcf; font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; } } @media (max-width:980px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-types, body.route-qa-RETIRED #app .desktop-qa-RETIRED-question-entry { border-radius:7px !important; } } /* Grading form refinement: use the whole workspace width for each decision. */ @media (min-width:981px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel::before, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel::before { display:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { padding-left:22px !important; } /* The native missing-icon placeholder is intentionally removed. */ body.route-grade-RETIRED #app .desktop-grade-RETIRED-question-panel > div:first-child > div:empty, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child > div:empty { display:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar { display:block !important; min-height:0 !important; padding:22px 24px 24px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar::before { display:block !important; margin:0 0 16px !important; font-size:20px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-options { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:12px !important; width:100% !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-typebar taro-button-core { min-height:58px !important; height:58px !important; padding:0 22px !important; border:1px solid #2b3b40 !important; border-radius:6px !important; color:#c8d3d6 !important; font-size:19px !important; font-weight:700 !important; letter-spacing:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option.capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option.is-active, body.route-grade-RETIRED #app .desktop-grade-RETIRED-type-option[aria-pressed="true"] { border-color:#35d6c5 !important; background:#123d3a !important; color:#8ff3e6 !important; box-shadow:inset 0 0 0 1px rgba(53,214,197,.18) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child { position:static !important; padding-top:94px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child.desktop-grade-RETIRED-input-modebar { position:absolute !important; top:144px !important; right:0 !important; left:0 !important; display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:0 !important; width:auto !important; min-width:0 !important; max-width:none !important; height:58px !important; min-height:58px !important; margin:0 !important; padding:0 !important; border:1px solid #2b3b40 !important; border-radius:0 !important; background:#0b1014 !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-mode, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar taro-button-core { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-width:0 !important; max-width:none !important; height:46px !important; min-height:46px !important; border:0 !important; border-right:1px solid #2b3b40 !important; border-radius:0 !important; font-size:17px !important; font-weight:700 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar > *, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar > * > * { width:100% !important; min-width:0 !important; height:100% !important; min-height:0 !important; border-radius:0 !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar > :last-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar > :last-child > * { border-right:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-submit { grid-column:1 / -1 !important; justify-self:stretch !important; width:100% !important; min-width:0 !important; height:48px !important; min-height:48px !important; margin:8px 0 0 !important; border-radius:6px !important; font-size:17px !important; letter-spacing:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-history-shortcut { grid-column:1 / -1 !important; width:100% !important; min-height:98px !important; margin:0 !important; padding:20px 24px !important; border:1px solid #2b3b40 !important; border-radius:7px !important; background:#10161a !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-history-shortcut > :first-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-history-shortcut > :empty { display:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-history-shortcut::before { width:3px !important; height:50px !important; margin-right:16px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-history-shortcut :is(strong,h2,h3) { font-size:20px !important; line-height:1.35 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-history-shortcut :is(p,span) { margin-top:4px !important; font-size:14px !important; } } /* Atlas layout owns the puzzle hierarchy instead of decorating the mobile layout. */ @media (min-width:981px) { body.route-yibentong-puzzle #app .desktop-puzzle-redesign.desktop-puzzle-redesign { display:block !important; min-height:100vh !important; padding:0 !important; background:#080b0f !important; } body.route-yibentong-puzzle #app .desktop-puzzle-atlas { width:min(1360px,calc(100% - 96px)); margin:0 auto; padding:42px 0 96px; } body.route-yibentong-puzzle #app .desktop-puzzle-atlas-hero { display:flex !important; align-items:flex-end !important; min-height:252px !important; margin:0 !important; padding:40px 44px !important; overflow:hidden !important; border:1px solid #2a4744 !important; border-radius:8px !important; background:linear-gradient(90deg,rgba(6,14,19,.97) 0%,rgba(8,17,21,.91) 48%,rgba(8,17,21,.35) 100%),url('/static/images/course-material-covers/yibentong-cover-v4.png') right center/390px auto no-repeat,#0d1519 !important; box-shadow:0 30px 72px rgba(0,0,0,.34),inset 0 1px rgba(234,255,251,.08) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-atlas-hero::before { content:'GBC / KNOWLEDGE ATLAS'; position:absolute; top:31px; left:44px; color:#62e4d0; font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.16em; } body.route-yibentong-puzzle #app .desktop-puzzle-atlas-hero::after { content:'224 NODES'; display:block !important; right:42px !important; bottom:29px !important; color:rgba(232,255,250,.34) !important; font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace !important; letter-spacing:.16em !important; } body.route-yibentong-puzzle #app .desktop-puzzle-atlas-hero > .flex.items-center { width:min(620px,62%); gap:0 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-atlas-hero svg { display:none !important; } body.route-yibentong-puzzle #app .desktop-puzzle-atlas-hero .flex.flex-col.flex-1 { gap:9px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-atlas-hero .flex.flex-col.flex-1 > .flex:first-child > span:first-child { color:#f3fbf9 !important; font-size:38px !important; font-weight:780 !important; line-height:1.04 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-atlas-hero .flex.flex-col.flex-1 span { color:#a3b6b6 !important; font-size:14px !important; line-height:1.6 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-control-deck { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(370px,1fr); gap:12px; margin:16px 0 20px; } body.route-yibentong-puzzle #app .desktop-puzzle-control-deck > * { min-width:0; padding:0 !important; } body.route-yibentong-puzzle #app .desktop-puzzle-control-deck > * > div { height:100%; padding:5px !important; border:1px solid #27353c !important; border-radius:7px !important; background:#10171d !important; } body.route-yibentong-puzzle #app .desktop-puzzle-control-deck button { min-height:42px !important; padding:8px 14px !important; border-radius:5px !important; font-size:13px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-stage { padding:22px; border:1px solid #26343b; border-radius:8px; background:linear-gradient(rgba(113,171,175,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(113,171,175,.045) 1px,transparent 1px),#0b1116; background-size:32px 32px; } body.route-yibentong-puzzle #app .desktop-puzzle-stage > .desktop-puzzle-content { gap:22px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-stage .desktop-puzzle-volume { padding:24px !important; border:1px solid #293840 !important; border-radius:7px !important; background:rgba(14,21,27,.93) !important; } body.route-yibentong-puzzle #app .desktop-puzzle-stage .desktop-puzzle-volume-head { min-height:54px !important; margin:0 0 20px !important; padding:0 0 14px 14px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-stage .desktop-puzzle-volume-head span:first-child { font-size:20px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-stage .desktop-puzzle-board { padding:20px !important; border-radius:6px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-stage .desktop-puzzle-topic { margin-bottom:28px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-stage .desktop-puzzle-topic > .flex.items-center > span:nth-child(2) { font-size:16px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-stage .desktop-puzzle-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:16px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-stage .desktop-puzzle-tile { min-height:154px !important; padding:40px 18px 17px !important; border-radius:6px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-stage .desktop-puzzle-tile > span:first-child { top:13px !important; left:14px !important; font-size:10px !important; } body.route-yibentong-puzzle #app .desktop-puzzle-stage .desktop-puzzle-tile > span:not(:first-child) { font-size:15px !important; font-weight:680 !important; line-height:1.48 !important; } } @media (min-width:981px) and (max-width:1240px) { body.route-yibentong-puzzle #app .desktop-puzzle-stage .desktop-puzzle-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; } } /* Final grading answer-panel balance: a full-width, three-way mode rail. */ @media (min-width:981px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:first-child { padding-right:22px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child { display:flex !important; flex-direction:column !important; gap:18px !important; min-height:0 !important; padding:18px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:first-child.desktop-grade-RETIRED-input-modebar { position:static !important; display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; flex:0 0 58px !important; width:calc(100% + 36px) !important; min-width:0 !important; height:58px !important; min-height:58px !important; margin:-18px -18px 0 !important; padding:0 !important; gap:0 !important; border:0 !important; border-bottom:1px solid #2a353c !important; border-radius:0 !important; background:#0b1014 !important; box-sizing:border-box !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-mode, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar button, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar taro-button-core { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-width:0 !important; height:57px !important; min-height:57px !important; padding:0 12px !important; border:0 !important; border-right:1px solid #2a353c !important; border-radius:0 !important; background:transparent !important; color:#a7b3b7 !important; font-size:15px !important; font-weight:650 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-mode.capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-mode.is-active, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-mode[aria-pressed="true"] { background:#1d514b !important; color:#ecfffc !important; box-shadow:inset 0 -2px #52dccc !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar > :last-child, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar > :last-child > * { border-right:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:last-child { display:flex !important; flex:1 1 auto !important; min-height:238px !important; margin:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel > div:last-child > div:last-child > * { flex:1 1 auto; min-height:238px !important; } } /* Today follows the same middle-rail layout as other desktop workspaces. */ /* Course detail headers use the page canvas rather than a hero card. */ /* Native answer-mode components contain an extra inner element on some Taro builds. Flatten it as well so the rail remains a true three-way split. */ @media (min-width:981px) { body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar > .desktop-grade-RETIRED-input-mode, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar > .desktop-grade-RETIRED-input-mode > * { border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar > .desktop-grade-RETIRED-input-mode.capsule-selected, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar > .desktop-grade-RETIRED-input-mode.is-active, body.route-grade-RETIRED #app .desktop-grade-RETIRED-answer-panel .desktop-grade-RETIRED-input-modebar > .desktop-grade-RETIRED-input-mode[aria-pressed="true"] { background:#1d514b !important; box-shadow:inset 0 -2px #52dccc !important; } } /* A previous custom desktop view can finish an async render after the hash has already moved to a native page. Native Q&A and grading must never inherit that view's hidden app root. */ body.desktop-custom-view.route-qa-RETIRED #app, body.desktop-custom-view.route-grade-RETIRED #app, body.desktop-custom-view.route-qa-RETIRED #container, body.desktop-custom-view.route-grade-RETIRED #container { visibility:visible !important; pointer-events:auto !important; } /* True-question detail: reading column first. Top mobile header is reduced to a slim back/delete rail; type/school/year move into the question card. */ @media (min-width:981px) { body.desktop-dark.route-exam-detail #app .min-h-screen, body.desktop-dark.route-exam-detail #app .min-h-screen.desktop-exam-detail-page { min-height:100vh !important; padding:20px 48px 80px !important; background:#0a0e12 !important; box-sizing:border-box !important; } body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4 { width:min(920px,100%) !important; max-width:none !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; box-sizing:border-box !important; } /* Collapse the fat native top bar into an icon-only rail. */ body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4:first-child, body.desktop-dark.route-exam-detail #app .desktop-exam-detail-toolbar { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; min-height:0 !important; margin:0 0 14px !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; } body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4:first-child > div:not(:has(button)), body.desktop-dark.route-exam-detail #app .desktop-exam-detail-toolbar > div:not(:has(button)) { display:none !important; } body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4:first-child span, body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4:first-child p, body.desktop-dark.route-exam-detail #app .desktop-exam-detail-toolbar span, body.desktop-dark.route-exam-detail #app .desktop-exam-detail-toolbar p { display:none !important; } body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4:first-child button, body.desktop-dark.route-exam-detail #app .desktop-exam-detail-toolbar button { width:36px !important; height:36px !important; min-height:36px !important; margin:0 !important; border:1px solid #33414a !important; border-radius:6px !important; background:#11181e !important; color:#b7c6c9 !important; } body.desktop-dark.route-exam-detail #app .desktop-exam-detail-toolbar-copy { display:none !important; } body.desktop-dark.route-exam-detail #app .desktop-exam-detail-meta { display:block !important; margin:0 0 10px !important; color:#4bd2c2 !important; font-size:11px !important; font-weight:750 !important; letter-spacing:.04em !important; line-height:1.4 !important; } body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col { gap:12px !important; } /* The old topic ribbon is redundant once meta sits in the question card. */ body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:first-child { display:none !important; } body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div, body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > section { overflow:hidden; border:1px solid #29363e !important; border-radius:8px !important; background:#11171d !important; box-shadow:none !important; } /* Question plus self-assessment form the primary working surface. */ body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(2) { border-color:#35504f !important; background:#11191e !important; } body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(2) > div:first-child { padding:24px 26px 20px !important; border-bottom:1px solid #2b3b41 !important; } body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(2) p, body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(2) span { line-height:1.7 !important; } body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(2) > div:last-child { display:grid !important; grid-template-columns:96px repeat(3,minmax(0,1fr)) !important; align-items:center !important; gap:10px !important; padding:15px 26px 18px !important; } body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(2) > div:last-child button { min-height:40px !important; border:1px solid #33444b !important; border-radius:6px !important; background:#151f25 !important; color:#c3d2d4 !important; font-weight:700 !important; } body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(2) > div:last-child button:hover { border-color:#4bd2c2 !important; background:#173330 !important; color:#effffc !important; } /* Reference answer is an action row, not a competing hero card. */ body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(3) { padding:18px 22px !important; border-color:#304644 !important; background:#10181d !important; } body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(3) button { min-height:38px !important; padding:0 15px !important; border:1px solid #45cdbc !important; border-radius:6px !important; background:#39cdbd !important; color:#071d1c !important; font-weight:800 !important; box-shadow:none !important; } body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(n+4) { border-color:#29353d !important; background:#0f151a !important; } body.desktop-dark.route-exam-detail #app textarea { min-height:140px !important; border:1px solid #34434c !important; border-radius:6px !important; background:#0b1015 !important; color:#e4eff0 !important; box-shadow:none !important; } body.desktop-dark.route-exam-detail #app textarea:focus { border-color:#4bdfcf !important; box-shadow:0 0 0 3px rgba(53,214,197,.12) !important; } body.desktop-dark.route-exam-detail #app button[style*="linear-gradient"], body.desktop-dark.route-exam-detail #app button[class*="bg-gradient"] { border-radius:6px !important; } body.desktop-dark.route-exam-detail #desktop-contextbar { background:#0b1014 !important; } body.desktop-dark.route-exam-detail #desktop-contextbar .people-rank-card { border-radius:8px !important; background:#10161b !important; } } @media (max-width:980px) { body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:first-child { display:none !important; } body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(2) > div:last-child { display:grid !important; grid-template-columns:1fr 1fr 1fr !important; gap:8px !important; } body.desktop-dark.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(2) > div:last-child > :first-child { grid-column:1 / -1; } } /* Settings: turn the native mobile stack into a clear desktop preference hub. The selectors preserve the original setting actions and only reshape their presentation on the desktop shell. */ @media (min-width:981px) { body.desktop-dark.route-settings #app .min-h-screen { min-height:100vh !important; padding:38px 48px 84px !important; background:#0a0e12 !important; box-sizing:border-box !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col { display:grid !important; grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr) !important; width:min(1120px,100%) !important; max-width:none !important; margin:0 auto !important; padding:0 !important; gap:18px !important; align-items:start !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div { min-width:0 !important; overflow:hidden !important; border:1px solid #2b383f !important; border-radius:8px !important; background:#11171d !important; box-shadow:none !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(1) { grid-row:span 2; border-color:#34504e !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(2) { background:#10171c !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(3), body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(4) { background:#10161b !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(5), body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(6) { grid-column:1 / -1; min-height:54px !important; padding:0 20px !important; border-radius:7px !important; background:#10151a !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(6) { border-color:#4a3035 !important; background:#151115 !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div > div:first-child { min-height:44px !important; padding-top:14px !important; padding-bottom:9px !important; } body.desktop-dark.route-settings #app .min-h-screen :is(span,p) { letter-spacing:0 !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div > div:first-child span { font-size:12px !important; font-weight:750 !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div [class*="justify-between"] { min-height:58px !important; border-color:#27353d !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div [class*="justify-between"]:hover { background:#151f25 !important; } body.desktop-dark.route-settings #app .min-h-screen button { border-radius:6px !important; } body.desktop-dark.route-settings #app .min-h-screen input { min-height:40px !important; color:#edf4f4 !important; } body.desktop-dark.route-settings #app .fixed.inset-0 { z-index:120 !important; background:rgba(4,7,10,.68) !important; backdrop-filter:blur(5px) !important; } body.desktop-dark.route-settings #app .fixed.inset-0 > div { width:min(440px,calc(100vw - 48px)) !important; padding:24px !important; border:1px solid #36444a !important; border-radius:10px !important; background:#12191f !important; box-shadow:0 24px 70px rgba(0,0,0,.42) !important; } body.desktop-dark.route-settings #app .fixed.inset-0 > div > div { border-radius:6px !important; background:#0c1217 !important; border-color:#33434b !important; } body.desktop-dark.route-settings #app .fixed.inset-0 button { min-height:40px !important; } } @media (max-width:980px) { body.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col { padding-bottom:32px !important; } } /* Personal profile: the native mobile form becomes a focused desktop setup screen. The original fields and save handler remain untouched. */ @media (min-width:981px) { body.desktop-dark.route-personal-profile #app .min-h-screen { min-height:100vh !important; padding:40px 50px 92px !important; background:#080c10 !important; box-sizing:border-box !important; } body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; width:min(1160px,100%) !important; margin:0 auto !important; padding:0 !important; gap:16px !important; align-items:start !important; } body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col > div { min-width:0 !important; padding:20px !important; border:1px solid #26343c !important; border-radius:10px !important; background:#10171d !important; box-shadow:none !important; } body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col > div:nth-child(1), body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col > div:nth-child(2), body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col > div:nth-child(5), body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col > button { grid-column:1 / -1 !important; } body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col > div:nth-child(1) { padding:18px 20px !important; border-color:#31524f !important; background:#0f191d !important; } body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col > div:nth-child(2) > div:last-child { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:14px !important; } body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col > div:nth-child(2) > div:last-child > div { min-width:0 !important; } body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col [class*="i-mdi"] { color:#74d7ce !important; } body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col > div > div:first-child span { color:#dcebea !important; font-size:14px !important; font-weight:750 !important; } body.desktop-dark.route-personal-profile #app .min-h-screen label, body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col > div span[style*="font-size:12px"] { color:#9fadaa !important; } body.desktop-dark.route-personal-profile #app .min-h-screen input, body.desktop-dark.route-personal-profile #app .min-h-screen [style*="rgba(255,255,255,0.78)"] { min-height:46px !important; border-color:#28353e !important; border-radius:6px !important; background:#0b1116 !important; color:#e6f0ef !important; box-shadow:none !important; } body.desktop-dark.route-personal-profile #app .min-h-screen input::placeholder { color:#6f7d82 !important; } body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col > div:nth-child(1) [style*="border-radius:20px"] { min-height:38px !important; padding:0 17px !important; border:1px solid #2a3a42 !important; border-radius:6px !important; background:#111a20 !important; box-shadow:none !important; cursor:pointer !important; } body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col > div:nth-child(1) [style*="linear-gradient"] { border-color:#3ca79d !important; background:#173a37 !important; } body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col > div:nth-child(3) [style*="border-radius:20px"], body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col > div:nth-child(4) [style*="border-radius:16px"] { border-radius:6px !important; box-shadow:none !important; } body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col > button { min-height:52px !important; margin-top:4px !important; border:1px solid #47c8ba !important; border-radius:7px !important; background:#39b9ad !important; box-shadow:none !important; } body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col > button:hover { background:#50cdbf !important; } body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col > button span, body.desktop-dark.route-personal-profile #app .min-h-screen > .px-4.pt-2.flex.flex-col > button [class*="i-mdi"] { color:#08201e !important; } body.desktop-dark.route-personal-profile #app .min-h-screen input:focus-visible, body.desktop-dark.route-personal-profile #app .min-h-screen [role="button"]:focus-visible, body.desktop-dark.route-personal-profile #app .min-h-screen button:focus-visible { outline:2px solid #53d4c6 !important; outline-offset:2px !important; } } /* Settings desktop refinement: preserve the original native controls while giving account, preferences and destructive actions distinct hierarchy. */ @media (min-width:981px) { body.desktop-dark.route-settings #app .min-h-screen { padding:44px 52px 96px !important; background:#080c10 !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col { grid-template-columns:minmax(0,1.28fr) minmax(332px,.72fr) !important; width:min(1180px,100%) !important; gap:16px !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div { border:1px solid #24323a !important; border-radius:10px !important; background:#10171d !important; } /* Account is the primary management surface. */ body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(1) { border-color:#2d4b4b !important; background:#10191e !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(1) > div:first-child { min-height:62px !important; padding:18px 20px 13px !important; border-bottom:1px solid #203038 !important; background:#0d151a !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div > div:first-child { min-height:54px !important; padding:16px 18px 10px !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div > div:first-child span { color:#d7e6e5 !important; font-size:13px !important; font-weight:750 !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div [class*="justify-between"] { min-height:64px !important; padding-left:18px !important; padding-right:18px !important; border-color:#213039 !important; transition:background-color .16s ease !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div [class*="justify-between"]:hover { background:#152129 !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div [class*="justify-between"] > div:first-child { gap:12px !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div [class*="justify-between"] svg, body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div [class*="justify-between"] [class*="i-mdi"] { color:#75d7cf !important; } /* Compact companion panels on the right. */ body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(2), body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(3) { background:#0e151a !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(2) [class*="justify-between"], body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(3) [class*="justify-between"] { min-height:58px !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(3) button { min-height:38px !important; border:1px solid #283840 !important; background:#10171d !important; color:#abbdbc !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(3) button:hover, body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(3) button[class*="bg-"] { border-color:#377f78 !important; background:#17312f !important; color:#bff5ee !important; } /* Keep sign-out accessible but visually quieter than account settings. */ body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(5) { margin-top:8px !important; border-color:#2a3840 !important; background:#0d1419 !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(5) [class*="justify-between"], body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(6) [class*="justify-between"] { min-height:58px !important; padding-left:20px !important; padding-right:20px !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(6) { border-color:#513239 !important; background:#171114 !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(6) [class*="justify-between"]:hover { background:#211419 !important; } body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(6) svg, body.desktop-dark.route-settings #app .min-h-screen > .px-4.pt-4.flex.flex-col > div:nth-child(6) [class*="i-mdi"] { color:#e69b9b !important; } body.desktop-dark.route-settings #app .min-h-screen button:focus-visible, body.desktop-dark.route-settings #app .min-h-screen input:focus-visible { outline:2px solid #4ed1c3 !important; outline-offset:2px !important; } } @media (min-width:981px) { body.route-qa-RETIRED #desktop-qa-workspace-RETIRED,body.route-grade-RETIRED #desktop-grade-workspace-redesign-RETIRED { display:none !important; visibility:hidden !important; pointer-events:none !important; } body.desktop-nav-collapsed.route-qa-RETIRED #desktop-qa-workspace-RETIRED,body.desktop-nav-collapsed.route-grade-RETIRED #desktop-grade-workspace-redesign-RETIRED { left:0!important; } body.context-collapsed.route-qa-RETIRED #desktop-qa-workspace-RETIRED,body.context-collapsed.route-grade-RETIRED #desktop-grade-workspace-redesign-RETIRED { right:0!important; } } /* Ranking data may refresh independently; never replay its entrance motion. */ body.route-qa-RETIRED #desktop-contextbar .people-feature, body.route-qa-RETIRED #desktop-contextbar .people-feature-stats span, body.route-qa-RETIRED #desktop-contextbar .people-rank-card, body.route-qa-RETIRED #desktop-contextbar .people-row, body.route-grade-RETIRED #desktop-contextbar .people-feature, body.route-grade-RETIRED #desktop-contextbar .people-feature-stats span, body.route-grade-RETIRED #desktop-contextbar .people-rank-card, body.route-grade-RETIRED #desktop-contextbar .people-row { animation:none!important; opacity:1!important; transform:none!important; } @media (min-width:981px) { #desktop-qa-workspace-RETIRED,#desktop-grade-workspace-redesign-RETIRED { scroll-behavior:smooth; } #desktop-qa-workspace-RETIRED button,#desktop-grade-workspace-redesign-RETIRED button,#desktop-qa-workspace-RETIRED a,#desktop-grade-workspace-redesign-RETIRED a { transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease; } .qa-mode-RETIRED button:hover,.qa-types-RETIRED button:hover,.grade-typebar-RETIRED button:hover { border-color:#49cfc1; color:#ddfffa; transform:translateY(-1px); } .qa-mode-RETIRED button:active,.qa-types-RETIRED button:active,.grade-typebar-RETIRED button:active,.grade-answer-modes-RETIRED button:active { transform:translateY(0); } .grade-answer-modes-RETIRED button:hover { background:#142b2a; color:#dcfffa; } .qa-form-RETIRED button:hover,.grade-submit-RETIRED:hover { background:#57dfd1; box-shadow:0 8px 22px rgba(53,214,197,.22); transform:translateY(-1px); } .qa-form-RETIRED button:active,.grade-submit-RETIRED:active { transform:translateY(0); box-shadow:none; } #desktop-qa-workspace-RETIRED textarea:focus,#desktop-grade-workspace-redesign-RETIRED textarea:focus { border-color:#42cfc1; outline:2px solid rgba(53,214,197,.14); outline-offset:0; } .ai-workspace-head-RETIRED a:hover,.grade-history-RETIRED:hover { border-color:#3eaaa0; background:#121f21; color:#edfffc; } } .ai-result { display:block; white-space:pre-wrap; margin-top:16px; padding:14px 16px; border-left:2px solid #35d6c5; background:#0c1518; color:#d8e6e5; font-size:14px; line-height:1.7; } .ai-result:empty { display:none; } .grade-result { grid-column:1 / -1; margin:0; } @media (min-width:981px) { .qa-exam-fields { display:grid; grid-template-columns:1fr 120px; gap:10px; margin:0 0 14px; } .qa-exam-fields input,.qa-iteration textarea { width:100%; min-height:40px; padding:10px 12px; border:1px solid #26343b; border-radius:5px; background:#091015; color:#e9f0f1; box-sizing:border-box; font:14px/1.5 inherit; } .qa-iteration textarea { min-height:92px; margin:10px 0; } .qa-thinking-trigger { margin-top:12px!important; margin-left:0!important; width:auto!important; min-height:36px!important; padding:0 12px; background:#173d3a!important; color:#dffefa!important; } .qa-thinking,.qa-iteration { margin-top:14px; padding:14px; border:1px solid #2b343b; border-radius:5px; background:#0c1217; } .qa-thinking b,.qa-iteration b { display:block; color:#dffefa; font-size:13px; } .qa-thinking output { display:block; white-space:pre-wrap; margin-top:10px; color:#c6d2d2; font-size:14px; line-height:1.7; } .qa-iteration button { width:176px!important; margin-left:auto!important; } } /* Getting-started guide. */ .guide-welcome-modal { position:fixed; inset:0; z-index:20000; display:flex; align-items:center; justify-content:center; padding:22px; box-sizing:border-box; } .guide-welcome-backdrop { position:absolute; inset:0; background:rgba(3,8,12,.74); backdrop-filter:blur(7px); } .guide-welcome-modal section { position:relative; width:min(430px,100%); padding:34px; border:1px solid #5a7775; border-radius:13px; background:#122122; box-shadow:12px 12px 0 rgba(238,132,148,.75),0 26px 80px rgba(0,0,0,.45); color:#eaf3f2; } .guide-welcome-modal section > i { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:#eec05c; color:#22312e; font-style:normal; } .guide-welcome-modal section > button { position:absolute; top:15px; right:16px; border:0; background:transparent; color:#a5b8b7; font-size:24px; cursor:pointer; } .guide-welcome-modal section > span { display:block; margin-top:18px; color:#72e2d4; font-size:10px; font-weight:800; letter-spacing:.12em; } .guide-welcome-modal h2 { margin:10px 0 10px; color:#f1f6f5; font-size:25px; line-height:1.3; } .guide-welcome-modal p { margin:0; color:#afc0bf; font-size:13px; line-height:1.7; } .guide-welcome-modal section > div { display:flex; align-items:center; gap:12px; margin-top:25px; } .guide-welcome-modal a,.guide-welcome-modal [data-guide-welcome-later] { min-height:39px; padding:0 13px; border-radius:5px; font:700 12px/39px inherit; text-decoration:none; cursor:pointer; } .guide-welcome-modal a { background:#63d9cb; color:#102725; } .guide-welcome-modal [data-guide-welcome-later] { border:0; background:transparent; color:#aebfbd; } /* Keep the assistant rail independent from each workspace's visual treatment. */ @media (min-width:981px) { body.desktop-dark #desktop-contextbar { background:#0b0b0d !important; border-left-color:#26272d !important; color:#8d8995 !important; } body.desktop-dark #desktop-contextbar :is(.assistant-head,.context-tabs,.context-chat-form) { background:#0b0b0d !important; border-color:#27272a !important; } body.desktop-dark #desktop-contextbar .agent-context-chip { background:#0d0d10 !important; border-color:#27272a !important; color:#8d8995 !important; } body.desktop-dark #desktop-contextbar .people-panel { background:transparent !important; border-top:0 !important; } body.desktop-dark #desktop-contextbar .people-feature { min-height:126px !important; margin:0 -22px !important; padding:24px 22px 18px !important; border:0 !important; border-bottom:1px solid #27272a !important; border-radius:0 !important; background:transparent !important; } body.desktop-dark #desktop-contextbar .people-feature-title { color:#fafafa !important; font-size:18px !important; font-weight:800 !important; } body.desktop-dark #desktop-contextbar .people-feature-stats { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:6px !important; margin-top:34px !important; } body.desktop-dark #desktop-contextbar .people-feature-stats span { min-width:0 !important; min-height:0 !important; padding:10px 4px !important; border:1px solid rgba(53,214,197,.36) !important; border-radius:5px !important; background:#101715 !important; color:#8b9097 !important; overflow:hidden !important; } body.desktop-dark #desktop-contextbar .people-feature-stats b { color:#35d6c5 !important; font-size:13px !important; font-weight:800 !important; overflow-wrap:anywhere !important; } body.desktop-dark #desktop-contextbar .people-activity-legend { color:#7d8684 !important; } body.desktop-dark #desktop-contextbar .people-rank-card { margin:18px 0 0 !important; padding:20px 14px 8px !important; border:1px solid #27272a !important; border-radius:8px !important; background:#111114 !important; box-shadow:none !important; overflow:hidden !important; } body.desktop-dark #desktop-contextbar .people-head { display:grid !important; grid-template-columns:minmax(0,1fr) auto 30px !important; gap:10px !important; padding:0 0 14px !important; } body.desktop-dark #desktop-contextbar .people-head strong, body.desktop-dark #desktop-contextbar .people-row div strong { color:#fafafa !important; } body.desktop-dark #desktop-contextbar .people-head span, body.desktop-dark #desktop-contextbar .people-score-note, body.desktop-dark #desktop-contextbar .people-row div small, body.desktop-dark #desktop-contextbar .people-row > span small { color:#717179 !important; } body.desktop-dark #desktop-contextbar .people-row { grid-template-columns:24px minmax(0,1fr) 68px 54px !important; gap:8px !important; min-height:60px !important; padding:11px 0 !important; border-bottom:0 !important; background:transparent !important; } } @media (max-width:760px) { #desktop-guide .guide-shell { width:calc(100% - 36px); padding:26px 0 36px; } #desktop-guide .guide-hero { padding-bottom:42px; } #desktop-guide .guide-hero-layout { display:block; } #desktop-guide .guide-mascot { display:none; } #desktop-guide .guide-back { margin-bottom:42px; } #desktop-guide .guide-hero h1 { font-size:34px; } #desktop-guide .guide-hero p { font-size:14px; } #desktop-guide .guide-setup,#desktop-guide .guide-loop { display:block; } #desktop-guide .guide-inline-link { display:inline-block; margin-top:20px; } #desktop-guide .guide-flow-grid { grid-template-columns:1fr; } #desktop-guide .guide-flow-card { min-height:252px; } #desktop-guide .guide-start-kit,#desktop-guide .guide-checklist { display:block; } #desktop-guide .guide-scenario-grid { grid-template-columns:1fr 1fr; margin-top:22px; } #desktop-guide .guide-checklist-items { margin-top:22px; } #desktop-guide .guide-section-head { display:block; } #desktop-guide .guide-section-head > p { margin-top:12px; } #desktop-guide .guide-detail-grid { grid-template-columns:1fr; } #desktop-guide .guide-detail-grid > article { min-height:0; padding:22px 18px; } #desktop-guide .guide-routine { padding:28px 0; } #desktop-guide .guide-routine-steps { grid-template-columns:1fr 1fr; gap:22px 16px; } #desktop-guide .guide-routine-steps article:nth-child(2)::after { display:none; } #desktop-guide .guide-tips { display:block; padding-top:42px; } #desktop-guide .guide-tips > div { margin-top:20px; } #desktop-guide .guide-faq { padding-top:42px; } #desktop-guide .guide-voice { display:block; margin-top:40px; padding:25px 20px; } #desktop-guide .guide-voice-form { margin-top:22px; } #desktop-guide .guide-loop { padding:27px 22px; } #desktop-guide .guide-loop-actions { flex-wrap:wrap; margin-top:22px; } #desktop-home .home-actions .home-guide-link { display:none; } } /* Compact doorway from the official learning center into the classroom. */ /* Study room: a tangible classroom rather than an abstract dashboard grid. */ /* Expanded classroom plan: narrower desks, generous aisles, cafe, windows and plants. */ /* Shared two-person desks: one tabletop, two independently selectable chairs. */ /* A complete study-room edge: daylight windows and a quiet wall-mounted AC. */ /* Room switcher and wider shared desks. */ /* Occupied seat marker: a small top-down head instead of an initial. */ /* Occupied desks carry a compact study still-life: a learner, opened book, and note. */ /* The podium is a separate administrator seat, visually distinct from student desks. */ /* Quiet companionship and a small completion ritual keep the room alive without adding chat noise. */ /* Floating study status stays above the room and can be dragged by its header. */ /* School and floor selection, with a richer cafe scene and restored desk timber. */ /* Confirm a desk before the seat is occupied. */ /* Keep each scene spatially distinct and make paired desks genuinely wide. */ /* Each place has a materially different furniture layout. */ /* Off-campus room: a warm late-night study lounge instead of a grey cubicle grid. */ /* Top-down coffee shop floor plan, inspired by real cafe circulation and furniture zones. */ /* Cafe furniture uses small two-tops, a wall banquette, and a clear route to the bar — never a classroom grid. */ /* Final cafe plan: one service counter, open circulation, compact tables and a single wall banquette. */ /* The official-center doorway makes entering the room feel intentional. */ /* More compact, more intentional study-room entrance. */ /* Coffee barista station, drawn from above at the espresso counter. */ /* Finishing details for the cafe: menu wall, counter stools, and a deliberate entry path. */ /* Three-floor off-campus study lounge: sunlight, flexible commons, then quiet booths. */ /* Ground every room with a distinct, subdued floor material. */ /* Cafe reset: one clear counter, one menu board, a window wall, and a regular table rhythm. */ /* The off-campus layout reserves a clear foreground band for the administrator. */ /* Cafe scene: entry garden, sunny window seats, a working bar and pastry counter. */ /* Cafe seating is deliberately zoned instead of arranged as a uniform classroom grid. */ /* Urban study space: the off-campus room and coffee room are grouped under one destination. */ /* Keep the coffee room compact: every functional zone owns a separate strip of the plan. */ /* Light mode: a calm desktop workspace, with a distinct utility rail and paper-white canvas. */ @media (min-width:0px) { body.desktop-light { background:#ffffff; color:#283238; --shell-text:#283238; --shell-muted:#718087; --shell-line:#dce3e4; --shell-surface:#ffffff; --shell-subtle:#f7f9f9; --primary:174 62% 34%; --accent:174 62% 34%; --gradient-primary:#ffffff; --gradient-secondary:#ffffff; --gradient-subtle:#f7f9f9; } body.desktop-light #app, body.desktop-light page, body.desktop-light #app .taro_page, body.desktop-light #app .taro_page_show, body.desktop-light #app taro-page-core, body.desktop-light #app .min-h-screen { background:#ffffff !important; color:#283238 !important; } body.desktop-light #desktop-nav { background:#e7f2f3 !important; border-color:#cadbdd !important; color:#53666d; backdrop-filter:none; -webkit-backdrop-filter:none; } body.desktop-light #desktop-nav .desktop-nav-brand { color:#243238; } body.desktop-light #desktop-nav .desktop-nav-brand span { color:#71848a; } body.desktop-light #desktop-nav .desktop-nav-item { color:#53666d; font-weight:600 !important; } body.desktop-light #desktop-nav .desktop-nav-item:hover { background:#dcecee; color:#243238; } body.desktop-light #desktop-nav .desktop-nav-item.active { background:#d5e7e9; color:#1f3438; font-weight:700 !important; } body.desktop-light #desktop-nav .desktop-nav-item.active::before { background:#208d83; } body.desktop-light #desktop-nav .desktop-nav-badge { background:#c8e6e1 !important; color:#176f67 !important; } body.desktop-light #desktop-nav.collapsed { background:transparent !important; } body.desktop-light #desktop-nav.collapsed .desktop-nav-toggle { background:#e7f2f3; border-color:#cadbdd; color:#527076; } body.desktop-light .desktop-nav-footer { background:#e7f2f3 !important; border-color:#cadbdd !important; } body.desktop-light .desktop-nav-user { color:#31454b; } body.desktop-light .desktop-nav-user span, body.desktop-light .desktop-home-footer { color:#71848a; } body.desktop-light #desktop-nav .desktop-nav-footer-actions, body.desktop-light #desktop-nav .desktop-home-footer, body.desktop-light .desktop-nav-language { border-color:#cadbdd; } body.desktop-light #theme-toggle, body.desktop-light #desktop-nav .customer-support-link { border-color:#c6d7d9; background:rgba(255,255,255,.55); color:#53666d; } body.desktop-light #theme-toggle:hover, body.desktop-light #desktop-nav .customer-support-link:hover { background:#ffffff; color:#1f6560; } body.desktop-light #desktop-nav .pro-upgrade-link { background:#d9efec; border-color:#a8d5d0; color:#226b64; } body.desktop-light #desktop-contextbar { background:#f8fbfb !important; border-color:#dce3e4 !important; color:#3d4a50; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } body.desktop-light #desktop-contextbar .assistant-head, body.desktop-light #desktop-contextbar .context-tabs, body.desktop-light #desktop-contextbar .context-section, body.desktop-light #desktop-contextbar .context-item, body.desktop-light #desktop-contextbar .rank-row, body.desktop-light #desktop-contextbar .context-chat-form { border-color:#dce3e4; } body.desktop-light #desktop-contextbar textarea, body.desktop-light #desktop-contextbar .agent-context-chip { background:#ffffff; border-color:#d5dfe0; } body.desktop-light #app .bg-background { background:#ffffff !important; } body.desktop-light:not(.route-qa):not(.route-grade) #app .bg-card, body.desktop-light:not(.route-qa):not(.route-grade) #app .bg-white, body.desktop-light:not(.route-qa):not(.route-grade) #app .glass-card, body.desktop-light:not(.route-qa):not(.route-grade) #app .glass-card-frosted, body.desktop-light:not(.route-qa):not(.route-grade) #app .rounded-xl, body.desktop-light:not(.route-qa):not(.route-grade) #app .rounded-2xl { background:#ffffff !important; border-color:#dce3e4 !important; box-shadow:none !important; backdrop-filter:none; -webkit-backdrop-filter:none; } body.desktop-light:not(.route-auth) #app [style*="linear-gradient"]:not(button):not(taro-button-core):not(.logo-linka), body.desktop-light .bg-gradient-primary, body.desktop-light .bg-gradient-subtle, body.desktop-light .capsule-selected { background:#f7f9f9 !important; background-image:none !important; border-color:#dce3e4 !important; box-shadow:none !important; backdrop-filter:none; -webkit-backdrop-filter:none; } body.desktop-light #app input, body.desktop-light #app textarea, body.desktop-light #app select, body.desktop-light #app taro-input-core, body.desktop-light #app taro-textarea-core { background:#ffffff !important; border-color:#cfd9da !important; color:#283238 !important; box-shadow:none !important; } body.desktop-light #app input:focus, body.desktop-light #app textarea:focus, body.desktop-light #app select:focus, body.desktop-light #app taro-input-core:focus-within, body.desktop-light #app taro-textarea-core:focus-within { border-color:#62aaa2 !important; outline:0; } body.desktop-light #app table { border-color:#dce3e4; } body.desktop-light #app th { background:#f3f7f7; color:#55656b; } body.desktop-light #app td { border-color:#e6ecec; } body.desktop-light #app tr:hover td { background:#f7fbfb; } /* Never allow a dark-surface utility or legacy inline background to leak into light mode. */ body.desktop-light #app .bg-black, body.desktop-light #app .bg-neutral-900, body.desktop-light #app .bg-neutral-950, body.desktop-light #app .bg-gray-800, body.desktop-light #app .bg-gray-900, body.desktop-light #app .bg-gray-950, body.desktop-light #app .bg-slate-800, body.desktop-light #app .bg-slate-900, body.desktop-light #app .bg-slate-950, body.desktop-light #app .bg-zinc-800, body.desktop-light #app .bg-zinc-900, body.desktop-light #app .bg-zinc-950, body.desktop-light #app .bg-stone-800, body.desktop-light #app .bg-stone-900, body.desktop-light #app .bg-stone-950, body.desktop-light #app [style*="background:#090"], body.desktop-light #app [style*="background: #090"], body.desktop-light #app [style*="background:#0d0d"], body.desktop-light #app [style*="background: #0d0d"], body.desktop-light #app [style*="background:#111"], body.desktop-light #app [style*="background: #111"], body.desktop-light #app [style*="background:#151"], body.desktop-light #app [style*="background: #151"], body.desktop-light #app [style*="background:#171"], body.desktop-light #app [style*="background: #171"], body.desktop-light #app [style*="background:#1d1d"], body.desktop-light #app [style*="background: #1d1d"], body.desktop-light #app [style*="background:#202"], body.desktop-light #app [style*="background: #202"], body.desktop-light #app [style*="background:#242"], body.desktop-light #app [style*="background: #242"], body.desktop-light #app [style*="background:#292"], body.desktop-light #app [style*="background: #292"], body.desktop-light #app [style*="background:#2a2a"], body.desktop-light #app [style*="background: #2a2a"], body.desktop-light #app [style*="background:#2b2b"], body.desktop-light #app [style*="background: #2b2b"] { background:#ffffff !important; background-image:none !important; border-color:#dce3e4 !important; box-shadow:none !important; } body.desktop-light #desktop-contextbar .context-message.user, body.desktop-light #desktop-contextbar .agent-run, body.desktop-light #desktop-contextbar .agent-conversation-item, body.desktop-light #desktop-contextbar .agent-conversation-item.active, body.desktop-light #desktop-contextbar .agent-markdown-table th, body.desktop-light #desktop-contextbar .agent-message-actions button, body.desktop-light #desktop-contextbar .agent-conversation-actions button, body.desktop-light #desktop-contextbar .agent-new-chat, body.desktop-light #desktop-contextbar .context-toggle, body.desktop-light #desktop-contextbar .agent-attach-button { background:#ffffff !important; border-color:#d5dfe0 !important; color:#3e5055 !important; } body.desktop-light #desktop-contextbar .context-message.user { border-left-color:#39978e !important; } body.desktop-light #desktop-contextbar .context-message-text, body.desktop-light #desktop-contextbar .context-message-text.is-markdown h2, body.desktop-light #desktop-contextbar .context-message-text.is-markdown h3, body.desktop-light #desktop-contextbar .context-message-text.is-markdown h4, body.desktop-light #desktop-contextbar .context-message-text.is-markdown h5 { color:#34444a; } body.desktop-light .agent-modal-dialog, body.desktop-light .pro-upgrade-dialog, body.desktop-light .customer-support-dialog, body.desktop-light .desktop-modal, body.desktop-light [role="dialog"] { background:#ffffff !important; border-color:#d5dfe0 !important; box-shadow:0 12px 32px rgba(40,58,61,.10) !important; } } /* Final light-mode authority: route-specific EigenFlux panels must not reintroduce dark surfaces. */ @media (min-width:981px) { body.desktop-light #desktop-nav .desktop-nav-footer { background:#e7f2f3 !important; border-top-color:#cadbdd !important; color:#53666d !important; } body.desktop-light #desktop-nav .desktop-nav-user, body.desktop-light #desktop-nav .desktop-nav-user strong { color:#31454b !important; } body.desktop-light #desktop-nav .desktop-nav-user span, body.desktop-light #desktop-nav .desktop-home-footer { color:#71848a !important; } body.desktop-light #desktop-nav .desktop-nav-footer-actions, body.desktop-light #desktop-nav .desktop-home-footer { border-color:#cadbdd !important; } body.desktop-light #desktop-today { background:#ffffff !important; color:#283238 !important; } body.desktop-light #desktop-today h1, body.desktop-light #desktop-today .today-card-heading h2, body.desktop-light #desktop-today .today-card h2 { color:#283238 !important; } body.desktop-light #desktop-today :is(.today-kicker,.today-subtitle,.today-card-heading span,.heatmap-months,.stat span,.activity small,.recommend span) { color:#718087 !important; } body.desktop-light #desktop-today :is(.today-card,.progress-panel) { background:#ffffff !important; border-color:#dce3e4 !important; box-shadow:none !important; } body.desktop-light #desktop-today .heatmap-frame { background:#f7f9f9 !important; border-color:#dce3e4 !important; } body.desktop-light #desktop-today .heatmap :is(.heat-level-0,.heat-level-1) { --cell-color:#e8eeee !important; } body.desktop-light #desktop-today .heatmap .heat-level-2 { --cell-color:#cce4df !important; } body.desktop-light #desktop-today .heatmap .heat-level-3 { --cell-color:#85c6bd !important; } body.desktop-light #desktop-today .heatmap .heat-level-4 { --cell-color:#278d83 !important; } body.desktop-light #desktop-today .stat { background:#f3f7f7 !important; color:#283238 !important; } body.desktop-light #desktop-today .stat strong { color:#247e75 !important; text-shadow:none !important; } body.desktop-light #desktop-today .activity, body.desktop-light #desktop-today .recommend { border-color:#e5ebeb !important; } body.desktop-light #desktop-today .today-actions button { border-color:#c8d7d8 !important; color:#53666d !important; } body.desktop-light #desktop-today .today-actions button:first-child { border-color:#37948b !important; color:#217a72 !important; } } /* Preserve the full cafe scene while giving every one of the 24 tables its own non-overlapping bay. */ /* Native grading page: the title must share the form's content rail. Earlier full-width header rules made it look detached from the workspace. */ @media (min-width:981px) { body.route-grade-RETIRED #app #desktop-grade-header-RETIRED.desktop-grade-RETIRED-page-header { width:100% !important; margin:0 0 26px !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content { width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-submit, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-submit > * { display:flex !important; align-items:center !important; justify-content:center !important; height:48px !important; min-height:48px !important; line-height:1 !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-content > .desktop-grade-RETIRED-submit { margin-top:8px !important; border:1px solid #35d6c5 !important; background:#178f83 !important; color:#effffc !important; box-shadow:0 8px 22px rgba(23,143,131,.2) !important; } body.route-grade-RETIRED #app .desktop-grade-RETIRED-history-shortcut { margin-top:8px !important; border-color:#2c393f !important; background:#10161a !important; } } /* Required first-run public display-name setup. */ .display-nickname-modal { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 24px; box-sizing: border-box; } .display-nickname-backdrop { position: absolute; inset: 0; background: rgba(15, 18, 28, 0.58); backdrop-filter: blur(5px); } .display-nickname-dialog { position: relative; width: min(100%, 420px); padding: 30px; border: 1px solid #d8dbe7; border-radius: 8px; background: #ffffff; box-shadow: 0 24px 70px rgba(7, 14, 31, 0.28); color: #222634; } .display-nickname-close { position:absolute; top:12px; right:12px; width:32px !important; height:32px !important; border:0 !important; background:transparent !important; color:#667085 !important; font-size:24px !important; font-weight:400 !important; cursor:pointer; } .display-nickname-kicker { display:block; color:#5965b5; font-size:12px; font-weight:700; letter-spacing:0; } .display-nickname-dialog h2 { margin:9px 0 10px; font-size:24px; line-height:1.25; letter-spacing:0; } .display-nickname-dialog p { margin:0; color:#616978; font-size:14px; line-height:1.65; } .display-nickname-dialog form { margin-top:22px; } .display-nickname-dialog label { display:grid; gap:8px; color:#303748; font-size:14px; font-weight:600; } .display-nickname-dialog input { width:100%; height:42px; padding:0 12px; box-sizing:border-box; border:1px solid #bfc5d4; border-radius:5px; color:#202635; font:inherit; outline:none; } .display-nickname-dialog input:focus { border-color:#5965b5; box-shadow:0 0 0 3px rgba(89,101,181,.14); } .display-nickname-status { min-height:20px; margin-top:9px; color:#bf3f52; font-size:13px; line-height:20px; } .display-nickname-dialog button { width:100%; height:42px; border:0; border-radius:5px; background:#343e8f; color:#fff; font:600 14px/1 inherit; cursor:pointer; } .display-nickname-dialog button:disabled { cursor:wait; opacity:.6; } .desktop-nickname-edit { margin:0 5px; padding:0; border:0; background:transparent; color:inherit; font-size:13px; line-height:1; cursor:pointer; vertical-align:middle; opacity:.65; } .desktop-nickname-edit:hover { opacity:1; color:#5965b5; } @media (max-width: 520px) { .display-nickname-modal { padding:16px; } .display-nickname-dialog { padding:24px 20px; } } /* Shared workspace geometry. Theme may change colour only. Horizontal inset is owned by --desktop-page-gutter (Broadcast standard), not a second rail. */ @media (min-width:981px) { body.route-qa-RETIRED #app #desktop-qa-header-RETIRED, body.route-grade-RETIRED #app #desktop-grade-header-RETIRED, body.route-qa-RETIRED #app .desktop-qa-RETIRED-content, body.route-grade-RETIRED #app .desktop-grade-RETIRED-content { width:100% !important; max-width:none !important; margin-right:0 !important; margin-left:0 !important; box-sizing:border-box !important; } } /* ============================================================ Grade page — ONE layout path (former dark reference), TWO palettes. Structure/sizing come from the shared body.route-grade rules above. This block only: keep #app visible, hide legacy chrome, light colors. Do not append more layout overrides below this section. ============================================================ */ @media (min-width:981px) { html body.route-qa-RETIRED #app, html body.route-grade #app { visibility:visible !important; pointer-events:auto !important; opacity:1 !important; } /* Legacy / retired chrome — both themes */ body.route-grade #app .desktop-grade-legacy-header, body.route-grade #app .desktop-grade-legacy-intro, body.route-grade #app .desktop-legacy-topbar, body.route-grade #app .desktop-grade-native-hero, body.route-grade #app .min-h-screen > .desktop-grade-legacy-header, body.route-grade #desktop-grade-workspace-redesign-RETIRED { display:none !important; } /* Kill old vertical stage markers that some older rules reintroduce */ body.route-grade #app .desktop-grade-question-panel::before, body.route-grade #app .desktop-grade-answer-panel::before, body.route-grade #app .desktop-grade-question-panel > div:first-child::before, body.route-grade #app .desktop-grade-answer-panel > div:first-child::before { content:none !important; display:none !important; width:0 !important; height:0 !important; box-shadow:none !important; background:none !important; } /* Shared structural anchors (match night reference; colors via theme below) */ /* Kill native purple mobile chrome — always. */ html body.route-grade #app .desktop-grade-native:not(.desktop-starfield):not([data-desktop-grade-ready="true"]), html body.route-grade #app .min-h-screen.desktop-grade-native:not(.desktop-starfield):not([data-desktop-grade-ready="true"]) { background-color: #08090b !important; } html body.desktop-light.route-grade #app .desktop-grade-native, html body.desktop-light.route-grade #app .min-h-screen.desktop-grade-native { background: #f4f7f8 !important; background-image: none !important; } html body.route-grade #app .desktop-grade-native-hero, html body.route-grade #app .desktop-grade-legacy-intro, html body.route-grade #app .desktop-grade-legacy-header, html body.route-grade #app .desktop-legacy-topbar { display: none !important; } body.route-grade #app .desktop-grade-native, body.route-grade #app .desktop-grade-workspace, body.route-grade #app .min-h-screen.desktop-grade-workspace, body.route-grade #app .min-h-screen.desktop-grade-native { display:block !important; width:100% !important; max-width:none !important; box-sizing:border-box !important; } body.route-grade #app .desktop-grade-content { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; align-items:stretch !important; gap:18px !important; width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; } body.route-grade #app .desktop-grade-typebar, body.route-grade #app .desktop-grade-submit, body.route-grade #app .desktop-grade-history-shortcut { grid-column:1 / -1 !important; } body.route-grade #app .desktop-grade-question-panel { grid-column:1 !important; } body.route-grade #app .desktop-grade-answer-panel { grid-column:2 !important; } body.route-grade #desktop-grade-header, body.route-grade #app #desktop-grade-header.desktop-grade-page-header { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:28px !important; width:100% !important; max-width:none !important; margin:0 0 26px !important; box-sizing:border-box !important; } body.route-grade #app .desktop-grade-history-shortcut { display:flex !important; } body.route-grade #app .desktop-grade-submit { width:100% !important; min-width:0 !important; justify-self:stretch !important; margin-left:0 !important; } } /* Light palette ONLY — no sizing / grid / positioning changes. */ @media (min-width:981px) { body.desktop-light.route-grade, body.desktop-light.route-grade #app, body.desktop-light.route-grade #container { background:#f4f7f8 !important; background-image:none !important; color:#26343b !important; } body.desktop-light.route-grade #app .desktop-grade-native, body.desktop-light.route-grade #app .desktop-grade-workspace, body.desktop-light.route-grade #app .min-h-screen { background:#f4f7f8 !important; background-image:none !important; color:#26343b !important; } body.desktop-light.route-grade #desktop-grade-header, body.desktop-light.route-grade #app #desktop-grade-header, body.desktop-light.route-grade #app .desktop-grade-native > #desktop-grade-header, body.desktop-light.route-grade #app .desktop-grade-workspace > #desktop-grade-header { border-bottom:1px solid #d7e1e3 !important; background:transparent !important; box-shadow:none !important; } /* Match native header specificity from early shared rules (2 IDs). */ body.desktop-light.route-grade #app .desktop-grade-native > #desktop-grade-header span, body.desktop-light.route-grade #app .desktop-grade-workspace > #desktop-grade-header span, body.desktop-light.route-grade #app #desktop-grade-header span { color:#168f83 !important; } body.desktop-light.route-grade #app .desktop-grade-native > #desktop-grade-header h1, body.desktop-light.route-grade #app .desktop-grade-workspace > #desktop-grade-header h1, body.desktop-light.route-grade #app #desktop-grade-header h1, body.desktop-light.route-grade #app .desktop-grade-native > #desktop-grade-header strong, body.desktop-light.route-grade #app #desktop-grade-header strong, body.desktop-light.route-grade #app h1, body.desktop-light.route-grade #app h2, body.desktop-light.route-grade #app h3 { color:#1f2d33 !important; } body.desktop-light.route-grade #app .desktop-grade-native > #desktop-grade-header p, body.desktop-light.route-grade #app .desktop-grade-workspace > #desktop-grade-header p, body.desktop-light.route-grade #app #desktop-grade-header p { color:#6b7b82 !important; } body.desktop-light.route-grade #app .desktop-grade-native > #desktop-grade-header a, body.desktop-light.route-grade #app .desktop-grade-workspace > #desktop-grade-header a, body.desktop-light.route-grade #app #desktop-grade-header a { border:1px solid #c9d7da !important; background:#eef3f4 !important; color:#2a3a40 !important; box-shadow:none !important; } body.desktop-light.route-grade #app .desktop-grade-native > #desktop-grade-header a:hover, body.desktop-light.route-grade #app #desktop-grade-header a:hover { border-color:#168f83 !important; background:#eef8f6 !important; color:#126f66 !important; } body.desktop-light.route-grade #app .desktop-grade-native > #desktop-grade-header i, body.desktop-light.route-grade #app #desktop-grade-header a i { color:#168f83 !important; } /* Generic dark-text leftovers from shared structure rules. Keep AFTER header selectors so eyebrow/title colors above still win. */ body.desktop-light.route-grade #app label, body.desktop-light.route-grade #app .__linka_perf_dead [class*="text-muted"], body.desktop-light.route-grade #app .__linka_perf_dead [class*="text-gray"] { color:#4d5d64 !important; } body.desktop-light.route-grade #app .desktop-grade-typebar, body.desktop-light.route-grade #app .desktop-grade-question-panel, body.desktop-light.route-grade #app .desktop-grade-answer-panel, body.desktop-light.route-grade #app .desktop-grade-history-shortcut { border-color:#d7e1e3 !important; background:#eef3f4 !important; color:#26343b !important; box-shadow:none !important; } body.desktop-light.route-grade #app .desktop-grade-typebar { background:linear-gradient(90deg,rgba(22,143,131,.10),#eef3f4 56%) !important; } body.desktop-light.route-grade #app .desktop-grade-typebar::before { color:#1f2d33 !important; } body.desktop-light.route-grade #app .desktop-grade-type-option, body.desktop-light.route-grade #app .desktop-grade-typebar button, body.desktop-light.route-grade #app .desktop-grade-typebar taro-button-core { border-color:#cddadd !important; background:#f7fbfb !important; color:#5f7077 !important; box-shadow:none !important; } body.desktop-light.route-grade #app .desktop-grade-type-option.capsule-selected, body.desktop-light.route-grade #app .desktop-grade-type-option.is-active, body.desktop-light.route-grade #app .desktop-grade-type-option[aria-pressed="true"], body.desktop-light.route-grade #app .desktop-grade-typebar .capsule-selected { border-color:#168f83 !important; background:#d9f1ee !important; color:#0f6a62 !important; box-shadow:none !important; } body.desktop-light.route-grade #app .desktop-grade-question-panel > div:first-child, body.desktop-light.route-grade #app .desktop-grade-answer-panel > div:first-child { border-bottom-color:#d7e1e3 !important; background:linear-gradient(90deg,rgba(22,143,131,.08),#eef3f4 62%) !important; color:#1f2d33 !important; } body.desktop-light.route-grade #app .desktop-grade-question-panel > div:first-child :is(p,span,strong), body.desktop-light.route-grade #app .desktop-grade-answer-panel > div:first-child :is(p,span,strong) { color:#1f2d33 !important; } body.desktop-light.route-grade #app .desktop-grade-answer-panel .desktop-grade-input-modebar, body.desktop-light.route-grade #app .desktop-grade-answer-panel > div:last-child > div:first-child.desktop-grade-input-modebar { border-color:#d7e1e3 !important; border-bottom-color:#d7e1e3 !important; background:#edf3f4 !important; } body.desktop-light.route-grade #app .desktop-grade-answer-panel .desktop-grade-input-mode, body.desktop-light.route-grade #app .desktop-grade-answer-panel .desktop-grade-input-modebar button, body.desktop-light.route-grade #app .desktop-grade-answer-panel .desktop-grade-input-modebar taro-button-core { border-right-color:#d7e1e3 !important; background:transparent !important; color:#6b7b82 !important; } body.desktop-light.route-grade #app .desktop-grade-answer-panel .desktop-grade-input-mode.capsule-selected, body.desktop-light.route-grade #app .desktop-grade-answer-panel .desktop-grade-input-mode.is-active, body.desktop-light.route-grade #app .desktop-grade-answer-panel .desktop-grade-input-mode[aria-pressed="true"] { background:#d9f1ee !important; color:#0f6a62 !important; box-shadow:inset 0 -2px #168f83 !important; } body.desktop-light.route-grade #app textarea, body.desktop-light.route-grade #app taro-textarea-core, body.desktop-light.route-grade #app input, body.desktop-light.route-grade #app taro-input-core, body.desktop-light.route-grade #app .desktop-grade-question-panel textarea, body.desktop-light.route-grade #app .desktop-grade-answer-panel textarea, body.desktop-light.route-grade #app .desktop-grade-question-panel taro-textarea-core, body.desktop-light.route-grade #app .desktop-grade-answer-panel taro-textarea-core { border-color:#cddadd !important; background:#fbfcfc !important; color:#26343b !important; box-shadow:none !important; } body.desktop-light.route-grade #app textarea::placeholder, body.desktop-light.route-grade #app taro-textarea-core::placeholder, body.desktop-light.route-grade #app input::placeholder { color:#8a9aa1 !important; } body.desktop-light.route-grade #app textarea:focus, body.desktop-light.route-grade #app taro-textarea-core:focus-within, body.desktop-light.route-grade #app input:focus { border-color:#168f83 !important; box-shadow:0 0 0 3px rgba(22,143,131,.12) !important; } body.desktop-light.route-grade #app .desktop-grade-submit, body.desktop-light.route-grade #app .desktop-grade-content > .desktop-grade-submit, body.desktop-light.route-grade #app .desktop-grade-content > .desktop-grade-submit > * { border-color:#168f83 !important; background:#168f83 !important; background-image:none !important; color:#e8fffa !important; box-shadow:0 8px 22px rgba(22,143,131,.18) !important; } body.desktop-light.route-grade #app .desktop-grade-submit span, body.desktop-light.route-grade #app .desktop-grade-submit * { color:#e8fffa !important; } body.desktop-light.route-grade #app .desktop-grade-history-shortcut { border-color:#d7e1e3 !important; background:#eef3f4 !important; color:#26343b !important; } body.desktop-light.route-grade #app .desktop-grade-history-shortcut :is(strong,h2,h3) { color:#1f2d33 !important; } body.desktop-light.route-grade #app .desktop-grade-history-shortcut :is(p,span) { color:#6b7b82 !important; } body.desktop-light.route-grade #app .desktop-grade-history-shortcut::before { background:#168f83 !important; } /* Neutralize leftover dark decorative fills from shared structure rules */ body.desktop-light.route-grade #app .__linka_perf_dead [style*="linear-gradient"], body.desktop-light.route-grade #app .__linka_perf_dead [class*="bg-gradient"] { background-image:none !important; } body.desktop-light.route-grade #app .glass-card, body.desktop-light.route-grade #app .glass-card-frosted { border-color:#d7e1e3 !important; background:#eef3f4 !important; box-shadow:none !important; backdrop-filter:none !important; } } /* Dark palette (default for grade) — restore black UI after excluding generic body.desktop-dark #app chrome from this route. */ @media (min-width:981px) { html body.route-grade:not(.desktop-light), html body.desktop-dark.route-grade, html body.route-grade:not(.desktop-light) #app, html body.desktop-dark.route-grade #app, html body.route-grade:not(.desktop-light) #container, html body.desktop-dark.route-grade #container { background: #08090b !important; background-image: none !important; color: #f3f5f7 !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-native, html body.route-grade:not(.desktop-light) #app .desktop-grade-workspace, html body.route-grade:not(.desktop-light) #app .min-h-screen, html body.desktop-dark.route-grade #app .desktop-grade-native, html body.desktop-dark.route-grade #app .desktop-grade-workspace, html body.desktop-dark.route-grade #app .min-h-screen { background: #08090b !important; background-image: none !important; color: #f3f5f7 !important; } html body.route-grade:not(.desktop-light) #app #desktop-grade-header, html body.desktop-dark.route-grade #app #desktop-grade-header { border-bottom: 1px solid #242b32 !important; background: transparent !important; box-shadow: none !important; } html body.route-grade:not(.desktop-light) #app #desktop-grade-header span, html body.desktop-dark.route-grade #app #desktop-grade-header span { color: #35d6c5 !important; } html body.route-grade:not(.desktop-light) #app #desktop-grade-header h1, html body.route-grade:not(.desktop-light) #app #desktop-grade-header strong, html body.desktop-dark.route-grade #app #desktop-grade-header h1 { color: #f5f7f8 !important; } html body.route-grade:not(.desktop-light) #app #desktop-grade-header p, html body.desktop-dark.route-grade #app #desktop-grade-header p { color: #88939d !important; } html body.route-grade:not(.desktop-light) #app #desktop-grade-header a, html body.desktop-dark.route-grade #app #desktop-grade-header a { border: 1px solid #33404a !important; background: #12191f !important; color: #d4dddf !important; box-shadow: none !important; } html body.route-grade:not(.desktop-light) #app #desktop-grade-header a:hover, html body.desktop-dark.route-grade #app #desktop-grade-header a:hover { border-color: #35d6c5 !important; background: #132a28 !important; color: #effffc !important; } html body.route-grade:not(.desktop-light) #app #desktop-grade-header i, html body.desktop-dark.route-grade #app #desktop-grade-header i { color: #35d6c5 !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-typebar, html body.route-grade:not(.desktop-light) #app .desktop-grade-question-panel, html body.route-grade:not(.desktop-light) #app .desktop-grade-answer-panel, html body.route-grade:not(.desktop-light) #app .desktop-grade-history-shortcut, html body.route-grade:not(.desktop-light) #app .glass-card, html body.route-grade:not(.desktop-light) #app .glass-card-frosted, html body.desktop-dark.route-grade #app .desktop-grade-typebar, html body.desktop-dark.route-grade #app .desktop-grade-question-panel, html body.desktop-dark.route-grade #app .desktop-grade-answer-panel, html body.desktop-dark.route-grade #app .desktop-grade-history-shortcut, html body.desktop-dark.route-grade #app .glass-card, html body.desktop-dark.route-grade #app .glass-card-frosted { border: 1px solid #2b3038 !important; border-radius: 7px !important; background: #11161b !important; color: #f3f5f7 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-typebar, html body.desktop-dark.route-grade #app .desktop-grade-typebar { background: linear-gradient(90deg, rgba(53,214,197,.10), #11161b 56%) !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-typebar::before, html body.desktop-dark.route-grade #app .desktop-grade-typebar::before { color: #e8ecee !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-type-option, html body.route-grade:not(.desktop-light) #app .desktop-grade-typebar button, html body.route-grade:not(.desktop-light) #app .desktop-grade-typebar taro-button-core, html body.desktop-dark.route-grade #app .desktop-grade-type-option, html body.desktop-dark.route-grade #app .desktop-grade-typebar button, html body.desktop-dark.route-grade #app .desktop-grade-typebar taro-button-core { border: 1px solid #2c333b !important; border-radius: 5px !important; background: #171c21 !important; background-image: none !important; color: #9ea8b1 !important; box-shadow: none !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-type-option.capsule-selected, html body.route-grade:not(.desktop-light) #app .desktop-grade-type-option.is-active, html body.route-grade:not(.desktop-light) #app .desktop-grade-type-option[aria-pressed="true"], html body.route-grade:not(.desktop-light) #app .desktop-grade-typebar .capsule-selected, html body.desktop-dark.route-grade #app .desktop-grade-type-option.capsule-selected, html body.desktop-dark.route-grade #app .desktop-grade-type-option.is-active, html body.desktop-dark.route-grade #app .desktop-grade-type-option[aria-pressed="true"], html body.desktop-dark.route-grade #app .desktop-grade-typebar .capsule-selected { border-color: #38cdbd !important; background: #153e39 !important; color: #e4fffb !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-question-panel > div:first-child, html body.route-grade:not(.desktop-light) #app .desktop-grade-answer-panel > div:first-child, html body.desktop-dark.route-grade #app .desktop-grade-question-panel > div:first-child, html body.desktop-dark.route-grade #app .desktop-grade-answer-panel > div:first-child { border-bottom: 1px solid #263039 !important; background: #12191e !important; color: #edf1f2 !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-question-panel > div:first-child :is(p,span,strong), html body.route-grade:not(.desktop-light) #app .desktop-grade-answer-panel > div:first-child :is(p,span,strong), html body.desktop-dark.route-grade #app .desktop-grade-question-panel > div:first-child :is(p,span,strong), html body.desktop-dark.route-grade #app .desktop-grade-answer-panel > div:first-child :is(p,span,strong) { color: #edf1f2 !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-input-modebar, html body.desktop-dark.route-grade #app .desktop-grade-input-modebar { border: 1px solid #29343c !important; background: #0e1419 !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-input-mode, html body.route-grade:not(.desktop-light) #app .desktop-grade-input-modebar button, html body.route-grade:not(.desktop-light) #app .desktop-grade-input-modebar taro-button-core, html body.desktop-dark.route-grade #app .desktop-grade-input-mode, html body.desktop-dark.route-grade #app .desktop-grade-input-modebar button, html body.desktop-dark.route-grade #app .desktop-grade-input-modebar taro-button-core { background: transparent !important; background-image: none !important; color: #98a4ae !important; box-shadow: none !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-input-mode.capsule-selected, html body.route-grade:not(.desktop-light) #app .desktop-grade-input-mode.is-active, html body.route-grade:not(.desktop-light) #app .desktop-grade-input-mode[aria-pressed="true"], html body.desktop-dark.route-grade #app .desktop-grade-input-mode.capsule-selected, html body.desktop-dark.route-grade #app .desktop-grade-input-mode.is-active, html body.desktop-dark.route-grade #app .desktop-grade-input-mode[aria-pressed="true"] { background: #1d514b !important; color: #edfffc !important; } html body.route-grade:not(.desktop-light) #app textarea, html body.route-grade:not(.desktop-light) #app taro-textarea-core, html body.route-grade:not(.desktop-light) #app input, html body.route-grade:not(.desktop-light) #app taro-input-core, html body.desktop-dark.route-grade #app textarea, html body.desktop-dark.route-grade #app taro-textarea-core, html body.desktop-dark.route-grade #app input, html body.desktop-dark.route-grade #app taro-input-core { border: 1px solid #303038 !important; border-radius: 5px !important; background: #090d11 !important; color: #e8ecee !important; box-shadow: none !important; } html body.route-grade:not(.desktop-light) #app textarea::placeholder, html body.route-grade:not(.desktop-light) #app input::placeholder, html body.desktop-dark.route-grade #app textarea::placeholder, html body.desktop-dark.route-grade #app input::placeholder { color: #6f7782 !important; } html body.route-grade:not(.desktop-light) #app textarea:focus, html body.route-grade:not(.desktop-light) #app taro-textarea-core:focus-within, html body.desktop-dark.route-grade #app textarea:focus, html body.desktop-dark.route-grade #app taro-textarea-core:focus-within { border-color: #46d3c4 !important; box-shadow: 0 0 0 3px rgba(70,211,196,.11) !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-submit, html body.route-grade:not(.desktop-light) #app .desktop-grade-content > .desktop-grade-submit, html body.desktop-dark.route-grade #app .desktop-grade-submit, html body.desktop-dark.route-grade #app .desktop-grade-content > .desktop-grade-submit { border-color: #35cfc0 !important; background: #35cfc0 !important; background-image: none !important; color: #06201d !important; box-shadow: 0 10px 24px rgba(53,207,192,.15) !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-submit *, html body.desktop-dark.route-grade #app .desktop-grade-submit * { color: #06201d !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-history-shortcut, html body.desktop-dark.route-grade #app .desktop-grade-history-shortcut { border-color: #2b3038 !important; background: #11161b !important; color: #f3f5f7 !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-history-shortcut :is(strong,h2,h3), html body.desktop-dark.route-grade #app .desktop-grade-history-shortcut :is(strong,h2,h3) { color: #f1f4f5 !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-history-shortcut :is(p,span,small), html body.desktop-dark.route-grade #app .desktop-grade-history-shortcut :is(p,span,small) { color: #89939d !important; } /* Kill native lavender / white glass leftovers in dark mode */ html body.route-grade:not(.desktop-light) #app .__linka_perf_dead [style*="linear-gradient"], html body.route-grade:not(.desktop-light) #app .__linka_perf_dead [style*="rgba(255,255,255"], html body.route-grade:not(.desktop-light) #app .__linka_perf_dead [style*="rgba(255, 255, 255"], html body.route-grade:not(.desktop-light) #app .__linka_perf_dead [class*="bg-gradient"], html body.desktop-dark.route-grade #app .__linka_perf_dead [style*="linear-gradient"], html body.desktop-dark.route-grade #app .__linka_perf_dead [style*="rgba(255,255,255"], html body.desktop-dark.route-grade #app .__linka_perf_dead [style*="rgba(255, 255, 255"], html body.desktop-dark.route-grade #app .__linka_perf_dead [class*="bg-gradient"] { background-image: none !important; } html body.route-grade:not(.desktop-light) #app .rounded-xl, html body.route-grade:not(.desktop-light) #app .rounded-2xl, html body.route-grade:not(.desktop-light) #app .bg-card, html body.route-grade:not(.desktop-light) #app .bg-white, html body.desktop-dark.route-grade #app .rounded-xl, html body.desktop-dark.route-grade #app .rounded-2xl, html body.desktop-dark.route-grade #app .bg-card, html body.desktop-dark.route-grade #app .bg-white { background: #11161b !important; background-image: none !important; border-color: #2b3038 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body.route-grade:not(.desktop-light) #app :is(p,span,label,strong,h1,h2,h3), html body.desktop-dark.route-grade #app :is(p,span,label,strong,h1,h2,h3) { color: inherit; } html body.route-grade:not(.desktop-light) #app .__linka_perf_dead [class*="text-muted"], html body.route-grade:not(.desktop-light) #app .__linka_perf_dead [class*="text-gray"], html body.desktop-dark.route-grade #app .__linka_perf_dead [class*="text-muted"], html body.desktop-dark.route-grade #app .__linka_perf_dead [class*="text-gray"] { color: #89939d !important; } html body.route-grade:not(.desktop-light) #app .__linka_perf_dead [class*="text-foreground"], html body.desktop-dark.route-grade #app .__linka_perf_dead [class*="text-foreground"] { color: #f3f5f7 !important; } } /* ============================================================ Desktop page rails + page headers (site-wide) - Gutters: Broadcast standard — 54 / 64 / 76 - Header type: Grade-page standard — eyebrow 10 / title 30 / desc 14 Appended as the final ownership layer for spacing + topbars. ============================================================ */ @media (min-width:981px) { body:not(.route-auth) { --desktop-page-gutter: 64px; --desktop-page-top: 54px; --desktop-page-bottom: 76px; --desktop-page-header-gap: 22px; --desktop-page-title-size: 28px; --desktop-page-title-weight: 650; --desktop-page-title-line: 1.2; --desktop-page-eyebrow-size: 10px; --desktop-page-desc-size: 13px; --desktop-page-desc-line: 1.5; --desktop-page-header-hairline: #1c2329; } body.desktop-light:not(.route-auth) { --desktop-page-header-hairline: #d0d9dc; } /* --- Page shells: one gutter language --- */ body:not(.route-auth) #app .min-h-screen, body.route-qa-RETIRED #app .min-h-screen, body.route-grade #app .min-h-screen, body.route-grade #app .desktop-grade-native, body.route-grade #app .desktop-grade-workspace, #desktop-broadcast .data-shell, #desktop-today, #desktop-guide, #desktop-my-data .profile-page-shell, #desktop-checkin .checkin-shell, #desktop-study-room .focus-shell, #desktop-learning-report .report-shell, #desktop-course-hub .course-hub-shell, #desktop-course-hub .course-catalog-shell, #desktop-exam-hub .exam-hub-shell, #desktop-exam-list .exam-list-shell, #desktop-exam-papers .exam-paper-shell, #desktop-exam-topics .exam-hub-shell, #desktop-exam-schools .exam-hub-shell, #desktop-exam-school-detail .exam-hub-shell, #desktop-exam-topic-dashboard .topic-dash-shell, #desktop-exam-topic-detail .topic-dash-shell, #desktop-exam-447-analysis .topic-dash-shell, #desktop-exam-theory-schools .topic-dash-shell, #desktop-official-library .official-library-shell, #desktop-official-templates .official-templates-shell, #desktop-interactive-learning .interactive-learning-shell, #desktop-admin-portal .admin-portal-shell, #desktop-admin-dashboard .admin-dashboard-shell, .exam-hub-shell, .exam-paper-shell, .topic-dash-shell, .official-library-shell, .official-templates-shell, .profile-page-shell, .admin-portal-shell, .admin-dashboard-shell, .interactive-learning-shell, .ai-workspace-shell-RETIRED { width: 100% !important; max-width: none !important; margin: 0 !important; padding: var(--desktop-page-top) var(--desktop-page-gutter) var(--desktop-page-bottom) !important; box-sizing: border-box !important; } #desktop-today .today-inner, #desktop-home .home-inner { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Home map page keeps full-bleed composition, but side rails match broadcast. */ #desktop-home { padding-top: var(--desktop-page-top) !important; padding-right: var(--desktop-page-gutter) !important; padding-bottom: var(--desktop-page-bottom) !important; padding-left: var(--desktop-page-gutter) !important; box-sizing: border-box !important; } #desktop-home .home-topbar, #desktop-home .home-copy { left: var(--desktop-page-gutter) !important; } #desktop-home .map-legend, #desktop-home .home-stats { right: var(--desktop-page-gutter) !important; } /* --- Page headers: Grade typography + rhythm --- */ #desktop-broadcast .broadcast-head, #desktop-qa-header, #desktop-grade-header, #desktop-exam-list-header, #desktop-my-data .profile-page-head, #desktop-checkin .checkin-header, #desktop-study-room .focus-head, #desktop-learning-report .report-head, #desktop-course-hub .course-center-head, #desktop-course-hub .course-hero, #desktop-official-library .official-library-head, #desktop-official-templates .official-templates-head, #desktop-exam-hub .exam-hub-head, #desktop-exam-topics .exam-hub-head, #desktop-exam-schools .exam-hub-head, #desktop-exam-papers .exam-paper-head, #desktop-exam-topic-dashboard .topic-dash-head, #desktop-exam-447-analysis .topic-dash-head, #desktop-exam-theory-schools .topic-dash-head, #desktop-admin-portal .admin-portal-head, #desktop-admin-dashboard .admin-dashboard-head, #desktop-guide .guide-hero, .exam-hub-head, .exam-paper-head, .topic-dash-head, .official-library-head, .official-templates-head, .profile-page-head, .admin-portal-head, .admin-dashboard-head, .ai-workspace-head-RETIRED { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 28px !important; width: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0 0 var(--desktop-page-header-gap) !important; padding: 0 0 25px !important; border: 0 !important; border-bottom: 1px solid var(--desktop-page-header-hairline) !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; box-sizing: border-box !important; } /* Course hero was a tall card; flatten it into the shared header rail. */ #desktop-course-hub .course-hero { display: block !important; min-height: 0 !important; grid-template-columns: none !important; } #desktop-course-hub .course-hero::before, #desktop-course-hub .course-hero::after, #desktop-course-hub .course-progress-card { display: none !important; } #desktop-broadcast .broadcast-head :is(h1), #desktop-qa-header h1, #desktop-grade-header h1, #desktop-exam-list-header h1, #desktop-my-data .profile-page-head h1, #desktop-checkin .checkin-header h1, #desktop-study-room .focus-head h1, #desktop-learning-report .report-head h1, #desktop-course-hub .course-center-head h1, #desktop-course-hub .course-hero h1, #desktop-official-library .official-library-head h1, #desktop-official-templates .official-templates-head h1, #desktop-exam-hub .exam-hub-head h1, #desktop-exam-topics .exam-hub-head h1, #desktop-exam-schools .exam-hub-head h1, #desktop-exam-papers .exam-paper-head h1, #desktop-exam-topic-dashboard .topic-dash-head h1, #desktop-exam-447-analysis .topic-dash-head h1, #desktop-exam-theory-schools .topic-dash-head h1, #desktop-admin-portal .admin-portal-head h1, #desktop-admin-dashboard .admin-dashboard-head h1, #desktop-guide .guide-hero h1, .exam-hub-head h1, .exam-paper-head h1, .topic-dash-head h1, .official-library-head h1, .profile-page-head h1, .admin-portal-head h1, .admin-dashboard-head h1, .ai-workspace-head-RETIRED h1 { margin: 7px 0 9px !important; font-size: var(--desktop-page-title-size) !important; font-weight: var(--desktop-page-title-weight) !important; line-height: var(--desktop-page-title-line) !important; letter-spacing: 0 !important; } #desktop-broadcast .broadcast-head :is(p), #desktop-qa-header p, #desktop-grade-header p, #desktop-exam-list-header p, #desktop-my-data .profile-page-head p, #desktop-checkin .checkin-header p, #desktop-study-room .focus-head p, #desktop-learning-report .report-head p, #desktop-course-hub .course-center-head p, #desktop-course-hub .course-hero p, #desktop-course-hub .course-hero-copy > p, #desktop-official-library .official-library-head p, #desktop-official-templates .official-templates-head p, #desktop-exam-hub .exam-hub-head p, #desktop-exam-topics .exam-hub-head p, #desktop-exam-schools .exam-hub-head p, #desktop-exam-papers .exam-paper-head p, #desktop-exam-topic-dashboard .topic-dash-head p, #desktop-exam-447-analysis .topic-dash-head p, #desktop-exam-theory-schools .topic-dash-head p, #desktop-admin-portal .admin-portal-head p, #desktop-admin-dashboard .admin-dashboard-head p, #desktop-guide .guide-hero p, .exam-hub-head p, .exam-paper-head p, .topic-dash-head p, .official-library-head p, .profile-page-head p, .admin-portal-head p, .admin-dashboard-head p, .ai-workspace-head-RETIRED p { max-width: 680px !important; margin: 0 !important; font-size: var(--desktop-page-desc-size) !important; font-weight: 500 !important; line-height: var(--desktop-page-desc-line) !important; } /* Eyebrow only — direct label spans, not action/button text. */ #desktop-broadcast .broadcast-head-label > span, #desktop-qa-header > div > span, #desktop-grade-header > div > span, #desktop-exam-list-header > div > span, #desktop-my-data .profile-page-head > div > span, #desktop-checkin .checkin-header .checkin-eyebrow, #desktop-study-room .focus-head > div > span, #desktop-learning-report .report-head > div > span, #desktop-course-hub .course-center-head > div > span, #desktop-course-hub .course-hero .course-live > span:first-child, #desktop-official-library .official-library-head > div > span, #desktop-official-templates .official-templates-head > div > span, #desktop-exam-hub .exam-hub-head > div > span, #desktop-exam-topics .exam-hub-head > div > span, #desktop-exam-schools .exam-hub-head > div > span, #desktop-exam-papers .exam-paper-head > div > span, #desktop-exam-topic-dashboard .topic-dash-head > div > span, #desktop-exam-447-analysis .topic-dash-head > div > span, #desktop-exam-theory-schools .topic-dash-head > div > span, #desktop-admin-portal .admin-portal-head > div > span, #desktop-admin-dashboard .admin-dashboard-head > div > span, #desktop-guide .guide-hero-layout > div > span, .exam-hub-head > div > span, .exam-paper-head > div > span, .topic-dash-head > div > span, .official-library-head > div > span, .profile-page-head > div > span, .admin-portal-head > div > span, .admin-dashboard-head > div > span, .ai-workspace-head-RETIRED > div > span { display: block !important; margin: 0 !important; color: #35d6c5 !important; font-size: var(--desktop-page-eyebrow-size) !important; font-weight: 700 !important; letter-spacing: .08em !important; line-height: 1.3 !important; } /* Broadcast nests h1 inside the label row — keep title size, calm the flex. */ #desktop-broadcast .broadcast-head-label { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; } #desktop-broadcast .broadcast-head-label > h1 { margin: 7px 0 9px !important; } #desktop-broadcast .broadcast-head-left > p { margin: 0 !important; } /* Today uses a manifesto header; keep composition but match title scale + gutter. */ #desktop-today .today-kicker { color: #35d6c5 !important; font-size: var(--desktop-page-eyebrow-size) !important; font-weight: 700 !important; letter-spacing: .08em !important; } #desktop-today h1 { margin: 7px 0 9px !important; font-size: var(--desktop-page-title-size) !important; font-weight: var(--desktop-page-title-weight) !important; line-height: var(--desktop-page-title-line) !important; letter-spacing: 0 !important; } #desktop-today .today-subtitle { max-width: 680px !important; margin: 0 0 28px !important; font-size: var(--desktop-page-desc-size) !important; line-height: var(--desktop-page-desc-line) !important; } } @media (min-width:981px) and (max-width:1200px) { body:not(.route-auth) { --desktop-page-gutter: clamp(28px, 4vw, 48px); } } /* ============================================================ QA page — studio UI (global shell language, elevated). One structure for dark/light; light block only remaps colors. ============================================================ */ @media (min-width:981px) { html body.route-qa { --qa-bg: #07090c; --qa-bg-glow: rgba(61,206,192,.09); --qa-panel: #10151b; --qa-panel-2: #141b22; --qa-input: #0a0e12; --qa-line: #27333c; --qa-line-soft: #1f292f; --qa-text: #e6eef0; --qa-muted: #8b969f; --qa-faint: #6f7b84; --qa-accent: #3dcec0; --qa-accent-strong: #32b9ac; --qa-accent-ink: #041816; --qa-accent-soft: rgba(61,206,192,.14); --qa-accent-glow: rgba(61,206,192,.22); --qa-radius: 8px; --qa-radius-lg: 12px; } html body.route-qa #app, html body.route-qa #container { background: var(--qa-bg) !important; color: var(--qa-text) !important; } html body.route-qa #app .min-h-screen { position: relative !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: var(--desktop-page-top,54px) var(--desktop-page-gutter,64px) var(--desktop-page-bottom,76px) !important; box-sizing: border-box !important; color: var(--qa-text) !important; background: radial-gradient(920px 420px at 8% -4%, var(--qa-bg-glow), transparent 58%), radial-gradient(680px 360px at 92% 12%, rgba(53,214,197,.05), transparent 55%), var(--qa-bg) !important; background-image: radial-gradient(920px 420px at 8% -4%, var(--qa-bg-glow), transparent 58%), radial-gradient(680px 360px at 92% 12%, rgba(53,214,197,.05), transparent 55%) !important; background-color: var(--qa-bg) !important; } /* --- Header (global eyebrow / title / desc contract) --- */ html body.route-qa #desktop-qa-header, html body.route-qa #app #desktop-qa-header, html body.route-qa #app .min-h-screen > #desktop-qa-header { display: flex !important; visibility: visible !important; opacity: 1 !important; align-items: flex-end !important; justify-content: space-between !important; gap: 28px !important; width: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0 0 26px !important; padding: 0 0 25px !important; border: 0 !important; border-bottom: 1px solid var(--desktop-page-header-hairline, var(--qa-line-soft)) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body.route-qa #app #desktop-qa-header > div > span { display: block !important; color: var(--qa-accent) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .14em !important; line-height: 1.3 !important; } html body.route-qa #app #desktop-qa-header h1 { margin: 7px 0 9px !important; color: var(--qa-text) !important; font-size: 30px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0 !important; } html body.route-qa #app #desktop-qa-header p { max-width: 680px !important; margin: 0 !important; color: var(--qa-muted) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.5 !important; } html body.route-qa #app #desktop-qa-header a { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; min-width: 96px !important; height: 38px !important; padding: 0 16px !important; border: 1px solid var(--qa-line) !important; border-radius: var(--qa-radius) !important; background: var(--qa-panel-2) !important; color: var(--qa-text) !important; font-size: 13px !important; font-weight: 650 !important; text-decoration: none !important; box-shadow: none !important; transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease !important; } html body.route-qa #app #desktop-qa-header a:hover { border-color: var(--qa-accent) !important; background: #132421 !important; color: #e9fffb !important; transform: translateY(-1px) !important; } body.route-qa #app .desktop-qa-legacy-header, body.route-qa #app .desktop-legacy-topbar, body.route-qa #app .desktop-qa-native-intro:not(#free-chat-hero), body.route-qa #desktop-qa-workspace, body.route-qa #desktop-qa-mode { display: none !important; } /* --- Mode row --- */ html body.route-qa #app #free-chat-hero, html body.route-qa #app #free-chat-hero.desktop-qa-native-intro { position: relative !important; display: block !important; visibility: visible !important; width: 100% !important; min-height: 44px !important; height: auto !important; margin: 0 0 22px !important; padding: 0 !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; } html body.route-qa #app #free-chat-hero.desktop-qa-native-intro { height: 44px !important; } html body.route-qa #app #free-chat-hero.desktop-qa-native-intro > div:first-child { display: flex !important; width: 100% !important; height: 44px !important; margin: 0 !important; padding: 0 !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; background: transparent !important; background-image: none !important; } html body.route-qa #app #free-chat-hero.desktop-qa-native-intro > div:first-child::before { content: "回答模式" !important; color: var(--qa-faint) !important; font-size: 12px !important; font-weight: 650 !important; letter-spacing: .08em !important; } html body.route-qa #app #free-chat-hero.desktop-qa-native-intro > div:first-child > *:not(.desktop-qa-native-modebar) { display: none !important; } html body.route-qa #app #free-chat-hero .desktop-qa-native-modebar { display: inline-flex !important; visibility: visible !important; align-items: center !important; gap: 4px !important; height: 40px !important; margin: 0 !important; padding: 4px !important; border: 1px solid var(--qa-line) !important; border-radius: 999px !important; background: rgba(18,20,26,.88) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important; } html body.route-qa #app #free-chat-hero .desktop-qa-native-mode { display: inline-flex !important; visibility: visible !important; align-items: center !important; justify-content: center !important; min-width: 78px !important; height: 32px !important; padding: 0 18px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; background-image: none !important; color: var(--qa-muted) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; cursor: pointer !important; box-shadow: none !important; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important; } html body.route-qa #app #free-chat-hero .desktop-qa-native-mode:hover { color: var(--qa-text) !important; background: rgba(53,214,197,.08) !important; } html body.route-qa #app #free-chat-hero .desktop-qa-native-mode.is-active, html body.route-qa #app #free-chat-hero .desktop-qa-native-mode[aria-pressed="true"] { background: var(--qa-accent) !important; color: var(--qa-accent-ink) !important; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset !important; transform: none !important; } html body.route-qa #app #free-chat-hero .desktop-qa-native-mode-free { display: none !important; } /* --- Workspace panels --- */ html body.route-qa #app .glass-card, html body.route-qa #app .glass-card-frosted, html body.route-qa #app .desktop-qa-content, html body.route-qa #app .desktop-qa-answer-card { position: relative !important; width: 100% !important; max-width: none !important; margin: 0 0 18px !important; overflow: hidden !important; border: 1px solid var(--qa-line) !important; border-radius: var(--qa-radius-lg) !important; background: linear-gradient(180deg, rgba(53,214,197,.045), transparent 48px), var(--qa-panel) !important; box-shadow: 0 10px 28px rgba(0,0,0,.18) !important; box-sizing: border-box !important; backdrop-filter: none !important; transition: border-color .2s ease, box-shadow .2s ease !important; } html body.route-qa #app .desktop-qa-content:hover, html body.route-qa #app .glass-card:hover, html body.route-qa #app .glass-card-frosted:hover { border-color: rgba(61,206,192,.28) !important; box-shadow: 0 14px 32px rgba(0,0,0,.20) !important; } html body.route-qa #app .desktop-qa-answer-card { border-left: 3px solid var(--qa-accent) !important; background: linear-gradient(90deg, rgba(53,214,197,.08), transparent 28%), var(--qa-panel) !important; } html body.route-qa #app .desktop-qa-question-types { display: block !important; margin: 0 !important; padding: 22px 24px 20px !important; border: 0 !important; border-bottom: 1px solid var(--qa-line-soft) !important; border-radius: 0 !important; background: var(--qa-panel-2) !important; box-shadow: none !important; } html body.route-qa #app .desktop-qa-question-types > div:first-child { display: flex !important; margin: 0 0 16px !important; padding: 0 !important; align-items: center !important; border: 0 !important; background: transparent !important; } html body.route-qa #app .desktop-qa-question-types > div:first-child :is(p,span,strong) { color: var(--qa-text) !important; font-size: 15px !important; font-weight: 700 !important; } html body.route-qa #app .desktop-qa-question-type-row, html body.route-qa #app .desktop-qa-question-types > div:last-child { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 10px !important; width: 100% !important; } html body.route-qa #app .desktop-qa-question-type { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 40px !important; min-height: 40px !important; padding: 0 14px !important; border: 1px solid var(--qa-line) !important; border-radius: var(--qa-radius) !important; background: #1b1f27 !important; background-image: none !important; color: var(--qa-muted) !important; font-size: 13px !important; font-weight: 700 !important; box-shadow: none !important; transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important; } html body.route-qa #app .desktop-qa-question-type:hover { border-color: rgba(53,214,197,.45) !important; color: var(--qa-text) !important; background: #1d2a28 !important; } html body.route-qa #app .desktop-qa-question-type.is-active, html body.route-qa #app .desktop-qa-question-type[aria-pressed="true"], html body.route-qa #app .capsule-selected { border-color: var(--qa-accent) !important; background: var(--qa-accent-soft) !important; color: #d9fffa !important; box-shadow: inset 0 0 0 1px rgba(61,206,192,.18) !important; } html body.route-qa #app .desktop-qa-question-entry { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body.route-qa #app .desktop-qa-question-entry > div:first-child { display: flex !important; min-height: 58px !important; margin: 0 !important; padding: 0 24px !important; align-items: center !important; border: 0 !important; border-bottom: 1px solid var(--qa-line-soft) !important; background: transparent !important; } html body.route-qa #app .desktop-qa-question-entry > div:first-child :is(p,span,strong) { color: var(--qa-text) !important; font-size: 15px !important; font-weight: 700 !important; } html body.route-qa #app .desktop-qa-question-entry > div:last-child { display: flex !important; flex-direction: column !important; gap: 16px !important; padding: 20px 24px 24px !important; } html body.route-qa #app textarea, html body.route-qa #app taro-textarea-core, html body.route-qa #app input, html body.route-qa #app taro-input-core { width: 100% !important; min-height: 200px !important; padding: 16px 17px !important; border: 1px solid var(--qa-line) !important; border-radius: var(--qa-radius) !important; background: var(--qa-input) !important; color: var(--qa-text) !important; font-size: 15px !important; line-height: 1.7 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important; box-sizing: border-box !important; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important; } html body.route-qa #app input, html body.route-qa #app taro-input-core { min-height: 42px !important; } html body.route-qa #app textarea:focus, html body.route-qa #app taro-textarea-core:focus-within, html body.route-qa #app input:focus, html body.route-qa #app taro-input-core:focus-within { border-color: var(--qa-accent) !important; background: #0b1212 !important; box-shadow: 0 0 0 1px rgba(53,214,197,.22), 0 0 22px rgba(53,214,197,.12) !important; outline: none !important; } html body.route-qa #app .desktop-qa-submit, html body.route-qa #app button[class*="bg-gradient-primary"], html body.route-qa #app button[class*="bg-primary"] { align-self: flex-end !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 148px !important; height: 42px !important; min-height: 42px !important; margin-left: auto !important; padding: 0 22px !important; border: 1px solid var(--qa-accent) !important; border-radius: var(--qa-radius) !important; background: var(--qa-accent) !important; background-image: none !important; color: var(--qa-accent-ink) !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: .02em !important; box-shadow: 0 0 0 1px rgba(53,214,197,.18), 0 10px 24px rgba(53,214,197,.18) !important; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease !important; } html body.route-qa #app .desktop-qa-submit:hover, html body.route-qa #app button[class*="bg-gradient-primary"]:hover, html body.route-qa #app button[class*="bg-primary"]:hover { background: #55eadb !important; transform: translateY(-1px) !important; box-shadow: 0 0 0 1px rgba(53,214,197,.28), 0 14px 30px rgba(53,214,197,.28) !important; } html body.route-qa #app .__linka_perf_dead [class*="rounded-full"], html body.route-qa #app .__linka_perf_dead [class*="rounded-xl"], html body.route-qa #app .__linka_perf_dead [class*="rounded-2xl"] { border-radius: var(--qa-radius) !important; } html body.route-qa #app #free-chat-hero .desktop-qa-native-mode, html body.route-qa #app #free-chat-hero .desktop-qa-native-modebar { border-radius: 999px !important; } /* Suppress native Taro/mobile chrome */ html body.route-qa #app .logo-linka, html body.route-qa #app .__linka_perf_dead [class*="logo-linka"], html body.route-qa #app .__linka_perf_dead [style*="width: 110px"][style*="height: 110px"], html body.route-qa #app .__linka_perf_dead [style*="width:110px"][style*="height:110px"] { display: none !important; } html body.route-qa #app #free-chat-hero.desktop-qa-native-intro, html body.route-qa #app #free-chat-hero .desktop-qa-native-modebar { background: transparent !important; background-image: none !important; box-shadow: none !important; } } /* Light palette — same structure, day colors only. */ @media (min-width:981px) { html body.desktop-light.route-qa { --qa-bg: #f4f7f8; --qa-bg-glow: rgba(22,143,131,.10); --qa-panel: #eef3f4; --qa-panel-2: #e8eef0; --qa-input: #f2f6f7; --qa-line: #d7e1e3; --qa-line-soft: #e3ebed; --qa-text: #1f2d33; --qa-muted: #6b7b82; --qa-faint: #8a989e; --qa-accent: #168f83; --qa-accent-strong: #117a70; --qa-accent-ink: #ffffff; --qa-accent-soft: #d9f1ee; --qa-accent-glow: rgba(22,143,131,.22); } html body.desktop-light.route-qa #app, html body.desktop-light.route-qa #container, html body.desktop-light.route-qa #app .min-h-screen { color: var(--qa-text) !important; background: radial-gradient(920px 420px at 8% -4%, var(--qa-bg-glow), transparent 58%), var(--qa-bg) !important; background-color: var(--qa-bg) !important; } html body.desktop-light.route-qa #app #desktop-qa-header { border-bottom-color: var(--qa-line) !important; } html body.desktop-light.route-qa #app #desktop-qa-header a { background: #fff !important; color: #2a3a40 !important; } html body.desktop-light.route-qa #app #desktop-qa-header a:hover { background: #f2faf9 !important; color: #0f6a62 !important; } html body.desktop-light.route-qa #app #free-chat-hero .desktop-qa-native-modebar { background: #fff !important; box-shadow: 0 1px 0 rgba(15,40,36,.04) !important; } html body.desktop-light.route-qa #app #free-chat-hero .desktop-qa-native-mode.is-active, html body.desktop-light.route-qa #app #free-chat-hero .desktop-qa-native-mode[aria-pressed="true"] { color: #fff !important; } html body.desktop-light.route-qa #app .glass-card, html body.desktop-light.route-qa #app .glass-card-frosted, html body.desktop-light.route-qa #app .desktop-qa-content, html body.desktop-light.route-qa #app .desktop-qa-answer-card { background: linear-gradient(180deg, rgba(22,143,131,.035), transparent 48px), #fff !important; box-shadow: 0 10px 28px rgba(31,45,51,.06) !important; } html body.desktop-light.route-qa #app .desktop-qa-question-types { background: #f7fbfb !important; } html body.desktop-light.route-qa #app .desktop-qa-question-type { background: #f3f8f8 !important; } html body.desktop-light.route-qa #app .desktop-qa-question-type.is-active, html body.desktop-light.route-qa #app .desktop-qa-question-type[aria-pressed="true"], html body.desktop-light.route-qa #app .capsule-selected { color: #0f6a62 !important; background: #d9f1ee !important; } html body.desktop-light.route-qa #app textarea:focus, html body.desktop-light.route-qa #app taro-textarea-core:focus-within, html body.desktop-light.route-qa #app input:focus, html body.desktop-light.route-qa #app taro-input-core:focus-within { background: #fff !important; } html body.desktop-light.route-qa #app .desktop-qa-submit, html body.desktop-light.route-qa #app button[class*="bg-gradient-primary"], html body.desktop-light.route-qa #app button[class*="bg-primary"] { color: #fff !important; } } /* Final header type lock — beats leftover route 36/16/12 rules without waiting for JS. */ @media (min-width:981px) { html body:not(.route-auth) :is( #desktop-broadcast .broadcast-head h1, #desktop-qa-header h1, #desktop-grade-header h1, #desktop-exam-list-header h1, #desktop-my-data .profile-page-head h1, #desktop-checkin .checkin-header h1, #desktop-study-room .focus-head h1, #desktop-learning-report .report-head h1, #desktop-course-hub .course-center-head h1, #desktop-course-hub .course-hero h1, #desktop-official-library .official-library-head h1, #desktop-official-templates .official-templates-head h1, #desktop-exam-hub .exam-hub-head h1, #desktop-exam-topics .exam-hub-head h1, #desktop-exam-schools .exam-hub-head h1, #desktop-exam-papers .exam-paper-head h1, #desktop-exam-topic-dashboard .topic-dash-head h1, #desktop-exam-447-analysis .topic-dash-head h1, #desktop-exam-theory-schools .topic-dash-head h1, #desktop-admin-portal .admin-portal-head h1, #desktop-admin-dashboard .admin-dashboard-head h1, #desktop-guide .guide-hero h1 ), html body.route-qa #desktop-qa-header h1, html body.route-grade #desktop-grade-header h1 { margin: 7px 0 9px !important; font-size: 30px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0 !important; } html body:not(.route-auth) :is( #desktop-broadcast .broadcast-head p, #desktop-qa-header p, #desktop-grade-header p, #desktop-exam-list-header p, #desktop-my-data .profile-page-head p, #desktop-checkin .checkin-header p, #desktop-study-room .focus-head p, #desktop-learning-report .report-head p, #desktop-course-hub .course-center-head p, #desktop-course-hub .course-hero p, #desktop-official-library .official-library-head p, #desktop-official-templates .official-templates-head p, #desktop-exam-hub .exam-hub-head p, #desktop-exam-topics .exam-hub-head p, #desktop-exam-schools .exam-hub-head p, #desktop-exam-papers .exam-paper-head p, #desktop-exam-topic-dashboard .topic-dash-head p, #desktop-exam-447-analysis .topic-dash-head p, #desktop-exam-theory-schools .topic-dash-head p, #desktop-admin-portal .admin-portal-head p, #desktop-admin-dashboard .admin-dashboard-head p, #desktop-guide .guide-hero p ), html body.route-qa #desktop-qa-header p, html body.route-grade #desktop-grade-header p { max-width: 680px !important; margin: 0 !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.5 !important; } html body:not(.route-auth) :is( #desktop-broadcast .broadcast-head-label > span, #desktop-qa-header > div > span, #desktop-grade-header > div > span, #desktop-exam-list-header > div > span, #desktop-my-data .profile-page-head > div > span, #desktop-study-room .focus-head > div > span, #desktop-learning-report .report-head > div > span, #desktop-course-hub .course-center-head > div > span, #desktop-official-library .official-library-head > div > span, #desktop-official-templates .official-templates-head > div > span, #desktop-exam-hub .exam-hub-head > div > span, #desktop-exam-topics .exam-hub-head > div > span, #desktop-exam-schools .exam-hub-head > div > span, #desktop-exam-papers .exam-paper-head > div > span, #desktop-exam-topic-dashboard .topic-dash-head > div > span, #desktop-exam-447-analysis .topic-dash-head > div > span, #desktop-exam-theory-schools .topic-dash-head > div > span, #desktop-admin-portal .admin-portal-head > div > span, #desktop-admin-dashboard .admin-dashboard-head > div > span ), html body.route-qa #desktop-qa-header > div > span, html body.route-grade #desktop-grade-header > div > span { display: block !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .08em !important; line-height: 1.3 !important; } } /* Login credit — designed replacement for “下一站，上岸”. */ body.route-auth #app .blessing-text { margin-top: 30px !important; color: transparent !important; font-size: 0 !important; letter-spacing: 0 !important; text-align: center !important; line-height: 1.6 !important; } body.route-auth #app .blessing-text::before { content: "GBC STUDIO"; display: inline; color: #35d6c5; font: 700 11px/1.4 "IBM Plex Sans", "DIN Alternate", "PingFang SC", sans-serif; letter-spacing: .28em; vertical-align: baseline; } body.route-auth #app .blessing-text::after { content: " · URBAN PLANNING LEARNING SYSTEM"; display: inline; color: #8b919a; font: 500 10px/1.4 "IBM Plex Sans", "DIN Alternate", sans-serif; letter-spacing: .13em; vertical-align: baseline; } body.desktop-light.route-auth #app .blessing-text::before { color: #168f83; } body.desktop-light.route-auth #app .blessing-text::after { color: #6b7b82; } /* ============================================================ CANONICAL QA/GRADE LOCK (single end ownership). - route-qa and route-grade are mutually exclusive in JS - opposite workspace chrome is removed in JS - this block only enforces visibility + hide dead overlays Studio UI + Grade ONE above own all visuals. ============================================================ */ @media (min-width:981px) { #desktop-qa-workspace, #desktop-qa-mode, #desktop-grade-workspace-redesign, #desktop-qa-workspace-RETIRED, #desktop-grade-workspace-redesign-RETIRED, #desktop-qa-mode-RETIRED { display: none !important; visibility: hidden !important; pointer-events: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; } html body.route-qa #app, html body.route-grade #app, html body.desktop-custom-view.route-qa #app, html body.desktop-custom-view.route-grade #app { visibility: visible !important; pointer-events: auto !important; opacity: 1 !important; } /* Never paint Grade chrome on QA route, and vice versa */ html body.route-qa #desktop-grade-header, html body.route-qa #app #desktop-grade-header, html body.route-qa #app .desktop-grade-native-hero, html body.route-qa #app .desktop-grade-content, html body.route-qa #app .desktop-grade-typebar { display: none !important; } html body.route-grade #desktop-qa-header, html body.route-grade #app #desktop-qa-header, html body.route-grade #app #free-chat-hero, html body.route-grade #app .desktop-qa-native-modebar { display: none !important; } html body.route-qa #app #desktop-qa-header { display: flex !important; visibility: visible !important; opacity: 1 !important; } html body.route-grade #app #desktop-grade-header { display: flex !important; visibility: visible !important; opacity: 1 !important; } html body.route-grade #app .desktop-grade-content { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 18px !important; } html body.route-grade #app .desktop-grade-native-hero, html body.route-grade #app .desktop-grade-legacy-intro, html body.route-grade #app .desktop-legacy-topbar, html body.route-qa #app .desktop-qa-legacy-header, html body.route-qa #app .desktop-legacy-topbar { display: none !important; } } /* Profile learning desk — final ownership for this route. */ /* A personal home, rather than an account header. */ /* ============================================================ STUDIO PAIR — QA + Grade unified comfort polish. One charcoal-teal language, no pure white surfaces. ============================================================ */ @media (min-width:981px) { html body.route-qa, html body.route-grade { --studio-bg: #07090c; --studio-panel: #10151b; --studio-panel-2: #141b22; --studio-input: #0a0e12; --studio-line: #27333c; --studio-line-soft: #1f292f; --studio-text: #e6eef0; --studio-muted: #8b969f; --studio-faint: #6f7b84; --studio-accent: #3dcec0; --studio-accent-ink: #041816; --studio-accent-soft: rgba(61,206,192,.14); --studio-radius: 8px; --studio-radius-lg: 12px; } /* --- Shared page atmosphere --- */ html body.route-qa:not(.desktop-light) #app, html body.route-grade:not(.desktop-light) #app, html body.desktop-dark.route-qa #app, html body.desktop-dark.route-grade #app, html body.route-qa:not(.desktop-light) #container, html body.route-grade:not(.desktop-light) #container { background: var(--studio-bg) !important; color: var(--studio-text) !important; } html body.route-qa:not(.desktop-light) #app .min-h-screen, html body.route-grade:not(.desktop-light) #app .min-h-screen, html body.route-grade:not(.desktop-light) #app .desktop-grade-native, html body.route-grade:not(.desktop-light) #app .desktop-grade-workspace, html body.desktop-dark.route-qa #app .min-h-screen, html body.desktop-dark.route-grade #app .min-h-screen, html body.desktop-dark.route-grade #app .desktop-grade-native, html body.desktop-dark.route-grade #app .desktop-grade-workspace { background: radial-gradient(880px 380px at 10% -6%, rgba(61,206,192,.08), transparent 56%), radial-gradient(640px 320px at 92% 8%, rgba(61,206,192,.04), transparent 52%), var(--studio-bg) !important; background-color: var(--studio-bg) !important; color: var(--studio-text) !important; } /* Headers */ html body.route-qa:not(.desktop-light) #app #desktop-qa-header, html body.route-grade:not(.desktop-light) #app #desktop-grade-header, html body.desktop-dark.route-qa #app #desktop-qa-header, html body.desktop-dark.route-grade #app #desktop-grade-header { border-bottom-color: var(--studio-line-soft) !important; background: transparent !important; } html body.route-qa:not(.desktop-light) #app #desktop-qa-header > div > span, html body.route-grade:not(.desktop-light) #app #desktop-grade-header > div > span, html body.desktop-dark.route-qa #app #desktop-qa-header > div > span, html body.desktop-dark.route-grade #app #desktop-grade-header > div > span { color: var(--studio-accent) !important; letter-spacing: .12em !important; } html body.route-qa:not(.desktop-light) #app #desktop-qa-header h1, html body.route-grade:not(.desktop-light) #app #desktop-grade-header h1, html body.desktop-dark.route-qa #app #desktop-qa-header h1, html body.desktop-dark.route-grade #app #desktop-grade-header h1 { color: var(--studio-text) !important; font-weight: 680 !important; } html body.route-qa:not(.desktop-light) #app #desktop-qa-header p, html body.route-grade:not(.desktop-light) #app #desktop-grade-header p, html body.desktop-dark.route-qa #app #desktop-qa-header p, html body.desktop-dark.route-grade #app #desktop-grade-header p { color: var(--studio-muted) !important; } html body.route-qa:not(.desktop-light) #app #desktop-qa-header a, html body.route-grade:not(.desktop-light) #app #desktop-grade-header a, html body.desktop-dark.route-qa #app #desktop-qa-header a, html body.desktop-dark.route-grade #app #desktop-grade-header a { border: 1px solid var(--studio-line) !important; border-radius: var(--studio-radius) !important; background: var(--studio-panel-2) !important; color: var(--studio-text) !important; transition: border-color .18s ease, background-color .18s ease, color .18s ease !important; } html body.route-qa:not(.desktop-light) #app #desktop-qa-header a:hover, html body.route-grade:not(.desktop-light) #app #desktop-grade-header a:hover, html body.desktop-dark.route-qa #app #desktop-qa-header a:hover, html body.desktop-dark.route-grade #app #desktop-grade-header a:hover { border-color: var(--studio-accent) !important; background: #122421 !important; color: #d9fffa !important; } /* Shared panel language */ html body.route-qa:not(.desktop-light) #app .glass-card, html body.route-qa:not(.desktop-light) #app .glass-card-frosted, html body.route-qa:not(.desktop-light) #app .desktop-qa-content, html body.route-qa:not(.desktop-light) #app .desktop-qa-answer-card, html body.route-grade:not(.desktop-light) #app .desktop-grade-typebar, html body.route-grade:not(.desktop-light) #app .desktop-grade-question-panel, html body.route-grade:not(.desktop-light) #app .desktop-grade-answer-panel, html body.route-grade:not(.desktop-light) #app .desktop-grade-history-shortcut, html body.route-grade:not(.desktop-light) #app .glass-card, html body.route-grade:not(.desktop-light) #app .glass-card-frosted, html body.desktop-dark.route-qa #app .glass-card, html body.desktop-dark.route-qa #app .glass-card-frosted, html body.desktop-dark.route-qa #app .desktop-qa-content, html body.desktop-dark.route-grade #app .desktop-grade-typebar, html body.desktop-dark.route-grade #app .desktop-grade-question-panel, html body.desktop-dark.route-grade #app .desktop-grade-answer-panel, html body.desktop-dark.route-grade #app .desktop-grade-history-shortcut, html body.desktop-dark.route-grade #app .glass-card, html body.desktop-dark.route-grade #app .glass-card-frosted { border: 1px solid var(--studio-line) !important; border-radius: var(--studio-radius-lg) !important; background: linear-gradient(180deg, rgba(61,206,192,.04), transparent 42px), var(--studio-panel) !important; color: var(--studio-text) !important; box-shadow: 0 10px 28px rgba(0,0,0,.18) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-typebar, html body.desktop-dark.route-grade #app .desktop-grade-typebar { background: linear-gradient(90deg, rgba(61,206,192,.09), var(--studio-panel) 58%) !important; padding: 18px 20px !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-question-panel > div:first-child, html body.route-grade:not(.desktop-light) #app .desktop-grade-answer-panel > div:first-child, html body.desktop-dark.route-grade #app .desktop-grade-question-panel > div:first-child, html body.desktop-dark.route-grade #app .desktop-grade-answer-panel > div:first-child { border-bottom: 1px solid var(--studio-line-soft) !important; background: var(--studio-panel-2) !important; color: var(--studio-text) !important; } /* Chips / options */ html body.route-qa:not(.desktop-light) #app .desktop-qa-question-type, html body.route-grade:not(.desktop-light) #app .desktop-grade-type-option, html body.route-grade:not(.desktop-light) #app .desktop-grade-typebar button, html body.route-grade:not(.desktop-light) #app .desktop-grade-typebar taro-button-core, html body.desktop-dark.route-qa #app .desktop-qa-question-type, html body.desktop-dark.route-grade #app .desktop-grade-type-option, html body.desktop-dark.route-grade #app .desktop-grade-typebar button, html body.desktop-dark.route-grade #app .desktop-grade-typebar taro-button-core { border: 1px solid var(--studio-line) !important; border-radius: var(--studio-radius) !important; background: #171e25 !important; background-image: none !important; color: var(--studio-muted) !important; box-shadow: none !important; } html body.route-qa:not(.desktop-light) #app .desktop-qa-question-type.is-active, html body.route-qa:not(.desktop-light) #app .desktop-qa-question-type[aria-pressed="true"], html body.route-grade:not(.desktop-light) #app .desktop-grade-type-option.capsule-selected, html body.route-grade:not(.desktop-light) #app .desktop-grade-type-option.is-active, html body.route-grade:not(.desktop-light) #app .desktop-grade-type-option[aria-pressed="true"], html body.route-grade:not(.desktop-light) #app .desktop-grade-typebar .capsule-selected, html body.desktop-dark.route-qa #app .desktop-qa-question-type.is-active, html body.desktop-dark.route-qa #app .desktop-qa-question-type[aria-pressed="true"], html body.desktop-dark.route-grade #app .desktop-grade-type-option.capsule-selected, html body.desktop-dark.route-grade #app .desktop-grade-type-option.is-active, html body.desktop-dark.route-grade #app .desktop-grade-type-option[aria-pressed="true"], html body.desktop-dark.route-grade #app .desktop-grade-typebar .capsule-selected { border-color: var(--studio-accent) !important; background: var(--studio-accent-soft) !important; color: #d5fffa !important; box-shadow: inset 0 0 0 1px rgba(61,206,192,.16) !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-input-modebar, html body.desktop-dark.route-grade #app .desktop-grade-input-modebar { border: 1px solid var(--studio-line) !important; background: var(--studio-input) !important; border-radius: var(--studio-radius) !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-input-mode.capsule-selected, html body.route-grade:not(.desktop-light) #app .desktop-grade-input-mode.is-active, html body.route-grade:not(.desktop-light) #app .desktop-grade-input-mode[aria-pressed="true"], html body.desktop-dark.route-grade #app .desktop-grade-input-mode.capsule-selected, html body.desktop-dark.route-grade #app .desktop-grade-input-mode.is-active, html body.desktop-dark.route-grade #app .desktop-grade-input-mode[aria-pressed="true"] { background: #1a3d39 !important; color: #d5fffa !important; } /* Inputs */ html body.route-qa:not(.desktop-light) #app textarea, html body.route-qa:not(.desktop-light) #app taro-textarea-core, html body.route-qa:not(.desktop-light) #app input, html body.route-qa:not(.desktop-light) #app taro-input-core, html body.route-grade:not(.desktop-light) #app textarea, html body.route-grade:not(.desktop-light) #app taro-textarea-core, html body.route-grade:not(.desktop-light) #app input, html body.route-grade:not(.desktop-light) #app taro-input-core, html body.desktop-dark.route-qa #app textarea, html body.desktop-dark.route-qa #app taro-textarea-core, html body.desktop-dark.route-qa #app input, html body.desktop-dark.route-grade #app textarea, html body.desktop-dark.route-grade #app taro-textarea-core, html body.desktop-dark.route-grade #app input { border: 1px solid var(--studio-line) !important; border-radius: var(--studio-radius) !important; background: var(--studio-input) !important; color: var(--studio-text) !important; box-shadow: none !important; } html body.route-qa:not(.desktop-light) #app textarea:focus, html body.route-qa:not(.desktop-light) #app taro-textarea-core:focus-within, html body.route-grade:not(.desktop-light) #app textarea:focus, html body.route-grade:not(.desktop-light) #app taro-textarea-core:focus-within, html body.desktop-dark.route-qa #app textarea:focus, html body.desktop-dark.route-qa #app taro-textarea-core:focus-within, html body.desktop-dark.route-grade #app textarea:focus, html body.desktop-dark.route-grade #app taro-textarea-core:focus-within { border-color: var(--studio-accent) !important; background: #0b1214 !important; box-shadow: 0 0 0 3px rgba(61,206,192,.12) !important; } /* Primary actions — teal fill, deep ink (no white) */ html body.route-qa:not(.desktop-light) #app .desktop-qa-submit, html body.route-grade:not(.desktop-light) #app .desktop-grade-submit, html body.desktop-dark.route-qa #app .desktop-qa-submit, html body.desktop-dark.route-grade #app .desktop-grade-submit { border: 1px solid var(--studio-accent) !important; border-radius: var(--studio-radius) !important; background: var(--studio-accent) !important; background-image: none !important; color: var(--studio-accent-ink) !important; box-shadow: 0 8px 20px rgba(61,206,192,.16) !important; } html body.route-qa:not(.desktop-light) #app .desktop-qa-submit *, html body.route-grade:not(.desktop-light) #app .desktop-grade-submit *, html body.desktop-dark.route-qa #app .desktop-qa-submit *, html body.desktop-dark.route-grade #app .desktop-grade-submit * { color: var(--studio-accent-ink) !important; } /* Kill leftover pure white / lavender glass on both routes */ html body.route-qa:not(.desktop-light) #app .__linka_perf_dead [style*="rgba(255,255,255"], html body.route-qa:not(.desktop-light) #app .__linka_perf_dead [style*="rgba(255, 255, 255"], html body.route-grade:not(.desktop-light) #app .__linka_perf_dead [style*="rgba(255,255,255"], html body.route-grade:not(.desktop-light) #app .__linka_perf_dead [style*="rgba(255, 255, 255"], html body.desktop-dark.route-qa #app .__linka_perf_dead [style*="rgba(255,255,255"], html body.desktop-dark.route-qa #app .__linka_perf_dead [style*="rgba(255, 255, 255"], html body.desktop-dark.route-grade #app .__linka_perf_dead [style*="rgba(255,255,255"], html body.desktop-dark.route-grade #app .__linka_perf_dead [style*="rgba(255, 255, 255"] { background: var(--studio-panel) !important; background-image: none !important; } html body.route-qa:not(.desktop-light) #app .bg-white, html body.route-qa:not(.desktop-light) #app .bg-card, html body.route-grade:not(.desktop-light) #app .bg-white, html body.route-grade:not(.desktop-light) #app .bg-card, html body.desktop-dark.route-qa #app .bg-white, html body.desktop-dark.route-qa #app .bg-card, html body.desktop-dark.route-grade #app .bg-white, html body.desktop-dark.route-grade #app .bg-card { background: var(--studio-panel) !important; } html body.route-qa:not(.desktop-light) #app .__linka_perf_dead [class*="text-muted"], html body.route-grade:not(.desktop-light) #app .__linka_perf_dead [class*="text-muted"], html body.desktop-dark.route-qa #app .__linka_perf_dead [class*="text-muted"], html body.desktop-dark.route-grade #app .__linka_perf_dead [class*="text-muted"] { color: var(--studio-muted) !important; } html body.route-qa:not(.desktop-light) #app .__linka_perf_dead [class*="text-foreground"], html body.route-grade:not(.desktop-light) #app .__linka_perf_dead [class*="text-foreground"], html body.desktop-dark.route-qa #app .__linka_perf_dead [class*="text-foreground"], html body.desktop-dark.route-grade #app .__linka_perf_dead [class*="text-foreground"] { color: var(--studio-text) !important; } /* Mode track — quieter */ html body.route-qa:not(.desktop-light) #app #free-chat-hero .desktop-qa-native-modebar, html body.desktop-dark.route-qa #app #free-chat-hero .desktop-qa-native-modebar { background: var(--studio-panel-2) !important; border-color: var(--studio-line) !important; box-shadow: none !important; } /* Light theme: mist instead of white */ html body.desktop-light.route-qa, html body.desktop-light.route-grade { --studio-bg: #eef2f3; --studio-panel: #e6ecee; --studio-panel-2: #dde5e7; --studio-input: #f0f4f5; --studio-line: #c9d5d8; --studio-line-soft: #d5dfe1; --studio-text: #1f2d33; --studio-muted: #65757c; --studio-faint: #839199; --studio-accent: #168f83; --studio-accent-ink: #e8fffa; --studio-accent-soft: rgba(22,143,131,.14); } html body.desktop-light.route-qa #app, html body.desktop-light.route-grade #app, html body.desktop-light.route-qa #app .min-h-screen, html body.desktop-light.route-grade #app .min-h-screen, html body.desktop-light.route-grade #app .desktop-grade-native { background: var(--studio-bg) !important; color: var(--studio-text) !important; } html body.desktop-light.route-qa #app .glass-card, html body.desktop-light.route-qa #app .glass-card-frosted, html body.desktop-light.route-qa #app .desktop-qa-content, html body.desktop-light.route-grade #app .desktop-grade-typebar, html body.desktop-light.route-grade #app .desktop-grade-question-panel, html body.desktop-light.route-grade #app .desktop-grade-answer-panel, html body.desktop-light.route-grade #app .desktop-grade-history-shortcut, html body.desktop-light.route-grade #app .glass-card, html body.desktop-light.route-grade #app .glass-card-frosted { background: var(--studio-panel) !important; border-color: var(--studio-line) !important; box-shadow: 0 8px 22px rgba(31,45,51,.05) !important; } html body.desktop-light.route-qa #app #desktop-qa-header a, html body.desktop-light.route-grade #app #desktop-grade-header a { background: var(--studio-panel-2) !important; border-color: var(--studio-line) !important; } } /* ============================================================ STUDIO PAIR v2 — quieter rhythm for QA + Grade. Scrollbars unchanged (site default 7px). ============================================================ */ @media (min-width:981px) { /* Slightly roomier page rhythm */ html body.route-qa #app .min-h-screen, html body.route-grade #app .min-h-screen, html body.route-grade #app .desktop-grade-native, html body.route-grade #app .desktop-grade-workspace { padding-top: 48px !important; padding-bottom: 72px !important; } html body.route-qa #app #desktop-qa-header, html body.route-grade #app #desktop-grade-header { margin-bottom: 22px !important; padding-bottom: 22px !important; } /* Mode row breathing room */ html body.route-qa #app #free-chat-hero, html body.route-qa #app #free-chat-hero.desktop-qa-native-intro { margin-bottom: 18px !important; } /* Panels: softer inner padding language */ html body.route-qa #app .desktop-qa-question-types { padding: 20px 22px 18px !important; } html body.route-qa #app .desktop-qa-question-entry > div:first-child { min-height: 52px !important; padding: 0 22px !important; } html body.route-qa #app .desktop-qa-question-entry > div:last-child { padding: 18px 22px 22px !important; gap: 14px !important; } html body.route-qa #app textarea, html body.route-qa #app taro-textarea-core { min-height: 180px !important; padding: 14px 15px !important; line-height: 1.65 !important; } /* Grade grid: calmer gap + panel headers */ html body.route-grade #app .desktop-grade-content { gap: 16px !important; } html body.route-grade #app .desktop-grade-typebar { padding: 16px 18px !important; } html body.route-grade #app .desktop-grade-typebar::before { content: "题型" !important; color: var(--studio-text, #e6eef0) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .02em !important; } html body.route-grade #app .desktop-grade-question-panel, html body.route-grade #app .desktop-grade-answer-panel { min-height: 420px !important; } html body.route-grade #app .desktop-grade-question-panel > div:first-child, html body.route-grade #app .desktop-grade-answer-panel > div:first-child { min-height: 54px !important; padding: 0 18px !important; } html body.route-grade #app .desktop-grade-question-panel > div:last-child, html body.route-grade #app .desktop-grade-answer-panel > div:last-child { padding: 16px 18px 18px !important; } html body.route-grade #app .desktop-grade-question-panel textarea, html body.route-grade #app .desktop-grade-answer-panel textarea, html body.route-grade #app .desktop-grade-question-panel taro-textarea-core, html body.route-grade #app .desktop-grade-answer-panel taro-textarea-core { min-height: 260px !important; } /* Submit: full-width grade, quieter elevation */ html body.route-grade #app .desktop-grade-submit { min-height: 44px !important; margin-top: 2px !important; font-weight: 750 !important; letter-spacing: .03em !important; box-shadow: 0 6px 16px rgba(61,206,192,.14) !important; } html body.route-qa #app .desktop-qa-submit { min-height: 40px !important; box-shadow: 0 6px 16px rgba(61,206,192,.14) !important; } /* History row: sit quieter under workspace */ html body.route-grade #app .desktop-grade-history-shortcut { margin-top: 2px !important; padding: 14px 16px !important; } } /* AUTH GATEWAY FINAL OVERRIDE — must stay at EOF (legacy mobile rules precede it). */ @media (min-width:981px) { html body.route-auth, html body.route-auth #app, html body.route-auth #app > .taro_page { width:100% !important; min-width:0 !important; min-height:100vh !important; margin:0 !important; background:#070b10 !important; } html body.route-auth #app { padding:0 !important; } html body.route-auth #app .min-h-screen.desktop-auth-page, html body.route-auth #app .min-h-screen { isolation:isolate !important; position:relative !important; display:grid !important; grid-template-columns:minmax(0,1.18fr) minmax(400px,.82fr) !important; grid-template-rows:minmax(0,1fr) !important;align-items:start !important; gap:clamp(48px,7vw,144px) !important; width:100% !important; max-width:none !important; min-height:100vh !important; margin:0 !important; padding:clamp(104px,10vh,132px) clamp(44px,8vw,154px) 68px !important; overflow-x:clip !important; overflow-y:auto !important; color:#edf8f6 !important; background:radial-gradient(ellipse 62% 74% at 18% 52%,rgba(34,222,197,.14),transparent 62%),radial-gradient(ellipse 42% 55% at 78% 22%,rgba(70,112,255,.16),transparent 69%),linear-gradient(116deg,#071015 0%,#080d13 48%,#0a0d17 100%) !important; } html body.route-auth #app .min-h-screen::before { position:absolute !important; z-index:-1 !important; inset:0 !important; pointer-events:none !important; opacity:.34 !important; content:"" !important; background-image:linear-gradient(rgba(131,247,230,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(131,247,230,.055) 1px,transparent 1px) !important; background-size:48px 48px !important; mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.48) 48%,transparent 86%) !important; } html body.route-auth #app .min-h-screen::after { position:absolute !important; z-index:-1 !important; width:min(52vw,760px) !important; height:min(52vw,760px) !important; right:-20vw !important; top:8vh !important; pointer-events:none !important; content:"" !important; border:1px solid rgba(112,250,233,.13) !important; border-radius:50% !important; box-shadow:0 0 0 56px rgba(112,250,233,.025),0 0 0 112px rgba(112,250,233,.018) !important; } html body.route-auth #app #desktop-auth-stage { grid-column:1 !important; grid-row:1 !important; align-self:stretch !important; min-height:0 !important; padding:0 !important; display:flex !important; align-items:center !important; } html body.route-auth #app .desktop-auth-stage-copy { max-width:620px !important; padding:0 0 20px !important; } html body.route-auth #app .desktop-auth-stage-visual { inset:50% -10vw auto auto !important; width:min(55vw,720px) !important; transform:translateY(-50%) !important; opacity:.92 !important; } html body.route-auth #app .desktop-auth-kicker { display:flex !important; align-items:center !important; gap:11px !important; color:#6ff3df !important; font-size:11px !important; letter-spacing:.2em !important; } html body.route-auth #app .desktop-auth-kicker::before { width:34px !important; height:1px !important; background:currentColor !important; content:"" !important; } html body.route-auth #app .desktop-auth-stage-copy h1, html body.route-auth #app .desktop-auth-stage-copy [data-auth-stage-title] { max-width:590px !important; margin:22px 0 20px !important; color:#f5fffd !important; font-size:clamp(44px,4.4vw,74px) !important; font-weight:800 !important; line-height:1.06 !important; letter-spacing:-.045em !important; } html body.route-auth #app .desktop-auth-stage-sub { max-width:455px !important; color:#b5c6c8 !important; font-size:15px !important; line-height:1.85 !important; } html body.route-auth #app .desktop-auth-stage-status { margin-top:8px !important; border-color:rgba(130,245,226,.2) !important; border-radius:999px !important; background:rgba(13,39,43,.42) !important; color:#c0d7d4 !important; } html body.route-auth #app .desktop-auth-feature-list { max-width:600px !important; margin-top:42px !important; gap:10px !important; } html body.route-auth #app .desktop-auth-feature-list li { min-height:94px !important; padding:15px 16px !important; border-color:rgba(126,240,225,.16) !important; border-radius:12px !important; background:linear-gradient(145deg,rgba(24,48,53,.72),rgba(13,20,29,.42)) !important; backdrop-filter:blur(10px) !important; } html body.route-auth #app .desktop-auth-panel { grid-column:2 !important; grid-row:1 !important; align-self:start !important; justify-self:stretch !important; max-height:calc(100vh - 140px) !important; overflow-y:auto !important; width:100% !important; max-width:480px !important; min-width:0 !important; margin:0 !important; padding:clamp(28px,3vw,42px) !important; border:1px solid rgba(164,247,237,.22) !important; border-radius:24px !important; background:linear-gradient(145deg,rgba(21,32,43,.88),rgba(10,15,24,.88)) !important; box-shadow:0 30px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08) !important; backdrop-filter:blur(24px) saturate(130%) !important; } html body.route-auth #app .desktop-auth-panel::before { margin-bottom:18px !important; color:#71f6e2 !important; font-size:10px !important; letter-spacing:.22em !important; } html body.route-auth #app .desktop-auth-panel > div { min-width:0 !important; } html body.route-auth #app .desktop-auth-panel .desktop-auth-mode-switch { display:flex !important; gap:4px !important; margin:0 0 28px !important; padding:4px !important; border:1px solid rgba(160,241,231,.12) !important; border-radius:12px !important; background:rgba(2,8,13,.46) !important; } html body.route-auth #app .desktop-auth-tab { flex:1 1 0 !important; min-width:0 !important; height:42px !important; padding:0 10px !important; border:0 !important; border-radius:8px !important; background:transparent !important; color:#93a8ae !important; font-size:13px !important; } html body.route-auth #app .desktop-auth-tab.capsule-selected, html body.route-auth #app .desktop-auth-tab[aria-pressed="true"] { background:linear-gradient(135deg,#3ce3cf,#6ba9fc) !important; color:#06201e !important; font-weight:800 !important; box-shadow:0 8px 22px rgba(61,221,204,.2) !important; } html body.route-auth #app .desktop-auth-form-body { display:grid !important; gap:14px !important; } html body.route-auth #app .desktop-auth-panel :is(input,taro-input-core) { box-sizing:border-box !important; width:100% !important; min-height:50px !important; padding:0 15px !important; border:1px solid rgba(166,223,222,.16) !important; border-radius:10px !important; background:rgba(4,12,19,.66) !important; color:#effdfa !important; font-size:14px !important; } html body.route-auth #app .desktop-auth-primary { width:100% !important; min-height:52px !important; margin-top:8px !important; border:0 !important; border-radius:10px !important; background:linear-gradient(104deg,#51ead7,#80b4ff) !important; color:#061c20 !important; font-size:15px !important; font-weight:800 !important; box-shadow:0 12px 30px rgba(67,218,206,.22) !important; } } @media (max-width:980px) { html body.route-auth #app { padding:0 !important; } html body.route-auth #app .min-h-screen.desktop-auth-page,html body.route-auth #app .min-h-screen { display:block !important; width:100% !important; min-height:100vh !important; padding:92px 20px 44px !important; background:radial-gradient(circle at 16% 10%,rgba(45,225,202,.18),transparent 38%),#080d13 !important; } html body.route-auth #app #desktop-auth-stage { display:none !important; } html body.route-auth #app .desktop-auth-panel { width:min(100%,480px) !important; margin:0 auto !important; padding:28px 20px !important; border-radius:20px !important; } html body.route-auth #app .desktop-auth-homebar { left:20px !important; right:20px !important; top:20px !important; } } /* AUTH HOMEPAGE RESTORE: standalone dark learning gateway. */ @media (min-width:981px) { html body.route-auth #app .min-h-screen.desktop-auth-page, html body.route-auth #app .min-h-screen { position:relative!important; display:grid!important; grid-template-columns:minmax(500px,1.3fr) minmax(380px,460px)!important; align-items:center!important; gap:36px 72px!important; min-height:100vh!important; padding:104px 7vw 54px!important; box-sizing:border-box!important; overflow-x:hidden!important; overflow-y:auto!important; color:#ecebf0!important; background:#09090b!important; background-image:linear-gradient(115deg,rgba(7,10,14,.34) 15%,rgba(7,10,14,.86) 72%),radial-gradient(circle at 43% 48%,rgba(35,184,171,.12),transparent 27%),radial-gradient(circle at 89% 12%,rgba(85,116,206,.14),transparent 25%)!important; } html body.route-auth #app .desktop-auth-homebar { position:absolute!important; z-index:10!important; top:26px!important; left:7vw!important; right:7vw!important; display:flex!important; align-items:center!important; justify-content:space-between!important; } html body.route-auth #app .desktop-auth-homebar-brand { display:inline-flex!important; align-items:center!important; gap:11px!important; color:#fff!important; text-decoration:none!important; } html body.route-auth #app .desktop-auth-homebar-mark { position:relative!important; width:27px!important; height:27px!important; border:1px solid rgba(73,235,220,.65)!important; border-radius:50%!important; box-shadow:0 0 20px rgba(53,214,197,.28)!important; } html body.route-auth #app .desktop-auth-homebar-mark i { position:absolute!important; width:5px!important; height:5px!important; border-radius:50%!important; background:#4af0dc!important; box-shadow:0 0 9px #4af0dc!important; } html body.route-auth #app .desktop-auth-homebar-mark i:nth-child(1){left:5px;top:8px} html body.route-auth #app .desktop-auth-homebar-mark i:nth-child(2){right:5px;top:5px} html body.route-auth #app .desktop-auth-homebar-mark i:nth-child(3){right:7px;bottom:5px} html body.route-auth #app .desktop-auth-homebar-brand b { display:block!important; font-size:14px!important; line-height:1.1!important; letter-spacing:.12em!important; } html body.route-auth #app .desktop-auth-homebar-brand em { display:block!important; margin-top:4px!important; color:#8c969e!important; font-size:10px!important; font-style:normal!important; } html body.route-auth #app .desktop-auth-homebar-actions { display:flex!important; gap:7px!important; } html body.route-auth #app .desktop-auth-homebar-actions button { min-width:74px!important; height:38px!important; padding:0 14px!important; border:1px solid transparent!important; border-radius:5px!important; background:transparent!important; color:#b7c0c4!important; font-size:13px!important; font-weight:600!important; } html body.route-auth #app .desktop-auth-homebar-actions button:last-child { border-color:rgba(73,235,220,.44)!important; color:#dffffb!important; } html body.route-auth #app .desktop-auth-homebar-actions button.is-active { background:rgba(37,171,159,.18)!important; border-color:rgba(73,235,220,.74)!important; color:#fff!important; box-shadow:0 0 22px rgba(35,203,187,.14)!important; } html body.route-auth #app #desktop-auth-stage { position:relative!important; z-index:2!important; grid-column:1!important; min-height:560px!important; display:grid!important; align-content:center!important; } html body.route-auth #app .desktop-auth-stage-visual { position:absolute!important; inset:2px -100px auto auto!important; width:min(100%,650px)!important; opacity:.78!important; pointer-events:none!important; } html body.route-auth #app .desktop-auth-stage-copy { position:relative!important; z-index:2!important; max-width:530px!important; } html body.route-auth #app .desktop-auth-stage-copy h1, html body.route-auth #app .desktop-auth-stage-copy [data-auth-stage-title] { max-width:440px!important; margin:16px 0 20px!important; color:#fff!important; font-size:clamp(40px,4vw,56px)!important; font-weight:800!important; line-height:1.08!important; letter-spacing:0!important; background:none!important; -webkit-text-fill-color:#fff!important; } html body.route-auth #app .desktop-auth-kicker { color:#35d6c5!important; font-size:11px!important; font-weight:700!important; letter-spacing:.16em!important; } html body.route-auth #app .desktop-auth-stage-sub { max-width:400px!important; margin:0 0 20px!important; color:#bdc5c8!important; font-size:15px!important; line-height:1.7!important; } html body.route-auth #app .desktop-auth-stage-status { display:inline-flex!important; align-items:center!important; gap:8px!important; padding:10px 13px!important; border:1px solid #303038!important; border-radius:4px!important; color:#aaa6b1!important; font-size:12px!important; } html body.route-auth #app .desktop-auth-stage-status i { width:6px!important; height:6px!important; border-radius:50%!important; background:#35d6c5!important; box-shadow:0 0 12px #35d6c5!important; } html body.route-auth #app .desktop-auth-feature-list { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important; width:100%!important; max-width:540px!important; margin:28px 0 0!important; padding:0!important; list-style:none!important; } html body.route-auth #app .desktop-auth-feature-list li { min-height:70px!important; padding:12px 13px!important; border:1px solid rgba(102,224,212,.16)!important; border-radius:6px!important; background:rgba(20,28,32,.55)!important; } html body.route-auth #app .desktop-auth-feature-list li span { color:#35d6c5!important; font-size:10px!important; font-weight:800!important; } html body.route-auth #app .desktop-auth-feature-list strong { display:block!important; margin-top:9px!important; color:#f1eff4!important; font-size:13px!important; line-height:1.35!important; } html body.route-auth #app .desktop-auth-feature-list em { display:none!important; } html body.route-auth #app .desktop-auth-brand { display:none!important; } html body.route-auth #app .desktop-auth-panel { position:relative!important; z-index:3!important; grid-column:2!important; width:100%!important; max-width:460px!important; justify-self:end!important; padding:22px!important; border:1px solid rgba(53,214,197,.16)!important; border-radius:8px!important; background:rgba(11,15,19,.72)!important; box-shadow:0 24px 70px rgba(0,0,0,.42)!important; } html body.route-auth #app .desktop-auth-panel::before { content:"ACCESS PORTAL"!important; display:block!important; margin-bottom:14px!important; color:#45d9ca!important; font-size:10px!important; font-weight:700!important; letter-spacing:.14em!important; } html body.route-auth #app .desktop-auth-mode-switch { display:flex!important; } } /* ============================================================ Site credit — GBC STUDIO · URBAN PLANNING LEARNING SYSTEM ============================================================ */ @media (min-width:981px) { #desktop-studio-credit { position: fixed; z-index: 70; left: var(--desktop-left-width, 300px); right: var(--desktop-right-width, 392px); bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 0; margin: 0; padding: 0 16px; pointer-events: none; text-align: center; white-space: nowrap; } body.desktop-nav-collapsed #desktop-studio-credit { left: 0; } body.context-collapsed #desktop-studio-credit, body:not(.route-has-context) #desktop-studio-credit { right: 0; } body.route-auth #desktop-studio-credit { left: 0 !important; right: 0 !important; bottom: 28px; } #desktop-studio-credit span { color: #35d6c5; font: 700 11px/1.4 "IBM Plex Sans", "DIN Alternate", "PingFang SC", sans-serif; letter-spacing: .28em; } #desktop-studio-credit small { margin-left: .35em; color: #8b919a; font: 500 10px/1.4 "IBM Plex Sans", "DIN Alternate", sans-serif; letter-spacing: .16em; } body.desktop-light #desktop-studio-credit span { color: #168f83; } body.desktop-light #desktop-studio-credit small { color: #6b7b82; } /* Avoid double credit on login */ body.has-studio-credit.route-auth #app .blessing-text, body.has-studio-credit.route-auth #app .blessing-text::before, body.has-studio-credit.route-auth #app .blessing-text::after { display: none !important; content: none !important; font-size: 0 !important; } /* Leave room so last content is not covered */ body:not(.route-auth) #app .min-h-screen, body:not(.route-auth) #desktop-today, body:not(.route-auth) #desktop-home, body:not(.route-auth) #desktop-broadcast, body:not(.route-auth) #desktop-my-data, body:not(.route-auth) #desktop-checkin, body:not(.route-auth) #desktop-study-room, body:not(.route-auth) #desktop-learning-report, body:not(.route-auth) #desktop-course-hub, body:not(.route-auth) #desktop-exam-hub, body:not(.route-auth) #desktop-exam-list, body:not(.route-auth) #desktop-exam-papers, body:not(.route-auth) #desktop-exam-topics, body:not(.route-auth) #desktop-exam-schools, body:not(.route-auth) #desktop-official-library, body:not(.route-auth) #desktop-official-templates, body:not(.route-auth) #desktop-interactive-learning, body:not(.route-auth) #desktop-admin-portal, body:not(.route-auth) #desktop-admin-dashboard, body:not(.route-auth) #desktop-guide { padding-bottom: 64px !important; } } /* ============================================================ MINIMAL LUXURY — fewer wireframes, quieter surfaces. Site header type lock + QA/Grade borderless studio. ============================================================ */ @media (min-width:981px) { /* --- Unified top bar type + position (all pages) --- */ #desktop-broadcast .broadcast-head, #desktop-qa-header, #desktop-grade-header, #desktop-exam-list-header, #desktop-my-data .profile-page-head, #desktop-checkin .checkin-header, #desktop-study-room .focus-head, #desktop-learning-report .report-head, #desktop-course-hub .course-center-head, #desktop-course-hub .course-hero, #desktop-official-library .official-library-head, #desktop-official-templates .official-templates-head, #desktop-exam-hub .exam-hub-head, #desktop-exam-topics .exam-hub-head, #desktop-exam-schools .exam-hub-head, #desktop-exam-papers .exam-paper-head, #desktop-exam-topic-dashboard .topic-dash-head, #desktop-exam-447-analysis .topic-dash-head, #desktop-exam-theory-schools .topic-dash-head, #desktop-admin-portal .admin-portal-head, #desktop-admin-dashboard .admin-dashboard-head, #desktop-guide .guide-hero { align-items: flex-end !important; justify-content: space-between !important; gap: 24px !important; margin: 0 0 22px !important; padding: 0 0 20px !important; border: 0 !important; border-bottom: 1px solid var(--desktop-page-header-hairline, #1c2329) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #desktop-qa-header > div > span, #desktop-grade-header > div > span, #desktop-broadcast .broadcast-head-label > span, #desktop-exam-list-header > div > span, #desktop-my-data .profile-page-head > div > span, #desktop-exam-hub .exam-hub-head > div > span, #desktop-exam-topics .exam-hub-head > div > span, #desktop-exam-schools .exam-hub-head > div > span, #desktop-exam-papers .exam-paper-head > div > span, #desktop-official-library .official-library-head > div > span, #desktop-official-templates .official-templates-head > div > span, #desktop-admin-portal .admin-portal-head > div > span, #desktop-admin-dashboard .admin-dashboard-head > div > span, #desktop-guide .guide-hero-layout > div > span, #desktop-course-hub .course-center-head > div > span, #desktop-checkin .checkin-header .checkin-eyebrow, #desktop-study-room .focus-head > div > span, #desktop-learning-report .report-head > div > span, #desktop-exam-topic-dashboard .topic-dash-head > div > span, #desktop-exam-447-analysis .topic-dash-head > div > span, #desktop-exam-theory-schools .topic-dash-head > div > span { display: block !important; margin: 0 !important; color: #3dcec0 !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .12em !important; line-height: 1.3 !important; } body.desktop-light #desktop-qa-header > div > span, body.desktop-light #desktop-grade-header > div > span, body.desktop-light #desktop-broadcast .broadcast-head-label > span, body.desktop-light #desktop-exam-list-header > div > span, body.desktop-light #desktop-my-data .profile-page-head > div > span, body.desktop-light #desktop-exam-hub .exam-hub-head > div > span, body.desktop-light #desktop-official-library .official-library-head > div > span, body.desktop-light #desktop-admin-portal .admin-portal-head > div > span { color: #168f83 !important; } #desktop-qa-header h1, #desktop-grade-header h1, #desktop-broadcast .broadcast-head h1, #desktop-exam-list-header h1, #desktop-my-data .profile-page-head h1, #desktop-checkin .checkin-header h1, #desktop-study-room .focus-head h1, #desktop-learning-report .report-head h1, #desktop-course-hub .course-center-head h1, #desktop-course-hub .course-hero h1, #desktop-official-library .official-library-head h1, #desktop-official-templates .official-templates-head h1, #desktop-exam-hub .exam-hub-head h1, #desktop-exam-topics .exam-hub-head h1, #desktop-exam-schools .exam-hub-head h1, #desktop-exam-papers .exam-paper-head h1, #desktop-exam-topic-dashboard .topic-dash-head h1, #desktop-exam-447-analysis .topic-dash-head h1, #desktop-exam-theory-schools .topic-dash-head h1, #desktop-admin-portal .admin-portal-head h1, #desktop-admin-dashboard .admin-dashboard-head h1, #desktop-guide .guide-hero h1 { margin: 6px 0 8px !important; font-size: 28px !important; font-weight: 650 !important; line-height: 1.22 !important; letter-spacing: -.01em !important; } #desktop-qa-header p, #desktop-grade-header p, #desktop-broadcast .broadcast-head p, #desktop-exam-list-header p, #desktop-my-data .profile-page-head p, #desktop-checkin .checkin-header p, #desktop-study-room .focus-head p, #desktop-learning-report .report-head p, #desktop-course-hub .course-center-head p, #desktop-course-hub .course-hero p, #desktop-official-library .official-library-head p, #desktop-official-templates .official-templates-head p, #desktop-exam-hub .exam-hub-head p, #desktop-exam-topics .exam-hub-head p, #desktop-exam-schools .exam-hub-head p, #desktop-exam-papers .exam-paper-head p, #desktop-exam-topic-dashboard .topic-dash-head p, #desktop-exam-447-analysis .topic-dash-head p, #desktop-exam-theory-schools .topic-dash-head p, #desktop-admin-portal .admin-portal-head p, #desktop-admin-dashboard .admin-dashboard-head p, #desktop-guide .guide-hero p { max-width: 640px !important; margin: 0 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.55 !important; } /* Header CTA: no boxed chip */ #desktop-qa-header a, #desktop-grade-header a, #desktop-qa-header .desktop-qa-header-actions a { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; min-width: 0 !important; height: auto !important; padding: 4px 0 !important; color: #3dcec0 !important; font-size: 13px !important; font-weight: 600 !important; } body.desktop-light #desktop-qa-header a, body.desktop-light #desktop-grade-header a { color: #168f83 !important; } #desktop-qa-header a:hover, #desktop-grade-header a:hover { background: transparent !important; color: #7ae6db !important; transform: none !important; } /* --- QA / Grade: tonal surfaces, almost no wireframe --- */ html body.route-qa #app .glass-card, html body.route-qa #app .glass-card-frosted, html body.route-qa #app .desktop-qa-content, html body.route-qa #app .desktop-qa-answer-card, html body.route-grade #app .desktop-grade-typebar, html body.route-grade #app .desktop-grade-question-panel, html body.route-grade #app .desktop-grade-answer-panel, html body.route-grade #app .desktop-grade-history-shortcut, html body.route-grade #app .glass-card, html body.route-grade #app .glass-card-frosted { border: 0 !important; border-radius: 14px !important; background: #10151b !important; box-shadow: none !important; outline: none !important; } body.desktop-light.route-qa #app .glass-card, body.desktop-light.route-qa #app .glass-card-frosted, body.desktop-light.route-qa #app .desktop-qa-content, body.desktop-light.route-grade #app .desktop-grade-typebar, body.desktop-light.route-grade #app .desktop-grade-question-panel, body.desktop-light.route-grade #app .desktop-grade-answer-panel, body.desktop-light.route-grade #app .desktop-grade-history-shortcut { background: #e8eef0 !important; border: 0 !important; box-shadow: none !important; } html body.route-qa #app .desktop-qa-content:hover, html body.route-qa #app .glass-card:hover, html body.route-qa #app .glass-card-frosted:hover { border: 0 !important; box-shadow: none !important; } html body.route-qa #app .desktop-qa-answer-card { border-left: 2px solid rgba(61,206,192,.55) !important; background: #10151b !important; } html body.route-qa #app .desktop-qa-question-types, html body.route-qa #app .desktop-qa-question-entry > div:first-child { border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.04) !important; background: transparent !important; } body.desktop-light.route-qa #app .desktop-qa-question-types, body.desktop-light.route-qa #app .desktop-qa-question-entry > div:first-child { border-bottom-color: rgba(31,45,51,.06) !important; } html body.route-grade #app .desktop-grade-typebar { background: #10151b !important; padding: 16px 18px !important; } html body.route-grade #app .desktop-grade-typebar::before { content: "题型" !important; color: #e6eef0 !important; font-size: 13px !important; font-weight: 650 !important; } html body.route-grade #app .desktop-grade-question-panel > div:first-child, html body.route-grade #app .desktop-grade-answer-panel > div:first-child { border-bottom: 1px solid rgba(255,255,255,.04) !important; background: transparent !important; } /* Chips: fill only */ html body.route-qa #app .desktop-qa-question-type, html body.route-grade #app .desktop-grade-type-option, html body.route-grade #app .desktop-grade-typebar button, html body.route-grade #app .desktop-grade-typebar taro-button-core { border: 0 !important; border-radius: 8px !important; background: rgba(255,255,255,.04) !important; color: #8b969f !important; box-shadow: none !important; } body.desktop-light.route-qa #app .desktop-qa-question-type, body.desktop-light.route-grade #app .desktop-grade-type-option, body.desktop-light.route-grade #app .desktop-grade-typebar button { background: rgba(31,45,51,.06) !important; color: #65757c !important; } html body.route-qa #app .desktop-qa-question-type.is-active, html body.route-qa #app .desktop-qa-question-type[aria-pressed="true"], html body.route-qa #app .capsule-selected, html body.route-grade #app .desktop-grade-type-option.capsule-selected, html body.route-grade #app .desktop-grade-type-option.is-active, html body.route-grade #app .desktop-grade-type-option[aria-pressed="true"], html body.route-grade #app .desktop-grade-typebar .capsule-selected { border: 0 !important; background: rgba(61,206,192,.16) !important; color: #d5fffa !important; box-shadow: none !important; } body.desktop-light.route-qa #app .desktop-qa-question-type.is-active, body.desktop-light.route-grade #app .desktop-grade-type-option.capsule-selected, body.desktop-light.route-grade #app .desktop-grade-typebar .capsule-selected { background: rgba(22,143,131,.14) !important; color: #0f6a62 !important; } html body.route-qa #app #free-chat-hero .desktop-qa-native-modebar { border: 0 !important; background: rgba(255,255,255,.04) !important; box-shadow: none !important; border-radius: 999px !important; } html body.route-qa #app #free-chat-hero .desktop-qa-native-mode.is-active, html body.route-qa #app #free-chat-hero .desktop-qa-native-mode[aria-pressed="true"] { box-shadow: none !important; } html body.route-grade #app .desktop-grade-input-modebar { border: 0 !important; background: rgba(255,255,255,.04) !important; border-radius: 8px !important; } /* Inputs: whisper border */ html body.route-qa #app textarea, html body.route-qa #app taro-textarea-core, html body.route-qa #app input, html body.route-qa #app taro-input-core, html body.route-grade #app textarea, html body.route-grade #app taro-textarea-core, html body.route-grade #app input, html body.route-grade #app taro-input-core { border: 1px solid rgba(255,255,255,.05) !important; border-radius: 10px !important; background: #0a0e12 !important; box-shadow: none !important; } body.desktop-light.route-qa #app textarea, body.desktop-light.route-qa #app taro-textarea-core, body.desktop-light.route-grade #app textarea, body.desktop-light.route-grade #app taro-textarea-core { border-color: rgba(31,45,51,.08) !important; background: #f0f4f5 !important; } html body.route-qa #app textarea:focus, html body.route-qa #app taro-textarea-core:focus-within, html body.route-grade #app textarea:focus, html body.route-grade #app taro-textarea-core:focus-within { border-color: rgba(61,206,192,.45) !important; box-shadow: 0 0 0 3px rgba(61,206,192,.10) !important; } html body.route-qa #app .desktop-qa-submit, html body.route-grade #app .desktop-grade-submit { border: 0 !important; border-radius: 10px !important; box-shadow: none !important; } } /* Final override: the leisure study plan must fill the entire room canvas. */ /* Coffee room furniture: small tables sit in a real cafe setting instead of filling the plan as booths. */ /* Public study room: a bright shared reading hall rather than a conventional classroom. */ /* Inviting details for the public room: different seats should feel worth choosing. */ /* Public room refinement: calm, aligned shared desks with no decorative noise. */ /* More breathing room: compact tables, generous aisles, and quiet reading-hall fixtures. */ /* Study room journey: clarify the next action without adding dashboard noise. */ /* Social layer: real friend actions live alongside the room, not inside the seating plan. */ /* Whole-page study workspace: one clear next step, three focused modes. */ /* ============================================================ ANTI-FLASH — never paint native purple/mobile chrome on QA/Grade. Unready screens stay opacity:0 (see index.html inline lock). ============================================================ */ @media (min-width:981px) { html body.route-qa #app .min-h-screen:not([data-desktop-qa-ready="true"]), html body.route-grade #app .min-h-screen:not([data-desktop-grade-ready="true"]), html body.route-grade #app .desktop-grade-native:not([data-desktop-grade-ready="true"]), html body.route-grade #app .desktop-grade-workspace:not([data-desktop-grade-ready="true"]) { background-color: #070b10 !important; } html body.desktop-light.route-qa #app .min-h-screen:not([data-desktop-qa-ready="true"]):not(.desktop-starfield), html body.desktop-light.route-grade #app .min-h-screen:not([data-desktop-grade-ready="true"]):not(.desktop-starfield) { background-color: #eef2f3 !important; } html body.route-grade #app .__linka_perf_dead [style*="linear-gradient"], html body.route-grade #app .__linka_perf_dead [style*="FAFBFF"], html body.route-grade #app .__linka_perf_dead [style*="F6F3FD"], html body.route-grade #app .__linka_perf_dead [style*="F1F6FF"], html body.route-grade #app .__linka_perf_dead [style*="rgba(123"], html body.route-grade #app .__linka_perf_dead [style*="rgba(168"], html body.route-grade #app .__linka_perf_dead [style*="blur(40px)"], html body.route-grade #app .__linka_perf_dead [style*="blur(30px)"], html body.route-qa #app .__linka_perf_dead [style*="linear-gradient"]:not(button):not(taro-button-core), html body.route-qa #app .__linka_perf_dead [style*="rgba(123"], html body.route-qa #app .__linka_perf_dead [style*="rgba(168"] { background: transparent !important; background-image: none !important; filter: none !important; box-shadow: none !important; } html body.route-grade #app .desktop-grade-native-hero, html body.route-grade #app .desktop-grade-legacy-intro, html body.route-grade #app .desktop-legacy-topbar, html body.route-qa #app .desktop-qa-legacy-header, html body.route-qa #app .desktop-legacy-topbar { display: none !important; } /* While pending, keep page blank on studio bg — no old layout peek */ html body.studio-pending.route-qa #app .taro_page_show .min-h-screen:not([data-desktop-qa-ready="true"]), html body.studio-pending.route-grade #app .taro_page_show .min-h-screen:not([data-desktop-grade-ready="true"]) { opacity: 1 !important; } } /* ============================================================ MYSTERY ARCHIVE — QA + Grade (today + exam hub language). Charcoal vault, teal + soft gold, answer titles color-coded. ============================================================ */ @media (min-width:981px) { html body.route-qa, html body.route-grade { --vault-bg: #09090b; --vault-panel: #12161c; --vault-panel-2: #161b22; --vault-well: #0c1015; --vault-line: rgba(255,255,255,.06); --vault-text: #ecebf0; --vault-muted: #8d8995; --vault-teal: #35d6c5; --vault-teal-dim: rgba(53,214,197,.14); --vault-gold: #c2a760; --vault-gold-soft: #dbc891; --vault-gold-dim: rgba(194,167,96,.10); } /* Atmosphere — exam-hub mystery wash */ html body.route-qa:not(.desktop-light) #app .min-h-screen, html body.route-grade:not(.desktop-light) #app .min-h-screen, html body.route-grade:not(.desktop-light) #app .desktop-grade-native, html body.route-grade:not(.desktop-light) #app .desktop-grade-workspace, html body.desktop-dark.route-qa #app .min-h-screen, html body.desktop-dark.route-grade #app .min-h-screen { background: radial-gradient(circle at 22% 6%, rgba(53,214,197,.13), transparent 32%), radial-gradient(circle at 78% 14%, rgba(194,167,96,.09), transparent 28%), linear-gradient(180deg, rgba(15,18,20,.55), transparent 28%), var(--vault-bg) !important; background-color: var(--vault-bg) !important; color: var(--vault-text) !important; } /* Panels — today/exam flat vault cards */ html body.route-qa:not(.desktop-light) #app .glass-card, html body.route-qa:not(.desktop-light) #app .glass-card-frosted, html body.route-qa:not(.desktop-light) #app .desktop-qa-content, html body.route-grade:not(.desktop-light) #app .desktop-grade-typebar, html body.route-grade:not(.desktop-light) #app .desktop-grade-question-panel, html body.route-grade:not(.desktop-light) #app .desktop-grade-answer-panel, html body.route-grade:not(.desktop-light) #app .glass-card, html body.route-grade:not(.desktop-light) #app .glass-card-frosted, html body.desktop-dark.route-qa #app .desktop-qa-content, html body.desktop-dark.route-qa #app .glass-card, html body.desktop-dark.route-grade #app .desktop-grade-typebar, html body.desktop-dark.route-grade #app .desktop-grade-question-panel, html body.desktop-dark.route-grade #app .desktop-grade-answer-panel { border: 1px solid #242a32 !important; border-radius: 8px !important; background: var(--vault-panel) !important; box-shadow: none !important; } /* Answer archive card — teal rail like broadcast.official */ html body.route-qa #app .desktop-qa-answer-card, html body.desktop-dark.route-qa #app .desktop-qa-answer-card { border: 1px solid rgba(53,214,197,.28) !important; border-left: 3px solid var(--vault-teal) !important; background: linear-gradient(90deg, rgba(53,214,197,.07), transparent 42%), var(--vault-panel) !important; padding: 4px 0 8px !important; } /* --- Answer typography: color hierarchy --- */ html body.route-qa #app .desktop-qa-answer-card h1, html body.route-qa #app .desktop-qa-answer-card h1.desktop-qa-answer-ink, html body.route-qa #app .desktop-qa-content:not(:has(textarea)):not(:has(taro-textarea-core)) h1 { margin: 18px 22px 10px !important; color: var(--vault-teal) !important; font-size: 20px !important; font-weight: 750 !important; line-height: 1.35 !important; letter-spacing: .01em !important; } html body.route-qa #app .desktop-qa-answer-card h2, html body.route-qa #app .desktop-qa-answer-card h2.desktop-qa-answer-ink, html body.route-qa #app .desktop-qa-content:not(:has(textarea)):not(:has(taro-textarea-core)) h2 { margin: 16px 22px 8px !important; color: var(--vault-gold-soft) !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.4 !important; } html body.route-qa #app .desktop-qa-answer-card h3, html body.route-qa #app .desktop-qa-answer-card h3.desktop-qa-answer-ink, html body.route-qa #app .desktop-qa-content:not(:has(textarea)):not(:has(taro-textarea-core)) h3, html body.route-qa #app .desktop-qa-answer-card h4, html body.route-qa #app .desktop-qa-answer-card h5 { margin: 14px 22px 6px !important; color: #9fd9d1 !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.45 !important; } html body.route-qa #app .desktop-qa-answer-card p, html body.route-qa #app .desktop-qa-answer-card li, html body.route-qa #app .desktop-qa-content:not(:has(textarea)):not(:has(taro-textarea-core)) p { margin: 0 22px 10px !important; color: #c9ced4 !important; font-size: 14.5px !important; line-height: 1.75 !important; } html body.route-qa #app .desktop-qa-answer-card strong, html body.route-qa #app .desktop-qa-answer-card b, html body.route-qa #app .desktop-qa-answer-card strong.desktop-qa-answer-ink { color: #f0ece3 !important; font-weight: 750 !important; } html body.route-qa #app .desktop-qa-answer-card em { color: var(--vault-gold-soft) !important; font-style: italic !important; } html body.route-qa #app .desktop-qa-answer-card a { color: var(--vault-teal) !important; text-decoration: underline !important; text-underline-offset: 2px !important; } html body.route-qa #app .desktop-qa-answer-card blockquote { margin: 12px 22px !important; padding: 8px 0 8px 14px !important; border-left: 2px solid var(--vault-gold) !important; color: #b7b0a4 !important; background: transparent !important; } html body.route-qa #app .desktop-qa-answer-card code { padding: 1px 5px !important; border-radius: 3px !important; background: #0e1418 !important; color: #b8e5de !important; font-size: 12.5px !important; } html body.route-qa #app .desktop-qa-answer-card pre { margin: 12px 22px !important; padding: 12px 14px !important; border: 1px solid #2a323a !important; border-radius: 6px !important; background: #0b0f13 !important; overflow: auto !important; } html body.route-qa #app .desktop-qa-answer-card ul, html body.route-qa #app .desktop-qa-answer-card ol { margin: 6px 22px 12px !important; padding-left: 22px !important; color: #c9ced4 !important; } html body.route-qa #app .desktop-qa-answer-card th { color: #dff3ef !important; background: #111a1a !important; } html body.route-qa #app .desktop-qa-answer-card td { color: #c9ced4 !important; border-color: #2a323a !important; } /* Grade history — gold archive lane (exam history) */ html body.route-grade:not(.desktop-light) #app .desktop-grade-history-shortcut, html body.desktop-dark.route-grade #app .desktop-grade-history-shortcut { border: 1px solid #34313b !important; border-radius: 8px !important; background: #141319 !important; color: #f0ecdf !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-history-shortcut :is(strong,h2,h3), html body.desktop-dark.route-grade #app .desktop-grade-history-shortcut :is(strong,h2,h3) { color: #f0ecdf !important; } html body.route-grade:not(.desktop-light) #app .desktop-grade-history-shortcut :is(p,span,small), html body.desktop-dark.route-grade #app .desktop-grade-history-shortcut :is(p,span,small) { color: #8f8a93 !important; } /* Typebar / chips — quieter vault */ html body.route-grade:not(.desktop-light) #app .desktop-grade-typebar, html body.desktop-dark.route-grade #app .desktop-grade-typebar { background: linear-gradient(135deg, #0f2824 0%, #12161c 55%, #19150d 100%) !important; border-color: rgba(53,214,197,.35) !important; } html body.route-qa:not(.desktop-light) #app .desktop-qa-question-type.is-active, html body.route-qa:not(.desktop-light) #app .desktop-qa-question-type[aria-pressed="true"], html body.route-grade:not(.desktop-light) #app .desktop-grade-type-option.capsule-selected, html body.route-grade:not(.desktop-light) #app .desktop-grade-typebar .capsule-selected, html body.desktop-dark.route-qa #app .desktop-qa-question-type.is-active, html body.desktop-dark.route-grade #app .desktop-grade-type-option.capsule-selected { background: rgba(53,214,197,.16) !important; color: #d8fffb !important; border-color: rgba(53,214,197,.4) !important; } /* Mode bar */ html body.route-qa:not(.desktop-light) #app #free-chat-hero .desktop-qa-native-modebar, html body.desktop-dark.route-qa #app #free-chat-hero .desktop-qa-native-modebar { border: 1px solid #292930 !important; background: rgba(18,18,22,.92) !important; } html body.route-qa:not(.desktop-light) #app #free-chat-hero .desktop-qa-native-mode.is-active, html body.desktop-dark.route-qa #app #free-chat-hero .desktop-qa-native-mode.is-active { background: var(--vault-teal) !important; color: #06201c !important; } /* Inputs */ html body.route-qa:not(.desktop-light) #app textarea, html body.route-qa:not(.desktop-light) #app taro-textarea-core, html body.route-grade:not(.desktop-light) #app textarea, html body.route-grade:not(.desktop-light) #app taro-textarea-core, html body.desktop-dark.route-qa #app textarea, html body.desktop-dark.route-grade #app textarea { border: 1px solid #2a323a !important; border-radius: 6px !important; background: var(--vault-well) !important; color: var(--vault-text) !important; } html body.route-qa:not(.desktop-light) #app textarea:focus, html body.route-grade:not(.desktop-light) #app textarea:focus, html body.desktop-dark.route-qa #app textarea:focus, html body.desktop-dark.route-grade #app textarea:focus { border-color: rgba(53,214,197,.55) !important; box-shadow: 0 0 0 3px rgba(53,214,197,.12) !important; } /* Primary CTA — exam teal */ html body.route-qa:not(.desktop-light) #app .desktop-qa-submit, html body.route-grade:not(.desktop-light) #app .desktop-grade-submit, html body.desktop-dark.route-qa #app .desktop-qa-submit, html body.desktop-dark.route-grade #app .desktop-grade-submit { border: 0 !important; border-radius: 5px !important; background: #178f83 !important; color: #e8fffa !important; box-shadow: none !important; } html body.route-qa:not(.desktop-light) #app .desktop-qa-submit *, html body.route-grade:not(.desktop-light) #app .desktop-grade-submit *, html body.desktop-dark.route-qa #app .desktop-qa-submit *, html body.desktop-dark.route-grade #app .desktop-grade-submit * { color: #e8fffa !important; } html body.route-qa:not(.desktop-light) #app .desktop-qa-submit:hover, html body.route-grade:not(.desktop-light) #app .desktop-grade-submit:hover { background: #24a99d !important; } /* Light theme remaps */ html body.desktop-light.route-qa #app .desktop-qa-answer-card h1 { color: #168f83 !important; } html body.desktop-light.route-qa #app .desktop-qa-answer-card h2 { color: #9a7b3a !important; } html body.desktop-light.route-qa #app .desktop-qa-answer-card h3 { color: #2a7a70 !important; } html body.desktop-light.route-qa #app .desktop-qa-answer-card p, html body.desktop-light.route-qa #app .desktop-qa-answer-card li { color: #3a4550 !important; } html body.desktop-light.route-qa #app .desktop-qa-answer-card strong { color: #1f2d33 !important; } html body.desktop-light.route-qa #app .desktop-qa-answer-card, html body.desktop-light.route-grade #app .desktop-grade-question-panel, html body.desktop-light.route-grade #app .desktop-grade-answer-panel { background: #f4f6f8 !important; border-color: #d6dde2 !important; } /* Grade result / report markdown hierarchy */ html body.route-grade #app .desktop-grade-result-card, html body.route-grade #app [data-workspace-section="grade-result"] { border: 1px solid rgba(53,214,197,.28) !important; border-left: 3px solid var(--vault-teal) !important; background: linear-gradient(90deg, rgba(53,214,197,.07), transparent 42%), var(--vault-panel) !important; } html body.route-grade #app .desktop-grade-result-card h1, html body.route-grade #app [data-workspace-section="grade-result"] h1 { color: var(--vault-teal) !important; font-size: 20px !important; font-weight: 750 !important; } html body.route-grade #app .desktop-grade-result-card h2, html body.route-grade #app [data-workspace-section="grade-result"] h2 { color: var(--vault-gold-soft) !important; font-size: 17px !important; font-weight: 700 !important; } html body.route-grade #app .desktop-grade-result-card h3, html body.route-grade #app .desktop-grade-result-card h4, html body.route-grade #app [data-workspace-section="grade-result"] h3, html body.route-grade #app [data-workspace-section="grade-result"] h4 { color: #9fd9d1 !important; font-size: 15px !important; font-weight: 700 !important; } html body.route-grade #app .desktop-grade-result-card p, html body.route-grade #app .desktop-grade-result-card li, html body.route-grade #app [data-workspace-section="grade-result"] p, html body.route-grade #app [data-workspace-section="grade-result"] li { color: #c9ced4 !important; line-height: 1.75 !important; } html body.route-grade #app .desktop-grade-result-card strong, html body.route-grade #app [data-workspace-section="grade-result"] strong { color: #f0ece3 !important; } html body.route-grade #app .desktop-grade-result-card a, html body.route-grade #app [data-workspace-section="grade-result"] a { color: var(--vault-teal) !important; } } /* Final cascade for the two AI workspaces: deliberately low-wireframe. */ @media (min-width:981px) { html body.route-qa #app .min-h-screen, html body.route-grade #app .min-h-screen, html body.route-grade #app .desktop-grade-workspace { background:radial-gradient(760px 280px at 72% -8%,rgba(53,214,197,.07),transparent 62%),#0b0f13 !important; } html body.route-qa #app #desktop-qa-header, html body.route-grade #app #desktop-grade-header { margin-bottom:28px !important; padding-bottom:20px !important; border-bottom:1px solid rgba(197,214,218,.10) !important; } html body.route-qa #app :is(.desktop-qa-content,.glass-card,.glass-card-frosted), html body.route-grade #app :is(.desktop-grade-typebar,.desktop-grade-question-panel,.desktop-grade-answer-panel,.desktop-grade-history-shortcut) { border:0 !important; border-radius:16px !important; background:#12181e !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 12px 28px rgba(0,0,0,.12) !important; } html body.route-qa #app :is(.desktop-qa-question-types,.desktop-qa-question-entry > div:first-child), html body.route-grade #app :is(.desktop-grade-question-panel > div:first-child,.desktop-grade-answer-panel > div:first-child) { border-bottom:1px solid rgba(197,214,218,.08) !important; } html body.route-qa #app .desktop-qa-question-types { padding:22px 24px 20px !important; } html body.route-qa #app .desktop-qa-question-entry > div:last-child { padding:20px 24px 24px !important; } html body.route-grade #app .desktop-grade-content { gap:18px !important; } html body.route-grade #app :is(.desktop-grade-question-panel,.desktop-grade-answer-panel) { min-height:452px !important; } html body.route-qa #app .desktop-qa-question-type, html body.route-grade #app :is(.desktop-grade-type-option,.desktop-grade-typebar button,.desktop-grade-typebar taro-button-core,.desktop-grade-input-modebar) { border:0 !important; border-radius:9px !important; background:rgba(255,255,255,.055) !important; box-shadow:none !important; } html body.route-qa #app :is(.desktop-qa-question-type.is-active,.desktop-qa-question-type[aria-pressed="true"]), html body.route-grade #app :is(.desktop-grade-type-option.capsule-selected,.desktop-grade-type-option.is-active,.desktop-grade-type-option[aria-pressed="true"],.desktop-grade-typebar .capsule-selected) { background:rgba(53,214,197,.18) !important; color:#d9fffb !important; box-shadow:inset 0 0 0 1px rgba(97,234,219,.14) !important; } html body.route-qa #app :is(textarea,taro-textarea-core), html body.route-grade #app :is(textarea,taro-textarea-core) { border:1px solid rgba(197,214,218,.07) !important; border-radius:11px !important; background:#0c1116 !important; box-shadow:inset 0 1px 2px rgba(0,0,0,.24) !important; } html body.route-qa #app textarea:focus, html body.route-grade #app textarea:focus { border-color:rgba(83,228,212,.64) !important; box-shadow:0 0 0 3px rgba(53,214,197,.11) !important; } html body.route-qa #app .desktop-qa-submit, html body.route-grade #app .desktop-grade-submit { border:0 !important; border-radius:10px !important; background:linear-gradient(135deg,#2cc7b7,#15968a) !important; color:#06201d !important; box-shadow:0 10px 22px rgba(28,166,152,.18) !important; } html body.desktop-light.route-qa #app :is(.desktop-qa-content,.glass-card), html body.desktop-light.route-grade #app :is(.desktop-grade-typebar,.desktop-grade-question-panel,.desktop-grade-answer-panel,.desktop-grade-history-shortcut) { background:#f7fafb !important; } html body.desktop-light.route-qa #app textarea, html body.desktop-light.route-grade #app textarea { background:#fff !important; } } /* A library shelf is a focused destination, not a second archive view. */ /* QA / grading final specificity lock — replaces legacy framed panels. */ @media (min-width:981px) { /* Atmosphere must live on .min-h-screen (JS no longer pins inline bg). */ html body.route-qa:not(.desktop-light) #app .min-h-screen, html body.route-grade:not(.desktop-light) #app .min-h-screen, html body.route-grade:not(.desktop-light) #app .desktop-grade-workspace, html body.desktop-dark.route-qa #app .min-h-screen, html body.desktop-dark.route-grade #app .min-h-screen { background: radial-gradient(circle at 18% 0%, rgba(53,214,197,.16), transparent 34%), radial-gradient(circle at 86% 8%, rgba(194,167,96,.12), transparent 30%), #0b0f13 !important; background-color: #0b0f13 !important; color: #ecebf0 !important; } html body.desktop-light.route-qa #app .min-h-screen, html body.desktop-light.route-grade #app .min-h-screen { background: #eef2f3 !important; color: #1f2d33 !important; } /* The AI workspaces end at their primary action; no decorative footer rail. */ /* Credit stays fixed bottom on QA/Grade too (see STARFIELD end pass). */ html body.route-qa #app .min-h-screen > .desktop-qa-content, html body.route-qa #app .min-h-screen > .glass-card, html body.route-qa #app .min-h-screen > .glass-card-frosted, html body.route-qa #app .min-h-screen > div[data-workspace-section="answer"], html body.route-grade #app .desktop-grade-content > .desktop-grade-typebar, html body.route-grade #app .desktop-grade-content > .desktop-grade-question-panel, html body.route-grade #app .desktop-grade-content > .desktop-grade-answer-panel, html body.route-grade #app .desktop-grade-content > .desktop-grade-history-shortcut { border:0 !important; outline:0 !important; border-radius:16px !important; background:#12181e !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 12px 28px rgba(0,0,0,.12) !important; } html body.route-qa #app .min-h-screen > .desktop-qa-content.desktop-qa-answer-card, html body.route-qa #app .min-h-screen > div[data-workspace-section="answer"] { position:relative !important; background:linear-gradient(90deg,rgba(53,214,197,.055),transparent 26%),#12181e !important; box-shadow:inset 2px 0 #35d6c5,inset 0 1px 0 rgba(255,255,255,.035),0 12px 28px rgba(0,0,0,.12) !important; } html body.route-qa #app .desktop-qa-question-types, html body.route-qa #app .desktop-qa-question-entry, html body.route-qa #app .desktop-qa-question-entry > div, html body.route-qa #app .desktop-qa-question-entry > div:first-child { border-left:0 !important; border-right:0 !important; background:transparent !important; box-shadow:none !important; } html body.route-qa #app .desktop-qa-question-types, html body.route-qa #app .desktop-qa-question-entry > div:first-child, html body.route-grade #app .desktop-grade-question-panel > div:first-child, html body.route-grade #app .desktop-grade-answer-panel > div:first-child { border-top:0 !important; border-bottom:1px solid rgba(197,214,218,.08) !important; } html body.route-qa #app .desktop-qa-question-type, html body.route-grade #app .desktop-grade-type-option, html body.route-grade #app .desktop-grade-input-mode, html body.route-grade #app .desktop-grade-input-modebar { border:0 !important; background:rgba(255,255,255,.055) !important; box-shadow:none !important; } html body.route-qa #app :is(.desktop-qa-question-type.is-active,.desktop-qa-question-type[aria-pressed="true"]), html body.route-grade #app :is(.desktop-grade-type-option.capsule-selected,.desktop-grade-type-option.is-active,.desktop-grade-input-mode.capsule-selected,.desktop-grade-input-mode.is-active) { background:rgba(53,214,197,.18) !important; color:#d9fffb !important; box-shadow:inset 0 0 0 1px rgba(97,234,219,.14) !important; } } /* Answer title ink — works even when Taro omits semantic headings. */ @media (min-width:981px) { html body.route-qa #app .desktop-qa-answer-card h1, html body.route-qa #app [data-workspace-section="answer"] h1 { color:#35d6c5 !important; } html body.route-qa #app .desktop-qa-answer-card h2, html body.route-qa #app [data-workspace-section="answer"] h2 { color:#dbc891 !important; } html body.route-qa #app .desktop-qa-answer-card h3, html body.route-qa #app .desktop-qa-answer-card h4, html body.route-qa #app [data-workspace-section="answer"] h3, html body.route-qa #app [data-workspace-section="answer"] h4 { color:#9fd9d1 !important; } html body.route-qa #app .desktop-qa-answer-card strong, html body.route-qa #app [data-workspace-section="answer"] strong { color:#f0ece3 !important; } html body.route-grade #app .desktop-grade-result-card h1, html body.route-grade #app [data-workspace-section="grade-result"] h1 { color:#35d6c5 !important; } html body.route-grade #app .desktop-grade-result-card h2, html body.route-grade #app [data-workspace-section="grade-result"] h2 { color:#dbc891 !important; } html body.route-grade #app .desktop-grade-result-card h3, html body.route-grade #app [data-workspace-section="grade-result"] h3 { color:#9fd9d1 !important; } } /* ============================================================ STARFIELD STUDIO — QA + Grade (FILE END — must stay last) Soft glowing night sky + calm tech. Opaque panels, few hairlines. ============================================================ */ @media (min-width:981px) { /* Dual-UI lock: never force-show unready native paint */ html body.route-qa #app .min-h-screen:not([data-desktop-qa-ready="true"]), html body.route-grade #app .min-h-screen:not([data-desktop-grade-ready="true"]) { opacity: 1 !important; pointer-events: none !important; } html body.route-qa #app .min-h-screen[data-desktop-qa-ready="true"], html body.route-grade #app .min-h-screen[data-desktop-grade-ready="true"] { opacity: 1 !important; pointer-events: auto !important; } html body.route-qa #app .taro_page:not(.taro_page_show), html body.route-grade #app .taro_page:not(.taro_page_show) { display: none !important; visibility: hidden !important; } /* Extra native chrome that stacks as a second UI */ html body.route-qa.studio-ready #app .desktop-qa-legacy-header, html body.route-qa.studio-ready #app .desktop-legacy-topbar, html body.route-grade.studio-ready #app .desktop-grade-native-hero, html body.route-grade.studio-ready #app .desktop-grade-legacy-intro, html body.route-grade.studio-ready #app .desktop-legacy-topbar, html body.route-qa #app .min-h-screen > #desktop-qa-header ~ #desktop-qa-header, html body.route-grade #app .min-h-screen > #desktop-grade-header ~ #desktop-grade-header { display: none !important; } /* Night sky: deep teal void + soft nebula + sparse star glitter */ html body.route-qa:not(.desktop-light) #app .min-h-screen, html body.route-grade:not(.desktop-light) #app .min-h-screen, html body.desktop-dark.route-qa #app .min-h-screen, html body.desktop-dark.route-grade #app .min-h-screen { background-color: #070b10 !important; background-image: radial-gradient(1.2px 1.2px at 12% 18%, rgba(230,255,252,.55), transparent 2px), radial-gradient(1px 1px at 28% 42%, rgba(255,255,255,.38), transparent 2px), radial-gradient(1.4px 1.4px at 46% 14%, rgba(53,214,197,.65), transparent 2.5px), radial-gradient(1px 1px at 61% 36%, rgba(255,248,230,.42), transparent 2px), radial-gradient(1.2px 1.2px at 73% 22%, rgba(255,255,255,.32), transparent 2px), radial-gradient(1px 1px at 84% 48%, rgba(194,167,96,.5), transparent 2px), radial-gradient(1.3px 1.3px at 18% 68%, rgba(255,255,255,.28), transparent 2px), radial-gradient(1px 1px at 39% 76%, rgba(53,214,197,.45), transparent 2px), radial-gradient(1.2px 1.2px at 57% 62%, rgba(255,255,255,.34), transparent 2px), radial-gradient(1px 1px at 91% 71%, rgba(255,255,255,.26), transparent 2px), radial-gradient(1.5px 1.5px at 8% 88%, rgba(194,167,96,.4), transparent 2.5px), radial-gradient(1px 1px at 33% 8%, rgba(255,255,255,.3), transparent 2px), radial-gradient(circle at 18% 0%, rgba(53,214,197,.22), transparent 38%), radial-gradient(circle at 82% 8%, rgba(120,170,220,.12), transparent 34%), radial-gradient(circle at 70% 100%, rgba(194,167,96,.10), transparent 42%), linear-gradient(180deg, #0a1218 0%, #070b10 48%, #080d12 100%) !important; color: #eef6f4 !important; } /* Strip nested clutter frames / glass */ html body.route-qa #app .min-h-screen :is( .desktop-qa-question-types, .desktop-qa-question-entry, .desktop-qa-question-entry > div, .desktop-qa-question-type, .desktop-qa-native-modebar, .glass-card-frosted, .rounded-xl, .rounded-2xl, taro-view-core, section, article ), html body.route-grade #app .min-h-screen :is( .desktop-grade-type-option, .desktop-grade-input-mode, .desktop-grade-input-modebar, .glass-card-frosted, .rounded-xl, .rounded-2xl, taro-view-core, section, article ) { border: 0 !important; outline: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } /* Main panels only — solid, soft hairline (not translucent boxes) */ html body.route-qa #app .min-h-screen > :is(.desktop-qa-content, .glass-card, .glass-card-frosted), html body.route-grade #app .desktop-grade-content > :is( .desktop-grade-typebar, .desktop-grade-question-panel, .desktop-grade-answer-panel, .desktop-grade-history-shortcut ) { background: #121a20 !important; background-image: linear-gradient(160deg, #15242a 0%, #121a20 52%, #14181c 100%) !important; border: 1px solid rgba(120, 200, 190, .22) !important; border-radius: 12px !important; box-shadow: 0 0 40px rgba(53,214,197,.05) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body.route-qa #app #desktop-qa-header, html body.route-grade #app #desktop-grade-header { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(120, 200, 190, .16) !important; box-shadow: none !important; margin-bottom: 26px !important; padding-bottom: 18px !important; } html body.route-qa #app #desktop-qa-header span, html body.route-grade #app #desktop-grade-header span { color:#6ee7d8 !important; letter-spacing:.08em !important; } html body.route-qa #app #desktop-qa-header h1, html body.route-grade #app #desktop-grade-header h1 { color:#f4fbfa !important; } html body.route-qa #app #desktop-qa-header p, html body.route-grade #app #desktop-grade-header p { color:#9eb0ae !important; } html body.route-qa #app #desktop-qa-header a, html body.route-grade #app #desktop-grade-header a { border: 1px solid rgba(53,214,197,.35) !important; border-radius: 6px !important; background: #178f83 !important; color: #f4fffc !important; box-shadow: 0 0 18px rgba(53,214,197,.18) !important; } html body.route-qa #app .desktop-qa-question-types, html body.route-qa #app .desktop-qa-question-entry > div, html body.route-grade #app :is(.desktop-grade-question-panel, .desktop-grade-answer-panel) > div { background: transparent !important; border: 0 !important; box-shadow: none !important; } html body.route-qa #app #free-chat-hero .desktop-qa-native-modebar { background: #0e161b !important; border: 1px solid rgba(120,200,190,.16) !important; border-radius: 8px !important; box-shadow: none !important; } html body.route-qa #app #free-chat-hero .desktop-qa-native-mode { background: #162026 !important; color: #a8bbb8 !important; border: 0 !important; box-shadow: none !important; } html body.route-qa #app #free-chat-hero .desktop-qa-native-mode.is-active { background: #2bc4b4 !important; color: #041412 !important; box-shadow: 0 0 16px rgba(53,214,197,.28) !important; } html body.route-qa #app .desktop-qa-question-type, html body.route-grade #app :is(.desktop-grade-type-option, .desktop-grade-input-mode) { background: #182328 !important; color: #a8bbb8 !important; border: 1px solid rgba(120,200,190,.10) !important; border-radius: 7px !important; box-shadow: none !important; } html body.route-qa #app :is(.desktop-qa-question-type.is-active, .desktop-qa-question-type[aria-pressed="true"]), html body.route-grade #app :is( .desktop-grade-type-option.capsule-selected, .desktop-grade-type-option.is-active, .desktop-grade-input-mode.capsule-selected, .desktop-grade-input-mode.is-active ) { background: #1e4f4a !important; color: #e8fffb !important; border-color: rgba(53,214,197,.42) !important; box-shadow: 0 0 14px rgba(53,214,197,.16) !important; } html body.route-grade #app .desktop-grade-typebar { background: linear-gradient(135deg, #132824 0%, #121a20 58%, #17140f 100%) !important; } html body.route-grade #app .desktop-grade-input-modebar { background: #0e161b !important; border: 0 !important; } html body.route-grade #app .desktop-grade-history-shortcut { background: #16140f !important; border: 1px solid rgba(194,167,96,.28) !important; box-shadow: 0 0 24px rgba(194,167,96,.06) !important; color: #f3ecdf !important; } html body.route-grade #app .desktop-grade-history-shortcut :is(strong,h2,h3) { color:#f3ecdf !important; } html body.route-grade #app .desktop-grade-history-shortcut :is(p,span,small) { color:#9a9080 !important; } html body.route-qa #app :is(textarea, taro-textarea-core), html body.route-grade #app :is(textarea, taro-textarea-core) { background: #0a1116 !important; color: #eef6f4 !important; border: 1px solid rgba(120,200,190,.16) !important; border-radius: 9px !important; box-shadow: none !important; } html body.route-qa #app textarea:focus, html body.route-grade #app textarea:focus { border-color: rgba(53,214,197,.55) !important; box-shadow: 0 0 0 3px rgba(53,214,197,.12), 0 0 22px rgba(53,214,197,.10) !important; } html body.route-qa #app :is(.desktop-qa-answer-card, [data-workspace-section="answer"]), html body.route-grade #app :is(.desktop-grade-result-card, [data-workspace-section="grade-result"]) { background: #121f22 !important; border: 1px solid rgba(53,214,197,.28) !important; border-left: 3px solid #35d6c5 !important; border-radius: 12px !important; box-shadow: 0 0 28px rgba(53,214,197,.07) !important; } html body.route-qa #app .desktop-qa-answer-card h1, html body.route-qa #app [data-workspace-section="answer"] h1 { color:#6ee7d8 !important; } html body.route-qa #app .desktop-qa-answer-card h2, html body.route-qa #app [data-workspace-section="answer"] h2 { color:#e0c98a !important; } html body.route-qa #app .desktop-qa-answer-card h3, html body.route-qa #app [data-workspace-section="answer"] h3 { color:#9fd9d1 !important; } html body.route-qa #app .desktop-qa-answer-card p, html body.route-qa #app .desktop-qa-answer-card li { color:#c5d4d1 !important; } html body.route-qa #app .desktop-qa-submit, html body.route-grade #app .desktop-grade-submit { border: 0 !important; border-radius: 8px !important; background: linear-gradient(135deg, #35d6c5, #1aa89c) !important; color: #041412 !important; box-shadow: 0 0 24px rgba(53,214,197,.22) !important; } /* Hide native icon chrome only in known chrome hosts — never scan whole page with [class*=]. */ html body.route-qa #app #desktop-qa-header [class*="i-mdi"], html body.route-qa #app #free-chat-hero [class*="i-mdi"], html body.route-qa #app .desktop-qa-legacy-header [class*="i-mdi"], html body.route-qa #app .desktop-legacy-topbar [class*="i-mdi"], html body.route-grade #app #desktop-grade-header [class*="i-mdi"], html body.route-grade #app .desktop-grade-native-hero [class*="i-mdi"], html body.route-grade #app .desktop-legacy-topbar [class*="i-mdi"] { display: none !important; } html body.desktop-light.route-qa #app .min-h-screen, html body.desktop-light.route-grade #app .min-h-screen { background: radial-gradient(circle at 18% 0%, rgba(53,214,197,.14), transparent 36%), radial-gradient(circle at 88% 12%, rgba(194,167,96,.08), transparent 30%), #f3f8f7 !important; color: #1c2a2e !important; } html body.desktop-light.route-qa #app .min-h-screen > :is(.desktop-qa-content, .glass-card, .glass-card-frosted), html body.desktop-light.route-grade #app .desktop-grade-content > :is( .desktop-grade-typebar, .desktop-grade-question-panel, .desktop-grade-answer-panel, .desktop-grade-history-shortcut ) { background: #ffffff !important; border: 1px solid #c9e4df !important; box-shadow: 0 8px 28px rgba(28,90,82,.05) !important; } html body.desktop-light.route-qa #app .desktop-qa-question-type, html body.desktop-light.route-grade #app :is(.desktop-grade-type-option, .desktop-grade-input-mode) { background: #eef7f5 !important; border: 1px solid #d5e8e4 !important; color: #45605c !important; } html body.desktop-light.route-qa #app :is(.desktop-qa-question-type.is-active, .desktop-qa-question-type[aria-pressed="true"]), html body.desktop-light.route-grade #app :is(.desktop-grade-type-option.capsule-selected, .desktop-grade-input-mode.capsule-selected) { background: #24a99d !important; border-color: #1aa89c !important; color: #041412 !important; } html body.desktop-light.route-qa #app :is(textarea, taro-textarea-core), html body.desktop-light.route-grade #app :is(textarea, taro-textarea-core) { background: #f7fbfa !important; border: 1px solid #c9e4df !important; color: #1c2a2e !important; box-shadow: none !important; } } /* ============================================================ CREDIT + BUTTONS + STARFIELD LOCK (FILE END) Credit sits at the BOTTOM of main content pages opened from the left nav — NOT inside the left sidebar. ============================================================ */ @media (min-width:981px) { /* Main-content footer band (between left nav and right context) */ #desktop-studio-credit { position: fixed !important; z-index: 88 !important; top: auto !important; left: var(--desktop-left-width, 300px) !important; right: var(--desktop-right-width, 392px) !important; bottom: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; max-width: none !important; margin: 0 !important; padding: 8px 12px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: none !important; opacity: 1 !important; white-space: nowrap !important; } /* Never park credit in the left nav column */ #desktop-nav #desktop-studio-credit, .desktop-nav-footer #desktop-studio-credit { display: none !important; } body.desktop-nav-collapsed #desktop-studio-credit { left: 0 !important; } body.context-collapsed #desktop-studio-credit, body:not(.route-has-context) #desktop-studio-credit { right: 0 !important; } /* Auth is full-bleed; keep bottom center */ body.route-auth #desktop-studio-credit { left: 0 !important; right: 0 !important; bottom: 24px !important; } /* Show on every left-nav content page including QA / Grade */ body.route-qa #desktop-studio-credit, body.route-grade #desktop-studio-credit, body.route-exams #desktop-studio-credit, body.route-learning #desktop-studio-credit, body.route-profile #desktop-studio-credit, body.route-points #desktop-studio-credit, body.route-tool-page #desktop-studio-credit { display: flex !important; } #desktop-studio-credit span { color: rgba(110,231,216,.78) !important; font: 700 10px/1.4 "IBM Plex Sans", "DIN Alternate", "PingFang SC", sans-serif !important; letter-spacing: .2em !important; } #desktop-studio-credit small { margin-left: .28em !important; color: rgba(180,196,194,.58) !important; font: 500 10px/1.4 "IBM Plex Sans", "DIN Alternate", sans-serif !important; letter-spacing: .13em !important; } body.desktop-light #desktop-studio-credit span { color: #168f83 !important; } body.desktop-light #desktop-studio-credit small { color: #7a8b90 !important; } /* Hide mid-page boxed credit rails — only the fixed content-footer stays */ html body #app .desktop-studio-inline-credit { display: none !important; } /* Ready starfield — always restore when shell is ready */ html body.route-qa #app .min-h-screen[data-desktop-qa-ready="true"], html body.route-grade #app .min-h-screen[data-desktop-grade-ready="true"], html body.route-qa #app .min-h-screen.desktop-starfield, html body.route-grade #app .min-h-screen.desktop-starfield { background-color: #070b10 !important; background-image: radial-gradient(1.2px 1.2px at 12% 18%, rgba(230,255,252,.55), transparent 2px), radial-gradient(1px 1px at 28% 42%, rgba(255,255,255,.38), transparent 2px), radial-gradient(1.4px 1.4px at 46% 14%, rgba(53,214,197,.65), transparent 2.5px), radial-gradient(1px 1px at 61% 36%, rgba(255,248,230,.42), transparent 2px), radial-gradient(1.2px 1.2px at 73% 22%, rgba(255,255,255,.32), transparent 2px), radial-gradient(1px 1px at 84% 48%, rgba(194,167,96,.5), transparent 2px), radial-gradient(1.3px 1.3px at 18% 68%, rgba(255,255,255,.28), transparent 2px), radial-gradient(1px 1px at 39% 76%, rgba(53,214,197,.45), transparent 2px), radial-gradient(1.2px 1.2px at 57% 62%, rgba(255,255,255,.34), transparent 2px), radial-gradient(1px 1px at 91% 71%, rgba(255,255,255,.26), transparent 2px), radial-gradient(1.5px 1.5px at 8% 88%, rgba(194,167,96,.4), transparent 2.5px), radial-gradient(1px 1px at 33% 8%, rgba(255,255,255,.3), transparent 2px), radial-gradient(circle at 18% 0%, rgba(53,214,197,.24), transparent 38%), radial-gradient(circle at 82% 8%, rgba(120,170,220,.14), transparent 34%), radial-gradient(circle at 70% 100%, rgba(194,167,96,.11), transparent 42%), linear-gradient(180deg, #0a1218 0%, #070b10 48%, #080d12 100%) !important; } /* Luminous translucent buttons — chips + CTA */ html body.route-qa #app .desktop-qa-question-type, html body.route-grade #app :is(.desktop-grade-type-option, .desktop-grade-input-mode), html body.route-qa #app #free-chat-hero .desktop-qa-native-mode { border: 1px solid rgba(150,230,220,.22) !important; border-radius: 999px !important; background: rgba(53,214,197,.08) !important; color: rgba(210,240,236,.82) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important; backdrop-filter: blur(8px) saturate(120%) !important; -webkit-backdrop-filter: blur(8px) saturate(120%) !important; } html body.route-qa #app :is(.desktop-qa-question-type.is-active, .desktop-qa-question-type[aria-pressed="true"]), html body.route-qa #app #free-chat-hero .desktop-qa-native-mode.is-active, html body.route-grade #app :is( .desktop-grade-type-option.capsule-selected, .desktop-grade-type-option.is-active, .desktop-grade-input-mode.capsule-selected, .desktop-grade-input-mode.is-active ) { border-color: rgba(110,231,216,.55) !important; background: rgba(53,214,197,.28) !important; color: #eafffb !important; box-shadow: 0 0 18px rgba(53,214,197,.20), inset 0 1px 0 rgba(255,255,255,.12) !important; } html body.route-qa #app .desktop-qa-submit, html body.route-grade #app .desktop-grade-submit { border: 1px solid rgba(150,240,230,.35) !important; border-radius: 10px !important; background: linear-gradient(135deg, rgba(70,230,215,.92), rgba(40,180,168,.88)) !important; color: #041512 !important; font-weight: 750 !important; box-shadow: 0 0 28px rgba(53,214,197,.28), inset 0 1px 0 rgba(255,255,255,.35) !important; } html body.route-qa #app .desktop-qa-submit:hover, html body.route-grade #app .desktop-grade-submit:hover { background: linear-gradient(135deg, rgba(90,240,225,.98), rgba(50,200,188,.94)) !important; box-shadow: 0 0 34px rgba(53,214,197,.36), inset 0 1px 0 rgba(255,255,255,.4) !important; } html body.route-qa #app .desktop-qa-submit *, html body.route-grade #app .desktop-grade-submit * { color: #041512 !important; } /* Room for fixed credit */ html body.route-qa #app .min-h-screen, html body.route-grade #app .min-h-screen { padding-bottom: 52px !important; } } /* ============================================================ STARFIELD FORCE (absolute file end) Wins over inline leftovers + Grade ONE solid paints. ============================================================ */ @media (min-width:981px) { html body.route-qa #app .min-h-screen.desktop-starfield, html body.route-qa #app .min-h-screen[data-desktop-qa-ready="true"], html body.route-grade #app .min-h-screen.desktop-starfield, html body.route-grade #app .min-h-screen[data-desktop-grade-ready="true"], html body.route-grade #app .min-h-screen.desktop-grade-native.desktop-starfield, html body.route-grade #app .min-h-screen.desktop-grade-workspace.desktop-starfield, html body.desktop-dark.route-qa #app .min-h-screen, html body.desktop-dark.route-grade #app .min-h-screen { background-color: #070b10 !important; background-image: radial-gradient(1.5px 1.5px at 10% 16%, rgba(240,255,252,.7), transparent 2.2px), radial-gradient(1px 1px at 26% 40%, rgba(255,255,255,.45), transparent 2px), radial-gradient(1.6px 1.6px at 44% 12%, rgba(53,214,197,.75), transparent 2.6px), radial-gradient(1px 1px at 58% 34%, rgba(255,248,230,.5), transparent 2px), radial-gradient(1.3px 1.3px at 72% 20%, rgba(255,255,255,.4), transparent 2px), radial-gradient(1px 1px at 86% 46%, rgba(194,167,96,.55), transparent 2px), radial-gradient(1.4px 1.4px at 16% 66%, rgba(255,255,255,.35), transparent 2px), radial-gradient(1px 1px at 38% 78%, rgba(53,214,197,.55), transparent 2px), radial-gradient(1.2px 1.2px at 55% 60%, rgba(255,255,255,.4), transparent 2px), radial-gradient(1px 1px at 90% 72%, rgba(255,255,255,.3), transparent 2px), radial-gradient(1.6px 1.6px at 7% 86%, rgba(194,167,96,.45), transparent 2.5px), radial-gradient(1px 1px at 31% 6%, rgba(255,255,255,.35), transparent 2px), radial-gradient(1.2px 1.2px at 95% 10%, rgba(53,214,197,.4), transparent 2px), radial-gradient(circle at 18% 0%, rgba(53,214,197,.26), transparent 40%), radial-gradient(circle at 82% 8%, rgba(120,170,220,.16), transparent 36%), radial-gradient(circle at 70% 100%, rgba(194,167,96,.12), transparent 44%), linear-gradient(180deg, #0a1218 0%, #070b10 48%, #080d12 100%) !important; } /* Light theme keeps a soft luminous sky, not flat grey */ html body.desktop-light.route-qa #app .min-h-screen.desktop-starfield, html body.desktop-light.route-qa #app .min-h-screen[data-desktop-qa-ready="true"], html body.desktop-light.route-grade #app .min-h-screen.desktop-starfield, html body.desktop-light.route-grade #app .min-h-screen[data-desktop-grade-ready="true"] { background-color: #eef6f4 !important; background-image: radial-gradient(1.2px 1.2px at 14% 18%, rgba(23,143,131,.35), transparent 2px), radial-gradient(1px 1px at 40% 36%, rgba(100,140,160,.25), transparent 2px), radial-gradient(1.3px 1.3px at 70% 14%, rgba(53,214,197,.3), transparent 2px), radial-gradient(circle at 16% 0%, rgba(53,214,197,.14), transparent 40%), radial-gradient(circle at 88% 8%, rgba(194,167,96,.08), transparent 34%), linear-gradient(180deg, #f3faf8 0%, #eef6f4 100%) !important; } } /* ============================================================ CAPSULE TECH GLOW (absolute file end) Brighter, hi-tech capsules for QA / Grade. ============================================================ */ @media (min-width:981px) { html body.route-qa #app .desktop-qa-question-type, html body.route-qa #app #free-chat-hero .desktop-qa-native-mode, html body.route-grade #app .desktop-grade-type-option, html body.route-grade #app .desktop-grade-input-mode, html body.route-grade #app .desktop-grade-typebar button, html body.route-grade #app .desktop-grade-typebar taro-button-core, html body.route-grade #app .desktop-grade-input-modebar button, html body.route-grade #app .desktop-grade-input-modebar taro-button-core { min-height: 36px !important; padding: 0 16px !important; border: 1px solid rgba(120,255,235,.38) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(90,240,225,.22), rgba(30,120,115,.10)), rgba(12, 28, 30, .72) !important; color: #d9fffa !important; font-weight: 650 !important; letter-spacing: .02em !important; text-shadow: 0 0 12px rgba(110,231,216,.25) !important; box-shadow: 0 0 0 1px rgba(53,214,197,.08), 0 0 16px rgba(53,214,197,.14), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.18) !important; backdrop-filter: blur(10px) saturate(140%) !important; -webkit-backdrop-filter: blur(10px) saturate(140%) !important; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease !important; } html body.route-qa #app .desktop-qa-question-type:hover, html body.route-qa #app #free-chat-hero .desktop-qa-native-mode:hover, html body.route-grade #app .desktop-grade-type-option:hover, html body.route-grade #app .desktop-grade-input-mode:hover, html body.route-grade #app .desktop-grade-typebar button:hover, html body.route-grade #app .desktop-grade-input-modebar button:hover { border-color: rgba(160,255,245,.62) !important; color: #f2fffc !important; box-shadow: 0 0 0 1px rgba(53,214,197,.18), 0 0 22px rgba(53,214,197,.28), inset 0 1px 0 rgba(255,255,255,.26) !important; transform: translateY(-1px) !important; } html body.route-qa #app :is(.desktop-qa-question-type.is-active, .desktop-qa-question-type[aria-pressed="true"]), html body.route-qa #app #free-chat-hero .desktop-qa-native-mode.is-active, html body.route-grade #app :is( .desktop-grade-type-option.capsule-selected, .desktop-grade-type-option.is-active, .desktop-grade-type-option[aria-pressed="true"], .desktop-grade-input-mode.capsule-selected, .desktop-grade-input-mode.is-active, .desktop-grade-typebar .capsule-selected, .desktop-grade-input-modebar .capsule-selected ) { border-color: rgba(190,255,248,.85) !important; background: linear-gradient(135deg, rgba(90,245,230,.95), rgba(40,200,185,.88) 55%, rgba(30,170,160,.92)) !important; color: #031814 !important; text-shadow: none !important; box-shadow: 0 0 0 1px rgba(200,255,250,.35), 0 0 28px rgba(70,240,220,.45), 0 0 48px rgba(53,214,197,.22), inset 0 1px 0 rgba(255,255,255,.55) !important; } html body.route-qa #app :is(.desktop-qa-question-type.is-active, .desktop-qa-question-type[aria-pressed="true"]) *, html body.route-qa #app #free-chat-hero .desktop-qa-native-mode.is-active *, html body.route-grade #app :is(.desktop-grade-type-option.capsule-selected, .desktop-grade-input-mode.capsule-selected, .desktop-grade-typebar .capsule-selected) * { color: #031814 !important; } html body.desktop-light.route-qa #app .desktop-qa-question-type, html body.desktop-light.route-qa #app #free-chat-hero .desktop-qa-native-mode, html body.desktop-light.route-grade #app :is(.desktop-grade-type-option, .desktop-grade-input-mode) { border-color: rgba(26,168,156,.28) !important; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(220,245,240,.88)) !important; color: #0f5c54 !important; text-shadow: none !important; box-shadow: 0 0 14px rgba(36,169,157,.12), inset 0 1px 0 #fff !important; } html body.desktop-light.route-qa #app :is(.desktop-qa-question-type.is-active, .desktop-qa-question-type[aria-pressed="true"]), html body.desktop-light.route-qa #app #free-chat-hero .desktop-qa-native-mode.is-active, html body.desktop-light.route-grade #app :is(.desktop-grade-type-option.capsule-selected, .desktop-grade-input-mode.capsule-selected) { border-color: #1aa89c !important; background: linear-gradient(135deg, #4fe0d2, #24a99d) !important; color: #031814 !important; box-shadow: 0 0 22px rgba(36,169,157,.28), inset 0 1px 0 rgba(255,255,255,.55) !important; } } /* Homepage viewport fit: keep the complete map and information rail visible on short desktop screens. */ /* ============================================================ STARFIELD LAYER + OPEN STUDIO (absolute file end) Stars live on body::before so Grade entry cannot wipe them. Panels open to the sky — fewer frames, quieter surfaces. ============================================================ */ @media (min-width:981px) { /* Fixed sky behind the content column */ html body.route-qa::before, html body.route-grade::before, html body.studio-starfield-on.route-qa::before, html body.studio-starfield-on.route-grade::before, html.studio-boot-qa body::before, html.studio-boot-grade body::before { content: "" !important; position: fixed !important; z-index: 0 !important; top: 0 !important; bottom: 0 !important; left: var(--desktop-left-width, 300px) !important; right: var(--desktop-right-width, 392px) !important; pointer-events: none !important; background-color: #070b10 !important; background-image: radial-gradient(1.5px 1.5px at 10% 16%, rgba(240,255,252,.72), transparent 2.2px), radial-gradient(1px 1px at 26% 40%, rgba(255,255,255,.48), transparent 2px), radial-gradient(1.6px 1.6px at 44% 12%, rgba(53,214,197,.78), transparent 2.6px), radial-gradient(1px 1px at 58% 34%, rgba(255,248,230,.52), transparent 2px), radial-gradient(1.3px 1.3px at 72% 20%, rgba(255,255,255,.42), transparent 2px), radial-gradient(1px 1px at 86% 46%, rgba(194,167,96,.58), transparent 2px), radial-gradient(1.4px 1.4px at 16% 66%, rgba(255,255,255,.36), transparent 2px), radial-gradient(1px 1px at 38% 78%, rgba(53,214,197,.55), transparent 2px), radial-gradient(1.2px 1.2px at 55% 60%, rgba(255,255,255,.4), transparent 2px), radial-gradient(1px 1px at 90% 72%, rgba(255,255,255,.32), transparent 2px), radial-gradient(1.6px 1.6px at 7% 86%, rgba(194,167,96,.48), transparent 2.5px), radial-gradient(1px 1px at 31% 6%, rgba(255,255,255,.36), transparent 2px), radial-gradient(1.2px 1.2px at 95% 10%, rgba(53,214,197,.42), transparent 2px), radial-gradient(circle at 18% 0%, rgba(53,214,197,.28), transparent 40%), radial-gradient(circle at 82% 8%, rgba(120,170,220,.16), transparent 36%), radial-gradient(circle at 70% 100%, rgba(194,167,96,.12), transparent 44%), linear-gradient(180deg, #0a1218 0%, #070b10 48%, #080d12 100%) !important; } html body.desktop-nav-collapsed.route-qa::before, html body.desktop-nav-collapsed.route-grade::before, html body.desktop-nav-collapsed.studio-starfield-on::before { left: 0 !important; } html body.context-collapsed.route-qa::before, html body.context-collapsed.route-grade::before, html body:not(.route-has-context).route-qa::before, html body:not(.route-has-context).route-grade::before { right: 0 !important; } /* Page itself stays clear so the sky shows through */ html body.route-qa #app, html body.route-grade #app { position: relative !important; z-index: 1 !important; background: transparent !important; background-image: none !important; } html body.route-qa #app .min-h-screen, html body.route-grade #app .min-h-screen, html body.route-grade #app .min-h-screen.desktop-grade-native, html body.route-grade #app .min-h-screen.desktop-grade-workspace, html body.route-qa #app .min-h-screen.desktop-starfield, html body.route-grade #app .min-h-screen.desktop-starfield, html body.route-qa #app .min-h-screen[data-desktop-qa-ready="true"], html body.route-grade #app .min-h-screen[data-desktop-grade-ready="true"] { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* Open studio — strip heavy frames; soft surfaces only */ html body.route-qa #app .min-h-screen > :is(.desktop-qa-content, .glass-card, .glass-card-frosted), html body.route-grade #app .desktop-grade-content > :is( .desktop-grade-typebar, .desktop-grade-question-panel, .desktop-grade-answer-panel, .desktop-grade-history-shortcut ) { border: 0 !important; outline: 0 !important; border-radius: 14px !important; background: rgba(10, 18, 24, .55) !important; background-image: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; backdrop-filter: blur(12px) saturate(118%) !important; -webkit-backdrop-filter: blur(12px) saturate(118%) !important; } html body.route-qa #app #desktop-qa-header, html body.route-grade #app #desktop-grade-header { border: 0 !important; border-bottom: 0 !important; background: transparent !important; box-shadow: none !important; margin-bottom: 22px !important; padding-bottom: 10px !important; } html body.route-qa #app #desktop-qa-header a, html body.route-grade #app #desktop-grade-header a { border: 0 !important; background: transparent !important; color: #6ee7d8 !important; box-shadow: none !important; padding: 6px 0 !important; } html body.route-qa #app .desktop-qa-question-types, html body.route-qa #app .desktop-qa-question-entry > div, html body.route-grade #app :is(.desktop-grade-question-panel, .desktop-grade-answer-panel) > div, html body.route-grade #app .desktop-grade-input-modebar { border: 0 !important; background: transparent !important; box-shadow: none !important; } html body.route-qa #app :is(textarea, taro-textarea-core), html body.route-grade #app :is(textarea, taro-textarea-core) { border: 0 !important; border-radius: 12px !important; background: rgba(5, 12, 16, .62) !important; box-shadow: inset 0 0 0 1px rgba(120,200,190,.12) !important; } html body.route-qa #app textarea:focus, html body.route-grade #app textarea:focus { box-shadow: inset 0 0 0 1px rgba(110,231,216,.45), 0 0 0 3px rgba(53,214,197,.12) !important; } html body.route-grade #app .desktop-grade-history-shortcut { border: 0 !important; background: rgba(18, 16, 12, .5) !important; box-shadow: inset 0 1px 0 rgba(194,167,96,.12) !important; } html body.route-qa #app :is(.desktop-qa-answer-card, [data-workspace-section="answer"]), html body.route-grade #app :is(.desktop-grade-result-card, [data-workspace-section="grade-result"]) { border: 0 !important; border-left: 2px solid rgba(110,231,216,.7) !important; background: rgba(10, 22, 24, .58) !important; box-shadow: none !important; } html body.desktop-light.route-qa::before, html body.desktop-light.route-grade::before { background-color: #eef6f4 !important; background-image: radial-gradient(1.2px 1.2px at 14% 18%, rgba(23,143,131,.3), transparent 2px), radial-gradient(circle at 16% 0%, rgba(53,214,197,.12), transparent 40%), linear-gradient(180deg, #f3faf8, #eef6f4) !important; } html body.desktop-light.route-qa #app .min-h-screen > :is(.desktop-qa-content, .glass-card), html body.desktop-light.route-grade #app .desktop-grade-content > :is( .desktop-grade-typebar, .desktop-grade-question-panel, .desktop-grade-answer-panel, .desktop-grade-history-shortcut ) { background: rgba(255,255,255,.72) !important; border: 0 !important; box-shadow: 0 8px 28px rgba(28,90,82,.05) !important; } } /* ============================================================ QA WHITE-SHELL FIX + BRIGHTER SKY (absolute file end) Kill the bright white card around 答疑 input; keep starfield open. ============================================================ */ @media (min-width:981px) { /* Brighter starfield layer */ html body.route-qa::before, html body.route-grade::before, html body.studio-starfield-on.route-qa::before, html body.studio-starfield-on.route-grade::before, html.studio-boot-qa body::before, html.studio-boot-grade body::before { opacity: 1 !important; background-image: radial-gradient(2px 2px at 8% 12%, rgba(255,255,255,.85), transparent 2.5px), radial-gradient(1.5px 1.5px at 18% 28%, rgba(160,255,240,.9), transparent 2.2px), radial-gradient(1.8px 1.8px at 32% 8%, rgba(255,255,255,.7), transparent 2.4px), radial-gradient(1.4px 1.4px at 46% 22%, rgba(53,214,197,.95), transparent 2.2px), radial-gradient(1.6px 1.6px at 58% 14%, rgba(255,248,220,.8), transparent 2.3px), radial-gradient(1.3px 1.3px at 70% 30%, rgba(255,255,255,.65), transparent 2px), radial-gradient(1.7px 1.7px at 82% 10%, rgba(120,220,255,.8), transparent 2.4px), radial-gradient(1.4px 1.4px at 92% 26%, rgba(194,167,96,.85), transparent 2.2px), radial-gradient(1.5px 1.5px at 12% 48%, rgba(255,255,255,.55), transparent 2.2px), radial-gradient(1.3px 1.3px at 28% 58%, rgba(53,214,197,.7), transparent 2px), radial-gradient(1.6px 1.6px at 44% 52%, rgba(255,255,255,.6), transparent 2.3px), radial-gradient(1.4px 1.4px at 66% 62%, rgba(255,255,255,.5), transparent 2.1px), radial-gradient(1.8px 1.8px at 78% 48%, rgba(160,255,240,.7), transparent 2.4px), radial-gradient(1.3px 1.3px at 88% 68%, rgba(255,255,255,.45), transparent 2px), radial-gradient(1.5px 1.5px at 6% 78%, rgba(194,167,96,.7), transparent 2.2px), radial-gradient(1.4px 1.4px at 22% 88%, rgba(255,255,255,.5), transparent 2.1px), radial-gradient(1.6px 1.6px at 52% 84%, rgba(53,214,197,.65), transparent 2.3px), radial-gradient(1.3px 1.3px at 74% 90%, rgba(255,255,255,.4), transparent 2px), radial-gradient(circle at 16% 0%, rgba(53,214,197,.32), transparent 42%), radial-gradient(circle at 84% 6%, rgba(120,170,220,.18), transparent 38%), radial-gradient(circle at 50% 100%, rgba(194,167,96,.14), transparent 46%), linear-gradient(180deg, #081018 0%, #070b10 50%, #060a0e 100%) !important; } /* Safe white-shell fix: named classes only (NO [class*=]/[style*=] — those hang the tab) */ html body.route-qa #app .min-h-screen .desktop-qa-content, html body.route-qa #app .min-h-screen .glass-card, html body.route-qa #app .min-h-screen .glass-card-frosted, html body.route-qa #app .min-h-screen .bg-white, html body.route-qa #app .min-h-screen .bg-card, html body.route-qa #app .min-h-screen .rounded-xl, html body.route-qa #app .min-h-screen .rounded-2xl, html body.route-grade #app .min-h-screen .glass-card, html body.route-grade #app .min-h-screen .glass-card-frosted, html body.route-grade #app .min-h-screen .bg-white, html body.route-grade #app .min-h-screen .bg-card, html body.route-grade #app .min-h-screen .rounded-xl, html body.route-grade #app .min-h-screen .rounded-2xl, html body.route-grade #app .min-h-screen .desktop-grade-content, html body.route-grade #app .min-h-screen .desktop-grade-question-panel, html body.route-grade #app .min-h-screen .desktop-grade-answer-panel { background: rgba(8, 16, 22, .62) !important; background-color: rgba(8, 16, 22, .62) !important; background-image: none !important; border-color: transparent !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; color: #e8f4f2 !important; } /* Keep the outer workspace card open to the sky */ html body.route-qa #app .min-h-screen > .desktop-qa-content, html body.route-qa #app .min-h-screen > .glass-card, html body.route-qa #app .min-h-screen > .glass-card-frosted, html body.route-qa #app .min-h-screen > .rounded-xl, html body.route-qa #app .min-h-screen > .rounded-2xl { background: rgba(8, 16, 22, .48) !important; background-color: rgba(8, 16, 22, .48) !important; border: 0 !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; } /* Inner input well stays deep, not white */ html body.route-qa #app .min-h-screen textarea, html body.route-qa #app .min-h-screen taro-textarea-core, html body.route-qa #app .min-h-screen .glass-input, html body.route-qa #app .min-h-screen .glass-input-active, html body.route-grade #app .min-h-screen textarea, html body.route-grade #app .min-h-screen taro-textarea-core, html body.route-grade #app .min-h-screen .glass-input, html body.route-grade #app .min-h-screen .glass-input-active { background: rgba(4, 10, 14, .78) !important; background-color: rgba(4, 10, 14, .78) !important; color: #eef6f4 !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(110,231,216,.14) !important; } /* Mode capsules — force tech glow even without classes */ html body.route-qa #app #free-chat-hero button, html body.route-qa #app #free-chat-hero taro-button-core, html body.route-qa #app #free-chat-hero [role="button"] { border: 1px solid rgba(120,255,235,.42) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(90,240,225,.26), rgba(30,120,115,.12)), rgba(10, 26, 30, .78) !important; color: #e6fffb !important; box-shadow: 0 0 18px rgba(53,214,197,.18), inset 0 1px 0 rgba(255,255,255,.2) !important; } html body.route-qa #app #free-chat-hero :is(button,taro-button-core).is-active, html body.route-qa #app #free-chat-hero :is(button,taro-button-core)[aria-pressed="true"], html body.route-qa #app #free-chat-hero :is(button,taro-button-core).desktop-qa-native-mode.is-active, html body.route-qa #app #free-chat-hero :is(button,taro-button-core).capsule-selected { border-color: rgba(200,255,250,.9) !important; background: linear-gradient(135deg, rgba(95,245,232,.98), rgba(42,200,186,.9)) !important; color: #031814 !important; box-shadow: 0 0 28px rgba(70,240,220,.42), inset 0 1px 0 rgba(255,255,255,.55) !important; } html body.route-qa #app .desktop-qa-submit, html body.route-grade #app .desktop-grade-submit { border: 0 !important; border-radius: 10px !important; background: linear-gradient(135deg, #4fe8d8, #1eb5a6) !important; color: #031814 !important; box-shadow: 0 0 26px rgba(53,214,197,.32), inset 0 1px 0 rgba(255,255,255,.4) !important; } } /* ============================================================ STUDIO VISIBILITY NUKE v309 (absolute file end) Never blank QA/Grade. Prefer showing over hiding. ============================================================ */ @media (min-width:981px) { html body.route-qa #app .min-h-screen, html body.route-grade #app .min-h-screen, html body.route-grade #app .desktop-grade-native, html body.studio-pending.route-qa #app .min-h-screen, html body.studio-pending.route-grade #app .min-h-screen, html.studio-boot-qa #app .min-h-screen, html.studio-boot-grade #app .min-h-screen { opacity: 1 !important; pointer-events: auto !important; visibility: visible !important; } } /* ============================================================ STUDIO LOOK RESTORE v311 (absolute file end) Keep visibility, restore latest open-studio surfaces via named classes only. ============================================================ */ @media (min-width:981px) { html body.route-qa #app .min-h-screen, html body.route-grade #app .min-h-screen { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; color: #e8f4f2 !important; } html body.route-qa #app .desktop-qa-legacy-header, html body.route-qa #app .desktop-legacy-topbar, html body.route-grade #app .desktop-grade-native-hero, html body.route-grade #app .desktop-grade-legacy-intro, html body.route-grade #app .desktop-legacy-topbar, html body.route-qa #app .desktop-studio-inline-credit, html body.route-grade #app .desktop-studio-inline-credit { display: none !important; } html body.route-qa #app #desktop-qa-header, html body.route-grade #app #desktop-grade-header { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 28px !important; margin: 0 0 22px !important; padding: 0 0 20px !important; border: 0 !important; border-bottom: 1px solid #1c2329 !important; background: transparent !important; } html body.route-qa #app #desktop-qa-header span, html body.route-grade #app #desktop-grade-header span { display: block !important; color: #3dcec0 !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .12em !important; } html body.route-qa #app #desktop-qa-header h1, html body.route-grade #app #desktop-grade-header h1 { margin: 6px 0 8px !important; color: #f2f7f6 !important; font-size: 28px !important; font-weight: 650 !important; line-height: 1.22 !important; } html body.route-qa #app #desktop-qa-header p, html body.route-grade #app #desktop-grade-header p { max-width: 640px !important; margin: 0 !important; color: #8b969f !important; font-size: 13px !important; line-height: 1.55 !important; } html body.route-qa #app .desktop-qa-content, html body.route-qa #app .desktop-qa-question-entry, html body.route-qa #app .desktop-qa-question-types, html body.route-qa #app .desktop-qa-answer-card { background: rgba(8, 16, 22, .34) !important; background-image: none !important; border: 0 !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; color: #e8f4f2 !important; } /* Grade grid shell stays open — only direct panels get a surface */ html body.route-grade #app .desktop-grade-content { background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } html body.route-grade #app .desktop-grade-content > .desktop-grade-question-panel, html body.route-grade #app .desktop-grade-content > .desktop-grade-answer-panel, html body.route-grade #app .desktop-grade-content > .desktop-grade-typebar, html body.route-grade #app .desktop-grade-content > .desktop-grade-history-shortcut { background: rgba(8, 16, 22, .34) !important; background-image: none !important; border: 0 !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; color: #e8f4f2 !important; } html body.route-qa #app .desktop-qa-answer-card :is(h1,h2,h3), html body.route-grade #app .desktop-grade-result-card :is(h1,h2,h3) { color: #3dcec0 !important; } html body.route-qa #app .desktop-qa-answer-card h2, html body.route-grade #app .desktop-grade-result-card h2 { color: #c2a760 !important; } html body.route-qa #app .desktop-qa-answer-card h3 { color: #9adfd6 !important; } html body.route-qa #app .desktop-qa-question-type, html body.route-qa #app .desktop-qa-native-mode, html body.route-grade #app .desktop-grade-type-option, html body.route-grade #app .desktop-grade-input-mode { border: 1px solid rgba(120,255,235,.36) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(90,240,225,.22), rgba(30,120,115,.10)), rgba(10, 26, 30, .78) !important; color: #e6fffb !important; box-shadow: 0 0 14px rgba(53,214,197,.14), inset 0 1px 0 rgba(255,255,255,.16) !important; } html body.route-qa #app .desktop-qa-question-type.is-active, html body.route-qa #app .desktop-qa-native-mode.is-active, html body.route-grade #app .desktop-grade-type-option.capsule-selected, html body.route-grade #app .desktop-grade-input-mode.capsule-selected { border-color: rgba(200,255,250,.88) !important; background: linear-gradient(135deg, rgba(95,245,232,.98), rgba(42,200,186,.9)) !important; color: #031814 !important; } html body.route-qa #app .desktop-qa-submit, html body.route-grade #app .desktop-grade-submit { border: 0 !important; border-radius: 10px !important; background: linear-gradient(135deg, #4fe8d8, #1eb5a6) !important; color: #031814 !important; box-shadow: 0 0 26px rgba(53,214,197,.32), inset 0 1px 0 rgba(255,255,255,.4) !important; } html body.route-qa #app textarea, html body.route-qa #app taro-textarea-core, html body.route-grade #app textarea, html body.route-grade #app taro-textarea-core { background: rgba(4, 10, 14, .78) !important; color: #eef6f4 !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(110,231,216,.14) !important; } } /* ============================================================ CAPSULE GLOW v312 (absolute file end) Keep transparent studio; make mode/type/submit buttons luminous. ============================================================ */ @media (min-width:981px) { html body.route-qa #app .desktop-qa-native-mode, html body.route-qa #app #free-chat-hero button, html body.route-qa #app #free-chat-hero taro-button-core, html body.route-qa #app .desktop-qa-question-type, html body.route-grade #app .desktop-grade-type-option, html body.route-grade #app .desktop-grade-input-mode { border: 1px solid rgba(140,255,240,.55) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(110,255,240,.34), rgba(40,140,135,.14)), rgba(8, 28, 32, .55) !important; color: #eafffb !important; text-shadow: 0 0 10px rgba(120,255,235,.28) !important; box-shadow: 0 0 0 1px rgba(80,240,220,.12), 0 0 18px rgba(53,214,197,.32), 0 0 36px rgba(53,214,197,.14), inset 0 1px 0 rgba(255,255,255,.28) !important; transition: box-shadow .18s ease, border-color .18s ease, background .18s ease, transform .18s ease !important; } html body.route-qa #app .desktop-qa-native-mode:hover, html body.route-qa #app #free-chat-hero button:hover, html body.route-qa #app .desktop-qa-question-type:hover, html body.route-grade #app .desktop-grade-type-option:hover, html body.route-grade #app .desktop-grade-input-mode:hover { border-color: rgba(190,255,248,.78) !important; box-shadow: 0 0 0 1px rgba(100,245,230,.22), 0 0 24px rgba(70,240,220,.42), 0 0 48px rgba(53,214,197,.22), inset 0 1px 0 rgba(255,255,255,.36) !important; } html body.route-qa #app .desktop-qa-native-mode.is-active, html body.route-qa #app .desktop-qa-native-mode[aria-pressed="true"], html body.route-qa #app #free-chat-hero button.is-active, html body.route-qa #app #free-chat-hero button[aria-pressed="true"], html body.route-qa #app #free-chat-hero .capsule-selected, html body.route-qa #app .desktop-qa-question-type.is-active, html body.route-qa #app .desktop-qa-question-type[aria-pressed="true"], html body.route-grade #app .desktop-grade-type-option.capsule-selected, html body.route-grade #app .desktop-grade-type-option.is-active, html body.route-grade #app .desktop-grade-input-mode.capsule-selected, html body.route-grade #app .desktop-grade-input-mode.is-active { border-color: rgba(220,255,250,.95) !important; background: linear-gradient(135deg, #7af6ea 0%, #35d6c5 48%, #1fb5a6 100%) !important; color: #031814 !important; text-shadow: none !important; box-shadow: 0 0 0 1px rgba(180,255,245,.35), 0 0 22px rgba(90,245,230,.55), 0 0 48px rgba(53,214,197,.38), 0 0 72px rgba(53,214,197,.18), inset 0 1px 0 rgba(255,255,255,.55) !important; } html body.route-qa #app .desktop-qa-submit, html body.route-grade #app .desktop-grade-submit { border: 0 !important; border-radius: 10px !important; background: linear-gradient(135deg, #7af6ea, #2fd0bf 55%, #18b3a4) !important; color: #031814 !important; font-weight: 800 !important; text-shadow: none !important; box-shadow: 0 0 0 1px rgba(160,255,240,.28), 0 0 28px rgba(70,240,220,.48), 0 0 56px rgba(53,214,197,.28), inset 0 1px 0 rgba(255,255,255,.5) !important; } html body.route-qa #app .desktop-qa-submit:hover, html body.route-grade #app .desktop-grade-submit:hover { transform: translateY(-1px) !important; box-shadow: 0 0 0 1px rgba(180,255,245,.4), 0 0 34px rgba(90,245,230,.58), 0 0 68px rgba(53,214,197,.34), inset 0 1px 0 rgba(255,255,255,.6) !important; } /* Hide leftover pink LINKA watermark on studio pages */ html body.route-qa #app .logo-linka, html body.route-grade #app .logo-linka { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } } /* ============================================================ GRADE VISIBLE FIX v314 (absolute file end) 1) Never hide workspace hosts mistagged as legacy hero 2) Keep content/panels opaque and on-grid 3) Submit full-width even when nested inside answer panel ============================================================ */ @media (min-width:981px) { html body.route-grade #app .min-h-screen, html body.route-grade #app .desktop-grade-workspace, html body.route-grade #app .desktop-grade-native { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } html body.route-grade #app #desktop-grade-header { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } html body.route-grade #app .desktop-grade-content { display: grid !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-auto-flow: row dense !important; align-items: start !important; column-gap: 18px !important; row-gap: 16px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: #e8f4f2 !important; } /* Rescue: form hosts must never stay display:none from hero mistag */ html body.route-grade #app .desktop-grade-native-hero:has(textarea), html body.route-grade #app .desktop-grade-native-hero:has(taro-textarea-core), html body.route-grade #app .desktop-grade-native-hero:has(button), html body.route-grade #app .desktop-grade-native-hero:has(taro-button-core), html body.route-grade #app .desktop-grade-legacy-intro:has(textarea), html body.route-grade #app .desktop-grade-legacy-intro:has(taro-textarea-core), html body.route-grade #app .desktop-grade-legacy-intro:has(button), html body.route-grade #app .desktop-grade-legacy-intro:has(taro-button-core), html body.route-grade #app .desktop-legacy-topbar:has(textarea), html body.route-grade #app .desktop-legacy-topbar:has(taro-textarea-core), html body.route-grade #app .desktop-legacy-topbar:has(button), html body.route-grade #app .desktop-legacy-topbar:has(taro-button-core) { display: block !important; opacity: 1 !important; visibility: visible !important; height: auto !important; max-height: none !important; overflow: visible !important; pointer-events: auto !important; } html body.route-grade #app .desktop-grade-content.desktop-grade-native-hero, html body.route-grade #app .desktop-grade-content.desktop-grade-legacy-intro, html body.route-grade #app .desktop-grade-content.desktop-legacy-topbar { display: grid !important; opacity: 1 !important; visibility: visible !important; height: auto !important; max-height: none !important; overflow: visible !important; pointer-events: auto !important; } html body.route-grade #app .desktop-grade-content > .desktop-grade-typebar, html body.route-grade #app .desktop-grade-content > .desktop-grade-submit-row, html body.route-grade #app .desktop-grade-content > .desktop-grade-submit, html body.route-grade #app .desktop-grade-content > .desktop-grade-history-shortcut { grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; justify-self: stretch !important; } html body.route-grade #app .desktop-grade-content > .desktop-grade-question-panel { grid-column: 1 !important; align-self: stretch !important; } html body.route-grade #app .desktop-grade-content > .desktop-grade-answer-panel { grid-column: 2 !important; align-self: stretch !important; } /* If a panel was wrongly also marked submit-row, prefer panel column */ html body.route-grade #app .desktop-grade-content > .desktop-grade-question-panel.desktop-grade-submit-row { grid-column: 1 !important; } html body.route-grade #app .desktop-grade-content > .desktop-grade-answer-panel.desktop-grade-submit-row { grid-column: 2 !important; } html body.route-grade #app .desktop-grade-content > .desktop-grade-typebar, html body.route-grade #app .desktop-grade-content > .desktop-grade-question-panel, html body.route-grade #app .desktop-grade-content > .desktop-grade-answer-panel, html body.route-grade #app .desktop-grade-content > .desktop-grade-history-shortcut { display: flex !important; flex-direction: column !important; min-width: 0 !important; margin: 0 !important; padding: 18px 20px !important; border: 0 !important; border-radius: 14px !important; background: rgba(8, 16, 22, .42) !important; background-image: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; outline: 0 !important; opacity: 1 !important; visibility: visible !important; color: #e8f4f2 !important; } html body.route-grade #app .desktop-grade-content > .desktop-grade-question-panel, html body.route-grade #app .desktop-grade-content > .desktop-grade-answer-panel { min-height: 420px !important; } html body.route-grade #app .desktop-grade-content > :is(.desktop-grade-question-panel, .desktop-grade-answer-panel, .desktop-grade-typebar) > div, html body.route-grade #app .desktop-grade-content > :is(.desktop-grade-question-panel, .desktop-grade-answer-panel, .desktop-grade-typebar) > div > div { background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important; opacity: 1 !important; visibility: visible !important; color: inherit !important; } html body.route-grade #app .desktop-grade-type-options, html body.route-grade #app .desktop-grade-input-modebar { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Dedicated submit row (only when not a Q/A panel) */ html body.route-grade #app .desktop-grade-content > .desktop-grade-submit-row:not(.desktop-grade-question-panel):not(.desktop-grade-answer-panel):not(.desktop-grade-typebar) { display: flex !important; align-items: stretch !important; justify-content: stretch !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body.route-grade #app .desktop-grade-content > .desktop-grade-submit, html body.route-grade #app .desktop-grade-content > .desktop-grade-submit-row .desktop-grade-submit, html body.route-grade #app .desktop-grade-content .desktop-grade-submit { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; min-height: 48px !important; margin: 12px 0 0 !important; padding: 12px 20px !important; border: 0 !important; border-radius: 10px !important; background: linear-gradient(135deg, #7af6ea, #2fd0bf 55%, #18b3a4) !important; color: #031814 !important; font-weight: 800 !important; opacity: 1 !important; visibility: visible !important; box-shadow: 0 0 0 1px rgba(160,255,240,.28), 0 0 28px rgba(70,240,220,.48), 0 0 56px rgba(53,214,197,.28), inset 0 1px 0 rgba(255,255,255,.5) !important; } html body.route-grade #app .desktop-grade-content textarea, html body.route-grade #app .desktop-grade-content taro-textarea-core { flex: 1 1 auto !important; width: 100% !important; min-height: 280px !important; margin: 0 !important; opacity: 1 !important; visibility: visible !important; color: #eef6f4 !important; background: rgba(4, 10, 14, .72) !important; border: 0 !important; border-radius: 10px !important; box-shadow: inset 0 0 0 1px rgba(110,231,216,.14) !important; } } /* ============================================================ QA STUDIO FORCE v315 (absolute file end) Kill native purple/white mobile QA chrome; lock studio header + glow. ============================================================ */ @media (min-width:981px) { html body.route-qa #app .min-h-screen, html body.route-qa #app .desktop-starfield { opacity: 1 !important; visibility: visible !important; color: #e8f4f2 !important; } html body.route-qa #app #desktop-qa-header { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 28px !important; margin: 0 0 22px !important; padding: 0 0 20px !important; border: 0 !important; border-bottom: 1px solid #1c2329 !important; background: transparent !important; opacity: 1 !important; visibility: visible !important; } html body.route-qa #app #desktop-qa-header span { display: block !important; color: #3dcec0 !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .12em !important; } html body.route-qa #app #desktop-qa-header h1 { margin: 6px 0 8px !important; color: #f2f7f6 !important; font-size: 28px !important; font-weight: 650 !important; } html body.route-qa #app #desktop-qa-header p { max-width: 640px !important; margin: 0 !important; color: #8b969f !important; font-size: 13px !important; } /* Old mobile intro / pink watermark */ html body.route-qa #app .logo-linka, html body.route-qa #app .desktop-qa-legacy-header, html body.route-qa #app .desktop-legacy-topbar, html body.route-qa #app .desktop-studio-inline-credit { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Collapse free-chat hero to mode capsules only */ html body.route-qa #app #free-chat-hero, html body.route-qa #app #free-chat-hero.desktop-qa-native-intro { display: block !important; min-height: 44px !important; height: auto !important; margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; } html body.route-qa #app #free-chat-hero > div:first-child > *:not(.desktop-qa-native-modebar):not(:has(button)):not(:has(taro-button-core)) { display: none !important; } html body.route-qa #app #free-chat-hero .desktop-qa-native-modebar, html body.route-qa #app #free-chat-hero div:has(> button), html body.route-qa #app #free-chat-hero div:has(> taro-button-core) { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Force teal glow over native purple inline gradients */ html body.route-qa #app #free-chat-hero button, html body.route-qa #app #free-chat-hero taro-button-core, html body.route-qa #app .desktop-qa-native-mode, html body.route-qa #app .desktop-qa-question-type { border: 1px solid rgba(140,255,240,.55) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(110,255,240,.34), rgba(40,140,135,.14)), rgba(8, 28, 32, .55) !important; background-image: linear-gradient(180deg, rgba(110,255,240,.34), rgba(40,140,135,.14)), linear-gradient(rgba(8, 28, 32, .55), rgba(8, 28, 32, .55)) !important; color: #eafffb !important; box-shadow: 0 0 0 1px rgba(80,240,220,.12), 0 0 18px rgba(53,214,197,.32), inset 0 1px 0 rgba(255,255,255,.28) !important; } html body.route-qa #app #free-chat-hero button.is-active, html body.route-qa #app #free-chat-hero button[aria-pressed="true"], html body.route-qa #app #free-chat-hero .capsule-selected, html body.route-qa #app .desktop-qa-native-mode.is-active, html body.route-qa #app .desktop-qa-question-type.is-active, html body.route-qa #app .desktop-qa-question-type[aria-pressed="true"] { border-color: rgba(220,255,250,.95) !important; background: linear-gradient(135deg, #7af6ea 0%, #35d6c5 48%, #1fb5a6 100%) !important; background-image: linear-gradient(135deg, #7af6ea 0%, #35d6c5 48%, #1fb5a6 100%) !important; color: #031814 !important; } /* Open studio surfaces — kill white nested cards */ html body.route-qa #app .desktop-qa-content, html body.route-qa #app .desktop-qa-question-types, html body.route-qa #app .desktop-qa-question-entry, html body.route-qa #app .min-h-screen > .glass-card, html body.route-qa #app .min-h-screen > .glass-card-frosted, html body.route-qa #app .min-h-screen > .rounded-xl, html body.route-qa #app .min-h-screen > .rounded-2xl, html body.route-qa #app .min-h-screen > .bg-white, html body.route-qa #app .min-h-screen > .bg-card { background: rgba(8, 16, 22, .34) !important; background-image: none !important; border: 0 !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; color: #e8f4f2 !important; } html body.route-qa #app .desktop-qa-content .glass-card, html body.route-qa #app .desktop-qa-content .glass-card-frosted, html body.route-qa #app .desktop-qa-content .rounded-xl, html body.route-qa #app .desktop-qa-content .rounded-2xl, html body.route-qa #app .desktop-qa-content .bg-white, html body.route-qa #app .desktop-qa-content .bg-card { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } html body.route-qa #app textarea, html body.route-qa #app taro-textarea-core { background: rgba(4, 10, 14, .72) !important; color: #eef6f4 !important; border: 0 !important; border-radius: 10px !important; box-shadow: inset 0 0 0 1px rgba(110,231,216,.14) !important; } html body.route-qa #app .desktop-qa-submit { border: 0 !important; border-radius: 10px !important; background: linear-gradient(135deg, #7af6ea, #2fd0bf 55%, #18b3a4) !important; background-image: linear-gradient(135deg, #7af6ea, #2fd0bf 55%, #18b3a4) !important; color: #031814 !important; font-weight: 800 !important; box-shadow: 0 0 0 1px rgba(160,255,240,.28), 0 0 28px rgba(70,240,220,.48), inset 0 1px 0 rgba(255,255,255,.5) !important; } } /* AUTH GATEWAY EOF LOCK — protects the auth layout from legacy rules above. */ @media (min-width:981px) { html body.route-auth #app { padding:0 !important; } html body.route-auth #app .min-h-screen.desktop-auth-page, html body.route-auth #app .min-h-screen { position:relative !important; isolation:isolate !important; display:grid !important; grid-template-columns:minmax(0,1.18fr) minmax(400px,.82fr) !important; grid-template-rows:minmax(0,1fr) !important;align-items:start !important; gap:clamp(48px,7vw,144px) !important; width:100% !important; max-width:none !important; min-height:100vh !important; margin:0 !important; padding:clamp(104px,10vh,132px) clamp(44px,8vw,154px) 68px !important; overflow-x:clip !important; overflow-y:auto !important; background:radial-gradient(ellipse 62% 74% at 18% 52%,rgba(34,222,197,.14),transparent 62%),radial-gradient(ellipse 42% 55% at 78% 22%,rgba(70,112,255,.16),transparent 69%),linear-gradient(116deg,#071015 0%,#080d13 48%,#0a0d17 100%) !important; } html body.route-auth #app #desktop-auth-stage { grid-column:1 !important; grid-row:1 !important; align-self:stretch !important; min-height:0 !important; display:flex !important; align-items:center !important; } html body.route-auth #app .desktop-auth-stage-copy { max-width:620px !important; padding-bottom:20px !important; } html body.route-auth #app .desktop-auth-stage-visual { inset:50% -10vw auto auto !important; width:min(55vw,720px) !important; transform:translateY(-50%) !important; opacity:.92 !important; } html body.route-auth #app .desktop-auth-stage-copy h1, html body.route-auth #app .desktop-auth-stage-copy [data-auth-stage-title] { max-width:590px !important; margin:22px 0 20px !important; color:#f5fffd !important; font-size:clamp(44px,4.4vw,74px) !important; line-height:1.06 !important; letter-spacing:-.045em !important; } html body.route-auth #app .desktop-auth-stage-sub { max-width:455px !important; font-size:15px !important; line-height:1.85 !important; } html body.route-auth #app .desktop-auth-feature-list { max-width:600px !important; margin-top:42px !important; gap:10px !important; } html body.route-auth #app .desktop-auth-feature-list li { min-height:94px !important; padding:15px 16px !important; border-radius:12px !important; background:linear-gradient(145deg,rgba(24,48,53,.72),rgba(13,20,29,.42)) !important; } html body.route-auth #app .desktop-auth-panel { grid-column:2 !important; grid-row:1 !important; align-self:start !important; justify-self:stretch !important; max-height:calc(100vh - 140px) !important; overflow-y:auto !important; width:100% !important; max-width:480px !important; min-width:0 !important; margin:0 !important; padding:clamp(28px,3vw,42px) !important; border:1px solid rgba(164,247,237,.22) !important; border-radius:24px !important; background:linear-gradient(145deg,rgba(21,32,43,.88),rgba(10,15,24,.88)) !important; box-shadow:0 30px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08) !important; } html body.route-auth #app .desktop-auth-panel .desktop-auth-mode-switch { display:flex !important; gap:4px !important; margin:0 0 28px !important; padding:4px !important; border-radius:12px !important; background:rgba(2,8,13,.46) !important; } html body.route-auth #app .desktop-auth-tab { flex:1 1 0 !important; min-width:0 !important; height:42px !important; padding:0 10px !important; border:0 !important; border-radius:8px !important; background:transparent !important; } html body.route-auth #app .desktop-auth-form-body { display:grid !important; gap:14px !important; } html body.route-auth #app .desktop-auth-panel :is(input,taro-input-core) { box-sizing:border-box !important; width:100% !important; min-height:50px !important; padding:0 15px !important; border:1px solid rgba(166,223,222,.16) !important; border-radius:10px !important; background:rgba(4,12,19,.66) !important; } html body.route-auth #app .desktop-auth-primary { width:100% !important; min-height:52px !important; margin-top:8px !important; border:0 !important; border-radius:10px !important; background:linear-gradient(104deg,#51ead7,#80b4ff) !important; color:#061c20 !important; } } @media (max-width:980px) { html body.route-auth #app { padding:0 !important; } html body.route-auth #app .min-h-screen.desktop-auth-page,html body.route-auth #app .min-h-screen { display:block !important; width:100% !important; min-height:100vh !important; padding:92px 20px 44px !important; } html body.route-auth #app #desktop-auth-stage { display:none !important; } html body.route-auth #app .desktop-auth-panel { width:min(100%,480px) !important; margin:0 auto !important; padding:28px 20px !important; border-radius:20px !important; } } /* AUTH AMBIENT GRID LOCK — keep decorative layers out of auth grid tracks. */ html body.route-auth #app #desktop-auth-ambient, html body.route-auth #app .desktop-auth-ambient { position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; } html body.route-auth #app #desktop-auth-stage { grid-row: 1 !important; position: relative !important; z-index: 2 !important; } html body.route-auth #app .desktop-auth-panel { grid-row: 1 !important; align-self: start !important; max-height: calc(100vh - 140px) !important; overflow-y: auto !important; } /* Login route safety net. The route's React content is code-split and can arrive after the desktop shell; never let a legacy transition keep the recovered form invisible or non-interactive. */ html body.route-auth #app .desktop-auth-panel { display: flex !important; flex-direction: column !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* Auth stability: native login controls mount asynchronously. Keep the desktop wrapper in one composited state instead of replaying legacy fades. */ html body.route-auth #app .desktop-auth-page, html body.route-auth #app .desktop-auth-panel, html body.route-auth #app #desktop-auth-stage, html body.route-auth #app #desktop-auth-homebar { animation:none !important; transition:none !important; } html body.route-auth #app .desktop-auth-page { contain:layout paint; } html body.route-auth #app .desktop-auth-homebar-actions { align-items:center !important; } html body.route-auth #app .desktop-auth-homebar-actions button:first-child { color:#9ec2bc !important; } /* One compact signature: a studio mark and its product scope. */ #desktop-studio-credit { gap:0 !important; } #desktop-studio-credit small { display:inline-flex; align-items:center; color:rgba(160,210,201,.58); font:500 9px/1.4 "IBM Plex Sans","DIN Alternate",sans-serif; letter-spacing:.16em; white-space:nowrap; } #desktop-studio-credit i { position:relative; width:28px; height:1px; margin:0 14px; background:linear-gradient(90deg,rgba(91,218,205,.12),rgba(91,218,205,.58),rgba(91,218,205,.12)); } #desktop-studio-credit i::after { position:absolute; top:50%; left:50%; width:4px; height:4px; border-radius:50%; background:#65dfd0; box-shadow:0 0 8px rgba(101,223,208,.7); content:""; transform:translate(-50%,-50%); } body.desktop-light #desktop-studio-credit small { color:#6d8e89; } body.desktop-light #desktop-studio-credit i { background:linear-gradient(90deg,rgba(38,128,117,.1),rgba(38,128,117,.52),rgba(38,128,117,.1)); } body.desktop-light #desktop-studio-credit i::after { background:#268075; box-shadow:0 0 7px rgba(38,128,117,.38); } @media (max-width:760px) { #desktop-studio-credit small, #desktop-studio-credit i { display:none; } } /* Login gateway: translate the central ornament into a quiet urban-learning map, matching the product's planning vocabulary without competing with the form. */ @media (min-width:981px) { html body.route-auth #app .desktop-auth-constellation { display: none !important; } html body.route-auth #app .desktop-auth-city-visual { position: absolute !important; z-index: 1 !important; right: -3vw !important; top: 50% !important; width: min(42vw, 590px) !important; height: 430px !important; transform: translateY(-50%) !important; pointer-events: none !important; } html body.route-auth #app .desktop-auth-city-grid { position: absolute; inset: 36px 10px 32px 36px; opacity: .82; border: 1px solid rgba(76,226,207,.13); border-radius: 48% 52% 45% 55%; background: linear-gradient(30deg, transparent 48%, rgba(83,229,211,.15) 49%, rgba(83,229,211,.15) 51%, transparent 52%), linear-gradient(120deg, transparent 48%, rgba(83,229,211,.11) 49%, rgba(83,229,211,.11) 51%, transparent 52%), repeating-linear-gradient(90deg, transparent 0 42px, rgba(90,220,207,.06) 43px 44px), repeating-linear-gradient(0deg, transparent 0 42px, rgba(90,220,207,.06) 43px 44px), radial-gradient(circle at 48% 53%, rgba(37,191,174,.22), transparent 31%); transform: rotate(-8deg); box-shadow: inset 0 0 74px rgba(23,143,131,.12), 0 0 90px rgba(23,143,131,.12); } html body.route-auth #app .desktop-auth-city-route { position:absolute; left:17%; top:22%; width:66%; height:57%; border: 1px dashed rgba(88,242,222,.55); border-left:0; border-bottom:0; border-radius: 0 100% 0 0; transform: rotate(-16deg); } html body.route-auth #app .desktop-auth-city-route i { position:absolute; width:9px; height:9px; border-radius:50%; background:#5bf1dc; box-shadow:0 0 0 5px rgba(91,241,220,.11), 0 0 16px rgba(91,241,220,.78); } html body.route-auth #app .desktop-auth-city-route i:nth-child(1){ left:-4px; bottom:-4px; } html body.route-auth #app .desktop-auth-city-route i:nth-child(2){ left:33%; top:5px; } html body.route-auth #app .desktop-auth-city-route i:nth-child(3){ right:20%; top:31%; } html body.route-auth #app .desktop-auth-city-route i:nth-child(4){ right:-4px; top:-4px; } html body.route-auth #app .desktop-auth-city-block { position:absolute; display:grid; min-width:104px; padding:10px 12px; border:1px solid rgba(90,229,213,.24); border-radius:8px; background:linear-gradient(135deg,rgba(20,49,53,.88),rgba(11,24,29,.7)); box-shadow:0 10px 28px rgba(0,0,0,.23); color:#dffcf7; transform:rotate(-4deg); } html body.route-auth #app .desktop-auth-city-block b { font-size:11px; font-weight:700; letter-spacing:.05em; } html body.route-auth #app .desktop-auth-city-block span { margin-top:4px; color:#54e8d4; font-size:9px; letter-spacing:.16em; } html body.route-auth #app .city-block-a { left:3%; top:19%; } html body.route-auth #app .city-block-b { right:0; top:28%; transform:rotate(5deg); } html body.route-auth #app .city-block-c { left:25%; bottom:5%; transform:rotate(3deg); } html body.route-auth #app .desktop-auth-city-origin { position:absolute; left:43%; top:48%; display:grid; width:96px; height:96px; place-content:center; text-align:center; border:1px solid rgba(106,245,227,.46); border-radius:50%; background:radial-gradient(circle,rgba(47,207,189,.26),rgba(8,22,27,.7) 64%); box-shadow:0 0 0 12px rgba(50,212,192,.05),0 0 40px rgba(56,215,196,.24); } html body.route-auth #app .desktop-auth-city-origin i { width:8px; height:8px; margin:0 auto 5px; border-radius:50%; background:#7bffeb; box-shadow:0 0 16px #5cf4dc; } html body.route-auth #app .desktop-auth-city-origin strong { color:#effffc; font-size:11px; letter-spacing:.13em; } html body.route-auth #app .desktop-auth-city-origin small { margin-top:4px; color:#7bcfc3; font-size:7px; letter-spacing:.08em; } html body.route-auth #app .desktop-auth-learning-pulse { display:flex !important; align-items:center; gap:8px; max-width:455px; margin-top:18px; color:#9bb6b5; font-size:10px; } html body.route-auth #app .desktop-auth-learning-pulse > span { color:#62e9d6; font-weight:700; letter-spacing:.08em; } html body.route-auth #app .desktop-auth-learning-pulse b { color:#d4e6e4; font-size:10px; font-weight:600; } html body.route-auth #app .desktop-auth-learning-pulse i { width:18px; height:1px; background:linear-gradient(90deg,#35d6c5,transparent); } html body.route-auth #app .desktop-auth-learning-pulse em { margin-left:auto; color:#6a8584; font-size:9px; font-style:normal; } } @media (max-width:980px) { html body.route-auth #app .desktop-auth-city-visual, html body.route-auth #app .desktop-auth-learning-pulse { display:none !important; } } /* Points dashboard: the two panels need a wide canvas. Stack them before the right-hand task panel can fall outside the desktop content rail. */ @media (max-width: 1500px) { body.route-points #desktop-points-redesign .points-content-grid { grid-template-columns:minmax(0, 1fr) !important; } body.route-points #desktop-points-redesign .points-route-panel, body.route-points #desktop-points-redesign .points-missions-panel { min-width:0; } } @media (max-width: 620px) { body.route-points #desktop-points-redesign :is(.points-route-panel,.points-missions-panel) > header { align-items:flex-start; flex-direction:column; } body.route-points #desktop-points-redesign :is(.points-route-panel,.points-missions-panel) header p { text-align:left; } body.route-points #desktop-points-redesign .points-route-item { grid-template-columns:31px 8px minmax(0,1fr) auto; gap:6px; padding:0 6px; } } /* Auth gateway: borrow the quiet pixel texture of Today rather than adding a separate diagram. This block intentionally wins over legacy auth art. */ @media (min-width:981px) { html body.route-auth #app .min-h-screen.desktop-auth-page, html body.route-auth #app .min-h-screen { grid-template-columns:minmax(0,1fr) minmax(360px,430px) !important; align-items:center !important; gap:clamp(52px,8vw,140px) !important; padding:92px clamp(42px,8vw,152px) 68px !important; background:#090c10 !important; background-image:radial-gradient(ellipse at 22% 48%,rgba(41,196,181,.10),transparent 35%),linear-gradient(116deg,#090c10 0%,#090c10 61%,#0b1116 100%) !important; } html body.route-auth #app .min-h-screen::before, html body.route-auth #app .min-h-screen::after { display:none !important; } html body.route-auth #app #desktop-auth-stage { min-height:420px !important; display:grid !important; align-content:center !important; overflow:hidden !important; } html body.route-auth #app .desktop-auth-stage-visual, html body.route-auth #app .desktop-auth-city-visual, html body.route-auth #app .desktop-auth-feature-list, html body.route-auth #app .desktop-auth-learning-pulse, html body.route-auth #app .desktop-auth-stage-status { display:none !important; } html body.route-auth #app .desktop-auth-mosaic { position:absolute !important; z-index:0 !important; top:50% !important; right:-1vw !important; width:min(43vw,550px) !important; height:312px !important; opacity:.92 !important; transform:translateY(-50%) !important; background: linear-gradient(90deg,transparent 0 7%,rgba(53,214,197,.76) 7% 10%,transparent 10% 18%,rgba(38,122,112,.68) 18% 21%,transparent 21% 27%,rgba(53,214,197,.38) 27% 31%,transparent 31% 100%) 0 0/100% 16px, linear-gradient(90deg,transparent 0 16%,rgba(38,122,112,.6) 16% 21%,transparent 21% 29%,rgba(53,214,197,.86) 29% 32%,transparent 32% 43%,rgba(53,214,197,.38) 43% 48%,transparent 48% 100%) 0 20px/100% 16px, linear-gradient(90deg,transparent 0 5%,rgba(53,214,197,.34) 5% 9%,transparent 9% 34%,rgba(38,122,112,.78) 34% 40%,transparent 40% 47%,rgba(53,214,197,.72) 47% 51%,transparent 51% 100%) 0 40px/100% 16px, linear-gradient(90deg,transparent 0 24%,rgba(53,214,197,.72) 24% 29%,transparent 29% 36%,rgba(38,122,112,.48) 36% 43%,transparent 43% 55%,rgba(53,214,197,.36) 55% 58%,transparent 58% 100%) 0 60px/100% 16px, repeating-linear-gradient(0deg,rgba(31,45,48,.66) 0 13px,transparent 13px 20px), repeating-linear-gradient(90deg,rgba(31,45,48,.66) 0 13px,transparent 13px 20px); filter:drop-shadow(0 0 24px rgba(53,214,197,.14)) !important; -webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.92) 25%,#000 72%,transparent),linear-gradient(0deg,transparent,#000 16%,#000 84%,transparent) !important; -webkit-mask-composite:source-in !important; mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.92) 25%,#000 72%,transparent) !important; } html body.route-auth #app .desktop-auth-stage-copy { position:relative !important; z-index:1 !important; max-width:430px !important; padding:0 !important; } html body.route-auth #app .desktop-auth-kicker { display:flex !important; align-items:center !important; gap:8px !important; color:#eafcf9 !important; font-size:18px !important; font-weight:700 !important; letter-spacing:.04em !important; } html body.route-auth #app .desktop-auth-kicker::before { display:none !important; } html body.route-auth #app .desktop-auth-kicker b { color:#57dfd1 !important; } html body.route-auth #app .desktop-auth-kicker i { color:#6a7f80 !important; font-style:normal !important; } html body.route-auth #app .desktop-auth-public-beta { margin-top:19px !important; color:#6d8585 !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.16em !important; } html body.route-auth #app .desktop-auth-public-beta b { margin-left:6px !important; color:#35d6c5 !important; letter-spacing:0 !important; } html body.route-auth #app .desktop-auth-stage-copy h1, html body.route-auth #app .desktop-auth-stage-copy [data-auth-stage-title] { max-width:360px !important; margin:15px 0 10px !important; color:#f1f7f6 !important; font-size:29px !important; font-weight:650 !important; line-height:1.34 !important; letter-spacing:0 !important; } html body.route-auth #app .desktop-auth-stage-sub { max-width:330px !important; margin:0 !important; color:#849798 !important; font-size:13px !important; line-height:1.7 !important; } html body.route-auth #app .desktop-auth-panel { max-width:420px !important; padding:24px 26px !important; border:1px solid rgba(117,181,175,.20) !important; border-radius:6px !important; background:rgba(13,18,22,.78) !important; box-shadow:none !important; backdrop-filter:blur(18px) !important; } html body.route-auth #app .desktop-auth-panel::before { margin-bottom:16px !important; color:#73d8cc !important; font-size:9px !important; letter-spacing:.18em !important; } html body.route-auth #app .desktop-auth-mode-switch { display:flex !important; margin:0 0 20px !important; padding:0 !important; border:0 !important; border-bottom:1px solid rgba(128,167,165,.18) !important; border-radius:0 !important; background:transparent !important; } html body.route-auth #app .desktop-auth-tab { flex:0 0 auto !important; height:34px !important; padding:0 14px !important; border-radius:0 !important; font-size:12px !important; } html body.route-auth #app .desktop-auth-tab.capsule-selected, html body.route-auth #app .desktop-auth-tab[aria-pressed="true"] { border-bottom:2px solid #35d6c5 !important; background:transparent !important; color:#8bf3e6 !important; box-shadow:none !important; } html body.route-auth #app .desktop-auth-form-body { gap:11px !important; } html body.route-auth #app .desktop-auth-panel :is(input,taro-input-core) { min-height:46px !important; border-color:rgba(141,185,182,.17) !important; border-radius:4px !important; background:rgba(3,8,11,.60) !important; font-size:13px !important; } html body.route-auth #app .desktop-auth-primary { min-height:47px !important; margin-top:7px !important; border-radius:4px !important; background:#35d6c5 !important; box-shadow:0 8px 22px rgba(53,214,197,.16) !important; font-size:13px !important; } } /* 快题课程详情：把单课、全程班、优惠和赠送项放进同一张可直接对照的价格表。 */ .course-quick-price-guide{margin:22px 0;padding:22px;border:1px solid rgba(133,109,255,.34);border-radius:16px;background:linear-gradient(135deg,#17142d,#111022);color:#eeeaff}.course-quick-price-guide>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.course-quick-price-guide header span{display:block;color:#9a86f6;font-size:10px;font-weight:800;letter-spacing:.12em}.course-quick-price-guide h2{margin:7px 0 6px;color:#fff;font-size:21px}.course-quick-price-guide header p{max-width:720px;margin:0;color:#b6aecb;font-size:13px;line-height:1.65}.course-quick-price-guide>header>b{padding:10px 13px;border-radius:10px;background:rgba(129,103,242,.18);color:#cfc2ff;font-size:14px;white-space:nowrap}.course-quick-price-guide>div{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.course-quick-price-guide article{min-width:0;padding:14px;border:1px solid rgba(194,183,255,.14);border-radius:11px;background:rgba(255,255,255,.045)}.course-quick-price-guide article>span{display:block;color:#9e8bf7;font-size:10px;font-weight:800;letter-spacing:.07em}.course-quick-price-guide article>strong{display:block;margin-top:7px;color:#fff;font-size:15px}.course-quick-price-guide article>p{min-height:39px;margin:7px 0;color:#b9b0ce;font-size:11px;line-height:1.55}.course-quick-price-guide article footer{padding-top:10px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;border-top:1px solid rgba(194,183,255,.1)}.course-quick-price-guide article small{color:#8f88a4;font-size:10px;line-height:1.4}.course-quick-price-guide article footer b{color:#7fe5d5;font-size:19px;white-space:nowrap}@media (max-width:760px){.course-quick-price-guide{padding:16px}.course-quick-price-guide>header{display:grid;gap:12px}.course-quick-price-guide>div{grid-template-columns:1fr}.course-quick-price-guide article>p{min-height:0}} /* Student landing page is an immersive home, never a dashboard with sidebars. */ body.route-dashboard #desktop-nav,body.route-dashboard #desktop-contextbar { display:none!important; } body.route-dashboard #desktop-home { inset:0!important; } body.route-dashboard #app,body.route-dashboard #container { padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important; } /* Framework training is a writing workspace. The bundled page uses generic utility classes, so this route-owned layer gives it the same dark, quiet surface language as the surrounding desktop shell without changing form behavior or the training flow. */ @media (min-width:981px) { body.route-framework-training #app .min-h-screen { min-height:100vh !important; background:#090d12 !important; color:#e8eef0 !important; } body.route-framework-training #app .min-h-screen > .px-3 { width:min(100%,1120px) !important; margin:0 auto !important; padding:22px 30px 48px !important; gap:14px !important; } body.route-framework-training #app .min-h-screen > .px-3 > .p-3, body.route-framework-training #app .min-h-screen > .px-3 > .p-4 { padding:18px !important; border:1px solid #263139 !important; border-radius:8px !important; background:#121820 !important; box-shadow:none !important; } body.route-framework-training #app .min-h-screen :is(h1,h2,h3,h4,strong) { color:#f1f6f6 !important; } body.route-framework-training #app .min-h-screen :is(p,span,label) { letter-spacing:0 !important; } body.route-framework-training #app .min-h-screen textarea { min-height:126px !important; padding:14px !important; border:1px solid #2d3942 !important; border-radius:6px !important; background:#0b1016 !important; color:#e9f1f2 !important; font-size:14px !important; line-height:1.72 !important; resize:vertical !important; } body.route-framework-training #app .min-h-screen textarea:focus { border-color:#36cfc0 !important; box-shadow:0 0 0 3px rgba(54,207,192,.12) !important; } body.route-framework-training #app .min-h-screen textarea::placeholder { color:#74818a !important; } body.route-framework-training #app .min-h-screen button { min-height:34px; border-radius:6px !important; font-size:12px !important; transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease; } body.route-framework-training #app .min-h-screen button:hover { transform:translateY(-1px); } body.route-framework-training #app .min-h-screen button[style*="linear-gradient"] { background:#32cabb !important; color:#062421 !important; box-shadow:none !important; } body.route-framework-training #app .min-h-screen button[style*="rgba(255,255,255"], body.route-framework-training #app .min-h-screen button[style*="background:#F0"] { border:1px solid #34414a !important; background:#182129 !important; color:#c2d0d2 !important; } body.route-framework-training #app .min-h-screen button[style*="background:#5B8DFF"] { border-color:#35d6c5 !important; background:#35d6c5 !important; color:#05211f !important; } body.route-framework-training #app .min-h-screen .overflow-x-auto { scrollbar-color:#41505a transparent; } } @media (max-width:980px) { body.route-framework-training #app .min-h-screen { background:#0b1016 !important; } body.route-framework-training #app .min-h-screen textarea { background:#101720 !important; color:#eff6f6 !important; } } /* Light mode keeps the same calm canvas at the top of the assistant rail: no separate white header cards, only hierarchy through type and hairlines. */ @media (min-width:981px) { body.desktop-light #desktop-contextbar .assistant-head, body.desktop-light #desktop-contextbar .context-tabs { background:transparent !important; box-shadow:none !important; } body.desktop-light #desktop-contextbar .assistant-head { min-height:70px !important; } body.desktop-light #desktop-contextbar .assistant-name { font-size:16px !important; font-weight:700 !important; } body.desktop-light #desktop-contextbar .assistant-status, body.desktop-light #desktop-contextbar .context-tab { font-size:13px !important; } body.desktop-light #desktop-nav .desktop-nav-brand { font-size:18px !important; } body.desktop-light #desktop-nav .desktop-nav-brand span { font-size:14px !important; } body.desktop-light #desktop-nav .desktop-nav-item { font-size:17px !important; } } /* White-mode verification pass: preserve readable hierarchy on every core student route instead of inheriting dark-surface text and overlays. */ @media (min-width:981px) { body.desktop-light #desktop-broadcast .bc-card-who b, body.desktop-light #desktop-broadcast .bc-card-who time, body.desktop-light #desktop-broadcast .broadcast-question > p { color:#526873 !important; opacity:1 !important; } body.desktop-light #desktop-broadcast .bc-card-who b { color:#263d47 !important; } body.desktop-light #desktop-qa-hub .desktop-qa-head > div > span, body.desktop-light #desktop-qa-hub .desktop-qa-head p, body.desktop-light #desktop-qa-hub .desktop-qa-field > label, body.desktop-light #desktop-qa-hub .desktop-qa-source-field label, body.desktop-light #desktop-qa-hub .desktop-qa-prompt-label :is(label,span), body.desktop-light #desktop-qa-hub .desktop-qa-composer-head > :is(span,label) { color:#47616a !important; opacity:1 !important; } body.desktop-light #desktop-qa-hub .desktop-qa-types button, body.desktop-light #desktop-qa-hub .desktop-qa-source-field select { border-color:#bfd7d4 !important; background:#f5faf9 !important; color:#284650 !important; } body.desktop-light #desktop-qa-hub .desktop-qa-types button.is-active { border-color:#168f83 !important; background:#168f83 !important; color:#fff !important; } body.desktop-light #desktop-grade-hub .desktop-grade-panel > header, body.desktop-light #desktop-grade-hub .desktop-grade-panel > header * { border-color:#bfdad6 !important; background:#eef8f6 !important; color:#244650 !important; opacity:1 !important; } body.desktop-light #desktop-grade-hub .desktop-grade-typebar { border-color:#c8dddd !important; background:transparent !important; } body.desktop-light #desktop-grade-hub .desktop-grade-typebar > span { color:#47616a !important; } body.desktop-light #desktop-grade-hub .desktop-grade-typebar button { border-color:#c8dddd !important; background:#f7fbfa !important; color:#35555b !important; } body.desktop-light #desktop-grade-hub .desktop-grade-typebar button.is-active { border-color:#168f83 !important; background:#168f83 !important; color:#fff !important; } body.desktop-light #desktop-grade-hub .desktop-grade-input-modes, body.desktop-light #desktop-grade-hub .desktop-grade-input-modes :is(button,taro-button-core) { border-color:#c8dddd !important; background:#f2f8f7 !important; color:#35555b !important; } body.desktop-light #desktop-grade-hub .desktop-grade-input-modes button.is-active, body.desktop-light #desktop-grade-hub .desktop-grade-input-modes [aria-pressed="true"] { background:#168f83 !important; color:#fff !important; } body.desktop-light .exam-hub-v2::before { display:none !important; content:none !important; } } /* ============================================================ EXAM DETAIL · SHARED DESKTOP LANGUAGE The question page is one workspace in both themes. The light version used to fall through to compact mobile typography while dark had a separate layout; keep the hierarchy and measurements identical, then only exchange the colour tokens below. ============================================================ */ @media (min-width:981px) { body.route-exam-detail { --exam-detail-canvas:#f6f9fa; --exam-detail-surface:#ffffff; --exam-detail-surface-soft:#f1f7f6; --exam-detail-line:#d8e5e5; --exam-detail-line-strong:#b9d7d3; --exam-detail-text:#203139; --exam-detail-muted:#647982; --exam-detail-accent:#168f83; --exam-detail-accent-soft:#e2f4f1; --exam-detail-input:#fbfdfd; } body.desktop-dark.route-exam-detail { --exam-detail-canvas:#0a0e12; --exam-detail-surface:#11171d; --exam-detail-surface-soft:#101b20; --exam-detail-line:#293940; --exam-detail-line-strong:#355653; --exam-detail-text:#e7f0f0; --exam-detail-muted:#9dabb0; --exam-detail-accent:#42d2c0; --exam-detail-accent-soft:#153431; --exam-detail-input:#0b1116; } body.route-exam-detail #app .min-h-screen, body.route-exam-detail #app .min-h-screen.desktop-exam-detail-page { min-height:100vh !important; padding:24px 48px 88px !important; background:var(--exam-detail-canvas) !important; color:var(--exam-detail-text) !important; box-sizing:border-box !important; } body.route-exam-detail #app .min-h-screen > .px-4 { width:min(920px,100%) !important; max-width:none !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; box-sizing:border-box !important; } /* Slim utility rail: metadata is promoted into the question card. */ body.route-exam-detail #app .min-h-screen > .px-4:first-child, body.route-exam-detail #app .desktop-exam-detail-toolbar { display:flex !important; align-items:center !important; justify-content:space-between !important; min-height:40px !important; margin:0 0 18px !important; padding:0 0 12px !important; border:0 !important; border-bottom:1px solid var(--exam-detail-line) !important; background:transparent !important; box-shadow:none !important; } body.route-exam-detail #app .min-h-screen > .px-4:first-child > div:not(:has(button)), body.route-exam-detail #app .desktop-exam-detail-toolbar > div:not(:has(button)), body.route-exam-detail #app .desktop-exam-detail-toolbar-copy, body.route-exam-detail #app .min-h-screen > .px-4:first-child span, body.route-exam-detail #app .min-h-screen > .px-4:first-child p, body.route-exam-detail #app .desktop-exam-detail-toolbar span, body.route-exam-detail #app .desktop-exam-detail-toolbar p { display:none !important; } body.route-exam-detail #app .min-h-screen > .px-4:first-child button, body.route-exam-detail #app .desktop-exam-detail-toolbar button { width:38px !important; height:38px !important; min-height:38px !important; margin:0 !important; border:1px solid var(--exam-detail-line) !important; border-radius:7px !important; background:var(--exam-detail-surface) !important; color:var(--exam-detail-muted) !important; box-shadow:none !important; } body.route-exam-detail #app .desktop-exam-detail-meta { display:block !important; margin:0 0 11px !important; color:var(--exam-detail-accent) !important; font-size:12px !important; font-weight:750 !important; letter-spacing:.045em !important; line-height:1.45 !important; } body.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col { gap:14px !important; } body.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:first-child { display:none !important; } body.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div, body.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > section { overflow:hidden !important; border:1px solid var(--exam-detail-line) !important; border-radius:9px !important; background:var(--exam-detail-surface) !important; box-shadow:none !important; } body.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(2) { border-color:var(--exam-detail-line-strong) !important; } body.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(2) > div:first-child { padding:25px 28px 21px !important; border-bottom:1px solid var(--exam-detail-line) !important; } body.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(2) :is(p,span,strong) { color:var(--exam-detail-text) !important; font-size:16px !important; line-height:1.75 !important; } body.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(2) > div:last-child { display:grid !important; grid-template-columns:100px repeat(3,minmax(0,1fr)) !important; align-items:center !important; gap:10px !important; padding:16px 28px 19px !important; } body.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(2) > div:last-child > :first-child { color:var(--exam-detail-muted) !important; font-size:14px !important; font-weight:700 !important; } body.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(2) > div:last-child button { min-height:42px !important; border:1px solid var(--exam-detail-line) !important; border-radius:7px !important; background:var(--exam-detail-surface-soft) !important; color:var(--exam-detail-muted) !important; font-size:14px !important; font-weight:700 !important; box-shadow:none !important; } body.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(2) > div:last-child button:hover, body.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(2) > div:last-child button[aria-pressed="true"] { border-color:var(--exam-detail-accent) !important; background:var(--exam-detail-accent-soft) !important; color:var(--exam-detail-accent) !important; } /* Answer generation remains compact, while the reflection editor gets reading-space and a larger writing type in both modes. */ body.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(3) { padding:19px 24px !important; background:var(--exam-detail-surface-soft) !important; } body.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(3) :is(p,span,strong) { color:var(--exam-detail-muted) !important; font-size:15px !important; line-height:1.65 !important; } body.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(3) button { min-height:40px !important; padding:0 16px !important; border:1px solid var(--exam-detail-accent) !important; border-radius:7px !important; background:var(--exam-detail-accent) !important; color:#062522 !important; font-size:14px !important; font-weight:800 !important; box-shadow:none !important; } body.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(n+4) { background:var(--exam-detail-surface) !important; } body.route-exam-detail #app textarea { min-height:156px !important; border:1px solid var(--exam-detail-line-strong) !important; border-radius:7px !important; background:var(--exam-detail-input) !important; color:var(--exam-detail-text) !important; font-size:15px !important; line-height:1.75 !important; box-shadow:none !important; } body.route-exam-detail #app textarea::placeholder { color:var(--exam-detail-muted) !important; opacity:.82 !important; } body.route-exam-detail #app textarea:focus { border-color:var(--exam-detail-accent) !important; box-shadow:0 0 0 3px color-mix(in srgb,var(--exam-detail-accent) 14%,transparent) !important; } body.route-exam-detail #app .min-h-screen > .px-4.flex.flex-col > div:nth-child(n+4) :is(p,span,label,strong) { color:var(--exam-detail-muted) !important; font-size:14px !important; line-height:1.6 !important; } } /* Auth brand final owner. */ @media (min-width:981px) { body.route-auth #desktop-studio-credit { display:none !important; } html body.route-auth #app .desktop-auth-stage-copy h1, html body.route-auth #app .desktop-auth-stage-copy [data-auth-stage-title] { max-width:none !important; margin:16px 0 11px !important; color:#eefbf8 !important; font-family:"Arial Narrow","Avenir Next Condensed","Helvetica Neue",Arial,sans-serif !important; font-size:clamp(36px,3.7vw,58px) !important; font-weight:800 !important; line-height:1 !important; letter-spacing:.035em !important; white-space:nowrap !important; } html body.route-auth #app .desktop-auth-stage-copy h1 i, html body.route-auth #app .desktop-auth-stage-copy [data-auth-stage-title] i { color:#45daca !important; font-style:normal !important; } html body.route-auth #app .desktop-auth-kicker { display:none !important; } html body.route-auth #app .desktop-auth-public-beta { margin-top:0 !important; color:#6c8585 !important; } html body.route-auth #app .desktop-auth-stage-sub { max-width:none !important; color:#79d9ce !important; font-family:"IBM Plex Mono",Menlo,monospace !important; font-size:10px !important; font-weight:600 !important; letter-spacing:.1em !important; text-transform:uppercase !important; } html body.route-auth #app .desktop-auth-home-map { display:none !important; } html body.route-auth #app #desktop-auth-stage { min-height:0 !important; } html body.route-auth #app .desktop-auth-stage-copy { max-width:none !important; } } /* Auth final owner: match homepage navigation and use its map vocabulary. */ @media (min-width:981px) { html body.route-auth #app #desktop-auth-stage .desktop-auth-public-beta { position:relative !important; display:inline-flex !important; align-items:center !important; gap:11px !important; margin:0 0 22px !important; padding:8px 11px 8px 12px !important; overflow:hidden !important; border:1px solid rgba(85,225,211,.52) !important; border-radius:7px !important; background:linear-gradient(105deg,rgba(22,170,157,.20),rgba(94,84,218,.16)) !important; color:#7ef5e6 !important; font:850 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace !important; letter-spacing:.14em !important; box-shadow:0 0 0 1px rgba(70,231,214,.10) inset,0 0 24px rgba(48,217,196,.18) !important; } html body.route-auth #app #desktop-auth-stage .desktop-auth-public-beta::before { width:26px !important; height:2px !important; background:linear-gradient(90deg,#4ee2d3,rgba(78,226,211,.18)) !important; box-shadow:0 0 10px rgba(78,226,211,.82) !important; } html body.route-auth #app #desktop-auth-stage .desktop-auth-public-beta b { position:relative !important; z-index:1 !important; padding:6px 9px !important; border:1px solid rgba(176,255,246,.52) !important; border-radius:4px !important; background:rgba(7,38,40,.72) !important; color:#ecfffc !important; font:800 11px/1 inherit !important; letter-spacing:.05em !important; } } @media (min-width:981px) { html body.route-auth #app .desktop-auth-stage-copy h1, html body.route-auth #app .desktop-auth-stage-copy [data-auth-stage-title] { color:#5be4d2 !important; font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif !important; font-weight:750 !important; letter-spacing:.055em !important; text-shadow:0 0 24px rgba(91,228,210,.13) !important; } html body.route-auth #app #desktop-auth-stage .desktop-auth-stage-copy h1 i, html body.route-auth #app #desktop-auth-stage .desktop-auth-stage-copy [data-auth-stage-title] i { color:#e7fffb !important; } html body.route-auth #app #desktop-auth-stage .desktop-auth-cn-title { color:#e5fbf7 !important; font-family:"PingFang SC","Hiragino Sans GB",sans-serif !important; font-weight:400 !important; letter-spacing:.16em !important; } html body.route-auth #app .desktop-auth-public-beta { color:#7debe0 !important; } html body.route-auth #app .desktop-auth-public-beta::before { background:#43c7b8 !important; } html body.route-auth #app .desktop-auth-stage-sub { color:#78bcb5 !important; } html body.route-auth #app .desktop-auth-stage-sub::before { background:#5be4d2 !important; box-shadow:0 0 12px rgba(91,228,210,.52) !important; } } /* Registration composition: one bilingual mark and one clean form surface. */ @media (min-width:981px) { html body.route-auth #app .min-h-screen.desktop-auth-page, html body.route-auth #app .min-h-screen { grid-template-columns:minmax(0,1fr) minmax(370px,430px) !important; gap:clamp(70px,9vw,158px) !important; } html body.route-auth #app #desktop-auth-stage { min-height:420px !important; } html body.route-auth #app .desktop-auth-stage-copy { padding-left:3px !important; } html body.route-auth #app .desktop-auth-public-beta { display:inline-flex !important; align-items:center !important; gap:8px !important; margin:0 0 20px !important; color:#ff9b8b !important; font:700 10px/1 "IBM Plex Mono",Menlo,monospace !important; letter-spacing:.13em !important; } html body.route-auth #app .desktop-auth-public-beta::before { width:28px !important; height:2px !important; background:#5c8dff !important; content:"" !important; } html body.route-auth #app .desktop-auth-public-beta b { color:#70ebdd !important; font-family:"PingFang SC",sans-serif !important; font-size:11px !important; letter-spacing:0 !important; } html body.route-auth #app .desktop-auth-stage-copy h1, html body.route-auth #app .desktop-auth-stage-copy [data-auth-stage-title] { margin:0 !important; color:#f4fbfa !important; font-size:clamp(42px,4.2vw,64px) !important; letter-spacing:.045em !important; } html body.route-auth #app .desktop-auth-stage-copy h1 i, html body.route-auth #app .desktop-auth-stage-copy [data-auth-stage-title] i { color:#63e8d9 !important; } html body.route-auth #app .desktop-auth-cn-title { margin-top:15px !important; color:#c2d5d5 !important; font-family:"PingFang SC","Hiragino Sans GB",sans-serif !important; font-size:19px !important; font-weight:500 !important; letter-spacing:.12em !important; } html body.route-auth #app .desktop-auth-stage-sub { display:flex !important; align-items:center !important; gap:10px !important; margin-top:22px !important; color:#809595 !important; font-size:10px !important; letter-spacing:.12em !important; } html body.route-auth #app .desktop-auth-stage-sub::before { width:5px !important; height:5px !important; border-radius:50% !important; background:#ff9b8b !important; box-shadow:0 0 12px rgba(255,155,139,.58) !important; content:"" !important; } html body.route-auth #app .desktop-auth-panel { max-width:430px !important; padding:28px 30px 30px !important; border-color:rgba(132,186,187,.22) !important; border-radius:8px !important; background:rgba(14,19,24,.86) !important; box-shadow:0 18px 60px rgba(0,0,0,.24) !important; } html body.route-auth #app .desktop-auth-panel::before { content:"CREATE YOUR ACCOUNT" !important; margin-bottom:22px !important; color:#a9f5e9 !important; font:700 10px/1 "IBM Plex Mono",Menlo,monospace !important; letter-spacing:.16em !important; } html body.route-auth #app .desktop-auth-panel .desktop-auth-mode-switch { margin:0 0 20px !important; padding:0 !important; border:0 !important; border-bottom:1px solid rgba(139,181,181,.18) !important; border-radius:0 !important; background:transparent !important; } html body.route-auth #app .desktop-auth-tab { height:38px !important; padding:0 16px !important; color:#809092 !important; font-size:12px !important; } html body.route-auth #app .desktop-auth-tab.capsule-selected, html body.route-auth #app .desktop-auth-tab[aria-pressed="true"] { border-bottom:2px solid #63e8d9 !important; background:transparent !important; color:#f0fffd !important; box-shadow:none !important; } html body.route-auth #app .desktop-auth-form-body { gap:10px !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; } html body.route-auth #app .desktop-auth-form-body > div { border-color:rgba(137,181,182,.14) !important; border-radius:5px !important; background:rgba(5,10,14,.42) !important; box-shadow:none !important; } html body.route-auth #app .desktop-auth-panel :is(input,taro-input-core) { min-height:44px !important; border-color:rgba(146,191,192,.2) !important; border-radius:5px !important; background:#0a0e12 !important; font-size:13px !important; } html body.route-auth #app .desktop-auth-panel :is(input,taro-input-core):focus { border-color:#5c8dff !important; box-shadow:0 0 0 3px rgba(92,141,255,.13) !important; } html body.route-auth #app .desktop-auth-primary { min-height:46px !important; border-radius:5px !important; background:#63e8d9 !important; color:#06201e !important; box-shadow:0 9px 24px rgba(99,232,217,.16) !important; font-size:13px !important; } } @media (min-width:981px) { html body.route-auth #app .desktop-auth-homebar { top:0 !important; left:0 !important; right:0 !important; min-height:74px !important; padding:0 46px !important; background:rgba(9,12,16,.9) !important; border-bottom:1px solid rgba(126,159,161,.12) !important; } html body.route-auth #app .desktop-auth-homebar-brand { gap:15px !important; color:#effaf8 !important; } html body.route-auth #app .desktop-auth-homebar-mark { display:none !important; } html body.route-auth #app .desktop-auth-homebar-wordmark { display:inline-flex !important; align-items:center !important; gap:8px !important; font-size:18px !important; letter-spacing:.03em !important; } html body.route-auth #app .desktop-auth-homebar-wordmark b { color:#57dfd1 !important; font-size:18px !important; } html body.route-auth #app .desktop-auth-homebar-wordmark i { color:#839091 !important; font-style:normal !important; } html body.route-auth #app .desktop-auth-homebar-wordmark strong { color:#f0f8f7 !important; font-size:18px !important; letter-spacing:.01em !important; } html body.route-auth #app .desktop-auth-homebar-brand > em { padding-left:15px !important; border-left:1px solid rgba(125,157,159,.28) !important; color:#9baaaa !important; font-size:10px !important; font-style:normal !important; letter-spacing:.02em !important; } html body.route-auth #app .desktop-auth-homebar-actions { gap:20px !important; } html body.route-auth #app .desktop-auth-homebar-actions button { min-width:0 !important; height:34px !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:#aab8b8 !important; font-size:12px !important; box-shadow:none !important; } html body.route-auth #app .desktop-auth-homebar-actions button:last-child { padding:0 13px !important; border:1px solid rgba(83,222,209,.66) !important; border-radius:999px !important; color:#dffcf7 !important; } html body.route-auth #app .desktop-auth-homebar-actions button.is-active { border-color:rgba(83,222,209,.66) !important; background:rgba(53,214,197,.12) !important; color:#effffd !important; } html body.route-auth #app #desktop-auth-stage { min-height:465px !important; } html body.route-auth #app .desktop-auth-mosaic { display:none !important; } html body.route-auth #app .desktop-auth-home-map { position:absolute !important; z-index:0 !important; top:50% !important; right:-8vw !important; width:min(52vw,670px) !important; opacity:.84 !important; transform:translateY(-50%) !important; filter:drop-shadow(0 0 20px rgba(53,214,197,.14)) !important; } html body.route-auth #app .auth-map-shape { fill:rgba(224,245,243,.055) !important; stroke:rgba(153,210,205,.46) !important; stroke-width:2 !important; } html body.route-auth #app .auth-map-lines { fill:none !important; stroke:rgba(53,214,197,.72) !important; stroke-width:1.4 !important; stroke-dasharray:6 8 !important; } html body.route-auth #app .auth-map-nodes circle { fill:#66f1de !important; stroke:#e9fffc !important; stroke-width:1.2 !important; } } /* Personal profile: convert the inherited mobile form into a compact desktop workspace without changing its React fields or save handlers. */ body.route-personal-profile #app .min-h-screen, body.route-settings #app .min-h-screen { width:min(1120px,calc(100% - 64px)) !important; max-width:none !important; min-height:0 !important; margin:0 auto !important; padding:28px 0 72px !important; background:transparent !important; color:#dce8e8 !important; box-sizing:border-box !important; } body.route-personal-profile #app .min-h-screen > div:first-child, body.route-settings #app .min-h-screen > div:first-child { min-height:48px !important; margin:0 0 16px !important; padding:0 !important; background:transparent !important; } body.route-personal-profile #app .min-h-screen :is(section,div):has(> input,> select,> taro-input-core,> taro-picker-core), body.route-settings #app .min-h-screen :is(section,div):has(> input,> select,> taro-input-core,> taro-picker-core) { min-width:0; } body.route-personal-profile #app .min-h-screen :is(input,select,taro-input-core,taro-picker-core), body.route-settings #app .min-h-screen :is(input,select,taro-input-core,taro-picker-core) { min-height:46px !important; border:1px solid #2c4146 !important; border-radius:6px !important; background:#0c1418 !important; color:#edf8f7 !important; box-shadow:none !important; } body.route-personal-profile #app .min-h-screen :is(input,select,taro-input-core,taro-picker-core):focus, body.route-settings #app .min-h-screen :is(input,select,taro-input-core,taro-picker-core):focus { border-color:#43d8ca !important; box-shadow:0 0 0 3px rgba(67,216,202,.12) !important; } body.route-personal-profile #app .min-h-screen :is(button,taro-button-core), body.route-settings #app .min-h-screen :is(button,taro-button-core) { min-height:40px; border-radius:6px !important; letter-spacing:0 !important; } @media (min-width:900px) { body.route-personal-profile #app .min-h-screen > div:not(:first-child), body.route-settings #app .min-h-screen > div:not(:first-child) { margin-top:12px !important; padding:20px !important; border:1px solid #202e34 !important; border-radius:8px !important; background:#101519 !important; box-shadow:none !important; } body.route-personal-profile #app .min-h-screen > div:not(:first-child) :is(input,select,taro-input-core,taro-picker-core), body.route-settings #app .min-h-screen > div:not(:first-child) :is(input,select,taro-input-core,taro-picker-core) { font-size:15px !important; } } @media (max-width:899px) { body.route-personal-profile #app .min-h-screen, body.route-settings #app .min-h-screen { width:calc(100% - 32px) !important; padding-top:20px !important; } } /* The native PageHeader reserves a tall mobile hero area. On the desktop profile form it should behave as a compact toolbar instead. */ @media (min-width:900px) { body.route-personal-profile #app .min-h-screen > :first-child { height:64px !important; min-height:64px !important; max-height:64px !important; display:flex !important; align-items:center !important; overflow:hidden !important; margin:0 0 16px !important; padding:0 18px !important; border:1px solid #202e34 !important; border-radius:8px !important; background:#101519 !important; box-sizing:border-box !important; } body.route-personal-profile #app .min-h-screen > :first-child button, body.route-personal-profile #app .min-h-screen > :first-child [role="button"] { width:36px !important; min-width:36px !important; height:36px !important; min-height:36px !important; margin:0 !important; border-radius:6px !important; } } /* Left navigation uses the same off-canvas collapse behavior as the right context rail. */ @media (min-width:981px) { #desktop-nav { transition:transform .42s cubic-bezier(.2,.8,.2,1), width .42s cubic-bezier(.2,.8,.2,1), opacity .28s ease !important; } #desktop-nav.collapsed { width:var(--desktop-left-width) !important; padding:26px 20px 0 !important; transform:translateX(-100%) !important; pointer-events:none !important; overflow:visible !important; } #desktop-nav.collapsed > *:not(.desktop-nav-toggle) { opacity:0 !important; transform:translateX(-28px) !important; } #desktop-nav.collapsed .desktop-nav-toggle { position:fixed !important; top:24px !important; left:18px !important; right:auto !important; width:32px !important; height:32px !important; padding:0 !important; border:1px solid #2b2b33 !important; border-radius:4px !important; background:#15151a !important; color:#35d6c5 !important; font-size:20px !important; line-height:1 !important; pointer-events:auto !important; opacity:1 !important; transform:translateX(var(--desktop-left-width)) !important; } #desktop-nav.collapsed .desktop-nav-toggle::after { content:none !important; } body.desktop-light #desktop-nav.collapsed .desktop-nav-toggle { background:#e7f2f3 !important; border-color:#cadbdd !important; color:#527076 !important; } } /* Auth welcome mark: restore the original left-side brand lockup. */ @media (min-width:981px) { html body.route-auth #app #desktop-auth-stage { align-items:center !important; min-height:420px !important; } html body.route-auth #app .desktop-auth-stage-copy { max-width:680px !important; padding:0 !important; } html body.route-auth #app #desktop-auth-stage .desktop-auth-public-beta { margin:0 0 54px !important; } html body.route-auth #app #desktop-auth-stage .desktop-auth-stage-copy h1, html body.route-auth #app #desktop-auth-stage .desktop-auth-stage-copy [data-auth-stage-title] { display:block !important; max-width:none !important; margin:0 !important; color:#5be4d2 !important; font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif !important; font-size:clamp(44px,4.3vw,64px) !important; font-weight:800 !important; line-height:1 !important; letter-spacing:.045em !important; white-space:nowrap !important; text-shadow:0 0 24px rgba(91,228,210,.13) !important; } html body.route-auth #app #desktop-auth-stage .desktop-auth-stage-copy h1 i, html body.route-auth #app #desktop-auth-stage .desktop-auth-stage-copy [data-auth-stage-title] i { color:#5be4d2 !important; font-style:normal !important; } html body.route-auth #app #desktop-auth-stage .desktop-auth-cn-title { margin-top:27px !important; color:#e5fbf7 !important; font-size:23px !important; font-weight:500 !important; letter-spacing:.14em !important; } html body.route-auth #app #desktop-auth-stage .desktop-auth-stage-sub { display:flex !important; align-items:center !important; gap:10px !important; margin-top:31px !important; color:#b7b8c3 !important; font-family:"IBM Plex Mono",Menlo,monospace !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.02em !important; text-transform:none !important; } html body.route-auth #app #desktop-auth-stage .desktop-auth-stage-sub::before { width:7px !important; height:7px !important; border-radius:50% !important; background:#ff9b8b !important; box-shadow:0 0 12px rgba(255,155,139,.58) !important; content:"" !important; } }