.site-body,
.site-body * {
  box-sizing: border-box;
}

.site-body {
  margin: 0;
  min-height: 100vh;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  color: var(--text);
  background: linear-gradient(170deg, #f8fafc 0%, #edf4ff 42%, #eefbf3 100%);
  position: relative;
}

.site-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 10%, rgb(37 99 235 / 11%), transparent 38%),
    radial-gradient(circle at 80% 20%, rgb(29 78 216 / 8%), transparent 42%),
    radial-gradient(circle at 68% 85%, rgb(22 163 74 / 10%), transparent 36%);
}

.site-shell {
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0 44px;
  display: grid;
  gap: 20px;
  position: relative;
}

.site-shell.compact {
  width: min(760px, calc(100% - 32px));
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: rgb(255 255 255 / 82%);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  padding: 12px 14px;
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.site-brand img {
  width: 44px;
  height: 44px;
}

.site-brand strong {
  font-size: 1.02rem;
  line-height: 1.05;
}

.site-brand span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.site-brand span i {
  color: var(--primary-600);
  font-size: 0.72rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  padding: 4px;
}

.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 8px 12px;
  border-radius: 999px;
}

.site-nav a[aria-current="page"] {
  color: var(--primary-700);
  background: #dbeafe;
}

.site-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  border: 1px solid var(--primary-700);
  background: var(--primary-700);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  min-height: 42px;
  padding: 0 16px;
  cursor: pointer;
  transition: transform 130ms ease, box-shadow 130ms ease;
}

.site-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 18px rgb(29 78 216 / 20%);
}

.site-button.muted {
  background: #fff;
  color: var(--primary-700);
  border-color: #bfdbfe;
}

.site-button.danger {
  background: #b91c1c;
  border-color: #b91c1c;
}

.site-button.danger:hover {
  box-shadow: 0 9px 18px rgb(185 28 28 / 22%);
}

.site-button.compact {
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.82rem;
}

.hero,
.platform-note,
.feature-card,
.auth-card {
  background: rgb(255 255 255 / 90%);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}

.hero {
  padding: 34px;
  animation: rise-in 360ms ease;
}

.hero-kicker {
  margin: 0;
  color: var(--primary-700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.77rem;
  font-weight: 700;
}

.hero-kicker i {
  margin-right: 6px;
}

.hero h1,
.auth-card h1 {
  margin: 12px 0 10px;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1.1;
}

.hero p,
.platform-note p,
.auth-card p {
  margin: 0;
  max-width: 70ch;
  color: #1e293b;
  line-height: 1.6;
}

.hero-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.feature-card {
  padding: 20px;
  animation: rise-in 420ms ease;
}

.feature-card h2,
.platform-note h2 {
  margin: 0 0 8px;
  font-size: 1.02rem;
}

.feature-card p {
  margin: 0;
  color: #334155;
  line-height: 1.5;
}

.platform-note {
  padding: 22px;
}

.auth-card {
  width: min(480px, 100%);
  padding: 28px;
  margin: 10px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: rise-in 360ms ease;
}

.workspace-hero,
.workspace-card {
  background: rgb(255 255 255 / 90%);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}

.workspace-hero {
  padding: 28px;
  animation: rise-in 360ms ease;
}

.workspace-hero h1 {
  margin: 12px 0 10px;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.15;
}

.workspace-hero p {
  margin: 0;
  max-width: 75ch;
  color: #1e293b;
  line-height: 1.6;
}

.workspace-feedback {
  min-height: 24px;
  margin-top: 12px;
  font-size: 0.86rem;
  color: var(--danger-600);
}

.workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.workspace-card {
  text-decoration: none;
  color: inherit;
  padding: 20px;
  display: grid;
  gap: 8px;
  min-height: 150px;
  transition: transform 130ms ease, box-shadow 130ms ease, border-color 130ms ease;
  animation: rise-in 410ms ease;
}

.workspace-card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--primary-700);
  font-size: 1.02rem;
}

.workspace-card h2 i {
  color: var(--primary-600);
  font-size: 0.95rem;
}

.workspace-card p {
  margin: 0;
  color: #334155;
  line-height: 1.5;
}

.workspace-hero-note {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 0.84rem;
  font-weight: 600;
}

.workspace-hero-note i {
  color: var(--primary-700);
}

.workspace-card-meta {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 2px;
  color: #475569;
  font-size: 0.84rem;
  line-height: 1.45;
}

.workspace-card-meta i {
  color: var(--primary-600);
  margin-top: 2px;
}

.workspace-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgb(29 78 216 / 16%);
  border-color: #bfdbfe;
}

.workspace-card:focus-visible {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
}

.workspace-card.is-hidden {
  display: none;
}

.politician-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.politician-form-card,
.politician-list-card {
  background: rgb(255 255 255 / 92%);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 18px;
  width: 100%;
}

.politician-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.politician-form-body {
  margin-top: 10px;
}

.politician-layout.form-collapsed {
  grid-template-columns: 1fr;
}

.politician-layout.form-collapsed .politician-form-body {
  display: none;
}

.politician-form-card h2,
.politician-list-card h2 {
  margin: 0 0 14px;
  font-size: 1.04rem;
}

.operational-form-headline {
  display: grid;
  gap: 4px;
}

.operational-form-headline h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.operational-form-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.politician-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.operational-list-subtitle {
  margin: -6px auto 0 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  width: 100%;
}

.operational-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.operational-hero-actions .dashboard-admin-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.politician-search {
  min-height: 40px;
  width: min(320px, 100%);
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  padding: 0 12px;
  font: inherit;
}

.confirm-dialog {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgb(15 23 42 / 48%);
  padding: 16px;
}

.role-dialog {
  position: fixed;
  inset: 0;
  z-index: 51;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgb(15 23 42 / 48%);
  padding: 16px;
}

.role-dialog.is-open {
  display: flex;
}

.role-dialog-panel {
  width: min(480px, 100%);
  background: #fff;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  box-shadow: 0 20px 36px rgb(15 23 42 / 25%);
  padding: 20px;
}

.role-dialog-label {
  display: block;
  margin-top: 14px;
  margin-bottom: 6px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #334155;
}

.role-dialog-select {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  padding: 0 12px;
  font: inherit;
}

.confirm-dialog.is-open {
  display: flex;
}

.confirm-dialog-panel {
  width: min(520px, 100%);
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 14px;
  box-shadow: 0 20px 36px rgb(15 23 42 / 25%);
  padding: 20px;
}

.confirm-dialog-kicker {
  margin: 0;
  color: #b91c1c;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 700;
}

.confirm-dialog-panel h2 {
  margin: 10px 0 8px;
  font-size: 1.22rem;
}

.confirm-dialog-panel p {
  margin: 0;
  color: #334155;
  line-height: 1.5;
}

.confirm-dialog-actions {
  margin-top: 18px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.is-modal-open {
  overflow: hidden;
}

.auth-card > * {
  width: 100%;
  max-width: 400px;
}

.auth-card .hero-kicker,
.auth-card h1,
.auth-card p {
  text-align: center;
}

.auth-form {
  display: grid;
  gap: 8px;
}

.auth-form label {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--text-muted);
}

.auth-form input {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  padding: 0 12px;
  font: inherit;
}

.invite-politician-display {
  margin: -2px 0 6px;
  font-size: 0.84rem;
  color: var(--text-muted);
}

.invite-politician-panel {
  width: min(720px, 100%);
}

.invite-politician-search {
  width: 100%;
}

.invite-politician-list {
  margin-top: 10px;
  max-height: min(52vh, 420px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 8px;
  display: grid;
  gap: 8px;
}

.invite-politician-option {
  width: 100%;
  text-align: left;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #f8fafc;
  padding: 10px 12px;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.invite-politician-option strong {
  display: block;
  color: var(--text);
}

.invite-politician-option span {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.invite-politician-option:hover {
  border-color: var(--primary-600);
  background: #eff6ff;
}

.invite-politician-option.is-selected {
  border-color: var(--primary-600);
  background: #dbeafe;
}

.invite-politician-empty {
  margin: 0;
  padding: 14px 12px;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.auth-form select {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  padding: 0 12px;
  font: inherit;
}

.auth-feedback {
  min-height: 24px;
  font-size: 0.84rem;
  color: var(--danger-600);
  text-align: center;
}

.auth-feedback.success {
  color: var(--success-600);
}

.site-button.full {
  width: 100%;
}

.auth-form .site-button {
  width: 100%;
}

.not-found-card {
  margin-top: 16px;
}

.route-hint {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 0.84rem;
}

.site-button:focus-visible,
.site-nav a:focus-visible,
.auth-form input:focus-visible,
.auth-form select:focus-visible {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .workspace-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 660px) {
  .site-shell,
  .site-shell.compact {
    width: min(100%, calc(100% - 20px));
  }

  .site-header {
    justify-content: center;
  }

  .site-header-actions {
    width: 100%;
    justify-content: center;
  }

  .hero {
    padding: 22px;
  }

  .auth-card {
    padding: 20px;
  }
}