/* 时光来信 · 纸上来信（选定视觉第 1 张）：浅暖白纸面、近黑大字、细分隔线、暖红唯一主按钮；
   官方白黄标志只放在页尾深色条和登录页深色块里。手机单列优先；电脑无稿件单列约 720px，有稿件左素材右编辑。
   只用系统中文字体，不加载网络字体。 */
:root{--bg:#fcf8f2;--surface:#fffdf9;--ink:#202024;--muted:#55555a;--line:#dbd8d2;--field:#cdc6bc;--dash:#beb1a3;--icon:#6b5b53;
  --red:#c8483b;--red-d:#b03b2f;--link:#b8392b;--off-bg:#ebe3da;--off-ink:#6e6259;--tint:#f4eee6;--reply:#f6eedc;
  --warn:#8a5300;--ok:#3f6b4a;--dark:#1c1d21;--story-ink:#3a2a22;--label:#7d6a5d;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  color:var(--ink);background:var(--bg);color-scheme:light}
*{box-sizing:border-box}
body{margin:0;min-width:320px;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.6;-webkit-text-size-adjust:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
button:disabled{cursor:default;opacity:.5}
:focus-visible{outline:3px solid var(--link);outline-offset:2px}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
[hidden]{display:none!important}
input[type=file]{display:none}
img{max-width:100%}

/* 页眉：小象 + 时光来信 + 具象语宙®出品；右侧文字链 */
.topbar{width:100%;max-width:720px;margin:0 auto;padding-block:8px 0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-height:44px}
.brand .mascot{width:45px;height:48px;object-fit:contain}
.brand span{display:flex;flex-direction:column;line-height:1.2}
.brand strong{font-size:22px;font-weight:800;letter-spacing:2px;white-space:nowrap}
.brand small{font-size:13px;color:var(--muted);letter-spacing:1px;margin-top:3px;white-space:nowrap}
.top-actions{display:flex;flex-wrap:wrap;gap:0 14px;align-items:center;margin-left:auto}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;font-size:16px;white-space:nowrap;color:var(--link);text-decoration:underline;text-underline-offset:4px}
main{width:100%;max-width:720px;margin:0 auto;flex:1;padding-block:0 32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.main-title{font-size:26px;margin:8px 0 4px}

/* 分段：细分隔线代替厚卡片 */
.card{padding-block:20px;border-top:1px solid var(--line)}
main>.card:first-child,.story-grid>.card:first-child,#panel.card{border-top:0}
.card h1{font-size:clamp(28px,8vw,40px);line-height:1.25;margin:0 0 8px;letter-spacing:1px;text-wrap:balance}
.card h2{font-size:26px;line-height:1.3;margin:0 0 4px;letter-spacing:1px}
.card h3{font-size:17px;margin:20px 0 8px}
.step{font-size:14px;color:var(--muted);letter-spacing:1px}
.head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.lead{font-size:17px;color:var(--muted);margin:0 0 12px;max-width:34em}
.muted{color:var(--muted)}
.small{font-size:14px}
.hint{font-size:16px;color:var(--muted);line-height:1.7;margin:10px 0;max-width:36em}
.notice{font-size:16px;line-height:1.7;border-radius:6px;padding:12px 14px;margin:12px 0;background:var(--tint);border-left:3px solid var(--dash);max-width:40em}
.notice.warn{border-left-color:var(--warn)}
.notice.bad{background:#f8e5e0;border-left-color:var(--red)}
.notice.good{background:#e9f0e6;border-left-color:var(--ok)}
.demo-band{background:var(--dark);color:#f3e3c3;text-align:center;font-size:14px;line-height:1.5;padding:6px 16px;letter-spacing:.5px}

/* 按钮：暖红主按钮；不可点时换成浅底深字，旁边保留原因提示 */
.primary{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--red);color:#fff;border-radius:10px;width:100%;padding:12px 16px;min-height:52px;font-size:17px;font-weight:700;text-decoration:none}
.primary:hover:not(:disabled){background:var(--red-d)}
.primary:disabled{opacity:1;background:var(--off-bg);color:var(--off-ink);border:1px dashed var(--dash)}
.primary svg{width:22px;height:22px;stroke-width:2}
.secondary{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--field);border-radius:8px;padding:8px 14px;min-height:44px;font-size:16px;background:var(--surface);color:var(--ink);text-decoration:none}
.secondary:hover:not(:disabled){border-color:var(--icon)}
.link{color:var(--link);text-decoration:underline;text-underline-offset:4px;font-size:16px;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row>.grow{flex:1}

.field{display:block;margin-bottom:16px;font-size:16px}
.field>span{display:block;margin-bottom:6px;font-weight:600}
.field input,.field select,.field textarea,.input{width:100%;min-height:48px;background:var(--surface);border:1px solid var(--field);border-radius:8px;padding:10px 12px;font-size:16px}
.field textarea{min-height:120px;line-height:1.7;resize:vertical}
.check{display:flex;gap:8px;align-items:center;font-size:16px;margin:6px 0 14px;min-height:44px}
.check input{width:20px;height:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seg-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.seg-choice button{border:1px solid var(--field);border-radius:8px;padding:12px 8px;background:var(--surface);font-size:16px;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:72px;text-align:center}
.seg-choice button[aria-pressed=true]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);background:#fdf1ec;font-weight:700}
.form-error{color:#a8271c;font-size:16px;min-height:20px;margin:8px 0 0}

/* 孩子信息首块：大标题 + 资料一行 + 邮递员小象 */
.hero{display:grid;grid-template-columns:minmax(0,1fr) clamp(108px,32%,190px);align-items:center;gap:8px;padding-block:8px 14px}
.hero h1{margin-bottom:6px}
.hero .mascot{width:100%;height:auto;aspect-ratio:301/320}
.hero details{margin:0}
.hero details>summary{font-size:17px;color:var(--muted)}
.hero .back{grid-column:1/-1}

/* 我的稿件列表 */
.story-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;min-height:64px;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.story-item strong{font-size:18px}
.badge{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:3px 8px;white-space:nowrap;background:var(--surface)}
.badge.red{color:var(--link);border-color:#e3aaa1}
.badge.warn{color:var(--warn);border-color:#dcc08f}
.badge.ok{color:var(--ok);border-color:#a9c0a6}

.stepper{display:flex;gap:4px;margin:0 0 14px;overflow-x:auto}
.stepper span{flex:1;min-width:64px;text-align:center;font-size:14px;padding:8px 4px;border-bottom:2px solid var(--line);color:var(--muted);white-space:nowrap}
.stepper span.on{border-color:var(--red);color:var(--link);font-weight:700}
.stepper span.done{border-color:var(--dash)}

/* 三种素材入口：等宽虚线格，复用原有线条图标 */
.upload-box{width:100%;min-height:116px;border:1.5px dashed var(--dash);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;background:transparent;padding:12px 3px}
.upload-box:hover:not(:disabled){background:var(--tint)}
.upload-box svg{width:36px;height:36px;color:var(--icon);stroke-width:1.5}
.progress{height:6px;background:var(--off-bg);border-radius:3px;overflow:hidden;margin:10px 0}
.progress>span{display:block;height:100%;background:var(--red);width:0}
.progress.indeterminate>span{width:35%;animation:prog 1.8s ease-in-out infinite}
@keyframes prog{from{transform:translateX(-110%)}to{transform:translateX(390%)}}
.file-row{display:flex;align-items:center;gap:10px;font-size:16px;padding:8px 0;min-height:52px;border-bottom:1px solid var(--line)}
.file-row svg{color:var(--icon)}
.file-row .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-row>button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--icon)}
.steps-list{margin:6px 0 0;padding-left:20px;font-size:16px;line-height:1.8}

/* 折叠行：默认收起 */
details{margin:2px 0}
summary{cursor:pointer;font-size:16px;color:var(--ink);padding:10px 0;min-height:44px}
summary::marker{color:var(--ink)}
details.advanced>summary{font-size:18px}

/* 逐条核对（高级） */
.cards{display:flex;flex-direction:column;gap:12px}
.mcard{border:1px solid var(--line);border-radius:8px;padding:14px;background:var(--surface)}
.mcard.confirmed{border-color:#a9c0a6;background:#f6faf3}
.mcard.excluded{opacity:.6;background:var(--tint)}
.mcard .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;color:var(--muted);margin-bottom:8px}
.mcard textarea{width:100%;border:1px solid var(--field);border-radius:6px;background:#fff;padding:10px;font-size:16px;line-height:1.7;min-height:64px;resize:vertical}
.mcard .orig{font-size:14px;color:var(--muted);margin:4px 0}
.mcard .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.mcard .actions button{border:1px solid var(--field);border-radius:6px;padding:8px 14px;font-size:16px;background:#fff;min-height:44px}
.mcard .actions button[aria-pressed=true]{border-color:var(--ok);color:var(--ok);font-weight:700}
.mcard .actions button.ex[aria-pressed=true]{border-color:var(--icon);color:var(--icon)}
.mcard select{font-size:16px;min-height:44px;padding:6px 8px;border:1px solid var(--field);border-radius:6px;background:#fff;max-width:100%}
.mcard .input{margin-top:8px}
.question{margin:12px 0}
.question q{display:block;margin:6px 0 10px;font-weight:600}
.question .row button{flex:1}
.src{display:inline-flex;align-items:center;gap:4px;font-size:14px;border:1px solid var(--line);border-radius:14px;padding:4px 10px;min-height:32px;background:#fff;color:var(--ink)}
.src svg{width:14px;height:14px}
.letter-tag{font-weight:800;color:var(--link);font-size:16px}
.cat-head{display:flex;align-items:baseline;gap:10px;margin:20px 0 8px}
.cat-head .letter{font-size:22px;font-weight:800;color:var(--link)}
.cat-head small{font-size:13px;letter-spacing:2px;color:var(--muted)}
.seg{font-size:16px;line-height:1.7;padding:8px 0;border-bottom:1px solid var(--line)}
.seg.hl{background:#fbf0cf}
.seg .who{font-size:14px;color:var(--muted)}
.list-edit{display:flex;flex-direction:column;gap:8px}
.list-edit .li{display:flex;gap:8px}
.list-edit input{flex:1;min-height:44px;border:1px solid var(--field);border-radius:6px;padding:8px 10px;font-size:16px;background:#fff}
.problems{margin:8px 0;padding-left:20px;font-size:16px;line-height:1.7;color:#8a2a1e}
.sticky-bar{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 22%);padding:16px 0 calc(6px + env(safe-area-inset-bottom,0px));margin-top:10px}
.saved{font-size:14px;color:var(--muted);text-align:right;min-height:20px;margin:6px 0}
audio{width:100%;margin:8px 0}

/* 成稿：一张纸，六个可编辑栏（标题、四段正文、时光回信） */
.paper{background:var(--surface);border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.paper-top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.paper-body{padding:20px 18px 6px}
/* r11 STORY：上方 STORY 标识和题目，左列大字母、右列小标签和正文；下方单独一条可收起的 Y 时光回信 */
.story-head{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap;margin-bottom:6px}
.story-mark{color:var(--link);font-weight:800;font-size:15px;letter-spacing:4px}
.story-tag{color:var(--muted);font-size:14px;letter-spacing:2px}
.title-input{display:block;background:none;border:0;width:100%;font-weight:800;font-size:26px;letter-spacing:1px;margin:0 0 18px;padding:0;line-height:1.45;color:var(--story-ink);resize:none;overflow:hidden;overflow-wrap:anywhere;text-wrap:balance}
.story-rows{display:grid;gap:14px}
.story-row{display:grid;grid-template-columns:2.4rem minmax(0,1fr);column-gap:12px;align-items:start;padding-top:12px;border-top:1px solid var(--line)}
.story-letter{color:var(--red);font-weight:800;font-size:34px;line-height:1;font-family:Georgia,"Times New Roman",serif}
.story-cell{min-width:0}
.story-label{display:block;font-size:13px;letter-spacing:2px;color:var(--label);margin-bottom:2px}
.story-content{display:block;width:100%;resize:none;overflow:hidden;border:0;background:none;padding:0;font-size:17px;line-height:1.95;min-height:32px;overflow-wrap:anywhere}
.reply{border-top:1px solid var(--line);background:var(--reply);padding:14px 18px 16px}
.reply-head{display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;column-gap:12px;align-items:center}
.reply-name{min-width:0}
.reply-name strong{display:block;font-size:17px;letter-spacing:1px}
.reply-name small{display:block;font-size:12px;letter-spacing:2px;color:var(--label);margin-top:2px}
.reply-toggle{color:var(--link);text-decoration:underline;text-underline-offset:4px;font-size:15px;min-height:44px;padding:0 2px;white-space:nowrap}
.reply-body{margin-top:10px}
.reply-note{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);margin:0 0 6px}
.reply-note .mascot{width:30px;height:32px;object-fit:contain}
.reply textarea{display:block;width:100%;min-height:120px;border:0;background:transparent;resize:none;overflow:hidden;font-size:17px;line-height:1.9;overflow-wrap:anywhere}
td.bad-text{color:var(--link)}
td.problem{min-width:11em}
tfoot th,tfoot td{border-top:2px solid var(--line);font-weight:700;text-align:left}
.qnotes{list-style:none;padding:0;margin:8px 0;font-size:16px;line-height:1.6}
.qnotes li{padding:6px 0 6px 12px;border-left:3px solid var(--dash);margin-bottom:6px}
.qnotes li.warn{border-color:var(--red)}
.qnotes li.check{border-color:var(--warn)}
.versions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.versions button{font-size:15px;border:1px solid var(--field);border-radius:22px;padding:6px 14px;min-height:44px;background:var(--surface)}
.versions button[aria-current=true]{border-color:var(--red);color:var(--link);font-weight:700}
.toolbar{display:flex;gap:8px;flex-wrap:wrap}
.toolbar button,.toolbar .secondary{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;font-size:16px;color:var(--ink);border-radius:8px;border:1px solid var(--field);background:var(--surface);min-height:44px}
.toolbar svg{color:var(--icon)}

/* 页尾深色条：原色官方标志 */
.brand-foot{background:var(--dark);margin-top:auto;padding-block:28px calc(28px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;justify-content:center}
.brand-foot img{width:220px;height:auto;aspect-ratio:552/182;display:block}

/* 登录与首次设置：纸面卡片 + 克制的深色标志块 */
.overlay{position:fixed;inset:0;background:#202024a6;display:flex;align-items:center;justify-content:center;padding:16px;z-index:20}
.overlay.auth{background:var(--bg);overflow:auto;align-items:flex-start;padding-block:max(24px,env(safe-area-inset-top,0px)) 24px}
.login-card,.sheet{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px 20px;width:min(440px,100%);max-height:92dvh;overflow:auto}
.overlay.auth .login-card{max-height:none;margin:auto 0}
.login-logo{background:var(--dark);border-radius:8px;padding:18px 16px;margin:-6px -4px 18px;display:flex;justify-content:center}
.login-logo img{width:200px;height:auto;aspect-ratio:552/182;display:block}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.login-brand .mascot{width:45px;height:48px;object-fit:contain}
.login-brand strong{display:block;font-size:22px;letter-spacing:2px}
.login-brand small{display:block;font-size:14px;color:var(--muted);letter-spacing:1px}
.login-card h2,.sheet h2{font-size:22px;margin:0 0 12px}
.copy-sheet-text{width:100%;min-height:50dvh;font-size:16px;line-height:1.8;border:1px solid var(--field);border-radius:6px;padding:10px;background:#fff;margin:10px 0;-webkit-user-select:text;user-select:text}
.offscreen{position:fixed;left:-9999px;top:0;opacity:0}
.toast{position:fixed;bottom:calc(28px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%) translateY(15px);background:var(--ink);color:#fff;border-radius:8px;font-size:16px;padding:12px 20px;opacity:0;pointer-events:none;transition:.2s;z-index:30;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* 管理后台：同一纸面；五个页签用下划线 */
main.admin-main,body.admin .topbar{max-width:1080px}
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:4px}
.tabs button{padding:8px 14px;min-height:48px;font-size:16px;white-space:nowrap;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--red);font-weight:700}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top;white-space:nowrap}
th{color:var(--muted);font-weight:600}
td.wrap{white-space:normal;min-width:180px}
td button,td .secondary{min-height:40px}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:12px 0}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px}
.stat b{display:block;font-size:22px;margin-top:4px}
.stat small{color:var(--muted);font-size:14px}

/* 一键生成主路径 */
.three-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:4px 0 4px}
.upload-box span{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.upload-box strong{font-size:18px;color:var(--ink)}
.upload-box small,.seg-choice small{font-size:13.5px;color:var(--muted);font-weight:400;line-height:1.4}
.text-form{margin-top:12px}
.text-form .seg-choice{grid-template-columns:repeat(2,1fr)}
.text-form textarea{width:100%;margin-bottom:8px;min-height:140px;background:var(--surface);border:1px solid var(--field);border-radius:8px;padding:10px 12px;font-size:16px;line-height:1.7}
.primary.big{min-height:60px;font-size:20px;margin-top:4px}
#genCard>.hint{text-align:center;max-width:none}
.file-row select{max-width:46%;font-size:16px;min-height:44px;border:1px solid var(--field);border-radius:6px;background:var(--surface)}

/* 电脑：有稿件时左素材、右编辑；正文每行约 30–36 字 */
@media(min-width:960px){
  body.wide main,body.wide .topbar{max-width:1180px}
  .story-grid.has-draft{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:48px;align-items:start}
  .story-grid.has-draft>.card{grid-column:1}
  .story-grid.has-draft>#draftCard{grid-column:2;grid-row:1/span 5;border-top:0}
  .paper-body{padding:26px 36px 8px}
  .paper-top,.reply{padding-left:36px;padding-right:36px}
  .title-input{font-size:30px}
  .paper{max-width:40em}
}
@media(max-width:360px){
  .brand strong{font-size:20px;letter-spacing:1px}
  .top-actions{gap:0 10px}
  .three-inputs{gap:8px}
  .upload-box{padding:12px 2px;min-height:112px}
  .upload-box small{font-size:13px}
  .card h2{font-size:24px}
  .paper-body,.paper-top,.reply{padding-left:14px;padding-right:14px}
  .story-row,.reply-head{grid-template-columns:1.9rem minmax(0,1fr);column-gap:8px}
  .reply-head .reply-toggle{grid-column:2;justify-self:start}
  .story-letter{font-size:28px}
  .title-input{font-size:23px}
  .story-tag{letter-spacing:1px}
}
@media(max-width:340px){.hero{grid-template-columns:minmax(0,1fr)}.hero .mascot{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* r5: one-click stages (real job states) and the per-speaker question */
.gen-steps{margin:14px 0 4px}
.gen-steps ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;padding:0;margin:0 0 6px;font-size:15px;color:var(--muted)}
.gen-steps li::before{content:"○ ";color:var(--dash)}
.gen-steps li.done{color:var(--ok)}
.gen-steps li.done::before{content:"✓ ";color:var(--ok)}
.gen-steps li.now{color:var(--ink);font-weight:700}
.gen-steps li.now::before{content:"● ";color:var(--red)}
.mcard.question{display:grid;gap:6px;margin:10px 0}
.mcard.question .row{gap:10px;flex-wrap:wrap}
.mcard.question button[aria-pressed=true]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);background:#fdf1ec;font-weight:700}