/* Optional Spotify-inspired LBRank app skin.
   Applied only while the user has explicitly selected "Spotify UI" in Themes.
   Never writes to saved palettes, weights, workouts, budgets or emblem artwork. */

/* Design picker: available in BOTH layouts. */
.ui-design-selector {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid rgba(var(--theme-primary-rgb,30,215,96),.2);
  border-radius: 17px;
  background: rgba(8,12,16,.65);
  box-sizing: border-box;
}
.ui-design-heading {display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.ui-design-heading strong {display:block;font-size:15px;font-weight:800;color:var(--ui-header,var(--theme-text,#fff))}
.ui-design-heading small {display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--ui-card-description,#b3b3b3)}
.ui-design-current {display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;font-weight:750;font-size:10px;white-space:nowrap;color:var(--ui-special-text,var(--theme-primary,#1ed760))}
.ui-design-current:before {content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.ui-design-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ui-design-option {
  appearance:none;-webkit-appearance:none;
  min-height:128px;min-width:0;padding:10px;
  display:flex;flex-direction:column;gap:9px;text-align:left;
  border:1px solid rgba(255,255,255,.15);
  border-radius:13px;background:#161b22;color:#f4f6fb;
  cursor:pointer;touch-action:manipulation;transition:background .16s,border-color .16s,transform .16s;
}
.ui-design-option:active {transform:scale(.985)}
.ui-design-option:focus-visible {outline:2px solid var(--theme-primary,#1ed760);outline-offset:3px}
.ui-design-option.is-selected {border-color:var(--theme-primary,#1ed760);box-shadow:inset 0 0 0 1px var(--theme-primary,#1ed760)}
.ui-design-option-meta {display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;font-size:12px;font-weight:800}
.ui-design-check {width:17px;height:17px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);display:grid;place-items:center;flex:0 0 auto;font-size:11px}
.ui-design-option.is-selected .ui-design-check {background:var(--theme-primary,#1ed760);border-color:var(--theme-primary,#1ed760);color:#08140b}
.ui-design-option:not(.is-selected) .ui-design-check:before {content:''}
.ui-design-option.is-selected .ui-design-check:before {content:'✓'}
.ui-design-preview {position:relative;display:flex;flex-direction:column;gap:6px;width:100%;flex:1;min-height:58px;padding:10px;border-radius:9px;box-sizing:border-box;overflow:hidden}
.ui-design-preview-original {background:linear-gradient(135deg,#0e2c5e,#08111e 85%);border:1px solid #22539b}
.ui-design-preview-spotify {background:#000;border:1px solid #1ed760}
.ui-design-preview-top {height:5px;width:52%;border-radius:30px;background:#eaf0f9}
.ui-design-preview-bottom {display:flex;gap:5px;align-items:end;flex:1}
.ui-design-preview-bottom i {display:block;flex:1;height:26px;border-radius:5px;background:#133d89;border:1px solid #3060a1}
.ui-design-preview-original .ui-design-preview-bottom i:nth-child(2) {background:#176cbc}
.ui-design-preview-spotify .ui-design-preview-bottom i {background:#000;border-color:#454545}
.ui-design-preview-spotify .ui-design-preview-bottom i:nth-child(2) {background:#1ed760;border-color:#1ed760}
.ui-design-preview-spotify .ui-design-preview-top {background:#fff}

/* These variables are presentation overrides. The underlying Original UI
   theme palette and emblem artwork remain stored separately and untouched. */
html[data-lbrank-ui="spotify"] {color-scheme:dark;}
html[data-lbrank-ui="spotify"] body,
html[data-lbrank-ui="spotify"] .app-wrapper,
html[data-lbrank-ui="spotify"] .app-container {
  background:var(--theme-background,#000) !important;
  background-image:none!important;
  color:var(--theme-text,#fff)!important;
}
html[data-lbrank-ui="spotify"] :is(.background-blur,.cosmic-bg) {
  opacity:0!important;pointer-events:none!important;
}
html[data-lbrank-ui="spotify"] #rank-tab .rank-container {
  background:var(--theme-background,#000)!important;
}
html[data-lbrank-ui="spotify"] .tab-content {
  background-color:transparent!important;
  background-image:none!important;
}
html[data-lbrank-ui="spotify"] :is(.app-page-header,.section-heading-row,.general-theme-heading) h2 {
  color:var(--ui-header,var(--theme-text,#fff))!important;letter-spacing:-.045em!important;font-weight:850!important;
}
html[data-lbrank-ui="spotify"] :is(.app-page-kicker,.section-kicker,.rank-title-kicker) {
  color:var(--theme-primary,#1ed760)!important;letter-spacing:.11em!important;text-transform:uppercase!important;
}
html[data-lbrank-ui="spotify"] :is(.app-page-header,.section-heading-row) p {
  color:var(--ui-card-description,#b3b3b3)!important;
}
html[data-lbrank-ui="spotify"] #rank-tab .rank-title-card {
  background:transparent!important;border:0!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html[data-lbrank-ui="spotify"] #rank-tab .rank-name-large {
  color:var(--ui-header,var(--theme-text,#fff))!important;font-weight:900!important;letter-spacing:-.045em!important;
}
html[data-lbrank-ui="spotify"] #rank-tab .rank-orb-card {
  border:0!important;border-radius:20px!important;
  background:var(--theme-background,#000)!important;
  box-shadow:none!important;
}
html[data-lbrank-ui="spotify"] #rank-tab #progressArc {stroke:var(--theme-primary,#1ed760)!important}
html[data-lbrank-ui="spotify"] #rank-tab .rank-home-shortcuts-row {
  border-top-color:#333!important;border-bottom-color:#333!important;
}
html[data-lbrank-ui="spotify"] #rank-tab #rankBadgesShortcut {
  background:var(--theme-background,#000)!important;color:var(--theme-primary,#1ed760)!important;border-color:#303030!important;
}
html[data-lbrank-ui="spotify"] #rank-tab #rankLifeDashboardButton .rank-life-dashboard-icon,
html[data-lbrank-ui="spotify"] #rank-tab #rankLifeDashboardButton .rank-life-dashboard-icon svg{
  color:var(--theme-primary,#1ed760)!important;
}
html[data-lbrank-ui="spotify"] .tab-nav {
  background:var(--theme-background,#000)!important;background-image:none!important;
  border-top:1px solid #282828!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html[data-lbrank-ui="spotify"] .tab-nav .tab-btn {
  background:transparent!important;background-image:none!important;
  border:1px solid transparent!important;border-radius:9px!important;
  color:#929292!important;box-shadow:none!important;filter:none!important;
}
html[data-lbrank-ui="spotify"] .tab-nav .tab-btn.active {
  background:transparent!important;background-image:none!important;
  border:1px solid transparent!important;border-color:transparent!important;
  color:var(--theme-primary,#1ed760)!important;box-shadow:none!important;
}
html[data-lbrank-ui="spotify"] .tab-nav .tab-btn.active :is(svg,.tab-label) {
  color:var(--theme-primary,#1ed760)!important;stroke:currentColor!important;
}
html[data-lbrank-ui="spotify"] :is(
  .settings-card,.theme-dropdown,.ui-theme-control-group,.theme-map-entry,
  .milestone-group,.workout-exercise-card,.rank-stat-card,.rank-forecast-card,
  .info-card,.learn-hub-card,.french-card,.finance-card,.budget-card,
  .dashboard-card,.life-dashboard-card,.achievement-card
) {
  background:var(--theme-background,#000)!important;background-image:none!important;
  border:1px solid #292929!important;border-radius:13px!important;
  box-shadow:none!important;filter:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html[data-lbrank-ui="spotify"] :is(
  .theme-dropdown-summary,.milestone-group-summary,
  .workout-badge-exercise,.setting-row,.ui-theme-control-group>summary
) {
  background:var(--theme-background,#000)!important;background-image:none!important;
  border-color:#292929!important;box-shadow:none!important;
}
html[data-lbrank-ui="spotify"] :is(
  .theme-dropdown-content,.milestone-group-body,.ui-theme-control-group-body
) {background:var(--theme-background,#000)!important;background-image:none!important}
html[data-lbrank-ui="spotify"] :is(
  .rank-title-card strong,.workout-exercise-heading strong,.setting-row>span,
  .settings-card-title,.milestone-badge-title,.milestone-group-heading strong,
  .theme-dropdown-copy strong,.theme-dropdown-summary strong
) {color:var(--theme-text,#fff)!important}
html[data-lbrank-ui="spotify"] :is(
  .workout-exercise-heading small,.setting-row small,.milestone-badge-detail,
  .theme-dropdown-copy small,.app-page-header p,.settings-card p
) {color:var(--ui-card-description,#b3b3b3)!important}
html[data-lbrank-ui="spotify"] :is(
  input[type="text"],input[type="number"],input[type="search"],
  input[type="email"],textarea,select
):not([type="color"]) {
  background:var(--theme-background,#000)!important;color:var(--theme-text,#fff)!important;border:1px solid #383838!important;
  border-radius:9px!important;box-shadow:none!important;
}
html[data-lbrank-ui="spotify"] :is(input,select,textarea,button):focus-visible {
  outline:2px solid var(--theme-primary,#1ed760)!important;outline-offset:2px!important;
}
html[data-lbrank-ui="spotify"] :is(
  .settings-action.primary,.general-theme-reset,.theme-quick-action.primary,
  .workout-add-btn,.save-btn,.primary-btn
) {
  background:var(--theme-primary,#1ed760)!important;background-image:none!important;color:#051509!important;
  border:0!important;border-radius:999px!important;
  font-weight:800!important;box-shadow:none!important;
}
html[data-lbrank-ui="spotify"] :is(
  .theme-preset-filter-btn.active,.badge-sort-toggle.active,
  .workout-tab.active,.chart-range-btn.active
) {
  background:#235532!important;color:var(--theme-primary,#1ed760)!important;border-color:#2d8945!important;
  box-shadow:none!important;
}
html[data-lbrank-ui="spotify"] :is(
  .milestone-badge,.badge-card,.rank-badge,.workout-badge-exercise
) {
  background:var(--theme-background,#000)!important;background-image:none!important;
  border-color:#292929!important;box-shadow:none!important;
  border-radius:11px!important;
}
html[data-lbrank-ui="spotify"] :is(.milestone-progress-fill,.rank-progress-fill) {
  background:var(--theme-primary,#1ed760)!important;background-image:none!important;
}
html[data-lbrank-ui="spotify"] :is(.chart-wrapper,.graph-card,.history-item,.workout-history-item) {
  background-color:var(--theme-background,#000)!important;
  border-color:#303030!important;box-shadow:none!important;
}
html[data-lbrank-ui="spotify"] :is(.app-page-header,.settings-container,.legend-container,.finance-container) {
  --card-surface:var(--theme-secondary,#000000);
}
html[data-lbrank-ui="spotify"] .ui-design-selector {
  background:var(--theme-background,#000)!important;border-color:#303030!important;
}
html[data-lbrank-ui="spotify"] .ui-design-option {
  background:var(--theme-background,#000);border-color:#404040;
}
html[data-lbrank-ui="spotify"] .ui-design-option.is-selected {
  border-color:var(--theme-primary,#1ed760)!important;box-shadow:inset 0 0 0 1px var(--theme-primary,#1ed760)!important;
}
html[data-lbrank-ui="spotify"] .ui-design-option.is-selected .ui-design-check {
  background:var(--theme-primary,#1ed760)!important;border-color:var(--theme-primary,#1ed760)!important;
}
html[data-lbrank-ui="spotify"] .ui-design-heading strong,
html[data-lbrank-ui="spotify"] .ui-design-option-meta {color:var(--theme-text,#fff)!important}
html[data-lbrank-ui="spotify"] .ui-design-current {color:var(--theme-primary,#1ed760)!important}
/* True-black presentation. The green accent provides contrast without
   relying on charcoal card fills or grey navigation backgrounds. */
html[data-lbrank-ui="spotify"] {
  --card-bg:var(--theme-secondary,#000)!important;
  --card-background:var(--theme-background,#000)!important;
  --surface:var(--theme-secondary,#000)!important;
  --surface-color:var(--theme-secondary,#000)!important;
}
html[data-lbrank-ui="spotify"] :is(.tab-nav,.tab-btn,.app-container,.settings-container,.legend-container) {
  background-color:var(--theme-background,#000)!important;
}
html[data-lbrank-ui="spotify"] .tab-nav .tab-btn.active {
  border:1px solid transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
html[data-lbrank-ui="spotify"] #rank-tab .rank-orb-card {
  background-color:var(--theme-background,#000)!important;
}
/* The actual Spotify player has its own established immersive layout.
   Do not restyle it via the app-wide skin. */
@media(prefers-reduced-motion:reduce) {
 .ui-design-option {transition:none!important}
}

/* Three available UI designs; avoid squashed controls on narrow iPhones. */
@media(max-width:420px) {
  .ui-design-options {grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui-design-option[data-ui-design="youtube"] {grid-column:1/-1;min-height:95px}
  .ui-design-option[data-ui-design="youtube"] .ui-design-preview {min-height:48px}
}