:root {
  --app-font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --app-font-weight: 300;


  --nuam-radius-none: 0;
  --nuam-radius-xs: 4px;
  --nuam-radius-sm: 6px;
  --nuam-radius-md: 8px;
  --nuam-radius-lg: 10px;
  --nuam-radius-xl: 12px;
  --nuam-radius-2xl: 16px;
  --nuam-radius-pill: 999px;
  --nuam-radius-circle: 50%;

  /* 1. Base paints. Only raw colors live here. */
  --paint-canvas: #282626;
  --paint-page: rgb(47 46 50);
  --paint-surface-base: #383838;
  --paint-panel-glass: rgba(53, 53, 60, 0.55);
  --paint-popup-solid: rgba(36, 35, 39, 0.98);
  --paint-image-placeholder: #222;
  --paint-surface-meta: rgba(40, 40, 44, 0.55);
  --paint-surface-section: rgba(34, 32, 33, 0.44);
  --paint-surface-card: rgba(29, 28, 29, 0.48);
  --paint-surface-card-soft: rgba(29, 28, 29, 0.44);
  --paint-surface-card-deep: rgba(18, 18, 20, 0.42);
  --paint-surface-card-strong: rgba(29, 28, 29, 0.50);
  --paint-surface-hover: rgba(44, 42, 46, 0.92);
  --paint-control-hover-soft: rgba(64, 64, 72, 0.92);
  --paint-control-hover-strong: rgba(64, 64, 72, 0.94);
  --paint-cover-action: rgba(33, 33, 38, 0.82);
  --paint-backdrop-heavy: rgba(10, 10, 14, 0.78);

  --paint-text-primary: #f3f3f3;
  --paint-text-secondary: #bababa;
  --paint-text-muted: rgba(255, 255, 255, 0.68);
  --paint-text-faint: rgba(255, 255, 255, 0.52);
  --paint-text-secondary-bright: #d8d8d8;
  --paint-text-date-muted: #d7d7d7;

  --paint-accent-primary: #84aafb;
  --paint-accent-secondary: #d7da8b;
  --paint-status-success: #64b743;
  --paint-status-danger: #ff738a;
  --paint-status-danger-soft: #ff776b;
  --paint-brand-spotify: #1ed760;
  --paint-delta-positive: #a9c8ff;
  --paint-delta-negative: #f5a9a9;

  --rgb-accent-primary: 132, 170, 251;
  --rgb-accent-primary-dark: 87, 115, 200;
  --rgb-accent-secondary: 215, 218, 139;
  --rgb-white: 255, 255, 255;
  --rgb-surface-panel: 53, 53, 60;
  --rgb-surface-page: 47, 46, 50;
  --rgb-surface-app: 40, 38, 38;

  /* 2. App surface hierarchy. */
  --surface-app: var(--paint-canvas);
  --surface-page: var(--paint-page);
  --surface-base: var(--paint-surface-base);
  --surface-panel: var(--paint-panel-glass);
  --surface-panel-opaque: rgba(var(--rgb-surface-panel), 1);
  --surface-panel-popup: rgba(var(--rgb-surface-panel), 0.98);
  --surface-panel-overlay: rgba(var(--rgb-surface-panel), 0.82);
  --surface-panel-muted: rgba(var(--rgb-surface-panel), 0.58);
  --surface-panel-soft: rgba(var(--rgb-surface-panel), 0.38);
  --surface-floating-panel: var(--paint-popup-solid);
  --surface-overlay: rgba(var(--rgb-surface-app), 0.98);
  --surface-overlay-soft: rgba(var(--rgb-surface-app), 0.82);
  --surface-subtle: rgba(var(--rgb-white), 0.025);
  --surface-image: var(--paint-image-placeholder);
  --surface-meta: var(--paint-surface-meta);
  --surface-hover-card: var(--paint-surface-hover);
  --surface-cover-action: var(--paint-cover-action);

  /* 3. Text hierarchy. */
  --text-primary: var(--paint-text-primary);
  --text-secondary: var(--paint-text-secondary);
  --text-secondary-bright: var(--paint-text-secondary-bright);
  --text-muted: var(--paint-text-muted);
  --text-strong-soft: rgba(var(--rgb-white), 0.70);
  --text-faint: var(--paint-text-faint);
  --text-disabled: rgba(var(--rgb-white), 0.22);
  --text-date-muted: var(--paint-text-date-muted);

  /* 4. Borders and dividers. */
  --border-faint: rgba(var(--rgb-white), 0.04);
  --border-subtle: rgba(var(--rgb-white), 0.08);
  --border-thin-divider: rgba(var(--rgb-white), 0.07);
  --border-separator: #555;
  --control-border-hover: rgba(var(--rgb-white), 0.10);
  --control-border-active: rgba(var(--rgb-white), 0.12);

  /* 5. Controls. */
  --control-bg: rgba(var(--rgb-white), 0.03);
  --control-bg-hover: rgba(var(--rgb-white), 0.05);
  --control-bg-active: rgba(var(--rgb-white), 0.06);
  --control-disabled-bg: rgba(var(--rgb-white), 0.02);
  --control-surface-hover-soft: var(--paint-control-hover-soft);
  --control-surface-hover-strong: var(--paint-control-hover-strong);
  --progress-track-bg: var(--control-border-active);

  /* 6. Primary accent: clickable, selected, focused. */
  --accent-primary: var(--paint-accent-primary);
  --accent-primary-bg-ultrafaint: rgba(var(--rgb-accent-primary), 0.04);
  --accent-primary-bg-faint: rgba(var(--rgb-accent-primary), 0.08);
  --accent-primary-bg-soft: rgba(var(--rgb-accent-primary), 0.10);
  --accent-primary-bg: rgba(var(--rgb-accent-primary), 0.12);
  --accent-primary-fill-medium: rgba(var(--rgb-accent-primary), 0.50);
  --accent-primary-fill-strong: rgba(var(--rgb-accent-primary), 0.95);
  --accent-primary-dark-bg-faint: rgba(var(--rgb-accent-primary-dark), 0.06);
  --accent-primary-border-transparent: rgba(var(--rgb-accent-primary), 0);
  --accent-primary-border-muted: rgba(var(--rgb-accent-primary), 0.14);
  --accent-primary-border-faint: rgba(var(--rgb-accent-primary), 0.22);
  --accent-primary-border-medium: rgba(var(--rgb-accent-primary), 0.42);
  --accent-primary-border-highlight: rgba(var(--rgb-accent-primary), 0.45);
  --accent-primary-border: rgba(var(--rgb-accent-primary), 0.50);
  --accent-primary-border-emphasis: rgba(var(--rgb-accent-primary), 0.56);
  --accent-primary-border-strong: rgba(var(--rgb-accent-primary), 0.65);
  --accent-primary-border-stronger: rgba(var(--rgb-accent-primary), 0.78);
  --accent-primary-border-bright: rgba(var(--rgb-accent-primary), 0.80);
  --accent-primary-border-hot: rgba(var(--rgb-accent-primary), 0.90);

  /* 7. UI states. */
  --state-hover-accent-bg: rgba(var(--rgb-accent-primary), 0.14);
  --state-hover-accent-border: rgba(var(--rgb-accent-primary), 0.28);
  --state-active-accent-bg: rgba(var(--rgb-accent-primary), 0.16);
  --state-active-border: rgba(var(--rgb-accent-primary), 0.16);
  --state-selected-bg: rgba(var(--rgb-accent-primary), 0.18);
  --state-selected-border: rgba(var(--rgb-accent-primary), 0.18);
  --state-emphasis-bg: rgba(var(--rgb-accent-primary), 0.22);
  --state-focus-ring: rgba(var(--rgb-accent-primary), 0.75);
  --state-focus-border: rgba(var(--rgb-accent-primary), 0.95);

  /* 8. Secondary accent: labels, highlights, placement notes. */
  --accent-secondary: var(--paint-accent-secondary);
  --accent-secondary-gradient-start: rgba(var(--rgb-accent-secondary), 0.15);
  --accent-secondary-gradient-end: rgba(var(--rgb-accent-secondary), 0.75);
  --accent-secondary-glow-soft: rgba(var(--rgb-accent-secondary), 0.18);
  --accent-secondary-border-strong: rgba(var(--rgb-accent-secondary), 0.64);

  /* 9. Status colors. */
  --status-success: var(--paint-status-success);
  --status-success-bg: rgba(100, 183, 67, 0.14);
  --status-success-border: rgba(100, 183, 67, 0.34);
  --status-danger: var(--paint-status-danger);
  --status-danger-soft: var(--paint-status-danger-soft);
  --status-danger-bg: rgba(255, 115, 138, 0.14);
  --status-danger-bg-hover: rgba(255, 115, 138, 0.34);
  --status-danger-border: rgba(255, 115, 138, 0.34);
  --status-delta-positive: var(--paint-delta-positive);
  --status-delta-negative: var(--paint-delta-negative);
  --brand-spotify: var(--paint-brand-spotify);

  /* 10. Overlays and shadows. */
  --overlay-backdrop-heavy: var(--paint-backdrop-heavy);
  --overlay-black-faint: rgba(0, 0, 0, 0.16);
  --overlay-black-strong: rgba(0, 0, 0, 0.48);
  --overlay-black-heavy: rgba(0, 0, 0, 0.56);
  --overlay-black-max: rgba(0, 0, 0, 0.68);
  --shadow-color-subtle: rgba(0, 0, 0, 0.12);
  --shadow-color-faint: rgba(0, 0, 0, 0.14);
  --shadow-color-soft: rgba(0, 0, 0, 0.18);
  --shadow-color-compact: rgba(0, 0, 0, 0.20);
  --shadow-color-lifted: rgba(0, 0, 0, 0.22);
  --shadow-color-panel: rgba(0, 0, 0, 0.24);
  --shadow-color-card: rgba(0, 0, 0, 0.26);
  --shadow-color-medium: rgba(0, 0, 0, 0.28);
  --shadow-color-default: rgba(0, 0, 0, 0.30);
  --shadow-color-modal: rgba(0, 0, 0, 0.32);
  --shadow-color-floating: rgba(0, 0, 0, 0.35);
  --shadow-color-strong: rgba(0, 0, 0, 0.42);
  --shadow-color-popover: rgba(0, 0, 0, 0.44);
  --shadow-color-heavy: rgba(0, 0, 0, 0.52);

  /* 11. Component families with separate visual logic. */
  --events-surface-section: var(--paint-surface-section);
  --events-surface-summary: var(--paint-surface-card);
  --events-surface-subgroup: var(--paint-surface-card-soft);
  --events-surface-flow-card: var(--paint-surface-card-deep);
  --events-surface-item: var(--paint-surface-card-strong);
  --events-locked-border: rgba(var(--rgb-accent-primary), 0.36);
  --events-chevron-bg: rgba(var(--rgb-white), 0.035);
  --events-type-group-bg: rgba(var(--rgb-surface-app), 0.36);
  --events-subtle-border: rgba(var(--rgb-white), 0.045);
  --events-filter-border-focus: rgba(var(--rgb-accent-primary), 0.72);
  --events-filter-border-strong: rgba(var(--rgb-accent-primary), 0.86);

  --modal-backdrop-bg: rgba(var(--rgb-surface-app), 0.78);
  --modal-panel-overlay: rgba(var(--rgb-surface-panel), 0.88);
  --modal-accent-bg-min: rgba(var(--rgb-accent-primary), 0.01);
  --modal-accent-bg-soft: rgba(var(--rgb-accent-primary), 0.02);
  --modal-accent-bg-soft-strong: rgba(var(--rgb-accent-primary), 0.05);
  --modal-accent-bg: rgba(var(--rgb-accent-primary), 0.06);
  --modal-accent-border: rgba(var(--rgb-accent-primary), 0.62);
  --modal-accent-border-strong: rgba(var(--rgb-accent-primary), 0.70);

  --chart-card-bg-soft: rgba(var(--rgb-surface-panel), 0.42);
  --chart-card-bg: rgba(var(--rgb-surface-panel), 0.50);
  --chart-item-bg: rgba(var(--rgb-white), 0.035);
  --chart-empty-border: rgba(var(--rgb-white), 0.09);
  --chart-badge-text: rgba(var(--rgb-white), 0.50);

  --tabs-top-gradient-panel: rgba(var(--rgb-surface-panel), var(--tabs-top-gradient-opacity));
  --tabs-top-gradient-pane: rgba(var(--rgb-surface-page), var(--tabs-top-gradient-opacity));

  --saved-search-secondary-gradient: rgba(var(--rgb-accent-secondary), 0.22);
  --saved-search-secondary-border: rgba(var(--rgb-accent-secondary), 0.42);

  --cover-action-hover-bg: rgba(var(--rgb-white), 0.14);
  --cover-lightbox-secondary-end: rgba(var(--rgb-accent-secondary), 0.95);
  --cover-lightbox-panel-bg: rgba(var(--rgb-surface-panel), 0.72);

  --placement-secondary-border-strong: rgba(var(--rgb-accent-secondary), 0.62);
  --placement-primary-border-soft: rgba(var(--rgb-accent-primary), 0.30);
  --placement-avatar-border: rgba(var(--rgb-surface-app), 0.88);
  --placement-secondary-orb-core: rgba(var(--rgb-accent-secondary), 0.16);
  --placement-secondary-orb-edge: rgba(var(--rgb-accent-secondary), 0.02);
  --placement-secondary-chip-border: rgba(var(--rgb-accent-secondary), 0.30);
  --placement-secondary-chip-bg: rgba(var(--rgb-accent-secondary), 0.08);
  --placement-panel-soft: rgba(var(--rgb-surface-panel), 0.34);
  --placement-row-bg: rgba(var(--rgb-white), 0.035);
  --placement-row-border: rgba(var(--rgb-white), 0.055);
  --placement-primary-rank-bg: rgba(var(--rgb-accent-primary), 0.13);
  --placement-secondary-note-border: rgba(var(--rgb-accent-secondary), 0.20);
  --placement-secondary-note-bg: rgba(var(--rgb-accent-secondary), 0.07);
  --placement-secondary-row-border: rgba(var(--rgb-accent-secondary), 0.24);
  --placement-secondary-row-bg: rgba(var(--rgb-accent-secondary), 0.11);

  --tooltip-panel-bg-soft: rgba(var(--rgb-surface-panel), 0.35);

  --loading-shine-edge: rgba(190, 194, 202, 0);
  --loading-shine-soft: rgba(190, 194, 202, 0.12);
  --loading-shine-core: rgba(150, 150, 150, 1);
  --loading-dot: rgb(150, 150, 150);

  --scrollbar-track: var(--surface-app);
  --scrollbar-thumb: var(--surface-base);
  --scrollbar-border: var(--surface-app);

  --meta-ui-font: var(--app-font-family);
  --meta-ui-line: 1.2;
  --meta-icon-size: 1.3em;
  --meta-gap: 6px;
  --meta-stat-pad-x: 8px;
  --grain-bg: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">\
<filter id="grain">\
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" seed="2"/>\
<feColorMatrix type="saturate" values="0"/>\
</filter>\
<rect width="100%" height="100%" filter="url(%23grain)" opacity="0.15"/>\
</svg>');
}

.ti,
.bi {
  font-style: normal;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

.ti::before,
.bi::before {
  display: block;
  line-height: 1;
}

button,
a,
input,
select,
textarea {
  font-family: var(--app-font-family);
}

button,
.button,
.ld-btn,
.custom-select .selected,
.charts-subtab-btn,
.search-head-action,
.modal-close-icon-btn,
.playlist-modal-search-btn,
.playlist-modal-search-clear-btn {
  align-items: center;
}

* {
  box-sizing: border-box;
}

.nuam-img-no-drag {
  -webkit-user-drag: none;
  user-select: none;
}

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--surface-app);
  color: var(--text-primary);
  font-family: var(--app-font-family);
  font-synthesis-weight: none;
}

body {
  margin: 0;
  padding: 10px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--surface-app);
  color: var(--text-primary);
  font-family: var(--app-font-family);
  font-weight: var(--app-font-weight);
  font-synthesis-weight: none;
}

body::-webkit-scrollbar,
.custom-select .options-container::-webkit-scrollbar,
.suggestions::-webkit-scrollbar,
.modal-box::-webkit-scrollbar,
.playlist-modal-scroll-area::-webkit-scrollbar,
.playlist-modal-stats-shell::-webkit-scrollbar,
.curator-modal-playlist-scroll::-webkit-scrollbar,
.curator-modal-charts-scroll::-webkit-scrollbar,
.charts-sections-scroll::-webkit-scrollbar,
#stats-content::-webkit-scrollbar,
.tab-pane::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body::-webkit-scrollbar-track,
.custom-select .options-container::-webkit-scrollbar-track,
.suggestions::-webkit-scrollbar-track,
.modal-box::-webkit-scrollbar-track,
.playlist-modal-scroll-area::-webkit-scrollbar-track,
.playlist-modal-stats-shell::-webkit-scrollbar-track,
.curator-modal-playlist-scroll::-webkit-scrollbar-track,
.curator-modal-charts-scroll::-webkit-scrollbar-track,
.charts-sections-scroll::-webkit-scrollbar-track,
#stats-content::-webkit-scrollbar-track,
.tab-pane::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

body::-webkit-scrollbar-thumb,
.custom-select .options-container::-webkit-scrollbar-thumb,
.suggestions::-webkit-scrollbar-thumb,
.modal-box::-webkit-scrollbar-thumb,
.playlist-modal-scroll-area::-webkit-scrollbar-thumb,
.playlist-modal-stats-shell::-webkit-scrollbar-thumb,
.curator-modal-playlist-scroll::-webkit-scrollbar-thumb,
.curator-modal-charts-scroll::-webkit-scrollbar-thumb,
.charts-sections-scroll::-webkit-scrollbar-thumb,
#stats-content::-webkit-scrollbar-thumb,
.tab-pane::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: var(--nuam-radius-md) var(--nuam-radius-md) var(--nuam-radius-md) var(--nuam-radius-none);
  border: 2px solid var(--scrollbar-border);
  cursor: grab;
}

*::-webkit-scrollbar-thumb {
  cursor: grab;
}

*::-webkit-scrollbar-thumb:active {
  cursor: grabbing;
}

body::-webkit-scrollbar-button,
.custom-select .options-container::-webkit-scrollbar-button,
.suggestions::-webkit-scrollbar-button,
.modal-box::-webkit-scrollbar-button,
.playlist-modal-scroll-area::-webkit-scrollbar-button,
.playlist-modal-stats-shell::-webkit-scrollbar-button,
.curator-modal-playlist-scroll::-webkit-scrollbar-button,
.curator-modal-charts-scroll::-webkit-scrollbar-button,
.charts-sections-scroll::-webkit-scrollbar-button,
#stats-content::-webkit-scrollbar-button,
.tab-pane::-webkit-scrollbar-button {
  display: none;
}

.tab-pane::-webkit-scrollbar-track,
#stats-content::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.tab-pane::-webkit-scrollbar-thumb,
#stats-content::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: var(--nuam-radius-xl) var(--nuam-radius-xl) var(--nuam-radius-xl) var(--nuam-radius-none);
  border: 2px solid var(--scrollbar-border);
}

.modal-box::-webkit-scrollbar-thumb {
  border-radius: var(--nuam-radius-xl) var(--nuam-radius-xl) var(--nuam-radius-xl) var(--nuam-radius-none);
}

a {
  color: var(--accent-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}