/* ── Header ──────────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in oklch, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.08);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--space-4);
}
.logo {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-display); font-size: var(--text-lg);
  color: var(--color-primary);
}
.header-nav { display: flex; align-items: center; gap: .25rem; }
.header-nav a {
  font-size: var(--text-sm); color: var(--color-text-muted);
  padding: .35rem .7rem; border-radius: var(--radius-lg);
  transition: background var(--t), color var(--t);
}
.header-nav a:hover,
.header-nav a.active {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}
.theme-btn {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted);
}
.theme-btn:hover { background: var(--color-surface-offset); color: var(--color-text); }
.menu-wrap { position: relative; }
.dropdown-menu {
  position: absolute; top: 100%; right: 0; margin-top: var(--space-2);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-2);
  box-shadow: var(--shadow-md); min-width: 160px;
}
.dropdown-menu button {
  display: block; width: 100%; text-align: left;
  padding: var(--space-2); font-size: var(--text-sm);
  border-radius: var(--radius-lg); color: var(--color-text-muted);
}
.dropdown-menu button:hover {
  background: var(--color-surface-offset); color: var(--color-text);
}

/* ── Feedback dialog ─────────────────────────────────────────── */
.feedback-dialog {
  width: min(460px, calc(100vw - 2rem));
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
  color: var(--color-text); padding: var(--space-6); margin: auto;
}
.feedback-dialog::backdrop {
  background: oklch(0 0 0 / 0.45); backdrop-filter: blur(3px);
}
.feedback-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-5);
}
.feedback-header h2 {
  font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text);
}
.feedback-close {
  width: 30px; height: 30px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); border: 1px solid transparent;
}
.feedback-close:hover { background: var(--color-surface-offset); border-color: var(--color-border); }
.feedback-close svg { width: 16px; height: 16px; }
.feedback-field { margin-bottom: var(--space-4); }
.feedback-field label {
  display: block; font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text-muted); margin-bottom: var(--space-2);
}
.feedback-field input,
.feedback-field textarea,
.feedback-field select {
  width: 100%; padding: .55rem .8rem;
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  font-family: var(--font-body); font-size: var(--text-sm);
  outline: none; transition: border-color var(--t);
}
.feedback-field input:focus,
.feedback-field textarea:focus,
.feedback-field select:focus { border-color: var(--color-primary); }
.feedback-field textarea { resize: vertical; }
.feedback-optional { font-weight: 400; color: var(--color-text-faint); }
.req { color: var(--color-primary); }
.feedback-phi-note { font-size: var(--text-xs); color: var(--color-text-faint); margin-bottom: var(--space-5); }
.feedback-actions { display: flex; gap: var(--space-3); justify-content: flex-end; }
.btn-feedback-send {
  padding: .5rem 1.25rem; background: var(--color-primary);
  color: var(--color-text-inverse); border-radius: var(--radius-lg);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
}
.btn-feedback-send:hover { background: var(--color-primary-hover); }
.btn-feedback-send:disabled { opacity: .55; cursor: not-allowed; }
.btn-feedback-cancel {
  padding: .5rem 1.1rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); font-family: var(--font-body);
  font-size: var(--text-sm); color: var(--color-text-muted); background: none;
}
.btn-feedback-cancel:hover {
  border-color: var(--color-primary); color: var(--color-primary);
  background: var(--color-primary-highlight);
}