/* ── 与官网页面同宽（2026-07-28）── 原来这一页自己写死 1440px / 1280px 等宽度，比官网其他页（--container， min(1200px, 100% - 48px)）宽一截，切页时内容左右会跳。统一取 --container。 ⚠ 顺带修掉 margin 塌陷：.page 用 margin-top 撑开与头部的距离，而它是 main 的首个子元素 —— 外边距会穿透 main、作用到 main 外面，于是 main 的 浅灰底从那之后才开始画，标题上方露出一条白边。改用 padding-top， 容器背景因此从头铺满。 */ /* ── 字体统一（2026-07-28）── 原页面在若干处硬编码了 Georgia / Noto Serif SC 衬线。官网只用一个字族 （Inter + PingFang SC，见 base.css 的 --font），DON'T 清单里明确禁止引入 第二字族。而且 Georgia 的数字是 old-style figures（有升降部），成绩、 日期这类数字排在一起会高低不齐，看着像没对齐。 变量层的 --serif 早已指回 --font，这里把漏网的硬编码一并收掉。 */ /* HSK 学习报告 · 页面样式。设计 token 见 hsk-report-theme.css（与交卷记录页共用）。 */ .journal-theme *{ box-sizing: border-box; }html{ scroll-behavior: smooth; }.journal-theme{ margin: 0; color: var(--ink); background: var(--canvas); font-family:var(--font); font-size: 14px; line-height: 1.55; }.journal-theme button, .journal-theme select{ font: inherit; }.journal-theme button{ cursor: pointer; }.journal-theme .topbar{ position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 34px; background: var(--paper); border-bottom: 1px solid var(--line); }.journal-theme .brand{ display: flex; align-items: center; gap: 12px; }.journal-theme .brand-mark{ display: grid; place-items: center; width: 31px; height: 31px; color: #fff; background: var(--teal); border-radius: 6px; font-weight: 800; }.journal-theme .brand-name{ font-weight: 800; letter-spacing: .02em; }.journal-theme .brand-sub{ padding-left: 12px; border-left: 1px solid var(--line); color: var(--muted); }.journal-theme .top-actions{ display: flex; align-items: center; gap: 14px; }.journal-theme .status{ display: inline-flex; align-items: center; gap: 7px; color: var(--teal-dark); font-size: 13px; }.journal-theme .status-dot{ width: 7px; height: 7px; background: var(--rp-right); border-radius: 50%; }.journal-theme .page{ width: var(--container); margin: 0 auto; padding: 24px 0 48px; }.journal-theme .filters{ display: grid; grid-template-columns: minmax(128px, .75fr) minmax(320px, 2.5fr) minmax(170px, 1fr) 128px; grid-template-areas: "level paper attempt action"; gap: 14px; align-items: end; padding: 18px 20px 20px; background: linear-gradient(135deg, #fff 0%, #fbfefd 62%, #f5fbfa 100%); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }.journal-theme .filters .field{ min-width: 0; }.journal-theme .filters .field label{ display: block; margin-bottom: 7px; color: #62747c; font-size: 12px; font-weight: 700; }.journal-theme .filters .field--level{ grid-area: level; }.journal-theme .filters .field--paper{ grid-area: paper; }.journal-theme .filters .field--attempt{ grid-area: attempt; }.journal-theme .filters > .button{ grid-area: action; width: 100%; }.journal-theme .select-wrap{ position: relative; }.journal-theme select{ width: 100%; min-height: 42px; padding: 0 34px 0 13px; color: var(--ink); background: rgba(255,255,255,.9); border: 1px solid #cddbd7; border-radius: 7px; outline: none; appearance: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }.journal-theme select:hover{ background: #fff; border-color: #afd3cc; }.journal-theme .select-wrap::after{ content: "⌄"; position: absolute; right: 13px; top: 10px; color: var(--muted); pointer-events: none; }.journal-theme select:focus{ border-color: var(--teal); box-shadow: 0 0 0 3px rgba(42,169,159,.12); }.journal-theme .button{ min-height: 42px; padding: 0 17px; border: 1px solid transparent; border-radius: 7px; font-weight: 700; transition: background .18s ease, border-color .18s ease, transform .18s ease; }.journal-theme .button--teal{ color: #fff; background: var(--teal); }.journal-theme .button--teal:hover{ background: var(--teal-dark); transform: translateY(-1px); }.journal-theme .button--ghost{ color: var(--teal-dark); background: #fff; border-color: #b7ddd7; }.journal-theme .report-shell{ display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: 850px; margin-top: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }.journal-theme .sidebar{ padding: 22px 12px; background: #fbfdfc; border-right: 1px solid var(--line); }.journal-theme .sidebar-title{ padding: 0 12px 14px; color: var(--muted); font-size: 12px; letter-spacing: .12em; }.journal-theme .nav{ display: grid; gap: 4px; }.journal-theme .nav button{ position: relative; width: 100%; padding: 12px 12px 12px 16px; color: #52636b; background: transparent; border: 0; border-radius: 6px; text-align: left; font-weight: 700; }.journal-theme .nav button::before{ content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; background: transparent; border-radius: 5px; }.journal-theme .nav button:hover{ color: var(--teal-dark); background: #f0fbf9; }.journal-theme .nav button.active{ color: var(--teal-dark); background: var(--teal-pale); }.journal-theme .nav button.active::before{ background: var(--teal); }.journal-theme .content{ min-width: 0; padding: 28px 30px 42px; }.journal-theme .view{ display: none; }.journal-theme .view.active{ display: block; }.journal-theme .heading{ display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 22px; }.journal-theme .eyebrow{ margin: 0 0 5px; color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .13em; }.journal-theme h1, .journal-theme h2, .journal-theme h3, .journal-theme p{ margin-top: 0; }.journal-theme h1{ margin-bottom: 7px; font-size: clamp(23px, 3vw, 30px); line-height: 1.2; letter-spacing: -.02em; }.journal-theme h2{ margin-bottom: 0; font-size: 18px; }.journal-theme h3{ margin-bottom: 3px; font-size: 16px; }.journal-theme .meta{ display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: 13px; }.journal-theme .tag{ display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }.journal-theme .tag--good{ color: #287f43; background: var(--rp-right-bg); }.journal-theme .tag--mid{ color: #9a6b25; background: #fff7e9; }.journal-theme .tag--weak{ color: #ad4b4b; background: var(--rp-wrong-bg); }.journal-theme .panel{ background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }.journal-theme .panel + .panel{ margin-top: 18px; }.journal-theme .panel-head{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--line); }.journal-theme .panel-body{ padding: 18px; }.journal-theme .score-hero{ display: grid; grid-template-columns: minmax(260px, 1.2fr) minmax(260px, .8fr); min-height: 174px; margin-bottom: 18px; background: linear-gradient(100deg, #f0fbf9 0%, #fff 73%); border: 1px solid #bfe6df; border-radius: var(--radius); overflow: hidden; }.journal-theme .score-main{ padding: 24px 26px; border-right: 1px solid var(--line); }.journal-theme .score-label{ margin: 0 0 5px; color: var(--muted); font-size: 13px; }.journal-theme .score-line{ display: flex; align-items: baseline; gap: 8px; }.journal-theme .score-line strong{ color: var(--teal-dark); font-size: 52px; line-height: 1; letter-spacing: -.05em; }.journal-theme .score-line span{ color: var(--muted); font-size: 17px; }.journal-theme .score-note{ margin: 13px 0 0; color: var(--teal-dark); font-weight: 700; }.journal-theme .result-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; padding: 23px 25px; align-content: center; }.journal-theme .result-item label, .journal-theme .metric-card label{ display: block; color: var(--muted); font-size: 12px; }.journal-theme .result-item strong{ display: block; margin-top: 2px; font-size: 17px; }.journal-theme .pass{ color: #29874a; }.journal-theme .warning{ color: #bb7130; }.journal-theme .metric-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }.journal-theme .metric-card{ min-height: 104px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }.journal-theme .metric-card strong{ display: block; margin-top: 7px; font-size: 26px; line-height: 1; }.journal-theme .metric-card small{ color: var(--muted); font-size: 12px; font-weight: 400; }.journal-theme .metric-card p{ margin: 9px 0 0; color: var(--muted); font-size: 12px; }.journal-theme .metric-card--teal{ background: #fff; border-color: var(--line); }.journal-theme .two-col{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }.journal-theme .section-bars{ display: grid; gap: 22px; }.journal-theme .bar-row{ display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "track track"; align-items: center; column-gap: 12px; row-gap: 8px; }.journal-theme .bar-label{ grid-area: label; font-weight: 700; }.journal-theme .bar-row .bar-track{ grid-area: track; width: 100%; }.journal-theme .bar-track, .journal-theme .progress-track{ height: 10px; background: #eef2f1; border-radius: 99px; overflow: hidden; }.journal-theme .bar-fill{ height: 100%; background: var(--teal); border-radius: inherit; }.journal-theme .bar-fill--orange{ background: var(--rp-ungraded); }.journal-theme .bar-value{ grid-area: value; text-align: right; white-space: nowrap; font-size: 14px; }.journal-theme .bar-sub{ color: var(--muted); font-size: 12px; white-space: nowrap; }.journal-theme .summary-cell strong small{ color: var(--muted); font-size: 13px; font-weight: 400; }.journal-theme .insights{ display: grid; gap: 11px; }.journal-theme .insight{ display: flex; gap: 11px; padding: 12px 13px; background: #f8fbfa; border: 1px solid #e5efec; border-radius: 6px; }.journal-theme .insight::before{ content: ""; flex: 0 0 4px; align-self: stretch; background: var(--teal); border-radius: 3px; }.journal-theme .insight--warn{ background: #fffaf2; border-color: #f4e5c9; }.journal-theme .insight--warn::before{ background: var(--rp-ungraded); }.journal-theme .insight strong{ font-size: 13px; }.journal-theme .insight p{ margin: 3px 0 0; color: var(--muted); font-size: 12px; }.journal-theme .answer-summary{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.journal-theme .summary-cell{ padding: 13px; background: #fbfdfc; border: 1px solid var(--line); border-radius: 6px; }.journal-theme .summary-cell label{ display: block; color: var(--muted); font-size: 12px; }.journal-theme .summary-cell strong{ display: block; margin-top: 5px; font-size: 20px; }.journal-theme .muted{ color: var(--muted); }.journal-theme .small{ font-size: 12px; }.journal-theme .diag-head{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-bottom: 18px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }.journal-theme .diag-cell{ position: relative; min-height: 108px; padding: 16px; background: #fff; }.journal-theme .diag-cell--main{ background: #fff; }.journal-theme .diag-cell--main::before{ content: ""; position: absolute; top: 14px; bottom: 14px; left: 0; width: 4px; background: var(--teal); border-radius: 0 4px 4px 0; }.journal-theme .diag-cell--main label{ color: var(--teal-dark); font-weight: 700; }.journal-theme .diag-cell label{ display: block; color: var(--muted); font-size: 12px; }.journal-theme .diag-cell strong{ display: block; margin-top: 7px; font-size: 23px; }.journal-theme .diag-value-line{ display: flex; align-items: baseline; justify-content: flex-start; gap: 14px; min-width: 0; margin-top: 8px; }.journal-theme .diag-value-line strong{ min-width: 0; margin-top: 0; }.journal-theme .diag-value-line span{ flex: 0 0 auto; color: var(--muted); font-size: 13px; white-space: nowrap; }.journal-theme .data-table{ width: 100%; border-collapse: collapse; }.journal-theme .data-table th, .journal-theme .data-table td{ padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: center; }.journal-theme .data-table th{ color: var(--muted); background: #f9fbfa; font-size: 12px; font-weight: 700; }.journal-theme .data-table tr:last-child td{ border-bottom: 0; }.journal-theme .data-table tbody tr{ transition: background-color .16s ease; }.journal-theme .data-table tbody tr:hover{ background: #fbfdf9; }.journal-theme .part-review-link{ display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; margin: 0 auto; padding: 5px 9px; color: var(--teal-dark); background: transparent; border: 1px solid transparent; border-radius: 4px; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }.journal-theme .part-review-link:hover, .journal-theme .part-review-link:focus-visible{ color: #076e7f; background: #eef9f8; border-color: #b9dfda; outline: 0; }.journal-theme .part-review-link .chevron{ font-size: 18px; font-weight: 400; line-height: 1; }.journal-theme .table-scroll{ overflow-x: auto; }.journal-theme .part-diagnosis-panel .panel-head{ justify-content: center; text-align: center; }.journal-theme .writing-grid{ display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr); gap: 18px; }.journal-theme .rubric-list{ display: grid; gap: 15px; }.journal-theme .rubric{ display: grid; grid-template-columns: 75px 1fr 32px; gap: 10px; align-items: center; }.journal-theme .rubric span{ color: var(--muted); font-size: 12px; }.journal-theme .rubric strong{ text-align: right; }.journal-theme .writing-comment{ padding: 14px; color: #49635e; background: var(--teal-pale); border: 1px solid #c6e7e1; border-radius: 6px; }.journal-theme #questions-view .heading{ margin-bottom: 28px; }.journal-theme #questions-view h1{ font-size: clamp(28px, 3.4vw, 36px); }.journal-theme #questions-view .meta{ font-size: 15px; }.journal-theme .question-tabs{ display: flex; gap: 8px; margin-bottom: 18px; padding-bottom: 1px; border-bottom: 1px solid var(--line); overflow-x: auto; }.journal-theme .question-tab{ position: relative; flex: 0 0 auto; padding: 14px 20px 15px; color: var(--muted); background: transparent; border: 0; font-size: 15px; font-weight: 700; white-space: nowrap; }.journal-theme .question-tab::after{ content: ""; position: absolute; right: 12px; bottom: -1px; left: 12px; height: 3px; background: transparent; border-radius: 3px 3px 0 0; }.journal-theme .question-tab.active{ color: var(--teal-dark); }.journal-theme .question-tab.active::after{ background: var(--teal); }.journal-theme .question-tab small{ margin-left: 7px; color: inherit; font-size: 13px; font-weight: 400; }.journal-theme .answer-card{ margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }.journal-theme .answer-card-head{ display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 20px; background: #f9fbfa; border-bottom: 1px solid var(--line); }.journal-theme .answer-card-head h3{ font-size: 19px; }.journal-theme .answer-card-head .small{ font-size: 13px; }.journal-theme .legend{ display: flex; flex-wrap: wrap; gap: 10px 16px; color: var(--muted); font-size: 13px; }.journal-theme .legend-item{ display: inline-flex; align-items: center; gap: 6px; }.journal-theme .legend-dot{ display: inline-block; width: 17px; height: 17px; border: 2px solid transparent; border-radius: 3px; }.journal-theme .legend-dot--empty{ background: #fff; border: 2px solid #7f8b94; }.journal-theme .legend-dot--right{ background: var(--rp-right-bg); border: 2px solid var(--rp-right); }.journal-theme .legend-dot--wrong{ background: var(--rp-wrong-bg); border: 2px solid var(--rp-wrong); }.journal-theme .legend-dot--partial{ background: var(--rp-partial-split); border-color: #9ba58e; }.journal-theme .legend-dot--ungraded{ background: #fff3df; border: 2px solid var(--rp-ungraded); }.journal-theme .answer-card-body{ padding: 22px 24px 24px; }.journal-theme .part + .part{ margin-top: 22px; padding-top: 20px; border-top: 1px solid #edf2f0; }.journal-theme .part-title{ margin-bottom: 12px; color: #53646b; font-size: 15px; font-weight: 700; }.journal-theme .answer-dots{ display: flex; flex-wrap: wrap; gap: 12px; }.journal-theme .answer-dot{ position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: #fff; border: 1px solid transparent; border-radius: 50%; font-size: 13px; font-weight: 700; }.journal-theme .answer-dot::after{ content: none; display: none; }.journal-theme .answer-dot--right{ color: #3d7600; background: var(--rp-right-bg); border: 2px solid var(--rp-right); }.journal-theme .answer-dot--wrong{ color: #a33d3d; background: var(--rp-wrong-bg); border: 2px solid var(--rp-wrong); }.journal-theme .answer-dot--empty{ color: #65727d; background: #fff; border: 2px solid #7f8b94; }.journal-theme .answer-dot--empty::after{ content: none; }.journal-theme .answer-dot--partial{ color: #46545b; background: var(--rp-partial-split); border: 2px solid #9ba58e; }.journal-theme .answer-dot--ungraded{ color: #9a5b17; background: #fff3df; border: 2px solid var(--rp-ungraded); }.journal-theme .answer-dot.active{ box-shadow: 0 0 0 3px rgba(42,169,159,.22); }.journal-theme .detail{ min-height: 310px; }.journal-theme .answer-pair{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }.journal-theme .answer-box{ padding: 13px; background: #f9fbfa; border: 1px solid var(--line); border-radius: 6px; }.journal-theme .answer-box label{ display: block; color: var(--muted); font-size: 12px; }.journal-theme .answer-box strong{ display: block; margin-top: 6px; font-size: 18px; }.journal-theme .explanation{ padding: 14px; background: #fffaf2; border: 1px solid #f3e2bf; border-radius: 6px; color: #6d5937; }.journal-theme .recommendation-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.journal-theme .recommendation{ min-height: 160px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); }.journal-theme .recommendation-index{ color: var(--teal); font-size: 12px; font-weight: 800; }.journal-theme .recommendation-kicker{ display: block; margin-top: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }.journal-theme .recommendation h3{ margin-top: 15px; font-size: 18px; }.journal-theme .recommendation p{ margin-bottom: 0; color: var(--muted); font-size: 13px; }.journal-theme .history-cards{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }.journal-theme .history-card{ padding: 15px; background: #fbfdfc; border: 1px solid var(--line); border-radius: 6px; }.journal-theme .history-card label{ display: block; color: var(--muted); font-size: 12px; }.journal-theme .history-card strong{ display: block; margin-top: 5px; font-size: 23px; }.journal-theme .history-card small{ color: var(--muted); }.journal-theme .history-score{ display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }.journal-theme .history-score small{ font-size: 14px; font-weight: 400; }.journal-theme .history-groups{ display: grid; gap: 20px; }.journal-theme .history-group-title{ margin-bottom: 9px; font-weight: 800; }.journal-theme .history-row{ display: grid; grid-template-columns: 76px minmax(80px, 1fr) 38px; gap: 10px; align-items: center; margin: 8px 0; }.journal-theme .history-attempt{ color: var(--muted); font-size: 12px; }.journal-theme .history-track{ height: 24px; background: #f0f3f2; border-radius: 4px; overflow: hidden; }.journal-theme .history-bar{ height: 100%; padding-left: 9px; color: #fff; background: var(--teal); line-height: 24px; font-size: 12px; }.journal-theme .history-bar--1{ background: #9bcfc8; }.journal-theme .history-bar--2{ background: #5abbb0; }.journal-theme .history-bar--3{ background: var(--teal-dark); }.journal-theme .history-value{ text-align: right; }.journal-theme .history-note{ margin-top: 15px; padding: 13px 14px; color: #4d6762; background: var(--teal-pale); border-radius: 6px; }.journal-theme .toast{ position: fixed; right: 26px; bottom: 24px; z-index: 8; max-width: 330px; padding: 11px 15px; color: #fff; background: #263c43; border-radius: 6px; box-shadow: var(--shadow); opacity: 0; transform: translateY(8px); pointer-events: none; transition: .18s ease; }.journal-theme .toast.show{ opacity: 1; transform: translateY(0); }body.modal-open{ overflow: hidden; }/* 站点头部是 sticky z-index:200（shell.css），报告样式原本按无头部的独立原型写的 z-index:20， 并入官网后抽屉会被头部压住。抬到 690，与交卷记录页的全屏浮层同级。 */ .journal-theme .question-modal{ position: fixed; inset: 0; z-index: 690; display: flex; align-items: stretch; justify-content: flex-end; padding: 0; background: rgba(32, 49, 60, .48); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }.journal-theme .question-modal.open{ opacity: 1; visibility: visible; pointer-events: auto; }.journal-theme .question-modal-dialog{ display: flex; flex-direction: column; width: min(1280px, 72vw); height: 100%; max-height: none; background: #fff; border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: -16px 0 44px rgba(32, 49, 60, .18); overflow: hidden; transform: translateX(100%); transition: transform .24s ease; }.journal-theme .question-modal.open .question-modal-dialog{ transform: translateX(0); } @media (prefers-reduced-motion: reduce) {.journal-theme .question-modal, .journal-theme .question-modal-dialog{ transition: none; } }.journal-theme .question-modal-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 17px 20px; background: linear-gradient(100deg, var(--teal-pale), #fff 70%); border-bottom: 1px solid var(--line); }.journal-theme .question-modal-kicker{ margin: 0 0 3px; color: var(--teal-dark); font-size: 12px; font-weight: 800; }.journal-theme .question-modal-title{ margin: 0; font-size: 18px; }.journal-theme .question-modal-close{ display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 50%; font-size: 20px; line-height: 1; }.journal-theme .question-modal-close:hover{ color: var(--teal-dark); border-color: #b7ddd7; }.journal-theme .question-modal-body{ flex: 1 1 auto; min-height: 0; padding: 22px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }.journal-theme .question-modal-tools{ display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }.journal-theme .question-modal-counter{ color: var(--teal-dark); font-size: 13px; font-weight: 800; }.journal-theme .question-result-badge{ display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; color: #3d7600; background: var(--rp-right-bg); border: 1px solid var(--rp-right); border-radius: 999px; font-size: 12px; font-weight: 800; }.journal-theme .question-result-badge.is-right{ color: #3d7600; background: var(--rp-right-bg); border-color: var(--rp-right); }.journal-theme .question-result-badge.is-wrong{ color: #a33d3d; background: var(--rp-wrong-bg); border-color: var(--rp-wrong); }.journal-theme .question-result-badge.is-partial{ color: #46545b; background: var(--rp-partial-split); border-color: #9ba58e; }.journal-theme .question-result-badge.is-empty{ color: #65727d; background: #fff; border-color: #7f8b94; }.journal-theme .question-result-badge.is-ungraded{ color: #9a5b17; background: #fff3df; border-color: var(--rp-ungraded); }.journal-theme .audio-control{ display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 13px; color: var(--teal-dark); background: var(--teal-pale); border: 1px solid #bfe6df; border-radius: 6px; font-weight: 700; }.journal-theme .audio-control:hover{ background: #d9f2ed; }.journal-theme .audio-control[hidden]{ display: none; }.journal-theme .question-structure{ display: grid; gap: 14px; }.journal-theme .question-structure-block{ border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }.journal-theme .question-structure-block[hidden]{ display: none; }.journal-theme .question-structure-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 8px 14px; background: #f7faF4; border-bottom: 1px solid var(--line); }.journal-theme .question-structure-head strong{ font-size: 14px; }.journal-theme .question-structure-tag{ color: var(--muted); font-size: 12px; }.journal-theme .question-structure-content{ padding: 15px 16px; }.journal-theme .modal-material{ display: grid; gap: 12px; }.journal-theme .modal-material-toolbar{ display: flex; align-items: center; gap: 10px; }.journal-theme .modal-material-text{ color: #34475b; font-size: 15px; line-height: 1.8; white-space: pre-line; }.journal-theme .modal-material-caption{ color: var(--muted); font-size: 12px; }.journal-theme .material-visual-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; }.journal-theme .material-visual{ display: grid; min-height: 108px; place-items: center; padding: 12px; background: #fbfdf9; border: 1px solid var(--line); border-radius: 5px; text-align: center; }.journal-theme .material-visual-icon{ font-size: 42px; line-height: 1; }.journal-theme .material-visual-label{ margin-top: 8px; color: #526476; font-size: 13px; }.journal-theme .modal-prompt{ margin: 0; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.75; white-space: pre-line; }.journal-theme .modal-options{ display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }.journal-theme .modal-option{ min-height: 52px; padding: 11px 12px; color: var(--ink); background: #fbfdfc; border: 1px solid var(--line); border-radius: 5px; text-align: left; }.journal-theme .modal-option-label{ display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; margin-right: 7px; color: var(--teal-dark); background: var(--teal-pale); border-radius: 3px; font-weight: 800; vertical-align: top; }.journal-theme .modal-option-text{ display: inline; color: inherit; font-size: 14px; line-height: 1.55; }.journal-theme .modal-option--image{ text-align: center; }.journal-theme .modal-option--image .modal-option-label{ display: flex; margin: 0 auto 8px; }.journal-theme .modal-option-icon{ display: block; margin: 4px 0 8px; font-size: 38px; }.journal-theme .modal-word-chips{ display: flex; flex-wrap: wrap; gap: 9px; }.journal-theme .modal-word-chip{ padding: 8px 13px; color: var(--teal-dark); background: var(--teal-pale); border: 1px solid #bddfd9; border-radius: 4px; font-size: 15px; font-weight: 700; }.journal-theme .modal-answer-grid{ display: grid; grid-template-columns: 1fr; gap: 12px; }.journal-theme .modal-answer-card{ min-height: 92px; padding: 14px 16px; background: #fbfdfc; border: 1px solid var(--line); border-radius: 6px; }.journal-theme .modal-answer-card.is-wrong{ background: var(--rp-wrong-bg); border-color: #f2b8b5; }.journal-theme .modal-answer-card.is-right{ background: var(--rp-right-bg); border-color: #bfdc9f; }.journal-theme .modal-answer-card.is-partial{ background: var(--rp-partial-split); border-color: #b6bda8; }.journal-theme .modal-answer-card.is-ungraded{ background: #fff8ed; border-color: #efc58f; }.journal-theme .modal-answer-card.modal-answer-card--reference{ background: #fbfdfc; border-color: var(--line); }.journal-theme .modal-answer-card.is-empty{ background: #f4f6f7; border-color: #d9e0e2; }.journal-theme .modal-answer-label{ display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }.journal-theme .modal-answer-value{ color: var(--ink); font-size: 16px; font-weight: 800; line-height: 1.65; white-space: pre-line; }.journal-theme .modal-explanation{ padding: 15px 16px; color: #6d5937; background: #fffaf2; border: 1px solid #f3e2bf; border-radius: 6px; font-size: 14px; line-height: 1.8; }.journal-theme .question-modal-foot{ display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }.journal-theme .modal-nav{ min-height: 50px; color: var(--teal-dark); background: #fff; border: 0; font-weight: 700; }.journal-theme .modal-nav + .modal-nav{ border-left: 1px solid var(--line); }.journal-theme .modal-nav:hover:not(:disabled){ background: var(--teal-pale); }.journal-theme .modal-nav:disabled{ color: #b8c5c1; background: #f7f9f8; cursor: not-allowed; } @media (max-width: 1050px) {.journal-theme .filters{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "level paper" "attempt action"; }.journal-theme .filters .button{ width: 100%; }.journal-theme .metric-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }.journal-theme .diag-head{ grid-template-columns: repeat(3, minmax(0, 1fr)); }.journal-theme .question-modal-dialog{ width: min(840px, 94vw); } } @media (max-width: 760px) {.journal-theme .topbar{ padding: 0 16px; }.journal-theme .brand-sub, .journal-theme .top-actions .status{ display: none; }.journal-theme .page{ width: calc(100% - 22px); padding-top:12px; }.journal-theme .filters{ grid-template-columns: 1fr; grid-template-areas: "level" "paper" "attempt" "action"; gap: 12px; padding: 16px; }.journal-theme .report-shell{ grid-template-columns: 1fr; }.journal-theme .sidebar{ padding: 10px 10px 0; border-right: 0; border-bottom: 1px solid var(--line); }.journal-theme .sidebar-title{ display: none; }.journal-theme .nav{ display: flex; overflow-x: auto; }.journal-theme .nav button{ flex: 0 0 auto; width: auto; white-space: nowrap; }.journal-theme .nav button::before{ top: auto; right: 10px; bottom: 0; left: 10px; width: auto; height: 3px; }.journal-theme .content{ padding: 22px 15px 34px; }.journal-theme .heading{ display: block; }.journal-theme .heading > .tag{ margin-top: 13px; }.journal-theme .score-hero, .journal-theme .two-col, .journal-theme .writing-grid{ grid-template-columns: 1fr; }.journal-theme .score-main{ border-right: 0; border-bottom: 1px solid var(--line); }.journal-theme .answer-summary, .journal-theme .recommendation-grid, .journal-theme .history-cards{ grid-template-columns: 1fr 1fr; }.journal-theme #questions-view h1{ font-size: 30px; }.journal-theme .answer-card-head{ align-items: flex-start; flex-direction: column; }.journal-theme .answer-card-body{ padding: 18px 15px 20px; }.journal-theme .answer-dot{ width: 36px; height: 36px; }.journal-theme .bar-row{ grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 8px; }.journal-theme .bar-sub{ display: none; }.journal-theme .diag-head{ grid-template-columns: 1fr; }.journal-theme .answer-card-head{ display: block; }.journal-theme .legend{ margin-top: 10px; }.journal-theme .question-modal{ padding: 0; }.journal-theme .question-modal-dialog{ width: 100%; max-height: 100vh; height: 100%; border: 0; border-radius: 0; }.journal-theme .question-modal-head{ padding: 15px 16px; }.journal-theme .question-modal-body{ padding: 16px; }.journal-theme .modal-options{ grid-template-columns: 1fr 1fr; }.journal-theme .modal-answer-grid{ grid-template-columns: 1fr; } } /* HSK 机考模拟视觉规范：考试系统版 */ .journal-theme{ color: var(--ink); background: linear-gradient(180deg, #f4faeb 0, #fff 190px); font-family:var(--font); line-height: 1.6; }.journal-theme .topbar{ min-height: 60px; padding: 0 30px; background: linear-gradient(180deg, #f4faeb 0%, #fff 100%); border-bottom: 3px solid var(--teal); }.journal-theme .brand-mark{ background: var(--teal); border-radius: 4px; }.journal-theme .page{ width: calc(100% - 32px); max-width: 1600px; margin:0 auto;padding:16px 0 32px}.journal-theme .filters{ padding: 15px 16px 16px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 5px; box-shadow: none; }.journal-theme .filters .field label{ margin-bottom: 6px; color: var(--muted); }.journal-theme select{ min-height: 38px; background: #fff; border-color: #cbd8ca; border-radius: 4px; }.journal-theme select:hover{ border-color: var(--teal); }.journal-theme select:focus{ border-color: var(--teal); box-shadow: 0 0 0 2px rgba(45,166,191,.12); }.journal-theme .button{ min-height: 36px; padding: 0 14px; border-radius: 4px; }.journal-theme .button--teal{ background: var(--rp-ungraded); }.journal-theme .button--teal:hover{ background: var(--rp-ungraded-2); transform: none; }.journal-theme .button--ghost{ color: var(--teal-dark); border-color: #9acdda; }.journal-theme .report-shell{ min-height: 850px; margin-top: 12px; border-radius: 5px; box-shadow: none; }.journal-theme .sidebar{ padding: 18px 10px; background: #f4faeb; }.journal-theme .sidebar-title{ color: #4f9c08; font-weight: 800; }.journal-theme .nav{ gap: 3px; }.journal-theme .nav button{ padding: 11px 12px 11px 16px; color: #466348; border-radius: 4px; }.journal-theme .nav button:hover{ color: var(--teal-dark); background: #fff; }.journal-theme .nav button.active{ color: #fff; background: var(--rp-ungraded); }.journal-theme .nav button.active::before{ background: var(--rp-ungraded-2); }.journal-theme .content{ padding: 24px 26px 36px; }.journal-theme .eyebrow{ color: var(--teal-dark); }.journal-theme h1{ font-size: clamp(22px, 2.6vw, 28px); letter-spacing: 0; }.journal-theme .tag{ min-height: 23px; padding: 0 8px; border-radius: 4px; }.journal-theme .tag--good{ color: #4f7708; background: var(--rp-right-bg); }.journal-theme .tag--mid{ color: #9a5b17; background: #fff3df; }.journal-theme .tag--weak{ color: #a34e46; background: var(--rp-wrong-bg); }.journal-theme .panel{ border-radius: 5px; box-shadow: none; }.journal-theme .panel-head{ padding: 14px 16px; background: #fbfdf7; }.journal-theme .panel-body{ padding: 16px; }.journal-theme .score-hero{ min-height: 154px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--rp-right); border-radius: 5px; box-shadow: none; }.journal-theme .score-main{ padding: 21px 23px; background: var(--rp-right-bg); border-right: 1px solid var(--line); }.journal-theme .score-line strong{ color: #4f9c08; font-size: 48px; }.journal-theme .score-note{ color: #4f9c08; }.journal-theme .metric-card{ min-height: 98px; padding: 14px; border-radius: 5px; box-shadow: none; }.journal-theme .bar-track, .journal-theme .progress-track{ height: 9px; background: #eef1ef; border-radius: 4px; }.journal-theme .bar-fill{ background: var(--rp-right); }.journal-theme .bar-fill--orange{ background: var(--rp-ungraded); }.journal-theme .insight{ padding: 11px 12px; background: #fbfdf7; border-color: var(--line); border-radius: 5px; }.journal-theme .insight--warn{ background: #fff8ee; border-color: #f0d7b5; }.journal-theme .answer-summary .summary-cell, .journal-theme .history-card, .journal-theme .recommendation{ background: #fff; border-radius: 5px; box-shadow: none; }.journal-theme .summary-cell{ padding: 12px; }.journal-theme .diag-head{ background: var(--line); border-color: var(--line); border-radius: 5px; box-shadow: none; }.journal-theme .diag-cell{ min-height: 104px; padding: 15px; }.journal-theme .diag-cell--main{ background: #fff; }.journal-theme .diag-cell--main::before{ background: var(--rp-ungraded); }.journal-theme .diag-cell--main label{ color: #b65d16; }.journal-theme .data-table th{ background: #f4faeb; }.journal-theme .question-tabs{ border-bottom-color: var(--teal); }.journal-theme .question-tab{ padding: 12px 18px 13px; }.journal-theme .question-tab.active{ color: var(--teal-dark); }.journal-theme .question-tab.active::after{ background: var(--teal); }.journal-theme .answer-card{ border-radius: 5px; }.journal-theme .answer-card-head{ padding: 15px 17px; background: #f4faeb; }.journal-theme .answer-card-body{ padding: 19px 21px 21px; }.journal-theme .part-title{ color: #4f6b54; }.journal-theme .answer-dot{ width: 38px; height: 38px; border-radius: 4px; }.journal-theme .answer-dot.active{ box-shadow: 0 0 0 3px rgba(237,125,26,.25); }.journal-theme .recommendation{ padding: 16px; }.journal-theme .recommendation-index{ color: var(--teal-dark); }.journal-theme .history-card{ padding: 14px; }.journal-theme .history-track{ height: 22px; border-radius: 3px; }.journal-theme .history-bar{ background: var(--green-dark, #4f9c08); line-height: 22px; }.journal-theme .history-bar--1{ background: #c0d8bd; }.journal-theme .history-bar--2{ background: #8fbd79; }.journal-theme .history-bar--3{ background: #4f9c08; }.journal-theme .history-note{ color: #4f6b54; background: var(--rp-right-bg); border-radius: 5px; }.journal-theme .writing-comment, .journal-theme .modal-writing-answer{ color: #4f6b54; background: var(--rp-right-bg); border-color: #c8dfae; border-radius: 5px; }.journal-theme .question-modal-dialog{ border-radius: 0; box-shadow: -16px 0 44px rgba(31,44,61,.16); }.journal-theme .question-modal-head{ background: linear-gradient(100deg, var(--rp-right-bg), #fff 70%); }.journal-theme .question-modal-close{ border-radius: 4px; }.journal-theme .audio-control{ color: var(--teal-dark); background: var(--teal-pale); border-color: #b9ddd5; border-radius: 4px; }.journal-theme .audio-control:hover{ background: #dff3ef; }.journal-theme .modal-option.is-correct{ background: var(--rp-right-bg); border-color: #b8d99e; }.journal-theme .modal-option.is-wrong{ background: var(--rp-wrong-bg); border-color: #e4b7b0; }.journal-theme .modal-nav:first-child{ color: var(--rp-ungraded); }.journal-theme .modal-nav:last-child{ color: #fff; background: var(--rp-right); }.journal-theme .modal-nav:hover:not(:disabled){ background: var(--rp-right-bg); }.journal-theme .modal-nav:last-child:hover:not(:disabled){ background: #4f9c08; }.journal-theme .toast{ border-radius: 4px; box-shadow: none; } @media (max-width: 760px) {.journal-theme .topbar{ padding: 0 16px; }.journal-theme .page{ width: calc(100% - 20px); padding-top:10px; }.journal-theme .filters{ border-left-width: 3px; padding: 14px; }.journal-theme .report-shell{ margin-top: 10px; border-radius: 4px; }.journal-theme .sidebar{ background: #f4faeb; }.journal-theme .content{ padding: 20px 14px 30px; } } /* 可读性与 H5 适配：提高信息密度下的阅读舒适度，避免内容被固定宽度裁切。 */ .journal-theme{ font-size: 15px; line-height: 1.65; }.journal-theme .status{ font-size: 14px; }.journal-theme .filters .field label{ font-size: 13px; }.journal-theme select, .journal-theme .button{ font-size: 15px; }.journal-theme .sidebar-title{ font-size: 13px; }.journal-theme .nav button{ font-size: 15px; }.journal-theme .eyebrow{ font-size: 12px; }.journal-theme h1{ font-size: clamp(24px, 2.8vw, 31px); }.journal-theme h2{ font-size: 19px; }.journal-theme h3{ font-size: 17px; }.journal-theme .meta{ font-size: 14px; }.journal-theme .tag{ font-size: 13px; }.journal-theme .small, .journal-theme .panel-head .small{ font-size: 13px; }.journal-theme .result-item label, .journal-theme .metric-card label, .journal-theme .metric-card small, .journal-theme .metric-card p, .journal-theme .summary-cell label, .journal-theme .diag-cell label, .journal-theme .data-table th, .journal-theme .answer-box label, .journal-theme .history-card label, .journal-theme .history-card small, .journal-theme .history-attempt, .journal-theme .recommendation-kicker, .journal-theme .modal-explanation-label{ font-size: 13px; }.journal-theme .data-table td{ font-size: 14px; }.journal-theme .bar-sub, .journal-theme .insight p, .journal-theme .recommendation p, .journal-theme .modal-option-text{ font-size: 13px; }.journal-theme .bar-sub{ white-space: normal; }.journal-theme .content, .journal-theme .panel, .journal-theme .panel-head, .journal-theme .panel-body, .journal-theme .metric-card, .journal-theme .summary-cell, .journal-theme .recommendation, .journal-theme .history-card, .journal-theme .answer-card, .journal-theme .answer-card-head, .journal-theme .answer-card-body, .journal-theme .answer-box, .journal-theme .heading > div{ min-width: 0; }.journal-theme .content{ overflow-wrap: anywhere; }.journal-theme .table-scroll{ width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }.journal-theme img, .journal-theme svg, .journal-theme video, .journal-theme canvas{ max-width: 100%; } @media (max-width: 760px) {.journal-theme{ width: 100%; max-width: 100%; overflow-x: hidden; }.journal-theme .topbar{ min-height: 56px; padding: 0 12px; }.journal-theme .brand{ min-width: 0; gap: 8px; }.journal-theme .brand-name{ font-size: 15px; white-space: nowrap; }.journal-theme .top-actions{ gap: 8px; }.journal-theme .top-actions .button{ padding: 0 11px; }.journal-theme .page{ width: calc(100% - 16px); max-width: none; margin:0 auto;padding:10px 0 24px}.journal-theme .filters{ width: 100%; padding: 13px; gap: 10px; }.journal-theme .report-shell{ display: block; width: 100%; min-width: 0; min-height: 0; overflow: visible; }.journal-theme .sidebar{ width: 100%; min-width: 0; padding: 8px 8px 0; overflow: hidden; }.journal-theme .nav{ min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x; -webkit-overflow-scrolling: touch; padding-bottom: 1px; }.journal-theme .nav button{ flex: 0 0 auto; font-size: 14px; }.journal-theme .content{ width: 100%; max-width: 100%; padding: 18px 12px 28px; }.journal-theme .heading{ gap: 12px; }.journal-theme .score-hero, .journal-theme .two-col, .journal-theme .writing-grid, .journal-theme .result-grid, .journal-theme .metric-grid, .journal-theme .answer-summary, .journal-theme .recommendation-grid, .journal-theme .history-cards, .journal-theme .answer-pair{ grid-template-columns: minmax(0, 1fr); }.journal-theme .score-main{ padding: 19px 18px; }.journal-theme .result-grid{ gap: 10px; padding: 17px 18px; }.journal-theme .metric-card{ min-height: 92px; }.journal-theme .bar-row{ grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 8px; }.journal-theme .bar-sub{ display: none; }.journal-theme .history-row{ grid-template-columns: 60px minmax(0, 1fr) 36px; gap: 7px; }.journal-theme .question-tabs{ max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x; -webkit-overflow-scrolling: touch; }.journal-theme .answer-card-head{ align-items: flex-start; flex-direction: column; }.journal-theme .answer-card-body{ padding: 18px 14px 20px; }.journal-theme .answer-dot{ width: 36px; height: 36px; }.journal-theme .diag-head{ grid-template-columns: minmax(0, 1fr); }.journal-theme .question-modal{ padding: 0; }.journal-theme .question-modal-dialog{ width: 100%; max-width: 100%; max-height: 100vh; height: 100%; min-height: 0; border: 0; border-radius: 0; }.journal-theme .question-modal-head, .journal-theme .question-modal-body{ padding-left: 15px; padding-right: 15px; }.journal-theme .question-modal-tools{ align-items: flex-start; flex-wrap: wrap; }.journal-theme .question-modal-body{ overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }.journal-theme .modal-options{ grid-template-columns: minmax(0, 1fr); }.journal-theme .material-visual-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) {.journal-theme .top-actions .button{ min-height: 34px; padding: 0 9px; font-size: 14px; }.journal-theme .brand-mark{ width: 29px; height: 29px; }.journal-theme .content{ padding-right: 10px; padding-left: 10px; }.journal-theme .score-line strong{ font-size: 44px; }.journal-theme .panel-head, .journal-theme .panel-body{ padding-right: 13px; padding-left: 13px; } } /* 页面内字号统一：历史分析跟随成绩总览的阅读层级 */ .journal-theme #history-view .meta{ font-size: 14px; }.journal-theme #history-view .history-card{ padding: 16px; }.journal-theme #history-view .history-card label, .journal-theme #history-view .history-card small, .journal-theme #history-view .history-attempt{ font-size: 14px; }.journal-theme #history-view .history-card strong{ font-size: 25px; }.journal-theme #history-view .history-group-title{ font-size: 16px; }.journal-theme #history-view .history-track{ height: 25px; }.journal-theme #history-view .history-bar{ line-height: 25px; font-size: 14px; }.journal-theme #history-view .history-value{ font-size: 16px; }.journal-theme #history-view .history-note{ font-size: 14px; line-height: 1.7; } @media (max-width: 760px) {.journal-theme #history-view .history-card{ padding: 15px; } } /* 统一总览双栏卡片的顶部基线，并让诊断主卡以柔和底色表达重点。 */ .journal-theme .two-col > .panel + .panel{ margin-top: 0; }.journal-theme .writing-grid > .panel + .panel{ margin-top: 0; }.journal-theme .diag-head{ align-items: stretch; }.journal-theme .diag-cell{ display: flex; flex-direction: column; justify-content: center; min-height: 126px; padding: 22px 22px; }.journal-theme .diag-cell--main{ background: #fff8ee; }.journal-theme .diag-cell--main::before{ top: 0; right: 0; bottom: auto; left: 0; width: auto; height: 3px; background: var(--rp-ungraded); border-radius: 0; }.journal-theme .diag-cell--main label{ color: #b65d16; }.journal-theme .diag-cell label{ font-size: 14px; }.journal-theme .diag-cell strong{ margin-top: 6px; font-size: 26px; }.journal-theme .diag-cell .diag-value-line strong{ margin-top: 0; }.journal-theme .diag-value-line{ margin-top: 10px; }.journal-theme .diag-value-line span{ font-size: 14px; }.journal-theme .diag-cell .muted{ margin-top: 2px; } /* 分项成绩利用等高卡片的剩余空间，避免内容全部挤在顶部。 */ .journal-theme .section-score-panel{ display: flex; flex-direction: column; }.journal-theme .section-score-panel > .panel-body{ display: flex; flex: 1; }.journal-theme .section-score-panel .section-bars{ flex: 1; width: 100%; align-content: center; gap: 27px; }.journal-theme .section-score-panel .bar-row{ row-gap: 10px; }.journal-theme .section-score-panel .bar-label, .journal-theme .section-score-panel .bar-value{ font-size: 16px; }.journal-theme .section-score-panel .bar-track{ height: 10px; } /* 成绩总览只保留一层核心信息：总分、得分率与作答完成度。 */ .journal-theme .overview-metrics{ display: grid; grid-template-columns: minmax(380px, 1.18fr) minmax(210px, .66fr) minmax(250px, 1.06fr); gap: 12px; margin-bottom: 18px; }.journal-theme .overview-metric{ min-width: 0; min-height: 108px; padding: 17px 18px; background: #fff; border: 1px solid var(--line); border-radius: 5px; }.journal-theme .overview-metric--primary{ background: #fbfdf7; border-left: 3px solid var(--rp-right); }.journal-theme .overview-metric label{ display: block; color: var(--muted); font-size: 13px; }.journal-theme .overview-metric-value{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin-top: 9px; min-width: 0; }.journal-theme .overview-metric-value strong{ color: var(--ink); font-size: 28px; line-height: 1.1; white-space: nowrap; }.journal-theme .overview-metric-value strong.pass{ color: #4f9c08; }.journal-theme .overview-metric-value strong.warning{ color: #b65d16; }.journal-theme .overview-metric-value span{ color: var(--muted); font-size: 14px; white-space: nowrap; }.journal-theme .overview-score-rate{ margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line); }.journal-theme .overview-score-rate b{ color: var(--ink); font-weight: 700; }.journal-theme .overview-metric-note{ margin: 10px 0 0; color: #4f9c08; font-size: 13px; font-weight: 700; line-height: 1.5; }.journal-theme .overview-metric-note.is-warning{ color: #b65d16; }.journal-theme .overview-metric-note--muted{ color: var(--muted); font-weight: 400; }.journal-theme .overview-encouragement{ display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; padding: 0 8px; }.journal-theme .overview-encouragement-copy{ min-width: 0; text-align: left; }.journal-theme .overview-encouragement-copy strong{ display: block; color: #4f9c08; font-size: 20px; line-height: 1.35; }.journal-theme .overview-encouragement-copy span{ display: block; margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.6; }.journal-theme .overview-encouragement img{ flex: 0 0 auto; width: 108px; height: auto; object-fit: contain; } /* 总分区域增加纵向呼吸感，保持内容密度但避免横宽纵薄。 */ @media (min-width: 761px) {.journal-theme .score-hero{ min-height: 188px; }.journal-theme .score-main{ display: flex; flex-direction: column; justify-content: center; padding: 28px 27px; }.journal-theme .result-grid{ gap: 18px 28px; padding: 28px 28px; }.journal-theme .result-item strong{ margin-top: 5px; } } @media (min-width: 761px) and (max-width: 1120px) {.journal-theme .overview-metrics{ grid-template-columns: minmax(0, 1.4fr) minmax(210px, .8fr); }.journal-theme .overview-encouragement{ grid-column: 1 / -1; justify-content: flex-end; min-height: 86px; padding-right: 24px; } } @media (max-width: 760px) {.journal-theme .two-col > .panel + .panel{ margin-top: 18px; }.journal-theme .overview-metrics{ grid-template-columns: minmax(0, 1fr); }.journal-theme .overview-metric--primary{ grid-column: auto; }.journal-theme .overview-encouragement{ justify-content: center; min-height: 96px; padding: 4px 8px; }.journal-theme .overview-encouragement img{ width: 92px; }.journal-theme .section-score-panel .section-bars{ height: auto; align-content: stretch; gap: 20px; }.journal-theme .section-score-panel .bar-label, .journal-theme .section-score-panel .bar-value{ font-size: 15px; }.journal-theme .diag-cell{ min-height: 104px; padding: 16px; }.journal-theme .diag-cell label{ font-size: 13px; }.journal-theme .diag-cell strong{ font-size: 23px; }.journal-theme .diag-value-line span{ font-size: 13px; } } @media (max-width: 420px) {.journal-theme .overview-metrics{ grid-template-columns: minmax(0, 1fr); }.journal-theme .overview-metric--primary{ grid-column: auto; } } /* 评审 1.0：报告控制器、阅卷反馈与五份报告趋势。 */ .journal-theme .report-shell{ margin-top: 0; }.journal-theme .mock-controller{ position: fixed; right: 22px; bottom: 22px; z-index: 12; width: 312px; color: #f7f5f2; background: #2e2a27; border: 1px solid #4a443f; border-radius: 14px; box-shadow: 0 16px 38px rgba(31, 29, 27, .2); overflow: hidden; }.journal-theme .mock-controller-head{ display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; padding: 0 17px; color: #f7f5f2; background: transparent; border: 0; font-size: 14px; font-weight: 800; text-align: left; }.journal-theme .mock-controller-head::after{ content: "⌄"; color: #aaa39d; font-size: 18px; transition: transform .18s ease; }.journal-theme .mock-controller.is-collapsed .mock-controller-head::after{ transform: rotate(180deg); }.journal-theme .mock-controller.is-collapsed .mock-controller-body{ display: none; }.journal-theme .mock-controller-body{ display: grid; gap: 14px; padding: 2px 17px 17px; }.journal-theme .mock-controller .field{ min-width: 0; }.journal-theme .mock-controller .field label{ display: block; margin-bottom: 7px; color: #aaa39d; font-size: 12px; font-weight: 700; }.journal-theme .mock-controller select{ min-height: 39px; color: #f8f6f3; background: #45403c; border-color: #68615b; }.journal-theme .mock-controller select:hover, .journal-theme .mock-controller select:focus{ background: #4b4541; border-color: #9a9189; box-shadow: none; }.journal-theme .mock-controller .select-wrap::after{ color: #c8c1ba; }.journal-theme .mock-controller .button{ width: 100%; min-height: 39px; }.journal-theme .mock-controller-note{ margin: -3px 0 0; color: #8f8882; font-size: 11px; line-height: 1.5; }.journal-theme .embedded-report-section{ margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }.journal-theme .embedded-section-head{ display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; }.journal-theme .embedded-section-head h2{ margin: 0 0 4px; font-size: 22px; }.journal-theme .embedded-section-head p{ margin: 0; color: var(--muted); font-size: 13px; }.journal-theme .history-card--link{ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; color: var(--ink); text-decoration: none; transition: border-color .18s ease, background .18s ease; }.journal-theme .history-card--link:hover{ background: #f4faeb; border-color: #b9d99e; }.journal-theme .history-card--link strong{ display: inline-flex; align-items: center; gap: 7px; color: var(--teal-dark); }.journal-theme .history-link-chevron{ font-size: 20px; font-weight: 400; line-height: .75; transform: translateY(-1px); }.journal-theme .trend-chart-wrap{ min-height: 320px; padding: 8px 6px 0; overflow-x: auto; background: linear-gradient(180deg, #fff 0%, #fbfdf9 100%); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }.journal-theme .trend-chart{ display: block; width: 100%; min-width: 760px; height: auto; }.journal-theme .trend-chart--compact{ min-width: 100%; }.journal-theme .trend-grid-line{ stroke: #e9eee6; stroke-width: 1; }.journal-theme .trend-line{ fill: none; stroke: var(--teal-dark); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }.journal-theme .trend-area{ fill: url(#trendArea); }.journal-theme .trend-point{ fill: var(--teal-dark); stroke: #fff; stroke-width: 3; }.journal-theme .trend-axis-label{ fill: var(--ink); font-size: 14px; font-weight: 800; }.journal-theme .trend-attempt-label{ fill: #7b8797; font-size: 12px; font-weight: 500; }.journal-theme .trend-empty{ display: grid; place-items: center; min-height: 280px; color: var(--muted); text-align: center; }.journal-theme .trend-diagnosis{ margin-top: 18px; }.journal-theme .trend-diagnosis .insights{ grid-template-columns: repeat(3, minmax(0, 1fr)); }.journal-theme .trend-diagnosis .insight{ min-height: 108px; }.journal-theme .toast{ right: 356px; } .journal-theme .trend-axis-label{ fill: var(--muted); font-size: 13px; font-weight: 400; } .journal-theme .trend-value-bg{ fill: #fff; stroke: #dce8d0; stroke-width: 1; } .journal-theme .trend-value-label{ fill: var(--ink); font-size: 14px; font-weight: 800; } @media (min-width: 761px) {.journal-theme .report-shell{ align-items: start; overflow: visible; }.journal-theme .sidebar{ position: sticky; top: calc(var(--nav-h) + 16px); z-index: 2; height: auto; max-height: calc(100vh - var(--nav-h) - 32px); max-height: calc(100dvh - var(--nav-h) - 32px); overflow-y: auto; border-bottom-left-radius: 5px; }.journal-theme .question-tabs{ position: sticky; top: calc(var(--nav-h) + 16px); z-index: 3; background: var(--paper); box-shadow: 0 -16px 0 var(--paper), 0 12px 18px -18px rgba(31,45,56,.38); } } @media (max-width: 1050px) {.journal-theme .trend-diagnosis .insights{ grid-template-columns: 1fr; } } @media (max-width: 760px) {.journal-theme .content{ padding-bottom: 92px; }.journal-theme .sidebar{ position: static; height: auto; max-height: none; }.journal-theme .mock-controller{ right: 8px; bottom: 8px; width: calc(100% - 16px); max-height: calc(100vh - 16px); overflow-y: auto; border-radius: 10px; }.journal-theme .mock-controller:not(.is-collapsed){ max-height: min(520px, calc(100vh - 16px)); }.journal-theme .mock-controller-head{ min-height: 46px; }.journal-theme .history-cards{ grid-template-columns: 1fr 1fr; }.journal-theme .trend-chart-wrap{ min-height: 265px; }.journal-theme .trend-chart{ min-width: 650px; }.journal-theme .toast{ right: 10px; bottom: 66px; left: 10px; max-width: none; } } @media (max-width: 420px) {.journal-theme .history-cards{ grid-template-columns: 1fr; } } /* 阅卷反馈与全页信息层级：控制在四级字号，避免后续模块各自放大。 */ html{ font-synthesis: none; line-break: strict; }.journal-theme{ font-feature-settings: "liga" 1, "calt" 1; }.journal-theme h1, .journal-theme h2, .journal-theme h3{ text-wrap: balance; }.journal-theme p{ text-wrap: pretty; }.journal-theme .score-line, .journal-theme .overview-metric-value, .journal-theme .diag-value-line, .journal-theme .data-table, .journal-theme .history-card, .journal-theme .trend-chart, .journal-theme .question-modal-counter{ font-variant-numeric: tabular-nums; }.journal-theme .trend-chart-wrap, .journal-theme .table-scroll, .journal-theme .question-tabs, .journal-theme .nav{ touch-action: pan-x; }.journal-theme #overview-view h1, .journal-theme #questions-view h1, .journal-theme #history-view h1{ font-size: 31px; font-weight: 800; line-height: 1.3; }.journal-theme .heading{ margin-bottom: 24px; }.journal-theme .panel-head h3{ font-size: 18px; line-height: 1.4; }.journal-theme .panel-head .small{ margin-top: 3px; font-size: 13px; line-height: 1.65; }.journal-theme .embedded-report-section{ margin-top: 32px; padding-top: 30px; }.journal-theme .embedded-section-head{ align-items: center; gap: 12px; margin-bottom: 21px; }.journal-theme .embedded-section-head h2{ margin-bottom: 3px; font-size: 23px; line-height: 1.4; }.journal-theme .embedded-section-head p{ font-size: 14px; line-height: 1.65; }.journal-theme .part-diagnosis-panel .data-table th{ font-size: 13px; }.journal-theme .part-diagnosis-panel .data-table td{ font-size: 15px; line-height: 1.6; }.journal-theme #history-view .history-card label, .journal-theme #history-view .history-card small{ font-size: 14px; line-height: 1.5; }.journal-theme #history-view .history-card strong{ font-size: 26px; line-height: 1.2; }.journal-theme .trend-diagnosis .panel-head h3{ font-size: 19px; }.journal-theme .trend-diagnosis .panel-head .small{ font-size: 14px; }.journal-theme .trend-diagnosis .insight{ min-height: 126px; padding: 17px 16px; }.journal-theme .trend-diagnosis .insight:first-child{ background: #f4faeb; border-color: #d3e5be; }.journal-theme .trend-diagnosis .insight strong{ font-size: 16px; line-height: 1.45; }.journal-theme .trend-diagnosis .insight p{ margin-top: 7px; font-size: 14px; line-height: 1.75; }.journal-theme .question-modal-kicker{ font-size: 13px; line-height: 1.5; }.journal-theme .question-modal-title{ font-size: 20px; line-height: 1.45; }.journal-theme .question-structure-head strong{ font-size: 15px; }.journal-theme .question-structure-tag, .journal-theme .modal-material-caption, .journal-theme .modal-answer-label{ font-size: 13px; }.journal-theme .modal-material-text{ font-size: 15px; line-height: 1.85; }.journal-theme .modal-prompt{ font-size: 16px; line-height: 1.8; }.journal-theme .modal-option-text{ font-size: 15px; line-height: 1.65; }.journal-theme .modal-answer-value{ font-size: 17px; line-height: 1.75; }.journal-theme .modal-explanation{ font-size: 15px; line-height: 1.85; }.journal-theme .question-modal.is-writing-review .modal-explanation{ color: #405b43; background: #f4faeb; border-color: #c9dfb1; } @media (max-width: 760px) {.journal-theme #overview-view h1, .journal-theme #questions-view h1, .journal-theme #history-view h1{ font-size: 22px; }.journal-theme .embedded-section-head{ align-items: flex-start; }.journal-theme .embedded-section-head h2{ font-size: 21px; }.journal-theme .panel-head h3{ font-size: 17px; }.journal-theme .trend-diagnosis .insight{ min-height: 0; }.journal-theme .question-modal-title{ font-size: 18px; } } @media (max-width: 560px) {.journal-theme .history-cards{ grid-template-columns: minmax(0, 1fr); } }.journal-theme .review-summary-panel{ margin-top: 18px; overflow: hidden; }.journal-theme .review-summary-panel .panel-body, .journal-theme .stage-review-panel .panel-body{ padding: 17px; }.journal-theme .review-card-list{ display: block; }.journal-theme .review-card{ margin: 0; padding: 14px 2px; color: #34475b; font-size: 15px; line-height: 1.8; }.journal-theme .review-card + .review-card{ border-top: 1px solid var(--line); }.journal-theme .review-card-label{ color: var(--ink); font-size: inherit; font-weight: 800; }.journal-theme .review-card-body{ color: inherit; font-size: inherit; }.journal-theme .stage-review-panel{ margin-top: 18px; }.journal-theme .stage-review-panel .panel-head h3{ font-size: 19px; }.journal-theme .stage-review-panel .panel-head .small{ font-size: 14px; } @media (max-width: 760px) {.journal-theme .review-summary-panel .panel-body, .journal-theme .stage-review-panel .panel-body{ padding: 14px; }.journal-theme .review-card{ padding: 13px 0; font-size: 14px; line-height: 1.75; } }.journal-theme { background: var(--surface-2); } /* 浅底衬托白卡片；原先落在 html 上，会连外壳区域一起盖掉 */.journal-theme{ color: var(--ink); background: var(--paper-2); font-family: var(--sans); font-size: 14px; line-height: 1.65; -webkit-font-smoothing: antialiased; }.journal-theme ::selection{ color: var(--paper); background: var(--seal); }.journal-theme button, .journal-theme select{ font-family: inherit; }.journal-theme button:focus-visible, .journal-theme select:focus-visible, .journal-theme a:focus-visible{ outline: 2px solid var(--seal); outline-offset: 2px; }.journal-theme .journal-site-header{ top: 0; z-index: 10; min-height: 72px; padding: 0 max(28px, calc((100% - 1280px) / 2)); background: color-mix(in srgb, var(--paper) 94%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }.journal-theme .brand{ gap: 12px; }.journal-theme .brand-logo{ display: block; width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; }.journal-theme .brand-mark{ width: 38px; height: 38px; color: var(--paper); background: var(--seal); border-radius: 3px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35), inset 0 0 0 4px var(--seal); font-family:var(--font); font-size: 20px; font-weight: 700; }.journal-theme .brand-name{ font-family: var(--serif); font-size: 23px; font-weight: 600; letter-spacing: -.01em; }.journal-theme .brand-sub{ color: var(--ink-3); border-left-color: var(--line); font-size: 13px; }.journal-theme .journal-report-context{ color: var(--ink-3); font-size: 12px; letter-spacing: .06em; }.journal-theme .button{ min-height: 44px; padding: 0 20px; border-radius: 6px; font-size: 13px; letter-spacing: .03em; transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }.journal-theme .button--teal{ color: var(--paper); background: var(--seal); border-color: var(--seal); box-shadow: 0 1px 0 rgba(133,25,43,.38); }.journal-theme .button--teal:hover{ background: var(--seal-dark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(163,32,53,.22); }.journal-theme .journal-cta-arrow{ margin-left: 5px; font-size: 16px; font-weight: 400; }.journal-theme .page{ width: var(--container); margin:0 auto;padding:36px 0 64px}.journal-theme .report-shell{ grid-template-columns: 188px minmax(0, 1fr); min-height: 850px; margin-top: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; }.journal-theme .sidebar{ padding: 28px 16px; background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); border-right: 1px solid var(--line); }.journal-theme .sidebar-title{ padding: 0 12px 18px; color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }.journal-theme .nav{ gap: 6px; }.journal-theme .nav button{ min-height: 44px; padding: 10px 13px; color: var(--ink-2); background: transparent; border: 1px solid transparent; border-radius: 6px; font-weight: 600; }.journal-theme .nav button::before{ display: none; }.journal-theme .nav button:hover{ color: var(--seal); background: var(--seal-tint); border-color: color-mix(in srgb, var(--seal) 22%, transparent); }.journal-theme .nav button.active{ color: var(--paper); background: var(--ink); border-color: var(--ink); }.journal-theme .content{ padding: 38px 40px 52px; }.journal-theme .heading{ margin-bottom: 26px; }.journal-theme .eyebrow{ display: flex; align-items: center; gap: 12px; margin: 0 0 13px; color: var(--seal); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }.journal-theme .eyebrow::after{ content: ""; width: 48px; height: 1px; background: var(--seal); opacity: .4; }.journal-theme h1, .journal-theme h2, .journal-theme h3{ color: var(--ink); }.journal-theme h1{ margin-bottom: 9px; font-family: var(--serif); font-size: clamp(30px, 3.2vw, 42px); font-weight: 500; line-height: 1.15; letter-spacing: -.018em; }.journal-theme .meta{ color: var(--ink-3); font-size: 13px; }.journal-theme .report-attempt-meta{ display: inline-flex; flex: 0 0 auto; align-items: center; gap: 20px; max-width: 100%; white-space: nowrap; }.journal-theme #reportAttempt, .journal-theme #reportSubmit, .journal-theme .report-paper-id{ white-space: nowrap; }.journal-theme .report-paper-id{ font-variant-numeric: tabular-nums; }.journal-theme .muted{ color: var(--ink-3); }.journal-theme .overview-metrics{ grid-template-columns: minmax(390px, 1.25fr) minmax(220px, .72fr) minmax(280px, .9fr); gap: 16px; margin-bottom: 22px; }.journal-theme .overview-metric{ min-height: 124px; padding: 20px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }.journal-theme .overview-metric--primary{ background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--seal); }.journal-theme .overview-metric label{ color: var(--ink-3); font-size: 13px; }.journal-theme .overview-metric-value{ margin-top: 10px; }.journal-theme .overview-metric-value strong{ font-family: var(--serif); font-size: 34px; font-weight: 600; }.journal-theme .overview-metric--primary .overview-metric-value strong, .journal-theme .overview-metric--primary .overview-metric-value strong.pass, .journal-theme .overview-metric--primary .overview-metric-value strong.warning{ color: var(--seal); }.journal-theme .overview-score-rate{ border-left-color: var(--line); }.journal-theme .overview-metric-note{ color: var(--gold); font-weight: 600; }/* 有题没批完时的口径说明。刻意做得比过级判定弱一档——它是限定条件不是结论，抢过结论的注意力反而让人以为分数出了问题。 */.overview-metric-note--partial{ color: var(--muted, #8a8f98); font-weight: 500; font-size: 12px; line-height: 1.5; margin-top: 2px; }.journal-theme .overview-metric-note.is-warning{ color: var(--seal-dark); }.journal-theme .overview-metric-note--muted{ color: var(--ink-3); font-weight: 400; }.journal-theme .overview-encouragement{ justify-content: flex-end; gap: 16px; padding: 0 4px 0 18px; }.journal-theme .overview-encouragement-copy strong{ color: var(--seal); font-family: var(--serif-sc, var(--serif)); font-size: 21px; font-weight: 600; }.journal-theme .overview-encouragement-copy span{ color: var(--ink-3); }.journal-theme .overview-encouragement img{ width: 104px; }.journal-theme .panel, .journal-theme .answer-card{ background: var(--paper); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; }.journal-theme .panel + .panel{ margin-top: 20px; }.journal-theme .panel-head, .journal-theme .answer-card-head{ padding: 17px 20px; background: var(--paper); border-bottom: 1px solid var(--line); }.journal-theme .panel-head h3, .journal-theme .answer-card-head h3{ font-family: var(--serif); font-size: 20px; font-weight: 600; }.journal-theme .panel-body{ padding: 20px; }.journal-theme .section-score-panel .section-bars{ gap: 28px; }.journal-theme .section-score-panel .section-listening{ --section-color: var(--rp-listening); }.journal-theme .section-score-panel .section-reading{ --section-color: var(--rp-reading); }.journal-theme .section-score-panel .section-writing{ --section-color: var(--rp-writing); }.journal-theme .bar-track, .journal-theme .progress-track{ height: 8px; background: var(--paper-3); border-radius: 2px; }.journal-theme .bar-fill{ background: var(--ink-2); border-radius: 2px; }.journal-theme .section-score-panel .bar-fill{ background: var(--section-color); }.journal-theme .bar-fill--orange{ background: var(--seal); }.journal-theme .embedded-report-section{ border-top-color: var(--line); }.journal-theme .data-table{ color: var(--ink); font-variant-numeric: tabular-nums; }.journal-theme .data-table th, .journal-theme .data-table td{ padding: 14px 12px; border-bottom-color: var(--line-soft); }.journal-theme .data-table th{ color: var(--ink-3); background: var(--paper-2); font-size: 12px; letter-spacing: .03em; }.journal-theme .data-table tbody tr:hover{ background: color-mix(in srgb, var(--seal-tint) 42%, var(--paper)); }.journal-theme .part-review-link{ color: var(--seal); }.journal-theme .part-review-link:hover, .journal-theme .part-review-link:focus-visible{ color: var(--seal-dark); background: var(--seal-tint); border-color: color-mix(in srgb, var(--seal) 26%, transparent); }.journal-theme .review-card{ color: var(--ink-2); }.journal-theme .review-card + .review-card{ border-top-color: var(--line-soft); }.journal-theme #questions-view h1{ font-size: clamp(30px, 3.2vw, 42px); }.journal-theme .question-tabs{ border-bottom: 1px solid var(--line); }.journal-theme .question-tab{ min-height: 48px; color: var(--ink-3); }.journal-theme .question-tab.active{ color: var(--seal); }.journal-theme .question-tab.active::after{ background: var(--seal); }.journal-theme .answer-card-head{ background: var(--paper-2); }.journal-theme .answer-card-body{ padding: 24px; }.journal-theme .part-title{ color: var(--ink-2); }.journal-theme .part + .part{ border-top-color: var(--line-soft); }.journal-theme .legend{ color: var(--ink-3); }.journal-theme .legend-dot, .journal-theme .answer-dot{ border-radius: 4px; }.journal-theme .answer-dot{ width: 40px; height: 40px; }.journal-theme .answer-dot--partial{ background: var(--rp-partial-split); border-color: #9aa28f; }.journal-theme .answer-dot.active{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--seal) 22%, transparent); }.journal-theme .history-cards{ gap: 14px; }.journal-theme .history-card{ display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 84px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }.journal-theme .history-card label, .journal-theme .history-card small{ color: var(--ink-3); }.journal-theme .history-card strong{ margin-top: 0; font-family: var(--serif); font-weight: 600; line-height: 1.15; }.journal-theme .history-card small{ margin-left: 4px; font-family: var(--font); font-size: 13px; font-weight: 400; }.journal-theme .history-card--link{ justify-content: center; }.journal-theme .history-card--link:hover{ background: var(--seal-tint); border-color: color-mix(in srgb, var(--seal) 40%, var(--line)); }.journal-theme .history-card--link strong{ font-family: var(--font); font-size: 17px; color: var(--seal); }.journal-theme #history-view .trend-panel-head{ align-items: flex-start; flex-direction: row; gap: 16px; }.journal-theme #historyTrendMeta{ display: block; max-width: 100%; margin-top: 3px; color: #8a93a3; font-size: 12px; line-height: 1.5; text-align: left; white-space: nowrap; }.journal-theme .trend-meta-link{ color: var(--seal); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--seal) 35%, transparent); }.journal-theme .trend-meta-link:hover, .journal-theme .trend-meta-link:focus-visible{ color: var(--seal-dark); border-bottom-color: var(--seal); }.journal-theme .trend-chart-wrap{ background: var(--paper); }.journal-theme .trend-grid-line{ stroke: var(--line-soft); }.journal-theme .trend-area{ fill: none; }.journal-theme .trend-line{ stroke: var(--trend-primary); filter: drop-shadow(0 2px 3px rgba(201,44,78,.12)); }.journal-theme .trend-point{ fill: var(--trend-primary); stroke: none; }.journal-theme .trend-value-bg{ stroke: var(--line); }.journal-theme .trend-axis-label, .journal-theme .trend-attempt-label{ fill: var(--ink-3); }.journal-theme .trend-diagnosis .insight, .journal-theme .trend-diagnosis .insight:first-child{ background: var(--paper-2); border-color: var(--line); }.journal-theme .insight::before{ background: var(--seal); }.journal-theme .insight--warn::before{ background: var(--gold); }.journal-theme .question-modal{ background: rgba(28,36,52,.5); }.journal-theme .question-modal-dialog{ border-left-color: var(--line); box-shadow: -18px 0 50px rgba(28,36,52,.16); }.journal-theme .question-modal-head{ background: var(--paper-2); border-top: 3px solid var(--seal); border-bottom-color: var(--line); }.journal-theme .question-modal-kicker, .journal-theme .question-modal-counter{ color: var(--seal); }.journal-theme .question-modal-title{ font-family: var(--serif); font-weight: 600; }.journal-theme .question-modal-close{ border-radius: 6px; }.journal-theme .question-structure-block{ border-color: var(--line); }.journal-theme .question-structure-head{ background: var(--paper-2); border-bottom-color: var(--line); }.journal-theme .modal-option, .journal-theme .modal-answer-card{ background: var(--paper); border-color: var(--line); }.journal-theme #modalYourAnswerCard.is-right, .journal-theme #modalYourAnswerCard.is-partial{ background: var(--rp-right-bg); border-color: #bfdc9f; }.journal-theme #modalYourAnswerCard.is-wrong{ background: var(--rp-wrong-bg); border-color: #f2b8b5; }.journal-theme #modalYourAnswerCard.is-ungraded{ background: #fff8ed; border-color: #efc58f; }.journal-theme .modal-option-label, .journal-theme .modal-word-chip{ color: var(--seal); background: var(--seal-tint); border-color: color-mix(in srgb, var(--seal) 30%, transparent); }.journal-theme .modal-nav:first-child{ color: var(--ink-2); }.journal-theme .modal-nav:last-child{ color: var(--paper); background: var(--seal); }.journal-theme .modal-nav:hover:not(:disabled){ background: var(--paper-2); }.journal-theme .modal-nav:last-child:hover:not(:disabled){ background: var(--seal-dark); }.journal-theme .mock-controller{ color: rgba(255,255,255,.82); background: var(--ink); border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent); border-radius: 8px; box-shadow: 0 16px 38px rgba(28,36,52,.24); }.journal-theme .mock-controller-head{ color: var(--paper); }.journal-theme .mock-controller .field label{ color: rgba(255,255,255,.58); }.journal-theme .mock-controller select{ color: var(--paper); background: #313a4d; border-color: rgba(255,255,255,.24); }.journal-theme .mock-controller select:hover, .journal-theme .mock-controller select:focus{ background: #3a4458; border-color: rgba(255,255,255,.5); }.journal-theme .mock-controller-note{ color: rgba(255,255,255,.46); }.journal-theme .toast{ background: var(--ink); } @media (min-width: 761px) {.journal-theme .sidebar{ top: calc(var(--nav-h) + 16px); height: auto; max-height: calc(100vh - var(--nav-h) - 32px); max-height: calc(100dvh - var(--nav-h) - 32px); } } @media (max-width: 1120px) {.journal-theme .overview-metrics{ grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr); }.journal-theme .overview-encouragement{ grid-column: 1 / -1; justify-content: flex-end; min-height: 92px; padding-right: 24px; } } @media (max-width: 760px) {.journal-theme .journal-site-header{ min-height: 62px; padding: 0 14px; }.journal-theme .brand{ min-width: 0; gap: 9px; }.journal-theme .brand-logo{ width: 38px; height: 38px; }.journal-theme .brand-mark{ width: 34px; height: 34px; font-size: 18px; }.journal-theme .brand-name{ font-size: 20px; white-space: nowrap; }.journal-theme .brand-sub, .journal-theme .journal-report-context{ display: none; }.journal-theme .button{ min-height: 44px; padding: 0 14px; }.journal-theme .page{ width: calc(100% - 24px); margin:0 auto;padding:16px 0 28px}.journal-theme .report-shell{ grid-template-columns: minmax(0, 1fr); min-height: 0; overflow: visible; }.journal-theme .sidebar{ position: sticky; top: 62px; z-index: 4; width: 100%; height: auto; max-height: none; padding: 8px; background: color-mix(in srgb, var(--paper) 95%, transparent); border-right: 0; border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }.journal-theme .sidebar-title{ display: none; }.journal-theme .nav{ display: grid; grid-template-columns: repeat(3, minmax(92px, 1fr)); gap: 6px; width: 100%; overflow-x: auto; }.journal-theme .nav button{ justify-content: center; min-height: 44px; padding: 9px 12px; text-align: center; white-space: nowrap; }.journal-theme .content{ padding: 26px 16px 96px; }.journal-theme .heading{ margin-bottom: 22px; }.journal-theme .eyebrow{ margin-bottom: 11px; }.journal-theme h1, .journal-theme #questions-view h1{ font-size: 30px; }.journal-theme .overview-metrics{ grid-template-columns: minmax(0, 1fr); gap: 12px; }.journal-theme .overview-metric{ min-height: 112px; padding: 18px; }.journal-theme .overview-encouragement{ grid-column: auto; justify-content: center; min-height: 102px; padding: 3px 6px; }.journal-theme .overview-encouragement img{ width: 92px; }.journal-theme .panel-head, .journal-theme .answer-card-head{ padding: 15px 16px; }.journal-theme .panel-body, .journal-theme .answer-card-body{ padding: 18px 15px; }.journal-theme .part-diagnosis-panel .data-table tbody tr{ background: var(--paper); border-color: var(--line); }.journal-theme .mock-controller{ border-radius: 8px; }.journal-theme .mock-controller.is-collapsed{ width: 190px; }.journal-theme .question-modal-head{ padding: 15px 16px; } } @media (max-width: 420px) {.journal-theme .top-actions .button{ font-size: 12px; }.journal-theme .content{ padding-right: 13px; padding-left: 13px; }.journal-theme .overview-score-rate{ width: 100%; margin: 8px 0 0; padding: 0; border-left: 0; }.journal-theme .overview-metric-value strong{ font-size: 32px; } }.journal-theme .report-status-badge{ display:inline-flex; align-items:center; min-height:27px; margin-top:12px; padding:0 10px; border:1px solid #e8c477; border-radius:999px; color:#946317; background:#fff8e8; font-size:12px; font-weight:800; letter-spacing:.02em; }.journal-theme .report-status-badge[hidden]{ display:none; }.journal-theme .overview-metric-value strong.is-generating{ font-size:28px; line-height:1.2; white-space:nowrap; }.journal-theme .bar-row.is-generating .bar-track{ background:repeating-linear-gradient(135deg,#f0eee6 0,#f0eee6 7px,#f8f7f2 7px,#f8f7f2 14px); }.journal-theme .bar-row.is-generating .bar-fill{ width:0 !important; }.journal-theme .bar-row.is-generating .bar-value{ color:#9a6a19; font-size:13px; } /* AI 评语只保留一张卡片和一段原文，不再用内部分割线模拟固定条目。 */ .journal-theme .ai-review-panel{ overflow: hidden; } .journal-theme .ai-review-panel .panel-head{ padding: 18px 18px 0; background: var(--paper); border-bottom: 0; } .journal-theme .ai-review-panel .panel-body{ padding: 10px 18px 19px; } .journal-theme .ai-review-panel .review-card-list{ display: block; } .journal-theme .ai-review-panel .review-card{ margin: 0; padding: 0; color: var(--ink-2); border: 0; font-size: 15px; line-height: 1.85; } .journal-theme .ai-review-panel .review-card + .review-card{ border-top: 0; } @media (max-width: 760px) { .journal-theme .ai-review-panel .panel-head{ padding: 16px 15px 0; } .journal-theme .ai-review-panel .panel-body{ padding: 9px 15px 17px; } .journal-theme .ai-review-panel .review-card{ font-size: 14px; line-height: 1.8; } } @media (max-width: 420px) { .journal-theme #overview-view .heading .meta{ font-size: 12px; line-height: 1.55; } } /* ── 成绩趋势：过级与否直接染在点上（2026-08-14）──────────────────── 原来画一条过级基准线让用户自己比高低，现在去掉线、改成给点上色： 已过级 = 品牌红（与折线同色，是这页的主色） 未过级 = #b65d16，与报告里「未过级」文案用的 .is-warning 同一个色—— 同一个概念在文字和图表上同色，用户才对得上。 不套用答对/答错的绿红：这里判的是"这次过没过"，不是单题对错， 借用对错色会让两个概念在同一页混成一个。 两套主题都用高特异性写死，不依赖层叠顺序。 */ .trend-point.is-pass{ fill: var(--trend-primary, #c92c4e); } .trend-point.is-fail{ fill: #b65d16; } .journal-theme .trend-point.is-pass{ fill: var(--trend-primary, #c92c4e); } .journal-theme .trend-point.is-fail{ fill: #b65d16; } .trend-value-label.is-pass, .journal-theme .trend-value-label.is-pass{ fill: var(--trend-primary, #c92c4e); } .trend-value-label.is-fail, .journal-theme .trend-value-label.is-fail{ fill: #b65d16; } /* 图例放在标题行，不放图里——图表区是横向可滚的，画在里面会跟着滚走 */ .journal-theme .trend-panel-head{ align-items: flex-start; flex-direction: row; } .journal-theme .trend-legend{ display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 12px; font-weight: 600; } .journal-theme .trend-legend-item{ display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .journal-theme .trend-legend-dot{ width: 9px; height: 9px; border-radius: 50%; flex: none; } .journal-theme .trend-legend-dot.is-pass{ background: var(--trend-primary, #c92c4e); } .journal-theme .trend-legend-dot.is-fail{ background: #b65d16; } @media (max-width: 760px) { .journal-theme #history-view .trend-panel-head{ flex-direction: column; gap: 8px; } } /* ═══════════════════════════════════════════════════════════════════════ 2026-08-18 · 按 Figma 改版（成绩总览 / 单题解析 / 历次成绩三屏） --------------------------------------------------------------------- 放在文件最后是因为上面积了三代旧皮肤的层层覆盖：与其逐条去改那些已经 互相压过一遍的规则，不如在末尾单起一层，同名同权时后写的赢。 规则只用官网 token（--red / --ink-* / --surface-* / --border*）， 分项三色取 hsk-report-theme.css 的 --rp-listening / -reading / -writing。 ═══════════════════════════════════════════════════════════════════════ */ /* ── 外壳：设计稿里报告不是一张卡 ────────────────────────────────────── 旧样式把「侧栏 + 正文」整个套进一张描边圆角卡里，侧栏和正文之间再补一条 竖分隔线。设计稿上这两样都没有：侧栏直接浮在页面底色（--surface-2 = #F9FAFB，与稿面一致）上，右边是一整块白，交界处不画线 —— 底色差本身 就是分界。去掉外框后整页只剩「底色 / 内容白」一层结构，"卡片"这个视觉 单位让给里面真正成组的内容（总分卡、分项卡、明细表、AI 分析）。 */ .journal-theme .report-shell{ background: transparent; border: 0; border-radius: 0; box-shadow: none; /* 761px 以上那条规则为了让侧栏能 sticky 把整行设成 align-items:start， 副作用是正文列也不再拉伸，白底只有内容那么高，短屏（单题解析）下面 会露出一截灰。改成只让侧栏 start，正文列照旧撑满行高。 */ align-items: stretch; } .journal-theme .content{ background: var(--surface); } /* 成绩总览元信息：次数 → 时刻 → 提交态 → ID，网页与手机同一条可折序列。 */ .journal-theme #overview-view .heading .meta{ display: block; } .journal-theme #overview-view .report-attempt-meta{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; width: 100%; max-width: 100%; white-space: normal; } .journal-theme #overview-view #reportAttempt, .journal-theme #overview-view #reportSubmit, .journal-theme #overview-view .report-paper-id{ white-space: nowrap; } /* ── 侧边导航：图标 + 文字，当前项深色实底 ──────────────────────────── 旧样式是「浅红底 + 左侧竖条」，当前项和悬停态只差一点底色深浅； 深色实底把当前项和其余两项拉开一整个明度级，扫一眼就知道在哪一屏。 */ .journal-theme .sidebar{ align-self: start; padding: 20px 12px; background: transparent; border-right: 0; } .journal-theme .nav{ display: grid; gap: 8px; } .journal-theme .nav button{ display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 13px; color: var(--ink-2); background: transparent; border: 0; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; line-height: 1.65; text-align: left; transition: color .16s ease, background .16s ease; } .journal-theme .nav button::before{ content: none; } .journal-theme .nav-icon{ flex: 0 0 auto; } .journal-theme .nav button:hover{ color: var(--ink); background: var(--surface-2); } .journal-theme .nav button.active, .journal-theme .nav button.active:hover{ color: #fff; background: var(--ink); } /* ── 本次总分卡 ────────────────────────────────────────────────────── */ .journal-theme .score-summary-card{ display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 20px; margin-bottom: 24px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } .journal-theme .score-summary-main{ display: flex; min-width: 0; flex-direction: column; } .journal-theme .score-summary-label{ margin: 0; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -.03em; } .journal-theme .score-summary-value{ display: flex; align-items: baseline; gap: 2px; margin: 10px 0 0; font-variant-numeric: tabular-nums; line-height: 1.05; } .journal-theme .score-summary-value strong{ color: var(--red); font-size: 44px; font-weight: 600; } .journal-theme .score-summary-value strong.is-pending{ font-size: 44px; letter-spacing: 0; } .journal-theme .score-summary-value span{ color: var(--ink); font-size: 28px; font-weight: 600; } .journal-theme .score-summary-card .overview-metric-note--partial{ margin: 8px 0 0; } .journal-theme .score-summary-pass{ display: none; } /* 刻度条：note 在上、竖线贯穿、气泡贴着柱条顶，三者共用 --pos 这一条坐标轴。 */ .journal-theme .score-gauge{ position: relative; height: 150px; margin-top: 6px; } /* 说明块贴着过线线展开，宽度用 calc 卡在卡片边界内 —— 窄屏上过线线可能已经很靠右，固定宽度会把文字顶出卡片。 */ .journal-theme .score-gauge-note{ position: absolute; top: 2px; left: var(--pos); margin-left: 16px; width: min(250px, 46%); max-width: calc(100% - var(--pos) - 16px); } .journal-theme .score-gauge-note.is-flip{ margin-left: 0; margin-right: 16px; max-width: calc(var(--pos) - 16px); transform: translateX(calc(-100% - 16px)); text-align: right; } .journal-theme .score-gauge-note-title{ margin: 0; color: var(--ink); font-size: 15px; font-weight: 700; } .journal-theme .score-gauge-note-desc{ margin: 8px 0 0; color: var(--ink); font-size: 14px; line-height: 1.45; } .journal-theme .score-gauge-note-desc b{ color: var(--red); font-weight: 600; } .journal-theme .score-gauge-line{ position: absolute; top: 46px; bottom: 8px; left: var(--pos); width: 0; border-left: 1.5px dashed color-mix(in srgb, var(--red) 55%, transparent); } .journal-theme .score-gauge-line::before{ content: ""; position: absolute; top: -5px; left: -5px; width: 9px; height: 9px; background: var(--red); border-radius: 50%; } /* 气泡：常驻标签而不是 hover 提示 —— 光标停在哪个分段上是本卡最要说的一件事。 */ .journal-theme .score-gauge-flag{ position: absolute; bottom: 56px; left: var(--pos); transform: translateX(-50%); padding: 4px 8px; background: var(--red); border-radius: var(--radius-sm); box-shadow: 0 4px 4px rgba(0,0,0,.02), 0 0 1px rgba(0,0,0,.12); white-space: nowrap; } .journal-theme .score-gauge-flag b{ color: #fff; font-size: 14px; font-weight: 500; } .journal-theme .score-gauge-flag::after{ content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--red); border-bottom: 0; } .journal-theme .score-gauge-bar{ position: absolute; right: 0; bottom: 14px; left: 0; display: flex; gap: 6px; height: 30px; } .journal-theme .score-gauge-bar i{ flex: 1 1 0; min-width: 0; background: var(--surface-3); border-radius: 2px; transform: skewX(-12deg); } .journal-theme .score-gauge-bar i.is-on{ background: var(--red); } .journal-theme .score-gauge-cursor{ position: absolute; top: -12px; bottom: -12px; left: var(--pos); transform: translateX(-50%); width: 21px; background: var(--red); border: 4px solid var(--surface); border-radius: 24px; } /* 右栏两个比率：数字给结论，环形给「离满还有多少」。 */ .journal-theme .score-summary-side{ display: flex; flex-direction: column; justify-content: space-evenly; gap: 18px; padding: 6px 12px; } .journal-theme .score-summary-side .score-ratio + .score-ratio{ padding-top: 14px; border-top: 1px solid var(--border); } .journal-theme .score-ratio-label{ margin: 0; color: var(--ink); font-size: 16px; font-weight: 700; } .journal-theme .score-ratio-label span{ color: var(--ink-2); font-size: 12px; font-weight: 400; } .journal-theme .score-ratio-value{ display: flex; align-items: center; gap: 12px; margin-top: 12px; } .journal-theme .score-ratio-value strong{ color: var(--ink); font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; } .journal-theme .score-ratio-donut{ display: inline-flex; flex: 0 0 auto; } .journal-theme .score-ratio-donut .donut-track{ stroke: var(--surface-3); } .journal-theme .score-ratio-donut .donut-value{ stroke: var(--ink); } /* ── 区块标题：标题在卡外，卡片本身不再带一条头部分隔线 ────────────── */ .journal-theme .overview-block{ margin-bottom: 24px; } .journal-theme .overview-block-title{ margin: 0 0 16px; color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.03em; } /* ── 分项成绩三卡 ──────────────────────────────────────────────────── */ .journal-theme .section-cards{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .journal-theme .section-card{ display: flex; flex-direction: column; gap: 26px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } .journal-theme .section-card.section-listening{ --section-color: var(--rp-listening); } .journal-theme .section-card.section-reading{ --section-color: var(--rp-reading); } .journal-theme .section-card.section-writing{ --section-color: var(--rp-writing); } .journal-theme .section-card-head{ display: flex; align-items: flex-start; gap: 12px; } .journal-theme .section-card-icon{ display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; color: #fff; background: var(--section-color, var(--ink-3)); border-radius: 50%; } .journal-theme .section-card-text{ min-width: 0; } .journal-theme .section-card-name{ margin: 0; color: #434343; font-size: 22px; font-weight: 600; line-height: 1.15; } .journal-theme .section-card-score{ display: flex; align-items: baseline; gap: 4px; margin: 10px 0 0; font-variant-numeric: tabular-nums; } .journal-theme .section-card-score strong{ color: var(--section-color, var(--ink)); font-size: 32px; font-weight: 600; line-height: 1.1; } .journal-theme .section-card-score span{ color: var(--ink-4); font-size: 22px; } .journal-theme .section-card-score em{ color: var(--rp-ungraded-2); font-size: 24px; font-style: normal; font-weight: 700; } .journal-theme .section-card-track{ height: 14px; background: var(--surface-3); border-radius: 24px; overflow: hidden; } .journal-theme .section-card-fill{ height: 100%; background: var(--section-color, var(--ink-3)); border-radius: inherit; } .journal-theme .section-card.is-generating .section-card-fill{ width: 0 !important; } /* ── 分部分反馈表 ──────────────────────────────────────────────────── */ .journal-theme .part-diagnosis-panel{ background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .journal-theme .part-diagnosis-panel .data-table th{ padding: 14px 10px; color: var(--ink-2); background: var(--surface-2); border-bottom: 1px solid var(--surface-2); font-size: 16px; font-weight: 700; letter-spacing: 0; } .journal-theme .part-diagnosis-panel .data-table td{ padding: 15px 10px; border-bottom: 1px solid #f1f2f4; font-size: 14px; font-weight: 700; } .journal-theme .part-diagnosis-panel .data-table tbody tr:nth-child(even){ background: rgba(17,24,39,.02); } .journal-theme .part-diagnosis-panel .data-table tbody tr:hover{ background: color-mix(in srgb, var(--red-light) 55%, transparent); } /* 考试部分列：分项与部分已合成一行文案，不再用合并单元格。 */ .journal-theme .part-section-cell{ width: 168px; vertical-align: middle; } .journal-theme .part-section-cell.section-listening{ --section-color: var(--rp-listening); } .journal-theme .part-section-cell.section-reading{ --section-color: var(--rp-reading); } .journal-theme .part-section-cell.section-writing{ --section-color: var(--rp-writing); } .journal-theme .part-section-cell strong{ display: block; color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: .39px; } .journal-theme .part-score-cell{ width: 240px; white-space: nowrap; } .journal-theme .part-score-cell strong{ display: inline-block; vertical-align: middle; } /* 得分率药丸：进度条给量级，末端徽章给准确值。徽章描一圈白边，压在条上也读得出。 0% 时徽章贴在灰条左端（批改中稿面如此），100% 贴右端，避免 translate(-50%) 把字裁掉一半。 */ .journal-theme .part-rate-bar{ position: relative; display: inline-block; vertical-align: middle; width: 110px; height: 15px; margin-left: 16px; background: #e0e0e0; border-radius: 24px; } .journal-theme .part-rate-bar i{ display: block; width: var(--rate, 0%); height: 100%; background: var(--section-color, var(--ink-2)); border-radius: 24px; } .journal-theme .part-rate-bar em{ /* 徽章中心夹在 [半宽, 条宽-半宽] 内，两端都不外溢： 低分率不会左溢盖住同一格的「得分」数字；高分率也不会因 translate(-50%) 把右半截探出条外、反超贴右端的 100%（93% 看起来比 100% 还靠右）。 25px ≈ 最宽徽章「93.1%」的半宽，用它做夹取边界对任意位数都安全。 */ position: absolute; top: 50%; left: clamp(25px, var(--rate, 0%), calc(100% - 25px)); transform: translate(-50%, -50%); padding: 4px 6px; color: #fff; background: var(--section-color, var(--ink-2)); border: 2px solid var(--surface); border-radius: 24px; font-size: 13px; font-style: normal; font-weight: 600; line-height: 1; white-space: nowrap; } .journal-theme .part-rate-bar.is-start em{ left: 0; transform: translate(0, -50%); } .journal-theme .part-rate-bar.is-end em{ left: 100%; transform: translate(-100%, -50%); } .journal-theme .part-diagnosis-panel tr.section-listening{ --section-color: var(--rp-listening); } .journal-theme .part-diagnosis-panel tr.section-reading{ --section-color: var(--rp-reading); } .journal-theme .part-diagnosis-panel tr.section-writing{ --section-color: var(--rp-writing); } /* 合计行不属于任何分项，用品牌红：它是整卷的结论。 */ .journal-theme .part-diagnosis-summary{ --section-color: var(--red); background: var(--surface-2); } .journal-theme .part-diagnosis-summary .part-rate-bar i{ background: var(--red-mid, #ffdde2); } .journal-theme .part-diagnosis-summary td{ border-bottom: 0; } .journal-theme .part-total-cell strong{ color: var(--ink); font-size: 16px; letter-spacing: .39px; } /* 「错题解析」默认只有文字，hover 才浮出底色 —— 一屏里有十个，十个按钮会盖过数据本身。 */ .journal-theme .part-diagnosis-panel .part-review-link{ min-height: 34px; padding: 5px 9px; color: var(--ink); background: transparent; border: 0; border-radius: 4px; font-size: 15px; font-weight: 700; } .journal-theme .part-diagnosis-panel .part-review-link:hover, .journal-theme .part-diagnosis-panel .part-review-link:focus-visible{ color: var(--ink); background: var(--border); border: 0; } .journal-theme .part-diagnosis-panel .part-review-link:disabled, .journal-theme .part-diagnosis-panel .part-review-link.is-disabled{ color: var(--ink-3); cursor: not-allowed; } .journal-theme .part-diagnosis-panel .part-review-link:disabled:hover, .journal-theme .part-diagnosis-panel .part-review-link.is-disabled:hover, .journal-theme .part-diagnosis-panel .part-review-link:disabled:focus-visible, .journal-theme .part-diagnosis-panel .part-review-link.is-disabled:focus-visible{ color: var(--ink-3); background: transparent; } .journal-theme .part-diagnosis-panel .part-review-link .chevron{ font-size: 15px; } .journal-theme .exam-part-label{ font-weight: 700; } .journal-theme .exam-part-section::after{ content: " "; } :lang(zh) .journal-theme .exam-part-section::after, :lang(ja) .journal-theme .exam-part-section::after{ content: none; } /* ── AI 分析：粉底描边，与页面上其他白卡区分开 ────────────────────── */ .journal-theme .ai-insight-panel{ padding: 13px; background: rgba(255,240,242,.5); border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); border-radius: 12px; } .journal-theme .ai-insight-head{ display: flex; align-items: center; gap: 6px; } .journal-theme .ai-insight-badge{ display: inline-flex; flex: 0 0 auto; color: var(--red); } .journal-theme .ai-insight-head h3{ margin: 0; color: var(--ink); font-size: 19px; font-weight: 600; letter-spacing: -.03em; } .journal-theme .ai-insight-body{ padding-left: 30px; } .journal-theme .ai-insight-list{ margin: 8px 0 0; padding: 0; list-style: none; } .journal-theme .ai-insight-list li{ position: relative; padding-left: 16px; color: var(--ink-2); font-size: 15px; line-height: 1.8; } .journal-theme .ai-insight-list li + li{ margin-top: 2px; } .journal-theme .ai-insight-list li::before{ content: ""; position: absolute; top: 11px; left: 0; width: 6px; height: 6px; background: var(--red); border-radius: 50%; } /* ── 历次成绩 ──────────────────────────────────────────────────────── */ .journal-theme #history-view .history-cards{ gap: 14px; margin-bottom: 18px; } .journal-theme #history-view .history-card{ padding: 17px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .journal-theme #history-view .history-card label{ display: flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: 14px; font-weight: 400; } .journal-theme .history-card-icon{ display: inline-flex; flex: 0 0 auto; color: var(--ink-3); } .journal-theme #history-view .history-card strong{ margin-top: 6px; color: var(--ink); font-size: 26px; font-weight: 600; } .journal-theme #history-view .history-card small{ color: var(--ink-3); font-size: 14px; font-weight: 400; } .journal-theme #history-view .history-card--link strong{ color: var(--ink); font-size: 20px; font-weight: 700; } .journal-theme .history-link-chevron{ display: inline-flex; color: var(--ink); } .journal-theme #history-view .panel{ border-radius: 12px; overflow: hidden; } .journal-theme #history-view .trend-panel-head{ padding: 17px 20px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .journal-theme #history-view .trend-panel-head h3{ font-size: 20px; font-weight: 600; letter-spacing: -.03em; } .journal-theme #history-view .trend-panel-head .small{ display: block; margin-top: 4px; color: var(--ink); font-size: 13px; } .journal-theme .trend-legend-dot{ width: 11px; height: 11px; border-radius: 2px; } .journal-theme .trend-legend-dot.is-pass{ background: var(--red); } .journal-theme .trend-legend-dot.is-fail{ background: var(--ink-3); } .journal-theme .trend-legend{ color: var(--ink); font-size: 12px; } .journal-theme .trend-area{ fill: url(#trendArea); } .journal-theme .trend-line{ fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: none; } .journal-theme .trend-point{ fill: var(--red); stroke: none; } .journal-theme .trend-point.is-fail{ fill: var(--ink-3); } .journal-theme .trend-value-bg{ fill: var(--red); stroke: none; } .journal-theme .trend-value-bg.is-fail{ fill: var(--ink-3); } .journal-theme .trend-value-label, .journal-theme .trend-value-label.is-pass, .journal-theme .trend-value-label.is-fail{ fill: #fff; font-size: 14px; font-weight: 700; } .journal-theme .trend-grid-line{ stroke: var(--border); } .journal-theme #history-view .ai-insight-panel{ margin-top: 18px; } @media (max-width: 1050px){ .journal-theme .score-summary-card{ grid-template-columns: minmax(0, 1fr); } .journal-theme .score-summary-side{ flex-direction: row; padding: 0; } .journal-theme .score-summary-side .score-ratio{ flex: 1 1 0; } .journal-theme .score-summary-side .score-ratio + .score-ratio{ padding: 0 0 0 16px; border-top: 0; border-left: 1px solid var(--border); } .journal-theme .section-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } } @media (max-width: 1024px) { /* 手机与平板不能作答，但仍需返回列表的入口。 */ .journal-theme #overview-view #replayBtn{ display: none; } } html.is-non-pc-exam .journal-theme #overview-view #replayBtn{ display: none; } @media (max-width: 760px){ /* 窄屏侧栏变成顶部三等分页签（页内样式已把 .nav 设成三列栅格）： 这里只改按钮内部，MUST NOT 把 display 改回 flex —— 那样三个按钮 各占 100% 宽，后两个会被挤出屏幕，只剩当前项看得见。 */ .journal-theme .sidebar{ padding: 0; background: var(--surface); border-bottom: 0; box-shadow: none; } .journal-theme .nav{ display: grid; gap: 0; } .journal-theme .nav button{ position: relative; display: flex; flex: 1 1 0; align-items: center; justify-content: center; min-width: 0; width: 100%; min-height: 61px; height: auto; padding: 8px 4px; color: var(--ink-3); background: transparent; border: 0; border-radius: 0; font-size: 16px; font-weight: 500; line-height: 20px; white-space: normal; } .journal-theme .nav button > span{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; white-space: normal; text-align: center; line-height: 20px; } .journal-theme .nav button:hover{ color: var(--ink); background: transparent; } .journal-theme .nav button.active, .journal-theme .nav button.active:hover{ color: var(--red); background: transparent; border-color: transparent; } .journal-theme .nav button.active::after{ content: ""; position: absolute; bottom: 0; left: 50%; width: 52px; height: 2px; background: var(--red); border-radius: 24px; transform: translateX(-50%); } .journal-theme .nav .nav-icon{ display: none; } .journal-theme #overview-view #replayBtn{ display: none; } .journal-theme #overview-view .report-attempt-meta{ gap: 6px; } /* 手机成绩总览 Figma 619:14639（已批改完成）：总分卡上白下灰， 分数 44 红 / 满分 24，过线说明改写在分数下，刻度条收成 76px。 */ .journal-theme .score-summary-card{ overflow: hidden; padding: 0; border-width: .5px; border-radius: var(--radius-sm); } .journal-theme .score-summary-main{ padding: 16px; } .journal-theme .score-summary-value{ gap: 4px; margin-top: 8px; } .journal-theme .score-summary-value strong{ font-size: 44px; line-height: 44px; } .journal-theme .score-summary-value span{ font-size: 24px; line-height: 24px; } .journal-theme .score-summary-pass{ display: block; margin: 8px 0 0; color: var(--ink-3); font-size: 13px; font-weight: 400; line-height: 19px; } .journal-theme .score-summary-pass b{ color: var(--red); font-weight: 600; } .journal-theme .content{ background: transparent; padding: 16px 16px 32px; } .journal-theme .score-gauge{ height: 76px; margin-top: 0; } .journal-theme .score-gauge-note{ display: none; } .journal-theme .score-gauge-line{ display: none; } .journal-theme .score-gauge-flag{ bottom: 36px; } .journal-theme .score-gauge-bar{ height: 18px; bottom: 8px; gap: 3px; } .journal-theme .score-gauge-cursor{ top: -6px; bottom: auto; width: 9px; height: 27px; border-width: 2px; } .journal-theme .score-summary-side{ flex-direction: column; gap: 8px; padding: 16px 0; background: var(--surface-3, #f3f4f6); } .journal-theme .score-summary-side .score-ratio{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; } .journal-theme .score-summary-side .score-ratio + .score-ratio{ padding: 8px 16px 0; border-top: .5px solid var(--border); border-left: 0; } .journal-theme .score-ratio-label{ display: flex; flex-direction: column; gap: 0; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 21px; } .journal-theme .score-ratio-label [data-i18n]{ color: var(--ink); font-size: 14px; font-weight: 700; } .journal-theme .score-ratio-label #completionDetail, .journal-theme .score-ratio-label #correctDetail{ color: var(--ink-3); font-size: 12px; font-weight: 400; } .journal-theme .score-ratio-value{ gap: 8px; margin-top: 0; } .journal-theme .score-ratio-value strong{ font-size: 20px; line-height: 26px; } .journal-theme .score-ratio-donut svg{ width: 22px; height: 22px; } .journal-theme .section-cards{ grid-template-columns: minmax(0, 1fr); gap: 8px; } .journal-theme .section-card{ gap: 8px; padding: 16px; border-width: .5px; border-radius: var(--radius-sm); } .journal-theme .section-card-head{ align-items: center; } .journal-theme .section-card-icon{ width: 44px; height: 44px; } .journal-theme .section-card-name{ font-size: 14px; font-weight: 700; line-height: 21px; } .journal-theme .section-card-score{ margin: 0; } .journal-theme .section-card-score strong{ font-size: 20px; line-height: 26px; } .journal-theme .section-card-score span{ font-size: 14px; } .journal-theme .section-card-track{ height: 12px; } .journal-theme .overview-block{ margin-bottom: 24px; } .journal-theme .overview-block-title{ margin-bottom: 8px; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: 0; } .journal-theme .ai-insight-panel{ padding: 16px; background: rgba(255,240,242,.7); border-width: .5px; border-radius: var(--radius-sm); } .journal-theme .ai-insight-head{ gap: 8px; } .journal-theme .ai-insight-head h3{ font-size: 16px; line-height: 24px; } .journal-theme .ai-insight-body{ padding-left: 0; } .journal-theme .ai-insight-list{ margin-top: 12px; } .journal-theme .ai-insight-list li{ font-size: 14px; line-height: 1.7; } .journal-theme .part-diagnosis-panel{ position: relative; border-width: .5px; border-radius: var(--radius-sm); } /* 表头右侧淡出：提示后面还有正确题数 / 正确率 / 错题解析，页面本身不横滑。 */ .journal-theme .part-diagnosis-panel::after{ content: ""; position: absolute; top: 0; right: 0; z-index: 4; width: 72px; height: 50px; background: linear-gradient(to left, var(--surface-2) 12%, transparent); pointer-events: none; } /* 成绩明细保持真实表格：第一列固定 108px，其余列在 .table-scroll 内横滑。 不能再把行改成 grid 字段卡片，否则 sticky 列和表头都会消失。 列宽与 max-width 必须锁死：再放到 160 会盖住得分列。 */ .journal-theme .part-diagnosis-panel .table-scroll{ width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x; } .journal-theme .part-diagnosis-panel .data-table{ display: table; width: max-content; min-width: 820px; border-collapse: separate; border-spacing: 0; } .journal-theme .part-diagnosis-panel .data-table thead{ display: table-header-group; } .journal-theme .part-diagnosis-panel .data-table tbody, .journal-theme .part-diagnosis-panel .data-table tfoot{ display: table-row-group; } .journal-theme .part-diagnosis-panel .data-table tr{ display: table-row; } .journal-theme .part-diagnosis-panel .data-table th, .journal-theme .part-diagnosis-panel .data-table td{ display: table-cell; padding: 14px 12px; border-bottom: 1px solid #f1f2f4; text-align: center; white-space: nowrap; } .journal-theme .part-diagnosis-panel .data-table th{ font-size: 16px; } .journal-theme .part-diagnosis-panel .data-table td::before{ content: none; display: none; } .journal-theme .part-diagnosis-panel .data-table th:first-child, .journal-theme .part-diagnosis-panel .data-table td:first-child{ position: sticky; left: 0; z-index: 2; box-sizing: border-box; width: 108px; min-width: 108px; max-width: 108px; padding: 10px 8px; overflow: hidden; overflow-wrap: normal; word-break: normal; white-space: normal; text-align: center; font-size: 12px; font-weight: 700; line-height: 16px; max-height: 52px; vertical-align: middle; box-shadow: 4px 0 6px -6px rgba(17, 24, 39, .18); } .journal-theme .part-diagnosis-panel .part-section-cell .exam-part-label, .journal-theme .part-diagnosis-panel .part-total-cell strong{ display: flex; flex-direction: column; align-items: center; gap: 0; font-size: 12px; letter-spacing: 0; line-height: 16px; } .journal-theme .part-diagnosis-panel .exam-part-section::after{ content: none; } .journal-theme .part-diagnosis-panel .data-table thead th:first-child{ z-index: 3; background: var(--surface-2); } .journal-theme .part-diagnosis-panel .data-table tbody td:first-child{ background: var(--surface); } .journal-theme .part-diagnosis-panel .data-table tbody tr:nth-child(even) td:first-child{ background: #fafafa; } .journal-theme .part-diagnosis-panel .data-table tbody tr:hover td:first-child{ background: color-mix(in srgb, var(--red-light) 55%, var(--surface)); } .journal-theme .part-diagnosis-panel .data-table tfoot td:first-child{ background: var(--surface-2); } .journal-theme .part-diagnosis-panel .data-table th:nth-child(2), .journal-theme .part-diagnosis-panel .data-table td:nth-child(2){ min-width: 189px; } .journal-theme .part-diagnosis-panel .data-table th:nth-child(3), .journal-theme .part-diagnosis-panel .data-table td:nth-child(3){ min-width: 175px; } .journal-theme .part-diagnosis-panel .data-table th:nth-child(4), .journal-theme .part-diagnosis-panel .data-table td:nth-child(4){ min-width: 116px; } .journal-theme .part-diagnosis-panel .data-table th:nth-child(5), .journal-theme .part-diagnosis-panel .data-table td:nth-child(5){ min-width: 110px; } /* 手机单题解析 Figma 619:14997（已批改完成）：灰底分段控件 + 独立答题卡。 正文 12/16/16；控件与卡间距 12；卡头 12/16、图例可折；部分间距 16 带分隔线。 */ .journal-theme[data-report-view="questions"] .content{ padding: 12px 16px 16px; } .journal-theme #questions-view{ margin-top: 0; } .journal-theme .question-tabs{ position: static; z-index: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0; width: 100%; margin: 0 0 12px; padding: 4px; background: #f1f2f4; border: 0; border-radius: var(--radius-sm); box-shadow: none; overflow: hidden; touch-action: auto; } .journal-theme .question-tab{ display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 4px; width: 100%; min-width: 0; min-height: 0; padding: 6px 4px; color: var(--ink-3); background: transparent; border: 0; border-radius: 4px; font-size: 16px; font-weight: 500; line-height: 16px; text-align: center; white-space: normal; } .journal-theme .question-tab::after{ content: none; display: none; } .journal-theme .question-tab-name{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%; font-size: 16px; font-weight: 500; line-height: 16px; } .journal-theme .question-tab.active, .journal-theme .question-tab.active:hover{ color: var(--red); background: var(--surface); font-weight: 700; border-radius: 3px; } .journal-theme .question-tab.active .question-tab-name{ font-weight: 700; } .journal-theme .question-tab small{ display: block; margin: 0; color: inherit; font-size: 13px; font-weight: 400; line-height: 17px; white-space: nowrap; } .journal-theme .question-tab.active small{ font-size: 12px; line-height: 16px; } .journal-theme .answer-card{ border: .5px solid var(--border); border-radius: var(--radius-sm); } .journal-theme .answer-card-head{ display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 16px; background: var(--surface-2); border-bottom: .5px solid var(--border); } .journal-theme .answer-card-head h3{ margin: 0; font-family: var(--font); font-size: 15px; font-weight: 600; line-height: 19px; } .journal-theme .legend{ gap: 8px 16px; margin: 0; font-size: 12px; line-height: 18px; } .journal-theme .legend-item{ gap: 6px; } .journal-theme .legend-dot{ width: 17px; height: 17px; border-width: 1px; border-radius: 4px; } .journal-theme .legend-dot--right, .journal-theme .answer-dot--right{ color: #34a94a; background: #e0f5e1; border: 1px solid rgba(52, 169, 74, .4); } .journal-theme .legend-dot--wrong, .journal-theme .answer-dot--wrong{ color: #e74252; background: #fff0ef; border: 1px solid rgba(231, 66, 82, .4); } .journal-theme .legend-dot--partial, .journal-theme .answer-dot--partial{ color: #34a94a; background: linear-gradient(135deg, #e0f5e1 50%, #fff 50%); border: 1px solid rgba(52, 169, 74, .4); } .journal-theme .legend-dot--ungraded, .journal-theme .answer-dot--ungraded{ color: #f7a84d; background: #fdf2da; border: 1px solid rgba(247, 168, 77, .4); } .journal-theme .legend-dot--empty, .journal-theme .answer-dot--empty{ color: #6b7280; background: rgba(4, 1, 1, .05); border: 1px solid rgba(17, 24, 39, .2); } .journal-theme .answer-card-body{ padding: 16px; } .journal-theme .part + .part{ margin-top: 16px; padding-top: 16px; border-top: .5px solid var(--border); } .journal-theme .part-title{ margin: 0 0 8px; color: var(--ink-2); font-size: 15px; font-weight: 500; line-height: 19px; } .journal-theme .answer-dots{ gap: 12px; } .journal-theme .answer-dot{ width: 40px; height: 40px; border-radius: 4px; font-size: 13px; font-weight: 600; line-height: 17px; } /* 手机历次成绩 Figma 619:15206：四张统计卡保持两列两行， 上标签下分数；趋势图例落到说明下方，折线收进卡内。 */ .journal-theme #history-view .history-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } .journal-theme #history-view .history-card{ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; min-height: 0; padding: 16px; border-width: .5px; border-radius: var(--radius-sm); } .journal-theme #history-view .history-card label{ flex: 0 1 auto; gap: 4px; min-width: 0; max-width: 100%; color: var(--ink-3); font-size: 12px; font-weight: 400; line-height: 18px; white-space: normal; overflow-wrap: anywhere; } .journal-theme .history-card-icon svg{ width: 18px; height: 18px; } .journal-theme #history-view .history-card strong{ display: flex; flex: 0 0 auto; align-items: baseline; gap: 4px; margin-top: 8px; font-size: 24px; font-weight: 600; line-height: 24px; white-space: nowrap; } .journal-theme #history-view .history-card small{ margin-left: 0; font-size: 12px; line-height: 18px; } .journal-theme #history-view .history-card--link{ flex-direction: column; align-items: flex-start; justify-content: flex-start; } .journal-theme #history-view .history-card--link strong{ font-size: 16px; font-weight: 700; line-height: 24px; } .journal-theme #history-view .panel{ border-width: .5px; border-radius: var(--radius-sm); } .journal-theme #history-view .trend-panel-head{ flex-direction: column; gap: 4px; padding: 12px 16px; } .journal-theme #history-view .trend-panel-head h3{ font-size: 15px; font-weight: 600; line-height: 19px; letter-spacing: 0; } .journal-theme #history-view .trend-panel-head .small, .journal-theme #historyTrendMeta{ white-space: normal; color: var(--ink-3); font-size: 12px; line-height: 18px; } .journal-theme #history-view .trend-meta-link{ color: var(--red); font-weight: 600; border-bottom: 0; } .journal-theme #history-view .trend-legend{ gap: 4px 8px; color: var(--ink); font-size: 11px; font-weight: 400; line-height: 16.5px; } .journal-theme #history-view .trend-legend-dot{ width: 10px; height: 10px; border-radius: 4px; } .journal-theme #history-view .panel-body{ padding: 0; } .journal-theme #history-view .trend-chart-wrap{ min-height: 0; padding: 12px 12px 8px; overflow-x: hidden; } .journal-theme .trend-chart--mobile{ min-width: 100%; } .journal-theme #history-view .ai-insight-panel{ margin-top: 16px; padding: 12px; background: rgba(255, 240, 242, .5); border-width: .5px; border-color: rgba(229, 41, 74, .2); } .journal-theme #history-view .ai-insight-list li + li{ margin-top: 12px; } .journal-theme #history-view .ai-insight-list li::before{ background: var(--ink); } }