.btn-danger-text {
  color: var(--color-error);
}

.btn-danger-text:hover {
  color: color-mix(in srgb, var(--color-error) 88%, black);
  background: var(--color-error-bg);
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  min-height: var(--control-height-sm);
}

.btn-full {
  width: 100%;
  justify-content: center;
}

.form-group {
  margin-bottom: var(--space-5);
}

.form-group label {
  display: flex;
  align-items: center;
}

.form-row {
  display: flex;
  gap: var(--space-4);
}

.form-row .form-group {
  flex: 1;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

.form-hint code {
  overflow-wrap: anywhere;
}

.required {
  color: var(--color-error);
  margin-left: var(--space-1);
}

.input-prefix-wrap {
  display: flex;
  align-items: stretch;
}

.input-prefix {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--surface-border-strong);
  border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.input-prefix-wrap input {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.password-toggle {
  position: absolute;
  right: var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  padding: var(--space-1);
  min-width: 24px;
  min-height: 24px;
}

.password-toggle:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.015em;
}

.badge-public {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge-draft {
  background: var(--surface-2);
  color: var(--text-secondary);
}

.accordion > summary > .badge {
  flex-shrink: 0;
  margin-inline-start: auto;
  min-height: 25px;
  padding: 5px 7px;
  border-radius: var(--accordion-radius);
  background: var(--surface-3);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 0;
  text-transform: none;
}

.accordion > summary > .badge-public {
  background: var(--accordion-success-bg);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--surface-1);
  border-bottom: 1px solid var(--surface-border);
}

.data-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--surface-border);
  font-size: var(--text-sm);
  vertical-align: middle;
}

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

.data-table tbody tr:hover {
  background: var(--surface-1);
}

.data-table tbody tr.row-link {
  cursor: pointer;
}

.row-link-anchor,
.row-link-anchor:hover {
  color: inherit;
  text-decoration: none;
}

button.row-link-anchor {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.row-link-anchor:focus-visible {
  border-radius: var(--radius-sm);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.data-table code {
  background: var(--surface-2);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

.table-project-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.empty-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  background: var(--color-primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.empty-icon i {
  font-size: 28px;
  color: var(--color-primary);
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--surface-border);
  margin-bottom: var(--space-6);
}

.page-header:not(.sub-header) {
  min-height: 64px;
  align-items: center;
}

.page-header h1 {
  margin-bottom: var(--space-1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.back-link:hover {
  color: var(--text-primary);
}

.inline-form {
  display: inline-flex;
}

.text-muted {
  color: var(--text-secondary);
}

.toast-container {
  position: fixed;
  top: auto;
  right: auto;
  bottom: max(50px, calc(env(safe-area-inset-bottom) + var(--space-4)));
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 30px));
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast-container:not(:popover-open) {
  display: none;
}

.toast-container::backdrop {
  background: transparent;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: stretch;
  min-height: 50px;
  color: var(--text-primary);
  background: var(--toast-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 22px;
  overflow: hidden;
  pointer-events: auto;
  animation: toast-in 200ms ease;
}

.toast-success {
  --toast-color: var(--color-success);
  --toast-bg: color-mix(in srgb, var(--toast-color), var(--surface-0) 80%);
}

.toast-warning {
  --toast-color: #d97706;
  --toast-bg: color-mix(in srgb, var(--toast-color), var(--surface-0) 85%);
}

.toast-error {
  --toast-color: var(--color-error);
  --toast-bg: color-mix(in srgb, var(--toast-color), var(--surface-0) 85%);
}

.toast-info {
  --toast-color: var(--color-info);
  --toast-bg: color-mix(in srgb, var(--toast-color), var(--surface-0) 85%);
}

.toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  border-inline-end: 1px solid color-mix(in srgb, var(--toast-color) 15%, transparent);
  color: var(--toast-color);
  font-size: 16px;
}

.toast-message {
  flex: 1;
  min-width: 0;
  align-self: center;
  padding: 8px 13px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.toast-close {
  flex: 0 0 40px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.toast-close:hover,
.toast-close:focus-visible {
  background: color-mix(in srgb, var(--toast-color) 10%, transparent);
  color: var(--text-primary);
}

.toast-close:focus-visible {
  outline: 2px solid var(--toast-color);
  outline-offset: -2px;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
}

@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .page-header {
    flex-direction: column;
  }

  .page-header:not(.sub-header) {
    min-height: 0;
    align-items: flex-start;
  }

  .header-actions {
    flex-wrap: wrap;
  }
}

.admin-body,
.auth-body {
  --admin-accent: #c0341f;
  --admin-chrome: #251c16;
  --color-primary: var(--admin-accent);
  --color-primary-light: color-mix(in srgb, var(--color-primary), white 30%);
  --color-primary-dark: color-mix(in srgb, var(--color-primary), black 10%);
  --color-primary-action: var(--color-primary);
  --color-primary-action-hover: var(--color-primary-dark);
  --color-primary-action-active: color-mix(in srgb, var(--color-primary), black 20%);
  --color-primary-bg: var(--surface-2);
  --surface-0: #fbf6ec;
  --surface-mix: #8a5a2b;
  --surface-1: color-mix(in srgb, var(--surface-0), var(--surface-mix) 4%);
  --surface-2: color-mix(in srgb, var(--surface-0), var(--surface-mix) 10%);
  --surface-3: color-mix(in srgb, var(--surface-0), var(--surface-mix) 16%);
  --surface-border: var(--surface-2);
  --surface-border-strong: color-mix(in srgb, var(--surface-0), var(--surface-mix) 22%);
  --text-primary: #1f1711;
  --text-secondary: #5b4a3d;
  --text-tertiary: #6f5e50;
  --text-link: var(--color-primary);
  --text-link-hover: var(--color-primary-action-hover);
  --selection-bg: var(--color-primary-dark);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --text-xs: 13px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 18px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: var(--radius-md);
  --radius-xl: 16px;
  --sidebar-width: 280px;
  --header-height: 38px;
  --control-height: 45px;
  --control-height-sm: 35px;
  --admin-form-gap: 18px;
  --admin-overlay-animation-speed: 200ms;
  --transition-fast: 150ms ease;
  --transition-base: 150ms ease;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 22px;
}

[data-theme="dark"] .admin-body,
[data-theme="dark"] .auth-body {
  --admin-chrome: #34271e;
  --surface-0: #1c1410;
  --surface-mix: #f1d9b8;
  --text-primary: #f7ede0;
  --text-secondary: #d3c1ae;
  --text-tertiary: #bba995;
  --text-link: var(--color-primary-light);
  --text-link-hover: var(--color-primary);
  --selection-bg: color-mix(in srgb, var(--color-primary-dark) 92%, var(--surface-2));
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.admin-body .accordion {
  --accordion-radius: var(--radius-md);
  --accordion-success-bg: color-mix(in srgb, var(--color-success), var(--surface-0) 80%);
}

[data-theme="dark"] .admin-body .accordion {
  --accordion-success-bg: color-mix(in srgb, var(--color-success), var(--surface-0) 82%);
}

.auth-body {
  min-height: 100vh;
  color: var(--text-primary);
  background: var(--surface-0);
}

.auth-app {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
}

.auth-container {
  width: 100%;
  max-width: 430px;
  margin: auto;
}

.auth-header {
  text-align: center;
  margin-bottom: 30px;
}

.auth-logo {
  display: block;
  width: 35px;
  height: 35px;
  margin: 0 auto 10px;
  object-fit: contain;
}

.auth-header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
}

.auth-form {
  display: grid;
  gap: var(--admin-form-gap);
}

.auth-field {
  min-height: 62px;
  position: relative;
  overflow: hidden;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.auth-field:hover {
  background: var(--surface-3);
}

.auth-field:focus-within {
  background: var(--surface-3);
  border-color: var(--surface-border-strong);
}

.auth-field label {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  margin: 0;
  padding: 9px 13px 1px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  line-height: 13px;
}

.auth-field .required {
  margin: 0;
  color: var(--color-error);
}

.auth-field input,
.auth-field input:hover,
.auth-field input:focus {
  width: 100%;
  min-height: 36px;
  padding: 8px 13px 10px;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1;
}

.auth-password-field input {
  padding-right: 52px;
}

.auth-field .password-toggle {
  top: 50%;
  right: 10px;
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
  padding: 0;
  transform: translateY(-50%);
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: 50%;
}

.auth-field .password-toggle:hover {
  color: var(--text-primary);
  background: var(--surface-border-strong);
}

.auth-hint {
  display: inline-block;
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 16px;
}

.auth-hint-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 16px;
}

.auth-hint:hover {
  color: var(--text-primary);
}

.auth-description {
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 22px;
}

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

.auth-field-hint {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 20px;
}

.auth-field-hint code {
  overflow-wrap: anywhere;
}

.auth-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--surface-border);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 20px;
}

.auth-footer p {
  margin: 0;
}

.auth-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-underline-offset: 3px;
}

.auth-footer a:hover {
  text-decoration: underline;
}

.auth-footer a:focus-visible {
  outline: 2px solid var(--text-link);
  outline-offset: 3px;
  border-radius: 2px;
}

.auth-message {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.auth-message-error {
  background: var(--color-error-bg);
  color: color-mix(in srgb, var(--color-error) 70%, var(--text-primary));
}

.auth-submit {
  min-height: 52px;
  margin-top: 0;
}

.admin-body {
  min-height: 100vh;
  overflow: hidden;
  color: var(--text-primary);
  background: var(--admin-chrome);
}

.admin-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--admin-chrome);
}

.admin-topbar {
  width: 100%;
  min-height: var(--header-height);
  height: var(--header-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  padding: 2px 10px;
  color: #ffffff;
  background: var(--admin-chrome);
  border: 0;
  position: relative;
  z-index: var(--z-sticky);
  backdrop-filter: none;
}

.admin-main-nav {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.admin-nav-link.admin-organization-link {
  margin-right: 5px;
  padding-inline: 8px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.admin-nav-link.admin-organization-link:hover,
.admin-nav-link.admin-organization-link:focus-visible,
.admin-nav-link.admin-organization-link.active {
  background: rgba(255, 255, 255, 0.2);
}

.admin-organization-link span {
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-nav-link {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 5px;
  color: rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}

.admin-nav-link:hover,
.admin-nav-link:focus-visible,
.admin-nav-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  outline: none;
}

.admin-nav-link i {
  font-size: 16px;
}

.admin-header-spacer {
  flex: 1;
}

.header-menu {
  position: relative;
  flex-shrink: 0;
}

.header-menu > summary {
  list-style: none;
}

.header-menu > summary::-webkit-details-marker {
  display: none;
}

.header-action,
.header-user {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 5px;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  line-height: 16px;
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}

.header-action {
  width: 28px;
  padding: 0;
  font-size: 17px;
}

.header-user {
  max-width: 300px;
}

.header-user span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-menu[open] > summary,
.header-menu > summary:hover,
.header-menu > summary:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  outline: none;
}

.header-popover {
  min-width: 190px;
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: var(--z-dropdown);
  padding: 5px;
  color: var(--text-primary);
  background: var(--surface-0);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.theme-popover {
  min-width: 140px;
}

.theme-option,
.header-popover-item {
  width: 100%;
  min-height: 35px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  text-align: left;
}

.theme-option:hover,
.theme-option:focus-visible,
.theme-option.active,
.header-popover-item:hover,
.header-popover-item:focus-visible {
  color: var(--text-primary);
  background: var(--surface-2);
  outline: none;
}

.theme-option.active {
  font-weight: 700;
}

.header-popover-divider {
  height: 1px;
  margin: 5px -5px;
  background: var(--surface-border);
}

.user-popover form {
  margin: 0;
}

.admin-page {
  height: calc(100vh - var(--header-height));
  min-height: 0;
  display: flex;
  overflow: hidden;
  color: var(--text-primary);
  background: var(--surface-0);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.admin-sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  height: 100%;
  flex-shrink: 0;
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: var(--surface-1);
  border-right: 1px solid var(--surface-border);
  z-index: calc(var(--z-sticky) - 1);
}

.sidebar-search {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 15px;
  border-bottom: 1px solid var(--surface-border);
}

.sidebar-search input[type="search"],
.sidebar-search input[type="search"]:hover,
.sidebar-search input[type="search"]:focus {
  width: auto;
  flex: 1;
  min-width: 0;
  min-height: 38px;
  padding: 8px 0;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
}

.sidebar-content {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.sidebar-nav-link {
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 400;
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}

.sidebar-nav-link + .sidebar-nav-link {
  margin-top: var(--space-1);
}

.sidebar-nav-link:hover,
.sidebar-nav-link:focus-visible,
.sidebar-nav-link.active {
  color: var(--text-primary);
  background: var(--surface-2);
  outline: none;
}

.sidebar-nav-link.active {
  font-weight: 400;
}

.sidebar-nav-link i {
  width: 18px;
  flex: 0 0 18px;
  font-size: 16px;
}

.sidebar-nav-link span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-section-label {
  margin: var(--space-5) 0 var(--space-2);
  padding: 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0;
  text-transform: none;
}

.sidebar-section-label:first-child {
  margin-top: 0;
}

.sidebar-actions {
  padding: 15px;
  border-top: 1px solid var(--surface-border);
}

.admin-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  margin-left: 0;
  display: flex;
  flex-direction: column;
}

body.fullscreen .admin-sidebar {
  display: none;
}

.admin-content {
  --admin-content-gutter: 30px;
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px 30px 30px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.admin-page-header {
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 15px 20px;
  margin-bottom: 20px;
}

.sidebar-toggle {
  display: none;
}

.admin-breadcrumbs {
  min-width: 0;
  max-width: calc(100% - 50px);
  display: inline-flex;
  align-items: center;
  gap: 30px;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 22px;
}

.admin-breadcrumbs > * {
  position: relative;
  white-space: nowrap;
}

.admin-breadcrumbs > *:not(:last-child)::after {
  content: "/";
  position: absolute;
  top: 0;
  right: -18px;
  color: var(--text-tertiary);
  font-size: 0.85em;
}

.admin-breadcrumbs > :last-child {
  min-width: 0;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.admin-breadcrumbs a {
  color: var(--text-secondary);
}

.admin-breadcrumbs a:hover,
.admin-breadcrumbs a:focus-visible {
  color: var(--text-primary);
  outline: none;
}

.admin-page-context-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.admin-page-icon-action {
  width: 35px;
  min-width: 35px;
  height: 35px;
  min-height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  font-size: 18px;
}

.admin-page-icon-action:hover,
.admin-page-icon-action:focus-visible {
  color: var(--text-primary);
  background: var(--surface-2);
  outline: none;
}

.admin-page-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.header-subtitle {
  max-width: 420px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-view {
  width: 100%;
}

.admin-footer {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: auto -30px -30px;
  padding: 10px 30px;
  color: var(--text-tertiary);
  border-top: 1px solid var(--surface-border);
  font-size: 13px;
  line-height: 16px;
}

.admin-footer span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
}

.admin-body .btn,
.auth-body .btn {
  min-height: var(--control-height);
  padding: 5px 25px;
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}

.admin-body .btn-sm {
  min-height: var(--control-height-sm);
  padding: 5px 10px;
  font-size: 13px;
}

.admin-body .btn-lg,
.auth-body .btn-lg {
  min-height: 52px;
}

.admin-body .btn-primary:focus-visible,
.auth-body .btn-primary:focus-visible {
  background: var(--color-primary-action-hover);
  border-color: var(--color-primary-action-hover);
}

.admin-body .btn-primary:active,
.auth-body .btn-primary:active {
  background: var(--color-primary-action-active);
  border-color: var(--color-primary-action-active);
}

.admin-body .btn-outline {
  color: var(--text-primary);
  background: var(--surface-2);
  border-color: transparent;
}

.admin-body .btn-outline:hover,
.admin-body .btn-outline:focus-visible {
  color: var(--text-primary);
  background: var(--surface-3);
  border-color: transparent;
}

.admin-body .btn-ghost {
  color: var(--text-secondary);
  background: transparent;
}

.admin-body .btn-ghost:hover,
.admin-body .btn-ghost:focus-visible {
  color: var(--text-primary);
  background: var(--surface-2);
}

.admin-body .form-group label {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.admin-body .form-group input,
.admin-body .form-group textarea,
.admin-body .form-group select,
.admin-body .select-enhanced-trigger {
  min-height: var(--control-height);
  color: var(--text-primary);
  background-color: var(--surface-2);
  border-color: transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 14px;
}

.admin-body .form-group input:hover,
.admin-body .form-group textarea:hover,
.admin-body .form-group select:hover,
.admin-body .select-enhanced-trigger:hover {
  background-color: var(--surface-3);
  border-color: transparent;
}

.admin-body .form-group input:focus,
.admin-body .form-group textarea:focus,
.admin-body .form-group select:focus,
.admin-body .select-enhanced-trigger:focus-visible,
.admin-body .select-enhanced.is-open .select-enhanced-trigger {
  background-color: var(--surface-3);
  border-color: var(--surface-border-strong);
  box-shadow: none;
}

.admin-body .badge {
  padding: 4px 7px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0;
}

.admin-body .badge-private {
  color: var(--text-primary);
  background: var(--surface-2);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}

.project-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-0);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-base);
  overflow: hidden;
  text-decoration: none;
  color: var(--text-primary);
}

.project-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--surface-border-strong);
  transform: translateY(-2px);
  color: var(--text-primary);
}

.project-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
}

.project-logo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.project-card-body {
  padding: 0 var(--space-5);
  flex: 1;
}

.project-card-body h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.project-card-body p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  margin-top: auto;
}

.project-slug {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.versions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.version-card {
  background: var(--surface-0);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.version-card.row-link {
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.version-card.row-link:hover {
  border-color: var(--surface-border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.version-card-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  gap: var(--space-4);
}

.version-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.version-info h3 {
  font-size: var(--text-base);
}

.version-slug {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.version-actions {
  display: flex;
  gap: var(--space-2);
}

.pages-tree {
  padding: 0;
  position: relative;
}

.page-tree-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  padding-left: calc(var(--space-3) + var(--depth, 0) * 24px);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.page-tree-item[draggable="true"] {
  -webkit-user-select: none;
  user-select: none;
}

.page-tree-item:hover {
  background: var(--surface-1);
}

.page-batch-delete-form[hidden] {
  display: none;
}

.page-selection-toolbar {
  position: fixed;
  left: calc(var(--sidebar-width) + ((100vw - var(--sidebar-width)) / 2));
  bottom: calc(36px + 20px);
  z-index: var(--z-sticky);
  width: max-content;
  max-width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 12px 7px 20px;
  background: var(--surface-0);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  transform: translateX(-50%);
}

body.fullscreen .page-selection-toolbar {
  left: 50%;
}

.page-selection-summary {
  color: var(--text-primary);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.page-selection-summary strong {
  font-weight: 500;
}

.page-selection-toolbar .btn {
  min-height: 36px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
}

.page-selection-reset {
  color: var(--text-primary);
  background: var(--surface-2);
  border-color: transparent;
}

.page-selection-reset:hover,
.page-selection-reset:focus-visible {
  background: var(--surface-3);
}

.admin-body .page-selection-delete {
  color: var(--color-error);
  background: var(--surface-0);
  border: 2px solid var(--color-error);
}

.admin-body .page-selection-delete:hover,
.admin-body .page-selection-delete:focus-visible {
  color: var(--text-inverse);
  background: var(--color-error);
  border-color: var(--color-error);
}

.page-title {
  font-size: var(--text-sm);
  font-weight: 500;
  flex: 1;
}

.page-slug {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  margin-right: var(--space-2);
}

.page-tree-actions {
  display: flex;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.page-tree-item:hover .page-tree-actions {
  opacity: 1;
}

.version-card.page-tree-item {
  display: block;
  padding: 0;
  margin-left: calc(var(--depth, 0) * 20px);
  position: relative;
}

.version-card.page-tree-item:hover {
  background: transparent;
}

.version-card.page-tree-item .version-card-main {
  min-height: 56px;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.version-card.page-tree-item .version-info {
  min-width: 0;
}

.version-card.page-tree-item .page-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.version-card.page-tree-item .page-tree-actions {
  opacity: 1;
}

.sidebar-navigation-card .version-card-main {
  background: var(--surface-1);
}

.sidebar-navigation-card .version-info {
  flex: 1;
}

.sidebar-navigation-icon {
  width: 20px;
  color: var(--text-tertiary);
  font-size: var(--text-lg);
  text-align: center;
  flex: 0 0 auto;
}

.sidebar-header-title {
  font-weight: 600;
}

.sidebar-navigation-badge {
  padding: 2px var(--space-2);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.sidebar-separator-preview {
  height: 1px;
  background: var(--surface-border-strong);
  flex: 1;
}

.sidebar-navigation-edit-spacer {
  visibility: hidden;
  pointer-events: none;
}

.editor-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height) - 64px);
}

.editor-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.editor-form [hidden] {
  display: none !important;
}

.editor-item-type {
  flex: 0 0 auto;
  margin-bottom: var(--space-5);
}

.editor-meta {
  flex: 0 0 auto;
}

.editor-meta .form-row {
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
}

.editor-content {
  flex: 1;
  display: flex;
  min-width: 0;
  min-height: 0;
}

.editor-content .EasyMDEContainer {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  position: relative;
}

.editor-content .EasyMDEContainer .CodeMirror {
  flex: 1;
  min-width: 0;
  min-height: 300px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  border-color: var(--surface-border-strong);
  color: var(--text-primary);
  background: var(--surface-0);
}

.editor-content .editor-toolbar {
  border-color: var(--surface-border-strong);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--surface-0);
}

.editor-content .editor-toolbar button {
  color: var(--text-secondary);
}

.editor-content .editor-toolbar button:hover,
.editor-content .editor-toolbar button.active {
  background: var(--surface-2);
  border-color: var(--surface-border-strong);
  color: var(--text-primary);
}

.editor-content .editor-toolbar i.separator {
  border-left-color: var(--surface-border-strong);
  border-right-color: transparent;
}

.editor-content .editor-statusbar {
  color: var(--text-tertiary);
  background: var(--surface-0);
  border: 1px solid var(--surface-border-strong);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.editor-content .CodeMirror-gutters {
  background: var(--surface-0);
  border-right: 1px solid var(--surface-border);
}

.editor-content .CodeMirror-cursor {
  border-left-color: var(--text-primary);
}

.editor-content .CodeMirror-selected,
.editor-content .CodeMirror-focused .CodeMirror-selected,
.editor-content .CodeMirror-line::selection,
.editor-content .CodeMirror-line > span::selection,
.editor-content .CodeMirror-line > span > span::selection,
.editor-content .CodeMirror-line::-moz-selection,
.editor-content .CodeMirror-line > span::-moz-selection,
.editor-content .CodeMirror-line > span > span::-moz-selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

.editor-content span.CodeMirror-selectedtext {
  color: inherit;
}

.editor-content .editor-preview,
.editor-content .editor-preview-side {
  background: var(--surface-0);
  color: var(--text-primary);
  padding: 0;
}

body.fullscreen .editor-content .EasyMDEContainer .CodeMirror-fullscreen {
  top: 50px;
  left: 0;
  width: 100vw;
  z-index: calc(var(--z-modal) + 20);
}

body.fullscreen .editor-content .editor-toolbar.fullscreen {
  left: 0;
  width: 100vw;
  z-index: calc(var(--z-modal) + 21);
}

body.fullscreen .editor-content .editor-toolbar.fullscreen::before {
  left: 0;
}

body.fullscreen .editor-content .editor-preview-side {
  width: 50vw;
}

.settings-form,
.settings-custom-domain {
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  padding-top: 0;
}

.settings-danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--surface-border);
}

.settings-danger-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

.settings-danger-row .form-hint {
  margin: 4px 0 0;
}

.admin-body .settings-danger-row .btn {
  color: var(--color-error);
}

.admin-body .settings-danger-row .btn:hover,
.admin-body .settings-danger-row .btn:focus-visible {
  color: color-mix(in srgb, var(--color-error) 88%, black);
  background: var(--color-error-bg);
}

.admin-content .settings-form,
.admin-content #project-create-form,
.admin-content #project-edit-form,
.admin-content #version-create-form,
.admin-content #version-edit-form {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.version-label-suggestions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.version-label-suggestions-title {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.version-label-suggestion-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.version-label-suggestion {
  max-width: 100%;
  min-height: var(--control-height-sm);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--surface-border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  overflow-wrap: anywhere;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.version-label-suggestion:hover,
.version-label-suggestion:focus-visible {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--surface-border-strong));
  background: var(--color-primary-bg);
  color: var(--color-primary);
  outline: none;
}

.admin-content .table-wrap {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  margin-top: 0;
}

.admin-content .data-table thead th {
  padding: 10px 13px;
  color: var(--text-secondary);
  background: var(--surface-1);
  border-bottom-color: var(--surface-border);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.admin-content .data-table tbody td {
  padding: 10px 13px;
  border-bottom-color: var(--surface-border);
  font-size: 13px;
}

.admin-content .data-table tbody tr:hover {
  background: var(--surface-1);
}

.form-submit-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--surface-border);
}

[data-theme="dark"] .editor-content .CodeMirror {
  background: var(--surface-1);
}

[data-theme="dark"] .editor-content .editor-toolbar {
  background: var(--surface-1);
}

[data-theme="dark"] .editor-content .CodeMirror-gutters {
  background: var(--surface-1);
}

[data-theme="dark"] .editor-content .editor-statusbar {
  background: var(--surface-1);
}

.page-tree-item.dragging {
  opacity: 0.35;
}

.page-tree-item.drop-before::before,
.pages-tree.drop-at-start::before,
.pages-tree.drop-at-end::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  pointer-events: none;
}

.page-tree-item.drop-before::before {
  top: -7px;
}

.pages-tree.drop-at-start::before {
  top: -1px;
}

.pages-tree.drop-at-end::after {
  bottom: -1px;
}

.version-card.page-tree-item.drop-into {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.version-card.page-tree-item.drop-into .version-card-main {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--surface-0));
}

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 20);
  display: flex;
  justify-content: flex-end;
}

.admin-modal[hidden] {
  display: none;
}

.admin-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(60, 40, 25, 0.4);
}

.admin-modal-dialog {
  position: relative;
  width: min(720px, 100vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface-0);
  border: 0;
  border-left: 1px solid var(--surface-border-strong);
  border-radius: 0;
  box-shadow: -8px 0 24px rgba(60, 30, 10, 0.1);
  padding: 0;
}

.admin-modal-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  padding: 0 30px;
  border-bottom: 0;
}

.admin-modal-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 400;
}

.admin-modal-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
  padding: 10px 30px 30px;
}

.admin-modal[data-mode="loading"] .admin-modal-dialog {
  width: min(720px, 100vw);
  padding: 0;
}

.admin-modal[data-mode="loading"] .admin-modal-header {
  margin-bottom: 0;
  text-align: left;
}

.admin-modal[data-mode="loading"] .admin-modal-body {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
  padding: 30px;
}

.admin-modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-modal[data-mode="loading"] .admin-modal-loading {
  padding: var(--space-6) 0;
}

.admin-modal-loading[hidden] {
  display: none;
}

.admin-modal-spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--color-primary) 18%, var(--surface-border));
  border-top-color: var(--color-primary);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary) 8%, transparent);
  animation: admin-modal-spin 0.8s linear infinite;
}

.admin-modal-message {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}

.admin-modal[data-mode="loading"] .admin-modal-message {
  max-width: 32ch;
  font-size: var(--text-sm);
  line-height: 1.75;
}

.admin-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  min-height: 80px;
  align-items: center;
  margin-top: 0;
  padding: 15px 30px;
  border-top: 1px solid var(--surface-border);
}

.admin-modal-actions #adminModalCancel {
  margin-right: auto;
}

.admin-modal-actions [hidden] {
  display: none;
}

.admin-modal[data-presentation="dialog"] {
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.admin-modal[data-presentation="dialog"] .admin-modal-dialog {
  width: min(480px, 100%);
  height: auto;
  max-height: calc(100dvh - 40px);
  border: 1px solid var(--surface-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.admin-modal[data-presentation="dialog"] .admin-modal-header {
  min-height: 68px;
  border-bottom: 1px solid var(--surface-border);
}

.admin-modal[data-presentation="dialog"] .admin-modal-title {
  font-weight: 600;
}

.admin-modal[data-presentation="dialog"] .admin-modal-body {
  flex: 0 1 auto;
  padding: var(--space-5) 30px;
}

.admin-modal[data-presentation="dialog"] .admin-modal-actions {
  min-height: auto;
  gap: var(--space-5);
  padding: var(--space-5);
}

.admin-modal[data-presentation="dialog"] .admin-modal-actions .btn {
  flex: 1;
}

.admin-modal[data-presentation="dialog"] .admin-modal-actions #adminModalCancel {
  margin-right: 0;
  background: var(--surface-2);
}

.admin-modal[data-mode="loading"] .admin-modal-actions {
  display: none;
}

@keyframes admin-modal-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .admin-sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    height: auto;
    z-index: var(--z-sticky);
    transform: translateX(-100%);
  }

  .admin-sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }

  .admin-main {
    margin-left: 0;
  }

  .admin-content {
    --admin-content-gutter: 20px;
    padding: 20px;
  }

  .admin-topbar {
    gap: 7px;
    padding: 2px 5px;
  }

  .sidebar-toggle {
    display: inline-flex;
    flex: 0 0 28px;
    color: var(--text-secondary);
    background: transparent;
  }

  .admin-page-header {
    gap: 10px;
    margin-bottom: 15px;
  }

  .admin-breadcrumbs {
    max-width: calc(100% - 38px);
    font-size: 16px;
  }

  .admin-page-meta {
    display: none;
  }

  .admin-footer {
    margin: auto -20px -20px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .page-selection-toolbar {
    left: 50%;
    bottom: calc(36px + 10px);
    max-width: calc(100vw - 40px);
  }

  .header-subtitle {
    font-size: 0.6875rem;
  }

  .version-card-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .version-actions {
    flex-wrap: wrap;
  }

  .editor-meta .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .admin-nav-link span,
  .header-user span {
    display: none;
  }

  .admin-main-nav {
    gap: 5px;
  }

  .admin-nav-link {
    min-width: 28px;
    justify-content: center;
  }
}

#gh-load-more-repos,
#gh-load-more-tags,
#gh-load-more-commits {
  margin-top: var(--space-2);
}

.page-load-more {
  margin: var(--space-5) 0;
  padding: 0;
}

.admin-body .page-load-more-button {
  width: 100%;
  min-height: 52px;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 0;
  border-radius: var(--radius-md);
}

.admin-body .page-load-more-button:hover,
.admin-body .page-load-more-button:focus-visible {
  color: var(--text-primary);
  background: var(--surface-3);
}

.admin-body .page-load-more-button[aria-busy="true"] {
  color: var(--text-tertiary);
  cursor: wait;
}

@media (max-width: 768px) {
  #gh-fetch-btn,
  #gh-load-repos-btn,
  #gh-load-more-repos,
  #gh-load-more-tags,
  #gh-load-more-commits,
  #gh-import-btn {
    width: 100%;
  }

  .markdown-import-dialog .dialog-footer {
    flex-direction: column-reverse;
  }

  .markdown-import-dialog .dialog-footer .btn {
    width: 100%;
  }
}

@keyframes ph-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.admin-dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  display: none;
  opacity: 0;
  transform: translateX(30px);
  margin: 0;
  max-width: none;
  max-height: none;
  height: 100dvh;
  overflow: hidden;
  z-index: calc(var(--z-modal) + 30);
  border: none;
  border-left: 1px solid var(--surface-border-strong);
  border-radius: 0;
  background: var(--surface-0);
  box-shadow: -8px 0 24px rgba(60, 30, 10, 0.1);
  padding: 0;
  width: min(720px, 100vw);
  color: var(--text-primary);
}

.admin-dialog::backdrop {
  background: rgba(60, 40, 25, 0.4);
}

.admin-dialog .dialog-content {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.admin-dialog .dialog-content > form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dialog-header {
  flex: 0 0 auto;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  border-bottom: 0;
}

.dialog-header h2 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 400;
}

.dialog-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--text-lg);
  text-decoration: none;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.dialog-close:hover {
  background: var(--surface-1);
  color: var(--text-primary);
}

.admin-dialog .dialog-header .dialog-close,
.admin-drawer-header .dialog-close {
  display: none;
}

.dialog-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: var(--admin-form-gap);
}

.dialog-body > .form-group {
  margin-bottom: 0;
}

.dialog-footer {
  flex: 0 0 auto;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: 15px 30px;
  border-top: 1px solid var(--surface-border);
}

.dialog-footer [data-dialog-close],
.dialog-footer [data-markdown-import-close],
.dialog-footer > a.btn:first-child {
  margin-right: auto;
}

.markdown-import-dialog {
  width: min(720px, 100vw);
}

.admin-drawer {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 10);
  display: flex;
  justify-content: flex-end;
}

.admin-drawer[hidden] {
  display: none;
}

.admin-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(60, 40, 25, 0.4);
}

.admin-drawer-panel {
  position: relative;
  width: min(800px, 100vw);
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-0);
  border-left: 1px solid var(--surface-border-strong);
  box-shadow: -8px 0 24px rgba(60, 30, 10, 0.1);
  outline: 0;
}

.admin-modal,
.admin-drawer,
.admin-dialog {
  transition-property: opacity, transform, display, overlay;
  transition-duration: var(--admin-overlay-animation-speed);
  transition-behavior: allow-discrete;
}

.admin-modal,
.admin-drawer {
  opacity: 1;
}

.admin-modal[hidden],
.admin-drawer[hidden] {
  opacity: 0;
  pointer-events: none;
}

.admin-modal-dialog,
.admin-drawer-panel {
  transform: none;
  transition: transform var(--admin-overlay-animation-speed);
}

.admin-modal[hidden] .admin-modal-dialog,
.admin-drawer[hidden] .admin-drawer-panel {
  transform: translateX(30px);
}

.admin-modal[data-presentation="dialog"][hidden] .admin-modal-dialog {
  transform: scale(0.98);
}

.admin-dialog[open] {
  display: block;
  opacity: 1;
  transform: none;
}

.admin-dialog::backdrop {
  opacity: 0;
  transition-property: opacity, display, overlay;
  transition-duration: var(--admin-overlay-animation-speed);
  transition-behavior: allow-discrete;
}

.admin-dialog[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .admin-modal:not([hidden]),
  .admin-drawer:not([hidden]),
  .admin-dialog[open] {
    opacity: 0;
  }

  .admin-modal:not([hidden]) .admin-modal-dialog,
  .admin-drawer:not([hidden]) .admin-drawer-panel,
  .admin-dialog[open] {
    transform: translateX(30px);
  }

  .admin-modal[data-presentation="dialog"]:not([hidden]) .admin-modal-dialog {
    transform: scale(0.98);
  }

  .admin-dialog[open]::backdrop {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-modal-dialog,
  .admin-drawer-panel,
  .admin-modal[hidden] .admin-modal-dialog,
  .admin-drawer[hidden] .admin-drawer-panel,
  .admin-modal[data-presentation="dialog"][hidden] .admin-modal-dialog {
    transform: none;
    transition: none;
  }

  @starting-style {
    .admin-modal:not([hidden]) .admin-modal-dialog,
    .admin-drawer:not([hidden]) .admin-drawer-panel,
    .admin-dialog[open],
    .admin-modal[data-presentation="dialog"]:not([hidden]) .admin-modal-dialog {
      transform: none;
    }
  }
}

.admin-drawer-header {
  min-height: 72px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 30px;
  border-bottom: 0;
}

.admin-drawer-header h2 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 400;
}

.admin-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 30px 30px;
}

.admin-drawer-body-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-drawer-body .form-page,
.admin-drawer-body .editor-page {
  min-height: 100%;
  height: auto;
}

.admin-drawer-body .form-page > form:not(.inline-form) {
  display: flex;
  flex-direction: column;
  gap: var(--admin-form-gap);
}

.admin-drawer-form {
  display: flex;
  flex-direction: column;
  gap: var(--admin-form-gap);
}

.admin-drawer-form > .form-group {
  margin-bottom: 0;
}

.admin-drawer-body .form-page > form:not(.inline-form) > .form-group {
  margin-bottom: 0;
}

.admin-drawer-body .editor-form {
  gap: var(--admin-form-gap);
}

.admin-drawer-body .editor-item-type {
  margin-bottom: 0;
}

.admin-drawer-body .editor-meta .form-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-form-gap);
}

.admin-drawer-body .editor-meta .form-group {
  margin-bottom: 0;
}

.admin-drawer-body .editor-meta .form-group:first-child,
.admin-drawer-body .editor-meta .form-group:last-child,
.admin-drawer-body .editor-content {
  grid-column: 1 / -1;
}

.admin-drawer-body .editor-content {
  min-height: 480px;
}

.admin-drawer-body .editor-content .EasyMDEContainer,
.admin-drawer-body .editor-content .EasyMDEContainer .CodeMirror {
  min-height: 480px;
}

.admin-drawer-footer {
  min-height: 80px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: 15px 30px;
  border-top: 1px solid var(--surface-border);
  background: var(--surface-0);
}

.admin-drawer-footer:empty {
  display: none;
}

.admin-drawer-footer .header-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.admin-drawer-footer .drawer-leading-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: auto;
}

.admin-drawer-error {
  max-width: 52ch;
  margin: auto;
  text-align: center;
}

.admin-drawer-error p {
  margin-bottom: var(--space-3);
  color: var(--text-secondary);
}

@media (max-width: 520px) {
  .admin-modal-header,
  .admin-dialog .dialog-header,
  .admin-drawer-header {
    padding-right: 20px;
    padding-left: 20px;
  }

  .admin-modal-body,
  .admin-dialog .dialog-body,
  .admin-drawer-body {
    padding: 10px 20px 20px;
  }

  .admin-modal-actions,
  .admin-dialog .dialog-footer,
  .admin-drawer-footer {
    padding-right: 20px;
    padding-left: 20px;
  }

  .admin-drawer-body .editor-meta .form-row {
    grid-template-columns: 1fr;
  }
}

.markdown-import-summary {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.markdown-import-file-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 220px;
  margin: 0;
  padding: var(--space-2);
  overflow: auto;
  list-style: none;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  background: var(--surface-0);
}

.markdown-import-file-list[hidden],
.markdown-import-summary[hidden] {
  display: none;
}

.markdown-import-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
}

.markdown-import-file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 500;
}

.markdown-import-file-size {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.table-actions-col {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.table-actions-col .btn-sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
}

.btn-danger {
  background: var(--color-error);
  color: var(--text-inverse);
  border-color: var(--color-error);
}

.btn-danger:hover {
  background: color-mix(in srgb, var(--color-error) 88%, black);
  border-color: color-mix(in srgb, var(--color-error) 88%, black);
  color: var(--text-inverse);
}

.sidebar-content {
  flex: 0 1 auto;
  overflow: visible;
}

.sidebar-actions {
  flex: 0 0 auto;
  margin-top: 0;
}

.admin-body .btn-sidebar {
  color: var(--text-primary);
  background: var(--surface-0);
  border: 2px solid var(--text-primary);
}

.admin-body .btn-sidebar:hover,
.admin-body .btn-sidebar:focus-visible {
  color: var(--surface-0);
  background: var(--text-primary);
  outline: none;
}

.admin-page-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

.admin-page-actions .btn {
  min-width: 150px;
}

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

.admin-page-actions.pages-header-actions .btn {
  min-width: 0;
}

.admin-body .btn-preview {
  color: var(--text-primary);
  background: var(--surface-0);
  border: 2px solid var(--text-primary);
}

.admin-body .btn-preview:hover,
.admin-body .btn-preview:focus-visible {
  color: var(--text-primary);
  background: var(--surface-2);
  outline: none;
}

.admin-content .pb-table-wrap {
  width: calc(100% + var(--admin-content-gutter) + var(--admin-content-gutter));
  margin-right: calc(0px - var(--admin-content-gutter));
  margin-left: calc(0px - var(--admin-content-gutter));
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.admin-content .pb-data-table {
  table-layout: auto;
}

.admin-content .pb-data-table thead th {
  height: 44px;
  padding: 9px 15px;
  background: transparent;
  border-bottom: 1px solid var(--surface-border);
  white-space: nowrap;
}

.admin-content .pb-data-table thead th i {
  margin-right: 4px;
  font-size: 15px;
  font-weight: 400;
}

.admin-content .pb-data-table tbody td {
  height: 60px;
  padding: 9px 15px;
  border-bottom: 1px solid var(--surface-border);
}

.admin-content .pb-data-table tbody tr:last-child td {
  border-bottom: 1px solid var(--surface-border);
}

.projects-page .pb-data-table thead th:first-child,
.projects-page .pb-data-table tbody td:first-child,
.organizations-page .pb-data-table thead th:first-child,
.organizations-page .pb-data-table tbody td:first-child,
.users-page .pb-data-table thead th:first-child,
.users-page .pb-data-table tbody td:first-child {
  padding-left: var(--admin-content-gutter);
}

.admin-content .pb-data-table code {
  padding: 2px 7px;
  color: var(--text-primary);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  font-size: 13px;
}

.pb-checkbox {
  width: 20px;
  height: 20px;
  display: inline-block;
  flex: 0 0 auto;
  margin: 0;
  border: 2px solid var(--surface-border-strong);
  border-radius: var(--radius-md);
  vertical-align: middle;
}

input.pb-checkbox {
  appearance: none;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  background-color: transparent;
  cursor: pointer;
}

input.pb-checkbox:checked {
  background-color: var(--surface-0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2310b981' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m3.5 8 3 3 6-6'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px;
  border-color: var(--color-success);
}

input.pb-checkbox:focus-visible {
  outline: 2px solid var(--admin-accent);
  outline-offset: 2px;
}

.pb-arrow-column {
  width: calc(30px + var(--admin-content-gutter));
  padding-right: var(--admin-content-gutter) !important;
  color: var(--text-tertiary);
  text-align: right;
}

.pb-data-table .table-actions-col {
  padding-right: var(--admin-content-gutter) !important;
}

.pb-data-table .table-project-cell {
  gap: 0;
  font-weight: 500;
}

.admin-footer {
  justify-content: space-between;
}

.admin-footer-total {
  color: var(--text-secondary) !important;
}

.settings-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-form-gap);
  margin-bottom: var(--admin-form-gap);
}

.admin-body .settings-field-grid .pb-form-field {
  margin-bottom: 0;
}

.settings-markdown-field {
  grid-column: 1 / -1;
}

.settings-icon-field {
  grid-column: 1 / -1;
}

.settings-icon-control {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

.settings-icon-preview {
  display: grid;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  place-items: center;
  padding: var(--space-2);
  background: var(--surface-0);
  border: 1px solid var(--surface-border-strong);
  border-radius: var(--radius-lg);
}

.settings-icon-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.settings-icon-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.admin-body .pb-form-field .settings-icon-actions input[type="file"] {
  width: auto;
  max-width: 100%;
}

.settings-icon-actions input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--text-primary);
  font: inherit;
  font-weight: 600;
  background: var(--surface-0);
  border: 1px solid var(--surface-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.admin-body .pb-form-field.settings-markdown-field textarea {
  --textarea-min-height: 64px;
  --textarea-max-height: 160px;
}

.admin-body .pb-form-field {
  margin-bottom: var(--admin-form-gap);
}

.admin-body :where(.dialog-body, .admin-drawer-body) .form-group {
  margin-bottom: 0;
}

.admin-body .pb-form-field,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface {
  padding: 8px 13px 5px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.admin-body .pb-form-field:focus-within,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface:focus-within {
  background: var(--surface-3);
  border-color: var(--surface-border-strong);
}

.admin-body .pb-form-field label,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface label {
  display: block;
  margin: 0;
  line-height: 16px;
}

.admin-body .pb-form-field input,
.admin-body .pb-form-field input:hover,
.admin-body .pb-form-field input:focus,
.admin-body .pb-form-field select,
.admin-body .pb-form-field select:hover,
.admin-body .pb-form-field select:focus,
.admin-body .pb-form-field textarea,
.admin-body .pb-form-field textarea:hover,
.admin-body .pb-form-field textarea:focus,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface input,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface input:hover,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface input:focus,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface select,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface select:hover,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface select:focus,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface textarea,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface textarea:hover,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface textarea:focus {
  padding: 5px 0 2px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

.admin-body .pb-form-field input:disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.admin-body .pb-form-field input,
.admin-body .pb-form-field select,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface input,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface select {
  min-height: 32px;
}

.admin-body .pb-form-field .select-enhanced-trigger,
.admin-body .pb-form-field .select-enhanced-trigger:hover,
.admin-body .pb-form-field .select-enhanced-trigger:focus-visible,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface .select-enhanced-trigger,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface .select-enhanced-trigger:hover,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface .select-enhanced-trigger:focus-visible {
  min-height: 32px;
  padding: 5px 0 2px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.admin-body .form-group textarea {
  --textarea-min-height: 96px;
  --textarea-max-height: 320px;
  min-height: var(--textarea-min-height);
  max-height: var(--textarea-max-height);
  overflow-y: auto;
  resize: vertical;
}

.admin-body textarea.textarea-description {
  --textarea-min-height: 96px;
  --textarea-max-height: 240px;
}

.admin-body textarea.textarea-content {
  --textarea-min-height: 320px;
  --textarea-max-height: 70vh;
}

.admin-body .pb-form-field .input-prefix-wrap,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface .input-prefix-wrap {
  min-height: 32px;
}

.admin-body .pb-form-field .input-prefix,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface .input-prefix {
  padding: 5px 10px 2px 0;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--surface-border-strong);
  border-radius: 0;
}

.admin-body .pb-form-field .input-prefix-wrap input,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface .input-prefix-wrap input {
  padding-left: 10px;
}

.admin-body :where(.dialog-body, .admin-drawer-body) .form-group > .form-hint,
.admin-body :where(.dialog-body, .admin-drawer-body) .form-group > .version-label-suggestions {
  margin-top: var(--space-1);
}

.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface .select-enhanced-menu {
  top: calc(100% + 5px);
  right: -14px;
  left: -14px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface .select-enhanced-icon {
  transition: transform var(--transition-fast);
}

.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface .select-enhanced.is-open .select-enhanced-icon {
  transform: translateY(-50%) rotate(180deg);
}

.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface:has(.select-enhanced.is-open) {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.admin-body .pb-form-field input:-webkit-autofill,
.admin-body .pb-form-field input:-webkit-autofill:hover,
.admin-body .pb-form-field input:-webkit-autofill:focus,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface input:-webkit-autofill,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface input:-webkit-autofill:hover,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
  caret-color: var(--text-primary);
}

.admin-body .pb-form-field:focus-within input:-webkit-autofill,
.admin-body :where(.dialog-body, .admin-drawer-body) .pb-field-surface:focus-within input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-3) inset;
}

.settings-accordion-body .settings-field-grid {
  gap: 20px;
  margin-bottom: 0;
}

.settings-accordion-body .pb-form-field {
  margin-bottom: 20px;
}

.project-access-tokens,
.settings-custom-domain {
  margin-top: var(--admin-form-gap);
}

.project-access-tokens .settings-accordion-body,
.settings-custom-domain .settings-accordion-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.settings-custom-domain .settings-accordion-body > .form-hint {
  margin: 0;
  overflow-wrap: anywhere;
}

.custom-domain-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.custom-domain-records code {
  overflow-wrap: anywhere;
}

.copy-value {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: copy;
}

.copy-value code {
  min-width: 0;
  transition: background-color 0.15s ease;
}

.copy-value .ph-copy {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.copy-value:hover code,
.copy-value:focus-visible code {
  background: var(--surface-3);
}

.copy-value:hover .ph-copy,
.copy-value:focus-visible .ph-copy {
  color: var(--text-link);
}

.copy-value:focus-visible {
  outline: 2px solid var(--text-link);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .copy-value code {
    transition: none;
  }
}

.project-access-tokens-intro {
  margin: 0;
}

.api-token-created {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.api-token-created > .form-group,
.api-token-form .form-group {
  min-width: 0;
  margin-bottom: 0;
}

.api-token-created > .form-hint {
  margin: 0;
  overflow-wrap: anywhere;
}

.api-token-copy {
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-link);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.api-token-copy:hover {
  color: var(--text-link-hover);
}

.api-token-copy:focus-visible {
  outline: 2px solid var(--text-link);
  outline-offset: 2px;
}

.admin-body .form-group .api-token-value {
  font-family: var(--font-mono);
}

.api-token-table {
  min-width: 0;
  margin: 0;
}

.api-token-table .table-project-cell {
  flex-wrap: wrap;
  gap: var(--space-2);
  overflow-wrap: anywhere;
}

.api-token-form {
  display: grid;
  gap: var(--admin-form-gap);
}

.api-token-form .form-row {
  gap: var(--space-4);
}

.api-token-actions {
  display: flex;
  justify-content: flex-end;
}

.admin-content .pb-record-list {
  width: calc(100% + var(--admin-content-gutter) + var(--admin-content-gutter));
  margin-right: calc(0px - var(--admin-content-gutter));
  margin-left: calc(0px - var(--admin-content-gutter));
  gap: 0;
  border-top: 1px solid var(--surface-border);
}

.pb-record-list .version-card,
.pb-record-list .version-card.page-tree-item {
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--surface-border);
  border-radius: 0;
  box-shadow: none;
}

.pb-record-list .version-card.row-link:hover,
.pb-record-list .version-card.page-tree-item:hover {
  background: var(--surface-1);
  border-color: var(--surface-border);
  box-shadow: none;
  transform: none;
}

.pb-record-list .version-card.page-selected,
.pb-record-list .version-card.page-tree-item.page-selected,
.pb-record-list .version-card.page-tree-item.page-selected .version-card-main {
  background: var(--surface-1);
}

.pb-record-list .version-card-main,
.pb-record-list .version-card.page-tree-item .version-card-main {
  min-height: 61px;
  padding: 8px var(--admin-content-gutter);
  background: transparent;
}

.pb-record-list .version-info > input.pb-checkbox {
  margin-right: var(--space-2);
}

.pb-record-list .version-card.page-tree-item {
  padding-left: calc(var(--depth, 0) * 20px);
}

.pb-record-list .page-tree-actions {
  opacity: 1;
}

.admin-body .btn-row-action {
  width: 35px;
  min-width: 35px;
  min-height: 35px;
  padding: 0;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
}

.admin-body .btn-row-action:hover,
.admin-body .btn-row-action:focus-visible {
  color: var(--text-primary);
  background: var(--surface-2);
  outline: none;
}

@media (max-width: 768px) {
  .admin-page-actions {
    gap: 5px;
  }

  .admin-page-actions .btn {
    min-width: 45px;
    padding: 5px 12px;
  }

  .admin-page-actions .btn span {
    display: none;
  }

  .settings-field-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .pb-data-table th:nth-child(2),
  .pb-data-table td:nth-child(2),
  .pb-data-table th:nth-child(4),
  .pb-data-table td:nth-child(4) {
    display: none;
  }
}

@media (max-width: 768px) {
  .admin-body {
    --admin-content-gutter: 16px;
    --header-height: 50px;
  }

  .admin-topbar {
    gap: 4px;
    padding: 4px 8px;
  }

  .admin-main-nav {
    gap: 2px;
    padding: 0;
    scrollbar-width: none;
  }

  .admin-main-nav::-webkit-scrollbar {
    display: none;
  }

  .admin-nav-link,
  .header-action,
  .header-user {
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
  }

  .header-action {
    width: 40px;
  }

  .header-user span {
    display: none;
  }

  .admin-page {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .admin-sidebar {
    width: min(86vw, var(--sidebar-width));
    min-width: min(86vw, var(--sidebar-width));
    transition: transform var(--transition-base);
  }

  .admin-sidebar .sidebar-content {
    flex: 1;
    overflow-y: auto;
  }

  .admin-body.sidebar-overlay-open {
    overflow: hidden;
  }

  .admin-body .sidebar-backdrop {
    position: fixed;
    inset: var(--header-height) 0 0;
    z-index: calc(var(--z-sticky) - 1);
    display: block;
    width: 100%;
    padding: 0;
    background: rgb(40 25 15 / 42%);
    border: 0;
  }

  .admin-body .sidebar-backdrop[hidden] {
    display: none;
  }

  .admin-content {
    --admin-content-gutter: 16px;
    padding: 16px 16px 20px;
  }

  .admin-page-header {
    min-height: 40px;
    gap: 6px;
    margin-bottom: 16px;
  }

  .sidebar-toggle {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    flex-basis: 40px;
    font-size: 20px;
  }

  .admin-breadcrumbs {
    max-width: none;
    flex: 1;
    gap: 20px;
    font-size: 16px;
    line-height: 20px;
  }

  .admin-breadcrumbs > :last-child {
    max-width: 100%;
  }

  .admin-page-context-actions {
    gap: 0;
  }

  .admin-page-icon-action {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .admin-page-actions {
    gap: 4px;
    margin-left: 0;
  }

  .admin-page-actions .btn {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
  }

  .admin-footer {
    margin: auto -16px -20px;
    padding: 10px 16px;
  }

  .admin-content .pb-data-table {
    width: 100%;
  }

  .admin-content .pb-data-table thead th,
  .admin-content .pb-data-table tbody td {
    padding-right: 10px;
    padding-left: 10px;
  }

  .projects-page .pb-data-table thead th:first-child,
  .projects-page .pb-data-table tbody td:first-child,
  .users-page .pb-data-table thead th:first-child,
  .users-page .pb-data-table tbody td:first-child {
    width: 100%;
    padding-left: var(--admin-content-gutter);
  }

  .pb-data-table .table-project-cell {
    min-width: 0;
  }

  .pb-data-table .table-project-cell > :first-child {
    overflow-wrap: anywhere;
  }

  .pb-arrow-column,
  .pb-data-table .table-actions-col {
    width: auto;
    padding-right: var(--admin-content-gutter) !important;
  }

  .admin-content .pb-record-list {
    width: calc(100% + 32px);
    margin-right: -16px;
    margin-left: -16px;
  }

  .pb-record-list .version-card-main,
  .pb-record-list .version-card.page-tree-item .version-card-main {
    min-height: 60px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
  }

  .pb-record-list .version-info {
    min-width: 0;
    flex: 1;
    gap: 8px;
  }

  .pb-record-list .page-title {
    min-width: 0;
    line-height: 1.35;
  }

  .pb-record-list .version-actions {
    flex: 0 0 auto;
    gap: 0;
  }

  .pb-record-list .version-card.page-tree-item {
    padding-left: calc(var(--depth, 0) * 12px);
  }

  .page-load-more {
    margin: 16px 0 20px;
  }

  .page-selection-toolbar {
    right: 12px;
    bottom: calc(36px + 10px);
    left: 12px;
    width: auto;
    max-width: none;
    min-height: 52px;
    gap: 6px;
    padding: 7px 8px 7px 12px;
    transform: none;
  }

  .page-selection-summary {
    min-width: 0;
    flex: 1;
    white-space: normal;
  }

  .page-selection-toolbar .btn {
    flex: 0 0 auto;
    padding-right: 11px;
    padding-left: 11px;
  }

  .settings-icon-control {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-icon-actions,
  .admin-body .pb-form-field .settings-icon-actions input[type="file"] {
    width: 100%;
  }

  .admin-modal[data-presentation="dialog"] {
    padding: 12px;
  }

  .admin-modal[data-presentation="dialog"] .admin-modal-dialog {
    max-height: calc(100dvh - 24px);
  }

  .admin-dialog .dialog-header .dialog-close,
  .admin-drawer-header .dialog-close {
    display: flex;
  }

  .dialog-body,
  .admin-drawer-body,
  .admin-drawer-body .form-page > form:not(.inline-form),
  .admin-drawer-form,
  .admin-drawer-body .editor-form {
    gap: 20px;
  }

  .admin-drawer-body .editor-content,
  .admin-drawer-body .editor-content .EasyMDEContainer,
  .admin-drawer-body .editor-content .EasyMDEContainer .CodeMirror {
    min-height: 360px;
  }
}

@media (max-width: 520px) {
  .admin-breadcrumbs a {
    display: none;
  }

  .admin-breadcrumbs > *:not(:last-child)::after {
    display: none;
  }

  .pb-record-list .page-slug {
    display: none;
  }

  .form-submit-row {
    margin-top: 20px;
    padding-top: 20px;
  }

  .form-submit-row .btn {
    width: 100%;
  }

  .admin-modal-actions .btn,
  .admin-dialog .dialog-footer .btn {
    flex: 1;
  }

  .auth-app {
    padding: 24px 16px;
  }

  .auth-header {
    margin-bottom: 24px;
  }

  .auth-form {
    gap: 22px;
  }

  .auth-hint {
    margin-top: 8px;
  }
}