:root {
  --bg-top: #edf4ec;
  --bg-bottom: #d7e7db;
  --panel: #ffffff;
  --text: #18221a;
  --muted: #4b5f50;
  --line: #c3d5c4;
  --accent: #2a6f55;
  --accent-soft: #d8ece1;
  --nav-bg: #17382a;
  --nav-text: #d7ecd8;
}

* {
  box-sizing: border-box;
}

body:not(.mysite-body) {
  margin: 0;
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  color: var(--text);
  background: linear-gradient(135deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

.therapie-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
  transition: grid-template-columns 0.25s ease;
}

.therapie-layout.nav-collapsed {
  grid-template-columns: 0 1fr;
}

.side-nav {
  display: flex;
  flex-direction: column;
  background: var(--nav-bg);
  color: var(--nav-text);
  padding: 1rem;
  width: 280px;
  transform: translateX(0);
  transition: width 0.2s ease, transform 0.25s ease;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.5rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.brand-mark {
  display: inline-flex;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.75rem;
  justify-content: center;
  align-items: center;
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
}

.brand small {
  display: block;
  color: rgba(255, 255, 255, 0.7);
}

.nav-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.side-nav-footer {
  display: none;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.nav-list a {
  color: var(--nav-text);
  text-decoration: none;
  padding: 0.6rem 0.7rem;
  border-radius: 0.6rem;
}

.nav-list a.active,
.nav-list a:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.workspace {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-auth {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
  max-width: 100%;
}

.menu-toggle {
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 0.45rem 0.75rem;
  background: var(--panel);
  cursor: pointer;
}

.login-form {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body:not(.mysite-body) .login-form input,
body:not(.mysite-body) .token-tools input {
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  padding: 0.45rem 0.6rem;
  min-width: 10rem;
}

:where(
  body:not(.mysite-body) .login-form button,
  body:not(.mysite-body) .token-tools button,
  body:not(.mysite-body) button
) {
  border: 1px solid var(--accent);
  border-radius: 0.55rem;
  background: var(--accent);
  color: #ffffff;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}

.side-nav-toggle {
  width: 100%;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.side-nav-toggle:hover,
.side-nav-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.42);
}

.token-tools {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.settings-token-tools {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

.settings-token-tools input {
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  padding: 0.45rem 0.6rem;
  min-width: 16rem;
  flex: 1 1 18rem;
}

body:not(.mysite-body) .status-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.88rem;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--line);
}

.content {
  width: min(1180px, 100%);
  padding: 1.2rem 1rem 2rem;
  margin: 0 auto;
}

.hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-content {
  flex: 1 1 22rem;
  min-width: min(100%, 20rem);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  flex: 0 0 auto;
  margin-left: auto;
}

.hero-history-trigger,
.hero-change-request-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
}

.hero-history-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.hero-history-trigger-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  min-height: 1.65rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(31, 79, 58, 0.12);
  color: #1f4f3a;
  font-size: 0.82rem;
  font-weight: 700;
}

.hero h1 {
  margin: 0;
  font-size: clamp(1.7rem, 2.4vw, 2.5rem);
}

.hero p {
  margin-top: 0.55rem;
  color: var(--muted);
}

.cards {
  margin-top: 1.1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.card,
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 8px 20px rgba(17, 40, 27, 0.08);
}

.card-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.card h2 {
  margin: 0.55rem 0;
  font-size: 1.2rem;
}

.card p {
  margin: 0;
  line-height: 1.45;
}

.ui-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.service-card-inactive {
  opacity: 0.86;
  border-style: dashed;
}

.service-card-actions {
  margin-top: 0.75rem;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.7rem;
}

.service-hourly-rate {
  margin: 0 0 0.45rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.service-cost-total {
  margin: 0 0 0.45rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.service-hourly-rate-hint {
  display: block;
  margin-top: 0.35rem;
}

.service-card-action-buttons {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: max-content;
}

.service-card-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  min-width: 2.65rem;
  height: 2.65rem;
  padding: 0.45rem;
}

.service-card-icon-btn svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-state-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.18rem 0.58rem;
  font-size: 0.82rem;
  border: 1px solid #bdd3c3;
}

.service-state-badge.is-active {
  color: #1b5b41;
  background: #e6f3eb;
}

.service-state-badge.is-inactive {
  color: #5d5d5d;
  background: #f1f1f1;
}

.service-editor-active-field {
  align-content: end;
}

.empty {
  border-style: dashed;
}

.panel {
  margin-top: 1rem;
}

.panel h2 {
  margin: 0 0 0.8rem;
}

.settings-collapsible-panel {
  padding: 0.4rem 0.55rem 0.6rem;
}

.settings-collapsible-header {
  margin: 0;
}

.settings-collapsible-toggle {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.72rem;
  background: linear-gradient(180deg, var(--panel) 0%, var(--accent-soft) 100%);
  color: var(--accent);
  padding: 0.6rem 0.72rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  text-align: left;
  font-weight: 700;
  font-size: 1.05rem;
}

.settings-collapsible-toggle:hover,
.settings-collapsible-toggle:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.settings-collapsible-title {
  display: inline-block;
}

.settings-collapsible-chevron {
  width: 0.95rem;
  height: 0.95rem;
  display: inline-block;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  margin-right: 0.25rem;
}

.settings-collapsible-panel.is-open .settings-collapsible-chevron {
  transform: rotate(-135deg);
  margin-top: 0.2rem;
}

.settings-collapsible-content {
  padding: 0.85rem 0.55rem 0.3rem;
}

.settings-collapsible-content > :last-child {
  margin-bottom: 0;
}

.client-quick-actions-panel {
  padding: 0.8rem 1rem;
}

.client-detail-toolbar {
  align-items: center;
}

.client-detail-layout-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.client-detail-layout-open-btn svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.client-icon-action-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.client-icon-action-btn {
  width: 3.6rem;
  min-width: 3.6rem;
  height: 3.6rem;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: linear-gradient(180deg, var(--panel) 0%, var(--accent-soft) 100%);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.client-icon-action-btn:hover,
.client-icon-action-btn:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.client-icon-action-btn svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.client-document-template-list {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.9rem;
}

.client-document-template-item {
  display: grid;
  gap: 0.35rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: linear-gradient(180deg, var(--panel) 0%, var(--accent-soft) 100%);
}

.client-document-template-item label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--text);
}

.client-document-template-item input[type="checkbox"] {
  margin-top: 0.2rem;
}

.client-document-template-title {
  font-weight: 700;
  color: var(--text);
}

.client-document-template-meta {
  color: var(--muted);
  font-size: 0.85rem;
}

.client-document-template-empty {
  margin: 0;
  color: var(--muted);
}

.client-document-history-actions {
  white-space: nowrap;
}

.client-journal-ribbon-wrap {
  display: grid;
  gap: 0.85rem;
  margin: 0.8rem 0 1rem;
}

.client-journal-ribbon-group {
  display: grid;
  gap: 0.45rem;
}

.client-journal-ribbon-group strong {
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.client-journal-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.client-journal-ribbon button {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.76);
  color: var(--text);
}

.client-journal-ribbon button.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.client-journal-favorite-cell {
  width: 3.5rem;
  text-align: center;
}

.client-journal-favorite-btn {
  min-width: 2.4rem;
  padding: 0.3rem 0.55rem;
  font-size: 1rem;
  line-height: 1;
}

.client-journal-favorite-btn.is-active {
  background: #d78b1f;
  border-color: #d78b1f;
}

.client-journal-favorite-placeholder {
  color: var(--muted);
}

.client-journal-content-cell strong {
  display: block;
  margin-bottom: 0.25rem;
}

.client-journal-content-cell div + small,
.client-journal-content-cell small + small {
  display: block;
  margin-top: 0.22rem;
  color: var(--muted);
}

.client-journal-actions-cell {
  min-width: 12rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.client-journal-row-actions-header {
  width: 9.25rem;
  min-width: 9.25rem;
  text-align: right;
  white-space: nowrap;
}

.client-journal-row-actions-cell {
  width: 9.25rem;
  min-width: 9.25rem;
  vertical-align: top;
  padding-left: 0.55rem;
}

.client-journal-row-actions {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  min-width: 0;
}

.client-journal-row-actions.is-open {
  z-index: 140;
}

.client-journal-row-actions-toggle {
  width: 100%;
  min-width: 0;
  padding-inline: 0.65rem;
  justify-content: center;
  white-space: nowrap;
}

.client-journal-row-actions-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 140;
  display: none;
  min-width: 13rem;
  padding: 0.35rem;
  border: 1px solid #d4e1d7;
  border-radius: 0.85rem;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(22, 50, 34, 0.14);
}

.client-journal-row-actions.is-open .client-journal-row-actions-menu {
  display: grid;
  gap: 0.2rem;
}

.client-journal-row-action-item {
  border: 0;
  border-radius: 0.65rem;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 0.55rem 0.7rem;
  font: inherit;
}

.client-journal-row-action-item:hover,
.client-journal-row-action-item:focus-visible {
  background: #eef7f1;
}

.client-journal-row-action-item:disabled {
  color: var(--muted);
  cursor: not-allowed;
  background: transparent;
}

.client-journal-file-btn {
  max-width: 15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-journal-action-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: stretch;
  margin: 0.9rem 0 0.6rem;
}

.client-journal-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 13rem;
  justify-content: flex-start;
  padding: 0.75rem 0.95rem;
  border: 1px solid #c7d8cd;
  border-radius: 0.9rem;
  background: linear-gradient(180deg, #ffffff 0%, #eef7f1 100%);
  color: var(--text);
  box-shadow: 0 10px 22px rgba(22, 50, 34, 0.08);
}

.client-journal-action-btn:hover,
.client-journal-action-btn:focus-visible {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.client-journal-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.8rem;
  background: var(--accent-soft);
  color: var(--accent);
  flex: 0 0 auto;
}

.client-journal-action-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.client-journal-action-icon-modal {
  width: 2.9rem;
  height: 2.9rem;
}

.client-journal-hairline {
  height: 1px;
  margin: 1rem 0 1.05rem;
  background: linear-gradient(90deg, transparent 0%, var(--line) 12%, var(--line) 88%, transparent 100%);
}

.client-journal-history-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.client-journal-history-head h3 {
  margin: 0 0 0.25rem;
}

.client-journal-filter-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  margin-bottom: 0.9rem;
}

.client-journal-filter-grid > label,
.client-journal-filter-grid > .client-journal-filter-field {
  display: grid;
  gap: 0.35rem;
}

.client-journal-filter-field-label {
  color: var(--text);
}

.client-journal-filter-dropdown {
  position: relative;
}

.client-journal-filter-dropdown-toggle {
  width: 100%;
  justify-content: space-between;
  text-align: left;
}

.client-journal-filter-dropdown-toggle::after {
  content: "";
  width: 0.58rem;
  height: 0.58rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 0.8rem;
  flex: 0 0 auto;
}

.client-journal-filter-dropdown.is-open .client-journal-filter-dropdown-toggle::after {
  transform: rotate(-135deg);
  margin-top: 0.3rem;
}

.client-journal-filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 18;
  display: none;
  padding: 0.45rem;
  border: 1px solid #d4e1d7;
  border-radius: 0.9rem;
  background: #ffffff;
  box-shadow: 0 18px 34px rgba(22, 50, 34, 0.14);
}

.client-journal-filter-dropdown.is-open .client-journal-filter-dropdown-menu {
  display: grid;
  gap: 0.45rem;
}

.client-journal-filter-dropdown-actions {
  display: flex;
  gap: 0.45rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #e2ece5;
}

.client-journal-filter-dropdown-action {
  border: 0;
  border-radius: 0.65rem;
  background: #eef7f1;
  color: var(--text);
  padding: 0.45rem 0.65rem;
  font: inherit;
}

.client-journal-filter-dropdown-options {
  display: grid;
  gap: 0.2rem;
  max-height: 14rem;
  overflow: auto;
}

.client-journal-filter-dropdown-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.38rem 0.4rem;
  border-radius: 0.65rem;
}

.client-journal-filter-dropdown-option input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
}

.client-journal-filter-dropdown-option:hover {
  background: #f4faf6;
}

.client-journal-filter-dropdown-option span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.client-journal-filter-actions {
  align-self: end;
}

.client-journal-quickfilters-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid #d4e1d7;
  border-radius: 0.95rem;
  background: #f8fcf9;
}

.client-journal-quickfilters-bar strong {
  font-size: 0.92rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.client-journal-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.client-journal-quick-filter-btn {
  min-width: 10.5rem;
}

.client-journal-quick-filter-btn.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.client-journal-modal-head {
  align-items: flex-start;
}

.client-journal-modal-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.client-journal-modal-heading-line {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.client-journal-type-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.16rem 0.58rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #eaf5ef;
  color: #1d5a3e;
}

#client-journal-entry-modal[data-journal-entry-type="session_protocol"] .client-journal-type-chip,
#client-journal-mask-modal[data-journal-entry-type="session_protocol"] .client-journal-type-chip {
  background: #e5f1fb;
  color: #285b8f;
}

#client-journal-entry-modal[data-journal-entry-type="important_memo"] .client-journal-type-chip,
#client-journal-mask-modal[data-journal-entry-type="important_memo"] .client-journal-type-chip {
  background: #fff2df;
  color: #915f18;
}

#client-journal-entry-modal[data-journal-entry-type="therapy_suggestion"] .client-journal-type-chip,
#client-journal-mask-modal[data-journal-entry-type="therapy_suggestion"] .client-journal-type-chip {
  background: #e8f6ea;
  color: #27693f;
}

.client-journal-mask-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-width: 2.75rem;
  padding-inline: 0.55rem;
}

.client-journal-mask-open-btn svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.client-journal-mask-fields,
.client-journal-quickfilters-editor {
  display: grid;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

.client-journal-mask-card,
.client-journal-quickfilter-card {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid #d4e1d7;
  border-radius: 0.95rem;
  background: #f8fcf9;
}

.client-journal-mask-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.client-journal-mask-option small {
  color: var(--muted);
}

.client-journal-quickfilter-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
}

.client-journal-quickfilter-card label {
  display: grid;
  gap: 0.35rem;
}

.client-journal-quickfilter-summary {
  color: var(--muted);
}

.client-collapsible-panel {
  padding: 0.35rem 0.55rem 0.55rem;
}

.client-collapsible-header {
  margin: 0;
}

.client-collapsible-toggle {
  width: 100%;
  border: 1px solid var(--accent);
  border-radius: 0.72rem;
  background: var(--accent);
  color: #ffffff;
  padding: 0.55rem 0.72rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  text-align: left;
  font-weight: 700;
}

.client-collapsible-toggle:hover,
.client-collapsible-toggle:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(24, 34, 26, 0.08), 0 10px 20px rgba(24, 34, 26, 0.08);
}

.client-collapsible-title {
  font-size: 1.02rem;
}

.client-collapsible-chevron {
  width: 0.95rem;
  height: 0.95rem;
  display: inline-block;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  margin-right: 0.25rem;
}

.client-collapsible-panel.is-open .client-collapsible-chevron {
  transform: rotate(-135deg);
  margin-top: 0.2rem;
}

.client-collapsible-content {
  padding: 0.85rem 0.55rem 0.35rem;
}

.client-collapsible-content > :last-child {
  margin-bottom: 0;
}

.client-detail-layout-table th,
.client-detail-layout-table td {
  vertical-align: middle;
}

.client-detail-layout-table td:nth-child(2),
.client-detail-layout-table td:nth-child(4),
.client-detail-layout-table td:nth-child(5) {
  white-space: nowrap;
}

.client-detail-layout-label {
  font-weight: 600;
  color: var(--text);
}

.client-detail-layout-order-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.client-detail-layout-order-btn {
  min-width: 2rem;
  padding: 0.2rem 0.45rem;
  line-height: 1;
}

.client-detail-layout-table .navigation-sort-row td:nth-child(-n+3) {
  cursor: grab;
}

.client-detail-layout-table .navigation-sort-row.dragging td:nth-child(-n+3) {
  cursor: grabbing;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
}

body:not(.mysite-body) .form-grid label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
}

.form-grid .span-2 {
  grid-column: span 2;
}

.billing-form {
  align-items: start;
}

.billing-field-patient {
  grid-column: 1 / -1;
}

.billing-period-row,
.billing-meta-row {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.8rem;
  align-items: start;
}

.billing-period-row {
  grid-template-columns: repeat(2, minmax(180px, 220px));
}

.billing-meta-row {
  grid-template-columns: minmax(140px, 180px) minmax(190px, 240px) minmax(300px, 1fr);
}

.billing-meta-row > * {
  min-width: 0;
}

.billing-notes-field {
  display: flex;
  flex-direction: column;
  align-self: start;
  min-width: 0;
  width: 100%;
}

.billing-notes-field textarea {
  min-height: 6.75rem;
  resize: vertical;
  width: 100%;
  max-width: 100%;
}

.billing-form-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
  align-items: flex-start;
}

.client-anamnesis-question-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.client-anamnesis-question-grid > .span-2 {
  grid-column: 1 / -1;
}

body:not(.mysite-body) .form-grid input,
body:not(.mysite-body) .form-grid select,
body:not(.mysite-body) textarea {
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  padding: 0.52rem 0.62rem;
  background: #ffffff;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.help-center-layout {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 0.9rem;
}

.help-center-pages {
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  padding: 0.75rem;
  background: #fcfffd;
}

.help-center-pages h3 {
  margin: 0 0 0.55rem;
}

.help-center-pages ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
  max-height: 34rem;
  overflow: auto;
}

.help-page-link {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: linear-gradient(180deg, var(--panel) 0%, var(--accent-soft) 100%);
  color: var(--text);
  padding: 0.5rem 0.65rem;
}

.help-page-link.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(33, 90, 62, 0.2);
}

.help-center-details {
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  padding: 0.8rem;
  background: #ffffff;
  min-width: 0;
}

.help-center-details header h3 {
  margin: 0;
}

.help-center-details header p {
  margin: 0.45rem 0 0;
}

.help-function-card {
  margin-top: 0.7rem;
  border: 1px solid #d2e2d4;
  border-radius: 0.8rem;
  background: #fcfefd;
  padding: 0.8rem;
  display: grid;
  gap: 0.45rem;
}

.help-function-card h4 {
  margin: 0;
}

.help-search-card {
  background: linear-gradient(180deg, #ffffff 0%, #f4faf6 100%);
}

.help-guided-block {
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem;
  border: 1px solid #d6e4d8;
  border-radius: 0.7rem;
  background: linear-gradient(180deg, #f8fcf9 0%, #f1f8f3 100%);
}

.help-steps-list {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.3rem;
}

.help-tech-details {
  border-top: 1px dashed #d7e4d9;
  padding-top: 0.55rem;
}

.help-tech-details summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
}

.help-tech-details-body {
  margin-top: 0.45rem;
  display: grid;
  gap: 0.3rem;
}

.help-tech-details-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.42;
}

.help-function-figure {
  margin: 0;
  display: grid;
  gap: 0.4rem;
}

.help-screenshot {
  width: min(560px, 100%);
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: #f7faf8;
}

.transcription-lock-panel {
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: #f8fbf9;
}

.transcription-lock-panel .hint {
  margin: 0 0 0.7rem;
}

.transcription-lock-field {
  min-width: min(360px, 100%);
  flex: 1 1 320px;
}

.transcription-lock-actions {
  align-items: center;
}

.transcription-unlock-modal-field {
  min-width: min(100%, 22rem);
}

.transcription-usage-summary {
  margin-top: 0.75rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: #f8fbf9;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.security-overview-shell {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.security-overview-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.security-architecture-summary {
  display: grid;
  gap: 0.65rem;
  padding: 0.95rem 1rem;
  border: 1px solid #d4e1d7;
  border-radius: 0.95rem;
  background: linear-gradient(180deg, #fbfdfb 0%, #f1f7f2 100%);
}

.security-architecture-summary h3 {
  margin: 0;
}

.security-architecture-summary p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.security-architecture-summary ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.58rem;
}

.security-architecture-summary li {
  display: grid;
  gap: 0.18rem;
}

.security-architecture-summary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.security-architecture-summary-value {
  color: var(--accent);
  font-weight: 600;
}

.security-overview-table-wrap {
  border: 1px solid var(--line);
  border-radius: 0.95rem;
  background: linear-gradient(180deg, var(--panel) 0%, #f8fcf9 100%);
}

.security-overview-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
}

.security-overview-table th,
.security-overview-table td {
  padding: 0.78rem 0.82rem;
  border-bottom: 1px solid #dfeae1;
  vertical-align: top;
  text-align: left;
}

.security-overview-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f1f7f3;
}

.security-overview-table tbody tr:hover {
  background: #f9fcfa;
}

.security-overview-table tbody tr:last-child td {
  border-bottom: 0;
}

.security-overview-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.security-overview-sort-btn.is-active {
  color: var(--accent);
}

.security-overview-sort-indicator {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
}

.security-overview-section-cell strong,
.security-overview-table td strong {
  display: block;
}

.security-overview-cell-subtext {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.security-overview-value-cell {
  color: var(--accent);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.security-overview-detail-cell {
  min-width: 22rem;
  color: var(--muted);
  line-height: 1.45;
}

.license-status-card,
.two-factor-status-card {
  display: grid;
  gap: 0.6rem;
  padding: 0.95rem 1rem;
  border: 1px solid #d4e1d7;
  border-radius: 0.95rem;
  background: linear-gradient(180deg, #fbfdfb 0%, #f1f7f2 100%);
  line-height: 1.5;
}

.license-status-grid,
.two-factor-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
}

.license-status-grid div,
.two-factor-status-grid div {
  display: grid;
  gap: 0.18rem;
}

.license-status-grid strong,
.two-factor-status-grid strong {
  color: var(--text);
}

.license-status-card code,
.two-factor-status-card code {
  overflow-wrap: anywhere;
}

.workspace-export-actions {
  margin-top: 0.8rem;
  align-items: end;
}

.workspace-capacity-panel {
  display: grid;
  gap: 0.65rem;
  padding: 0.95rem 1rem;
  border: 1px solid #d4e1d7;
  border-radius: 0.95rem;
  background: linear-gradient(180deg, #fbfdfb 0%, #f1f7f2 100%);
}

.workspace-capacity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.workspace-capacity-bar {
  position: relative;
  width: 100%;
  height: 0.9rem;
  border-radius: 999px;
  overflow: hidden;
  background: #e2ebe6;
  border: 1px solid #cfdbd4;
}

.workspace-capacity-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: #2a6f55;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.workspace-capacity-bar.is-critical span {
  background: #c45454;
}

.workspace-capacity-bar.is-warning span {
  background: #c7901d;
}

.workspace-capacity-bar.is-info span {
  background: #5d7892;
}

.workspace-capacity-summary {
  line-height: 1.5;
}

.workspace-capacity-summary code {
  overflow-wrap: anywhere;
}

.workspace-export-actions label {
  min-width: min(100%, 20rem);
}

.workspace-recovery-inline {
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem 1rem;
  border: 1px solid #d4e1d7;
  border-radius: 0.95rem;
  background: #f8fcf9;
}

.workspace-recovery-inline-output {
  width: 100%;
  min-height: 5.4rem;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.88rem;
}

.workspace-onboarding-assistant {
  display: grid;
  gap: 0.62rem;
  padding: 0.95rem 1rem;
  border: 1px solid #d8e3d9;
  border-radius: 0.95rem;
  background: linear-gradient(180deg, #fcfdfc 0%, #f3f8f4 100%);
}

.workspace-onboarding-assistant h3 {
  margin: 0;
  font-size: 0.97rem;
}

.workspace-risk-text {
  margin: 0;
  color: #5f2f2f;
  background: #fff1f1;
  border: 1px solid #ebc9c9;
  border-radius: 0.75rem;
  padding: 0.62rem 0.72rem;
}

.security-state-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.4rem;
  border-radius: 999px;
  padding: 0.24rem 0.62rem;
  border: 1px solid var(--line);
  font-size: 0.8rem;
  white-space: nowrap;
}

.security-state-badge.is-ok {
  border-color: #b9d7c1;
  background: #e8f6ec;
  color: #216243;
}

.security-state-badge.is-warning {
  border-color: #e2d0a2;
  background: #fff4d6;
  color: #7a5a15;
}

.security-state-badge.is-critical {
  border-color: #dfb6b6;
  background: #fde7e7;
  color: #8c2e2e;
}

.security-state-badge.is-info {
  border-color: #bed3df;
  background: #e8f3fa;
  color: #2d5673;
}

@media (max-width: 760px) {
  .client-anamnesis-question-grid {
    grid-template-columns: 1fr;
  }

  .client-anamnesis-question-grid > .span-2 {
    grid-column: auto;
  }

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

.theme-preset-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.theme-preset-card {
  display: grid;
  gap: 0.65rem;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: linear-gradient(180deg, var(--theme-preset-panel, #ffffff) 0%, var(--accent-soft) 100%);
  color: var(--theme-preset-text, var(--text));
  padding: 0.85rem;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.theme-preset-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(20, 30, 24, 0.08);
}

.theme-preset-card.active {
  border-color: var(--theme-preset-accent, var(--accent));
  box-shadow: 0 0 0 2px var(--theme-preset-accent, var(--accent));
}

.theme-preset-card:focus-visible {
  outline: 2px solid var(--theme-preset-accent, var(--accent));
  outline-offset: 2px;
}

.theme-preset-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.theme-preset-card-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  padding: 0.18rem 0.5rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

.theme-preset-card.active .theme-preset-card-badge {
  border-color: var(--theme-preset-accent, var(--accent));
  background: var(--theme-preset-accent, var(--accent));
  color: #ffffff;
}

.theme-preset-card-swatches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
}

.theme-preset-card-swatches span {
  display: block;
  width: 100%;
  height: 1.1rem;
  border: 1px solid rgba(24, 33, 27, 0.08);
  border-radius: 999px;
}

.theme-preset-card-meta {
  color: var(--muted);
  font-size: 0.82rem;
}

.theme-preview {
  display: grid;
  gap: 0.85rem;
}

.theme-preview-stage {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 0.85rem;
  padding: 0.95rem;
  border: 1px solid var(--theme-preview-line, var(--line));
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--theme-preview-bg-top) 0%, var(--theme-preview-bg-bottom) 100%);
}

.theme-preview-sidebar {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: 0.85rem;
  border-radius: 0.9rem;
  background: var(--theme-preview-nav-bg);
  color: var(--theme-preview-nav-text);
}

.theme-preview-sidebar strong {
  margin-bottom: 0.2rem;
}

.theme-preview-card {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: 0.95rem;
  border: 1px solid var(--theme-preview-line);
  border-radius: 0.95rem;
  background: var(--theme-preview-panel);
  color: var(--theme-preview-text);
}

.theme-preview-card p {
  margin: 0;
  color: var(--theme-preview-muted);
  line-height: 1.45;
}

.theme-preview-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.theme-preview-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--theme-preview-line);
  border-radius: 999px;
  background: var(--theme-preview-accent-soft);
  color: var(--theme-preview-text);
  padding: 0.25rem 0.6rem;
  font-size: 0.82rem;
}

.theme-preview-button {
  border: 0;
  border-radius: 0.65rem;
  background: var(--theme-preview-accent);
  color: #ffffff;
  padding: 0.5rem 0.8rem;
  font: inherit;
}

.theme-preview-palette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.7rem;
}

.theme-preview-swatch {
  display: grid;
  gap: 0.28rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.82);
}

.theme-preview-swatch strong {
  font-size: 0.92rem;
}

.theme-preview-swatch code {
  color: var(--muted);
  font-size: 0.82rem;
}

.theme-preview-swatch-color {
  width: 100%;
  height: 1.6rem;
  border: 1px solid rgba(24, 33, 27, 0.08);
  border-radius: 0.75rem;
}

@media (max-width: 720px) {
  .theme-preview-stage {
    grid-template-columns: 1fr;
  }
}

.clients-quick-search {
  display: grid;
  gap: 0.2rem;
  color: var(--muted);
  flex: 1 1 18rem;
  min-width: min(28rem, 100%);
}

.clients-quick-search input {
  width: 100%;
  min-width: 12rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  padding: 0.45rem 0.6rem;
  background: #ffffff;
}

.clients-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 0.2rem;
  position: relative;
  isolation: isolate;
}

.clients-table {
  width: max-content;
  min-width: max(100%, 1180px);
  table-layout: auto;
}

.clients-table th,
.clients-table td {
  white-space: normal;
  vertical-align: top;
}

.clients-table .clients-col-id,
.clients-table .clients-col-date_of_birth,
.clients-table .clients-col-updated_at {
  white-space: nowrap;
}

.clients-table .clients-col-email,
.clients-table .clients-col-address,
.clients-table .clients-col-insurance_number {
  min-width: 12rem;
  word-break: break-word;
}

.clients-cell-prewrap {
  white-space: pre-line;
}

.clients-actions-cell,
.clients-actions-header {
  white-space: nowrap;
  width: 1%;
  min-width: 7.4rem;
  max-width: 7.4rem;
  position: sticky;
  right: 0;
  z-index: 6;
  background: var(--panel);
  box-shadow: inset 1px 0 0 #d6e4d8;
}

.clients-columns-table td {
  white-space: normal;
  vertical-align: middle;
}

.clients-retention-info {
  margin: 0.75rem 0 0.55rem;
}

.clients-toolbar-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.clients-retention-release-btn {
  min-width: 11.5rem;
  justify-content: center;
}

.menu-order-actions {
  display: inline-flex;
  gap: 0.4rem;
}

.navigation-sort-row {
  cursor: default;
}

.navigation-settings-table .navigation-sort-row td:nth-child(-n+3) {
  cursor: grab;
}

.navigation-sort-row.dragging {
  opacity: 0.45;
}

.navigation-settings-table .navigation-sort-row.dragging td:nth-child(-n+3) {
  cursor: grabbing;
}

.navigation-sort-row.drop-target td {
  background: #e8f4ec;
}

.navigation-drag-handle {
  width: 3rem;
  text-align: center;
  font-size: 1.1rem;
  color: #365a46;
  user-select: none;
  cursor: grab;
}

.navigation-sort-row.dragging .navigation-drag-handle {
  cursor: grabbing;
}

.navigation-visibility-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.navigation-visibility-toggle input {
  margin: 0;
}

.navigation-start-view-field {
  max-width: min(52rem, 100%);
}

.navigation-start-view-field select {
  width: 100%;
  min-width: 0;
}

.navigation-start-view-field .hint {
  margin-top: 0;
}

.navigation-start-view-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.1rem;
}

.navigation-start-view-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  padding: 0.28rem 0.65rem;
  font-size: 0.84rem;
  line-height: 1.2;
}

.navigation-start-view-chip.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
}

body:not(.mysite-body) .hint {
  color: var(--muted);
  margin-top: 0.8rem;
}

.template-base-accordion {
  border: 1px solid #d6e4d8;
  border-radius: 0.75rem;
  background: #fbfefb;
  padding: 0.5rem 0.75rem 0.75rem;
}

.template-base-accordion > summary {
  cursor: pointer;
  font-weight: 700;
  color: #1f3a2b;
  padding: 0.25rem 0.1rem;
}

.template-base-accordion > .form-grid {
  margin-top: 0.65rem;
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.table-wrap {
  overflow: auto;
}

.table-wrap.clients-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
}

.icd10-import-accordion {
  border: 1px solid #d6e4d8;
  border-radius: 0.75rem;
  background: #fbfefb;
  padding: 0.5rem 0.75rem 0.75rem;
}

.icd10-import-accordion > summary {
  cursor: pointer;
  font-weight: 700;
  color: #1f3a2b;
  padding: 0.25rem 0.1rem;
}

.icd10-import-content {
  margin-top: 0.65rem;
  display: grid;
  gap: 0.8rem;
}

.icd10-import-block {
  border: 1px solid #d8e6da;
  border-radius: 0.7rem;
  background: #ffffff;
  padding: 0.8rem;
}

.icd10-import-block h2 {
  margin: 0 0 0.65rem;
}

.icd10-import-form {
  width: min(100%, 980px);
  margin: 0 auto;
  grid-template-columns: minmax(0, 1.8fr) minmax(10rem, 0.8fr) auto auto;
  gap: 0.7rem;
  align-items: end;
}

.icd10-import-field {
  margin: 0;
}

.icd10-import-field-compact {
  max-width: 12rem;
}

.icd10-import-form .checkbox-line {
  min-height: 2.7rem;
  align-self: end;
  padding-bottom: 0.2rem;
}

.icd10-inline-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
  min-height: 2.7rem;
}

.icd10-inline-actions > button,
.icd10-search-toolbar > button {
  min-height: 2.7rem;
}

.icd10-search-toolbar {
  width: min(100%, 980px);
  margin: 0 auto 0.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(11rem, 0.8fr) auto auto auto;
  gap: 0.7rem;
  align-items: end;
  justify-content: center;
}

.icd10-search-query-field,
.icd10-search-language-field {
  display: grid;
  gap: 0.18rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.icd10-search-query-field input,
.icd10-search-language-field select {
  width: 100%;
  min-width: 0;
  min-height: 2.7rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  padding: 0.52rem 0.62rem;
  background: #ffffff;
}

.icd10-search-toolbar .status-chip {
  justify-self: start;
  min-height: 2.7rem;
  display: inline-flex;
  align-items: center;
}

.icd10-table th:nth-child(3),
.icd10-table td:nth-child(3) {
  white-space: normal;
}

.stt-summary {
  line-height: 1.45;
  max-width: 92ch;
}

.stt-model-table th,
.stt-model-table td {
  white-space: normal;
  vertical-align: top;
}

.stt-model-table code {
  word-break: break-all;
}

body:not(.mysite-body) table {
  width: 100%;
  border-collapse: collapse;
}

body:not(.mysite-body) th,
body:not(.mysite-body) td {
  text-align: left;
  padding: 0.56rem;
  border-bottom: 1px solid #d6e4d8;
  white-space: nowrap;
}

body:not(.mysite-body) .filter-row input {
  width: 100%;
  min-width: 8rem;
  border: 1px solid #c7d8cb;
  border-radius: 0.45rem;
  padding: 0.38rem 0.5rem;
  background: #fbfefc;
}

.table-row-clickable {
  cursor: pointer;
}

.table-row-clickable:hover {
  background: #f3faf6;
}

.table-row-clickable:focus {
  outline: 2px solid #2e7a5c;
  outline-offset: -2px;
}

.table-row-clickable.client-row-archived {
  opacity: 0.76;
}

.table-row-selected {
  background: #e5f2e9;
}

.clients-status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.14rem 0.5rem;
  font-size: 0.8rem;
  border: 1px solid #bed8c5;
  background: #edf7f0;
  color: #1f573f;
}

.clients-status-badge.is-archived {
  border-color: #d7c6ad;
  background: #faf3e8;
  color: #724b23;
}

.clients-actions-cell {
  white-space: nowrap;
  vertical-align: middle;
  overflow: visible;
}

.clients-actions {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}

.clients-actions-open-btn {
  min-width: 6.6rem;
  justify-content: center;
}

.clients-actions-modal-body {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.clients-actions-modal-btn {
  width: 100%;
  justify-content: center;
}

.clients-archive-btn {
  border-color: #b7ccbe;
  background: #f4fbf7;
  color: #1f4f3a;
  padding: 0.26rem 0.6rem;
  font-size: 0.82rem;
}

.table-row-selected .clients-actions-cell {
  background: #e5f2e9;
}

.table-row-clickable.client-row-archived .clients-actions-cell {
  background: #fbf7f1;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.detail-grid div {
  display: grid;
  gap: 0.25rem;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: linear-gradient(180deg, var(--panel) 0%, var(--accent-soft) 100%);
}

.detail-grid strong {
  color: var(--muted);
  font-size: 0.88rem;
}

.client-contact-group {
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: linear-gradient(180deg, var(--panel) 0%, var(--accent-soft) 100%);
  padding: 0.75rem;
  display: grid;
  gap: 0.7rem;
  min-width: 0;
}

.client-contact-group h3 {
  margin: 0;
  font-size: 1rem;
}

.client-contact-list {
  display: block;
}

.client-contact-empty {
  color: var(--muted);
  font-size: 0.92rem;
}

.client-contact-table-wrap {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: var(--panel);
  overflow: auto;
}

.client-contact-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.client-contact-table thead th {
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: var(--accent-soft);
  border-bottom: 1px solid var(--line);
}

.client-contact-table th,
.client-contact-table td {
  white-space: normal;
  vertical-align: middle;
  padding: 0.46rem 0.5rem;
}

.client-contact-table[data-contact-table="address"] th:nth-child(2),
.client-contact-table[data-contact-table="address"] td:nth-child(2) {
  width: 60%;
}

.client-contact-row td {
  border-bottom: 1px solid var(--line);
}

.client-contact-table tbody tr:last-child td {
  border-bottom: none;
}

.client-contact-table .client-contact-empty {
  text-align: center;
  padding: 0.7rem 0.5rem;
}

.client-contact-row select,
.client-contact-row input,
.client-contact-row textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
}

.client-contact-row textarea {
  min-height: 2.6rem;
  resize: vertical;
}

.client-contact-address-cell {
  min-width: 0;
}

.client-address-fields {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(90px, 0.6fr) minmax(140px, 1fr) minmax(140px, 0.9fr);
  gap: 0.4rem;
  width: 100%;
}

.client-contact-primary-cell {
  width: 6.2rem;
  text-align: center;
}

.client-contact-primary-cell input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
}

.client-contact-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  white-space: nowrap;
}

#client-masterdata-form .client-contact-group {
  grid-column: 1 / -1;
}

.client-contact-icon-btn {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0.34rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: linear-gradient(180deg, var(--panel) 0%, var(--accent-soft) 100%);
  color: var(--accent);
}

.client-contact-save-btn {
  color: var(--accent);
}

.client-contact-remove-btn {
  color: #874040;
}

.client-contact-icon-btn:hover,
.client-contact-icon-btn:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.client-contact-icon-btn svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.date-input-inline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.date-input-inline input {
  flex: 1 1 auto;
  min-width: 0;
}

.date-picker-btn {
  width: 2.1rem;
  min-width: 2.1rem;
  padding: 0.42rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel) 0%, var(--accent-soft) 100%);
  color: var(--accent);
}

.date-picker-btn:hover,
.date-picker-btn:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.date-picker-btn svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

#client-masterdata-form .client-field-inline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

#client-masterdata-form .client-field-inline select {
  flex: 1 1 12rem;
  min-width: 0;
}

#client-masterdata-form .client-inline-edit-btn {
  width: 2.1rem;
  min-width: 2.1rem;
  padding: 0.42rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel) 0%, var(--accent-soft) 100%);
  color: var(--accent);
}

#client-masterdata-form .client-inline-edit-btn:hover,
#client-masterdata-form .client-inline-edit-btn:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
}

#client-masterdata-form .client-inline-edit-btn svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

#client-masterdata-form .client-name-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.client-option-edit-list {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.45rem;
}

.client-option-edit-empty {
  color: var(--muted);
  font-size: 0.92rem;
}

.client-option-edit-row {
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--panel);
  padding: 0.5rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.client-option-edit-row code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.82rem;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 0.45rem;
  padding: 0.08rem 0.35rem;
}

.client-option-default-badge {
  font-size: 0.76rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--accent-soft);
  padding: 0.08rem 0.45rem;
}

.booking-window-actions {
  margin-top: 0.9rem;
}

body:not(.mysite-body) .booking-calendar {
  margin-top: 0.9rem;
  border: 1px solid #cfe0d3;
  border-radius: 0.75rem;
  background: #fbfefb;
  overflow-x: auto;
}

body:not(.mysite-body) .booking-calendar-grid {
  min-width: 760px;
  display: grid;
  grid-template-columns: repeat(7, minmax(100px, 1fr));
}

body:not(.mysite-body) .booking-calendar-head {
  padding: 0.45rem 0.5rem;
  text-align: center;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid #d6e4d8;
  background: #f0f7f2;
}

body:not(.mysite-body) .booking-calendar-cell {
  min-height: 5.7rem;
  border-right: 1px solid #e2ece4;
  border-bottom: 1px solid #e2ece4;
}

body:not(.mysite-body) .booking-calendar-cell:nth-child(7n) {
  border-right: none;
}

body:not(.mysite-body) .booking-calendar-empty {
  background: #f8fbf8;
}

body:not(.mysite-body) .booking-day-btn {
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.5rem;
  display: grid;
  gap: 0.2rem;
  cursor: pointer;
}

body:not(.mysite-body) .booking-day-btn:hover {
  background: #eef7f0;
}

body:not(.mysite-body) .booking-day-btn.selected {
  background: #dff0e3;
  box-shadow: inset 0 0 0 2px #2f7558;
}

body:not(.mysite-body) .booking-day-number {
  font-weight: 700;
  color: #1d2b21;
}

body:not(.mysite-body) .booking-day-meta {
  font-size: 0.78rem;
  color: #4e6656;
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.calendar-toolbar-primary,
.calendar-toolbar-nav,
.calendar-toolbar-filters,
.calendar-toolbar-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.calendar-toolbar-meta {
  margin-left: auto;
  justify-content: flex-end;
}

.calendar-range-label {
  min-width: 11rem;
  text-align: right;
}

.calendar-view-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #ccdfd1;
  border-radius: 0.65rem;
  overflow: hidden;
  background: #f6fbf8;
}

.calendar-view-btn {
  border: none;
  border-right: 1px solid #ccdfd1;
  border-radius: 0;
  background: transparent;
  color: #335943;
  padding: 0.4rem 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
}

.calendar-view-btn:last-child {
  border-right: none;
}

.calendar-view-btn svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-view-btn:hover {
  background: #e7f2eb;
}

.calendar-view-btn:focus-visible {
  outline: 2px solid #2f7558;
  outline-offset: -2px;
  position: relative;
  z-index: 1;
}

.calendar-view-btn.active {
  background: #2f7558;
  color: #f3faf6;
}

.calendar-nav-btn {
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #b7ccbe;
  border-radius: 0.7rem;
  background: #f6fbf8;
  color: #1f4f3a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.calendar-nav-btn:hover,
.calendar-nav-btn:focus-visible {
  background: #e7f2eb;
  border-color: #86ac97;
}

.calendar-nav-btn svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-input-chip {
  display: grid;
  gap: 0.18rem;
  min-width: 10rem;
  padding: 0.45rem 0.65rem 0.5rem;
  border: 1px solid #ccdfd1;
  border-radius: 0.75rem;
  background: #fbfefc;
  color: var(--muted);
  font-size: 0.82rem;
}

.calendar-input-chip input {
  min-width: 0;
  min-height: 1.4rem;
  border: none;
  padding: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.calendar-input-chip input:focus {
  outline: none;
}

.calendar-settings-link {
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #b7ccbe;
  border-radius: 0.55rem;
  background: #f4fbf7;
  color: #1f4f3a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.calendar-settings-link:hover,
.calendar-settings-link:focus-visible {
  background: #e6f3eb;
  border-color: #86ac97;
}

.calendar-settings-link svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-view-root {
  margin-top: 0.85rem;
  border: 1px solid #d6e4d8;
  border-radius: 0.8rem;
  background: #fbfefb;
  padding: 0.55rem;
  overflow: auto;
}

.calendar-month-grid {
  min-width: 920px;
}

.calendar-appointment-list {
  margin-top: 0.2rem;
  display: grid;
  gap: 0.2rem;
}

.calendar-appointment-chip {
  display: block;
  border: 1px solid #dce9de;
  border-radius: 0.45rem;
  background: #eef7f1;
  color: #264636;
  font-size: 0.74rem;
  padding: 0.12rem 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-appointment-chip.empty {
  background: #f6faf7;
  color: #6d8373;
}

.calendar-appointment-more {
  font-size: 0.72rem;
  color: #4e6656;
}

.calendar-week-grid {
  min-width: 960px;
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: 0.55rem;
}

.calendar-week-day {
  border: 1px solid #d5e4d8;
  border-radius: 0.7rem;
  background: #ffffff;
  color: inherit;
  text-align: left;
  padding: 0.5rem;
  min-height: 12rem;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.45rem;
}

.calendar-week-day:hover {
  background: #f2f8f4;
}

.calendar-week-day.selected {
  border-color: #2f7558;
  box-shadow: inset 0 0 0 1px #2f7558;
  background: #e8f3ec;
}

.calendar-week-day-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: #3b5b48;
  font-size: 0.82rem;
}

.calendar-week-day-body {
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.calendar-appointment-row {
  border: 1px solid #dfeae2;
  border-radius: 0.5rem;
  background: #f8fcf9;
  padding: 0.3rem;
  display: grid;
  gap: 0.1rem;
  color: #294b38;
  font-size: 0.79rem;
}

.calendar-appointment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.calendar-inline-action-btn {
  padding: 0.32rem 0.58rem;
  font-size: 0.78rem;
}

.calendar-inline-action-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.calendar-appointment-time {
  font-weight: 700;
  color: #1f4030;
}

.calendar-day-list {
  display: grid;
  gap: 0.55rem;
}

.calendar-day-entry {
  border: 1px solid #d7e6db;
  border-radius: 0.7rem;
  background: #ffffff;
  padding: 0.65rem;
}

.calendar-day-entry header {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: center;
}

.calendar-day-entry p {
  margin: 0.35rem 0 0;
}

.calendar-day-empty {
  padding: 0.4rem;
}

#calendar-range-label {
  margin-left: auto;
}

.calendar-day-group-row td {
  padding: 0.35rem 0.2rem;
  border-bottom: none;
  white-space: normal;
}

.calendar-day-group {
  border: 1px solid #d7e6db;
  border-radius: 0.7rem;
  background: #ffffff;
  overflow: hidden;
}

.calendar-day-group-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  background: #f3f9f5;
}

.calendar-day-group-summary::-webkit-details-marker {
  display: none;
}

.calendar-day-group-summary::before {
  content: "▸";
  color: #3d5e4b;
  transition: transform 120ms ease;
}

.calendar-day-group[open] .calendar-day-group-summary::before {
  transform: rotate(90deg);
}

.calendar-day-group-title {
  font-weight: 700;
  color: #1f4030;
}

.calendar-day-group-count {
  color: #4b6756;
  font-size: 0.82rem;
}

.calendar-day-group-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 0.45rem 0.65rem 0;
}

.calendar-day-group-delete-btn {
  border: 1px solid #d9afaf;
  border-radius: 0.45rem;
  background: #fff6f6;
  color: #7d2222;
  padding: 0.34rem 0.58rem;
  font-size: 0.78rem;
}

.calendar-day-group-delete-btn:hover,
.calendar-day-group-delete-btn:focus-visible {
  border-color: #b97f7f;
  background: #ffecec;
}

.calendar-day-group-table {
  width: 100%;
  border-collapse: collapse;
}

.calendar-day-group-table td {
  white-space: nowrap;
}

.calendar-day-group-table tbody tr:last-child td {
  border-bottom: none;
}

.wizard-grid {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.wizard-grid-stack {
  grid-template-columns: 1fr;
}

.wizard-card {
  border: 1px solid #d6e4d8;
  border-radius: 0.55rem;
  background: #fafdfa;
  padding: 0.75rem;
}

.wizard-card h3 {
  margin: 0 0 0.45rem;
  font-size: 1rem;
}

.wizard-card input,
.wizard-card textarea {
  width: 100%;
}

.wizard-details {
  margin-top: 0.9rem;
}

.wizard-details summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
}

#wizard_backup_key,
#wizard_public_fingerprint,
#wizard_public_pem,
#wizard_private_pem {
  font-family: Consolas, "Courier New", monospace;
}

#patient_lock_recovery_input,
#patient_lock_recovery_output {
  font-family: Consolas, "Courier New", monospace;
}

#wizard_backup_key {
  font-size: 1rem;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.text-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration-color: currentColor;
}

.invoice-preview {
  min-height: 120px;
}

.preview-card {
  border: 1px solid #d2e2d5;
  border-radius: 0.8rem;
  background: #fdfefe;
  padding: 0.85rem;
}

.invoice-preview-card {
  padding: 1rem;
}

.invoice-preview-card.is-sample {
  border-style: dashed;
}

.preview-card h3 {
  margin: 0 0 0.45rem;
}

.preview-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.preview-head p {
  margin: 0.2rem 0;
}

.invoice-letterhead {
  border-bottom: 1px solid #d7e2cf;
  padding-bottom: 0.75rem;
}

.invoice-meta {
  text-align: right;
}

.invoice-meta h3 {
  margin: 0 0 0.45rem;
}

.invoice-recipient-block {
  margin-top: 0.8rem;
  border: 1px solid #d7e2cf;
  border-radius: 0.6rem;
  background: #fbfdfb;
  padding: 0.65rem;
}

.invoice-recipient-block p {
  margin: 0.2rem 0;
}

.invoice-recipient-title {
  color: var(--muted);
  font-size: 0.9rem;
}

.invoice-preview-actions {
  margin-top: 0.7rem;
}

.invoice-items-table {
  margin-top: 0.7rem;
}

.preview-totals {
  margin-top: 0.85rem;
  border-top: 1px solid #d7e2cf;
  padding-top: 0.65rem;
}

.preview-totals p {
  margin: 0.2rem 0;
}

.invoice-preview-note,
.invoice-bank-block,
.invoice-legal-block,
.invoice-preview-footer {
  margin-top: 0.8rem;
}

.invoice-preview-note p,
.invoice-bank-block p,
.invoice-legal-block p,
.invoice-preview-footer p {
  margin: 0.2rem 0;
}

.doc-template-toolbar {
  margin-top: 0.45rem;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.85rem;
}

.doc-template-toolbar-field {
  display: grid;
  gap: 0.28rem;
  color: var(--muted);
  font-size: 0.9rem;
  min-width: 0;
}

.doc-template-toolbar-field-wide {
  flex: 1 1 18rem;
}

.doc-template-toolbar-field-compact {
  flex: 0 1 11rem;
}

.doc-template-toolbar-control {
  width: 100%;
  min-height: 2.8rem;
  border: 1px solid #bfd3c5;
  border-radius: 0.8rem;
  padding: 0.58rem 0.8rem;
  background: linear-gradient(180deg, #ffffff 0%, #f4faf6 100%);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 2px rgba(25, 52, 36, 0.06);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.doc-template-toolbar-control:focus {
  outline: none;
  border-color: #6d9c84;
  box-shadow: 0 0 0 3px rgba(42, 111, 85, 0.12);
  background: #ffffff;
}

.doc-template-toolbar select.doc-template-toolbar-control {
  appearance: none;
  padding-right: 2.5rem;
  background-image:
    linear-gradient(45deg, transparent 50%, #456854 50%),
    linear-gradient(135deg, #456854 50%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f4faf6 100%);
  background-position:
    calc(100% - 1.15rem) calc(50% - 0.12rem),
    calc(100% - 0.8rem) calc(50% - 0.12rem),
    0 0;
  background-size:
    0.4rem 0.4rem,
    0.4rem 0.4rem,
    100% 100%;
  background-repeat: no-repeat;
}

select.doc-template-toolbar-control:open,
#doc-template-block-form select:open {
  border-radius: 0.9rem;
  box-shadow: 0 10px 24px rgba(25, 52, 36, 0.1);
}

.doc-template-toolbar input[type="number"].doc-template-toolbar-control {
  max-width: 8rem;
}

.doc-template-layout {
  margin-top: 0.85rem;
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(190px, 0.55fr);
  gap: 0.85rem;
}

.doc-template-canvas-wrap {
  min-width: 0;
}

.doc-template-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 210 / 297;
  border: 1px solid #cadaca;
  border-radius: 0.7rem;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  overflow: hidden;
  user-select: none;
  touch-action: none;
}

.doc-template-region {
  position: absolute;
  left: 0;
  width: 100%;
  border-top: 1px dashed rgba(61, 92, 66, 0.24);
  border-bottom: 1px dashed rgba(61, 92, 66, 0.24);
  pointer-events: none;
}

.doc-template-region span {
  position: absolute;
  left: 0.45rem;
  top: 0.2rem;
  font-size: 0.72rem;
  color: #5a6f5f;
  background: rgba(255, 255, 255, 0.82);
  padding: 0.05rem 0.28rem;
  border-radius: 0.35rem;
}

.doc-template-region-header {
  background: rgba(216, 236, 221, 0.35);
}

.doc-template-region-body {
  background: rgba(236, 244, 238, 0.46);
}

.doc-template-region-footer {
  background: rgba(228, 238, 231, 0.45);
}

.doc-template-block {
  position: absolute;
  border: 1px solid #9bb7a3;
  border-radius: 0.42rem;
  background: rgba(253, 255, 253, 0.94);
  box-shadow: 0 1px 2px rgba(36, 55, 42, 0.12);
  cursor: move;
  overflow: hidden;
}

.doc-template-block.is-selected {
  border-color: #2a6f55;
  box-shadow: 0 0 0 2px rgba(42, 111, 85, 0.22);
}

.doc-template-block img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.doc-template-logo-placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  color: #5d6d61;
  font-size: 0.85rem;
}

.doc-template-text-preview {
  padding: 0.3rem 0.38rem;
  font-size: 0.75rem;
  line-height: 1.25;
  color: #203129;
}

.doc-table-preview {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.67rem;
}

.doc-table-preview th,
.doc-table-preview td {
  border-bottom: 1px solid #d4dfd1;
  padding: 0.1rem 0.18rem;
}

.doc-table-preview-lines {
  padding: 0.2rem 0.32rem;
  font-size: 0.68rem;
  line-height: 1.3;
}

.doc-table-preview-lines p {
  margin: 0.08rem 0;
}

.doc-template-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.9rem;
  height: 0.9rem;
  border: 0;
  border-top: 1px solid #8ca491;
  border-left: 1px solid #8ca491;
  border-radius: 0.2rem 0 0.42rem 0;
  background: rgba(42, 111, 85, 0.35);
  cursor: nwse-resize;
  padding: 0;
}

.doc-template-sidebar {
  border: 1px solid #d2e2d5;
  border-radius: 0.65rem;
  background: #fbfdfb;
  padding: 0.7rem;
  width: 100%;
  max-width: 21rem;
  justify-self: end;
}

.doc-template-sidebar h3 {
  margin-top: 0;
}

#doc-template-block-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#doc-template-block-form .span-2 {
  grid-column: 1 / -1;
}

.doc-template-block-content-field {
  display: grid;
  gap: 0.4rem;
}

.doc-template-block-content-field button {
  justify-self: flex-start;
}

.doc-template-content-dialog {
  width: min(92vw, 760px);
}

.doc-template-content-dialog textarea {
  width: 100%;
  min-height: 22rem;
  margin-top: 0.45rem;
}

.doc-template-block-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}

.doc-template-block-chip {
  border: 1px solid #bcd0c0;
  border-radius: 999px;
  background: #f4faf5;
  color: #204232;
  padding: 0.25rem 0.55rem;
  font-size: 0.75rem;
}

.doc-template-block-chip.is-selected {
  background: #2a6f55;
  color: #f2fbf5;
  border-color: #2a6f55;
}

.doc-template-placeholders p {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: normal;
}

.anamnesis-editor-toolbar {
  margin-top: 0.45rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.anamnesis-template-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid #b7ccbe;
  border-radius: 0.6rem;
  background: #f4fbf7;
  color: #1f4f3a;
  text-decoration: none;
  font-weight: 600;
}

.anamnesis-template-link:hover,
.anamnesis-template-link:focus-visible {
  background: #e8f4ec;
  border-color: #95b6a0;
  color: #1c4534;
}

.anamnesis-description-field {
  padding: 0.8rem 0.9rem;
  border: 1px solid #d2e2d5;
  border-radius: 0.7rem;
  background: #fbfdfb;
}

.anamnesis-description-field-head {
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
}

.anamnesis-description-field-head > div {
  flex: 1 1 auto;
  min-width: 0;
}

.anamnesis-description-field-head strong {
  display: block;
}

.anamnesis-description-summary {
  margin: 0.3rem 0 0;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.anamnesis-description-modal {
  width: min(760px, 94vw);
}

.anamnesis-description-modal-field {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.8rem;
  color: var(--muted);
}

.anamnesis-description-modal-field textarea {
  width: 100%;
  min-height: 14rem;
  resize: vertical;
}

.anamnesis-editor-layout {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: minmax(360px, 1.4fr) minmax(280px, 1fr);
  gap: 0.85rem;
  align-items: start;
}

.anamnesis-editor-main,
.anamnesis-editor-preview {
  border: 1px solid #d2e2d5;
  border-radius: 0.7rem;
  background: #fbfdfb;
  padding: 0.75rem;
  min-width: 0;
}

.anamnesis-editor-main h3,
.anamnesis-editor-preview h3 {
  margin: 0;
}

.anamnesis-question-editor-list {
  margin-top: 0.65rem;
  display: grid;
  gap: 0.7rem;
}

.anamnesis-editor-empty {
  margin: 0;
  color: var(--muted);
}

.anamnesis-question-card {
  border: 1px solid #d7e4d9;
  border-radius: 0.65rem;
  background: #ffffff;
  padding: 0.65rem;
  display: grid;
  gap: 0.6rem;
}

.anamnesis-question-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.anamnesis-question-card-actions {
  gap: 0.4rem;
}

.anamnesis-question-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.65rem;
}

.anamnesis-question-grid label {
  display: grid;
  gap: 0.28rem;
}

.anamnesis-question-required {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #1f4f3a;
  font-weight: 600;
}

.anamnesis-question-required input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
}

.anamnesis-question-options {
  grid-column: 1 / -1;
}

.anamnesis-question-options.is-disabled {
  opacity: 0.7;
}

.anamnesis-question-options textarea[disabled] {
  background: #f5f8f5;
  color: #66796d;
}

.anamnesis-questionnaire-preview {
  margin-top: 0.65rem;
}

.anamnesis-preview-form {
  display: grid;
  gap: 0.6rem;
}

.anamnesis-preview-form h4 {
  margin: 0;
}

.anamnesis-preview-description {
  margin: 0;
  color: var(--muted);
}

.anamnesis-preview-form label {
  display: grid;
  gap: 0.28rem;
}

.anamnesis-preview-actions {
  margin-top: 0.2rem;
}

@media (max-width: 980px) {
  .doc-template-layout {
    grid-template-columns: 1fr;
  }

  .doc-template-sidebar {
    max-width: none;
    justify-self: stretch;
  }

  .doc-template-toolbar-field-wide,
  .doc-template-toolbar-field-compact {
    flex: 1 1 14rem;
  }

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

  .anamnesis-description-field-head {
    flex-direction: column;
    align-items: stretch;
  }

  .anamnesis-question-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .billing-period-row,
  .billing-meta-row,
  #doc-template-block-form {
    grid-template-columns: 1fr;
  }

  .invoice-meta {
    text-align: left;
  }

  .clients-toolbar-meta {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

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

  .icd10-import-field-compact {
    max-width: none;
  }

  .icd10-inline-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .icd10-search-toolbar {
    grid-template-columns: 1fr;
  }

  .icd10-search-query-field,
  .icd10-search-language-field,
  .icd10-search-toolbar button,
  .icd10-search-toolbar .status-chip {
    width: 100%;
  }

  .calendar-toolbar-primary,
  .calendar-toolbar-nav,
  .calendar-toolbar-filters,
  .calendar-toolbar-meta {
    width: 100%;
  }

  .calendar-toolbar-meta {
    margin-left: 0;
    justify-content: flex-start;
  }

  .calendar-range-label {
    min-width: 0;
    text-align: left;
  }

  .calendar-input-chip {
    flex: 1 1 12rem;
  }
}

.mysite-body {
  --mysite-bg-top: #f3f7f3;
  --mysite-bg-bottom: #dcebe2;
  --mysite-hero-from: #214f42;
  --mysite-hero-to: #3d7c67;
  --mysite-hero-text: #f3fbf6;
  --mysite-surface: #ffffff;
  --mysite-surface-border: #cfe1d2;
  --mysite-text: #17241c;
  --mysite-muted: #53675a;
  --mysite-accent: #2d6f58;
  --mysite-accent-soft: #dceee4;
  --mysite-button-text: #f4fbf7;
  --mysite-font-body: "Trebuchet MS", "Segoe UI", sans-serif;
  --mysite-font-heading: "Palatino Linotype", "Book Antiqua", serif;
  --mysite-hero-radius: 1.15rem;
  --mysite-section-radius: 0.95rem;
  --mysite-card-radius: 0.8rem;
  --mysite-button-radius: 999px;
  --mysite-hero-shadow: 0 16px 34px rgba(19, 43, 29, 0.2);
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(145deg, var(--mysite-bg-top) 0%, var(--mysite-bg-bottom) 100%);
  color: var(--mysite-text);
  font-family: var(--mysite-font-body);
}

.mysite-body[data-mysite-theme-profile="botanical"] {
  --mysite-font-body: "Trebuchet MS", "Segoe UI", sans-serif;
  --mysite-font-heading: "Palatino Linotype", "Book Antiqua", serif;
  --mysite-hero-radius: 1.2rem;
  --mysite-section-radius: 1rem;
  --mysite-card-radius: 0.85rem;
  --mysite-button-radius: 999px;
}

.mysite-body[data-mysite-theme-profile="editorial"] {
  --mysite-font-body: "Helvetica Neue", "Avenir Next", sans-serif;
  --mysite-font-heading: "Georgia", "Times New Roman", serif;
  --mysite-hero-radius: 0.45rem;
  --mysite-section-radius: 0.55rem;
  --mysite-card-radius: 0.45rem;
  --mysite-button-radius: 0.5rem;
  --mysite-hero-shadow: 0 12px 28px rgba(32, 32, 32, 0.12);
}

.mysite-body[data-mysite-theme-profile="horizon"] {
  --mysite-font-body: "Avenir Next", "Trebuchet MS", sans-serif;
  --mysite-font-heading: "Gill Sans", "Trebuchet MS", sans-serif;
  --mysite-hero-radius: 1.5rem;
  --mysite-section-radius: 1.25rem;
  --mysite-card-radius: 1rem;
  --mysite-button-radius: 999px;
}

.mysite-body[data-mysite-theme-profile="terracotta"] {
  --mysite-font-body: "Lucida Sans Unicode", "Trebuchet MS", sans-serif;
  --mysite-font-heading: "Palatino Linotype", "Book Antiqua", serif;
  --mysite-hero-radius: 1.05rem;
  --mysite-section-radius: 0.9rem;
  --mysite-card-radius: 0.78rem;
  --mysite-button-radius: 999px;
  --mysite-hero-shadow: 0 14px 30px rgba(73, 39, 24, 0.18);
}

.mysite-body[data-mysite-theme-profile="atelier"] {
  --mysite-font-body: "Helvetica Neue", "Trebuchet MS", sans-serif;
  --mysite-font-heading: "Baskerville", "Palatino Linotype", serif;
  --mysite-hero-radius: 0.65rem;
  --mysite-section-radius: 0.72rem;
  --mysite-card-radius: 0.58rem;
  --mysite-button-radius: 0.68rem;
  --mysite-hero-shadow: 0 14px 30px rgba(41, 32, 25, 0.16);
}

.mysite-shell {
  width: min(1100px, 92%);
  margin: 0 auto;
  padding: 1.5rem 0 2.5rem;
}

.mysite-hero {
  background: linear-gradient(135deg, var(--mysite-hero-from) 0%, var(--mysite-hero-to) 100%);
  color: var(--mysite-hero-text);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--mysite-hero-radius);
  padding: 1.4rem;
  box-shadow: var(--mysite-hero-shadow);
}

.mysite-hero h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-family: var(--mysite-font-heading);
  line-height: 1.05;
}

.mysite-hero p {
  margin: 0.5rem 0 0;
  color: var(--mysite-hero-text);
  opacity: 0.9;
}

.mysite-page-nav {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.mysite-page-btn {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: var(--mysite-hero-text);
  border-radius: var(--mysite-button-radius);
  padding: 0.4rem 0.85rem;
}

.mysite-page-btn.active {
  background: var(--mysite-surface);
  border-color: var(--mysite-surface);
  color: var(--mysite-text);
  box-shadow: 0 10px 20px rgba(18, 33, 26, 0.12);
}

.mysite-content {
  margin-top: 1.1rem;
}

.mysite-pricing {
  margin-top: 1.1rem;
  display: grid;
  gap: 1rem;
}

.mysite-pricing-head {
  display: grid;
  gap: 0.35rem;
}

.mysite-pricing-head h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-family: var(--mysite-font-heading);
  color: var(--mysite-text);
}

.mysite-pricing-head p {
  margin: 0;
  color: var(--mysite-muted);
}

.mysite-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.mysite-pricing-card {
  display: grid;
  gap: 0.9rem;
  padding: 1.1rem;
  border: 1px solid var(--mysite-surface-border);
  border-radius: calc(var(--mysite-card-radius) + 0.25rem);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--mysite-accent-soft) 88%, white 12%) 0%, transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, var(--mysite-surface) 100%);
  box-shadow: 0 14px 30px rgba(18, 33, 26, 0.08);
}

.mysite-pricing-card.is-featured {
  border-color: color-mix(in srgb, var(--mysite-accent) 55%, var(--mysite-surface-border) 45%);
  box-shadow: 0 20px 40px rgba(18, 33, 26, 0.14);
  transform: translateY(-0.2rem);
}

.mysite-pricing-card h3 {
  margin: 0;
  font-size: 1.3rem;
  font-family: var(--mysite-font-heading);
  color: var(--mysite-text);
}

.mysite-pricing-badge {
  margin: 0;
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 0.26rem 0.65rem;
  background: var(--mysite-accent-soft);
  color: var(--mysite-accent);
  font-size: 0.8rem;
  font-weight: 700;
}

.mysite-pricing-summary {
  margin: 0;
  color: var(--mysite-muted);
  line-height: 1.52;
}

.mysite-pricing-price {
  display: grid;
  gap: 0.12rem;
}

.mysite-pricing-price strong {
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  line-height: 1;
  color: var(--mysite-text);
}

.mysite-pricing-price span {
  color: var(--mysite-muted);
  font-weight: 600;
}

.mysite-pricing-facts {
  display: grid;
  gap: 0.65rem;
}

.mysite-pricing-facts div {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.78rem;
  border: 1px solid var(--mysite-surface-border);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.72);
}

.mysite-pricing-facts strong {
  color: var(--mysite-accent);
}

.mysite-pricing-facts span {
  color: var(--mysite-text);
  font-weight: 600;
}

.mysite-pricing-facts small {
  color: var(--mysite-muted);
  line-height: 1.45;
}

.mysite-pricing-actions {
  display: grid;
  gap: 0.55rem;
}

.mysite-paypal-btn,
.mysite-pricing-trainee-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  border-radius: 999px;
  border: 1px solid var(--mysite-accent);
  padding: 0.52rem 0.95rem;
  text-decoration: none;
  font-weight: 700;
}

.mysite-paypal-btn {
  background: linear-gradient(135deg, #ffc439 0%, #ffb347 100%);
  border-color: #d69a11;
  color: #1d2b54;
}

.mysite-paypal-btn.secondary {
  background: var(--mysite-accent);
  border-color: var(--mysite-accent);
  color: var(--mysite-button-text);
}

.mysite-paypal-btn.is-disabled {
  background: #eef2ef;
  border-color: var(--mysite-surface-border);
  color: var(--mysite-muted);
  cursor: not-allowed;
}

.mysite-pricing-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--mysite-surface-border);
  border-radius: var(--mysite-card-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, var(--mysite-accent-soft) 100%);
}

.mysite-pricing-note p {
  margin: 0;
  color: var(--mysite-text);
  line-height: 1.5;
}

.mysite-pricing-trainee-btn {
  flex: 0 0 auto;
  background: var(--mysite-surface);
  color: var(--mysite-accent);
}

.mysite-page {
  display: none;
}

.mysite-page.active {
  display: block;
}

[data-onepage-section] {
  scroll-margin-top: 1.35rem;
}

.mysite-page-onepager {
  display: grid;
  gap: 0;
}

.mysite-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, var(--mysite-surface) 100%);
  border: 1px solid var(--mysite-surface-border);
  border-radius: var(--mysite-section-radius);
  padding: 1rem;
  box-shadow: 0 10px 24px rgba(18, 33, 26, 0.08);
}

.mysite-section.has-bg-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--mysite-section-bg-image);
  background-size: cover;
  background-position: center;
  opacity: var(--mysite-section-bg-opacity, 0.25);
  pointer-events: none;
}

.mysite-section > * {
  position: relative;
  z-index: 1;
}

.mysite-section h2 {
  margin: 0 0 0.7rem;
  font-size: 1.3rem;
  color: var(--mysite-text);
  font-family: var(--mysite-font-heading);
}

.mysite-section-kicker {
  margin: 0 0 0.5rem;
  color: var(--mysite-accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mysite-section-transition {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  pointer-events: none;
}

.mysite-section-transition::before {
  content: "";
  display: block;
}

.mysite-section-transition.is-hairline::before {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--mysite-surface-border) 12%,
    var(--mysite-accent-soft) 50%,
    var(--mysite-surface-border) 88%,
    transparent 100%
  );
}

.mysite-section-transition.is-flow::before {
  width: min(13rem, 62%);
  height: max(10px, calc(100% - 10px));
  border: 2px solid transparent;
  border-bottom-color: color-mix(in srgb, var(--mysite-accent) 28%, var(--mysite-accent-soft) 72%);
  border-radius: 0 0 999px 999px;
  opacity: 0.95;
}

.mysite-section-transition.is-space-sm::before,
.mysite-section-transition.is-space-md::before,
.mysite-section-transition.is-space-lg::before {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, transparent 72%);
}

.mysite-section-spacer {
  display: flex;
  align-items: center;
}

.mysite-section-spacer::before {
  content: "";
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--mysite-surface-border) 12%,
    var(--mysite-accent-soft) 50%,
    var(--mysite-surface-border) 88%,
    transparent 100%
  );
}

.mysite-block-text {
  line-height: 1.58;
}

.mysite-block-text-content {
  line-height: 1.58;
}

.mysite-block-text-rich img {
  width: 100%;
  max-height: min(52vh, 520px);
  object-fit: cover;
  border-radius: var(--mysite-card-radius);
  border: 1px solid var(--mysite-surface-border);
  margin-top: 0.55rem;
}

.mysite-inline-image-list {
  margin-top: 0.6rem;
  display: grid;
  gap: 0.55rem;
}

.mysite-inline-image {
  margin: 0;
}

.mysite-inline-image img {
  width: 100%;
  max-height: min(52vh, 520px);
  object-fit: cover;
  border-radius: var(--mysite-card-radius);
  border: 1px solid var(--mysite-surface-border);
  opacity: var(--mysite-image-opacity, 1);
}

.mysite-block-faq h3,
.mysite-block-recommendations h3 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  color: var(--mysite-text);
  font-family: var(--mysite-font-heading);
}

.mysite-faq-list {
  display: grid;
  gap: 0.45rem;
}

.mysite-faq-item {
  border: 1px solid var(--mysite-surface-border);
  border-radius: var(--mysite-card-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, var(--mysite-accent-soft) 100%);
  padding: 0.45rem 0.6rem;
}

.mysite-faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--mysite-accent);
}

.mysite-faq-answer {
  margin-top: 0.4rem;
  line-height: 1.5;
  color: var(--mysite-text);
}

.mysite-block-recommendations {
  border: 1px solid var(--mysite-surface-border);
  border-radius: var(--mysite-card-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, var(--mysite-accent-soft) 100%);
  padding: 0.75rem;
}

.mysite-recommendations-track {
  position: relative;
}

.mysite-recommendation-slide {
  display: none;
}

.mysite-recommendation-slide.active {
  display: block;
}

.mysite-recommendation-slide blockquote {
  margin: 0;
  padding: 0;
  line-height: 1.58;
}

.mysite-recommendation-author {
  margin: 0.55rem 0 0;
  font-weight: 700;
  color: var(--mysite-accent);
}

.mysite-recommendation-subtitle {
  margin: 0.2rem 0 0;
  color: var(--mysite-muted);
  font-size: 0.92rem;
}

.mysite-recommendations-controls {
  margin-top: 0.65rem;
  display: flex;
  gap: 0.45rem;
}

.mysite-recommendations-controls button {
  border: 1px solid var(--mysite-surface-border);
  background: var(--mysite-accent-soft);
  color: var(--mysite-accent);
}

.mysite-block-flow {
  column-gap: 1rem;
}

.mysite-block-flow.columns-1 {
  column-count: 1;
}

.mysite-block-flow.columns-2 {
  column-count: 2;
}

.mysite-block-flow.columns-3 {
  column-count: 3;
}

.mysite-block-flow > .mysite-block {
  break-inside: avoid;
  margin: 0 0 0.85rem;
}

.mysite-block-image {
  margin: 0;
}

.mysite-block-image img {
  width: 100%;
  max-height: min(56vh, 560px);
  object-fit: cover;
  border-radius: var(--mysite-card-radius);
  border: 1px solid var(--mysite-surface-border);
  opacity: var(--mysite-image-opacity, 1);
}

.mysite-footer {
  margin-top: 1.2rem;
  padding: 1rem 0 0.5rem;
  border-top: 1px solid var(--mysite-surface-border);
}

.mysite-footer-brand {
  font-weight: 700;
  font-family: var(--mysite-font-heading);
}

.mysite-social-links {
  margin-top: 0.55rem;
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.mysite-social-links a {
  color: var(--mysite-accent);
}

.mysite-legal-link {
  margin-top: 0.65rem;
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.mysite-legal-link a,
.mysite-footer-page-link {
  color: var(--mysite-accent);
  font-weight: 600;
}

.mysite-footer-page-link {
  border: 1px solid var(--mysite-surface-border);
  background: var(--mysite-surface);
  border-radius: var(--mysite-button-radius);
  padding: 0.32rem 0.72rem;
}

.mysite-body .status-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.88rem;
  color: var(--mysite-accent);
  background: var(--mysite-accent-soft);
  border: 1px solid var(--mysite-surface-border);
}

.mysite-body .hint {
  color: var(--mysite-muted);
  margin-top: 0.8rem;
}

.mysite-booking {
  margin-top: 0.2rem;
}

.mysite-booking-controls {
  display: flex;
  align-items: end;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.mysite-booking-controls label {
  display: grid;
  gap: 0.35rem;
  color: var(--mysite-muted);
}

.mysite-booking-controls input,
.mysite-booking-form input,
.mysite-booking-form select,
.mysite-booking-form textarea {
  width: 100%;
  border: 1px solid var(--mysite-surface-border);
  border-radius: 0.75rem;
  padding: 0.52rem 0.62rem;
  background: rgba(255, 255, 255, 0.94);
  color: var(--mysite-text);
  font: inherit;
}

.mysite-booking-controls input::placeholder,
.mysite-booking-form input::placeholder,
.mysite-booking-form textarea::placeholder {
  color: var(--mysite-muted);
}

.mysite-booking-controls input:focus-visible,
.mysite-booking-form input:focus-visible,
.mysite-booking-form select:focus-visible,
.mysite-booking-form textarea:focus-visible {
  outline: 2px solid var(--mysite-accent);
  outline-offset: 1px;
}

.mysite-booking-controls button,
.mysite-booking-submit-btn {
  border: 1px solid var(--mysite-accent);
  border-radius: var(--mysite-button-radius);
  background: var(--mysite-accent);
  color: var(--mysite-button-text);
  padding: 0.45rem 0.82rem;
}

.mysite-booking-form {
  margin-top: 0.9rem;
}

.mysite-booking-form label {
  display: grid;
  gap: 0.35rem;
  color: var(--mysite-muted);
}

.mysite-booking-note {
  color: var(--mysite-muted);
}

.mysite-booking-form .mysite-booking-name-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.mysite-booking-form input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

.mysite-booking .booking-calendar {
  margin-top: 0.85rem;
  overflow-x: auto;
  border-color: var(--mysite-surface-border);
  background: rgba(255, 255, 255, 0.72);
}

.mysite-booking .booking-calendar-grid {
  min-width: 760px;
  display: grid;
  grid-template-columns: repeat(7, minmax(100px, 1fr));
}

.mysite-booking .booking-calendar-head {
  padding: 0.45rem 0.5rem;
  text-align: center;
  font-weight: 700;
  color: var(--mysite-muted);
  border-bottom: 1px solid var(--mysite-surface-border);
  background: var(--mysite-accent-soft);
}

.mysite-booking .booking-calendar-cell {
  min-height: 5.7rem;
  border-right: 1px solid var(--mysite-surface-border);
  border-bottom: 1px solid var(--mysite-surface-border);
}

.mysite-booking .booking-calendar-cell:nth-child(7n) {
  border-right: none;
}

.mysite-booking .booking-calendar-empty {
  background: rgba(255, 255, 255, 0.48);
}

.mysite-booking .booking-day-btn {
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.5rem;
  display: grid;
  gap: 0.2rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.mysite-booking .booking-day-btn:hover {
  background: var(--mysite-accent-soft);
}

.mysite-booking .booking-day-btn.selected {
  background: var(--mysite-accent-soft);
  box-shadow: inset 0 0 0 2px var(--mysite-accent);
}

.mysite-booking .booking-day-btn:focus-visible {
  outline: 2px solid var(--mysite-accent);
  outline-offset: -2px;
}

.mysite-booking .booking-day-number {
  color: var(--mysite-text);
}

.mysite-booking .booking-day-meta {
  color: var(--mysite-muted);
}

.mysite-booking-modal {
  width: min(760px, 94vw);
  max-height: 88vh;
  overflow: auto;
  border: 1px solid var(--mysite-surface-border);
  border-radius: var(--mysite-section-radius);
  background: var(--mysite-surface);
  padding: 1rem;
  box-shadow: 0 20px 44px rgba(19, 43, 29, 0.25);
}

.mysite-booking-modal::backdrop {
  background: rgba(15, 29, 21, 0.5);
}

.mysite-booking-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.mysite-booking-modal-head h3 {
  margin: 0;
  font-family: var(--mysite-font-heading);
}

.mysite-booking-modal-close-btn,
.mysite-booking-cancel-btn {
  border: 1px solid var(--mysite-surface-border);
  background: var(--mysite-accent-soft);
  color: var(--mysite-accent);
}

.mysite-booking-slot-picker {
  margin-top: 0.5rem;
}

.mysite-booking-slot-list {
  margin-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.mysite-booking-slot-btn {
  border: 1px solid var(--mysite-surface-border);
  border-radius: var(--mysite-button-radius);
  background: var(--mysite-surface);
  color: var(--mysite-accent);
  padding: 0.4rem 0.75rem;
}

.mysite-booking-slot-btn.selected {
  background: var(--mysite-accent);
  border-color: var(--mysite-accent);
  color: var(--mysite-button-text);
}

.mysite-booking-slot-btn-request {
  background: rgba(255, 248, 231, 0.92);
  border-color: #dcc58c;
  color: #7a5c16;
}

.mysite-booking-request-block {
  display: grid;
  gap: 0.55rem;
}

.mysite-booking-request-block p {
  margin: 0;
}

.mysite-booking-suggestion-block {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.2rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--mysite-surface-border);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.78);
}

.mysite-booking-suggestion-text {
  margin: 0;
}

.mysite-booking-request-btn,
.mysite-booking-suggestion-btn {
  border: 1px solid #d0b16b;
  background: #f7e8b9;
  color: #684d1b;
}

.mysite-booking-modal-message {
  margin: 0.65rem 0 0;
  border: 1px solid #e2ceaa;
  border-radius: 0.65rem;
  background: #fff6e7;
  color: #684d1b;
  padding: 0.6rem 0.7rem;
}

.mysite-booking-modal-actions {
  margin-top: 0.35rem;
}

.mysite-page-btn,
.mysite-recommendations-controls button,
.mysite-footer-page-link,
.mysite-booking-controls button,
.mysite-booking-request-btn,
.mysite-booking-modal-close-btn,
.mysite-booking-cancel-btn,
.mysite-booking-slot-btn,
.mysite-booking-suggestion-btn {
  font: inherit;
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.mysite-page-btn:hover,
.mysite-recommendations-controls button:hover,
.mysite-footer-page-link:hover,
.mysite-booking-controls button:hover,
.mysite-booking-request-btn:hover,
.mysite-booking-modal-close-btn:hover,
.mysite-booking-cancel-btn:hover,
.mysite-booking-slot-btn:hover,
.mysite-booking-suggestion-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(18, 33, 26, 0.12);
}

.legal-page {
  display: grid;
  gap: 1rem;
}

.legal-page h3 {
  margin: 0.7rem 0 0.35rem;
  font-size: 1.05rem;
}

.legal-page p {
  margin: 0.25rem 0 0.65rem;
  line-height: 1.5;
}

.mysite-designer-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 1rem;
}

.mysite-designer-sidebar,
.mysite-designer-main {
  min-width: 0;
}

.mysite-pages-list {
  display: grid;
  gap: 0.9rem;
  margin-bottom: 0.8rem;
}

.mysite-pages-group {
  border: 1px solid #d2e3d5;
  border-radius: 0.9rem;
  background: linear-gradient(180deg, #fcfffd 0%, #f4faf6 100%);
  padding: 0.75rem;
  display: grid;
  gap: 0.7rem;
}

.mysite-pages-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #dce9de;
}

.mysite-pages-group-head h3 {
  margin: 0;
  font-size: 1rem;
}

.mysite-pages-group-head p {
  margin: 0.18rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.mysite-pages-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  background: #e2f1e7;
  border: 1px solid #c6dccd;
  color: #1d5a42;
  font-weight: 700;
}

.mysite-pages-group-list {
  display: grid;
  gap: 0.65rem;
}

.mysite-pages-empty {
  border: 1px dashed #c9dbce;
  border-radius: 0.75rem;
  background: #fbfefc;
  color: var(--muted);
  padding: 0.8rem;
  font-size: 0.94rem;
}

.mysite-page-item {
  display: grid;
  gap: 0.6rem;
  align-items: stretch;
  border: 1px solid #d4e4d6;
  border-radius: 0.8rem;
  background: #ffffff;
  padding: 0.7rem;
  box-shadow: 0 6px 18px rgba(18, 44, 30, 0.06);
}

.mysite-page-item-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.6rem;
  gap: 0.6rem;
  align-items: start;
}

.mysite-page-select-btn {
  display: grid;
  gap: 0.2rem;
  justify-items: start;
  width: 100%;
  border: 1px solid #d6e4d8;
  background: #f8fcf9;
  color: var(--text);
  padding: 0.7rem 0.78rem;
  border-radius: 0.75rem;
}

.mysite-page-select-btn:hover,
.mysite-page-select-btn:focus-visible {
  background: #eef7f0;
  border-color: #b5ceb9;
}

.mysite-page-item-title {
  font-weight: 700;
  font-size: 1rem;
}

.mysite-page-item-meta {
  color: var(--muted);
  font-size: 0.87rem;
  text-align: left;
}

.mysite-page-item-toggle-btn {
  width: 2.6rem;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border-color: #b9d0be;
  background: rgba(243, 251, 246, 0.82);
  color: #1f4f3a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.78;
}

.mysite-page-item-toggle-btn:hover,
.mysite-page-item-toggle-btn:focus-visible {
  opacity: 1;
}

.mysite-page-item-toggle-icon {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.72;
  transition:
    transform 160ms ease,
    opacity 160ms ease;
}

.mysite-page-item-toggle-btn[aria-expanded="true"] .mysite-page-item-toggle-icon {
  transform: rotate(180deg);
  opacity: 1;
}

.mysite-page-item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.mysite-page-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.mysite-page-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text);
}

.mysite-page-item.active {
  border-color: #9fc5aa;
  background: linear-gradient(180deg, #ffffff 0%, #f1faf4 100%);
  box-shadow: 0 10px 24px rgba(32, 77, 58, 0.1);
}

.mysite-page-item.is-open {
  border-color: #b7d2bf;
}

.mysite-page-item-panel[hidden] {
  display: none !important;
}

.mysite-page-item-panel {
  padding-top: 0.15rem;
}

.mysite-page-placement-badge,
.mysite-page-visibility-badge,
.mysite-page-active-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.22rem 0.62rem;
  font-size: 0.8rem;
  border: 1px solid transparent;
}

.mysite-page-placement-badge.is-onepager {
  background: #eef4ff;
  border-color: #d4def7;
  color: #2f4d84;
}

.mysite-page-placement-badge.is-page {
  background: #f5efe6;
  border-color: #dfcfb6;
  color: #7b5a28;
}

.mysite-page-visibility-badge.is-visible {
  background: #e6f3eb;
  border-color: #c8dece;
  color: #1d5a42;
}

.mysite-page-visibility-badge.is-hidden {
  background: #f6efe4;
  border-color: #dfcfb6;
  color: #7b5a28;
}

.mysite-page-active-badge {
  background: #edf3ff;
  border-color: #cfdcf8;
  color: #294b85;
}

.mysite-page-editor {
  display: grid;
  gap: 0.85rem;
}

.mysite-page-editor input,
.mysite-page-editor select,
.mysite-page-editor textarea {
  width: 100%;
}

.mysite-page-editor textarea {
  min-height: 7.2rem;
  resize: vertical;
}

.mysite-page-editor-actions {
  align-items: center;
  gap: 0.55rem;
}

.mysite-page-editor-actions-spacer {
  flex: 1 1 auto;
}

.mysite-page-editor-toggle-btn,
.mysite-section-toggle-btn {
  width: 2.55rem;
  min-width: 2.55rem;
  height: 2.55rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: #b9d0be;
  background: rgba(243, 251, 246, 0.82);
  color: #1f4f3a;
}

.mysite-page-editor-toggle-btn svg,
.mysite-section-toggle-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease, opacity 160ms ease;
}

.mysite-section-toggle-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.mysite-rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}

.mysite-rich-toolbar button {
  border: 1px solid #b9d0be;
  background: #f4fbf7;
  color: #1f4f3a;
  padding: 0.34rem 0.56rem;
}

.mysite-rich-editor {
  border: 1px solid #c8dacd;
  border-radius: 0.6rem;
  background: #ffffff;
  min-height: 8.6rem;
  padding: 0.6rem;
  line-height: 1.5;
}

.mysite-rich-editor:focus {
  outline: 2px solid #79ad8f;
  outline-offset: 1px;
}

.mysite-rich-editor img {
  max-width: 100%;
  border-radius: 0.6rem;
  border: 1px solid #d4e4d7;
  margin: 0.35rem 0;
}

.mysite-page-card,
.mysite-section-card,
.mysite-block-card {
  border: 1px solid #d4e4d6;
  border-radius: 0.75rem;
  background: #fcfefc;
  padding: 0.8rem;
}

.mysite-section-head {
  align-items: center;
}

.mysite-section-meta {
  color: var(--muted);
  font-size: 0.9rem;
}

.mysite-section-card.is-collapsed {
  background: #f8fcf9;
}

.mysite-section-body[hidden] {
  display: none !important;
}

.mysite-sections,
.mysite-block-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.8rem;
}

.mysite-list-editor {
  margin-top: 0.55rem;
  display: grid;
  gap: 0.6rem;
}

.mysite-list-item {
  border: 1px solid #d6e5d8;
  border-radius: 0.65rem;
  background: #ffffff;
  padding: 0.55rem;
}

.mysite-block-card input[type="range"],
.mysite-list-item input[type="range"] {
  width: 100%;
}

.mysite-dropzone {
  margin-top: 0.45rem;
  border: 2px dashed #a9c5b3;
  border-radius: 0.7rem;
  background: #f7fcf9;
  color: #2f5642;
  padding: 0.55rem 0.65rem;
  text-align: center;
}

.mysite-dropzone.drag-over {
  border-color: #2a6f55;
  background: #e9f6ef;
}

.mysite-social-list {
  display: grid;
  gap: 0.6rem;
}

.mysite-social-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(260px, 2fr) auto;
  gap: 0.6rem;
  align-items: end;
}

.mysite-favicon-tools {
  margin-top: 0.4rem;
  align-items: center;
}

.mysite-favicon-feedback {
  flex: 1 1 15rem;
  min-width: 12rem;
}

.mysite-favicon-generator-grid {
  margin-top: 0.1rem;
}

.mysite-favicon-generator-grid input[type="color"] {
  min-height: 2.75rem;
  padding: 0.25rem;
}

.mysite-favicon-tools input[type="file"] {
  max-width: 17rem;
}

.mysite-favicon-preview-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  margin-left: auto;
}

.mysite-favicon-preview-wrap img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border: 1px solid #c9dacd;
  border-radius: 0.45rem;
  background: #ffffff;
}

.mysite-designer-accordion {
  margin-top: 1rem;
}

.mysite-designer-accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  list-style: none;
}

.mysite-designer-accordion > summary::-webkit-details-marker {
  display: none;
}

.mysite-designer-accordion > summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: #e5efe6;
  color: #1f3a2b;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.mysite-designer-accordion[open] > summary::after {
  content: "-";
}

.mysite-designer-accordion-content {
  display: grid;
  gap: 0.9rem;
  margin-top: 0.8rem;
}

.mysite-theme-profile-list {
  margin: 0.8rem 0 0.65rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.mysite-theme-profile-card {
  display: grid;
  gap: 0.65rem;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: linear-gradient(180deg, var(--panel) 0%, var(--accent-soft) 100%);
  color: var(--text);
  padding: 0.85rem;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.mysite-theme-profile-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(20, 30, 24, 0.08);
}

.mysite-theme-profile-card.active,
.mysite-theme-profile-card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(79, 125, 104, 0.16);
}

.mysite-theme-profile-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mysite-theme-profile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.mysite-theme-profile-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  padding: 0.18rem 0.5rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

.mysite-theme-profile-card.active .mysite-theme-profile-badge,
.mysite-theme-profile-card.is-active .mysite-theme-profile-badge {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.mysite-theme-profile-copy {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.mysite-theme-profile-swatches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
}

.mysite-theme-profile-swatches span {
  display: block;
  width: 100%;
  height: 1.2rem;
  border: 1px solid rgba(24, 33, 27, 0.08);
  border-radius: 999px;
}

.mysite-theme-custom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
}

.mysite-theme-font-grid {
  margin: 0 0 0.85rem;
}

.mysite-theme-font-preview {
  display: grid;
  gap: 0.9rem;
  margin: 0.85rem 0;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--panel);
  padding: 0.9rem 1rem;
}

.mysite-theme-font-preview-current {
  display: grid;
  gap: 0.35rem;
}

.mysite-theme-font-preview strong,
.mysite-theme-font-preview p {
  margin: 0;
}

.mysite-theme-font-preview strong {
  font-size: 1.3rem;
  line-height: 1.1;
  color: var(--text);
}

.mysite-theme-font-preview p {
  color: var(--muted);
  line-height: 1.5;
}

.mysite-theme-font-groups {
  display: grid;
  gap: 1rem;
}

.mysite-theme-font-group {
  display: grid;
  gap: 0.65rem;
}

.mysite-pricing-plan-list {
  display: grid;
  gap: 0.85rem;
}

.mysite-pricing-plan-card {
  display: grid;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: linear-gradient(180deg, #ffffff 0%, #f4faf6 100%);
}

.mysite-pricing-plan-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.mysite-pricing-plan-card-head > div {
  display: grid;
  gap: 0.2rem;
}

.mysite-theme-font-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.mysite-theme-font-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.75rem;
}

.mysite-theme-font-card {
  display: grid;
  gap: 0.28rem;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: linear-gradient(180deg, var(--panel) 0%, var(--accent-soft) 100%);
  color: var(--text);
  padding: 0.8rem;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.mysite-theme-font-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(20, 30, 24, 0.08);
}

.mysite-theme-font-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(79, 125, 104, 0.16);
}

.mysite-theme-font-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mysite-theme-font-card-label {
  color: var(--text);
  font-weight: 700;
}

.mysite-theme-font-card-role {
  color: var(--muted);
  font-size: 0.8rem;
}

.mysite-theme-font-card-sample {
  color: var(--text);
  line-height: 1.5;
  font-size: 1rem;
}

.mysite-theme-font-card-sample.is-heading {
  font-size: 1.35rem;
  line-height: 1.15;
}

.mysite-theme-color-field {
  display: grid;
  gap: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--panel);
  padding: 0.75rem;
}

.mysite-theme-color-field span {
  color: var(--text);
  font-weight: 600;
}

.mysite-theme-color-field input[type="color"] {
  width: 100%;
  min-height: 2.65rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: var(--panel);
  padding: 0.15rem;
  cursor: pointer;
}

.mysite-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
}

.mysite-checkbox-row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
}

.mysite-note-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid #b8cec0;
  border-radius: 0.6rem;
  background: #f2faf5;
  color: #1f4f3a;
}

.mysite-note-btn:hover {
  background: #e1f1e8;
}

.mysite-note-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mysite-change-request-list {
  display: grid;
  gap: 0.65rem;
}

.mysite-change-request-item {
  border: 1px solid #d4e4d6;
  border-radius: 0.75rem;
  background: #fcfefc;
  padding: 0.7rem 0.8rem;
}

.mysite-change-request-item p {
  margin: 0.35rem 0 0;
}

.mysite-change-request-dialog {
  border: 1px solid #b7d0bc;
  border-radius: 0.85rem;
  background: #fbfffc;
  padding: 0.85rem;
  width: min(640px, 96vw);
}

.mysite-change-request-dialog::backdrop {
  background: rgba(19, 40, 28, 0.45);
}

.mysite-change-request-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.mysite-change-request-dialog-head h3 {
  margin: 0;
}

.mysite-change-request-dialog textarea {
  width: 100%;
  resize: vertical;
}

.mysite-change-request-dialog-close-btn {
  border: 1px solid #b2c7b8;
  background: #eff7f2;
  color: #204d3a;
}

.danger-btn {
  border-color: #7e2f2f;
  background: #a44646;
}

.drop-zone {
  margin-top: 1rem;
  border: 2px dashed #8cb39a;
  border-radius: 0.9rem;
  background: #f5fbf7;
  padding: 1.6rem 1rem;
  text-align: center;
  cursor: pointer;
}

.drop-zone.drag-over {
  border-color: #1f6b4f;
  background: #e7f5ed;
}

.transcription-recorder {
  margin-top: 0.85rem;
  border: 1px solid #cfe0d3;
  border-radius: 0.8rem;
  background: #fbfefc;
  padding: 0.75rem;
}

.transcription-recorder h3 {
  margin: 0 0 0.55rem;
}

.recorder-timer {
  font-family: Consolas, "Courier New", monospace;
  font-size: 1.05rem;
  color: #24533f;
  letter-spacing: 0.03em;
}

#recording-preview {
  width: 100%;
  margin-top: 0.55rem;
}

.queue-list,
.results-list {
  margin: 0.8rem 0 0;
  padding-left: 1.1rem;
}

.queue-list {
  list-style: none;
  padding-left: 0;
}

.results-list {
  padding-left: 0;
}

.queue-item {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 0.35rem;
  padding: 0.8rem;
  border: 1px solid #d7e3da;
  border-radius: 0.8rem;
  background: #fbfdfc;
}

.queue-item-details {
  display: grid;
  gap: 0.35rem;
  flex: 1;
}

.queue-item-title {
  font-weight: 600;
  color: #173222;
}

.queue-item-phase {
  color: #325443;
  font-size: 0.92rem;
}

.queue-progress-group {
  display: grid;
  gap: 0.3rem;
}

.queue-progress-row,
.transcript-progress-row {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  font-size: 0.83rem;
  color: #4d6356;
}

.queue-progress-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.queue-progress-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-size: 0.74rem;
  font-weight: 700;
}

.queue-progress-status.is-waiting {
  background: #eceff1;
  color: #32414a;
}

.queue-progress-status.is-preparing {
  background: #fff1dc;
  color: #7a5215;
}

.queue-progress-status.is-running {
  background: #e7edf8;
  color: #1f3e68;
}

.queue-progress-status.is-done {
  background: #d8f1e1;
  color: #134f35;
}

.queue-progress-status.is-failed {
  background: #f7d7d7;
  color: #7a1f1f;
}

.queue-progress-bar {
  position: relative;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e9e4;
}

.queue-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3d8a61 0%, #78b98e 100%);
  transition: width 0.2s ease;
}

.queue-progress-bar.is-idle span {
  background: linear-gradient(90deg, #c9d4cd 0%, #dde4df 100%);
}

.queue-progress-bar.is-preparing span {
  background: linear-gradient(90deg, #d79a2b 0%, #f2c979 100%);
}

.queue-progress-bar.is-processing span {
  background: linear-gradient(90deg, #3b6ba5 0%, #8cb3e5 100%);
}

.queue-progress-bar.is-failed span {
  background: linear-gradient(90deg, #a83d3d 0%, #e48c8c 100%);
}

.queue-progress-note,
.transcript-progress-note {
  color: #51685c;
}

.queue-progress-note.is-upload-note {
  color: #48614f;
}

.queue-progress-note.is-processing-note {
  color: #38577a;
}

.queue-item-lock {
  min-width: 4.7rem;
  text-align: center;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: #edf2f8;
  color: #31547c;
  font-size: 0.8rem;
  font-weight: 700;
}

.queue-item-error {
  color: #8a2d2d;
}

.result-card {
  border: 1px solid #d2e2d5;
  border-radius: 0.8rem;
  background: #fdfefe;
  padding: 0.85rem;
  margin-bottom: 0.7rem;
}

.result-card h3 {
  margin: 0 0 0.35rem;
}

.transcript-card {
  background: #ffffff;
}

.transcript-card-head {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  align-items: flex-start;
}

.transcript-meta-line {
  margin: 0.2rem 0 0;
  color: #4f6357;
  font-size: 0.9rem;
}

.transcript-meta-line span {
  margin: 0 0.35rem;
  color: #8aa091;
}

.transcript-status-badge {
  border-radius: 999px;
  padding: 0.24rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.transcript-status-badge.is-done {
  background: #d8f1e1;
  color: #134f35;
}

.transcript-status-badge.is-failed {
  background: #f7d7d7;
  color: #7a1f1f;
}

.transcript-status-badge.is-processing,
.transcript-status-badge.is-uploaded {
  background: #e7edf8;
  color: #1f3e68;
}

.transcript-status-badge.is-default {
  background: #eceff1;
  color: #2f3a43;
}

.transcript-progress-block {
  margin-top: 0.6rem;
  display: grid;
  gap: 0.3rem;
}

.transcript-progress-bar {
  margin-top: 0;
}

.transcript-audio-preview {
  width: 100%;
  margin-top: 0.55rem;
}

.transcript-audio-tools {
  margin-top: 0.55rem;
}

.transcript-audio-hint {
  color: #4f6458;
}

.transcript-content {
  margin: 0.6rem 0 0;
  padding: 0.75rem;
  border: 1px solid #d4e1d6;
  border-radius: 0.7rem;
  background: #f9fcfa;
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
  color: #13241b;
  max-height: 28rem;
  overflow: auto;
}

.transcript-empty-state {
  margin-top: 0.6rem;
  padding: 0.7rem;
  border: 1px dashed #d4e1d6;
  border-radius: 0.7rem;
  background: #f9fcfa;
  color: #3f5347;
}

.transcript-derived-block {
  margin-top: 0.65rem;
}

.transcript-derived-block h4 {
  margin: 0 0 0.25rem;
  font-size: 0.93rem;
  color: #244936;
}

.transcript-derived-content {
  background: #f3faf6;
  border-color: #cde0d2;
}

.transcript-summary-content {
  background: #f6f8fd;
  border-color: #d3dbee;
}

.transcript-dialogue-block {
  margin-top: 0.75rem;
}

.transcript-dialogue-option {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.35rem 0.1rem;
  color: #244936;
  font-size: 0.92rem;
}

.transcript-dialogue-option input {
  margin: 0;
}

.transcript-dialogue-board {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.45rem;
}

.transcript-dialogue-turn {
  display: flex;
  width: 100%;
}

.transcript-dialogue-turn.is-left {
  justify-content: flex-start;
}

.transcript-dialogue-turn.is-right {
  justify-content: flex-end;
}

.transcript-dialogue-bubble {
  display: grid;
  gap: 0.3rem;
  max-width: min(78%, 42rem);
  padding: 0.75rem 0.85rem;
  border: 1px solid #d4e1d6;
  border-radius: 1rem;
  background: #f7fbf8;
  box-shadow: 0 8px 18px rgba(24, 54, 38, 0.05);
}

.transcript-dialogue-turn.is-right .transcript-dialogue-bubble {
  background: #eef5ff;
  border-color: #cbd9f0;
}

.transcript-dialogue-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.transcript-dialogue-speaker {
  font-size: 0.8rem;
  font-weight: 700;
  color: #29523d;
}

.transcript-dialogue-turn.is-right .transcript-dialogue-speaker {
  color: #27496f;
}

.transcript-dialogue-emotion {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.08rem 0.48rem;
  border-radius: 999px;
  border: 1px solid #d6dfd9;
  background: #f6faf7;
  color: #345246;
  font-size: 0.72rem;
  font-weight: 700;
}

.transcript-dialogue-emotion.is-laugh {
  background: #fff3d8;
  border-color: #ead49a;
  color: #855500;
}

.transcript-dialogue-emotion.is-cry {
  background: #e8f0ff;
  border-color: #c3d4f3;
  color: #294a74;
}

.transcript-dialogue-emotion.is-tense {
  background: #fde8e2;
  border-color: #e8c2b7;
  color: #7a3e2b;
}

.transcript-dialogue-emotion.is-relief {
  background: #e3f6ea;
  border-color: #bfddcb;
  color: #24573a;
}

.transcript-dialogue-emotion.is-neutral {
  background: #f1f3f5;
  border-color: #d9dee4;
  color: #44515f;
}

.transcript-dialogue-text {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.5;
  color: #14241b;
}

.transcript-dialogue-hint {
  margin: 0.45rem 0 0;
  font-size: 0.85rem;
  color: #51655a;
}

.transcript-actions {
  margin-top: 0.6rem;
}

.transcript-range-tools {
  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px dashed #d4e1d6;
}

.transcript-range-inputs {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: end;
}

.transcript-range-inputs label {
  display: grid;
  gap: 0.2rem;
  min-width: 140px;
  color: #355246;
  font-size: 0.88rem;
}

.transcript-range-inputs input {
  min-width: 0;
}

.transcript-range-hint {
  display: block;
  margin-top: 0.35rem;
  color: #5a6c61;
}

.progress-note-audio-cell {
  min-width: 220px;
}

.progress-note-audio-player {
  width: min(240px, 100%);
}

.progress-note-audio-meta {
  display: block;
  margin-top: 0.3rem;
  color: #4f6458;
}

.tasks-action-bar {
  margin-top: 0.6rem;
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.tasks-action-btn {
  position: relative;
  width: min(220px, 45vw);
  min-width: 160px;
  height: 130px;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: linear-gradient(165deg, var(--panel) 0%, var(--accent-soft) 100%);
  color: var(--accent);
  display: grid;
  place-items: center;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.tasks-action-btn:hover,
.tasks-action-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(27, 59, 43, 0.16);
  border-color: var(--accent);
}

.tasks-action-btn svg {
  width: 74px;
  height: 74px;
}

.tasks-icon-stroke {
  fill: var(--panel);
  stroke: var(--accent);
  stroke-width: 2.6;
}

.tasks-icon-line {
  stroke: var(--muted);
  stroke-linecap: round;
  stroke-width: 2.6;
}

.tasks-icon-accent {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.6;
}

.tasks-icon-plus-ring {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2.6;
}

.tasks-icon-plus {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-width: 2.8;
}

.tasks-icon-search-core {
  fill: var(--panel);
  stroke: none;
}

.tasks-action-tooltip {
  position: absolute;
  left: 50%;
  bottom: 0.55rem;
  transform: translate(-50%, 6px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  font-size: 0.82rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--accent);
  padding: 0.2rem 0.55rem;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.tasks-action-btn:hover .tasks-action-tooltip,
.tasks-action-btn:focus-visible .tasks-action-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.tasks-modal {
  width: min(760px, 94vw);
  max-height: 88vh;
  overflow: auto;
  border: 1px solid #cfe1d2;
  border-radius: 1rem;
  background: #ffffff;
  padding: 1rem;
  box-shadow: 0 20px 44px rgba(19, 43, 29, 0.25);
}

.tasks-modal::backdrop {
  background: rgba(15, 29, 21, 0.5);
}

.tasks-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
}

.tasks-modal-head h3 {
  margin: 0;
}

.tasks-modal-close-btn,
.tasks-modal-cancel-btn {
  border: 1px solid #b7ccbe;
  background: #f4fbf7;
  color: #1f4f3a;
}

.tasks-modal-actions {
  margin-top: 0.75rem;
}

.workspace-onboarding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem 1rem;
  padding: 0.95rem 1rem;
  border: 1px solid #cfe1d2;
  border-radius: 0.9rem;
  background: #f8fcf9;
}

.workspace-recovery-key-modal {
  width: min(760px, 94vw);
}

.workspace-recovery-key-alert {
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid #e3b46a;
  border-radius: 0.9rem;
  background: #fff6e8;
  color: #6a4212;
  line-height: 1.45;
}

.workspace-recovery-key-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.workspace-recovery-key-meta-card {
  display: grid;
  gap: 0.18rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid #cfe1d2;
  border-radius: 0.8rem;
  background: #f8fcf9;
}

.workspace-recovery-key-meta-card strong {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.workspace-recovery-key-value {
  margin-top: 0.9rem;
  padding: 1rem;
  border-radius: 0.9rem;
  border: 1px solid #cfe1d2;
  background: #f3faf5;
  color: #143628;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.12em;
  word-break: break-word;
}

.users-recovery-btn.is-pending {
  border-color: #d18c2d;
  background: #fff4e6;
  color: #8a5408;
}

.users-billing-switch-wrap {
  margin-left: 0.25rem;
}

.users-billing-switch-wrap .core-billing-switch-label {
  font-size: 0.78rem;
}

.users-billing-switch-wrap .core-billing-switch button {
  font-size: 0.82rem;
  padding: 0.32rem 0.58rem;
}

.view-history-modal {
  width: min(680px, 94vw);
}

.change-request-modal {
  width: min(720px, 94vw);
}

.change-request-source-card {
  display: grid;
  gap: 0.18rem;
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid #cfe1d2;
  border-radius: 0.9rem;
  background: #f8fcf9;
}

.change-request-source-label {
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.change-request-source-title {
  font-size: 1rem;
}

.change-request-source-subtitle {
  color: var(--muted);
  word-break: break-word;
}

.change-request-field {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.9rem;
}

.view-history-list {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.9rem;
}

.view-history-empty {
  margin: 0;
  padding: 1rem;
  border: 1px dashed #cbdccf;
  border-radius: 0.85rem;
  color: var(--muted);
  background: #f8fcf9;
}

.view-history-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  border: 1px solid #cfe1d2;
  border-radius: 0.9rem;
  background: #f8fcf9;
  color: inherit;
  padding: 0.85rem 0.95rem;
}

.view-history-item:hover,
.view-history-item:focus-visible {
  border-color: var(--accent);
  background: #f0f8f3;
}

.view-history-item-main {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.view-history-item-title {
  font-weight: 700;
}

.view-history-item-subtitle,
.view-history-item-time {
  color: var(--muted);
  font-size: 0.88rem;
}

.view-history-item-subtitle {
  word-break: break-word;
}

.view-history-item-time {
  white-space: nowrap;
}

.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  padding: 0.45rem 0.8rem;
  border-color: var(--line);
  background: linear-gradient(180deg, var(--panel) 0%, var(--accent-soft) 100%);
  color: var(--accent);
}

.secondary-btn:hover,
.secondary-btn:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.video-call-panel {
  margin-top: 1rem;
}

.video-call-controls-grid,
.video-call-invite-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.video-call-controls-grid label,
.video-call-invite-grid label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
}

.video-call-invite-grid .span-2 {
  grid-column: span 2;
}

.video-call-controls-grid input,
.video-call-controls-grid select,
.video-call-invite-grid input {
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  padding: 0.52rem 0.62rem;
  background: #ffffff;
}

.video-call-action-row {
  margin-top: 0.7rem;
}

.video-participants-grid {
  display: grid;
  grid-template-columns: minmax(250px, 340px) minmax(0, 1fr);
  gap: 0.9rem;
}

.video-remote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
}

.video-tile {
  border: 1px solid #bfd6c5;
  border-radius: 0.9rem;
  background: linear-gradient(165deg, #f7fcf8 0%, #edf6ef 100%);
  padding: 0.65rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.video-tile header {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.45rem;
}

.video-tile video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #10251a;
  border-radius: 0.65rem;
  border: 1px solid #264c39;
}

.public-onboarding-section {
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-color, #d3dbe3);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 252, 0.96));
}

.public-onboarding-section h2,
.public-onboarding-section h3 {
  margin: 0 0 0.55rem;
}

.public-onboarding-list {
  display: grid;
  gap: 0.75rem;
}

.public-onboarding-check {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.9rem;
  align-items: start;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(36, 63, 89, 0.12);
  border-radius: 12px;
  background: rgba(247, 250, 253, 0.92);
}

.public-onboarding-check strong,
.public-onboarding-check small {
  display: block;
}

.public-onboarding-check small {
  margin-top: 0.3rem;
  color: var(--muted-text, #5c6875);
  line-height: 1.45;
}

.public-onboarding-check input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.2rem;
}

@media (max-width: 780px) {
  .hero-actions {
    width: 100%;
    margin-left: 0;
  }

  .hero-history-trigger {
    width: 100%;
    justify-content: space-between;
  }

  .hero-change-request-trigger {
    width: 100%;
    justify-content: space-between;
  }

  .view-history-item {
    flex-direction: column;
  }

  .view-history-item-time {
    white-space: normal;
  }

  .transcript-card-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .transcript-dialogue-bubble {
    max-width: 100%;
  }

  .tasks-action-btn {
    width: min(100%, 340px);
    height: 120px;
  }

  .client-contact-table {
    min-width: 100%;
    table-layout: auto;
  }

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

  #client-masterdata-form .client-name-row {
    grid-template-columns: 1fr;
  }

  .video-participants-grid {
    grid-template-columns: 1fr;
  }
}

.nav-collapsed .side-nav {
  width: 280px;
  transform: translateX(-100%);
  overflow: hidden;
}

.page {
  max-width: 980px;
  margin: 0 auto;
  padding: 1.5rem 1rem 2rem;
}

.login-page {
  --bg-top: var(--core-bg-top, #f1f6f2);
  --bg-bottom: var(--core-bg-bottom, #deebe3);
  --panel: var(--core-surface, #ffffff);
  --line: var(--core-surface-border, #cddfd2);
  --text: var(--core-text, #1a261f);
  --muted: var(--core-muted, #4f6557);
  --accent: var(--core-accent, #2a6f55);
  --accent-soft: var(--core-accent-soft, #d8ece1);
}

.login-page-shell {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 1rem;
}

.login-page .hero {
  align-self: start;
}

.core-onepager-shell {
  gap: 1rem;
}

.core-onepager-hero {
  margin-bottom: 0.2rem;
}

.core-top-login-bar {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.core-login-modal {
  width: min(520px, 94vw);
}

.core-two-factor-modal {
  width: min(760px, 94vw);
}

.core-two-factor-form {
  margin-top: 0.8rem;
}

.core-two-factor-setup-data {
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem 1rem;
  border: 1px solid #cfe1d2;
  border-radius: 0.9rem;
  background: #f8fcf9;
}

.core-two-factor-qr-block {
  display: grid;
  gap: 0.45rem;
  padding-bottom: 0.3rem;
}

.core-two-factor-qr-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 0.55rem;
  border: 1px solid #cfe1d2;
  border-radius: 0.8rem;
  background: #ffffff;
}

.core-two-factor-qr-box img {
  width: min(260px, 72vw);
  height: auto;
}

.core-two-factor-setup-data textarea {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.92rem;
  line-height: 1.4;
  resize: vertical;
  user-select: text;
  cursor: text;
}

.core-login-form {
  margin-top: 0.8rem;
}

.core-landing-grid {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.core-portal-panel {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 420px);
  gap: 1rem;
  align-items: start;
}

.core-portal-copy {
  display: grid;
  gap: 0.6rem;
}

.core-portal-copy h2,
.core-portal-copy p {
  margin: 0;
}

.core-portal-copy p {
  color: var(--muted);
  line-height: 1.5;
}

.core-marketing-copy {
  display: grid;
  gap: 0.45rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: linear-gradient(180deg, var(--core-surface, #ffffff) 0%, var(--core-surface-soft, #eef6f0) 100%);
}

.core-marketing-copy p {
  margin: 0;
  color: var(--text);
}

.core-marketing-list {
  margin: 0;
  padding-left: 1.05rem;
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
}

.login-panel {
  margin-top: 0;
  width: min(100%, 420px);
  justify-self: start;
}

.core-portal-login {
  margin-top: 0;
}

.login-page #root-login-form {
  grid-template-columns: 1fr;
}

.login-page #root-login-form .row-actions {
  justify-content: flex-start;
}

.core-features-panel {
  display: grid;
  gap: 0.8rem;
}

.core-features-panel h2 {
  margin: 0;
}

.core-features-subtitle {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.core-features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.core-feature-card {
  display: grid;
  gap: 0.45rem;
  padding: 0.8rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--core-surface, #ffffff);
}

.core-feature-card h3,
.core-feature-card p {
  margin: 0;
}

.core-feature-card p {
  color: var(--muted);
  line-height: 1.45;
}

.core-pricing-panel {
  display: grid;
  gap: 0.9rem;
}

.core-pricing-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
}

.core-billing-switch-wrap {
  display: grid;
  gap: 0.35rem;
  min-width: 220px;
}

.core-billing-switch-label {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.core-billing-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.18rem;
  background: var(--core-surface-soft, #eef6f0);
}

.core-billing-switch button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  min-height: 2.1rem;
  padding: 0.2rem 0.75rem;
}

.core-billing-switch button.active {
  background: var(--accent);
  color: #ffffff;
}

.core-pricing-kicker {
  margin: 0;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.core-pricing-panel h2 {
  margin: 0;
}

.core-pricing-subtitle {
  margin: 0;
  color: var(--muted);
  line-height: 1.52;
}

.core-pricing-scope {
  margin: -0.2rem 0 0;
  color: var(--text);
  font-weight: 600;
}

.core-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.core-pricing-card {
  display: grid;
  gap: 0.72rem;
  padding: 0.95rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: linear-gradient(180deg, var(--core-surface, #ffffff) 0%, var(--core-surface-soft, #eef6f0) 100%);
}

.core-pricing-card.is-featured {
  border-color: var(--accent);
  box-shadow: 0 14px 28px rgba(24, 42, 31, 0.12);
}

.core-pricing-card.is-clickable {
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.core-pricing-card.is-clickable:hover,
.core-pricing-card.is-clickable:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 16px 30px rgba(24, 42, 31, 0.14);
  outline: none;
}

.core-pricing-card h3 {
  margin: 0;
}

.core-pricing-badge {
  margin: 0;
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 0.22rem 0.62rem;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
}

.core-pricing-summary {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.core-pricing-price {
  display: grid;
  gap: 0.08rem;
}

.core-pricing-price strong {
  font-size: 2rem;
  line-height: 1;
}

.core-pricing-price span {
  color: var(--muted);
  font-weight: 600;
}

.core-pricing-facts {
  display: grid;
  gap: 0.55rem;
}

.core-pricing-facts div {
  display: grid;
  gap: 0.14rem;
  padding: 0.68rem 0.75rem;
  border: 1px solid var(--core-surface-border, #d6e2d9);
  border-radius: 0.85rem;
  background: var(--core-surface, #ffffff);
}

.core-pricing-facts strong {
  color: var(--accent);
}

.core-pricing-facts span {
  font-weight: 600;
}

.core-pricing-facts small {
  color: var(--muted);
  line-height: 1.42;
}

.core-pricing-actions {
  display: grid;
  gap: 0.48rem;
}

.core-paypal-btn,
.core-pricing-trainee-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  text-decoration: none;
  font-weight: 700;
}

.core-paypal-btn {
  border: 1px solid var(--core-cta-primary-bg, #ffc439);
  background: var(--core-cta-primary-bg, #ffc439);
  color: var(--core-cta-primary-text, #1d2b54);
}

.core-paypal-btn.secondary {
  background: var(--core-cta-secondary-bg, var(--accent));
  border-color: var(--core-cta-secondary-bg, var(--accent));
  color: var(--core-cta-secondary-text, #ffffff);
}

.core-paypal-btn.is-emphasis {
  box-shadow: 0 10px 18px rgba(24, 42, 31, 0.18);
}

.core-paypal-btn.tertiary {
  border: 1px solid var(--line);
  background: var(--core-surface-soft, #eef6f0);
  color: var(--accent);
}

.core-paypal-btn.is-disabled {
  border: 1px solid var(--line);
  background: #eef2ef;
  color: var(--muted);
}

.core-pricing-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.9rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 0.95rem;
  background: linear-gradient(180deg, var(--core-surface, #ffffff) 0%, var(--core-surface-soft, #eef6f0) 100%);
}

.core-pricing-note p {
  margin: 0;
  color: var(--text);
  line-height: 1.5;
}

.core-pricing-trainee-btn {
  flex: 0 0 auto;
  border: 1px solid var(--accent);
  background: var(--panel);
  color: var(--accent);
}

.core-discount-panel {
  display: grid;
  gap: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.95rem;
  padding: 0.85rem 0.9rem;
  background: linear-gradient(180deg, var(--core-surface, #ffffff) 0%, var(--core-surface-soft, #eef6f0) 100%);
}

.core-discount-head h3,
.core-discount-head p {
  margin: 0;
}

.core-discount-head p {
  margin-top: 0.25rem;
  color: var(--muted);
}

.core-discount-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.55rem;
}

.core-discount-card {
  display: grid;
  gap: 0.25rem;
  padding: 0.72rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.82rem;
  background: var(--core-surface, #ffffff);
}

.core-discount-code,
.core-discount-label,
.core-discount-value,
.core-discount-scope,
.core-discount-description {
  margin: 0;
}

.core-discount-code {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.core-discount-label {
  color: var(--text);
  font-weight: 600;
}

.core-discount-value {
  color: var(--text);
}

.core-discount-scope,
.core-discount-description {
  color: var(--muted);
  font-size: 0.88rem;
}

.core-reviews {
  display: grid;
  gap: 0.75rem;
  padding-top: 0.25rem;
}

.core-reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.core-reviews-head h3,
.core-reviews-head p {
  margin: 0;
}

.core-reviews-head p {
  color: var(--muted);
}

.core-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.core-review-card {
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--core-surface, #ffffff);
}

.core-review-rating,
.core-review-author,
.core-review-subtitle,
.core-review-card blockquote {
  margin: 0;
}

.core-review-rating {
  font-weight: 700;
  color: var(--accent);
}

.core-review-card blockquote {
  color: var(--text);
  line-height: 1.45;
}

.core-review-author {
  font-weight: 700;
}

.core-review-subtitle {
  color: var(--muted);
  font-size: 0.9rem;
}

.core-register-modal {
  width: min(760px, 94vw);
}

.core-register-form {
  margin-top: 0.8rem;
}

#core-register-discount-status.is-valid {
  color: #1f5a3f;
  font-weight: 600;
}

#core-register-discount-status.is-invalid {
  color: #8f2f2f;
  font-weight: 600;
}

@media (max-width: 980px) {
  .therapie-layout {
    grid-template-columns: 1fr;
  }

  .side-nav {
    position: fixed;
    z-index: 30;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(82vw, 320px);
    transform: translateX(0);
    transition: transform 0.25s ease;
  }

  .side-nav-footer {
    display: block;
  }

  .nav-collapsed .side-nav {
    transform: translateX(-100%);
    width: min(82vw, 320px);
  }

  .workspace {
    min-height: 100vh;
  }

  .token-tools {
    width: 100%;
    margin-left: 0;
  }

  .settings-token-tools {
    width: 100%;
  }

  .topbar {
    flex-wrap: wrap;
  }

  .topbar-auth {
    width: 100%;
    margin-left: 0;
  }

  .login-form {
    width: 100%;
  }

  .login-page-shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .core-top-login-bar {
    justify-content: flex-start;
  }

  .core-landing-grid {
    grid-template-columns: 1fr;
  }

  .core-portal-panel {
    grid-template-columns: 1fr;
  }

  .login-panel {
    width: 100%;
    justify-self: stretch;
  }

  .core-features-grid {
    grid-template-columns: 1fr;
  }

  .core-pricing-grid {
    grid-template-columns: 1fr;
  }

  .core-reviews-grid {
    grid-template-columns: 1fr;
  }

  .core-pricing-note {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .mysite-social-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .mysite-page-item-head {
    grid-template-columns: minmax(0, 1fr) 2.6rem;
  }

  .mysite-page-item-toggle-btn {
    justify-self: end;
  }

  .mysite-favicon-tools {
    flex-direction: column;
    align-items: flex-start;
  }

  .mysite-favicon-preview-wrap {
    margin-left: 0;
  }

  .mysite-block-flow.columns-2,
  .mysite-block-flow.columns-3 {
    column-count: 1;
  }

  .mysite-pricing-grid {
    grid-template-columns: 1fr;
  }

  .mysite-pricing-card.is-featured {
    transform: none;
  }

  .mysite-pricing-note {
    flex-direction: column;
    align-items: flex-start;
  }

  .mysite-booking-form .mysite-booking-name-row {
    grid-template-columns: 1fr;
  }

  .mysite-booking-modal {
    width: min(94vw, 640px);
    padding: 0.85rem;
  }

  .mysite-booking-modal-head {
    align-items: flex-start;
  }

  .public-onboarding-check {
    grid-template-columns: 1fr;
  }

  #calendar-range-label {
    margin-left: 0;
    width: 100%;
  }
}

@media (min-width: 781px) and (max-width: 980px) {
  .client-address-fields {
    grid-template-columns: minmax(180px, 1.7fr) minmax(90px, 0.6fr) minmax(140px, 1fr);
  }
}