/* 璐明升格 · 官网
 *
 * 色板、字体、圆角全部取自 report-mock.html —— 官网和报告必须像同一个产品。
 * 学生从落地页点进报告，视觉上不能有断裂感，否则「这是不是同一家做的」
 * 会成为一个多余的疑问。
 *
 * 底色是试卷纸的米白，靛蓝是「印刷体、标准、可信」那一面（正文、链接、卡片），
 * 红是「批改」那一面（标志、主按钮、分数、勾）——老师批改用红笔，红在这里有语义。
 * 刻意不让红铺满：整页红会变成「你错了很多」的气氛，而产品要说的是「我告诉你怎么改」。
 */

:root {
  --paper: #F7F6F2;
  --card: #FFFEFB;
  --rule: #DCDED7;
  --ink: #23262B;
  --muted: #6B7480;
  --blue: #1D4E63;
  --blue-deep: #123A4C;
  --blue-wash: #E7EEF1;
  --on-blue: #FFFEFB;
  --red: #B23B36;
  --red-deep: #8E2E2A;
  --on-red: #FFFEFB;
  --red-wash: #F6E9E7;
  --gold: #A8761F;
  --gold-wash: #F6EEDC;
  --edge: #E2E1DA;

  --f-song: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --f-hei: "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "Heiti SC", sans-serif;
  --f-en: Georgia, "Times New Roman", "Noto Serif", serif;
  --f-num: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #151A1F; --card: #1A2128; --rule: #2B343C; --ink: #E4E7E9;
    --muted: #8D99A5; --blue: #6FB2CC; --blue-deep: #8FC7DD; --blue-wash: #1C2C36;
    --on-blue: #10161B; --red: #E07A6B; --red-deep: #EC8E7F;
    --on-red: #10161B; --red-wash: #33221F;
    --gold: #D9A94E; --gold-wash: #2E2718; --edge: #2B333A;
  }
}
:root[data-theme="dark"] {
  --paper: #151A1F; --card: #1A2128; --rule: #2B343C; --ink: #E4E7E9;
  --muted: #8D99A5; --blue: #6FB2CC; --blue-deep: #8FC7DD; --blue-wash: #1C2C36;
  --on-blue: #10161B; --red: #E07A6B; --red-deep: #EC8E7F;
    --on-red: #10161B; --red-wash: #33221F;
  --gold: #D9A94E; --gold-wash: #2E2718; --edge: #2B333A;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-hei); font-size: 16px; line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

.wrap { width: min(100% - 40px, 940px); margin-inline: auto; }
.narrow { width: min(100% - 40px, 720px); margin-inline: auto; }

/* ── 报头 ─────────────────────────────────────────── */
.mast {
  border-top: 3px solid var(--red);          /* 作文纸的红边距线 */
  border-bottom: 1px solid var(--rule); background: var(--card);
  position: sticky; top: 0; z-index: 20;
}
.mast .wrap { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
/* 印章红，不是靛蓝——雅思那条线（luminaedu.uk）用蓝，高考这条用红，
 * 两个品牌一眼分得开。红色在这里也有语义：老师批改用红笔、盖章用红印。
 * 内描边模仿印章的边框，圆角收到 5px 让它更方。 */
.logo {
  width: 34px; height: 34px; flex: none; border-radius: 5px;
  background: var(--red); color: var(--card);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .32);
  font-family: var(--f-song); font-size: 21px; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}
.brand { font-family: var(--f-song); font-size: 18px; font-weight: 700; letter-spacing: .04em; }
.brand-sub { font-size: 12px; color: var(--muted); margin-top: -2px; }
.spacer { flex: 1; }
.mast a { color: var(--blue); text-decoration: none; font-size: 14px; }
.mast a:hover { text-decoration: underline; }

.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; border: 1px solid var(--edge); color: var(--muted);
  background: var(--paper); white-space: nowrap;
}
.pill--free { border-color: var(--gold); color: var(--gold); background: var(--gold-wash); }

/* ── 首屏 ─────────────────────────────────────────── */
.hero { padding: 76px 0 56px; }
.hero h1 {
  font-family: var(--f-song); font-size: clamp(30px, 5.6vw, 50px);
  line-height: 1.28; margin: 0 0 22px; font-weight: 700; letter-spacing: .01em;
}
.hero h1 .n { font-family: var(--f-num); color: var(--red); font-weight: 700; }
.lede { font-size: clamp(16px, 2.1vw, 19px); color: var(--ink); margin: 0 0 14px; max-width: 44em; }
.lede b { color: var(--blue-deep); }
.sub { color: var(--muted); font-size: 15px; max-width: 44em; }

.cta {
  display: inline-block; margin-top: 30px; padding: 14px 30px;
  background: var(--red); color: var(--on-red); border-radius: 8px;
  text-decoration: none; font-size: 17px; font-weight: 600;
  transition: background .15s ease;
}
.cta:hover { background: var(--red-deep); }
.cta-note { display: block; margin-top: 12px; font-size: 13px; color: var(--muted); }

/* 分值条 */
.weights {
  display: flex; flex-wrap: wrap; gap: 0; margin-top: 46px;
  border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
  background: var(--card);
}
.weights div { flex: 1 1 150px; padding: 16px 18px; border-right: 1px solid var(--rule); }
.weights div:last-child { border-right: 0; }
.weights .k { font-family: var(--f-num); font-size: 24px; color: var(--red); font-weight: 700; }
.weights .v { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ── 通用区块 ─────────────────────────────────────── */
section { padding: 58px 0; border-top: 1px solid var(--rule); }
h2 {
  font-family: var(--f-song); font-size: clamp(22px, 3.4vw, 30px);
  margin: 0 0 10px; font-weight: 700; letter-spacing: .01em;
}
.h2sub { color: var(--muted); margin: 0 0 34px; max-width: 46em; }

/* 四样东西是一个整体，四张一排读起来才是「四个问题」；
   auto-fit 在 940px 的 wrap 里只放得下三张，第四张掉到下一行，看着像漏了一项。
   所以这里写死四列，靠收紧字号换宽度。 */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }
.card {
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
  padding: 20px 17px 22px;
}
.card .tag {
  font-family: var(--f-num); font-size: 11px; letter-spacing: .1em;
  color: var(--red); text-transform: uppercase;
}
.card h3 { font-family: var(--f-song); font-size: 17.5px; margin: 6px 0 9px; font-weight: 700; line-height: 1.35; }
.card p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--ink); }
.card p + p { margin-top: 9px; color: var(--muted); font-size: 13.5px; }

/* 证据清单 */
.proof { list-style: none; padding: 0; margin: 0; }
.proof li {
  padding: 18px 0 18px 30px; border-bottom: 1px solid var(--rule); position: relative;
}
.proof li:last-child { border-bottom: 0; }
.proof li::before {
  content: "✓"; position: absolute; left: 0; top: 18px;
  color: var(--red); font-weight: 700;
}
.proof b { display: block; margin-bottom: 4px; }
.proof span { color: var(--muted); font-size: 14.5px; }

code, .mono { font-family: var(--f-num); font-size: .92em; }
.q {
  background: var(--blue-wash); border-left: 3px solid var(--blue);
  padding: 12px 16px; border-radius: 0 6px 6px 0; margin: 14px 0;
  font-size: 14.5px;
}
.q--red { background: var(--red-wash); border-left-color: var(--red); }
.en { font-family: var(--f-en); }

/* ── 表单 ─────────────────────────────────────────── */
.tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.tab {
  padding: 9px 18px; border: 1px solid var(--rule); background: var(--card);
  border-radius: 8px; cursor: pointer; font: inherit; font-size: 15px;
  color: var(--ink);
}
.tab[aria-selected="true"] { background: var(--blue); color: var(--on-blue); border-color: var(--blue); }
.formbox {
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
  padding: 8px 8px 0; min-height: 560px;
}
.formbox iframe { width: 100%; border: 0; display: block; }

/* ── 页脚 ─────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--rule); padding: 34px 0 54px;
  color: var(--muted); font-size: 13.5px;
}
footer a { color: var(--blue); }

.parents { background: var(--card); }

/* ── 首屏：左文案右报告切片 ────────────────────────────
 * 原来的首屏只有一段文字，用户在交作文之前完全看不到「拿到手是什么样」。
 * 这里直接把报告最有说服力的一块搬到第一屏：一句被划红的原句 + 一条带
 * 《标准》出处的扣分卡片。这是和「让 AI 打个分」唯一真正拉得开的差距，
 * 用说的不如直接给看。
 */
.hero-grid { display: grid; gap: 44px; grid-template-columns: 1.05fr .95fr; align-items: start; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; gap: 34px; } }

.slice {
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  overflow: hidden; box-shadow: 0 1px 2px rgba(35,38,43,.05), 0 8px 24px rgba(35,38,43,.06);
}
.slice-hd {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--rule); background: var(--paper);
}
.slice-hd .sc { font-family: var(--f-num); font-size: 27px; font-weight: 700; color: var(--red); line-height: 1; }
.slice-hd .sc small { font-size: 15px; color: var(--muted); font-weight: 400; }
.slice-hd .bd {
  font-family: var(--f-song); font-size: 14px; padding: 3px 10px;
  border: 1px solid var(--edge); border-radius: 999px; color: var(--muted);
}
.slice-bd { padding: 18px }
.slice-sent {
  font-family: var(--f-en); font-size: 15px; line-height: 1.85; margin: 0 0 16px;
}
.slice-sent .sn { font-family: var(--f-num); font-size: 11px; color: var(--muted); vertical-align: super; margin-right: 3px; }
.slice-sent mark { background: var(--red-wash); color: inherit; border-bottom: 2px solid var(--red); padding: 0 1px; }
.slice-card {
  border: 1px solid var(--rule); border-left: 3px solid var(--red);
  border-radius: 0 8px 8px 0; padding: 13px 15px; background: var(--paper);
}
.slice-card .t { font-weight: 700; font-size: 14.5px; }
.slice-card .c { font-family: var(--f-num); font-size: 11.5px; color: var(--muted); margin-left: 8px; }
.slice-card p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink); }
.slice-card .cl {
  margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--rule);
  font-size: 11.5px; color: var(--muted);
}
.slice-ft {
  padding: 11px 18px; border-top: 1px solid var(--rule);
  font-size: 12.5px; color: var(--muted); background: var(--paper);
}

/* ── 评分核心原则 ─────────────────────────────────── */
.rules { display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); margin-top: 52px;
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--card); }
@media (max-width: 780px) { .rules { grid-template-columns: 1fr; } }
.rules > div { padding: 22px 24px; border-right: 1px solid var(--rule); }
.rules > div:last-child { border-right: 0; }
@media (max-width: 780px) {
  .rules > div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .rules > div:last-child { border-bottom: 0; }
}
.rules .no { font-family: var(--f-num); font-size: 11px; color: var(--red); letter-spacing: .12em; }
.rules h3 { font-family: var(--f-song); font-size: 18px; margin: 5px 0 8px; font-weight: 700; }
.rules p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.7; }
.rules-cap { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }

/* ── 报头右上：做成真正的按钮 ─────────────────────── */
.mast .btn {
  padding: 9px 18px; border: 1.5px solid var(--red); border-radius: 8px;
  color: var(--red); font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.mast .btn:hover { background: var(--red); color: var(--on-red); text-decoration: none; }

/* ── 首屏两个按钮：直接进对应文体的表单 ──────────────
 * 原来是一个「免费批改」按钮滑到下面、再选文体，两次点击才进得去表单。
 * 文体在按钮上就分好，点一次直接弹窗。 */
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.cta-row .cta { margin-top: 0; padding: 13px 24px; font-size: 16px; }
.cta--ghost { background: transparent; color: var(--red); border: 1.5px solid var(--red); }
.cta--ghost:hover { background: var(--red); color: var(--on-red); }

/* ── 报告切片：可滚动，装得下更多内容 ──────────────── */
.slice-bd { max-height: 336px; overflow-y: auto; scrollbar-width: thin; }
.slice-bd::-webkit-scrollbar { width: 8px; }
.slice-bd::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 4px; }
.slice-scroll {
  font-size: 11.5px; color: var(--muted); text-align: center;
  padding: 6px 0 2px; letter-spacing: .04em;
}
.slice-up {
  margin-top: 14px; padding: 12px 14px; border-radius: 8px;
  background: var(--blue-wash); border-left: 3px solid var(--blue);
  font-family: var(--f-en); font-size: 13.5px; line-height: 1.75;
}
.slice-up ins { background: transparent; text-decoration: none; border-bottom: 2px solid var(--blue); }
.slice-up .lbl {
  display: block; font-family: var(--f-hei); font-size: 11.5px;
  color: var(--blue-deep); margin-bottom: 5px; letter-spacing: .04em;
}

/* ── 三原则的抬头 ─────────────────────────────────── */
.rules-head {
  margin: 52px 0 0; font-family: var(--f-song); font-size: 20px; font-weight: 700;
}
.rules-head span { color: var(--red); }
.rules { margin-top: 16px; }


/* ── 样例报告选择器 ──────────────────────────────────
   一篇拆解讲透「报告长什么样」，但说服不了「你们对各种水平都判得住吗」。
   六份真实报告并排放，档次和分数写在卡片上，点进去是线上原件。 */
.picks { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; margin-top: 30px; }
@media (max-width: 760px) { .picks { grid-template-columns: 1fr; } }
.picks h3 {
  font-family: var(--f-song); font-size: 17px; font-weight: 700;
  margin: 0 0 4px; display: flex; align-items: baseline; gap: 8px;
}
.picks h3 em { font-style: normal; font-family: var(--f-num); font-size: 12px; color: var(--muted); }
.picks .note { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.pick {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--rule); border-radius: 9px;
  padding: 12px 14px; margin-bottom: 8px; transition: border-color .12s, transform .12s;
}
.pick:hover { border-color: var(--red); transform: translateX(2px); }
.pick .sc {
  font-family: var(--f-num); font-weight: 700; font-size: 19px; line-height: 1;
  color: var(--red); flex: none; min-width: 52px;
}
.pick .sc small { font-size: 11px; font-weight: 400; color: var(--muted); }
.pick .bd {
  flex: none; font-size: 12px; color: var(--muted);
  border: 1px solid var(--rule); border-radius: 4px; padding: 2px 6px;
}
.pick .ds { font-size: 14px; line-height: 1.5; }
.pick .go { margin-left: auto; flex: none; color: var(--muted); font-size: 14px; }
.pick:hover .go { color: var(--red); }