.vaf-page { --vaf-bg:var(--bg-primary,#071322); --vaf-panel:var(--bg-card,#102434); --vaf-input:var(--bg-input,#091b29); --vaf-border:var(--border,#244453); --vaf-text:var(--text-primary,#edf5f9); --vaf-muted:var(--text-secondary,#9cb1bf); --vaf-accent:var(--accent,#1cc5d0); --vaf-green:#16bd91; --vaf-red:#f46b7f; --vaf-amber:#efb54e; --vaf-blue:#56a9f3; --vaf-gap:#bd93ef; margin:0; background:var(--vaf-bg); color:var(--vaf-text); font:14px/1.5 Arial,Helvetica,sans-serif; letter-spacing:0; }
[data-theme="paper"] .vaf-page, [data-theme="frost"] .vaf-page, [data-theme="harbor-light"] .vaf-page { --vaf-green:#06795e; --vaf-red:#c23149; --vaf-amber:#976000; --vaf-blue:#176ac1; --vaf-gap:#7952ad; }
.vaf-page *, .vaf-page *::before, .vaf-page *::after { box-sizing:border-box; }
.vaf-page [hidden] { display:none !important; }
#vafApp { width:100%; max-width:1800px; margin:auto; padding:24px 28px 12px; }
#vafApp h1 { font-size:26px; line-height:1.2; margin:6px 0; }
#vafApp h2, .vaf-dialog h2 { font-size:17px; margin:0; }
#vafApp h3 { font-size:15px; margin:0; }
#vafApp p { margin:5px 0 12px; }
.vaf-page :is(#vafApp,.vaf-dialog) a { color:var(--vaf-accent); text-decoration:none; }
.vaf-page :is(#vafApp,.vaf-dialog) a:hover { text-decoration:underline; }
.vaf-page :is(#vafApp,.vaf-dialog) :is(button,.button) { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:38px; padding:8px 13px; border:1px solid var(--vaf-border); border-radius:6px; background:var(--vaf-panel); color:var(--vaf-text); font:600 13px/1.25 Arial,Helvetica,sans-serif; cursor:pointer; text-decoration:none; }
.vaf-page :is(#vafApp,.vaf-dialog) :is(button,.button):hover { border-color:var(--vaf-accent); }
.vaf-page :is(#vafApp,.vaf-dialog) .primary { background:var(--vaf-accent); color:var(--bg-primary,#051b23); border-color:var(--vaf-accent); }
[data-theme="paper"] .vaf-page :is(#vafApp,.vaf-dialog) .primary,[data-theme="frost"] .vaf-page :is(#vafApp,.vaf-dialog) .primary,[data-theme="harbor-light"] .vaf-page :is(#vafApp,.vaf-dialog) .primary { color:#fff; }
.vaf-page :is(#vafApp,.vaf-dialog) .icon-button { width:38px; height:38px; flex:0 0 38px; padding:0; }
.vaf-page :is(#vafApp,.vaf-dialog) button:disabled { opacity:.45; cursor:not-allowed; }
.vaf-page :is(#vafApp,.vaf-dialog) :focus-visible { outline:2px solid var(--vaf-accent); outline-offset:3px; }
.vaf-page :is(#vafApp,.vaf-dialog) label { display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:600; color:var(--vaf-muted); min-width:0; }
.vaf-page :is(#vafApp,.vaf-dialog) :is(input,select) { min-width:0; max-width:100%; height:38px; padding:7px 10px; border:1px solid var(--vaf-border); border-radius:5px; background:var(--vaf-input); color:var(--vaf-text); font:14px Arial,Helvetica,sans-serif; color-scheme:dark; }
[data-theme="paper"] .vaf-page :is(#vafApp,.vaf-dialog) :is(input,select),[data-theme="frost"] .vaf-page :is(#vafApp,.vaf-dialog) :is(input,select),[data-theme="harbor-light"] .vaf-page :is(#vafApp,.vaf-dialog) :is(input,select) { color-scheme:light; }
.page-heading,.section-heading,.viewbar,.dialog-head,.pagination,.workspace-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.page-heading { margin-bottom:22px; }
.breadcrumb { font-size:12px; font-weight:700; }
.actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.muted { color:var(--vaf-muted); font-size:12px; }
.filters { display:grid; grid-template-columns:minmax(175px,1.2fr) minmax(140px,.8fr) minmax(140px,.8fr) minmax(180px,1.5fr) auto; gap:12px; padding:16px 0; border-top:1px solid var(--vaf-border); border-bottom:1px solid var(--vaf-border); align-items:end; }
.viewbar { border-bottom:1px solid var(--vaf-border); margin-bottom:20px; }
[role="tablist"] { display:flex; gap:14px; min-width:0; overflow-x:auto; }
.vaf-page #vafApp [role="tab"] { border:0; border-bottom:3px solid transparent; border-radius:0; background:none; padding:16px 4px 12px; color:var(--vaf-muted); white-space:nowrap; }
.vaf-page #vafApp [role="tab"][aria-selected="true"] { color:var(--vaf-accent); border-bottom-color:var(--vaf-accent); }
#recordBadge { font-size:11px; font-variant-numeric:tabular-nums; }
.section-heading { margin:22px 0 12px; }
.metric-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:1px solid var(--vaf-border); padding-bottom:18px; gap:18px; }
.metric-label { font-size:12px; color:var(--vaf-muted); }
.metric-value { display:block; font-size:25px; font-weight:700; line-height:1.4; font-variant-numeric:tabular-nums; }
.metric-strip small { display:block; color:var(--vaf-muted); font-size:11px; }
.performance-hero { position:relative; display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; margin:4px 0 20px; padding:24px; overflow:hidden; border:1px solid color-mix(in srgb,var(--vaf-accent) 42%,var(--vaf-border)); border-radius:12px; background:linear-gradient(120deg,color-mix(in srgb,var(--vaf-accent) 13%,var(--vaf-panel)),var(--vaf-panel) 58%,color-mix(in srgb,var(--vaf-blue) 9%,var(--vaf-panel))); box-shadow:0 18px 60px rgba(0,0,0,.16); }
.performance-hero::after { content:""; position:absolute; width:260px; height:260px; right:-95px; top:-145px; border:1px solid color-mix(in srgb,var(--vaf-accent) 40%,transparent); border-radius:50%; box-shadow:0 0 70px color-mix(in srgb,var(--vaf-accent) 20%,transparent); pointer-events:none; }
.performance-hero h2,.brief-card h2 { margin:5px 0 8px !important; font-size:21px !important; }
.performance-hero p { max-width:850px; color:var(--vaf-muted); margin:0 !important; }
.hero-kicker { color:var(--vaf-accent); font:700 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:1.4px; }
.confidence-ring { position:relative; z-index:1; width:112px; height:112px; border:8px solid color-mix(in srgb,var(--vaf-green) 80%,var(--vaf-border)); border-right-color:var(--vaf-border); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--vaf-input); box-shadow:inset 0 0 28px rgba(0,0,0,.2); }
.confidence-ring strong { font-size:25px; line-height:1; }.confidence-ring span { margin-top:6px; color:var(--vaf-muted); font-size:10px; text-transform:uppercase; letter-spacing:.8px; }
.pulse-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:16px; }
.pulse-panel { min-width:0; padding:15px 15px 8px; border:1px solid var(--vaf-border); border-radius:10px; background:linear-gradient(180deg,var(--vaf-panel),color-mix(in srgb,var(--vaf-panel) 76%,var(--vaf-bg))); box-shadow:0 10px 28px rgba(0,0,0,.1); }
.pulse-head { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }.pulse-head span { color:var(--vaf-muted); font-size:10px; }.pulse-chart { position:relative; height:210px; margin-top:8px; }.pulse-chart canvas { width:100% !important; height:100% !important; }
.brief-card { display:grid; grid-template-columns:minmax(190px,.55fr) minmax(300px,1.7fr) auto; gap:20px; align-items:center; margin:22px 0 8px; padding:18px 20px; border-left:4px solid var(--vaf-accent); border-radius:7px; background:var(--vaf-panel); }
.brief-copy { color:var(--vaf-text); font-size:13px; line-height:1.6; }
.vessel-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.vessel-item,.quality-item { border:1px solid var(--vaf-border); border-radius:6px; padding:16px; background:var(--vaf-panel); min-width:0; }
.vessel-head { display:flex; align-items:start; justify-content:space-between; gap:8px; margin-bottom:12px; }
.vessel-code { font-size:12px; font-weight:bold; color:var(--vaf-accent); }
.vessel-comparison { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:6px 12px; padding:10px 0; border-block:1px solid var(--vaf-border); font-size:13px; font-variant-numeric:tabular-nums; }
.vessel-comparison b { text-align:right; font-weight:600; }
.vessel-comparison .col-head { text-align:right; font-size:11px; color:var(--vaf-muted); }
.vessel-foot { display:flex; justify-content:space-between; gap:10px; margin-top:12px; flex-wrap:wrap; }
.pill { display:inline-block; font-size:11px; font-weight:700; line-height:1.5; white-space:nowrap; }
.ok { color:var(--vaf-green); }.warn,.watch { color:var(--vaf-amber); }.bad,.stale,.missing { color:var(--vaf-red); }.gap { color:var(--vaf-gap); }
.vessel-item details { margin-top:10px; font-size:12px; }
summary { cursor:pointer; color:var(--vaf-muted); }
.vessel-item details p { padding-top:6px; overflow-wrap:anywhere; }
.freshness-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; padding:4px 0 18px; border-bottom:1px solid var(--vaf-border); }
.freshness-item { border-left:3px solid currentColor; padding-left:12px; min-width:0; }
.freshness-item strong { color:var(--vaf-text); font-size:14px; margin-right:12px; }
.freshness-item .muted { display:block; margin-top:4px; }
.source-note { display:flex; align-items:baseline; gap:10px; font-size:12px; color:var(--vaf-muted); padding:16px 0; flex-wrap:wrap; }
.source-note span { flex:1; min-width:200px; }
.quality-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.quality-item .metric-value { margin:8px 0; }
.quality-counts { display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; margin-top:10px; font-size:12px; }
.quality-item progress { width:100%; height:6px; accent-color:var(--vaf-green); }
.integration { margin:24px 0; padding-block:16px; border-block:1px solid var(--vaf-border); }
.integration summary { font-weight:600; color:var(--vaf-text); }
.integration .actions { margin-top:12px; }
#sourceStatus { margin-top:14px; line-height:1.9; overflow-wrap:anywhere; }
.chart-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 28px; }
.chart-panel { border-top:1px solid var(--vaf-border); min-width:0; }
.chart-panel .section-heading { margin:12px 0; min-height:38px; }
.chart-frame { height:280px; position:relative; }
.chart-frame canvas { width:100% !important; height:100% !important; }
.chart-empty { position:absolute; inset:35% 0 auto; text-align:center; color:var(--vaf-muted); background:var(--vaf-bg); padding:12px; }
.vaf-page #vafApp label.inline { flex-direction:row; align-items:center; flex-wrap:wrap; }
.table-wrap { overflow:auto; max-height:580px; border:1px solid var(--vaf-border); }
#vafApp table { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; font-variant-numeric:tabular-nums; }
#vafApp th,#vafApp td { padding:10px 12px; border-bottom:1px solid var(--vaf-border); text-align:right; white-space:nowrap; }
#vafApp th { position:sticky; top:0; background:var(--vaf-input); color:var(--vaf-muted); z-index:2; font-size:11px; }
#vafApp td { background:var(--vaf-bg); }
#vafApp th:first-child,#vafApp td:first-child { position:sticky; left:0; z-index:1; text-align:left; }
#vafApp th:first-child { z-index:3; }
#vafApp th:nth-child(-n+4),#vafApp td:nth-child(-n+4),#vafApp th:nth-last-child(-n+2),#vafApp td:nth-last-child(-n+2) { text-align:left; }
#vafApp td:last-child { min-width:300px; max-width:440px; white-space:normal; overflow-wrap:anywhere; }
#vafApp tr:hover td { background:var(--vaf-panel); }
.pagination { margin-top:12px; font-size:12px; color:var(--vaf-muted); }
#records.expanded { position:fixed; inset:10px; z-index:10020; padding:16px; background:var(--vaf-bg); display:flex; flex-direction:column; border:1px solid var(--vaf-border); border-radius:6px; }
#records.expanded .section-heading { margin-top:0; }
#records.expanded .table-wrap { flex:1; max-height:none; }
.workspace-footer { margin-top:30px; padding:12px 0; border-top:1px solid var(--vaf-border); color:var(--vaf-muted); font-size:11px; }
.notice { padding:10px 14px; margin:12px 0; border-left:3px solid var(--vaf-amber); background:var(--vaf-panel); font-size:13px; }
.notice.error { border-color:var(--vaf-red); color:var(--vaf-red); }
.empty { padding:30px; text-align:center; color:var(--vaf-muted); grid-column:1/-1; }
.vaf-dialog { width:440px; max-width:calc(100% - 24px); max-height:calc(100dvh - 32px); overflow:auto; padding:22px; border:1px solid var(--vaf-border); border-radius:8px; background:var(--vaf-panel); color:var(--vaf-text); }
.vaf-dialog::backdrop { background:#0008; }
.dialog-head { margin-bottom:18px; }
.export-links { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; }
.vaf-dialog hr { border:0; border-top:1px solid var(--vaf-border); margin:20px 0; }
#monthPdfBtn { margin-top:12px; }
.theme-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.vaf-page .vaf-dialog .theme-options button { text-align:left; justify-content:start; min-height:46px; font-size:12px; }
.theme-options button[aria-pressed="true"] { outline:2px solid var(--vaf-accent); outline-offset:-2px; }
.theme-swatch { width:14px; height:14px; flex:0 0 14px; border-radius:50%; }
@media(max-width:760px) { .vaf-page .smc-std-right { flex-wrap:wrap; justify-content:flex-start; max-width:100%; }.vaf-page .smc-standard-topbar { max-width:100%; }.vaf-page .smc-std-name,.vaf-page .smc-std-module { letter-spacing:0; }.vaf-page [data-std-clock]:not([data-std-clock="gmt"]) { display:none; } }
@media(max-width:1000px) { #vafApp { padding:18px; }.page-heading { align-items:start; }.filters { grid-template-columns:1.2fr 1fr 1fr; }.search-field { grid-column:span 2; }.vessel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.quality-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.viewbar { align-items:start; flex-direction:column; gap:0; }.viewbar #period { padding-bottom:8px; }.chart-grid { grid-template-columns:1fr; }.pulse-grid { grid-template-columns:1fr 1fr; }.pulse-panel:first-child { grid-column:1/-1; }.brief-card { grid-template-columns:1fr; } }
@media(max-width:600px) { #vafApp { padding:16px 12px; }#vafApp h1 { font-size:23px; }.page-heading { flex-direction:column; gap:12px; }.page-heading .actions { width:100%; }.filters { grid-template-columns:1fr 1fr; gap:10px; }.filters label:first-child { grid-column:1/-1; }.filters .search-field { grid-column:auto; }.filters button { align-self:end; }.metric-strip { grid-template-columns:1fr 1fr; gap:18px; }.metric-value { font-size:23px; }.vessel-grid,.quality-grid,.freshness-grid,.pulse-grid { grid-template-columns:1fr; }.pulse-panel:first-child { grid-column:auto; }.performance-hero { grid-template-columns:1fr; padding:18px; }.confidence-ring { width:90px; height:90px; border-width:6px; }[role="tablist"] { width:100%; gap:12px; }#vafApp [role="tab"] { font-size:12px; padding-inline:0; }.section-heading { flex-wrap:wrap; gap:8px; }.chart-frame { height:240px; }.workspace-footer { flex-wrap:wrap; gap:5px; }.vaf-page :is(#vafApp,.vaf-dialog) :is(input,select) { font-size:16px; }.chart-panel select { max-width:175px; }.theme-options { grid-template-columns:1fr; }.vaf-dialog { padding:16px; } }
@media print { @page { size:A4 landscape; margin:10mm; }.vaf-page { --vaf-bg:#fff; --vaf-panel:#fff; --vaf-input:#f1f4f6; --vaf-text:#152630; --vaf-muted:#455b66; --vaf-border:#c8d3d9; background:white; color:#152630; }#smcModuleTopbar,.filters,.viewbar,.page-heading .actions,.vaf-dialog,.pagination,.integration,.section-heading .actions,.source-note { display:none !important; }#vafApp { max-width:none; padding:0; }.page-heading { margin-bottom:16px; }.metric-strip { grid-template-columns:repeat(4,1fr); }.vessel-grid { grid-template-columns:repeat(3,1fr); }.chart-grid { grid-template-columns:1fr 1fr; }.chart-frame { height:200px; }.vessel-item,.chart-panel,.quality-item { break-inside:avoid; }#records.expanded { position:static; display:block; }.table-wrap { overflow:visible; max-height:none; }#vafApp table { font-size:7px; table-layout:fixed; }#vafApp th,#vafApp td { position:static !important; padding:4px 2px; white-space:normal; overflow-wrap:anywhere; min-width:0 !important; }#vafApp th { font-size:7px; }#vafApp th:last-child { width:16%; } }