/* popup-views.css — auto-generated from popup.css for downstream embedding (lockdown sidepanel host).
   All rules scoped under #leksihjelp-sidepanel-root so the file is safe to inject into a host page.
   Drops body/html/.app rules. Keeps :root variables under the host scope.
   Source: extension/styles/popup.css — DO NOT EDIT THIS FILE BY HAND. */

/* ── Leksihjelp Popup — Glassmorphism Theme ── */#leksihjelp-sidepanel-root {
  --bg: #f0f2f5;
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  --blur: 12px;
  --accent: #11B49A;
  --accent-light: #7CC7A6;
  --accent-bg: rgba(17, 180, 154, 0.08);
  --text: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --success: #22c55e;
  --error: #ef4444;
  --radius: 12px;
  --radius-sm: 8px;
}#leksihjelp-sidepanel-root * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}#leksihjelp-sidepanel-root :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Glass utility ── */#leksihjelp-sidepanel-root .glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
}#leksihjelp-sidepanel-root .glass-subtle {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
}

/* ── Header ── */#leksihjelp-sidepanel-root .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
}#leksihjelp-sidepanel-root .logo {
  display: flex;
  align-items: center;
  gap: 8px;
}#leksihjelp-sidepanel-root .logo-icon {
  font-size: 20px;
}#leksihjelp-sidepanel-root .logo h1 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
}#leksihjelp-sidepanel-root .header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}#leksihjelp-sidepanel-root .icon-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}#leksihjelp-sidepanel-root .icon-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Skriv (pencil) button: hidden by default — shown only once the user has
   searched something AND the inline "Trenger du et sted å skrive?" placeholder
   prompt is gone. While the placeholder is still showing, the inline link is
   doing the same job, so the header pencil would just be visual noise. */#leksihjelp-sidepanel-root #skriv-btn { display: none; }#leksihjelp-sidepanel-root .app:has(#view-dictionary.active.has-searched) #skriv-btn {
  display: flex;
}

/* First-run Fest onboarding callout. Sits below the header pointing at the
   Fest button (right side of header). One-shot — gated by a storage flag in
   popup.js#initFestOnboarding so it only appears once per install. */#leksihjelp-sidepanel-root .fest-onboarding {
  position: relative;
  margin: 8px 12px 0;
  padding: 12px 32px 12px 14px;
  background: var(--accent, #15a37f);
  color: white;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  z-index: 50;
  animation: fest-onboarding-pop 280ms ease-out;
}#leksihjelp-sidepanel-root .fest-onboarding[hidden] { display: none; }#leksihjelp-sidepanel-root .fest-onboarding::before {
  content: '';
  position: absolute;
  top: -8px;
  /* Arrow points up at the Fest button (centred between Skriv and Settings
     in the header-actions row). 110px from right matches the button position
     for the 380px-wide popup. */
  right: 110px;
  width: 14px;
  height: 14px;
  background: var(--accent, #15a37f);
  transform: rotate(45deg);
  border-radius: 2px;
}#leksihjelp-sidepanel-root .fest-onboarding-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
}#leksihjelp-sidepanel-root .fest-onboarding-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.95;
}#leksihjelp-sidepanel-root .fest-onboarding-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: transparent;
  border: 0;
  color: white;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}#leksihjelp-sidepanel-root .fest-onboarding-close:hover { background: rgba(255, 255, 255, 0.15); }
@keyframes fest-onboarding-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Pin (Fest) Button ── */#leksihjelp-sidepanel-root .pin-btn {
  gap: 4px;
  padding: 5px 10px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  animation: pin-pulse 2s ease-in-out infinite;
}#leksihjelp-sidepanel-root .pin-btn .pin-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

@keyframes pin-pulse {

  0%,
  100% {
    background: rgba(255, 255, 255, 0.2);
  }

  50% {
    background: rgba(255, 255, 255, 0.4);
  }
}

/* ── Pin Overlay ── */#leksihjelp-sidepanel-root .pin-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}#leksihjelp-sidepanel-root .pin-overlay.hidden {
  display: none;
}

/* ── Language Picker (first-run) ── */#leksihjelp-sidepanel-root .language-picker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}#leksihjelp-sidepanel-root .language-picker.hidden {
  display: none;
}#leksihjelp-sidepanel-root .language-picker-content {
  padding: 24px;
  max-width: 320px;
  text-align: center;
  width: 100%;
}#leksihjelp-sidepanel-root .language-picker-content h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
}#leksihjelp-sidepanel-root .language-picker-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}#leksihjelp-sidepanel-root .lang-pick-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}#leksihjelp-sidepanel-root .lang-pick-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .lang-pick-btn:disabled {
  opacity: 0.5;
  cursor: default;
}#leksihjelp-sidepanel-root .lang-pick-flag {
  font-size: 24px;
}#leksihjelp-sidepanel-root .lang-pick-name {
  font-size: 15px;
  font-weight: 600;
}#leksihjelp-sidepanel-root .btn-link {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  padding: 8px;
  text-decoration: underline;
}#leksihjelp-sidepanel-root .btn-link:hover {
  color: var(--accent);
}

/* ── Grammar Picker (first-run step 2) ── */#leksihjelp-sidepanel-root #grammar-picker {
  text-align: center;
}#leksihjelp-sidepanel-root #grammar-picker h2 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
}#leksihjelp-sidepanel-root .grammar-pick-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}#leksihjelp-sidepanel-root .grammar-pick-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s;
}#leksihjelp-sidepanel-root .grammar-pick-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .grammar-pick-name {
  font-size: 15px;
  font-weight: 600;
}

/* ── Language List (settings) ── */#leksihjelp-sidepanel-root .language-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}#leksihjelp-sidepanel-root .lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  font-size: 13px;
}#leksihjelp-sidepanel-root .lang-option:hover {
  background: rgba(17, 180, 154, 0.05);
  border-color: rgba(17, 180, 154, 0.2);
}#leksihjelp-sidepanel-root .lang-option.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .lang-option.active .lang-option-status {
  color: rgba(255, 255, 255, 0.7);
}#leksihjelp-sidepanel-root .lang-option.downloading {
  opacity: 0.7;
  cursor: wait;
}#leksihjelp-sidepanel-root .lang-option-flag {
  font-size: 18px;
  flex-shrink: 0;
}#leksihjelp-sidepanel-root .lang-option-name {
  font-weight: 600;
  flex: 1;
}#leksihjelp-sidepanel-root .lang-option-status {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}#leksihjelp-sidepanel-root .lang-option-status.needs-download {
  color: #f59e0b;
}#leksihjelp-sidepanel-root .lang-option-status.downloading {
  color: var(--accent);
}#leksihjelp-sidepanel-root .ui-lang-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}#leksihjelp-sidepanel-root .ui-lang-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 13px;
  font-weight: 600;
}#leksihjelp-sidepanel-root .ui-lang-option:hover {
  background: rgba(17, 180, 154, 0.05);
  border-color: rgba(17, 180, 154, 0.2);
}#leksihjelp-sidepanel-root .ui-lang-option.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .lang-option-row {
  display: flex;
  gap: 4px;
}#leksihjelp-sidepanel-root .lang-option-row .lang-option {
  flex: 1;
}#leksihjelp-sidepanel-root .lang-delete-btn {
  padding: 0 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.4);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
  flex-shrink: 0;
}#leksihjelp-sidepanel-root .lang-delete-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}#leksihjelp-sidepanel-root .pin-overlay-content {
  padding: 20px;
  max-width: 320px;
  text-align: center;
}#leksihjelp-sidepanel-root .pin-overlay-content h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--accent);
}#leksihjelp-sidepanel-root .pin-steps {
  text-align: left;
  margin-bottom: 16px;
}#leksihjelp-sidepanel-root .pin-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.4;
}#leksihjelp-sidepanel-root .pin-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}#leksihjelp-sidepanel-root .pin-dismiss-btn {
  width: 100%;
}

/* ── Search ── */#leksihjelp-sidepanel-root .search-container {
  padding: 12px 16px 8px;
}#leksihjelp-sidepanel-root .search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}#leksihjelp-sidepanel-root .search-icon {
  flex-shrink: 0;
  color: var(--text-muted);
}#leksihjelp-sidepanel-root #search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--text);
  outline: none;
}#leksihjelp-sidepanel-root #search-input:focus-visible {
  outline: none;
}#leksihjelp-sidepanel-root .search-bar:focus-within {
  border-color: var(--accent);
}#leksihjelp-sidepanel-root #search-input::placeholder {
  color: var(--text-muted);
}#leksihjelp-sidepanel-root .search-clear {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}#leksihjelp-sidepanel-root .search-clear:hover {
  color: var(--text);
}

/* ── Language Switcher (front page) ── */#leksihjelp-sidepanel-root .lang-switcher {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 2px 0;
}#leksihjelp-sidepanel-root .lang-switcher:empty {
  display: none;
}#leksihjelp-sidepanel-root .lang-switch-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}#leksihjelp-sidepanel-root .lang-switch-btn:hover {
  background: rgba(17, 180, 154, 0.05);
  border-color: rgba(17, 180, 154, 0.2);
}#leksihjelp-sidepanel-root .lang-switch-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Mid-switch: the pill is already painted active, and a travelling sheen runs
   across it while the language bundle parses (de.json is ~11.7 MB, so this is
   a real 1–2 s wait). Movement is the point — a static style would still leave
   the student wondering whether the tap registered. */#leksihjelp-sidepanel-root .lang-switch-btn.busy {
  position: relative;
  overflow: hidden;
  cursor: progress;
}#leksihjelp-sidepanel-root .lang-switch-btn.busy::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: lang-switch-sheen 900ms ease-in-out infinite;
}

@keyframes lang-switch-sheen {
  to { transform: translateX(100%); }
}

/* Respect a reduced-motion preference: keep a visible busy state, drop the
   travelling animation. */
@media (prefers-reduced-motion: reduce) {#leksihjelp-sidepanel-root .lang-switch-btn.busy::after {
    animation: none;
    transform: none;
    background: rgba(255, 255, 255, 0.25);
  }
}#leksihjelp-sidepanel-root .lang-switch-flag {
  font-size: 14px;
}

/* ── FL consolidation (Plan 41-01) ──────────────────────────────────
   The FL pill (de/fr/es) carries a small ▾ chevron when consolidated.
   Right-click (or long-tap) opens .lang-fl-dropdown with the other
   foreign-language options. */#leksihjelp-sidepanel-root .lang-switch-btn.is-fl .lang-switch-chevron {
  font-size: 10px;
  opacity: 0.7;
  margin-left: 2px;
}

/* ── First-FL placeholder pill ──────────────────────────────────────
   Rendered when the student hasn't picked a foreign language yet
   (studentForeignLang unset + currentLang is non-FL). Replaces the
   arbitrary-FL default so the pill row doesn't lie about a choice
   the student hasn't made. Click → onFirstFLPick → modal. */#leksihjelp-sidepanel-root .lang-switch-btn.is-fl-placeholder {
  background: rgba(17, 180, 154, 0.08);
  border-style: dashed;
  border-color: rgba(17, 180, 154, 0.5);
  color: var(--accent);
  font-style: italic;
}#leksihjelp-sidepanel-root .lang-switch-btn.is-fl-placeholder:hover {
  background: rgba(17, 180, 154, 0.16);
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .lang-fl-dropdown {
  z-index: 30;
  min-width: 140px;
  background: var(--card-bg, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}#leksihjelp-sidepanel-root .lang-fl-dropdown-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #3B3B3B);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}#leksihjelp-sidepanel-root .lang-fl-dropdown-item:hover {
  background: rgba(17, 180, 154, 0.08);
  border-color: rgba(17, 180, 154, 0.25);
}#leksihjelp-sidepanel-root .lang-fl-dropdown-item.active {
  background: var(--accent, #11B49A);
  color: white;
}#leksihjelp-sidepanel-root .lang-fl-dropdown-check {
  margin-left: auto;
  font-weight: 700;
}[data-theme="dark"] #leksihjelp-sidepanel-root .lang-fl-dropdown {
  background: #1f2937;
  border-color: rgba(255, 255, 255, 0.08);
}[data-theme="dark"] #leksihjelp-sidepanel-root .lang-fl-dropdown-item {
  color: rgba(255, 255, 255, 0.85);
}[data-theme="dark"] #leksihjelp-sidepanel-root .lang-fl-dropdown-item:hover {
  background: rgba(17, 180, 154, 0.15);
}#leksihjelp-sidepanel-root .search-direction {
  display: flex;
  overflow: hidden;
}#leksihjelp-sidepanel-root .dir-btn {
  flex: 1;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}#leksihjelp-sidepanel-root .dir-btn.active {
  background: var(--accent);
  color: white;
  border-radius: var(--radius-sm);
}

/* ── Results ── */#leksihjelp-sidepanel-root .results {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px 12px;
}#leksihjelp-sidepanel-root .results-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--text-muted);
  text-align: center;
  gap: 16px;
}#leksihjelp-sidepanel-root .cross-lang-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}#leksihjelp-sidepanel-root .cross-lang-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}#leksihjelp-sidepanel-root .cross-lang-text {
  font-size: 13px;
  color: var(--text);
}#leksihjelp-sidepanel-root .cross-lang-btn {
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}#leksihjelp-sidepanel-root .cross-lang-btn:hover {
  filter: brightness(1.1);
}#leksihjelp-sidepanel-root .cross-standard-note { font-size: 12px; color: #64748b; margin-bottom: 4px; }#leksihjelp-sidepanel-root .cross-standard-switch { background: none; border: none; color: #11B49A; font-size: 12px; cursor: pointer; padding: 2px 0; }#leksihjelp-sidepanel-root .cross-standard-switch:hover { text-decoration: underline; }#leksihjelp-sidepanel-root .wish-word-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  margin-top: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.02);
}#leksihjelp-sidepanel-root .wish-word-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}
/* Known-form notice (v3.0.127): the missed query IS a valid word per the
   spell-check accept-list — reassure the student before the wish button. */#leksihjelp-sidepanel-root .wish-word-known {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}#leksihjelp-sidepanel-root .wish-word-ext-link {
  display: inline-block;
  margin: 4px 0 8px;
  font-size: 13px;
  color: var(--color-accent, #2563eb);
  text-decoration: underline;
}#leksihjelp-sidepanel-root .wish-word-btn {
  padding: 6px 14px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  color: #1e293b;
  transition: background 0.15s;
}#leksihjelp-sidepanel-root .wish-word-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
}#leksihjelp-sidepanel-root .wish-word-btn:disabled {
  opacity: 0.5;
  cursor: default;
}#leksihjelp-sidepanel-root .wish-word-sent {
  margin: 0;
  font-size: 13px;
  color: #16a34a;
  font-weight: 500;
}#leksihjelp-sidepanel-root .skriv-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(17, 180, 154, 0.06);
  border: 1px solid rgba(17, 180, 154, 0.15);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 12px;
  transition: background 0.15s;
}#leksihjelp-sidepanel-root .skriv-link:hover {
  background: rgba(17, 180, 154, 0.12);
}#leksihjelp-sidepanel-root .skriv-link-icon {
  font-size: 16px;
}#leksihjelp-sidepanel-root .skriv-link span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}#leksihjelp-sidepanel-root .skriv-link-text {
  font-weight: 500;
  color: #11B49A;
}#leksihjelp-sidepanel-root .skriv-link-note {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
}#leksihjelp-sidepanel-root .fallback-hint {
  padding: 8px 14px;
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--text-secondary);
  background: rgba(17, 180, 154, 0.06);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}#leksihjelp-sidepanel-root .result-card {
  padding: 12px;
  margin-bottom: 8px;
  transition: transform 0.15s;
}#leksihjelp-sidepanel-root .result-card:hover {
  transform: translateY(-1px);
}#leksihjelp-sidepanel-root .result-basic {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}#leksihjelp-sidepanel-root .result-word-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Every allowed spelling of a headword is a `.result-word` — one class, so
   the equal treatment §15-4 requires cannot be undone by a later rule that
   only knows about "the first one". Do NOT add :first-child styling here. */#leksihjelp-sidepanel-root .result-word {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}

/* Separator between likestilte skrivemåter in the head (vei / veg). Muted so
   it reads as punctuation, never as one form pointing at another. */#leksihjelp-sidepanel-root .result-word-sep {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted, #888);
  margin: 0 -2px;
}

/* Bøyingstabell with one column per allowed form. Four-spelling words
   (nynorsk «ønske») overflow a narrow popup; scroll the table rather than
   shrink the later columns, which would favour the earlier ones. */#leksihjelp-sidepanel-root .likestilte-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* macOS hides overlay scrollbars until something scrolls, so a four-spelling
     table showed «bjerkeskau» clipped to 28 % of its column with NOTHING on
     screen to say a fourth form existed. Measured 2026-08-17 on «bjørkeskog»:
     wrapper 394 px, table 461 px, 67 px hidden — identical at 1280, 1440 and
     1920, because the 460 px results column caps it and not the screen.
     A permanently visible track is the neutral mitigation: it changes no
     column's width, colour or weight, so the § 15-4 reasoning above still
     holds, and the reader can at least see that the row continues. It does
     NOT make the fourth form as visible as the first — that needs a layout
     decision, and it is recorded in the approval log rather than guessed at
     here.

     NB: do not add `scrollbar-width: thin` here. Chromium honours the standard
     property and then ignores the ::-webkit-scrollbar rules below, which puts
     the overlay scrollbar back and undoes the whole point — measured, not
     assumed. */
}#leksihjelp-sidepanel-root .likestilte-scroll::-webkit-scrollbar {
  height: 8px;
}#leksihjelp-sidepanel-root .likestilte-scroll::-webkit-scrollbar-track {
  background: transparent;
}#leksihjelp-sidepanel-root .likestilte-scroll::-webkit-scrollbar-thumb {
  background: var(--text-muted, #888);
  border-radius: 4px;
}

/* Neutralise the two-column inheritance. `.conjugation-table td:last-child`
   paints the value column with the accent colour, which is right for a
   label/value table but is exactly the graphic favouring § 15-4 forbids once
   the columns are RIVAL SPELLINGS: it would green `veg` and leave `vei` plain.
   Every form cell here is identical, whatever its position. */#leksihjelp-sidepanel-root .likestilte-table td {
  color: var(--text);
  font-weight: 400;
}

/* Column headers are the spellings themselves — all of them get the accent,
   none of them alone. */#leksihjelp-sidepanel-root .likestilte-table th[scope="col"] {
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}#leksihjelp-sidepanel-root .likestilte-table th[scope="row"] {
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}#leksihjelp-sidepanel-root .likestilte-table td {
  white-space: nowrap;
}#leksihjelp-sidepanel-root .likestilte-note {
  font-size: 12px;
  color: var(--text-muted, #888);
  margin: 0 0 6px;
}#leksihjelp-sidepanel-root .audio-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s ease;
}#leksihjelp-sidepanel-root .audio-btn:hover {
  background: var(--accent);
  color: white;
}#leksihjelp-sidepanel-root .audio-btn.playing {
  background: var(--accent);
  color: white;
}#leksihjelp-sidepanel-root .result-translation {
  font-size: 14px;
  color: var(--text);
}#leksihjelp-sidepanel-root .senses-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0;
}#leksihjelp-sidepanel-root .sense-item {
  padding: 6px 8px;
  border-left: 3px solid var(--accent);
  background: rgba(0, 0, 0, 0.02);
  border-radius: 4px;
}#leksihjelp-sidepanel-root .sense-trigger {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 2px;
}#leksihjelp-sidepanel-root .sense-forms {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}#leksihjelp-sidepanel-root .sense-example {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}#leksihjelp-sidepanel-root .sense-example-src {
  font-style: italic;
}[data-theme="dark"] #leksihjelp-sidepanel-root .sense-item {
  background: rgba(255, 255, 255, 0.04);
}#leksihjelp-sidepanel-root .false-friend-banner {
  margin: 6px 0 4px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fff4d6;
  border-left: 3px solid #e0a800;
  font-size: 12px;
  line-height: 1.35;
}#leksihjelp-sidepanel-root .false-friend-heading {
  display: block;
  font-weight: 600;
  color: #7a5a00;
  margin-bottom: 4px;
}#leksihjelp-sidepanel-root .false-friend-item + .false-friend-item {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}#leksihjelp-sidepanel-root .false-friend-form {
  font-style: italic;
  font-weight: 600;
  color: var(--text);
}#leksihjelp-sidepanel-root .false-friend-meaning {
  color: var(--text-muted);
  margin-left: 6px;
}#leksihjelp-sidepanel-root .false-friend-warning {
  margin: 4px 0 0;
  color: var(--text);
}[data-theme="dark"] #leksihjelp-sidepanel-root .false-friend-banner {
  background: rgba(224, 168, 0, 0.12);
  border-left-color: #e0a800;
}[data-theme="dark"] #leksihjelp-sidepanel-root .false-friend-heading {
  color: #ffcf55;
}#leksihjelp-sidepanel-root .false-friend-les-mer-btn {
  display: inline-block;
  margin-top: 6px;
  background: none;
  border: none;
  color: #7a5a00;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}#leksihjelp-sidepanel-root .false-friend-les-mer-btn:hover {
  opacity: 0.8;
}[data-theme="dark"] #leksihjelp-sidepanel-root .false-friend-les-mer-btn {
  color: #ffcf55;
}#leksihjelp-sidepanel-root .inflection-hint {
  font-size: 12px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 5px 8px;
  margin: 4px 0 6px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}#leksihjelp-sidepanel-root .inflection-grunnform-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  opacity: 0.8;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}#leksihjelp-sidepanel-root .inflection-grunnform-btn:hover {
  opacity: 1;
}#leksihjelp-sidepanel-root .result-meta {
  width: 100%;
  display: flex;
  gap: 6px;
  margin-top: 2px;
}#leksihjelp-sidepanel-root .result-pos, #leksihjelp-sidepanel-root .result-gender {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 500;
}#leksihjelp-sidepanel-root .explore-btn {
  display: block;
  margin-top: 8px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
}#leksihjelp-sidepanel-root .explore-btn:hover {
  text-decoration: underline;
}#leksihjelp-sidepanel-root .result-expanded {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(17, 180, 154, 0.15);
}#leksihjelp-sidepanel-root .expanded-section {
  margin-bottom: 10px;
}#leksihjelp-sidepanel-root .expanded-section:last-child {
  margin-bottom: 0;
}#leksihjelp-sidepanel-root .expanded-section h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}#leksihjelp-sidepanel-root .expanded-section p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}#leksihjelp-sidepanel-root .example {
  margin-bottom: 6px;
}#leksihjelp-sidepanel-root .example-sentence {
  font-style: italic;
  color: var(--text);
}#leksihjelp-sidepanel-root .example-translation {
  color: var(--text-muted);
  font-size: 12px;
}

/* Plural badge */#leksihjelp-sidepanel-root .result-plural {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(34, 197, 94, 0.08);
  color: #16a34a;
  font-weight: 500;
}#leksihjelp-sidepanel-root .result-cefr {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(17, 180, 154, 0.08);
  color: #11B49A;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ── Compound Card (Phase 17) ── */#leksihjelp-sidepanel-root .compound-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
  font-weight: 600;
}#leksihjelp-sidepanel-root .compound-breakdown {
  margin: 10px 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.6;
}#leksihjelp-sidepanel-root .compound-breakdown-sep {
  color: var(--text-muted);
  font-weight: 400;
  padding: 0 2px;
}#leksihjelp-sidepanel-root .compound-components {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}#leksihjelp-sidepanel-root .compound-component-btn {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid rgba(17, 180, 154, 0.25);
  border-radius: 6px;
  background: rgba(17, 180, 154, 0.06);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}#leksihjelp-sidepanel-root .compound-component-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}[data-theme="dark"] #leksihjelp-sidepanel-root .compound-badge {
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
}[data-theme="dark"] #leksihjelp-sidepanel-root .compound-component-btn {
  background: rgba(17, 180, 154, 0.1);
  border-color: rgba(17, 180, 154, 0.3);
}

/* Phase 24 COMP-01: Compound suggestions */#leksihjelp-sidepanel-root .compound-suggestions-heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  padding: 0 2px;
}#leksihjelp-sidepanel-root .compound-suggestion {
  cursor: pointer;
  transition: all 0.15s;
}#leksihjelp-sidepanel-root .compound-suggestion:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(17, 180, 154, 0.12);
}#leksihjelp-sidepanel-root .compound-breakdown-compact {
  margin: 6px 0 0;
  font-size: 13px;
}

/* Phase 24 COMP-02: Pedagogy note */#leksihjelp-sidepanel-root .compound-pedagogy {
  margin: 10px 0 6px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}#leksihjelp-sidepanel-root .compound-pedagogy-link {
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}#leksihjelp-sidepanel-root .compound-pedagogy-link:hover {
  text-decoration-style: solid;
}

/* Phase 24 COMP-04: Translation guess */#leksihjelp-sidepanel-root .compound-guess {
  margin: 8px 0 4px;
  padding: 8px 10px;
  background: rgba(124, 58, 237, 0.04);
  border-radius: var(--radius-sm);
  border-left: 3px solid rgba(124, 58, 237, 0.3);
}#leksihjelp-sidepanel-root .compound-guess-label {
  font-size: 11px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 2px;
}#leksihjelp-sidepanel-root .compound-guess-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

/* Tier-3 (possible-compound) meaning helper: clickable part chips prompting
   the student to look up each component's dictionary entry. */#leksihjelp-sidepanel-root .compound-meaning-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}#leksihjelp-sidepanel-root .compound-meaning-part {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid rgba(17, 180, 154, 0.25);
  border-radius: 6px;
  background: rgba(17, 180, 154, 0.06);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}#leksihjelp-sidepanel-root .compound-meaning-part:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}[data-theme="dark"] #leksihjelp-sidepanel-root .compound-meaning-part {
  background: rgba(17, 180, 154, 0.1);
  border-color: rgba(17, 180, 154, 0.3);
}

/* Inline compound breakdown shown on an article card (barnehage → barn+e+hage) */#leksihjelp-sidepanel-root .compound-inline-breakdown {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  font-size: 13px;
}#leksihjelp-sidepanel-root .compound-inline-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}#leksihjelp-sidepanel-root .compound-inline-part {
  padding: 2px 9px;
  border: 1px solid rgba(17, 180, 154, 0.25);
  border-radius: 5px;
  background: rgba(17, 180, 154, 0.06);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}#leksihjelp-sidepanel-root .compound-inline-part:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .compound-inline-fuge {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}#leksihjelp-sidepanel-root .compound-inline-sep {
  color: var(--text-muted);
  font-size: 12px;
}[data-theme="dark"] #leksihjelp-sidepanel-root .compound-inline-part {
  background: rgba(17, 180, 154, 0.1);
  border-color: rgba(17, 180, 154, 0.3);
}

/* Tier-3 compound vote — "is this a real compound?" student feedback */#leksihjelp-sidepanel-root .compound-vote {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
  font-size: 12px;
}#leksihjelp-sidepanel-root .compound-vote-prompt {
  color: var(--text-secondary);
}#leksihjelp-sidepanel-root .compound-vote-btns {
  display: flex;
  gap: 6px;
}#leksihjelp-sidepanel-root .compound-vote-btn {
  padding: 3px 12px;
  border: 1px solid rgba(17, 180, 154, 0.3);
  border-radius: 6px;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}#leksihjelp-sidepanel-root .compound-vote-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .compound-vote-thanks {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}#leksihjelp-sidepanel-root .compound-vote-note {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Compound qualified-guess declension table (inflection follows last element) */#leksihjelp-sidepanel-root .compound-declension-guess {
  margin: 8px 0 4px;
  padding: 8px 10px;
  background: rgba(124, 58, 237, 0.04);
  border-radius: var(--radius-sm);
  border-left: 3px solid rgba(124, 58, 237, 0.3);
}#leksihjelp-sidepanel-root .compound-declension-guess .declension-table {
  margin-top: 4px;
}

/* Phase 24 COMP-03: Back-navigation */#leksihjelp-sidepanel-root .compound-back-link {
  display: inline-block;
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 8px;
  font-weight: 500;
}#leksihjelp-sidepanel-root .compound-back-link::before {
  content: "\2190 ";
}#leksihjelp-sidepanel-root .compound-back-link:hover {
  text-decoration: underline;
}[data-theme="dark"] #leksihjelp-sidepanel-root .compound-guess {
  background: rgba(124, 58, 237, 0.08);
  border-left-color: rgba(124, 58, 237, 0.4);
}

/* Conjugation table */#leksihjelp-sidepanel-root .conjugation-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}#leksihjelp-sidepanel-root .conjugation-table td {
  padding: 3px 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}#leksihjelp-sidepanel-root .conjugation-table td:first-child {
  color: var(--text-muted);
  font-weight: 500;
  width: 40%;
}

/* Accent the value column of a LABEL/VALUE conjugation table. Excluded for
   .likestilte-table, whose columns are rival spellings rather than one label
   and one value: there, accenting the last column greens `veg` and leaves
   `vei` plain — the graphic favouring Språkrådet § 15-4 forbids. The exclusion
   lives on this rule because it out-specifies any override
   (.conjugation-table td:last-child is 0-2-1; .likestilte-table td is 0-1-1). */#leksihjelp-sidepanel-root .conjugation-table:not(.likestilte-table) td:last-child {
  color: var(--accent);
  font-weight: 600;
}
/* Per-paradigm transitivity note in the preteritum cell (henge: hang
   «intransitiv» / hengte «transitiv»). */#leksihjelp-sidepanel-root .conjugation-table .conj-note {
  color: var(--text-muted);
  font-weight: 400;
  font-style: italic;
  font-size: 0.85em;
}
/* "Les mer →" link under the conjugation table → transitiv/intransitiv lesson. */#leksihjelp-sidepanel-root .conjugation-lesmer {
  margin-top: 6px;
}#leksihjelp-sidepanel-root .conj-transintr-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}#leksihjelp-sidepanel-root .conj-transintr-btn:hover {
  opacity: 0.8;
}#leksihjelp-sidepanel-root .conjugation-table tr:last-child td {
  border-bottom: none;
}

/* ── Views ── */#leksihjelp-sidepanel-root .view {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}#leksihjelp-sidepanel-root .view.active {
  display: flex;
}

/* Settings view needs to scroll */#leksihjelp-sidepanel-root #view-settings {
  overflow-y: auto;
}

/* Test view needs to scroll — findings list grows past the popup height. */#leksihjelp-sidepanel-root #view-test {
  overflow-y: auto;
}

/* Library view: keep the language picker pinned at top, scroll the lesson list.
   #view-library is the flex column (.view); the inner div holds the mounted
   list and must scroll (min-height:0 lets a flex child shrink below content). */#leksihjelp-sidepanel-root #view-library-inner {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ── Settings ── */#leksihjelp-sidepanel-root .settings-back {
  padding: 12px 16px 4px;
}#leksihjelp-sidepanel-root .text-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}#leksihjelp-sidepanel-root .text-btn:hover {
  text-decoration: underline;
}#leksihjelp-sidepanel-root .settings-group {
  margin: 8px 16px;
  padding: 14px;
}#leksihjelp-sidepanel-root .settings-group h3 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}#leksihjelp-sidepanel-root .settings-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Paused-sites list (settings) */#leksihjelp-sidepanel-root .paused-sites-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}#leksihjelp-sidepanel-root .paused-site-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 8px;
}#leksihjelp-sidepanel-root .paused-site-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}#leksihjelp-sidepanel-root .paused-site-host {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}#leksihjelp-sidepanel-root .paused-site-meta {
  font-size: 11px;
  color: var(--text-muted);
}#leksihjelp-sidepanel-root .paused-site-resume {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(17, 180, 154, 0.3);
  border-radius: 6px;
  background: transparent;
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
}#leksihjelp-sidepanel-root .paused-site-resume:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Min ordliste — personal word list (all languages) */#leksihjelp-sidepanel-root .personal-words-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}#leksihjelp-sidepanel-root .personal-words-lang {
  display: flex;
  flex-direction: column;
  gap: 6px;
}#leksihjelp-sidepanel-root .personal-words-lang-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}#leksihjelp-sidepanel-root .personal-words-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}#leksihjelp-sidepanel-root .personal-word-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 8px;
}

/* Vis alle / Vis færre — one per language block that exceeds the collapsed
   count. Deliberately a quiet text button, not a filled one: it sits under a
   list of the pupil's own words and must not outweigh them. */#leksihjelp-sidepanel-root .personal-words-toggle {
  align-self: flex-start;
  margin-top: 6px;
  padding: 4px 8px;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #0a7d55);
  cursor: pointer;
}#leksihjelp-sidepanel-root .personal-words-toggle:hover {
  background: var(--bg-alt, rgba(0,0,0,0.04));
}#leksihjelp-sidepanel-root .personal-words-toggle:focus-visible {
  outline: 2px solid var(--accent, #0a7d55);
  outline-offset: 2px;
}#leksihjelp-sidepanel-root .personal-word {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}#leksihjelp-sidepanel-root .personal-word-remove {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(17, 180, 154, 0.3);
  border-radius: 6px;
  background: transparent;
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
}#leksihjelp-sidepanel-root .personal-word-remove:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .personal-data-error {
  color: var(--error);
}#leksihjelp-sidepanel-root .settings-version {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  opacity: 0.7;
  margin: 12px 0 4px;
}#leksihjelp-sidepanel-root .report-select, #leksihjelp-sidepanel-root .report-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  color: var(--text);
  outline: none;
  margin-bottom: 8px;
  font-family: inherit;
  resize: vertical;
}#leksihjelp-sidepanel-root .report-select:focus, #leksihjelp-sidepanel-root .report-textarea:focus {
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .report-btn {
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}#leksihjelp-sidepanel-root .report-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}#leksihjelp-sidepanel-root .report-status {
  font-size: 12px;
  margin-top: 6px;
  min-height: 16px;
}#leksihjelp-sidepanel-root .report-ok { color: #22c55e; }#leksihjelp-sidepanel-root .report-err { color: #ef4444; }

/* ── Phase 27: Exam mode (badge + locked caption) ── */#leksihjelp-sidepanel-root .exam-mode-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: #f59e0b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
}#leksihjelp-sidepanel-root .exam-mode-badge[hidden] {
  display: none;
}#leksihjelp-sidepanel-root .exam-mode-locked-caption {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
}#leksihjelp-sidepanel-root .exam-mode-locked-caption[hidden] {
  display: none;
}#leksihjelp-sidepanel-root .exam-mode-dev-btn {
  display: block;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.7;
}#leksihjelp-sidepanel-root .exam-mode-dev-btn:hover {
  opacity: 1;
}#leksihjelp-sidepanel-root #exam-mode-toggle:disabled ~ .toggle-slider {
  opacity: 0.7;
  cursor: not-allowed;
}#leksihjelp-sidepanel-root #exam-mode-toggle:disabled {
  cursor: not-allowed;
}#leksihjelp-sidepanel-root .glass-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}#leksihjelp-sidepanel-root .glass-input:focus {
  border-color: var(--accent);
}#leksihjelp-sidepanel-root select.glass-input {
  cursor: pointer;
}#leksihjelp-sidepanel-root .code-input-row {
  display: flex;
  gap: 8px;
}#leksihjelp-sidepanel-root .code-input-row .glass-input {
  flex: 1;
}#leksihjelp-sidepanel-root .btn-primary {
  padding: 8px 14px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
}#leksihjelp-sidepanel-root .btn-primary:hover {
  opacity: 0.9;
}#leksihjelp-sidepanel-root .btn-primary:disabled {
  opacity: 0.5;
  cursor: default;
}#leksihjelp-sidepanel-root #subscribe-section .btn-primary {
  width: 100%;
  margin-top: 8px;
}#leksihjelp-sidepanel-root #logout-btn {
  margin-top: 10px;
}#leksihjelp-sidepanel-root .settings-note {
  margin-top: 4px;
}#leksihjelp-sidepanel-root .btn-secondary {
  padding: 8px 14px;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid rgba(17, 180, 154, 0.2);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}#leksihjelp-sidepanel-root .btn-secondary:disabled {
  opacity: 0.5;
  cursor: default;
}#leksihjelp-sidepanel-root .code-status {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
}#leksihjelp-sidepanel-root .code-status.success {
  color: var(--success);
}#leksihjelp-sidepanel-root .code-status.error {
  color: var(--error);
}

/* Toggle */#leksihjelp-sidepanel-root .toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  cursor: pointer;
}#leksihjelp-sidepanel-root .toggle-row input[type="checkbox"] {
  display: none;
}#leksihjelp-sidepanel-root .toggle-slider {
  width: 40px;
  height: 22px;
  background: #cbd5e1;
  border-radius: 11px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}#leksihjelp-sidepanel-root .toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}#leksihjelp-sidepanel-root .toggle-row input:checked+.toggle-slider {
  background: var(--accent);
}#leksihjelp-sidepanel-root .toggle-row input:checked+.toggle-slider::after {
  transform: translateX(18px);
}

/* ── Grammar Presets ── */#leksihjelp-sidepanel-root .grammar-preset-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}#leksihjelp-sidepanel-root .grammar-preset-pill {
  flex: 1;
  padding: 7px 4px;
  border: 1.5px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.35);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}#leksihjelp-sidepanel-root .grammar-preset-pill:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .grammar-preset-pill.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .grammar-customize-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 6px;
  transition: color 0.15s;
}#leksihjelp-sidepanel-root .grammar-customize-btn:hover {
  color: var(--text);
}#leksihjelp-sidepanel-root .grammar-customize-arrow {
  font-size: 10px;
  transition: transform 0.2s;
}#leksihjelp-sidepanel-root .grammar-customize-btn.expanded .grammar-customize-arrow {
  transform: rotate(180deg);
}#leksihjelp-sidepanel-root .grammar-features-collapsed {
  display: none;
}#leksihjelp-sidepanel-root .grammar-features-expanded {
  display: block;
}

/* ── Grammar Settings ── */#leksihjelp-sidepanel-root .grammar-category {
  margin-bottom: 12px;
}#leksihjelp-sidepanel-root .grammar-category:last-child {
  margin-bottom: 0;
}#leksihjelp-sidepanel-root .grammar-category-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
}#leksihjelp-sidepanel-root .grammar-features-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}#leksihjelp-sidepanel-root .grammar-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}#leksihjelp-sidepanel-root .grammar-feature-item:hover {
  background: rgba(255, 255, 255, 0.6);
}#leksihjelp-sidepanel-root .grammar-feature-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}#leksihjelp-sidepanel-root .grammar-feature-name {
  font-size: 13px;
  color: var(--text);
}

/* ── Bottom Nav ── */#leksihjelp-sidepanel-root .bottom-nav {
  display: flex;
  border-radius: 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: none;
  border-left: none;
  border-right: none;
  background: var(--glass-bg);
}#leksihjelp-sidepanel-root .nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: color 0.2s;
}#leksihjelp-sidepanel-root .nav-btn.active {
  color: var(--accent);
}#leksihjelp-sidepanel-root .nav-btn:hover {
  color: var(--accent-light);
}

/* ── Pause nav button ── */#leksihjelp-sidepanel-root .pause-nav-btn {
  position: relative;
}#leksihjelp-sidepanel-root .pause-nav-btn.paused {
  color: var(--error);
}#leksihjelp-sidepanel-root .pause-nav-btn.paused .pause-icon {
  display: none;
}#leksihjelp-sidepanel-root .pause-nav-btn.paused .play-icon {
  display: block !important;
}#leksihjelp-sidepanel-root .pause-nav-btn:not(.paused) .play-icon {
  display: none;
}

/* Pause active indicator bar */#leksihjelp-sidepanel-root .pause-nav-btn.paused::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--error);
}

/* ── Keyboard shortcut list ── */#leksihjelp-sidepanel-root .shortcut-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}#leksihjelp-sidepanel-root .shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
}#leksihjelp-sidepanel-root .shortcut-row kbd {
  font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text);
  font-weight: 600;
}

/* ── Vipps Login ── */#leksihjelp-sidepanel-root .btn-vipps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: #ff5b24;
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}#leksihjelp-sidepanel-root .btn-vipps:hover {
  opacity: 0.9;
}#leksihjelp-sidepanel-root .btn-vipps:disabled {
  opacity: 0.5;
  cursor: default;
}#leksihjelp-sidepanel-root .btn-vipps svg {
  fill: white;
}

/* .btn-vipps sets display:flex, which otherwise beats the UA [hidden]
   rule's implicit display:none — without this, #acct-action stays
   visible (an empty orange pill) whenever the model's action.kind is
   'none'. */#leksihjelp-sidepanel-root .btn-vipps[hidden] {
  display: none;
}

/* Top-up button */#leksihjelp-sidepanel-root .btn-topup {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(17, 180, 154, 0.3);
  border-radius: 8px;
  background: rgba(17, 180, 154, 0.05);
  color: #11B49A;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}#leksihjelp-sidepanel-root .btn-topup:hover {
  background: rgba(17, 180, 154, 0.12);
}#leksihjelp-sidepanel-root .btn-topup:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Vipps yearly button */#leksihjelp-sidepanel-root .btn-secondary-vipps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
  padding: 10px 16px;
  border: 2px solid #11B49A;
  border-radius: 10px;
  background: white;
  color: #11B49A;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}#leksihjelp-sidepanel-root .btn-secondary-vipps:hover {
  background: #11B49A;
  color: white;
}#leksihjelp-sidepanel-root .btn-secondary-vipps:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── Legacy Code Section ── */#leksihjelp-sidepanel-root .legacy-code-section {
  margin-top: 10px;
}#leksihjelp-sidepanel-root .legacy-code-toggle {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 0;
}#leksihjelp-sidepanel-root .legacy-code-toggle:hover {
  color: var(--text-secondary);
}#leksihjelp-sidepanel-root .legacy-code-content {
  margin-top: 8px;
}

/* ── User Info ── */#leksihjelp-sidepanel-root .user-info {
  margin-bottom: 8px;
}#leksihjelp-sidepanel-root .user-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}#leksihjelp-sidepanel-root .user-email {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Account panel (state-driven: one headline, one note, one action) ── */#leksihjelp-sidepanel-root .acct-headline {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 2px;
}#leksihjelp-sidepanel-root .acct-headline:empty {
  display: none;
}

/* ── Usage Bar ── */#leksihjelp-sidepanel-root .usage-bar-container {
  margin-top: 8px;
}#leksihjelp-sidepanel-root .usage-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}#leksihjelp-sidepanel-root .usage-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  overflow: hidden;
}#leksihjelp-sidepanel-root .usage-bar-fill {
  height: 100%;
  background: #22c55e;
  /* green — plenty remaining */
  border-radius: 3px;
  transition: width 0.3s ease;
}#leksihjelp-sidepanel-root .usage-bar-fill.warning {
  background: #f59e0b;
  /* orange — low */
}#leksihjelp-sidepanel-root .usage-bar-fill.critical {
  background: #ef4444;
  /* red — critical */
}#leksihjelp-sidepanel-root .usage-rollover-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Utility ── */#leksihjelp-sidepanel-root .hidden {
  display: none !important;
}

/* Scrollbar - shared styles */#leksihjelp-sidepanel-root .results::-webkit-scrollbar, #leksihjelp-sidepanel-root #view-settings::-webkit-scrollbar {
  width: 8px;
}#leksihjelp-sidepanel-root .results::-webkit-scrollbar-track, #leksihjelp-sidepanel-root #view-settings::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}#leksihjelp-sidepanel-root .results::-webkit-scrollbar-thumb, #leksihjelp-sidepanel-root #view-settings::-webkit-scrollbar-thumb {
  background: rgba(17, 180, 154, 0.35);
  border-radius: 4px;
}#leksihjelp-sidepanel-root .results::-webkit-scrollbar-thumb:hover, #leksihjelp-sidepanel-root #view-settings::-webkit-scrollbar-thumb:hover {
  background: rgba(17, 180, 154, 0.55);
}

/* ── Dark Mode ── */[data-theme="dark"] #leksihjelp-sidepanel-root {
  --bg: #1a1b2e;
  --glass-bg: rgba(30, 32, 55, 0.75);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --text: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --accent-bg: rgba(17, 180, 154, 0.15);
}[data-theme="dark"] #leksihjelp-sidepanel-root .glass {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}[data-theme="dark"] #leksihjelp-sidepanel-root .glass-subtle {
  background: rgba(30, 32, 55, 0.5);
  border-color: rgba(255, 255, 255, 0.06);
}[data-theme="dark"] #leksihjelp-sidepanel-root #search-input {
  color: var(--text);
}[data-theme="dark"] #leksihjelp-sidepanel-root #search-input::placeholder {
  color: var(--text-muted);
}[data-theme="dark"] #leksihjelp-sidepanel-root .glass-input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text);
}[data-theme="dark"] #leksihjelp-sidepanel-root .result-translation {
  color: var(--text-secondary);
}[data-theme="dark"] #leksihjelp-sidepanel-root .result-expanded {
  border-top-color: rgba(17, 180, 154, 0.2);
}[data-theme="dark"] #leksihjelp-sidepanel-root .conjugation-table td:first-child {
  color: var(--text-muted);
}[data-theme="dark"] #leksihjelp-sidepanel-root .grammar-preset-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
}[data-theme="dark"] #leksihjelp-sidepanel-root .grammar-preset-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent);
}[data-theme="dark"] #leksihjelp-sidepanel-root .grammar-preset-pill.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}[data-theme="dark"] #leksihjelp-sidepanel-root .grammar-feature-item {
  background: rgba(255, 255, 255, 0.06);
}[data-theme="dark"] #leksihjelp-sidepanel-root .grammar-feature-item:hover {
  background: rgba(255, 255, 255, 0.1);
}[data-theme="dark"] #leksihjelp-sidepanel-root .result-plural {
  background: rgba(34, 197, 94, 0.12);
}[data-theme="dark"] #leksihjelp-sidepanel-root .bottom-nav {
  background: rgba(30, 32, 55, 0.85);
  border-top-color: rgba(255, 255, 255, 0.08);
}[data-theme="dark"] #leksihjelp-sidepanel-root .btn-secondary {
  background: var(--accent-bg);
  border-color: rgba(17, 180, 154, 0.3);
}[data-theme="dark"] #leksihjelp-sidepanel-root .shortcut-row kbd {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text);
}[data-theme="dark"] #leksihjelp-sidepanel-root .pin-overlay {
  background: rgba(0, 0, 0, 0.6);
}[data-theme="dark"] #leksihjelp-sidepanel-root .toggle-slider {
  background: #475569;
}[data-theme="dark"] #leksihjelp-sidepanel-root .usage-bar {
  background: rgba(255, 255, 255, 0.08);
}[data-theme="dark"] #leksihjelp-sidepanel-root .legacy-code-toggle {
  color: var(--text-muted);
}[data-theme="dark"] #leksihjelp-sidepanel-root .legacy-code-toggle:hover {
  color: var(--text-secondary);
}[data-theme="dark"] #leksihjelp-sidepanel-root .result-card:hover {
  background: rgba(255, 255, 255, 0.04);
}[data-theme="dark"] #leksihjelp-sidepanel-root .audio-btn {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}[data-theme="dark"] #leksihjelp-sidepanel-root .audio-btn:hover {
  background: var(--accent);
  color: white;
}[data-theme="dark"] #leksihjelp-sidepanel-root .result-word {
  color: var(--text);
}[data-theme="dark"] #leksihjelp-sidepanel-root .explore-btn {
  color: var(--accent);
}[data-theme="dark"] #leksihjelp-sidepanel-root .search-direction button {
  color: var(--text-muted);
}[data-theme="dark"] #leksihjelp-sidepanel-root .search-direction button.active {
  color: var(--text);
}[data-theme="dark"] #leksihjelp-sidepanel-root .lang-switcher button {
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.1);
}[data-theme="dark"] #leksihjelp-sidepanel-root .lang-switcher button.active {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}[data-theme="dark"] #leksihjelp-sidepanel-root .settings-group h3 {
  color: var(--text);
}[data-theme="dark"] #leksihjelp-sidepanel-root .lang-option {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text);
}[data-theme="dark"] #leksihjelp-sidepanel-root .lang-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ── Plan 23-04: vocab update notice ─────────────────────────────────
   Non-blocking banner just under the header. Stacks vertically with the
   plan 23-03 hydration pill (when both are visible). */#leksihjelp-sidepanel-root .lexi-updates-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 12px 0;
  padding: 8px 12px;
  background: rgba(99, 102, 241, 0.10);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text);
}#leksihjelp-sidepanel-root .lexi-updates-notice[hidden] {
  display: none;
}#leksihjelp-sidepanel-root .lexi-updates-msg {
  flex: 1 1 auto;
  line-height: 1.3;
}#leksihjelp-sidepanel-root .lexi-updates-btn {
  flex: 0 0 auto;
  padding: 6px 12px;
  background: rgb(99, 102, 241);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}#leksihjelp-sidepanel-root .lexi-updates-btn:hover:not(:disabled) {
  background: rgb(79, 82, 221);
}#leksihjelp-sidepanel-root .lexi-updates-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}[data-theme="dark"] #leksihjelp-sidepanel-root .lexi-updates-notice {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.40);
}

/* ── Plan 23-03: hydration status pills ──────────────────────────────
   Per-language progress indicator for the service-worker bootstrap.
   One pill per language, horizontal flex row, auto-hides on success. */#leksihjelp-sidepanel-root .lexi-vocab-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 12px 0;
  font-size: 12px;
  line-height: 1.3;
}#leksihjelp-sidepanel-root .lexi-vocab-status[hidden] {
  display: none;
}#leksihjelp-sidepanel-root .lexi-vocab-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: opacity 0.2s ease;
}#leksihjelp-sidepanel-root .lexi-vocab-pill.is-fetching {
  background: rgba(99, 102, 241, 0.10);
  border-color: rgba(99, 102, 241, 0.25);
  color: var(--text);
}#leksihjelp-sidepanel-root .lexi-vocab-pill.is-ready {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.30);
  color: #15803d;
}#leksihjelp-sidepanel-root .lexi-vocab-pill.is-error {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.30);
  color: #b91c1c;
}[data-theme="dark"] #leksihjelp-sidepanel-root .lexi-vocab-pill.is-fetching {
  background: rgba(99, 102, 241, 0.20);
  border-color: rgba(99, 102, 241, 0.40);
}[data-theme="dark"] #leksihjelp-sidepanel-root .lexi-vocab-pill.is-ready {
  background: rgba(34, 197, 94, 0.20);
  color: #86efac;
}[data-theme="dark"] #leksihjelp-sidepanel-root .lexi-vocab-pill.is-error {
  background: rgba(239, 68, 68, 0.20);
  color: #fca5a5;
}

/* ── Test view (paste-text rettskrivingstest) ── */#leksihjelp-sidepanel-root #view-test { padding: 12px; }#leksihjelp-sidepanel-root .test-view-header { padding: 14px; margin-bottom: 12px; }#leksihjelp-sidepanel-root .test-view-header h3 { margin: 0 0 4px; font-size: 15px; }#leksihjelp-sidepanel-root .test-controls { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }#leksihjelp-sidepanel-root .test-lang-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-secondary, #555);
}#leksihjelp-sidepanel-root .test-lang-label select {
  padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--glass-border, rgba(0,0,0,0.15));
  background: rgba(255,255,255,0.6); font: inherit;
}#leksihjelp-sidepanel-root #test-text {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border: 1px solid var(--glass-border, rgba(0,0,0,0.15));
  border-radius: 8px; background: rgba(255,255,255,0.7); resize: vertical;
}#leksihjelp-sidepanel-root .test-exam-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secondary, #555);
  cursor: pointer;
}#leksihjelp-sidepanel-root .test-exam-label input { margin: 0; }#leksihjelp-sidepanel-root .test-actions { display: flex; gap: 8px; align-items: center; }#leksihjelp-sidepanel-root .test-actions .primary-btn {
  padding: 6px 14px; border-radius: 6px; border: none;
  background: #2563eb; color: #fff; font: inherit; cursor: pointer;
}#leksihjelp-sidepanel-root .test-actions .primary-btn:disabled { opacity: 0.5; cursor: wait; }#leksihjelp-sidepanel-root .test-status { font-size: 12px; color: var(--text-secondary, #666); margin: 4px 0 0; min-height: 16px; }#leksihjelp-sidepanel-root .test-findings { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }#leksihjelp-sidepanel-root .test-empty { text-align: center; color: var(--text-secondary, #888); padding: 16px; font-size: 13px; }#leksihjelp-sidepanel-root .test-finding {
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--glass-border, rgba(0,0,0,0.1));
  font-size: 13px;
}#leksihjelp-sidepanel-root .test-finding-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}#leksihjelp-sidepanel-root .test-finding-rule {
  font: 600 11px/1 ui-monospace, monospace;
  background: #eff6ff; color: #1e40af;
  padding: 2px 6px; border-radius: 4px;
}#leksihjelp-sidepanel-root .test-finding-pos { font: 11px ui-monospace, monospace; color: #888; }#leksihjelp-sidepanel-root .test-finding-fix { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }#leksihjelp-sidepanel-root .test-finding-fix code {
  font: 12px ui-monospace, monospace;
  padding: 1px 5px; border-radius: 3px;
}#leksihjelp-sidepanel-root .test-finding-orig { background: #fee2e2; color: #991b1b; text-decoration: line-through; }#leksihjelp-sidepanel-root .test-finding-new { background: #dcfce7; color: #166534; }#leksihjelp-sidepanel-root .test-finding-arrow { color: #888; }#leksihjelp-sidepanel-root .test-finding-extra { color: #666; font-size: 11px; }#leksihjelp-sidepanel-root .test-finding-ctx {
  margin-top: 6px; font: 12px/1.4 ui-monospace, monospace;
  color: #555; white-space: pre-wrap; word-break: break-word;
}#leksihjelp-sidepanel-root .test-finding-ctx mark {
  background: #fef08a; padding: 0 1px; border-radius: 2px;
}#leksihjelp-sidepanel-root .test-finding-explain {
  margin-top: 6px; font-size: 12px; color: #333;
  padding-top: 6px; border-top: 1px dashed rgba(0,0,0,0.1);
}[data-theme="dark"] #leksihjelp-sidepanel-root #test-text, [data-theme="dark"] #leksihjelp-sidepanel-root .test-lang-label select {
  background: rgba(30,30,30,0.6); color: #f3f4f6;
  border-color: rgba(255,255,255,0.15);
}[data-theme="dark"] #leksihjelp-sidepanel-root .test-finding {
  background: rgba(30,30,30,0.6);
  border-color: rgba(255,255,255,0.1);
  color: #f3f4f6;
}[data-theme="dark"] #leksihjelp-sidepanel-root .test-finding-rule { background: rgba(37,99,235,0.25); color: #93c5fd; }[data-theme="dark"] #leksihjelp-sidepanel-root .test-finding-orig { background: rgba(239,68,68,0.20); color: #fca5a5; }[data-theme="dark"] #leksihjelp-sidepanel-root .test-finding-new { background: rgba(34,197,94,0.20); color: #86efac; }[data-theme="dark"] #leksihjelp-sidepanel-root .test-finding-ctx, [data-theme="dark"] #leksihjelp-sidepanel-root .test-finding-explain { color: #e5e7eb; }


/* Personalization (Phase 1) — Lær mer library view */#leksihjelp-sidepanel-root .lh-library { padding: 8px 4px; }#leksihjelp-sidepanel-root .lh-library-overview { font-weight: 600; margin-bottom: 10px; font-size: 15px; }#leksihjelp-sidepanel-root .lh-library-item { border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }#leksihjelp-sidepanel-root .lh-library-item.lh-library-known { opacity: 0.5; }#leksihjelp-sidepanel-root .lh-library-item.lh-library-known .lh-library-badge { opacity: 1; }#leksihjelp-sidepanel-root .lh-library-item-head { display: flex; justify-content: space-between; align-items: center; }#leksihjelp-sidepanel-root .lh-library-title { font-weight: 600; }#leksihjelp-sidepanel-root .lh-library-badge { font-size: 12px; font-weight: 600; }#leksihjelp-sidepanel-root .lh-library-toggle { margin-top: 8px; cursor: pointer; font-size: 13px; padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.15); background: transparent; }#leksihjelp-sidepanel-root .lh-library-dict { margin: 0 0 12px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 10px; overflow: hidden; }#leksihjelp-sidepanel-root .lh-library-dict-summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; font-weight: 600; list-style: none; }#leksihjelp-sidepanel-root .lh-library-dict-summary::-webkit-details-marker { display: none; }#leksihjelp-sidepanel-root .lh-library-dict-summary::after { content: '▾'; margin-left: auto; transition: transform 0.2s ease; }#leksihjelp-sidepanel-root .lh-library-dict[open] .lh-library-dict-summary::after { transform: rotate(180deg); }#leksihjelp-sidepanel-root .lh-library-dict-count { min-width: 20px; padding: 1px 7px; border-radius: 10px; background: rgba(0, 0, 0, 0.08); font-size: 12px; text-align: center; }#leksihjelp-sidepanel-root .lh-library-dict-empty { margin: 0; padding: 0 12px 10px; font-size: 13px; opacity: 0.7; }#leksihjelp-sidepanel-root .lh-library-dict .lh-library-wordlist { padding: 0 12px 10px; }#leksihjelp-sidepanel-root .lh-library-wordlist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }#leksihjelp-sidepanel-root .lh-library-wordlist li { background: rgba(0, 0, 0, 0.05); border-radius: 12px; padding: 3px 10px; font-size: 13px; }#leksihjelp-sidepanel-root .lh-library-remove-word { border: none; background: transparent; cursor: pointer; margin-left: 4px; }

/* Level-scoped corrections — locked (out-of-scope) library section */#leksihjelp-sidepanel-root .lh-library-locked { margin-top: 18px; opacity: 0.55; }#leksihjelp-sidepanel-root .lh-library-locked > h3 { font-size: 13px; font-weight: 600; margin: 0 0 8px; }#leksihjelp-sidepanel-root .lh-library-locked .lh-library-item { pointer-events: none; }

/* Reworked Lær mer tab — compact list rows + language flag picker (2026-06-13) */
/* Non-personal lesson-count line (personalizationEnabled:false) — same look as .lh-library-overview */#leksihjelp-sidepanel-root .lh-library-overview, #leksihjelp-sidepanel-root .lh-library-count { font-weight: 600; margin-bottom: 10px; font-size: 15px; }#leksihjelp-sidepanel-root .lh-library-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border, #e3e3e3); border-radius: 8px; margin-bottom: 6px; cursor: pointer; background: #fff; }#leksihjelp-sidepanel-root .lh-library-row:hover { background: #f6f9f8; }#leksihjelp-sidepanel-root .lh-library-row.locked { opacity: 0.6; }

/* "Dette kan jeg" — mastered-lessons box (collapsible) */#leksihjelp-sidepanel-root .lh-library-known-box { margin: 10px 0 6px; border: 1px solid #d6ece0; border-radius: 10px; background: #f3faf6; overflow: hidden; }#leksihjelp-sidepanel-root .lh-library-known-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: none; background: none; cursor: pointer; font-weight: 600; color: #1e7a40; }#leksihjelp-sidepanel-root .lh-library-known-title { flex: 1; text-align: left; }#leksihjelp-sidepanel-root .lh-library-known-count { min-width: 20px; padding: 1px 7px; border-radius: 10px; background: #1e7a40; color: #fff; font-size: 12px; text-align: center; }#leksihjelp-sidepanel-root .lh-library-known-chev { transition: transform 0.25s ease; }#leksihjelp-sidepanel-root .lh-library-known-box.open .lh-library-known-chev { transform: rotate(180deg); }#leksihjelp-sidepanel-root .lh-library-known-body { max-height: 0; overflow: hidden; transition: max-height 0.32s ease; padding: 0 10px; }#leksihjelp-sidepanel-root .lh-library-known-box.open .lh-library-known-body { max-height: 1600px; padding: 0 10px 8px; }#leksihjelp-sidepanel-root .lh-library-known-body .lh-library-row { background: #fff; }

/* "Læringsbunken" — active-learning stack box (collapsible, amber/study theme).
   Sits between the main list and the "Dette kan jeg" box. */#leksihjelp-sidepanel-root .lh-library-learning-box { margin: 10px 0 6px; border: 1px solid #f0e0bd; border-radius: 10px; background: #fdf8ec; overflow: hidden; }#leksihjelp-sidepanel-root .lh-library-learning-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: none; background: none; cursor: pointer; font-weight: 600; color: #9a6b16; }#leksihjelp-sidepanel-root .lh-library-learning-icon { font-size: 15px; }#leksihjelp-sidepanel-root .lh-library-learning-title { flex: 1; text-align: left; }#leksihjelp-sidepanel-root .lh-library-learning-count { min-width: 20px; padding: 1px 7px; border-radius: 10px; background: #c98a1a; color: #fff; font-size: 12px; text-align: center; }#leksihjelp-sidepanel-root .lh-library-learning-chev { transition: transform 0.25s ease; }#leksihjelp-sidepanel-root .lh-library-learning-box.open .lh-library-learning-chev { transform: rotate(180deg); }#leksihjelp-sidepanel-root .lh-library-learning-body { max-height: 0; overflow: hidden; transition: max-height 0.32s ease; padding: 0 10px; }#leksihjelp-sidepanel-root .lh-library-learning-box.open .lh-library-learning-body { max-height: 1600px; padding: 0 10px 8px; }#leksihjelp-sidepanel-root .lh-library-learning-body .lh-library-row { background: #fff; }
/* The little ✕ "remove from stack" control on a læringsbunken row. */#leksihjelp-sidepanel-root .lh-library-unlearn { color: #9a6b16; border-color: #ecdcb6; padding: 2px 8px; }

/* "Learned!" animation — green pulse + ✓ pop + collapse-fade as the lesson
   moves to the "Dette kan jeg" box. */
@keyframes lh-library-learned {
  0%   { background: #fff; transform: scale(1); }
  18%  { background: #c9f2dd; transform: scale(1.015); }
  55%  { background: #c9f2dd; opacity: 1; max-height: 80px; }
  100% { background: #c9f2dd; opacity: 0; max-height: 0; min-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; transform: scale(0.96); }
}
@keyframes lh-library-check {
  0%   { opacity: 0; transform: translateY(-50%) scale(0.4); }
  40%  { opacity: 1; transform: translateY(-50%) scale(1.25); }
  100% { opacity: 0; transform: translateY(-50%) scale(1); }
}#leksihjelp-sidepanel-root .lh-library-row--learned { animation: lh-library-learned 0.48s ease forwards; overflow: hidden; pointer-events: none; }#leksihjelp-sidepanel-root .lh-library-row--learned::after { content: '✓'; position: absolute; right: 16px; top: 50%; color: #059669; font-size: 22px; font-weight: 700; animation: lh-library-check 0.46s ease; }

/* "Into the stack!" animation — amber pulse + 📚 pop + collapse-fade as the
   lesson moves to the "Læringsbunken" box. */
@keyframes lh-library-bunked {
  0%   { background: #fff; transform: scale(1); }
  18%  { background: #fbeccb; transform: scale(1.015); }
  55%  { background: #fbeccb; opacity: 1; max-height: 80px; }
  100% { background: #fbeccb; opacity: 0; max-height: 0; min-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; transform: scale(0.96); }
}#leksihjelp-sidepanel-root .lh-library-row--bunked { animation: lh-library-bunked 0.48s ease forwards; overflow: hidden; pointer-events: none; }#leksihjelp-sidepanel-root .lh-library-row--bunked::after { content: '📚'; position: absolute; right: 14px; top: 50%; font-size: 19px; animation: lh-library-check 0.46s ease; }#leksihjelp-sidepanel-root .lh-library-title { flex: 1; font-weight: 600; }#leksihjelp-sidepanel-root .lh-library-badge { font-size: 11px; padding: 2px 6px; border-radius: 10px; background: #eef3f1; color: #555; }#leksihjelp-sidepanel-root .lh-library-badge.known { background: #e6f4ea; color: #1e7a40; }#leksihjelp-sidepanel-root .lh-library-badge.locked { background: #f3eee6; color: #8a6d3b; }#leksihjelp-sidepanel-root .lh-library-toggle { font-size: 12px; }#leksihjelp-sidepanel-root .lh-library-empty { color: #777; padding: 16px; text-align: center; }#leksihjelp-sidepanel-root .library-lang-control { padding: 8px 12px; }#leksihjelp-sidepanel-root .lh-langpick { position: relative; display: inline-block; }#leksihjelp-sidepanel-root .lh-langpick-current { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--border, #e3e3e3); border-radius: 8px; background: #fff; cursor: pointer; }#leksihjelp-sidepanel-root .lh-langpick-list { position: absolute; z-index: 20; margin-top: 4px; background: #fff; border: 1px solid var(--border, #e3e3e3); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12); }#leksihjelp-sidepanel-root .lh-langpick-option { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 12px; background: none; border: none; cursor: pointer; text-align: left; }#leksihjelp-sidepanel-root .lh-langpick-option.active, #leksihjelp-sidepanel-root .lh-langpick-option:hover { background: #f0f5f3; }
/* "Bytt fremmedspråk" sub-section — change which FL is the student's chosen one. */#leksihjelp-sidepanel-root .lh-langpick-flsub { border-top: 1px solid var(--border, #e3e3e3); margin-top: 4px; padding-top: 4px; }#leksihjelp-sidepanel-root .lh-langpick-flsub-label { padding: 4px 12px 2px; font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: .04em; }#leksihjelp-sidepanel-root .lh-langpick-fl-option { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 12px; background: none; border: none; cursor: pointer; text-align: left; }#leksihjelp-sidepanel-root .lh-langpick-fl-option:hover { background: #f0f5f3; }

/* CEFR level filter pills in Lær mer library */#leksihjelp-sidepanel-root .lh-library-cefr-filter { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }#leksihjelp-sidepanel-root .lh-library-cefr-pill { padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1.5px solid transparent; background: none; transition: opacity 0.15s; }#leksihjelp-sidepanel-root .lh-library-cefr-pill:not(.active) { opacity: 0.65; }#leksihjelp-sidepanel-root .lh-library-cefr-pill:hover { opacity: 1; }#leksihjelp-sidepanel-root .lh-cefr-all { background: #f0f4f8; color: #4a5568; border-color: #cbd5e0; }#leksihjelp-sidepanel-root .lh-cefr-all.active { border-color: #718096; opacity: 1; }#leksihjelp-sidepanel-root .lh-cefr-a1 { background: #E1F5EE; color: #0F6E56; border-color: #9FE1CB; }#leksihjelp-sidepanel-root .lh-cefr-a1.active { border-color: #0F6E56; opacity: 1; }#leksihjelp-sidepanel-root .lh-cefr-a2 { background: #EAF3DE; color: #3B6D11; border-color: #C0DD97; }#leksihjelp-sidepanel-root .lh-cefr-a2.active { border-color: #3B6D11; opacity: 1; }#leksihjelp-sidepanel-root .lh-cefr-b1 { background: #E6F1FB; color: #185FA5; border-color: #B5D4F4; }#leksihjelp-sidepanel-root .lh-cefr-b1.active { border-color: #185FA5; opacity: 1; }#leksihjelp-sidepanel-root .lh-cefr-b2 { background: #EEEDFE; color: #534AB7; border-color: #CECBF6; }#leksihjelp-sidepanel-root .lh-cefr-b2.active { border-color: #534AB7; opacity: 1; }#leksihjelp-sidepanel-root .lh-cefr-c1 { background: #FAEEDA; color: #854F0B; border-color: #FAC775; }#leksihjelp-sidepanel-root .lh-cefr-c1.active { border-color: #854F0B; opacity: 1; }

/* Focus Mode toggle row in Lær mer tab */#leksihjelp-sidepanel-root .lh-library-focus-row {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
}#leksihjelp-sidepanel-root .lh-library-focus-label {
  font-size: 13px;
  font-weight: 500;
  flex: 1;
}#leksihjelp-sidepanel-root .lh-library-focus-subtitle, #leksihjelp-sidepanel-root .lh-library-focus-guard {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}#leksihjelp-sidepanel-root .lh-library-focus-guard {
  color: var(--warning, #b45309);
}

/* ── Feide login (student identity — personalization sync) ── */#leksihjelp-sidepanel-root .feide-divider {
  margin: 14px 0 10px;
  border-top: 1px solid rgba(128, 128, 128, 0.25);
}#leksihjelp-sidepanel-root .btn-feide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: #1f4698;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}#leksihjelp-sidepanel-root .btn-feide:hover { background: #183a7e; }#leksihjelp-sidepanel-root .btn-feide:disabled { opacity: 0.6; cursor: default; }

/* «Hva er forskjellen?» — the three-way choice (nothing / Feide / Vipps) is
   genuinely not obvious from three buttons, but spelling it out inline would
   bury the panel. Collapsed by default, one line when opened, and shown only
   in the anonymous state — once you have chosen, it is answering a question
   you no longer have. */#leksihjelp-sidepanel-root .acct-explain {
  margin: -2px 0 10px;
}#leksihjelp-sidepanel-root .acct-explain summary {
  display: inline-block;
  padding: 2px 0;
  font-size: 12px;
  color: #6366f1;
  cursor: pointer;
  list-style: none;
}#leksihjelp-sidepanel-root .acct-explain summary::-webkit-details-marker { display: none; }#leksihjelp-sidepanel-root .acct-explain summary::before { content: '▸ '; }#leksihjelp-sidepanel-root .acct-explain[open] summary::before { content: '▾ '; }#leksihjelp-sidepanel-root .acct-explain p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

/* <details> carries display:block from the UA sheet, so [hidden] is not
   safely enough on its own here — same trap as .btn-vipps / .btn-feide /
   .voice-sample below. */#leksihjelp-sidepanel-root .acct-explain[hidden] {
  display: none;
}

/* «Hør forskjellen» — a try-before-you-buy comparison, NOT a way to log in.
   It first shipped as two full-width .btn-secondary buttons stacked directly
   above «Logg inn med Feide» and «Logg inn med Vipps», and at that width, in
   that position, it simply read as two more sign-in options. Same
   information, deliberately a different KIND of control: a muted box, small
   type, two compact buttons side by side. */#leksihjelp-sidepanel-root .voice-sample {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}#leksihjelp-sidepanel-root .voice-sample-label {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #64748b;
}#leksihjelp-sidepanel-root .voice-sample-row {
  display: flex;
  gap: 8px;
}#leksihjelp-sidepanel-root .voice-sample-btn {
  flex: 1;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  cursor: pointer;
}#leksihjelp-sidepanel-root .voice-sample-btn:hover { background: #f1f5f9; }

/* The paid side gets the accent, so the pair reads as free-vs-premium at a
   glance rather than as two equivalent choices. */#leksihjelp-sidepanel-root .voice-sample-btn.is-premium {
  border-color: #14a37f;
  color: #0f766e;
}#leksihjelp-sidepanel-root .voice-sample-btn.is-premium:hover { background: #ecfdf5; }

/* .voice-sample sets no `display` of its own above, but the rule below is
   NOT redundant: this class has bitten twice in this file already (see
   .btn-vipps[hidden] and .btn-feide[hidden]), and the moment anyone gives
   the box a display the author rule would beat the UA [hidden] rule and a
   logged-OUT demonstration would appear for paying subscribers. */#leksihjelp-sidepanel-root .voice-sample[hidden] {
  display: none;
}

/* Exactly the .btn-vipps[hidden] problem, and it bit twice. display:flex
   above beats the UA [hidden] rule's implicit display:none, so
   `feideBtn.hidden = true` renders a fully visible, clickable button.
   Without this, every LOGGED-IN account state shows "Logg inn med Feide"
   under the panel — including a paying Vipps subscriber, who is exactly
   the person the exclusivity rule exists to keep away from it. */#leksihjelp-sidepanel-root .btn-feide[hidden] {
  display: none;
}#leksihjelp-sidepanel-root .feide-status {
  min-height: 1em;
  font-size: 0.85em;
  margin-top: 6px;
}#leksihjelp-sidepanel-root .feide-status.success {
  color: var(--success);
}#leksihjelp-sidepanel-root .feide-status.error {
  color: var(--error);
}

/* Demoted «already subscribed» login — link-styled button so the trial stays
   the primary action. Vipps bills Login per active user for 12 months, so a
   prominent bare login invites curiosity logins that cost for a year. */#leksihjelp-sidepanel-root .linklike { background: none; border: none; padding: 0; font: inherit; color: var(--digital-teal, #11B49A); text-decoration: underline; cursor: pointer; }#leksihjelp-sidepanel-root .auth-existing { margin-top: 10px; }