:root {
    --ind-sidebar-bg: #FCF9F6;
    --ind-sidebar-hover: rgba(74, 122, 104, 0.07);
    --ind-sidebar-active: rgba(74, 122, 104, 0.12);
    --ind-surface: rgba(0, 0, 0, 0);
    --ind-surface-white: #FFFEFB;
    --ind-border: #E6DFD4;
    --ind-border-light: #EDE8E2;
    --ind-text: #2B2A27;
    --ind-text-secondary: #6E6A60;
    --ind-text-muted: #8F8A80;
    --ind-text-faint: #A9A29A;
    --sidebar-width: 288px;
    --sidebar-collapsed: 3.05rem;
    --ind-radius: 16px;
    --ind-radius-sm: 10px;
    --ind-radius-xs: 8px;
    /* Deceleration curve for content interaction — fast attack, soft settle.
       Chosen, not the browser default 'ease' (which is symmetric). Matches the
       shell's Quart-out intent so the whole page reads as designed motion. */
    --ind-ease-out: cubic-bezier(0.2, 0, 0, 1);
    /* One speed grid: 120ms micro (presses, item hovers), 150ms standard
       (this token), 200ms+ structural (panel, toast). 180ms sat between the
       hand-tuned 150ms layer and the structural layer — two speeds for
       same-sized targets is drift, not a ramp. */
    --ind-transition: 150ms var(--ind-ease-out);
    --ind-sidebar-transition: 300ms cubic-bezier(0.165, 0.85, 0.45, 1);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  .settings-app .s-skip-link {
    position: absolute; top: -40px; left: 0;
    background: var(--ind-text); color: #fff;
    padding: 8px 16px; z-index: 100; font-size: var(--font-size-sm);
    border-radius: 0 0 8px 0; transition: top 0.2s var(--ind-ease-out);
  }
  .settings-app .s-skip-link:focus-visible { top: 0; }

  body {
    font-family: var(--font-family);
    background: var(--color-bg);
    color: var(--ind-text);
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }

  .app-layout {
    display: flex;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  .settings-app {
    position: relative;
    background:
      radial-gradient(ellipse at 74% 18%, rgba(168, 197, 184, 0.055) 0%, transparent 48%),
      radial-gradient(ellipse at 22% 86%, rgba(168, 197, 184, 0.045) 0%, transparent 48%),
      linear-gradient(180deg, #FAF7F3 0%, var(--pill-bg, #F0EAE4) 100%);
  }

  .settings-app .bb-profile-dropdown.s-dropdown {
    left: 112px;
    bottom: 34px;
  }








  /* ── MAIN CONTENT ── */
  .settings-app > .settings-main {
    flex: 1 1 auto;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    display: block;
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--ind-text);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 152, 136, 0.3) transparent;
  }

  .settings-main::-webkit-scrollbar { width: 6px; }
  .settings-main::-webkit-scrollbar-track { background: transparent; }
  .settings-main::-webkit-scrollbar-thumb {
    background: rgba(168, 152, 136, 0.3);
    border-radius: 3px;
  }
  .settings-main::-webkit-scrollbar-thumb:hover {
    background: rgba(168, 152, 136, 0.5);
  }

  /* drawer trigger styled in mobile media query below */

  /* ── SETTINGS LAYOUT (Claude pattern) ── */
  .set-wrap {
    width: min(100%, 1040px);
    margin: 0;
    padding: clamp(56px, 7vh, 96px) clamp(32px, 5vw, 72px) 96px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
  }

  .set-header {
    height: auto;
    display: flex;
    align-items: flex-start;
    padding-bottom: 0;
    margin-bottom: 32px;
  }

  .set-title {
    font-family: var(--font-family);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-semibold);
    color: #2B2A27;
    letter-spacing: -0.02em;
  }

  .set-grid {
    display: grid;
    grid-template-columns: minmax(168px, 212px) minmax(0, 720px);
    gap: clamp(28px, 4vw, 48px);
    width: 100%;
    align-items: start;
  }

  /* ── Settings Nav (left column, Claude pattern: plain text, no icons) ── */
  .set-nav {
    position: sticky;
    top: 16px;
    align-self: start;
    margin-left: -12px;
  }
  .set-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .set-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    height: 36px;
    border-radius: var(--ind-radius-sm);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--ind-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ind-transition), color var(--ind-transition);
    white-space: nowrap;
    line-height: 1.4;
  }
  .set-nav a:hover {
    background: rgba(74, 122, 104, 0.07);
    color: #2B2A27;
  }
  .set-nav a.active {
    background: rgba(74, 122, 104, 0.12);
    color: #3D6B57;
    font-weight: var(--font-weight-semibold);
    border-radius: 10px;
  }

  /* ── Settings Content (right column) ── */
  .set-content {
    min-width: 0;
    max-width: 720px;
  }

  .set-panel {
    display: none;
  }
  .set-panel.active {
    display: block;
  }
  /* Tab switch — the page's primary interaction gets the same designed motion
     as its secondary surfaces (dropdown/dialog already animate; the panel was
     a raw display flip). 4px/200ms reads as settling, not theatre. JS gates
     the class so initial load/deep links stay instant; the blanket
     reduced-motion rule neutralises the duration. */
  @keyframes setPanelIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
  }
  .set-panel.active.panel-anim {
    animation: setPanelIn 200ms var(--ind-ease-out);
  }

  .set-section {
    padding: 22px;
    margin: 0 0 20px;
    border-radius: 16px;
    background: #FFFEFB;
    border: 1px solid #E6DFD4;
  }
  .set-section:last-child {
    margin-bottom: 0;
  }
  .set-panel-inner {
    margin-bottom: 20px;
  }
  .set-panel-inner:last-child {
    margin-bottom: 0;
  }

  .set-section-title {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--ind-text);
    letter-spacing: -0.01em;
    margin: 0 0 18px;
  }

  /* Form elements */
  .set-field {
    margin-bottom: 20px;
  }
  .set-field:last-child {
    margin-bottom: 0;
  }

  /* Two-column profile row (Claude pattern) */
  .set-field-row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(220px, 1.35fr);
    gap: 20px;
    align-items: start;
  }
  .set-field-row > .set-field {
    min-width: 0;
  }
  .set-field-row > .set-field-grow {
    min-width: 0;
  }

  .set-label {
    display: block;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: #6E6A60;
    margin-bottom: 6px;
    line-height: 1.4;
  }

  .set-hint {
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    color: #6E6A60;
    margin-bottom: 8px;
    line-height: 1.5;
    /* dyslexia-friendly measure: hints ran the full 676px column (~95ch) */
    max-width: 62ch;
  }

  .set-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #E6DFD4;
    border-radius: 12px;
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    color: #2B2A27;
    background: #FFFEFB;
    transition: border-color var(--ind-transition), box-shadow var(--ind-transition);
    outline: none;
    line-height: 1.4;
  }
  /* Hover whispers (0.28), focus speaks (0.65 + halo, set in the focus block
     below) — a merely-hovered field must not wear the focus border. */
  .set-input:hover {
    border-color: rgba(74, 122, 104, 0.28);
  }
  .set-input:focus-visible {
    border-color: rgba(74, 122, 104, 0.5);
    box-shadow: none;
  }
  .set-input::placeholder {
    color: var(--ind-text-muted);
  }
  .set-input[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  /* Invalid mark (ordbog add: too short/long) — rust, the house caution colour.
     JS sets/lifts aria-invalid; without this rule the mark was invisible. */
  .set-input[aria-invalid="true"] {
    border-color: rgba(166, 89, 75, 0.55);
  }

  .set-textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 100px;
    padding: 14px;
    border: 1px solid #E6DFD4;
    border-radius: 12px;
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    color: #2B2A27;
    background: #FFFEFB;
    transition: border-color var(--ind-transition), box-shadow var(--ind-transition);
    outline: none;
    resize: vertical;
    line-height: 1.5;
    white-space: pre-wrap;
  }
  .set-textarea:hover { border-color: rgba(74, 122, 104, 0.28); }
  .set-textarea:focus-visible {
    border-color: rgba(74, 122, 104, 0.5);
    box-shadow: none;
  }
  .set-textarea::placeholder {
    font-family: var(--font-family);
    font-style: italic;
    color: var(--ind-text-muted);
  }

  .set-select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #E6DFD4;
    border-radius: 12px;
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    color: #2B2A27;
    background: #FFFEFB;
    transition: border-color var(--ind-transition), box-shadow var(--ind-transition);
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6A60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
  }
  .set-select:hover { border-color: rgba(74, 122, 104, 0.28); }
  .set-select:focus-visible {
    border-color: rgba(74, 122, 104, 0.5);
    box-shadow: none;
  }

  /* ── Custom dropdown — Blød Bølge ────────────────────── */
  .set-dropdown {
    position: relative;
    width: 100%;
  }

  .set-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #E6DFD4;
    border-radius: 12px;
    background: #FFFEFB;
    color: #2B2A27;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    cursor: pointer;
    transition: border-color var(--ind-transition), box-shadow var(--ind-transition);
    outline: none;
    text-align: left;
  }

  .set-dropdown-trigger:hover {
    border-color: rgba(74, 122, 104, 0.28);
  }

  .set-dropdown-trigger:focus-visible {
    outline: 2px solid rgba(74, 122, 104, 0.8);
    outline-offset: 2px;
  }

  .set-dropdown.open .set-dropdown-trigger {
    border-color: rgba(74, 122, 104, 0.5);
    box-shadow: 0 0 0 3px rgba(74, 122, 104, 0.10);
  }

  .set-dropdown-value.placeholder {
    color: var(--ind-text-muted);
    font-family: var(--font-family);
    font-style: italic;
  }

  .set-dropdown-arrow {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #6E6A60;
    transition: transform var(--ind-transition);
  }

  .set-dropdown.open .set-dropdown-arrow {
    transform: rotate(180deg);
  }

  .set-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: rgba(255, 254, 251, 0.97);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(228, 220, 212, 0.7);
    border-radius: 14px;
    box-shadow:
      0 8px 32px rgba(92, 77, 67, 0.10),
      0 2px 8px rgba(92, 77, 67, 0.05);
    padding: 6px;
    list-style: none;
    z-index: 50;
    max-height: 280px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--ind-transition), transform var(--ind-transition);
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 152, 136, 0.25) transparent;
  }

  .set-dropdown.open .set-dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .set-dropdown-item {
    padding: 10px 12px;
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: #2B2A27;
    cursor: pointer;
    transition: background 0.12s var(--ind-ease-out);
    line-height: 1.4;
  }

  .set-dropdown-item:hover {
    background: rgba(74, 122, 104, 0.08);
  }

  .set-dropdown-item.selected {
    font-weight: var(--font-weight-semibold);
    color: #4A7A68;
    background: rgba(74, 122, 104, 0.08);
  }

  .set-dropdown-item.focused {
    background: rgba(74, 122, 104, 0.08);
    outline: none;
  }

  /* Avatar row */
  .set-avatar-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }
  .set-avatar {
    width: 44px; height: 44px; min-width: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #6E9A88, #4A7A68);
    color: #FFFEFB;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-family);
    font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(74, 122, 104, 0.18);
  }
  .set-avatar-row .set-input {
    width: 100%;
    min-width: 0;
  }

  /* Toggle switch */
  .set-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(228, 220, 212, 0.4);
  }
  .set-row:last-child {
    border-bottom: none;
  }
  .set-row-text {
    flex: 1; min-width: 0;
  }
  .set-row-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
    color: #2B2A27;
    margin-bottom: 2px;
  }
  .set-row-desc {
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    color: #6E6A60;
    line-height: 1.5;
    max-width: 62ch;
  }

  .set-toggle {
    position: relative;
    width: 36px; height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
  }
  .set-toggle input {
    opacity: 0; width: 0; height: 0; position: absolute;
  }
  .set-toggle-track {
    position: absolute; inset: 0;
    /* warm-matched off-state (was cool rgba(0,0,0,.12) — the one cold element in
       an all-warm palette; same grey value, warm-tinted) */
    background: rgba(168, 152, 136, 0.38);
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--ind-transition);
    /* The boundary, not the fill, carries the off-state contrast (the .38 wash
       alone is ~1.4:1 against the card — rescued only by the knob shadow). */
    box-shadow: inset 0 0 0 1px rgba(92, 77, 67, 0.28);
  }
  .set-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--ind-surface-white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform var(--ind-transition);
  }
  .set-toggle input:checked + .set-toggle-track {
    background: #4A7A68;
    box-shadow: none;
  }
  .set-toggle input:checked + .set-toggle-track::after {
    transform: translateX(16px);
  }
  /* Press feedback — the toggle was the one tappable control with none. */
  .set-toggle:active .set-toggle-track {
    transform: scale(0.96);
  }

  /* Button */
  .set-btn {
    height: 40px;
    padding: 0 20px;
    border-radius: 12px;
    border: 1px solid #E6DFD4;
    background: #FFFEFB;
    color: #2B2A27;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
    cursor: pointer;
    transition: border-color 0.15s var(--ind-ease-out), background 0.15s var(--ind-ease-out), transform 0.12s var(--ind-ease-out), box-shadow 0.15s var(--ind-ease-out);
  }
  /* Hover changes colour only; the tactile loop is completed on :active (press
     down), not by floating the button up. Calmer than a lift that never lands. */
  .set-btn:hover {
    border-color: rgba(74, 122, 104, 0.5);
    background: rgba(74, 122, 104, 0.05);
  }
  .set-btn:active { transform: scale(0.98); }
  .set-btn-primary {
    background: #4A7A68;
    color: #FFFEFB;
    border: none;
    border-radius: 12px;
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
    box-shadow: 0 4px 12px rgba(74, 122, 104, 0.25);
    transition: transform 0.12s var(--ind-ease-out), box-shadow 0.15s var(--ind-ease-out), background 0.15s var(--ind-ease-out);
  }
  .set-btn-primary:hover {
    background: #3D6B57;
    box-shadow: 0 6px 18px rgba(74, 122, 104, 0.32);
  }
  .set-btn-primary:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(74, 122, 104, 0.22);
  }
  .set-btn-danger {
    color: #A6594B;
    border-color: rgba(166, 89, 75, 0.28);
    font-family: var(--font-family);
  }
  .set-btn-danger:hover {
    background: rgba(166, 89, 75, 0.06);
    border-color: rgba(166, 89, 75, 0.42);
  }
  /* Solid destructive confirm (delete-account dialog) — was inline hex in JS,
     the one destructive control outside the rust class family. */
  .set-btn-danger-solid {
    background: #A6594B;
    color: #FFFEFB;
    border: none;
  }
  .set-btn-danger-solid:hover {
    background: #8F4C40;
  }
  [data-theme="dark"] .set-btn-danger-solid {
    background: #D4A89A;
    color: #1F1B18;
  }
  [data-theme="dark"] .set-btn-danger-solid:hover {
    background: #C69787;
  }
  /* Working/disabled buttons must LOOK dead: no live hover restyle, no raised
     shadow, no press. pointer-events also stops :hover matching while
     "Gemmer..." is in flight (JS pins minWidth so the shorter Danish string
     can't shrink the button mid-operation). */
  .set-btn:disabled,
  .set-btn-primary:disabled {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
    box-shadow: none;
    transform: none;
  }
  /* Permanent state labels (2FA "Aktiveret") are disabled-as-fact, not
     disabled-as-working — full ink, no dimming. */
  .set-btn-state-done:disabled {
    opacity: 1;
  }
  .set-btn-row {
    display: flex;
    gap: 8px;
    margin-top: 16px;
  }
  /* display:flex above would defeat the hidden attribute (JS hides the plan
     card's action row for free users). */
  .set-btn-row[hidden] {
    display: none;
  }
  /* One beat between text and its action row, page-wide. The same "title +
     sentence + button" card was built on three skeletons (.set-field /
     .set-row / .set-hint), so the button sat 36/29/24px under its text with a
     divider on some cards and not others. The last text block before a
     .set-btn-row drops its own bottom margin/divider — the action always sits
     exactly the row's 16px under its text. */
  .set-field:has(+ .set-btn-row) {
    margin-bottom: 0;
  }
  .set-row:has(+ .set-btn-row) {
    border-bottom: none;
    padding-bottom: 0;
  }
  .set-hint:has(+ .set-btn-row) {
    margin-bottom: 0;
  }

  /* Field header (label + value side by side) */
  .set-field-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  #plan-status:not(:empty) {
    margin-bottom: 12px;
  }
  /* CLS guard only engages once a status exists — the permanent inline
     min-height reserved 26px of dead air under the discount input. */
  #promo-status:not(:empty) {
    min-height: 20px;
    margin-top: 6px;
  }

  /* Plan card — inner radius steps DOWN from the 16px section it nests in
     (was 18px, rounder than its own parent = the templated tell). */
  .set-plan {
    /* nesting steps DOWN like the radii (22px section → 20px card); 24>22
       inverted the containment hierarchy */
    padding: 20px;
    border: 1px solid #E6DFD4;
    border-radius: 10px;
    background: #FFFEFB;
  }
  /* Full-width primary CTA read as a banner slot, not a button — cap it. */
  .set-plan .set-btn-primary {
    max-width: 320px;
  }
  .set-plan-name {
    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    /* semibold: the plan name was the only heading bigger AND lighter than
       its own section title (17/500 vs 16/600) — inverted weight hierarchy */
    font-weight: var(--font-weight-semibold);
    color: #2B2A27;
    margin-bottom: 4px;
  }
  .set-plan-price {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: #6E6A60;
    margin-bottom: 12px;
  }
  .set-plan-features {
    list-style: none;
    margin-bottom: 16px;
  }
  /* Free users: JS hides the action row (set-plan--bare), so the feature list
     is the card's visual end — drop its margin or the card closes on 36px of
     trapped air against a 20px top. */
  .set-plan--bare .set-plan-features {
    margin-bottom: 0;
  }
  .set-plan-features li {
    font-size: 14px;
    color: var(--ind-text-secondary);
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .set-plan-features li::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A7A68' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* Connection card */
  .set-connection {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #FFFEFB;
    border: 1px solid #E6DFD4;
    border-radius: 10px;
    margin-bottom: 10px;
    transition: border-color var(--ind-transition), box-shadow var(--ind-transition), background var(--ind-transition);
  }
  /* No hover shadow: the card itself isn't clickable (the button inside is) —
     hover-elevation is the page's "I am pressable" signal and this card lied. */
  .set-connection:hover {
    background: #FBF8F2;
    border-color: #DCD2C6;
  }
  .set-connection:last-child {
    margin-bottom: 0;
  }
  .set-connection-icon {
    width: 40px; height: 40px;
    /* 8px: steps DOWN inside the radius-10 row card (12 inside 10 inverted
       the containment hierarchy — same class of bug the plan card fixed) */
    border-radius: 8px;
    background: rgba(74, 122, 104, 0.10);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .set-connection-icon svg {
    width: 20px; height: 20px;
    color: #4A7A68;
  }
  .set-connection-info {
    flex: 1; min-width: 0;
  }
  .set-connection-name {
    font-size: 15px; font-weight: var(--font-weight-semibold); color: var(--ind-text);
  }
  .set-connection-desc {
    font-size: var(--font-size-sm); color: #6E6A60;
  }
  .set-connection-status {
    font-size: var(--font-size-xs);
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: var(--font-weight-medium);
    flex-shrink: 0;
  }
  .set-connection-status.connected {
    /* one green family: badge tint keyed off the accent itself (the grey-sage
       #6E8A7E base was a second green the canon never mixed) */
    background: rgba(74, 122, 104, 0.10);
    color: #3D6B57;
  }
  .set-connection-status.disconnected {
    background: rgba(168, 152, 136, 0.14);
    color: var(--ind-text-muted);
  }

  /* Memory item */
  .set-memory {
    padding: 14px 16px;
    /* warm hairline + radius 10: the cold near-black border was one of the two
       cool greys in an all-warm palette, and radius 16 EQUALLED the section it
       nests in (containment steps down: 16 section → 10 inner card). */
    border: 1px solid #E6DFD4;
    border-radius: 10px;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .set-memory:last-child { margin-bottom: 0; }
  .set-memory-text {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--ind-text);
    line-height: 1.5;
  }
  .set-memory-date {
    font-size: var(--font-size-xs);
    color: var(--ind-text-faint);
    margin-top: 4px;
  }
  .set-memory-del {
    width: 28px; height: 28px;
    border: none; background: transparent;
    color: var(--ind-text-faint);
    cursor: pointer;
    border-radius: var(--ind-radius-xs);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--ind-transition), color var(--ind-transition), transform 120ms var(--ind-ease-out);
    flex-shrink: 0;
  }
  .set-memory-del:active {
    transform: scale(0.92);
  }
  .set-memory-del:hover {
    background: rgba(166, 89, 75, 0.08);
    color: #A6594B;
  }
  .set-memory-del svg { width: 14px; height: 14px; }

  /* Loading placeholder in connection cards */
  .set-connection-loading {
    justify-content: center;
    color: var(--ind-text-muted);
    font-size: var(--font-size-sm);
  }
  /* Button styled as link */
  a.set-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  /* Connection action buttons (from indstillinger-connections.js) */
  .connection-connect-btn {
    height: 32px; padding: 0 16px;
    border-radius: 10px;
    border: 1px solid rgba(92, 77, 67, 0.24);
    background: var(--ind-surface-white);
    color: var(--ind-text);
    font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); font-family: inherit;
    cursor: pointer;
    transition: border-color var(--ind-transition), background var(--ind-transition), transform 120ms var(--ind-ease-out);
    white-space: nowrap;
  }
  .connection-connect-btn:hover { border-color: rgba(92, 77, 67, 0.38); background: rgba(168, 152, 136, 0.08); }
  .connection-connect-btn:active,
  .connection-disconnect-btn:active { transform: scale(0.98); }
  .connection-disconnect-btn {
    height: 32px; padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgb(228, 220, 212);
    background: transparent;
    color: #766F67;
    font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); font-family: inherit;
    cursor: pointer;
    transition: color var(--ind-transition), border-color var(--ind-transition), background var(--ind-transition), transform 120ms var(--ind-ease-out);
  }
  .connection-disconnect-btn:hover {
    color: #A6594B;
    border-color: rgba(166, 89, 75, 0.25);
    background: rgba(166, 89, 75, 0.04);
  }
  .connection-connected {
    display: flex; align-items: center; gap: 12px;
  }
  .connection-email {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--font-size-xs); color: rgb(74, 122, 104); font-weight: var(--font-weight-semibold);
  }
  .connection-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #4A7A68;
    flex-shrink: 0;
  }

  .memory-toggle-status {
    font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); margin-left: 8px;
    padding: 2px 8px; border-radius: 10px;
  }
  .memory-status-on { background: rgba(74, 122, 104, 0.10); color: #4A7A68; }
  .memory-status-off { background: rgba(168, 152, 136, 0.14); color: var(--ind-text-muted); }

  /* Progress bar (Claude pattern) */
  /* 2FA dialog overlay */
  /* Entrance choreography (pure CSS — fires on mount, needs no JS hook; the
     blanket reduced-motion rule neutralises the duration). A confirm modal is
     the page's most dramatic state change; it should arrive, not hard-cut in. */
  @keyframes setOverlayIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes setDialogIn { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
  /* Exit choreography — dialogs arrived softly but vanished in one frame.
     Exits run faster than entrances (150 vs 180/220); JS adds .closing and
     removes the node on animationend (with a timeout net for reduced motion). */
  @keyframes setOverlayOut { to { opacity: 0; } }
  @keyframes setDialogOut { to { opacity: 0; transform: translateY(4px) scale(0.98); } }
  .set-overlay.closing {
    animation: setOverlayOut 150ms var(--ind-ease-out) forwards;
    pointer-events: none;
  }
  .set-overlay.closing .set-dialog {
    animation: setDialogOut 150ms var(--ind-ease-out) forwards;
  }
  .set-overlay {
    position: fixed; inset: 0;
    /* warm scrim — the flat black one disagreed with the email picker's
       crafted rgba(58,47,38,…) atmosphere on the same page */
    background: rgba(58, 47, 38, 0.45);
    z-index: 100;
    display: flex; align-items: center; justify-content: center;
    animation: setOverlayIn 180ms var(--ind-ease-out);
  }
  .set-dialog {
    background: var(--ind-surface-white);
    border-radius: var(--ind-radius);
    padding: 32px;
    max-width: 380px;
    width: 90%;
    text-align: center;
    animation: setDialogIn 220ms var(--ind-ease-out);
  }
  .set-dialog h3 {
    font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold);
    margin-bottom: 16px;
  }
  .set-dialog p {
    font-size: var(--font-size-sm); color: var(--ind-text-muted);
    margin-bottom: 16px; line-height: 1.5;
  }
  .set-dialog img {
    width: 200px; height: 200px;
    margin: 0 auto 16px;
    display: block;
  }
  .set-dialog-secret {
    font-size: var(--font-size-xs); color: var(--ind-text-muted);
    margin-bottom: 16px; word-break: break-all;
    background: rgba(168, 152, 136, 0.10); padding: 8px 12px;
    border-radius: var(--ind-radius-sm);
  }
  .set-dialog-code {
    margin-bottom: 16px;
  }
  .set-dialog-code .set-label {
    text-align: left;
  }
  .set-dialog-code .set-input {
    text-align: center; letter-spacing: 4px; font-size: var(--font-size-lg);
  }
  .set-dialog-actions {
    display: flex; gap: 8px; justify-content: center;
  }

  /* ── Disconnect confirm modal (#3420) ── */
  .set-disconnect-dialog {
    max-width: 360px;
  }
  .set-btn-caution {
    background: rgba(166, 89, 75, 0.08);
    color: #A6594B;
    border: 1px solid rgba(166, 89, 75, 0.2);
    border-radius: 10px;
    font-weight: var(--font-weight-medium);
    transition: background 120ms var(--ind-ease-out), border-color 120ms var(--ind-ease-out);
  }
  .set-btn-caution:hover {
    background: rgba(166, 89, 75, 0.14);
    border-color: rgba(166, 89, 75, 0.35);
  }
  .set-btn-caution:focus-visible {
    outline: 2px solid rgba(166, 89, 75, 0.5) !important;
    outline-offset: 2px;
  }
  [data-theme="dark"] .set-btn-caution {
    background: rgba(212, 168, 154, 0.08);
    color: #D4A89A;
    border-color: rgba(212, 168, 154, 0.18);
  }
  [data-theme="dark"] .set-btn-caution:hover {
    background: rgba(212, 168, 154, 0.14);
    border-color: rgba(212, 168, 154, 0.32);
  }
  [data-theme="dark"] .set-btn-caution:focus-visible {
    outline: 2px solid rgba(212, 168, 154, 0.5) !important;
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .set-btn-caution { transition: none; }
  }

  /* ── Email provider picker (calm polish #2741) ── */
  #set-email-connect-overlay.set-overlay {
    background: rgba(58, 47, 38, 0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  #set-email-connect-overlay > .set-dialog {
    --font-size-picker-title: 21px;
    --font-size-picker-subtitle: 13.5px;
    --font-size-picker-primary: 14.5px;
    --font-size-picker-secondary: 12.5px;
    background: #FBF8F2;
    border-radius: 18px;
    border: 1px solid rgba(58, 47, 38, 0.10);
    box-shadow:
      0 2px 8px rgba(58, 47, 38, 0.08),
      0 8px 24px rgba(58, 47, 38, 0.06),
      0 16px 48px rgba(58, 47, 38, 0.04);
    width: min(460px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    padding: 32px 32px 26px;
    text-align: left;
  }
  #set-email-connect-overlay > .set-dialog h3 {
    color: #2B2A27;
    font-size: var(--font-size-picker-title);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
    margin: 0 0 7px;
    line-height: 1.25;
  }
  #set-email-connect-overlay > .set-dialog p {
    color: #6E6A60;
    font-size: var(--font-size-picker-subtitle);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    margin: 0 0 24px;
  }
  #set-email-connect-overlay.set-overlay > .set-dialog .set-provider-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  #set-email-connect-overlay.set-overlay > .set-dialog .set-provider-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: left;
    padding: 14px 18px;
    border-radius: 16px;
    background: #FFFEFB;
    border: 1px solid rgba(58, 47, 38, 0.08);
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s var(--ind-ease-out), border-color 0.15s var(--ind-ease-out), opacity 0.15s var(--ind-ease-out);
    min-height: 64px;
    height: auto;
  }
  #set-email-connect-overlay.set-overlay > .set-dialog .set-provider-btn:hover {
    background: rgb(255, 255, 255);
    border-color: rgba(58, 47, 38, 0.18);
    transform: none;
  }
  #set-email-connect-overlay.set-overlay > .set-dialog .set-provider-btn:focus-visible {
    outline: 2px solid rgb(74, 122, 104) !important;
    outline-offset: 2px;
  }
  #set-email-connect-overlay.set-overlay > .set-dialog .set-provider-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(58, 47, 38, 0.04);
  }
  #set-email-connect-overlay.set-overlay > .set-dialog .set-provider-icon svg,
  #set-email-connect-overlay.set-overlay > .set-dialog .set-provider-icon img {
    width: 24px;
    height: 24px;
  }
  #set-email-connect-overlay.set-overlay > .set-dialog .set-provider-btn > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    text-align: left;
  }
  #set-email-connect-overlay.set-overlay > .set-dialog .set-provider-name {
    font-size: var(--font-size-picker-primary);
    font-weight: var(--font-weight-semibold);
    color: #2B2A27;
  }
  #set-email-connect-overlay.set-overlay > .set-dialog .set-provider-sub {
    font-size: var(--font-size-picker-secondary);
    font-weight: var(--font-weight-normal);
    color: #6E6A60;
  }
  #set-email-connect-status {
    text-align: center;
    padding: 12px;
    margin-top: 12px;
    border-radius: 8px;
    /* one green family (the olive #5E6B5A base was a third green on the page) */
    background: rgba(74, 122, 104, 0.08);
    color: #3D6B57;
    font-size: var(--font-size-sm);
  }
  #set-email-connect-overlay.set-overlay > .set-dialog .set-dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(58, 47, 38, 0.08);
    gap: 8px;
  }
  #set-email-connect-overlay.set-overlay > .set-dialog .set-cancel-btn {
    background: transparent;
    border: 1px solid rgba(58, 47, 38, 0.15);
    /* 12px: the page's only pill in a 12px-radius button family */
    border-radius: 12px;
    min-height: 40px;
    padding: 8px 20px;
    cursor: pointer;
    color: #2B2A27;
    font-size: var(--font-size-base);
    transition: background 0.15s var(--ind-ease-out);
  }
  #set-email-connect-overlay.set-overlay > .set-dialog .set-cancel-btn:hover {
    background: rgba(58, 47, 38, 0.04);
  }
  #set-email-connect-overlay.set-overlay > .set-dialog .set-cancel-btn:focus-visible {
    outline: 2px solid rgb(74, 122, 104) !important;
    outline-offset: 2px;
  }
  @media (max-width: 520px) {
    #set-email-connect-overlay > .set-dialog {
      --font-size-picker-title: 19px;
      padding: 24px 20px 20px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    #set-email-connect-overlay.set-overlay > .set-dialog .set-provider-btn,
    #set-email-connect-overlay.set-overlay > .set-dialog .set-cancel-btn {
      transition: none !important;
    }
  }

  .set-progress {
    width: 100%; height: 8px;
    background: #EFE9E1;
    border-radius: 999px;
    overflow: hidden;
  }
  .set-progress-bar {
    height: 100%;
    background: #4A7A68;
    border-radius: 999px;
    transition: width 280ms var(--ind-ease-out);
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 767px) {
    body { background: #fff; }
    .settings-app {
      min-height: 100vh;
      min-height: 100dvh;
      padding-bottom: max(24px, calc(24px + env(safe-area-inset-bottom)));
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }
    .settings-main { background: #fff; }
    .settings-main { overflow-x: hidden; }
    body.has-mn-bar .settings-main { padding-bottom: calc(var(--mn-bar-height) + 16px); }
    .settings-app .s-backdrop.visible { display: block; }
    .settings-app .s-nav-item { height: 44px; }
    .settings-app .s-conv { padding: 10px; }
    .settings-app .s-icon-btn { width: 44px; height: 44px; }
    .settings-app #chat-sidebar-toggle { display: none; }

    /* Drawer trigger — fixed so it never scrolls away; z-index below sidebar(10) and backdrop(9) */
    #main-content > .chat-drawer-trigger {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 5;
      width: 44px;
      height: 44px;
      border: none;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: var(--ind-radius-xs);
      color: var(--ind-text);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Settings layout */
    .set-wrap { padding: 16px 16px 48px; }
    .set-header { height: auto; padding: 0; margin-bottom: 12px; align-items: center; }
    .set-title { font-size: var(--font-size-2xl); margin-bottom: 0; }
    .set-grid { grid-template-columns: 1fr; gap: 0; }

    /* Tab nav — scroll lives on the <ul> so scrollIntoView targets the right container;
       .set-nav provides the right-edge fade mask over the scrolling list */
    .set-nav {
      position: relative;
      top: 0;
      margin: 0 -16px 20px;
      padding: 0 16px;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to right, #2B2A27 calc(100% - 24px), transparent);
              mask-image: linear-gradient(to right, #2B2A27 calc(100% - 24px), transparent);
    }
    .set-nav ul {
      flex-direction: row;
      gap: 2px;
      flex-wrap: nowrap;
      padding-right: 16px;
      padding-bottom: 4px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      scroll-snap-type: x proximity;
      scroll-padding: 0 16px;
    }
    .set-nav ul::-webkit-scrollbar { display: none; }
    .set-nav a { padding: 0 14px; height: 44px; min-height: 44px; white-space: nowrap; }
    .set-nav a.active { scroll-snap-align: center; }

    /* Form rows — stack fields vertically on mobile. Margins (not grid gap)
       carry the rhythm: with gap 20 + the field's own 20px margin, the first
       stacked field sat ~40px above its sibling while :last-child collapsed
       the gap below the row to 0 — proximity inverted around the second field. */
    .set-field-row { grid-template-columns: 1fr; gap: 0; }
    .set-field-row > .set-field,
    .set-field-row > .set-field-grow { min-width: 0; flex: none; width: 100%; margin-bottom: 20px; }
    /* Avatar row — avatar slightly smaller + tighter gap so input gets room */
    .set-avatar-row { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
    .set-avatar { width: 40px; height: 40px; min-width: 40px; font-size: var(--font-size-base); }
    /* Section titles — inherit base uppercase label style on mobile */
    .set-section-title { min-height: auto; padding: 0; }
    .set-section {
      padding: 16px;
      overflow-wrap: break-word;
      word-break: break-word;
    }
    /* Labels/inputs — full-width textarea, comfortable padding */
    .set-input,
    .set-select,
    .set-textarea {
      min-height: 44px;
      font-size: var(--font-size-base);
      padding: 10px 14px;
    }
    .set-input[disabled] {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
    }
    .set-textarea { min-height: 88px; }
    .set-dropdown-trigger,
    .settings-app .s-dropdown {
      min-height: 44px;
      font-size: var(--font-size-base);
    }
    .set-dropdown.open .set-dropdown-menu,
    .settings-app .s-dropdown {
      position: fixed;
      bottom: calc(56px + env(safe-area-inset-bottom));
      left: 0;
      right: 0;
      top: auto;
      max-height: 50dvh;
      border-radius: var(--radius-card, 18px) var(--radius-card, 18px) 0 0;
      overflow-y: auto;
      padding-bottom: env(safe-area-inset-bottom);
      z-index: var(--z-toast, 2000);
    }
    /* Bottom sheet rises INTO place — the desktop closed-state translateY(-4px)
       made the sheet drift downwards on open. */
    .set-dropdown .set-dropdown-menu {
      transform: translateY(8px);
    }
    .set-dropdown.open .set-dropdown-menu {
      padding-bottom: max(6px, calc(6px + env(safe-area-inset-bottom)));
      transform: translateY(0);
    }
    .set-dropdown-item,
    .settings-app .s-dropdown-item {
      min-height: 48px;
      padding: 12px 20px;
    }

    /* Toggle rows — tighter gap; keep pill at 36×20 and expand tap area via ::before */
    .set-row { gap: 16px; align-items: center; }
    .set-toggle {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
    }
    .set-toggle-track {
      inset: auto;
      top: 50%;
      left: 50%;
      width: 36px;
      height: 20px;
      transform: translate(-50%, -50%);
    }
    /* Mobile track is translate-centred — the press scale must compose with it,
       not replace it (a bare scale() would snap the pill out of centre). */
    .set-toggle:active .set-toggle-track {
      transform: translate(-50%, -50%) scale(0.96);
    }
    .set-toggle::before {
      content: '';
      position: absolute;
      top: -12px; right: -6px; bottom: -12px; left: -6px;
    }

    /* Buttons — 44px touch targets, allow wrapping */
    .set-btn,
    .set-btn-primary {
      min-height: 44px;
      padding: 10px 20px;
    }
    .set-btn-row { flex-wrap: wrap; }

    /* Connection cards — single-row at all mobile widths */
    .set-connection { flex-wrap: nowrap; align-items: center; }
    .set-connection-info { flex: 1 1 auto; min-width: 0; }
    .set-connection > .connection-disconnect-btn,
    .set-connection > .connection-connect-btn { flex: 0 0 auto; white-space: nowrap; }
    .set-connection > [id$="-conn-action"] { flex: 0 0 auto; margin: 0; }
    .connection-connected { flex-wrap: nowrap; }
    .connection-disconnect-btn,
    .connection-connect-btn { min-height: 44px; }

    /* Plan card — tighter mobile padding (section spacing set above) */
    .set-plan { padding: 16px; }

    /* Memory/delete buttons — bigger touch target */
    .set-memory-del { min-width: 44px; min-height: 44px; }

    /* Dialog — more usable on mobile */
    .set-dialog { width: 94%; padding: 24px 20px; }

    /* Small text — bump to 12px for mobile readability */
    .settings-app .s-group, .set-memory-date, .settings-app .s-user-plan { font-size: var(--font-size-xs); }
  }
  /* Compact mobile connection cards — tight single-row layout */
  @media (max-width: 640px) {
    .set-connection {
      flex-wrap: nowrap;
      align-items: center;
      gap: 10px;
      padding: 13px;
      border-radius: 14px;
      margin-bottom: 10px;
    }
    .set-connection-icon {
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      min-width: 38px;
    }
    .set-connection-info {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .set-connection-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      font-size: var(--font-size-sm);
      line-height: 1.25;
    }
    .set-connection-desc {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      line-height: 1.3;
    }
    .set-connection > .connection-disconnect-btn,
    .set-connection > .connection-connect-btn {
      flex: 0 0 auto;
      align-self: center;
      height: 36px;
      min-height: 36px;
      padding: 0 13px;
      border-radius: 10px;
      white-space: nowrap;
      margin: 0;
    }
    .set-connection > [id$="-conn-action"] {
      flex: 1 1 0;
      min-width: 0;
      margin-left: 0;
      width: auto;
    }
    .set-connection:has(> [id$="-conn-action"]) .set-connection-info {
      flex: 0 1 84px;
      min-width: 72px;
    }
    .connection-connected {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: nowrap;
      min-width: 0;
      width: 100%;
    }
    .connection-connected .connection-email {
      flex: 1 1 0;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .connection-connected .connection-disconnect-btn {
      flex: 0 0 auto;
      height: 36px;
      min-height: 36px;
      padding: 0 13px;
      border-radius: 10px;
      white-space: nowrap;
      margin: 0;
    }
  }
  /* Small phones */
  @media (max-width: 380px) {
    .settings-app {
      padding: 12px max(12px, env(safe-area-inset-right)) max(80px, calc(80px + env(safe-area-inset-bottom))) max(12px, env(safe-area-inset-left));
    }
    .set-section {
      padding: 12px;
      border-radius: 14px;
    }
    .set-label { font-size: var(--font-size-sm); }
    .set-field { font-size: var(--font-size-xs); }
  }

  @media (min-width: 768px) {
    .settings-app .s-backdrop { display: none !important; }
  }
  @media (min-width: 768px) and (max-width: 1023px) {
    .settings-app .sidebar:not(.force-expanded) { width: var(--sidebar-collapsed); }
    .settings-app .sidebar:not(.force-expanded) .s-logo-text, .settings-app .sidebar:not(.force-expanded) .s-new-chat-label, .settings-app .sidebar:not(.force-expanded) .s-nav-label, .settings-app .sidebar:not(.force-expanded) .s-nav-badge, .settings-app .sidebar:not(.force-expanded) .s-convos, .settings-app .sidebar:not(.force-expanded) .s-more-toggle-label, .settings-app .sidebar:not(.force-expanded) .s-more-arrow, .settings-app .sidebar:not(.force-expanded) .s-more-items, .settings-app .sidebar:not(.force-expanded) .s-user-info, .settings-app .sidebar:not(.force-expanded) .s-user > .s-icon-btn { display: none; }
    .settings-app .sidebar:not(.force-expanded) .s-logo { display: none; }
    .settings-app .sidebar:not(.force-expanded) .s-header { padding: 14px 0 2px; justify-content: center; }
    .settings-app .sidebar:not(.force-expanded) .s-header-actions { margin: 0 auto; }
    .settings-app .sidebar:not(.force-expanded) .s-new-chat { margin: 4px auto 6px; padding: 0; width: 34px; height: 34px; justify-content: center; border-radius: 50%; }
    .settings-app .sidebar:not(.force-expanded) .s-nav { padding: 4px 0; border-bottom: none; margin-bottom: 0; width: 100%; }
    .settings-app .sidebar:not(.force-expanded) .s-nav-item { width: 34px; height: 34px; padding: 0; justify-content: center; margin: 2px auto; border-radius: 8px; color: var(--ind-text-muted); }
    .settings-app .sidebar:not(.force-expanded) .s-more-toggle, .settings-app .sidebar:not(.force-expanded) .s-more-items { display: none; }
    .settings-app .sidebar:not(.force-expanded) .chat-conv-show-more { display: none; }
    .settings-app .sidebar:not(.force-expanded) .s-user { padding: 12px 0 16px; justify-content: center; width: 100%; border-top: none; margin-top: auto; }
    .settings-app .sidebar:not(.force-expanded) .s-avatar { width: 30px; height: 30px; min-width: 30px; font-size: var(--font-size-xs); background: var(--ind-text); }
  }

  @supports (padding-top: env(safe-area-inset-top)) {
    .settings-app .sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); }
  }
  @supports (height: 100dvh) { body, .settings-app .sidebar, .settings-main { height: 100dvh; } }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

  /* ── Focus-visible — varm rose accent ── */
  /* Focus ≠ hover in light mode: focus adds a soft sage halo + a firmer border
     so a keyboard/click into a hovered field is unmistakable (the calm dyslexia
     audience must see where the cursor landed, not just a 1px hue shift). */
  .set-input:focus-visible,
  .set-textarea:focus-visible,
  .set-select:focus-visible {
    outline: none;
    outline-offset: 2px;
    border-color: rgba(74, 122, 104, 0.65);
    /* 0.16: the 0.10 halo was invisible on cream — keyboard landing must
       outrank the (now quieter) hover border */
    box-shadow: 0 0 0 3px rgba(74, 122, 104, 0.16);
  }

  /* No border-radius overrides in focus rules: forcing 10px visibly RESHAPED
     12px buttons at the exact moment they took focus (outline follows the
     element's own radius in evergreen browsers). */
  .set-btn:focus-visible,
  .set-btn-primary:focus-visible,
  .set-memory-del:focus-visible,
  .connection-connect-btn:focus-visible {
    outline: 2px solid rgba(74, 122, 104, 0.5) !important;
    outline-offset: 2px;
  }
  .connection-disconnect-btn:focus-visible {
    outline: 2px solid rgba(166, 89, 75, 0.5) !important;
    outline-offset: 2px;
    color: #A6594B;
    border-color: rgba(166, 89, 75, 0.25);
    background: rgba(166, 89, 75, 0.04);
  }
  #add-email-btn.set-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  #add-email-btn.set-btn svg {
    flex-shrink: 0;
  }

  .settings-app .s-icon-btn:focus-visible,
  .settings-app .s-nav-item:focus-visible,
  .settings-app .s-new-chat:focus-visible,
  .settings-app .s-conv:focus-visible,
  .settings-app .s-more-toggle:focus-visible,
  .settings-app .s-dropdown-item:focus-visible {
    outline: none;
    outline-offset: 2px;
  }
  /* Settings tab nav is the page's primary orientation control — a keyboard user
     must see which tab is focused (was outline:none = WCAG 2.4.7 fail). These sit
     on the low-contrast cream canvas, so the ring is denser (0.8) than the
     button rings, which sit on white — it clears ~3:1 against #FAF7F3. */
  .set-nav a:focus-visible {
    outline: 2px solid rgba(74, 122, 104, 0.8);
    outline-offset: 2px;
    border-radius: 10px;
  }

  .set-toggle input:focus-visible + .set-toggle-track {
    outline: 2px solid rgba(74, 122, 104, 0.8);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    .set-connection,
    .connection-disconnect-btn {
      transition: none;
    }

    .set-dropdown-menu,
    .set-dropdown-arrow {
      transition: none;
    }
  }
  @media print { .settings-app .sidebar, .settings-app .s-backdrop { display: none !important; } .settings-main { margin: 0; padding: 0; } }
  .settings-app .sidebar.no-transition { transition: none !important; }
  .settings-app .sidebar.no-transition * { transition: none !important; }

  /* ── DARK MODE ── */
  [data-theme="dark"] {
    color-scheme: dark;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    --ind-sidebar-bg: rgba(42, 38, 34, 0.60);
    --ind-sidebar-hover: rgba(232, 224, 216, 0.06);
    --ind-sidebar-active: rgba(124, 184, 164, 0.10);
    /* Solid surfaces: the old rgba(42,38,34,.85) let the canvas gradient bleed
       through, so the same card changed colour with its vertical position and
       the page→card elevation step collapsed to the hairline alone. */
    --ind-surface: #282420;
    --ind-surface-white: #282420;
    --ind-border: rgba(232, 224, 216, 0.12);
    --ind-border-light: rgba(232, 224, 216, 0.05);
    --ind-text: #E8DDD4;
    --ind-text-secondary: #B8AFA6;
    --ind-text-muted: #8A8179;
    --ind-text-faint: #635C55;
  }

  /* Monotonic canvas (the old dark→light→dark ramp had a lighter "belly" at
     55% — a mid-page wash with banding risk) + the same twin sage radials
     that give light mode its ambient signature. */
  [data-theme="dark"] .settings-app {
    background:
      radial-gradient(ellipse at 74% 18%, rgba(124, 184, 164, 0.05) 0%, transparent 48%),
      radial-gradient(ellipse at 22% 86%, rgba(124, 184, 164, 0.04) 0%, transparent 48%),
      linear-gradient(180deg, #1A1714 0%, #161411 100%);
  }

  [data-theme="dark"] .settings-app * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  [data-theme="dark"] body {
    background: var(--color-bg);
    color: var(--ind-text);
  }

  [data-theme="dark"] .settings-main,
  [data-theme="dark"] .set-title,
  [data-theme="dark"] .set-row-title,
  [data-theme="dark"] .set-plan-name,
  [data-theme="dark"] .set-connection-name,
  [data-theme="dark"] .set-memory-text {
    color: var(--ind-text);
  }

  [data-theme="dark"] .set-label,
  [data-theme="dark"] .set-hint,
  [data-theme="dark"] .set-row-desc,
  [data-theme="dark"] .set-plan-price,
  [data-theme="dark"] .set-plan-features li,
  [data-theme="dark"] .set-connection-desc,
  [data-theme="dark"] .set-connection-status.disconnected,
  [data-theme="dark"] .set-memory-date,
  [data-theme="dark"] .set-connection-loading {
    color: var(--ind-text-secondary);
  }

  /* Sidebar */
  [data-theme="dark"] .settings-app .sidebar {
    border-right-color: var(--ind-border);
    scrollbar-color: rgba(232, 228, 220, 0.16) transparent;
  }
  [data-theme="dark"] .settings-app .sidebar.collapsed {
    background-color: #201B18;
    background-image: none;
    border-right-color: var(--ind-border);
  }
  [data-theme="dark"] .settings-app .s-new-chat-icon {
    background: rgba(255, 255, 255, 0.06);
  }
  [data-theme="dark"] .settings-app .s-new-chat:hover .s-new-chat-icon {
    background: rgba(255, 255, 255, 0.10);
  }
  [data-theme="dark"] .settings-app .s-nav { border-bottom-color: var(--ind-border); }
  [data-theme="dark"] .settings-app .sidebar.collapsed .s-nav-item:hover { background: var(--ind-sidebar-hover); }
  [data-theme="dark"] .settings-app .sidebar.collapsed .s-nav-item.active { background: var(--ind-sidebar-active); }
  [data-theme="dark"] .settings-app .sidebar.collapsed .s-user:hover { background: var(--ind-sidebar-hover); }
  [data-theme="dark"] .settings-app .s-user { border-top-color: var(--ind-border); }
  [data-theme="dark"] .settings-app .s-user:hover .s-avatar { border-color: rgba(124, 184, 164, 0.25); }
  [data-theme="dark"] .settings-app .s-convos { scrollbar-color: rgba(232, 228, 220, 0.12) transparent; }
  [data-theme="dark"] .settings-app .s-convos::-webkit-scrollbar-thumb { background: rgba(232, 228, 220, 0.12); }
  [data-theme="dark"] .settings-app .s-avatar { background: var(--ind-text-secondary); color: var(--color-bg); }
  [data-theme="dark"] .settings-app .sidebar.collapsed .s-avatar { background: var(--ind-text); color: var(--color-bg); }

  /* Dropdown */
  [data-theme="dark"] .settings-app .s-dropdown {
    background: rgba(42, 38, 34, 0.95);
    border-color: var(--ind-border);
    box-shadow: rgba(20, 18, 15, 0.32) 0px 4px 16px;
    color: var(--ind-text-secondary);
  }
  [data-theme="dark"] .settings-app .s-dropdown-item { color: var(--ind-text-secondary); }
  [data-theme="dark"] .settings-app .s-dropdown-item:hover { background: rgba(232, 224, 216, 0.06); }
  [data-theme="dark"] .settings-app .s-dropdown-sep { background: var(--ind-border); }

  /* Tooltip */
  [data-theme="dark"] .settings-app .sidebar.collapsed .s-nav-item[data-tooltip]:hover::after,
  [data-theme="dark"] .settings-app .sidebar.collapsed .s-new-chat[data-tooltip]:hover::after {
    background: var(--ind-text); color: var(--color-bg);
    box-shadow: 0 2px 8px rgba(20, 18, 15, 0.32);
  }

  /* Main scrollbar */
  [data-theme="dark"] .settings-main {
    scrollbar-color: rgba(232, 228, 220, 0.16) transparent;
  }

  /* Inputs, textarea, select — use background-color to preserve select background-image */
  [data-theme="dark"] .set-input,
  [data-theme="dark"] .set-textarea,
  [data-theme="dark"] .set-select {
    background-color: var(--ind-surface-white);
    border-color: var(--ind-border);
    color: var(--ind-text);
  }
  /* Placeholders ride --ind-text-muted from the base rule now: the old faint
     #635C55 on #282420 was ~2.3:1 — "Mindst 8 tegn" lived only there and was
     near-illegible (muted #8A8179 ≈ 4.1:1). */
  [data-theme="dark"] .set-input:hover,
  [data-theme="dark"] .set-textarea:hover,
  [data-theme="dark"] .set-select:hover {
    border-color: rgba(124, 184, 164, 0.18);
  }
  [data-theme="dark"] .set-input:focus-visible,
  [data-theme="dark"] .set-textarea:focus-visible,
  [data-theme="dark"] .set-select:focus-visible {
    border-color: rgba(124, 184, 164, 0.45);
  }
  /* Invalid mark keeps its rust border in dark (source order: after the dark
     base/hover/focus rules, so none of them can wash it back to --ind-border). */
  [data-theme="dark"] .set-input[aria-invalid="true"] {
    border-color: rgba(212, 168, 154, 0.6);
  }
  [data-theme="dark"] .set-select {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgb(184,175,166)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  }

  [data-theme="dark"] .set-dropdown-trigger {
    background: var(--ind-surface-white);
    border-color: var(--ind-border);
    color: var(--ind-text);
  }
  [data-theme="dark"] .set-dropdown-menu {
    background: #2A2622;
    border-color: var(--ind-border);
    box-shadow: 0 8px 32px rgba(20, 18, 15, 0.40);
  }
  [data-theme="dark"] .set-dropdown-item {
    color: var(--ind-text-secondary);
  }
  /* Warm hover washes: pure white over warm brown reads ashy — key the wash
     off the warm text family instead. */
  [data-theme="dark"] .set-dropdown-item:hover,
  [data-theme="dark"] .set-dropdown-item.focused {
    background: rgba(232, 224, 216, 0.06);
  }
  [data-theme="dark"] .set-dropdown-item.selected {
    color: #7CB8A4;
    background: rgba(124, 184, 164, 0.12);
  }

  /* Section cards */
  [data-theme="dark"] .set-section {
    /* Solid, one step above the canvas: dark gets a real page→card→input
       elevation ramp (#161411…#1A1714 → #211D1A → #282420) instead of one
       translucent paint carried by the hairline. */
    background: #211D1A;
    border-color: var(--ind-border);
  }
  [data-theme="dark"] .set-section-title {
    color: var(--ind-text);
  }
  [data-theme="dark"] .set-row { border-bottom-color: var(--ind-border-light); }

  /* Settings nav — dark mode */
  [data-theme="dark"] .set-nav a {
    color: var(--ind-text-secondary);
  }
  [data-theme="dark"] .set-nav a:hover {
    background: rgba(124, 184, 164, 0.08);
    color: var(--ind-text);
  }
  [data-theme="dark"] .set-nav a.active {
    background: rgba(124, 184, 164, 0.12);
    color: #7CB8A4;
  }

  /* (Removed the dark-only nav background pill: it made the tab column a
     structural card that light mode lacked — the "two themes built separately"
     tell. The active pill has enough contrast on the dark canvas alone.) */

  /* Buttons */
  [data-theme="dark"] .set-btn {
    background: var(--ind-surface-white);
    border-color: var(--ind-border);
    color: var(--ind-text);
  }
  [data-theme="dark"] .set-btn:hover {
    border-color: rgba(124, 184, 164, 0.30);
    background: rgba(232, 224, 216, 0.06);
  }
  [data-theme="dark"] .set-btn-primary {
    background: #4A7A68;
    color: #FFFEFB;
    border-color: transparent;
    /* re-keyed for dark: the light sage shadow composites LIGHTER than the dark
       canvas (glow, not grounding) — shadows must stay darker than their ground */
    box-shadow: 0 4px 12px rgba(20, 18, 15, 0.35);
  }
  /* Hover LIGHTENS on a dark canvas (the pasted light-mode #3D6B57 hover went
     darker = read as pressed/disabled); the press keeps the darker step. */
  [data-theme="dark"] .set-btn-primary:hover {
    background: #558873;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(20, 18, 15, 0.45);
  }
  [data-theme="dark"] .set-btn-primary:active {
    background: #3D6B57;
    box-shadow: 0 2px 8px rgba(20, 18, 15, 0.30);
  }
  [data-theme="dark"] .set-btn-danger {
    color: #D4A89A;
    border-color: rgba(212, 168, 154, 0.30);
  }
  [data-theme="dark"] .set-btn-danger:hover {
    background: rgba(212, 168, 154, 0.10);
    border-color: rgba(212, 168, 154, 0.45);
  }

  /* Cards: plan, connection, memory */
  [data-theme="dark"] .set-plan,
  [data-theme="dark"] .set-connection,
  [data-theme="dark"] .set-memory {
    background: var(--ind-surface-white);
    border-color: var(--ind-border);
  }
  [data-theme="dark"] .set-connection {
    background: var(--ind-surface-white);
  }
  [data-theme="dark"] .set-connection:hover {
    background: rgba(232, 224, 216, 0.05);
    border-color: rgba(124, 184, 164, 0.22);
  }
  [data-theme="dark"] .set-connection-name {
    color: var(--ind-text);
  }
  [data-theme="dark"] .set-connection-desc {
    color: var(--ind-text-secondary);
  }
  [data-theme="dark"] .set-connection-icon { background: rgba(124, 184, 164, 0.10); }
  [data-theme="dark"] .set-connection-icon svg { color: #7CB8A4; }

  /* Connection action buttons */
  [data-theme="dark"] .connection-connect-btn {
    background: var(--ind-surface-white);
    border-color: var(--ind-border);
    color: var(--ind-text);
  }
  [data-theme="dark"] .connection-connect-btn:hover {
    border-color: rgba(124, 184, 164, 0.30);
    background: rgba(232, 224, 216, 0.06);
  }
  [data-theme="dark"] .connection-disconnect-btn {
    border-color: rgba(232, 224, 216, 0.12);
    /* secondary, not muted: 13px "Fjern" at muted #8A8179 was ~4.0:1 (fails
       4.5 for small text); #B8AFA6 ≈ 7.5:1, hover still goes rust */
    color: var(--ind-text-secondary);
  }
  [data-theme="dark"] .connection-disconnect-btn:hover {
    color: #D4A89A;
    border-color: rgba(212, 168, 154, 0.25);
    background: rgba(212, 168, 154, 0.08);
  }

  /* Status badges */
  [data-theme="dark"] .set-connection-status.connected {
    background: rgba(124, 184, 164, 0.14);
    color: #7CB8A4;
  }
  [data-theme="dark"] .set-connection-status.disconnected {
    background: rgba(232, 224, 216, 0.05);
  }
  [data-theme="dark"] .connection-email { color: #7CB8A4; }
  [data-theme="dark"] .connection-dot { background: #7CB8A4; }

  /* Memory status badges */
  [data-theme="dark"] .memory-status-on {
    background: rgba(124, 184, 164, 0.14);
    color: #7CB8A4;
  }
  [data-theme="dark"] .memory-status-off {
    background: rgba(232, 224, 216, 0.05);
  }

  /* Memory delete hover */
  [data-theme="dark"] .set-memory-del:hover {
    background: rgba(212, 168, 154, 0.12);
    color: #D4A89A;
  }

  /* Toggle switch */
  [data-theme="dark"] .set-toggle-track {
    /* 0.30: at 0.14 the off-track vanished against the card (~1.45:1) — only
       the knob floated, the control's bounds were gone */
    background: rgba(232, 224, 216, 0.30);
    box-shadow: none;
  }
  [data-theme="dark"] .set-toggle input:checked + .set-toggle-track {
    background: #4A7A68;
  }
  [data-theme="dark"] .set-toggle-track::after {
    background: #E8DDD4;
    box-shadow: 0 1px 3px rgba(20, 18, 15, 0.32);
  }

  /* Progress bar — borderless pill since the redesign; dark needs its own
     visible track (surface-white ≈ card bg here, near-invisible) */
  [data-theme="dark"] .set-progress {
    background: rgba(232, 228, 220, 0.10);
  }
  [data-theme="dark"] .set-progress-bar {
    background: #4A7A68;
  }

  /* Dialog overlay */
  [data-theme="dark"] .set-overlay {
    background: rgba(20, 18, 15, 0.60);
  }
  [data-theme="dark"] .set-dialog {
    background: var(--ind-surface-white);
    box-shadow: 0 8px 32px rgba(20, 18, 15, 0.40);
  }
  [data-theme="dark"] .set-dialog-secret {
    background: rgba(232, 224, 216, 0.06);
  }

  /* ── Email provider picker — dark mode (#2753) ── */
  [data-theme="dark"] #set-email-connect-overlay.set-overlay {
    background: rgba(20, 18, 15, 0.58);
  }
  [data-theme="dark"] #set-email-connect-overlay > .set-dialog {
    background: #2A2622;
    border-color: rgba(232, 224, 216, 0.10);
    box-shadow:
      0 2px 8px rgba(20, 18, 15, 0.24),
      0 8px 24px rgba(20, 18, 15, 0.18),
      0 16px 48px rgba(20, 18, 15, 0.12);
  }
  [data-theme="dark"] #set-email-connect-overlay > .set-dialog h3 {
    color: #E8DDD4;
  }
  [data-theme="dark"] #set-email-connect-overlay > .set-dialog p {
    color: #B8AFA6;
  }
  [data-theme="dark"] #set-email-connect-overlay.set-overlay > .set-dialog .set-provider-btn {
    background: rgba(232, 224, 216, 0.04);
    border-color: rgba(232, 224, 216, 0.08);
  }
  [data-theme="dark"] #set-email-connect-overlay.set-overlay > .set-dialog .set-provider-btn:hover {
    background: rgba(232, 224, 216, 0.08);
    border-color: rgba(232, 224, 216, 0.16);
  }
  [data-theme="dark"] #set-email-connect-overlay.set-overlay > .set-dialog .set-provider-btn:focus-visible {
    outline: 2px solid rgba(124, 184, 164, 0.7) !important;
    outline-offset: 2px;
  }
  [data-theme="dark"] #set-email-connect-overlay.set-overlay > .set-dialog .set-provider-icon {
    background: rgba(232, 224, 216, 0.06);
  }
  [data-theme="dark"] #set-email-connect-overlay.set-overlay > .set-dialog .set-provider-name {
    color: #E8DDD4;
  }
  [data-theme="dark"] #set-email-connect-overlay.set-overlay > .set-dialog .set-provider-sub {
    color: #B8AFA6;
  }
  [data-theme="dark"] #set-email-connect-status {
    background: rgba(125, 143, 121, 0.10);
    color: #7CB8A4;
  }
  [data-theme="dark"] #set-email-connect-overlay.set-overlay > .set-dialog .set-dialog-footer {
    border-top-color: rgba(232, 224, 216, 0.08);
  }
  [data-theme="dark"] #set-email-connect-overlay.set-overlay > .set-dialog .set-cancel-btn {
    border-color: rgba(232, 224, 216, 0.12);
    color: #B8AFA6;
  }
  [data-theme="dark"] #set-email-connect-overlay.set-overlay > .set-dialog .set-cancel-btn:hover {
    background: rgba(232, 224, 216, 0.04);
  }
  [data-theme="dark"] #set-email-connect-overlay.set-overlay > .set-dialog .set-cancel-btn:focus-visible {
    outline: 2px solid rgba(124, 184, 164, 0.7) !important;
    outline-offset: 2px;
  }

  /* Focus visible */
  [data-theme="dark"] .settings-app .s-icon-btn:focus-visible,
  [data-theme="dark"] .settings-app .s-new-chat:focus-visible,
  [data-theme="dark"] .settings-app .s-conv:focus-visible,
  [data-theme="dark"] .settings-app .s-more-toggle:focus-visible,
  [data-theme="dark"] .settings-app .s-dropdown-item:focus-visible {
    outline-color: transparent;
  }
  /* Dark: the tab nav keeps a visible focus ring (sage-ink), same as light. */
  [data-theme="dark"] .set-nav a:focus-visible {
    outline: 2px solid rgba(124, 184, 164, 0.8);
    outline-offset: 2px;
  }
  [data-theme="dark"] .set-dropdown-trigger:focus-visible {
    outline: 2px solid rgba(124, 184, 164, 0.8);
    outline-offset: 2px;
  }
  [data-theme="dark"] .set-toggle input:focus-visible + .set-toggle-track {
    outline: 2px solid rgba(124, 184, 164, 0.8);
    outline-offset: 3px;
  }

  /* Skip link */
  [data-theme="dark"] .settings-app .s-skip-link {
    background: var(--ind-text);
    color: var(--color-bg);
  }

  /* Mobile */
  @media (max-width: 767px) {
    [data-theme="dark"] body { background: var(--color-bg); }
    [data-theme="dark"] .settings-main { background: transparent; }
    [data-theme="dark"] .settings-app .s-backdrop { background: rgba(20, 18, 15, 0.56); }
    [data-theme="dark"] #main-content > .chat-drawer-trigger {
      background: rgba(42, 38, 34, 0.85);
    }
    [data-theme="dark"] .set-nav {
      background: transparent;
      border-radius: 0;
      padding: 0 16px;
    }
  }

  /* Tablet collapsed */
  @media (min-width: 768px) and (max-width: 1023px) {
    [data-theme="dark"] .settings-app .sidebar:not(.force-expanded) {
      background-color: #201B18;
      background-image: none;
    }
    [data-theme="dark"] .settings-app .sidebar:not(.force-expanded) .s-avatar { background: var(--ind-text); color: var(--color-bg); }
  }

  /* Plan feature check icons invert */
  [data-theme="dark"] .set-plan-features svg { color: #7CB8A4; }
  [data-theme="dark"] .set-plan-features li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237CB8A4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  }

  /* Profile avatar — sage brand gradient, same identity as light (was a flat grey).
     The element carries BOTH .s-avatar and .set-avatar; the shared dark rule
     `[data-theme="dark"] .settings-app .s-avatar` (0,3,0) outranks a bare
     `.set-avatar` (0,2,0), so this override must match that specificity + sit
     later in source to win. */
  [data-theme="dark"] .settings-app .set-avatar {
    background: radial-gradient(circle at 30% 30%, #6E9A88, #4A7A68);
    color: #FFFEFB;
    box-shadow: 0 2px 8px rgba(20, 18, 15, 0.35);
  }

  /* Dark mode focus-visible — inputs get a sage-ink halo (outline stays off; the
     box-shadow ring is the indicator, matching light mode). */
  [data-theme="dark"] .set-input:focus-visible, [data-theme="dark"] .set-textarea:focus-visible, [data-theme="dark"] .set-select:focus-visible {
    outline-color: transparent;
    box-shadow: 0 0 0 3px rgba(124, 184, 164, 0.16);
  }
  [data-theme="dark"] .set-btn:focus-visible, [data-theme="dark"] .set-memory-del:focus-visible,
  [data-theme="dark"] .connection-connect-btn:focus-visible { outline: 2px solid rgba(124, 184, 164, 0.5) !important; outline-offset: 2px; }
  [data-theme="dark"] .connection-disconnect-btn:focus-visible {
    outline: 2px solid rgba(212, 168, 154, 0.5) !important;
    outline-offset: 2px;
    color: #D4A89A;
    border-color: rgba(212, 168, 154, 0.25);
    background: rgba(212, 168, 154, 0.08);
  }

  .set-konto-privacy-link {
    display: block;
    margin-top: 24px;
    font-size: var(--font-size-xs);
    /* was #A89B91 ≈ 2.5:1 on the cream canvas (AA fail for a real nav link).
       #6E6A60 = --ind-text-secondary ≈ 5.2:1; hover darkens to full ink. */
    color: #6E6A60;
    text-decoration: none;
    transition: color 150ms var(--ind-ease-out);
  }
  .set-konto-privacy-link:hover {
    color: var(--ind-text, #2B2A27);
    text-decoration: underline;
  }
  [data-theme="dark"] .set-konto-privacy-link {
    color: #A89B91 !important;
  }
  [data-theme="dark"] .set-konto-privacy-link:hover {
    color: #C4B8AE !important;
  }

/* ── Dikteringsordbog (Assistent-fanen) ──────────────────────────────────
   Mockup r2 (Morten 2026-07-12): ren overskrift, chips m. slet-X, "Tilføj
   ord", automatik-linjen KUN i footeren. Salvie-familien via tokens m.
   selvbærende fallbacks (chip = lys salvie-pille, læsbar i begge temaer). */
.set-ordbog-head {
  display: flex;
  /* flex-start: the title keeps rank with the other cards' titles instead of
     being pushed ~10px down by centring against the 40px button */
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.set-ordbog-desc { margin-top: 4px; }
.set-ordbog-addform:not([hidden]) {
  display: flex;
  /* centre the 40px button against the 44px input */
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
/* Author display rules must never defeat the hidden attribute (progressive
   disclosure: the add form starts collapsed). */
.set-ordbog-addform[hidden] {
  display: none !important;
}
.set-ordbog-addform input {
  flex: 1;
  min-width: 0;
}
.set-ordbog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.ss-ordbog-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: var(--sage-bg, #EDF6F2);
  color: var(--sage-text, #3D6B57);
  border: 1px solid var(--sage-light, #C8DDD2);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  line-height: 1.3;
}
.ss-ordbog-chip-x {
  background: none;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 4px 6px;
  margin: -4px -6px -4px -2px;
  color: inherit;
  opacity: 0.55;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.12s var(--ind-ease-out), transform 0.12s var(--ind-ease-out);
}
.ss-ordbog-chip-x:hover,
.ss-ordbog-chip-x:focus-visible {
  opacity: 1;
}
.ss-ordbog-chip-x:active {
  transform: scale(0.92);
}
/* Outline-based focus ring: independent of box-shadow, so the dark-mode
   box-shadow kill can never erase keyboard focus visibility. */
.ss-ordbog-chip-x:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/* Touch devices: the X keeps its small visual but gets a full 44px hit box
   ("Slet med et tryk" must hold for motor-challenged hands too). The wider
   gap keeps neighbouring hit boxes from overlapping. */
@media (max-width: 767px), (any-pointer: coarse) {
  /* row-gap 20px: the 44px hit boxes overhang ~9px above/below each chip, so
     wrapped rows need >18px vertical clearance to keep taps unambiguous. */
  .set-ordbog-chips { gap: 20px 12px; }
  .ss-ordbog-chip-x {
    min-width: 44px;
    min-height: 44px;
    margin: -12px -12px -12px -4px;
  }
}
.set-ordbog-empty,
.set-ordbog-error {
  /* 0: the 40px Add-button already inflates the head row ~12px past the title
     baseline — an extra 12 put this card's title-to-content gap at 30px where
     every sibling card runs 18px. */
  margin-top: 0;
}
.set-ordbog-footer {
  /* a visible pause before the editorial footnote (14px merged it into the
     state text above; 20px = the field rhythm) */
  margin-top: 20px;
}
/* !important: ends the review-recidiv about global dark resets outranking the
   chip palette; the classes are unique, so nothing legitimate can lose to it.
   Staging computed-style probe still validates the rendered result. */
[data-theme="dark"] .ss-ordbog-chip {
  background: rgba(125, 168, 147, 0.14) !important;
  color: var(--sage-dark, #7DA893) !important;
  border-color: rgba(125, 168, 147, 0.35) !important;
}
[data-theme="dark"] .ss-ordbog-chip-x {
  background: none !important;
  border: 0 !important;
  color: inherit !important;
  box-shadow: none !important;
}

  /* Destructive buttons: rust focus ring so the ring matches the action's own
     color family (light rust, dark warm tint) instead of the positive sage. */
  .set-btn-danger:focus-visible {
    outline: 2px solid rgba(166, 89, 75, 0.5) !important;
    outline-offset: 2px;
  }
  [data-theme="dark"] .set-btn-danger:focus-visible {
    outline: 2px solid rgba(212, 168, 154, 0.5) !important;
    outline-offset: 2px;
  }


/* ══════════════════════════════════════════════════════════════════════════
   DICTATION tab - the dictionary words, the upload zone and the review list.
   Sage only. Neither --color-accent (#079aa2) nor blue belongs here.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --ord-line: var(--color-border, #e4e6e8);
  --ord-key: var(--sage-dark, #4A7A68);
  --ord-key-text: var(--sage-text, #3D6B57);
  --ord-key-soft: var(--sage-light, #E0EDE6);
  --ord-key-bg: var(--sage-bg, #F2F8F5);
  --ord-key-mid: var(--sage, #A8C5B8);
  --ord-x: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.1%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%206l12%2012M18%206L6%2018%27%2F%3E%3C%2Fsvg%3E");
  --ord-search: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2710.5%27%20cy%3D%2710.5%27%20r%3D%276.5%27%2F%3E%3Cpath%20d%3D%27M15.4%2015.4L21%2021%27%2F%3E%3C%2Fsvg%3E");
  --ord-doc: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%203H7a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V8z%27%2F%3E%3Cpath%20d%3D%27M14%203v5h5%27%2F%3E%3Cpath%20d%3D%27M9%2013h6M9%2017h4%27%2F%3E%3C%2Fsvg%3E");
  --ord-check: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012.5l4.5%204.5L19%207%27%2F%3E%3C%2Fsvg%3E");
}
.ss-ord-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── nav icons: masks, so they inherit the link colour in every theme ── */
.set-nav a::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px;
  background-color: currentColor; opacity: .7;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 18px 18px; mask-size: 18px 18px;
  transition: opacity .15s cubic-bezier(.2,0,0,1);
}
.set-nav a:hover::before { opacity: .85; }
.set-nav a.active::before { opacity: 1; }
.set-nav a[data-tab="konto"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%273.6%27%2F%3E%3Cpath%20d%3D%27M4.5%2020.5c0-3.9%203.4-5.9%207.5-5.9s7.5%202%207.5%205.9%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%273.6%27%2F%3E%3Cpath%20d%3D%27M4.5%2020.5c0-3.9%203.4-5.9%207.5-5.9s7.5%202%207.5%205.9%27%2F%3E%3C%2Fsvg%3E"); }
.set-nav a[data-tab="sofia"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.2l1.7%204.6%204.6%201.7-4.6%201.7L12%2015.8l-1.7-4.6L5.7%209.5l4.6-1.7z%27%2F%3E%3Cpath%20d%3D%27M18.4%2015.6l.8%202.1%202.1.8-2.1.8-.8%202.1-.8-2.1-2.1-.8%202.1-.8z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.2l1.7%204.6%204.6%201.7-4.6%201.7L12%2015.8l-1.7-4.6L5.7%209.5l4.6-1.7z%27%2F%3E%3Cpath%20d%3D%27M18.4%2015.6l.8%202.1%202.1.8-2.1.8-.8%202.1-.8-2.1-2.1-.8%202.1-.8z%27%2F%3E%3C%2Fsvg%3E"); }
.set-nav a[data-tab="diktatordbog"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%279%27%20y%3D%272.8%27%20width%3D%276%27%20height%3D%2710%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27M5.2%2011.2a6.8%206.8%200%200%200%2013.6%200%27%2F%3E%3Cpath%20d%3D%27M12%2018v3.2%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%279%27%20y%3D%272.8%27%20width%3D%276%27%20height%3D%2710%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27M5.2%2011.2a6.8%206.8%200%200%200%2013.6%200%27%2F%3E%3Cpath%20d%3D%27M12%2018v3.2%27%2F%3E%3C%2Fsvg%3E"); }
.set-nav a[data-tab="forbindelser"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.6%2014.4l4.8-4.8%27%2F%3E%3Cpath%20d%3D%27M7.9%2012.1L6.1%2013.9a3.4%203.4%200%200%200%204.8%204.8l1.8-1.8%27%2F%3E%3Cpath%20d%3D%27M16.1%2011.9l1.8-1.8a3.4%203.4%200%200%200-4.8-4.8l-1.8%201.8%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.6%2014.4l4.8-4.8%27%2F%3E%3Cpath%20d%3D%27M7.9%2012.1L6.1%2013.9a3.4%203.4%200%200%200%204.8%204.8l1.8-1.8%27%2F%3E%3Cpath%20d%3D%27M16.1%2011.9l1.8-1.8a3.4%203.4%200%200%200-4.8-4.8l-1.8%201.8%27%2F%3E%3C%2Fsvg%3E"); }
.set-nav a[data-tab="abonnement"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.8%27%20y%3D%275%27%20width%3D%2718.4%27%20height%3D%2714%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27M2.8%209.8h18.4%27%2F%3E%3Cpath%20d%3D%27M6.8%2014.6h4%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.8%27%20y%3D%275%27%20width%3D%2718.4%27%20height%3D%2714%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27M2.8%209.8h18.4%27%2F%3E%3Cpath%20d%3D%27M6.8%2014.6h4%27%2F%3E%3C%2Fsvg%3E"); }
.set-nav a[data-tab="sikkerhed"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202.8l7.2%203v5.6c0%204.6-3.1%207.7-7.2%209.2-4.1-1.5-7.2-4.6-7.2-9.2V5.8z%27%2F%3E%3Cpath%20d%3D%27M9.4%2012.1l1.9%201.9%203.4-3.7%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202.8l7.2%203v5.6c0%204.6-3.1%207.7-7.2%209.2-4.1-1.5-7.2-4.6-7.2-9.2V5.8z%27%2F%3E%3Cpath%20d%3D%27M9.4%2012.1l1.9%201.9%203.4-3.7%27%2F%3E%3C%2Fsvg%3E"); }
.set-nav a[data-tab="vidensbase"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%206.6C10.4%205%208.4%204.3%204.9%204.3v13c3.5%200%205.5.7%207.1%202.3%201.6-1.6%203.6-2.3%207.1-2.3v-13c-3.5%200-5.5.7-7.1%202.3z%27%2F%3E%3Cpath%20d%3D%27M12%206.6v13%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%206.6C10.4%205%208.4%204.3%204.9%204.3v13c3.5%200%205.5.7%207.1%202.3%201.6-1.6%203.6-2.3%207.1-2.3v-13c-3.5%200-5.5.7-7.1%202.3z%27%2F%3E%3Cpath%20d%3D%27M12%206.6v13%27%2F%3E%3C%2Fsvg%3E"); }

/* ── the words: tags, not form fields ── */
.ss-ordbog-chip {
  gap: 2px !important;
  min-height: 36px;
  padding: 6px 5px 6px 13px !important;
  border-color: var(--ord-key-soft) !important;
  background: var(--ord-key-bg) !important;
  color: var(--color-text, #384551) !important;
  font-size: 15px !important; font-weight: 500;
  transition: background .12s ease, border-color .12s ease;
}
.ss-ordbog-chip:hover { background: var(--ord-key-soft) !important; border-color: var(--ord-key-mid) !important; }
.ss-ordbog-chip-term { overflow-wrap: anywhere; }
/* font-size:0 + transparent colour: the literal "x" inside the button must never be
   drawn on top of the masked icon. */
.ss-ordbog-chip-x {
  flex: 0 0 auto; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: transparent;
  color: transparent; font-size: 0 !important; cursor: pointer;
  opacity: .55; transition: background .12s, opacity .12s;
}
.ss-ordbog-chip-x::after {
  content: ""; width: 11px; height: 11px;
  background-color: var(--color-text-secondary, #646e78);
  -webkit-mask: var(--ord-x) center / 11px no-repeat;
          mask: var(--ord-x) center / 11px no-repeat;
}
.ss-ordbog-chip:hover .ss-ordbog-chip-x { opacity: 1; }
.ss-ordbog-chip-x:hover { background: var(--color-error-light, rgba(255,62,29,.14)); opacity: 1; }
.ss-ordbog-chip-x:hover::after { background-color: var(--color-error, #ff3e1d); }
.ss-ordbog-chip-x:focus-visible { opacity: 1; outline: 2px solid var(--ord-key); outline-offset: 1px; }
.ss-ord-hide { display: none !important; }

@keyframes ss-ord-in {
  0%   { background: var(--ord-key-mid); border-color: var(--ord-key); }
  100% { background: var(--ord-key-bg); border-color: var(--ord-key-soft); }
}
.ss-ord-new { animation: ss-ord-in .9s ease-out 1; }

/* ── heading + count ── */
.ss-ord-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ss-ord-h .set-section-title { margin: 0; }
.ss-ord-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 7px;
  border-radius: 10px; background: var(--ord-key-soft); color: var(--ord-key-text);
  font-size: 12.5px; font-weight: 600;
}
.ss-ord-count[hidden] { display: none; }

/* ── add-word field ── */
.set-ordbog-addform input:focus { outline: none; border-color: var(--ord-key) !important; }
.set-ordbog-addform input[aria-invalid="true"] { border-color: var(--color-error, #ff3e1d) !important; }
.ss-ord-inputhint { margin: 6px 0 0; font-size: 13px; color: var(--color-error, #ff3e1d); }
.ss-ord-inputhint[hidden] { display: none; }

/* ── find / sort ── */
.ss-ord-tools { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.ss-ord-tools[hidden] { display: none; }
.ss-ord-search { flex: 1 1 180px; min-width: 0; position: relative; display: flex; align-items: center; }
.ss-ord-search::before {
  content: ""; position: absolute; left: 11px; width: 16px; height: 16px; pointer-events: none;
  background-color: var(--color-text-faint, #8f8e8a);
  -webkit-mask: var(--ord-search) center / 16px no-repeat;
          mask: var(--ord-search) center / 16px no-repeat;
}
.ss-ord-search input, .ss-ord-sort {
  font-size: 15px; border: 1px solid var(--ord-line); border-radius: 9px;
  background: var(--color-card, #fff); color: var(--color-text, #384551);
}
.ss-ord-search input { width: 100%; padding: 9px 12px 9px 34px; }
.ss-ord-search input:focus, .ss-ord-sort:focus { outline: none; border-color: var(--ord-key); }
/* Chrome draws its own clear button BLUE - greyscale it away so the field keeps the sage voice. */
.ss-ord-search input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.45); }
.ss-ord-sort { padding: 9px 10px; color: var(--color-text-secondary, #646e78); cursor: pointer; }
.ss-ord-sort[hidden] { display: none; }
.ss-ord-noresult { margin-top: 10px; font-size: 14.5px; }
.ss-ord-noresult[hidden] { display: none; }

/* ── upload ── */
.ss-ord-upload {
  margin-top: 14px; padding: 18px 16px;
  border: 1.5px dashed var(--ord-key-mid); border-radius: 12px;
  background: var(--ord-key-bg); text-align: center;
  transition: border-color .12s, background .12s;
}
.ss-ord-upload[hidden] { display: none; }
.ss-ord-upload.is-over { border-color: var(--ord-key); background: var(--ord-key-soft); }
.ss-ord-upload.is-busy { opacity: .6; pointer-events: none; }
.ss-ord-upload-ic {
  width: 24px; height: 24px; margin: 0 auto 8px; background-color: var(--ord-key);
  -webkit-mask: var(--ord-doc) center / 24px no-repeat;
          mask: var(--ord-doc) center / 24px no-repeat;
}
.ss-ord-upload-t { font-size: 15.5px; font-weight: 600; color: var(--color-text, #384551); }
.ss-ord-upload-s { font-size: 14px; line-height: 1.45; color: var(--color-text-secondary, #646e78); margin: 4px 0 10px; }
.ss-ord-hint { font-size: 12.5px; color: var(--color-text-faint, #8f8e8a); margin: 8px 0 0; }
.ss-ord-upload input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ── review ── */
.ss-ord-review {
  margin-top: 14px; padding: 14px;
  border: 1px solid var(--ord-line); border-radius: 12px; background: var(--color-card, #fff);
}
.ss-ord-review[hidden] { display: none; }
.ss-ord-review:focus { outline: none; }
.ss-ord-rv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ss-ord-rv-title { font-size: 15.5px; font-weight: 600; color: var(--color-text, #384551); margin: 0; }
.ss-ord-rv-sub { font-size: 13px; color: var(--color-text-faint, #8f8e8a); margin: 3px 0 0; overflow-wrap: anywhere; }
.ss-ord-rv-sel { display: flex; gap: 4px; flex: 0 0 auto; }
.ss-ord-link {
  border: 0; background: transparent; padding: 5px 8px; border-radius: 7px; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--ord-key-text);
}
.ss-ord-link:hover { background: var(--ord-key-soft); }
.ss-ord-link:focus-visible { outline: 2px solid var(--ord-key); outline-offset: 1px; }
.ss-ord-cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px; margin: 12px 0 0; }
.ss-ord-cand {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 8px 11px; text-align: left;
  border: 1px solid var(--ord-line); border-radius: 10px;
  background: var(--color-card, #fff); color: var(--color-text, #384551);
  font-size: 15px; font-weight: 500; line-height: 1.35; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.ss-ord-cand:hover { border-color: var(--ord-key); }
.ss-ord-cand:focus-visible { outline: 2px solid var(--ord-key); outline-offset: 1px; }
.ss-ord-cand::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--ord-line); background: transparent;
  transition: background .12s, border-color .12s;
}
.ss-ord-cand[aria-pressed="true"] { border-color: var(--ord-key); background: var(--ord-key-bg); }
.ss-ord-cand[aria-pressed="true"]::before {
  border-color: var(--ord-key);
  background: var(--ord-key) var(--ord-check) center / 12px no-repeat;
}
.ss-ord-cand-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ss-ord-freq {
  flex: 0 0 auto; padding: 1px 6px; border-radius: 8px;
  background: var(--ord-key-soft); color: var(--ord-key-text);
  font-size: 11.5px; font-weight: 600;
}
.ss-ord-rv-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ss-ord-rv-foot .set-btn { flex: 0 0 auto; white-space: nowrap; }
.ss-ord-status { font-size: 14px; color: var(--color-text-secondary, #646e78); }
.ss-ord-err { margin-top: 10px; font-size: 14px; color: var(--color-error, #ff3e1d); }
.ss-ord-err[hidden] { display: none; }

/* ── dark theme ── */
[data-theme="dark"] { --ord-key: var(--sage, #A8C5B8); --ord-key-text: var(--sage, #A8C5B8); }
[data-theme="dark"] .ss-ordbog-chip { background: rgba(168,197,184,.10) !important; border-color: rgba(168,197,184,.22) !important; }
[data-theme="dark"] .ss-ordbog-chip:hover { background: rgba(168,197,184,.16) !important; border-color: rgba(168,197,184,.34) !important; }
[data-theme="dark"] .ss-ord-upload { background: rgba(168,197,184,.06); border-color: rgba(168,197,184,.30); }
[data-theme="dark"] .ss-ord-upload.is-over { background: rgba(168,197,184,.14); }
[data-theme="dark"] .ss-ord-cand[aria-pressed="true"] { background: rgba(168,197,184,.13); }
[data-theme="dark"] .ss-ord-cand[aria-pressed="true"]::before { background-color: var(--sage-dark, #4A7A68); }
[data-theme="dark"] .ss-ord-count, [data-theme="dark"] .ss-ord-freq { background: rgba(168,197,184,.18); }
[data-theme="dark"] .ss-ord-link:hover { background: rgba(168,197,184,.14); }
/* without these three the small grey text is unreadable in dark mode */
[data-theme="dark"] .ss-ord-hint { color: rgba(232,232,228,.62); }
[data-theme="dark"] .ss-ord-rv-sub { color: rgba(232,232,228,.62); }
[data-theme="dark"] .ss-ord-upload-s { color: rgba(232,232,228,.78); }

@media (prefers-reduced-motion: reduce) {
  .set-nav a::before,
  .ss-ord-upload, .ss-ord-cand, .ss-ord-cand::before,
  .ss-ordbog-chip, .ss-ordbog-chip-x { transition: none; }
  .ss-ord-new { animation: none; }
}
@media (max-width: 520px) {
  .ss-ord-cands { grid-template-columns: 1fr; }
  .ss-ord-upload { padding: 16px 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Subscription tab, free user — one box: status first, offer second.

   Two equal cards ("Gratis plan" / "Premium") read as two things you own.
   Now the section IS the box and the upsell is flat content inside it, so
   the eye goes: what you have -> how much is left -> what is different.
   Everything here is scoped to #panel-abonnement.is-free (set by JS), so a
   paying user's layout is untouched even mid-session.
   ═══════════════════════════════════════════════════════════════════════ */

/* The plan card holds pause / resume / cancel — hidden for free users, never
   removed. Same for Forbrug: those numbers now sit at the top of the tab. */
#panel-abonnement.is-free #plan-card,
#panel-abonnement.is-free #forbrug-section { display: none; }

/* Kill the box inside a box: .set-section is the only box. */
#panel-abonnement.is-free .set-plan.set-upsell {
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.up-status-title {
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: #2B2A27;
  letter-spacing: -0.01em;
  margin: 0 0 11px;
}

.up-meter {
  height: 7px;
  max-width: 240px;
  border-radius: 999px;
  background: #EAE4DA;
  overflow: hidden;
}
/* Quiet stone, not the green CTA: this bar reports, it does not ask to be
   clicked, and green here would compete with the one button. */
.up-meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #A79D8D;
}

.up-balance {
  font-family: var(--font-family);
  font-size: 14px;
  color: #4A4741;
  margin: 9px 0 0;
}
.up-balance b { font-weight: var(--font-weight-semibold); color: #2B2A27; }

.up-rule { border: 0; border-top: 1px solid #EAE4DA; margin: 20px 0; }

.up-offer-title {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  color: #2B2A27;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.up-offer-text {
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.55;
  color: #4A4741;
  margin: 0 0 14px;
  max-width: 60ch;
}

.up-extra { margin: 20px 0; }
.up-eyebrow {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  color: #3C6656;
  margin: 0 0 6px;
}
.up-extra-title {
  font-family: var(--font-family);
  font-size: 17px;
  font-weight: var(--font-weight-semibold);
  color: #2B2A27;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
/* 14px is small for the readers this product is built for. Only this list. */
.set-plan-features.up-list { display: block; margin: 0; list-style: none; }
.set-plan-features.up-list li { font-size: 15px; color: #4A4741; padding: 3px 0; gap: 10px; }

.up-price {
  font-family: var(--font-family);
  font-size: 14px;
  color: #6E6A60;
  margin: 0 0 16px;
}
.up-price b { font-size: 18px; font-weight: var(--font-weight-semibold); color: #2B2A27; }

/* It is the only button on the panel — losing the focus ring here means a
   keyboard user cannot see where they are. */
.set-upsell .set-btn-primary:focus-visible {
  outline: 2px solid #2F5C4C;
  outline-offset: 3px;
}

.set-panel.active.panel-anim .set-upsell {
  animation: setFadeUp 0.42s var(--ind-ease-out) both 0.14s;
}
@keyframes setFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

[data-theme="dark"] .up-status-title,
[data-theme="dark"] .up-offer-title,
[data-theme="dark"] .up-extra-title,
[data-theme="dark"] .up-balance b,
[data-theme="dark"] .up-price b { color: #F2EEE6; }
[data-theme="dark"] .up-balance,
[data-theme="dark"] .up-offer-text,
[data-theme="dark"] .set-plan-features.up-list li { color: #D8D3C9; }
[data-theme="dark"] .up-eyebrow { color: #9CCBB5; }
[data-theme="dark"] .up-meter { background: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .up-meter i { background: #8F8878; }
[data-theme="dark"] .up-rule { border-top-color: rgba(255, 255, 255, 0.10); }

@media (prefers-reduced-motion: reduce) {
  .set-panel.active.panel-anim .set-upsell { animation: none; }
}

/* The CTA hugs its label. .set-plan caps primary buttons at 320px because in a
   card a full-width bar reads as a banner slot; here the button sits in flat
   content, where even 320px still reads as a divider. Sized to its text, it
   reads as one thing to press. */
#panel-abonnement.is-free .set-upsell .set-btn-primary {
  width: auto;
  max-width: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}