/* ------------------------------------------------------------------
   Calculators: hub page cards, calculator layout, linked slider/input
   fields, result panels, SVG charts and the home page teaser section.
   Colours follow the site brand (#f70e88 accent, #2d343e ink).
   ------------------------------------------------------------------ */

:root{
  --calc-accent:#f70e88;
  --calc-accent-soft:rgba(247,14,136,.10);
  --calc-ink:#2d343e;
  --calc-muted:#6a747b;
  --calc-line:rgba(15,23,42,.10);
  --calc-surface:#fff;
  --calc-subtle:#f6f9fc;
  --calc-gain:#0f9d6b;
  --calc-loss:#d93448;
  --calc-invested:#c9d2dc;
  --calc-radius:16px;
}

/* ---------- page shell ---------- */
.calc-hero{ padding:2.5rem 0 1.5rem; }
.calc-hero h1{ margin-bottom:.5rem; }
.calc-hero .lead{ color:var(--calc-muted); font-size:1.05rem; max-width:46rem; }
.calc-breadcrumb{ font-size:.85rem; margin-bottom:1rem; color:var(--calc-muted); }
.calc-breadcrumb a{ color:var(--calc-muted); }
.calc-breadcrumb a:hover{ color:var(--calc-accent); }

.calc-card{
  background:var(--calc-surface);
  border:1px solid var(--calc-line);
  border-radius:var(--calc-radius);
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px -14px rgba(15,23,42,.18);
  padding:1.5rem;
}
@media (min-width:768px){ .calc-card{ padding:2rem; } }

/* ---------- tabs (segmented control) ---------- */
.calc-tabs{
  display:inline-flex; flex-wrap:wrap; gap:.25rem;
  padding:.25rem; margin-bottom:1.5rem;
  background:var(--calc-subtle); border-radius:999px;
}
.calc-tab{
  border:0; background:transparent; color:var(--calc-muted);
  font-size:.9rem; font-weight:500; line-height:1;
  padding:.6rem 1rem; border-radius:999px; cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.calc-tab:hover{ color:var(--calc-ink); }
.calc-tab[aria-selected="true"]{ background:var(--calc-accent); color:#fff; }
.calc-tab:focus-visible{ outline:2px solid var(--calc-accent); outline-offset:2px; }
.calc-tabs-scroll{ display:flex; overflow-x:auto; border-radius:14px; max-width:100%; }
.calc-tabs-scroll .calc-tab{ white-space:nowrap; }

/* ---------- linked slider + number field ---------- */
.calc-field{ margin-bottom:1.75rem; }
.calc-field:last-child{ margin-bottom:0; }
.calc-field-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:.75rem;
}
.calc-field-head label{ margin:0; color:var(--calc-ink); font-weight:500; font-size:.95rem; }
.calc-input{
  display:inline-flex; align-items:center; gap:.15rem;
  min-width:0; max-width:11rem;
  padding:.4rem .7rem;
  background:var(--calc-accent-soft); border:1px solid transparent; border-radius:8px;
  color:var(--calc-accent); font-weight:600;
}
.calc-input:focus-within{ border-color:var(--calc-accent); background:#fff; }
.calc-input input{
  width:100%; min-width:0; border:0; outline:0; background:transparent;
  color:inherit; font:inherit; text-align:right;
  -moz-appearance:textfield; appearance:textfield;
}
.calc-input input::-webkit-outer-spin-button,
.calc-input input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.calc-affix{ flex:0 0 auto; font-size:.9rem; }
.calc-field-error{ display:none; color:var(--calc-loss); font-size:.8rem; margin-top:.35rem; }
.calc-field.is-invalid .calc-field-error{ display:block; }
/* form-level message, toggled with the [hidden] attribute */
.calc-form-error{ color:var(--calc-loss); font-size:.8rem; margin-bottom:0; }
.calc-form-error[hidden]{ display:none; }
.calc-field.is-invalid .calc-input{ border-color:var(--calc-loss); }

.calc-range{
  --fill:50%;
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px; cursor:pointer;
  background:linear-gradient(to right,var(--calc-accent) 0,var(--calc-accent) var(--fill),#e3e8ee var(--fill),#e3e8ee 100%);
}
.calc-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:#fff; border:5px solid var(--calc-accent);
  box-shadow:0 2px 6px rgba(15,23,42,.2);
}
.calc-range::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:5px solid var(--calc-accent);
  box-shadow:0 2px 6px rgba(15,23,42,.2);
}
.calc-range:focus-visible{ outline:2px solid var(--calc-accent); outline-offset:6px; }
.calc-range-scale{ display:flex; justify-content:space-between; margin-top:.4rem; font-size:.75rem; color:var(--calc-muted); }

/* plain labelled inputs used in grids (brokerage, options legs) */
.calc-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.25rem; }
.calc-grid .calc-plain label{ display:block; font-size:.85rem; font-weight:500; color:var(--calc-ink); margin-bottom:.35rem; }
.calc-plain input,.calc-plain select,
.calc-legs input,.calc-legs select{
  width:100%; padding:.55rem .7rem; font-size:.95rem; color:var(--calc-ink);
  border:1px solid var(--calc-line); border-radius:8px; background:#fff;
}
.calc-plain input:focus,.calc-plain select:focus,
.calc-legs input:focus,.calc-legs select:focus{ outline:0; border-color:var(--calc-accent); box-shadow:0 0 0 3px var(--calc-accent-soft); }

/* ---------- results ---------- */
.calc-result{ display:flex; flex-direction:column; gap:1.25rem; height:100%; }
.calc-donut-wrap{ display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap; }
.calc-donut{ width:180px; height:180px; flex:0 0 auto; }
.calc-legend{ list-style:none; padding:0; margin:0; font-size:.85rem; color:var(--calc-muted); }
.calc-legend li{ display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; }
.calc-swatch{ width:12px; height:12px; border-radius:3px; flex:0 0 auto; }

.calc-stats{ list-style:none; padding:0; margin:0; }
.calc-stats li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.65rem 0; border-bottom:1px dashed var(--calc-line);
  font-size:.95rem; color:var(--calc-muted);
}
.calc-stats li:last-child{ border-bottom:0; }
.calc-stats strong{ color:var(--calc-ink); font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
.calc-stats .calc-total{ padding-top:.9rem; font-size:1.05rem; color:var(--calc-ink); font-weight:600; }
.calc-stats .calc-total strong{ font-size:1.25rem; }
.calc-gain-text{ color:var(--calc-gain)!important; }
.calc-loss-text{ color:var(--calc-loss)!important; }

.calc-highlight{
  background:var(--calc-subtle); border-radius:12px; padding:1rem 1.25rem; text-align:center;
}
.calc-highlight small{ display:block; color:var(--calc-muted); margin-bottom:.15rem; }
.calc-highlight .calc-big{ font-size:1.75rem; font-weight:700; color:var(--calc-ink); font-variant-numeric:tabular-nums; line-height:1.2; }

.calc-cta{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-top:auto; }
.calc-share{
  border:1px solid var(--calc-line); background:#fff; color:var(--calc-ink);
  border-radius:8px; padding:.5rem .9rem; font-size:.85rem; cursor:pointer;
}
.calc-share:hover{ border-color:var(--calc-accent); color:var(--calc-accent); }

/* ---------- tables ---------- */
.calc-table-wrap{ overflow-x:auto; }
.calc-table{ width:100%; border-collapse:collapse; font-size:.9rem; font-variant-numeric:tabular-nums; }
.calc-table th,.calc-table td{ padding:.6rem .75rem; border-bottom:1px solid var(--calc-line); text-align:right; white-space:nowrap; }
.calc-table th:first-child,.calc-table td:first-child{ text-align:left; }
.calc-table thead th{ color:var(--calc-muted); font-weight:500; font-size:.8rem; text-transform:uppercase; letter-spacing:.02em; background:var(--calc-subtle); }
.calc-table tfoot td{ font-weight:600; color:var(--calc-ink); }
.calc-toggle{ background:none; border:0; padding:0; color:var(--calc-accent); font-weight:500; cursor:pointer; }

/* ---------- options strategy legs ---------- */
.calc-legs{ width:100%; border-collapse:separate; border-spacing:0 .5rem; }
.calc-legs th{ font-size:.75rem; font-weight:500; color:var(--calc-muted); text-transform:uppercase; padding:0 .25rem; text-align:left; }
.calc-legs td{ padding:0 .25rem; vertical-align:middle; }
.calc-legs td:last-child{ width:2.25rem; }
@media (min-width:768px){
  .calc-legs{ table-layout:fixed; }
  .calc-legs th:nth-child(1){ width:6.5rem; }
  .calc-legs th:nth-child(2){ width:5.5rem; }
  .calc-legs th:nth-child(5){ width:4rem; }
  .calc-legs th:nth-child(6){ width:2.5rem; }
  .calc-legs select{ padding-left:.55rem; padding-right:1.6rem; }
  .calc-legs input{ padding-left:.55rem; padding-right:.4rem; }
}
.calc-leg-remove{
  width:2rem; height:2rem; border-radius:8px; border:1px solid var(--calc-line); background:#fff;
  color:var(--calc-muted); cursor:pointer; line-height:1;
}
.calc-leg-remove:hover{ color:var(--calc-loss); border-color:var(--calc-loss); }
.calc-add-leg{ border:1px dashed var(--calc-accent); color:var(--calc-accent); background:#fff; border-radius:8px; padding:.5rem 1rem; font-size:.9rem; cursor:pointer; }
.calc-add-leg:disabled{ opacity:.5; cursor:not-allowed; }
/* legs stack into labelled cards on phones */
@media (max-width:767.98px){
  .calc-legs thead{ display:none; }
  .calc-legs,.calc-legs tbody,.calc-legs tr,.calc-legs td{ display:block; width:100%; }
  .calc-legs tr{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; padding:.75rem; margin-bottom:.75rem; border:1px solid var(--calc-line); border-radius:12px; }
  .calc-legs td{ padding:0; }
  .calc-legs td::before{ content:attr(data-label); display:block; font-size:.72rem; color:var(--calc-muted); text-transform:uppercase; margin-bottom:.2rem; }
  .calc-legs td:last-child{ width:auto; grid-column:1/-1; }
  .calc-legs td:last-child::before{ display:none; }
  .calc-leg-remove{ width:100%; }
}

/* ---------- payoff chart ---------- */
.calc-chart{ position:relative; width:100%; }
.calc-chart svg{ display:block; width:100%; height:auto; overflow:visible; }
.calc-chart .axis text{ font-size:12px; fill:var(--calc-muted); }
.calc-chart .grid line{ stroke:var(--calc-line); }
.calc-chart .zero{ stroke:#9aa5b1; stroke-width:1; }
.calc-chart .spot{ stroke:var(--calc-ink); stroke-dasharray:4 4; }
.calc-chart .payoff{ fill:none; stroke:var(--calc-ink); stroke-width:2; }
.calc-tip{
  position:absolute; pointer-events:none; transform:translate(-50%,-110%);
  background:var(--calc-ink); color:#fff; font-size:.78rem; line-height:1.35;
  padding:.4rem .6rem; border-radius:6px; white-space:nowrap; opacity:0; transition:opacity .12s;
}
.calc-tip.is-on{ opacity:1; }

/* ---------- notes, FAQ, disclaimer ---------- */
.calc-note{ font-size:.8rem; color:var(--calc-muted); margin:0; }
.calc-disclaimer{
  font-size:.82rem; color:var(--calc-muted);
  border-left:3px solid var(--calc-accent); background:var(--calc-subtle);
  padding:1rem 1.25rem; border-radius:0 10px 10px 0;
}
.calc-disclaimer p:last-child{ margin-bottom:0; }
.calc-formula{ background:var(--calc-subtle); border-radius:10px; padding:1rem 1.25rem; font-family:var(--bs-font-monospace); font-size:.88rem; color:var(--calc-ink); overflow-x:auto; }
.calc-faq details{ border-bottom:1px solid var(--calc-line); padding:1rem 0; }
.calc-faq summary{ cursor:pointer; font-weight:500; color:var(--calc-ink); list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.calc-faq summary::-webkit-details-marker{ display:none; }
.calc-faq summary::after{ content:"+"; color:var(--calc-accent); font-weight:600; }
.calc-faq details[open] summary::after{ content:"\2212"; }
.calc-faq details p{ margin:.75rem 0 0; }

/* ---------- hub + home page cards ---------- */
.calc-group-title{ display:flex; align-items:center; gap:.6rem; font-size:1.15rem; margin:0 0 1.25rem; }
.calc-group-title i{ color:var(--calc-accent); }
.calc-tile{
  position:relative; display:flex; flex-direction:column; height:100%;
  padding:1.5rem; background:#fff; border:1px solid var(--calc-line); border-radius:var(--calc-radius);
  color:inherit; text-decoration:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1),border-color .3s ease;
}
a.calc-tile:hover{ transform:translateY(-4px); border-color:rgba(247,14,136,.35); box-shadow:0 18px 36px -18px rgba(15,23,42,.28); color:inherit; }
a.calc-tile:focus-visible{ outline:2px solid var(--calc-accent); outline-offset:3px; }
.calc-tile-icon{
  width:48px; height:48px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--calc-accent-soft); color:var(--calc-accent); font-size:1.2rem; margin-bottom:1rem;
}
.calc-tile h3{ font-size:1.05rem; margin-bottom:.4rem; color:var(--calc-ink); }
.calc-tile p{ font-size:.9rem; color:var(--calc-muted); margin-bottom:1rem; }
.calc-tile-link{ margin-top:auto; font-size:.9rem; font-weight:600; color:var(--calc-accent); }
.calc-tile.is-soon{ background:var(--calc-subtle); }
.calc-tile.is-soon .calc-tile-icon{ background:#e9edf2; color:var(--calc-muted); }
.calc-badge{
  position:absolute; top:1rem; right:1rem;
  font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  padding:.25rem .55rem; border-radius:999px; background:#e9edf2; color:var(--calc-muted);
}
.calc-badge.is-live{ background:var(--calc-accent-soft); color:var(--calc-accent); }
.calc-view-all{ font-weight:600; color:var(--calc-accent); }
.calc-view-all:hover{ color:var(--calc-ink); }


/* The FAQ + disclaimer row uses .g-5, whose 1.5rem negative margins overhang
   the container's 0.75rem padding on phones and cause sideways scrolling.
   Halve the horizontal gutter there; vertical spacing is unchanged. */
@media (max-width: 575.98px) {
  .row.g-5:has(.calc-faq) { --bs-gutter-x: 1.5rem; }
}

/* F&O margin positions: stack each position into a labelled card on phones
   so no column (or the remove button) is hidden off-screen. */
@media (max-width:575.98px){
  .calc-positions thead{ display:none; }
  .calc-positions,.calc-positions tbody,.calc-positions tr,.calc-positions td{ display:block; width:100%; }
  .calc-positions tr{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem .75rem; padding:.75rem; margin-bottom:.75rem; border:1px solid var(--calc-line); border-radius:12px; }
  .calc-positions td{ padding:0; border:0; text-align:left; white-space:normal; }
  .calc-positions td::before{ content:attr(data-label); display:block; font-size:.72rem; color:var(--calc-muted); text-transform:uppercase; margin-bottom:.15rem; }
  .calc-positions td:first-child{ grid-column:1/-1; font-weight:500; }
  .calc-positions td:last-child{ grid-column:1/-1; }
  .calc-positions td:last-child::before{ display:none; }
  .calc-positions .calc-leg-remove{ width:100%; }
}

/* Editable option price in the F&O margin positions table */
.calc-positions input{
  width:6.5rem; padding:.35rem .5rem; font-size:.9rem; text-align:right; color:var(--calc-ink);
  border:1px solid var(--calc-line); border-radius:8px; background:#fff;
}
.calc-positions input:focus{ outline:0; border-color:var(--calc-accent); box-shadow:0 0 0 3px var(--calc-accent-soft); }
@media (max-width:575.98px){ .calc-positions input{ width:100%; text-align:left; } }


/* ---------- generated calculators (tools/build-calculators.py) ---------- */
.calc-result-body{ display:flex; flex-direction:column; gap:1.25rem; }
/* these set display, which would otherwise override the hidden attribute */
.calc-result-body[hidden],.calc-donut-wrap[hidden],.calc-note[hidden],.calc-field[hidden]{ display:none; }
.calc-plain > label{ display:block; font-weight:500; color:var(--calc-ink); margin-bottom:.5rem; }
@media (min-width:768px){
  .xirr-legs th:nth-child(1){ width:auto; }
  .xirr-legs th:nth-child(2){ width:10rem; }
  .xirr-legs th:nth-child(3){ width:9rem; }
  .xirr-legs th:nth-child(4){ width:2.75rem; }
}
.xirr-legs + .calc-add-leg{ margin-top:.25rem; }


/* ---------- hub category tabs ---------- */
.calc-hub-tabs{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:2.5rem; }
.calc-hub-tab{
  padding:.7rem 1.1rem; border-radius:10px; cursor:pointer;
  border:1px solid var(--calc-line); background:#fff;
  color:var(--calc-muted); font-size:1rem; font-weight:500; line-height:1.2;
  transition:border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.calc-hub-tab:hover{ color:var(--calc-ink); }
.calc-hub-tab[aria-selected="true"]{
  border-color:var(--calc-accent); color:var(--calc-ink); font-weight:600;
  box-shadow:0 2px 8px var(--calc-accent-soft);
}
.calc-hub-tab:focus-visible{ outline:2px solid var(--calc-accent); outline-offset:2px; }
.calc-hub-panel[hidden]{ display:none; }
@media (max-width:575.98px){ .calc-hub-tab{ flex:1 1 0; font-size:.9rem; padding:.65rem .75rem; } }


/* ---------- stock analysis page (stock-analysis.html) ---------- */
.sa-search{ display:flex; gap:.75rem; flex-wrap:wrap; }
.sa-search-box{
  flex:1 1 16rem; display:flex; align-items:center; gap:.6rem;
  padding:0 .9rem; border:1px solid var(--calc-line); border-radius:10px; background:#fff;
}
.sa-search-box:focus-within{ border-color:var(--calc-accent); box-shadow:0 0 0 3px var(--calc-accent-soft); }
.sa-search-box i{ color:var(--calc-muted); }
.sa-search-box input{ flex:1 1 auto; min-width:0; border:0; outline:0; padding:.7rem 0; font-size:1rem; color:var(--calc-ink); background:transparent; text-transform:uppercase; }
.sa-search-box input::placeholder{ text-transform:none; }
.sa-quick{ display:flex; align-items:center; gap:.75rem; margin-top:1rem; flex-wrap:wrap; }
.sa-quick > span{ font-size:.85rem; color:var(--calc-muted); }
.sa-quick .calc-tabs{ margin-bottom:0; }
.sa-widget{ padding:1rem; }
.sa-chart{ min-height:452px; }
.sa-tall{ min-height:592px; }
@media (max-width:575.98px){ .sa-search .btn{ width:100%; } .sa-widget{ padding:.35rem; } }


/* ---------- IPO list (ipo.html) ---------- */
#ipo-list.is-loading .ipo-section{ opacity:.5; }
.ipo-section{ margin-bottom:2.5rem; }
.ipo-count{ display:inline-block; min-width:1.6rem; margin-left:.4rem; padding:.1rem .5rem; border-radius:999px; background:var(--calc-accent-soft); color:var(--calc-accent); font-size:.8rem; text-align:center; vertical-align:middle; }
.ipo-count:empty{ display:none; }
.ipo-card{ padding:0; overflow:hidden; }
.ipo-card .ipo-empty{ padding:1.25rem 1.5rem; }
.ipo-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.ipo-table th{ padding:.8rem 1rem; background:var(--calc-subtle); color:var(--calc-muted); font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; text-align:left; white-space:nowrap; }
.ipo-table td{ padding:1rem; border-top:1px solid var(--calc-line); color:var(--calc-ink); vertical-align:middle; }
.ipo-name strong{ display:block; font-weight:600; }
.ipo-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.3rem; }
.ipo-tag{ padding:.1rem .5rem; border-radius:6px; background:#e8f0fe; color:#1a56db; font-size:.72rem; font-weight:600; }
.ipo-tag.is-sme{ background:#fff4e5; color:#b45309; }
.ipo-exch{ font-size:.75rem; color:var(--calc-muted); }
.ipo-sub{ display:block; font-size:.78rem; color:var(--calc-muted); }
.ipo-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; }
.ipo-doc{ font-size:.8rem; color:var(--calc-accent); white-space:nowrap; }
@media (max-width:991.98px){
  .ipo-table thead{ display:none; }
  .ipo-table,.ipo-table tbody,.ipo-table tr,.ipo-table td{ display:block; width:100%; }
  .ipo-table tr{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem 1rem; padding:1rem 1.25rem; border-top:1px solid var(--calc-line); }
  .ipo-table tr:first-child{ border-top:0; }
  .ipo-table td{ padding:0; border:0; }
  .ipo-table td:first-child,.ipo-table td:last-child{ grid-column:1/-1; }
  .ipo-table td[data-label]:not([data-label=""])::before{ content:attr(data-label); display:block; font-size:.72rem; color:var(--calc-muted); text-transform:uppercase; margin-bottom:.15rem; }
  .ipo-table td:first-child::before{ display:none !important; }
  .ipo-actions{ flex-direction:row; align-items:center; justify-content:flex-start; gap:1rem; }
}


/* ---------- Videos & Insights (blog.html) ---------- */
.vid-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.75rem; }
.vid-toolbar .calc-tabs[hidden]{ display:none; }
.vid-subscribe{ margin-left:auto; white-space:nowrap; }
.vid-card{
  display:flex; flex-direction:column; width:100%; height:100%; padding:0; text-align:left; cursor:pointer;
  border:1px solid rgba(247,14,136,.12); border-radius:18px; overflow:hidden;
  background:linear-gradient(145deg, rgba(255,255,255,.62), rgba(255,244,250,.38));
  -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%);
  transition:border-color .2s ease, transform .2s ease;
}
.vid-card:hover{ border-color:rgba(247,14,136,.3); transform:translateY(-2px); }
.vid-card:focus-visible{ outline:3px solid var(--calc-accent); outline-offset:3px; }
.vid-thumb{ position:relative; display:block; aspect-ratio:4/3; background:#1f2430; overflow:hidden; }
.vid-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.vid-card:hover .vid-thumb img{ transform:scale(1.03); }
.vid-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:3.4rem; height:3.4rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(247,14,136,.92); color:#fff; font-size:1.1rem; padding-left:.2rem;
  box-shadow:0 0 0 6px rgba(255,255,255,.35);
}
.vid-badge{ position:absolute; top:.75rem; left:.75rem; padding:.15rem .55rem; border-radius:6px; background:rgba(0,0,0,.65); color:#fff; font-size:.72rem; font-weight:600; }
.vid-body{ display:flex; flex-direction:column; gap:.3rem; padding:1rem 1.1rem 1.15rem; }
.vid-cat{ font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--calc-accent); }
.vid-title{ font-weight:600; color:var(--calc-ink); line-height:1.35; }
.vid-date{ font-size:.8rem; color:var(--calc-muted); }

.vid-dialog{ position:fixed; inset:0; z-index:10050; display:flex; align-items:center; justify-content:center; padding:1rem; background:rgba(15,18,25,.78); }
.vid-dialog[hidden]{ display:none; }
.vid-dialog-box{ width:min(960px, 100%); }
.vid-dialog-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.6rem; }
.vid-dialog-title{ margin:0; color:#fff; font-weight:600; }
.vid-close{ flex:0 0 auto; width:2.4rem; height:2.4rem; border:0; border-radius:10px; background:rgba(255,255,255,.15); color:#fff; font-size:1.1rem; cursor:pointer; }
.vid-close:hover{ background:rgba(255,255,255,.28); }
.vid-frame{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; }
.vid-frame.is-short{ width:auto; height:min(80vh, 760px); aspect-ratio:9/16; margin:0 auto; }
.vid-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
body.vid-open{ overflow:hidden; }
@media (max-width:575.98px){
  .vid-subscribe{ width:100%; margin-left:0; }
  .vid-frame.is-short{ height:min(78vh, 640px); max-width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .vid-card,.vid-thumb img{ transition:none; }
  .vid-card:hover{ transform:none; }
  .vid-card:hover .vid-thumb img{ transform:none; }
}