/* ══════════════════════════════════════════════════════════════════════════
   GAMMA-STYLE BUTTON THEME — full coverage across all pages
   Loaded last on every page — overrides all inline + rebrand button rules.
   Colors: warm GoPDF gold palette. Appearance: Gamma pill/gradient/shadow.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens: Light — warm gold matching GoPDF paper palette ────────────── */
:root,
[data-bs-theme="light"] {
  --btn-gradient:          linear-gradient(135deg, #3d2e1a 0%, #9a7d4a 100%);
  --btn-primary-bg:        #3d2e1a;
  --btn-primary-text:      #f5f2ec;
  --btn-primary-hover:     #9a7d4a;
  --btn-bg:                #3d2e1a;
  --btn-text:              #f5f2ec;
  --btn-hover:             #9a7d4a;
  --btn-secondary-bg:      #ffffff;
  --btn-secondary-border:  rgba(154, 125, 74, 0.22);
  --btn-secondary-color:   #3d2e1a;
  --btn-active-bg:         rgba(154, 125, 74, 0.10);
  --btn-active-color:      #7a5e30;
  --btn-shadow:            0 2px 10px rgba(61, 46, 26, 0.20);
  --btn-shadow-hover:      0 4px 20px rgba(154, 125, 74, 0.38);
}

/* ── Tokens: Dark — warm gold on dark paper ─────────────────────────────── */
:root[data-bs-theme="dark"],
html[data-bs-theme="dark"] {
  --btn-gradient:          linear-gradient(135deg, #c9a05a 0%, #deba80 100%);
  --btn-primary-bg:        #c9a05a;
  --btn-primary-text:      #111110;
  --btn-primary-hover:     #deba80;
  --btn-bg:                #c9a05a;
  --btn-text:              #111110;
  --btn-hover:             #deba80;
  --btn-secondary-bg:      rgba(255, 255, 255, 0.05);
  --btn-secondary-border:  rgba(255, 255, 255, 0.10);
  --btn-secondary-color:   rgba(232, 230, 225, 0.85);
  --btn-active-bg:         rgba(201, 160, 90, 0.16);
  --btn-active-color:      #c9a05a;
  --btn-shadow:            0 2px 12px rgba(0, 0, 0, 0.50);
  --btn-shadow-hover:      0 4px 22px rgba(201, 160, 90, 0.38);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --btn-gradient:          linear-gradient(135deg, #c9a05a 0%, #deba80 100%);
    --btn-primary-bg:        #c9a05a;
    --btn-primary-text:      #111110;
    --btn-primary-hover:     #deba80;
    --btn-bg:                #c9a05a;
    --btn-text:              #111110;
    --btn-hover:             #deba80;
    --btn-secondary-bg:      rgba(255, 255, 255, 0.05);
    --btn-secondary-border:  rgba(255, 255, 255, 0.10);
    --btn-secondary-color:   rgba(232, 230, 225, 0.85);
    --btn-active-bg:         rgba(201, 160, 90, 0.16);
    --btn-active-color:      #c9a05a;
    --btn-shadow:            0 2px 12px rgba(0, 0, 0, 0.50);
    --btn-shadow-hover:      0 4px 22px rgba(201, 160, 90, 0.38);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   SHARED PILL RADIUS — every interactive element gets full pill shape
   ══════════════════════════════════════════════════════════════════════════ */

button, .btn,
[class*="-btn"]:not(input):not(select):not(td):not(tr),
[class*="-pill"]:not(input):not(select),
[class*="-tab"]:not(input):not(select):not(td):not(tr),
[class*="-chip"]:not(input):not(select) {
  border-radius: 100px !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   PRIMARY — gradient pill (all primary action buttons across all pages)
   ══════════════════════════════════════════════════════════════════════════ */

/* Bootstrap + generic */
.btn-action,
.btn-primary, button.btn-primary,
.download-btn,
.gp-submit, .search-submit, .submit-btn,
#pdfSearchInput + button,
.hero button[onclick*="openOverlay"],
/* tools.html */
.search-go,
.tv-action,
.tv-download-btn,
/* index.html flashcard */
.fc-generate-btn,
.fc-nav-flip,
/* search.html gs-* */
.gs-send, .gs-search-btn,
.gs-studio-send, .gs-studio-btn,
.gs-btn-primary,
/* search.html s2-* */
.s2-topbar-btn.solid,
/* overlay / viewer */
.ov-btn-primary, .ov-act-btn,
/* library.html */
.lib-btn.primary, .lib-bulk-btn.primary,
.lib-notes-save, .lib-dash-goto,
/* studio.html */
.ws-btn.submit,
.send-btn,
.nav-btn.primary,
/* index.html hero */
.hu-btn.primary,
/* search overlay */
.pv2-act-btn {
  background: var(--btn-gradient) !important;
  color: var(--btn-primary-text) !important;
  border: none !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow: var(--btn-shadow) !important;
  transition: filter .18s, box-shadow .18s, transform .18s !important;
}

.btn-action:hover, .btn-primary:hover, .download-btn:hover,
.gp-submit:hover, .search-submit:hover,
#pdfSearchInput + button:hover,
.hero button[onclick*="openOverlay"]:hover,
.search-go:hover,
.tv-action:hover:not(:disabled),
.tv-download-btn:hover,
.fc-generate-btn:hover, .fc-nav-flip:hover,
.gs-send:hover, .gs-search-btn:hover,
.gs-studio-send:hover, .gs-studio-btn:hover,
.gs-btn-primary:hover:not(:disabled),
.s2-topbar-btn.solid:hover,
.ov-btn-primary:hover, .ov-act-btn:hover,
.lib-notes-save:hover, .lib-dash-goto:hover,
.ws-btn.submit:hover,
.send-btn:hover,
.nav-btn.primary:hover,
.pv2-act-btn:hover {
  filter: brightness(1.14) !important;
  box-shadow: var(--btn-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

.btn-action:active, .btn-primary:active,
.tv-action:active, .ws-btn.submit:active {
  transform: translateY(0) !important;
  filter: brightness(0.97) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   SECONDARY / OUTLINE — white pill + faint warm border
   ══════════════════════════════════════════════════════════════════════════ */

/* Bootstrap */
.btn-secondary, button.btn-secondary,
.btn-outline-secondary, .btn-outline-primary,
/* search.html */
.gs-viewer-back, .gs-viewer-tool, .gs-viewer-act-btn,
.gs-btn-secondary,
.gs-pg-btn, .gs-lang-btn, .gs-search-clear,
.s2-topbar-btn.outline,
.s2-find-nav, .gs-find-nav,
/* overlay */
.ov-btn-ghost, .ov-select-btn,
/* library.html */
.lib-btn:not(.primary), .lib-bulk-btn:not(.primary),
.lib-sort-btn, .lib-rws-see-all, .lib-dash-modal-close,
.lib-ra,
/* studio.html */
.ws-btn:not(.submit),
.nav-btn:not(.primary),
.ctx-new-session-btn, .ctx-add-btn,
/* index.html */
.hu-btn:not(.primary),
.annotate-close-btn,
/* search overlay */
.pv2-quick-act, .pv2-show-more, .pv2-viewer-open,
/* tools.html */
.tv-drop-btn,
.fc-nav-btn {
  background: var(--btn-secondary-bg) !important;
  border: 1.5px solid var(--btn-secondary-border) !important;
  color: var(--btn-secondary-color) !important;
  border-radius: 100px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background .18s, border-color .18s, color .18s !important;
}

.btn-secondary:hover, .btn-outline-secondary:hover, .btn-outline-primary:hover,
.gs-viewer-back:hover, .gs-btn-secondary:hover,
.s2-topbar-btn.outline:hover,
.ov-btn-ghost:hover,
.lib-btn:not(.primary):hover, .lib-sort-btn:hover,
.ws-btn:not(.submit):hover,
.nav-btn:not(.primary):hover,
.hu-btn:not(.primary):hover,
.pv2-quick-act:hover,
.tv-drop-btn:hover,
.fc-nav-btn:hover {
  background: var(--btn-active-bg) !important;
  border-color: var(--btn-active-color) !important;
  color: var(--btn-active-color) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   NAV-PILLS / TABS / FILTER CHIPS — active = gradient pill
   ══════════════════════════════════════════════════════════════════════════ */

.nav-pills .nav-link,
/* tools.html */
.cat-tab,
/* index.html */
.ai-mode-pill,
/* search.html */
.gs-chip, .gs-filter, .gs-pill-btn,
.gs-provider-btn, .gs-s2-provider-btn,
.gs-studio-tab, .gs-studio-starter, .starter,
.ovf-pill, .ovp-pill,
.s2-cat, .s2-topbar-nav-btn,
.s2-view-btn,
/* library.html */
.lib-fc, .lib-col-chip,
/* index.html */
.fc-pill,
.template-suggestion {
  border-radius: 100px !important;
  font-weight: 500 !important;
  transition: background .15s, color .15s, border-color .15s !important;
}

/* Active state — gradient */
.nav-pills .nav-link.active,
.nav-pills .nav-link.go-ai-tab.active,
.cat-tab.active, .cat-tab.on,
.ai-mode-pill.active,
.gs-chip.active, .gs-filter.on,
.gs-provider-btn.on, .gs-s2-provider-btn.on,
.gs-studio-tab.active,
.ovf-pill.active, .ovp-pill.active,
.s2-cat.on, .s2-topbar-nav-btn.s2-active,
.s2-view-btn.active,
.lib-fc.active,
.lib-col-chip.active, .lib-col-chip.on,
.fc-pill.fc-pill-active,
/* studio.html */
.opt-chip.on, .mode-chip.on {
  background: var(--btn-gradient) !important;
  color: var(--btn-primary-text) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
  box-shadow: var(--btn-shadow) !important;
}

/* Inactive hover — soft tint */
.nav-pills .nav-link:not(.active):hover,
.cat-tab:not(.active):not(.on):hover,
.ai-mode-pill:not(.active):hover,
.gs-chip:not(.active):hover,
.gs-filter:not(.on):hover,
.s2-cat:not(.on):hover,
.lib-col-chip:not(.active):not(.on):hover,
.fc-pill:not(.fc-pill-active):hover,
.template-suggestion:hover, .starter:hover,
.opt-chip:not(.on):hover, .mode-chip:not(.on):hover {
  background: var(--btn-active-bg) !important;
  color: var(--btn-active-color) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   FILTER / CATEGORY / TAG PILLS
   ══════════════════════════════════════════════════════════════════════════ */

.category-pill, .tools-filter-btn, .tag-pill,
.refine-opt, .filter-pill, .gp-refine-opt,
.pg-btn, .gs-pg-btn {
  border-radius: 100px !important;
}

.category-pill.active, .tools-filter-btn.active, .tag-pill.active,
.refine-opt.on, .filter-pill.on, .gp-refine-opt.on {
  background: var(--btn-active-bg) !important;
  border-color: var(--btn-active-color) !important;
  color: var(--btn-active-color) !important;
  font-weight: 600 !important;
}

.pg-btn.active, .gs-pg-btn.active {
  background: var(--btn-gradient) !important;
  color: var(--btn-primary-text) !important;
  border-color: transparent !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   OUTPUT-TYPE TOGGLES
   ══════════════════════════════════════════════════════════════════════════ */

.output-type-btn {
  border-radius: 100px !important;
  background: var(--btn-secondary-bg) !important;
  border: 1.5px solid var(--btn-secondary-border) !important;
  color: var(--btn-secondary-color) !important;
}
.output-type-btn:hover {
  border-color: var(--btn-active-color) !important;
  color: var(--btn-active-color) !important;
  background: var(--btn-active-bg) !important;
}
.output-type-btn.active {
  background: var(--btn-active-bg) !important;
  border-color: var(--btn-active-color) !important;
  color: var(--btn-active-color) !important;
  box-shadow: inset 0 0 0 1px var(--btn-active-color) !important;
  font-weight: 600 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   LIBRARY-SPECIFIC
   ══════════════════════════════════════════════════════════════════════════ */

.lib-prog-quick-btn {
  border-radius: 100px !important;
  font-weight: 500 !important;
}
.lib-prog-quick-btn.active {
  background: var(--btn-active-bg) !important;
  color: var(--btn-active-color) !important;
  border-color: var(--btn-active-color) !important;
}

.lib-theme-btn, .lib-ann-chip {
  border-radius: 100px !important;
  border: 1px solid var(--btn-secondary-border) !important;
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-color) !important;
}

.s2-card-act, .gs-rail-add, .gs-rail-remove,
.s2-thumb-save-btn {
  border-radius: 100px !important;
  background: var(--btn-secondary-bg) !important;
  border: 1px solid var(--btn-secondary-border) !important;
  color: var(--btn-secondary-color) !important;
}
.s2-card-act:hover, .gs-rail-add:hover,
.s2-thumb-save-btn:hover, .s2-thumb-save-btn.saved {
  background: var(--btn-active-bg) !important;
  color: var(--btn-active-color) !important;
}
.gs-rail-remove:hover {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #dc2626 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   FLASHCARD BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */

.fc-btn-know {
  background: var(--btn-gradient) !important;
  color: var(--btn-primary-text) !important;
  border: none !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
}
.fc-btn-review {
  background: var(--btn-secondary-bg) !important;
  border: 1.5px solid var(--btn-secondary-border) !important;
  color: var(--btn-secondary-color) !important;
  border-radius: 100px !important;
  font-weight: 500 !important;
}
.fc-btn-know:hover   { filter: brightness(1.12) !important; }
.fc-btn-review:hover {
  background: var(--btn-active-bg) !important;
  color: var(--btn-active-color) !important;
  border-color: var(--btn-active-color) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   NAV THEME TOGGLE
   ══════════════════════════════════════════════════════════════════════════ */

.nav-theme, .lib-theme-btn, .theme-toggle, .gs-theme-btn {
  border-radius: 50% !important;
  border: 1.5px solid var(--btn-secondary-border) !important;
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-color) !important;
}
.nav-theme:hover, .lib-theme-btn:hover, .gs-theme-btn:hover {
  border-color: var(--btn-active-color) !important;
  color: var(--btn-active-color) !important;
  background: var(--btn-active-bg) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   COMPRESS LEVEL CARDS
   ══════════════════════════════════════════════════════════════════════════ */

.compress-level-card.active {
  border-color: var(--btn-active-color) !important;
  background: var(--btn-active-bg) !important;
  box-shadow: inset 0 0 0 1px var(--btn-active-color) !important;
}
.compress-level-radio.active {
  border-color: var(--btn-active-color) !important;
  background: var(--btn-active-color) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   SHARED NAV CHROME — centered links + shortcut pill (all pages)
   ══════════════════════════════════════════════════════════════════════════ */

/* Unused placeholder — centering now done via grid on each nav container */
.nav-center { display: flex; align-items: center; gap: 22px; white-space: nowrap; }

/* ⌘K keyboard shortcut pill shown on right side of every nav */
.nav-kb {
  display: inline-flex; align-items: center; gap: 3px;
  height: 26px; padding: 0 10px; border-radius: 6px;
  border: 1px solid var(--border-strong, rgba(154,125,74,0.25));
  background: transparent; color: var(--text3, #9a8870);
  font-size: 11.5px; font-family: inherit; cursor: default;
  flex-shrink: 0; letter-spacing: .02em;
  transition: border-color .15s, color .15s;
  user-select: none;
}
html[data-bs-theme="dark"] .nav-kb,
[data-bs-theme="dark"] .nav-kb {
  border-color: rgba(236,229,212,0.12);
  color: rgba(236,229,212,0.4);
}