@extends('theme::layout')


@section('content')

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script> 

<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

:root {
  --navy:#0d3a5c;--deep:#0e4a72;--ocean:#2080b8;--wave:#35a0d8;--foam:#90d4f5;
  --amber:#f4a427;--coral:#e85d3a;--mint:#3ecfc6;--white:#e8f6ff;--light:#b8dff5;--muted:#5a9ec0;
  --success:#42b77a;--grid:rgba(100,200,255,0.12);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:linear-gradient(160deg,#1a5f8a 0%,#1e7aad 30%,#2490c8 60%,#1a6fa0 100%);
  color:var(--white);font-family:'IBM Plex Sans',sans-serif;min-height:100vh;overflow-x:hidden;
}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0;}
body::after{content:'';position:fixed;bottom:0;left:0;right:0;height:180px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180'%3E%3Cpath fill='rgba(46,155,200,0.08)' d='M0,96 C240,160 480,32 720,96 C960,160 1200,32 1440,96 L1440,180 L0,180 Z'/%3E%3Cpath fill='rgba(46,155,200,0.05)' d='M0,128 C320,64 640,160 960,112 C1120,88 1280,144 1440,128 L1440,180 L0,180 Z'/%3E%3C/svg%3E") no-repeat bottom;background-size:cover;pointer-events:none;z-index:0;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:1;}

/* HEADER */
header{padding:40px 0 20px;border-bottom:1px solid rgba(144,212,245,0.3);}
.header-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(144,212,245,0.4);border-radius:4px;padding:4px 12px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--foam);text-transform:uppercase;margin-bottom:16px;}
.header-badge::before{content:'?';color:var(--mint);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
h1{font-family:'Playfair Display',serif;font-size:clamp(26px,5vw,50px);font-weight:900;line-height:1.1;letter-spacing:-.02em;}
h1 span{color:var(--foam);}
.header-sub{font-size:13px;color:var(--light);margin-top:8px;font-family:'IBM Plex Mono',monospace;}
.header-meta{display:flex;gap:20px;margin-top:14px;flex-wrap:wrap;}
.meta-item{font-size:11px;color:var(--muted);font-family:'IBM Plex Mono',monospace;}
.meta-item strong{color:var(--foam);}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(144,212,245,0.4),transparent);margin:8px 0 28px;}

/* LAYOUT */
.main-grid{display:grid;grid-template-columns:380px 1fr;gap:24px;margin-bottom:28px;}
@media(max-width:900px){.main-grid{grid-template-columns:1fr;}}
.panel{background:linear-gradient(160deg,rgba(255,255,255,0.12) 0%,rgba(20,80,130,0.55) 100%);border:1px solid rgba(180,225,255,0.3);border-radius:8px;padding:24px;backdrop-filter:blur(4px);}
.panel-title{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--foam);margin-bottom:18px;display:flex;align-items:center;gap:8px;}
.panel-title::after{content:'';flex:1;height:1px;background:rgba(144,212,245,0.3);}

/* FORM */
.form-group{margin-bottom:16px;}
label{display:block;font-size:11px;font-family:'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--light);margin-bottom:7px;}
select,input[type="number"]{width:100%;background:rgba(10,50,90,0.8);border:1px solid rgba(144,212,245,0.3);border-radius:6px;padding:10px 14px;color:var(--white);font-size:14px;font-family:'IBM Plex Sans',sans-serif;outline:none;transition:border-color .2s;}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2390d4f5' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;appearance:none;}
select:focus,input[type="number"]:focus{border-color:var(--wave);}
input[type="range"]{width:100%;-webkit-appearance:none;height:4px;border-radius:2px;background:rgba(144,212,245,0.3);outline:none;margin-top:6px;}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--wave);cursor:pointer;}
.range-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);font-family:'IBM Plex Mono',monospace;margin-top:4px;}
.cf-chip{display:inline-flex;align-items:center;background:rgba(53,160,216,0.15);border:1px solid rgba(144,212,245,0.3);border-radius:4px;padding:4px 10px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--foam);margin-top:6px;}
.vessel-info{display:none;margin-top:7px;background:rgba(53,160,216,0.1);border:1px solid rgba(144,212,245,0.25);border-radius:5px;padding:8px 12px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--foam);line-height:1.7;}

/* TABS */
.calc-tabs{display:flex;border-radius:7px;overflow:hidden;border:1px solid rgba(144,212,245,0.3);margin-bottom:16px;}
.calc-tab{flex:1;padding:10px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:none;background:rgba(10,50,90,0.5);color:var(--muted);transition:all .2s;}
.calc-tab.active{background:linear-gradient(135deg,var(--ocean),var(--wave));color:#fff;}

/* IMO / EU SECTIONS */
.tab-section{display:none;}
.tab-section.visible{display:block;}
.tier-card{background:rgba(10,50,90,0.5);border:1px solid rgba(144,212,245,0.2);border-radius:6px;padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:all .2s;}
.tier-card:hover{border-color:rgba(144,212,245,0.5);}
.tier-card.selected{border-color:var(--wave);box-shadow:0 0 0 2px rgba(53,160,216,0.2);}
.tier-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;}
.tier-price{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;}
.tier-badge{font-size:9px;font-family:'IBM Plex Mono',monospace;padding:2px 7px;border-radius:3px;}
.tier-desc{font-size:11px;color:var(--light);line-height:1.5;}
.rate-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.live-chip{background:rgba(62,207,198,0.1);border:1px solid rgba(62,207,198,0.3);border-radius:4px;padding:4px 10px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mint);}
.refresh-btn{background:none;border:1px solid rgba(144,212,245,0.3);border-radius:4px;padding:3px 8px;color:var(--foam);font-family:'IBM Plex Mono',monospace;font-size:10px;cursor:pointer;}
.eu-banner{background:rgba(244,164,39,0.08);border:1px solid rgba(244,164,39,0.3);border-radius:6px;padding:10px 14px;margin-bottom:12px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--light);line-height:1.7;}
.currency-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:8px;}
.currency-grid label{font-size:9px;}
.conv-chain{background:rgba(10,50,90,0.6);border:1px solid rgba(144,212,245,0.15);border-radius:5px;padding:7px 11px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);line-height:1.9;margin-bottom:6px;}
.imo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;}

/* BUTTONS */
.btn-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:8px;}
.calc-btn{background:linear-gradient(135deg,var(--ocean),var(--wave));border:none;border-radius:6px;padding:13px;color:#fff;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .2s;}
.calc-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(53,160,216,0.4);}
.reset-btn{background:rgba(53,160,216,0.12);border:1px solid rgba(144,212,245,0.4);border-radius:6px;padding:13px 16px;color:var(--foam);font-family:'IBM Plex Mono',monospace;font-size:13px;cursor:pointer;white-space:nowrap;transition:all .2s;}
.reset-btn:hover{background:rgba(53,160,216,0.25);}

/* RESULTS */
.results-panel{background:linear-gradient(160deg,rgba(255,255,255,0.1) 0%,rgba(14,74,114,0.8) 100%);border:1px solid rgba(144,212,245,0.3);border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:14px;}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;color:var(--muted);text-align:center;gap:12px;}
.empty-state .ship{font-size:52px;opacity:.35;}
.empty-state p{font-size:13px;font-family:'IBM Plex Mono',monospace;}
.r-top-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.mini{background:rgba(10,50,90,0.5);border:1px solid rgba(144,212,245,0.2);border-radius:5px;padding:11px;}
.mini.co2{border-color:rgba(53,160,216,0.4);background:rgba(53,160,216,0.08);}
.mini-lbl{font-family:'IBM Plex Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:5px;}
.mini-val{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:var(--white);line-height:1;}
.mini-unit{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--muted);margin-top:3px;}
.mini.co2 .mini-val{color:var(--foam);}
.dual-blocks{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:600px){.dual-blocks{grid-template-columns:1fr;}.r-top-grid{grid-template-columns:1fr 1fr;}}
.r-block{background:rgba(10,50,90,0.5);border-radius:7px;padding:16px;}
.r-block.imo{border:1px solid rgba(53,160,216,0.35);}
.r-block.eu{border:1px solid rgba(244,164,39,0.35);}
.r-block-title{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding-bottom:8px;border-bottom:1px solid rgba(144,212,245,0.15);margin-bottom:10px;}
.r-block.imo .r-block-title{color:var(--wave);}
.r-block.eu .r-block-title{color:var(--amber);}
.r-inner{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
.r-card{background:rgba(10,40,75,0.5);border-radius:5px;padding:10px 11px;}
.r-card.imo-main{border:1px solid rgba(53,160,216,0.35);background:rgba(53,160,216,0.06);}
.r-card.eu-main{border:1px solid rgba(244,164,39,0.35);background:rgba(244,164,39,0.05);}
.r-card.imo-main .mini-val{color:var(--wave);font-size:16px;}
.r-card.eu-main .mini-val{color:var(--amber);font-size:16px;}
.formula{background:rgba(10,40,75,0.6);border-left:3px solid var(--wave);border-radius:4px;padding:9px 12px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--foam);line-height:1.9;margin-top:8px;}
.formula.eu{border-left-color:var(--amber);color:#fcd080;}
.src-note{font-size:10px;color:var(--muted);font-family:'IBM Plex Mono',monospace;line-height:1.8;}

/* CHARTS */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:28px;}
@media(max-width:900px){.charts-grid{grid-template-columns:1fr;}}
.chart-card{background:linear-gradient(160deg,rgba(255,255,255,0.1) 0%,rgba(14,74,114,0.8) 100%);border:1px solid rgba(144,212,245,0.25);border-radius:8px;padding:22px;}
.chart-title{font-family:'Playfair Display',serif;font-size:15px;color:var(--foam);margin-bottom:3px;}
.chart-sub{font-size:11px;color:var(--muted);font-family:'IBM Plex Mono',monospace;margin-bottom:14px;}
.chart-wrap{position:relative;height:220px;}

/* COMPARE BARS */
.compare-card{background:linear-gradient(160deg,rgba(255,255,255,0.1) 0%,rgba(14,74,114,0.8) 100%);border:1px solid rgba(144,212,245,0.25);border-radius:8px;padding:22px;margin-bottom:28px;}
.section-title{font-family:'Playfair Display',serif;font-size:19px;color:var(--white);margin-bottom:3px;}
.section-sub{font-size:12px;color:var(--muted);font-family:'IBM Plex Mono',monospace;margin-bottom:14px;}
.bar-row{display:grid;grid-template-columns:80px 1fr 70px;align-items:center;gap:10px;margin-bottom:8px;}
.bar-lbl{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);text-align:right;}
.bar-track{background:rgba(10,50,90,0.6);border-radius:2px;height:24px;overflow:hidden;border:1px solid rgba(144,212,245,0.1);}
.bar-fill{height:100%;border-radius:2px;transition:width .6s ease;display:flex;align-items:center;padding-left:8px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(255,255,255,.8);}
.bar-pct{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--foam);}

/* NOx */
.nox-inputs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px;align-items:flex-end;}
.nox-inputs label{font-size:10px;font-family:'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--light);margin-bottom:5px;}
.nox-sel{background:rgba(10,50,90,0.8);border:1px solid rgba(144,212,245,0.3);border-radius:6px;padding:9px 32px 9px 12px;color:var(--white);font-size:13px;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2390d4f5' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}
.nox-input{background:rgba(10,50,90,0.8);border:1px solid rgba(144,212,245,0.3);border-radius:6px;padding:9px 12px;color:var(--white);font-size:13px;outline:none;}
.nox-btn{background:linear-gradient(135deg,#1e6fa0,#35a0d8);border:none;border-radius:6px;padding:9px 18px;color:#fff;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;}
.nox-clear{background:rgba(53,160,216,0.12);border:1px solid rgba(144,212,245,0.3);border-radius:6px;padding:9px 14px;color:var(--foam);font-family:'IBM Plex Mono',monospace;font-size:12px;cursor:pointer;}

/* FUEL TABLE */
.tbl-card{background:linear-gradient(160deg,rgba(255,255,255,0.1) 0%,rgba(14,74,114,0.8) 100%);border:1px solid rgba(144,212,245,0.25);border-radius:8px;padding:22px;margin-bottom:28px;}
table{width:100%;border-collapse:collapse;font-size:13px;}
thead th{background:rgba(53,160,216,0.15);padding:9px 13px;text-align:left;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--wave);border-bottom:1px solid rgba(144,212,245,0.3);}
tbody tr{border-bottom:1px solid rgba(144,212,245,0.1);transition:background .15s;}
tbody tr:hover{background:rgba(53,160,216,0.06);}
tbody td{padding:9px 13px;color:var(--light);}
.cf-badge{display:inline-block;background:rgba(53,160,216,0.15);border:1px solid rgba(144,212,245,0.3);border-radius:3px;padding:2px 8px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--foam);}

/* ACTION / FOOTER */
.action-bar{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap;}
.action-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(53,160,216,0.12);border:1px solid rgba(144,212,245,0.3);border-radius:5px;padding:8px 14px;color:var(--foam);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;cursor:pointer;transition:all .2s;text-transform:uppercase;}
.action-btn:hover{background:rgba(53,160,216,0.25);}
footer{border-top:1px solid rgba(144,212,245,0.2);padding:20px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.footer-text{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);}
.footer-badges{display:flex;gap:8px;flex-wrap:wrap;}
.fbadge{background:rgba(53,160,216,0.1);border:1px solid rgba(144,212,245,0.2);border-radius:3px;padding:3px 8px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);}

/* TOOLTIP */
.tooltip{position:relative;display:inline-block;cursor:help;}
.tooltip .tip{visibility:hidden;width:200px;background:var(--navy);border:1px solid rgba(144,212,245,0.4);color:var(--light);font-size:11px;font-family:'IBM Plex Sans',sans-serif;border-radius:6px;padding:8px 12px;position:absolute;z-index:10;bottom:125%;left:50%;transform:translateX(-50%);line-height:1.5;}
.tooltip:hover .tip{visibility:visible;}
.iico{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;background:rgba(53,160,216,0.2);border:1px solid rgba(144,212,245,0.4);border-radius:50%;font-size:9px;color:var(--foam);font-style:normal;cursor:help;margin-left:4px;}
.tier-age-badge{display:none;padding:8px 14px;border-radius:5px;font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.6;margin-bottom:10px;}
.fade-in{animation:fi .4s ease forwards;}
@keyframes fi{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
</style>


<div class="container">

<!-- HEADER -->
<header>
  <div class="header-badge">IMO MEPC.308(73) · EU ETS MRV · FuelEU Maritime · Implied Carbon Tax</div>
  <h1>Maritime <span>CO2</span> Emission &amp;<br>Implied Carbon Tax Calculator</h1>
  <p class="header-sub">// Every ton of fuel burned has a cost the ocean remembers — calculate yours.</p>
  <div class="header-meta">
    <span class="meta-item">Framework: <strong>MARPOL Annex VI + EU ETS</strong></span>
    <span class="meta-item">Currency: <strong>EUR · USD · INR</strong></span>
    <span class="meta-item">EU ETS Spot: <strong>€70.39 / t-CO2 · Mar 4 2026</strong></span>
  </div>
</header>
<div class="divider"></div>

<!-- MAIN GRID -->
<div class="main-grid">

  <!-- INPUT PANEL -->
  <div class="panel">
    <div class="panel-title">Input Parameters</div>

    <!-- Vessel Type -->
    <div class="form-group">
      <label>Vessel Type <span class="tooltip"><i class="iico">i</i><span class="tip">Selecting a vessel auto-fills typical fuel type and quantity.</span></span></label>
      <select id="vesselType">
        <option value="">-- Select Vessel Type --</option>
        <optgroup label="Cargo">
          <option value="container">Container Ship</option>
          <option value="bulk">Bulk Carrier</option>
          <option value="general">General Cargo</option>
        </optgroup>
        <optgroup label="Tankers">
          <option value="oil_tanker">Oil Tanker (VLCC / Suezmax)</option>
          <option value="chemical">Chemical Tanker</option>
          <option value="lng">LNG Carrier</option>
        </optgroup>
        <optgroup label="Passenger & Ro-Ro">
          <option value="ferry">Ferry / RoPax</option>
          <option value="cruise">Cruise Ship</option>
        </optgroup>
        <optgroup label="Offshore & Special">
          <option value="osv">Offshore Supply Vessel</option>
          <option value="tug">Tug Boat</option>
          <option value="fishing">Fishing Vessel</option>
        </optgroup>
      </select>
      <div class="vessel-info" id="vesselInfo"></div>
    </div>

    <!-- Fuel Type -->
    <div class="form-group">
      <label>Fuel Type <span class="tooltip"><i class="iico">i</i><span class="tip">CF per IMO MEPC.308(73).</span></span></label>
      <select id="fuelType">
        <option value="lsfo">LFO — Light Fuel Oil</option>
        <option value="lsmgo">LSMGO — Low Sulfur Marine Gas Oil</option>
        <option value="hfo">HFO — Heavy Fuel Oil</option>
        <option value="do">DO — Diesel Oil</option>
        <option value="mdo">MDO — Marine Diesel Oil</option>
      </select>
      <div class="cf-chip" id="cfDisplay">CF = 3.151 t-CO2 / t-Fuel</div>
    </div>

    <!-- Fuel Quantity -->
    <div class="form-group">
      <label>Fuel Quantity (metric tons)</label>
      <input type="number" id="fuelQty" value="100" min="0" max="10000" step="10">
      <input type="range" id="fuelSlider" min="10" max="5000" value="100" step="10">
      <div class="range-labels"><span>10 t</span><span>1,000 t</span><span>5,000 t</span></div>
    </div>

    <!-- Framework Tabs -->
    <div class="form-group" style="margin-bottom:0;">
      <label>Carbon Tax Framework</label>
      <div class="calc-tabs">
        <button class="calc-tab active" id="tab-imo">? IMO Standard</button>
        <button class="calc-tab" id="tab-eu">???? EU ETS</button>
      </div>
    </div>

    <!-- IMO SECTION -->
    <div class="tab-section visible" id="imo-section">
      <label style="margin-bottom:8px;">IMO Carbon Levy Tier <span class="tooltip"><i class="iico">i</i><span class="tip">IMO MEPC83 Net-Zero Framework, April 2025. In force from 2028.</span></span></label>

      <div class="tier-card selected" id="imo-t1">
        <div class="tier-top">
          <span class="tier-price" style="color:#f4a427;">$100 / t-CO2eq</span>
          <span class="tier-badge" style="background:rgba(244,164,39,.12);border:1px solid rgba(244,164,39,.3);color:#f4a427;">TIER 1 · BAND B</span>
        </div>
        <div class="tier-desc">Ships meeting Base GFI but missing Direct Compliance Target. Pay $100/t via Remedial Units. <strong style="color:#f4a427;">In force: 2028.</strong></div>
      </div>

      <div class="tier-card" id="imo-t2">
        <div class="tier-top">
          <span class="tier-price" style="color:#e85d3a;">$380 / t-CO2eq</span>
          <span class="tier-badge" style="background:rgba(232,93,58,.12);border:1px solid rgba(232,93,58,.3);color:#e85d3a;">TIER 2 · BAND A</span>
        </div>
        <div class="tier-desc">Worst performers failing Base GFI. Pay $380/t on all excess + $100/t Tier 1. <strong style="color:#e85d3a;">Vessels &gt;5,000 GT.</strong></div>
      </div>

      <div class="tier-card" id="imo-early">
        <div class="tier-top">
          <span class="tier-price" style="color:#90d4f5;">$18.75–$150 / t-CO2eq</span>
          <span class="tier-badge" style="background:rgba(144,212,245,.1);border:1px solid rgba(144,212,245,.3);color:#90d4f5;">PRE-MEPC83</span>
        </div>
        <div class="tier-desc">Earlier proposed range. $18.75/t backed by ICS; $150/t by Pacific island states. Not adopted.</div>
      </div>

      <div class="imo-grid">
        <div>
          <label style="font-size:9px;">USD / t-CO2</label>
          <input type="number" id="imoUSD" value="100" min="1">
        </div>
        <div>
          <label style="font-size:9px;">INR / t-CO2</label>
          <input type="number" id="imoINR" value="9160" min="1">
        </div>
      </div>
      <div class="conv-chain" id="imoChain">?? $100 Χ ?91.60/USD = <span style="color:#90d4f5;">?9,160</span></div>
      <div id="imoLabel" style="font-size:10px;color:var(--muted);font-family:'IBM Plex Mono',monospace;margin-bottom:8px;">Selected: Tier 1 — $100/t</div>
    </div>

    <!-- EU ETS SECTION -->
    <div class="tab-section" id="eu-section">
      <div class="eu-banner">?? <strong style="color:#f4a427;">EU ETS Spot: €70.39 / t-CO2</strong><br>EEX Exchange · March 4, 2026 · Ships &gt;5,000 GT surrender 100% EUAs from 2026</div>

      <div class="rate-row">
        <div class="live-chip">?? <span id="liveRateDisplay">loading…</span></div>
        <button class="refresh-btn" id="refreshBtn">? Refresh</button>
      </div>

      <div class="tier-card selected" id="eu-spot" style="border-color:rgba(144,212,245,.35);">
        <div class="tier-top">
          <span class="tier-price" style="color:#90d4f5;">€70.39 / t-CO2</span>
          <span class="tier-badge" style="background:rgba(144,212,245,.1);border:1px solid rgba(144,212,245,.3);color:#90d4f5;">LIVE · MAR 4 2026</span>
        </div>
        <div class="tier-desc">Current EUA spot. <strong style="color:#90d4f5;">Intra-EU 100%</strong>, to/from EU <strong style="color:#90d4f5;">50%</strong> of emissions covered.</div>
      </div>
      <div class="tier-card" id="eu-forecast" style="border-color:rgba(244,164,39,.25);">
        <div class="tier-top">
          <span class="tier-price" style="color:#f4a427;">€80 / t-CO2</span>
          <span class="tier-badge" style="background:rgba(244,164,39,.1);border:1px solid rgba(244,164,39,.3);color:#f4a427;">FORECAST 2025–26</span>
        </div>
        <div class="tier-desc">Bureau Veritas / UNCTAD forecast. Adds ~$150–300/TEU on Asia–Europe routes.</div>
      </div>
      <div class="tier-card" id="eu-nc" style="border-color:rgba(232,93,58,.25);">
        <div class="tier-top">
          <span class="tier-price" style="color:#e85d3a;">€2,400 / t-CO2eq</span>
          <span class="tier-badge" style="background:rgba(232,93,58,.1);border:1px solid rgba(232,93,58,.3);color:#e85d3a;">NON-COMPLIANCE</span>
        </div>
        <div class="tier-desc">Fails FuelEU GHG intensity target of 89.34 gCO2e/MJ. Well-to-wake. May cause EU port denial.</div>
      </div>

      <div class="currency-grid" style="margin-top:12px;">
        <div><label>EUR / t-CO2 ?</label><input type="number" id="euEUR" value="70.39" step="0.01" min="0.01"></div>
        <div><label>USD / t-CO2</label><input type="number" id="euUSD" value="76.02" step="0.01" min="0.01"></div>
        <div><label>INR / t-CO2</label><input type="number" id="euINR" value="6993" step="1" min="1"></div>
      </div>
      <div class="conv-chain" id="euChain">?? €70.39 Χ $1.08/EUR = $76.02 · $76.02 Χ ?91.60 = <span style="color:#90d4f5;">?6,993</span></div>
      <div id="euLabel" style="font-size:10px;color:var(--muted);font-family:'IBM Plex Mono',monospace;margin-bottom:8px;">Selected: EUA Spot — €70.39/t</div>
    </div>

    <div class="btn-row">
      <button class="calc-btn" id="calcBtn">? Calculate Emissions &amp; Tax</button>
      <button class="reset-btn" id="resetBtn">? Reset</button>
    </div>
  </div>

  <!-- RESULTS PANEL -->
  <div class="results-panel">
    <div class="empty-state" id="emptyState">
      <span class="ship">??</span>
      <p>Select vessel, fuel &amp; framework<br>then click Calculate</p>
    </div>
    <div id="resultsContent" style="display:none;" class="fade-in">
      <div class="panel-title">Results</div>
      <div class="r-top-grid" style="margin-bottom:14px;">
        <div class="mini co2"><div class="mini-lbl">CO2 Emitted</div><div class="mini-val" id="r-co2">—</div><div class="mini-unit">metric tons CO2</div></div>
        <div class="mini"><div class="mini-lbl">Fuel Type</div><div class="mini-val" id="r-fuel" style="font-size:14px;">—</div><div class="mini-unit">CF: <span id="r-cf">—</span></div></div>
        <div class="mini"><div class="mini-lbl">Fuel Consumed</div><div class="mini-val" id="r-qty">—</div><div class="mini-unit">metric tons</div></div>
      </div>
      <div class="dual-blocks">
        <div class="r-block imo">
          <div class="r-block-title">? IMO Carbon Levy</div>
          <div class="r-inner">
            <div class="r-card imo-main" style="grid-column:1/-1;"><div class="mini-lbl">Carbon Tax (USD)</div><div class="mini-val" id="r-imo-usd">—</div><div class="mini-unit" id="r-imo-usd-sub">—</div></div>
            <div class="r-card imo-main"><div class="mini-lbl">Carbon Tax (INR)</div><div class="mini-val" id="r-imo-inr" style="font-size:13px;">—</div><div class="mini-unit">?</div></div>
            <div class="r-card"><div class="mini-lbl">Rate Applied</div><div class="mini-val" id="r-imo-rate" style="font-size:14px;">—</div><div class="mini-unit">per t-CO2</div></div>
          </div>
          <div class="formula" id="r-imo-formula"></div>
        </div>
        <div class="r-block eu">
          <div class="r-block-title">???? EU ETS Carbon Tax</div>
          <div class="r-inner">
            <div class="r-card eu-main" style="grid-column:1/-1;"><div class="mini-lbl">Carbon Tax (EUR)</div><div class="mini-val" id="r-eu-eur">—</div><div class="mini-unit" id="r-eu-eur-sub">—</div></div>
            <div class="r-card eu-main"><div class="mini-lbl">Carbon Tax (INR)</div><div class="mini-val" id="r-eu-inr" style="font-size:13px;">—</div><div class="mini-unit">?</div></div>
            <div class="r-card"><div class="mini-lbl">EUA Rate</div><div class="mini-val" id="r-eu-rate" style="font-size:14px;">—</div><div class="mini-unit">per t-CO2</div></div>
          </div>
          <div class="formula eu" id="r-eu-formula"></div>
        </div>
      </div>
      <div class="src-note">
        ?? IMO Source: MEPC.308(73) — Table CF values, paragraph 2.2.1<br>
        ?? EU ETS Source: EU Emissions Trading System — EUA Spot <strong style="color:#f4a427;">€70.39/t</strong> · March 4, 2026
      </div>
    </div>
  </div>
</div>

<!-- CHARTS -->
<div class="charts-grid">
  <div class="chart-card">
    <div class="chart-title">Fuel Quantity vs CO2 Emissions</div>
    <div class="chart-sub">// Emission curve for selected fuel type</div>
    <div class="chart-wrap"><canvas id="emissionChart"></canvas></div>
  </div>
  <div class="chart-card">
    <div class="chart-title">IMO vs EU ETS — Carbon Tax Comparison</div>
    <div class="chart-sub">// Both frameworks at current rates</div>
    <div class="chart-wrap"><canvas id="penaltyChart"></canvas></div>
  </div>
</div>

<!-- COMPARE BARS -->
<div class="compare-card">
  <div class="section-title">Fuel Type CO2 Comparison</div>
  <div class="section-sub">// CO2 output at entered quantity across all fuel types</div>
  <div id="compareBars"></div>
</div>

<!-- NOx SECTION -->
<div class="chart-card" style="margin-bottom:28px;">
  <div class="chart-title">IMO NO? Emission Limits — Tier I vs Tier II</div>
  <div class="chart-sub">// MARPOL Annex VI, Regulation 13 — NO? limits by engine speed &amp; vessel age</div>
  <div class="nox-inputs">
    <div><label>Engine Type</label><select class="nox-sel" id="vesselEngineType"><option value="">-- Select --</option><option value="slow">Slow Speed 2-Stroke (&lt;130 RPM)</option><option value="medium">Medium Speed 4-Stroke (130–1000 RPM)</option><option value="high">High Speed (&gt;1000 RPM)</option></select></div>
    <div><label>Vessel Preset</label><select class="nox-sel" id="vesselPreset"><option value="">-- Select --</option></select></div>
    <div><label>Keel Laid Year <span class="tooltip"><i class="iico">i</i><span class="tip">Before 2000 = Pre-Tier. 2000–2010 = Tier I. 2011–2015 = Tier II. 2016+ = Tier II/III.</span></span></label><input class="nox-input" type="number" id="vesselYear" placeholder="e.g. 2008" min="1950" max="2026" style="width:120px;"></div>
    <div><label>RPM</label><input class="nox-input" type="number" id="vesselRPM" placeholder="e.g. 105" min="10" max="3000" style="width:110px;"></div>
    <div><label>NO? (g/kWh)</label><input class="nox-input" type="number" id="vesselNOx" placeholder="e.g. 14.2" min="0" max="25" step="0.1" style="width:130px;"></div>
    <button class="nox-btn" id="plotBtn">Plot Vessel</button>
    <button class="nox-clear" id="clearNoxBtn">? Clear</button>
  </div>
  <div class="tier-age-badge" id="tierAgeBadge"></div>
  <div id="vesselStatus" style="display:none;margin-bottom:12px;padding:8px 14px;border-radius:5px;font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.8;"></div>
  <div class="chart-wrap" style="height:280px;"><canvas id="noxChart"></canvas></div>
</div>

<!-- FUEL TABLE -->
<div class="tbl-card">
  <div class="section-title">IMO Fuel Reference Data</div>
  <div class="section-sub">// Carbon conversion factors per MEPC.308(73), paragraph 2.2.1</div>
  <table>
    <thead><tr><th>Code</th><th>Full Name</th><th>CF (t-CO2/t)</th><th>LCV (kJ/kg)</th><th>Carbon Content</th><th>Reference</th></tr></thead>
    <tbody>
      <tr><td><strong>LFO</strong></td><td>Light Fuel Oil</td><td><span class="cf-badge">3.151</span></td><td>41,200</td><td>0.8594</td><td>ISO 8217 RMA–RMD</td></tr>
      <tr><td><strong>LSMGO</strong></td><td>Low Sulfur Marine Gas Oil</td><td><span class="cf-badge">3.206</span></td><td>42,700</td><td>0.8744</td><td>ISO 8217 DMX–DMB</td></tr>
      <tr><td><strong>HFO</strong></td><td>Heavy Fuel Oil</td><td><span class="cf-badge">3.114</span></td><td>40,200</td><td>0.8493</td><td>ISO 8217 RME–RMK</td></tr>
      <tr><td><strong>DO</strong></td><td>Diesel Oil</td><td><span class="cf-badge">3.206</span></td><td>42,700</td><td>0.8744</td><td>ISO 8217 DMX–DMB</td></tr>
      <tr><td><strong>MDO</strong></td><td>Marine Diesel Oil</td><td><span class="cf-badge">3.206</span></td><td>42,700</td><td>0.8744</td><td>ISO 8217 DMX–DMB</td></tr>
      <tr style="opacity:.7;"><td><strong>LNG</strong></td><td>Liquefied Natural Gas</td><td><span class="cf-badge">2.750</span></td><td>48,000</td><td>0.7500</td><td>IPCC 2006</td></tr>
    </tbody>
  </table>
</div>

<!-- ACTION BAR -->
<div class="action-bar">
  <button class="action-btn" id="printBtn">?? Print Report</button>
  <button class="action-btn" id="resetBtn2">? Reset Calculator</button>
  <button class="action-btn" id="voyageBtn">? Voyage Estimate</button>
</div>

<footer>
  <span class="footer-text">Maritime CO2 Implied Carbon Tax Calculator — IMO MEPC.308(73) + EU ETS</span>
  <div class="footer-badges">
    <span class="fbadge">MARPOL Annex VI</span>
    <span class="fbadge">IMO MEPC.308(73)</span>
    <span class="fbadge">EU ETS MRV</span>
    <span class="fbadge">FuelEU Maritime</span>
  </div>
</footer>

</div><!-- end container -->

<script>
// -- DATA --
const FUELS = {
  lsfo:  { name:'LFO',   full:'Light Fuel Oil',            cf:3.151, color:'#2e8bc0' },
  lsmgo: { name:'LSMGO', full:'Low Sulfur Marine Gas Oil', cf:3.206, color:'#4ecdc4' },
  hfo:   { name:'HFO',   full:'Heavy Fuel Oil',            cf:3.114, color:'#f4a427' },
  do:    { name:'DO',    full:'Diesel Oil',                 cf:3.206, color:'#e85d3a' },
  mdo:   { name:'MDO',   full:'Marine Diesel Oil',         cf:3.206, color:'#a78bfa' },
};

const VESSEL_DEFAULTS = {
  container: { fuel:'lsmgo', qty:1260, daily:180, label:'Container Ship',        info:'LSMGO · ~150–200 t/day · Major liner routes globally' },
  bulk:       { fuel:'hfo',   qty:245,  daily:35,  label:'Bulk Carrier',          info:'HFO · ~25–45 t/day · Coal, grain, ore' },
  general:    { fuel:'hfo',   qty:175,  daily:25,  label:'General Cargo',         info:'HFO · ~20–30 t/day · Multipurpose trades' },
  oil_tanker: { fuel:'hfo',   qty:630,  daily:90,  label:'Oil Tanker (VLCC)',     info:'HFO · ~80–100 t/day · Crude oil VLCC/Suezmax' },
  chemical:   { fuel:'mdo',   qty:210,  daily:30,  label:'Chemical Tanker',       info:'MDO · ~25–35 t/day · Liquid chemicals & vegetable oils' },
  lng:        { fuel:'lsmgo', qty:840,  daily:120, label:'LNG Carrier',           info:'LSMGO · ~100–140 t/day · Slow-speed 2-stroke' },
  ferry:      { fuel:'mdo',   qty:280,  daily:40,  label:'Ferry / RoPax',         info:'MDO · ~30–50 t/day · Short-sea & Ro-Ro' },
  cruise:     { fuel:'lsmgo', qty:2100, daily:300, label:'Cruise Ship',           info:'LSMGO · ~250–350 t/day · ECA compliant' },
  osv:        { fuel:'mdo',   qty:105,  daily:15,  label:'Offshore Supply Vessel',info:'MDO · ~10–20 t/day · DP offshore operations' },
  tug:        { fuel:'do',    qty:56,   daily:8,   label:'Tug Boat',              info:'DO · ~5–12 t/day · Harbour & escort' },
  fishing:    { fuel:'do',    qty:35,   daily:5,   label:'Fishing Vessel',        info:'DO · ~3–8 t/day · Coastal & deep-sea' },
};

const NOX_PRESETS = {
  slow:[
    {label:'VLCC / Supertanker (100 RPM)',rpm:100,nox:16.5},
    {label:'Bulk Carrier (105 RPM)',rpm:105,nox:15.8},
    {label:'Container Ship (120 RPM)',rpm:120,nox:15.2},
    {label:'LNG Carrier (80 RPM)',rpm:80,nox:16.8},
  ],
  medium:[
    {label:'Ferry / RoPax (500 RPM)',rpm:500,nox:11.2},
    {label:'Offshore Supply Vessel (750 RPM)',rpm:750,nox:10.1},
    {label:'General Cargo (400 RPM)',rpm:400,nox:11.8},
    {label:'Tug Boat (600 RPM)',rpm:600,nox:10.7},
  ],
  high:[
    {label:'Fast Patrol Craft (1800 RPM)',rpm:1800,nox:8.4},
    {label:'Pilot Boat (2200 RPM)',rpm:2200,nox:7.5},
    {label:'Crew Boat (1500 RPM)',rpm:1500,nox:9.1},
    {label:'Fishing Vessel (1200 RPM)',rpm:1200,nox:9.6},
  ]
};

// -- STATE --
let usdToInr = 91.60, eurToUsd = 1.08;
let imoRate = 100, euRate = 70.39;
let emChart, penChart, noxChart;

// -- CHART OPTIONS HELPER --
function cOpts(xLabel, yLabel, showLegend) {
  return {
    responsive:true, maintainAspectRatio:false,
    interaction:{mode:'index',intersect:false},
    plugins:{
      legend:{display:!!showLegend, labels:{color:'#5a9ec0',font:{family:"'IBM Plex Mono'",size:10},boxWidth:14,padding:10}},
      tooltip:{backgroundColor:'rgba(10,50,90,.95)',borderColor:'rgba(144,212,245,.4)',borderWidth:1,titleColor:'#90d4f5',bodyColor:'#b8dff5',titleFont:{family:"'IBM Plex Mono'",size:11},bodyFont:{family:"'IBM Plex Mono'",size:11}}
    },
    scales:{
      x:{title:{display:!!xLabel,text:xLabel,color:'#5a9ec0',font:{family:"'IBM Plex Mono'",size:10}},grid:{color:'rgba(144,212,245,.08)'},ticks:{color:'#5a9ec0',font:{family:"'IBM Plex Mono'",size:10}}},
      y:{title:{display:!!yLabel,text:yLabel,color:'#5a9ec0',font:{family:"'IBM Plex Mono'",size:10}},grid:{color:'rgba(144,212,245,.08)'},ticks:{color:'#5a9ec0',font:{family:"'IBM Plex Mono'",size:10}}}
    }
  };
}

// -- BUILD CHARTS --
function buildCharts() {
  const pts = [10,50,100,200,500,1000,2000,5000];
  const co2pts = [50,100,200,500,1000,2000];

  emChart = new Chart(document.getElementById('emissionChart').getContext('2d'), {
    type:'line',
    data:{labels:pts,datasets:[{label:'CO2 (t)',data:pts.map(q=>+(q*3.151).toFixed(1)),borderColor:'#35a0d8',backgroundColor:'rgba(53,160,216,.1)',borderWidth:2,fill:true,tension:.4,pointBackgroundColor:'#90d4f5',pointRadius:4}]},
    options:cOpts('Fuel (tons)','CO2 (tons)',false)
  });

  penChart = new Chart(document.getElementById('penaltyChart').getContext('2d'), {
    type:'bar',
    data:{
      labels:co2pts.map(c=>c+'t CO2'),
      datasets:[
        {label:'IMO $100/t (USD k)',data:co2pts.map(c=>+(c*100/1000).toFixed(1)),backgroundColor:'rgba(53,160,216,.6)',borderColor:'#35a0d8',borderWidth:1,borderRadius:3},
        {label:'EU ETS €70.39/t (EUR k)',data:co2pts.map(c=>+(c*70.39/1000).toFixed(1)),backgroundColor:'rgba(244,164,39,.6)',borderColor:'#f4a427',borderWidth:1,borderRadius:3}
      ]
    },
    options:cOpts('CO2 Emitted','Tax (thousands)',true)
  });

  const speeds=[75,100,130,200,300,400,500,750,1000,1500,2000,2500,3000];
  const t1=n=>n<130?17.0:n<=2000?45*Math.pow(n,-.2):9.8;
  const t2=n=>n<130?14.4:n<=2000?44*Math.pow(n,-.23):7.7;
  noxChart = new Chart(document.getElementById('noxChart').getContext('2d'), {
    type:'line',
    data:{labels:speeds,datasets:[
      {label:'Tier I Limit',data:speeds.map(t1),borderColor:'#e85d3a',backgroundColor:'rgba(232,93,58,.08)',borderWidth:2.5,fill:true,tension:.3,pointBackgroundColor:'#e85d3a',pointRadius:4},
      {label:'Tier II Limit',data:speeds.map(t2),borderColor:'#3ecfc6',backgroundColor:'rgba(62,207,198,.08)',borderWidth:2.5,fill:true,tension:.3,pointBackgroundColor:'#3ecfc6',pointRadius:4}
    ]},
    options:{...cOpts('Engine Speed (RPM)','NO? (g/kWh)',true),plugins:{...cOpts(null,null,true).plugins,tooltip:{...cOpts().plugins.tooltip,callbacks:{label:c=>` ${c.dataset.label}: ${c.parsed.y.toFixed(2)} g/kWh`}}}}
  });
}

// -- UPDATE CHARTS --
function updateEmChart() {
  if (!emChart) return;
  const fuel = FUELS[document.getElementById('fuelType').value];
  const qty = parseFloat(document.getElementById('fuelQty').value)||100;
  let pts=[10,50,100,200,500,1000,2000,5000];
  if (!pts.includes(Math.round(qty))) pts.push(Math.round(qty));
  pts.sort((a,b)=>a-b);
  emChart.data.labels=pts;
  emChart.data.datasets[0].data=pts.map(q=>+(q*fuel.cf).toFixed(2));
  emChart.data.datasets[0].borderColor=fuel.color;
  emChart.data.datasets[0].backgroundColor=fuel.color+'20';
  emChart.data.datasets[0].label=fuel.name+' CO2';
  emChart.update();
}

function updatePenChart(co2, imoU, euE) {
  if (!penChart) return;
  let pts=[50,100,200,500,1000,2000];
  if (co2 && !pts.includes(Math.round(co2))) pts.push(Math.round(co2));
  pts.sort((a,b)=>a-b);
  penChart.data.labels=pts.map(c=>c+'t');
  penChart.data.datasets[0].data=pts.map(c=>+(c*imoU/1000).toFixed(1));
  penChart.data.datasets[0].label=`IMO $${imoU}/t (USD k)`;
  penChart.data.datasets[1].data=pts.map(c=>+(c*euE/1000).toFixed(1));
  penChart.data.datasets[1].label=`EU ETS €${euE.toFixed(2)}/t (EUR k)`;
  penChart.update();
}

function updateCompareBars() {
  const qty=parseFloat(document.getElementById('fuelQty').value)||100;
  const maxCO2=Math.max(...Object.values(FUELS).map(f=>qty*f.cf));
  document.getElementById('compareBars').innerHTML=Object.entries(FUELS).map(([,f])=>{
    const co2=+(qty*f.cf).toFixed(2), pct=(co2/maxCO2*100).toFixed(1);
    return `<div class="bar-row"><span class="bar-lbl">${f.name}</span><div class="bar-track"><div class="bar-fill" style="width:${pct}%;background:linear-gradient(90deg,${f.color}99,${f.color});">${co2}t CO2</div></div><span class="bar-pct">${pct}%</span></div>`;
  }).join('');
}

// -- CF DISPLAY --
function updateCF() {
  const f=FUELS[document.getElementById('fuelType').value];
  document.getElementById('cfDisplay').textContent=`CF = ${f.cf} t-CO2 / t-Fuel`;
  updateEmChart();
  updateCompareBars();
}

// -- VESSEL TYPE --
function onVesselType() {
  const key=document.getElementById('vesselType').value;
  const el=document.getElementById('vesselInfo');
  if (!key){el.style.display='none';return;}
  const v=VESSEL_DEFAULTS[key];
  document.getElementById('fuelType').value=v.fuel;
  updateCF();
  document.getElementById('fuelQty').value=v.qty;
  document.getElementById('fuelSlider').value=Math.min(v.qty,5000);
  updateCompareBars();
  el.style.display='block';
  el.innerHTML=`?? <strong>${v.label}</strong> — ${v.info}<br><span style="color:#b8dff5;">Auto-filled: ${v.fuel.toUpperCase()} · ${v.qty.toLocaleString()} t (7-day) · ~${v.daily} t/day</span>`;
}

// -- IMO --
function onIMOTier(usd, label, elId) {
  imoRate=usd;
  document.getElementById('imoUSD').value=usd;
  syncIMOtoINR();
  document.getElementById('imoLabel').textContent='Selected: '+label;
  document.querySelectorAll('#imo-section .tier-card').forEach(c=>c.classList.remove('selected'));
  document.getElementById(elId).classList.add('selected');
}

function syncIMOtoINR() {
  const usd=parseFloat(document.getElementById('imoUSD').value)||0;
  imoRate=usd;
  const inr=Math.round(usd*usdToInr);
  document.getElementById('imoINR').value=inr;
  document.getElementById('imoChain').innerHTML=`?? $${usd} Χ ?${usdToInr.toFixed(2)}/USD = <span style="color:#90d4f5;">?${inr.toLocaleString('en-IN')}</span>`;
}
function syncINRtoIMO() {
  const inr=parseFloat(document.getElementById('imoINR').value)||0;
  const usd=(inr/usdToInr).toFixed(2);
  imoRate=parseFloat(usd);
  document.getElementById('imoUSD').value=usd;
  document.getElementById('imoChain').innerHTML=`?? $${usd} Χ ?${usdToInr.toFixed(2)}/USD = <span style="color:#90d4f5;">?${inr.toLocaleString('en-IN')}</span>`;
}

// -- EU ETS --
function onEUTier(eur, label, elId) {
  euRate=eur;
  document.getElementById('euEUR').value=eur;
  syncFromEUR();
  document.getElementById('euLabel').textContent='Selected: '+label;
  document.querySelectorAll('#eu-section .tier-card').forEach(c=>c.classList.remove('selected'));
  document.getElementById(elId).classList.add('selected');
}
function syncFromEUR() {
  const eur=parseFloat(document.getElementById('euEUR').value)||0;
  euRate=eur;
  const usd=eur*eurToUsd, inr=usd*usdToInr;
  document.getElementById('euUSD').value=usd.toFixed(2);
  document.getElementById('euINR').value=Math.round(inr);
  updateEUChain(eur,usd,inr);
}
function syncFromEU_USD() {
  const usd=parseFloat(document.getElementById('euUSD').value)||0;
  const eur=usd/eurToUsd, inr=usd*usdToInr;
  euRate=eur;
  document.getElementById('euEUR').value=eur.toFixed(2);
  document.getElementById('euINR').value=Math.round(inr);
  updateEUChain(eur,usd,inr);
}
function syncFromEU_INR() {
  const inr=parseFloat(document.getElementById('euINR').value)||0;
  const usd=inr/usdToInr, eur=usd/eurToUsd;
  euRate=eur;
  document.getElementById('euEUR').value=eur.toFixed(2);
  document.getElementById('euUSD').value=usd.toFixed(2);
  updateEUChain(eur,usd,inr);
}
function updateEUChain(eur,usd,inr) {
  document.getElementById('euChain').innerHTML=`?? €${eur.toFixed(2)} Χ $${eurToUsd.toFixed(4)}/EUR = $${usd.toFixed(2)} · $${usd.toFixed(2)} Χ ?${usdToInr.toFixed(2)} = <span style="color:#90d4f5;">?${Math.round(inr).toLocaleString('en-IN')}</span>`;
}

// -- CALCULATE --
function calculate() {
  const fuelKey=document.getElementById('fuelType').value;
  const fuel=FUELS[fuelKey];
  const qty=parseFloat(document.getElementById('fuelQty').value)||0;
  const co2=qty*fuel.cf;

  const imoU=parseFloat(document.getElementById('imoUSD').value)||imoRate;
  const imoPenUSD=co2*imoU, imoPenINR=imoPenUSD*usdToInr;

  const euE=parseFloat(document.getElementById('euEUR').value)||euRate;
  const euPenEUR=co2*euE, euPenINR=co2*euE*eurToUsd*usdToInr;

  document.getElementById('emptyState').style.display='none';
  const rc=document.getElementById('resultsContent');
  rc.style.display='block'; rc.className='fade-in';

  document.getElementById('r-co2').textContent=co2.toFixed(2);
  document.getElementById('r-fuel').textContent=fuel.name;
  document.getElementById('r-cf').textContent=fuel.cf;
  document.getElementById('r-qty').textContent=qty.toLocaleString('en-IN');

  document.getElementById('r-imo-usd').textContent='$'+Math.round(imoPenUSD).toLocaleString('en-IN');
  document.getElementById('r-imo-usd-sub').textContent='at $'+imoU+'/t-CO2';
  document.getElementById('r-imo-inr').textContent='?'+Math.round(imoPenINR).toLocaleString('en-IN');
  document.getElementById('r-imo-rate').textContent='$'+imoU;
  document.getElementById('r-imo-formula').innerHTML=`CO2 = ${qty} Χ ${fuel.cf} = ${co2.toFixed(2)} t<br>Tax = ${co2.toFixed(2)} Χ $${imoU} = <strong>$${Math.round(imoPenUSD).toLocaleString()}</strong><br>INR = Χ?${usdToInr.toFixed(2)} = <strong>?${Math.round(imoPenINR).toLocaleString('en-IN')}</strong>`;

  document.getElementById('r-eu-eur').textContent='€'+Math.round(euPenEUR).toLocaleString('en-IN');
  document.getElementById('r-eu-eur-sub').textContent='at €'+euE.toFixed(2)+'/t-CO2';
  document.getElementById('r-eu-inr').textContent='?'+Math.round(euPenINR).toLocaleString('en-IN');
  document.getElementById('r-eu-rate').textContent='€'+euE.toFixed(2);
  document.getElementById('r-eu-formula').innerHTML=`CO2 = ${qty} Χ ${fuel.cf} = ${co2.toFixed(2)} t<br>Tax = ${co2.toFixed(2)} Χ €${euE.toFixed(2)} = <strong>€${Math.round(euPenEUR).toLocaleString()}</strong><br>USD = Χ$${eurToUsd.toFixed(4)} = $${Math.round(euPenEUR*eurToUsd).toLocaleString()}<br>INR = <strong>?${Math.round(euPenINR).toLocaleString('en-IN')}</strong>`;

  updateEmChart();
  updatePenChart(co2, imoU, euE);
  updateCompareBars();
}

// -- RESET --
function resetCalc() {
  document.getElementById('vesselType').value='';
  document.getElementById('vesselInfo').style.display='none';
  document.getElementById('fuelType').value='lsfo';
  document.getElementById('fuelQty').value=100;
  document.getElementById('fuelSlider').value=100;
  document.getElementById('imoUSD').value=100;
  document.getElementById('euEUR').value=70.39;
  document.getElementById('emptyState').style.display='flex';
  document.getElementById('resultsContent').style.display='none';
  updateCF(); syncIMOtoINR(); syncFromEUR();
}

// -- TAB SWITCH --
function switchTab(tab) {
  document.getElementById('tab-imo').classList.toggle('active',tab==='imo');
  document.getElementById('tab-eu').classList.toggle('active',tab==='eu');
  document.getElementById('imo-section').classList.toggle('visible',tab==='imo');
  document.getElementById('eu-section').classList.toggle('visible',tab==='eu');
}

// -- EXCHANGE RATE --
async function fetchRate() {
  const el=document.getElementById('liveRateDisplay');
  el.innerHTML='<span style="color:#5a9ec0;">?? fetching…</span>';
  const inrUrls=['https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/usd/inr.min.json','https://latest.currency-api.pages.dev/v1/currencies/usd/inr.min.json','https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/usd/inr.json'];
  const eurUrls=['https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/eur/usd.min.json','https://latest.currency-api.pages.dev/v1/currencies/eur/usd.min.json','https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/eur/usd.json'];
  async function tryUrls(urls,key) {
    for (const u of urls) {
      try { const r=await fetch(u,{cache:'no-store'}); if(!r.ok) continue; const d=await r.json(); const v=d[key]; if(v&&v>0) return parseFloat(v.toFixed(4)); } catch{}
    } return null;
  }
  const [inr,eur]=await Promise.all([tryUrls(inrUrls,'inr'),tryUrls(eurUrls,'usd')]);
  const now=new Date().toLocaleTimeString('en-IN',{hour:'2-digit',minute:'2-digit'});
  if (inr&&eur) {
    usdToInr=inr; eurToUsd=eur;
    el.innerHTML=`?? <strong style="color:#3ecfc6;">1 USD = ?${usdToInr.toFixed(2)}</strong> &nbsp;|&nbsp; <strong style="color:#3ecfc6;">1 EUR = $${eurToUsd.toFixed(4)}</strong> <span style="color:#5a9ec0;font-size:9px;">LIVE · ${now}</span>`;
    syncIMOtoINR(); syncFromEUR();
  } else {
    el.innerHTML=`?? 1 USD ˜ ?${usdToInr.toFixed(2)} | 1 EUR ˜ $${eurToUsd.toFixed(2)} <span style="color:#5a9ec0;font-size:9px;">FALLBACK</span>`;
  }
}

// -- NOx --
function getTierFromYear(year) {
  if (!year||year<1950) return null;
  if (year<2000) return {tier:'Pre-Tier',color:'#5a9ec0',desc:'Built before 2000 — exempt from Tier I/II under MARPOL Annex VI Reg 13.'};
  if (year<2011) return {tier:'Tier I',  color:'#e85d3a',desc:'Tier I applies. Limit: 17.0 g/kWh at <130 RPM.'};
  if (year<2016) return {tier:'Tier II', color:'#f4a427',desc:'Tier II applies globally. Limit: 14.4 g/kWh at <130 RPM.'};
  return              {tier:'Tier II/III',color:'#42b77a',desc:'Tier III in ECAs (~3.4 g/kWh). Tier II outside ECAs.'};
}

function updateVesselPreset() {
  const type=document.getElementById('vesselEngineType').value;
  const sel=document.getElementById('vesselPreset');
  sel.innerHTML='<option value="">-- Select --</option>';
  if (!type||!NOX_PRESETS[type]) return;
  NOX_PRESETS[type].forEach((p,i)=>{ sel.innerHTML+=`<option value="${type}_${i}">${p.label}</option>`; });
}

function applyVesselPreset() {
  const val=document.getElementById('vesselPreset').value;
  if (!val) return;
  const [type,idx]=val.split('_');
  const p=NOX_PRESETS[type][parseInt(idx)];
  document.getElementById('vesselRPM').value=p.rpm;
  document.getElementById('vesselNOx').value=p.nox;
}

function updateTierFromAge() {
  const year=parseInt(document.getElementById('vesselYear').value);
  const badge=document.getElementById('tierAgeBadge');
  if (!year||year<1950||year>2026){badge.style.display='none';return;}
  const info=getTierFromYear(year);
  badge.style.display='block';
  badge.style.cssText=`display:block;padding:8px 14px;border-radius:5px;font-family:'IBM Plex Mono',monospace;font-size:11px;background:${info.color}18;border:1px solid ${info.color}60;color:${info.color};line-height:1.6;margin-bottom:10px;`;
  badge.innerHTML=`?? <strong>${info.tier} — Keel laid ${year}</strong><br><span style="color:#b8dff5;">${info.desc}</span>`;
}

function plotVessel() {
  const rpm=parseFloat(document.getElementById('vesselRPM').value);
  const nox=parseFloat(document.getElementById('vesselNOx').value);
  const year=parseInt(document.getElementById('vesselYear').value);
  if (!rpm||!nox){alert('Please enter both RPM and NO? values.');return;}
  const t1=rpm<130?17.0:rpm<=2000?45*Math.pow(rpm,-.2):9.8;
  const t2=rpm<130?14.4:rpm<=2000?44*Math.pow(rpm,-.23):7.7;
  const tierInfo=getTierFromYear(year);
  let color,icon,compliance,limitLabel;
  if (!tierInfo||tierInfo.tier==='Pre-Tier'){
    color='#5a9ec0';icon='?';compliance='Pre-2000 Vessel — No Tier limit applies';limitLabel='N/A';
  } else if (tierInfo.tier==='Tier I'){
    limitLabel=`Tier I: ${t1.toFixed(2)} g/kWh`;
    if(nox<=t1){compliance='Tier I Compliant';color='#f4a427';icon='?';}
    else{compliance='NON-COMPLIANT — Exceeds Tier I';color='#e85d3a';icon='?';}
  } else {
    limitLabel=`Tier II: ${t2.toFixed(2)} g/kWh`;
    if(nox<=t2){compliance='Tier II Compliant';color='#42b77a';icon='?';}
    else if(nox<=t1){compliance='Tier I only — fails Tier II';color='#f4a427';icon='?';}
    else{compliance='NON-COMPLIANT — Exceeds both Tiers';color='#e85d3a';icon='?';}
  }
  const sb=document.getElementById('vesselStatus');
  sb.style.display='block';
  sb.style.cssText=`display:block;padding:8px 14px;border-radius:5px;font-family:'IBM Plex Mono',monospace;font-size:11px;background:${color}18;border:1px solid ${color}60;color:${color};line-height:1.8;margin-bottom:12px;`;
  sb.innerHTML=`${icon} <strong>${compliance}</strong><br><span style="color:#b8dff5;">${rpm} RPM · ${nox} g/kWh · ${limitLabel}${year?` · Keel ${year} ? ${tierInfo?.tier||'Pre-Tier'}`:''}</span>`;
  // Plot on chart
  const ds=noxChart.data.datasets;
  const ex=ds.findIndex(d=>d.label==='Your Vessel');
  if(ex!==-1) ds.splice(ex,1);
  const labels=noxChart.data.labels;
  const ci=labels.reduce((b,l,i)=>Math.abs(l-rpm)<Math.abs(labels[b]-rpm)?i:b,0);
  const pd=labels.map(()=>null); pd[ci]=nox;
  ds.push({label:'Your Vessel',data:pd,pointBackgroundColor:color,pointBorderColor:'#fff',pointBorderWidth:2,pointRadius:10,pointStyle:'triangle',borderColor:'transparent',showLine:false,order:0});
  noxChart.options.plugins.legend.display=true;
  noxChart.update();
}

function clearVessel() {
  const ds=noxChart.data.datasets,idx=ds.findIndex(d=>d.label==='Your Vessel');
  if(idx!==-1) ds.splice(idx,1);
  document.getElementById('vesselStatus').style.display='none';
  document.getElementById('tierAgeBadge').style.display='none';
  document.getElementById('vesselRPM').value='';
  document.getElementById('vesselNOx').value='';
  document.getElementById('vesselYear').value='';
  document.getElementById('vesselEngineType').value='';
  document.getElementById('vesselPreset').innerHTML='<option value="">-- Select --</option>';
  noxChart.update();
}

// -- VOYAGE ESTIMATE --
function voyageEstimate() {
  const ov=document.createElement('div');
  ov.id='vOv';
  ov.style.cssText='position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center;';
  ov.innerHTML=`<div style="background:#0e3255;border:1px solid rgba(144,212,245,.4);border-radius:10px;padding:32px;width:320px;font-family:'IBM Plex Sans',sans-serif;">
    <div style="font-family:'Playfair Display',serif;font-size:20px;color:#e8f6ff;margin-bottom:20px;">? Voyage Estimate</div>
    <label style="font-size:11px;font-family:'IBM Plex Mono',monospace;color:#5a9ec0;letter-spacing:.08em;text-transform:uppercase;">Duration (days)</label>
    <input id="vDays" type="number" value="7" min="1" style="width:100%;margin:8px 0 16px;background:rgba(10,50,90,.8);border:1px solid rgba(144,212,245,.35);border-radius:6px;padding:10px;color:#e8f6ff;font-size:15px;outline:none;">
    <label style="font-size:11px;font-family:'IBM Plex Mono',monospace;color:#5a9ec0;letter-spacing:.08em;text-transform:uppercase;">Daily Consumption (t/day)</label>
    <input id="vFpd" type="number" value="30" min="1" style="width:100%;margin:8px 0 20px;background:rgba(10,50,90,.8);border:1px solid rgba(144,212,245,.35);border-radius:6px;padding:10px;color:#e8f6ff;font-size:15px;outline:none;">
    <div id="vRes" style="display:none;background:rgba(53,160,216,.1);border:1px solid rgba(144,212,245,.3);border-radius:6px;padding:10px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#90d4f5;margin-bottom:16px;"></div>
    <div style="display:flex;gap:10px;">
      <button id="vApply" style="flex:1;background:linear-gradient(135deg,#1e6fa0,#35a0d8);border:none;border-radius:6px;padding:11px;color:#fff;font-family:'IBM Plex Mono',monospace;font-size:12px;cursor:pointer;">Apply &amp; Calculate</button>
      <button id="vClose" style="background:rgba(53,160,216,.12);border:1px solid rgba(144,212,245,.3);border-radius:6px;padding:11px 14px;color:#90d4f5;font-family:'IBM Plex Mono',monospace;cursor:pointer;">?</button>
    </div></div>`;
  document.body.appendChild(ov);
  const preview=()=>{const d=parseFloat(document.getElementById('vDays').value)||0,f=parseFloat(document.getElementById('vFpd').value)||0,t=d*f;const r=document.getElementById('vRes');if(t>0){r.style.display='block';r.textContent=`${d} days Χ ${f} t/day = ${t.toFixed(0)} tons fuel`;}};
  document.getElementById('vDays').addEventListener('input',preview);
  document.getElementById('vFpd').addEventListener('input',preview);
  preview();
  document.getElementById('vApply').addEventListener('click',()=>{
    const d=parseFloat(document.getElementById('vDays').value)||0,f=parseFloat(document.getElementById('vFpd').value)||0,t=d*f;
    if(t>0){document.getElementById('fuelQty').value=t.toFixed(0);document.getElementById('fuelSlider').value=Math.min(t,5000);document.body.removeChild(ov);calculate();}
  });
  document.getElementById('vClose').addEventListener('click',()=>document.body.removeChild(ov));
  ov.addEventListener('click',e=>{if(e.target===ov)document.body.removeChild(ov);});
}

// -- PRINT --
function printReport() {
  const imgs={};
  document.querySelectorAll('canvas').forEach(c=>{imgs[c.id]=c.toDataURL('image/png');});
  const g=id=>document.getElementById(id)?.textContent||'—';
  const now=new Date().toLocaleString('en-IN',{dateStyle:'long',timeStyle:'short'});
  document.getElementById('printOverlay')?.remove();
  const ov=document.createElement('div');
  ov.id='printOverlay';
  ov.style.cssText='position:fixed;inset:0;z-index:9999;background:#fff;overflow-y:auto;';
  ov.innerHTML=`<style>*{box-sizing:border-box;margin:0;padding:0;}body{font-family:'Segoe UI',sans-serif;background:#fff;color:#1a1a2e;padding:36px;max-width:960px;margin:0 auto;font-size:13px;}h1{font-size:24px;font-weight:900;color:#0a2a45;margin-bottom:4px;}.sub{font-size:11px;color:#5a9ec0;font-family:monospace;margin-bottom:14px;}.badge{display:inline-block;background:#e8f4fb;border:1px solid #2e8bc0;border-radius:4px;padding:3px 10px;font-size:10px;font-family:monospace;color:#1e5f8e;margin-right:6px;margin-bottom:14px;}.sec{margin:20px 0 8px;font-size:10px;font-family:monospace;text-transform:uppercase;letter-spacing:.12em;color:#2e8bc0;border-bottom:1px solid #dce8f5;padding-bottom:4px;}.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:14px;}.dual{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px;}.card{background:#f4f8fc;border:1px solid #d0e4f0;border-radius:6px;padding:12px;}.eu-card{background:#fffbf0;border-color:#f4a427;}.lbl{font-size:9px;font-family:monospace;text-transform:uppercase;color:#5a9ec0;margin-bottom:4px;}.val{font-size:20px;font-weight:700;color:#0a2a45;}.btitle{font-size:10px;font-family:monospace;text-transform:uppercase;color:#2e8bc0;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid #dce8f5;}.eu-btitle{color:#c87f00;}.formula{background:#f0f6fc;border-left:3px solid #2e8bc0;border-radius:4px;padding:9px;font-family:monospace;font-size:10px;color:#1e5f8e;line-height:1.9;margin-top:6px;}.eu-formula{border-left-color:#f4a427;color:#a06000;}.pimg{width:100%;border:1px solid #dce8f5;border-radius:6px;margin-bottom:12px;display:block;}table{width:100%;border-collapse:collapse;font-size:11px;}thead th{background:#e8f4fb;padding:7px 11px;text-align:left;font-family:monospace;font-size:9px;text-transform:uppercase;color:#2e8bc0;border-bottom:1px solid #c0d8ec;}tbody td{padding:7px 11px;border-bottom:1px solid #eef3f8;}.cf{background:#e8f4fb;border-radius:3px;padding:1px 6px;font-family:monospace;color:#1e5f8e;}.footer{margin-top:24px;border-top:1px solid #dce8f5;padding-top:10px;display:flex;justify-content:space-between;font-size:10px;color:#aaa;font-family:monospace;}.topbar{display:flex;gap:10px;padding:12px 36px;background:#f4f8fc;border-bottom:1px solid #dce8f5;position:sticky;top:0;}.btn{padding:8px 18px;border-radius:5px;font-family:monospace;font-size:12px;cursor:pointer;border:none;}.p{background:#2e8bc0;color:#fff;}.s{background:#eee;color:#333;}@media print{.topbar{display:none!important;}}</style>
  <div class="topbar"><button class="btn p" onclick="window.print()">?? Print / Save PDF</button><button class="btn s" onclick="document.getElementById('printOverlay').remove()">? Close</button></div>
  <div style="padding:36px;max-width:960px;margin:0 auto;">
    <h1>Maritime CO2 Implied Carbon Tax Report</h1>
    <div class="sub">Generated: ${now} · IMO MEPC.308(73) + EU ETS</div>
    <span class="badge">MARPOL Annex VI</span><span class="badge">IMO MEPC.308(73)</span><span class="badge">EU ETS MRV</span><span class="badge">FuelEU Maritime</span>
    <div class="sec">Emission Summary</div>
    <div class="g3">
      <div class="card"><div class="lbl">CO2 Emitted</div><div class="val">${g('r-co2')} t</div></div>
      <div class="card"><div class="lbl">Fuel Type</div><div class="val" style="font-size:15px;">${g('r-fuel')}</div></div>
      <div class="card"><div class="lbl">Fuel Consumed</div><div class="val">${g('r-qty')} mt</div></div>
    </div>
    <div class="sec">Carbon Tax Results</div>
    <div class="dual">
      <div class="card"><div class="btitle">? IMO Carbon Levy</div>
        <div class="card" style="margin-bottom:6px;"><div class="lbl">Tax (USD)</div><div class="val" style="color:#1e5f8e;">${g('r-imo-usd')}</div></div>
        <div class="card"><div class="lbl">Tax (INR)</div><div class="val" style="font-size:15px;">${g('r-imo-inr')}</div></div>
        <div class="formula">${document.getElementById('r-imo-formula')?.innerHTML||''}</div>
      </div>
      <div class="card eu-card"><div class="btitle eu-btitle">???? EU ETS Carbon Tax</div>
        <div class="card eu-card" style="margin-bottom:6px;"><div class="lbl">Tax (EUR)</div><div class="val" style="color:#c87f00;">${g('r-eu-eur')}</div></div>
        <div class="card eu-card"><div class="lbl">Tax (INR)</div><div class="val" style="font-size:15px;">${g('r-eu-inr')}</div></div>
        <div class="formula eu-formula">${document.getElementById('r-eu-formula')?.innerHTML||''}</div>
      </div>
    </div>
    <div class="sec">Charts</div>
    <img class="pimg" src="${imgs['emissionChart']||''}" alt="Emission">
    <img class="pimg" src="${imgs['penaltyChart']||''}" alt="Penalty">
    <div class="sec">IMO Fuel Reference</div>
    <table><thead><tr><th>Code</th><th>Name</th><th>CF</th><th>LCV</th><th>Carbon Content</th></tr></thead><tbody>
      <tr><td><b>LFO</b></td><td>Light Fuel Oil</td><td><span class="cf">3.151</span></td><td>41,200 kJ/kg</td><td>0.8594</td></tr>
      <tr><td><b>LSMGO</b></td><td>Low Sulfur Marine Gas Oil</td><td><span class="cf">3.206</span></td><td>42,700 kJ/kg</td><td>0.8744</td></tr>
      <tr><td><b>HFO</b></td><td>Heavy Fuel Oil</td><td><span class="cf">3.114</span></td><td>40,200 kJ/kg</td><td>0.8493</td></tr>
      <tr><td><b>DO</b></td><td>Diesel Oil</td><td><span class="cf">3.206</span></td><td>42,700 kJ/kg</td><td>0.8744</td></tr>
      <tr><td><b>MDO</b></td><td>Marine Diesel Oil</td><td><span class="cf">3.206</span></td><td>42,700 kJ/kg</td><td>0.8744</td></tr>
    </tbody></table>
    <div class="footer"><span>Maritime CO2 Implied Carbon Tax Calculator</span><span>EU ETS €70.39/t · Mar 4, 2026</span></div>
  </div>`;
  document.body.appendChild(ov);
}

// -- INIT --
document.addEventListener('DOMContentLoaded', () => {
  // Build charts first
  buildCharts();
  updateCompareBars();
  updateCF();

  // Fetch live rates
  fetchRate();

  // All event listeners
  document.getElementById('vesselType').addEventListener('change', onVesselType);
  document.getElementById('fuelType').addEventListener('change', updateCF);
  document.getElementById('fuelQty').addEventListener('input', function(){
    document.getElementById('fuelSlider').value=Math.min(this.value,5000);
    updateCompareBars(); updateEmChart();
  });
  document.getElementById('fuelSlider').addEventListener('input', function(){
    document.getElementById('fuelQty').value=this.value;
    updateCompareBars(); updateEmChart();
  });

  // IMO tier clicks
  document.getElementById('imo-t1').addEventListener('click',()=>onIMOTier(100,'Tier 1 — $100/t','imo-t1'));
  document.getElementById('imo-t2').addEventListener('click',()=>onIMOTier(380,'Tier 2 — $380/t','imo-t2'));
  document.getElementById('imo-early').addEventListener('click',()=>onIMOTier(18.75,'Early Proposal — $18.75/t','imo-early'));
  document.getElementById('imoUSD').addEventListener('input', syncIMOtoINR);
  document.getElementById('imoINR').addEventListener('input', syncINRtoIMO);

  // EU ETS tier clicks
  document.getElementById('eu-spot').addEventListener('click',()=>onEUTier(70.39,'EUA Spot — €70.39/t','eu-spot'));
  document.getElementById('eu-forecast').addEventListener('click',()=>onEUTier(80,'EUA Forecast — €80/t','eu-forecast'));
  document.getElementById('eu-nc').addEventListener('click',()=>onEUTier(2400,'FuelEU Non-Compliance — €2,400/t','eu-nc'));
  document.getElementById('euEUR').addEventListener('input', syncFromEUR);
  document.getElementById('euUSD').addEventListener('input', syncFromEU_USD);
  document.getElementById('euINR').addEventListener('input', syncFromEU_INR);

  // Tab switches
  document.getElementById('tab-imo').addEventListener('click',()=>switchTab('imo'));
  document.getElementById('tab-eu').addEventListener('click',()=>switchTab('eu'));

  // Buttons
  document.getElementById('calcBtn').addEventListener('click', calculate);
  document.getElementById('resetBtn').addEventListener('click', resetCalc);
  document.getElementById('resetBtn2').addEventListener('click', resetCalc);
  document.getElementById('printBtn').addEventListener('click', printReport);
  document.getElementById('voyageBtn').addEventListener('click', voyageEstimate);
  document.getElementById('refreshBtn').addEventListener('click', fetchRate);

  // NOx
  document.getElementById('vesselEngineType').addEventListener('change', updateVesselPreset);
  document.getElementById('vesselPreset').addEventListener('change', applyVesselPreset);
  document.getElementById('vesselYear').addEventListener('input', updateTierFromAge);
  document.getElementById('plotBtn').addEventListener('click', plotVessel);
  document.getElementById('clearNoxBtn').addEventListener('click', clearVessel);
});
</script>

@endsection