/* STEP 39J — Preporuka | explicit light/dark surfaces with clearer borders. */
.fsvip-recommendation {
  --fsrec-surface: #fff;
  --fsrec-subtle: #f7f9fc;
  --fsrec-border: #cfd9e6;
  --fsrec-border-soft: #e3e9f1;
  --fsrec-shadow: 0 6px 24px rgba(20,38,65,.055);
}
.fsvip-recommendation > .d-flex:first-child {margin-bottom:22px!important;padding:2px 0 10px;}
.fsvip-recommendation h1 {font-weight:780;letter-spacing:-.035em;}
.fsvip-recommendation > .alert-info {
  background:var(--fsrec-surface)!important;
  color:var(--tblr-secondary-color)!important;
  border:1px solid var(--fsrec-border)!important;
  border-left:3px solid var(--tblr-primary)!important;
  border-radius:11px;
  padding:12px 16px!important;
  box-shadow:var(--fsrec-shadow);
}
.fsvip-recommendation .fsvip-public-grid {gap:12px;}
.fsvip-recommendation .fsvip-stat {
  background:var(--fsrec-surface)!important;
  border:1px solid var(--fsrec-border)!important;
  border-radius:13px;
  box-shadow:var(--fsrec-shadow);
  padding:16px 18px;
  min-width:0;
}
.fsvip-recommendation .fsvip-stat small {font-size:.77rem;font-weight:570;line-height:1.35;}
.fsvip-recommendation .fsvip-stat strong {font-size:clamp(1.32rem,2.2vw,1.65rem);font-weight:750;letter-spacing:-.025em;line-height:1.5;}
.fsvip-recommendation .fsvip-stat:nth-child(1) {border-top:3px solid #2da876;}
.fsvip-recommendation .fsvip-stat:nth-child(2) {border-top:3px solid #de6a68;}
.fsvip-recommendation .fsvip-stat:nth-child(3) {border-top:3px solid #518adb;}
.fsvip-recommendation .fsvip-stat:nth-child(4) {border-top:3px solid #9868d5;}
.fsvip-recommendation .fsvip-result {
  background:var(--fsrec-surface)!important;
  border:1px solid var(--fsrec-border)!important;
  border-radius:15px;
  box-shadow:var(--fsrec-shadow);
  padding:20px 22px;
  transition:border-color .18s,box-shadow .18s;
}
.fsvip-recommendation .fsvip-result:hover {border-color:#7eaddb!important;box-shadow:0 9px 28px rgba(27,59,94,.11);}
.fsvip-recommendation .fsvip-result h3 {font-size:1.06rem;font-weight:720;letter-spacing:-.012em;}
.fsvip-recommendation .fsvip-competition {gap:.42rem;font-size:.77rem;}
.fsvip-recommendation .fsvip-values {margin:12px 0;gap:9px;}
.fsvip-recommendation .fsvip-value,
.fsvip-recommendation .fsvip-match-scores .fsvip-value {
  background:var(--fsrec-subtle)!important;
  border:1px solid var(--fsrec-border-soft)!important;
  border-radius:10px;
  padding:10px 13px;
  min-width:105px;
  box-shadow:none;
}
.fsvip-recommendation .fsvip-value small {font-size:.73rem;line-height:1.35;font-weight:540;}
.fsvip-recommendation .fsvip-values:not(.fsvip-match-scores) .fsvip-value:first-child {
  background:var(--fsrec-surface)!important;
  border-color:#92b4dc!important;
}
.fsvip-recommendation .fsvip-values:not(.fsvip-match-scores) .fsvip-value:first-child strong {color:var(--tblr-primary);font-size:1.25rem;}
.fsvip-recommendation .fsvip-tabs {border-color:var(--fsrec-border);margin-top:22px;}
.fsvip-recommendation .fsvip-tabs .nav-link {border-radius:10px 10px 0 0;}
.fsvip-recommendation .fsvip-tabs .nav-link.active {
  background:var(--fsrec-surface)!important;
  border-color:var(--fsrec-border)!important;
  border-bottom-color:var(--tblr-primary)!important;
}
.fsvip-recommendation .form-select {background-color:var(--fsrec-surface);border-color:var(--fsrec-border);}
.fsvip-recommendation .fsvip-chart-panel {
  background:var(--fsrec-surface);
  border:1px solid var(--fsrec-border);
  border-radius:15px;
  padding:19px 21px 13px;
  box-shadow:var(--fsrec-shadow);
}
.fsvip-recommendation .fsvip-chart-heading {
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.fsvip-recommendation .fsvip-chart-heading h2 {font-weight:720;letter-spacing:-.02em;}
.fsvip-recommendation .fsvip-chart-legend {display:flex;gap:18px;flex-wrap:wrap;color:var(--tblr-secondary-color);font-size:.77rem;align-items:center;padding-top:4px;}
.fsvip-recommendation .fsvip-chart-legend span {display:inline-flex;align-items:center;gap:7px;}
.fsvip-recommendation .fsvip-chart-dot {display:inline-block;width:9px;height:9px;border-radius:3px;}
.fsvip-recommendation .fsvip-chart-dot.is-won,
.fsvip-recommendation .fsvip-chart-bar.is-won {background:#2fa67a;}
.fsvip-recommendation .fsvip-chart-dot.is-lost,
.fsvip-recommendation .fsvip-chart-bar.is-lost {background:#e16a6d;}
.fsvip-recommendation .fsvip-chart-grid {
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(46px,1fr));
  gap:12px;
  min-height:150px;
}
.fsvip-recommendation .fsvip-chart-column {min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;}
.fsvip-recommendation .fsvip-chart-count {font-size:.75rem;color:var(--tblr-secondary-color);font-variant-numeric:tabular-nums;min-height:16px;}
.fsvip-recommendation .fsvip-chart-track {
  width:min(100%,38px);height:92px;
  border-radius:7px 7px 3px 3px;
  background:var(--fsrec-subtle);
  border-bottom:1px solid var(--fsrec-border);
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
}
.fsvip-recommendation .fsvip-chart-bar {display:block;flex-shrink:0;width:100%;min-height:0;}
.fsvip-recommendation .fsvip-chart-empty {display:block;height:2px;background:var(--fsrec-border);margin:0 5px 0;}
.fsvip-recommendation .fsvip-chart-day {font-size:.73rem;font-weight:600;color:var(--tblr-secondary-color);font-variant-numeric:tabular-nums;white-space:nowrap;}
.fsvip-recommendation .fsvip-chart-footnote {margin:13px 0 0;font-size:.75rem;color:var(--tblr-secondary-color);}
html[data-bs-theme="dark"] .fsvip-recommendation {
  --fsrec-surface:#1d232d;
  --fsrec-subtle:#171c25;
  --fsrec-border:#455060;
  --fsrec-border-soft:#353f4f;
  --fsrec-shadow:0 6px 22px rgba(0,0,0,.17);
}
html[data-bs-theme="dark"] .fsvip-recommendation .fsvip-result:hover {border-color:#688ebb!important;box-shadow:0 9px 26px rgba(0,0,0,.26);}
html[data-bs-theme="dark"] .fsvip-recommendation .fsvip-values:not(.fsvip-match-scores) .fsvip-value:first-child {border-color:#527aa7!important;}
@media(max-width:767.98px) {
  .fsvip-recommendation {padding:17px 9px 95px;}
  .fsvip-recommendation .fsvip-stat {padding:12px 13px;}
  .fsvip-recommendation .fsvip-result {padding:15px 14px;}
  .fsvip-recommendation .fsvip-chart-panel {padding:15px 13px 12px;}
  .fsvip-recommendation .fsvip-chart-grid {gap:5px;}
  .fsvip-recommendation .fsvip-chart-track {height:76px;width:min(100%,32px);}
  .fsvip-recommendation .fsvip-chart-day {font-size:.67rem;}
}