/* ============================================================
   Insyrt Case-Study-Tool — application styles
   Built on the Insyrt Design System tokens. Use the semantic
   variables from colors_and_type.css; never hardcode hex.
   ============================================================ */
@import url("colors_and_type.f46022a58807.css");

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 48px);
}

/* ---- Header ---- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 243, 241, 0.9);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: var(--border-hairline);
}
.app-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-block: 14px;
}
.app-header__logo img {
  height: 32px;
  display: block;
}
.app-nav {
  display: flex;
  gap: var(--space-5);
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
}
.app-nav a {
  color: var(--ins-deep-purple);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 1.5px solid transparent;
  transition: color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}
.app-nav a:hover {
  color: var(--ins-violet);
  border-bottom-color: var(--ins-violet);
}
.app-langswitch select {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
  background: var(--ins-white);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  cursor: pointer;
}

.ins-cta--sm {
  padding: 9px 16px;
  font-size: 14px;
}

/* ---- Main ---- */
.app-main {
  flex: 1 0 auto;
  padding-block: var(--space-8);
}
.app-messages {
  display: grid;
  gap: 10px;
  margin-bottom: var(--space-6);
}

/* ---- Hero ---- */
.hero {
  max-width: 760px;
  padding-block: var(--space-5) var(--space-7);
}
.hero__lede {
  font-size: 18px;
  line-height: var(--lh-body);
  color: var(--ins-near-black);
  margin: 0 0 var(--space-6);
  text-wrap: pretty;
}
.hero__lede strong {
  color: var(--ins-deep-purple);
}
.hero__ctas {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}

/* ---- Panel + feature cards (on Deep Purple) ---- */
.panel {
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 56px);
  margin-top: var(--space-7);
  position: relative;
  overflow: hidden;
}
.panel.ins-surface-deep::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ins-purple-veil);
  pointer-events: none;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  position: relative;
}
.feature {
  background: rgba(244, 243, 241, 0.04);
  border: 1px solid rgba(244, 243, 241, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.feature__eyebrow {
  font-family: var(--font-meta);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ins-green);
  margin: 0 0 var(--space-2);
}
.feature__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ins-off-white);
  margin: 0 0 var(--space-2);
}
.feature__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ins-mid-gray);
  margin: 0;
}

/* ---- Cards (light surfaces) ---- */
.card {
  background: var(--ins-white);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

/* ---- Forms ---- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-4);
}
.field > label {
  font-family: var(--font-meta);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ins-near-black);
}
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ins-rule-gray);
  background: var(--ins-white);
  color: var(--fg-1);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ins-violet);
  box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.18);
}
.field--error input,
.field--error select,
.field--error textarea {
  border-color: var(--ins-red);
  box-shadow: 0 0 0 3px rgba(255, 49, 49, 0.18);
}
.field__help {
  font-family: var(--font-meta);
  font-size: 14px;
  color: var(--fg-2);
}
.field__error {
  font-family: var(--font-meta);
  font-size: 14px;
  font-weight: 700;
  color: var(--ins-near-black);
}
.field__error::before {
  content: "⚠ ";
  color: var(--ins-red);
}

/* ---- Alerts (Django messages) ---- */
.alert {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 16px;
  background: var(--ins-bg-tint);
  color: var(--fg-1);
  border-left: 4px solid var(--fg-3);
}
.alert--success {
  border-left-color: var(--signal-positive);
}
.alert--warning {
  border-left-color: var(--signal-warning);
}
.alert--error,
.alert--danger {
  border-left-color: var(--signal-danger);
}
.alert--info {
  border-left-color: var(--ins-violet);
}

/* ---- Footer ---- */
.app-footer {
  flex-shrink: 0;
  background: var(--ins-bg-default);
  border-top: var(--border-hairline);
  padding-block: var(--space-6);
}
.app-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ---- Accessibility: always-visible focus ---- */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ins-violet);
  outline-offset: 3px;
}

/* ---- Header user chip ---- */
.app-header__inner > form.app-langswitch + .app-user,
.app-user {
  color: var(--fg-2);
}
.app-header__inner form[action$="logout/"] {
  display: inline;
}

/* ---- Page head ---- */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.page-head .ins-h1 {
  margin-bottom: 0;
}

/* ---- Status (dot + label) ---- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-meta);
  font-size: 14px;
  color: var(--fg-2);
}
.status__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ins-mid-gray);
  flex: 0 0 auto;
}
.status--active .status__dot,
.status--stage-active .status__dot,
.status--task-done .status__dot {
  background: var(--signal-positive);
}
.status--done .status__dot,
.status--stage-done .status__dot {
  background: var(--ins-indigo);
}
.status--task-in_progress .status__dot {
  background: var(--signal-warning);
}

/* ---- Badge ---- */
.badge {
  display: inline-block;
  font-family: var(--font-meta);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--ins-bg-tint);
  color: var(--ins-indigo);
}

/* ---- Board ---- */
.board-filter {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.board-filter select {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ins-rule-gray);
  background: var(--ins-white);
  color: var(--fg-1);
}
.board {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  align-items: flex-start;
  padding-bottom: var(--space-3);
}
.board__col {
  flex: 0 0 300px;
  background: var(--ins-bg-tint);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.board__colhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ins-deep-purple);
  padding: 4px 2px;
}
.board__count {
  font-family: var(--font-meta);
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-2);
  background: var(--ins-white);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}
.board__empty {
  font-family: var(--font-meta);
  font-size: 14px;
  color: var(--fg-3);
  padding: 2px;
  margin: 0;
}
.proj-card {
  display: block;
  background: var(--ins-white);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.proj-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.proj-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ins-deep-purple);
  margin: 0 0 6px;
}
.proj-card__meta {
  font-family: var(--font-meta);
  font-size: 14px;
  color: var(--fg-2);
  margin: 0 0 10px;
}

/* ---- Empty / form pages ---- */
.empty-state {
  max-width: 640px;
}
.empty-state .ins-cta {
  margin-top: var(--space-3);
}
.form-page,
.auth {
  max-width: 640px;
}
.form-card,
.auth__form {
  margin-top: var(--space-4);
}
.form-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
}
.auth__hint {
  margin-top: var(--space-4);
}

/* ---- Project detail ---- */
.detail-desc {
  max-width: 760px;
  margin-bottom: var(--space-6);
}
.detail-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-7);
  align-items: start;
}
.pipeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.pipeline__stage {
  background: var(--ins-white);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}
.pipeline__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.pipeline__head .status {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ins-deep-purple);
}
.tasklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.task {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: var(--border-hairline);
}
.task__role {
  font-family: var(--font-meta);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ins-violet);
}
.task__action {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg-1);
}
.task .status {
  margin-left: auto;
}
.eckdaten {
  margin: 0 0 var(--space-5);
}
.eckdaten dt {
  font-family: var(--font-meta);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg-2);
}
.eckdaten dd {
  margin: 2px 0 var(--space-3);
  font-size: 16px;
  color: var(--fg-1);
}
.eckdaten-form {
  margin-bottom: var(--space-6);
}
.contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 16px;
}

/* ---- Content block + prose ---- */
.content-block {
  margin-bottom: var(--space-7);
}
.content-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.prose {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.prose > :first-child {
  margin-top: 0;
}
.prose h1,
.prose h2,
.prose h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ins-deep-purple);
  line-height: 1.25;
  margin: var(--space-5) 0 var(--space-3);
}
.prose h1 { font-size: 28px; }
.prose h2 { font-size: 22px; }
.prose h3 { font-size: 19px; }
.prose p { margin: 0 0 var(--space-4); }
.prose ul,
.prose ol { margin: 0 0 var(--space-4) var(--space-5); }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--fg-link); }
.prose blockquote {
  margin: 0 0 var(--space-4);
  padding: 8px var(--space-4);
  border-left: 3px solid var(--ins-violet);
  background: var(--ins-bg-tint);
  border-radius: var(--radius-xs);
}
.prose code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.9em;
  background: var(--ins-bg-tint);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}
.prose pre {
  background: var(--ins-bg-tint);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.prose pre code { background: none; padding: 0; }

/* ---- Markdown editor ---- */
.editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-4);
}
.editor-grid textarea {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 15px;
  line-height: 1.5;
  width: 100%;
}
.editor-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.editor-preview .prose {
  background: var(--ins-white);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  min-height: 200px;
}

/* ---- Diff ---- */
.diff {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 14px;
  line-height: 1.5;
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--ins-white);
}
.diff__line {
  padding: 1px 12px 1px 26px;
  white-space: pre-wrap;
  position: relative;
  color: var(--fg-1);
}
.diff__line--insert {
  background: rgba(50, 201, 130, 0.12);
}
.diff__line--delete {
  background: rgba(255, 49, 49, 0.1);
}
.diff__line--insert::before {
  content: "+";
  position: absolute;
  left: 10px;
  color: #1f7a4d;
}
.diff__line--delete::before {
  content: "−";
  position: absolute;
  left: 10px;
  color: var(--ins-red);
}

/* ---- History ---- */
.history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  max-width: 760px;
}
.history__link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  background: var(--ins-white);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--fg-1);
}
.history__link:hover { box-shadow: var(--shadow-lift); }
.history__when {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ins-deep-purple);
}
.history__who { color: var(--fg-2); font-size: 16px; }
.history__note { color: var(--fg-2); font-size: 16px; margin-left: auto; }

/* ---- Exports ---- */
.content-block__actions {
  display: inline-flex;
  gap: var(--space-3);
  align-items: center;
}
.content-block__actions form {
  display: inline;
}
.exports {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.exports li {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  flex-wrap: wrap;
}
.exports a {
  color: var(--fg-link);
  text-decoration: none;
  font-weight: 600;
}

/* ---- Task actions ---- */
.task__actions {
  flex-basis: 100%;
  margin-top: 6px;
}
.task-action {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.task-action input {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ins-rule-gray);
  min-width: 220px;
}

/* ---- Header bell ---- */
.app-bell__count {
  display: inline-block;
  margin-left: 5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--ins-green);
  color: #fff;
  font-family: var(--font-meta);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ---- Auth divider ---- */
.auth__divider {
  text-align: center;
  margin: var(--space-5) 0 var(--space-3);
}

/* ---- Notifications ---- */
.notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 760px;
}
.notif__link {
  display: block;
  background: var(--ins-white);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--fg-1);
  border-left: 3px solid transparent;
}
.notif--unread .notif__link {
  border-left-color: var(--ins-green);
}
.notif__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ins-deep-purple);
}
.notif__body {
  display: block;
  margin-top: 2px;
}
.notif__when {
  display: block;
  margin-top: 4px;
}

/* ---- Comments ---- */
.comments {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: 10px;
}
.comment {
  background: var(--ins-bg-tint);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.comment__meta {
  display: block;
}
.comment__body {
  display: block;
  margin-top: 3px;
  font-size: 16px;
}

/* ---- Workflow editor ---- */
.wf-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}
.wf-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--ins-white);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--fg-1);
}
.wf-card:hover {
  box-shadow: var(--shadow-lift);
}
.wf-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ins-deep-purple);
}
.wf-title-form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.wf-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  color: var(--fg-heading);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  background: transparent;
  max-width: 100%;
}
.wf-title:focus {
  border-color: var(--ins-rule-gray);
  background: var(--ins-white);
  outline: none;
}
.wf-active {
  font-family: var(--font-meta);
  font-size: 14px;
  color: var(--fg-2);
}

.wf-stages {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  align-items: flex-start;
  padding-bottom: var(--space-4);
}
.wf-stage {
  flex: 0 0 280px;
  background: var(--ins-bg-tint);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.wf-stage__head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wf-stage__handle,
.wf-task__handle {
  cursor: grab;
  color: var(--fg-3);
  font-size: 16px;
  user-select: none;
}
.wf-stage__name {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ins-deep-purple);
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: transparent;
  padding: 4px 6px;
}
.wf-stage__name:focus {
  border-color: var(--ins-rule-gray);
  background: var(--ins-white);
  outline: none;
}
.wf-x {
  border: 0;
  background: transparent;
  color: var(--fg-3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.wf-x:hover {
  color: var(--ins-red);
}
.wf-tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  min-height: 8px;
}
.wf-task {
  background: var(--ins-white);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
}
.wf-task__form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.wf-task__form select {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 4px 6px;
  border: 1px solid var(--ins-rule-gray);
  border-radius: var(--radius-xs);
  background: var(--ins-white);
}
.wf-req {
  font-family: var(--font-meta);
  font-size: 13px;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.wf-task__prompt {
  grid-column: 1 / -1;
}
.wf-task__prompt textarea {
  width: 100%;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--ins-rule-gray);
  border-radius: var(--radius-xs);
}
.wf-tasks__empty {
  padding: 2px 4px;
}
.wf-addtask {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.wf-addtask select {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 4px 6px;
  border: 1px solid var(--ins-rule-gray);
  border-radius: var(--radius-xs);
  background: var(--ins-white);
}
.wf-addstage {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  border: 1.5px dashed var(--ins-rule-gray);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.wf-addstage input {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--ins-rule-gray);
  border-radius: var(--radius-sm);
}
.sortable-ghost {
  opacity: 0.4;
}

/* ---- Responsive ---- */
.app-header__inner {
  flex-wrap: wrap;
  row-gap: 8px;
}
@media (max-width: 760px) {
  .feature-grid,
  .detail-grid,
  .editor-grid {
    grid-template-columns: 1fr;
  }
  .app-header__inner {
    gap: var(--space-3);
  }
  .app-nav {
    gap: var(--space-3);
    font-size: 14px;
    flex-wrap: wrap;
  }
  .app-user {
    display: none;
  }
  .page-head {
    gap: var(--space-3);
  }
}