html { font-size: 17px; }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
    }

    /* ── Nav ── */
    .prismcast-loading {
      color: var(--text-subtle);
    }
    .prismcast-loading-copy {
      display: grid;
      grid-template-columns: 1.15rem minmax(0, 1fr);
      gap: 0.55rem;
      align-items: center;
    }
    .prismcast-loading-spinner {
      width: 1rem;
      height: 1rem;
      border: 2px solid var(--surface-5);
      border-top-color: var(--accent);
      border-radius: 999px;
      animation: prismcast-spin 0.8s linear infinite;
    }
    .prismcast-loading-title {
      color: var(--text);
      font-weight: 600;
    }
    .prismcast-loading-step {
      margin-top: 0.2rem;
      color: var(--text-muted);
      font-size: 0.85rem;
    }
    .prismcast-loading-bar {
      position: relative;
      height: 4px;
      margin-top: 0.8rem;
      background: var(--surface-5);
      border-radius: 4px;
      overflow: hidden;
    }
    .prismcast-loading-bar span {
      position: absolute;
      top: 0;
      left: -45%;
      display: block;
      width: 45%;
      height: 100%;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      border-radius: inherit;
      animation: prismcast-loading-slide 1.05s cubic-bezier(.4,0,.2,1) infinite;
      will-change: left;
    }
    @keyframes prismcast-spin {
      to { transform: rotate(360deg); }
    }
    @keyframes prismcast-loading-slide {
      0% { left: -45%; }
      100% { left: 100%; }
    }

    nav {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 1rem 2rem;
      display: flex;
      align-items: center;
      gap: 2rem;
      flex-wrap: wrap;
    }
    nav .version { margin-left: auto; color: var(--text-muted); font-size: 0.75rem; }
    nav h1 { color: var(--accent); font-size: 1.2rem; font-weight: 700; }
    nav a { color: var(--text-soft); text-decoration: none; font-size: 0.9rem; }
    nav a:hover { color: var(--text); }
    nav a.active { color: var(--accent); font-weight: 600; }

    /* ── Layout ── */
    .page { max-width: 920px; margin: 0 auto; padding: 2.5rem 1.5rem; }
    h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.4rem; }
    .subtitle { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.1rem; }

    :root {
      --settings-section-nav-top: 0px;
      --settings-section-nav-clearance: 4.5rem;
    }

    .settings-section-nav,
    .settings-section-nav-floating {
      display: flex;
      flex-wrap: nowrap;
      gap: 0.35rem;
      overflow-x: auto;
      padding: 0.55rem 0;
      background: color-mix(in srgb, var(--bg) 92%, transparent);
      border-bottom: 1px solid var(--border);
      scrollbar-width: thin;
    }
    .settings-section-nav {
      position: static;
      top: auto;
      z-index: auto;
      margin: 0 0 1.75rem;
    }
    .settings-section-nav-floating {
      position: fixed;
      top: var(--settings-section-nav-top);
      left: 50%;
      z-index: 90;
      width: min(920px, calc(100vw - 3rem));
      margin: 0;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, -100%);
      transition: opacity 120ms ease, transform 120ms ease;
      box-shadow: 0 8px 18px color-mix(in srgb, var(--bg) 82%, transparent);
    }
    .settings-section-nav-floating.is-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, 0);
    }
    .settings-section-nav a,
    .settings-section-nav-floating a {
      flex: 0 0 auto;
      color: var(--text-soft);
      text-decoration: none;
      font-size: 0.82rem;
      font-weight: 600;
      padding: 0.38rem 0.7rem;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--surface);
    }
    .settings-section-nav a:hover,
    .settings-section-nav a:focus-visible,
    .settings-section-nav a.active,
    .settings-section-nav-floating a:hover,
    .settings-section-nav-floating a:focus-visible,
    .settings-section-nav-floating a.active {
      color: var(--accent-soft);
      border-color: var(--focus-accent);
      outline: none;
    }
    .settings-section-nav a.active,
    .settings-section-nav-floating a.active {
      background: color-mix(in srgb, var(--accent) 12%, var(--surface));
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
    }

    .settings-section {
      margin: 0 0 2.25rem;
      scroll-margin-top: calc(var(--settings-section-nav-top) + var(--settings-section-nav-clearance));
    }
    .settings-section:last-of-type { margin-bottom: 1.5rem; }
    .settings-section-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1rem;
      padding: 0 0 0.75rem;
      margin-bottom: 0.85rem;
      border-bottom: 1px solid var(--border);
    }
    .settings-section-header h2 {
      margin: 0 0 0.2rem;
      color: var(--text);
      font-size: 1.05rem;
      font-weight: 650;
      letter-spacing: 0;
    }
    .settings-section-header p {
      max-width: 680px;
      margin: 0;
      color: var(--text-muted);
      font-size: 0.84rem;
      line-height: 1.45;
    }
    .settings-section:target .settings-section-header h2 { color: var(--accent-soft); }

    /* ── Source cards ── */
    .source-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-bottom: 1.5rem;
      overflow: hidden;
      scroll-margin-top: calc(var(--settings-section-nav-top) + var(--settings-section-nav-clearance));
    }
    .source-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.1rem 1.4rem;
      cursor: pointer;
      user-select: none;
      gap: 1rem;
    }
    .source-header:hover { background: var(--surface-4); }
    .source-title {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    .source-icon {
      width: 36px; height: 36px;
      background: var(--surface-5);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem;
    }
    .source-name { font-weight: 600; font-size: 1rem; }
    .source-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 1px; }
    .source-badges { display: flex; align-items: center; gap: 0.5rem; }
    .badge {
      font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
      padding: 2px 8px; border-radius: 20px;
      text-transform: uppercase;
    }
    .badge-configured {
      background: color-mix(in srgb, var(--success-bg-2) 20%, transparent);
      color: var(--success-soft);
      border: 1px solid color-mix(in srgb, var(--success-fill) 28%, transparent);
    }
    .badge-anon       { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }
    .badge-noconfig   { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }
    .badge-beta {
      background: color-mix(in srgb, var(--warning-bg) 70%, transparent);
      color: var(--warning-soft);
      border: 1px solid var(--warning-border);
    }
    .chevron { color: var(--text-dim); transition: transform 0.2s; font-size: 0.8rem; }
    .chevron.open { transform: rotate(180deg); }

    /* ── Form body ── */
    .source-body {
      display: none;
      padding: 0 1.4rem 1.4rem;
      border-top: 1px solid var(--border);
    }
    .source-body.open { display: block; }

    .no-config-msg {
      padding: 1rem 0;
      color: var(--text-muted);
      font-size: 0.875rem;
    }

    .fields-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-top: 1.2rem;
    }
    @media (max-width: 600px) { .fields-grid { grid-template-columns: 1fr; } }
    .field-full { grid-column: 1 / -1; }

    .field label {
      display: block;
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--text-soft);
      margin-bottom: 0.35rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .field label .req { color: var(--danger); margin-left: 2px; }

    .field input[type=text],
    .field input[type=password],
    .field input[type=number],
    .field input[type=url] {
      width: 100%;
      background: var(--accent-bg-deep);
      border: 1px solid var(--surface-5);
      border-radius: 6px;
      padding: 0.55rem 0.75rem;
      color: var(--text);
      font-size: 0.9rem;
      outline: none;
      transition: border-color 0.15s;
    }
    .field input:focus { border-color: var(--focus-accent); }
    .field input::placeholder { color: var(--text-dim); }

    .field .help { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.35rem; }
    .field .hint-box {
      margin-top: 0.55rem;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0.7rem 0.8rem;
      font-size: 0.78rem;
      line-height: 1.45;
      color: var(--text-soft);
    }
    .field .hint-box code {
      color: var(--accent-soft);
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      word-break: break-all;
    }

    .field-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.75rem;
      margin-top: 1.2rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
    }

    .advanced-box {
      margin-top: 1rem;
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      background: var(--surface-2);
    }
    .advanced-toggle {
      width: 100%;
      background: transparent;
      border: none;
      color: var(--text-subtle);
      padding: 0.9rem 1rem;
      text-align: left;
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .advanced-toggle:hover { background: var(--surface-4); }
    .advanced-copy {
      color: var(--text-soft);
      font-size: 0.78rem;
      line-height: 1.45;
      padding: 0 1rem 0.95rem;
    }
    .advanced-body {
      display: none;
      padding: 0 1rem 1rem;
      border-top: 1px solid var(--border);
    }
    .advanced-body.open { display: block; }
    .advanced-chevron {
      color: var(--text-muted);
      font-size: 0.78rem;
      transition: transform 0.2s;
    }
    .advanced-chevron.open { transform: rotate(180deg); }

    /* ── Toggle row (checkbox settings) ── */
    .toggle-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1.5rem;
      padding: 0.75rem 0 0.25rem;
    }
    .toggle-row-text { flex: 1; }
    .toggle-row-label {
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 0.3rem;
    }
    .toggle-row-help { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; }
    .toggle-row-control {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      flex-shrink: 0;
    }
    .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .toggle-slider {
      position: absolute; inset: 0;
      background: var(--border); border-radius: 24px;
      transition: background 0.2s;
    }
    .toggle-slider::before {
      content: ''; position: absolute;
      width: 18px; height: 18px; left: 3px; top: 3px;
      background: var(--text-soft); border-radius: 50%;
      transition: transform 0.2s, background 0.2s;
    }
    .toggle-switch input:checked + .toggle-slider { background: var(--focus-accent-strong); }
    .toggle-switch input:checked + .toggle-slider::before {
      transform: translateX(20px); background: #fff;
    }

    .modal-overlay {
      display: none; position: fixed; inset: 0;
      background: var(--overlay); z-index: 1000;
      align-items: center; justify-content: center;
    }
    .modal-overlay.open { display: flex; }
    .modal-box {
      background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
      padding: 1.5rem; width: 90%; box-shadow: var(--shadow-soft);
    }
    .btn-cancel-modal {
      background: none; border: 1px solid var(--text-dim); color: var(--text-soft);
      padding: 0.45rem 1rem; border-radius: 6px; cursor: pointer; font-size: 0.875rem;
    }
    .btn-cancel-modal:hover { border-color: var(--text-muted); color: var(--text-subtle); }
    /* Database Backup card — two-column Create / Restore layout */
    .backup-grid { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.85rem; }
    .backup-col { flex: 1 1 270px; min-width: 250px; }
    .backup-col + .backup-col {
      border-left: 1px solid var(--border); padding-left: 1.5rem;
    }
    .backup-col-title {
      font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--text-muted); font-weight: 600; margin-bottom: 0.7rem;
    }
    .backup-note { color: var(--text-subtle); font-size: 0.85rem; line-height: 1.5; margin-bottom: 0.9rem; }
    .backup-restore-block + .backup-restore-block {
      margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border);
    }
    .backup-restore-label { font-size: 0.8rem; color: var(--text-soft); margin-bottom: 0.5rem; font-weight: 500; }
    .backup-snapshot {
      display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
      padding: 0.55rem 0.7rem; background: var(--bg);
      border: 1px solid var(--border); border-radius: 8px;
    }
    .backup-snapshot .snap-when { font-size: 0.85rem; color: var(--text); }
    .backup-snapshot .snap-meta { font-size: 0.75rem; color: var(--text-muted); }
    .backup-viewall {
      background: none; border: none; color: var(--accent); cursor: pointer;
      font-size: 0.8rem; padding: 0.4rem 0; margin-top: 0.35rem;
    }
    .backup-viewall:hover { text-decoration: underline; }
    .backup-viewall[disabled] { color: var(--text-dim); cursor: default; text-decoration: none; }
    @media (max-width: 620px) {
      .backup-col + .backup-col {
        border-left: none; padding-left: 0;
        border-top: 1px solid var(--border); padding-top: 1.25rem;
      }
    }
    .btn-audit {
      background: var(--accent-bg); color: var(--accent-soft); border: none;
      padding: 0.45rem 1rem; border-radius: 6px; cursor: pointer; font-size: 0.875rem;
    }
    .btn-audit:hover { background: var(--info); }

    /* ── Timezone combobox ── */
    .tz-combobox { position: relative; }
    .tz-combobox input[type=text] {
      width: 100%;
      background: var(--accent-bg-deep);
      border: 1px solid var(--surface-5);
      border-radius: 6px;
      padding: 0.55rem 0.75rem;
      color: var(--text);
      font-size: 0.9rem;
      outline: none;
      transition: border-color 0.15s;
    }
    .tz-combobox input[type=text]:focus { border-color: var(--focus-accent); }
    .tz-combobox input[type=text]::placeholder { color: var(--text-dim); }
    .tz-dropdown {
      position: absolute;
      top: calc(100% + 4px);
      left: 0; right: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: var(--shadow-soft);
      max-height: 240px;
      overflow-y: auto;
      z-index: 200;
    }
    .tz-option {
      padding: 0.5rem 0.75rem;
      font-size: 0.875rem;
      color: var(--text);
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tz-option:hover, .tz-option.active { background: var(--accent-bg); color: var(--accent-soft); }
    .tz-no-results { padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--text-muted); }

    .btn {
      padding: 0.5rem 1.2rem;
      border-radius: 6px;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      border: none;
      transition: opacity 0.15s, background 0.15s;
    }
    .btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .btn-danger { background: var(--danger-bg-2); color: var(--danger-soft); }
    .btn-danger:hover { background: var(--danger-border); }
    .btn-primary { background: var(--focus-accent); color: #fff; }
    .btn-primary:hover:not(:disabled) { background: var(--focus-accent-soft); }
    .btn-secondary { background: var(--border); color: var(--text); }
    .btn-secondary:hover:not(:disabled) { background: var(--text-dim); }
    .btn-ghost { background: transparent; color: var(--text-soft); border: 1px solid var(--border); }
    .btn-ghost:hover:not(:disabled) { color: #fff; border-color: var(--text-dim); }

    .save-status {
      font-size: 0.82rem;
      font-weight: 500;
      min-width: 120px;
      text-align: right;
    }
    .save-status.ok    { color: var(--success-soft); }
    .save-status.error { color: var(--danger); }

    /* ── Stats card ── */
    .stats-card {
      background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
      padding: 1.4rem; margin-bottom: 1.5rem;
    }
    .stats-card-title {
      font-size: 0.85rem; font-weight: 600; color: var(--text-soft);
      text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem;
      display: flex; align-items: center; gap: 0.5rem;
    }
    .stats-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; }
    .stats-section-label {
      font-size: 0.72rem; font-weight: 600; color: var(--accent);
      text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.6rem;
    }
    .stat-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.3rem; }
    .stat-label { font-size: 0.8rem; color: var(--text-muted); }
    .stat-value { font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; }
    .stat-value.ok    { color: var(--success-soft); }
    .stat-value.warn  { color: var(--warning); }
    .stat-value.muted { color: var(--text-dim); }
    .stats-uptime { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.75rem; }
    .stats-loading { color: var(--text-dim); font-size: 0.85rem; }

    /* ── Loading / empty states ── */
    .loading { text-align: center; padding: 3rem; color: var(--text-dim); }
    .error-msg { color: var(--danger); padding: 1rem; }
    .needs-config-banner {
      background: color-mix(in srgb, var(--warning-bg) 70%, var(--surface));
      border: 1px solid var(--warning-border); border-radius: 8px;
      padding: 0.85rem 1.25rem; margin: 0 0 1rem; color: var(--warning-soft);
      transition: background 0.4s, border-color 0.4s, color 0.4s, opacity 0.5s;
    }
    .needs-config-banner strong { display: block; margin-bottom: 0.4rem; font-size: 0.9rem; }
    .needs-config-banner ul { margin: 0; padding-left: 1.25rem; font-size: 0.82rem; line-height: 1.7; }
    .needs-config-banner a { color: var(--warning-soft); font-weight: 600; }
    .needs-config-banner a:hover { text-decoration: underline; }
    .needs-config-banner.all-configured {
      background: color-mix(in srgb, var(--success-bg-2) 20%, transparent);
      border-color: color-mix(in srgb, var(--success-fill) 28%, transparent);
      color: var(--success-soft);
    }
    .needs-config-banner li.item-configured { color: var(--success-soft); }
    .needs-config-banner li.item-configured a { color: var(--success-soft); }
    @media (max-width: 760px) {
      html { font-size: 16px; }
      nav { padding: 0.9rem 1rem; gap: 0.75rem 1rem; }
      nav h1 { width: 100%; }
      nav .version { margin-left: 0; width: 100%; order: 99; }
      .page { padding: 1.25rem 1rem 2rem; }
      .settings-section-nav { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
      .settings-section-nav-floating { left: 0; width: 100vw; padding-left: 1rem; padding-right: 1rem; transform: translateY(-100%); }
      .settings-section-nav-floating.is-visible { transform: translateY(0); }
      :root { --settings-section-nav-clearance: 4rem; }
      .settings-section-header { align-items: flex-start; }
      .source-header { padding: 1rem; align-items: flex-start; }
      .source-body { padding: 0 1rem 1rem; }
      .field-actions { flex-wrap: wrap; justify-content: flex-start; }
      .save-status { min-width: 0; text-align: left; }
    }