/* V23 — Red Crystal monthly-payment treatment (screen UI only)
   Keeps all loan calculation logic untouched. */
@media screen {
  :root{
    --monthly-crystal-red:#ff646f;
    --monthly-crystal-red-strong:#ff3f52;
    --monthly-crystal-line:rgba(255,91,104,.38);
    --monthly-crystal-dark:rgba(45,10,19,.88);
  }

  /* Main monthly-payment KPI on every lender/result panel */
  body .result-list .metric.highlight,
  body:has(.loan-site-header) .result-list .metric.highlight{
    position:relative!important;
    overflow:hidden!important;
    background:
      linear-gradient(145deg,rgba(86,20,34,.48),rgba(18,22,34,.92) 52%,rgba(41,10,20,.78))!important;
    border:1px solid var(--monthly-crystal-line)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -18px 34px rgba(145,18,42,.08),
      0 10px 30px rgba(0,0,0,.20),
      0 0 24px rgba(255,63,82,.08)!important;
  }
  body .result-list .metric.highlight::before,
  body:has(.loan-site-header) .result-list .metric.highlight::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(112deg,transparent 0 28%,rgba(255,255,255,.10) 36%,transparent 45%),
      radial-gradient(circle at 18% 8%,rgba(255,255,255,.12),transparent 28%);
    opacity:.55;
  }
  body .result-list .metric.highlight span,
  body .result-list .metric.highlight small,
  body:has(.loan-site-header) .result-list .metric.highlight span,
  body:has(.loan-site-header) .result-list .metric.highlight small{
    color:#ffd9dd!important;
    opacity:1!important;
  }
  body .result-list .metric.highlight strong,
  body:has(.loan-site-header) .result-list .metric.highlight strong{
    color:var(--monthly-crystal-red)!important;
    -webkit-text-fill-color:var(--monthly-crystal-red)!important;
    text-shadow:0 0 14px rgba(255,63,82,.28)!important;
  }

  /* TISCO plan 2: explicit right-most monthly-payment column */
  #tiscoNcbResults .ncb-all-results-table th:last-child{
    color:#ffd9dd!important;
    background:
      linear-gradient(145deg,rgba(120,22,42,.72),rgba(45,12,24,.88))!important;
    border-color:rgba(255,91,104,.34)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09)!important;
  }
  #tiscoNcbResults .ncb-all-results-table td.ncb-monthly-highlight,
  #tiscoNcbResults .ncb-all-results-table td:last-child{
    color:var(--monthly-crystal-red)!important;
    -webkit-text-fill-color:var(--monthly-crystal-red)!important;
    background:
      linear-gradient(145deg,rgba(83,18,33,.42),rgba(11,20,31,.96) 54%,rgba(52,12,25,.50))!important;
    border:1px solid rgba(255,91,104,.24)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.065),
      inset 0 0 20px rgba(255,63,82,.045)!important;
    text-shadow:0 0 12px rgba(255,63,82,.22)!important;
    font-weight:1000!important;
  }
  #tiscoNcbResults .ncb-all-results-table tr:nth-child(even) td.ncb-monthly-highlight,
  #tiscoNcbResults .ncb-all-results-table tr:nth-child(even) td:last-child{
    background:
      linear-gradient(145deg,rgba(96,20,37,.44),rgba(14,25,37,.96) 54%,rgba(59,13,28,.52))!important;
  }

  /* ICBC / TISCO plan 1 / SME comparison matrices contain monthly-payment values.
     Keep the row label dark, render payment cells as subtle red crystal. */
  #icbcCompare table tbody td:not(:first-child),
  #tiscoCompare table tbody td:not(:first-child),
  #smeCompare table tbody td:not(:first-child){
    color:var(--monthly-crystal-red)!important;
    -webkit-text-fill-color:var(--monthly-crystal-red)!important;
    background:
      linear-gradient(145deg,rgba(78,17,31,.34),rgba(10,19,30,.95) 56%,rgba(47,11,23,.40))!important;
    border-color:rgba(255,91,104,.16)!important;
    text-shadow:0 0 10px rgba(255,63,82,.18)!important;
    font-weight:950!important;
  }
  #icbcCompare table tbody tr:nth-child(even) td:not(:first-child),
  #tiscoCompare table tbody tr:nth-child(even) td:not(:first-child),
  #smeCompare table tbody tr:nth-child(even) td:not(:first-child){
    background:
      linear-gradient(145deg,rgba(91,20,36,.38),rgba(13,24,36,.95) 56%,rgba(54,12,26,.44))!important;
  }
  #icbcCompare table thead th:not(:first-child),
  #tiscoCompare table thead th:not(:first-child),
  #smeCompare table thead th:not(:first-child){
    color:#ffe8ea!important;
    border-color:rgba(255,91,104,.18)!important;
  }

  /* Smooth crystal hover: brighter without changing layout */
  #icbcCompare table tbody tr:hover td:not(:first-child),
  #tiscoCompare table tbody tr:hover td:not(:first-child),
  #smeCompare table tbody tr:hover td:not(:first-child),
  #tiscoNcbResults .ncb-all-results-table tbody tr:hover td:last-child{
    color:#ff7b84!important;
    -webkit-text-fill-color:#ff7b84!important;
    background:
      linear-gradient(145deg,rgba(118,24,44,.52),rgba(15,24,36,.95) 54%,rgba(74,15,31,.58))!important;
    box-shadow:inset 0 0 24px rgba(255,63,82,.08)!important;
  }
}