/* 训练活动区四屏视觉层。仅覆盖颜色、材质与状态，不改变位置和内容。 */
.material-artboard {
  --gold: #ffd479;
  --training-ink: #0c0c10;
  --training-surface: rgba(12, 12, 16, .88);
  --training-line: rgba(242, 238, 230, .2);
  --training-text: #f2f2f2;
  --training-soft: rgba(242, 242, 242, .68);
  color: var(--training-text);
  background: var(--training-ink);
  font-synthesis: none;
}

.material-nav-icon { color: var(--training-text); text-shadow: 0 2px 12px #000; }
.material-nav-icon:hover,
.material-nav-icon:focus-visible { color: var(--gold); outline-color: var(--gold); }
.material-nav-home { box-shadow: 0 2px 12px #0008; }
.material-nav-status { color: var(--training-text); text-shadow: 0 2px 10px #000; }
.material-nav-status b { color: var(--gold); }

/* 选择：场景卡仍保持原来的三列照片构图。 */
.material-select {
  color: var(--training-text);
  background: radial-gradient(ellipse at 48% 29%, #303039 0, #1b1b22 46%, #0c0c10 100%);
}
.material-select::before {
  background: radial-gradient(ellipse at 50% 24%, rgba(255, 212, 121, .09), transparent 43%),
    repeating-linear-gradient(90deg, transparent 0 95px, rgba(255, 255, 255, .024) 96px 97px);
  mix-blend-mode: normal;
}
.material-select-heading small { color: var(--gold); text-shadow: 0 1px 10px #000; }
.material-select-heading h1 { color: var(--training-text); text-shadow: 0 2px 14px #000; }
.material-select-heading p { color: var(--training-soft); }
.material-scene-card::before { background: #090a0f; box-shadow: 18px 18px 30px #0008, inset 0 0 0 1px rgba(255,255,255,.025); }
.material-scene-card::after { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255,212,121,.08), 0 12px 24px #0007; }
.material-card-number { color: #262119; background: linear-gradient(180deg, #f0e7d7, #e2d7c2); box-shadow: 0 6px 12px #0006, inset 0 -1px rgba(54,42,27,.2); }
.material-card-image { border-color: #e8decc; box-shadow: 0 14px 28px #0009, inset 0 0 0 1px rgba(255,255,255,.25); }
.material-card-image img { filter: saturate(.72) contrast(1.08); }
.material-card-title { text-shadow: 0 3px 10px #000, 0 1px 2px #000; }
.material-card-title em { color: var(--gold); }
.material-card-title strong,
.material-card-title small { color: var(--training-text); }
.material-card-state { color: #221b12; background: linear-gradient(90deg, #ffd479, #f3c76b); box-shadow: 0 5px 14px #0006, inset 0 1px rgba(255,255,255,.32); }
.material-card-state.is-unlocked { color: #071b1b; background: linear-gradient(90deg, #74e1d0, #55cdbd); }
.material-card-state.is-manual { color: #221b12; background: linear-gradient(90deg, #ffd479, #f3c76b); }
.material-dock { background: linear-gradient(transparent, rgba(8, 8, 12, .91) 42%, #09090d); }
.material-dock button { color: var(--training-soft); }
.material-dock .is-current { border-color: var(--gold); color: var(--gold); }
.material-dock button:hover,
.material-dock button:focus-visible { color: var(--training-text); outline-color: var(--gold); }

/* 详情与准备：保留同一张场景图，统一暗幕、规则面和操作状态。 */
.material-detail,
.material-prepare { background: var(--training-ink); }
.material-scene-backdrop {
  background-image: linear-gradient(90deg, rgba(8, 8, 13, .16), rgba(8, 8, 13, .12) 45%, rgba(8, 8, 13, .77) 76%, rgba(8, 8, 13, .95)), var(--material-scene);
  filter: saturate(.72) brightness(.88);
}
.material-detail::after,
.material-prepare::after {
  background: linear-gradient(0deg, rgba(5, 5, 8, .78), transparent 24%),
    radial-gradient(ellipse at 55% 61%, transparent 17%, rgba(5, 5, 8, .33) 100%);
}
.material-timeline { border-bottom-color: rgba(242, 238, 230, .42); }
.material-timeline > small,
.material-timeline button[aria-pressed=true] { color: var(--training-text); }
.material-timeline button { color: var(--training-soft); }
.material-timeline button[aria-pressed=true] { text-shadow: 0 2px 10px #000, 0 0 14px rgba(255,212,121,.18); }
.material-timeline button[aria-pressed=true]::before { color: var(--gold); }
.material-detail-panel {
  background: linear-gradient(90deg, rgba(10, 10, 15, .69), rgba(10, 10, 15, .91)), repeating-linear-gradient(0deg, transparent 0 30px, rgba(255,255,255,.018) 31px 32px);
  box-shadow: -18px 0 40px rgba(0, 0, 0, .13);
}
.material-detail-top { border-bottom-color: var(--training-line); text-shadow: 0 2px 10px #000; }
.material-detail-top small { color: var(--gold); }
.material-detail.is-completed .material-detail-top small { color: #5eead4; }
.material-detail.is-completed .material-rule-row:nth-of-type(4) b { color: #5eead4; }
.material-detail-top p,
.material-rule-row span,
.material-detail-note { color: var(--training-soft); }
.material-rule-row { border-bottom-color: rgba(242, 238, 230, .13); }
.material-rule-row b,
.material-reward-preview small,
.material-reward-preview b { color: var(--gold); }
.material-mode-select button { color: var(--training-text); border-color: var(--training-line); background: rgba(255, 255, 255, .045); transition: color .18s, border-color .18s, background .18s, box-shadow .18s; }
.material-mode-select button[aria-pressed=true] { color: var(--gold); border-color: var(--gold); background: rgba(255, 212, 121, .11); }
.material-mode-select button:hover:not(:disabled),
.material-mode-select button:focus-visible { border-color: rgba(255,212,121,.78); background: rgba(255,212,121,.08); box-shadow: 0 0 0 1px rgba(255,212,121,.14); }
.material-mode-select button:disabled { opacity: 1; color: var(--training-soft); border-color: var(--training-line); background: rgba(255, 255, 255, .025); }
.material-start { color: #211b12; border-color: var(--gold); border-radius: 6px; background: linear-gradient(180deg, #ffdc86, #f4c86e); box-shadow: 0 9px 22px #0007, inset 0 1px rgba(255,255,255,.42); transition: filter .18s, box-shadow .18s; }
.material-start:hover:not(:disabled),
.material-start:focus-visible { filter: brightness(1.05); box-shadow: 0 11px 24px #0009, inset 0 1px rgba(255,255,255,.5); }
.material-start:disabled { opacity: 1; color: rgba(242, 242, 242, .72); border-color: rgba(242, 242, 242, .28); background: #23232b; box-shadow: none; }
.material-alert,
.material-cost-reason { color: #ff8e9c; }
.material-prepare .material-scene-backdrop { filter: saturate(.72) brightness(.72); }
.material-prepare-info small,
.material-decision > small { color: var(--gold); }
.material-prepare-stat { border-top-color: rgba(242, 238, 230, .4); }
.material-prepare-stat span,
.material-role-note { color: var(--training-soft); }
.material-prepare-stat b { color: var(--gold); }
.material-team-card { border-color: rgba(242, 238, 230, .48); box-shadow: 8px 8px 20px #0009; }
.material-team-card:hover,
.material-team-card:focus-visible { outline-color: var(--gold); }
.material-team-card::after { background: linear-gradient(transparent, rgba(8, 8, 12, .96)); }
.material-team-caption small { color: var(--gold); }
.material-decision button { color: var(--training-text); border-color: rgba(242, 238, 230, .38); background: rgba(9, 9, 14, .86); }
.material-decision button span { color: var(--gold); }
.material-decision button[aria-pressed=true] { border-color: var(--gold); background: rgba(255, 212, 121, .13); }

/* 结果：完成使用薄荷色，奖励沿用金色，阅读区仍保持原双栏。 */
.material-result { background: radial-gradient(ellipse at 26% 47%, #292725 0, #17191c 41%, #0c0c10 100%); }
.material-result::before {
  background: radial-gradient(circle at 11% 25%, rgba(255, 212, 121, .12), transparent 28%),
    repeating-linear-gradient(90deg, transparent 0 95px, rgba(255, 255, 255, .025) 96px 97px);
}
.material-result-art img { filter: saturate(.82) contrast(1.04); }
.material-result-content > small { color: #5eead4; }
.material-result-case { color: var(--gold); border-bottom-color: rgba(255, 212, 121, .42); text-shadow: 0 2px 10px #000; }
.material-result-measure { border-top-color: var(--training-line); border-bottom-color: var(--training-line); }
.material-result-measure b,
.material-result-reward small,
.material-result-reward b { color: var(--gold); }
.material-result-reward span { color: var(--training-soft); }
.material-result-reward .material-result-exp { color: #5eead4; }
.material-result-actions .primary { color: #211b12; border-color: var(--gold); background: linear-gradient(180deg, #ffdc86, #f4c86e); box-shadow: inset 0 1px rgba(255,255,255,.4), 0 8px 18px #0007; }
.material-result-actions .primary:hover,
.material-result-actions .primary:focus-visible { filter: brightness(1.05); }
.material-result-actions .text-action { color: var(--training-text); }
.material-result-actions .text-action:hover,
.material-result-actions .text-action:focus-visible { color: var(--gold); }
.app.is-material #modal .picker-list button.is-recommended:not(:disabled) { border-color: rgba(94,234,212,.7); color: #eafffb; background: rgba(94,234,212,.08); }
.app.is-material #modal .picker-list button.is-recommended:not(:disabled)::after { content: '推荐'; float: right; color: #5eead4; font: 500 10px/1.2 var(--mono); }

.training-resource-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap:.8%; }
.training-resource-grid .material-card-title strong { font-size:clamp(18px,2vw,30px); }
.training-resource-grid .material-card-title em { font-size:clamp(24px,3vw,42px); }
.training-resource-grid .material-card-state { left:6%; right:2%; font-size:clamp(8px,.8vw,11px); }
.material-scene-card-heart::after, .material-scene-card-tower::after, .material-scene-card-terminal::after { border-color: #9f8cff; }
.material-scene-card-heart .material-card-state, .material-scene-card-tower .material-card-state, .material-scene-card-terminal .material-card-state { background: linear-gradient(90deg, #9f8cff, #d8cfff); color: #161322; }
.special-glyph { display:grid; place-items:center; width:100%; height:100%; font-size:clamp(42px,7vw,92px); color:#d8cfff; text-shadow:0 0 28px #9f8cffaa; }
.material-special { min-height:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,420px); align-items:end; gap:40px; padding:clamp(32px,6vw,96px); background:radial-gradient(circle at 18% 38%,#9f8cff20,transparent 42%),linear-gradient(120deg,#0e1019,#0a0b10 65%); }
.material-special-copy small { color:#b8aaff; letter-spacing:.16em; }
.material-special-copy h1 { margin:.3em 0; font-size:clamp(34px,6vw,80px); }
.material-special-copy p { color:#c9c8d4; max-width:620px; font-size:clamp(14px,1.6vw,20px); line-height:1.7; }
.material-special-rule { display:flex; justify-content:space-between; gap:24px; max-width:620px; padding:16px 0; border-bottom:1px solid #ffffff20; color:#a9a7b5; }
.material-special-rule b { color:#f2f0f5; text-align:right; }
.material-special-actions { display:flex; flex-direction:column; gap:16px; align-items:stretch; }
.material-special-actions .secondary { min-height:48px; }
.heart-training { grid-template-columns:minmax(0,1fr) minmax(190px,300px); align-items:start; overflow:auto; }
.heart-training-list { display:grid; gap:10px; margin-top:14px; max-width:760px; }
.heart-training .heart-option > div:last-child span { color:#b8aaff; font-size:11px; line-height:1.5; }
.material-result.is-failed .material-result-content > small,.material-result.is-failed .material-result-reward b{color:#ef9b91}
.heart-slot-card { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:16px 0; padding:14px 16px; border:1px solid rgba(255,212,121,.25); background:rgba(255,255,255,.035); }
.heart-slot-card div { display:flex; flex-direction:column; gap:4px; }
.heart-slot-card small { color:#ffd479; letter-spacing:.12em; }
.heart-slot-card strong { color:#f4f0e8; }
.heart-slot-card span { color:#aaa8b2; font-size:12px; }
.heart-slot-card button { border:1px solid #ffd47980; background:#ffd47916; color:#ffd479; padding:10px 16px; min-height:44px; }
.heart-sheet { display:grid; gap:12px; }
.heart-sheet-note { color:#aaa8b2; line-height:1.6; }
.heart-option { display:flex; justify-content:space-between; gap:16px; padding:14px; border:1px solid #ffffff1c; background:#ffffff05; }
.heart-option.is-equipped { border-color:#ffd47999; background:#ffd4790d; }
.heart-option h3 { margin:4px 0; color:#f4f0e8; }
.heart-option p { margin:4px 0; color:#aaa8b2; font-size:12px; }
.heart-option > div:last-child { display:flex; flex-direction:column; gap:8px; min-width:76px; }
.heart-option button { min-height:40px; border:1px solid #ffffff35; background:#ffffff0a; color:#eee; }
.heart-option button[data-heart-equip] { border-color:#ffd47980; color:#ffd479; }
@media (max-width: 980px) { .training-resource-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap:.35%; } .training-resource-grid .material-card-number { font-size:7px; } .training-resource-grid .material-card-title small { display:none; } .material-special { grid-template-columns:1fr; align-content:end; } .heart-training{align-content:start} }
@media (max-width: 760px) { .heart-option { flex-direction:column; } }

/* V2.11: single-card training keeps only local navigation and matches detail metadata. */
.app:has(#training:not([hidden])) > .pact-topbar{display:none!important}
.training-card-meta{display:grid;justify-items:start;gap:5px}
.training-card-meta .character-stars{color:#f6dfa5;font-size:20px;letter-spacing:.18em;text-shadow:0 2px 12px #000}
.training-card-meta h2{margin:0;font-size:clamp(25px,2.2vw,36px)}
.training-card-meta p{margin:0;color:#ddd5ca;font-size:clamp(13px,1.1vw,17px)}
.training-card-meta .role-tag{margin-top:5px;padding:5px 12px;border:1px solid rgba(220,180,126,.55);border-radius:3px;background:rgba(220,180,126,.1);color:#e7c89c;font:600 12px/1.1 var(--serif)}
@media(max-width:1000px),(max-height:560px){.training-card-meta{gap:2px}.training-card-meta .character-stars{font-size:12px}.training-card-meta h2{font-size:18px}.training-card-meta p{font-size:11px}.training-card-meta .role-tag{margin-top:2px;padding:3px 7px;font-size:9px}}
.training-card-meta .character-stars{display:flex;gap:5px;width:auto}
.training-card-meta .character-stars svg{display:block;width:18px;height:18px;fill:#f6dfa5;stroke:#f6dfa5;filter:drop-shadow(0 2px 6px #000)}
@media(max-width:1000px),(max-height:560px){.training-card-meta .character-stars{gap:3px}.training-card-meta .character-stars svg{width:12px;height:12px}}

/* V2.14：按项目交互规范统一训练页材质与状态语义；不改动既有布局和信息。 */
.material-artboard{
  --training-surface:rgba(10,10,16,.88);
  --training-surface-soft:rgba(255,255,255,.04);
  --training-line:rgba(255,255,255,.14);
  --training-line-strong:rgba(255,255,255,.28);
  --training-complete:#5eead4;
  --training-danger:#ff8e9c;
}
#materialContentNav[hidden]{display:none!important}
.material-nav-title{margin-left:8px;color:var(--training-text);font:600 24px/1.2 var(--serif);letter-spacing:.12em}
.material-select{
  background:radial-gradient(ellipse at 50% 28%,#24242b 0,#15151c 48%,#0c0c10 100%);
}
.material-select::before{
  background:repeating-linear-gradient(90deg,transparent 0 95px,rgba(255,255,255,.018) 96px 97px),linear-gradient(180deg,rgba(255,255,255,.018),transparent 36%);
}
.material-nav-icon,.material-nav-status,.material-select-heading h1,.material-card-title{ text-shadow:none; }
.material-nav-icon:focus-visible,.material-scene-card:focus-visible,.material-dock button:focus-visible,.material-mode-select button:focus-visible,.material-start:focus-visible,.material-team-card:focus-visible,.material-decision button:focus-visible,.material-result-actions button:focus-visible,.material-special-actions button:focus-visible,.heart-option button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
.material-nav-status{padding:8px 12px;border:1px solid var(--training-line);border-radius:6px;background:rgba(10,10,16,.72);backdrop-filter:blur(12px)}
.material-nav-status b{font-variant-numeric:tabular-nums}
.material-scene-card::before{background:#09090d;box-shadow:12px 16px 28px rgba(0,0,0,.46),inset 0 0 0 1px rgba(255,255,255,.025)}
.material-scene-card::after{border-color:var(--training-line-strong);box-shadow:none}
.material-scene-card:hover::after,.material-scene-card:focus-visible::after{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(255,212,121,.24)}
.material-card-number{background:#eee9df;color:#15151c;box-shadow:0 6px 12px rgba(0,0,0,.32)}
.material-card-image{border-color:#eee9df;box-shadow:0 12px 24px rgba(0,0,0,.5)}
.material-card-image img{filter:saturate(.76) contrast(1.04) brightness(.92)}
.material-card-title em{color:var(--gold)}
.training-resource-grid .material-card-title strong{font:600 18px/1.4 var(--serif);letter-spacing:.08em}
.training-resource-grid .material-card-title small{font:500 10px/1.2 var(--mono)}
.material-card-state{border-left:2px solid var(--training-line-strong);background:rgba(10,10,16,.9);color:var(--training-text);box-shadow:0 5px 12px rgba(0,0,0,.34)}
.material-card-state.is-unlocked{border-left-color:var(--training-complete);background:rgba(10,31,31,.92);color:#d9fffa}
.material-card-state.is-manual{border-left-color:var(--gold);background:rgba(38,31,20,.94);color:#ffe7ae}
.material-scene-card-heart::after,.material-scene-card-tower::after,.material-scene-card-terminal::after{border-color:var(--training-line-strong)}
.material-scene-card-heart .material-card-state,.material-scene-card-tower .material-card-state,.material-scene-card-terminal .material-card-state{border-left-color:rgba(255,255,255,.38);background:rgba(10,10,16,.9);color:var(--training-text)}
.material-scene-card-terminal .material-card-state{border-left-color:var(--training-complete);color:#d9fffa}
.special-glyph{color:#e8dfd1;text-shadow:none}
.training-resource-grid .material-card-image{
  inset:7% 3% 10%;
  border:1px solid rgba(255,212,121,.3);
  border-radius:2px;
  background:#0d0e14;
  box-shadow:0 16px 30px rgba(0,0,0,.58),inset 0 0 42px rgba(255,212,121,.035);
  transform:none!important;
  clip-path:polygon(0 4%,8% 0,92% 0,100% 4%,100% 96%,92% 100%,8% 100%,0 96%);
}
.training-resource-grid .material-card-title{top:7%;left:6%;right:6%;display:flex;align-items:center;justify-content:center;gap:clamp(3px,.45vw,8px);overflow:hidden;padding-bottom:10px;border-bottom:1px solid rgba(255,212,121,.22);text-align:center}
.training-resource-grid .material-card-title em,
.training-resource-grid .material-card-title strong{font-size:clamp(11px,1.35vw,21px);line-height:1.2}
.training-resource-grid .material-card-title em{flex:none;font-family:var(--serif);font-weight:500}
.training-resource-grid .material-card-title strong{min-width:0;overflow:hidden;font-family:var(--serif);font-weight:600;letter-spacing:.02em;white-space:nowrap;text-overflow:clip}
.material-scene-card:hover::after{opacity:0}
.material-scene-card:focus-visible::after{opacity:1}
.material-scene-card-brief .material-card-image,
.material-scene-card-rescue .material-card-image,
.material-scene-card-coordination .material-card-image,
.material-scene-card-heart .material-card-image,
.material-scene-card-tower .material-card-image{
  background:radial-gradient(circle at 50% 55%,rgba(255,212,121,.12),transparent 21%),linear-gradient(165deg,#22232b 0,#101117 58%,#08090d 100%)
}
.material-scene-card-brief .material-card-image::before,
.material-scene-card-rescue .material-card-image::before,
.material-scene-card-coordination .material-card-image::before,
.material-scene-card-heart .material-card-image::before,
.material-scene-card-tower .material-card-image::before{
  content:"";position:absolute;left:50%;top:54%;width:68%;aspect-ratio:1;border:1px solid rgba(255,212,121,.24);border-radius:50%;box-shadow:0 0 0 18px rgba(255,212,121,.025),0 0 0 36px rgba(255,212,121,.015);transform:translate(-50%,-50%)
}
.material-scene-card-brief .material-card-image::after,
.material-scene-card-rescue .material-card-image::after,
.material-scene-card-coordination .material-card-image::after,
.material-scene-card-heart .material-card-image::after,
.material-scene-card-tower .material-card-image::after{
  content:"";position:absolute;left:50%;top:13%;bottom:13%;width:1px;background:linear-gradient(transparent,rgba(255,212,121,.34),transparent);box-shadow:-42px 0 rgba(255,212,121,.07),42px 0 rgba(255,212,121,.07)
}
.material-scene-card-brief .special-glyph,
.material-scene-card-rescue .special-glyph,
.material-scene-card-coordination .special-glyph,
.material-scene-card-heart .special-glyph,
.material-scene-card-tower .special-glyph{
  position:absolute;z-index:2;left:50%;top:54%;width:70px;height:70px;display:grid;place-items:center;border:1px solid rgba(255,212,121,.62);background:rgba(12,12,16,.88);color:var(--gold);font-size:42px;box-shadow:0 0 0 8px rgba(255,212,121,.05),0 0 28px rgba(255,212,121,.16);transform:translate(-50%,-50%)
}
.material-scene-card-brief .special-glyph,
.material-scene-card-rescue .special-glyph,
.material-scene-card-coordination .special-glyph,
.material-scene-card-heart .special-glyph{border-radius:50%}
.material-scene-card-tower .special-glyph{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.material-scene-card-terminal .terminal-preview{
  inset:7% 3% 10%;
  border:1px solid rgba(255,212,121,.3);
  border-radius:2px;
  background:radial-gradient(circle at 50% 55%,rgba(255,212,121,.13),transparent 22%),linear-gradient(165deg,#20212a 0,#0d0e14 58%,#07080c 100%);
  box-shadow:0 16px 30px rgba(0,0,0,.58),inset 0 0 42px rgba(255,212,121,.035);
  transform:none;
  clip-path:polygon(0 4%,8% 0,92% 0,100% 4%,100% 96%,92% 100%,8% 100%,0 96%);
}
.material-scene-card-terminal .terminal-preview::before{
  content:"";position:absolute;inset:12% 14%;border:1px solid rgba(255,212,121,.25);border-radius:50%;box-shadow:0 0 0 18px rgba(255,212,121,.025),0 0 0 36px rgba(255,212,121,.018);transform:rotate(-18deg)
}
.material-scene-card-terminal .terminal-preview::after{
  content:"";position:absolute;left:50%;top:11%;bottom:11%;width:1px;background:linear-gradient(transparent,rgba(255,212,121,.42),transparent);box-shadow:-42px 0 rgba(255,212,121,.09),42px 0 rgba(255,212,121,.09)
}
.terminal-orbit{position:absolute;left:50%;top:53%;border:1px solid rgba(255,212,121,.42);border-radius:50%;transform:translate(-50%,-50%) rotate(24deg)}
.terminal-orbit-a{width:76%;height:34%}
.terminal-orbit-b{width:38%;height:68%;transform:translate(-50%,-50%) rotate(58deg)}
.terminal-core{position:absolute;left:50%;top:53%;width:64px;height:64px;display:grid;place-items:center;border:1px solid rgba(255,212,121,.7);background:rgba(12,12,16,.92);box-shadow:0 0 0 8px rgba(255,212,121,.06),0 0 34px rgba(255,212,121,.2);transform:translate(-50%,-50%) rotate(45deg)}
.terminal-core .special-glyph{font-size:34px;color:var(--gold);transform:rotate(-45deg);text-shadow:0 0 18px rgba(255,212,121,.5)}
.material-dock{background:linear-gradient(transparent,rgba(8,8,12,.91) 42%,#09090d)}
.material-dock .is-current{border-color:transparent;color:var(--gold);font-weight:600}
.material-dock button:hover{color:var(--training-text)}
.material-detail-panel{background:rgba(10,10,16,.86);box-shadow:-1px 0 var(--training-line);backdrop-filter:blur(12px)}
.material-detail-top h1{font:600 20px/1.3 var(--serif);letter-spacing:.08em}
.material-timeline button[aria-pressed=true]{text-shadow:none}
.material-timeline button:disabled{opacity:.34;cursor:not-allowed}
.material-timeline button strong{overflow:hidden;text-overflow:ellipsis}
.material-mode-select button,.material-decision button,.heart-option button{border-radius:6px;background:var(--training-surface-soft)}
.material-mode-select button[aria-pressed=true],.material-decision button[aria-pressed=true]{background:rgba(255,212,121,.1);box-shadow:inset 0 0 0 1px rgba(255,212,121,.18)}
.material-start,.material-result-actions .primary{border-radius:6px;background:var(--gold);box-shadow:0 8px 18px rgba(0,0,0,.38)}
.material-start:hover:not(:disabled),.material-result-actions .primary:hover{filter:brightness(1.04);box-shadow:0 9px 20px rgba(0,0,0,.46)}
.material-team-card{border-color:var(--training-line-strong);border-radius:4px;box-shadow:8px 8px 18px rgba(0,0,0,.46)}
.material-prepare-info h1{font:600 20px/1.3 var(--serif)}
.material-result{background:radial-gradient(ellipse at 26% 47%,#242322 0,#15151c 43%,#0c0c10 100%)}
.material-result::before{background:repeating-linear-gradient(90deg,transparent 0 95px,rgba(255,255,255,.018) 96px 97px)}
.material-result-content,.material-result-case{text-shadow:none}
.material-result-content>h1{font:600 24px/1.3 var(--serif);letter-spacing:.08em}
.material-special{background:radial-gradient(circle at 18% 38%,rgba(255,212,121,.055),transparent 42%),linear-gradient(120deg,#101014,#0a0a0e 65%)}
.material-special-copy small{color:var(--gold)}
.material-special-copy h1{font:600 20px/1.3 var(--serif);letter-spacing:.06em}
.material-special-rule{border-bottom-color:var(--training-line);color:var(--training-soft)}
.heart-option{border-color:var(--training-line);border-radius:4px;background:var(--training-surface-soft)}
.heart-option.is-equipped{border-color:rgba(255,212,121,.62);background:rgba(255,212,121,.075)}
.heart-option button[data-heart-equip]{border-color:rgba(255,212,121,.5);color:var(--gold)}
@media (max-width:1000px),(max-height:560px){
  .material-nav-title{margin-left:4px;font-size:18px}
  .training-resource-grid .material-card-title{top:5%;left:5%;right:5%;gap:3px;padding-bottom:6px}.training-resource-grid .material-card-title em,.training-resource-grid .material-card-title strong{font-size:11px}
  .material-scene-card-brief .special-glyph,.material-scene-card-rescue .special-glyph,.material-scene-card-coordination .special-glyph,.material-scene-card-heart .special-glyph,.material-scene-card-tower .special-glyph{width:40px;height:40px;font-size:24px}
  .terminal-core{width:38px;height:38px}.terminal-core .special-glyph{font-size:22px}
  .material-nav-status{padding:6px 8px}
  .material-detail-top h1,.material-special-copy h1,.material-prepare-info h1{font-size:17px}
  .material-result-content>h1{font-size:19px}
}

/* V2.13: level dial interaction and live attribute preview. */
.pact-training .training-hero>.training-hero-info{left:24px;right:24px;bottom:22px;width:auto;display:grid;grid-template-columns:minmax(120px,.42fr) minmax(270px,1fr);align-items:end;gap:22px}
.training-stat-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:10px 0;border-top:1px solid rgba(226,205,172,.42);border-bottom:1px solid rgba(226,205,172,.22);background:linear-gradient(90deg,rgba(6,6,7,.76),rgba(6,6,7,.42))}
.training-stat-preview>small{grid-column:1/-1;padding:0 10px 7px;color:#d4b27e;font:600 12px/1.2 var(--serif);letter-spacing:.1em}
.training-stat-preview>span{display:grid;grid-template-columns:19px minmax(0,1fr) auto;align-items:center;gap:5px;min-height:32px;padding:4px 10px;color:#c8bcae}
.training-stat-preview svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}
.training-stat-preview em{font:normal 12px/1.2 var(--serif)}
.training-stat-preview b{font:600 12px/1 var(--mono);color:#d6d0c8;white-space:nowrap}
.training-stat-preview i{padding:0 2px;color:#b68a54;font-style:normal}
.training-stat-preview strong{color:#d9b979}
.level-selector{position:relative;display:grid;grid-template-rows:minmax(96px,1fr) auto auto auto;align-items:center;min-height:300px;border:1px solid rgba(231,215,190,.32);background:linear-gradient(145deg,rgba(239,232,220,.08),rgba(255,255,255,.015));overflow:hidden}
.level-selector:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent,rgba(220,180,126,.055),transparent 70%),repeating-linear-gradient(90deg,transparent 0 74px,rgba(255,255,255,.018) 75px 76px)}
.level-crest{align-self:stretch;display:grid;place-items:center;align-content:center;gap:5px;color:rgba(220,180,126,.65)}
.level-crest b{width:96px;height:76px;display:grid;place-items:center;border:2px solid currentColor;clip-path:polygon(50% 0,100% 100%,0 100%);font:34px/1 var(--serif)}
.level-crest span{font:9px/1 var(--mono);letter-spacing:.24em}
.level-selector-label{position:relative;z-index:1;text-align:center;color:#d6c8b6;font:17px/1 var(--serif);letter-spacing:.08em}
.level-selector-label strong{font-size:24px;color:#f0dfc4}
.level-ticks{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);min-height:78px;border-top:1px solid rgba(231,215,190,.24);border-bottom:1px solid rgba(231,215,190,.24)}
.level-ticks button,.level-ticks>span{min-width:0;border:0;border-right:1px solid rgba(231,215,190,.14);background:transparent;color:#9e958a;display:grid;place-items:center;font:24px/1 var(--serif)}
.level-ticks>*:last-child{border-right:0}
.level-ticks>span.is-current{margin:auto;width:48px;height:48px;border:1px solid rgba(203,193,177,.28);border-radius:50%;background:rgba(203,193,177,.07);font-size:17px;color:#77716b}
.level-ticks button[aria-pressed=true]{position:relative;background:rgba(220,180,126,.13);box-shadow:inset 0 0 0 2px #c9965f;color:#f2e1c7;font-size:30px}
.level-ticks button[aria-pressed=true]:before,.level-ticks button[aria-pressed=true]:after{content:"";position:absolute;left:50%;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent}
.level-ticks button[aria-pressed=true]:before{top:-1px;border-top:8px solid #c9965f}
.level-ticks button[aria-pressed=true]:after{bottom:-1px;border-bottom:8px solid #c9965f}
.level-selector input[type=range]{position:relative;z-index:2;margin:-1px 7% 0;width:86%;min-height:28px;accent-color:#d5aa72}
.level-max{position:absolute;right:12px;bottom:8px;z-index:3;min-height:32px;padding:4px 10px;border:1px solid rgba(220,180,126,.32);background:rgba(8,8,9,.52);color:#cfc3b4;font:12px/1 var(--serif)}
.training-cost{margin:0;color:#cfc6ba}.training-cost b{color:#dfbd8c}
@media(max-width:1000px),(max-height:560px){
 .pact-training .training-hero>.training-hero-info{left:12px;right:12px;bottom:8px;grid-template-columns:94px minmax(180px,1fr);gap:8px}
 .training-stat-preview{padding:4px 0}.training-stat-preview>small{padding:0 5px 3px;font-size:8px}.training-stat-preview>span{grid-template-columns:13px minmax(0,1fr) auto;min-height:21px;padding:2px 5px;gap:2px}.training-stat-preview svg{width:11px;height:11px}.training-stat-preview em,.training-stat-preview b{font-size:8px}
 .level-selector{grid-template-rows:50px auto auto auto;min-height:168px}.level-crest{gap:1px}.level-crest b{width:52px;height:42px;font-size:19px}.level-crest span{font-size:6px}.level-selector-label{font-size:10px}.level-selector-label strong{font-size:14px}.level-ticks{min-height:48px}.level-ticks button,.level-ticks>span{font-size:15px}.level-ticks>span.is-current{width:30px;height:30px;font-size:11px}.level-ticks button[aria-pressed=true]{font-size:19px}.level-selector input[type=range]{min-height:24px}.level-max{right:5px;bottom:3px;min-height:25px;padding:2px 5px;font-size:8px}.training-cost{font-size:10px!important}
}

/* V2.14: draggable level rail and separated card/status hierarchy. */
.pact-training .training-hero>.training-hero-info{display:block;top:0;bottom:18px;left:24px;right:24px;width:auto;pointer-events:none}
.pact-training .training-card-meta{position:absolute;left:0;bottom:148px;z-index:2}
.pact-training .training-stat-preview{position:absolute;left:0;right:0;bottom:0;max-width:720px}
.level-selector{grid-template-rows:minmax(96px,1fr) auto auto 46px}
.level-ticks{display:flex;grid-template-columns:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;touch-action:pan-x;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;user-select:none}
.level-ticks::-webkit-scrollbar{display:none}
.level-ticks.is-dragging{cursor:grabbing;scroll-snap-type:none}
.level-ticks button,.level-ticks>span{flex:0 0:20%;scroll-snap-align:center;min-width:92px}
.level-ticks button:focus-visible{position:relative;z-index:3;outline:2px solid #dfb777;outline-offset:-3px}
.level-max{position:relative;right:auto;bottom:auto;justify-self:end;align-self:center;margin:5px 12px;min-height:34px}
.level-selector input[type=range]{display:none!important}
@media(max-width:1000px),(max-height:560px){
 .pact-training .training-hero>.training-hero-info{top:0;bottom:7px;left:12px;right:12px}
 .pact-training .training-card-meta{bottom:72px}
 .pact-training .training-stat-preview{max-width:none}
 .level-selector{grid-template-rows:48px auto auto 31px;min-height:170px}
 .level-ticks button,.level-ticks>span{flex-basis:20%;min-width:52px}
 .level-max{margin:3px 5px;min-height:25px}
}

/* V2.22: approved resource icon set. */
.resource-icon{width:24px;height:24px;display:block;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.34))}
.resource-inline,.resource-line,.resource-paragraph{display:inline-flex;align-items:center;gap:7px}
.resource-inline{white-space:nowrap;color:inherit}
.resource-inline>span{color:inherit;font:inherit}
.resource-inline>b,.resource-paragraph b{color:#f1d094;font-variant-numeric:tabular-nums}
.pact-growth-row .resource-inline{margin-left:auto}
.training-cost.resource-line{justify-content:flex-start}
.training-cost.resource-line .resource-icon{width:28px;height:28px}
.resource-paragraph{align-items:flex-start;margin:8px 0;line-height:1.55}
.resource-paragraph .resource-icon{width:30px;height:30px;margin-top:1px}
.material-reward-preview strong,.material-result-reward>strong{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.material-reward-preview .resource-icon,.material-result-reward>strong .resource-icon{width:30px;height:30px}
.resource-balance-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px 14px}
.resource-balance-row .resource-inline{gap:4px}
.resource-balance-row .resource-icon{width:20px;height:20px}
.heart-costs{display:grid!important;gap:5px;color:inherit!important}
.heart-costs .resource-inline{gap:4px;font-size:11px}
.heart-costs .resource-icon{width:19px;height:19px}
.special-glyph .resource-icon-feature{width:min(78%,96px);height:min(78%,96px);margin:auto;filter:drop-shadow(0 7px 10px rgba(0,0,0,.36))}
.terminal-core .resource-icon-feature{width:46px;height:46px;transform:rotate(-45deg)}
@media(max-width:1000px),(max-height:560px){
 .resource-icon{width:18px;height:18px}
 .training-cost.resource-line .resource-icon,.resource-paragraph .resource-icon{width:21px;height:21px}
 .material-reward-preview .resource-icon,.material-result-reward>strong .resource-icon{width:22px;height:22px}
 .resource-balance-row{gap:4px 8px}.resource-balance-row .resource-icon{width:16px;height:16px}
 .heart-costs{gap:2px}.heart-costs .resource-icon{width:15px;height:15px}
 .special-glyph .resource-icon-feature{width:min(72%,60px);height:min(72%,60px)}
 .terminal-core .resource-icon-feature{width:29px;height:29px}
}

/* V2.29: reference proportions with the project dark interaction system. */
.training-level.pact-training{grid-template-columns:minmax(0,65.5%) minmax(0,34.5%);background:radial-gradient(circle at 48% 46%,rgba(118,69,47,.28),transparent 34%),linear-gradient(112deg,#111216 0,#202021 68%,#1a1817 100%)}
.training-level .training-hero{border-right:0;background:radial-gradient(circle at 68% 44%,var(--glow),transparent 38%)}
.training-level .training-hero::before{inset:5% 12% 6% 9%;transform:rotate(7deg)}
.training-level .training-hero>img{inset:10% -6% 0 38%;width:68%;height:94%;object-position:center bottom}
.training-level .pact-training-panel{position:relative;margin:8.5vh 3.4vw 8vh 1.35vw;padding:0;gap:clamp(6px,1.25vh,16px);overflow:visible;border:1px solid rgba(235,226,211,.22);background:linear-gradient(145deg,#211f1d,#121315 72%);color:#eee8df;box-shadow:0 16px 38px rgba(0,0,0,.42),8px 0 0 rgba(255,255,255,.035)}
.training-level .training-level-title{display:none}
.training-level .pact-growth-row{position:absolute;left:24%;right:4%;top:-6.1vh;z-index:5;min-height:36px;padding:0 10px;align-items:center;border-bottom:1px solid rgba(226,205,172,.28);background:rgba(12,12,14,.78);color:#eee8df;font:600 12px/1 var(--mono)}
.training-level .pact-growth-row .resource-inline{margin-left:auto}
.training-level .level-selector{flex:1;min-height:0;border:0;background:linear-gradient(145deg,#24211e,#151516 72%);overflow:visible;grid-template-rows:minmax(0,1fr) auto clamp(52px,10.8vh,106px) clamp(44px,5.4vh,56px)}
.training-level .level-selector::before{background:linear-gradient(110deg,transparent 48%,rgba(217,178,123,.055)),repeating-linear-gradient(90deg,transparent 0 74px,rgba(255,255,255,.018) 75px 76px);opacity:.8}
.training-level .level-crest{position:relative;align-self:stretch;color:#d2ad77}
.training-level .level-crest svg{width:min(58%,280px);height:min(90%,220px);overflow:visible}
.training-level .level-crest path,.training-level .level-crest circle{vector-effect:non-scaling-stroke}
.training-level .level-crest .crest-frame{fill:rgba(217,178,123,.045);stroke:#9f805d;stroke-width:2}
.training-level .level-crest .crest-frame-inner{fill:rgba(217,178,123,.09);stroke:#d0a56f;stroke-width:2}
.training-level .level-crest .crest-track{fill:none;stroke:#f0dec1;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.training-level .level-crest .crest-arrow{fill:none;stroke:#f0dec1;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.training-level .level-crest .crest-star{fill:#e1b87f;stroke:#f5e5ca;stroke-width:1.5}
.training-level .level-crest .crest-node{fill:#171616;stroke:#d9b27b;stroke-width:2}
.training-level .level-crest .crest-baseline{fill:none;stroke:#8c7358;stroke-width:2;stroke-linecap:round}
.training-level .level-selector-label{z-index:4;height:0;transform:translateY(-17px);color:#d8c9b7;font:500 14px/1 var(--serif);letter-spacing:0}
.training-level .level-selector-label span{display:block;line-height:1}
.training-level .level-selector-label strong{display:none}
.training-level .level-ticks{min-height:0;padding-left:12.5%;padding-right:37.5%;border-top:1px solid rgba(235,226,211,.18);border-bottom:1px solid rgba(235,226,211,.18);background:rgba(255,255,255,.025);color:#d5c9bb}
.training-level .level-ticks button,.training-level .level-ticks>span{flex:0 0 25%;min-width:68px;min-height:44px;border-right:1px solid rgba(235,226,211,.12);color:#8f877e;font:500 24px/1 var(--serif)}
.training-level .level-ticks>span.is-current{width:auto;height:auto;min-width:68px;min-height:44px;margin:0;border-color:rgba(217,178,123,.25);border-radius:0;background:rgba(217,178,123,.055);color:#8f877e;font-size:18px}
.training-level .level-ticks button[aria-pressed=true]{background:rgba(217,178,123,.11);box-shadow:inset 0 0 0 2px #d9b27b;color:#f2e7d5;font-size:30px}
.training-level .level-ticks button[aria-pressed=true]::before{border-top-color:#d9b27b}
.training-level .level-ticks button[aria-pressed=true]::after{border-bottom-color:#d9b27b}
.training-level .level-max{position:relative;right:auto;bottom:auto;justify-self:end;align-self:center;margin:0 4% 0 0;min-height:44px;padding:8px 12px;border:1px solid rgba(217,178,123,.42);border-radius:6px;background:rgba(255,255,255,.035);color:#e5d6c1;box-shadow:none;font:600 14px/1 var(--serif)}
.training-level .level-max:hover:not(:disabled),.training-level .level-max:focus-visible{border-color:#d9b27b;background:rgba(217,178,123,.1);outline:2px solid #e4bd88;outline-offset:2px}
.training-level .level-resource-grid{height:clamp(55px,14.5vh,142px);display:grid;grid-template-columns:minmax(180px,240px);justify-content:center;align-items:center;padding:0;color:#eee8df}
.training-level .level-resource-grid>div{width:100%;display:grid;grid-template-columns:clamp(38px,4.3vw,74px) 1fr;grid-template-rows:auto auto;align-items:center;justify-self:center;column-gap:12px}
.training-level .level-resource-grid .resource-icon{grid-row:1/3;width:clamp(38px,4.3vw,74px);height:clamp(38px,4.3vw,74px);filter:drop-shadow(0 3px 5px rgba(0,0,0,.22))}
.training-level .level-resource-grid small{align-self:end;color:#bdb2a6;font:500 12px/1.25 var(--serif);letter-spacing:.06em}
.training-level .level-resource-grid b{align-self:start;color:#f2eee7;font:600 16px/1.2 var(--mono);font-variant-numeric:tabular-nums}
.training-level .pact-training-panel>.primary{width:48%;min-height:44px;align-self:center;margin:0 auto clamp(14px,5vh,48px);border:1px solid #d9b27b;border-radius:6px;background:#d9b27b;color:#231d15;box-shadow:0 8px 18px rgba(0,0,0,.38);font:600 16px/1 var(--serif);letter-spacing:.08em}
.training-level .pact-training-panel>.primary:hover:not(:disabled),.training-level .pact-training-panel>.primary:focus-visible{background:#e4c18d;outline:2px solid #f0d4aa;outline-offset:2px}
.training-level .pact-training-panel>.primary:disabled{border-color:#706253;background:#52483e;color:#aaa096}
.training-level .training-hero>.training-hero-info{left:5.5%;right:0;bottom:7%;top:0}
.training-level .training-card-meta{left:5%;top:39%;bottom:auto;gap:clamp(3px,.7vh,8px)}
.training-level .training-card-meta .character-stars svg{width:clamp(13px,1.45vw,25px);height:clamp(13px,1.45vw,25px)}
.training-level .training-card-meta h2{font-size:clamp(24px,2vw,32px)}
.training-level .training-card-meta p{font-size:14px}
.training-level .training-stat-preview{left:5%;right:auto;bottom:0;width:min(66%,720px);max-width:none;min-height:clamp(80px,18vh,150px);align-content:center;padding:clamp(5px,1vh,11px) 0;background:rgba(8,8,9,.68)}
.training-level .training-stat-preview>span{min-height:clamp(22px,3.3vh,36px)}
.training-level .training-stat-preview>small{font-size:11px}
.training-level .training-stat-preview em{font-size:11px}
.training-level .training-stat-preview b{font-size:14px}
@media(max-width:1000px),(max-height:560px){
 .training-level .training-hero>img{inset:9% -7% 0 37%;width:70%;height:96%}
 .training-level .pact-training-panel{margin:7vh 2.3vw 6.5vh 1.2vw;gap:4px}
 .training-level .pact-growth-row{left:10%;right:2%;top:-5.8vh;min-height:24px;padding:0 5px;font-size:10px}
 .training-level .level-selector{grid-template-rows:minmax(0,1fr) auto clamp(45px,11vh,58px) 44px}
 .training-level .level-crest svg{width:min(54%,132px);height:min(92%,104px)}
 .training-level .level-selector-label{transform:translateY(-10px);font-size:12px}
 .training-level .level-selector-label strong{margin-top:17px}
 .training-level .level-ticks button,.training-level .level-ticks>span{min-width:48px}
 .training-level .level-ticks>span.is-current{min-width:48px;min-height:44px}
 .training-level .level-ticks button,.training-level .level-ticks>span{font-size:20px}
 .training-level .level-ticks button[aria-pressed=true]{font-size:24px}
 .training-level .level-max{min-height:44px;font-size:12px}
 .training-level .level-resource-grid{grid-template-columns:minmax(150px,200px);padding:0}
 .training-level .level-resource-grid small{font-size:10px}
 .training-level .level-resource-grid b{font-size:13px}
 .training-level .pact-training-panel>.primary{margin-bottom:10px;font-size:14px}
 .training-level .training-hero>.training-hero-info{left:5%;right:0;bottom:5%}
 .training-level .training-card-meta{top:39%;bottom:auto}
 .training-level .training-card-meta h2{font-size:24px}
 .training-level .training-card-meta p{font-size:13px}
 .training-level .training-card-meta .role-tag{font-size:10px}
 .training-level .training-stat-preview{width:70%}
 .training-level .training-stat-preview>small,.training-level .training-stat-preview em{font-size:10px}
 .training-level .training-stat-preview b{font-size:13px}
}