/* ============================================================
   电子商务专业模拟实训平台 · 全局样式
   设计风格：Morandi 中性灰调 / 浅色主题 / 圆角卡片
   ============================================================ */

/* ---------- 1. 设计变量 ---------- */
:root{
  /* 中性底色 */
  --bg:            #F4F5F7;
  --surface:       #FFFFFF;
  --surface-2:     #FAFBFC;
  --surface-3:     #F0F2F4;
  --border:        #E3E7EB;
  --border-strong: #D3D9DF;

  /* 文字 */
  --text:          #2E3847;
  --text-2:        #5B6875;
  --text-3:        #8D97A3;
  --text-inv:      #FFFFFF;

  /* 主色（雾蓝） */
  --brand:         #6B7F99;
  --brand-dark:    #4E6076;
  --brand-soft:    #E9EEF3;
  --brand-line:    #C4D0DC;

  /* 语义色 */
  --ok:            #7E9C83;
  --ok-soft:       #EAF1EC;
  --warn:          #BFA06B;
  --warn-soft:     #F6F1E7;
  --err:           #B27A78;
  --err-soft:      #F6ECEC;
  --info:          #7C93A6;
  --info-soft:     #EBF0F4;

  /* 六大模块主题色（Morandi） */
  --m1: #7C93A6;  --m1-soft: #EBF0F4;   /* 战略 */
  --m2: #A98C96;  --m2-soft: #F5EFF1;   /* 用户 */
  --m3: #B09476;  --m3-soft: #F7F2EB;   /* 内容 */
  --m4: #8B9A7A;  --m4-soft: #EFF2EB;   /* 渠道 */
  --m5: #8C87A3;  --m5-soft: #F0EFF4;   /* 技术 */
  --m6: #6E8C8A;  --m6-soft: #EAF1F0;   /* 综合实战 */

  /* 尺寸 */
  --radius:   14px;
  --radius-lg:20px;
  --radius-sm:9px;
  --shadow-1: 0 1px 2px rgba(46,56,71,.04), 0 2px 8px rgba(46,56,71,.05);
  --shadow-2: 0 4px 12px rgba(46,56,71,.07), 0 12px 32px rgba(46,56,71,.06);
  --shadow-3: 0 18px 48px rgba(46,56,71,.16);
  --hd-h:     60px;
  --side-w:   216px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
          "Noto Sans CJK SC", sans-serif;
}

/* ---------- 2. 重置 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:var(--font);
  font-size:14px; line-height:1.65;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:var(--brand-dark); text-decoration:none; }
a:hover{ text-decoration:underline; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; padding:0; }
img,svg{ display:block; max-width:100%; }
code{ font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
      font-size:.92em; background:var(--surface-3); padding:1px 6px; border-radius:5px; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#D5DBE1; border-radius:6px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#BFC7CF; }
::-webkit-scrollbar-track{ background:transparent; }

/* 关键：类选择器上的 display 会覆盖 [hidden] 的浏览器默认样式
   （如 .modal-mask{display:grid} 会让 hidden 属性失效，导致遮罩常驻）。
   必须显式声明，否则带 hidden 属性的元素仍会显示。 */
[hidden]{ display:none !important; }

/* ---------- 3. 通用组件 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:36px; padding:0 16px; border-radius:var(--radius-sm);
  border:1px solid var(--border-strong); background:var(--surface);
  color:var(--text-2); font-size:13.5px; font-weight:500;
  transition:all .16s ease; white-space:nowrap;
}
.btn:hover{ background:var(--surface-3); color:var(--text); border-color:#BFC7CF; }
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--brand); border-color:var(--brand); color:#fff;
}
.btn-primary:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
.btn-ghost{ border-color:transparent; background:transparent; }
.btn-ghost:hover{ background:var(--surface-3); }
.btn-sm{ height:30px; padding:0 12px; font-size:12.5px; }
.btn-lg{ height:42px; padding:0 24px; font-size:15px; border-radius:11px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
/* 未作答时「下一步」的锁定态：仍可点击（点击会给出提示），仅视觉置灰 */
.btn.is-locked{ opacity:.45; }
.btn.is-locked:hover{ opacity:.6; background:var(--brand); border-color:var(--brand); color:#fff; }

.tag{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 9px; border-radius:20px; font-size:12px; font-weight:500;
  background:var(--surface-3); color:var(--text-2); line-height:1.7;
}
.tag-ok{ background:var(--ok-soft); color:#5F7D65; }
.tag-warn{ background:var(--warn-soft); color:#8E764A; }
.tag-err{ background:var(--err-soft); color:#955F5D; }
.tag-info{ background:var(--info-soft); color:#5F7484; }
.tag-brand{ background:var(--brand-soft); color:var(--brand-dark); }

.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
}
.icon-btn{
  width:30px; height:30px; display:grid; place-items:center;
  border-radius:8px; color:var(--text-3); transition:all .15s;
}
.icon-btn:hover{ background:var(--surface-3); color:var(--text); }
.link-btn{
  color:var(--brand-dark); font-size:12.5px; border-bottom:1px dashed var(--brand-line);
}
.link-btn:hover{ color:var(--brand); }

.empty{
  padding:56px 20px; text-align:center; color:var(--text-3);
}
.empty::before{
  content:""; display:block; width:44px; height:44px; margin:0 auto 12px;
  border-radius:12px; background:var(--surface-3);
}

/* ---------- 4. 登录页 ---------- */
.login-body{ background:var(--bg); overflow:hidden; }
.login-wrap{ display:flex; min-height:100vh; min-height:100dvh; }

.login-brand{
  flex:1 1 52%; position:relative; overflow:hidden;
  background:linear-gradient(150deg,#5C7089 0%,#7C93A6 42%,#93A3A8 100%);
  color:#fff; padding:56px 64px; display:flex; align-items:center;
}
.login-brand::after{
  content:""; position:absolute; right:-140px; bottom:-180px;
  width:460px; height:460px; border-radius:50%;
  background:rgba(255,255,255,.07);
}
.login-brand::before{
  content:""; position:absolute; left:-90px; top:-120px;
  width:280px; height:280px; border-radius:50%;
  background:rgba(255,255,255,.05);
}
.brand-inner{ position:relative; z-index:2; max-width:560px; width:100%; }
.brand-logo{ display:flex; align-items:center; gap:14px; margin-bottom:44px; }
.logo-mark{
  width:46px; height:46px; border-radius:13px; flex:none;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3);
  display:grid; place-items:center; font-size:22px; font-weight:700;
  font-family:Georgia,"Times New Roman",serif;
}
.logo-mark.sm{ width:28px; height:28px; border-radius:8px; font-size:14px; }
.logo-text strong{ display:block; font-size:17px; letter-spacing:.4px; }
.logo-text em{ display:block; font-style:normal; font-size:11px; opacity:.72; letter-spacing:1.2px; }

.brand-title{ font-size:32px; line-height:1.45; font-weight:600; letter-spacing:.5px; margin-bottom:18px; }
.brand-desc{ font-size:14.5px; line-height:1.9; opacity:.85; margin-bottom:34px; }
.brand-list{ display:grid; gap:13px; }
.brand-list li{ display:flex; align-items:center; gap:11px; font-size:13.5px; opacity:.92; }
.dot{ width:8px; height:8px; border-radius:50%; flex:none; background:rgba(255,255,255,.75); }
.dot-1{ background:#D9E2EA; } .dot-2{ background:#E4D3D9; } .dot-3{ background:#E6D8C6; }
.dot-4{ background:#DCE2D2; } .dot-5{ background:#DFDCE9; } .dot-6{ background:#CFE0DE; }
.brand-foot{ margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.16);
             font-size:12px; opacity:.68; }

.login-panel{ flex:0 0 480px; display:flex; align-items:center; justify-content:center; padding:40px 32px; }
.login-card{ width:100%; max-width:380px; }

.role-switch{
  display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px;
  background:var(--surface-3); border-radius:11px; margin-bottom:26px;
}
.role-btn{
  height:34px; border-radius:8px; font-size:13.5px; font-weight:500;
  color:var(--text-2); transition:all .16s;
}
.role-btn.is-active{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-1); }

.login-title{ font-size:22px; font-weight:600; margin-bottom:6px; }
.login-sub{ font-size:13px; color:var(--text-3); margin-bottom:24px; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; color:var(--text-2); margin-bottom:7px; font-weight:500; }
.field input[type=text], .field input[type=password]{
  width:100%; height:42px; padding:0 14px; border-radius:10px;
  border:1px solid var(--border-strong); background:var(--surface);
  transition:all .16s; font-size:14px;
}
.field input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(107,127,153,.13); outline:none; }
.field input::placeholder{ color:#B6BEC6; }
.pwd-box{ position:relative; }
.pwd-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  height:30px; padding:0 10px; font-size:12px; color:var(--text-3); border-radius:7px;
}
.pwd-toggle:hover{ color:var(--text); background:var(--surface-3); }

.login-extra{
  display:flex; align-items:center; justify-content:space-between;
  margin:6px 0 18px; font-size:12.5px; color:var(--text-2);
}
.remember{ display:flex; align-items:center; gap:7px; cursor:pointer; }
.remember input{ accent-color:var(--brand); width:14px; height:14px; }

.login-error{
  font-size:12.5px; color:#955F5D; background:var(--err-soft);
  border:1px solid #E8D5D4; border-radius:9px; padding:9px 12px; margin-bottom:14px;
}
#loginBtn{ height:42px; font-size:15px; border-radius:11px; letter-spacing:3px; }

.login-tip{
  margin-top:26px; padding:15px 16px; border-radius:12px;
  background:var(--surface-2); border:1px dashed var(--border-strong);
}
.login-tip strong{ display:block; font-size:12.5px; color:var(--text-2); margin-bottom:9px; }
.demo-grid{ display:grid; gap:6px; font-size:12.5px; color:var(--text-2); }
.demo-grid div{ display:flex; align-items:center; gap:8px; }
.demo-grid span{ color:var(--text-3); width:32px; flex:none; }
.tip-note{ margin-top:11px; font-size:11.5px; color:var(--text-3); line-height:1.7; }

/* ---------- 5. 应用外壳 ---------- */
.app-body{ display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; }

.app-header{
  height:var(--hd-h); flex:none; display:flex; align-items:center; gap:18px;
  padding:0 20px; background:var(--surface); border-bottom:1px solid var(--border);
  z-index:40; position:relative;
}
.hd-left{ display:flex; align-items:center; gap:10px; }
.hd-brand{ display:flex; align-items:center; gap:9px; }
.hd-brand .logo-mark{
  background:var(--brand); border-color:var(--brand); color:#fff;
}
.hd-name{ font-size:15px; font-weight:600; letter-spacing:.3px; }

.hd-nav{ display:flex; align-items:center; gap:2px; margin-left:14px; flex:1; }
.hd-nav button{
  height:32px; padding:0 14px; border-radius:8px; font-size:13.5px;
  color:var(--text-2); transition:all .15s;
}
.hd-nav button:hover{ background:var(--surface-3); color:var(--text); }
.hd-nav button.is-active{ background:var(--brand-soft); color:var(--brand-dark); font-weight:500; }

.hd-right{ position:relative; margin-left:auto; }
.hd-user{ display:flex; align-items:center; gap:9px; padding:5px 9px; border-radius:10px; cursor:pointer; }
.hd-user:hover{ background:var(--surface-3); }
.avatar{
  width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-dark); font-size:13px; font-weight:600;
}
.hd-user-meta strong{ display:block; font-size:13px; line-height:1.3; }
.hd-user-meta em{ display:block; font-style:normal; font-size:11px; color:var(--text-3); line-height:1.3; }
.caret{ color:var(--text-3); }

.user-menu{
  position:absolute; right:0; top:calc(100% + 8px); width:186px; padding:6px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-2); z-index:60;
}
.user-menu button{
  display:block; width:100%; text-align:left; padding:9px 11px; border-radius:8px;
  font-size:13px; color:var(--text-2);
}
.user-menu button:hover{ background:var(--surface-3); color:var(--text); }
.user-menu button[data-act=logout]{ color:#955F5D; }

.app-shell{ flex:1; display:flex; overflow:hidden; }
.app-side{
  width:var(--side-w); flex:none; background:var(--surface);
  border-right:1px solid var(--border); padding:14px 10px; overflow-y:auto;
}
.app-side:empty{ display:none; }
.app-main{ flex:1; overflow-y:auto; padding:24px 28px 60px; scroll-behavior:smooth; }

.side-group{ margin-bottom:18px; }
.side-title{
  font-size:11px; color:var(--text-3); letter-spacing:1.2px; font-weight:600;
  padding:0 10px; margin-bottom:8px; text-transform:uppercase;
}
.side-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 11px; border-radius:9px; font-size:13.5px; color:var(--text-2);
  transition:all .15s; text-align:left;
}
.side-item:hover{ background:var(--surface-3); color:var(--text); }
.side-item.is-active{ background:var(--brand-soft); color:var(--brand-dark); font-weight:500; }
.side-item .si-dot{ width:6px; height:6px; border-radius:50%; flex:none; background:var(--border-strong); }
.side-item.is-active .si-dot{ background:var(--brand); }
.side-item .si-num{ margin-left:auto; font-size:11.5px; color:var(--text-3); }

/* ---------- 6. 页面通用 ---------- */
.page-head{ margin-bottom:22px; }
.page-head h1{ font-size:23px; font-weight:600; letter-spacing:.3px; }
.page-head p{ font-size:13.5px; color:var(--text-2); margin-top:6px; max-width:760px; }
.crumb{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-3); margin-bottom:9px; }
.crumb button{ color:var(--text-3); }
.crumb button:hover{ color:var(--brand-dark); }
.crumb span.sep{ opacity:.5; }
.crumb strong{ color:var(--text-2); font-weight:500; }

.section{ margin-bottom:26px; }
.section-hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:12px; }
.section-hd h2{ font-size:16px; font-weight:600; }
.section-hd .sub{ font-size:12.5px; color:var(--text-3); }

/* 概览统计条 */
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px; }
.stat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow-1); position:relative; overflow:hidden;
}
.stat-card::after{
  content:""; position:absolute; right:-18px; top:-18px; width:64px; height:64px;
  border-radius:50%; background:var(--surface-3);
}
.stat-card .lab{ font-size:12.5px; color:var(--text-3); }
.stat-card .val{ font-size:26px; font-weight:600; letter-spacing:.5px; margin-top:4px; position:relative; z-index:1; }
.stat-card .val small{ font-size:13px; font-weight:500; color:var(--text-3); margin-left:2px; }
.stat-card .hint{ font-size:11.5px; color:var(--text-3); margin-top:2px; }

/* ---------- 7. 六大模块网格（2行3列） ---------- */
.module-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.module-card{
  position:relative; overflow:hidden; text-align:left;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:24px 24px 20px;
  box-shadow:var(--shadow-1); transition:all .22s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; min-height:196px;
}
.module-card:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--border-strong);
}
.module-card .mc-bar{ position:absolute; left:0; top:0; bottom:0; width:4px; }
.module-card .mc-icon{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  margin-bottom:15px; color:#fff;
}
.module-card .mc-icon svg{ width:24px; height:24px; }
.module-card h3{ font-size:17.5px; font-weight:600; margin-bottom:5px; }
.module-card .mc-en{ font-size:11px; color:var(--text-3); letter-spacing:.8px; margin-bottom:11px; }
.module-card .mc-desc{ font-size:12.8px; color:var(--text-2); line-height:1.75; flex:1; }
.module-card .mc-foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--border);
}
.module-card .mc-count{ font-size:12px; color:var(--text-3); }
.module-card .mc-prog{ flex:1; margin-left:12px; }
.pbar{ height:5px; border-radius:3px; background:var(--surface-3); overflow:hidden; }
.pbar > i{ display:block; height:100%; border-radius:3px; transition:width .5s ease; }
.pbar-txt{ font-size:11.5px; color:var(--text-3); margin-top:5px; text-align:right; }

/* ---------- 8. 任务列表 ---------- */
.task-list{ display:grid; gap:12px; }
.task-item{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 20px; box-shadow:var(--shadow-1); transition:all .18s;
}
.task-item:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-2); transform:translateX(3px); }
.task-no{
  width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center;
  font-size:14px; font-weight:600; background:var(--surface-3); color:var(--text-2);
}
.task-body{ flex:1; min-width:0; }
.task-body h4{ font-size:14.5px; font-weight:600; margin-bottom:4px; }
.task-body p{ font-size:12.5px; color:var(--text-2); line-height:1.7; }
.task-meta{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.task-side{ text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.task-score{ font-size:19px; font-weight:600; letter-spacing:.5px; }
.task-score small{ font-size:12px; color:var(--text-3); font-weight:500; }

/* ---------- 9. 实训任务引擎 ---------- */
.task-wrap{ max-width:980px; margin:0 auto; }

.task-hero{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:24px 26px; box-shadow:var(--shadow-1); margin-bottom:18px; position:relative; overflow:hidden;
}
.task-hero::after{
  content:""; position:absolute; right:-60px; top:-60px; width:200px; height:200px;
  border-radius:50%; background:var(--surface-3);
}
.task-hero h1{ font-size:21px; font-weight:600; position:relative; z-index:1; }
.task-hero .th-meta{ display:flex; gap:8px; margin-top:11px; flex-wrap:wrap; position:relative; z-index:1; }
.task-hero .th-desc{ font-size:13.5px; color:var(--text-2); margin-top:13px; line-height:1.85; position:relative; z-index:1; }

/* 步骤条 */
.stepbar{
  display:flex; align-items:center; gap:0; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 18px; margin-bottom:18px; overflow-x:auto;
}
.step-node{ display:flex; align-items:center; gap:9px; flex:none; }
.step-dot{
  width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:12px; font-weight:600; background:var(--surface-3); color:var(--text-3);
  border:1.5px solid var(--border-strong); transition:all .2s;
}
.step-node.is-active .step-dot{ background:var(--brand); border-color:var(--brand); color:#fff; }
.step-node.is-done .step-dot{ background:var(--ok); border-color:var(--ok); color:#fff; }
.step-name{ font-size:12.5px; color:var(--text-3); white-space:nowrap; }
.step-node.is-active .step-name{ color:var(--text); font-weight:500; }
.step-node.is-done .step-name{ color:var(--text-2); }
.step-line{ flex:1; min-width:26px; height:1.5px; background:var(--border); margin:0 10px; }
.step-line.is-done{ background:var(--ok); }

/* 步骤卡片 */
.step-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-1); overflow:hidden;
}
.step-hd{ padding:20px 26px 0; }
.step-kicker{ font-size:11.5px; color:var(--text-3); letter-spacing:.8px; }
.step-hd h2{ font-size:17.5px; font-weight:600; margin:5px 0 0; }
.step-bd{ padding:18px 26px 26px; }

/* 题型：情境 / 理论 */
.brief-box{
  background:var(--surface-2); border:1px solid var(--border);
  border-left:3px solid var(--brand); border-radius:var(--radius-sm);
  padding:16px 18px; font-size:13.5px; line-height:1.9; color:var(--text-2);
}
.brief-box p + p{ margin-top:10px; }
.brief-box strong{ color:var(--text); }
.kv-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:16px; }
.kv-item{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; }
.kv-item .k{ font-size:11.5px; color:var(--text-3); }
.kv-item .v{ font-size:15px; font-weight:600; margin-top:3px; }

.theory-list{ display:grid; gap:11px; }
.theory-item{ display:flex; gap:12px; padding:14px 16px; background:var(--surface-2);
              border:1px solid var(--border); border-radius:var(--radius-sm); }
.theory-item .ti-no{
  width:22px; height:22px; flex:none; border-radius:7px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-dark); font-size:11.5px; font-weight:600;
}
.theory-item h5{ font-size:13.5px; font-weight:600; margin-bottom:3px; }
.theory-item p{ font-size:12.8px; color:var(--text-2); line-height:1.75; }

/* 题型：单选 / 多选 */
.opt-list{ display:grid; gap:10px; }
.opt{
  display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left;
  padding:14px 16px; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  background:var(--surface); transition:all .16s;
}
.opt:hover{ border-color:var(--brand-line); background:var(--surface-2); }
.opt.is-picked{ border-color:var(--brand); background:var(--brand-soft); }
.opt.is-right{ border-color:var(--ok); background:var(--ok-soft); }
.opt.is-wrong{ border-color:var(--err); background:var(--err-soft); }
.opt-mark{
  width:20px; height:20px; flex:none; border-radius:50%; border:1.5px solid var(--border-strong);
  display:grid; place-items:center; font-size:11px; font-weight:600; color:transparent; margin-top:1px;
}
.opt.is-picked .opt-mark{ border-color:var(--brand); background:var(--brand); color:#fff; }
.opt.is-right .opt-mark{ border-color:var(--ok); background:var(--ok); color:#fff; }
.opt.is-wrong .opt-mark{ border-color:var(--err); background:var(--err); color:#fff; }
.opt-body{ flex:1; }
.opt-body .ot{ font-size:13.5px; font-weight:500; line-height:1.6; }
.opt-body .od{ font-size:12.3px; color:var(--text-2); margin-top:4px; line-height:1.7; }

/* 题型：数据表格 */
.data-table{ width:100%; border-collapse:collapse; font-size:13px; }
.data-table th,.data-table td{ padding:10px 12px; text-align:right; border-bottom:1px solid var(--border); }
.data-table th:first-child,.data-table td:first-child{ text-align:left; }
.data-table thead th{ background:var(--surface-2); color:var(--text-2); font-weight:600; font-size:12.5px; }
.data-table tbody tr:hover{ background:var(--surface-2); }
.data-table tfoot td{ font-weight:600; background:var(--surface-2); }
.tbl-wrap{ border:1px solid var(--border); border-radius:var(--radius-sm); overflow:auto; margin:14px 0; }
.trend-up{ color:#B5534E; }   /* 中国习惯：涨=红 */
.trend-down{ color:#4F7A5B; } /* 跌=绿 */

/* 题型：排序 */
.sort-list{ display:grid; gap:8px; }
.sort-item{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
}
.sort-item .si-order{
  width:24px; height:24px; flex:none; border-radius:7px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-dark); font-size:12px; font-weight:600;
}
.sort-item .si-txt{ flex:1; font-size:13.5px; }
.sort-item .si-btns{ display:flex; gap:4px; }
.sort-item .si-btns button{
  width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
  color:var(--text-3); border:1px solid var(--border);
}
.sort-item .si-btns button:hover{ background:var(--surface-3); color:var(--text); }
.sort-item.is-correct{ border-color:var(--ok); background:var(--ok-soft); }
.sort-item.is-wrong{ border-color:var(--err); background:var(--err-soft); }

/* 题型：填空 / 数值 */
.fill-item{ margin-bottom:14px; }
.fill-item label{ display:block; font-size:13px; color:var(--text-2); margin-bottom:7px; }
.fill-item input,.fill-item textarea,.fill-item select{
  width:100%; padding:10px 13px; border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); background:var(--surface); font-size:13.5px; transition:all .16s;
}
.fill-item textarea{ min-height:110px; resize:vertical; line-height:1.8; }
.fill-item input:focus,.fill-item textarea:focus,.fill-item select:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(107,127,153,.12); outline:none;
}
.fill-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }

/* 表单辅助：必选标记 / 说明文字 / 勾选行 */
.req{
  margin-left:4px; padding:1px 6px; border-radius:4px; font-size:11px; font-weight:600;
  color:var(--brand); background:rgba(107,127,153,.12); vertical-align:1px;
}
.fill-hint{ margin-top:8px; font-size:12.3px; line-height:1.75; color:var(--text-3); }
.fill-hint strong{ color:var(--text-2); font-weight:600; }
.fill-check{
  display:flex; align-items:flex-start; gap:8px; cursor:pointer;
  font-size:12.5px; line-height:1.7; color:var(--text-2);
}
.fill-check input{ margin-top:3px; width:15px; height:15px; accent-color:var(--brand); flex:none; }
/* 学号等只读字段：视觉上明确区别于可编辑项 */
.fill-item input:disabled{
  background:var(--surface-2); color:var(--text-3); cursor:not-allowed;
}

/* 题型：预算分配 */
.budget-list{ display:grid; gap:11px; margin-bottom:14px; }
.budget-row{
  display:grid; grid-template-columns:150px 1fr 118px; align-items:center; gap:14px;
  padding:11px 14px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
}
.budget-row .bl{ font-size:13px; font-weight:500; }
.budget-row .bl em{ display:block; font-style:normal; font-size:11.5px; color:var(--text-3); font-weight:400; }
.budget-row input[type=range]{ width:100%; accent-color:var(--brand); }
.budget-row .bv{ display:flex; align-items:center; gap:4px; justify-content:flex-end; }
.budget-row .bv input{ width:74px; padding:6px 8px; text-align:right; border:1px solid var(--border-strong);
                        border-radius:7px; font-size:13px; }
.budget-sum{
  display:flex; align-items:center; justify-content:space-between; padding:13px 16px;
  background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:var(--radius-sm);
  font-size:13.5px;
}
.budget-sum strong{ font-size:17px; margin-left:4px; }
.budget-sum.is-over{ border-color:var(--err); background:var(--err-soft); color:#955F5D; }

/* 题型：仿真 */
.sim-panel{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:18px; }
.sim-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-bottom:16px; }
.sim-ctrl label{ display:flex; justify-content:space-between; font-size:12.8px; color:var(--text-2); margin-bottom:7px; }
.sim-ctrl label b{ color:var(--text); font-weight:600; }
.sim-ctrl input[type=range]{ width:100%; accent-color:var(--brand); }
.sim-result{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.sim-res{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:13px 15px; }
.sim-res .k{ font-size:11.5px; color:var(--text-3); }
.sim-res .v{ font-size:20px; font-weight:600; margin-top:3px; }

/* 题型：匹配 */
.match-grid{ display:grid; gap:10px; }
.match-row{
  display:grid; grid-template-columns:1fr 22px 1fr; align-items:center; gap:12px;
  padding:12px 14px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
}
.match-row .ml{ font-size:13.2px; }
.match-row select{ width:100%; padding:8px 10px; border:1px solid var(--border-strong);
                   border-radius:7px; background:var(--surface); font-size:13px; }
.match-arrow{ text-align:center; color:var(--text-3); }
.match-row.is-right{ border-color:var(--ok); background:var(--ok-soft); }
.match-row.is-wrong{ border-color:var(--err); background:var(--err-soft); }

/* 反馈区 */
.feedback{
  margin-top:18px; padding:15px 17px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border); font-size:13px; line-height:1.85;
}
.feedback.is-ok{ background:var(--ok-soft); border-color:#CFE0D3; }
.feedback.is-warn{ background:var(--warn-soft); border-color:#E9DCC2; }
.feedback.is-err{ background:var(--err-soft); border-color:#E8D5D4; }
.feedback h5{ font-size:13px; font-weight:600; margin-bottom:6px; display:flex; align-items:center; gap:7px; }
.feedback p{ color:var(--text-2); }
.feedback .fb-score{ margin-left:auto; font-size:13px; font-weight:600; }

/* 步骤底部操作 */
.step-ft{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:22px; padding-top:18px; border-top:1px solid var(--border);
}
.step-ft .left{ font-size:12.5px; color:var(--text-3); }

/* ---------- 10. 结算报告 ---------- */
.report-hero{
  background:linear-gradient(140deg,#6B7F99,#8C9EAE); color:#fff;
  border-radius:var(--radius-lg); padding:30px 32px; margin-bottom:20px;
  display:flex; align-items:center; gap:34px; position:relative; overflow:hidden;
}
.report-hero::after{ content:""; position:absolute; right:-70px; bottom:-90px; width:250px; height:250px;
                     border-radius:50%; background:rgba(255,255,255,.08); }
.rh-score{ text-align:center; flex:none; position:relative; z-index:1; }
.rh-score .num{ font-size:56px; font-weight:700; line-height:1; letter-spacing:-1px; }
.rh-score .lab{ font-size:12.5px; opacity:.85; margin-top:8px; }
.rh-body{ flex:1; position:relative; z-index:1; }
.rh-body h2{ font-size:20px; font-weight:600; margin-bottom:8px; }
.rh-body p{ font-size:13.5px; opacity:.88; line-height:1.85; }

.review-list{ display:grid; gap:11px; }
.review-item{
  display:flex; gap:13px; padding:14px 16px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm);
}
.review-item .ri-no{ width:22px; height:22px; flex:none; border-radius:7px; display:grid; place-items:center;
                     font-size:11.5px; font-weight:600; background:var(--surface-3); color:var(--text-2); }
.review-item.ok .ri-no{ background:var(--ok-soft); color:#5F7D65; }
.review-item.warn .ri-no{ background:var(--warn-soft); color:#8E764A; }
.review-item.err .ri-no{ background:var(--err-soft); color:#955F5D; }
.review-item .ri-body{ flex:1; }
.review-item .ri-t{ font-size:13.5px; font-weight:500; margin-bottom:3px; }
.review-item .ri-d{ font-size:12.5px; color:var(--text-2); line-height:1.75; }
.review-item .ri-s{ flex:none; font-size:13px; font-weight:600; color:var(--text-2); }

/* ---------- 11. 教师端 ---------- */
.filter-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;
}
.filter-bar input,.filter-bar select{
  height:34px; padding:0 12px; border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); background:var(--surface); font-size:13px;
}
.filter-bar input{ width:210px; }
.filter-bar input:focus,.filter-bar select:focus{ border-color:var(--brand); outline:none; }

.tbl-plain{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl-plain th,.tbl-plain td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--border); }
.tbl-plain thead th{ background:var(--surface-2); color:var(--text-2); font-weight:600; font-size:12.5px; }
.tbl-plain tbody tr:hover{ background:var(--surface-2); }
.tbl-plain td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.stu-cell{ display:flex; align-items:center; gap:10px; }
.stu-cell .avatar{ width:28px; height:28px; font-size:12px; border-radius:8px; }

.mini-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.chart-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-1); }
.chart-card h4{ font-size:14px; font-weight:600; margin-bottom:3px; }
.chart-card .cc-sub{ font-size:12px; color:var(--text-3); margin-bottom:14px; }

/* ---------- 12. 弹窗 / Toast ---------- */
.modal-mask{
  position:fixed; inset:0; background:rgba(46,56,71,.42); backdrop-filter:blur(2px);
  display:grid; place-items:center; z-index:200; padding:24px;
}
.modal{
  width:100%; max-width:520px; max-height:82vh; display:flex; flex-direction:column;
  background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-3);
  animation:pop .18s ease;
}
/* 宽弹窗：承载规则卡片这类内容较多的展示 */
.modal.is-wide{ max-width:980px; max-height:88vh; }
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.985);} to{ opacity:1; transform:none;} }
.modal-hd{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border); }
.modal-hd h3{ font-size:16px; font-weight:600; }
.modal-bd{ padding:20px 22px; overflow-y:auto; font-size:13.5px; line-height:1.85; color:var(--text-2); }
.modal-ft{ display:flex; justify-content:flex-end; gap:10px; padding:14px 22px; border-top:1px solid var(--border); }
.modal-ft:empty{ display:none; }

/* pointer-events:none 避免空的提示容器遮挡顶部区域的点击 */
.toast-wrap{ position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:300; display:grid; gap:8px; pointer-events:none; }
.toast{
  padding:10px 18px; border-radius:10px; background:rgba(46,56,71,.93); color:#fff;
  font-size:13px; box-shadow:var(--shadow-2); animation:tin .22s ease; pointer-events:auto;
}
.toast.ok{ background:#5F7D65; } .toast.err{ background:#955F5D; } .toast.warn{ background:#8E764A; }
@keyframes tin{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:none;} }

/* ---------- 13. 图表 ---------- */
.chart-svg{ width:100%; height:auto; display:block; overflow:visible; }
.chart-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:12px; color:var(--text-2); }
.chart-legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; }

/* ---------- 14. 响应式 ---------- */
@media (max-width:1280px){
  .module-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-row{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1024px){
  .login-brand{ display:none; }
  .login-panel{ flex:1; }
  .app-main{ padding:20px 18px 50px; }
}
@media (max-width:820px){
  .module-grid{ grid-template-columns:1fr; }
  .app-side{ display:none; }
  .hd-nav{ display:none; }
  .stat-row{ grid-template-columns:1fr 1fr; }
  .budget-row{ grid-template-columns:1fr; gap:8px; }
  .budget-row .bv{ justify-content:flex-start; }
  .report-hero{ flex-direction:column; align-items:flex-start; gap:20px; }
}

/* ---------- 15. 打印（实训报告导出） ---------- */
@media print{
  .app-header,.app-side,.step-ft,.no-print{ display:none !important; }
  body{ background:#fff; }
  .app-main{ padding:0; overflow:visible; }
  .card,.step-card,.report-hero{ box-shadow:none; border-color:#ccc; }
}

/* ============================================================
   16. v2 新增：多平台规则相关组件
   ============================================================ */

/* 登录页平台介绍 */
.pf-intro{ display:grid; gap:12px; margin-bottom:28px; }
.pf-intro-item{ display:flex; align-items:flex-start; gap:11px; font-size:12.8px; opacity:.92; }
.pf-dot{ width:9px; height:9px; border-radius:50%; flex:none; margin-top:6px; }
.pf-intro-item strong{ display:block; font-size:13.5px; margin-bottom:1px; }
.pf-intro-item em{ display:block; font-style:normal; font-size:11.5px; opacity:.75; }

/* 三角色切换 */
.role-switch.three{ grid-template-columns:repeat(3,1fr); }

/* 平台切换条（任务内） */
.pf-bar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:11px 16px; margin-bottom:14px;
}
.pf-bar.single{ padding:9px 16px; }
.pf-label{ font-size:12.5px; color:var(--text-3); margin-right:2px; }
.pf-chip{
  height:28px; padding:0 13px; border-radius:14px; font-size:12.5px;
  border:1px solid var(--border-strong); background:var(--surface);
  color:var(--text-2); transition:all .16s;
}
.pf-chip:hover{ border-color:var(--brand); color:var(--brand-dark); }
.pf-chip.is-on{ color:#fff; border-color:transparent; font-weight:500; }
.pf-chip[disabled]{ opacity:.45; cursor:not-allowed; }
.pf-chip[disabled]:hover{ border-color:var(--border-strong); color:var(--text-2); }
.pf-desc,.pf-switch-desc{ font-size:12px; color:var(--text-3); margin-left:auto; }

/* 实训进行中锁定规则：切换条给出明确说明，避免学生以为按钮坏了 */
.pf-lock{
  display:flex; align-items:center; gap:7px; width:100%;
  margin-top:2px; padding-top:9px; border-top:1px dashed var(--border);
  font-size:12px; color:#8E764A;
}
.pf-lock b{ color:#955F5D; font-weight:600; }

/* 任务下发弹窗：带规则说明的勾选项 */
.cb-pf{ display:block; padding:10px 13px; margin-bottom:8px; }
.cb-pf-name{ font-weight:600; font-size:13px; }
.cb-pf em{ display:block; font-size:11.5px; color:var(--text-3); font-style:normal; margin:2px 0 5px; }
.cb-pf-detail{
  display:block; font-size:11.3px; line-height:1.75; color:var(--text-2);
  background:var(--surface-2); border-radius:6px; padding:7px 10px; margin-top:5px;
}

/* 首页：进行中任务已锁定规则的提示 */
.pf-lock-box{
  background:#FCF7EC; border:1px solid #EBDCBF; border-radius:var(--radius);
  padding:13px 18px; margin-bottom:20px;
}
.plb-hd{ font-size:12.8px; color:#8E764A; font-weight:500; margin-bottom:9px; }
.plb-list{ display:flex; flex-direction:column; gap:6px; }
.ip-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:8px 12px; font-size:12.5px; color:var(--text-2); transition:all .15s;
}
.ip-item:hover{ border-color:var(--brand); color:var(--text); }
.ip-name{ flex:1; font-weight:500; }
.ip-pf{ padding:1px 8px; border-radius:20px; font-size:11.5px; }
.ip-prog{ font-size:11.5px; color:var(--text-3); }

/* 步骤内的「本规则对本步骤的要求」提示条 */
.rule-bar{
  display:flex; align-items:flex-start; gap:9px; flex-wrap:wrap;
  border-radius:var(--radius-sm); padding:10px 14px; margin-bottom:15px;
  font-size:12.6px; line-height:1.75; color:var(--text-2);
}
.rb-tag{
  flex:none; padding:2px 9px; border-radius:20px; color:#fff;
  font-size:11.5px; font-weight:500; margin-top:1px;
}
.rb-txt{ flex:1; min-width:200px; }

/* 任务内的规则差异速览（切换前先看清楚差别） */
.pf-diff{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:9px;
  width:100%; margin-top:10px; padding-top:11px; border-top:1px dashed var(--border);
}
.pf-diff-item{
  background:var(--surface-2); border-radius:var(--radius-sm);
  padding:9px 12px; font-size:11.8px; line-height:1.7;
}
.pf-diff-item .k{ display:block; color:var(--text-3); font-size:11px; margin-bottom:2px; }
.pf-diff-item .v{ color:var(--text); font-weight:500; }

/* 首页平台切换器 */
.pf-switch{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:13px 18px; margin-bottom:20px;
}
.pf-switch-label{ font-size:12.5px; color:var(--text-2); font-weight:500; }

/* 平台标识徽章 */
.pf-badge{
  display:inline-flex; align-items:center; padding:2px 10px; border-radius:20px;
  font-size:12px; font-weight:500; background:var(--surface-3); color:var(--text-2);
}
.pf-badge.light{ background:rgba(255,255,255,.22); color:#fff; }

/* 知识卡片的平台规则提示 */
.pf-note{
  background:var(--info-soft); border:1px solid #D5DFE7; border-left:3px solid var(--info);
  border-radius:var(--radius-sm); padding:12px 15px; margin-bottom:14px;
  font-size:12.8px; line-height:1.8; color:var(--text-2);
}
.pf-note strong{ display:block; font-size:13px; color:var(--text); margin-bottom:3px; }

/* 合规区间提示与标记 */
.range-hint{
  font-size:12.3px; color:var(--warn); background:var(--warn-soft);
  border:1px dashed #E4D5B4; border-radius:var(--radius-sm);
  padding:9px 13px; margin-bottom:13px; line-height:1.7;
}
.rg-tag{
  display:inline-block; font-style:normal; font-size:11px; font-weight:400;
  padding:1px 7px; border-radius:4px; background:var(--warn-soft);
  color:#8E764A; border:1px solid #E9DCC2; margin-left:6px;
}
.unit{ font-style:normal; font-size:12px; color:var(--text-3); margin-left:4px; }
.warn-slot:empty{ display:none; }
.warn-box{
  margin-top:11px; padding:10px 13px; border-radius:var(--radius-sm);
  background:var(--err-soft); border:1px solid #E8D5D4;
  color:#955F5D; font-size:12.5px; line-height:1.8;
}

/* 标准化模板提示框 */
.tpl-box{
  background:var(--surface-2); border:1px solid var(--border);
  border-left:3px solid var(--brand); border-radius:var(--radius-sm);
  padding:13px 16px; margin-bottom:14px;
}
.tpl-box strong{ display:block; font-size:12.8px; color:var(--text); margin-bottom:7px; }
.tpl-box ul{ display:grid; gap:5px; }
.tpl-box li{ font-size:12.5px; color:var(--text-2); padding-left:14px; position:relative; }
.tpl-box li::before{ content:""; position:absolute; left:0; top:8px; width:5px; height:5px;
  border-radius:50%; background:var(--brand); }

/* 步骤内小元素 */
.step-lead{ font-size:13.5px; color:var(--text-2); margin-bottom:14px; line-height:1.85; }
.tbl-cap{ font-size:12.5px; color:var(--text-3); margin-bottom:8px; }
.chart-note{ font-size:12.5px; color:var(--text-3); margin-top:10px; line-height:1.8; }
.text-tip{ font-size:12.5px; color:var(--text-3); margin-bottom:10px; line-height:1.7; }
.fb-detail{ margin-top:6px; color:var(--text-3); font-size:12.5px; }
.fb-review{ margin-top:6px; color:var(--brand-dark); font-size:12.3px; }
.muted{ color:var(--text-3); }

/* 多周期迭代数据 */
.sim-series:empty{ display:none; }
.series-box{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--border);
}
.series-box h6{ font-size:13px; font-weight:600; margin-bottom:12px; color:var(--text-2); }
.sim-ctrl b.is-out{ color:#955F5D; }

/* 报告页 */
.review-tip{
  background:var(--info-soft); border:1px solid #D5DFE7; border-radius:var(--radius);
  padding:13px 17px; margin-bottom:20px; font-size:12.8px; line-height:1.85; color:var(--text-2);
}
.skill-row{ margin-bottom:14px; }
.skill-row:last-child{ margin-bottom:0; }
.sr-top{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; }
.sr-val{ font-weight:500; }

/* 侧边栏新增 */
.side-box{
  padding:12px 13px; background:var(--surface-2);
  border-radius:10px; border:1px solid var(--border);
}
.sb-row{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:7px; }
.sb-row:last-child{ margin-bottom:0; }
.sb-row strong{ font-weight:600; }
.side-notice{
  padding:10px 11px; background:var(--surface-2); border-radius:9px; margin-bottom:8px;
}
.side-notice strong{ display:block; font-size:12.3px; margin-bottom:3px; }
.side-notice p{ font-size:11.5px; color:var(--text-3); line-height:1.65; margin:0; }

/* 管理员端：平台规则卡片 */
.pf-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; }
/* 弹窗内两列排布，避免四张卡片挤成一列过长 */
.modal .pf-grid{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; }
.pf-grid-note{
  font-size:12.3px; line-height:1.8; color:var(--text-3);
  margin-bottom:14px; padding:9px 12px;
  background:var(--surface-2); border-radius:var(--radius-sm);
}
/* 规则卡片的「参数/推演/评分/关注/适用」速览 */
.pf-card-kv{
  display:grid; gap:5px; margin-bottom:13px;
  padding:10px 12px; background:var(--surface-2); border-radius:var(--radius-sm);
}
.pf-card-kv > div{ display:flex; gap:8px; font-size:11.8px; line-height:1.6; }
.pf-card-kv span{ flex:none; width:52px; color:var(--text-3); }
.pf-card-kv b{ font-weight:500; color:var(--text); }
.pf-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow-1);
}
.pf-card-hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.pf-card-hd h3{ font-size:16px; font-weight:600; }
.pf-card-desc{ font-size:12.8px; color:var(--text-2); line-height:1.8; margin-bottom:12px; }
.pf-feat{ display:grid; gap:6px; margin-bottom:14px; }
.pf-feat li{ font-size:12.5px; color:var(--text-2); padding-left:14px; position:relative; line-height:1.7; }
.pf-feat li::before{ content:"✓"; position:absolute; left:0; color:var(--ok); font-size:11px; }
.pf-card-ft{
  padding-top:13px; border-top:1px dashed var(--border); margin-bottom:14px;
}
.pf-card-ft strong{ display:block; font-size:12.5px; margin-bottom:7px; }
.pf-card-ft ul{ display:grid; gap:5px; }
.pf-card-ft li{ font-size:12.3px; color:var(--text-2); padding-left:12px; position:relative; line-height:1.7; }
.pf-card-ft li::before{ content:"·"; position:absolute; left:2px; color:var(--text-3); }
.pf-card-act{ text-align:right; }

/* 复选框列表 */
.cb-list{ display:grid; gap:9px; }
.cb-item{
  display:flex; align-items:flex-start; gap:9px; padding:10px 13px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); font-size:13px; cursor:pointer;
}
.cb-item input{ margin-top:3px; accent-color:var(--brand); }
.cb-item em{ display:block; font-style:normal; font-size:11.5px; color:var(--text-3); margin-top:2px; }

/* 公告 */
.notice-list{ display:grid; gap:12px; }
.notice-item{ background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:15px 18px; box-shadow:var(--shadow-1); }
.ni-hd{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.ni-hd strong{ font-size:14px; }
.ni-hd span{ font-size:11.5px; color:var(--text-3); }
.ni-hd button{ margin-left:auto; }
.notice-item p{ font-size:12.8px; color:var(--text-2); line-height:1.8; }

/* 日志 */
.log-list{ display:grid; gap:8px; max-height:320px; overflow-y:auto; }
.log-item{
  display:flex; gap:10px; align-items:baseline; padding:9px 12px;
  background:var(--surface-2); border-radius:8px; font-size:12.3px;
}
.li-act{ flex:none; font-weight:600; color:var(--brand-dark); }
.li-detail{ flex:1; color:var(--text-2); }
.li-time{ flex:none; font-size:11.5px; color:var(--text-3); }

/* 批阅 */
.review-q{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:13px 15px; margin-bottom:12px;
}
.rq-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.rq-top strong{ font-size:13.2px; }
.rq-cmt{ font-size:12.3px; color:var(--text-3); line-height:1.7; margin-bottom:8px; }
.answer-box{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:13px 15px; margin-bottom:14px;
}
.answer-box strong{ display:block; font-size:12.5px; margin-bottom:5px; }
.answer-box p{ font-size:12.8px; line-height:1.85; color:var(--text-2); }

/* 响应式补充 */
@media (max-width:1024px){
  .pf-grid{ grid-template-columns:1fr; }
  .pf-bar{ gap:6px; }
  .pf-desc{ margin-left:0; width:100%; }
}