/* Content handover uses the same command-centre grammar as the SPA shell. */
:root {
  --handover-canvas: #f1f4f8;
  --handover-surface: #fff;
  --handover-soft: #f7f9fc;
  --handover-ink: #172235;
  --handover-muted: #68768b;
  --handover-faint: #8b98aa;
  --handover-line: #dfe6ef;
  --handover-accent: #b62335;
  --handover-accent-soft: #fff0f2;
  --handover-radius: 16px;
}
* { box-sizing: border-box; }
html { background: var(--handover-canvas); }
body {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(circle at 92% -16%, #f9e7eb 0, transparent 31rem), var(--handover-canvas);
  color: var(--handover-ink);
}
header {
  height: 76px;
  padding: 0 max(22px, calc((100vw - 1440px) / 2));
  border-bottom-color: #dce4ee;
  background: #111c2e;
  color: #f4f7fc;
  box-shadow: 0 6px 22px #16243a18;
}
header .brand { gap: 11px; color: #f4f7fc; }
header .brand b { width: 39px; height: 39px; border-radius: 12px; background: linear-gradient(145deg,#d54254,#a81e31); box-shadow: 0 8px 18px #b6233547; }
header .brand small { color: #91a0b5; }
header .back { color: #b8c5d7; padding: 8px 11px; border: 1px solid #dce7f21f; border-radius: 9px; }
header .back:hover { background: #dce7fa12; color: #fff; }
main { max-width: 1440px; padding: 42px max(22px, calc((100vw - 1440px) / 2)) 78px; }
.heading { align-items: flex-start; margin-bottom: 22px; }
.eyebrow { color: var(--handover-accent); letter-spacing: .14em; }
h1 { margin-bottom: 9px; font-size: clamp(27px, 3vw, 36px); font-weight: 780; letter-spacing: -.045em; }
.heading p:not(.eyebrow), .muted { color: var(--handover-muted); }
.heading button { min-height: 39px; border-radius: 10px; background: var(--handover-accent); border-color: var(--handover-accent); color: #fff; font-weight: 700; box-shadow: 0 6px 14px #b6233523; }
.notice { margin-bottom: 18px; border-radius: 11px; border-color: var(--handover-line); background: var(--handover-surface); box-shadow: 0 3px 10px #17223505; }
.metrics { gap: 13px; margin-bottom: 20px; }
.metrics article { position: relative; overflow: hidden; min-height: 119px; padding: 20px; border-color: var(--handover-line); border-radius: var(--handover-radius); box-shadow: 0 1px 2px #17223508, 0 12px 30px #17223509; }
.metrics article::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg,var(--handover-accent),#df7884); }
.metrics article:nth-child(2)::before { background: linear-gradient(90deg,#2e65d8,#7b99e7); }
.metrics article:nth-child(3)::before { background: linear-gradient(90deg,#168861,#67c19a); }
.metrics strong { color: var(--handover-ink); font-weight: 780; }
.layout { grid-template-columns: minmax(0,1fr) 330px; gap: 18px; }
.panel { border-color: var(--handover-line); border-radius: var(--handover-radius); box-shadow: 0 1px 2px #17223508, 0 12px 30px #17223509; }
.section-head { padding: 20px 23px; border-bottom-color: var(--handover-line); }
.request { padding: 21px 23px; border-bottom-color: var(--handover-line-soft); }
.request:hover { background: #fbfcfe; }
.request h3 { color: var(--handover-ink); font-weight: 720; }
.request-meta, .proof { color: var(--handover-muted); }
.pill { border: 1px solid var(--handover-line); background: var(--handover-soft); }
.pill.prepared { border-color: #f2dfbf; background: #fff7e8; }
.pill.transferred { border-color: #cfeadf; background: #edf9f3; }
.guide { padding: 24px; }
.guide h2 { margin-bottom: 22px; color: var(--handover-ink); }
.guide b { color: var(--handover-ink); }
.guide .muted { border-top-color: var(--handover-line); }
dialog { border-color: var(--handover-line); border-radius: 19px; box-shadow: 0 28px 78px #14223835; }
dialog::backdrop { background: #14223870; backdrop-filter: blur(8px); }
input:not([type=checkbox]), select, textarea { border-color: #d5dfeb; background: #fbfcfe; }
input:not([type=checkbox]):focus, select:focus, textarea:focus { border-color: var(--handover-accent); box-shadow: 0 0 0 3px #b6233520; }
.primary { border-color: var(--handover-accent); background: var(--handover-accent); }
@media (max-width: 850px) { .layout { grid-template-columns: 1fr; } .guide { display: none; } }
@media (max-width: 540px) { header { height: 68px; padding-inline: 16px; } main { padding: 28px 14px 70px; } .heading { gap: 12px; } .heading button { padding: 9px 12px; } .metrics { gap: 8px; } .metrics article { min-height: 104px; padding: 16px 13px; } .metrics strong { font-size: 25px; } .request, .section-head { padding: 18px; } }