body.official-v1 .top-timestamp {
  display: none !important;
}

html[data-theme-override="light"] {
  --bg: #f7f9f7;
  --ink: #0f1712;
  --muted: #647067;
  --line: #dce4de;
  --panel: #ffffff;
  --panel-soft: #eef4f0;
  --green-dark: #008f0a;
  --red: #df4b4b;
  --call-option-text: #16823a;
  --put-option-text: #bd5c5c;
  --body-wash-start: rgba(255, 255, 255, 0.88);
  --body-wash-end: rgba(247, 249, 247, 0.92);
  --body-glow: rgba(0, 200, 5, 0.08);
  --border-soft: rgba(15, 23, 18, 0.08);
  --panel-glass: rgba(255, 255, 255, 0.9);
  --suggest-bg: rgba(255, 255, 255, 0.98);
  --card-bg: rgba(255, 255, 255, 0.92);
  --field-bg: #ffffff;
  --button-bg: #0f1712;
  --button-text: #ffffff;
  --button-hover: #00c805;
  --hover-soft: rgba(15, 23, 18, 0.07);
  --focus-ring: rgba(0, 200, 5, 0.11);
  --scenario-bg: #fbfdfb;
  --chart-bg: #ffffff;
  --chart-wash: rgba(0, 200, 5, 0.04);
  --grid-line: #e8eee9;
  --chart-label: #718076;
  --strike-line: #a9b5ad;
  --break-even-line: #111812;
  --current-price-marker: #7b867d;
  --current-price-marker-text: #7b867d;
  --target-price-marker: var(--ink);
  --chart-area-start: rgba(0, 200, 5, 0.24);
  --chart-area-end: rgba(0, 200, 5, 0);
  --shadow: 0 18px 48px rgba(24, 38, 29, 0.12);
  color-scheme: light;
}

html[data-theme-override="dark"] {
  --bg: #080d0a;
  --ink: #eef7f0;
  --muted: #91a095;
  --line: #26332b;
  --panel: #101812;
  --panel-soft: #16231a;
  --green-dark: #00e30a;
  --red: #ff6b6b;
  --call-option-text: #5fbd6b;
  --put-option-text: #dc7979;
  --body-wash-start: rgba(8, 13, 10, 0.94);
  --body-wash-end: rgba(8, 13, 10, 0.98);
  --body-glow: rgba(0, 200, 5, 0.12);
  --border-soft: rgba(238, 247, 240, 0.1);
  --panel-glass: rgba(16, 24, 18, 0.92);
  --suggest-bg: rgba(16, 24, 18, 0.98);
  --card-bg: rgba(16, 24, 18, 0.94);
  --field-bg: #0d1510;
  --button-bg: #00c805;
  --button-text: #041006;
  --button-hover: #35df3a;
  --hover-soft: rgba(238, 247, 240, 0.08);
  --focus-ring: rgba(0, 200, 5, 0.18);
  --scenario-bg: #0d1510;
  --chart-bg: #0d1510;
  --chart-wash: rgba(0, 200, 5, 0.08);
  --grid-line: #233129;
  --chart-label: #91a095;
  --strike-line: #657368;
  --break-even-line: #eef7f0;
  --current-price-marker: #8f9d93;
  --current-price-marker-text: #8f9d93;
  --target-price-marker: var(--ink);
  --chart-area-start: rgba(0, 200, 5, 0.28);
  --chart-area-end: rgba(0, 200, 5, 0);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  color-scheme: dark;
}

html[data-theme-override="light"] .market-status.is-pre {
  color: #2f7cf6;
}

html[data-theme-override="light"] .market-status.is-after {
  color: #b76d00;
}

html[data-theme-override="light"] .page-tabs {
  border-color: var(--border-soft);
  background: var(--panel-soft);
  box-shadow: 0 10px 30px rgba(24, 38, 29, 0.08);
}

html[data-theme-override="light"] .page-tabs::before {
  background: var(--field-bg);
  box-shadow: 0 8px 18px rgba(27, 39, 31, 0.08);
}

html[data-theme-override="light"] .page-tab {
  color: var(--muted);
}

html[data-theme-override="light"] .page-tab:hover,
html[data-theme-override="light"] .page-tab.is-active {
  color: var(--ink);
}

html[data-theme-override="dark"] .market-status.is-pre {
  color: #7fb2ff;
}

html[data-theme-override="dark"] .market-status.is-after {
  color: #f0b85a;
}

html[data-theme-override="dark"] .page-tabs {
  border-color: rgba(238, 247, 240, 0.15);
  background:
    linear-gradient(180deg, rgba(16, 24, 19, 0.98), rgba(9, 14, 11, 0.98)),
    #0d1510;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 10px 28px rgba(0, 0, 0, 0.34);
}

html[data-theme-override="dark"] .page-tabs::before {
  background:
    linear-gradient(180deg, rgba(4, 10, 7, 0.98), rgba(2, 7, 5, 0.98)),
    #050a07;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 6px 16px rgba(0, 0, 0, 0.26);
}

html[data-theme-override="dark"] .page-tab {
  color: #9faaa3;
}

html[data-theme-override="dark"] .page-tab:hover {
  color: #d4ded7;
}

html[data-theme-override="dark"] .page-tab.is-active {
  color: #f4faf6;
  text-shadow: none;
}

body.official-v1 .theme-test-switch {
  position: fixed;
  top: max(28px, calc(env(safe-area-inset-top) + 16px));
  left: 50%;
  z-index: 2147483000;
  display: block;
  transform: translateX(-50%);
}

body.official-v1:has(#results.is-visible) .theme-test-switch {
  display: none;
}

body.official-v1 .theme-test-switch button {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 82%, transparent);
  font: inherit;
  font-weight: 820;
  line-height: 1;
  cursor: pointer;
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

body.official-v1 .theme-test-switch button[aria-pressed="true"] {
  background: var(--field-bg);
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

body.official-v1 .theme-test-switch button:active {
  transform: scale(0.96);
}

body.official-v1 .theme-test-switch button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}

body.official-v1 .theme-icon-toggle {
  display: grid;
  height: 42px;
  grid-template-columns: repeat(2, 42px);
  gap: 4px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--muted) 42%, transparent), color-mix(in srgb, var(--muted) 34%, transparent)),
    color-mix(in srgb, var(--panel) 54%, var(--muted));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 2px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(14px);
  transform-origin: center;
  transition:
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.official-v1 .theme-icon-toggle:has(.theme-mode-button:active) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--muted) 50%, transparent), color-mix(in srgb, var(--muted) 42%, transparent)),
    color-mix(in srgb, var(--panel) 42%, var(--muted));
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12);
  transform: scale(0.97);
}

body.official-v1 .theme-mode-button {
  width: 42px;
  height: 30px;
  padding: 0;
}

body.official-v1 .theme-mode-button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--field-bg) 82%, var(--muted));
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body.official-v1 .theme-mode-button:active {
  background: color-mix(in srgb, var(--field-bg) 68%, var(--muted));
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  transform: scale(0.88);
}

body.official-v1 .theme-icon {
  position: relative;
  display: block;
  color: currentColor;
}

body.official-v1 .theme-icon-sun {
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

body.official-v1 .theme-icon-sun::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 -11px 0 currentColor,
    0 11px 0 currentColor,
    11px 0 0 currentColor,
    -11px 0 0 currentColor,
    8px -8px 0 currentColor,
    -8px -8px 0 currentColor,
    8px 8px 0 currentColor,
    -8px 8px 0 currentColor;
}

body.official-v1 .theme-icon-moon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 6px -3px 0 0 currentColor;
  transform: rotate(-16deg);
}

@media (max-width: 620px) {
  body.official-v1 .theme-test-switch {
    position: relative;
    top: auto;
    left: auto;
    z-index: 20;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: max(12px, calc(env(safe-area-inset-top) + 8px)) auto clamp(42px, 8dvh, 86px);
    transform: none;
  }

  body.official-v1 .theme-icon-toggle {
    height: 38px;
    grid-template-columns: repeat(2, 38px);
    gap: 3px;
    padding: 4px;
  }

  body.official-v1 .theme-mode-button {
    width: 38px;
    height: 28px;
  }
}

body.official-v1 .app-layout {
  grid-template-rows: minmax(0, auto) !important;
}

.ticker-search:not(.has-value) input:focus {
  caret-color: var(--green);
}

body.official-v1 .hero-grid > .calculator-live-now {
  margin-top: clamp(8px, 1.2dvh, 12px);
}

body.official-v1 .strategy-row .segmented-option,
body.official-v1 .option-type-row .segmented-option,
body.official-v1 .sell-strategy-row .segmented-option {
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}

body.official-v1 .strategy-row .segmented-input:checked + .segmented-option,
body.official-v1 .option-type-row .segmented-input:checked + .segmented-option,
body.official-v1 .sell-strategy-row .segmented-input:checked + .segmented-option {
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
  color: var(--ink);
  box-shadow: none;
}

body.official-v1 .strategy-row .segmented-input:not(:checked) + .segmented-option {
  color: color-mix(in srgb, var(--muted) 58%, transparent);
}

@media (max-width: 620px) {
  body.official-v1 .app-layout {
    height: auto !important;
    min-height: 0;
    grid-template-rows: minmax(0, auto) !important;
    align-content: start;
    justify-items: center;
    overflow: visible;
  }

  body.official-v1 .app-shell {
    display: grid;
    height: auto;
    min-height: 0;
    place-items: start center;
    padding: clamp(8px, 2.4vw, 12px) clamp(6px, 2.2vw, 10px) clamp(18px, 5vw, 26px);
    overflow: visible;
  }

  body.official-v1 .hero {
    width: 100%;
    height: auto;
    min-height: 0;
    align-items: start;
    place-items: start stretch;
  }

  body.official-v1 .app-layout[data-active-page="calculator"] {
    align-content: start;
    transform: none !important;
  }

  body.official-v1 .hero-grid,
  body.official-v1.layout-locked .hero-grid,
  body.official-v1 .app-layout .hero-grid {
    height: auto !important;
    max-height: none !important;
    align-self: center;
    justify-self: center;
    overflow: visible;
  }

  #option-form.calc-panel:not([hidden]) {
    height: auto !important;
    max-height: none !important;
    min-height: 0;
    padding: clamp(10px, 3vw, 14px);
    box-shadow: none !important;
    grid-template-rows:
      minmax(44px, auto)
      minmax(54px, auto)
      repeat(4, minmax(62px, auto))
      minmax(28px, auto)
      minmax(50px, auto);
    gap: clamp(8px, 1.05dvh, 11px);
    align-content: start;
    overflow: visible !important;
  }

  #option-form.calc-panel:not([hidden]) .option-controls {
    gap: 7px;
  }

  body.official-v1 .hero-grid > .calculator-live-now {
    padding: 5px 8px;
    font-size: clamp(10px, 2.85vw, 12px);
  }

  #option-form.calc-panel:not([hidden]) .strategy-row {
    height: clamp(54px, 13.5vw, 64px);
    min-height: 54px;
  }

  #option-form.calc-panel:not([hidden]) .strategy-row .segmented-option {
    font-size: clamp(20px, 6.4vw, 28px);
    line-height: 1;
  }

  #option-form.calc-panel:not([hidden]) .option-choice-stage {
    min-height: clamp(40px, 10.5vw, 46px);
  }

  #option-form.calc-panel:not([hidden]) .option-type-row,
  #option-form.calc-panel:not([hidden]) .sell-strategy-row {
    height: clamp(40px, 10.5vw, 46px);
    min-height: 40px;
    gap: 6px;
    padding: 3px;
    background: var(--panel-soft);
    overflow: hidden;
  }

  #option-form.calc-panel:not([hidden]) .option-type-row::before,
  #option-form.calc-panel:not([hidden]) .sell-strategy-row::before {
    display: block;
    background: var(--field-bg);
    box-shadow: 0 8px 18px rgba(27, 39, 31, 0.08);
  }

  #option-form.calc-panel:not([hidden]) .sell-strategy-row::before {
    width: calc((100% - 24px) / 4);
  }

  #option-form.calc-panel:not([hidden]) .option-type-row .segmented-option,
  #option-form.calc-panel:not([hidden]) .sell-strategy-row .segmented-option {
    border: 0;
    background: transparent;
    padding: 0 4px;
    font-size: clamp(11.5px, 3vw, 13px);
    line-height: 0.98;
    white-space: normal;
  }

  #option-form.calc-panel:not([hidden]) .option-type-row .segmented-input:checked + .segmented-option,
  #option-form.calc-panel:not([hidden]) .sell-strategy-row .segmented-input:checked + .segmented-option {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #option-form.calc-panel:not([hidden]) .sell-strategy-row:has(#sell-put:checked)::before {
    transform: translateX(calc(100% + 6px));
  }

  #option-form.calc-panel:not([hidden]) .sell-strategy-row:has(#covered-call:checked)::before {
    transform: translateX(calc((100% + 6px) * 2));
  }

  #option-form.calc-panel:not([hidden]) .sell-strategy-row:has(#cash-secured-put:checked)::before {
    transform: translateX(calc((100% + 6px) * 3));
  }

  #option-form.calc-panel:not([hidden]) .ticker-search {
    margin-top: 0;
  }

  #option-form.calc-panel:not([hidden]) .ticker-search input {
    height: clamp(54px, 14.5vw, 64px);
    padding: 0 42px;
    font-size: clamp(28px, 8.5vw, 38px);
    line-height: 1;
  }

  #option-form.calc-panel:not([hidden]) .ticker-ghost {
    max-width: calc(100% - 88px);
    font-size: clamp(28px, 8.5vw, 38px);
  }

  #option-form.calc-panel:not([hidden]) .field-grid {
    gap: clamp(7px, 2.2vw, 10px);
  }

  #option-form.calc-panel:not([hidden]) .field {
    gap: 5px;
  }

  #option-form.calc-panel:not([hidden]) .field span {
    font-size: clamp(11px, 3.1vw, 13px);
    line-height: 1.05;
  }

  #option-form.calc-panel:not([hidden]) .field input,
  #option-form.calc-panel:not([hidden]) .field select,
  #option-form.calc-panel:not([hidden]) .total-cost-field strong {
    height: clamp(44px, 11.8vw, 52px);
    font-size: clamp(17px, 5.2vw, 21px);
  }

  #option-form.calc-panel:not([hidden]) .expiry-field input[type="date"] {
    padding: 0 8px;
    font-size: clamp(15px, 4.5vw, 18px);
  }

  #option-form.calc-panel:not([hidden]) .number-stepper input {
    padding-right: 30px;
  }

  #option-form.calc-panel:not([hidden]) .number-stepper-buttons {
    width: 24px;
  }

  #option-form.calc-panel:not([hidden]) .manual-iv-stepper {
    --manual-iv-suffix-size: clamp(17px, 5.2vw, 21px);
  }

  #option-form.calc-panel:not([hidden]) .calculator-action-row,
  .calculator-action-row {
    min-height: 28px;
    align-self: start;
    padding-block: 0;
  }

  .field-grid-market {
    align-self: stretch;
  }

  #option-form.calc-panel:not([hidden]) .calculate-button {
    height: clamp(48px, 12.5vw, 56px);
    font-size: clamp(15px, 4.4vw, 18px);
  }

  body.official-v1 .site-footer {
    margin-top: clamp(48px, 10dvh, 96px);
  }
}

@media (max-width: 380px) {
  body.official-v1 .app-shell {
    padding: 6px;
  }

  #option-form.calc-panel:not([hidden]) {
    padding: 9px;
    grid-template-rows:
      minmax(42px, auto)
      minmax(50px, auto)
      repeat(4, minmax(58px, auto))
      minmax(26px, auto)
      minmax(46px, auto);
    gap: 7px;
  }

  #option-form.calc-panel:not([hidden]) .sell-strategy-row {
    gap: 3px;
  }

  #option-form.calc-panel:not([hidden]) .sell-strategy-row::before {
    width: calc((100% - 15px) / 4);
  }

  #option-form.calc-panel:not([hidden]) .sell-strategy-row:has(#sell-put:checked)::before {
    transform: translateX(calc(100% + 3px));
  }

  #option-form.calc-panel:not([hidden]) .sell-strategy-row:has(#covered-call:checked)::before {
    transform: translateX(calc((100% + 3px) * 2));
  }

  #option-form.calc-panel:not([hidden]) .sell-strategy-row:has(#cash-secured-put:checked)::before {
    transform: translateX(calc((100% + 3px) * 3));
  }

  #option-form.calc-panel:not([hidden]) .sell-strategy-row .segmented-option {
    padding: 0 2px;
    font-size: clamp(9.5px, 2.8vw, 11px);
  }

  #option-form.calc-panel:not([hidden]) .field-grid {
    gap: 6px;
  }

  #option-form.calc-panel:not([hidden]) .field input,
  #option-form.calc-panel:not([hidden]) .field select,
  #option-form.calc-panel:not([hidden]) .total-cost-field strong {
    font-size: clamp(16px, 4.9vw, 19px);
  }

  #option-form.calc-panel:not([hidden]) .expiry-field input[type="date"] {
    font-size: clamp(14px, 4.25vw, 16px);
  }
}

@media (max-width: 340px) {
  #option-form.calc-panel:not([hidden]) .field-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #option-form.calc-panel:not([hidden]) .sell-strategy-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: clamp(40px, 10.5vw, 46px);
  }

  #option-form.calc-panel:not([hidden]) .sell-strategy-row .segmented-option {
    min-height: 34px;
  }
}

@media (min-width: 981px) {
  #option-form.calc-panel:not([hidden]) .ticker-search {
    margin-top: clamp(4px, 0.7dvh, 8px);
    width: 100%;
    justify-self: stretch;
  }

  #option-form.calc-panel:not([hidden]) .option-controls {
    width: 100%;
    justify-self: stretch;
    gap: 8px;
  }

  #option-form.calc-panel:not([hidden]) .strategy-row {
    height: 50px;
    min-height: 50px;
    padding: 3px;
  }

  #option-form.calc-panel:not([hidden]) .strategy-row .segmented-option {
    font-size: 18px;
  }

  #option-form.calc-panel:not([hidden]) .option-choice-stage {
    min-height: 42px;
    justify-self: center;
  }

  #option-form.calc-panel:not([hidden]) .option-choice-stage[data-mode="buy"],
  #option-form.calc-panel:not([hidden]) .option-choice-stage[data-mode="sell"] {
    width: 100%;
  }

  #option-form.calc-panel:not([hidden]) .option-type-row,
  #option-form.calc-panel:not([hidden]) .sell-strategy-row {
    height: 42px;
    min-height: 42px;
    gap: 6px;
    padding: 3px;
    background: var(--panel-soft);
    overflow: hidden;
  }

  #option-form.calc-panel:not([hidden]) .option-type-row::before,
  #option-form.calc-panel:not([hidden]) .sell-strategy-row::before {
    display: block;
    background: var(--field-bg);
    box-shadow: 0 8px 18px rgba(27, 39, 31, 0.08);
  }

  #option-form.calc-panel:not([hidden]) .sell-strategy-row::before {
    width: calc((100% - 24px) / 4);
  }

  #option-form.calc-panel:not([hidden]) .option-type-row .segmented-option,
  #option-form.calc-panel:not([hidden]) .sell-strategy-row .segmented-option {
    border: 0;
    background: transparent;
    font-size: 13px;
  }

  #option-form.calc-panel:not([hidden]) .option-type-row .segmented-input:checked + .segmented-option,
  #option-form.calc-panel:not([hidden]) .sell-strategy-row .segmented-input:checked + .segmented-option {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #option-form.calc-panel:not([hidden]) .sell-strategy-row:has(#sell-put:checked)::before {
    transform: translateX(calc(100% + 6px));
  }

  #option-form.calc-panel:not([hidden]) .sell-strategy-row:has(#covered-call:checked)::before {
    transform: translateX(calc((100% + 6px) * 2));
  }

  #option-form.calc-panel:not([hidden]) .sell-strategy-row:has(#cash-secured-put:checked)::before {
    transform: translateX(calc((100% + 6px) * 3));
  }

  #option-form.calc-panel:not([hidden]) .ticker-search input {
    height: 62px;
    padding: 0 52px;
    font-size: 30px;
    line-height: 62px;
  }

  #option-form.calc-panel:not([hidden]) .ticker-ghost {
    max-width: calc(100% - 104px);
    font-size: 30px;
  }

  #option-form.calc-panel:not([hidden]) {
    grid-template-rows:
      minmax(44px, auto)
      minmax(62px, auto)
      repeat(4, minmax(70px, auto))
      minmax(34px, auto)
      minmax(44px, auto);
    gap: clamp(10px, 1.1dvh, 15px);
  }

  #option-form.calc-panel:not([hidden]) .field-grid-market {
    margin-top: 0;
  }

  #option-form.calc-panel:not([hidden]) .calculator-action-row {
    min-height: 32px;
    align-self: start;
    padding-block: 0;
  }
}

@media (min-width: 981px) and (max-height: 900px) {
  #option-form.calc-panel:not([hidden]) {
    grid-template-rows:
      minmax(40px, auto)
      minmax(64px, auto)
      repeat(4, minmax(54px, auto))
      minmax(clamp(28px, 3.6dvh, 36px), auto)
      minmax(40px, auto);
    gap: clamp(7px, 0.9dvh, 11px);
  }

  #option-form.calc-panel:not([hidden]) .calculator-action-row {
    min-height: clamp(28px, 3.6dvh, 36px);
  }
}

body.official-v1 .calculate-button:not(:disabled) {
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--field-bg) 72%, var(--panel-soft));
  color: var(--ink);
  box-shadow: none;
}

@media (hover: hover) {
  body.official-v1 .calculate-button:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--green) 34%, transparent);
    background: var(--green);
    color: #041006;
    box-shadow: 0 12px 24px rgba(0, 200, 5, 0.2);
    transform: translateY(-1px);
  }
}

body.official-v1 .calculate-button:active:not(:disabled) {
  border-color: color-mix(in srgb, var(--green) 34%, transparent);
  background: var(--green);
  color: #041006;
  box-shadow: 0 8px 18px rgba(0, 200, 5, 0.18);
  transform: translateY(0);
}