:root{
    --bg: #F4F6F9;
    --bg-grid: #EEF1F6;
    --card: #FFFFFF;
    --card-hi: #F1F4F9;
    --border: rgba(18,24,42,0.09);
    --border-strong: rgba(18,24,42,0.18);
    --ink: #05070C;
    --ink-dim: #1D2436;
    --ink-faint: #3D4760;

    --petrol: #1B3A63;
    --diesel: #92222E;
    --cng: #B8860B;
    --lpg: #6A3FA0;
    --electricity: #1478AA;
    --electricity-soft: rgba(20,120,170,0.14);

    --amber-glow: rgba(184,134,11,0.18);
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(ellipse 900px 500px at 12% -10%, rgba(20,120,170,0.07), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 0%, rgba(184,134,11,0.06), transparent 55%),
      var(--bg);
    color:var(--ink);
    font-family:Arial, Helvetica, sans-serif;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }

  .wrap{max-width:1180px;margin:0 auto;padding:0 24px 80px;}

  /* ---------- Header / Hero ---------- */
  header.hero{
    padding:40px 0 24px;
    border-bottom:1px solid var(--border);
    margin-bottom:20px;
    position:relative;
  }
  .eyebrow{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--electricity);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .eyebrow .dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--electricity);
    box-shadow:0 0 0 0 rgba(20,120,170,0.6);
    animation:pulse 2.2s ease-out infinite;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(20,120,170,0.55);}
    70%{box-shadow:0 0 0 9px rgba(20,120,170,0);}
    100%{box-shadow:0 0 0 0 rgba(20,120,170,0);}
  }
  h1.title{
    font-family:Arial, Helvetica, sans-serif;
    font-weight:700;
    font-size:clamp(34px, 5vw, 50px);
    line-height:1.15;
    letter-spacing:-0.01em;
    margin:0 0 14px;
  }
  h1.title .hl{
    color:var(--electricity);
    font-style:italic;
  }
  .hero-sub{
    font-size:16.5px;
    line-height:1.6;
    color:var(--ink-dim);
    max-width:none;
    width:100%;
    text-align:justify;
    margin:0;
  }

  .kpi-row{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    overflow:hidden;
  }
  .chart-kpi-layout{
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .chart-kpi-layout .chart-area{
    flex:1 1 auto;
    min-width:0;
  }
  .kpi-col{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    overflow:hidden;
  }
  .kpi-col .kpi{justify-content:center; min-height:0;}
  .pj-explainer{
    background:var(--card-hi);
    border-left:3px solid var(--electricity);
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    padding:10px 14px;
    font-size:13px;
    color:var(--ink-dim);
    line-height:1.5;
    margin:0 0 14px;
  }
  .pj-explainer strong{color:var(--ink);}
  .kpi{
    background:var(--card);
    padding:16px 20px;
    display:flex;
    flex-direction:column;
    gap:5px;
  }
  .kpi .num{
    font-family:Arial, Helvetica, sans-serif;
    font-weight:700;
    font-size:30px;
    color:var(--ink);
  }
  .kpi.accent .num{color:var(--electricity);}
  .kpi .lbl{
    font-size:14px;
    color:var(--ink-dim);
    line-height:1.4;
  }

  .spark-wrap{
    margin-top:28px;
    display:flex;
    align-items:center;
    gap:18px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:16px 22px;
  }
  .spark-label{
    font-size:12.5px;
    color:var(--ink-faint);
    max-width:22ch;
    line-height:1.45;
  }
  .spark-label b{color:var(--ink-dim);font-weight:600;}
  .spark-svg{flex:1;min-width:0;height:52px;}

  /* ---------- Section / Panel shell ---------- */
  section.panel{
    margin-bottom:28px;
  }
  .panel-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:14px;
  }
  .panel-head-stacked{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:0 24px;
  }
  .panel-head-stacked .controls{
    justify-content:flex-start;
  }
  .panel-num{
    font-family:Arial, Helvetica, sans-serif;
    font-size:13.5px;
    letter-spacing:0.1em;
    color:var(--ink-dim);
    margin-bottom:5px;
    display:block;
  }
  h2.panel-title{
    font-family:Arial, Helvetica, sans-serif;
    font-size:27px;
    font-weight:600;
    margin:0 0 6px;
  }
  .panel-desc{
    font-size:15.5px;
    color:var(--ink-dim);
    max-width:60ch;
    line-height:1.5;
    margin:0;
  }
  .panel-desc-justify{
    max-width:none;
    width:100%;
    text-align:justify;
  }

  .controls{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }

  select.dd{
    appearance:none;
    -webkit-appearance:none;
    background:var(--electricity-soft) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="7"><path d="M0 0L5 6L10 0" fill="none" stroke="%231478AA" stroke-width="1.6"/></svg>') no-repeat right 14px center;
    border:2px solid var(--electricity);
    color:var(--ink);
    font-family:Arial, Helvetica, sans-serif;
    font-weight:700;
    font-size:15.5px;
    padding:10px 36px 10px 16px;
    border-radius:999px;
    cursor:pointer;
    min-width:190px;
  }
  select.dd:hover{border-color:var(--electricity); background-color:#DBF0FA;}
  select.dd:focus{outline:2px solid var(--electricity); outline-offset:1px;}

  .seg-toggle{
    display:flex;
    background:var(--card-hi);
    border:2px solid var(--border-strong);
    border-radius:999px;
    padding:4px;
    font-size:15px;
  }
  .seg-toggle button{
    background:none;
    border:none;
    color:var(--ink-dim);
    font-family:Arial, Helvetica, sans-serif;
    font-weight:700;
    padding:10px 22px;
    border-radius:999px;
    cursor:pointer;
    transition:background .15s ease, color .15s ease, transform .1s ease;
  }
  .seg-toggle button:hover:not(.active){
    background:rgba(20,120,170,0.1);
    color:var(--ink);
  }
  .seg-toggle button:active{
    transform:scale(0.97);
  }
  .seg-toggle button.active{
    background:var(--electricity);
    color:#FFFFFF;
    box-shadow:0 3px 10px rgba(20,120,170,0.4);
  }

  .card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:24px 24px 18px;
  }

  /* ---------- Chart 1 ---------- */
  .legend{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:6px;
  }
  .legend-chip{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--card-hi);
    border:1px solid var(--border-strong);
    padding:7px 14px 7px 10px;
    border-radius:999px;
    cursor:pointer;
    font-size:14.5px;
    font-weight:500;
    color:var(--ink-dim);
    user-select:none;
    transition:opacity .15s ease, border-color .15s ease;
  }
  .legend-chip .sw{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
  .legend-chip.off{opacity:0.35;}
  .legend-chip.off .sw{background:transparent !important; border:1.5px solid var(--ink-faint);}

  .chart-area{position:relative;}

  .compare-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  @media (max-width: 780px){
    .compare-grid{grid-template-columns:1fr;}
  }
  .compare-cell{
    border:1px solid var(--border-strong);
    border-radius:var(--radius-md);
    padding:12px;
    background:var(--card-hi);
  }
  select.dd-sm{
    font-size:13px;
    padding:7px 30px 7px 12px;
    min-width:0;
    width:100%;
    margin-bottom:8px;
  }
  .foot-note-sm{
    font-size:11.5px;
    color:var(--ink-dim);
    margin-top:8px;
    line-height:1.45;
  }
  .axis-label-sm{font-family:Arial, Helvetica, sans-serif; font-size:9.5px; fill:var(--ink-dim); font-weight:400;}
  .tooltip{
    position:absolute;
    pointer-events:none;
    background:#FFFFFF;
    border:1px solid var(--border-strong);
    border-radius:var(--radius-sm);
    padding:10px 13px;
    font-size:14px;
    line-height:1.6;
    box-shadow:0 12px 28px rgba(18,24,42,0.16);
    opacity:0;
    transition:opacity .1s ease;
    z-index:10;
    white-space:nowrap;
  }
  .tooltip-fixed{position:fixed; z-index:100;}
  .tooltip .t-year{
    font-family:Arial, Helvetica, sans-serif;
    color:var(--ink-dim);
    font-size:12.5px;
    margin-bottom:4px;
    letter-spacing:.04em;
  }
  .tooltip .t-row{display:flex; align-items:center; gap:7px; justify-content:space-between; gap:16px;}
  .tooltip .t-row .t-name{display:flex;align-items:center;gap:6px;color:var(--ink-dim);}
  .tooltip .t-dot{width:7px;height:7px;border-radius:2px;}
  .tooltip .t-val{font-family:Arial, Helvetica, sans-serif; color:var(--ink);}

  .axis-label{font-family:Arial, Helvetica, sans-serif; font-size:19px; fill:#06090F; font-weight:600;}
  .gridline{stroke:var(--border); stroke-width:1;}

  .foot-note{
    font-size:13.5px;
    color:var(--ink-dim);
    margin-top:12px;
    line-height:1.5;
  }

  /* ---------- Panel 2 split ---------- */
  .split{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:20px;
  }
  @media (max-width: 860px){
    .split{grid-template-columns:1fr;}
  }
  .card h3.sub{
    font-family:Arial, Helvetica, sans-serif;
    font-size:17.5px;
    font-weight:600;
    margin:0 0 4px;
  }
  .card .sub-desc{
    font-size:14px;
    color:var(--ink-dim);
    margin:0 0 16px;
    line-height:1.5;
  }

  .rank-list{display:flex; flex-direction:column; gap:14px;}
  .rank-item{display:flex; align-items:center; gap:14px;}
  .rank-item.all-india{
    padding-bottom:14px;
    margin-bottom:2px;
    border-bottom:1.5px dashed var(--border-strong);
  }
  .rank-item.all-india .rank-idx{color:var(--electricity); font-weight:700;}
  .rank-item.all-india .rank-name{font-weight:700;}
  .rank-idx{
    font-family:Arial, Helvetica, sans-serif;
    color:var(--ink-dim);
    font-size:13px;
    width:18px;
    flex-shrink:0;
  }
  .rank-body{flex:1; min-width:0;}
  .rank-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; gap:10px;}
  .rank-name{font-size:16px; font-weight:500; color:var(--ink);}
  .rank-val{font-family:Arial, Helvetica, sans-serif; font-size:15px; color:var(--electricity); flex-shrink:0;}
  .rank-bar-bg{height:8px; border-radius:5px; background:var(--card-hi); overflow:hidden; border:1px solid var(--border);}
  .rank-bar-fill{height:100%; border-radius:5px; background:linear-gradient(90deg, rgba(20,120,170,0.55), var(--electricity)); width:0%; transition:width .5s cubic-bezier(.22,.8,.3,1);}
  .rank-item.all-india .rank-bar-fill{background:linear-gradient(90deg, rgba(6,9,15,0.35), var(--ink-dim));}
  .rank-sub{font-family:Arial, Helvetica, sans-serif; font-size:12.5px; color:var(--ink-dim); margin-top:5px;}

  .stackbar-legend{display:flex; flex-wrap:wrap; gap:8px 14px; margin-bottom:14px;}
  .sbl-item{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-dim);}
  .sbl-sw{width:9px;height:9px;border-radius:2px;flex-shrink:0;}

  .stackbar-list{display:flex; flex-direction:column; gap:14px;}
  .stackbar-row{display:flex; flex-direction:column; gap:6px;}
  .stackbar-row.all-india{
    padding-bottom:14px;
    margin-bottom:2px;
    border-bottom:1.5px dashed var(--border-strong);
  }
  .stackbar-row.all-india .stackbar-name{font-weight:700;}
  .stackbar-top{display:flex; justify-content:space-between; align-items:baseline;}
  .stackbar-name{font-size:15px; font-weight:600; color:var(--ink);}
  .stackbar-total{font-family:Arial, Helvetica, sans-serif; font-size:12.5px; color:var(--ink-dim);}
  .stackbar-track{
    display:flex;
    width:100%;
    height:22px;
    border-radius:5px;
    overflow:hidden;
    border:1px solid var(--border-strong);
    background:var(--card-hi);
  }
  .stackbar-seg{height:100%; transition:width .5s cubic-bezier(.22,.8,.3,1); cursor:pointer;}
  .stackbar-empty{
    font-size:12px; color:var(--ink-faint); font-style:italic;
  }

  footer{
    margin-top:32px;
    padding-top:18px;
    border-top:1px solid var(--border);
    font-size:13.5px;
    color:var(--ink-dim);
    line-height:1.55;
  }

  .method-note{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid var(--border);
    font-size:13px;
    color:var(--ink-dim);
    line-height:1.6;
  }
  .method-note .mn-title{
    font-size:13.5px;
    font-weight:700;
    color:var(--ink);
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:.04em;
  }
  .method-note ol{margin:0 0 12px; padding-left:18px;}
  .method-note li{margin-bottom:5px;}
  .method-note .mn-source{color:var(--ink);}

  @media (max-width: 640px){
    .kpi-row{grid-template-columns:repeat(2,1fr);}
    .panel-head{align-items:flex-start;}
    .card{padding:20px 16px 16px;}
    .kpi-col{grid-template-columns:repeat(2, 1fr);}
  }