/*
  ziffer.ai design system for the practice portal.
  Brand tokens are shared by login and portal; component styles stay here instead of templates.
*/
:root {
  color-scheme: dark;
  --z-charcoal-deep: #14151b;
  --z-charcoal: #181922;
  --z-charcoal-raised: #22232c;
  --z-charcoal-line: #2c2d36;
  --z-cream: #f4f1e8;
  --z-cream-dim: #9c998f;
  --z-teal: #39a6a0;
  --z-teal-strong: #2c8f89;
  --z-amber: #c97f1f;
  --z-red: #e36a5f;
  --z-bg: var(--z-charcoal-deep);
  --z-bg-grid: rgba(244, 241, 232, .08);
  --z-bg-grid-opacity: .18;
  --z-surface: rgba(24, 25, 34, .94);
  --z-surface-muted: rgba(34, 35, 44, .72);
  --z-surface-soft: rgba(34, 35, 44, .38);
  --z-surface-solid: #20212a;
  --z-input: #101117;
  --z-border: var(--z-charcoal-line);
  --z-text: var(--z-cream);
  --z-text-strong: #fffaf0;
  --z-muted: var(--z-cream-dim);
  --z-link: var(--z-teal);
  --z-accent: var(--z-teal);
  --z-accent-strong: #48c2ba;
  --z-accent-text: #101117;
  --z-shadow-panel: 0 22px 70px rgba(0, 0, 0, .28);
  --z-shadow-top: 0 18px 50px rgba(0, 0, 0, .22);
  --z-focus: 0 0 0 3px rgba(57, 166, 160, .16);
  --z-radius: 8px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --z-bg: #f4f1e8;
  --z-bg-grid: rgba(20, 21, 27, .08);
  --z-bg-grid-opacity: .18;
  --z-surface: rgba(255, 252, 244, .94);
  --z-surface-muted: rgba(234, 229, 216, .82);
  --z-surface-soft: rgba(234, 229, 216, .66);
  --z-surface-solid: #e9e4d7;
  --z-input: #fffaf0;
  --z-border: #d7d0c0;
  --z-text: #181922;
  --z-text-strong: #101117;
  --z-muted: #656156;
  --z-link: #247c76;
  --z-accent: #2c8f89;
  --z-accent-strong: #21736f;
  --z-accent-text: #fffaf0;
  --z-shadow-panel: 0 18px 55px rgba(20, 21, 27, .12);
  --z-shadow-top: 0 14px 38px rgba(20, 21, 27, .10);
  --z-focus: 0 0 0 3px rgba(44, 143, 137, .18);
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

html {
  background: var(--z-bg);
}

body {
  background: var(--z-bg);
  color: var(--z-text);
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--z-bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--z-bg-grid) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: var(--z-bg-grid-opacity);
  mask-image: radial-gradient(ellipse at 45% 20%, black 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 45% 20%, black 0%, transparent 72%);
}

.portal {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px;
}

.top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  background: color-mix(in srgb, var(--z-surface) 78%, transparent);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius);
  padding: 14px 16px;
  box-shadow: var(--z-shadow-top);
  backdrop-filter: blur(14px);
}

.top h1,
.login h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--z-text-strong);
  margin: 0;
  font-size: 1.08rem;
  letter-spacing: .01em;
}

.top h1::before,
.login h1::before {
  content: "";
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background-color: var(--z-accent);
  mask: url("/static/ziffer-logo-monogram.svg") center / contain no-repeat;
  -webkit-mask: url("/static/ziffer-logo-monogram.svg") center / contain no-repeat;
}

.login h1::before {
  width: 38px;
  height: 38px;
  background-size: 24px 24px;
}

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

.muted {
  color: var(--z-muted);
  font-size: .88rem;
}

.grid {
  display: grid;
  grid-template-columns: 430px minmax(0, 1fr);
  gap: 16px;
  transition: grid-template-columns .22s ease;
}

.panel,
.box {
  background: var(--z-surface);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius);
  box-shadow: var(--z-shadow-panel);
}

.panel {
  min-width: 0;
}

.head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--z-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--z-surface-soft);
}

.worklist-panel .head {
  gap: 10px;
  justify-content: flex-start;
}

.worklist-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.list-toggle {
  flex: 0 0 auto;
}

.list-toggle-icon {
  display: inline-block;
  font-size: 1.2rem;
  line-height: 1;
  margin-right: 4px;
  transition: transform .18s ease;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
}

.metric,
.copy,
.status-card {
  background: var(--z-surface-muted);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius);
}

.metric {
  padding: 10px;
  color: var(--z-text);
  cursor: pointer;
  display: block;
  font: inherit;
  text-align: left;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  width: 100%;
}

.metric:hover {
  border-color: color-mix(in srgb, var(--z-accent) 45%, var(--z-border));
  background: color-mix(in srgb, var(--z-accent) 10%, var(--z-surface-muted));
  transform: translateY(-1px);
}

.metric.active {
  border-color: var(--z-accent);
  background: color-mix(in srgb, var(--z-accent) 14%, var(--z-surface-muted));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--z-accent) 16%, transparent);
}

.metric small,
.status-card small {
  display: block;
  color: var(--z-muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.metric strong {
  color: var(--z-text-strong);
  font-size: 1.35rem;
}

.metric.active small {
  color: var(--z-accent);
}

.filters {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
}

.filters input,
.filters select,
.manual-fields input,
.clarification-answer,
.field input {
  min-width: 0;
  border: 1px solid var(--z-border);
  border-radius: 7px;
  padding: 9px 10px;
  font: inherit;
  background: var(--z-input);
  color: var(--z-text);
}

.filters input,
.filters select {
  flex: 1;
}

.filters input:focus,
.filters select:focus,
.manual-fields input:focus,
.clarification-answer:focus,
.field input:focus {
  outline: none;
  border-color: var(--z-accent);
  box-shadow: var(--z-focus);
}

.list {
  max-height: calc(100vh - 245px);
  overflow: auto;
}

.row {
  width: 100%;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--z-border);
  background: transparent;
  color: var(--z-text);
  padding: 12px 14px;
  cursor: pointer;
  display: grid;
  gap: 5px;
}

.row:hover,
.row.active {
  background: color-mix(in srgb, var(--z-accent) 11%, transparent);
}

.row-main {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

@media (min-width: 901px) {
  body.appointment-open.list-collapsed .grid {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  body.appointment-open.list-collapsed .worklist-panel {
    overflow: hidden;
  }

  body.appointment-open.list-collapsed .worklist-panel .head {
    align-items: center;
    flex-direction: column;
    padding: 10px 8px;
  }

  body.appointment-open.list-collapsed .worklist-title,
  body.appointment-open.list-collapsed .metrics,
  body.appointment-open.list-collapsed .filters,
  body.appointment-open.list-collapsed .row .muted,
  body.appointment-open.list-collapsed .row-main .chip {
    display: none;
  }

  body.appointment-open.list-collapsed .list-toggle {
    min-height: 46px;
    padding: 8px 7px;
    width: 100%;
  }

  body.appointment-open.list-collapsed .list-toggle-icon {
    margin-right: 0;
    transform: rotate(180deg);
  }

  body.appointment-open.list-collapsed .list-toggle-text {
    display: block;
    font-size: .72rem;
    line-height: 1.1;
  }

  body.appointment-open.list-collapsed .list {
    max-height: calc(100vh - 130px);
  }

  body.appointment-open.list-collapsed .row {
    gap: 0;
    justify-items: center;
    padding: 11px 6px;
  }

  body.appointment-open.list-collapsed .row-main {
    display: block;
    text-align: center;
  }

  body.appointment-open.list-collapsed .row-main strong {
    display: block;
    font-size: .74rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  body.appointment-open.list-collapsed .row::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--z-muted);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--z-muted) 15%, transparent);
    margin-bottom: 6px;
  }

  body.appointment-open.list-collapsed .row.active {
    background: color-mix(in srgb, var(--z-accent) 18%, transparent);
  }

  body.appointment-open.list-collapsed .row.active::before {
    background: var(--z-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--z-accent) 22%, transparent);
  }
}

.chip {
  display: inline-flex;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: .73rem;
  font-weight: 800;
}

.detail {
  min-height: 620px;
}

.empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--z-muted);
}

.body {
  padding: 16px;
  display: grid;
  gap: 14px;
}

.tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--z-border);
  padding: 0 16px;
  overflow: auto;
}

.tab {
  border: 0;
  background: transparent;
  padding: 11px 10px;
  font-weight: 800;
  color: var(--z-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.tab.active {
  color: var(--z-accent);
  border-color: var(--z-accent);
}

.next {
  background: linear-gradient(135deg, color-mix(in srgb, var(--z-accent) 14%, transparent), var(--z-surface-soft));
  border: 1px solid color-mix(in srgb, var(--z-accent) 34%, var(--z-border));
  border-radius: var(--z-radius);
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.next-rueckfrage {
  background: linear-gradient(135deg, color-mix(in srgb, var(--z-amber) 24%, transparent), var(--z-surface-soft));
  border-color: color-mix(in srgb, var(--z-amber) 58%, var(--z-border));
}

.next-pruefen {
  background: linear-gradient(135deg, color-mix(in srgb, var(--z-accent) 18%, transparent), var(--z-surface-soft));
}

.next-fehler {
  background: linear-gradient(135deg, color-mix(in srgb, #ff6b6b 20%, transparent), var(--z-surface-soft));
  border-color: color-mix(in srgb, #ff6b6b 55%, var(--z-border));
}

.btnx {
  border: 1px solid var(--z-border);
  background: var(--z-input);
  color: var(--z-text);
  border-radius: 7px;
  padding: 8px 10px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}

.btnx:hover {
  border-color: var(--z-accent);
  color: var(--z-accent);
}

.btnx.primary,
.login .btnx:not(.secondary):not(.theme-toggle) {
  background: var(--z-accent);
  border-color: var(--z-accent);
  color: var(--z-accent-text);
}

.btnx.primary:hover,
.login .btnx:not(.secondary):not(.theme-toggle):hover {
  background: var(--z-accent-strong);
  color: var(--z-accent-text);
}

.btnx.active {
  background: color-mix(in srgb, var(--z-accent) 18%, var(--z-input));
  border-color: var(--z-accent);
  color: var(--z-accent);
}

.btnx.danger.active {
  background: color-mix(in srgb, #ff6b6b 18%, var(--z-input));
  border-color: #ff6b6b;
  color: #ff8a8a;
}

.btnx.secondary {
  background: var(--z-input);
  color: var(--z-accent);
  border-color: var(--z-border);
}

.btnx:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.theme-toggle {
  min-width: 78px;
}

.mobile-back {
  display: none;
}

.copy {
  overflow: hidden;
  margin-bottom: 10px;
}

.task-card {
  align-items: center;
  background: var(--z-surface-muted);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius);
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  padding: 12px;
}

.task-card strong {
  color: var(--z-text-strong);
  font-size: 1rem;
}

.task-card .pairing-code {
  font-size: 2rem;
  letter-spacing: .08em;
  line-height: 1.1;
}

.task-card span {
  color: var(--z-text);
  line-height: 1.45;
}

.task-card.warning {
  background: color-mix(in srgb, var(--z-amber) 13%, var(--z-surface-muted));
  border-color: color-mix(in srgb, var(--z-amber) 62%, var(--z-border));
}

.task-card.ok {
  background: color-mix(in srgb, var(--z-accent) 11%, var(--z-surface-muted));
  border-color: color-mix(in srgb, var(--z-accent) 42%, var(--z-border));
}

.review-shell {
  background: color-mix(in srgb, var(--z-surface) 88%, transparent);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius);
  margin-bottom: 12px;
  padding: 14px;
}

.review-rail {
  background: var(--z-surface-soft);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}

.review-rail-fill {
  background: linear-gradient(90deg, var(--z-accent), var(--z-amber));
  height: 100%;
  transition: width .18s ease;
}

.review-rail-fill.p0 { width: 0; }
.review-rail-fill.p10 { width: 10%; }
.review-rail-fill.p20 { width: 20%; }
.review-rail-fill.p30 { width: 30%; }
.review-rail-fill.p40 { width: 40%; }
.review-rail-fill.p50 { width: 50%; }
.review-rail-fill.p60 { width: 60%; }
.review-rail-fill.p70 { width: 70%; }
.review-rail-fill.p80 { width: 80%; }
.review-rail-fill.p90 { width: 90%; }
.review-rail-fill.p100 { width: 100%; }

.review-dots {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  margin: 12px 0;
}

.review-dot {
  align-items: center;
  background: var(--z-input);
  border: 1px solid var(--z-border);
  border-radius: 7px;
  color: var(--z-muted);
  cursor: pointer;
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 7px;
  text-align: left;
}

.review-dot span {
  align-items: center;
  background: var(--z-surface-muted);
  border-radius: 999px;
  color: var(--z-text);
  display: inline-flex;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.review-dot small {
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.review-dot.active {
  border-color: var(--z-accent);
  color: var(--z-text-strong);
}

.review-dot.done span {
  background: var(--z-accent);
  color: var(--z-accent-text);
}

.review-step-title {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.review-step-title span,
.review-focus small {
  color: var(--z-muted);
  font-size: .78rem;
  text-transform: uppercase;
}

.review-step-title strong {
  color: var(--z-text-strong);
}

.review-focus,
.review-summary {
  background: var(--z-surface-muted);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius);
  margin-bottom: 12px;
  padding: 16px;
}

.review-status-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 14px 0;
}

.review-status-card {
  background: var(--z-input);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius);
  padding: 12px;
}

.review-status-card strong {
  color: var(--z-text-strong);
  display: block;
  margin-bottom: 8px;
}

.review-status-card ul {
  color: var(--z-text);
  line-height: 1.45;
  margin: 0;
  padding-left: 18px;
}

.review-status-card.ok {
  border-color: color-mix(in srgb, var(--z-accent) 34%, var(--z-border));
}

.review-status-card.warning {
  border-color: color-mix(in srgb, var(--z-amber) 58%, var(--z-border));
  background: color-mix(in srgb, var(--z-amber) 10%, var(--z-input));
}

.review-learning-panel {
  background: color-mix(in srgb, var(--z-accent) 7%, var(--z-input));
  border: 1px solid color-mix(in srgb, var(--z-accent) 28%, var(--z-border));
  border-radius: var(--z-radius);
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 14px;
}

.review-learning-panel h3 {
  color: var(--z-text-strong);
  margin: 2px 0 6px;
}

.review-learning-panel p {
  color: var(--z-muted);
  margin: 0;
}

.review-rating {
  align-items: center;
  display: flex;
  gap: 6px;
}

.review-rating strong {
  color: var(--z-text-strong);
  margin-left: 6px;
}

.review-star {
  cursor: pointer;
  display: inline-flex;
}

.review-star input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.review-star span {
  color: var(--z-muted);
  font-size: 1.35rem;
  line-height: 1;
}

.review-star.active span,
.review-star:hover span {
  color: var(--z-amber);
}

.review-focus h3 {
  color: var(--z-text-strong);
  font-size: 1.28rem;
  margin: 4px 0 10px;
}

.review-focus p {
  color: var(--z-text);
  line-height: 1.55;
  margin: 0 0 12px;
  white-space: pre-wrap;
}

.review-status-line {
  color: var(--z-muted);
  font-size: .92rem;
}

.review-choice-row,
.review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.review-actions {
  justify-content: flex-end;
}

.code-edit-box {
  background: color-mix(in srgb, var(--z-accent) 7%, var(--z-input));
  border: 1px solid color-mix(in srgb, var(--z-accent) 28%, var(--z-border));
  border-radius: var(--z-radius);
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
}

.code-edit-box label {
  color: var(--z-text-strong);
  font-weight: 800;
}

.step-revision-panel {
  background: var(--z-input);
  border-color: color-mix(in srgb, var(--z-accent) 22%, var(--z-border));
  margin: 4px 0 12px;
}

.step-revision-toggle {
  align-items: center;
  border-top: 1px solid var(--z-border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin: 4px 0 12px;
  padding-top: 10px;
}

.step-revision-toggle span {
  color: var(--z-muted);
  font-size: .84rem;
}

.step-revision-panel small {
  color: var(--z-muted);
  display: block;
  font-size: .76rem;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.step-revision-panel p {
  color: var(--z-muted);
  line-height: 1.45;
  margin: 4px 0 0;
}

.code-revision-text {
  background: var(--z-input);
  border: 1px solid var(--z-border);
  border-radius: 7px;
  color: var(--z-text);
  min-height: 92px;
  padding: 10px;
  resize: vertical;
  width: 100%;
}

.processing-card {
  align-items: center;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--z-accent) 11%, transparent), transparent),
    color-mix(in srgb, var(--z-accent) 9%, var(--z-surface-muted));
  background-size: 220% 100%;
  border: 1px solid color-mix(in srgb, var(--z-accent) 46%, var(--z-border));
  border-radius: var(--z-radius);
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-bottom: 10px;
  padding: 14px;
  animation: processingSweep 2.4s ease-in-out infinite;
}

.processing-card strong,
.processing-card span,
.processing-card small {
  display: block;
}

.processing-card strong {
  color: var(--z-text-strong);
  font-size: 1rem;
  margin-bottom: 4px;
}

.processing-card span {
  color: var(--z-text);
  line-height: 1.45;
}

.processing-card small {
  color: var(--z-muted);
  margin-top: 8px;
}

.processing-orbit {
  border: 2px solid color-mix(in srgb, var(--z-accent) 24%, var(--z-border));
  border-radius: 999px;
  height: 36px;
  position: relative;
  width: 36px;
}

.processing-orbit span {
  background: var(--z-accent);
  border-radius: 999px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--z-accent) 72%, transparent);
  height: 8px;
  left: 12px;
  position: absolute;
  top: -5px;
  transform-origin: 6px 23px;
  width: 8px;
  animation: processingSpin 1s linear infinite;
}

@keyframes processingSweep {
  0% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

@keyframes processingSpin {
  to { transform: rotate(360deg); }
}

.context-grid {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(220px, 1.2fr);
  gap: 10px;
  margin-bottom: 10px;
}

.context-card {
  background: var(--z-surface-muted);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius);
  padding: 12px;
}

.context-card small {
  color: var(--z-muted);
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.context-card div {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 5px 0;
}

.context-card .summary-copy-head {
  align-items: center;
  padding-top: 0;
}

.context-card .summary-copy-head small {
  margin-bottom: 0;
}

.context-card .summary-copy-head .btnx {
  min-height: 32px;
  padding: 6px 10px;
}

.context-card strong {
  color: var(--z-muted);
  font-size: .82rem;
}

.context-card span,
.context-card p {
  color: var(--z-text);
  line-height: 1.45;
  margin: 0;
  white-space: pre-wrap;
}

.copy-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--z-border);
  background: var(--z-surface-solid);
}

.copy-head h3 {
  color: var(--z-text-strong);
  font-size: .9rem;
  margin: 0;
}

.copy-text {
  color: var(--z-text);
  white-space: pre-wrap;
  padding: 12px;
  font-size: .92rem;
  line-height: 1.45;
}

.evident-steps {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--z-border);
}

.evident-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-top: 1px solid var(--z-border);
}

.evident-step:first-child {
  border-top: 0;
}

.evident-step code {
  font-size: .98rem;
  font-weight: 750;
  color: var(--z-text-strong);
  background: var(--z-surface-solid);
  border: 1px solid var(--z-border);
  border-radius: 6px;
  padding: 4px 8px;
}

.evident-patient-picker {
  border-color: color-mix(in srgb, var(--z-accent) 38%, var(--z-border));
}

.patient-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px 12px 6px;
}

.patient-search input {
  min-width: 0;
  border: 1px solid var(--z-border);
  border-radius: 7px;
  padding: 9px 10px;
  font: inherit;
  background: var(--z-input);
  color: var(--z-text);
}

.patient-search input:focus {
  outline: none;
  border-color: var(--z-accent);
  box-shadow: var(--z-focus);
}

.patient-search-hint {
  padding: 0 12px 10px;
}

.patient-results {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--z-border);
}

.patient-result {
  align-items: center;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--z-border);
  color: var(--z-text);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 12px;
  justify-content: space-between;
  padding: 11px 12px;
  text-align: left;
  width: 100%;
}

.patient-result:first-child {
  border-top: 0;
}

.patient-result:hover,
.patient-result.active {
  background: color-mix(in srgb, var(--z-accent) 12%, transparent);
}

.patient-result strong {
  color: var(--z-text-strong);
  display: block;
}

.patient-result small {
  color: var(--z-muted);
  display: block;
  margin-top: 3px;
}

.patient-result-action {
  color: var(--z-accent);
  font-weight: 750;
  white-space: nowrap;
}

.question-card {
  border-color: color-mix(in srgb, var(--z-amber) 42%, var(--z-border));
}

.question-text {
  color: var(--z-text-strong);
  display: block;
  margin-bottom: 10px;
}

.question-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.answer-box {
  display: grid;
  gap: 8px;
}

.clarification-answer {
  min-height: 110px;
  width: 100%;
  resize: vertical;
}

.dictation-hint {
  color: var(--z-muted);
  font-size: .84rem;
}

.mic-btn {
  border-color: color-mix(in srgb, var(--z-accent) 38%, var(--z-border));
  color: var(--z-accent);
}

.mic-btn.recording {
  background: color-mix(in srgb, var(--z-red) 22%, var(--z-input));
  border-color: var(--z-red);
  color: var(--z-text-strong);
}

.wide-action {
  width: 100%;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.status-card {
  padding: 10px;
}

.status-card strong {
  color: var(--z-text-strong);
  display: block;
  margin-top: 4px;
}

.guard {
  border-color: color-mix(in srgb, var(--z-amber) 65%, var(--z-border));
  background: color-mix(in srgb, var(--z-amber) 14%, var(--z-surface-muted));
}

.codes {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
  table-layout: fixed;
}

.codes th,
.codes td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--z-border);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.codes th {
  text-align: left;
  color: var(--z-muted);
  background: var(--z-surface-solid);
  font-size: .72rem;
  text-transform: uppercase;
}

.codes tr.code-removed td {
  color: var(--z-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in srgb, #ff6b6b 72%, transparent);
}

.codes tr.code-removed td:last-child {
  text-decoration: none;
}

.manual-fields {
  display: grid;
  grid-template-columns: 90px 130px minmax(160px, 1fr) minmax(160px, 1fr);
  gap: 8px;
}

.clarification-answer {
  width: 100%;
  min-height: 80px;
  margin-top: 8px;
  box-sizing: border-box;
}

.review-learning-comment {
  min-height: 176px;
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: var(--z-accent);
  color: var(--z-accent-text);
  padding: 10px 14px;
  border-radius: var(--z-radius);
  opacity: 0;
  transform: translateY(8px);
  transition: .18s;
  font-weight: 800;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.admin-panel {
  margin-bottom: 16px;
}

.admin-card {
  margin-bottom: 14px;
}

.admin-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

.admin-form input,
.admin-form select,
.admin-actions select {
  min-width: 0;
  border: 1px solid var(--z-border);
  border-radius: 7px;
  padding: 9px 10px;
  font: inherit;
  background: var(--z-input);
  color: var(--z-text);
}

.admin-list {
  display: grid;
}

.admin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid var(--z-border);
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.auth-page::before {
  mask-image: radial-gradient(ellipse at 58% 42%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 58% 42%, black 0%, transparent 70%);
}

.auth-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
}

.auth-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--z-text-strong);
  font-size: .95rem;
  font-weight: 900;
  letter-spacing: .01em;
}

.auth-logo {
  width: 26px;
  height: 26px;
  display: block;
  object-fit: contain;
}

.auth-hero-logo {
  width: 58px;
  height: 58px;
  display: block;
  object-fit: contain;
  margin-bottom: 12px;
  filter: drop-shadow(0 14px 26px color-mix(in srgb, var(--z-accent) 32%, transparent));
}

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 92px 24px 40px;
}

.box {
  position: relative;
  padding: 28px;
}

.auth-shell {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  overflow: hidden;
  border: 1px solid var(--z-border);
  border-radius: 10px;
  background: var(--z-surface);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .32);
}

.auth-brand {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  padding: 38px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--z-accent) 18%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--z-surface-solid) 82%, transparent), var(--z-surface-muted));
  border-right: 1px solid var(--z-border);
}

.auth-brand h1 {
  margin: 0;
  color: var(--z-text-strong);
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  line-height: .9;
}

.auth-brand h1::before {
  display: none;
}

.auth-brand p {
  max-width: 430px;
  margin: 0;
  color: var(--z-muted);
  font-size: 1rem;
  line-height: 1.55;
}

.auth-kicker {
  color: var(--z-accent);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.auth-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.auth-proof span {
  border: 1px solid color-mix(in srgb, var(--z-accent) 34%, var(--z-border));
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--z-text);
  background: color-mix(in srgb, var(--z-accent) 10%, transparent);
  font-size: .78rem;
  font-weight: 800;
}

.auth-card {
  width: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 42px;
  align-self: stretch;
}

.auth-card h2 {
  margin: 6px 0 8px;
  color: var(--z-text-strong);
  font-size: 1.85rem;
  letter-spacing: 0;
}

.login h1 {
  font-size: 1.35rem;
  margin-bottom: 8px;
}

.field {
  display: grid;
  gap: 6px;
  margin: 16px 0;
}

.field label {
  color: var(--z-muted);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.login .btnx:not(.login-theme-toggle) {
  width: 100%;
  padding: 10px 12px;
}

.login-theme-toggle {
  position: static;
  z-index: 2;
}

.msg {
  margin-top: 12px;
  font-size: .9rem;
}

.err {
  color: var(--z-red);
}

.ok {
  color: var(--z-accent);
}

.otp {
  display: none;
}

:root[data-theme="dark"] .Neu { color: #9cc9ff; background: #1c3555; }
:root[data-theme="dark"] .Rueckfrage { color: #ffcf89; background: #443019; }
:root[data-theme="dark"] .Pruefen { color: #f7df87; background: #3f3516; }
:root[data-theme="dark"] .Freigegeben { color: #8edbd6; background: #173b39; }
:root[data-theme="dark"] .Uebertragen { color: #98e5bc; background: #17392a; }
:root[data-theme="dark"] .Erledigt { color: #d7d2c4; background: #34343a; }
:root[data-theme="dark"] .Fehler { color: #ffaaa4; background: #4a211f; }

:root[data-theme="light"] .Neu { color: #254e70; background: #eaf1f7; }
:root[data-theme="light"] .Rueckfrage { color: #8a4a00; background: #fff1d4; }
:root[data-theme="light"] .Pruefen { color: #674000; background: #fff5c7; }
:root[data-theme="light"] .Freigegeben { color: #12606a; background: #dff4f2; }
:root[data-theme="light"] .Uebertragen { color: #126a3f; background: #dff3e7; }
:root[data-theme="light"] .Erledigt { color: #4b5149; background: #ebe7dc; }
:root[data-theme="light"] .Fehler { color: #98241c; background: #fde8e4; }

@media (max-width: 900px) {
  .portal {
    padding: 12px;
  }

  .list-toggle {
    display: none;
  }

  .grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .list {
    max-height: 420px;
  }

  .detail {
    min-height: auto;
  }

  .metrics,
  .status-grid,
  .context-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .top {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-actions {
    justify-content: flex-start;
  }

  .filters {
    flex-wrap: wrap;
  }

  .filters input,
  .filters select {
    flex-basis: 100%;
  }

  .manual-fields {
    grid-template-columns: 1fr;
  }

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

  .admin-form {
    grid-template-columns: 1fr;
  }

  .admin-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-actions {
    justify-content: flex-start;
  }

  .processing-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .processing-card .btnx {
    grid-column: 1 / -1;
  }

  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-brand {
    min-height: auto;
    padding: 28px;
    border-right: 0;
    border-bottom: 1px solid var(--z-border);
  }

  .auth-brand h1 {
    font-size: 2.7rem;
  }

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

@media (max-width: 520px) {
  .portal {
    padding: 10px;
  }

  body:not(.appointment-open) .grid > .detail {
    display: none;
  }

  body.appointment-open .grid > .panel:first-child {
    display: none;
  }

  .mobile-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-back::before {
    content: "‹";
    font-size: 1.2rem;
    line-height: 1;
    margin-right: 6px;
  }

  .list {
    max-height: none;
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail .head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  .detail .head .mobile-back {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .detail .head > div {
    min-width: 0;
  }

  .tabs {
    background: var(--z-surface);
    padding: 0 12px;
    position: sticky;
    top: 0;
    z-index: 5;
  }

  .body {
    padding: 12px;
  }

  .next,
  .copy-head,
  .row-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .btnx {
    max-width: 100%;
  }

  .auth-topbar {
    padding: 12px;
  }

  .login {
    padding: 70px 12px 24px;
  }

  .auth-brand,
  .auth-card {
    padding: 22px;
  }
}