/*
 * 福尔摩斯在21世纪 · 第四案界面
 * Copyright © 2026 Bobby. All rights reserved.
 */

.case-four-active > .app-shell > .phase-nav { display: none; }
.case-library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.case-choice-four { background-image: linear-gradient(rgba(14,22,28,.2), rgba(39,19,28,.72)), url("./assets/case-004-bohemia.svg"); }

.case4-shell { min-height: calc(100vh - 116px); color: #20262a; background: #e9e5dc; }
.case4-header { min-height: 90px; padding: 20px 5%; display: flex; align-items: center; justify-content: space-between; color: #f1eee8; background: #172229; border-bottom: 1px solid #936f48; }
.case4-header h2 { margin: 0; font: 500 27px Georgia, "SimSun", serif; }
.case4-header .eyebrow { color: #d0a15f; }
.case4-nav { position: sticky; top: 0; z-index: 8; height: 54px; padding: 0 5%; display: flex; overflow-x: auto; color: #666963; background: #d9d5ca; border-bottom: 1px solid #bdb5a6; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; }
.case4-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
.case4-tab { min-width: 108px; height: 54px; padding: 0 16px; color: #626966; background: transparent; border: 0; border-bottom: 3px solid transparent; font-size: 12px; font-weight: 800; }
.case4-tab + .case4-tab { margin-left: 3px; }
.case4-tab span { margin-right: 7px; color: #9c8d78; font: 11px Georgia, serif; }
.case4-tab.active { color: #842d40; border-bottom-color: #842d40; }
.case4-tab.locked { opacity: .48; }
.case4-content { min-height: calc(100vh - 260px); }

.case4-briefing { min-height: calc(100vh - 260px); display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(390px, .94fr); }
.case4-briefing-copy { padding: 68px 8%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.case4-briefing-copy h3 { max-width: 900px; margin: 0; color: #182329; font: 500 49px/1.2 Georgia, "SimSun", serif; }
.case4-briefing-copy .lead { max-width: 760px; }
.case4-dossier { padding: 35px; color: #e8e4db; background: #202830; }
.case4-dossier img { width: 100%; height: 360px; display: block; object-fit: cover; border: 1px solid #856b4e; }
.case4-dossier dl { margin: 23px 0 0; }
.case4-dossier dl div { padding: 13px 0; display: grid; grid-template-columns: 130px 1fr; border-bottom: 1px solid #46515a; }
.case4-dossier dt { color: #9da6a8; font-size: 11px; }
.case4-dossier dd { margin: 0; font: 15px Georgia, "SimSun", serif; }

.case4-source, .case4-forgery, .case4-vault, .case4-disposition { padding: 42px 5% 65px; }
.case4-section-heading { margin-bottom: 26px; display: flex; align-items: flex-end; justify-content: space-between; }
.case4-section-heading > div { max-width: 720px; }
.case4-section-heading h3 { margin: 0; color: #1b292f; font: 500 35px Georgia, "SimSun", serif; }
.case4-section-heading > p { max-width: 540px; margin: 0 0 3px 32px; color: #666b68; font-size: 12px; line-height: 1.8; }
.case4-section-heading.compact { margin: 31px 0 18px; }
.case4-section-heading.compact h3 { font-size: 27px; }

.case4-evidence-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(310px, .6fr); grid-gap: 14px; }
.case4-scene { position: relative; min-height: 520px; overflow: hidden; background: #151b20; border: 1px solid #715942; }
.case4-scene img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.case4-scene-stamp { position: absolute; left: 22px; bottom: 20px; padding: 10px 14px; color: #f0ddbb; background: rgba(23,34,41,.92); border: 1px solid #c49655; font: 700 12px Georgia, "SimSun", serif; }
.case4-records { max-height: 620px; padding: 10px; overflow-y: auto; background: #d7d2c6; border: 1px solid #bcb3a3; -webkit-overflow-scrolling: touch; }
.case4-progress { padding: 8px 8px 14px; color: #716d65; }
.case4-progress strong { color: #842d40; font: 28px Georgia, serif; }
.case4-progress span { margin-left: 10px; font-size: 10px; }
.case4-record { width: 100%; min-height: 62px; padding: 9px; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto auto; color: #343a3b; background: rgba(255,255,255,.3); border: 0; border-bottom: 1px solid #bfb5a5; text-align: left; }
.case4-record > span { grid-row: 1 / 4; width: 21px; height: 21px; display: grid; place-items: center; align-self: center; color: #8a6639; border: 1px solid #ad8650; border-radius: 50%; }
.case4-record small { color: #7e7365; font-size: 9px; }
.case4-record strong { font: 500 13px Georgia, "SimSun", serif; }
.case4-record em { color: #7b7d78; font-size: 9px; font-style: normal; }
.case4-record.seen > span { color: #fff; background: #842d40; border-color: #842d40; }

.case4-workbench { margin-top: 25px; padding: 26px; background: #f8f5ee; border: 1px solid #c6bcab; border-top: 4px solid #842d40; }
.case4-workbench.dark { color: #e8e5dd; background: #1c2930; border-color: #4d5b62; border-top-color: #c59a5d; }
.case4-workbench.final { border-top-color: #315f6b; }
.case4-workbench-title { margin-bottom: 20px; display: flex; align-items: center; }
.case4-workbench-title > span { width: 50px; color: #b69259; font: 34px Georgia, serif; }
.case4-workbench-title h4 { margin: 0; font: 500 22px Georgia, "SimSun", serif; }
.case4-workbench-title p { margin: 5px 0 0; color: #77776f; font-size: 11px; }
.case4-workbench.dark .case4-workbench-title p { color: #abb1b0; }
.case4-proof-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-gap: 7px; }
.case4-proof-grid label { min-height: 78px; padding: 11px; display: grid; grid-template-columns: 22px 1fr; align-items: center; color: #333a3b; background: #e7e1d5; border: 1px solid #c7bdad; }
.case4-workbench.dark .case4-proof-grid label { color: #e4e2dc; background: #29363c; border-color: #4b5a60; }
.case4-proof-grid label.unread { opacity: .48; }
.case4-proof-grid input { width: 16px; height: 16px; accent-color: #842d40; }
.case4-proof-grid span { display: flex; flex-direction: column; }
.case4-proof-grid strong { font: 500 12px Georgia, "SimSun", serif; }
.case4-proof-grid small { margin-top: 4px; color: #77766f; font-size: 9px; }
.case4-workbench.dark .case4-proof-grid small { color: #a7b0b1; }
.case4-select-label { max-width: 720px; margin-top: 18px; display: flex; flex-direction: column; color: #783342; font-size: 10px; font-weight: 800; }
.case4-workbench.dark .case4-select-label { color: #d3ad70; }
.case4-select-label select, .case4-order-grid select, .case4-final-grid select { width: 100%; min-width: 0; height: 45px; margin-top: 8px; padding: 0 10px; color: #283034; background: #fffdf8; border: 1px solid #bcb2a1; }
.case4-workbench.dark .case4-select-label select { color: #ece8de; background: #111b20; border-color: #536169; }
.case4-check { margin-top: 18px; padding: 11px 17px; color: #fff; background: #1c2930; border: 0; border-radius: 3px; font-size: 11px; font-weight: 800; }
.case4-check.light { color: #1c2930; background: #d4aa69; }

.case4-dual-brief { margin-bottom: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 10px; }
.case4-dual-brief article { min-height: 165px; padding: 24px; color: #e8e5dc; background: #1e2a31; border-left: 4px solid #b88b50; }
.case4-dual-brief article + article { color: #292d2d; background: #d7d1c4; border-left-color: #842d40; }
.case4-dual-brief span { color: #d1a86c; font-size: 10px; font-weight: 800; }
.case4-dual-brief article + article span { color: #842d40; }
.case4-dual-brief h4 { margin: 12px 0 8px; font: 500 22px Georgia, "SimSun", serif; }
.case4-dual-brief p { margin: 0; color: #aeb7b7; font-size: 12px; line-height: 1.8; }
.case4-dual-brief article + article p { color: #676963; }

.case4-vault-stage { display: grid; grid-template-columns: minmax(250px, .36fr) minmax(0, .64fr); background: #172229; border: 1px solid #806546; }
.case4-irene { padding: 28px; display: flex; flex-direction: column; justify-content: center; color: #eee9de; border-right: 1px solid #536068; }
.case4-irene-mark { width: 64px; height: 64px; margin-bottom: 20px; display: grid; place-items: center; color: #d3aa69; border: 1px solid #bd955d; border-radius: 50%; font: 23px Georgia, serif; }
.case4-irene p { margin: 0; font: 17px/1.7 Georgia, "SimSun", serif; }
.case4-irene small { margin-top: 16px; color: #859397; }
.case4-vaults { padding: 27px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 8px; }
.case4-vaults article { min-height: 190px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #e9e5dd; background: #253139; border: 1px solid #516069; text-align: center; }
.case4-vaults article:nth-child(2) { background: #35262a; border-color: #704653; }
.case4-vaults article:nth-child(3) { background: #1d3039; border-color: #466879; }
.case4-vaults b { width: 58px; height: 58px; display: grid; place-items: center; color: #d2ac70; border: 1px solid #a88351; border-radius: 50%; font: 26px Georgia, "SimSun", serif; }
.case4-vaults strong { margin-top: 15px; font: 500 17px Georgia, "SimSun", serif; }
.case4-vaults small { margin-top: 8px; color: #aab4b5; font-size: 9px; line-height: 1.6; }
.case4-order-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 9px; }
.case4-order-grid label, .case4-final-grid label { color: #6f3340; font-size: 10px; font-weight: 800; }
.case4-shards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-gap: 8px; }
.case4-shard { min-height: 150px; padding: 15px; display: flex; flex-direction: column; align-items: flex-start; color: #3a3f3f; background: #e2ddd2; border: 1px solid #b9af9f; text-align: left; }
.case4-shard b { width: 36px; height: 36px; display: grid; place-items: center; color: #7b3140; background: rgba(255,255,255,.45); border: 1px solid #a8737e; font: 17px Georgia, "SimSun", serif; }
.case4-shard strong { margin-top: 13px; font: 500 14px Georgia, "SimSun", serif; }
.case4-shard small { margin-top: 7px; color: #71736e; font-size: 9px; line-height: 1.6; }
.case4-shard.selected { color: #f4eee4; background: #315f6b; border-color: #d1a55f; box-shadow: inset 0 -4px #842d40; }
.case4-shard.selected b { color: #fff; border-color: #d5b77e; }
.case4-shard.selected small { color: #d0dddd; }

.case4-false-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 8px; }
.case4-false-choices button { min-height: 115px; padding: 17px; display: flex; flex-direction: column; align-items: flex-start; color: #e9e5dd; background: #263138; border: 1px solid #526068; text-align: left; }
.case4-false-choices span { font: 500 17px Georgia, "SimSun", serif; }
.case4-false-choices small { margin-top: 9px; color: #a9b1b1; font-size: 9px; line-height: 1.6; }
.case4-final-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 13px; }
.case4-final-grid label { padding: 15px; background: #ece7dd; border-left: 3px solid #315f6b; }
.case4-submit { margin-top: 22px; }

.case4-ending { min-height: calc(100vh - 260px); padding: 62px 8%; color: #eeebe3; background: #172229; }
.case4-ending > h3 { max-width: 980px; margin: 0 0 24px; font: 500 43px Georgia, "SimSun", serif; }
.case4-ending > p { max-width: 930px; color: #bdc5c4; line-height: 1.8; }
.case4-ending blockquote { max-width: 850px; color: #dfc28e; border-left-color: #c3985d; }
.case4-stats { max-width: 930px; margin: 28px 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 8px; }
.case4-stats div { min-height: 84px; padding: 14px; background: #26333a; border: 1px solid #4d5e64; }
.case4-stats strong { display: block; color: #d7a966; font: 25px Georgia, serif; }
.case4-stats span { color: #9fa9aa; font-size: 9px; }
.case4-proof-chain { max-width: 1100px; margin: 24px 0 28px; display: flex; align-items: center; flex-wrap: wrap; }
.case4-proof-chain span { margin: 4px; padding: 8px 10px; color: #e9e2d6; background: #29373e; border: 1px solid #53646b; font-size: 10px; }
.case4-proof-chain i { color: #d2a461; font-style: normal; }
.case4-afterword { max-width: 930px; padding: 18px; border: 1px solid #5e6970; border-left: 4px solid #842d40; }
.case4-afterword strong { color: #d5ad70; font: 500 17px Georgia, "SimSun", serif; }
.case4-afterword p { margin-bottom: 0; color: #b7c0bf; font-size: 12px; line-height: 1.8; }

@media (max-width: 1180px) {
  .case-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case4-proof-grid, .case4-shards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .case4-briefing, .case4-evidence-layout, .case4-vault-stage { grid-template-columns: 1fr; }
  .case4-dossier { padding: 24px; }
  .case4-scene { min-height: 430px; }
  .case4-records { max-height: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 4px; }
  .case4-progress { grid-column: 1 / -1; }
  .case4-section-heading { display: block; }
  .case4-section-heading > p { margin: 12px 0 0; }
  .case4-irene { border-right: 0; border-bottom: 1px solid #536068; }
}

@media (max-width: 760px) {
  .case-library-grid { grid-template-columns: 1fr; }
  .case4-dual-brief, .case4-false-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .case4-shell { min-height: calc(100vh - 108px); }
  .case4-header { min-height: 76px; padding: 14px 16px; }
  .case4-header h2 { font-size: 20px; }
  .case4-nav { padding: 0; overflow-x: hidden; }
  .case4-tab { flex: 1; min-width: 0; padding: 0 3px; font-size: 10px; }
  .case4-tab span { display: block; margin: 0; font-size: 9px; }
  .case4-content { min-height: calc(100vh - 238px); }
  .case4-briefing { min-height: 0; }
  .case4-briefing-copy { padding: 46px 20px; }
  .case4-briefing-copy h3 { font-size: 32px; }
  .case4-dossier img { height: 230px; }
  .case4-dossier dl div { grid-template-columns: 105px 1fr; }
  .case4-source, .case4-forgery, .case4-vault, .case4-disposition { padding: 30px 14px 50px; }
  .case4-section-heading h3 { font-size: 28px; }
  .case4-scene { min-height: 260px; }
  .case4-records, .case4-proof-grid, .case4-order-grid, .case4-shards, .case4-final-grid { grid-template-columns: 1fr; }
  .case4-progress { grid-column: auto; }
  .case4-workbench { padding: 18px 14px; }
  .case4-proof-grid input { width: 22px; height: 22px; }
  .case4-workbench-title > span { width: 42px; font-size: 28px; }
  .case4-dual-brief, .case4-false-choices, .case4-vaults { grid-template-columns: 1fr; }
  .case4-vaults article { min-height: 150px; }
  .case4-shard { min-height: 105px; }
  .case4-ending { padding: 42px 20px; }
  .case4-ending > h3 { font-size: 30px; }
  .case4-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .case-choice:hover, .case-choice:focus { transform: none; }
}