/* ─── Catppuccin Macchiato palette ─────────────────────────────────────────── */
:root {
  --ctp-rosewater: #f4dbd6;
  --ctp-flamingo:  #f0c6c6;
  --ctp-pink:      #f5bde6;
  --ctp-mauve:     #c6a0f6;
  --ctp-red:       #ed8796;
  --ctp-maroon:    #ee99a0;
  --ctp-peach:     #f5a97f;
  --ctp-yellow:    #eed49f;
  --ctp-green:     #a6da95;
  --ctp-teal:      #8bd5ca;
  --ctp-sky:       #91d7e3;
  --ctp-sapphire:  #7dc4e4;
  --ctp-blue:      #8aadf4;
  --ctp-lavender:  #b7bdf8;
  --ctp-text:      #cad3f5;
  --ctp-subtext1:  #b8c0e0;
  --ctp-subtext0:  #a5adcb;
  --ctp-overlay2:  #939ab7;
  --ctp-overlay1:  #8087a2;
  --ctp-overlay0:  #6e738d;
  --ctp-surface2:  #5b6078;
  --ctp-surface1:  #494d64;
  --ctp-surface0:  #363a4f;
  --ctp-base:      #24273a;
  --ctp-mantle:    #1e2030;
  --ctp-crust:     #181926;
}

/* ─── Bootstrap dark theme → Catppuccin ────────────────────────────────────── */
[data-bs-theme="dark"] {
  --bs-body-bg:           var(--ctp-base);
  --bs-body-color:        var(--ctp-text);
  --bs-secondary-bg:      var(--ctp-mantle);
  --bs-tertiary-bg:       var(--ctp-surface0);
  --bs-border-color:      var(--ctp-surface1);
  --bs-heading-color:     var(--ctp-lavender);
  --bs-link-color:        var(--ctp-blue);
  --bs-link-hover-color:  var(--ctp-sapphire);
  --bs-code-color:        var(--ctp-pink);

  /* Cards */
  --bs-card-bg:                var(--ctp-mantle);
  --bs-card-border-color:      var(--ctp-surface0);
  --bs-card-cap-bg:            var(--ctp-surface0);

  /* Dropdowns */
  --bs-dropdown-bg:                 var(--ctp-surface0);
  --bs-dropdown-border-color:       var(--ctp-surface1);
  --bs-dropdown-link-color:         var(--ctp-text);
  --bs-dropdown-link-hover-color:   var(--ctp-lavender);
  --bs-dropdown-link-hover-bg:      var(--ctp-surface1);
  --bs-dropdown-link-active-color:  var(--ctp-crust);
  --bs-dropdown-link-active-bg:     var(--ctp-mauve);
  --bs-dropdown-divider-bg:         var(--ctp-surface2);
  --bs-dropdown-header-color:       var(--ctp-overlay1);

  /* Navbar */
  --bs-navbar-color:              var(--ctp-subtext1);
  --bs-navbar-hover-color:        var(--ctp-lavender);
  --bs-navbar-active-color:       var(--ctp-mauve);
  --bs-navbar-brand-color:        var(--ctp-mauve);
  --bs-navbar-brand-hover-color:  var(--ctp-lavender);
  --bs-navbar-toggler-border-color: var(--ctp-surface2);

  /* Nav */
  --bs-nav-link-color:        var(--ctp-subtext1);
  --bs-nav-link-hover-color:  var(--ctp-lavender);

  /* Forms */
  --bs-form-control-bg:           var(--ctp-surface0);
  --bs-form-control-border-color: var(--ctp-overlay0);
  --bs-form-control-color:        var(--ctp-text);
  --bs-input-bg:                  var(--ctp-surface0);
  --bs-input-border-color:        var(--ctp-overlay0);
  --bs-input-color:               var(--ctp-text);
  --bs-input-focus-border-color:  var(--ctp-mauve);
  --bs-input-placeholder-color:   var(--ctp-overlay1);

  /* Tables */
  --bs-table-color:         var(--ctp-text);
  --bs-table-border-color:  var(--ctp-surface1);
  --bs-table-striped-bg:    var(--ctp-mantle);
  --bs-table-hover-bg:      var(--ctp-surface0);

  /* List groups */
  --bs-list-group-bg:           var(--ctp-mantle);
  --bs-list-group-border-color: var(--ctp-surface1);
  --bs-list-group-color:        var(--ctp-text);
  --bs-list-group-action-color: var(--ctp-subtext1);
  --bs-list-group-action-hover-color: var(--ctp-lavender);
  --bs-list-group-action-hover-bg: var(--ctp-surface0);
  --bs-list-group-active-bg:    var(--ctp-mauve);
  --bs-list-group-active-color: var(--ctp-crust);

  /* Modals */
  --bs-modal-bg:            var(--ctp-mantle);
  --bs-modal-border-color:  var(--ctp-surface1);
  --bs-modal-header-border-color: var(--ctp-surface1);
  --bs-modal-footer-border-color: var(--ctp-surface1);

  /* Toasts */
  --bs-toast-bg:            var(--ctp-mantle);
  --bs-toast-border-color:  var(--ctp-surface1);
  --bs-toast-header-bg:     var(--ctp-surface0);

  /* Popovers */
  --bs-popover-bg:          var(--ctp-mantle);
  --bs-popover-border-color: var(--ctp-surface1);
  --bs-popover-body-color:  var(--ctp-text);
  --bs-popover-header-bg:   var(--ctp-surface0);

  /* Tooltips */
  --bs-tooltip-bg:          var(--ctp-surface2);
  --bs-tooltip-color:       var(--ctp-text);

  /* Pagination */
  --bs-pagination-bg:               var(--ctp-mantle);
  --bs-pagination-border-color:     var(--ctp-surface1);
  --bs-pagination-color:            var(--ctp-subtext1);
  --bs-pagination-hover-bg:         var(--ctp-surface0);
  --bs-pagination-hover-color:      var(--ctp-lavender);
  --bs-pagination-hover-border-color: var(--ctp-surface2);
  --bs-pagination-active-bg:        var(--ctp-mauve);
  --bs-pagination-active-color:     var(--ctp-crust);
  --bs-pagination-active-border-color: var(--ctp-mauve);
  --bs-pagination-disabled-bg:      var(--ctp-mantle);
  --bs-pagination-disabled-color:   var(--ctp-overlay0);

  /* Progress */
  --bs-progress-bg:         var(--ctp-surface0);
  --bs-progress-bar-bg:     var(--ctp-mauve);

  /* Accordions */
  --bs-accordion-bg:              var(--ctp-mantle);
  --bs-accordion-border-color:    var(--ctp-surface1);
  --bs-accordion-btn-color:       var(--ctp-text);
  --bs-accordion-btn-bg:          var(--ctp-mantle);
  --bs-accordion-active-bg:       var(--ctp-surface0);
  --bs-accordion-active-color:    var(--ctp-mauve);
  --bs-accordion-body-padding-y:  1rem;

  /* Breadcrumb */
  --bs-breadcrumb-divider-color:  var(--ctp-overlay0);
  --bs-breadcrumb-item-active-color: var(--ctp-subtext0);

  /* Alerts - spread palette */
  --bs-alert-color: inherit;
}

/* ─── Bootstrap component colour overrides ──────────────────────────────────── */

/* Buttons: primary = mauve */
.btn-primary {
  --bs-btn-bg:              var(--ctp-mauve);
  --bs-btn-border-color:    var(--ctp-mauve);
  --bs-btn-color:           var(--ctp-crust);
  --bs-btn-hover-bg:        var(--ctp-lavender);
  --bs-btn-hover-border-color: var(--ctp-lavender);
  --bs-btn-hover-color:     var(--ctp-crust);
  --bs-btn-active-bg:       var(--ctp-lavender);
  --bs-btn-active-border-color: var(--ctp-lavender);
  --bs-btn-active-color:    var(--ctp-crust);
  --bs-btn-focus-shadow-rgb: 198, 160, 246;
}
.btn-outline-primary {
  --bs-btn-color:           var(--ctp-mauve);
  --bs-btn-border-color:    var(--ctp-mauve);
  --bs-btn-hover-bg:        var(--ctp-mauve);
  --bs-btn-hover-border-color: var(--ctp-mauve);
  --bs-btn-hover-color:     var(--ctp-crust);
  --bs-btn-active-bg:       var(--ctp-mauve);
  --bs-btn-active-color:    var(--ctp-crust);
}

/* secondary = blue */
.btn-secondary {
  --bs-btn-bg:           var(--ctp-blue);
  --bs-btn-border-color: var(--ctp-blue);
  --bs-btn-color:        var(--ctp-crust);
  --bs-btn-hover-bg:     var(--ctp-sapphire);
  --bs-btn-hover-color:  var(--ctp-crust);
}
.btn-outline-secondary {
  --bs-btn-color:        var(--ctp-blue);
  --bs-btn-border-color: var(--ctp-blue);
  --bs-btn-hover-bg:     var(--ctp-blue);
  --bs-btn-hover-color:  var(--ctp-crust);
}

/* success = green */
.btn-success {
  --bs-btn-bg:           var(--ctp-green);
  --bs-btn-border-color: var(--ctp-green);
  --bs-btn-color:        var(--ctp-crust);
  --bs-btn-hover-bg:     var(--ctp-teal);
  --bs-btn-hover-color:  var(--ctp-crust);
}
.btn-outline-success {
  --bs-btn-color:        var(--ctp-green);
  --bs-btn-border-color: var(--ctp-green);
  --bs-btn-hover-bg:     var(--ctp-green);
  --bs-btn-hover-color:  var(--ctp-crust);
}

/* danger = red */
.btn-danger {
  --bs-btn-bg:           var(--ctp-red);
  --bs-btn-border-color: var(--ctp-red);
  --bs-btn-color:        var(--ctp-crust);
}
.btn-outline-danger {
  --bs-btn-color:        var(--ctp-red);
  --bs-btn-border-color: var(--ctp-red);
  --bs-btn-hover-bg:     var(--ctp-red);
  --bs-btn-hover-color:  var(--ctp-crust);
}

/* warning = peach (more visible on dark than yellow) */
.btn-warning {
  --bs-btn-bg:           var(--ctp-peach);
  --bs-btn-border-color: var(--ctp-peach);
  --bs-btn-color:        var(--ctp-crust);
}
.btn-outline-warning {
  --bs-btn-color:        var(--ctp-peach);
  --bs-btn-border-color: var(--ctp-peach);
  --bs-btn-hover-bg:     var(--ctp-peach);
  --bs-btn-hover-color:  var(--ctp-crust);
}

/* info = sapphire */
.btn-info {
  --bs-btn-bg:           var(--ctp-sapphire);
  --bs-btn-border-color: var(--ctp-sapphire);
  --bs-btn-color:        var(--ctp-crust);
}
.btn-outline-info {
  --bs-btn-color:        var(--ctp-sapphire);
  --bs-btn-border-color: var(--ctp-sapphire);
  --bs-btn-hover-bg:     var(--ctp-sapphire);
  --bs-btn-hover-color:  var(--ctp-crust);
}

/* Alert colours */
.alert-primary   { --bs-alert-bg: color-mix(in srgb, var(--ctp-mauve)    15%, var(--ctp-base)); --bs-alert-border-color: var(--ctp-mauve);    --bs-alert-color: var(--ctp-mauve); }
.alert-success   { --bs-alert-bg: color-mix(in srgb, var(--ctp-green)    15%, var(--ctp-base)); --bs-alert-border-color: var(--ctp-green);    --bs-alert-color: var(--ctp-green); }
.alert-danger    { --bs-alert-bg: color-mix(in srgb, var(--ctp-red)      15%, var(--ctp-base)); --bs-alert-border-color: var(--ctp-red);      --bs-alert-color: var(--ctp-red); }
.alert-warning   { --bs-alert-bg: color-mix(in srgb, var(--ctp-peach)    15%, var(--ctp-base)); --bs-alert-border-color: var(--ctp-peach);    --bs-alert-color: var(--ctp-peach); }
.alert-info      { --bs-alert-bg: color-mix(in srgb, var(--ctp-sapphire) 15%, var(--ctp-base)); --bs-alert-border-color: var(--ctp-sapphire); --bs-alert-color: var(--ctp-sapphire); }
.alert-secondary { --bs-alert-bg: color-mix(in srgb, var(--ctp-blue)     15%, var(--ctp-base)); --bs-alert-border-color: var(--ctp-blue);     --bs-alert-color: var(--ctp-blue); }

/* Badges */
.badge.bg-primary   { background-color: var(--ctp-mauve)    !important; color: var(--ctp-crust); }
.badge.bg-secondary { background-color: var(--ctp-blue)     !important; color: var(--ctp-crust); }
.badge.bg-success   { background-color: var(--ctp-green)    !important; color: var(--ctp-crust); }
.badge.bg-danger    { background-color: var(--ctp-red)      !important; color: var(--ctp-crust); }
.badge.bg-warning   { background-color: var(--ctp-peach)    !important; color: var(--ctp-crust); }
.badge.bg-info      { background-color: var(--ctp-sapphire) !important; color: var(--ctp-crust); }

/* ─── Base ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Roboto', system-ui, Arial, sans-serif;
  background-color: var(--ctp-base);
  color: var(--ctp-text);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ─── Navbar ────────────────────────────────────────────────────────────────── */
.site-navbar {
  background-color: var(--ctp-mantle);
  border-bottom: 1px solid var(--ctp-surface0);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.site-brand {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ctp-mauve) !important;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}
.site-brand:hover { color: var(--ctp-lavender) !important; }

.site-navbar .nav-link {
  color: var(--ctp-subtext1);
  font-weight: 500;
  transition: color 0.15s;
  padding: 0.5rem 0.9rem;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus { color: var(--ctp-lavender); }
.site-navbar .nav-link.show  { color: var(--ctp-mauve); }

/* Dropdown */
.dropdown-menu {
  background-color: var(--ctp-surface0);
  border: 1px solid var(--ctp-surface1);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  padding: 0.4rem;
  min-width: 190px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ctp-text);
  border-radius: 7px;
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background-color 0.15s, color 0.15s;
}
.dropdown-item:hover  { background-color: var(--ctp-surface1); color: var(--ctp-lavender); }
.dropdown-item:active { background-color: var(--ctp-mauve);    color: var(--ctp-crust); }

.dropdown-item .material-icons-outlined {
  font-size: 1.1rem;
  color: var(--ctp-overlay2);
  transition: color 0.15s;
}
.dropdown-item:hover .material-icons-outlined { color: var(--ctp-lavender); }

/* ─── Main ──────────────────────────────────────────────────────────────────── */
.site-main { flex: 1; }

/* ─── Footer ────────────────────────────────────────────────────────────────── */
.site-footer { background-color: var(--ctp-mantle); }
.footer-divider { border-color: var(--ctp-surface0); margin-bottom: 1rem; }
.footer-copy {
  font-size: 0.82rem;
  color: var(--ctp-overlay1);
  text-align: center;
  padding-bottom: 1rem;
  margin: 0;
}

/* ─── Material Icons sizing ─────────────────────────────────────────────────── */
.material-icons-outlined {
  font-size: 1.25rem;
  line-height: 1;
  vertical-align: text-bottom;
  user-select: none;
}

/* ─── Typography ────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-family: 'Roboto', system-ui, Arial, sans-serif; }
h1 { color: var(--ctp-lavender); }
h2 { color: var(--ctp-blue); }
h3 { color: var(--ctp-sapphire); }
h4 { color: var(--ctp-teal); }

a { color: var(--ctp-blue); }
a:hover { color: var(--ctp-sapphire); }

code { color: var(--ctp-pink); background-color: var(--ctp-surface0); border-radius: 4px; padding: 0.15em 0.4em; font-size: 0.9em; }
pre  { background-color: var(--ctp-surface0); color: var(--ctp-pink); border-radius: 8px; padding: 1rem; overflow-x: auto; }
pre code { background: none; padding: 0; }

/* ─── Hero ──────────────────────────────────────────────────────────────────── */
.hero { border-bottom: 1px solid var(--ctp-surface0); }

.hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ctp-mauve);
  margin-bottom: 0.6rem;
}

.hero-title { color: var(--ctp-lavender); line-height: 1.1; }

.hero-subtitle {
  color: var(--ctp-subtext1);
  margin-bottom: 2rem;
}

.hero .btn-primary .material-icons-outlined {
  font-size: 1.25rem;
  vertical-align: text-bottom;
  margin-right: 0.25rem;
}

/* ─── Features section ──────────────────────────────────────────────────────── */
.section-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ctp-overlay1);
  margin-bottom: 1.25rem;
}

.feature-card {
  background-color: var(--ctp-mantle);
  border: 1px solid var(--ctp-surface0);
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.feature-card:hover {
  border-color: var(--ctp-surface2);
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
}

.feature-icon-wrap {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-icon-wrap .material-icons-outlined { font-size: 1.4rem; }

.commands-icon { background-color: color-mix(in srgb, var(--ctp-mauve) 15%, transparent); color: var(--ctp-mauve); }
.rewards-icon  { background-color: color-mix(in srgb, var(--ctp-green) 15%, transparent); color: var(--ctp-green); }
.songs-icon    { background-color: color-mix(in srgb, var(--ctp-peach) 15%, transparent); color: var(--ctp-peach); }

.commands-title { color: var(--ctp-mauve) !important; }
.rewards-title  { color: var(--ctp-green) !important; }
.songs-title    { color: var(--ctp-peach) !important; }

/* ─── Page headers (inner pages) ────────────────────────────────────────────── */
.page-header { border-bottom: 1px solid var(--ctp-surface0); }

.page-icon { font-size: 2rem !important; }
.commands-icon-sm { color: var(--ctp-mauve); }
.rewards-icon-sm  { color: var(--ctp-green); }
.songs-icon-sm    { color: var(--ctp-peach); }

/* ─── Rewards page ──────────────────────────────────────────────────────────── */
.rewards-accordion .accordion-button {
  font-size: 1.05rem;
  font-weight: 600;
  gap: 0.5rem;
}

.reward-section-icon { font-size: 1.2rem; line-height: 1; }

.reward-count-badge {
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 0.25em 0.65em;
}
.audio-badge { background-color: var(--ctp-green);  color: var(--ctp-crust); }
.video-badge { background-color: var(--ctp-sky);    color: var(--ctp-crust); }

.reward-card {
  background-color: var(--ctp-surface0);
  border: 1px solid var(--ctp-surface1);
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.reward-card:hover {
  border-color: var(--ctp-surface2);
  box-shadow: 0 2px 14px rgba(0,0,0,.35);
}

.reward-name {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.audio-reward-name { color: var(--ctp-green); }
.video-reward-name { color: var(--ctp-sky); }

.reward-description {
  font-size: 0.82rem;
  color: var(--ctp-subtext0);
  margin-bottom: 0;
}

.reward-player {
  border-radius: 6px;
  display: block;
}
video.reward-player { max-width: 560px; display: block; margin: 0 auto; }

.reward-no-file {
  font-size: 0.8rem;
  color: var(--ctp-overlay1);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0;
}
.reward-no-file .material-icons-outlined { font-size: 1rem; }

/* ─── Commands page ─────────────────────────────────────────────────────────── */
.cmd-table {
  background-color: var(--ctp-mantle);
  border: 1px solid var(--ctp-surface1);
  border-radius: 10px;
  overflow: hidden;
}

.cmd-header,
.cmd-row {
  display: grid;
  grid-template-columns: 130px 160px 1fr 44px;
  align-items: center;
  gap: 0;
}

.cmd-header {
  background-color: var(--ctp-surface0);
  padding: 0.55rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ctp-overlay1);
  border-bottom: 1px solid var(--ctp-surface1);
}

.cmd-header > div,
.cmd-row > div { padding: 0 0.5rem; }

.cmd-row {
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--ctp-surface0);
}
.cmd-row:last-child { border-bottom: none; }
.cmd-row:hover { background-color: var(--ctp-surface0); }

.cmd-primary {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ctp-mauve);
  background-color: color-mix(in srgb, var(--ctp-mauve) 12%, var(--ctp-base));
  border-radius: 5px;
  padding: 0.15em 0.5em;
  white-space: nowrap;
}

.cmd-col-aliases {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.cmd-alias {
  font-size: 0.78rem;
  color: var(--ctp-overlay2);
  background-color: var(--ctp-surface0);
  border-radius: 4px;
  padding: 0.1em 0.45em;
  white-space: nowrap;
}

.cmd-col-desc {
  font-size: 0.88rem;
  color: var(--ctp-subtext0);
  line-height: 1.5;
}

.cmd-col-perm {
  text-align: center;
  font-size: 1.1rem;
  cursor: default;
}

/* ─── Permission legend ─────────────────────────────────────────────────────── */
.cmd-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  font-size: 0.82rem;
  color: var(--ctp-subtext0);
}

.cmd-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background-color: var(--ctp-surface0);
  border: 1px solid var(--ctp-surface1);
  border-radius: 20px;
  padding: 0.2em 0.7em;
  white-space: nowrap;
}

.cmd-legend-icon { line-height: 1; }

.cmd-legend-sep {
  color: var(--ctp-surface2);
  font-size: 1rem;
  user-select: none;
}