/* ===== Neon Scientific Theme ===== */
:root{
  --bg:#0a0a0a;
  --panel:#0f141a;
  --panel-grad:linear-gradient(180deg,#101820F2,#0e141bf0);
  --ink:#e6edf3;
  --mut:#9fb0c3;
  --grid:#ffffff12;
  --line:#ffffff1a;
  --line-2:#ffffff10;
  --cyan:#00eaff;
  --mag:#ff00e0;
  --grad:linear-gradient(90deg,var(--cyan),var(--mag));
  --chip-select:#ffe28a;           /* light yellow for selected chips */
}
/* ==== Update Plot button: high-contrast for both themes ==== */
#replotXY{
  background: linear-gradient(90deg, #5ad0ff, #ffd166);
  border-color: rgba(0,0,0,0.2);
  color:#03131b;
  font-weight:600;
}

/* Slightly tweak border/text for dark vs light */
html.dark #replotXY{
  border-color: rgba(234,244,255,0.65);
  color:#07131f;
}
html.light #replotXY{
  border-color: rgba(3,19,27,0.4);
  color:#03131b;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(900px 600px at 80% 15%, rgba(0,234,255,.08), transparent 60%),
    radial-gradient(1000px 700px at 10% 85%, rgba(255,0,224,.05), transparent 60%),
    var(--bg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.container{max-width:1280px; margin:40px auto; padding:0 18px}
.row{display:grid; gap:18px}
.row-top{grid-template-columns:1fr 1fr}
.two{grid-template-columns:1fr 1fr}

/* Cards */
.card{
  background:var(--panel-grad);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px 18px 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  position:relative;
  overflow:hidden;
}
.card::after{
  content:""; position:absolute; inset:-1px; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(220px 80px at -10% -10%, rgba(0,234,255,.19), transparent 40%),
    radial-gradient(240px 90px at 110% 120%, rgba(255,0,224,.12), transparent 42%);
  mix-blend-mode:screen;
}
h1{margin:0 0 12px; font-weight:800; letter-spacing:.3px}
h2{margin:0 0 12px; font-weight:800; letter-spacing:.3px}

/* Fields */
.grid.two{display:grid; gap:12px}
.field{display:flex; flex-direction:column; gap:6px}
.field>span{color:var(--mut); font-size:12px}
input[type="number"], input[type="text"]{
  width:100%; padding:10px 12px; border-radius:12px;
  border:1px solid var(--line); outline:none; color:var(--ink);
  background:#0d1220;
  transition: box-shadow .25s, border-color .25s;
}
input[type="number"]:focus, input[type="text"]:focus{
  border-color: rgba(0,234,255,.55);
  box-shadow: 0 0 0 2px rgba(0,234,255,.18), 0 0 22px rgba(255,0,224,.06) inset;
}

/* KV */
.kv{
  background:#0e1623; border:1px solid var(--line);
  border-radius:12px; padding:10px 12px;
}
.kv>span{display:block; color:var(--mut); font-size:12px; margin-bottom:6px}
.kv strong{display:block; font-weight:800; font-size:18px; text-shadow:0 0 14px rgba(0,234,255,.15)}
.outputs{display:grid; gap:12px; grid-template-columns:1fr 1fr}
.recalc-flash{box-shadow:0 0 36px rgba(0,234,255,.22); transition:box-shadow .6s ease-out}

/* Chips */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  margin-right:8px; user-select:none;
}
.chip input{appearance:none; width:12px; height:12px; border-radius:50%; border:2px solid #7fd7ff}
.chip input:checked{background:var(--grad); border-color:transparent}
.chip span{font-weight:700; font-size:12px; color:#d9e9fb}
/* NEW: when selected, make label light yellow (not dark) */
.chip input:checked + span{ color: var(--chip-select); text-shadow:0 0 8px rgba(255,226,138,.25) }

/* Buttons */
.btn, .ghost{
  border:1px solid var(--line); color:#daecff; background:rgba(255,255,255,.02);
  padding:.5rem .75rem; border-radius:12px; cursor:pointer;
  transition:border-color .25s, box-shadow .25s, transform .12s;
}
.btn:hover, .ghost:hover{border-color:rgba(0,234,255,.5); box-shadow:0 0 18px rgba(0,234,255,.12)}
.btn:active, .ghost:active{transform:translateY(1px)}
.btn.small{padding:.35rem .55rem}
.right{display:flex; justify-content:flex-end}

/* IV block & table styling are same as before */
table{width:100%; border-collapse:collapse}
th, td{padding:10px 8px; border-bottom:1px dashed var(--line-2); text-align:left}
th{color:#d9e3ee; font-weight:700}
#legsBody select, #legsBody input{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background:#0d1220; color:var(--ink);
}

#legsPanel .btn{
  background: linear-gradient(90deg, rgba(0,234,255,.18), rgba(255,0,224,.18));
  color:#03131b;
}

/* Plot wrapper + canvas */
.canvas-wrap{
  position: relative;
  isolation: isolate;
  min-height: 560px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  overflow: visible;
}
.canvas-wrap::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(400px 200px at 15% 15%, rgba(0,234,255,.08), transparent 45%),
    radial-gradient(500px 220px at 85% 85%, rgba(255,0,224,.06), transparent 45%);
  mix-blend-mode:screen;
}
#xyChart{
  position: relative; z-index:1;
  display:block !important;
  width:100% !important;
  height:560px !important;
  opacity:1 !important;
}

/* X controls row */
.x-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:12px; }
.axis-title{ font:800 12px Inter,system-ui,sans-serif; color:#cfe4ff; opacity:.9 }

/* k slider */
#kSlider{
  -webkit-appearance:none; appearance:none;
  width:220px; height:6px; border-radius:999px; outline:none;
  background: linear-gradient(90deg, rgba(0,234,255,.35), rgba(255,0,224,.35));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
#kSlider::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background: linear-gradient(90deg,var(--cyan),var(--mag));
  box-shadow: 0 0 12px rgba(0,234,255,.35);
  border:0; margin-top:-6px;
}
#kSlider::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background: linear-gradient(90deg,var(--cyan),var(--mag));
  box-shadow: 0 0 12px rgba(0,234,255,.35);
  border:0;
}
#kVal{ color:#cfefff; font-weight:800 }

/* Background particles canvas */
#bgParticles{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: transparent;
}
.container, .card, .plot-wrap, .canvas-wrap{ position: relative; z-index: 1; }
body::after{
  content:"";
  position: fixed; inset:0; pointer-events:none; z-index: 0;
  background:
    radial-gradient(900px 600px at 80% 15%, rgba(0,234,255,.05), transparent 60%),
    radial-gradient(1000px 700px at 10% 85%, rgba(255,0,224,.04), transparent 60%);
  mix-blend-mode: screen;
}
#Sslider{
  -webkit-appearance:none; appearance:none;
  width:260px; height:6px; border-radius:999px; outline:none;
  background: linear-gradient(90deg, rgba(0,234,255,.35), rgba(255,0,224,.35));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
#Sslider::-webkit-slider-thumb,
#Sslider::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background: linear-gradient(90deg,var(--cyan),var(--mag));
  box-shadow: 0 0 12px rgba(0,234,255,.35);
  border:0;
}





/* ===== Glassy Blue Theme Overrides ===== */
:root{
  --bg: #06111b;                         /* deep blue-black */
  --panel: rgba(8, 20, 35, 0.55);
  --panel-grad: linear-gradient(180deg, rgba(9,24,40,0.65), rgba(6,18,32,0.45));
  --ink:#eaf4ff;
  --mut:#a9c1d8;
  --line: rgba(255,255,255,0.14);
  --line-2: rgba(255,255,255,0.09);
  --cyan:#53c8ff;                        /* colder blue */
  --mag:#2fb9ff;                          /* shift to blue-cyan for harmony */
  --grad: linear-gradient(90deg, #5ad0ff, #2990ff);
}

/* Frosted cards (keep your existing .card but add glass) */
.card{
  background: var(--panel-grad);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border:1px solid rgba(120,185,255,0.18);
}

/* Tweak canvas container to feel like etched glass */
.canvas-wrap{
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  border:1px solid rgba(120,185,255,0.16);
}

/* Chips: colder-blue accent */
.chip input{ border-color:#7fd7ff }
.chip input:checked{ background: var(--grad); }
.chip input:checked + span{
  color:#fff3c2; text-shadow: 0 0 10px rgba(255,243,194,.25);
}

/* Sliders keep your gradient rail but shift hue slightly */
#kSlider, #Sslider{
  background: linear-gradient(90deg, rgba(90,208,255,.38), rgba(41,144,255,.38));
}
#kSlider::-webkit-slider-thumb, #Sslider::-webkit-slider-thumb,
#kSlider::-moz-range-thumb, #Sslider::-moz-range-thumb{
  background: linear-gradient(90deg,#5ad0ff,#2990ff);
  box-shadow: 0 0 14px rgba(90,208,255,.36);
}

/* ===== HERO ===== */
.hero{
  position: relative;
  height: clamp(420px, 62vh, 720px);
  border-bottom: 1px solid rgba(120,185,255,0.18);
  overflow: clip;
  isolation: isolate;                    /* keep blending in this stacking context */
}
.hero-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.2) contrast(1.05) brightness(.82);
  z-index: 0;
}
.hero-overlay{
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 65% 40%, rgba(73,167,255,.30), transparent 60%),
    radial-gradient(50% 50% at 20% 80%, rgba(21,56,120,.38), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.50));
  mix-blend-mode: screen;
  z-index: 1;
}
/* Optional gridlines for that quant look */
.hero::after{
  content:"";
  position: absolute; inset: 0; z-index: 1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px;
  opacity: .25;
  mask-image: radial-gradient(70% 60% at 60% 40%, black 40%, transparent 80%);
}

/* Hero text block: frosted plaque */
.hero-content{
  position: relative; z-index: 2;
  max-width: 920px;
  margin: clamp(48px, 9vh, 96px) auto 0;
  padding: 18px 22px;
  border-radius: 18px;
  background: rgba(10,25,43,0.38);
  border: 1px solid rgba(120,185,255,0.22);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.hero-title{
  margin:0 0 6px; font: 800 42px/1.05 Inter, system-ui, sans-serif; letter-spacing:.2px;
  color: #eaf4ff; text-shadow: 0 0 22px rgba(90,208,255,.25);
}
.hero-sub{
  margin:0; color:#b7d0e7; font-weight:600;
}
.hero-cta{
  margin-top:12px;
  background: linear-gradient(90deg, #5ad0ff, #2990ff);
  color:#03121f; border-color: transparent;
}

/* Keep your particles behind both hero and cards */
#bgParticles{ z-index: -1; }  /* move further back than the hero video */
.container, .card, .plot-wrap, .canvas-wrap{ position: relative; z-index: 3; }











/* Top bar with logo & theme toggle */
.topbar{
  position: sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:12px;
  padding:10px 18px; margin-bottom:10px;
  background: linear-gradient(180deg, rgba(9,24,40,0.75), rgba(6,18,32,0.35));
  border-bottom:1px solid rgba(120,185,255,0.18);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.logo{ height:36px; width:auto; display:block }
.spacer{ flex:1 }
/* ===== Light mode overrides (activated via <html class="light">) ===== */
:root.light{
  --bg:#f7fbff;
  --panel-grad:linear-gradient(180deg, #ffffff, #f3f7fb);
  --ink:#0c1b2a;
  --mut:#385974;
  --line:rgba(0,0,0,.12);
  --line-2:rgba(0,0,0,.08);
  --cyan:#167dff;
  --mag:#00a3ff;
  --grad: linear-gradient(90deg, #2f8dff, #00a3ff);
}
:root.light body{
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 80% 15%, rgba(0,163,255,.07), transparent 60%),
    radial-gradient(1000px 700px at 10% 85%, rgba(22,125,255,.05), transparent 60%),
    var(--bg);
}
:root.light .card{
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}
:root.light input[type="number"], :root.light input[type="text"],
:root.light #legsBody select, :root.light #legsBody input{
  background:#f1f6ff;
  color:#0c1b2a;
}
:root.light .kv{ background:#eaf3ff }
:root.light .chip span{ color:#0c1b2a }
:root.light .axis-title{ color:#123; opacity:.7 }
/* Hide cells cleanly when a leg type doesn't use them */
.hidden-cell { display: none; }
input[disabled], select[disabled] { opacity: .5; pointer-events: none; }
/* === Stock leg helpers (OptionCreator-like mixed stock+options) === */
.hidden-cell {
  display: none;
}
input[disabled],
select[disabled] {
  opacity: 0.5;
  pointer-events: none;
}
/* --- Fix for legs table: avoid full-width inputs that break layout --- */
#legsPanel table {
  width: 100%;
  table-layout: fixed;            /* important: keep column widths stable */
  border-collapse: collapse;
}

/* give predictable column widths; these are suggestions you can tweak */
#legsPanel colgroup col:nth-child(1) { width: 8%; }   /* Buy/Sell */
#legsPanel colgroup col:nth-child(2) { width: 8%; }   /* Qty */
#legsPanel colgroup col:nth-child(3) { width: 12%; }  /* Type */
#legsPanel colgroup col:nth-child(4) { width: 16%; }  /* Strike */
#legsPanel colgroup col:nth-child(5) { width: 12%; }  /* DTE */
#legsPanel colgroup col:nth-child(6) { width: 14%; }  /* Premium */
#legsPanel colgroup col:nth-child(7) { width: 12%; }  /* Vol */
#legsPanel colgroup col:nth-child(8) { width: 8%; }   /* Remove button */

/* Inputs and selects inside the legs body: don't force 100% */
#legsBody input,
#legsBody select {
  width: auto !important;
  max-width: 110px;
  min-width: 48px;
  box-sizing: border-box;
}

/* For some special cells where you want a tighter width */
#legsBody input[data-k="qty"] { max-width: 74px; }
#legsBody input[data-k="dte"] { max-width: 90px; }
#legsBody input[data-k="prem"]{ max-width: 110px; }
#legsBody input[data-k="K"]   { max-width: 100px; }
/* =========================
   Mobile Responsiveness
   ========================= */

@media (max-width: 900px) {
  body{
    font-size: 14px;
  }

  .container{
    max-width: 100%;
    margin: 16px auto 32px;
    padding: 0 12px;
  }

  /* Top two cards: stack instead of side-by-side */
  .row-top{
    grid-template-columns: 1fr;
  }

  /* Calculated values: 1 column on small screens */
  .outputs{
    grid-template-columns: 1fr;
  }

  /* Strategy legs: allow horizontal scroll instead of compressing */
  #legsPanel{
    overflow-x: auto;
  }
  #legsPanel table{
    min-width: 640px;
  }

  /* Plot layout – controls go under each other */
  .x-controls{
    flex-direction: column;
    align-items: flex-start;
  }
  .x-controls .field.compact{
    width: 100%;
  }

  /* Sliders should use full width on mobile */
  #Sslider,
  #kSlider{
    width: 100%;
    max-width: 100%;
  }

  /* Chips wrap more nicely */
  .chip{
    margin-bottom: 6px;
  }
}

/* Extra tightening for very small phones */
@media (max-width: 520px){
  h1{
    font-size: 22px;
  }
  h2{
    font-size: 18px;
  }

  .card{
    padding: 14px 14px 10px;
  }

  th, td{
    padding: 8px 6px;
  }

  .field > span{
    font-size: 11px;
  }
}