:root {
  --bg:#061521; --panel:#0a2232; --panel-2:#0d2a3d; --line:#1b4a60; --muted:#8faebe;
  --text:#edf8fb; --cyan:#20c7f2; --teal:#1dd6b3; --amber:#f5a524; --water:#55d6ff;
  --red:#ff6176; --shadow:0 18px 45px rgba(0,0,0,.24);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--text); background:radial-gradient(circle at 78% -12%,rgba(32,199,242,.16),transparent 38%),linear-gradient(180deg,#05111c 0%,#071a28 60%,#05111c 100%); font-family:'JetBrains Mono',monospace; min-height:100vh; }
button,select,a { font:inherit; }
button,a,select { -webkit-tap-highlight-color:transparent; }
.monthly-shell { width:min(1560px,calc(100% - 32px)); margin:0 auto; padding:24px 0 40px; }
.monthly-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:24px 26px; border:1px solid var(--line); border-left:5px solid var(--cyan); border-radius:18px; background:linear-gradient(135deg,rgba(10,34,50,.98),rgba(6,21,33,.92)); box-shadow:var(--shadow); }
.eyebrow,.panel-head span,.chart-card header span,.method-panel span,.filter-block>span { color:var(--cyan); font-size:11px; letter-spacing:.15em; font-weight:700; }
h1,h2 { font-family:'Rajdhani',sans-serif; margin:0; }
h1 { margin-top:7px; font-size:clamp(30px,3vw,46px); line-height:.95; letter-spacing:.01em; }
.monthly-hero p { color:#acd0df; max-width:860px; margin:12px 0 0; font-size:13px; line-height:1.7; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.btn { border:1px solid #28617a; color:#dff7ff; background:#0a2434; min-height:42px; padding:0 15px; border-radius:10px; display:inline-flex; gap:9px; align-items:center; justify-content:center; text-decoration:none; font-weight:700; cursor:pointer; transition:.18s ease; }
.btn:hover { transform:translateY(-1px); border-color:var(--cyan); color:white; }
.btn.accent { color:#071a28; border-color:#48dcff; background:linear-gradient(135deg,#24c9f1,#51e0cb); box-shadow:0 8px 24px rgba(32,199,242,.2); }
.btn.daily-pdf { color:#fff2cf; border-color:#b97819; background:linear-gradient(135deg,#3b2b12,#5a3b12); box-shadow:0 8px 24px rgba(245,165,36,.12); }
.btn.daily-pdf:hover { border-color:#f5a524; color:#ffffff; }
.btn.ghost { background:rgba(9,31,45,.76); }
.btn.small { min-height:34px; padding:0 11px; font-size:11px; }
.view-switch { width:min(560px,100%); margin:14px auto 0; padding:5px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; border:1px solid var(--line); border-radius:12px; background:#071d2b; box-shadow:0 10px 28px rgba(0,0,0,.14); }
.view-switch button { min-height:42px; border:1px solid transparent; border-radius:8px; color:#90afbd; background:transparent; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; }
.view-switch button.active { color:#04131c; background:linear-gradient(135deg,var(--cyan),var(--teal)); box-shadow:0 6px 18px rgba(32,199,242,.18); }
.filter-deck { margin-top:14px; display:grid; grid-template-columns:minmax(340px,1.5fr) minmax(160px,.6fr) minmax(220px,.8fr) minmax(180px,.65fr) auto; gap:10px; align-items:stretch; }
.filter-block { min-width:0; padding:11px 13px; border:1px solid var(--line); border-radius:12px; background:rgba(9,31,45,.9); display:flex; flex-direction:column; gap:7px; }
.filter-block strong { font-family:'Rajdhani',sans-serif; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.filter-block select { width:100%; border:0; outline:none; color:var(--text); background:#0e2b3d; border-radius:8px; padding:10px; }
.segmented { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.segmented button { color:#a7c5d3; background:#081d2b; border:1px solid #205169; border-radius:8px; min-height:36px; cursor:pointer; font-weight:700; }
.segmented button.active { color:#04121c; background:linear-gradient(135deg,var(--cyan),var(--teal)); border-color:transparent; }
.source-dot { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(29,214,179,.1); }
.refresh { min-width:120px; }
.quality-banner { margin-top:12px; padding:12px 15px; display:flex; justify-content:space-between; gap:14px; border:1px solid #24667b; border-radius:11px; color:#afd3df; background:rgba(10,39,54,.78); font-size:12px; }
.quality-banner strong { color:#e9fbff; margin-left:8px; }
.quality-banner.watch { border-color:#936b24; background:rgba(83,55,15,.2); }
.kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:14px; }
.kpi-card { position:relative; min-height:143px; padding:18px; border:1px solid var(--line); border-radius:15px; background:linear-gradient(150deg,rgba(13,42,61,.98),rgba(8,28,41,.96)); overflow:hidden; box-shadow:0 10px 28px rgba(0,0,0,.13); }
.kpi-card:before { content:''; position:absolute; inset:0 auto 0 0; width:4px; background:var(--tone); }
.kpi-card:after { content:''; position:absolute; width:120px; height:120px; right:-45px; top:-45px; border-radius:50%; background:var(--tone); opacity:.07; }
.kpi-label { color:#8eb1c0; font-size:11px; letter-spacing:.12em; font-weight:700; }
.kpi-value { display:block; color:var(--tone); margin-top:10px; font-family:'Rajdhani',sans-serif; font-size:36px; line-height:1; }
.kpi-detail { display:block; margin-top:13px; color:#b8d1db; font-size:11px; line-height:1.45; }
.kpi-fuel { --tone:var(--cyan); }.kpi-oil { --tone:var(--amber); }.kpi-water { --tone:var(--water); }.kpi-cover { --tone:var(--teal); }
.chart-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.chart-card,.panel { border:1px solid var(--line); border-radius:15px; background:linear-gradient(165deg,rgba(11,35,51,.98),rgba(7,25,37,.96)); box-shadow:0 12px 32px rgba(0,0,0,.15); }
.chart-card { min-width:0; padding:16px; }
.chart-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.chart-card h2 { margin-top:4px; font-size:20px; }
.chart-card header b { color:var(--tone); font-family:'Rajdhani',sans-serif; font-size:19px; white-space:nowrap; }
.chart-card footer { margin-top:4px; color:#7898a7; font-size:10px; line-height:1.5; }
.fuel-card { --tone:var(--cyan); }.oil-card { --tone:var(--amber); }.water-card { --tone:var(--water); }
.chart-host { min-height:248px; margin-top:8px; }
.chart-host svg { display:block; width:100%; height:248px; overflow:visible; }
.chart-gridline { stroke:#1b4356; stroke-width:1; }.chart-axis { fill:#7393a2; font:10px 'JetBrains Mono',monospace; }.chart-label { fill:#a8c5d1; font:9px 'JetBrains Mono',monospace; }.chart-value { fill:#dff7ff; font:9px 'JetBrains Mono',monospace; font-weight:700; }
.report-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(310px,.78fr); gap:12px; margin-top:14px; }
.panel { min-width:0; padding:16px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.panel-head h2 { margin-top:4px; font-size:22px; }
.table-wrap { overflow:auto; border:1px solid #173f53; border-radius:10px; }
table { width:100%; border-collapse:collapse; min-width:980px; }
th,td { padding:10px 11px; border-bottom:1px solid #15394b; font-size:10.5px; white-space:nowrap; }
th { color:#8faebe; background:#071c2a; text-align:left; letter-spacing:.06em; position:sticky; top:0; z-index:1; }
td { color:#cbe0e8; }.num { text-align:right; }.fuel { color:#76e6ff; }.oil { color:#ffd278; }.water { color:#87e2ff; }
tbody tr:hover { background:rgba(32,199,242,.045); }
.coverage-cell { display:inline-flex; align-items:center; gap:7px; }.coverage-bar { width:55px; height:5px; background:#17394b; border-radius:8px; overflow:hidden; }.coverage-bar i { display:block; height:100%; background:var(--teal); }
.vessel-cards { display:grid; gap:9px; }
.vessel-card { padding:12px; border:1px solid #1a475d; border-left:4px solid var(--vessel); border-radius:10px; background:#0a2638; }
.vessel-card header { display:flex; justify-content:space-between; gap:8px; }.vessel-card h3 { font-family:'Rajdhani',sans-serif; font-size:18px; margin:0; }.vessel-card header span { color:var(--vessel); font-weight:700; font-size:11px; }
.vessel-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px; }.vessel-metrics div { padding:8px; border-radius:7px; background:#071b28; }.vessel-metrics span { display:block; color:#718f9e; font-size:8px; }.vessel-metrics b { display:block; margin-top:4px; color:#dff7ff; font-size:11px; }
.method-panel { margin-top:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:var(--line); }
.method-panel>div { background:#081f2e; padding:15px; }.method-panel p { color:#9ebbc8; font-size:10.5px; line-height:1.6; margin:7px 0 0; }
.daily-detail-view { margin-top:14px; }
.daily-filter-deck { display:grid; grid-template-columns:minmax(330px,1.3fr) repeat(2,minmax(150px,.55fr)) minmax(205px,.75fr) repeat(3,auto); gap:10px; align-items:stretch; }
.date-filter input { width:100%; min-height:38px; border:1px solid #22536a; border-radius:8px; outline:none; color:var(--text); color-scheme:dark; background:#0e2b3d; padding:7px 10px; font:inherit; }
.date-filter input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(32,199,242,.1); }
.daily-status-strip { margin-top:12px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--line); }
.daily-status-strip>div { min-width:0; padding:12px 14px; background:#081f2e; }
.daily-status-strip span { display:block; color:#789aa9; font-size:9px; font-weight:700; letter-spacing:.12em; }
.daily-status-strip strong { display:block; margin-top:6px; color:#e5f8fc; font:700 17px 'Rajdhani',sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.daily-chart-grid { margin-top:12px; display:grid; grid-template-columns:repeat(4,minmax(245px,1fr)); gap:10px; }
.daily-chart-card { --tone:var(--cyan); min-width:0; padding:13px; border:1px solid var(--line); border-top:3px solid var(--tone); border-radius:13px; background:linear-gradient(165deg,rgba(11,35,51,.98),rgba(7,25,37,.96)); box-shadow:0 10px 26px rgba(0,0,0,.13); }
.daily-chart-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:9px; }
.daily-chart-card header span { display:block; color:var(--tone); font-size:9px; font-weight:700; letter-spacing:.1em; }
.daily-chart-card h3 { margin:3px 0 0; font:700 17px 'Rajdhani',sans-serif; }
.daily-chart-card header b { color:#eafaff; font:700 16px 'Rajdhani',sans-serif; white-space:nowrap; }
.daily-chart-host { min-height:178px; margin-top:5px; overflow-x:auto; overflow-y:hidden; scrollbar-color:#275a70 #071b28; }
.daily-chart-host svg { display:block; height:178px; max-width:none; }
.daily-chart-card footer { color:#7493a2; font-size:9px; line-height:1.45; }
.daily-ledger-panel { margin-top:12px; }
.daily-ledger-head { align-items:flex-end; }
.daily-legend { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; color:#86a5b3; font-size:9px; }
.daily-legend span { color:#86a5b3; letter-spacing:0; display:inline-flex; align-items:center; gap:5px; }
.legend-dot { display:inline-block; width:8px; height:8px; border-radius:50%; }.legend-dot.complete { background:var(--teal); }.legend-dot.missing { background:#617684; }
.daily-table-wrap { max-height:620px; }
.daily-ledger-table { min-width:1540px; font-variant-numeric:tabular-nums; }
.daily-ledger-table th { line-height:1.35; vertical-align:bottom; }
.daily-ledger-table td { padding-top:8px; padding-bottom:8px; }
.daily-ledger-table .sticky-col { position:sticky; z-index:3; background:#071c2a; }
.daily-ledger-table .date-col { left:0; width:104px; min-width:104px; }
.daily-ledger-table .vessel-col { left:104px; width:138px; min-width:138px; }
.daily-ledger-table tbody .sticky-col { z-index:2; background:#0a2638; }
.daily-ledger-table tbody tr:nth-child(even) .sticky-col { background:#092333; }
.daily-ledger-table tbody tr.missing-row td { color:#6f8792; background:rgba(70,91,102,.07); }
.daily-ledger-table tbody tr.missing-row .sticky-col { background:#132632; }
.daily-ledger-table tbody tr:hover td { background:#0d3043; }
.daily-ledger-table tbody tr:hover .sticky-col { background:#0d3043; }
.strong-col { font-weight:800; border-left:1px solid #26566b; }
.status-pill { display:inline-flex; min-width:72px; justify-content:center; padding:4px 7px; border-radius:999px; border:1px solid #315f71; color:#9bb8c4; background:#0b2a3a; font-size:8px; font-weight:800; letter-spacing:.08em; }
.status-pill.complete { color:#68efd0; border-color:#197b68; background:#0b342f; }.status-pill.partial { color:#ffd26f; border-color:#8a6423; background:#362a12; }.status-pill.missing { color:#879ca6; border-color:#3f5965; background:#182934; }
.daily-method-panel { margin-top:12px; }
.loading-layer { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; background:rgba(2,10,16,.72); backdrop-filter:blur(4px); }.loading-layer[hidden] { display:none; }.loading-layer>div { min-width:320px; padding:24px; border:1px solid #2a7891; border-radius:15px; background:#081e2c; text-align:center; box-shadow:var(--shadow); }.loading-layer i { color:var(--cyan); font-size:26px; animation:spin 1s linear infinite; }.loading-layer strong,.loading-layer span { display:block; }.loading-layer strong { margin-top:12px; }.loading-layer span { margin-top:6px; color:#8faebe; font-size:11px; }
.toast { position:fixed; right:22px; bottom:22px; z-index:1100; max-width:460px; padding:13px 15px; border-radius:10px; color:#eafaff; background:#0c3446; border:1px solid #38b7d5; box-shadow:var(--shadow); font-size:11px; }.toast.error { border-color:var(--red); background:#3a1720; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:1450px) { .daily-filter-deck { grid-template-columns:1.4fr repeat(3,1fr); }.daily-chart-grid { grid-template-columns:repeat(3,minmax(245px,1fr)); } }
@media (max-width:1150px) { .filter-deck,.daily-filter-deck { grid-template-columns:1fr 1fr; }.refresh { min-height:52px; }.kpi-grid { grid-template-columns:repeat(2,1fr); }.chart-grid { grid-template-columns:1fr; }.daily-chart-grid { grid-template-columns:repeat(2,minmax(245px,1fr)); }.report-grid { grid-template-columns:1fr; }.daily-status-strip { grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px) { .monthly-shell { width:min(100% - 18px,1560px); padding-top:12px; }.monthly-hero { align-items:flex-start; flex-direction:column; padding:18px; }.hero-actions { width:100%; }.hero-actions .btn { flex:1 1 150px; }.filter-deck,.daily-filter-deck,.kpi-grid,.method-panel,.daily-chart-grid,.daily-status-strip { grid-template-columns:1fr; }.segmented { grid-template-columns:repeat(4,minmax(0,1fr)); }.quality-banner,.daily-ledger-head { align-items:flex-start; flex-direction:column; }.kpi-card { min-height:124px; }.chart-host svg { min-width:660px; }.chart-host { overflow-x:auto; }.method-panel { gap:1px; }.view-switch { width:100%; }.daily-legend { justify-content:flex-start; } }
@media print { body { background:white; color:#102235; }.smc-standard-topbar,.filter-deck,.hero-actions,.loading-layer,.toast { display:none !important; }.monthly-shell { width:100%; padding:0; }.monthly-hero,.chart-card,.panel,.kpi-card,.method-panel { break-inside:avoid; box-shadow:none; }.chart-grid { grid-template-columns:1fr; } }