/* 订舱记录与字段核对（界面示例）。共享主题见 assets/demo-theme.css 的 .demo-booking-review 部分。
   文字最小 12px；正文与辅助文字对比度 ≥ 4.5:1。 */
:root { color-scheme: light; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; --ink:#172033; --muted:#56707c; --line:#dce4ee; --teal:#087e87; --bg:#f3f6fa; --orange:#b45309; --link:#04799a; }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font-size:14px; }
button { font:inherit; }

.topbar { min-height:72px; display:flex; align-items:center; gap:28px; padding:12px 24px; color:var(--ink); background:#fff; border-bottom:1px solid var(--line); }
.topbar a { color:inherit; text-decoration:none; }
.brand { min-width:240px; display:flex; flex-direction:column; }
.brand small { color:var(--muted); font-size:12px; margin-top:4px; }
nav { display:flex; align-self:stretch; gap:4px; }
.topbar nav a,.topbar nav > span { display:flex; align-items:center; padding:0 14px; font-weight:700; }
.topbar nav a { color:var(--link); }
.topbar nav a:hover { text-decoration:underline; }
.source { margin-left:auto; text-align:right; }
.source small,.source strong { display:block; }
.source small { color:var(--muted); font-size:12px; }

main { padding:26px 28px 38px; }
.page-title { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
h1 { margin:0 0 5px; font-size:26px; }
h2,h3 { margin:0; }
.page-title p { max-width:850px; margin:0; color:var(--muted); line-height:1.7; }
.demo-label { flex:0 0 auto; padding:6px 12px; border:1px solid #95d5ce; border-radius:4px; color:#08746d; background:#eaf8f5; font-size:13px; font-weight:700; white-space:nowrap; }

.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.metrics article { min-height:98px; padding:16px; border:1px solid var(--line); border-radius:6px; background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.04); }
.metrics small,.metrics span { display:block; color:var(--muted); }
.metrics small { font-size:13px; }
.metrics strong { display:block; margin:6px 0 2px; font-size:26px; }
.metrics span { font-size:12px; }

.workspace { min-height:700px; display:grid; grid-template-columns:330px minmax(0,1fr); gap:14px; align-items:start; }
.booking-list,.detail { border:1px solid var(--line); border-radius:6px; background:#fff; overflow:hidden; }
.list-head { min-height:65px; display:flex; align-items:center; justify-content:space-between; padding:14px; border-bottom:1px solid var(--line); }
.list-head h2 { font-size:15px; }
.list-head small { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.list-head > span { color:var(--muted); font-size:13px; }
.booking-row { position:relative; width:100%; min-height:108px; display:block; padding:16px 14px; border:0; border-bottom:1px solid var(--line); color:var(--ink); background:#fff; text-align:left; cursor:pointer; }
.booking-row:hover,.booking-row.active { background:#edf9f7; }
.booking-row.active { box-shadow:inset 3px 0 var(--teal); }
.booking-row strong,.booking-row small,.booking-row em { display:block; }
.booking-row strong { margin:9px 0 5px; font-size:14px; }
.booking-row small { color:var(--muted); font-size:13px; }
.booking-row em { position:absolute; top:16px; right:13px; color:var(--muted); font-size:12px; font-style:normal; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.status { width:max-content; display:inline-flex; align-items:center; min-height:24px; padding:3px 9px; border-radius:14px; font-size:12px; font-weight:700; }
.status.pending { color:#8a5100; background:#fff4d6; }
.status.passed { color:#08746d; background:#dcf6f0; }
.status.review { color:#a63d27; background:#fff0eb; }

.detail { padding:18px; }
.detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:4px 2px 16px; border-bottom:1px solid var(--line); }
.detail-head small { color:var(--teal); font-size:13px; font-weight:700; }
.detail-head h2 { margin:7px 0 5px; font-size:22px; }
.detail-head p { margin:0; color:var(--muted); }
.detail-grid { display:grid; grid-template-columns:1.18fr .82fr; gap:12px; margin-top:14px; }
.field-panel,.checks { border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.panel-title { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); background:#f8fafc; }
.panel-title h3 { font-size:15px; }
.panel-title small { color:var(--muted); font-size:12px; }
dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; }
dl div { min-height:66px; padding:12px 14px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
dl div:nth-child(2n) { border-right:0; }
dt { color:var(--muted); font-size:12px; }
dd { margin:5px 0 0; font-weight:800; overflow-wrap:anywhere; }
.cargo-panel dl .wide { grid-column:1/-1; border-right:0; }
.cargo-panel dl .wide ~ div:nth-child(2n) { border-right:1px solid var(--line); }
.cargo-panel dl .wide ~ div:nth-child(2n+1) { border-right:0; }

.checks { margin-top:12px; }
.check { min-height:66px; display:grid; grid-template-columns:30px 1fr auto; gap:12px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); }
.check:last-child { border-bottom:0; }
.check > span { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; color:#fff; font-weight:900; }
.check.passed > span { background:var(--teal); }
.check.warning { background:#fffaf0; }
.check.warning > span { background:var(--orange); }
.check strong,.check small { display:block; }
.check small { margin-top:3px; color:var(--muted); font-size:13px; line-height:1.6; }
.check em { color:var(--muted); font-size:12px; font-style:normal; font-weight:700; white-space:nowrap; }
.check.warning em { color:#9a4a00; }

.actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding-top:16px; }
.actions a { min-height:40px; padding:10px 14px; border-radius:5px; text-decoration:none; font-weight:700; }
.actions .primary { color:#fff; background:var(--teal); }

button:focus-visible,a:focus-visible { outline:3px solid #178cb9; outline-offset:3px; }

@media(max-width:900px){.metrics{grid-template-columns:repeat(2,1fr)}.workspace{grid-template-columns:1fr}.booking-list{max-height:360px;overflow:auto}.detail-grid{grid-template-columns:1fr}}
@media(max-width:700px){.topbar{gap:10px 14px;flex-wrap:wrap;padding:12px 16px}.brand{min-width:0}.topbar nav{order:3;width:100%;min-height:40px;flex-wrap:wrap}.topbar nav a,.topbar nav > span{padding:0 14px 0 0}.source{font-size:12px}main{padding:24px 16px}.page-title{flex-direction:column;align-items:flex-start;gap:12px}.page-title h1{font-size:22px}.detail-head,.panel-title,.actions{flex-wrap:wrap;gap:10px}.check{grid-template-columns:26px 1fr}.check em{grid-column:2}.detail{padding:12px}.actions a{width:100%;text-align:center}}