:root{
      --bg: #0b1020;
      --card: rgba(255,255,255,.06);
      --card2: rgba(255,255,255,.085);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.70);
      --border: rgba(255,255,255,.14);
      --shadow: 0 20px 60px rgba(0,0,0,.35);
      --accent: #7c3aed;
      --accent2: #06b6d4;
      --bad:  #ef4444;
      --ok:   #22c55e;
          --space-1: 6px;
      --space-2: 10px;
      --space-3: 16px;
      --space-4: 24px;
      --space-5: 32px;
    }
    [data-theme="light"]{
      --bg: #f7f7fb;
      --card: rgba(0,0,0,.04);
      --card2: rgba(0,0,0,.06);
      --text: rgba(0,0,0,.88);
      --muted: rgba(0,0,0,.58);
      --border: rgba(0,0,0,.12);
      --shadow: 0 20px 60px rgba(0,0,0,.12);
      --accent: #6d28d9;
      --accent2: #0891b2;
      --bad:  #dc2626;
      --ok:   #16a34a;
    }
    *{ box-sizing: border-box; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color: var(--text);
      background:
        radial-gradient(1200px 600px at 10% 0%, rgba(124,58,237,.40), transparent 60%),
        radial-gradient(900px 500px at 90% 10%, rgba(6,182,212,.35), transparent 55%),
        radial-gradient(900px 700px at 50% 100%, rgba(34,197,94,.18), transparent 55%),
        var(--bg);
      min-height: 100vh;
    }
    a{ color: inherit; }
    .container{ width: min(1100px, 92vw); margin: 0 auto; padding: 28px 0 64px; }
    .topbar{ display:flex; justify-content: space-between; align-items:center; gap: 16px; margin-bottom: 18px; }
    .brand{ display:flex; align-items:center; gap: 10px; }
    .logo{
      width: 38px; height: 38px; border-radius: 12px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow: var(--shadow);
    }
    .brand h1{ font-size: 18px; letter-spacing: .2px; margin: 0; }
    .btn{
      border: 1px solid var(--border);
      background: var(--card);
      color: var(--text);
      padding: 10px 12px;
      border-radius: 12px;
      cursor:pointer;
      transition: transform .08s ease, background .2s ease;
    }
    .btn:hover{ transform: translateY(-1px); background: var(--card2); }
    .btn.primary{
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      border-color: transparent;
      font-weight: 400;
    }
    .pill{
      display:inline-flex; align-items:center; gap: 8px;
      padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px;
      background: var(--card); font-size: 13px; color: var(--muted); white-space: nowrap;
    }
    .grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-4); align-items:start; }
    @media (max-width: 900px){ .grid{ grid-template-columns: 1fr; } }
    .stack{ display:flex; flex-direction:column; gap: var(--space-4); }
    .card{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 16px;
          transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .hero{ padding: 18px; }
    .hero h2{ margin: 0 0 8px; font-size: 34px; line-height: 1.12; letter-spacing: -0.6px; }
    .hero p{ margin: 0; color: var(--muted); line-height: 1.45; font-size: 15px; }
    .hero .row{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
    .chip{
      border: 1px solid var(--border);
      background: var(--card2);
      padding: 8px 10px;
      border-radius: 999px;
      cursor:pointer;
      font-size: 13px;
      color: var(--text);
      user-select: none;
    }
    .chip:hover{ background: var(--card); }
    .controls{ position: sticky; top: var(--space-3); padding: var(--space-4); }
    .controls h3{ margin: 0 0 10px; font-size: 14px; color: var(--muted); font-weight: 600; letter-spacing: .2px; }
    label{ display:block; font-size: 12px; color: var(--muted); margin: var(--space-3) 0 var(--space-1); }
    input[type="text"], select{
      width: 100%;
      padding: 11px 12px;
      font-size: 14px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(0,0,0,.10);
      color: var(--text);
      outline: none;
    }

    [data-theme="light"] input[type="text"], [data-theme="light"] select{ background-color: rgba(255,255,255,.80); }
    .row2{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
    @media (max-width: 480px){ .row2{ grid-template-columns: 1fr; } }
    .actions{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-3); }

    /* Actions buttons alignment */
    .actions .btn{ width: 100%; justify-content: center; font-size: 14px; }
    
    .muted{ color: var(--muted); }
    .error{ border-left: 4px solid var(--bad); background: rgba(239,68,68,.12); }
    .kpis{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
    @media (max-width: 700px){ .kpis{ grid-template-columns: 1fr; } }
    .kpi{
      padding: var(--space-3); border-radius: 14px;
      border: 1px solid var(--border);
      background: rgba(0,0,0,.10);
    }
    [data-theme="light"] .kpi{ background: rgba(255,255,255,.70); }
    .kpi .label{ font-size: 12px; color: var(--muted); }
    .kpi .value{ margin-top: 4px; font-size: 15px; font-weight: 400; letter-spacing: .2px; }

    .resultHeader{
      display:flex;
      justify-content:space-between;
      align-items: baseline;
      gap: var(--space-2);
      flex-wrap: wrap;
      margin-bottom: var(--space-3);
    }
    .resultTitle{ font-weight: 800; font-size: 16px; }
    .resultMeta{ color: var(--muted); font-size: 13px; opacity: 0.75; }
    .kpi .desc{ margin-top: var(--space-1); font-size: 12px; line-height: 1.35; color: var(--muted);  opacity: 0.75;}
    .chartwrap{ padding: var(--space-3); }
    .chartActions{ margin-top: var(--space-3); display:flex; gap: var(--space-2);  justify-content:flex-start;}
    .footer{ margin-top: var(--space-5); padding-top: var(--space-3); color: var(--muted); font-size: 12px; line-height: 1.4; text-align:center; opacity: 0.6; }

    .chartwrap img{
      display:block;
      width: 100%;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: rgba(0,0,0,.08);
    }
    .footer{ margin-top: var(--space-3); color: var(--muted); font-size: 12px; line-height: 1.4; text-align: center; }

    /* loading overlay */
    .loading{
      display:none; position: fixed; inset: 0;
      background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
      z-index: 9999; align-items: center; justify-content: center;
    }
    .loading .box{
      width: min(520px, 92vw);
      background: var(--card); border: 1px solid var(--border);
      border-radius: 18px; padding: 18px; box-shadow: var(--shadow);
      display:flex; gap: 14px; align-items:center;
    }
    .spinner{
      width: 18px; height: 18px;
      border: 2px solid rgba(255,255,255,.25);
      border-top-color: rgba(255,255,255,.85);
      border-radius: 999px;
      animation: spin .8s linear infinite;
    }
    [data-theme="light"] .spinner{
      border-color: rgba(0,0,0,.15);
      border-top-color: rgba(0,0,0,.70);
    }
    @keyframes spin{ to { transform: rotate(360deg); } }

    /* small inline status for expiry loading */
    .expiryStatus{
      margin-top: 6px;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.3;
    }
    .expiryStatus.ok{ color: var(--ok); }
    .expiryStatus.bad{ color: var(--bad); }
  
    /* Image modal for enlarged chart */
    .imgModal{
      display:none;
      position: fixed;
      z-index: 10000;
      inset: 0;
      background: rgba(0,0,0,0.85);
      backdrop-filter: blur(4px);
      align-items: center;
      justify-content: center;
    }
    .imgModalContent{
      max-width: 95%;
      max-height: 90%;
      border-radius: 16px;
      box-shadow: 0 40px 120px rgba(0,0,0,.6);
    }
    .imgModalClose{
      position: absolute;
      top: 18px;
      right: 26px;
      color: white;
      font-size: 32px;
      font-weight: bold;
      cursor: pointer;
    }

  
    .actions .btn,
    .btn.download{
      font-size: 14px;
      text-decoration: none;
    }
    .btn.download:hover, .btn.download:focus{ text-decoration: none; }

  
    /* Light theme: make dropdown arrow black for contrast */
    /* Ensure Generate chart text is always white (override light theme) */
.btn.primary,
.btn.primary:hover,
.btn.primary:focus,
[data-theme="light"] .btn.primary,
[data-theme="light"] .btn.primary:hover,
[data-theme="light"] .btn.primary:focus{
  color: #ffffff !important;
}


/* ===== Dropdown arrow (final, theme-safe) ===== */
select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  padding-right: 44px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' d='M5.5 7.5 10 12l4.5-4.5 1.4 1.4L10 14.8 4.1 8.9z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 18px 18px !important;
}

/* Light theme: black arrow for contrast */
[data-theme="light"] select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20'%3E%3Cpath fill='%23000000' d='M5.5 7.5 10 12l4.5-4.5 1.4 1.4L10 14.8 4.1 8.9z'/%3E%3C/svg%3E") !important;
}


    .site-footer{
      margin-top: 28px;
      padding: 18px 0 6px;
      text-align: center;
      font-size: 12px;
      color: var(--muted);
    }

    .card:hover{ transform: translateY(-2px); }


/* --- Button alignment fixes --- */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ensure reset button text is centered */
.actions .btn.reset {
  justify-content: center;
  text-align: center;
}

/* --- Chart download alignment --- */
.chartActions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-3);
}

.chartActions .btn {
  min-width: 200px;
}


/* --- Alignment polish: chart aligns with KPI row edges --- */
.chartwrap{
  /* remove extra inset so chart edges align with KPI cards */
  padding-left: 0;
  padding-right: 0;
  /* keep consistent vertical rhythm */
  margin-top: var(--space-4);
  padding-top: 0;
  padding-bottom: 0;
}

/* remove any accidental stray tokens from prior edits by fully redefining this rule */
.chartwrap img{
  display: block;
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.08);
}

/* Keep spacing between KPI->chart and chart->download consistent */
.chartActions{
  margin-top: var(--space-4);
  display: flex;
  justify-content: center;
}