:root {
  --navy: #071b34;
  --navy-2: #0c294b;
  --navy-3: #153b62;
  --gold: #d6a83e;
  --gold-soft: #f6ecd0;
  --teal: #0c9483;
  --green: #13977d;
  --red: #c84b4b;
  --amber: #b87912;
  --ink: #10243c;
  --muted: #6d7b8b;
  --line: #dce4ea;
  --paper: #eef3f5;
  --panel: #ffffff;
  --soft: #f5f8fa;
  --shadow: 0 12px 32px rgba(7, 27, 52, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: linear-gradient(180deg, var(--navy) 0 10rem, var(--paper) 10rem); color: var(--ink); font: 16px/1.5 Inter, "PingFang TC", "Microsoft JhengHei", sans-serif; }
button, input, select, textarea { font: inherit; }
button { touch-action: manipulation; }
.shell { max-width: 1240px; margin: auto; padding: 1rem 1.25rem 3rem; }
[hidden] { display: none !important; }

.topbar { min-height: 5.6rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: #fff; }
.brand-lockup { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.brand-mark, .login-mark { display: grid; place-items: center; flex: 0 0 auto; width: 2.7rem; height: 2.7rem; border: 1px solid rgba(214,168,62,.7); border-radius: 50%; color: var(--gold); font-weight: 800; box-shadow: inset 0 0 0 5px rgba(214,168,62,.08); }
.topbar h1 { margin: .1rem 0 0; font-size: clamp(1.1rem, 3vw, 1.55rem); line-height: 1.2; letter-spacing: .01em; }
.eyebrow { margin: 0; color: var(--teal); font-size: .72rem; line-height: 1.2; font-weight: 800; letter-spacing: .11em; }
.topbar .eyebrow { color: #b7c4d2; }
.header-status { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; color: #c6d1dc; font-size: .8rem; text-align: right; }
.dot { width: .55rem; height: .55rem; border-radius: 50%; background: #45c69e; flex: 0 0 auto; }
.dot.muted { background: #8190a0; }
.text-button, .link-action { border: 0; background: transparent; padding: .45rem .3rem; color: inherit; cursor: pointer; }
.header-status .text-button { color: #dce4ec; }

.login-card { max-width: 520px; margin: 8vh auto; padding: 2rem; background: var(--panel); border-radius: 22px; box-shadow: 0 24px 65px rgba(0,0,0,.24); }
.login-mark { width: 3.5rem; height: 3.5rem; margin-bottom: 1.25rem; background: var(--navy); }
.login-card h2 { margin: .4rem 0 .3rem; font-size: 1.55rem; }
.sub-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.error { min-height: 1.4rem; margin-bottom: 0; color: var(--red); }

.safety-line { display: flex; justify-content: center; gap: .8rem; margin: 0 0 .75rem; color: #bdc9d5; font-size: .78rem; }
.safety-line span + span::before { content: "·"; margin-right: .8rem; color: var(--gold); }
.tabs { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; margin-bottom: 1rem; padding: .4rem; background: rgba(7,27,52,.95); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; backdrop-filter: blur(14px); }
.tab { min-width: 0; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .7rem .5rem; border: 0; border-radius: 10px; background: transparent; color: #9cadbe; cursor: pointer; font-weight: 650; }
.tab.active { background: var(--gold); color: var(--navy); }
.tab-icon { font-size: 1.05rem; line-height: 1; }
.view { display: none; }
.view.active { display: block; }

.mission-card { padding: clamp(1.2rem, 4vw, 2.2rem); border-radius: 20px; color: #fff; background: radial-gradient(circle at 85% 0%, rgba(23,139,132,.42), transparent 34%), linear-gradient(135deg, var(--navy-2), var(--navy)); box-shadow: 0 18px 45px rgba(7,27,52,.2); }
.mission-top { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.mission-card h2 { max-width: 760px; margin: .9rem 0 .35rem; font-size: clamp(1.55rem, 5vw, 2.45rem); line-height: 1.18; }
.mission-card > p { max-width: 720px; margin: 0 0 1rem; color: #c9d5e0; }
.status-pill { display: inline-flex; align-items: center; width: fit-content; padding: .28rem .65rem; border-radius: 999px; background: var(--gold); color: var(--navy); font-size: .78rem; font-weight: 800; }
.status-pill.neutral { background: #edf1f5; color: #586878; }
.status-pill.pass { background: #d8f3eb; color: #08705e; }
.status-pill.warn { background: #fff0d0; color: #885807; }
.status-pill.stop { background: #fee6e6; color: #9d3434; }
.mission-facts { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0 1.25rem; }
.mission-facts span { padding: .38rem .62rem; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; color: #e0e8ef; font-size: .8rem; background: rgba(255,255,255,.05); }
.primary-action { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(100%, 410px); padding: .85rem 1rem; border: 0; border-radius: 11px; background: var(--gold); color: var(--navy); cursor: pointer; font-weight: 800; }
.primary-action span { font-size: 1.2rem; }
.primary-action.compact-action { width: auto; padding: .55rem .85rem; font-size: .82rem; }
.primary-action:disabled { opacity: .55; cursor: wait; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 1.6rem 0 .8rem; }
.section-heading h2 { margin: .15rem 0 0; font-size: 1.25rem; }
.section-heading.page-title { align-items: center; margin: .3rem 0 1rem; padding: 1.1rem 1.2rem; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.section-heading.page-title h2 { font-size: 1.45rem; }
.support-copy { margin: .35rem 0 0; color: var(--muted); }
.week-label { flex: 0 0 auto; color: var(--gold); font-weight: 850; font-size: .95rem; }

.workflow-progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; margin-bottom: 1rem; }
.progress-step { min-height: 3.4rem; display: grid; align-content: center; gap: .1rem; padding: .5rem .65rem; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
.progress-step b { font-size: .75rem; }
.progress-step span { font-size: .72rem; }
.progress-step.done { background: #e9f7f2; border-color: #b9e2d5; color: #0c7563; }
.progress-step.active { background: var(--gold-soft); border-color: #e4c46d; color: #75520a; box-shadow: inset 3px 0 var(--gold); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .8rem; margin-bottom: .9rem; }
.metric { min-height: 7.4rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); box-shadow: var(--shadow); }
.metric span { color: var(--muted); font-size: .82rem; }
.metric strong { display: block; overflow-wrap: anywhere; font-size: 1.25rem; line-height: 1.25; }
.compact-metrics { margin-top: 0; }
.grid { display: grid; gap: .9rem; }
.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.focus-grid, .history-grid { margin-bottom: .9rem; }
.panel { margin-bottom: .9rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.panel h2 { margin: 0; font-size: 1.08rem; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: .9rem; }
.panel-head > div > h2 { display: inline; }
.section-no { display: inline-flex; align-items: center; justify-content: center; min-width: 1.65rem; height: 1.65rem; margin: 0 .45rem 0 0; padding: 0 .35rem; border-radius: 7px; background: var(--gold-soft); color: #946b12; font-size: .72rem; font-weight: 850; vertical-align: middle; }
.link-action { color: var(--teal); font-weight: 750; white-space: nowrap; }
.meta, .empty-state { color: var(--muted); font-size: .84rem; }
.empty-state { padding: 1rem 0; }

.workflow-banner { display: flex; align-items: center; justify-content: center; gap: .55rem; overflow-x: auto; margin: 0 0 .9rem; padding: .8rem 1rem; border-radius: 14px; background: var(--navy-2); color: #b8c7d6; }
.workflow-banner div { min-width: 70px; display: grid; justify-items: center; gap: .25rem; font-size: .7rem; text-align: center; }
.workflow-banner div span { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--gold); }
.workflow-banner i { min-width: 16px; height: 1px; background: rgba(255,255,255,.18); }
.button-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.secondary-action, .small-button { padding: .5rem .7rem; border: 1px solid #bfcbd4; border-radius: 8px; background: #fff; color: var(--navy-2); cursor: pointer; font-size: .8rem; font-weight: 750; }
.secondary-action:hover, .small-button:hover { border-color: var(--teal); color: var(--teal); }
.secondary-action:disabled, .small-button:disabled { opacity: .45; cursor: not-allowed; }

.candidate-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .65rem; }
.scan-summary { margin: 0 0 .75rem; padding: .7rem .8rem; border-left: 3px solid var(--teal); border-radius: 8px; background: #edf7f5; color: #365c58; font-size: .8rem; }
.candidate-card { position: relative; min-height: 9.4rem; display: flex; flex-direction: column; gap: .45rem; padding: .9rem; border: 1px solid var(--line); border-radius: 13px; background: var(--soft); cursor: pointer; }
.candidate-card:hover { border-color: var(--gold); }
.candidate-card .candidate-rank { position: absolute; top: .75rem; right: .75rem; color: #8e9aa6; font-size: .72rem; }
.candidate-card h3 { margin: 0; padding-right: 1.5rem; font-size: 1rem; }
.candidate-card h3 small { display: block; color: var(--muted); font-size: .75rem; font-weight: 500; }
.candidate-score { margin-top: auto; color: var(--navy); font-size: 1.3rem; font-weight: 850; }
.candidate-score small { color: var(--muted); font-size: .7rem; font-weight: 500; }
.candidate-missing { color: var(--amber); font-size: .72rem; }

.five-checks { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .55rem; }
.five-checks label { display: flex; gap: .55rem; min-height: 7.5rem; padding: .8rem; border: 1px solid var(--line); border-radius: 11px; background: var(--soft); cursor: pointer; }
.five-checks label:has(input:checked) { border-color: #93d2bf; background: #ecf8f4; }
.five-checks input, .check-line input, .review-checks input, .permission-grid input, .violation-grid input { width: auto; accent-color: var(--teal); }
.five-checks span { display: flex; flex-direction: column; gap: .25rem; }
.five-checks strong { font-size: .83rem; line-height: 1.35; }
.five-checks small { color: var(--muted); font-size: .72rem; line-height: 1.4; }
.gate-note { margin: .75rem 0 0; color: var(--muted); font-size: .8rem; }

details.panel { padding: 0; }
details > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: 1rem 1.1rem; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary > span:first-child { display: flex; align-items: center; gap: .2rem; min-width: 0; }
details > summary small { margin-left: .55rem; color: var(--muted); font-weight: 400; }
.summary-action { flex: 0 0 auto; color: var(--teal); font-size: .8rem; font-weight: 750; }
details[open] .summary-action { font-size: 0; }
details[open] .summary-action::after { content: "收起"; font-size: .8rem; }
.staged-form { padding: 1rem 1.1rem 1.15rem; border-top: 1px solid var(--line); }
.admin-details { background: #f9fbfc; box-shadow: none; }
.admin-details > summary strong { color: #3d5165; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
.form-grid.compact { grid-template-columns: repeat(4, minmax(0,1fr)); }
.form-grid label { display: grid; gap: .3rem; color: #46586a; font-size: .84rem; }
.wide { grid-column: 1/-1; }
input, select, textarea { width: 100%; padding: .65rem .7rem; border: 1px solid #bcc8d2; border-radius: 8px; background: #fff; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(12,148,131,.13); border-color: var(--teal); }
input[readonly] { background: #edf2f5; }
textarea { min-height: 5rem; resize: vertical; }
button[type=submit] { align-self: end; padding: .7rem .9rem; border: 0; border-radius: 9px; background: var(--navy-2); color: #fff; cursor: pointer; font-weight: 800; }
.check-line { display: flex !important; flex-direction: row; align-items: center; }
.score-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: .8rem; border-radius: 12px; background: var(--navy); color: #fff; }
.score-summary > div { min-width: 88px; }
.score-summary span, .score-summary small { color: #aebdcb; font-size: .72rem; }
.score-summary strong { padding-left: .35rem; color: var(--gold); font-size: 1.7rem; }
.score-summary p { margin: 0; color: #c7d3df; font-size: .82rem; }
.score-grid { grid-column: 1/-1; display: grid; grid-template-columns: repeat(6,1fr); gap: .5rem; margin: 0; padding: .75rem; border: 1px solid var(--line); border-radius: 10px; }
.score-grid legend, .violation-grid legend, .permission-grid legend { padding: 0 .3rem; color: var(--muted); font-size: .78rem; }
.score-grid label { font-size: .72rem; }
.permission-grid, .violation-grid { display: flex; flex-wrap: wrap; gap: .65rem; padding: .7rem; border: 1px solid var(--line); border-radius: 9px; }
.permission-grid label, .violation-grid label { display: flex; align-items: center; gap: .3rem; }
.review-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .8rem; }
.review-checks label { display: flex; align-items: center; gap: .5rem; padding: .7rem; border-radius: 9px; background: var(--soft); color: var(--ink); font-size: .82rem; }
.review-checks b { color: var(--teal); }
.violation-grid { margin: .8rem 0; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.table th, .table td { padding: .7rem .55rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { color: var(--muted); font-weight: 650; white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.pill { display: inline-flex; padding: .16rem .42rem; border-radius: 999px; background: #e7f3f0; color: #075f55; font-size: .72rem; }
.positive { color: var(--green); }
.negative { color: var(--red); }

#toast { position: fixed; z-index: 100; right: 1rem; bottom: 1rem; max-width: calc(100% - 2rem); padding: .75rem 1rem; border-radius: 9px; background: var(--ink); color: #fff; opacity: 0; transform: translateY(10px); transition: .2s; pointer-events: none; }
#toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 820px) {
  body { background: linear-gradient(180deg, var(--navy) 0 8.5rem, var(--paper) 8.5rem); }
  .shell { padding: .65rem .75rem 6.2rem; }
  .topbar { min-height: 4.8rem; }
  .brand-mark { width: 2.2rem; height: 2.2rem; font-size: .8rem; }
  .topbar .eyebrow { display: none; }
  .topbar h1 { font-size: 1.05rem; }
  .header-status #asof { max-width: 95px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .header-status #revoke-devices { display: none; }
  .safety-line { font-size: .7rem; }
  .tabs { position: fixed; inset: auto 0 0 0; z-index: 50; margin: 0; padding: .45rem .3rem max(.45rem, env(safe-area-inset-bottom)); border-radius: 0; border-width: 1px 0 0; background: rgba(7,27,52,.98); box-shadow: 0 -8px 28px rgba(7,27,52,.2); }
  .tab { flex-direction: column; gap: .2rem; padding: .35rem .1rem; border-radius: 8px; font-size: .68rem; }
  .tab.active { background: transparent; color: var(--gold); }
  .tab-icon { font-size: 1.15rem; }
  .mission-card { border-radius: 16px; }
  .mission-card h2 { margin-top: .7rem; }
  .mission-top .meta { color: #b5c2ce; }
  .workflow-progress { grid-template-columns: repeat(3, 1fr); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .metric { min-height: 6.7rem; padding: .8rem; }
  .metric strong { font-size: 1.08rem; }
  .grid.two, .form-grid, .form-grid.compact { grid-template-columns: 1fr; }
  .candidate-grid { grid-template-columns: 1fr; }
  .candidate-card { min-height: auto; }
  .five-checks { grid-template-columns: 1fr; }
  .five-checks label { min-height: auto; }
  .workflow-banner { justify-content: flex-start; }
  .score-grid { grid-template-columns: repeat(3,1fr); }
  .score-summary { grid-template-columns: 1fr auto; }
  .score-summary p { grid-column: 1/-1; grid-row: 2; }
  .review-checks { grid-template-columns: 1fr; }
  .panel-head { flex-wrap: wrap; }
  details > summary > span:first-child { align-items: flex-start; flex-wrap: wrap; }
  details > summary small { width: 100%; margin: .15rem 0 0 2.1rem; }
  .section-heading.page-title { padding: .9rem 1rem; }
  .table { font-size: .78rem; }
  .table th, .table td { padding: .55rem .4rem; }
}

@media (max-width: 430px) {
  .header-status #asof, .safety-line span:first-child { display: none; }
  .safety-line span + span::before { display: none; }
  .workflow-progress { grid-template-columns: repeat(2,1fr); }
  .metric-grid { gap: .55rem; }
  .metric { min-height: 6.2rem; }
  .score-grid { grid-template-columns: repeat(2,1fr); }
}

/* v0.5.3 usability layer: task-first, compact grid/table, mobile + foldable */
.metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.status-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .7rem; margin: 0 0 .75rem; }
.status-tile { min-height: 6.35rem; display: flex; flex-direction: column; justify-content: space-between; gap: .35rem; padding: .85rem .9rem; border: 1px solid var(--line); border-top-width: 4px; border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(7,27,52,.055); }
.status-tile > span { color: var(--muted); font-size: .75rem; font-weight: 750; }
.status-tile > strong { font-size: 1.08rem; line-height: 1.18; overflow-wrap: anywhere; }
.status-tile > small { min-height: 2.1em; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.tone-green { border-color: #b9e4d7 !important; border-top-color: #159579 !important; background: #f1fbf7 !important; color: #0b705d !important; }
.tone-amber { border-color: #f0dba8 !important; border-top-color: #d79824 !important; background: #fff9eb !important; color: #855707 !important; }
.tone-red { border-color: #f0c2c2 !important; border-top-color: #cb5656 !important; background: #fff5f5 !important; color: #9b3434 !important; }
.tone-blue { border-color: #bfd8ee !important; border-top-color: #3f83bc !important; background: #f2f8fd !important; color: #245f91 !important; }
.tone-gold { border-color: #ead49a !important; border-top-color: var(--gold) !important; background: #fffaf0 !important; color: #7a5a10 !important; }
.tone-slate { border-color: #d9e1e7 !important; border-top-color: #8798a7 !important; background: #f7f9fb !important; color: #5e6e7c !important; }

.action-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin: 0 0 .75rem; }
.action-guide > div { min-height: 5rem; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .55rem; align-content: center; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.action-guide b { grid-row: 1/3; align-self: center; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 8px; background: var(--navy-2); color: var(--gold); font-size: .78rem; }
.action-guide span { font-weight: 800; font-size: .86rem; }
.action-guide small { color: var(--muted); font-size: .7rem; }

.workflow-banner { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: .45rem; background: transparent; padding: 0; overflow: visible; }
.workflow-banner div { min-width: 0; min-height: 4.4rem; padding: .55rem .35rem; border-radius: 11px; background: var(--navy-2); align-content: center; }
.workflow-banner i { display: none; }

.decision-workbench { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr); gap: .8rem; align-items: start; }
.candidate-pane, .decision-side { min-width: 0; }
.decision-side { display: grid; gap: .7rem; position: sticky; top: 5.2rem; }
.subsection-head { display: flex; justify-content: space-between; align-items: center; gap: .7rem; margin: 0 0 .45rem; }
.compact-card { padding: .85rem; border: 1px solid var(--line); border-radius: 13px; background: #f9fbfc; }
.compact-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; margin-bottom: .65rem; }
.compact-card-head > div { min-width: 0; display: grid; gap: .08rem; }
.compact-card-head strong { font-size: .98rem; }
.compact-card-head span:not(.mini-status) { color: var(--muted); font-size: .7rem; }
.mini-status { display: inline-flex; align-items: center; white-space: nowrap; padding: .22rem .46rem; border: 1px solid transparent; border-radius: 999px; font-size: .68rem; font-weight: 800; line-height: 1.2; }
.candidate-score-line { display: flex; align-items: end; justify-content: space-between; gap: .8rem; margin: .25rem 0 .65rem; padding: .55rem .65rem; border-radius: 10px; background: var(--navy); color: #fff; }
.candidate-score-line span { color: #b8c5d1; font-size: .72rem; }
.candidate-score-line strong { color: var(--gold); font-size: 1.5rem; line-height: 1; }
.candidate-score-line small { color: #b8c5d1; font-size: .68rem; margin-left: .15rem; }
.detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; }
.detail-grid > div { display: grid; gap: .08rem; padding: .5rem .55rem; border-radius: 9px; background: #fff; border: 1px solid #e4eaef; }
.detail-grid span { color: var(--muted); font-size: .66rem; }
.detail-grid b { font-size: .78rem; overflow-wrap: anywhere; }
.compact-note { margin: .55rem 0 0; padding: .5rem .55rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #506273; font-size: .72rem; line-height: 1.4; }
.detail-action { width: 100%; margin-top: .65rem; justify-content: center; }
.ai-summary-text { margin: .25rem 0 .65rem; color: #31475c; font-size: .76rem; line-height: 1.55; }
.risk-list { margin-top: .5rem; padding: .55rem .6rem; border-left: 3px solid var(--amber); border-radius: 8px; background: #fff9ee; }
.risk-list.missing-list { border-left-color: #6c8ca8; background: #f4f8fb; }
.risk-list b { font-size: .72rem; }
.risk-list p { margin: .2rem 0 0; color: #516274; font-size: .7rem; line-height: 1.4; }

.scan-summary { border-left: 0; border: 1px solid #cfe2df; background: #f3faf8; }
.summary-main { font-weight: 800; color: #315d57; }
.summary-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.summary-chips span { padding: .22rem .42rem; border-radius: 7px; background: #fff; border: 1px solid #dce8e5; color: #5b706d; font-size: .68rem; }

.candidate-mobile-grid { display: none; }
.candidate-table td:nth-child(2) { min-width: 8.5rem; }
.candidate-table td:nth-child(2) b, .candidate-table td:nth-child(2) small { display: block; }
.candidate-table td:nth-child(2) small { margin-top: .05rem; color: var(--muted); font-size: .68rem; }
.candidate-table tbody tr { cursor: pointer; }
.candidate-table tbody tr:hover { background: #f7fafc; }
.candidate-table tbody tr.selected { background: #fff8e7; box-shadow: inset 3px 0 var(--gold); }
.candidate-table td { vertical-align: middle; }

.five-checks label { border-width: 1px; transition: .15s; }
.five-checks label:has(input:checked) { border-color: #8dd3bf; background: #edf9f5; box-shadow: inset 3px 0 #159579; }
.gate-note { border-left: 3px solid var(--gold); }

.mission-card { padding: clamp(1rem, 2.5vw, 1.55rem); }
.mission-card h2 { font-size: clamp(1.35rem, 3.5vw, 1.95rem); }
.mission-facts { margin: .7rem 0 .85rem; }
.mission-card .primary-action { width: fit-content; min-width: 230px; }

@media (max-width: 980px) {
  .decision-workbench { grid-template-columns: minmax(0,1.25fr) minmax(270px,.9fr); }
  .status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 599px) {
  .decision-workbench { grid-template-columns: 1fr; }
  .decision-side { position: static; grid-template-columns: 1fr; }
  .candidate-table-desktop { display: none; }
  .candidate-mobile-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
  .candidate-tile { min-width: 0; min-height: 8.2rem; display: flex; flex-direction: column; gap: .16rem; padding: .65rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
  .candidate-tile.selected { border-color: var(--gold); background: #fffaf0; box-shadow: inset 0 0 0 1px #e4c66f; }
  .candidate-tile-top { display: flex; justify-content: space-between; align-items: center; gap: .25rem; margin-bottom: .25rem; color: var(--muted); font-size: .68rem; }
  .candidate-tile > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
  .candidate-tile > small { color: var(--muted); font-size: .68rem; }
  .candidate-tile > b { margin-top: auto; color: var(--navy-2); font-size: 1.02rem; }
  .workflow-banner { grid-template-columns: repeat(3,1fr); }
  .workflow-banner div { min-height: 3.7rem; }
  .five-checks { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .five-checks label { min-height: 7.2rem; align-content: start; }
  .five-checks label:last-child { grid-column: 1/-1; min-height: auto; }
  .action-guide { gap: .4rem; }
  .action-guide > div { min-height: 4.6rem; grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: center; text-align: center; padding: .5rem .25rem; }
  .action-guide b { grid-row: auto; width: 1.45rem; height: 1.45rem; font-size: .68rem; }
  .action-guide span { font-size: .72rem; }
  .action-guide small { font-size: .6rem; }
  .subsection-head .meta { display: none; }
  .panel { padding: .85rem; }
}

@media (max-width: 430px) {
  .status-grid { gap: .5rem; }
  .status-tile { min-height: 5.7rem; padding: .65rem; }
  .status-tile > strong { font-size: .94rem; }
  .status-tile > small { font-size: .65rem; }
  .metric-grid { gap: .5rem; }
  .workflow-banner div strong { font-size: .68rem; }
  .candidate-mobile-grid { gap: .45rem; }
  .candidate-tile { min-height: 7.6rem; padding: .55rem; }
  .mini-status { font-size: .6rem; padding: .18rem .32rem; }
  .mission-card .primary-action { width: 100%; min-width: 0; }
}

.history-details .history-content { padding: 0 1rem 1rem; }

/* Foldable-open / small-tablet: use the available width instead of stretching mobile layout. */
@media (min-width: 600px) and (max-width: 980px) {
  .shell { padding-bottom: 3rem; }
  .tabs { position: sticky; inset: auto; top: 0; z-index: 30; margin-bottom: 1rem; padding: .4rem; border-radius: 14px; border-width: 1px; background: rgba(7,27,52,.95); box-shadow: none; }
  .tab { flex-direction: row; gap: .4rem; padding: .65rem .4rem; border-radius: 10px; font-size: .78rem; }
  .tab.active { background: var(--gold); color: var(--navy); }
  .tab-icon { font-size: 1rem; }
  .five-checks { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .five-checks label { min-height: 6.2rem; }
  .five-checks label:nth-child(4), .five-checks label:nth-child(5) { min-height: 5.7rem; }
  #sniper .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #sniper .review-checks { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #sniper .grid.two.history-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* v0.5.3-rc2: ledger / watch / system usability + dirty-data resilience */
.app-error { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .8rem; padding: .8rem 1rem; border: 1px solid #efc3a3; border-left: 4px solid var(--amber); border-radius: 12px; background: #fff8ee; color: #6f4c15; }
.app-error > div { display: grid; gap: .1rem; }
.app-error strong { font-size: .88rem; }
.app-error span { color: #806541; font-size: .75rem; }

.account-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .7rem; }
.account-card { min-width: 0; min-height: 10rem; display: flex; flex-direction: column; gap: .75rem; padding: .85rem; border: 1px solid var(--line); border-top-width: 4px; border-radius: 13px; background: #fff; }
.account-card-head, .holding-card-head, .watch-card-head, .job-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.account-card-head > div, .watch-card-head > div { min-width: 0; display: grid; gap: .05rem; }
.account-card-head strong, .watch-card-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.account-card-head small, .watch-card-head small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .68rem; }
.account-card-facts { margin-top: auto; display: grid; grid-template-columns: 1fr; gap: .3rem; }
.account-card-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: .45rem; padding-top: .32rem; border-top: 1px solid #e7edf1; }
.account-card-facts span { color: var(--muted); font-size: .66rem; }
.account-card-facts b { overflow-wrap: anywhere; text-align: right; font-size: .75rem; }

.holding-card-grid { display: none; }
.holding-card { min-width: 0; display: flex; flex-direction: column; gap: .3rem; padding: .7rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.holding-card-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.holding-card > small { color: var(--muted); font-size: .66rem; }
.holding-card > b { margin-top: .25rem; font-size: .9rem; }
.holding-facts { color: var(--muted); font-size: .65rem; line-height: 1.45; }

.watch-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .7rem; }
.watch-card { min-width: 0; min-height: 15rem; display: flex; flex-direction: column; gap: .65rem; padding: .85rem; border: 1px solid var(--line); border-top-width: 4px; border-radius: 13px; background: #fff; }
.watch-zones { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .4rem; }
.watch-zones > div { display: grid; gap: .08rem; padding: .45rem; border: 1px solid #e5ebef; border-radius: 9px; background: #f8fafb; }
.watch-zones span { color: var(--muted); font-size: .62rem; }
.watch-zones b { overflow-wrap: anywhere; font-size: .72rem; }
.watch-line { display: grid; gap: .15rem; margin: 0; padding: .48rem .5rem; border-radius: 8px; font-size: .68rem; line-height: 1.38; }
.watch-line b { font-size: .65rem; }
.watch-line span { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.danger-line { border-left: 3px solid #cf655c; background: #fff4f2; color: #74453f; }
.next-line { margin-top: auto; border-left: 3px solid var(--teal); background: #eef8f5; color: #315f57; }
.watch-empty { grid-column: 1/-1; display: grid; gap: .2rem; padding: 1.2rem; border: 1px dashed #cbd6de; border-radius: 12px; background: #fbfcfd; }
.watch-empty span { color: var(--muted); font-size: .78rem; }

.job-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; }
.job-card { min-width: 0; min-height: 10rem; display: flex; flex-direction: column; gap: .55rem; padding: .8rem; border: 1px solid var(--line); border-top-width: 4px; border-radius: 12px; background: #fff; }
.job-card-head strong { font-size: .82rem; line-height: 1.35; }
.job-card p { display: grid; gap: .05rem; margin: .15rem 0 0; }
.job-card p span { color: var(--muted); font-size: .62rem; }
.job-card p b { font-size: .73rem; }
.job-card > small { color: var(--muted); font-size: .65rem; }
.job-card .small-button { width: 100%; margin-top: auto; }

.health-list { display: grid; gap: .45rem; }
.health-row { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: .65rem; padding: .65rem .7rem; border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; background: #fff; }
.health-main { min-width: 0; display: grid; gap: .08rem; }
.health-main strong { font-size: .78rem; }
.health-main small { color: var(--muted); font-size: .63rem; }
.health-main p { margin: .18rem 0 0; color: #526476; font-size: .68rem; line-height: 1.4; }

@media (min-width: 600px) and (max-width: 980px) {
  .account-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .watch-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .job-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #watchlist .form-grid, #ledger .form-grid, #data-center .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 599px) {
  .app-error { align-items: flex-start; flex-direction: column; }
  .app-error .secondary-action { width: 100%; }
  .account-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
  .account-card { min-height: 9rem; padding: .65rem; }
  .account-card-head { flex-direction: column-reverse; }
  .account-card-head .mini-status { align-self: flex-start; }
  .account-card-facts > div { display: grid; gap: .05rem; }
  .account-card-facts b { text-align: left; font-size: .7rem; }
  .holding-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
  .ledger-table-desktop { display: none; }
  .watch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
  .watch-card { min-height: 13.5rem; padding: .65rem; }
  .watch-card-head { flex-direction: column-reverse; }
  .watch-card-head .mini-status { align-self: flex-start; }
  .watch-zones { grid-template-columns: 1fr; }
  .watch-line span { -webkit-line-clamp: 2; }
  .watch-guide { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .job-grid { grid-template-columns: 1fr; }
  .job-card { min-height: auto; }
  .health-row { grid-template-columns: 1fr; gap: .35rem; }
  .health-row .mini-status { width: fit-content; }
  #ledger .panel-head, #watchlist .panel-head, #data-center .panel-head { gap: .45rem; }
}

@media (max-width: 430px) {
  .account-grid, .holding-card-grid, .watch-grid { gap: .42rem; }
  .account-card, .holding-card, .watch-card { padding: .55rem; }
  .watch-card { min-height: 12.8rem; }
  .watch-zones > div { padding: .38rem; }
}

/* v0.5.4: fully automated decision funnel, result-first UI */
.funnel-process { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .45rem; margin-top: .65rem; }
.funnel-process > div { min-width: 0; display: grid; gap: .15rem; padding: .55rem .6rem; border: 1px solid #dce6e3; border-radius: 10px; background: #fff; }
.funnel-process b { color: var(--gold-dark, #9b741d); font-size: .66rem; }
.funnel-process strong { color: var(--navy); font-size: .74rem; line-height: 1.3; }
.funnel-process small { color: var(--muted); font-size: .62rem; line-height: 1.35; }
.result-group-title { display: flex; justify-content: space-between; align-items: baseline; gap: .65rem; margin: .1rem 0 .5rem; }
.result-group-title strong { color: var(--navy); font-size: .9rem; }
.result-group-title span { color: var(--muted); font-size: .68rem; }
.watch-pool-details { margin-top: .65rem; border: 1px solid var(--line); border-radius: 11px; background: #f8fafb; }
.watch-pool-details > summary { cursor: pointer; padding: .65rem .75rem; color: #42576a; font-size: .76rem; font-weight: 800; }
.watch-pool-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .45rem; padding: 0 .65rem .65rem; }
.watch-pool-item { min-width: 0; display: grid; gap: .08rem; padding: .5rem; border: 1px solid #dce4ea; border-radius: 9px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.watch-pool-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; }
.watch-pool-item span { color: var(--muted); font-size: .62rem; }
.watch-pool-item b { color: var(--navy); font-size: .82rem; }
.score-method-note { margin: -.2rem 0 .65rem; color: var(--muted); font-size: .66rem; line-height: 1.4; }
.reason-box { margin-top: .55rem; padding: .55rem .65rem; border-radius: 9px; border-left: 3px solid; }
.reason-box b { font-size: .72rem; }
.reason-box p { margin: .2rem 0 0; color: #4c6072; font-size: .69rem; line-height: 1.42; }
.good-box { border-color: #159579; background: #f1fbf7; }
.risk-box { border-color: #d79824; background: #fff9eb; }
.auto-gate-checks { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .5rem; }
.auto-check-row { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .45rem; padding: .6rem; border: 1px solid var(--line); border-radius: 10px; }
.auto-check-row > div { min-width: 0; display: grid; gap: .15rem; }
.auto-check-row strong { font-size: .74rem; }
.auto-check-row p { margin: 0; color: #536676; font-size: .65rem; line-height: 1.42; overflow-wrap: anywhere; }
.selected-plan-card, .decision-basis { display: grid; gap: .18rem; padding: .7rem .8rem; border: 1px solid #d9e3ea; border-radius: 10px; background: #f8fafc; }
.selected-plan-card strong, .decision-basis strong { color: var(--navy); font-size: .82rem; }
.selected-plan-card span, .decision-basis span { color: var(--muted); font-size: .7rem; line-height: 1.4; }
.score-explanation { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
.score-explain-row { padding: .6rem .65rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.score-explain-row > div { display: flex; justify-content: space-between; gap: .5rem; }
.score-explain-row strong { font-size: .72rem; }
.score-explain-row b { color: var(--navy); font-size: .75rem; }
.score-explain-row p { margin: .25rem 0 0; color: #566979; font-size: .65rem; line-height: 1.4; }
.score-explain-row.is-missing { background: #fff9eb; border-color: #ecd7a3; }

@media (max-width: 980px) {
  .funnel-process { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .watch-pool-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .auto-gate-checks { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 599px) {
  .funnel-process { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .funnel-process > div:last-child { grid-column: 1/-1; }
  .result-group-title { display: grid; gap: .15rem; }
  .watch-pool-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .auto-gate-checks { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .auto-check-row:last-child { grid-column: 1/-1; }
  .score-explanation { grid-template-columns: 1fr; }
}
.score-breakdown-details { margin-top: .6rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.score-breakdown-details > summary { cursor: pointer; padding: .55rem .65rem; color: #42576a; font-size: .7rem; font-weight: 800; }
.score-breakdown-details .score-explanation { padding: 0 .55rem .55rem; }

/* v0.5.4-rc3: system-generated candidate pool + transparent capability boundary */
.funnel-process { grid-template-columns: repeat(6,minmax(0,1fr)); }
.maturity-note { margin-top: .65rem; border: 1px solid #e6cf9a; border-radius: 10px; background: #fff9eb; }
.maturity-note > summary { cursor: pointer; padding: .6rem .7rem; color: #745516; font-size: .72rem; font-weight: 800; }
.maturity-note > div { display: grid; gap: .18rem; padding: 0 .7rem .65rem; }
.maturity-note p { margin: 0; color: #725f39; font-size: .66rem; line-height: 1.45; }
.system-watch-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; }
.system-watch-card { min-width: 0; display: flex; flex-direction: column; gap: .58rem; padding: .75rem; border: 1px solid var(--line); border-top-width: 4px; border-radius: 12px; background: #fff; }
.system-watch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .45rem; }
.system-watch-head > div { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: .08rem .35rem; align-items: baseline; }
.system-watch-head > div > span { grid-row: 1 / span 2; color: var(--muted); font-size: .65rem; font-weight: 800; }
.system-watch-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.system-watch-head small { color: var(--muted); font-size: .62rem; }
.system-watch-score { display: flex; justify-content: space-between; align-items: baseline; padding: .48rem .55rem; border-radius: 9px; background: #f6f9fb; }
.system-watch-score span { color: var(--muted); font-size: .64rem; }
.system-watch-score strong { color: var(--navy); font-size: 1rem; }
.system-watch-score small { margin-left: .1rem; color: var(--muted); font-size: .6rem; }
.watch-reason-list { display: grid; gap: .12rem; padding: .5rem .55rem; border-radius: 9px; background: #f1fbf7; border-left: 3px solid #159579; }
.watch-reason-list b { font-size: .68rem; }
.watch-reason-list p { margin: 0; color: #4d6170; font-size: .64rem; line-height: 1.42; }
.watch-reason-list.risk-box { background: #fff9eb; border-left-color: #d79824; }
.watch-next { margin: auto 0 0; padding-top: .45rem; border-top: 1px solid #e4eaee; color: #536676; font-size: .65rem; line-height: 1.42; }

@media (min-width: 600px) and (max-width: 980px) {
  .funnel-process { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .system-watch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 599px) {
  .funnel-process { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .funnel-process > div:last-child { grid-column: auto; }
  .system-watch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
  .system-watch-card { padding: .6rem; }
  .system-watch-head { flex-direction: column-reverse; }
  .system-watch-head .mini-status { align-self: flex-start; }
  .watch-reason-list p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
}
@media (max-width: 430px) {
  .system-watch-grid { gap: .42rem; }
  .system-watch-card { padding: .55rem; }
  .system-watch-score { display: grid; gap: .05rem; }
}

/* v0.6.1-rc3: decision-first explanation layer */
.decision-verdict { margin: .55rem 0; padding: .72rem .8rem; border: 1px solid var(--line); border-left: 4px solid #7b8fa3; border-radius: 10px; background: #f7fafc; }
.decision-verdict strong { display: block; margin-bottom: .2rem; font-size: .86rem; color: var(--navy); }
.decision-verdict p { margin: 0; color: #526577; font-size: .72rem; line-height: 1.5; }
.decision-verdict.tone-green { background: #effaf5; border-left-color: #3aa980; }
.decision-verdict.tone-amber { background: #fff8e7; border-left-color: #d9a52b; }
.decision-verdict.tone-red { background: #fff1f0; border-left-color: #d45a52; }
.decision-verdict.tone-blue { background: #f1f7fc; border-left-color: #5d92bd; }
.decision-verdict.tone-slate { background: #f5f7f8; border-left-color: #7b8fa3; }
.wait-box { background: #f2f7fb; border-left-color: #6f9dbd; }
.wait-box b { color: #2f607d; }
.good-box { background: #effaf5; border-left-color: #34a179; }
.risk-box { background: #fff8e7; border-left-color: #d29b20; }

@media (max-width: 600px) {
  .decision-verdict { padding: .62rem .68rem; }
  .decision-verdict strong { font-size: .82rem; }
  .decision-verdict p, .reason-box p { font-size: .71rem; }
}