:root,
html[data-theme="light"] {
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #182030;
  --muted: #64748b;
  --line: #e2e8f0;
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --danger: #dc2626;
  --ok: #16a34a;
  --soft: #eef2ff;
  --avatar-bg: #e0ecff;
  --header-bg: rgba(255,255,255,.94);
  --shadow: rgba(15, 23, 42, .06);
  --dropdown-shadow: rgba(15, 23, 42, .14);
}

html[data-theme="dark"] {
  --bg: #0f172a;
  --card: #111827;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --line: #334155;
  --brand: #60a5fa;
  --brand-dark: #3b82f6;
  --danger: #f87171;
  --ok: #4ade80;
  --soft: #1e293b;
  --avatar-bg: #1e3a8a;
  --header-bg: rgba(15, 23, 42, .94);
  --shadow: rgba(0, 0, 0, .25);
  --dropdown-shadow: rgba(0, 0, 0, .35);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg: #0f172a;
    --card: #111827;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --line: #334155;
    --brand: #60a5fa;
    --brand-dark: #3b82f6;
    --danger: #f87171;
    --ok: #4ade80;
    --soft: #1e293b;
    --avatar-bg: #1e3a8a;
    --header-bg: rgba(15, 23, 42, .94);
    --shadow: rgba(0, 0, 0, .25);
    --dropdown-shadow: rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
}
.nav {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--text);
}
.logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #22c55e);
}
.nav-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-left: auto;
  align-items: center;
}
.nav-links a, .account button, .button {
  border: 0;
  background: var(--brand);
  color: white;
  padding: 9px 12px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
}
.nav-links a.secondary, .button.secondary {
  color: var(--text);
  background: var(--soft);
}
.account {
  display: flex;
  align-items: center;
  gap: 8px;
}
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--avatar-bg);
  display: inline-grid;
  place-items: center;
  font-weight: 800;
}
main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 18px 60px;
}
.hero, .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 18px 50px var(--shadow);
}
.hero {
  padding: 44px;
  min-height: 260px;
  display: grid;
  align-items: center;
}
.hero h1 {
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1;
  margin: 0 0 12px;
}
.hero p { color: var(--muted); max-width: 760px; font-size: 18px; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.card { padding: 22px; margin-bottom: 18px; }
.card h2, .card h3 { margin-top: 0; }
.muted { color: var(--muted); }
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border-radius: 18px;
  overflow: hidden;
}
th, td {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th { background: var(--soft); color: var(--text); }
form.stack { display: grid; gap: 12px; max-width: 760px; }
label { font-weight: 700; display: grid; gap: 6px; }
input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  background: var(--card);
}
textarea { min-height: 120px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.badge {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e0f2fe;
  font-size: 12px;
  font-weight: 800;
}
.badge.ok { background: #dcfce7; color: #166534; }
.badge.warn { background: #fef3c7; color: #92400e; }
.badge.danger { background: #fee2e2; color: #991b1b; }
.error {
  border: 1px solid #fecaca;
  background: #fff1f2;
  padding: 12px;
  border-radius: 12px;
  color: #991b1b;
}
.footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 18px 40px;
  color: var(--muted);
}
@media (max-width: 720px) {
  .nav { align-items: flex-start; flex-direction: column; }
  .nav-links { margin-left: 0; }
  .hero { padding: 28px; }
}

.logo-img {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  object-fit: contain;
  background: var(--card);
  border: 1px solid var(--line);
}
.site-banner {
  max-width: 1180px;
  margin: 18px auto 0;
  padding: 0 18px;
}
.site-banner img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 35px var(--shadow);
}
.account-menu {
  position: relative;
}
.account-menu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
}
.account-menu summary::-webkit-details-marker { display: none; }
.account-dropdown {
  position: absolute;
  right: 0;
  top: 42px;
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 50px var(--dropdown-shadow);
  padding: 10px;
  display: grid;
  gap: 6px;
  z-index: 100;
}
.account-dropdown a,
.account-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--soft);
  color: var(--text);
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
}
.account-dropdown form { margin: 0; }
.avatar-img {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.avatar.large {
  width: 90px;
  height: 90px;
  font-size: 36px;
}
.profile-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.profile-picture-large {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.language-form select {
  min-width: 120px;
  padding: 9px 12px;
}
.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.toolbar input {
  flex: 1;
  min-width: 240px;
}
.page-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.checkbox-line input { width: auto; }
.top-gap { margin-top: 16px; }
.inline-form { display: inline-block; margin: 8px 0; }
.record-details {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 14px;
  background: var(--card);
}
.record-details summary {
  cursor: pointer;
  font-weight: 700;
}
.branding-preview-logo {
  width: 140px;
  height: 90px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}
.branding-preview-banner {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.content-thumb {
  max-width: 180px;
  max-height: 120px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.content-image {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 18px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
}
@media (max-width: 720px) {
  .account-dropdown {
    left: 0;
    right: auto;
  }
  .toolbar { flex-direction: column; align-items: stretch; }
}


.button.danger,
.nav-links button.danger {
  background: var(--danger);
  color: white;
}

.preview-banner {
  max-width: 1180px;
  margin: 14px auto 0;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--soft);
  color: var(--text);
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.theme-form select {
  min-width: 110px;
  padding: 9px 12px;
}

.account-dropdown hr {
  border: 0;
  border-top: 1px solid var(--line);
  width: 100%;
  margin: 4px 0;
}

.dropdown-label {
  display: block;
  padding: 6px 10px 0;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.menu-form label {
  display: grid;
  gap: 6px;
  color: var(--text);
}

.menu-form select {
  min-width: 100%;
}

button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.record-details .card {
  box-shadow: none;
}

html[data-theme="dark"] .logo-img,
html[data-theme="dark"] .branding-preview-logo {
  background: #0b1220;
}


/* v0.1.3 UI/readability hardening */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --input-bg: #ffffff;
  --input-text: #182030;
  --input-placeholder: #64748b;
  --focus-ring: rgba(37, 99, 235, .28);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --input-bg: #0b1220;
  --input-text: #e5e7eb;
  --input-placeholder: #94a3b8;
  --focus-ring: rgba(96, 165, 250, .32);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    color-scheme: dark;
    --input-bg: #0b1220;
    --input-text: #e5e7eb;
    --input-placeholder: #94a3b8;
    --focus-ring: rgba(96, 165, 250, .32);
  }
}

input,
textarea,
select {
  background: var(--input-bg);
  color: var(--input-text);
  border-color: var(--line);
  caret-color: var(--input-text);
  accent-color: var(--brand);
}

input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

input:focus,
textarea:focus,
select:focus,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--brand);
}

input:disabled,
textarea:disabled,
select:disabled,
input[readonly],
textarea[readonly] {
  opacity: .72;
  color: var(--muted);
  background: var(--soft);
  cursor: not-allowed;
}

option {
  background: var(--card);
  color: var(--text);
}

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill,
html[data-theme="system"] input:-webkit-autofill,
html[data-theme="system"] textarea:-webkit-autofill,
html[data-theme="system"] select:-webkit-autofill {
  -webkit-text-fill-color: var(--input-text);
  box-shadow: 0 0 0 1000px var(--input-bg) inset;
  caret-color: var(--input-text);
}

.language-form select,
.theme-form select,
.menu-form select {
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--line);
}

.account-menu summary {
  color: var(--text);
  border-radius: 999px;
  padding: 4px 8px;
}

.account-menu summary:hover {
  background: var(--soft);
  text-decoration: none;
}

.account-dropdown {
  color: var(--text);
}

.search-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.checkbox-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: auto;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--text);
  white-space: nowrap;
  font-weight: 700;
}

.checkbox-pill input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.checkbox-line {
  color: var(--text);
}

.button.danger {
  background: var(--danger);
  color: white;
}

.danger-zone {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.hidden {
  display: none !important;
}

.visually-hidden-file {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.profile-picture-picker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  cursor: pointer;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  background: var(--soft);
}

.profile-picture-picker:hover {
  border-color: var(--brand);
}

.profile-picture-picker .profile-picture-large,
.profile-picture-picker .avatar.large {
  flex: 0 0 auto;
}

.compact-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.site-banner,
.banner-editor-preview {
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 35px var(--shadow);
  background: var(--soft);
}

.site-banner {
  max-width: 1180px;
  margin: 18px auto 0;
  padding: 0;
  height: var(--banner-height, 220px);
}

.banner-editor-preview {
  width: 100%;
  height: var(--banner-height, 220px);
  margin: 12px 0 18px;
}

.site-banner img,
.banner-editor-preview img {
  width: 100%;
  height: 100%;
  object-position: var(--banner-pos-x, 50%) var(--banner-pos-y, 50%);
  transform: scale(var(--banner-scale, 1));
  transform-origin: var(--banner-pos-x, 50%) var(--banner-pos-y, 50%);
  display: block;
}

.site-banner img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
}

.banner-fit-cover { object-fit: cover; }
.banner-fit-contain { object-fit: contain; }
.banner-fit-fill { object-fit: fill; }
.banner-fit-none { object-fit: none; }

.branding-preview-banner {
  object-fit: contain;
  background: var(--soft);
}

.record-details summary {
  color: var(--text);
}

@media (max-width: 720px) {
  .search-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .checkbox-pill {
    justify-content: flex-start;
  }
}


/* v0.1.3-r3: keep live banner rendering consistent with Branding preview. */
.site-banner,
.banner-editor-preview {
  height: var(--banner-height, 220px);
  padding: 0;
  overflow: hidden;
}

.site-banner .banner-image,
.banner-editor-preview .banner-image {
  width: 100%;
  height: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-position: var(--banner-pos-x, 50%) var(--banner-pos-y, 50%);
  transform: scale(var(--banner-scale, 1));
  transform-origin: var(--banner-pos-x, 50%) var(--banner-pos-y, 50%);
  display: block;
}


/* v0.1.3-r4: banner scaling modes.
   These rules remove natural-size rendering and make the live banner use the
   same grow/shrink/fill behavior as the Branding preview. */
.site-banner,
.banner-editor-preview {
  position: relative;
  height: var(--banner-height, 220px);
  padding: 0;
  overflow: hidden;
}

.site-banner .banner-image,
.banner-editor-preview .banner-image {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: block;
  max-width: none;
  max-height: none;
}

.banner-fit-cover,
.banner-fit-fill-width,
.banner-fit-manual {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--banner-pos-x, 50%) var(--banner-pos-y, 50%);
  transform: scale(var(--banner-scale, 1));
  transform-origin: var(--banner-pos-x, 50%) var(--banner-pos-y, 50%);
}

.banner-fit-contain,
.banner-fit-fill-height {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: var(--banner-pos-x, 50%) var(--banner-pos-y, 50%);
  transform: scale(var(--banner-scale, 1));
  transform-origin: var(--banner-pos-x, 50%) var(--banner-pos-y, 50%);
}

.banner-fit-stretch {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: var(--banner-pos-x, 50%) var(--banner-pos-y, 50%);
  transform: scale(var(--banner-scale, 1));
  transform-origin: var(--banner-pos-x, 50%) var(--banner-pos-y, 50%);
}

.banner-mode-fill-width .banner-image {
  object-fit: cover;
}

.banner-mode-fill-height .banner-image {
  object-fit: contain;
}

.banner-mode-manual .banner-image {
  object-fit: cover;
}


/* v0.1.3-r5: banner original-size mode.
   Shows the uploaded banner at its natural pixel size while keeping the banner
   box height, position controls, and optional manual zoom active. */
.banner-fit-original {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: none;
  position: absolute;
  left: var(--banner-pos-x, 50%);
  top: var(--banner-pos-y, 50%);
  transform: translate(-50%, -50%) scale(var(--banner-scale, 1));
  transform-origin: center center;
}

.banner-mode-original .banner-image {
  object-fit: none;
}

/* v0.1.3-r6: authoritative banner renderer.
   Preview and live banners use the same container and mode classes. */
.site-banner,
.banner-editor-preview {
  position: relative;
  overflow: hidden;
  height: var(--banner-height, 220px);
  padding: 0;
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 35px var(--shadow);
  background: var(--soft);
}

.site-banner {
  max-width: 1180px;
  margin: 18px auto 0;
}

.site-banner .banner-image,
.banner-editor-preview .banner-image {
  display: block;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: none !important;
  max-height: none !important;
}

.site-banner.banner-mode-cover .banner-image,
.banner-editor-preview.banner-mode-cover .banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--banner-pos-x, 50%) var(--banner-pos-y, 50%);
  transform: none;
}

.site-banner.banner-mode-contain .banner-image,
.banner-editor-preview.banner-mode-contain .banner-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: var(--banner-pos-x, 50%) var(--banner-pos-y, 50%);
  transform: none;
}

.site-banner.banner-mode-fill-width .banner-image,
.banner-editor-preview.banner-mode-fill-width .banner-image {
  position: absolute;
  width: 100%;
  height: auto;
  left: var(--banner-pos-x, 50%);
  top: var(--banner-pos-y, 50%);
  transform: translate(-50%, -50%);
  object-fit: contain;
}

.site-banner.banner-mode-fill-height .banner-image,
.banner-editor-preview.banner-mode-fill-height .banner-image {
  position: absolute;
  width: auto;
  height: 100%;
  left: var(--banner-pos-x, 50%);
  top: var(--banner-pos-y, 50%);
  transform: translate(-50%, -50%);
  object-fit: contain;
}

.site-banner.banner-mode-stretch .banner-image,
.banner-editor-preview.banner-mode-stretch .banner-image {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center center;
  transform: none;
}

.site-banner.banner-mode-manual .banner-image,
.banner-editor-preview.banner-mode-manual .banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--banner-pos-x, 50%) var(--banner-pos-y, 50%);
  transform: scale(var(--banner-scale, 1));
  transform-origin: var(--banner-pos-x, 50%) var(--banner-pos-y, 50%);
}

.site-banner.banner-mode-original .banner-image,
.banner-editor-preview.banner-mode-original .banner-image {
  position: absolute;
  width: auto;
  height: auto;
  left: var(--banner-pos-x, 50%);
  top: var(--banner-pos-y, 50%);
  transform: translate(-50%, -50%) scale(var(--banner-scale, 1));
  transform-origin: center center;
  object-fit: none;
}

.banner-alignment-controls {
  align-items: center;
  gap: 8px;
}

.banner-alignment-controls .button {
  padding: 7px 10px;
  font-size: 12px;
}

.banner-help {
  margin: -4px 0 6px;
}



/* v0.1.3-r7: banner editor UI cleanup.
   Automatic modes stay simple; manual sliders and alignment are only visible in Manual mode. */
.banner-manual-controls {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--soft) 58%, transparent);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.banner-manual-controls[hidden] {
  display: none !important;
}

.banner-manual-controls:focus-within {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.banner-help {
  line-height: 1.45;
}

.banner-editor-preview {
  transition: height .18s ease;
}


.under-construction-hero {
  min-height: 45vh;
  align-items: center;
}

.notice {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
}

.notice.ok {
  background: rgba(34, 197, 94, 0.10);
}

.notice.warn {
  background: rgba(245, 158, 11, 0.12);
}

html[data-theme="dark"] .notice.ok,
html[data-theme="dark"] .notice.warn {
  color: var(--text);
}


.help-text{display:block;margin-top:.35rem;font-size:.85rem;color:var(--muted)}


/* v0.1.3-uc5 cleanup */
.nav-links a.secondary,
.button.secondary {
  color: var(--text);
  background: var(--soft);
}

.nav-links a:not(.secondary) {
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
}

.search-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) max-content max-content;
  align-items: center;
  gap: 10px;
}

.search-toolbar input {
  min-width: 280px;
}

.checkbox-pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: max-content !important;
  min-width: 0;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--text);
  white-space: nowrap;
  font-weight: 700;
  justify-self: start;
}

.checkbox-pill input,
.checkbox-line input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand);
}

.create-details {
  display: inline-block;
  width: auto;
}

.create-details > summary.button,
.compact-summary {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: max-content;
}

.badge {
  color: #0f172a;
}

.badge.neutral {
  background: var(--soft);
  color: var(--text);
  border: 1px solid var(--line);
}

html[data-theme="dark"] .badge:not(.ok):not(.warn):not(.danger):not(.neutral) {
  background: #dbeafe;
  color: #0f172a;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .badge:not(.ok):not(.warn):not(.danger):not(.neutral) {
    background: #dbeafe;
    color: #0f172a;
  }
}

@media (max-width: 720px) {
  .search-toolbar {
    grid-template-columns: 1fr;
  }
  .search-toolbar input,
  .checkbox-pill,
  .search-toolbar .button {
    width: 100% !important;
    max-width: none;
  }
  .checkbox-pill {
    justify-content: flex-start;
  }
}


.published-preview-banner {
  border-bottom: 1px solid var(--line);
}



/* 0.1.4-r2 merge/preservation: preserves UC5 preview while keeping v0.1.4 cleanup styles. */


/* v0.1.4-r3 public-page formatting */
.public-page-hero {
  align-items: start;
}

.public-content {
  display: grid;
  gap: 14px;
  max-width: 780px;
  margin-top: 14px;
}

.public-content h2 {
  margin: 14px 0 0;
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.15;
}

.public-content p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
  white-space: pre-line;
}

.public-content ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.public-content li + li {
  margin-top: 4px;
}

.formatting-example {
  white-space: pre-wrap;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--text);
  border-radius: 14px;
  padding: 14px;
  overflow-x: auto;
}


/* v0.1.4-r6 polish: audit/software log and legal page cleanup */
.legal-page-hero .badge {
  display: none;
}

.legal-content {
  max-width: 860px;
}

.audit-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  align-items: center;
}

.audit-tabs .badge {
  margin-left: 6px;
}

.audit-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  align-items: end;
}

.audit-filter-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: end;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.audit-details {
  max-width: 360px;
  word-break: break-word;
  color: var(--muted);
}

.software-log-card h2 {
  margin-bottom: 4px;
}

.software-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.software-meta div {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  background: var(--soft);
}

.software-meta dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 800;
}

.software-meta dd {
  margin: 4px 0 0;
  word-break: break-word;
}

.software-list {
  color: var(--muted);
  line-height: 1.6;
  padding-left: 1.2rem;
}

.software-list li + li {
  margin-top: 4px;
}


.compact-form {
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.compact-form select,
.compact-form input {
  min-width: 14rem;
}

.record-details summary .badge {
  margin-left: 0.35rem;
}


/* v0.1.4-r8 UI layout polish: compact filters, aligned office column and cleaner create panels */
.compact-search-toolbar {
  grid-template-columns: minmax(280px, 1fr) max-content max-content;
  gap: 10px;
  align-items: center;
}

.archive-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: max-content !important;
  min-width: max-content;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--text);
  white-space: nowrap;
  font-weight: 800;
  justify-self: start;
}

.archive-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand);
}

.create-card {
  padding: 16px 22px;
}

.create-panel {
  display: block;
  width: 100%;
}

.create-panel > summary.button,
.create-panel > summary.compact-summary {
  display: inline-flex;
  width: auto;
  max-width: max-content;
  margin: 0;
}

.create-panel[open] > summary {
  margin-bottom: 14px;
}

.create-panel-body {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--soft) 52%, transparent);
  padding: 18px;
}

.create-panel-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.create-panel-header h2,
.create-panel-header h3 {
  margin: 0 0 4px;
}

.create-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px 16px;
  max-width: none !important;
}

.create-form-grid .span-2 {
  grid-column: 1 / -1;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.users-table {
  table-layout: auto;
  min-width: 980px;
}

.users-table .col-office {
  width: 150px;
}

.users-table .col-status {
  width: 110px;
}

.users-table .col-actions {
  width: 120px;
}

.office-cell {
  white-space: nowrap;
  min-width: 130px;
}

@media (max-width: 780px) {
  .compact-search-toolbar {
    grid-template-columns: 1fr;
  }

  .compact-search-toolbar input,
  .compact-search-toolbar .button,
  .archive-toggle {
    width: 100% !important;
    max-width: none;
  }

  .archive-toggle {
    justify-content: flex-start;
  }

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

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

  .create-panel-body {
    padding: 14px;
  }
}


/* v0.2.0 Projects module */
.nowrap {
  white-space: nowrap;
}

.project-summary {
  max-width: 360px;
}

.project-doc-content {
  white-space: pre-wrap;
}

.project-status-line {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}



/* v0.2.1 Archive filter layout cleanup */
.archive-search-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.archive-search-main {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) max-content;
  gap: 10px;
  align-items: center;
}

.archive-search-main input {
  width: 100%;
  min-width: 0;
}

.archive-search-options {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.archive-search-options .archive-toggle {
  min-height: 36px;
  padding: 7px 10px;
  justify-self: start;
}

@media (max-width: 780px) {
  .archive-search-main {
    grid-template-columns: 1fr;
  }

  .archive-search-main .button {
    width: 100%;
  }

  .archive-search-options .archive-toggle {
    width: 100% !important;
    max-width: none;
    justify-content: flex-start;
  }
}


/* v0.2.2-r2 Document PDF Preview Completion */
.pdf-preview-frame {
  width: 100%;
  min-height: 78vh;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
}

@media (max-width: 780px) {
  .pdf-preview-frame {
    min-height: 65vh;
  }
}

/* v0.2.3 simple roadmap page */
.roadmap-help {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}
.roadmap-help p {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
  padding: 10px 12px;
}
.roadmap-table td {
  vertical-align: top;
}
.roadmap-notes {
  color: var(--muted);
  max-width: 420px;
}
.nowrap {
  white-space: nowrap;
}
.badge.neutral {
  background: var(--soft);
  color: var(--text);
  border: 1px solid var(--line);
}


.metric-card {
  display: block;
  color: var(--text);
  text-decoration: none;
}
.metric-card:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
.nowrap {
  white-space: nowrap;
}


/* v0.2.5-r2 Support assignment, archive-filter and language UI fixes */
.project-number-cell {
  white-space: nowrap;
  min-width: 118px;
  font-variant-numeric: tabular-nums;
}

.toolbar .checkbox-pill,
.toolbar .checkbox-line,
.toolbar .archive-toggle,
.archive-search-options .archive-toggle {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: max-content !important;
  min-width: max-content !important;
  max-width: max-content;
}

.toolbar .checkbox-pill input,
.toolbar .checkbox-line input,
.toolbar .archive-toggle input,
.archive-search-options .archive-toggle input {
  flex: 0 0 auto !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  margin: 0;
}

.toolbar .checkbox-pill,
.toolbar .checkbox-line {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--text);
  white-space: nowrap;
  font-weight: 800;
}

.language-form {
  display: inline-flex;
  align-items: center;
}

@media (max-width: 780px) {
  .toolbar .checkbox-pill,
  .toolbar .checkbox-line,
  .toolbar .archive-toggle,
  .archive-search-options .archive-toggle {
    width: 100% !important;
    max-width: none;
  }

  .project-number-cell {
    min-width: 118px;
  }
}



/* v0.2.5-r3 button layout and protected document actions */
.button,
summary.button,
.actions .button,
.form-actions .button,
.card > details > summary.button,
.create-panel > summary.button {
  flex: 0 0 auto;
  width: auto;
}

summary.button,
.compact-summary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  max-width: max-content;
}

.create-panel {
  width: auto;
  max-width: 100%;
}

.create-panel[open] {
  display: block;
  width: 100%;
}

.no-margin {
  margin: 0;
}

.actions form.no-margin,
td.actions form.no-margin {
  display: inline-flex;
}

td.actions {
  gap: 8px;
  align-items: center;
}


/* v0.2.8-r4: keep shared header on one row on desktop and restore clickable dashboard metric cards. */
.nav {
  flex-wrap: nowrap;
  gap: 10px;
}

.logo {
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
  text-decoration: none;
}

.logo span {
  white-space: nowrap;
}

.nav-links {
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.nav-links::-webkit-scrollbar {
  display: none;
}

.nav-links a,
.nav-links button,
.account button,
.button {
  white-space: nowrap;
}

.account-menu {
  flex: 0 0 auto;
}

.account-menu summary {
  max-width: 220px;
  white-space: nowrap;
}

.account-menu summary span:not(.avatar) {
  min-width: 0;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.language-form {
  flex: 0 0 auto;
  margin-left: 4px;
  white-space: nowrap;
}

.language-form select {
  max-width: 130px;
}

.metric-card,
.dashboard-metric-card {
  display: block;
  color: var(--text);
  text-decoration: none;
}

.metric-card:hover,
.dashboard-metric-card:hover {
  text-decoration: none;
  transform: translateY(-1px);
  border-color: var(--brand);
}

.metric-card:focus-visible,
.dashboard-metric-card:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .35);
  outline-offset: 3px;
}

.metric-card .muted,
.dashboard-metric-card .muted {
  color: var(--muted);
}

@media (max-width: 720px) {
  .nav {
    align-items: flex-start;
    flex-direction: column;
  }

  .nav-links {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .language-form {
    margin-left: 0;
  }
}

/* v0.2.8-r5: keep the account menu clickable and keep the language selector readable in dense headers. */
.header {
  overflow: visible;
}

.nav {
  overflow: visible;
}

.nav-links {
  overflow: visible;
  align-items: center;
}

.nav-links > a,
.nav-links > form,
.nav-links > details {
  flex: 0 0 auto;
}

.account-menu {
  position: relative;
  z-index: 70;
}

.account-menu summary {
  position: relative;
  z-index: 2;
  max-width: 240px;
  min-width: 0;
  pointer-events: auto;
  user-select: none;
}

.account-menu summary .avatar-img,
.account-menu summary .avatar {
  flex: 0 0 auto;
}

.account-menu summary span:not(.avatar) {
  max-width: 180px;
}

.account-dropdown {
  z-index: 2000;
}

.language-form {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 132px;
}

.language-form select {
  width: 132px;
  min-width: 132px;
  max-width: none;
  padding-right: 32px;
}

@media (max-width: 1040px) {
  .nav {
    gap: 8px;
  }

  .nav-links {
    gap: 6px;
  }

  .nav-links a,
  .nav-links button,
  .button {
    padding-left: 9px;
    padding-right: 9px;
    font-size: 13px;
  }

  .account-menu summary {
    max-width: 190px;
  }

  .account-menu summary span:not(.avatar) {
    max-width: 135px;
  }

  .language-form {
    min-width: 124px;
  }

  .language-form select {
    width: 124px;
    min-width: 124px;
  }
}

@media (max-width: 720px) {
  .nav-links {
    overflow: visible;
  }

  .account-menu summary,
  .account-menu summary span:not(.avatar) {
    max-width: 100%;
  }

  .language-form {
    min-width: 0;
  }

  .language-form select {
    width: auto;
    min-width: 124px;
  }
}

/* v0.2.8-r6-r3: header regression lock.
   Purpose: keep logo, primary navigation, account menu and language selector in stable zones
   so dense Staff/Admin headers do not re-wrap old fixed bugs back into production. */
.header {
  overflow: visible;
}

.nav {
  max-width: 1320px;
  padding: 10px 18px;
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  overflow: visible;
}

.logo {
  grid-column: 1;
  min-width: 0;
  max-width: 220px;
  white-space: nowrap;
  text-decoration: none;
  gap: 8px;
}

.logo-img,
.logo-mark {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

.logo-text {
  display: inline-block;
  min-width: 0;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.05;
}

.nav-links {
  grid-column: 2;
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding: 2px 0;
}

.nav-links > a,
.nav-links > form,
.nav-links > details,
.nav-links > button {
  flex: 0 0 auto;
}

.nav .nav-links a,
.nav .nav-links button {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.nav-tools {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: max-content;
  white-space: nowrap;
  overflow: visible;
  position: relative;
  z-index: 90;
}

.nav-tools .account-menu {
  flex: 0 0 auto;
  position: relative;
  z-index: 100;
}

.nav-tools .account-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  min-width: 0;
  white-space: nowrap;
  pointer-events: auto;
  user-select: none;
}

.nav-tools .account-menu summary .avatar-img,
.nav-tools .account-menu summary .avatar {
  flex: 0 0 auto;
}

.nav-tools .account-menu summary span:not(.avatar) {
  min-width: 0;
  max-width: 165px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-tools .account-dropdown {
  top: calc(100% + 8px);
  right: 0;
  z-index: 3000;
}

.nav-tools .language-form {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 132px;
  margin: 0;
  white-space: nowrap;
}

.nav-tools .language-form select {
  width: 132px;
  min-width: 132px;
  max-width: 132px;
  padding: 8px 30px 8px 10px;
}

@media (max-width: 1180px) {
  .nav {
    grid-template-columns: minmax(128px, auto) minmax(0, 1fr) auto;
    gap: 8px;
  }

  .logo-text {
    max-width: 135px;
  }

  .nav .nav-links a,
  .nav .nav-links button {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 12px;
  }

  .nav-tools .account-menu summary {
    max-width: 170px;
  }

  .nav-tools .account-menu summary span:not(.avatar) {
    max-width: 120px;
  }

  .nav-tools .language-form {
    min-width: 124px;
  }

  .nav-tools .language-form select {
    width: 124px;
    min-width: 124px;
    max-width: 124px;
  }
}

@media (max-width: 920px) {
  .nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    flex-direction: initial;
  }

  .logo {
    grid-column: 1;
    max-width: 100%;
  }

  .nav-tools {
    grid-column: 2;
    justify-self: end;
  }

  .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin-left: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

@media (max-width: 640px) {
  .nav {
    padding-left: 14px;
    padding-right: 14px;
  }

  .logo-text {
    max-width: 120px;
  }

  .nav-tools {
    gap: 6px;
  }

  .nav-tools .account-menu summary span:not(.avatar) {
    display: none;
  }

  .nav-tools .language-form {
    min-width: 116px;
  }

  .nav-tools .language-form select {
    width: 116px;
    min-width: 116px;
    max-width: 116px;
  }
}


/* v0.2.8-r6-r4: public/login UI cleanup.
   Keep the r3 header regression lock intact while removing duplicate construction-card Login CTA
   and making the login form submit button compact instead of grid-stretched. */
.auth-card {
  max-width: 760px;
}

.auth-form .auth-submit {
  width: auto;
  min-width: 118px;
  justify-self: start;
  align-self: center;
  padding-left: 18px;
  padding-right: 18px;
}

@media (max-width: 520px) {
  .auth-form .auth-submit {
    width: 100%;
    justify-self: stretch;
  }
}


/* v0.2.8-r6-r5: German language sweep formatting guard.
   Keep longer German UI labels readable without weakening r3/r4 header/login fixes. */
.table-wrap {
  overflow-x: auto;
}

th,
td {
  overflow-wrap: anywhere;
}

.project-number-cell,
.nowrap,
.badge,
.button,
.nav .nav-links a,
.nav .nav-links button,
.archive-toggle,
.checkbox-pill {
  overflow-wrap: normal;
}

.archive-search-form,
.search-toolbar,
.toolbar,
.form-actions,
.actions {
  min-width: 0;
}

.archive-search-main input,
.search-toolbar input,
.toolbar input {
  min-width: 0;
}

/* v0.2.9-r2 mobile banner layout
   Keep desktop banner controls unchanged. On phones, prevent the uploaded
   banner from sitting inside an oversized fixed-height card with large
   empty space above and below the image. */
@media (max-width: 640px) {
  .site-banner {
    height: clamp(96px, 28vw, 130px) !important;
    min-height: 96px;
    margin-top: 12px;
    border-radius: 20px;
  }

  .site-banner .banner-image,
  .site-banner.banner-mode-cover .banner-image,
  .site-banner.banner-mode-contain .banner-image,
  .site-banner.banner-mode-fill-width .banner-image,
  .site-banner.banner-mode-fill-height .banner-image,
  .site-banner.banner-mode-stretch .banner-image,
  .site-banner.banner-mode-manual .banner-image,
  .site-banner.banner-mode-original .banner-image {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: var(--mobile-banner-pos-x, var(--banner-pos-x, 50%)) var(--mobile-banner-pos-y, var(--banner-pos-y, 50%)) !important;
    transform: none !important;
    transform-origin: center center !important;
  }
}

@media (max-width: 420px) {
  .site-banner {
    height: clamp(88px, 27vw, 116px) !important;
    min-height: 88px;
    border-radius: 18px;
  }
}


/* v0.2.9-r3 mobile banner focus preview.
   Admins can choose a mobile-only crop/focus point for the existing banner.
   Desktop banner rendering and uploaded files stay unchanged. */
.mobile-banner-preview-block {
  margin: 16px 0 18px;
}

.mobile-banner-preview-block h3,
.mobile-banner-focus-controls h3 {
  margin-bottom: 6px;
}

.mobile-banner-preview-frame {
  width: min(100%, 390px);
  height: 140px;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--soft);
  box-shadow: 0 12px 35px var(--shadow);
}

.mobile-banner-preview-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--mobile-banner-pos-x, 50%) var(--mobile-banner-pos-y, 50%);
}

.mobile-banner-focus-controls {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--soft) 58%, transparent);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.mobile-focus-presets {
  align-items: center;
  gap: 8px;
}

.mobile-focus-presets .button {
  padding: 7px 10px;
  font-size: 12px;
}

@media (max-width: 640px) {
  .mobile-banner-preview-frame {
    width: 100%;
    height: clamp(96px, 28vw, 130px);
    border-radius: 20px;
  }
}

@media (max-width: 420px) {
  .mobile-banner-preview-frame {
    height: clamp(88px, 27vw, 116px);
    border-radius: 18px;
  }
}


/* v0.2.9-r4 mobile admin/staff list card layout.
   Desktop tables stay unchanged. On phones, tables with headings become stacked
   cards with label/value rows so content no longer breaks letter-by-letter. */
@media (max-width: 760px) {
  main .table-wrap {
    overflow-x: visible;
  }

  main th,
  main td {
    word-break: normal;
    overflow-wrap: break-word;
  }

  main table.mobile-card-table,
  main table.mobile-card-table tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
    table-layout: auto;
    border-collapse: separate;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  main table.mobile-card-table colgroup,
  main table.mobile-card-table .mobile-table-header-row {
    display: none !important;
  }

  main table.mobile-card-table tr {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 10px 28px var(--shadow);
    overflow: hidden;
  }

  main table.mobile-card-table td {
    display: grid;
    grid-template-columns: minmax(104px, 36%) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    width: 100%;
    min-width: 0 !important;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    white-space: normal;
    line-height: 1.35;
  }

  main table.mobile-card-table td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  main table.mobile-card-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-weight: 800;
    font-size: 12px;
    line-height: 1.25;
    text-transform: none;
    word-break: normal;
    overflow-wrap: break-word;
  }

  main table.mobile-card-table td[data-label=""] {
    display: block;
  }

  main table.mobile-card-table td[data-label=""]::before {
    display: none;
    content: "";
  }

  main table.mobile-card-table td > *,
  main table.mobile-card-table td a,
  main table.mobile-card-table td span,
  main table.mobile-card-table td strong {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }

  main table.mobile-card-table .actions {
    margin-top: 0;
    gap: 8px;
  }

  main table.mobile-card-table .button {
    white-space: nowrap;
  }

  main table.mobile-card-table .badge {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  main table.mobile-card-table .nowrap,
  main table.mobile-card-table .office-cell,
  main table.mobile-card-table .project-number-cell {
    white-space: normal;
    min-width: 0;
  }

  main table.mobile-card-table.users-table {
    min-width: 0 !important;
  }
}

@media (max-width: 420px) {
  main table.mobile-card-table tr {
    padding: 11px;
    border-radius: 16px;
  }

  main table.mobile-card-table td {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 9px;
  }

  main table.mobile-card-table td::before {
    font-size: 11px;
  }
}

/* v0.2.9-r5: mobile header/account menu containment.
   Keep desktop header unchanged. On phones, keep the account dropdown inside
   the viewport and give the brand name enough controlled space before it
   falls back to an ellipsis. */
@media (max-width: 640px) {
  .nav {
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
  }

  .logo {
    gap: 6px;
    max-width: 100%;
    min-width: 0;
  }

  .logo-text {
    max-width: clamp(118px, calc(100vw - 234px), 170px);
    font-size: 15px;
    line-height: 1.05;
  }

  .nav-tools {
    gap: 6px;
    min-width: 0;
    overflow: visible;
  }

  .nav-tools .account-menu {
    position: static;
  }

  .nav-tools .account-dropdown {
    position: fixed;
    top: 58px;
    right: 12px;
    left: auto;
    width: min(280px, calc(100vw - 24px));
    min-width: 0;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 76px);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 5000;
  }

  .account-dropdown a,
  .account-dropdown button,
  .account-dropdown label,
  .account-dropdown strong {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
  }

  .account-dropdown select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 380px) {
  .logo-text {
    max-width: clamp(92px, calc(100vw - 228px), 145px);
    font-size: 14px;
  }

  .nav-tools .language-form {
    min-width: 108px;
  }

  .nav-tools .language-form select {
    width: 108px;
    min-width: 108px;
    max-width: 108px;
  }
}


/* v0.2.9-r6: mobile header language placement and compact mobile cards.
   Desktop header/table layout remains unchanged. On phones, the language selector
   moves out of the crowded header and long list-table details are hidden until
   the user opens the record. */
.account-language-form,
.footer-language-form {
  display: none;
}

.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-language-form label,
.account-language-form label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.footer-language-form select,
.account-language-form select {
  min-width: 132px;
}

@media (max-width: 640px) {
  .nav {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .nav-tools .header-language-form {
    display: none !important;
  }

  .account-language-form {
    display: block;
  }

  .logo {
    max-width: calc(100vw - 96px);
  }

  .logo-text {
    max-width: min(260px, calc(100vw - 116px));
    font-size: 15px;
  }

  .nav-tools {
    min-width: auto;
  }

  .footer-main {
    align-items: flex-start;
  }

  .footer-language-form {
    display: block;
    width: 100%;
    margin-top: 10px;
  }

  .footer-language-form label {
    max-width: 220px;
  }

  .footer-language-form select {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .logo-text {
    max-width: min(230px, calc(100vw - 108px));
    font-size: 14px;
  }
}

@media (max-width: 760px) {
  main table.mobile-compact-card-table tr {
    padding: 12px 13px;
  }

  main table.mobile-compact-card-table td[data-mobile-compact-hidden="true"] {
    display: none !important;
  }

  main table.mobile-compact-card-table td {
    grid-template-columns: minmax(82px, 32%) minmax(0, 1fr);
    gap: 9px;
  }

  main table.mobile-compact-card-table td::before {
    font-size: 11px;
  }

  main table.mobile-compact-card-table .mobile-card-secondary-detail {
    display: none !important;
  }

  main table.mobile-compact-card-table td[data-label=""] {
    padding-top: 10px;
  }

  main table.mobile-compact-card-table td[data-label=""] .actions,
  main table.mobile-compact-card-table td[data-label=""] form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  main table.mobile-compact-card-table td[data-label=""] .button,
  main table.mobile-compact-card-table td[data-label=""] button {
    width: auto;
    max-width: 100%;
  }

  main table.mobile-table-companies td,
  main table.mobile-table-projects td,
  main table.mobile-table-support td,
  main table.mobile-table-documents td,
  main table.mobile-table-users td,
  main table.mobile-table-templates td {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  main table.mobile-table-companies tr,
  main table.mobile-table-projects tr,
  main table.mobile-table-support tr,
  main table.mobile-table-documents tr,
  main table.mobile-table-users tr,
  main table.mobile-table-templates tr {
    box-shadow: 0 8px 22px var(--shadow);
  }
}


/* v0.2.9-r7: mobile dense list overview.
   Desktop tables remain unchanged. On phones, list pages show dense overview
   cards instead of tall label/value cards. Full detail remains available after
   opening the record. */
@media (max-width: 760px) {
  main table.mobile-dense-list-table tr {
    display: block;
    padding: 12px 13px;
    margin-bottom: 10px;
    border-radius: 16px;
  }

  main table.mobile-dense-list-table td {
    display: block;
    width: 100%;
    padding: 0;
    border-bottom: 0;
    line-height: 1.28;
  }

  main table.mobile-dense-list-table td::before {
    display: none !important;
    content: "" !important;
  }

  main table.mobile-dense-list-table td[data-mobile-role="primary"] {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.01em;
    margin-bottom: 5px;
  }

  main table.mobile-dense-list-table td[data-mobile-role="secondary"] {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    margin-top: 2px;
  }

  main table.mobile-dense-list-table td[data-mobile-role="secondary"][data-mobile-inline-after="true"] {
    margin-top: 1px;
  }

  main table.mobile-dense-list-table td[data-mobile-role="status"],
  main table.mobile-dense-list-table td[data-mobile-role="priority"] {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: 100%;
    margin-top: 7px;
    margin-right: 6px;
    vertical-align: middle;
  }

  main table.mobile-dense-list-table td[data-mobile-role="status"] .badge,
  main table.mobile-dense-list-table td[data-mobile-role="priority"] .badge {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
  }

  main table.mobile-dense-list-table td[data-mobile-role="action"] {
    margin-top: 8px;
  }

  main table.mobile-dense-list-table td[data-mobile-role="action"] .actions,
  main table.mobile-dense-list-table td[data-mobile-role="action"] form {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
  }

  main table.mobile-dense-list-table td[data-mobile-role="action"] .button,
  main table.mobile-dense-list-table td[data-mobile-role="action"] button {
    width: auto;
    max-width: 100%;
    min-height: 34px;
    padding: 8px 11px;
    font-size: 12px;
    white-space: nowrap;
  }

  main table.mobile-dense-list-table td[data-mobile-role="hidden"],
  main table.mobile-dense-list-table td[data-mobile-compact-hidden="true"] {
    display: none !important;
  }

  main table.mobile-dense-list-table td > *,
  main table.mobile-dense-list-table td a,
  main table.mobile-dense-list-table td span,
  main table.mobile-dense-list-table td strong {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  main table.mobile-dense-list-table .mobile-card-secondary-detail {
    display: none !important;
  }

  main table.mobile-dense-list-table .badge {
    width: auto;
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  main table.mobile-dense-list-table tr {
    padding: 11px 12px;
  }

  main table.mobile-dense-list-table td[data-mobile-role="primary"] {
    font-size: 15px;
  }

  main table.mobile-dense-list-table td[data-mobile-role="secondary"] {
    font-size: 11px;
  }
}


/* v0.3.0-r1: project progress percent
   Add readable progress meters on project list/detail pages without changing
   existing desktop table/mobile dense card behavior. */
.progress-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.progress-label {
  font-weight: 800;
  white-space: nowrap;
}

.progress-meter {
  width: 100%;
  min-width: 120px;
  height: 12px;
  border-radius: 999px;
  background: var(--soft);
  border: 1px solid var(--line);
  overflow: hidden;
}

.progress-meter.compact {
  width: 112px;
  min-width: 76px;
  height: 10px;
}

.progress-meter-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), #22c55e);
}

.project-progress-block {
  margin: 12px 0 16px;
}

.progress-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.project-progress-cell {
  min-width: 150px;
}

@media (max-width: 760px) {
  main table.mobile-dense-list-table .progress-inline {
    justify-content: flex-start;
    gap: 7px;
    margin-top: 3px;
  }

  main table.mobile-dense-list-table .progress-meter.compact {
    width: min(140px, 48vw);
  }

  .project-progress-cell {
    min-width: 0;
  }
}



/* v0.3.0-r2/r5: project progress desktop table layout fix.
   r5 combines Number + Customer on the main Projects/Projekte list only.
   Progress/Fortschritt stays in its own column. Company/detail linked tables
   are intentionally unchanged. */
.project-list-table {
  min-width: 980px;
}

.project-list-table th,
.project-list-table td {
  overflow-wrap: normal;
  word-break: normal;
}

.project-list-table .project-list-col-number-customer { width: 168px; }
.project-list-table .project-list-col-title { width: auto; }
.project-list-table .project-list-col-type { width: 74px; }
.project-list-table .project-list-col-responsible { width: 120px; }
.project-list-table .project-list-col-status { width: 112px; }
.project-list-table .project-list-col-progress { width: 138px; }
.project-list-table .project-list-col-workspace { width: 128px; }
.project-list-table .project-list-col-action { width: 108px; }

.project-list-table .project-title-cell {
  min-width: 180px;
}

.project-list-table .project-title-cell,
.project-list-table .project-number-customer-cell,
.project-list-table .project-responsible-cell {
  overflow-wrap: break-word;
  word-break: normal;
}

.project-list-table .project-number-customer-cell strong {
  display: inline-block;
  margin-bottom: 2px;
}

.project-list-table .project-type-cell,
.project-list-table .project-status-cell,
.project-list-table .project-progress-cell,
.project-list-table .project-action-cell {
  white-space: nowrap;
}

.project-list-table .project-progress-cell {
  min-width: 0;
}

.project-list-table .project-progress-cell .progress-inline {
  gap: 7px;
}

.project-list-table .project-progress-cell .progress-meter.compact {
  width: 82px;
  min-width: 70px;
}

.project-workspace-cell {
  white-space: normal;
}

.workspace-stack {
  display: inline-grid;
  gap: 2px;
  line-height: 1.25;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.workspace-stack span {
  display: block;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .project-list-table {
    min-width: 0;
  }

  main table.mobile-dense-list-table .project-workspace-cell {
    display: none !important;
  }

  main table.mobile-dense-list-table .project-progress-cell .progress-inline {
    align-items: center;
    gap: 7px;
  }

  main table.mobile-dense-list-table .project-progress-cell .progress-meter.compact {
    width: min(132px, 44vw);
  }
}

/* v0.3.0-r3: linked project table layout fix.
   Apply the same safe desktop project table procedure to embedded/linked project
   tables inside company/customer detail pages. This prevents Number/Responsible
   from collapsing letter-by-letter after the progress column was added. */
.linked-project-table {
  min-width: 940px;
}

.linked-project-table .linked-project-col-number { width: 128px; }
.linked-project-table .linked-project-col-title { width: auto; }
.linked-project-table .linked-project-col-status { width: 112px; }
.linked-project-table .linked-project-col-progress { width: 138px; }
.linked-project-table .linked-project-col-responsible { width: 124px; }
.linked-project-table .linked-project-col-workspace { width: 128px; }
.linked-project-table .linked-project-col-action { width: 104px; }

.linked-project-table .project-number-cell {
  white-space: nowrap;
}

.linked-project-table .project-responsible-cell {
  overflow-wrap: break-word;
  word-break: normal;
}

@media (max-width: 760px) {
  .linked-project-table {
    min-width: 0;
  }
}


/* v0.3.2-r1: project detail right-side collapsible readable text blocks.
   Only saved fields are shown by the template; expanded content preserves line breaks. */
.project-readonly-notes {
  margin-top: 18px;
}

.project-readonly-notes h3 {
  margin-top: 0;
  margin-bottom: 8px;
}

.project-readonly-note {
  background: var(--soft);
}

.project-readonly-note summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.project-readonly-note-hint {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.project-readonly-note-content {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}


/* v0.3.2-r3 Roadmap polish:
   remove helper-pill dependency, make category labels readable on narrow desktop widths. */
.roadmap-category {
  min-width: 108px;
  max-width: 150px;
  line-height: 1.25;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
}

.roadmap-table th:nth-child(3) {
  min-width: 108px;
}

@media (max-width: 900px) {
  .roadmap-category {
    min-width: 96px;
    max-width: 130px;
  }
}


/* v0.3.3-r1 support intake source registry */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.form-grid .full {
  grid-column: 1 / -1;
}

.responsive-table {
  width: 100%;
  overflow-x: auto;
}

.token-box {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: var(--soft);
}

pre {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: var(--soft);
}


/* v0.3.3-r4 support intake owner help */
.source-help-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.source-help-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  text-decoration: none;
}

.source-help-chip.active {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--soft);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.two-column {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.warning-card {
  border-color: var(--brand);
}


/* v0.3.4-r1 hosted/iframe support intake form */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.checkbox-label input[type="checkbox"] {
  width: auto;
  margin-top: 4px;
}

.checkbox-label span,
.checkbox-label small {
  display: block;
}

.support-intake-public-body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--soft), var(--background));
}

.support-intake-public-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 16px;
}

.support-intake-public-shell.is-embedded {
  padding: 12px;
}

.support-intake-public-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 24px;
}

.support-intake-public-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.support-intake-public-form {
  display: grid;
  gap: 14px;
}

.support-intake-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.small-text {
  font-size: 13px;
}

@media (max-width: 760px) {
  .support-intake-public-card {
    padding: 18px;
    border-radius: 18px;
  }

  .support-intake-public-shell {
    padding: 12px;
  }
}


/* v0.3.4-r4 hosted/iframe help layout fix */
.hosted-form-help-list {
  display: grid;
  gap: 16px;
}

.hosted-form-help-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: var(--card);
}

.hosted-form-help-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.hosted-form-help-card-header h3 {
  margin: 0 0 6px;
}

.hosted-form-help-code-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.copy-code {
  white-space: pre;
  overflow-x: auto;
  word-break: normal;
  overflow-wrap: normal;
}

.copy-code code {
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}

@media (max-width: 760px) {
  .hosted-form-help-card-header {
    display: block;
  }

  .hosted-form-help-card-header .badge {
    margin-top: 10px;
  }
}


/* v0.3.4-r10 customer portal owner-company/projects/support polish */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.subsection {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 14px;
}

.subsection:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}


/* v0.3.5-r1 optional MFA security UI */
.success {
  color: var(--ok);
  font-weight: 800;
}

.card-subsection {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 12px;
  background: color-mix(in srgb, var(--soft) 45%, transparent);
}

.card-subsection summary {
  cursor: pointer;
  font-weight: 800;
}

.code-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.code-grid code {
  display: block;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  padding: 8px 10px;
  font-weight: 800;
  letter-spacing: .08em;
}


/* v0.3.5-r3 optional MFA local QR setup */
.mfa-qr-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  margin: 14px 0;
  background: color-mix(in srgb, var(--soft) 55%, transparent);
  text-align: center;
}

.mfa-qr-card h3 {
  margin-top: 0;
}

.mfa-qr-code {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  max-width: 100%;
}

.mfa-qr-code svg {
  display: block;
  width: min(220px, 72vw);
  height: auto;
}

@media (prefers-color-scheme: dark) {
  .mfa-qr-code {
    background: #fff;
  }
}


/* v0.3.5 stable: Admin support/settings layout polish.
   Make support list columns readable on desktop and group runtime settings into clean cards. */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.support-list-table-wrap {
  margin-top: 6px;
}

.support-list-table {
  min-width: 1080px;
  table-layout: fixed;
}

.support-list-table th,
.support-list-table td {
  overflow-wrap: break-word;
  word-break: normal;
}

.support-col-title { width: 27%; }
.support-col-link { width: 22%; }
.support-col-status { width: 8%; }
.support-col-priority { width: 8%; }
.support-col-assignee { width: 16%; }
.support-col-updated { width: 8%; }
.support-col-notes { width: 5%; }
.support-col-action { width: 6%; }

.support-title-cell strong,
.support-link-cell a {
  line-height: 1.25;
}

.support-summary {
  display: inline-block;
  margin-top: 4px;
  line-height: 1.35;
}

.support-status-cell .badge,
.support-priority-cell .badge {
  white-space: nowrap;
}

.support-assignee-cell {
  min-width: 150px;
  overflow-wrap: normal;
}

.support-assignee-name,
.support-assignee-meta {
  display: block;
  line-height: 1.3;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.support-assignee-name {
  font-weight: 800;
}

.support-assignee-meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.support-action-cell .button {
  white-space: nowrap;
}

.settings-group-form {
  display: grid;
  gap: 18px;
}

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

.settings-group-card {
  margin-bottom: 0;
}

.settings-group-card h2 {
  margin-bottom: 6px;
}

.settings-group-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.settings-group-advanced {
  border-color: var(--danger);
}

.settings-group-advanced h2::after {
  content: " · advanced";
  color: var(--danger);
  font-size: 12px;
  font-weight: 800;
}

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

.settings-field {
  min-width: 0;
}

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

.settings-key {
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.settings-field textarea {
  min-height: 92px;
  resize: vertical;
}

.field-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.settings-save-card {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

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

@media (max-width: 760px) {
  .support-list-table {
    min-width: 0;
  }

  .support-assignee-cell {
    min-width: 0;
  }

  .support-action-cell {
    padding-top: 10px !important;
  }

  .support-action-cell .button {
    width: auto;
  }

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

  .settings-save-card {
    align-items: flex-start;
  }
}


.hidden-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.public-contact-form textarea {
  min-height: 10rem;
}

.filter-form {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: end;
}

.filter-form input,
.filter-form select {
  min-width: 12rem;
}


/* v0.3.9-r1 Staff dashboard action cards on existing Companies / Customers dashboard */
.dashboard-action-strip {
  margin: 0.25rem 0 1rem;
}

.dashboard-action-strip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.dashboard-action-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
  align-items: stretch;
}

.dashboard-action-card {
  position: relative;
  text-align: left;
}

.dashboard-action-card > .badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

.dashboard-action-card-compact {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 6.25rem;
  padding-right: 3.5rem;
}

.dashboard-action-card-compact strong {
  display: block;
  margin-top: 0.2rem;
}

.small-link {
  font-weight: 700;
  text-decoration: none;
}

.settings-list {
  display: grid;
  gap: 0.75rem;
}

.settings-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}

.settings-row input[type="checkbox"] {
  width: auto;
  min-width: auto;
  margin: 0.2rem 0 0;
  flex: 0 0 auto;
}

.settings-row span span {
  display: block;
  margin-top: 0.2rem;
}

/* v0.3.9-r4 Dashboard card settings/menu polish */
.dashboard-card-setting-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  column-gap: 0.85rem;
  row-gap: 0.25rem;
  cursor: pointer;
}

.dashboard-card-setting-row .settings-checkbox {
  width: 1rem;
  min-width: 1rem;
  height: 1rem;
  margin: 0.18rem 0 0;
  justify-self: start;
}

.dashboard-card-setting-row .settings-row-copy {
  display: block;
  min-width: 0;
}

.dashboard-card-setting-row .settings-row-copy .muted {
  display: block;
  margin-top: 0.2rem;
  font-weight: 600;
}

@media (max-width: 720px) {
  .dashboard-action-card-grid {
    grid-template-columns: 1fr;
  }
}



/* v0.3.10-r1: compact theme selector in the right-side header tools. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.theme-menu {
  position: relative;
  flex: 0 0 auto;
}

.theme-menu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 8px 22px var(--shadow);
  user-select: none;
}

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

.theme-menu summary:hover,
.theme-menu[open] summary {
  border-color: var(--brand);
  text-decoration: none;
}

.theme-menu-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 17px;
  line-height: 1;
}

.theme-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 170px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 50px var(--dropdown-shadow);
  padding: 8px;
  display: grid;
  gap: 6px;
  z-index: 3000;
}

.theme-dropdown form {
  margin: 0;
}

.theme-dropdown button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--soft);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.theme-dropdown button:hover,
.theme-dropdown button.is-active {
  background: var(--brand);
  color: #fff;
}

.nav-tools .theme-menu {
  z-index: 120;
}

@media (max-width: 640px) {
  .theme-menu summary {
    width: 36px;
    height: 36px;
  }

  .theme-dropdown {
    right: -54px;
  }
}


/* v0.4.0-r1: Secure Customer Portal Messaging */
.portal-conversation-list {
  display: grid;
  gap: .75rem;
}
.portal-conversation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  color: inherit;
  text-decoration: none;
  background: var(--card);
}
.portal-conversation-row:hover {
  border-color: var(--accent);
}
.portal-conversation-row.is-unread {
  border-left: .35rem solid var(--accent);
  background: color-mix(in srgb, var(--card) 92%, var(--accent) 8%);
}
.portal-conversation-title {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.unread-dot {
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}
.portal-conversation-meta {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: flex-end;
  text-align: right;
  font-size: .9rem;
}
.portal-message-timeline {
  display: grid;
  gap: 1rem;
}
.portal-message {
  max-width: 84%;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--card);
}
.portal-message.from-owner {
  border-left: .3rem solid var(--accent);
}
.portal-message.from-customer {
  margin-left: auto;
  border-right: .3rem solid var(--accent);
}
.portal-message-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: .75rem;
  font-size: .9rem;
}
.portal-message-body {
  overflow-wrap: anywhere;
}
.plain-message-body {
  white-space: pre-wrap;
}
.rich-message-body img,
.rich-message-body iframe,
.rich-message-body form {
  display: none !important;
}
.portal-message-attachments {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
}
.portal-message-withdrawn {
  padding: .8rem;
  border-radius: .6rem;
  background: color-mix(in srgb, var(--card) 85%, var(--muted) 15%);
}
.rich-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .45rem;
}
.rich-editor-toolbar .button {
  min-width: 2.4rem;
  padding: .4rem .55rem;
}
.rich-editor {
  min-height: 12rem;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: .6rem;
  background: var(--input-bg, var(--card));
}
.rich-editor:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.portal-message-admin-grid {
  align-items: start;
}
.checkbox-grid {
  display: grid;
  gap: .5rem;
}
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .75rem;
  align-items: end;
}
.nav-unread-badge {
  display: inline-flex;
  min-width: 1.3rem;
  min-height: 1.3rem;
  align-items: center;
  justify-content: center;
  margin-left: .25rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--danger, #b42318);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
}
@media (max-width: 760px) {
  .portal-conversation-row {
    grid-template-columns: 1fr;
  }
  .portal-conversation-meta {
    align-items: flex-start;
    text-align: left;
  }
  .portal-message {
    max-width: 100%;
  }
  .portal-message.from-customer {
    margin-left: 0;
  }
  .portal-message-header {
    flex-direction: column;
    gap: .35rem;
  }
}


/* v0.4.0-r2: preserve optional Cloudflare Turnstile protection. */
.public-contact-turnstile {
  display: grid;
  gap: 0.45rem;
  justify-items: start;
  max-width: 100%;
  overflow-x: auto;
}
.turnstile-config-status {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.45rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  font-size: 0.9rem;
}
.turnstile-config-status.is-ready { border-color: #2f8f5b; }
.turnstile-config-status.is-warning { border-color: #b7791f; }

/* v0.4.0-r2: internal Owner Company messaging. */
.portal-message.internal-message {
  border-left: .3rem solid var(--line);
}
.portal-message.internal-message.is-mine {
  margin-left: auto;
  border-left: 1px solid var(--line);
  border-right: .3rem solid var(--accent);
}
.portal-conversation-title .badge {
  flex: 0 0 auto;
}

/* v0.4.0-r2: dense desktop header navigation without a visible native scrollbar. */
.nav {
  max-width: 1600px;
}
.nav-links {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-links::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
@media (max-width: 1420px) and (min-width: 901px) {
  .nav {
    grid-template-columns: minmax(150px, 1fr) auto;
    align-items: center;
  }
  .logo {
    grid-column: 1;
    grid-row: 1;
  }
  .nav-tools {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    padding-bottom: 3px;
    overflow-x: auto;
    overflow-y: hidden;
  }
}
@media (max-width: 420px) {
  .public-contact-turnstile { width: 100%; }
}

/* v0.4.0-r3: word-safe portal message previews */
.portal-message-preview {
  overflow-wrap: anywhere;
}

.portal-message-preview-more {
  color: var(--brand);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.portal-conversation-row:hover .portal-message-preview-more,
.portal-conversation-row:focus-visible .portal-message-preview-more {
  text-decoration-thickness: 2px;
}



/* v0.4.0-r4: shared permission-scoped live counter refresh */
.live-counter-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
  margin: .65rem 0 1rem;
  min-height: 2rem;
}

.live-counter-refresh-button {
  padding: .38rem .7rem;
  min-height: auto;
}

.live-counter-updated {
  font-size: .82rem;
  white-space: nowrap;
}

.live-counter-refresh-button[aria-busy="true"] {
  cursor: progress;
  opacity: .7;
}

[data-live-counter-key][hidden] {
  display: none !important;
}

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

.dashboard-action-strip .live-counter-tools {
  margin: .7rem 0 0;
}

@media (max-width: 720px) {
  .live-counter-tools {
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}


/* v0.4.0-r5 portal document message attachments */
.portal-document-picker {
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  padding: 1rem;
}

.portal-document-option-list {
  display: grid;
  gap: 0.55rem;
  max-height: 22rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.portal-document-option {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  padding: 0.75rem;
  cursor: pointer;
}

.portal-document-option:hover,
.portal-document-option:focus-within {
  border-color: var(--accent);
}

.portal-document-option > span {
  display: grid;
  gap: 0.2rem;
}

.portal-document-access-review {
  margin-top: 0.85rem;
}

.portal-document-access-review ul {
  margin-bottom: 0;
}

.portal-message-attachments .badge {
  margin-right: 0.35rem;
}

/* v0.4.0-r6: aggregated action-card alert, pale-red counters and timed-theme profile controls */
.badge.action-card-attention {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.dashboard-action-card.live-counter-increased {
  animation: live-counter-soft-highlight 1.8s ease-out;
}

@keyframes live-counter-soft-highlight {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .25); }
  35% { box-shadow: 0 0 0 .35rem rgba(220, 38, 38, .12); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

html[data-theme="dark"] .badge.action-card-attention {
  background: rgba(127, 29, 29, .55);
  color: #fecaca;
  border-color: rgba(248, 113, 113, .55);
}

.notification-sound-settings {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.notification-sound-settings legend {
  padding: 0 .35rem;
  font-weight: 700;
}

.theme-auto-settings {
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-action-card.live-counter-increased {
    animation: none;
  }
}

/* v0.4.0-r7 Owner Company staff single-identity workflow */
.owner-company-user-fields {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem;
  background: var(--soft);
}

.owner-company-user-fields h3 {
  margin-top: 0;
}

.owner-company-employee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.owner-company-employee-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem;
  background: var(--card);
  min-width: 0;
}

.owner-company-employee-heading {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.owner-company-employee-heading h3 {
  margin: 0;
}

.owner-company-employee-email {
  overflow-wrap: anywhere;
  margin: 0.2rem 0 0;
}

.owner-company-employee-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex: 0 0 54px;
  object-fit: cover;
}

.owner-company-employee-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.85rem 0;
}

.owner-company-employee-summary {
  display: grid;
  gap: 0.6rem;
  margin: 1rem 0 0;
}

.owner-company-employee-summary div {
  display: grid;
  grid-template-columns: minmax(90px, 0.35fr) 1fr;
  gap: 0.75rem;
}

.owner-company-employee-summary dt {
  font-weight: 700;
}

.owner-company-employee-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.owner-company-candidate-list {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.owner-company-candidate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 0.65rem;
}

.owner-company-candidate-row:first-child {
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 680px) {
  .owner-company-candidate-row {
    align-items: stretch;
    flex-direction: column;
  }

  .owner-company-candidate-row .button {
    width: 100%;
  }

  .owner-company-employee-summary div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* v0.4.0-r8: role-aware user form visibility.
   The global label display rule must never override the HTML hidden attribute. */
[data-create-customer-fields][hidden],
[data-manage-customer-fields][hidden],
[data-create-owner-employee-fields][hidden],
[data-manage-owner-employee-fields][hidden],
[data-create-internal-account-note][hidden],
[data-manage-internal-account-note][hidden] {
  display: none !important;
}

.owner-company-internal-account-note {
  margin: 0;
}

.owner-company-internal-account-note h3 {
  margin: 0 0 0.35rem;
}

.owner-company-internal-account-note p {
  margin: 0;
}