@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;

  /* Palette */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --bg-body: #f1f5f9;
  --bg-sidebar: #ffffff;
  --border: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #64748b;

  /* Dimensions */
  --sidebar-width: 320px;

  /* Effects */
  --radius: 12px;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --transition: 0.15s ease;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg-body);
  color: var(--text-main);
  min-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout Grid */
.layout {
  display: grid;
  grid-template-columns: 56px var(--sidebar-width) 1fr;
  height: 100vh;
  background: #ffffff;
  position: relative;
}

.layout.sidebar-collapsed {
  grid-template-columns: 56px 0px 1fr;
}

/* Advanced Mode Vertical Sidebar (Icon Bar) */
.icon-sidebar {
  grid-column: 1;
  background: linear-gradient(180deg, #fbfcfd 0%, #f6f8fa 100%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 12px;
  width: 56px;
  z-index: 15;
  contain: layout style;
}

.icon-sidebar-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
  will-change: background-color;
  -webkit-tap-highlight-color: transparent;
}

.icon-sidebar-btn::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 22px;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-sidebar-btn:hover {
  background: rgba(37, 99, 235, 0.08);
  color: var(--primary);
}

.icon-sidebar-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
}

.icon-sidebar-btn:active {
  background: rgba(37, 99, 235, 0.14);
  transform: scale(0.96);
}

/* Active state */
.icon-sidebar-btn.active {
  color: var(--primary);
  background: rgba(37, 99, 235, 0.1);
}

.icon-sidebar-btn.active::before {
  transform: translateY(-50%) scaleY(1);
}

/* When sidebar is collapsed */
.layout.sidebar-collapsed .icon-sidebar-btn.active {
  background: transparent;
}

.layout.sidebar-collapsed .icon-sidebar-btn.active::before {
  transform: translateY(-50%) scaleY(0);
}

.icon-sidebar-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

/* Sidebar */
.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 10;
  contain: layout style;
}

.sidebar-top {
  padding: 14px 14px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 2;
}

/* Search Header */
.nav-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.search-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.icon-button {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  font-size: 16px;
}

.icon-button:hover {
  background: #f8fafc;
  color: var(--primary);
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.icon-button:active {
  background: #f1f5f9;
  box-shadow: none;
}

.icon-button:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 12px;
  height: 40px;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.search-box:focus-within {
  background: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.search-box:hover:not(:focus-within) {
  border-color: #cbd5e1;
  background: #f1f5f9;
}

.search-box svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-box:focus-within svg {
  color: var(--primary);
}

.search-box input {
  border: none;
  background: transparent;
  width: 100%;
  font-size: 14px;
  color: var(--text-main);
  outline: none;
}

.search-box input::placeholder {
  color: #94a3b8;
}

/* Premium Panel */
.premium-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

.premium-panel.is-hidden {
  display: none;
}

.premium-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  background: #f1f5f9;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: background 0.15s ease;
}

.premium-toggle:hover {
  background: #e2e8f0;
}

.premium-toggle.has-premium {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid #fcd34d;
  color: #92400e;
}

.premium-toggle-indicator {
  transition: transform 0.2s ease;
  font-size: 16px;
  line-height: 1;
  color: var(--text-muted);
}
.premium-panel[data-state='expanded'] .premium-toggle-indicator {
  transform: rotate(90deg);
}

.premium-collapsible {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}

.premium-banner {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
  padding: 8px;
  border-radius: 6px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.premium-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.premium-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.premium-input-row {
  display: flex;
  gap: 8px;
}

.premium-input-row input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  outline: none;
}
.premium-input-row input:focus {
  border-color: var(--primary);
}

/* Locked input state (when logged in) */
.input-locked,
input.input-locked {
  background-color: #f1f5f9 !important;
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
  border-color: #e2e8f0 !important;
}
.input-locked:focus,
input.input-locked:focus {
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
}

/* Locked input hint */
.input-locked-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  padding: 4px 8px;
  background: #f8fafc;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.input-locked-hint svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.primary-button {
  background: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.primary-button:hover {
  background: var(--primary-hover);
}

.secondary-button {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}
.secondary-button:hover {
  background: #f8fafc;
}

.auth-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.auth-user-meta {
  display: flex;
  flex-direction: column;
}
.auth-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.auth-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}
.auth-email {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-main);
}
.logout-button {
  font-size: 11px;
  padding: 4px 8px;
}

.premium-status-message {
  font-size: 12px;
  color: var(--text-muted);
}
.premium-status-message[data-variant='error'] { color: #ef4444; }
.premium-status-message[data-variant='success'] { color: #10b981; }

/* Navigation Area */
.nav-area {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  contain: strict;
}

.nav-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  contain: content;
  will-change: scroll-position;
}

.nav-scroll::-webkit-scrollbar {
  width: 6px;
}

.nav-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.nav-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.nav-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav-section-heading {
  position: sticky;
  top: 0;
  background: var(--section-color);
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  z-index: 1;
  margin-bottom: 0;
  margin-top: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: filter 0.15s ease, transform 0.1s ease;
}

.nav-section-heading:hover {
  filter: brightness(1.06);
}

.nav-section-heading:active {
  filter: brightness(0.96);
  transform: translateY(1px);
}

.nav-section-arrow {
  display: inline-flex;
  transition: transform 0.15s ease;
  transform: rotate(90deg);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.nav-section.is-collapsed .nav-section-arrow {
  transform: rotate(0deg);
}

.nav-section.is-collapsed .nav-section-list {
  display: none;
}

.nav-section-list {
  list-style: none;
  padding: 4px 0 2px 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav-item {
  display: flex;
  flex-direction: column;
}

.nav-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 5px 12px;
  border: none;
  background: transparent;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  color: var(--text-main);
  transition: background-color 0.12s ease, color 0.12s ease;
}

.nav-link:hover {
  background: #f1f5f9;
}

.nav-link:active {
  background: #e2e8f0;
}

.nav-link:focus-visible {
  outline: none;
  background: #f1f5f9;
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.25);
}

/* Search empty state */
.nav-empty-state {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 32px 20px;
  color: var(--text-muted);
  background: #f8fafc;
  border: 1px dashed var(--border);
  border-radius: 10px;
  margin: 4px 0;
}

.nav-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text-muted);
  margin-bottom: 6px;
}

.nav-empty-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.nav-empty-sub {
  font-size: 12px;
  color: var(--text-muted);
  word-break: break-word;
  max-width: 100%;
}

.nav-label {
  min-width: 22px;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--section-color);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  margin-top: 0;
}

.nav-title {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--text-main);
}

.nav-link:hover .nav-title {
  color: #000000;
}

/* Subtables */
.nav-sublist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.nav-link.is-subtable {
  padding-left: 12px;
}

.nav-link.is-subtable .nav-label {
  background: transparent;
  color: #000000;
  font-weight: 700;
  min-width: 20px;
  justify-content: flex-end;
  margin-left: 12px;
}

.nav-link.is-subtable .nav-title {
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  color: #000000;
}

.nav-link.is-subtable:hover .nav-title {
  color: #000000;
}

/* Theme Colors */
.nav-section[data-theme='algemeen'], .nav-item[data-theme='algemeen'] { --section-color: #c94195; }
.nav-section[data-theme='natuurkunde'], .nav-item[data-theme='natuurkunde'] { --section-color: #0163ac; }
.nav-section[data-theme='wiskunde'], .nav-item[data-theme='wiskunde'] { --section-color: #a0341a; }
.nav-section[data-theme='scheikunde'], .nav-item[data-theme='scheikunde'] { --section-color: #ff3b2d; }
.nav-section[data-theme='biologie'], .nav-item[data-theme='biologie'] { --section-color: #2c9a44; }
.nav-section[data-theme='register'], .nav-item[data-theme='register'] { --section-color: #aa9b88; }

.nav-item[data-theme] .nav-label {
  color: var(--section-color);
  font-weight: 700;
}

/* Viewer Area */
.viewer {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.viewer-area {
  flex: 1;
  background: #111827; /* Dark background for PDF viewer */
  display: flex;
  position: relative;
}

.viewer-frame-wrapper {
  flex: 1;
  position: relative;
}
.viewer-frame-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Floating Toggles */
.sidebar-toggle-floating {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 20;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32), 0 2px 4px rgba(37, 99, 235, 0.2);
  cursor: pointer;
  display: none; /* Only show when collapsed */
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.sidebar-toggle-floating:hover {
  transform: scale(1.06);
  background: var(--primary-hover);
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.4), 0 3px 6px rgba(37, 99, 235, 0.24);
}
.sidebar-toggle-floating:active {
  transform: scale(0.98);
}
.sidebar-toggle-floating.visible {
  display: flex;
}


/* Dialogs & Overlays */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.sidebar-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.nav-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  will-change: opacity;
}

.nav-dialog.visible {
  opacity: 1;
  visibility: visible;
}

.nav-dialog-content,
.purchase-modal,
.overlay-small {
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
  will-change: transform, opacity;
}

.nav-dialog.visible .nav-dialog-content,
.nav-dialog.visible .purchase-modal,
.nav-dialog.visible .overlay-small {
  transform: scale(1);
  opacity: 1;
}

.nav-dialog-content {
  background: #ffffff;
  width: min(800px, 92vw);
  height: min(80vh, 800px);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.nav-dialog-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-dialog-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-dialog-title {
  font-size: 18px;
  font-weight: 700;
}

.nav-dialog-toggle {
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s;
}

.nav-dialog-toggle:hover {
  background: #e2e8f0;
  color: var(--text-main);
}

.nav-dialog-toggle[aria-pressed="true"] {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.nav-dialog-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.15s;
}

.nav-dialog-close:hover {
  color: var(--text-main);
}

.nav-dialog-search {
  margin: 16px 16px 0 16px;
  height: 36px;
  flex: 0 0 auto;
}

.nav-dialog-list-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.footer-note {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #111827;
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  pointer-events: none;
}

/* Debug Log (Hidden mostly) */
.debug-log {
  font-family: monospace;
  font-size: 10px;
  background: #f1f5f9;
  padding: 8px;
  border-radius: 4px;
  max-height: 100px;
  overflow: auto;
}

/* Responsive */
@media (max-width: 1100px) {
  .layout {
    grid-template-columns: 56px var(--sidebar-width) 1fr;
  }

}

@media (max-width: 900px) {
  :root {
    --sidebar-width: 280px;
  }

  .layout {
    grid-template-columns: 56px 1fr;
  }

  .layout.sidebar-collapsed {
    grid-template-columns: 56px 1fr;
  }

  .sidebar {
    position: fixed;
    left: 56px;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    box-shadow: 4px 0 16px rgba(0,0,0,0.08);
    transform: translateX(0);
    transition: transform 0.2s ease;
    z-index: 30;
    will-change: transform;
  }

  .layout.sidebar-collapsed .sidebar {
    transform: translateX(-120%);
    box-shadow: none;
  }

  .viewer {
    grid-column: 2;
  }


  /* Slightly smaller buttons on mobile */
  .icon-sidebar-btn {
    width: 36px;
    height: 36px;
  }
  
  .icon-sidebar-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* Icon Sidebar Updates */
.icon-sidebar-top, .icon-sidebar-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 6px;
}

.icon-sidebar-spacer {
  flex: 1;
}

.icon-sidebar-divider {
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--border) 50%, transparent 100%);
  margin: 10px 0 6px;
}

.account-btn {
  padding: 0;
  overflow: hidden;
}

.account-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  overflow: hidden;
}

/* Google profile photo in account circle */
.account-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.account-btn:hover .account-circle {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  border-color: rgba(37, 99, 235, 0.2);
}

.account-circle.gold-border {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px solid #f59e0b;
  color: #92400e;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}

.account-circle.gold-border svg {
  color: #d97706;
}

/* Gold hover highlight on account button when Plus active */
.account-btn:hover .account-circle.gold-border {
  background: linear-gradient(135deg, #fde68a, #fcd34d);
  border-color: #d97706;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.gold-icon {
  color: #d97706 !important;
}

.gold-icon svg {
  fill: rgba(251, 191, 36, 0.15);
  stroke: #d97706;
}

/* Gold icon active/hover state */
.icon-sidebar-btn.gold-icon:hover {
  background: rgba(251, 191, 36, 0.15);
  color: #d97706;
}

.icon-sidebar-btn.gold-icon.active {
  color: #d97706;
  background: rgba(251, 191, 36, 0.15);
}

.icon-sidebar-btn.gold-icon.active::before {
  background: #f59e0b;
}

.layout.sidebar-collapsed .icon-sidebar-btn.gold-icon.active {
  background: transparent;
}

/* Plus Active Indicator - Subtle badge for active Plus users */
.plus-indicator {
  margin-bottom: 4px;
  appearance: none;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #f59e0b;
  color: #d97706;
  cursor: pointer;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.plus-indicator:hover {
  background: linear-gradient(135deg, #fde68a, #fcd34d);
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.plus-indicator.is-static {
  animation: none;
}

.plus-indicator svg {
  stroke: #d97706;
  width: 14px;
  height: 14px;
}

/* Plus Promo Button - Professional, clear design */
.plus-promo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 42px;
  padding: 0;
  margin-bottom: 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.plus-promo-btn:hover {
  border-color: #f59e0b;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.18);
  transform: translateY(-1px);
}

.plus-promo-btn:active {
  transform: translateY(0);
}

.plus-promo-label {
  width: 100%;
  padding: 7px 4px 5px;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  text-align: center;
  text-shadow: 0 1px 1px rgba(120, 53, 15, 0.2);
}

.plus-promo-divider {
  display: none;
}

.plus-promo-features {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  overflow: hidden;
  padding: 8px 0;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
}

.plus-promo-text {
  font-size: 11px;
  font-weight: 500;
  color: #92400e;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.plus-promo-text.fade-out {
  opacity: 0;
}

/* Overlays */
.overlay-small {
  width: min(400px, 90vw);
  height: auto;
  max-height: 80vh;
}

.overlay-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.overlay-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.overlay-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

/* Context Menu */
.context-menu {
  position: fixed;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);
  z-index: 100;
  padding: 6px;
  min-width: 180px;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
}

.context-menu-item:hover {
  background: rgba(37, 99, 235, 0.08);
  color: var(--primary);
}

.context-menu-item:active {
  background: rgba(37, 99, 235, 0.12);
}

/* Favorites View */
.favorites-view {
  display: block;
}

.favorites-header {
  position: sticky;
  top: -14px;
  margin: -14px -14px 0;
  padding: 14px 14px 12px 14px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.favorites-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -0.01em;
}


/* Split Labels */
.label-part-num {
  font-weight: 700;
  color: var(--section-color);
}
.label-part-suffix {
  font-weight: 700;
  color: #000000; /* Black for the letter */
}

/* Toast Notifications */
.binas-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(400px, 90vw);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  will-change: transform, opacity;
}

.binas-toast--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.binas-toast--hiding {
  transform: translateX(-50%) translateY(-20px);
  opacity: 0;
}

.binas-toast__content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.binas-toast__icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.binas-toast--success .binas-toast__icon {
  background: #dcfce7;
  color: #16a34a;
}

.binas-toast--error .binas-toast__icon {
  background: #fee2e2;
  color: #dc2626;
}

.binas-toast--info .binas-toast__icon {
  background: #dbeafe;
  color: #2563eb;
}

.binas-toast__message {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
  line-height: 1.4;
}

.binas-toast__close {
  background: transparent;
  border: none;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.binas-toast__close:hover {
  background: #f1f5f9;
  color: var(--text-main);
}

/* Confirmation Dialog */
.binas-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.binas-confirm-overlay--visible {
  opacity: 1;
}

.binas-confirm-dialog {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  max-width: min(420px, 90vw);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  transform: scale(0.95);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.binas-confirm-overlay--visible .binas-confirm-dialog {
  transform: scale(1);
}

.binas-confirm-title {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}

.binas-confirm-text {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

.binas-confirm-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.binas-confirm-option {
  font-size: 13px;
  color: var(--text-main);
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.binas-confirm-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.binas-confirm-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.binas-confirm-btn--cancel {
  background: #f1f5f9;
  border: 1px solid var(--border);
  color: var(--text-main);
}

.binas-confirm-btn--cancel:hover {
  background: #e2e8f0;
}

.binas-confirm-btn--confirm {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #ffffff;
}

.binas-confirm-btn--confirm:hover {
  background: var(--primary-hover);
}

/* ===== PURCHASE MODAL - Conversion Focused Design ===== */

.purchase-modal {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%);
  width: min(520px, 94vw);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.purchase-modal-header {
  background: transparent;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.purchase-modal-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.purchase-modal-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.15s ease;
}

.purchase-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.purchase-modal-body {
  padding: 24px 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;
  border-radius: 0 0 16px 16px;
}

.purchase-modal-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border: 3px solid #2563eb;
}

.purchase-modal-icon svg {
  width: 40px;
  height: 40px;
}

/* Social Proof */
.purchase-social-proof {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.purchase-stars {
  color: #fbbf24;
  font-size: 14px;
  letter-spacing: 1px;
}

.purchase-users {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.purchase-modal-heading {
  margin: 0 0 4px 0;
  font-size: 21px;
  font-weight: 700;
  color: var(--text-main);
  text-align: center;
}

.purchase-modal-subtitle {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
}

.purchase-modal-subtitle strong {
  color: var(--text-main);
  font-weight: 700;
}

/* Sale pricing */
.price-original {
  text-decoration: line-through;
  color: #9ca3af;
  font-size: 13px;
  margin-right: 2px;
}

.price-original-small {
  text-decoration: line-through;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 400;
}

/* CTA Button Loading State */
.purchase-cta-button.is-loading {
  pointer-events: none;
  opacity: 0.9;
}

.purchase-cta-button.is-loading .purchase-sale-badge,
.purchase-cta-button.is-loading .purchase-cta-main,
.purchase-cta-button.is-loading .purchase-cta-sub {
  display: none;
}

.purchase-loading-dots {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0;
}

.purchase-cta-button.is-loading .purchase-loading-dots {
  display: flex;
}

.purchase-loading-dot {
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  animation: purchaseLoadingBounce 1.4s ease-in-out infinite;
}

.purchase-loading-dot:nth-child(1) {
  animation-delay: 0s;
}

.purchase-loading-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.purchase-loading-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes purchaseLoadingBounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}


/* Features List */
.purchase-features {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.purchase-feature {
  display: flex;
  align-items: center;
  gap: 8px;
}

.purchase-feature-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  color: #10b981;
  font-weight: 700;
}

.purchase-feature-text {
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.3;
}

.purchase-feature-text strong {
  font-weight: 600;
}

/* Price Display */
.purchase-price-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.purchase-price-badge {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.purchase-price-was {
  font-size: 14px;
  color: var(--text-muted);
}

.purchase-price-was .config-original-price {
  text-decoration: line-through;
}

.purchase-price-now {
  font-size: 14px;
  color: var(--text-main);
}

.purchase-price-now strong {
  font-size: 18px;
  font-weight: 700;
  color: #10b981;
}

/* Account Box (logged in) */
.purchase-account-box {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 16px;
  margin-top: 4px;
}

.purchase-account-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.purchase-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.purchase-avatar-letter {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-main);
}

.purchase-account-info-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.purchase-account-email {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-account-notice {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* CTA Button */
.purchase-cta-button {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 100%);
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.purchase-cta-button:hover {
  background: linear-gradient(180deg, #fde68a 0%, #fbbf24 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.45);
}

.purchase-cta-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}
.purchase-cta-button.is-disabled,
.purchase-cta-button:disabled {
  background: #e5e7eb;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.purchase-cta-button.is-disabled:hover,
.purchase-cta-button:disabled:hover {
  background: #e5e7eb;
  box-shadow: none;
  transform: none;
}
.purchase-cta-button.is-disabled .purchase-cta-main,
.purchase-cta-button:disabled .purchase-cta-main {
  color: #6b7280;
}
.purchase-cta-button.is-disabled .purchase-cta-sub,
.purchase-cta-button:disabled .purchase-cta-sub {
  color: #9ca3af;
}

.purchase-cta-main {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}

.purchase-cta-sub {
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.65);
}

/* Status Message */
.purchase-status-message {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
}

.purchase-status-message:empty {
  display: none;
}

.purchase-status-message[data-variant='error'] {
  color: #ef4444;
}

.purchase-status-message[data-variant='success'] {
  color: #10b981;
}

/* Trust Badge */
.purchase-trust-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  width: 100%;
}

.purchase-trust-badge svg {
  flex-shrink: 0;
}

.purchase-trust-badge span {
  font-size: 13px;
  color: var(--text-muted);
}

.purchase-trust-badge strong {
  color: var(--text-main);
  font-weight: 600;
}

/* Mobile adjustments */
@media (max-width: 540px) {
  .purchase-modal {
    width: 95vw;
    border-radius: 12px;
  }
  
  .purchase-modal-body {
    padding: 16px 18px 14px;
  }
  
  .purchase-modal-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 10px;
  }
  
  .purchase-modal-icon svg {
    width: 30px;
    height: 30px;
  }
  
  .purchase-modal-heading {
    font-size: 19px;
  }
  
  .purchase-modal-subtitle {
    font-size: 13px;
    margin-bottom: 14px;
  }
  
  .purchase-features {
    padding: 10px 12px;
    gap: 6px;
    margin-bottom: 12px;
  }
  
  .purchase-feature-text {
    font-size: 12px;
  }
  
  .purchase-account-box {
    margin-bottom: 12px;
  }
  
  .purchase-cta-button {
    padding: 10px 20px;
  }
  
  .purchase-cta-main {
    font-size: 15px;
  }
  
  .purchase-trust-badge {
    margin-top: 12px;
  }
}


/* Favorites View Enhancements */
.favorites-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Folder Styles */
.folder-container {
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 8px;
}

.folder-header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
  position: relative;
  gap: 8px;
}

.folder-header:hover {
  background: #f1f5f9;
}

.folder-arrow {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  transform: rotate(90deg);
}

.folder-container.collapsed .folder-arrow {
  transform: rotate(0deg);
}

.folder-color-indicator {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background-color: var(--text-muted);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.folder-color-indicator:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.folder-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  flex: 1;
  text-align: left;
}

.folder-items {
  display: flex;
  flex-direction: column;
  padding-left: 12px; /* Indentation */
  gap: 0;
}

.folder-container.collapsed .folder-items {
  display: none;
}

/* Item Styles Enhancements */
.nav-item-content {
  display: flex;
  align-items: center;
  width: 100%;
}

.note-indicator {
  margin-left: 6px;
  color: #f59e0b;
  font-size: 12px;
  cursor: help;
  position: relative;
}

.note-indicator::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  white-space: pre-wrap;
  max-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.note-indicator:hover::after {
  opacity: 1;
  visibility: visible;
}

.item-actions {
  display: flex;
  align-items: center;
  padding-right: 12px;
  gap: 4px;
}

.action-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
}

.action-btn:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text-main);
}

.action-btn svg {
  width: 16px;
  height: 16px;
}

/* Drag and Drop. Avoid `transform` on the source LI: some browsers cancel
   the drag operation when the source's box transforms during dragstart. */
.dragging {
  opacity: 0.5;
  background: #f1f5f9;
  transition: opacity 0.15s, background 0.15s;
}

.drag-over {
  background: rgba(37, 99, 235, 0.08) !important;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--primary);
  position: relative;
}

.drag-over::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(37, 99, 235, 0.12));
  pointer-events: none;
}

/* Folder drop zone highlight */
.folder-items.drag-over {
  min-height: 40px;
  background: rgba(37, 99, 235, 0.06) !important;
  border: 2px dashed var(--primary);
  border-radius: 8px;
  margin: 4px 0;
}

/* Drag handle */
.drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 100%;
  color: var(--text-muted);
  cursor: grab;
  opacity: 0.4;
  transition: opacity 0.15s, color 0.15s;
  font-size: 12px;
  letter-spacing: -2px;
  user-select: none;
}

.nav-item-content:hover .drag-handle {
  opacity: 0.8;
}

.drag-handle:hover {
  opacity: 1 !important;
  color: var(--primary);
}

.drag-handle:active {
  cursor: grabbing;
}

/* Drag handle cursor on entire item */
.nav-item[draggable="true"] {
  cursor: grab;
}

.nav-item[draggable="true"]:active {
  cursor: grabbing;
}

/* Empty folder placeholder */
.folder-empty-placeholder {
  pointer-events: auto;
}

/* Highlight folder items when dragging */
body.is-dragging-favorite .folder-items {
  min-height: 30px;
}

/* Color Picker Dialog */
.color-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  justify-content: center;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.color-option {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-option:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.color-option.selected {
  border-color: var(--text-main);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

/* Note Textarea */
.binas-note-textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 16px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.binas-note-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.binas-note-textarea::placeholder {
  color: var(--text-muted);
}

/* ===== Inline favorite star button on navigation items ===== */
.nav-item-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  position: relative;
}

.nav-item-row > .nav-link {
  flex: 1;
  min-width: 0;
}

.nav-fav-star {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 6px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
  border-radius: 6px;
  flex-shrink: 0;
}

.nav-fav-star svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  fill: none;
}

.nav-item-row:hover .nav-fav-star,
.nav-fav-star:focus-visible {
  opacity: 0.8;
}

.nav-fav-star:hover {
  opacity: 1;
  color: #f59e0b;
  transform: scale(1.08);
}

.nav-fav-star.is-active {
  opacity: 1;
  color: #f59e0b;
}

.nav-fav-star.is-active svg {
  fill: #f59e0b;
  stroke: #f59e0b;
}

@media (max-width: 720px) {
  .nav-fav-star { opacity: 0.6; }
}

/* ===== Favorites empty state ===== */
.fav-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 20px;
  list-style: none;
  color: var(--text-muted);
}

.fav-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d97706;
  margin-bottom: 14px;
}

.fav-empty-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 2;
  fill: #f59e0b;
  stroke: #f59e0b;
}

.fav-empty-title {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.fav-empty-text {
  margin: 0 0 16px 0;
  font-size: 13px;
  line-height: 1.5;
  max-width: 260px;
}

.fav-empty-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.fav-empty-actions .primary-button,
.fav-empty-actions .secondary-button {
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  border: 1px solid var(--border);
}

.fav-empty-actions .primary-button {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.fav-empty-actions .secondary-button {
  background: #ffffff;
  color: var(--text-main);
}

.fav-empty-actions .primary-button:hover { filter: brightness(1.05); }
.fav-empty-actions .secondary-button:hover { background: #f1f5f9; }

.fav-empty-hint {
  margin: 14px 0 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 260px;
  width: 100%;
  text-align: center;
}

/* ===== Favorites list — compact, neatly aligned ===== */

/* Override the generic .nav-list gap (16px) inside the favorites view so
   items sit close together instead of breathing like top-level sections. */
.favorites-view .nav-list,
#favorites-list {
  gap: 0;
}

/* Nodes themselves: no extra outer spacing between rows. */
.favorites-view .fav-node {
  margin: 0;
  position: relative;
}

/* Row container — uniform vertical rhythm independent of single- vs multi-line
   titles. Top-align so the label number sits on the first line of the title.
   Position relative so we can absolutely overlay the drag handle and the
   overflow (⋯) button on top of the row instead of letting them eat layout
   width. The result: the title gets the full available width. */
.favorites-view .nav-item-content {
  position: relative;
  align-items: flex-start;
  padding: 0;
  min-height: 30px;
}

/* The row's main click target. Compact padding, consistent line-height.
   Reserve a few px on the right so the (absolutely positioned) overflow
   button has room to fade in without overlapping the title. */
.favorites-view .nav-link {
  padding: 5px 24px 5px 6px;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.35;
  border-radius: 6px;
  flex: 1;
  min-width: 0;
}

/* Fixed-width label column so every title starts at the same x, regardless
   of whether the label is "1", "10" or "10A". tabular-nums keeps digits
   from drifting. */
.favorites-view .nav-label {
  width: 22px;
  min-width: 22px;
  flex-shrink: 0;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  line-height: 1.35;
}

.favorites-view .nav-text {
  flex: 1;
  min-width: 0;
}

.favorites-view .nav-title {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  word-break: break-word;
}

/* Drag handle — purely a visual hint. The whole row is `draggable=true`,
   so users can drag from anywhere; the handle no longer needs to occupy
   layout space. Absolutely positioned so it doesn't push the title. */
.favorites-view .drag-handle {
  position: absolute;
  left: -10px;
  top: 4px;
  width: 12px;
  height: 22px;
  margin: 0;
  padding: 0;
  opacity: 0;
  font-size: 10px;
  letter-spacing: -2px;
  pointer-events: auto;
  transition: opacity 0.15s ease;
}

.favorites-view .nav-item-content:hover .drag-handle {
  opacity: 0.35;
}

.favorites-view .drag-handle:hover {
  opacity: 1 !important;
  color: var(--primary);
}

/* Overflow (⋯) menu — absolutely positioned so it overlaps the right edge
   of the row instead of taking layout space. Fades in on row hover. */
.favorites-view .fav-more-btn {
  position: absolute;
  top: 1px;
  right: 0;
  margin: 0;
  padding: 4px;
  opacity: 0;
}

.favorites-view .nav-item-content:hover .fav-more-btn,
.favorites-view .fav-more-btn:focus-visible,
.favorites-view .fav-more-btn[aria-expanded="true"] {
  opacity: 1;
}

/* Folder items: tighten the indent now that the drag handle no longer
   reserves width. */
.favorites-view .folder-items {
  padding-left: 14px;
  gap: 0;
}

/* The empty-folder placeholder shouldn't add as much vertical room. */
.favorites-view .folder-empty-placeholder {
  padding: 4px 6px;
  font-size: 12px;
}

/* Folder header itself: tighten the inner padding so the folder block
   has the same rhythm as the items inside it. */
.favorites-view .folder-header {
  padding: 6px 24px 6px 4px;
  position: relative;
}

.favorites-view .folder-header .fav-more-btn {
  top: 4px;
  right: 0;
}

/* ===== Folder enhancements ===== */
.folder-container {
  --folder-color: var(--primary);
}

.folder-name-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.folder-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.folder-color-indicator {
  border: 2px solid rgba(255, 255, 255, 0.6);
  padding: 0;
}

.folder-color-indicator:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.folder-empty-placeholder {
  list-style: none;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* ===== Overflow menu trigger button ===== */
.fav-more-btn {
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
  margin-right: 4px;
}

.fav-more-btn svg {
  width: 18px;
  height: 18px;
}

.nav-item-content:hover .fav-more-btn,
.folder-header:hover .fav-more-btn,
.fav-more-btn:focus-visible,
.fav-more-btn[aria-expanded="true"] {
  opacity: 1;
}

@media (max-width: 720px) {
  .fav-more-btn { opacity: 0.7; }
}

/* ===== Floating action menu (item / folder) ===== */
.fav-action-menu {
  position: fixed;
  z-index: 5000;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
  padding: 4px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  animation: favMenuIn 0.12s ease;
}

@keyframes favMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.fav-action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-main);
  text-align: left;
  transition: background 0.1s;
}

.fav-action-item:hover,
.fav-action-item:focus-visible {
  background: #f1f5f9;
  outline: none;
}

.fav-action-item.is-danger {
  color: #b91c1c;
}

.fav-action-item.is-danger:hover {
  background: #fef2f2;
}

.fav-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.fav-action-item.is-danger .fav-action-icon { color: #ef4444; }

.fav-action-icon svg {
  width: 16px;
  height: 16px;
}

.fav-action-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
}

/* ===== Folder picker dialog ===== */
.fav-folder-dialog {
  max-width: min(460px, 92vw);
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.fav-folder-dialog .binas-confirm-title {
  margin-bottom: 6px;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.fav-folder-dialog .binas-confirm-text {
  margin-bottom: 18px;
  font-size: 13px;
}

.fav-folder-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  margin-bottom: 10px;
  background: #f8fafc;
}

.fav-folder-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  color: var(--text-main);
  width: 100%;
  transition: background 0.12s ease, color 0.12s ease;
}

.fav-folder-option:hover {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.fav-folder-option:focus-visible {
  outline: none;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
}

.fav-folder-option.is-selected {
  background: rgba(37, 99, 235, 0.08);
  color: var(--primary);
}

.fav-folder-option.is-selected:hover {
  background: rgba(37, 99, 235, 0.12);
}

/* Folder/star icon disc */
.fav-folder-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--primary);
}

.fav-folder-icon svg {
  width: 20px;
  height: 20px;
}

.fav-folder-icon--root {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: #fcd34d;
  color: #d97706;
}

.fav-folder-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fav-folder-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.fav-folder-option.is-selected .fav-folder-label {
  color: var(--primary);
}

.fav-folder-sub {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.fav-folder-count {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(15, 23, 42, 0.06);
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
  flex-shrink: 0;
}

.fav-folder-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.fav-folder-check svg {
  width: 16px;
  height: 16px;
}

.fav-folder-option.is-selected .fav-folder-check {
  opacity: 1;
}

.fav-folder-new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--primary);
  padding: 11px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  width: 100%;
}

.fav-folder-new:hover {
  background: rgba(37, 99, 235, 0.06);
  border-color: var(--primary);
  border-style: solid;
}

.fav-folder-new-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fav-folder-new-icon svg {
  width: 14px;
  height: 14px;
}

/* Drag-out drop zone — sibling of the favorites list. Always laid out
   using `display: flex` (so it doesn't cause a layout shift mid-drag),
   but hidden via opacity + height when not active. Pointer-events are
   disabled when hidden so it doesn't intercept events outside an active
   drag. Some browsers cancel the drag if the source element shifts
   position during dragstart, which is why we keep the layout stable. */
.root-drop-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 14px;
  margin: 0 8px;
  height: 0;
  overflow: hidden;
  border: 2px dashed transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  box-shadow: none;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.root-drop-zone-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.root-drop-zone-text::before {
  content: '';
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3Cpolyline points='14 8 11 5 8 8'/%3E%3Cline x1='11' y1='5' x2='11' y2='13'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

/* Reveal the zone only while a folder-child favourite is being dragged.
   Switch from "0 height / no border / pointer-events: none" to fully
   visible. Border, padding and bg fade in via transition. */
body.is-dragging-from-folder .root-drop-zone {
  height: 46px;
  margin: 4px 8px 10px;
  padding: 12px 14px;
  border-color: var(--primary);
  background: rgba(37, 99, 235, 0.06);
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.root-drop-zone.drag-over {
  background: rgba(37, 99, 235, 0.16) !important;
  border-color: var(--primary);
  transform: scale(1.01);
}

/* ===== Improved drop indicators =====
   Three distinct visual cues so the user always knows what dropping will do:
   - .drop-before / .drop-after: a horizontal insertion line above/below the
     hovered LI, signalling "insert here as sibling".
   - .drag-into: a soft tinted background on the LI/folder header, signalling
     "drop INSIDE this folder". */
.fav-node {
  position: relative;
}

.fav-node.drop-before::before,
.fav-node.drop-after::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  height: 3px;
  border-radius: 2px;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  pointer-events: none;
  z-index: 2;
}

.fav-node.drop-before::before { top: -2px; }
.fav-node.drop-after::after { bottom: -2px; }

/* Folder LI: dropping INTO the folder. Highlight the header so it's clear
   the item will land inside, and gently outline the folder body. */
.fav-folder.drag-into > .folder-container > .folder-header {
  background: rgba(37, 99, 235, 0.10);
  box-shadow: inset 0 0 0 2px var(--primary);
  border-radius: 8px;
}

.fav-folder.drag-into > .folder-container {
  background: rgba(37, 99, 235, 0.04);
  border-radius: 8px;
}

/* Empty folder gets a clearer "drop target" treatment so it stops looking
   like dead text mid-drag. */
.fav-folder.drag-into > .folder-container > .folder-items .folder-empty-placeholder {
  background: rgba(37, 99, 235, 0.08);
  color: var(--primary);
  font-style: normal;
  font-weight: 500;
  border-radius: 6px;
  border: 1px dashed var(--primary);
}

/* Suppress the old generic .drag-over styling on fav nodes — it's now
   replaced by the more specific indicators above. We keep .drag-over for
   the root drop zone, which has its own styling. */
.fav-node.drag-over {
  background: transparent !important;
  box-shadow: none;
}

.fav-node.drag-over::before {
  content: none;
}

/* Slightly dim non-target items while a drag is in progress so the eye is
   drawn to the active drop indicator. */
body.is-dragging-favorite #favorites-list > .fav-node:not(.dragging):not(.drop-before):not(.drop-after):not(.drag-into) {
  opacity: 0.85;
}

/* ===== Folder picker dialog: extended layout ===== */

/* Item-context chip — shows what favourite is being added/moved. */
.fav-picker-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 0 16px;
  background: linear-gradient(135deg, #fff7ed, #fef3c7);
  border: 1px solid #fcd34d;
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-main);
  min-width: 0;
}

.fav-picker-chip-label {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  padding: 3px 7px;
  font-weight: 700;
  color: #b45309;
  font-size: 12px;
  letter-spacing: 0.01em;
}

.fav-picker-chip-num {
  font-weight: 700;
}

.fav-picker-chip-suffix {
  font-weight: 600;
  opacity: 0.8;
}

.fav-picker-chip-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Primary "geen map" option — visually separated from the folder list so
   it reads as a distinct quick-action. */
.fav-folder-primary {
  margin-bottom: 12px;
}

.fav-folder-primary .fav-folder-option {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.fav-folder-primary .fav-folder-option:hover,
.fav-folder-primary .fav-folder-option:focus-visible {
  background: #fffbeb;
  border-color: #fcd34d;
  outline: none;
}

.fav-folder-primary .fav-folder-option.is-selected {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #b45309;
}

/* Section label between the primary action and the folder list. */
.fav-folder-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 4px 4px 6px;
}

/* "Nieuwe map" inline form. Hidden by default; revealed when the user
   clicks the "Nieuwe map maken" trigger. */
.fav-folder-new-wrap {
  margin-bottom: 16px;
}

.fav-folder-new-form {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid var(--primary);
  border-radius: 10px;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.fav-folder-new-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-size: 14px;
  border: none;
  background: transparent;
  outline: none;
  color: var(--text-main);
}

.fav-folder-new-input::placeholder {
  color: var(--text-muted);
}

.fav-folder-new-confirm {
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.fav-folder-new-confirm:hover {
  background: #1d4ed8;
}

.fav-folder-new-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.fav-folder-new-cancel:hover {
  background: #f1f5f9;
  color: var(--text-main);
}

/* When the inline form is active, the "Nieuwe map maken" button is hidden,
   so make sure the wrapper doesn't keep its old margin-bottom. */
.fav-folder-new-wrap.is-creating .fav-folder-new {
  display: none;
}

/* Slightly tighten the folder list now that we have a primary action above
   it and an inline new-folder form below. */
.fav-folder-dialog .fav-folder-list {
  margin-bottom: 12px;
  max-height: 260px;
}

/* Make the always-visible drag handle a touch more discoverable. */
.favorites-view .nav-item-content .drag-handle {
  opacity: 0.18;
}

.favorites-view .nav-item-content:hover .drag-handle {
  opacity: 0.55;
}


/* =====================================================================
   Folder grid card UX (Favorieten tab) + Ontdek tab
   ===================================================================== */

.favorites-body {
  padding: 8px 4px 24px;
}

.fav-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #999;
  margin: 14px 4px 8px;
}

.fav-folder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fav-folder-card {
  --folder-color: #1F5FAE;
  aspect-ratio: 1.05;
  padding: 0;
  border: none;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: white;
  text-align: left;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 160ms ease, box-shadow 160ms ease;
  font: inherit;
  color: #fff;
}

.fav-folder-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
}

.fav-folder-card-top {
  background: var(--folder-color);
  padding: 10px 12px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fav-folder-card-icon {
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1;
}

.fav-folder-card-count {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.85;
}

.fav-folder-card-chips {
  background: var(--folder-color);
  padding: 0 12px 10px;
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  flex: 1;
}

.fav-folder-card-chip {
  background: rgba(255, 255, 255, 0.22);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.fav-folder-card-overflow {
  font-size: 10px;
  opacity: 0.85;
  font-weight: 700;
}

.fav-folder-card-name {
  background: white;
  color: #222;
  padding: 8px 12px 10px;
  font-family: Georgia, serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fav-folder-card--new {
  background: transparent;
  border: 1.5px dashed #d0d0d0;
  color: #999;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  display: flex;
  gap: 4px;
}

.fav-folder-card--new:hover {
  border-color: #999;
  color: #333;
  transform: none;
  box-shadow: none;
}

.fav-folder-card-plus {
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
}

.fav-folder-card-newlabel {
  font-size: 11px;
  font-weight: 600;
}

/* Loose favorites */
.fav-loose-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fav-loose-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: #222;
  width: 100%;
}

.fav-loose-row:hover {
  background: #f5f5f5;
}

.fav-loose-num {
  width: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  padding: 4px 0;
  color: var(--section-color, #1F5FAE);
  flex: 0 0 auto;
}

.fav-loose-title {
  flex: 1;
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fav-loose-star {
  color: #FFB800;
  font-size: 14px;
}

/* Color themes for loose rows */
.fav-loose-row[data-theme='algemeen'] { --section-color: #c94195; }
.fav-loose-row[data-theme='natuurkunde'] { --section-color: #0163ac; }
.fav-loose-row[data-theme='wiskunde'] { --section-color: #a0341a; }
.fav-loose-row[data-theme='scheikunde'] { --section-color: #ff3b2d; }
.fav-loose-row[data-theme='biologie'] { --section-color: #2c9a44; }
.fav-loose-row[data-theme='register'] { --section-color: #aa9b88; }

/* Folder detail view */
.fav-folder-detail {
  --folder-color: #1F5FAE;
  display: flex;
  flex-direction: column;
  margin: -8px -14px 0;
}

.fav-folder-detail-header {
  background: var(--folder-color);
  color: white;
  padding: 14px 18px 16px;
  position: relative;
}

.fav-folder-back {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.fav-folder-back:hover {
  background: rgba(255, 255, 255, 0.32);
}

.fav-folder-more {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fav-folder-more svg {
  width: 16px;
  height: 16px;
}

.fav-folder-detail-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.fav-folder-detail-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 22px;
}

.fav-folder-detail-name {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}

.fav-folder-detail-count {
  font-size: 11px;
  opacity: 0.85;
}

.fav-folder-detail-list {
  padding: 10px 6px 18px;
  display: flex;
  flex-direction: column;
}

.fav-folder-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  font: inherit;
  color: #222;
}

.fav-folder-item:hover { background: #f5f5f5; }

.fav-folder-item-badge {
  flex: 0 0 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--folder-color);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 14px;
}

.fav-folder-item-badge .label-part-num,
.fav-folder-item-badge .label-part-suffix { color: white; }

.fav-folder-item-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fav-folder-item-section {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--folder-color);
}

.fav-folder-item-title {
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fav-folder-item-more {
  border: none;
  background: transparent;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  color: #999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 120ms;
}

.fav-folder-item-more svg { width: 16px; height: 16px; }
.fav-folder-item:hover .fav-folder-item-more { opacity: 1; }

.fav-folder-detail-empty {
  text-align: center;
  padding: 32px 16px;
  color: #888;
}

.fav-folder-detail-empty-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #f3f3f3;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: #ccc;
}

.fav-folder-detail-empty-icon svg { width: 18px; height: 18px; }
.fav-folder-detail-empty p { margin: 0; font-size: 12.5px; line-height: 1.45; }

/* Folder editor dialog */
.folder-editor {
  width: 340px;
  max-width: 90vw;
}

.folder-editor-name {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border, #e3e3e3);
  border-radius: 8px;
  font-size: 13px;
  margin: 6px 0 14px;
  box-sizing: border-box;
}

.folder-editor-label {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  margin: 8px 0 6px;
  letter-spacing: 0.4px;
}

.folder-editor-colors,
.folder-editor-icons {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.folder-editor-color {
  width: 28px;
  height: 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
}

.folder-editor-color.is-active {
  border-color: #222;
}

.folder-editor-icon {
  width: 30px;
  height: 30px;
  border: 1px solid #e3e3e3;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  font-family: Georgia, serif;
  font-size: 14px;
}

.folder-editor-icon.is-active {
  border: 2px solid #222;
}

.folder-editor-save {
  color: white;
  border: none;
}

/* Icon sidebar badge for "Ontdek" tab */
.icon-sidebar-btn.has-badge { position: relative; }
.icon-sidebar-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #E8341E;
  pointer-events: none;
}

.icon-sidebar-btn.active .icon-sidebar-badge { display: none; }

/* =====================================================================
   Ontdek tab
   ===================================================================== */
.ontdek-view {
  display: block;
}

.ontdek-header {
  position: sticky;
  top: -14px;
  margin: -14px -14px 0;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border, #eee);
  background: #fff;
  z-index: 2;
}

.ontdek-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ontdek-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #222;
}

.ontdek-subtitle {
  font-size: 11px;
  color: #999;
}

.ontdek-search {
  position: relative;
}

.ontdek-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #bbb;
  font-size: 16px;
  pointer-events: none;
}

.ontdek-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 36px 11px 34px;
  border: 1.5px solid #e3e3e3;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  background: #fafafa;
  color: #222;
  transition: border-color 120ms, background 120ms;
}

.ontdek-search input:focus {
  border-color: #222;
  background: #fff;
}

.ontdek-search button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: #eee;
  color: #666;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 11px;
}

.ontdek-vakfilter {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ontdek-vakfilter::-webkit-scrollbar { display: none; }

.ontdek-vakchip {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: 1.5px solid #ececec;
  background: white;
  color: #666;
  font: inherit;
  line-height: 1.3;
}

.ontdek-vakchip.is-active {
  color: white;
}

.ontdek-body {
  padding: 12px 0 12px;
}

.ontdek-section { margin-bottom: 14px; }

.ontdek-section-label,
.ontdek-grid-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #999;
  padding: 0 2px 6px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.ontdek-grid-legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: #888;
  letter-spacing: 0;
  text-transform: none;
}

.ontdek-grid-legend-dots {
  display: inline-flex;
  gap: 1.5px;
}

.ontdek-grid-legend-dots span {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: #bbb;
}

.ontdek-recent-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ontdek-recent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 4px;
  border: 1px solid color-mix(in srgb, var(--vak-color, #666) 33%, transparent);
  background: white;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  color: #222;
}

.ontdek-recent-num {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--vak-color, #666);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 11px;
}

.ontdek-recent-title {
  font-size: 11.5px;
  font-weight: 600;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 10x10 grid */
.ontdek-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  padding: 6px;
  background: #f6f6f7;
  border-radius: 12px;
  border: 1px solid #ececec;
}

.ontdek-grid-cell {
  position: relative;
  aspect-ratio: 1;
  border: none;
  border-radius: 6px;
  background: #ccc;
  color: white;
  font-size: 10.5px;
  font-weight: 700;
  font-family: Georgia, serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 100ms;
}

.ontdek-grid-cell.is-empty {
  background: #f0f0f0;
  cursor: default;
}

.ontdek-grid-cell.is-active {
  box-shadow: inset 0 0 0 2px #111;
}

.ontdek-grid-cell:hover:not(.is-empty) {
  filter: brightness(1.08);
}

.ontdek-grid-subdots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  display: flex;
  justify-content: center;
  gap: 1.5px;
  pointer-events: none;
}

.ontdek-grid-subdots i {
  width: 2.5px;
  height: 2.5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  display: inline-block;
}

/* Preview card */
.ontdek-preview {
  margin-top: 12px;
  min-height: 108px;
  padding: 12px 14px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 12px;
  transition: background 200ms, border-color 200ms;
}

.ontdek-preview.is-placeholder { color: #aaa; font-style: italic; font-size: 11.5px; }
.ontdek-preview-placeholder { display: block; }

.ontdek-preview-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ontdek-preview-num {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 15px;
}

.ontdek-preview-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ontdek-preview-title {
  font-size: 13px;
  font-family: Georgia, serif;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ontdek-preview-vak {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.ontdek-preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.ontdek-preview-chip,
.ontdek-subchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 2px;
  background: white;
  border: 1px solid #e3e3e3;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  line-height: 1.2;
  color: #222;
}

.ontdek-preview-chip:hover,
.ontdek-subchip:hover {
  background: var(--vak-tint, #f5f5f5);
  border-color: var(--vak-color, #999);
}

.ontdek-preview-letter,
.ontdek-subchip-letter {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  color: white;
  background: var(--vak-color, #666);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 9.5px;
}

.ontdek-preview-page,
.ontdek-subchip-page {
  color: #aaa;
  font-size: 9.5px;
}

.ontdek-tip {
  margin-top: 14px;
  padding: 11px 13px;
  background: #FFFBEB;
  border: 1px solid #F5E2A5;
  border-radius: 12px;
  font-size: 11.5px;
  color: #6A4D00;
  line-height: 1.55;
}

.ontdek-tip-strong { font-weight: 700; }

/* Results */
.ontdek-results-head {
  font-size: 10px;
  font-weight: 700;
  color: #999;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
  padding: 0 2px;
}

.ontdek-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ontdek-result {
  --vak-color: #222;
  --vak-tint: #f5f5f5;
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}

.ontdek-result.is-active {
  background: var(--vak-tint);
  border: 1.5px solid var(--vak-color);
}

.ontdek-result-main {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: #222;
}

.ontdek-result-num {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--vak-color);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  font-family: Georgia, serif;
}

.ontdek-result-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ontdek-result-title {
  font-size: 13.5px;
  font-weight: 600;
  font-family: Georgia, serif;
  line-height: 1.25;
  color: #222;
}

.ontdek-result-title mark {
  background: #FFE680;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

.ontdek-result-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #888;
}

.ontdek-result-vak {
  color: var(--vak-color);
  font-weight: 700;
  letter-spacing: 0.4px;
}

.ontdek-result-arrow {
  align-self: center;
  color: #bbb;
  font-size: 14px;
}

.ontdek-subchips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 10px 10px 64px;
}

.ontdek-subchip-body { font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ontdek-subchip-body mark { background: #FFE680; padding: 0 1px; border-radius: 2px; }

.ontdek-empty {
  padding: 32px 12px;
  text-align: center;
  color: #999;
  font-size: 13px;
}

.ontdek-empty-icon {
  font-size: 28px;
  margin-bottom: 6px;
  opacity: 0.5;
}

.ontdek-empty-q { font-weight: 600; }

/* Ontdek variant switcher (chip selector) */
.ontdek-variant-switcher {
  display: flex;
  gap: 4px;
  background: #f3f3f3;
  padding: 3px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.ontdek-variant-btn {
  flex: 1;
  padding: 6px 0;
  border: none;
  border-radius: 7px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  color: #777;
  cursor: pointer;
  transition: background 120ms, color 120ms, box-shadow 120ms;
}

.ontdek-variant-btn.is-active {
  background: white;
  color: #222;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ontdek-variant-btn:hover:not(.is-active) {
  color: #444;
}

/* ───────── Alfabet variant ───────── */
.ontdek-alfabet {
  display: flex;
  gap: 4px;
}

.ontdek-alfabet-list {
  flex: 1;
  min-width: 0;
}

.ontdek-alfabet-group {
  display: flex;
  flex-direction: column;
}

.ontdek-alfabet-letter {
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  color: #bbb;
  padding: 8px 4px 4px;
  border-bottom: 1px solid #f3f3f3;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.ontdek-alfabet-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: #222;
  border-bottom: 1px solid #f8f8f8;
}

.ontdek-alfabet-row:hover {
  background: #fafafa;
}

.ontdek-alfabet-row.is-active {
  background: var(--vak-tint, #f5f5f5);
}

.ontdek-alfabet-bar {
  width: 4px;
  align-self: stretch;
  background: var(--vak-color, #ccc);
  border-radius: 2px;
}

.ontdek-alfabet-row--sub .ontdek-alfabet-bar {
  background: color-mix(in srgb, var(--vak-color, #ccc) 55%, transparent);
}

.ontdek-alfabet-num {
  width: 26px;
  font-size: 11px;
  color: var(--vak-color, #666);
  font-weight: 700;
  font-family: Georgia, serif;
  text-align: right;
  flex: 0 0 26px;
}

.ontdek-alfabet-title {
  flex: 1;
  font-size: 13px;
  font-family: Georgia, serif;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ontdek-alfabet-title mark,
.ontdek-alfabet-subtitle mark {
  background: #FFE680;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

.ontdek-alfabet-page {
  font-size: 10px;
  color: #bbb;
  flex: 0 0 auto;
}

.ontdek-alfabet-row--sub {
  padding-left: 18px;
}

.ontdek-alfabet-letterbadge {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--vak-color, #666);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 10px;
  flex: 0 0 22px;
}

.ontdek-alfabet-subtitle {
  flex: 1;
  font-size: 12px;
  font-family: Georgia, serif;
  font-weight: 400;
  color: #444;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ontdek-alfabet-parent {
  color: #bbb;
  font-size: 10.5px;
  margin-left: 6px;
}

.ontdek-alfabet-scrubber {
  width: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 10px 0 16px;
  background: #fff;
  position: sticky;
  top: 0;
  align-self: flex-start;
}

.ontdek-alfabet-scrub-btn {
  font-size: 9.5px;
  font-weight: 700;
  color: #666;
  background: transparent;
  border: none;
  border-radius: 4px;
  width: 18px;
  height: 14px;
  cursor: pointer;
  padding: 0;
  font-family: ui-monospace, monospace;
}

.ontdek-alfabet-scrub-btn:disabled {
  color: #ddd;
  cursor: default;
}

.ontdek-alfabet-scrub-btn.is-active {
  background: #FFE680;
  color: #222;
}

/* ───────── Keypad variant ───────── */
.ontdek-keypad-wrap {
  padding: 4px 14px 24px;
}

.ontdek-keypad-hint {
  font-size: 10px;
  font-weight: 700;
  color: #999;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.ontdek-keypad-display {
  border-radius: 14px;
  padding: 16px;
  border: 1.5px solid #ececec;
  background: #fafafa;
  margin-bottom: 12px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background 200ms, border-color 200ms;
}

.ontdek-keypad-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.ontdek-keypad-digits {
  font-size: 56px;
  font-weight: 700;
  font-family: Georgia, serif;
  line-height: 1;
  letter-spacing: -2px;
  min-width: 80px;
  color: #ccc;
}

.ontdek-keypad-body {
  flex: 1;
  min-width: 0;
}

.ontdek-keypad-title {
  font-size: 13px;
  font-weight: 600;
  font-family: Georgia, serif;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ontdek-keypad-meta {
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

.ontdek-keypad-empty {
  font-size: 11.5px;
  color: #bbb;
  line-height: 1.5;
}

.ontdek-keypad-subs {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed transparent;
}

.ontdek-keypad-subs-head {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  margin-bottom: 5px;
}

.ontdek-keypad-subchips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.ontdek-keypad-cands {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.ontdek-keypad-cand {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #eee;
  background: white;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  font: inherit;
  line-height: 1.3;
}

.ontdek-keypad-cand:hover { background: #f7f7f7; }

.ontdek-keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ontdek-keypad-key {
  padding: 16px 0;
  border: 1.5px solid #eaeaea;
  background: white;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 600;
  color: #222;
  font-family: Georgia, serif;
  cursor: pointer;
  transition: background 100ms, transform 80ms;
}

.ontdek-keypad-key:hover {
  background: #f7f7f7;
}

.ontdek-keypad-key:active {
  background: #f0f0f0;
  transform: scale(0.97);
}

.ontdek-keypad-key.is-muted {
  color: #999;
  font-family: system-ui, sans-serif;
  font-size: 20px;
}

.ontdek-keypad-open {
  margin-top: 12px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 12px;
  background: #ececec;
  color: #999;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 200ms;
}

.ontdek-keypad-open:not(:disabled):hover {
  filter: brightness(1.05);
}

.ontdek-keypad-open:disabled {
  cursor: default;
}

.ontdek-keypad-recent {
  margin-top: 14px;
}