:root {
  --navy: #0b1728;
  --navy-2: #11233b;
  --ink: #102033;
  --muted: #66758a;
  --line: #e3e9f0;
  --canvas: #f5f7fa;
  --card: #ffffff;
  --blue: #2364d2;
  --blue-soft: #e7f0ff;
  --orange: #d97732;
  --orange-soft: #fff1e6;
  --red: #c54444;
  --red-soft: #fff0f0;
  --green: #287c5b;
  --green-soft: #eaf7f0;
  --radius: 14px;
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100dvh; display: flex; }
.locked .app-shell { display:none; }
.auth-screen { min-height:100dvh; display:grid; place-items:center; padding:24px; background:linear-gradient(145deg,#eef3f8 0%,#f7f9fb 48%,#e7eef7 100%); }
.auth-screen.hidden { display:none; }
.auth-card { width:min(420px,100%); background:#fff; border:1px solid #dfe7ef; border-radius:18px; padding:30px; box-shadow:0 24px 70px rgba(21,48,78,.12); }
.auth-brand { display:flex; align-items:center; gap:10px; margin-bottom:28px; }
.auth-brand strong, .auth-brand span { display:block; }
.auth-brand strong { font-size:15px; }
.auth-brand span { color:var(--muted); font-size:11px; margin-top:3px; }
.auth-card h1 { margin:8px 0 8px; font-size:27px; letter-spacing:-.04em; }
.auth-sub { color:var(--muted); font-size:12px; line-height:1.6; margin:0 0 22px; }
.auth-footnote { color:#8391a3; font-size:10px; line-height:1.5; margin:19px 0 0; border-top:1px solid #edf1f5; padding-top:13px; }
.scan-mode .sidebar, .scan-mode .topbar { display:none; }
.scan-mode .main-area { min-height:100dvh; }
.scan-mode .view { max-width:720px; padding:18px 18px 40px; }
.scan-mode #inspectionView > .page-heading, .scan-mode #inspectionView .scan-panel { display:none; }
.scan-mode #inspectionView { padding-top:18px; }
.scan-mode #inspectionView .check-panel { border:0; box-shadow:none; padding:0; }
.scan-mode #inspectionView .selected-oven-heading { padding:14px 2px 16px; border-bottom:1px solid var(--line); }
.scan-mode #inspectionView .selected-oven-heading h2 { font-size:22px; }
.scan-mode #inspectionView #clearOvenBtn { display:none; }
.scan-mode #inspectionView .inspection-history { margin-top:18px; }
.sidebar { width: 236px; min-height: 100dvh; background: var(--navy); color: #dbe6f4; padding: 28px 16px 18px; display: flex; flex-direction: column; position: sticky; top: 0; }
.brand-lockup, .mobile-brand { display: flex; align-items: center; gap: 10px; }
.brand-lockup { padding: 0 10px 32px; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: #f3a45d; color: var(--navy); display: grid; place-items: center; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.brand-lockup strong { display: block; color: #fff; font-size: 15px; letter-spacing: .02em; }
.brand-lockup span { display: block; color: #8fa4bd; font-size: 11px; margin-top: 3px; }
.nav-label, .eyebrow { color: #8496ad; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }
.nav-label { padding: 0 12px 9px; }
.nav-list { display: grid; gap: 5px; }
.nav-item { border: 0; background: transparent; color: #a9b9cd; text-align: left; border-radius: 10px; padding: 12px 12px; display: flex; align-items: center; gap: 10px; font-size: 13px; transition: .16s ease; }
.nav-item:hover { background: #142b46; color: #fff; }
.nav-item.active { color: #fff; background: #1c3859; box-shadow: inset 3px 0 0 #f3a45d; }
.nav-dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; opacity: .8; }
.nav-item.active .nav-dot { background: #f3a45d; border-color: #f3a45d; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 16px; }
.data-note { display: flex; gap: 9px; align-items: center; border-top: 1px solid #253b55; padding: 17px 10px 0; }
.status-light { width: 8px; height: 8px; background: #58c68c; border-radius: 50%; box-shadow: 0 0 0 4px #1a3a38; }
.data-note b { display:block; font-size: 12px; color: #dde8f5; }
.data-note small { display:block; color: #8195ad; font-size: 10px; margin-top: 3px; }
.ghost-button { border: 1px solid #304b68; color: #a7bad0; background: transparent; border-radius: 8px; padding: 9px 10px; font-size: 12px; }
.ghost-button:hover { border-color: #6983a0; color: #fff; }
.main-area { min-width: 0; flex: 1; }
.topbar { height: 70px; background: var(--card); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 0 36px; }
.mobile-brand { display: none; margin-right: auto; }
.user-box { display:flex; align-items:center; gap:8px; margin-right:4px; }
.user-avatar, .account-avatar { display:grid; place-items:center; background:var(--navy); color:#fff; font-weight:800; }
.user-avatar { width:28px; height:28px; border-radius:8px; font-size:11px; }
.user-copy b, .user-copy small { display:block; }
.user-copy b { font-size:11px; }
.user-copy small { color:var(--muted); font-size:9px; margin-top:2px; }
.logout-button { border:0; background:transparent; color:var(--muted); font-size:10px; padding:4px; }
.logout-button:hover { color:var(--red); }
.topbar-meta { display: flex; align-items: center; gap: 15px; color: var(--muted); font-size: 12px; }
.live-pill { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-size: 11px; font-weight: 700; }
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #4dbb85; }
.primary-button, .secondary-button, .text-button, .icon-button, .filter-pill { border: 0; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.primary-button { color: #fff; background: var(--blue); border-radius: 9px; padding: 11px 17px; font-weight: 700; font-size: 13px; box-shadow: 0 5px 12px rgba(35,100,210,.16); }
.primary-button:hover { background: #1e56b7; transform: translateY(-1px); }
.primary-button:active, .secondary-button:active, .filter-pill:active { transform: scale(.98); }
.primary-button.compact { padding: 9px 14px; }
.secondary-button { color: var(--blue); background: var(--blue-soft); border-radius: 9px; padding: 10px 15px; font-size: 13px; font-weight: 700; }
.secondary-button:hover { background: #d5e5ff; }
.text-button { background: transparent; color: var(--blue); font-size: 12px; font-weight: 700; padding: 6px 0; }
.text-button:hover { color: #17489d; }
.view { display: none; max-width: 1440px; margin: 0 auto; padding: 34px 38px 56px; }
.view.active { display: block; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap: 20px; margin-bottom: 28px; }
.page-heading h1 { margin: 7px 0 7px; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.045em; line-height: 1.1; color: var(--ink); }
.heading-sub { margin: 0; color: var(--muted); font-size: 13px; }
.heading-date { border-left: 1px solid var(--line); padding-left: 16px; min-width: 125px; }
.heading-date span { display:block; color: var(--muted); font-size: 11px; }
.heading-date b { display:block; margin-top: 5px; font-size: 15px; }
.compact-heading { align-items: center; }
.heading-actions { display:flex; gap:8px; }
.metrics-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.metric-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 17px 18px; min-height: 112px; position: relative; overflow: hidden; }
.metric-card::after { content: ""; position:absolute; right:-20px; bottom:-30px; width:95px; height:95px; border-radius:50%; background: var(--blue-soft); opacity:.8; }
.metric-card.warn::after { background: var(--orange-soft); }
.metric-card.alert::after { background: var(--red-soft); }
.metric-card.good::after { background: var(--green-soft); }
.metric-label { color: var(--muted); font-size: 12px; position:relative; z-index:1; }
.metric-value { font-size: 30px; letter-spacing: -.04em; margin-top: 9px; font-weight: 750; position:relative; z-index:1; }
.metric-value small { font-size: 13px; margin-left: 3px; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.metric-hint { color: var(--muted); font-size: 11px; margin-top: 4px; position:relative; z-index:1; }
.dashboard-grid { display:grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .9fr); gap: 18px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 21px; }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; margin-bottom: 19px; }
.panel-heading h2 { margin:0; font-size: 16px; letter-spacing: -.02em; }
.panel-heading p { color: var(--muted); font-size: 11px; margin: 5px 0 0; }
.count-badge { background: var(--red-soft); color: var(--red); min-width: 24px; height:24px; border-radius: 7px; display:grid; place-items:center; font-weight: 800; font-size: 12px; }
.forecast-chart { height: 122px; display:flex; align-items:flex-end; gap: 10px; border-bottom: 1px solid var(--line); padding: 0 8px 0; }
.chart-col { flex: 1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap: 7px; height:100%; }
.chart-bar-wrap { height: 90px; width: 100%; display:flex; align-items:flex-end; justify-content:center; }
.chart-bar { width: min(32px, 70%); min-height: 4px; border-radius: 6px 6px 2px 2px; background: #9cbcf1; transition: height .25s ease; }
.chart-col.today .chart-bar { background: var(--orange); }
.chart-value { color: var(--ink); font-size: 10px; font-weight: 700; }
.chart-date { color: var(--muted); font-size: 10px; }
.forecast-list { display:grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 15px; }
.forecast-row { padding: 10px 11px; background: #f8fafc; border-radius: 9px; border:1px solid #edf1f5; }
.forecast-row b { display:block; font-size: 12px; }
.forecast-row span { display:block; font-size: 11px; color: var(--muted); margin-top: 5px; }
.forecast-row.highlight { background: var(--orange-soft); border-color: #f7d8bd; }
.attention-list { display:grid; gap: 9px; }
.attention-item { display:flex; align-items:flex-start; gap: 10px; padding: 11px 12px; border-radius: 10px; background: #fbfcfe; border: 1px solid #eef2f6; }
.attention-item.urgent { background: var(--red-soft); border-color: #f6d1d1; }
.attention-item.warn { background: var(--orange-soft); border-color: #f5dfcc; }
.attention-icon { width: 8px; height: 8px; border-radius:50%; background: var(--orange); margin-top: 5px; flex:none; }
.urgent .attention-icon { background: var(--red); }
.attention-copy { min-width: 0; flex:1; }
.attention-copy b { display:block; font-size:12px; }
.attention-copy span { display:block; font-size:11px; color:var(--muted); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.attention-action { background: transparent; color: var(--blue); border:0; font-size:11px; font-weight:700; padding: 2px 0; }
.recent-panel { margin-top: 18px; }
.table-wrap { overflow-x: auto; }
table { width:100%; border-collapse: collapse; min-width: 680px; }
th { text-align:left; color: #8190a3; font-size: 10px; letter-spacing: .04em; font-weight: 700; padding: 0 11px 11px; white-space: nowrap; }
td { border-top: 1px solid #edf1f5; padding: 13px 11px; font-size: 12px; white-space: nowrap; }
tbody tr:hover { background: #fbfcfe; }
.trip-code { font-weight: 800; color: var(--ink); }
.qty { font-weight: 700; }
.muted-cell { display:block; color:var(--muted); font-size:10px; margin-top:4px; font-weight:400; }
.progress-cell { display:flex; align-items:center; gap:7px; min-width:90px; color:var(--muted); font-size:10px; }
.progress-cell > i { display:block; width:53px; height:5px; background:#e8edf3; border-radius:9px; overflow:hidden; }
.progress-cell > i > b { display:block; height:100%; border-radius:inherit; background:#6f9de4; }
.status-pill, .window-pill { display:inline-flex; align-items:center; border-radius: 99px; padding: 5px 8px; font-size: 10px; font-weight: 700; }
.status-cold_drying { color:#9a5b13; background:#fff4d8; }
.status-awaiting_hot { color:#a95721; background:#fff0e4; }
.status-hot_drying { color:#8b5d14; background:#fff7d9; }
.status-due_inspect { color: var(--red); background: var(--red-soft); }
.status-pending_release { color: var(--blue); background: var(--blue-soft); }
.status-departed { color: var(--green); background: var(--green-soft); }
.status-rejected { color: #7b4351; background: #fceef2; }
.window-1day { color:var(--red); background:var(--red-soft); }
.window-3day { color:#a36016; background:#fff5df; }
.window-7day { color:var(--blue); background:var(--blue-soft); }
.window-overdue { color:var(--red); background:var(--red-soft); }
.window-later { color:var(--muted); background:#f1f4f7; }
.row-action { color: var(--blue); background: transparent; border:0; font-size:11px; font-weight:700; padding: 6px 0; }
.filter-row { display:flex; align-items:center; justify-content:space-between; gap: 15px; margin-bottom: 18px; flex-wrap:wrap; }
.search-box { display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:9px; padding: 0 11px; height:36px; min-width: 220px; color: var(--muted); }
.search-box input { border:0; outline:0; min-width:0; width:100%; color:var(--ink); font-size:12px; background:transparent; }
.filter-pills { display:flex; gap:6px; flex-wrap:wrap; }
.filter-pill { background:#f3f6f9; color:var(--muted); border-radius:8px; padding:8px 10px; font-size:11px; }
.filter-pill.active { color:var(--blue); background:var(--blue-soft); font-weight:700; }
.hidden { display:none !important; }
.empty-state { text-align:center; padding: 42px 10px 32px; color:var(--muted); }
.empty-state strong, .empty-state span { display:block; }
.empty-state strong { color:var(--ink); font-size:13px; }
.empty-state span { margin-top:6px; font-size:11px; }
.settings-grid { display:grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap:18px; }
.stack-form { display:grid; gap:14px; }
.stack-form label { display:grid; gap:7px; color: #506074; font-size:11px; font-weight:700; }
.stack-form input, .stack-form select, .stack-form textarea { width:100%; border:1px solid #d9e1e9; border-radius:8px; outline:0; padding: 10px 11px; color:var(--ink); background:#fff; font-size:12px; resize:vertical; }
.stack-form input:focus, .stack-form select:focus, .stack-form textarea:focus, .search-box:focus-within { border-color: #7ca4e4; box-shadow: 0 0 0 3px #e8f0ff; }
.suffix-input { position:relative; }
.suffix-input input { padding-right: 34px; }
.suffix-input span { position:absolute; right:11px; top:10px; color:var(--muted); font-size:12px; font-weight:500; }
.product-list { display:grid; gap: 9px; }
.product-row { display:flex; align-items:center; justify-content:space-between; gap: 12px; border:1px solid #edf1f5; border-radius:10px; padding: 12px 13px; }
.product-row strong { display:block; font-size:12px; }
.product-row span { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.product-days { color:var(--blue); background:var(--blue-soft); border-radius:7px; padding:7px 9px; font-size:11px; font-weight:800; white-space:nowrap; }
.inspection-layout { display:grid; grid-template-columns:minmax(285px,.72fr) minmax(0,1.28fr); gap:18px; }
.scan-chip { color:var(--orange); background:var(--orange-soft); border-radius:99px; padding:6px 9px; font-size:10px; font-weight:800; white-space:nowrap; }
.scan-button { width:100%; border:1px dashed #9db9e8; background:#f5f9ff; border-radius:12px; padding:17px; display:flex; align-items:center; gap:12px; color:var(--blue); text-align:left; }
.scan-button:hover { background:#eaf2ff; border-color:#6e98dc; }
.scan-glyph { width:34px; height:34px; border-radius:9px; background:var(--blue); color:#fff; display:grid; place-items:center; font-size:24px; line-height:1; }
.scan-button b, .scan-button small { display:block; }
.scan-button b { font-size:13px; }
.scan-button small { margin-top:4px; color:var(--muted); font-size:10px; }
.manual-code { margin-top:14px; padding-bottom:15px; border-bottom:1px solid var(--line); }
.manual-code label { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end; color:#506074; font-size:11px; font-weight:700; }
.manual-code input { margin-top:7px; width:100%; border:1px solid #d9e1e9; border-radius:8px; outline:0; padding:10px 11px; font-size:12px; grid-column:1; }
.manual-code label .secondary-button { grid-column:2; grid-row:1 / span 2; white-space:nowrap; }
.manual-code small { display:block; color:var(--muted); font-size:10px; margin-top:7px; }
.oven-list { display:grid; gap:8px; margin-top:15px; }
.oven-card { width:100%; display:flex; align-items:center; gap:10px; border:1px solid #edf1f5; background:#fff; border-radius:10px; padding:11px; text-align:left; color:var(--ink); }
.oven-card:hover { border-color:#adc6ee; background:#f8fbff; }
.oven-card.selected { border-color:#6c98de; background:#f0f6ff; box-shadow:0 0 0 2px #e3edff; }
.oven-card.overdue { border-color:#f2cccc; background:#fff7f7; }
.oven-card-code { width:36px; height:36px; display:grid; place-items:center; border-radius:9px; background:var(--navy); color:#fff; font-size:10px; font-weight:800; }
.oven-card-copy { min-width:0; flex:1; }
.oven-card-copy b, .oven-card-copy small { display:block; }
.oven-card-copy b { font-size:12px; }
.oven-card-copy small { margin-top:4px; color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oven-card-state { color:var(--green); font-size:10px; font-weight:800; }
.oven-card.overdue .oven-card-state { color:var(--red); }
.oven-card-state.capacity-alert { color:var(--red); }
.oven-card-state.capacity-unset { color:var(--muted); }
.oven-group-title { margin:10px 2px 4px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.04em; }
.oven-card-copy b .muted-cell { display:inline; margin-left:6px; font-size:10px; font-weight:500; }
.capacity-settings { border-top:1px solid var(--line); margin-top:16px; padding-top:15px; }
.capacity-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:10px; }
.capacity-heading h3 { margin:0; font-size:13px; }
.capacity-heading p { margin:4px 0 0; color:var(--muted); font-size:10px; }
.capacity-unit { color:var(--muted); font-size:10px; }
.capacity-row { display:grid; grid-template-columns:1.25fr .75fr .75fr auto; align-items:end; gap:7px; border-top:1px solid #f0f3f6; padding:9px 0 0; margin-top:9px; }
.capacity-row > div { min-width:0; }
.capacity-row > div b, .capacity-row > div span { display:block; }
.capacity-row > div b { font-size:11px; }
.capacity-row > div span { color:var(--muted); font-size:10px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.capacity-row label { display:grid; gap:4px; color:var(--muted); font-size:9px; }
.capacity-row input { width:100%; border:1px solid #d9e1e9; border-radius:7px; outline:0; padding:7px 7px; font-size:11px; min-width:0; }
.capacity-row input:focus { border-color:#7ca4e4; box-shadow:0 0 0 3px #e8f0ff; }
.selected-oven-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px; }
.selected-oven-heading h2 { margin:7px 0 5px; font-size:19px; letter-spacing:-.03em; }
.selected-oven-heading p:not(.eyebrow) { margin:0; color:var(--muted); font-size:11px; }
.inspection-state { border-radius:99px; padding:7px 9px; font-size:10px; font-weight:800; white-space:nowrap; }
.inspection-state.ok { color:var(--green); background:var(--green-soft); }
.inspection-state.overdue { color:var(--red); background:var(--red-soft); }
.inspection-state.empty { color:var(--muted); background:#f1f3f5; }
.oven-trips { border:1px solid #edf1f5; border-radius:10px; padding:11px; margin-bottom:16px; }
.oven-trips-label { color:#8190a3; font-size:10px; font-weight:700; margin-bottom:8px; }
.oven-trip-row { display:grid; grid-template-columns:.7fr 1fr .65fr auto; align-items:center; gap:7px; border-top:1px solid #f0f3f6; padding:9px 0 0; margin-top:8px; font-size:11px; }
.oven-trip-row:first-of-type { border-top:0; padding-top:0; margin-top:0; }
.oven-trip-row b { text-align:right; }
.check-fieldset { border:1px solid #d9e1e9; border-radius:9px; margin:0; padding:11px; }
.check-fieldset legend { color:#506074; font-size:11px; font-weight:700; padding:0 5px; }
.choice-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.choice-card { position:relative; display:flex; align-items:center; gap:8px; border:1px solid #e1e7ee; border-radius:8px; padding:9px; cursor:pointer; }
.choice-card:has(input:checked) { background:var(--blue-soft); border-color:#8eb0e5; }
.choice-card input { accent-color:var(--blue); }
.choice-card b, .choice-card small { display:block; }
.choice-card b { font-size:11px; }
.choice-card small { color:var(--muted); font-size:10px; margin-top:3px; }
.adjust-check { display:flex !important; grid-template-columns:none !important; align-items:center; gap:7px !important; color:var(--ink) !important; font-size:11px !important; }
.adjust-check input { width:15px; height:15px; accent-color:var(--blue); }
.field-unit { color:var(--muted); font-size:10px; margin-top:-3px; }
.inspection-history { margin-top:23px; border-top:1px solid var(--line); padding-top:16px; }
.history-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.history-heading h3 { margin:0; font-size:13px; }
.history-heading span { color:var(--muted); font-size:10px; }
.history-row { display:grid; grid-template-columns:1fr .7fr 1fr 1.3fr; gap:7px; align-items:center; border-top:1px solid #f0f3f6; padding:9px 0; font-size:10px; color:var(--muted); }
.history-row b { color:var(--ink); }
.history-result { color:var(--green); }
.history-result.attention { color:var(--orange); }
.empty-inline { color:var(--muted); font-size:11px; padding:3px 0; }
.scanner-modal { max-width:440px; }
.scanner-stage { position:relative; background:#071321; border-radius:12px; overflow:hidden; min-height:260px; display:grid; place-items:center; }
.scanner-stage video { width:100%; min-height:260px; object-fit:cover; }
.scanner-frame { position:absolute; width:150px; height:150px; border:2px solid #f3a45d; border-radius:12px; box-shadow:0 0 0 999px rgba(7,19,33,.22); }
.scanner-stage p { position:absolute; bottom:8px; left:0; right:0; text-align:center; color:#fff; font-size:11px; margin:0; }
.scanner-fallback { display:flex; justify-content:center; gap:5px; align-items:center; margin-top:12px; color:var(--muted); font-size:11px; }
.auth-modal { max-width:420px; }
.qr-modal { max-width:720px; }
.qr-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin: 12px 0 18px; }
.qr-card { border:1px solid #dfe6ee; border-radius:12px; padding:14px 11px 12px; text-align:center; background:#fff; }
.qr-card svg { width:140px; height:140px; display:block; margin:0 auto 10px; }
.qr-card h3 { margin:0; font-size:14px; letter-spacing:-.02em; }
.qr-card p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.qr-card small { display:block; margin-top:8px; color:#8190a3; font-size:9px; word-break:break-all; }
@media print {
  body * { visibility:hidden !important; }
  #qrModal, #qrModal * { visibility:visible !important; }
  #qrModal { position:static; display:block !important; background:#fff; padding:0; }
  #qrModal .modal { width:100%; max-width:none; box-shadow:none; }
  #qrModal .modal-heading, #qrModal .action-copy, #qrModal .modal-actions { display:none !important; }
  .qr-grid { grid-template-columns:repeat(2, 1fr); gap:18px; }
  .qr-card { break-inside:avoid; border:1px solid #bbb; padding:18px; }
}
.modal-backdrop { position:fixed; inset:0; background:rgba(7,18,33,.58); display:grid; place-items:center; padding: 18px; z-index:10; }
.modal { width:min(520px, 100%); max-height: min(760px, 92dvh); overflow:auto; background:#fff; border-radius:16px; padding: 23px; box-shadow:0 24px 70px rgba(8,25,49,.25); }
.modal-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom: 20px; }
.modal-heading h2 { margin:6px 0 0; font-size:19px; letter-spacing:-.03em; }
.icon-button { width:30px; height:30px; border-radius:8px; border:1px solid var(--line); color:var(--muted); background:#fff; font-size:20px; line-height:1; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.calc-preview { background: #f4f8ff; border:1px solid #d9e7ff; border-radius:10px; padding: 12px 13px; }
.calc-preview span, .calc-preview small { display:block; color:var(--muted); font-size:11px; }
.calc-preview strong { display:block; color:var(--blue); font-size:19px; margin:4px 0; }
.modal-actions { display:flex; justify-content:flex-end; gap:9px; padding-top: 5px; }
.action-copy { color:var(--muted); font-size:12px; line-height:1.65; margin:0 0 17px; }
.action-trip-card { background:#f7f9fb; border-radius:10px; padding:13px; margin-bottom:16px; }
.action-trip-card strong { font-size:14px; }
.action-trip-card span { color:var(--muted); font-size:11px; margin-left:7px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:20; background:var(--navy); color:#fff; border-radius:9px; padding:11px 15px; font-size:12px; box-shadow:0 10px 30px rgba(8,25,49,.22); }
.role-pill { display:inline-flex; border-radius:99px; padding:5px 8px; font-size:10px; font-weight:700; }
.role-admin { color:#6f3d9b; background:#f4eaff; }
.role-supervisor { color:#7b4b14; background:#fff2dc; }
.role-quality { color:#246b58; background:#e7f7ef; }
.log-action { color:var(--ink); font-weight:700; }
.log-detail { color:var(--muted); max-width:280px; white-space:normal; line-height:1.45; }
.account-list { display:grid; gap:9px; }
.account-row { display:flex; align-items:center; gap:10px; border:1px solid #edf1f5; border-radius:10px; padding:11px; }
.account-row.inactive { opacity:.62; }
.account-avatar { width:31px; height:31px; border-radius:9px; font-size:12px; flex:none; }
.account-copy { min-width:0; flex:1; }
.account-copy strong, .account-copy span { display:block; }
.account-copy strong { font-size:12px; }
.account-copy span { color:var(--muted); font-size:10px; margin-top:4px; }
.account-actions { display:flex; align-items:center; gap:8px; }
.account-status { color:var(--green); font-size:10px; }
.account-row.inactive .account-status { color:var(--muted); }
.account-actions em { color:var(--blue); font-size:10px; font-style:normal; }
@media (max-width: 1050px) {
  .sidebar { width: 210px; }
  .view { padding-left: 24px; padding-right:24px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .app-shell { display:block; }
  .sidebar { width:100%; min-height: auto; height:auto; position:static; padding: 12px 14px 10px; }
  .brand-lockup, .nav-label, .sidebar-bottom { display:none; }
  .nav-list { display:flex; overflow-x:auto; gap:4px; padding-top: 9px; }
  .nav-item { flex:none; padding: 9px 11px; font-size:11px; }
  .topbar { height:62px; padding: 0 15px; gap:10px; }
  .mobile-brand { display:flex; }
  .mobile-brand .brand-mark { width:29px; height:29px; border-radius:8px; font-size:10px; }
  .mobile-brand strong { font-size:13px; }
  .topbar-meta { display:none; }
  .user-copy { display:none; }
  .user-box { margin-left:auto; }
  .topbar .primary-button { margin-left:auto; padding:8px 11px; font-size:11px; }
  .view { padding: 23px 15px 45px; }
  .page-heading { align-items:flex-start; margin-bottom:21px; }
  .page-heading h1 { font-size:26px; }
  .heading-sub { line-height:1.55; max-width: 32em; }
  .heading-date { display:none; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); gap:9px; }
  .metric-card { padding: 13px; min-height: 100px; }
  .metric-value { font-size:25px; }
  .panel { padding: 16px; }
  .forecast-list { grid-template-columns:1fr; }
  .forecast-chart { gap:4px; padding: 0 2px; }
  .chart-bar { width: 65%; }
  .settings-grid, .inspection-layout { grid-template-columns:1fr; }
  .heading-actions { width:100%; }
  .heading-actions .secondary-button { flex:1; }
  .qr-grid { grid-template-columns:1fr; }
  .compact-heading { flex-direction:column; align-items:flex-start; }
  .compact-heading > .primary-button, .compact-heading > .secondary-button { width:100%; }
  .filter-row { align-items:stretch; }
  .search-box { width:100%; }
  .filter-pills { width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; }
  .filter-pill { flex:none; }
  .form-grid { grid-template-columns:1fr; }
  .oven-trip-row { grid-template-columns:.7fr 1fr .7fr; }
  .oven-trip-row .status-pill { grid-column:1 / -1; justify-self:start; }
  .capacity-row { grid-template-columns:1fr 1fr; align-items:end; }
  .capacity-row > div { grid-column:1 / -1; }
  .capacity-row > button { grid-column:1 / -1; width:100%; text-align:center; background:var(--blue-soft); border-radius:7px; padding:8px; }
  .history-row { grid-template-columns:1fr 1fr; }
  .modal { padding:19px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }