/* ===================================================================
 * 页面专属样式（自原页面 <style> 块抽取，§10.1）
 * 源文件：empower/assess/index.html
 * 说明：本文件仅承载该页面的版式细节；通用组件请写入 components.css。
 * =================================================================== */

/* ===== 登录门（自包含，使用站点统一鉴权 VW.Auth） ===== */
.login-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index: var(--z-modal);background:radial-gradient(1000px 520px at 76% -10%,rgba(196,132,74,.26),transparent 60%),radial-gradient(750px 440px at 12% 112%,rgba(124,107,147,.32),transparent 62%),linear-gradient(135deg,var(--sg-green-ink,var(--c-bar)) 0%,var(--sg-green,var(--c-brand)) 62%,var(--c-brand-dark) 100%)}
.login-card{width:340px;max-width:90vw;background:var(--c-card);border-radius: var(--r-lg);padding: var(--sp-7) var(--sp-6);box-shadow:0 18px 50px rgba(0,0,0,.25)}
.login-card h2{margin: 0 0 4px;font-size: var(--fs-21);color:var(--sg-green-3,var(--c-brand-dark))}
.login-card .sub{font-size:var(--fs-14);color:var(--c-text-sub);margin: var(--sp-1)}
.login-card .fld{display:block;font-size:var(--fs-14);color:var(--c-info);margin: 12px 0 var(--sp-1)}
.login-card .input{width:100%;box-sizing:border-box;height:var(--ctl-md);min-height:var(--ctl-md);
padding: 0 12px;border:1px solid var(--c-line-2);border-radius:var(--r-sm);font-size:var(--fs-14);}
.login-card .btn{width:100%;margin: var(--sp-4);padding: var(--sp-3);min-height:var(--ctl-lg);border:none;border-radius:var(--r-sm);background:var(--sg-green-3,var(--c-brand-dark));color:var(--c-card);font-size: var(--fs-15);cursor:pointer;}
.login-card .btn:hover{background:var(--sg-green-2,var(--c-brand-2))}
.login-card .err{color:var(--danger,var(--c-danger));font-size:var(--fs-14);margin: var(--sp-2);min-height:16px}
.login-card .hint{font-size:var(--fs-14);color:var(--c-gray-2);margin: var(--sp-3);text-align:center;line-height:1.6}

/* 页面专属样式（自原页面 <style> 块抽取，§10.1）
 * 源文件：empower/assess/index.html
 * 说明：本文件仅承载该页面的版式细节；通用组件请写入 components.css。
 *       V3：骨架统一走 components.css §2.0（.app-top/.app-body/.app-side/.app-main）。
 *       兼容别名 --brand/--muted/--line/--ok/--accent 等由 tokens.css §兼容层 提供。 */
.muted{color:var(--muted)}
.page-head h1{font-size: var(--fs-21);letter-spacing:.5px}
.page-head p{font-size:var(--fs-14);color:var(--muted);margin: var(--sp-1)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap: var(--sp-1);padding: 8px var(--sp-4);min-height:38px;
border:1px solid transparent;border-radius: 8px;font-size:var(--fs-14);font-weight:600;cursor:pointer;
transition:.16s;background:none;white-space:nowrap}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--brand);color:var(--c-card)}.btn-primary:hover:not(:disabled){background:var(--brand2)}
.btn-accent{background:var(--accent);color:var(--c-card)}.btn-accent:hover:not(:disabled){filter:brightness(.93)}
.btn-danger{background:var(--danger);color:var(--c-card)}.btn-danger:hover:not(:disabled){filter:brightness(.93)}
.btn-outline{background:var(--c-card);border-color:var(--line);color:var(--text)}
.btn-outline:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.btn-sm{padding: var(--sp-1) var(--sp-3);min-height:34px;font-size: var(--fs-14);border-radius: var(--r-xs)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding: var(--sp-4);margin: var(--sp-3)}
/* V3 §4 表单控件统一：高度走 --ctl-md(42px)、圆角走 --r-sm(10px)、边框走 --c-line-2，
   与全站 input/select 完全一致（原为 padding 撑高 + 8px 圆角 + 1.5px 边框，属异类）。 */
.input{width:100%;box-sizing:border-box;min-height:var(--ctl-md);height:var(--ctl-md);
padding: 0 var(--sp-3);border:1px solid var(--c-line-2);border-radius:var(--r-sm);font-size:var(--fs-14);
outline:none;transition:var(--dur-fast);background:var(--c-card);color:var(--text)}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,61,36,.08)}
select.input{cursor:pointer}
textarea.input{height:auto;min-height:78px;padding: var(--sp-2) var(--sp-3);resize:vertical}
label.fld{display:block;font-size: var(--fs-14);color:var(--muted);font-weight:600;margin: 4px}
.badge{display:inline-block;padding: 1px 8px;border-radius: 10px;font-size:var(--fs-14);font-weight:700;line-height:1.75}
/* 成绩等级配色（替代内联 style，数据驱动 → 类名） */
.g-excellent{color:var(--c-ok)}
.g-pass{color:var(--c-warn)}
.g-fail{color:var(--c-danger)}
.grade-badge.g-excellent{background:var(--c-ok-tint)}
.grade-badge.g-pass{background:var(--c-warn-tint)}
.grade-badge.g-fail{background:var(--c-danger-tint)}
.grade-badge{padding:var(--sp-1) 18px}
.td-grade{font-weight:700}
.b-blue{background:var(--sg-green-tint,var(--c-brand-tint));color:var(--sg-green-3,var(--c-brand-dark))}.b-green{background:var(--sg-green-tint,var(--c-brand-tint));color:var(--sg-green-3,var(--c-brand-dark))}
.b-orange{background:var(--mo-orange-tint,var(--c-warn-tint));color:var(--mo-orange-3,var(--c-orange-dark))}.b-purple{background:var(--mo-purple-tint,var(--c-purple-tint));color:var(--mo-purple-3,var(--c-purple-dark))}
.b-gray{background:var(--mo-gray-tint,var(--c-gray-tint));color:var(--mo-gray-3,var(--c-gray-dark))}.b-red{background:var(--c-danger-tint);color:var(--danger,var(--c-danger))}
.panel{display:none}.panel.active{display:block;animation:fi .25s}
@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.toolbar{display:flex;gap: 8px;flex-wrap:wrap;align-items:center;margin: 12px}
.row-2{display:grid;grid-template-columns:1fr var(--side-w-sm);gap: var(--sp-2);margin: var(--sp-3)}
@media(max-width:750px){.row-2{grid-template-columns:1fr}}
.qitem{display:flex;gap: 12px;align-items:center;padding: 12px var(--sp-3);border:1px solid var(--line);
border-radius: 10px;margin: 8px;transition:.16s;background:var(--c-card)}
.qitem:hover{border-color:var(--c-line-2);background:var(--c-gray-tint)}
.qitem .qi{flex:1;min-width:0}
.qitem .qt{font-weight:600;font-size: var(--fs-14);line-height:1.55}
.qitem .qm{font-size:var(--fs-14);color:var(--muted);margin: 4px;display:flex;gap: var(--sp-1);
align-items:center;flex-wrap:wrap}
.qitem .acts{display:flex;gap: var(--sp-1);flex-shrink:0}
.empty{text-align:center;padding: var(--sp-7) 16px;color:var(--muted);font-size:var(--fs-14)}
.builder{display:grid;grid-template-columns:1fr 360px;gap: 16px;align-items:start}
@media(max-width:900px){.builder{grid-template-columns:1fr}}
.sel-item{display:flex;align-items:center;gap: var(--sp-2);padding: var(--sp-2) 12px;background:var(--c-gray-tint);
border:1px solid var(--line);border-radius: var(--r-sm);margin: var(--sp-2);font-size:var(--fs-14)}
.sel-item .num{width:22px;height:22px;border-radius: 50%;background:var(--brand);color:var(--c-card);
display:flex;align-items:center;justify-content:center;font-size:var(--fs-14);font-weight:700;flex-shrink:0}
.pick-item{display:flex;gap: var(--sp-2);align-items:flex-start;padding: var(--sp-2) var(--sp-3);border:1.5px solid var(--line);
border-radius: var(--r-sm);cursor:pointer;background:var(--c-card);margin: var(--sp-2);transition:.14s}
.pick-item:hover{border-color:var(--c-line-2)}
.pick-item.on{border-color:var(--brand);background:var(--sg-green-tint,var(--c-brand-tint))}
.pub-item{display:flex;gap: var(--sp-2);align-items:center;padding: var(--sp-3) var(--sp-3);border:1px solid var(--line);
border-radius: 10px;margin: 8px;font-size:var(--fs-14);background:var(--c-gray-tint);flex-wrap:wrap}
.pub-item .pi{flex:1;min-width:180px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap: 12px;margin: 16px}
.stat{background:var(--c-card);border:1px solid var(--line);border-radius:var(--radius);padding: var(--sp-3);text-align:center}
.stat .v{font-size: var(--fs-23);font-weight:800;color:var(--brand);line-height:1.3}
.stat .l{font-size:var(--fs-14);color:var(--muted);margin: var(--sp-1)}
.chart-row{display:grid;grid-template-columns:1fr 1fr;gap: var(--sp-3);margin: var(--sp-3)}
@media(max-width:750px){.chart-row{grid-template-columns:1fr}}
.cbox{background:var(--c-card);border:1px solid var(--line);border-radius:var(--radius);padding: 16px}
.cbox h4{font-size: var(--fs-14);margin: 12px;font-weight:600}
.cwrap{position:relative;height:250px}
table.dt{width:100%;border-collapse:collapse;font-size:var(--fs-14)}
table.dt th,table.dt td{padding: 8px var(--sp-2);border:1px solid var(--line);text-align:center;white-space:nowrap}
table.dt th{background:var(--c-gray-tint);font-weight:600}
table.dt tbody tr:hover{background:var(--c-gray-tint)}
table.dt tr.clickable{cursor:pointer}
.exam-wrap{max-width:720px;margin:0 auto;padding: 16px 16px var(--sp-10)}
.exam-hero{background:linear-gradient(135deg,var(--brand),var(--brand2));color:var(--c-card);
border-radius: 16px;padding: var(--sp-6) var(--sp-5);text-align:center;margin: var(--sp-4)}
.exam-hero h1{font-size: var(--fs-21);font-weight:700;line-height:1.4}
.exam-hero .sub{font-size:var(--fs-14);color:var(--sg-green-line,var(--c-brand-line));margin: var(--sp-2)}
.exam-hero .meta{font-size:var(--fs-14);color:var(--c-info-tint);margin: var(--sp-3);display:flex;
gap: 8px 16px;justify-content:center;flex-wrap:wrap}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap: 12px;background:var(--c-card);border:1px solid var(--line);
border-radius:var(--radius);padding: 16px;margin: 16px}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}
.req{color:var(--danger)}
.qcard{background:var(--c-card);border:1px solid var(--line);border-left:4px solid var(--brand);
border-radius: 10px;padding: 16px var(--sp-4);margin: 12px;transition:.16s}
.qcard.judge{border-left-color:var(--warn)}
.qcard.multi{border-left-color:var(--purple)}
.qcard.answered{border-left-color:var(--ok)}
.qcard.shake{animation:sk .4s}
@keyframes sk{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.qh{display:flex;justify-content:space-between;gap: var(--sp-2);align-items:flex-start;margin: 12px}
.qtxt{font-size:var(--fs-14);font-weight:600;line-height:1.65}
.opt{display:flex;align-items:center;gap: var(--sp-2);padding: var(--sp-2) var(--sp-3);min-height:44px;border:1.5px solid var(--line);
border-radius: var(--r-sm);cursor:pointer;transition:.14s;font-size: var(--fs-14);margin: var(--sp-2);
user-select:none;background:var(--c-card)}
.opt:hover{border-color:var(--c-line-2);background:var(--c-gray-tint)}
.opt.sel{border-color:var(--brand);background:var(--sg-green-tint,var(--c-brand-tint));font-weight:600}
.opt .ot{width:26px;height:26px;border-radius: 50%;background:var(--mo-gray-tint,var(--c-gray-tint));color:var(--muted);
display:flex;align-items:center;justify-content:center;font-size:var(--fs-14);font-weight:700;flex-shrink:0}
.opt.sel .ot{background:var(--brand);color:var(--c-card)}
.subbar{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.97);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-top:1px solid var(--line);
padding: var(--sp-2) 16px;z-index: calc(var(--z-sticky) - 40)}
.subbar .in{max-width:720px;margin:0 auto;display:flex;align-items:center;gap: 12px}
.prog{flex:1;min-width:0}
.prog .bar{height:6px;background:var(--c-line);border-radius: var(--r-pill);overflow:hidden}
.prog .fill{height:100%;background:var(--brand);width:0;transition:width .25s}
.prog .txt{font-size:var(--fs-14);color:var(--muted);margin: 4px}
.result-hero{text-align:center;padding: var(--sp-6) 0 var(--sp-1)}
.result-hero .score{font-size: var(--fs-40);font-weight:800;color:var(--brand);line-height:1}
.wrong{background:var(--c-card);border:1px solid var(--c-danger-tint);border-radius: 10px;padding: var(--sp-3);
margin: var(--sp-2);font-size:var(--fs-14)}
.wrong .wq{font-weight:700;margin: var(--sp-1);line-height:1.55}
.wrong .wy{color:var(--danger);font-size:var(--fs-14)}
.wrong .wc{color:var(--ok);font-size:var(--fs-14);margin: 2px}
.wrong .wa{margin: var(--sp-2);font-size: var(--fs-14);color:var(--muted);background:var(--c-gray-tint);
border-radius: var(--r-xs);padding: 8px var(--sp-2);line-height:1.6}
.err-box{text-align:center;padding: var(--sp-10) 20px;color:var(--muted)}
.err-box .ic{font-size: var(--fs-40);margin: 12px}
.mask{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index: var(--z-drawer);display:flex;
align-items:center;justify-content:center;padding: var(--sp-4);overflow-y:auto}
.modal{background:var(--c-card);border-radius: var(--r-lg);width:100%;max-width:660px;max-height:88vh;
overflow-y:auto;padding: var(--sp-5);margin:auto}
.modal h3{font-size:var(--fs-16);margin: 16px}
.toast{position:fixed;left:50%;top:22px;transform:translateX(-50%);background:var(--c-info);
color:var(--c-card);padding: var(--sp-3) 20px;border-radius: var(--r-sm);font-size: var(--fs-14);z-index:var(--z-toast);display:none;
  max-width:calc(100vw - 32px);text-align:center;line-height:1.5}
/* ===== 登录鉴权 ===== */
.login-mask{position:fixed;inset:0;background:linear-gradient(135deg,var(--brand),var(--brand2));
  display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding: 20px}
.login-card{background:var(--c-card);border-radius: 16px;padding: var(--sp-7) var(--sp-6);width:100%;max-width:360px;
  box-shadow:0 20px 60px rgba(0,0,0,.28)}
.login-card h2{font-size: var(--fs-20);color:var(--brand);margin: 2px}
.login-card .sub{font-size:var(--fs-14);color:var(--muted);margin: var(--sp-4)}
.login-card .input{margin: 12px}
.login-err{color:var(--danger);font-size:var(--fs-14);min-height:18px;margin: 8px}
.login-tip{font-size:var(--fs-14);color:var(--c-gray-2);margin: 12px;text-align:center;line-height:1.6}
.nav-logout{margin-left:auto;font-size:var(--fs-14);color:var(--sg-green-line,var(--c-brand-line));cursor:pointer;
  background:rgba(255,255,255,.12);padding: var(--sp-1) 12px;min-height:34px;display:inline-flex;
  align-items:center;border-radius: 8px}
.nav-logout:hover{background:rgba(255,255,255,.22)}
/* ===== 云端同步设置 ===== */
.cloud-bar{display:flex;gap: 8px;align-items:center;flex-wrap:wrap;margin: var(--sp-3)}
.cloud-dot{width:9px;height:9px;border-radius: 50%;background:var(--muted)}
.cloud-dot.on{background:var(--ok)}

/* ===== 触屏与手机竖屏统一适配（对齐 assets/css/app.css 交互层） ===== */
@media (pointer: coarse), (max-width: 750px){
  .btn{min-height:46px;padding: var(--sp-3) 16px;font-size: var(--fs-14);}
  .btn-sm{min-height:40px;padding: 8px var(--sp-3);font-size:var(--fs-14);}
  .input,.login-card .input{min-height:46px;height:46px;font-size:var(--fs-16);}
  textarea.input{height:auto;min-height:88px;}
  .nav-item{min-height:48px;display:flex;align-items:center;justify-content:center;}
  .nav-logout{min-height:44px;}
  .opt{min-height:52px;padding: var(--sp-3) var(--sp-4);}
  .pick-item{padding: 12px var(--sp-3);}
  .qitem{padding: var(--sp-3);}
  .login-card .btn{min-height:48px;font-size: var(--fs-15);}
  .subbar{padding:10px 16px calc(10px + env(safe-area-inset-bottom));}
  .exam-wrap{padding: var(--sp-10);}
}
@media (max-width:560px){
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .qitem .acts{flex-wrap:wrap;}
  .navbar .in{padding: var(--sp-2) var(--sp-3);}
  .modal{padding: 16px;}
  .login-card{padding: 24px 20px;}
}


/* ---- 自内联 style 抽取（§10.1 页面禁止内联样式） ---- */
.u1 { display:none; }
.u2 { color:var(--c-info);font-size: var(--fs-13);margin: var(--sp-1); }
.u3 { margin: var(--sp-4); }
.u4 { margin-left:auto;font-size: var(--fs-13);color:var(--muted); }
.u5 { display:flex;align-items:center;gap: 8px;margin: var(--sp-2); }
.u6 { width:22px;font-weight:700;color:var(--brand);font-size:var(--fs-13);flex-shrink:0; }
.u7 { flex:1;background:var(--c-gray-tint); }
.u8 { flex:1; }
.u9 { font-size: var(--fs-13);white-space:nowrap;display:flex;align-items:center;gap: 4px;cursor:pointer;flex-shrink:0; }
.u10 { flex-shrink:0;padding: var(--sp-1) 8px; }
.u11 { display:grid;grid-template-columns:1fr 1fr 1fr;gap: 12px;margin: 12px; }
.u12 { margin: 12px; }
.u13 { background:var(--c-gray-tint);border-radius: var(--r-sm);padding: 12px;font-size: var(--fs-13);color:var(--muted);margin: var(--sp-3); }
.u14 { margin: 8px;padding: 2px var(--sp-2);font-size: var(--fs-13); }
.u15 { margin: 16px; }
.u16 { display:flex;gap: var(--sp-2);justify-content:flex-end; }
.u17 { font-weight:600;line-height:1.5;font-size: var(--fs-14); }
.u18 { font-size: var(--fs-13);color:var(--muted);margin: var(--sp-1); }
.u19 { font-size: var(--fs-13);color:var(--c-gray-2);margin: 2px; }
.u20 { display:flex;gap: var(--sp-1);flex-wrap:wrap; }
.u21 { font-size: var(--fs-14);margin: var(--sp-2); }
.u22 { display:flex;flex-direction:column;align-items:center;gap: var(--sp-2); }
.u23 { font-size: var(--fs-13);color:var(--muted);word-break:break-all;text-align:center;max-width:420px; }
.u24 { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.u25 { color:var(--muted);font-size: var(--fs-13);flex-shrink:0; }
.u26 { display:flex;gap: var(--sp-1);flex-shrink:0; }
.u27 { padding: 2px var(--sp-2); }
.u28 { font-size: var(--fs-14);margin: var(--sp-3); }
.u29 { display:grid;grid-template-columns:1fr 1fr;gap: 12px;margin: 12px; }
.u30 { display:grid;grid-template-columns:repeat(3,1fr);gap: 12px;margin: 12px; }
.u31 { background:var(--c-gray-tint); }
.u32 { display:grid;grid-template-columns:1fr 1fr;gap: 12px; }
.u33 { font-size: var(--fs-13);display:flex;align-items:center;gap: var(--sp-1);margin: var(--sp-1);cursor:pointer; }
.u34 { font-size: var(--fs-13);display:flex;align-items:center;gap: var(--sp-1);cursor:pointer; }
.u35 { display:flex;justify-content:space-between;align-items:center;margin: 12px; }
.u36 { font-size: var(--fs-14); }
.u37 { padding: var(--sp-6) 0;font-size: var(--fs-13); }
.u38 { display:flex;gap: 8px;margin: var(--sp-2); }
.u39 { flex:1;min-width:0; }
.u40 { flex-shrink:0; }
.u41 { max-height:430px;overflow-y:auto; }
.u42 { width:100%;padding: 12px; }
.u43 { width:100%;padding: var(--sp-2);margin: 8px; }
.u44 { padding: var(--sp-5) 0;font-size: var(--fs-13); }
.u45 { margin: var(--sp-1);pointer-events:none;flex-shrink:0; }
.u46 { font-size: var(--fs-13);font-weight:600;line-height:1.5; }
.u47 { font-size: var(--fs-13);color:var(--muted);margin: 2px; }
.u48 { font-size: var(--fs-13);color:var(--warn);padding: 20px; }
.u49 { display:flex;gap: var(--sp-2);align-items:center;flex-wrap:wrap;margin: 16px; }
.u50 { font-size:var(--fs-13);font-weight:600; }
.u51 { width:auto;min-width:220px; }
.u52 { margin: var(--sp-3); }
.u53 { overflow-x:auto; }
.u54 { display:flex;gap: 8px;justify-content:center;align-items:center;margin: 12px;font-size: var(--fs-13);color:var(--muted);flex-wrap:wrap; }
.u55 { font-size: var(--fs-13);color:var(--muted);padding: 4px 0; }

.u57 { border:1px solid var(--line);border-radius: var(--r-sm);padding: var(--sp-3) var(--sp-3);margin: var(--sp-2);font-size: var(--fs-13); }
.u58 { font-weight:700;line-height:1.55;margin: var(--sp-1); }

.u60 { color:var(--ok);margin: var(--sp-1); }
.u61 { margin: var(--sp-1);color:var(--muted);background:var(--c-gray-tint);border-radius: var(--r-xs);padding: var(--sp-2) var(--sp-2);line-height:1.6; }
.u62 { display:flex;justify-content:space-between;align-items:flex-start;gap: 12px;margin: var(--sp-3); }
.u63 { margin: 4px; }

.u65 { font-size: var(--fs-13);color:var(--muted); }
.u66 { max-height:62vh;overflow-y:auto; }
.u67 { font-size:var(--fs-17);color:var(--text); }
.u68 { font-size: var(--fs-13);margin: 8px; }
.u69 { margin: var(--sp-2); }
.u70 { font-size: var(--fs-13);color:var(--muted);white-space:nowrap; }
.u71 { font-size:var(--fs-13);color:var(--muted);line-height:1.7; }
.u72 { padding: var(--sp-3) var(--sp-5); }
.u73 { font-size:var(--fs-15);color:var(--danger);margin: 20px 0 var(--sp-2); }
.u74 { text-align:center;padding: var(--sp-6) 0; }
.u75 { font-size: var(--fs-40); }
.u76 { color:var(--ok);font-weight:700;margin: 8px; }
.u77 { color:var(--muted);margin: var(--sp-1); }
.u78 { margin: 12px; }
.u80 { font-size: var(--fs-13);color:var(--c-info);margin: 12px; }
.u81 { width:100%;margin: var(--sp-4);padding: 12px; }

/* ---- 自脚本模板抽取（§10.1） ---- */
.u82 { margin: 8px;padding: 2px var(--sp-2);font-size: var(--fs-13); }
.u83 { background:var(--c-gray-tint); }
.u84 { flex-shrink:0; }
.u85 { width:100%;padding: 12px; }
.u86 { width:100%;padding: var(--sp-2);margin: 8px; }

/* ---- 收尾：按钮与只读态（§10.1） ---- */
.u5 { margin-left: var(--sp-2); padding: 2px var(--sp-2); font-size: var(--fs-13); }
.u6 { background: var(--c-gray-tint); }
.u7 { flex-shrink: 0; }
.u8 { width: 100%; padding: var(--sp-3); }
.u9 { width: 100%; padding: var(--sp-2); margin-top: var(--sp-2); }