:root {
  --bg: #f6f8fb;
  --ink: #17202a;
  --muted: #667085;
  --line: #d9e0ea;
  --panel: #ffffff;
  --panel-muted: #fbfcfe;
  --control: #ffffff;
  --control-hover: #eef5ff;
  --blue: #0b67c2;
  --blue-hover: #084f95;
  --brand-deep: #154f9e;
  --brand-sky: #7bb9e7;
  --brand-soft: #e8f4ff;
  --linkdb-ink: #07111c;
  --linkdb-panel: #ffffff;
  --linkdb-teal: #32d0bd;
  --linkdb-teal-soft: #e6fbf8;
  --linkdb-blue: #154f9e;
  --linkdb-sky: #7bb9e7;
  --green: #16864a;
  --yellow: #a46100;
  --red: #b42318;
  --shadow: 0 18px 42px rgb(15 23 42 / 8%);
  color-scheme: light;
}

[hidden] {
  display: none !important;
}

.analytics-controls {
  align-items: end;
  background: color-mix(in srgb, var(--panel-muted) 74%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--linkdb-blue) 12%, var(--line));
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(130px, 1fr)) auto auto;
  margin: 18px 20px 16px;
  padding: 16px;
}

.analytics-controls label,
.analytics-settings-form label,
.customer-user-form label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  font-weight: 800;
  gap: 6px;
}

.analytics-controls input,
.analytics-controls select,
.analytics-settings-form input,
.analytics-settings-form select,
.customer-user-form input,
.customer-user-form select {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  min-height: 38px;
  padding: 8px 10px;
}

.analytics-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: 0 20px 16px;
}

.analytics-grid,
.analytics-admin-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0 20px 20px;
}

.analytics-block,
.analytics-settings-form,
.customer-user-form {
  background: color-mix(in srgb, var(--panel) 88%, var(--panel-muted));
  border: 1px solid color-mix(in srgb, var(--linkdb-blue) 10%, var(--line));
  border-radius: 8px;
  box-shadow: 0 10px 28px rgb(15 23 42 / 6%);
  display: grid;
  gap: 12px;
  padding: 16px;
}

.analytics-block-wide {
  grid-column: 1 / -1;
}

.analytics-block h2,
.analytics-settings-form h2,
.customer-user-form h2 {
  font-size: 17px;
  margin-bottom: 2px;
}

.compact-table table {
  min-width: 760px;
}

.analytics-quality {
  display: grid;
  gap: 8px;
}

.quality-row,
.admin-list-item {
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--linkdb-blue) 10%, var(--line));
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 10px;
}

.analytics-metric small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.analytics-segment-list {
  display: grid;
  gap: 10px;
}

.analytics-segment-card {
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--linkdb-blue) 10%, var(--line));
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.analytics-segment-head {
  display: grid;
  gap: 3px;
}

.analytics-segment-head span,
.analytics-segment-meta span,
.analytics-segment-card small {
  color: var(--muted);
  font-size: 12px;
}

.analytics-segment-head strong {
  font-size: 16px;
}

.analytics-segment-meta {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.analytics-segment-meta strong {
  color: var(--brand-deep);
  font-size: 24px;
  line-height: 1;
}

.analytics-segment-bar {
  background: color-mix(in srgb, var(--line) 58%, transparent);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.analytics-segment-bar span {
  background: linear-gradient(90deg, var(--linkdb-teal), var(--linkdb-blue));
  border-radius: inherit;
  display: block;
  height: 100%;
}

.quality-row span,
.admin-list-item span,
.quality-row small,
.admin-list-item small {
  color: var(--muted);
}

.secondary-button,
.danger-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 38px;
}

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

.customer-portal-main {
  display: block;
  max-width: 1480px;
}

.customer-analytics-panel {
  overflow: hidden;
}

@media (max-width: 980px) {
  .analytics-controls,
  .analytics-grid,
  .analytics-admin-grid {
    grid-template-columns: 1fr;
  }
}

:root[data-theme="dark"] {
  --bg: #0d1422;
  --ink: #edf4ff;
  --muted: #9aa8bd;
  --line: #28364f;
  --panel: #121c2e;
  --panel-muted: #17243a;
  --control: #101a2b;
  --control-hover: #162842;
  --blue: #67b3ff;
  --blue-hover: #8cc8ff;
  --brand-deep: #67b3ff;
  --brand-sky: #9bd3ff;
  --brand-soft: #132843;
  --linkdb-ink: #f4f8fb;
  --linkdb-panel: #0b1724;
  --linkdb-teal: #32d0bd;
  --linkdb-teal-soft: #0c302e;
  --linkdb-blue: #7bb9e7;
  --linkdb-sky: #8af7d6;
  --green: #5dd493;
  --yellow: #ffd166;
  --red: #ff756b;
  --shadow: 0 18px 46px rgb(0 0 0 / 24%);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.topbar strong,
.topbar span {
  display: block;
}

.topbar span {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}

.topbar nav {
  display: flex;
  gap: 10px;
}

.topbar-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

a,
button {
  border: 1px solid var(--line);
  background: var(--control);
  color: var(--blue);
  padding: 8px 10px;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}

a:hover,
button:hover {
  background: var(--control-hover);
}

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

main {
  margin: 0;
  max-width: none;
  padding: 24px;
  width: 100%;
}

.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.metric,
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.metric {
  padding: 14px;
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.metric strong {
  display: block;
  font-size: 24px;
  margin-top: 6px;
}

.panel {
  margin-bottom: 16px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.instance-toolbar {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.instance-filter-field {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 700;
  gap: 5px;
}

.instance-filter-field select {
  min-width: 150px;
}

.instance-filter-result {
  align-self: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  min-width: 56px;
  text-align: center;
  white-space: nowrap;
}

h1,
h2 {
  font-size: 18px;
  margin: 0;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1420px;
}

th,
td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}

th {
  color: var(--muted);
  font-weight: 700;
  background: var(--panel-muted);
}

.instance-row-critical > td {
  background: color-mix(in srgb, var(--red) 14%, var(--panel));
  border-bottom-color: color-mix(in srgb, var(--red) 42%, var(--line));
}

.instance-row-critical > td:first-child {
  box-shadow: inset 5px 0 0 var(--red);
}

.instance-row-critical:hover > td {
  background: color-mix(in srgb, var(--red) 20%, var(--panel));
}

:root[data-theme="dark"] .instance-row-critical > td {
  background: color-mix(in srgb, var(--red) 24%, var(--panel));
}

:root[data-theme="dark"] .instance-row-critical:hover > td {
  background: color-mix(in srgb, var(--red) 30%, var(--panel));
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.operation-badge {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  margin-top: 6px;
  padding: 4px 8px;
  white-space: nowrap;
}

.operation-badge.live {
  background: var(--linkdb-teal-soft);
  border-color: color-mix(in srgb, var(--linkdb-teal) 42%, var(--line));
  color: var(--green);
}

.operation-badge.test {
  background: color-mix(in srgb, var(--yellow) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--yellow) 38%, var(--line));
  color: var(--yellow);
}

.mode-warning {
  border-left: 3px solid var(--yellow);
  color: var(--yellow);
  font-size: 13px;
  font-weight: 700;
  margin-top: 8px;
  padding-left: 8px;
}

.storage-badge {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-top: 6px;
}

.storage-badge.ok {
  color: var(--green);
}

.storage-badge.cleanup_recommended,
.storage-badge.critical {
  color: var(--yellow);
}

.storage-badge.critical {
  color: var(--red);
}

.storage-badge.warning {
  color: var(--yellow);
}

.storage-grid,
.storage-quota-form {
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.storage-grid > div,
.storage-consumers > div {
  background: color-mix(in srgb, var(--panel) 92%, var(--accent));
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 4px;
  padding: 10px;
}

.storage-grid span,
.storage-consumers span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.storage-grid strong,
.storage-consumers strong {
  color: var(--ink);
  font-size: 14px;
}

.storage-consumers {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
}

.healthy .dot {
  background: var(--green);
}

.degraded .dot,
.stale .dot {
  background: var(--yellow);
}

.queued .dot,
.running .dot,
.planned .dot {
  background: var(--blue);
}

.deployed .dot {
  background: var(--green);
}

.failed .dot {
  background: var(--red);
}

.decommissioned .dot {
  background: var(--yellow);
}

.offline .dot {
  background: var(--red);
}

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

.edit-row td {
  background: var(--panel-muted);
  padding: 14px 16px;
}

.agreement-form {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.agreement-form label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 700;
  gap: 5px;
}

.agreement-form input,
.agreement-form select {
  border: 1px solid var(--line);
  background: var(--control);
  color: var(--ink);
  min-height: 38px;
  padding: 7px 9px;
}

.checkbox-label {
  align-items: center;
  color: var(--ink) !important;
  display: flex !important;
  font-size: 14px !important;
  gap: 7px !important;
}

.checkbox-label[hidden] {
  display: none !important;
}

.checkbox-label input {
  min-height: auto;
}

.agreement-toggles {
  align-content: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  min-height: 38px;
}

.agreement-form button[type="submit"] {
  min-height: 38px;
}

.form-section,
.agreement-section {
  border: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  margin: 0;
  padding: 12px;
}

.form-section legend,
.agreement-section strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.form-section .field-hint,
.agreement-section .field-hint {
  grid-column: 1 / -1;
  margin: 0;
}

.signage-plus-option {
  background: color-mix(in srgb, var(--linkdb-blue) 6%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--linkdb-blue) 26%, var(--line));
  border-radius: 10px;
  padding: 14px;
}

.signage-plus-option.is-included {
  background: color-mix(in srgb, #169c5d 7%, var(--panel));
  border-color: color-mix(in srgb, #169c5d 30%, var(--line));
}

.signage-plus-option label:not(.checkbox-label) {
  display: grid;
  gap: 6px;
}

.agreement-section .full-field {
  grid-column: 1 / -1;
}

.signage-conditions {
  background: color-mix(in srgb, var(--linkdb-blue) 5%, var(--panel));
}

.signage-conditions strong {
  align-items: center;
  display: flex;
  gap: 8px;
}

.signage-condition-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 8px;
  text-transform: uppercase;
}

.signage-condition-badge.custom {
  background: color-mix(in srgb, var(--blue) 12%, var(--panel));
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  color: var(--brand-deep);
}

.signage-condition-badge.free {
  background: color-mix(in srgb, var(--green) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--green) 44%, var(--line));
  color: color-mix(in srgb, var(--green) 70%, #123);
}

.signage-condition-preview,
.signage-condition-actions,
.signage-condition-history {
  grid-column: 1 / -1;
}

.signage-condition-preview {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  padding: 10px 12px;
}

.signage-condition-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.signage-condition-history {
  display: grid;
  gap: 6px;
}

.signage-condition-history div {
  background: color-mix(in srgb, var(--panel) 72%, var(--control));
  border: 1px solid var(--line);
  display: grid;
  gap: 3px;
  padding: 8px 10px;
}

.signage-condition-history small {
  color: var(--muted);
}

.deployment-checkbox {
  align-self: end;
  min-height: 39px;
}

.form-message {
  color: var(--muted);
  font-size: 13px;
  padding-bottom: 9px;
}

.field-hint {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 4px;
}

[data-commission-field].is-disabled {
  opacity: 0.72;
}

[data-commission-field].is-disabled input {
  cursor: not-allowed;
}

.action-button {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  min-width: 92px;
  white-space: nowrap;
}

.action-button:hover {
  background: var(--blue-hover);
}

.action-button.danger-lite {
  background: var(--control);
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
  color: var(--red);
}

.action-button.danger-lite:hover {
  background: color-mix(in srgb, var(--red) 10%, var(--control));
}

.action-button.danger-solid {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.action-button.danger-solid:hover {
  background: color-mix(in srgb, var(--red) 86%, #000);
}

.action-button.secondary-action {
  background: var(--control);
  border-color: var(--line);
  color: var(--ink);
}

.action-button.secondary-action:hover {
  background: color-mix(in srgb, var(--blue) 10%, var(--control));
}

.action-stack {
  align-items: stretch;
  display: grid;
  gap: 8px;
}

.action-stack.horizontal {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.passkey-button {
  background: var(--linkdb-teal-soft);
  border-color: color-mix(in srgb, var(--linkdb-teal) 48%, var(--line));
  color: var(--brand-deep);
  font-weight: 800;
  min-height: 40px;
}

.passkey-button:hover {
  background: color-mix(in srgb, var(--linkdb-teal-soft) 70%, var(--control-hover));
}

.topbar-status {
  color: var(--muted);
  font-size: 12px;
  max-width: 220px;
}

.deployment-details > summary {
  cursor: pointer;
  list-style: none;
}

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

.deployment-panel .panel-head {
  align-items: flex-start;
}

.deployment-summary-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.deployment-toggle-text {
  border: 1px solid var(--line);
  color: var(--blue);
  padding: 8px 10px;
}

.when-open {
  display: none;
}

.deployment-details[open] .when-open {
  display: inline;
}

.deployment-details[open] .when-closed {
  display: none;
}

.deployment-content {
  border-top: 1px solid var(--line);
}

.deployment-form {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  padding: 16px;
}

.deployment-form label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 700;
  gap: 5px;
}

.deployment-form input,
.deployment-form select {
  border: 1px solid var(--line);
  background: var(--control);
  color: var(--ink);
  min-height: 39px;
  padding: 8px 10px;
}

.deployment-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  grid-column: 1 / -1;
}

.deploy-state {
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 8px 10px;
}

.deploy-state.enabled {
  border-color: rgba(22, 134, 74, 0.4);
  color: var(--green);
}

.deploy-state.disabled {
  border-color: rgba(180, 35, 24, 0.35);
  color: var(--red);
}

.deployment-hints {
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px 16px 16px;
}

.ai-settings-form {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.ai-profile-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.ai-profile-card {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding: 16px;
}

.ai-profile-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.ai-profile-head span {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}

.ai-profile-head strong {
  background: var(--control);
  color: var(--muted);
  padding: 5px 8px;
}

.ai-profile-card label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 5px;
}

.ai-profile-card input {
  background: var(--control);
  border: 1px solid var(--line);
  color: var(--ink);
  min-height: 39px;
  padding: 8px 10px;
}

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

.instance-overview {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 16px;
}

.instance-card {
  border: 1px solid var(--line);
  background: var(--panel-muted);
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
}

.instance-card strong,
.instance-card span {
  overflow-wrap: anywhere;
}

.instance-card strong {
  color: var(--ink);
  font-size: 16px;
}

.instance-card span {
  color: var(--muted);
  font-size: 13px;
}

.instance-card .status {
  font-size: 13px;
  font-weight: 700;
}

.instance-card.empty {
  grid-column: 1 / -1;
}

.instance-card-critical {
  background: color-mix(in srgb, var(--red) 12%, var(--panel-muted));
  border-color: color-mix(in srgb, var(--red) 48%, var(--line));
  box-shadow: inset 5px 0 0 var(--red);
}

body.operator-dashboard-page {
  background:
    linear-gradient(135deg, rgba(123, 185, 231, 0.18), transparent 34%),
    linear-gradient(180deg, var(--bg), var(--panel-muted));
  min-height: 100vh;
}

:root[data-theme="dark"] body.operator-dashboard-page {
  background:
    linear-gradient(135deg, rgba(50, 208, 189, 0.16), transparent 34%),
    linear-gradient(180deg, #07111c, #0d1422);
}

.operator-dashboard-page .operator-topbar {
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border-bottom-color: color-mix(in srgb, var(--linkdb-blue) 14%, var(--line));
  min-height: 78px;
  padding: 18px 32px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.operator-brand {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--ink);
  display: flex;
  gap: 16px;
  padding: 0;
}

.operator-brand:hover {
  background: transparent;
}

.operator-brand span {
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  padding-left: 16px;
  text-transform: uppercase;
}

.operator-main {
  padding: 22px 28px 30px;
}

.operator-shell {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: 260px minmax(0, 1fr);
}

.operator-shell > .operator-hero,
.operator-shell > .summary,
.operator-shell > .operator-section {
  grid-column: 2;
  min-width: 0;
}

.operator-hero {
  align-items: center;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--linkdb-blue) 10%, var(--panel)), var(--panel) 58%),
    var(--panel);
  border: 1px solid color-mix(in srgb, var(--linkdb-blue) 18%, var(--line));
  border-radius: 8px;
  box-shadow: 0 16px 42px rgb(15 23 42 / 8%);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  grid-row: 1;
  margin-bottom: 0;
  overflow: hidden;
  padding: 22px 24px;
  position: relative;
}

:root[data-theme="dark"] .operator-hero {
  background:
    linear-gradient(135deg, rgba(21, 79, 158, 0.2), transparent 48%),
    var(--panel);
  box-shadow: 0 18px 54px rgb(0 0 0 / 28%);
}

.operator-hero::before {
  background: linear-gradient(90deg, var(--linkdb-teal), var(--linkdb-sky), var(--linkdb-blue));
  content: "";
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
}

.operator-hero-copy {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.operator-hero h1 {
  font-size: 32px;
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0;
}

.operator-hero p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
  margin: 0;
  max-width: 760px;
}

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

.operator-hero-status div {
  background: color-mix(in srgb, var(--panel-muted) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--linkdb-blue) 14%, var(--line));
  border-radius: 8px;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
}

.operator-hero-status span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.operator-hero-status strong {
  color: var(--brand-deep);
  font-size: 17px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.operator-nav {
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--linkdb-blue) 13%, var(--line));
  border-radius: 8px;
  box-shadow: 0 10px 30px rgb(15 23 42 / 6%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  grid-column: 1;
  grid-row: 1 / span 30;
  margin-bottom: 0;
  padding: 7px;
  position: sticky;
  top: 96px;
  z-index: 9;
}

.operator-nav::before {
  color: var(--muted);
  content: "Arbeitsbereiche";
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 10px 10px 6px;
  text-transform: uppercase;
}

.operator-nav :is(button, a) {
  align-items: center;
  border-color: transparent;
  border-radius: 6px;
  color: var(--muted);
  display: flex;
  font-weight: 900;
  justify-content: flex-start;
  min-height: 42px;
  padding-inline: 14px;
  text-align: left;
  text-decoration: none;
}

.operator-nav :is(button, a):hover {
  background: var(--brand-soft);
  color: var(--brand-deep);
}

.operator-nav :is(button, a).is-active {
  background: linear-gradient(135deg, var(--linkdb-blue), #007ec2);
  border-color: color-mix(in srgb, var(--linkdb-blue) 45%, var(--line));
  color: #fff;
}

.operator-nav-more {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 5px;
}

.operator-nav-more summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  list-style: none;
  padding: 11px 14px;
  text-transform: uppercase;
}

.operator-nav-more summary::-webkit-details-marker {
  display: none;
}

.operator-nav-more summary::after {
  content: "+";
  float: right;
  font-size: 16px;
  line-height: 12px;
}

.operator-nav-more[open] summary::after {
  content: "−";
}

.operator-nav-more :is(button, a) {
  margin-bottom: 4px;
  width: 100%;
}

.operator-section {
  scroll-margin-top: 150px;
}

.operator-section[hidden] {
  display: none;
}

.operator-dashboard-page .summary {
  gap: 14px;
  margin-bottom: 0;
}

.operator-dashboard-page .metric,
.operator-dashboard-page .panel {
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  border-radius: 8px;
  border-color: color-mix(in srgb, var(--linkdb-blue) 12%, var(--line));
  overflow: hidden;
}

.operator-dashboard-page .metric {
  display: grid;
  gap: 7px;
  min-height: 96px;
  padding: 18px;
}

.operator-dashboard-page .metric span {
  font-weight: 800;
}

.operator-dashboard-page .metric strong {
  color: var(--brand-deep);
  font-size: 28px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.operator-dashboard-page table {
  min-width: 1180px;
}

.operator-dashboard-page .analytics-block table {
  min-width: 760px;
}

.operator-dashboard-page .analytics-block-wide table {
  min-width: 860px;
}

.operator-dashboard-page th:last-child,
.operator-dashboard-page td:last-child {
  background: var(--panel);
  box-shadow: -12px 0 18px rgb(15 23 42 / 6%);
  position: sticky;
  right: 0;
  z-index: 1;
}

.operator-dashboard-page th:last-child {
  background: var(--panel-muted);
  z-index: 2;
}

.operator-dashboard-page .instance-row-critical > td,
.operator-dashboard-page .instance-row-critical > td:last-child {
  background: color-mix(in srgb, var(--red) 14%, var(--panel));
  border-bottom-color: color-mix(in srgb, var(--red) 42%, var(--line));
}

.operator-dashboard-page .instance-row-critical:hover > td,
.operator-dashboard-page .instance-row-critical:hover > td:last-child {
  background: color-mix(in srgb, var(--red) 20%, var(--panel));
}

:root[data-theme="dark"] .operator-dashboard-page .instance-row-critical > td,
:root[data-theme="dark"] .operator-dashboard-page .instance-row-critical > td:last-child {
  background: color-mix(in srgb, var(--red) 24%, var(--panel));
}

:root[data-theme="dark"] .operator-dashboard-page .instance-row-critical:hover > td,
:root[data-theme="dark"] .operator-dashboard-page .instance-row-critical:hover > td:last-child {
  background: color-mix(in srgb, var(--red) 30%, var(--panel));
}

.operator-dashboard-page .analytics-block th:last-child,
.operator-dashboard-page .analytics-block td:last-child {
  box-shadow: none;
  position: static;
}

.operator-dashboard-page .analytics-block th:last-child {
  background: var(--panel-muted);
}

.operator-dashboard-page .analytics-summary .metric {
  min-height: 108px;
}

.operator-dashboard-page .panel {
  margin-bottom: 18px;
}

.dashboard-section {
  display: grid;
  gap: 18px;
}

.dashboard-panel-head {
  align-items: end;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--linkdb-blue) 10%, var(--panel)), var(--panel) 62%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  padding: 22px 24px;
}

.dashboard-panel-head h2 {
  font-size: 28px;
  margin: 0;
}

.dashboard-panel-head p {
  margin: 7px 0 0;
}

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

.dashboard-summary {
  margin: 0;
}

.dashboard-incidents {
  margin: 0 !important;
}

.dashboard-map {
  margin: 0;
}

.instance-detail {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  gap: 5px;
  margin-top: 8px;
}

.instance-detail summary {
  color: var(--brand-deep);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.instance-detail[open] summary {
  margin-bottom: 5px;
}

.hub-section-head,
.hub-table-toolbar {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
}

.hub-search,
.hub-table-toolbar > label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  font-weight: 800;
  gap: 6px;
  min-width: min(100%, 260px);
}

.hub-search input,
.hub-table-toolbar input,
.hub-table-toolbar select {
  background: var(--control);
  border: 1px solid var(--line);
  color: var(--ink);
  min-height: 42px;
  padding: 8px 10px;
}

.hub-table-toolbar {
  padding: 16px 20px;
}

.hub-data-table { min-width: 820px !important; }
.hub-customer-form {
  align-items: end;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 16px 20px 20px;
}

.hub-customer-form-head {
  display: grid;
  gap: 3px;
  grid-column: 1 / -1;
}

.hub-customer-form-head span,
.hub-customer-form label,
.hub-customer-form legend {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.hub-customer-form label {
  display: grid;
  gap: 6px;
}

.hub-customer-form input {
  background: var(--control);
  border: 1px solid var(--line);
  color: var(--ink);
  min-height: 42px;
  padding: 8px 10px;
  width: 100%;
}

.hub-customer-form fieldset {
  align-items: center;
  border: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  min-height: 68px;
  padding: 8px 12px 10px;
}

.hub-customer-form fieldset legend {
  padding-inline: 4px;
}

.hub-customer-form .checkbox-label {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  font-size: 13px;
  gap: 6px;
  white-space: nowrap;
}

.hub-customer-form .checkbox-label input {
  min-height: auto;
  width: auto;
}

.hub-customer-form .request-actions {
  align-items: center;
  min-height: 42px;
}

.signage-wizard {
  border: 1px solid color-mix(in srgb, var(--linkdb-blue) 22%, var(--line));
  border-radius: 14px;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--ink) 7%, transparent);
  margin: 4px 20px 20px;
}

.signage-wizard-new-customer {
  background: color-mix(in srgb, var(--linkdb-blue) 4%, var(--panel));
  border: 1px dashed color-mix(in srgb, var(--linkdb-blue) 35%, var(--line));
  border-radius: 10px;
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 14px;
}

.signage-wizard-new-customer[hidden] {
  display: none;
}

.reseller-signage-panel .signage-wizard {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.reseller-signage-panel .signage-wizard > .full,
.reseller-signage-panel .signage-wizard > .request-actions {
  grid-column: 1 / -1;
}

.reseller-signage-panel .signage-wizard-new-customer {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.signage-stepper {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.signage-stepper button {
  align-items: center;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  font: inherit;
  font-weight: 800;
  gap: 9px;
  min-height: 46px;
  padding: 9px 12px;
}

.signage-stepper button span {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 50%;
  display: inline-flex;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.signage-stepper button.is-active {
  background: color-mix(in srgb, var(--linkdb-teal-soft) 72%, var(--panel));
  border-color: color-mix(in srgb, var(--linkdb-teal) 48%, var(--line));
  color: var(--brand-deep);
}

.signage-step-panel {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.signage-step-panel > .full {
  grid-column: 1 / -1;
}

.reseller-request-form .signage-plan-selector {
  border: 0;
  box-sizing: border-box;
  display: block;
  margin: 0;
  min-width: 0;
  padding: 0;
  width: 100%;
}

.reseller-request-form .signage-plan-selector legend {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
  padding: 0;
}

.signage-plan-grid,
.signage-package-options {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}

.signage-plan-card {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 12px;
  min-height: 142px;
  padding: 16px 46px 16px 16px;
  position: relative;
}

.signage-plan-card:hover,
.signage-plan-card:focus-within,
.signage-plan-card.is-selected {
  border-color: var(--linkdb-teal);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--linkdb-teal) 18%, transparent);
}

.signage-plan-card input {
  accent-color: var(--linkdb-teal);
  height: 18px;
  margin: 0;
  position: absolute;
  right: 16px;
  top: 16px;
  width: 18px;
}

.signage-plan-card-copy {
  display: grid;
  gap: 7px;
}

.signage-plan-card-copy strong {
  color: var(--ink);
  font-size: 16px;
}

.signage-plan-card-copy small,
.signage-plan-card-price {
  color: var(--muted);
}

.signage-plan-card-price {
  align-self: end;
  font-size: 14px;
  font-weight: 800;
}

.signage-package-preset {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  padding: 13px;
}

.signage-package-preset span {
  color: var(--muted);
  font-size: 13px;
}

.signage-review {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.signage-review > div {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  display: grid;
  gap: 5px;
  padding: 13px;
}

.signage-review > div span,
.signage-review > p {
  color: var(--muted);
  font-size: 13px;
}

.signage-review > p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
}

.signage-wizard-actions {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.package-product-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 0 20px 12px;
}

.package-product-switch .is-active {
  background: color-mix(in srgb, var(--linkdb-teal-soft) 70%, var(--panel));
  border-color: color-mix(in srgb, var(--linkdb-teal) 46%, var(--line));
  color: var(--brand-deep);
}

.package-product-message {
  margin: 0;
  padding: 0 20px 12px;
}

@media (max-width: 900px) {
  .signage-wizard-new-customer,
  .reseller-signage-panel .signage-wizard-new-customer {
    grid-template-columns: 1fr;
  }

  .reseller-signage-panel .signage-wizard {
    grid-template-columns: 1fr;
  }

  .reseller-signage-panel .signage-wizard > .full,
  .reseller-signage-panel .signage-wizard > .request-actions {
    grid-column: auto;
  }

  .signage-stepper,
  .signage-step-panel,
  .signage-review {
    grid-template-columns: 1fr;
  }

  .signage-review > p {
    grid-column: auto;
  }
}

.customer-list-row {
  cursor: pointer;
}

.customer-list-row:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--linkdb-blue) 56%, transparent);
  outline-offset: -3px;
}

.customer-list-row:hover td {
  background: color-mix(in srgb, var(--linkdb-blue) 6%, var(--panel));
}

.operator-customer-detail {
  padding: 20px;
}

.customer-detail-loading,
.customer-detail-card {
  background: var(--panel-muted);
  border: 1px solid var(--line);
}

.customer-detail-loading {
  color: var(--muted);
  padding: 20px;
}

.customer-detail-head,
.customer-detail-card-head,
.customer-site-card,
.customer-detail-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.customer-detail-head {
  align-items: start;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
  padding-bottom: 18px;
}

.customer-detail-head h2,
.customer-detail-card-head h3 {
  margin: 5px 0 3px;
}

.customer-detail-head .secondary-button {
  margin-bottom: 14px;
}

.customer-detail-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-detail-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.customer-detail-card-wide {
  grid-column: 1 / -1;
}

.customer-detail-card-head > .muted {
  font-size: 12px;
  text-align: right;
}

.customer-master-form,
.customer-site-create form {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.customer-master-form label,
.customer-site-create label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  font-weight: 800;
  gap: 6px;
}

.customer-master-form input,
.customer-site-create input {
  background: var(--control);
  border: 1px solid var(--line);
  color: var(--ink);
  min-height: 42px;
  padding: 8px 10px;
  width: 100%;
}

.customer-detail-actions {
  grid-column: 1 / -1;
  justify-content: start;
}

.customer-detail-list,
.customer-site-list {
  display: grid;
  gap: 8px;
}

.customer-detail-list article,
.customer-site-card {
  background: var(--panel);
  border: 1px solid var(--line);
  display: grid;
  gap: 4px;
  padding: 10px 12px;
}

.customer-detail-list article span,
.customer-detail-list article small,
.customer-site-card span {
  color: var(--muted);
}

.customer-access-list article span,
.customer-access-list article small {
  overflow-wrap: anywhere;
}

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

.customer-site-card > div:first-child {
  display: grid;
  gap: 4px;
}

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

.customer-service-actions .secondary-button {
  min-height: 34px;
}

.customer-service-actions .secondary-button.is-active {
  background: color-mix(in srgb, var(--linkdb-teal) 16%, var(--panel));
  border-color: color-mix(in srgb, var(--linkdb-teal) 45%, var(--line));
}

.customer-site-create {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.customer-site-create summary {
  color: var(--linkdb-blue);
  cursor: pointer;
  font-weight: 800;
  margin-bottom: 12px;
}

.customer-detail-message {
  margin: -6px 0 16px;
}
.hub-alert-list,
.hub-signage-list { display: grid; gap: 12px; padding: 20px; }
.hub-alert,
.hub-signage-card { background: var(--panel-muted); border: 1px solid var(--line); display: grid; gap: 5px; padding: 15px; }
.hub-signage-card {
  align-items: center;
  border-radius: 12px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  grid-template-columns: minmax(0, 1fr) auto;
  text-align: left;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  width: 100%;
}
.hub-signage-card:hover,
.hub-signage-card:focus-visible {
  border-color: color-mix(in srgb, var(--linkdb-blue) 55%, var(--line));
  box-shadow: 0 12px 26px rgb(15 23 42 / 10%);
  transform: translateY(-1px);
}
.hub-signage-card > span:first-child { display: grid; gap: 3px; min-width: 0; }
.hub-signage-card > small,
.hub-signage-card .hub-card-link { grid-column: 1 / -1; }
.hub-signage-card .hub-card-link { color: var(--linkdb-blue); font-size: 13px; font-weight: 850; }
.hub-alert { border-left: 4px solid var(--red); }
.hub-alert-head { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.hub-alert-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.hub-alert small,
.hub-signage-card small { color: var(--muted); }
.signage-billing-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  justify-content: center;
  padding: 5px 10px;
  white-space: nowrap;
}
.signage-billing-badge.is-free {
  background: color-mix(in srgb, var(--green) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
  color: color-mix(in srgb, var(--green) 72%, var(--ink));
}
.signage-billing-badge.is-paid {
  background: color-mix(in srgb, var(--linkdb-blue) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--linkdb-blue) 38%, var(--line));
  color: var(--linkdb-blue);
}
.signage-billing-badge.is-mixed,
.signage-billing-badge.is-not_configured {
  background: var(--control);
  color: var(--muted);
}
.operator-signage-detail { border-top: 1px solid var(--line); padding: 20px; }
.signage-customer-contracts { display: grid; gap: 16px; margin-top: 18px; }
.signage-contract-card {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 18px;
}
.signage-contract-card.is-empty { color: var(--muted); }
.signage-contract-facts {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}
.signage-contract-facts div { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; display: grid; gap: 3px; min-width: 0; padding: 10px 12px; }
.signage-contract-facts dt { color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.signage-contract-facts dd { font-weight: 750; margin: 0; overflow-wrap: anywhere; }
.signage-customer-condition-form {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.signage-customer-condition-form label { display: grid; gap: 6px; min-width: 0; }
.signage-customer-condition-form input,
.signage-customer-condition-form select {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  font: inherit;
  min-height: 42px;
  padding: 9px 11px;
  width: 100%;
}
.signage-customer-condition-form input:focus-visible,
.signage-customer-condition-form select:focus-visible {
  border-color: var(--linkdb-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--linkdb-blue) 20%, transparent);
  outline: none;
}
.signage-customer-condition-form .full-field,
.signage-customer-condition-form .signage-condition-preview,
.signage-customer-condition-form .signage-condition-actions { grid-column: 1 / -1; }
.signage-contract-card .signage-condition-history { margin: 0; }
.signage-contract-card .signage-condition-history summary { color: var(--linkdb-blue); cursor: pointer; font-weight: 850; margin-bottom: 10px; }
.signage-detail-notice { margin: 12px 0 0; }
.hub-user-list { padding: 20px; }

.location-hierarchy {
  display: grid;
  gap: 12px;
  padding: 0 20px 20px;
}

.location-tree-country,
.location-tree-city {
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--linkdb-blue) 15%, var(--line));
  border-radius: 12px;
  box-shadow: 0 8px 22px rgb(15 23 42 / 5%);
  overflow: hidden;
}

.location-tree-country > summary,
.location-tree-city > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  list-style: none;
}

.location-tree-country > summary { min-height: 72px; padding: 14px 18px; }
.location-tree-city > summary { min-height: 58px; padding: 11px 14px; }
.location-tree-country > summary::-webkit-details-marker,
.location-tree-city > summary::-webkit-details-marker { display: none; }

.location-tree-country > summary::before,
.location-tree-city > summary::before {
  color: var(--linkdb-blue);
  content: "›";
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  transition: transform 160ms ease;
}

.location-tree-country[open] > summary::before,
.location-tree-city[open] > summary::before { transform: rotate(90deg); }

.location-tree-country > summary:hover,
.location-tree-city > summary:hover { background: color-mix(in srgb, var(--linkdb-blue) 5%, var(--panel)); }

.location-tree-country > summary:focus-visible,
.location-tree-city > summary:focus-visible,
.location-tree-customer:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--linkdb-blue) 54%, transparent);
  outline-offset: -3px;
}

.location-tree-summary-copy { display: grid; gap: 3px; margin-right: auto; min-width: 0; }
.location-tree-summary-copy strong { font-size: 16px; overflow-wrap: anywhere; }
.location-tree-summary-copy small,
.location-tree-count { color: var(--muted); font-size: 12px; font-weight: 700; }

.location-tree-metrics { display: flex; flex-wrap: wrap; gap: 8px; justify-content: end; }
.location-tree-metrics span,
.location-tree-count {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  white-space: nowrap;
}
.location-tree-metrics b,
.location-tree-count b { color: var(--ink); font-size: 13px; }

.location-tree-cities { background: color-mix(in srgb, var(--panel-muted) 70%, var(--panel)); display: grid; gap: 8px; padding: 10px; }
.location-tree-city { border-radius: 9px; box-shadow: none; }
.location-tree-city > summary { padding-left: 14px; }
.location-tree-customer { align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); cursor: pointer; display: flex; font: inherit; gap: 12px; justify-content: space-between; padding: 11px 12px; text-align: left; width: 100%; }
.location-tree-customer:hover { background: color-mix(in srgb, var(--linkdb-blue) 6%, var(--panel)); border-color: color-mix(in srgb, var(--linkdb-blue) 35%, var(--line)); }
.location-tree-customer > span:first-child { display: grid; gap: 3px; min-width: 0; }
.location-tree-customer strong { overflow-wrap: anywhere; }
.location-tree-customer small { color: var(--muted); overflow-wrap: anywhere; }
.location-tree-customer-count { align-items: center; color: var(--muted); display: flex; flex: 0 0 auto; font-size: 12px; font-weight: 700; gap: 8px; white-space: nowrap; }
.location-tree-customer-count b { color: var(--linkdb-blue); font-size: 22px; font-weight: 500; line-height: .7; }
.location-tree-customers { display: grid; gap: 7px; padding: 0 9px 9px; }

@media (max-width: 1440px) {
  .operator-dashboard-page table { min-width: 1020px; }
  .operator-hero-status { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1280px) {
  .operator-main { padding-inline: 16px; }
  .operator-nav { overflow-x: auto; padding-bottom: 4px; }
  .operator-nav button { flex: 0 0 auto; }
  .hub-section-head { align-items: stretch; }
  .hub-customer-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .operator-hero { grid-template-columns: 1fr; }
  .operator-hero-status { grid-template-columns: 1fr; }
  .hub-search { width: 100%; }
  .hub-search input { width: 100%; }
  .hub-customer-form { grid-template-columns: 1fr; }
  .operator-customer-detail { padding: 16px; }
  .customer-detail-grid { grid-template-columns: 1fr; }
  .customer-detail-card-wide { grid-column: auto; }
  .customer-master-form,
  .customer-site-create form { grid-template-columns: 1fr; }
  .customer-detail-head,
  .customer-detail-card-head,
  .customer-site-card { align-items: stretch; display: grid; }
  .customer-detail-card-head > .muted { text-align: left; }
  .customer-service-actions { justify-content: start; }
  .hub-alert-head { align-items: start; flex-direction: column; }
  .hub-alert-actions { justify-content: start; }
  .hub-signage-card { grid-template-columns: 1fr; }
  .hub-signage-card .signage-billing-badge { justify-self: start; }
  .operator-signage-detail { padding: 16px; }
  .signage-contract-facts,
  .signage-customer-condition-form { grid-template-columns: 1fr; }
  .signage-customer-condition-form .full-field,
  .signage-customer-condition-form .signage-condition-preview,
  .signage-customer-condition-form .signage-condition-actions { grid-column: auto; }
  .location-hierarchy { padding-left: 16px; padding-right: 16px; }
  .location-tree-country > summary { align-items: start; flex-wrap: wrap; }
  .location-tree-metrics { justify-content: start; width: 100%; }
  .operator-dashboard-page .panel-head,
  .hub-table-toolbar { padding: 16px; }
}

@media (max-width: 560px) {
  .location-tree-country > summary { min-height: 0; padding: 14px; }
  .location-tree-city > summary { gap: 10px; padding: 11px; }
  .location-tree-count { font-size: 11px; }
  .location-tree-customer { align-items: start; flex-direction: column; gap: 7px; }
  .location-tree-customer-count { align-self: stretch; justify-content: space-between; width: 100%; }
}

.operator-dashboard-page .panel-head {
  background: color-mix(in srgb, var(--panel) 92%, var(--panel-muted));
  padding: 18px 20px;
}

:root[data-theme="dark"] .operator-dashboard-page .panel-head {
  background: color-mix(in srgb, var(--panel) 72%, var(--panel-muted));
}

.section-kicker {
  color: var(--brand-deep);
  display: block;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.operator-dashboard-page .panel-head h1,
.operator-dashboard-page .panel-head h2 {
  font-size: 21px;
}

.operator-dashboard-page .panel-head p {
  margin: 6px 0 0;
}

.operator-dashboard-page .instance-overview {
  gap: 14px;
  padding: 18px 20px;
}

.operator-dashboard-page .instance-card {
  background: var(--panel-muted);
  border-color: color-mix(in srgb, var(--linkdb-blue) 12%, var(--line));
  padding: 16px;
}

.operator-dashboard-page .instance-card.instance-card-critical {
  background: color-mix(in srgb, var(--red) 12%, var(--panel-muted));
  border-color: color-mix(in srgb, var(--red) 48%, var(--line));
}

.operator-dashboard-page th {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.operator-dashboard-page td {
  line-height: 1.4;
}

.operator-dashboard-page .deployment-form,
.operator-dashboard-page .deployment-hints,
.operator-dashboard-page .reseller-admin-grid {
  padding: 20px;
}

.customer-worldmap {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--linkdb-blue) 8%, transparent), transparent 45%),
    var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  margin: 0 16px 18px;
  padding: 18px;
}

.reseller-location-map-panel {
  margin: 0 0 18px;
}

.worldmap-head {
  align-items: end;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  margin-bottom: 14px;
}

.worldmap-head h2 {
  font-size: 26px;
  margin-top: 4px;
}

.worldmap-head label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  font-weight: 800;
  gap: 8px;
}

.worldmap-head select,
.location-edit-form input,
.location-image-form input {
  background: var(--control);
  border: 1px solid var(--line);
  color: var(--ink);
  min-height: 42px;
  padding: 9px 10px;
  width: 100%;
}

.worldmap-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(420px, 1fr) minmax(320px, 420px);
}

.customer-map {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--linkdb-sky) 16%, transparent), transparent),
    var(--panel-muted);
  border: 1px solid var(--line);
  min-height: 460px;
  overflow: hidden;
  width: 100%;
}

.leaflet-container {
  background: color-mix(in srgb, var(--panel-muted) 82%, var(--linkdb-sky));
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

.map-empty,
.map-config-notice,
.map-missing-ok {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 10px 12px;
}

.map-config-notice {
  margin: 0 0 12px;
}

.location-pin {
  align-items: center;
  background: #fff;
  border: 2px solid var(--linkdb-blue);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgb(15 23 42 / 18%);
  display: grid;
  place-items: center;
}

.location-pin span {
  background: var(--linkdb-teal);
  border-radius: 999px;
  display: block;
  height: 10px;
  width: 10px;
}

.location-pin-warn {
  border-color: var(--yellow);
}

.location-pin-warn span {
  background: var(--yellow);
}

.location-pin-bad {
  border-color: var(--red);
}

.location-pin-bad span {
  background: var(--red);
}

.location-popup {
  display: grid;
  gap: 6px;
  min-width: 210px;
}

.location-popup img,
.location-popup-placeholder {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  height: 106px;
  object-fit: cover;
  width: 100%;
}

.location-popup-placeholder {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-weight: 900;
  justify-content: center;
}

.location-detail {
  align-content: start;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  display: grid;
  gap: 14px;
  min-height: 460px;
  padding: 14px;
}

.location-detail-head {
  align-items: start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.location-detail-head h3 {
  font-size: 20px;
  margin: 8px 0 2px;
}

.location-edit-form,
.location-image-form {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.location-edit-form label,
.location-image-form label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  font-weight: 800;
  gap: 6px;
}

.location-edit-form .full,
.location-image-form .full {
  grid-column: 1 / -1;
}

.location-image-grid {
  display: grid;
  gap: 10px;
}

.location-image-card {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  padding: 8px;
}

.location-image-card img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 76px;
}

.location-image-card strong,
.location-image-card small {
  display: block;
}

.map-missing-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.missing-location-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  text-align: left;
  width: 100%;
}

.reseller-map-button {
  align-self: end;
  justify-self: end;
}

@media (max-width: 1120px) {
  .operator-hero {
    grid-template-columns: 1fr;
  }

  .operator-hero-status {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .worldmap-head,
  .worldmap-layout {
    grid-template-columns: 1fr;
  }

  .customer-map,
  .location-detail {
    min-height: 380px;
  }
}

.reseller-auth-page,
.reseller-page {
  background:
    linear-gradient(135deg, rgba(123, 185, 231, 0.16), transparent 34%),
    linear-gradient(180deg, #ffffff 0, var(--bg) 420px);
}

.reseller-auth-shell {
  align-items: center;
  display: grid;
  min-height: 100vh;
  padding: 32px;
}

.reseller-auth-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(11, 103, 194, 0.18);
  box-shadow: 0 24px 70px rgb(21 79 158 / 16%);
  margin: 0 auto;
  max-width: 480px;
  padding: 34px;
  width: 100%;
}

.brand-lockup {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 10px;
}

.brand-mark {
  background: linear-gradient(135deg, var(--brand-sky), var(--brand-deep));
  color: #fff;
  display: inline-flex;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  padding: 9px 11px;
}

.reseller-auth-card h1 {
  font-size: 34px;
  line-height: 1.08;
  margin: 28px 0 12px;
}

.reseller-auth-card p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 24px;
}

.reseller-login-form {
  display: grid;
  gap: 14px;
}

.reseller-login-form label,
.reseller-request-form label,
.contract-sign-form label,
.contract-template-upload-form label,
.reseller-admin-form label,
.reseller-link-form label,
.release-form label,
.update-job-form label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
}

.reseller-login-form input,
.reseller-request-form input,
.reseller-request-form select,
.reseller-request-form textarea,
.contract-sign-form input,
.contract-sign-form select,
.contract-sign-form textarea,
.contract-template-upload-form input,
.contract-template-upload-form select,
.reseller-admin-form input,
.reseller-admin-form select,
.reseller-link-form input,
.reseller-link-form select,
.release-form input,
.release-form select,
.release-form textarea,
.update-job-form input,
.update-job-form select {
  background: var(--control);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  min-height: 42px;
  padding: 9px 11px;
}

.reseller-request-form textarea,
.contract-sign-form textarea,
.release-form textarea {
  min-height: 96px;
  resize: vertical;
}

.passkey-note {
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 13px;
  line-height: 1.45;
  margin-top: 20px;
  padding: 12px 14px;
}

.reseller-topbar {
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(11, 103, 194, 0.14);
  display: flex;
  justify-content: space-between;
  padding: 18px 28px;
}

.reseller-topbar-actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

.topbar-link {
  border: 1px solid rgba(11, 103, 194, 0.18);
  color: var(--brand-deep);
  font-size: 13px;
  font-weight: 800;
  padding: 9px 12px;
  text-decoration: none;
}

.reseller-main {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: 260px minmax(0, 1fr);
  margin: 0;
  max-width: none;
  padding: 28px;
  width: 100%;
}

body[data-portal-mode="reseller"] [data-operator-only],
body[data-portal-mode="operator"] [data-reseller-only] {
  display: none !important;
}

.reseller-hero {
  align-items: stretch;
  background: linear-gradient(135deg, #f8fbff, #eaf5ff);
  border: 1px solid rgba(11, 103, 194, 0.18);
  box-shadow: 0 22px 54px rgb(21 79 158 / 12%);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  margin-bottom: 18px;
  padding: 28px;
}

.eyebrow {
  color: var(--brand-deep);
  display: block;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.reseller-hero h1 {
  font-size: 34px;
  line-height: 1.1;
  margin: 0 0 12px;
}

.reseller-hero p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  max-width: 720px;
}

.reseller-credit {
  background: #fff;
  border: 1px solid rgba(11, 103, 194, 0.18);
  display: grid;
  gap: 8px;
  padding: 22px;
}

.reseller-credit span,
.reseller-credit small {
  color: var(--muted);
}

.reseller-credit strong {
  color: var(--brand-deep);
  font-size: 34px;
  line-height: 1;
}

.reseller-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.8fr);
  margin-bottom: 18px;
}

.reseller-panel {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  box-shadow: 0 16px 42px rgb(15 23 42 / 7%);
}

.panel-head.clean {
  border-bottom: 1px solid var(--line);
  padding: 18px 20px;
}

.panel-head.clean p {
  margin: 6px 0 0;
}

.reseller-customer-list,
.request-history {
  display: grid;
  gap: 10px;
  padding: 18px 20px 20px;
}

.reseller-billing-panel .table-wrap {
  padding: 0 20px 20px;
}

.reseller-billing-table {
  min-width: 980px !important;
}

.reseller-customer-card {
  align-items: center;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(220px, 1fr) auto minmax(160px, 0.4fr) auto;
  padding: 14px;
}

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

.reseller-customer-card span,
.reseller-customer-card small {
  color: var(--muted);
}

.reseller-role,
.request-status {
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 13px;
  font-weight: 800;
  padding: 7px 9px;
  text-align: center;
  white-space: nowrap;
}

.empty-state {
  background: var(--panel-muted);
  border: 1px dashed var(--line);
  color: var(--muted);
  display: grid;
  gap: 7px;
  padding: 18px;
}

.empty-state strong {
  color: var(--ink);
}

.empty-state.compact {
  padding: 14px;
}

.decommission-overlay {
  align-items: center;
  background: rgb(7 17 28 / 58%);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 50;
}

.decommission-dialog {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 24px 80px rgb(0 0 0 / 28%);
  color: var(--ink);
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 40px);
  max-width: 900px;
  overflow: auto;
  padding: 18px;
  width: min(900px, 100%);
}

.decommission-head,
.decommission-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.decommission-head strong,
.decommission-head span {
  display: block;
}

.decommission-head span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.icon-button {
  min-width: 40px;
}

.decommission-warning {
  background: color-mix(in srgb, var(--red) 10%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--red) 38%, var(--line));
  color: var(--red);
  font-weight: 800;
  line-height: 1.45;
  padding: 12px;
}

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

.decommission-grid div {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
}

.decommission-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.decommission-grid strong {
  overflow-wrap: anywhere;
}

.decommission-warnings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.decommission-warnings span {
  background: color-mix(in srgb, var(--yellow) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--yellow) 40%, var(--line));
  color: var(--yellow);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 8px;
}

.decommission-form {
  display: grid;
  gap: 12px;
}

.decommission-check {
  align-items: flex-start !important;
}

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

.request-row {
  border: 1px solid var(--line);
  display: grid;
  gap: 7px;
  padding: 12px;
}

.request-row .request-status {
  justify-self: start;
}

.request-row small {
  color: var(--muted);
}

.reseller-request-form {
  display: grid;
  gap: 18px;
  padding: 20px;
}

.reseller-deployment-form {
  box-sizing: border-box;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  padding: 20px;
  width: 100%;
}

.reseller-deployment-form label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  min-width: 0;
}

.reseller-deployment-form input,
.reseller-deployment-form select,
.reseller-deployment-form textarea {
  background: var(--control);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  min-height: 42px;
  padding: 9px 11px;
}

.reseller-deployment-form input,
.reseller-deployment-form select,
.reseller-deployment-form textarea {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.reseller-deployment-form textarea {
  min-height: 96px;
  resize: vertical;
}

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

.deployment-wizard-steps {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 0;
  width: 100%;
}

.deployment-wizard-steps button {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 800;
  min-height: 46px;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 9px 12px;
  text-align: left;
}

.deployment-wizard-steps button.active,
.deployment-wizard-steps button[aria-current="step"] {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}

.deployment-step-panel {
  background: color-mix(in srgb, var(--panel) 74%, var(--panel-muted));
  border: 1px solid var(--line);
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
}

.deployment-step-panel[hidden] {
  display: none !important;
}

.deployment-step-grid {
  display: grid;
  gap: 13px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.deployment-wizard-actions {
  justify-content: space-between;
}

.deployment-start-card {
  display: grid;
  gap: 8px;
}

.deployment-start-card span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deployment-start-card strong {
  color: var(--ink);
  font-size: clamp(22px, 3vw, 34px);
}

.deployment-release-summary {
  align-items: baseline;
  background: color-mix(in srgb, var(--linkdb-teal-soft) 72%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--linkdb-teal) 32%, var(--line));
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 6px;
  padding: 12px 14px;
}

.deployment-release-summary strong {
  font-size: 18px;
}

.deployment-release-summary small {
  color: var(--muted);
  font-weight: 700;
}

.deployment-release-field input[readonly] {
  background: color-mix(in srgb, var(--linkdb-teal-soft) 58%, var(--control));
  font-weight: 800;
}

.field-hint {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.reseller-deployment-list {
  box-sizing: border-box;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 18px 20px 20px;
  width: 100%;
}

.reseller-deployment-card {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding: 15px;
}

.reseller-deployment-card header {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

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

.reseller-deployment-card strong,
.reseller-deployment-card span,
.reseller-deployment-card small,
.credential-box code {
  overflow-wrap: anywhere;
}

.credential-box {
  background: var(--linkdb-teal-soft);
  border: 1px solid color-mix(in srgb, var(--linkdb-teal) 32%, var(--line));
  display: grid;
  gap: 6px;
  padding: 12px;
}

.reseller-request-form fieldset {
  border: 1px solid var(--line);
  display: grid;
  gap: 13px;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  margin: 0;
  padding: 18px;
}

.reseller-request-form legend {
  color: var(--brand-deep);
  font-weight: 800;
  padding: 0 8px;
}

.reseller-deployment-form fieldset {
  border: 1px solid var(--line);
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 18px;
}

.reseller-deployment-form legend {
  color: var(--brand-deep);
  font-weight: 800;
  padding: 0 8px;
}

.deployment-preview {
  background: color-mix(in srgb, var(--linkdb-teal-soft) 72%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--linkdb-teal) 28%, var(--line));
  display: grid;
  gap: 5px;
  min-height: 50px;
  padding: 12px;
}

.checklist-fieldset {
  grid-template-columns: repeat(4, minmax(160px, 1fr)) !important;
}

.wide-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.request-actions {
  align-items: center;
  display: flex;
  gap: 12px;
}

.operator-reseller-panel {
  margin-bottom: 18px;
}

.operator-admin-summary {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  padding: 16px 20px;
}

.operator-admin-summary div {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  display: grid;
  gap: 6px;
  padding: 14px;
}

.operator-admin-summary span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.operator-admin-summary strong {
  color: var(--brand-deep);
  font-size: 28px;
  line-height: 1;
}

.portal-admin-message {
  margin: 12px 20px 0;
}

.portal-admin-grid h3,
.portal-admin-requests h3,
.portal-admin-contracts h3,
.portal-admin-templates h3 {
  margin: 0 0 12px;
}

.portal-admin-requests,
.portal-admin-contracts,
.portal-admin-templates {
  padding: 0 16px 16px;
}

.reseller-admin-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(300px, 0.8fr) minmax(380px, 1fr);
  padding: 16px;
}

.release-grid {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(420px, 1.15fr) minmax(340px, 0.85fr);
  padding: 18px 20px 20px;
}

.release-workspace-card,
.release-library {
  background: color-mix(in srgb, var(--panel) 90%, var(--panel-muted));
  border: 1px solid color-mix(in srgb, var(--linkdb-blue) 12%, var(--line));
  border-radius: 10px;
  box-shadow: 0 10px 28px rgb(15 23 42 / 5%);
  padding: 18px;
}

.release-library {
  grid-column: 1 / -1;
}

.release-section-head {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.release-section-head h2 {
  font-size: 18px;
  margin: 0;
}

.release-section-head p {
  line-height: 1.45;
  margin: 5px 0 0;
}

.release-section-head .section-kicker {
  margin-bottom: 4px;
}

.compact-action {
  min-width: auto;
}

.reseller-admin-form,
.reseller-link-form,
.release-form,
.update-job-form,
.marketplace-form {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reseller-admin-form .full,
.reseller-link-form .full,
.release-form .full,
.update-job-form .full,
.marketplace-form .full {
  grid-column: 1 / -1;
}

.release-form input[readonly] {
  background: color-mix(in srgb, var(--panel-muted) 86%, var(--control));
  color: var(--muted);
  cursor: not-allowed;
}

.release-locales {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.release-locales summary {
  align-items: center;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 800;
  gap: 8px;
}

.release-locales > p {
  font-size: 12px;
  line-height: 1.45;
  margin: 10px 0;
}

.release-locale-count,
.release-list-count {
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--linkdb-blue) 20%, var(--line));
  border-radius: 999px;
  color: var(--brand-deep);
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
}

.release-list-count {
  white-space: nowrap;
}

.release-locale-fields {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.release-locale-empty {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

.release-locale-row {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(96px, 0.24fr) minmax(220px, 1fr) auto;
}

.release-locale-row input,
.release-locale-row textarea {
  min-height: 40px;
}

.release-locale-row textarea {
  resize: vertical;
}

.release-locale-remove {
  min-width: auto;
}

.admin-list {
  display: grid;
  gap: 10px;
}

.admin-reseller-card {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  display: grid;
  gap: 8px;
  padding: 13px;
}

.partner-record-trigger {
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  width: 100%;
}

.partner-record-trigger:hover,
.partner-record-trigger:focus-visible {
  border-color: color-mix(in srgb, var(--linkdb-blue) 45%, var(--line));
  box-shadow: 0 10px 24px rgb(15 23 42 / 9%);
  outline: none;
  transform: translateY(-1px);
}

.partner-record-status {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 8px;
  white-space: nowrap;
}

.partner-record-status.is-active {
  background: color-mix(in srgb, #16a34a 13%, var(--panel));
  color: #15803d;
}

.partner-record-status.is-suspended {
  background: color-mix(in srgb, #dc2626 12%, var(--panel));
  color: #b91c1c;
}

.reseller-partner-record {
  background: color-mix(in srgb, var(--panel) 94%, var(--brand-soft));
  border: 1px solid color-mix(in srgb, var(--linkdb-blue) 26%, var(--line));
  border-radius: 14px;
  box-shadow: 0 18px 40px rgb(15 23 42 / 8%);
  display: grid;
  gap: 18px;
  margin: 0 16px 18px;
  padding: 22px;
}

.partner-record-head {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.partner-record-head h2,
.partner-record-section h3,
.partner-record-form h3 {
  margin: 3px 0 0;
}

.partner-record-head p {
  margin: 7px 0 0;
}

.partner-record-metrics {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.partner-record-metrics > div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 5px;
  padding: 12px;
}

.partner-record-metrics span,
.partner-record-list span,
.partner-record-list small {
  color: var(--muted);
  font-size: 12px;
}

.partner-record-metrics strong {
  color: var(--brand-deep);
  font-size: 23px;
}

.partner-record-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.partner-record-form,
.partner-record-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 12px;
  padding: 16px;
}

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

.partner-record-form .customer-detail-card-head,
.partner-record-form .request-actions {
  grid-column: 1 / -1;
}

.partner-record-form label,
.partner-password-form label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
}

.partner-record-list {
  display: grid;
  gap: 8px;
}

.partner-record-list article {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 3px;
  padding: 10px;
}

.partner-billing-context {
  display: grid;
  gap: 4px 12px;
  grid-template-columns: max-content minmax(0, 1fr);
  margin: 0;
}

.partner-billing-context dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.partner-billing-context dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.partner-password-form {
  align-items: end;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px;
}

.partner-password-form label {
  min-width: min(100%, 280px);
}

@media (max-width: 760px) {
  .reseller-partner-record {
    margin-left: 0;
    margin-right: 0;
    padding: 16px;
  }

  .partner-record-head,
  .partner-password-form {
    align-items: stretch;
    flex-direction: column;
  }

  .partner-record-metrics,
  .partner-record-grid,
  .partner-record-form {
    grid-template-columns: 1fr;
  }
}

.translation-quality-page {
  display: grid;
  gap: 20px;
}

.translation-quality-head {
  align-items: flex-start;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.translation-quality-head h1 {
  margin-bottom: 6px;
}

.translation-quality-notice {
  align-items: flex-start;
  background: color-mix(in srgb, var(--linkdb-blue) 7%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--linkdb-blue) 22%, var(--line));
  border-radius: 12px;
  display: grid;
  gap: 5px;
  padding: 15px 18px;
}

.translation-quality-notice span {
  color: var(--muted);
  line-height: 1.5;
}

.translation-operations-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
}

.translation-worker-panel,
.translation-google-config {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
}

.translation-operation-head {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.translation-operation-head h2 {
  font-size: 20px;
  margin: 3px 0 0;
}

.translation-worker-progress {
  background: color-mix(in srgb, var(--linkdb-blue) 8%, var(--control));
  border: 1px solid var(--line);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}

.translation-worker-progress span {
  background: linear-gradient(90deg, var(--linkdb-blue), var(--green));
  display: block;
  height: 100%;
  min-width: 0;
  transition: width 220ms ease;
  width: 0;
}

.translation-worker-progress.is-indeterminate span {
  animation: translation-progress-pulse 1.5s ease-in-out infinite;
  min-width: 28%;
}

@keyframes translation-progress-pulse {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(370%); }
}

.translation-worker-metrics {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.translation-worker-metrics div {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px 12px;
}

.translation-worker-metrics dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.translation-worker-metrics dd {
  font-size: 14px;
  font-weight: 800;
  margin: 0;
  overflow-wrap: anywhere;
}

.translation-google-form {
  display: grid;
  gap: 12px;
}

.translation-google-form > label:not(.translation-google-toggle) {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 7px;
}

.translation-google-form input[type="file"] {
  background: var(--control);
  border: 1px dashed color-mix(in srgb, var(--linkdb-blue) 40%, var(--line));
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  min-width: 0;
  padding: 10px;
  width: 100%;
}

.translation-google-toggle {
  align-items: center;
  display: flex;
  font-weight: 800;
  gap: 9px;
}

.translation-google-toggle input {
  accent-color: var(--linkdb-blue);
  height: 20px;
  width: 20px;
}

.translation-google-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.translation-google-meta {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
  overflow-wrap: anywhere;
}

.translation-quality-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.translation-summary-card {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 15px 17px;
}

.translation-summary-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.translation-summary-card strong {
  font-size: 22px;
  overflow-wrap: anywhere;
}

.translation-summary-card.is-ready,
.translation-summary-card.is-resolved {
  border-color: color-mix(in srgb, var(--green) 32%, var(--line));
}

.translation-quality-filters {
  align-items: end;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(135px, 1fr)) auto;
  padding: 15px;
}

.translation-quality-filters label,
.translation-approval-form label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  min-width: 0;
}

.translation-quality-filters input,
.translation-quality-filters select,
.translation-approval-form input,
.translation-approval-form textarea {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  font: inherit;
  min-height: 44px;
  padding: 9px 11px;
  width: 100%;
}

.translation-approval-form textarea {
  line-height: 1.5;
  min-height: 150px;
  resize: vertical;
}

.translation-quality-workspace {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(330px, 0.85fr) minmax(520px, 1.6fr);
  min-height: 620px;
}

.translation-review-column,
.translation-review-detail {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 14px;
  min-width: 0;
  padding: 16px;
}

.translation-column-head,
.translation-detail-head,
.translation-detail-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.translation-column-head h2,
.translation-detail-head h2 {
  margin: 0;
}

.translation-column-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.translation-review-list {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  max-height: 820px;
  overflow: auto;
  padding-right: 3px;
}

.translation-review-card {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 13px;
  text-align: left;
  width: 100%;
}

.translation-review-card:hover,
.translation-review-card:focus-visible,
.translation-review-card.is-selected {
  border-color: var(--linkdb-blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--linkdb-blue) 12%, transparent);
}

.translation-review-card-head,
.translation-review-meta,
.translation-review-errors {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: space-between;
  min-width: 0;
}

.translation-review-card-head strong {
  max-width: 68%;
  overflow-wrap: anywhere;
}

.translation-review-meta {
  color: var(--muted);
  font-size: 12px;
  justify-content: flex-start;
}

.translation-review-errors {
  justify-content: flex-start;
}

.translation-review-errors code,
.translation-detail-errors code {
  background: color-mix(in srgb, var(--red) 9%, var(--control));
  border-radius: 6px;
  color: var(--red);
  font-size: 11px;
  padding: 4px 6px;
}

.translation-state {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  padding: 5px 8px;
  white-space: nowrap;
}

.translation-state.is-suggestion_ready,
.translation-state.is-resolved,
.translation-state.is-ready,
.translation-state.is-completed,
.translation-state.is-sleeping {
  background: color-mix(in srgb, var(--green) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--green) 30%, var(--line));
  color: var(--green);
}

.translation-state.is-google_pending,
.translation-state.is-approved_pending_sync,
.translation-state.is-running,
.translation-state.is-starting,
.translation-state.is-partial {
  background: color-mix(in srgb, #d79000 10%, var(--panel));
  border-color: color-mix(in srgb, #d79000 32%, var(--line));
  color: #9a6500;
}

.translation-state.is-failed,
.translation-state.is-stale,
.translation-state.is-runtime_unavailable,
.translation-state.is-credentials_missing {
  background: color-mix(in srgb, var(--red) 9%, var(--panel));
  border-color: color-mix(in srgb, var(--red) 30%, var(--line));
  color: var(--red);
}

.translation-load-more {
  margin-top: 12px;
  width: 100%;
}

.translation-review-detail {
  align-content: start;
  display: grid;
  gap: 18px;
}

.translation-detail-meta {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.translation-detail-meta div {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 9px;
  display: grid;
  gap: 5px;
  padding: 10px;
}

.translation-detail-meta dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.translation-detail-meta dd {
  font-weight: 800;
  margin: 0;
  overflow-wrap: anywhere;
}

.translation-text-comparison {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.translation-text-comparison article {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-width: 0;
  padding: 12px;
}

.translation-text-comparison article > span {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.translation-text-comparison pre {
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
  margin: 0;
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.translation-google-candidate {
  border-color: color-mix(in srgb, var(--linkdb-blue) 30%, var(--line)) !important;
}

.translation-detail-errors {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.translation-approval-form {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  padding-top: 18px;
}

.translation-detail-actions {
  justify-content: flex-start;
}

.translation-detail-actions button {
  min-height: 44px;
}

.translation-resolution {
  background: color-mix(in srgb, var(--green) 9%, var(--control));
  border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line));
  border-radius: 10px;
  display: grid;
  gap: 5px;
  padding: 14px;
}

.translation-resolution span,
.translation-audit li span {
  color: var(--muted);
  font-size: 12px;
}

.translation-audit ol {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding-left: 20px;
}

.translation-audit li {
  padding-left: 4px;
}

.translation-audit li strong,
.translation-audit li span {
  display: block;
}

@media (max-width: 1180px) {
  .translation-operations-grid {
    grid-template-columns: 1fr;
  }

  .translation-quality-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .translation-quality-workspace {
    grid-template-columns: 1fr;
  }

  .translation-review-list {
    max-height: 460px;
  }
}

@media (max-width: 760px) {
  body[data-hub-page="translations"] .operator-nav {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding: 7px;
    scrollbar-width: thin;
  }

  body[data-hub-page="translations"] .operator-nav::before,
  body[data-hub-page="translations"] .operator-nav-more summary {
    display: none;
  }

  body[data-hub-page="translations"] .operator-nav > a,
  body[data-hub-page="translations"] .operator-nav-more > a {
    flex: 0 0 auto;
    margin: 0;
    min-height: 40px;
    width: auto;
  }

  body[data-hub-page="translations"] .operator-nav-more {
    border: 0;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
  }

  body[data-hub-page="translations"] .operator-nav-more > a {
    display: none;
  }

  body[data-hub-page="translations"] .operator-nav-more > a.is-active {
    display: flex;
  }

  .translation-quality-head,
  .translation-operation-head,
  .translation-detail-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .translation-quality-filters,
  .translation-worker-metrics,
  .translation-detail-meta,
  .translation-text-comparison {
    grid-template-columns: 1fr;
  }

  .translation-quality-filters button,
  .translation-quality-head button,
  .translation-google-actions button,
  .translation-detail-actions button {
    width: 100%;
  }

  .translation-quality-workspace {
    min-height: 0;
  }
}

.admin-reseller-card header {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.admin-reseller-card small {
  color: var(--muted);
}

.release-card {
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--linkdb-blue) 13%, var(--line));
  border-radius: 9px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.release-card.is-editing {
  border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}

#releasesList {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.release-card-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.release-card-title {
  display: grid;
  gap: 4px;
}

.release-card-title strong {
  font-size: 16px;
}

.release-card-title small {
  color: var(--muted);
  font-weight: 700;
}

.release-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.release-status-badge,
.release-meta-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
}

.release-status-badge.released {
  background: var(--linkdb-teal-soft);
  border-color: color-mix(in srgb, var(--linkdb-teal) 42%, var(--line));
  color: var(--green);
}

.release-status-badge.draft,
.release-status-badge.rc {
  background: color-mix(in srgb, var(--yellow) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--yellow) 30%, var(--line));
  color: var(--yellow);
}

.release-status-badge.deprecated {
  background: color-mix(in srgb, var(--red) 8%, var(--panel));
  border-color: color-mix(in srgb, var(--red) 25%, var(--line));
  color: var(--red);
}

.release-meta-badge {
  color: var(--muted);
}

.release-card-notes {
  color: var(--ink);
  display: grid;
  gap: 9px;
}

.release-card-notes p,
.release-card-notes ul {
  line-height: 1.55;
  margin: 0;
}

.release-card-notes ul {
  display: grid;
  gap: 6px;
  padding-left: 20px;
}

.release-card-notes .muted {
  color: var(--muted);
}

.release-card-details {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.release-card-details summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.release-card-details dl {
  display: grid;
  font-size: 12px;
  gap: 6px;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 10px 0 0;
}

.release-card-details dt {
  color: var(--muted);
  font-weight: 700;
}

.release-card-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.release-card-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.release-card p {
  margin: 0;
}

@media (max-width: 760px) {
  .release-section-head,
  .release-card-head,
  .release-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .release-locale-row {
    grid-template-columns: 1fr;
  }

  #releasesList {
    grid-template-columns: 1fr;
  }
}

.marketplace-admin-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  padding: 16px;
}

.marketplace-form {
  align-content: start;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  padding: 14px;
}

.marketplace-form h2,
.marketplace-lists h2 {
  grid-column: 1 / -1;
}

.marketplace-form textarea {
  min-height: 74px;
}

.marketplace-lists {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 0.9fr);
  padding: 0 16px 16px;
}

.marketplace-card,
.marketplace-entitlement-card {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  display: grid;
  gap: 8px;
  padding: 13px;
}

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

.marketplace-card p,
.marketplace-card small,
.marketplace-entitlement-card small {
  color: var(--muted);
  margin: 0;
}

.reseller-password-form,
.reseller-erp-form,
.reseller-contract-form {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.reseller-password-form input,
.reseller-erp-form input,
.reseller-contract-form input,
.reseller-contract-form select {
  background: var(--control);
  border: 1px solid var(--line);
  color: var(--ink);
  min-height: 38px;
  padding: 7px 9px;
}

.reseller-contract-form {
  background: color-mix(in srgb, var(--panel) 72%, var(--panel-muted));
  border: 1px solid var(--line);
  grid-template-columns: minmax(150px, 1fr) minmax(120px, 0.7fr) auto auto;
  padding: 10px;
}

.reseller-contract-form label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  gap: 5px;
}

.reseller-contract-form .inline-check {
  align-content: center;
  color: var(--ink);
  grid-template-columns: auto 1fr;
  min-height: 38px;
}

.checkbox-card {
  align-items: center;
  background: color-mix(in srgb, var(--panel) 72%, var(--panel-muted));
  border: 1px solid var(--line);
  color: var(--ink);
  display: flex !important;
  gap: 8px;
  min-height: 46px;
  padding: 8px 10px;
}

.link-edit-form {
  background: color-mix(in srgb, var(--panel) 74%, var(--panel-muted));
  border: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(130px, 1fr)) auto;
  padding: 10px;
}

.link-edit-form label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 700;
  gap: 5px;
}

.link-edit-form input,
.link-edit-form select {
  background: var(--control);
  border: 1px solid var(--line);
  color: var(--ink);
  min-height: 38px;
  padding: 7px 9px;
}

.link-edit-form button {
  align-self: end;
  min-height: 38px;
}

.admin-link-row,
.admin-request-row,
.admin-contract-row,
.admin-contract-template-row {
  border: 1px solid var(--line);
  display: grid;
  gap: 8px;
  padding: 12px;
}

body.reseller-page {
  background:
    linear-gradient(135deg, rgba(123, 185, 231, 0.18), transparent 34%),
    linear-gradient(180deg, var(--bg), var(--panel-muted));
  min-height: 100vh;
}

:root[data-theme="dark"] .reseller-auth-page,
:root[data-theme="dark"] body.reseller-page {
  background:
    linear-gradient(135deg, rgba(50, 208, 189, 0.16), transparent 34%),
    linear-gradient(180deg, #07111c, #0d1422);
}

.reseller-auth-card {
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border-color: color-mix(in srgb, var(--linkdb-blue) 22%, var(--line));
}

.reseller-auth-brand {
  align-items: flex-start;
  display: grid;
  gap: 12px;
}

.reseller-auth-brand .linkdb-logo {
  height: 28px;
  width: 198px;
}

.reseller-auth-brand span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.reseller-page .reseller-topbar {
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  min-height: 76px;
  padding: 18px 32px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.reseller-brand {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--ink);
  display: flex;
  gap: 16px;
  padding: 0;
}

.reseller-brand:hover {
  background: transparent;
}

.linkdb-logo {
  height: 26px;
  width: 190px;
}

.reseller-brand span {
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  padding-left: 16px;
  text-transform: uppercase;
}

.language-chip {
  background: var(--linkdb-teal-soft);
  border: 1px solid color-mix(in srgb, var(--linkdb-teal) 42%, transparent);
  color: var(--linkdb-ink);
  font-size: 13px;
  font-weight: 800;
  padding: 9px 12px;
}

.reseller-page select {
  color-scheme: light;
}

:root[data-theme="dark"] .reseller-page select {
  color-scheme: dark;
}

.reseller-page select option,
.reseller-page select optgroup {
  background: var(--control);
  color: var(--ink);
}

.portal-language-select {
  align-items: center;
  background: var(--linkdb-teal-soft);
  border: 1px solid color-mix(in srgb, var(--linkdb-teal) 42%, transparent);
  color: var(--linkdb-ink);
  display: inline-flex;
  gap: 8px;
  min-height: 40px;
  padding: 6px 10px;
}

.portal-language-select span {
  color: var(--linkdb-ink);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.portal-language-select select {
  appearance: auto;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  min-height: 32px;
  min-width: 92px;
  outline: none;
  padding: 5px 8px;
}

.reseller-page .theme-toggle,
.reseller-page .topbar-link,
.reseller-page .privacy-toggle,
.reseller-page #resellerLogoutButton {
  min-height: 40px;
}

.reseller-page .privacy-toggle {
  background: color-mix(in srgb, var(--panel-muted) 86%, transparent);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  padding: 9px 12px;
}

.reseller-page .privacy-toggle[aria-pressed="true"] {
  background: color-mix(in srgb, var(--linkdb-teal-soft) 88%, var(--panel));
  border-color: color-mix(in srgb, var(--linkdb-teal) 44%, var(--line));
  color: var(--linkdb-ink);
}

.reseller-page.is-credit-hidden [data-credit-sensitive] {
  color: transparent !important;
  display: inline-block;
  min-width: 84px;
  position: relative;
  text-shadow: none !important;
  user-select: none;
}

.reseller-page.is-credit-hidden [data-credit-sensitive]::after {
  color: var(--ink);
  content: "••••••";
  inset: 0 auto auto 0;
  position: absolute;
  white-space: nowrap;
}

.reseller-welcome {
  align-items: stretch;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--linkdb-blue) 14%, var(--panel)), var(--panel) 54%),
    var(--panel);
  border: 1px solid color-mix(in srgb, var(--linkdb-blue) 20%, var(--line));
  box-shadow: 0 24px 70px rgb(15 23 42 / 10%);
  display: grid;
  gap: 14px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(320px, 1.2fr) minmax(360px, 1fr) minmax(190px, 0.45fr);
  margin-bottom: 0;
  overflow: hidden;
  padding: 18px 20px;
  position: relative;
}

:root[data-theme="dark"] .reseller-welcome {
  background:
    linear-gradient(135deg, rgba(21, 79, 158, 0.22), transparent 48%),
    var(--panel);
  box-shadow: 0 26px 80px rgb(0 0 0 / 32%);
}

.reseller-welcome::before {
  background: linear-gradient(90deg, var(--linkdb-teal), var(--linkdb-sky), var(--linkdb-blue));
  content: "";
  height: 4px;
  inset: 0 0 auto;
  position: absolute;
}

.reseller-welcome-copy {
  align-content: center;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.reseller-welcome .eyebrow {
  margin-bottom: 0;
}

.reseller-welcome h1 {
  font-size: clamp(28px, 3.2vw, 38px);
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
  max-width: 880px;
}

.reseller-welcome p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
  max-width: 820px;
}

.reseller-welcome-visual {
  align-content: stretch;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flow-step {
  align-content: center;
  background: color-mix(in srgb, var(--panel-muted) 86%, transparent);
  border: 1px solid var(--line);
  display: grid;
  gap: 4px;
  min-height: 0;
  min-width: 0;
  padding: 10px;
}

.flow-step span {
  color: var(--linkdb-teal);
  font-size: 13px;
  font-weight: 900;
}

.flow-step strong {
  color: var(--ink);
  font-size: 15px;
}

.flow-step small {
  color: var(--muted);
  line-height: 1.35;
}

.reseller-welcome .reseller-credit {
  align-content: center;
  background:
    linear-gradient(180deg, var(--linkdb-teal-soft), color-mix(in srgb, var(--panel) 88%, var(--linkdb-teal-soft)));
  border: 1px solid color-mix(in srgb, var(--linkdb-teal) 34%, var(--line));
  box-shadow: none;
  gap: 8px;
  padding: 16px;
}

.reseller-tabs {
  background: var(--panel);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-column: 1;
  grid-row: 1 / span 20;
  margin-bottom: 0;
  padding: 8px;
  position: sticky;
  top: 96px;
}

.reseller-welcome ~ .reseller-tabs {
  grid-row: 2 / span 20;
}

.reseller-tabs::before {
  color: var(--muted);
  content: attr(data-menu-label);
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 10px 10px 4px;
  text-transform: uppercase;
}

.reseller-tabs :is(button, a) {
  align-items: center;
  border-color: transparent;
  color: var(--muted);
  display: flex;
  font-weight: 900;
  justify-content: flex-start;
  min-height: 46px;
  padding-inline: 14px;
  text-align: left;
  text-decoration: none;
}

.reseller-tabs :is(button, a).is-active {
  background: linear-gradient(135deg, var(--linkdb-blue), #007ec2);
  border-color: color-mix(in srgb, var(--linkdb-blue) 45%, var(--line));
  color: #fff;
}

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

.portal-tab-panel {
  display: block;
  grid-column: 2;
  min-width: 0;
}

.portal-tab-panel[hidden] {
  display: none;
}

.hub-pagination {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

.hub-pagination span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.reseller-section-grid,
.support-grid,
.deployment-reseller-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
}

.primary-panel .reseller-customer-list {
  min-height: 260px;
}

.contracts-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(320px, 0.75fr) minmax(420px, 1.15fr);
}

.operator-contracts-grid .portal-admin-contracts,
.operator-contracts-grid .portal-admin-templates {
  padding: 0;
}

.operator-contracts-grid .admin-list {
  padding: 18px 20px 20px;
}

.contracts-history-panel {
  grid-column: 1 / -1;
}

.contract-template-list,
.contract-document-list {
  display: grid;
  gap: 12px;
  padding: 18px 20px 20px;
}

.contract-template-card,
.contract-document-card {
  align-items: center;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 15px;
}

.contract-template-card strong,
.contract-template-card span,
.contract-document-card strong,
.contract-document-card small {
  display: block;
}

.contract-template-card span,
.contract-document-card small {
  color: var(--muted);
  line-height: 1.45;
  margin-top: 4px;
}

.contract-sign-form,
.contract-template-upload-form {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 20px;
}

.contract-sign-form .full,
.contract-template-upload-form .full {
  grid-column: 1 / -1;
}

.contract-status {
  background: var(--brand-soft);
  color: var(--brand-deep);
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 7px;
  padding: 6px 8px;
  text-transform: uppercase;
}

.contract-document-card.official .contract-status,
.admin-contract-row.official .contract-status {
  background: var(--linkdb-teal-soft);
  color: var(--linkdb-ink);
}

.contract-document-card.rejected .contract-status,
.admin-contract-row.rejected .contract-status {
  background: color-mix(in srgb, var(--red) 12%, var(--panel));
  color: var(--red);
}

.admin-contract-row {
  background: var(--panel-muted);
}

.admin-contract-template-row {
  background: var(--panel-muted);
  margin-top: 10px;
}

.admin-contract-template-row.active .contract-status {
  background: var(--linkdb-teal-soft);
  color: var(--linkdb-ink);
}

.admin-contract-row .request-actions,
.admin-contract-template-row .request-actions {
  flex-wrap: wrap;
}

.support-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px;
}

.reseller-support-layout {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.38fr);
}

.reseller-support-form {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 20px;
}

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

.reseller-support-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.reseller-support-form label > span,
.reseller-support-identity > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.reseller-support-form input,
.reseller-support-form select,
.reseller-support-form textarea {
  background: var(--control);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  min-height: 44px;
  min-width: 0;
  padding: 10px 12px;
  width: 100%;
}

.reseller-support-form textarea {
  min-height: 180px;
  resize: vertical;
}

.reseller-support-form input:focus-visible,
.reseller-support-form select:focus-visible,
.reseller-support-form textarea:focus-visible {
  border-color: var(--linkdb-blue);
  outline: 3px solid color-mix(in srgb, var(--linkdb-blue) 24%, transparent);
  outline-offset: 1px;
}

.reseller-support-form small {
  color: var(--muted);
  line-height: 1.45;
}

.reseller-support-identity {
  background: color-mix(in srgb, var(--linkdb-teal-soft) 58%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--linkdb-teal) 30%, var(--line));
  display: grid;
  gap: 5px;
  padding: 14px;
}

.reseller-support-files input[type="file"] {
  padding: 8px;
}

.reseller-support-file-list {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: -6px 0 0;
  padding: 0;
}

.reseller-support-file-list li {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  color: var(--ink);
  overflow-wrap: anywhere;
  padding: 9px 11px;
}

.support-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 20px 20px 22px 38px;
}

.support-list li {
  color: var(--ink);
}

.package-admin-form,
.signage-price-form,
.package-select-fieldset {
  display: grid;
  gap: 14px;
}

.package-admin-grid,
.reseller-package-list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.package-overview-panel .reseller-package-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 20px 20px;
}

.package-overview-panel .package-detail {
  margin: 0 20px 20px;
}

.signage-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

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

.package-admin-card,
.signage-price-row,
.package-card,
.deployment-package-summary,
.package-detail {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.package-admin-card {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.package-admin-card header,
.deployment-package-summary {
  display: grid;
  gap: 6px;
}

.package-admin-card header {
  grid-template-columns: 1fr auto;
}

.package-admin-card label {
  display: grid;
  gap: 6px;
}

.commercial-pricing-head {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.commercial-pricing-head h2 {
  margin: 5px 0 6px;
}

.signage-price-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
}

.signage-price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 14px;
}

.signage-price-row > span:first-child,
.signage-price-value {
  display: flex;
  min-width: 0;
}

.signage-price-row > span:first-child {
  flex-direction: column;
  gap: 4px;
}

.signage-price-row small {
  color: var(--muted);
}

.signage-price-value {
  align-items: center;
  gap: 10px;
}

.signage-price-value input {
  min-width: 0;
  width: 100%;
}

.signage-price-value b {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .signage-price-toolbar,
  .signage-price-row {
    grid-template-columns: 1fr;
  }
}

.package-card {
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 6px;
  min-height: 120px;
  padding: 14px;
  text-align: left;
  width: 100%;
}

.package-card.active,
.package-card:hover {
  border-color: var(--linkdb-teal);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--linkdb-teal) 18%, transparent);
}

.deployment-package-summary,
.package-detail {
  padding: 14px;
}

.package-detail {
  display: grid;
  gap: 12px;
}

.package-detail > .action-button {
  justify-self: start;
}

.signage-package-detail-head {
  align-items: start;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.signage-package-detail-head h3 {
  margin: 5px 0 6px;
}

.signage-package-detail-head p {
  color: var(--muted);
  margin: 0;
}

.signage-package-detail-head > strong {
  flex: 0 0 auto;
  font-size: 18px;
}

.signage-package-facts {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.signage-package-facts > div {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 5px;
  min-width: 0;
  padding-top: 11px;
}

.signage-package-facts dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.signage-package-facts dd {
  font-weight: 800;
  margin: 0;
  overflow-wrap: anywhere;
}

.package-feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.package-feature-list a {
  background: color-mix(in srgb, var(--linkdb-teal) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--linkdb-teal) 24%, var(--line));
  border-radius: 999px;
  color: var(--ink);
  padding: 6px 10px;
  text-decoration: none;
}

.withdrawn .dot,
.rejected .dot {
  background: var(--red);
}

.reseller-page .reseller-panel {
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  border-color: color-mix(in srgb, var(--linkdb-blue) 12%, var(--line));
  color: var(--ink);
  min-width: 0;
}

:root[data-theme="dark"] .reseller-page .reseller-panel {
  background: var(--panel);
}

.reseller-page .panel-head.clean {
  background: color-mix(in srgb, var(--panel) 92%, var(--panel-muted));
}

:root[data-theme="dark"] .reseller-page .panel-head.clean {
  background: color-mix(in srgb, var(--panel) 72%, var(--panel-muted));
}

.reseller-workspace-head {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

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

.reseller-customer-workspace {
  overflow: hidden;
}

.reseller-customer-search {
  display: grid;
  gap: 7px;
  margin: 0 20px 18px;
  max-width: 620px;
  width: calc(100% - 40px);
}

.reseller-customer-search > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.reseller-customer-search input {
  width: 100%;
}

.reseller-customer-search .field-hint {
  display: block;
  line-height: 1.4;
}

#resellerCustomerDetailView {
  padding: 20px;
}

.reseller-customer-card-action {
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.reseller-customer-card-action:hover,
.reseller-customer-card-action:focus-visible {
  border-color: color-mix(in srgb, var(--linkdb-blue) 64%, var(--line));
  box-shadow: 0 12px 28px rgb(15 23 42 / 14%);
  outline: none;
  transform: translateY(-1px);
}

.reseller-customer-card-action-label {
  color: var(--linkdb-blue);
  font-size: 13px;
  font-weight: 800;
}

.reseller-customer-detail-body {
  display: grid;
  gap: 22px;
  padding: 20px;
}

.reseller-customer-facts {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
}

.reseller-customer-facts > div {
  background: var(--panel-muted);
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px;
}

.reseller-customer-facts span,
.reseller-site-card span,
.reseller-site-card small {
  color: var(--muted);
  font-size: 13px;
}

.reseller-customer-facts strong,
.reseller-site-card strong {
  overflow-wrap: anywhere;
}

.reseller-customer-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.customer-service-actions .secondary-action.is-active {
  background: color-mix(in srgb, var(--linkdb-teal) 16%, var(--panel));
  border-color: color-mix(in srgb, var(--linkdb-teal) 45%, var(--line));
}

.reseller-note-form {
  display: grid;
  gap: 12px;
}

.reseller-note-form label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  font-weight: 800;
  gap: 6px;
}

.reseller-note-form textarea {
  background: var(--control);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
}

.reseller-customer-sites {
  display: grid;
  gap: 14px;
}

.reseller-subsection-head h3 {
  margin: 4px 0 0;
}

.reseller-site-list {
  display: grid;
  gap: 10px;
}

.reseller-site-card {
  align-items: center;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  display: grid;
  gap: 6px 16px;
  grid-template-columns: minmax(170px, .55fr) minmax(0, 1fr) auto;
  padding: 14px;
}

.reseller-site-create {
  border: 1px solid var(--line);
  background: var(--panel-muted);
}

.reseller-site-create > summary {
  color: var(--brand-deep);
  cursor: pointer;
  font-weight: 800;
  padding: 15px;
}

.reseller-site-create .reseller-request-form {
  border-top: 1px solid var(--line);
}

.reseller-customer-create-form,
.reseller-site-create .reseller-request-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reseller-page .map-empty {
  align-content: center;
  align-items: center;
  color: var(--muted);
  display: grid;
  gap: 10px;
  justify-items: center;
  min-height: inherit;
  padding: 24px;
  text-align: center;
}

.reseller-page .map-empty strong {
  color: var(--ink);
}

.reseller-page .map-load-error {
  background: color-mix(in srgb, var(--red) 8%, var(--panel-muted));
}

@media (max-width: 1120px) and (min-width: 761px) {
  .reseller-page .reseller-topbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .reseller-page .reseller-topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }

  .reseller-main {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .reseller-welcome,
  .reseller-tabs,
  .portal-tab-panel {
    grid-column: 1;
    grid-row: auto;
  }

  .reseller-welcome {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.38fr);
  }

  .reseller-welcome-copy {
    grid-column: 1 / -1;
  }

  .reseller-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: static;
    top: auto;
  }

  .reseller-tabs::before {
    grid-column: 1 / -1;
  }

  .reseller-tabs :is(button, a) {
    justify-content: center;
    text-align: center;
  }

  .reseller-signage-panel .signage-wizard,
  .signage-step-panel,
  .signage-review {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .reseller-signage-panel .signage-wizard > .full,
  .reseller-signage-panel .signage-wizard > .request-actions,
  .signage-review > p {
    grid-column: 1 / -1;
  }
}

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

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

  main {
    padding: 14px;
  }

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

  .instance-overview {
    grid-template-columns: 1fr;
  }

  .instance-toolbar {
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
  }

  .instance-filter-field {
    flex: 1 1 150px;
  }

  .instance-filter-field select {
    min-width: 0;
    width: 100%;
  }

  .agreement-form {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .form-section,
  .agreement-section {
    grid-template-columns: 1fr;
  }

  .deployment-form,
  .deployment-hints {
    grid-template-columns: 1fr;
  }

  .reseller-auth-shell,
  .reseller-main,
  .operator-main {
    padding: 16px;
  }

  .operator-shell,
  .reseller-main {
    display: grid;
    grid-template-columns: 1fr;
  }

  .operator-shell > .operator-hero,
  .operator-shell > .summary,
  .operator-shell > .operator-section,
  .operator-nav,
  .reseller-welcome,
  .reseller-tabs,
  .portal-tab-panel {
    grid-column: 1;
    grid-row: auto;
  }

  .reseller-topbar,
  .operator-topbar,
  .request-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .reseller-workspace-head {
    align-items: stretch;
    flex-direction: column;
  }

  .reseller-customer-facts,
  .reseller-site-card,
  .reseller-customer-create-form,
  .reseller-site-create .reseller-request-form {
    grid-template-columns: 1fr;
  }

  .reseller-topbar-actions,
  .operator-topbar-actions {
    width: 100%;
  }

  .reseller-page .reseller-topbar {
    padding: 14px 16px;
  }

  .reseller-page .reseller-topbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reseller-page .reseller-topbar-actions > button,
  .reseller-page .reseller-topbar-actions > .topbar-link,
  .reseller-page .reseller-topbar-actions > .portal-language-select {
    min-width: 0;
    width: 100%;
  }

  .reseller-page .reseller-topbar-actions > .portal-language-select,
  .reseller-page .reseller-topbar-actions > .topbar-status {
    grid-column: 1 / -1;
  }

  .reseller-page .portal-language-select select {
    min-width: 0;
    width: 100%;
  }

  .reseller-support-layout,
  .reseller-support-form {
    grid-template-columns: 1fr;
  }

  .signage-plan-grid,
  .signage-package-options,
  .signage-package-facts {
    grid-template-columns: 1fr;
  }

  .signage-package-detail-head {
    align-items: stretch;
    flex-direction: column;
  }

  .reseller-support-form .full {
    grid-column: auto;
  }

  .reseller-support-form .request-actions,
  .reseller-support-form .request-actions button {
    width: 100%;
  }

  .linkdb-logo {
    height: 22px;
    width: 150px;
  }

  .reseller-brand span {
    border-left: 0;
    padding-left: 0;
  }

  .operator-brand span {
    border-left: 0;
    padding-left: 0;
  }

  .operator-hero {
    padding: 18px;
  }

  .operator-hero h1 {
    font-size: 26px;
  }

  .operator-hero-status {
    grid-template-columns: 1fr;
  }

  .operator-nav {
    position: static;
  }

  .reseller-tabs {
    position: static;
  }

  .operator-nav :is(button, a) {
    min-height: 40px;
  }

  .operator-dashboard-page .metric {
    padding: 14px;
  }

  .operator-dashboard-page .metric strong {
    font-size: 24px;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .operator-dashboard-page .metric-wide {
    grid-column: 1 / -1;
  }

  .dashboard-panel-head,
  .dashboard-actions {
    align-items: stretch;
    display: grid;
  }

  .dashboard-actions > * {
    width: 100%;
  }

  .operator-dashboard-page th:last-child,
  .operator-dashboard-page td:last-child {
    box-shadow: none;
    position: static;
  }

  .reseller-hero,
  .reseller-welcome,
  .reseller-tabs,
  .operator-hero,
  .operator-nav,
  .reseller-section-grid,
  .support-grid,
  .deployment-reseller-grid,
  .contracts-grid,
  .reseller-grid,
  .reseller-customer-card,
  .contract-template-card,
  .contract-document-card,
  .contract-sign-form,
  .contract-template-upload-form,
  .reseller-deployment-form,
  .deployment-wizard-steps,
  .deployment-step-grid,
  .reseller-request-form fieldset,
  .wide-fields,
  .checklist-fieldset,
  .reseller-admin-grid,
  .release-grid,
  .marketplace-admin-layout,
  .marketplace-lists,
  .operator-admin-summary,
  .reseller-admin-form,
  .reseller-link-form,
  .release-form,
  .update-job-form,
  .marketplace-form,
  .reseller-password-form,
  .reseller-erp-form,
  .reseller-contract-form,
  .link-edit-form,
  .worldmap-head,
  .worldmap-layout,
  .location-edit-form,
  .location-image-form,
  .location-image-card {
    grid-template-columns: 1fr !important;
  }

  .customer-worldmap {
    margin-left: 0;
    margin-right: 0;
    padding: 14px;
  }

  .customer-map,
  .location-detail {
    min-height: 320px;
  }

  .reseller-map-button {
    justify-self: stretch;
    width: 100%;
  }

  .package-overview-panel .package-product-switch {
    display: grid;
    grid-template-columns: 1fr;
    padding-inline: 16px;
  }

  .package-overview-panel .reseller-package-list {
    grid-template-columns: 1fr;
    padding-inline: 16px;
  }

  .package-overview-panel .package-detail {
    margin-inline: 16px;
  }

  .reseller-hero h1,
  .reseller-credit strong,
  .reseller-auth-card h1 {
    font-size: 28px;
  }

  .reseller-welcome {
    gap: 10px;
    padding: 14px;
  }

  .reseller-welcome-copy {
    gap: 6px;
  }

  .reseller-welcome h1 {
    font-size: 24px;
  }

  .reseller-welcome p {
    font-size: 13px;
    line-height: 1.35;
  }

  .reseller-welcome .flow-step {
    padding: 8px;
  }

  .reseller-welcome .flow-step small {
    display: none;
  }

  .reseller-welcome .reseller-credit {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px;
  }

  .reseller-welcome .reseller-credit strong {
    font-size: 22px;
  }

  .reseller-welcome .reseller-credit small {
    grid-column: 1 / -1;
  }
}
.product-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  padding: .2rem .55rem;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.product-badge.perfect-studio {
  color: #7a315d;
}

.product-badge.perfect-order {
  color: #245b78;
}

body.signage-sso-page {
  background: #f4f7fb;
  color: var(--linkdb-ink);
  display: grid;
  grid-template-rows: auto 1fr auto;
  margin: 0;
  min-height: 100vh;
}

.signage-sso-header,
.signage-sso-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1180px;
  padding: 24px 32px;
  width: 100%;
}

.signage-sso-header {
  border-bottom: 1px solid #d9e2ec;
}

.signage-sso-brand {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--linkdb-ink);
  display: flex;
  gap: 18px;
  padding: 0;
  text-decoration: none;
}

.signage-sso-brand:hover {
  background: transparent;
}

.signage-sso-brand:focus-visible {
  outline: 3px solid rgb(0 126 194 / 28%);
  outline-offset: 4px;
}

.signage-sso-brand img {
  display: block;
  height: 26px;
  width: 184px;
}

.signage-sso-brand span {
  border-left: 1px solid #cbd6e2;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  padding-left: 18px;
  text-transform: uppercase;
}

.signage-sso-security,
.signage-sso-footer {
  color: #667487;
  font-size: 13px;
}

.signage-sso-main {
  align-items: center;
  display: grid;
  gap: 64px;
  grid-template-columns: minmax(0, 0.82fr) minmax(480px, 1.18fr);
  margin: 0 auto;
  max-width: 1180px;
  padding: 56px 32px 64px;
  width: 100%;
}

.signage-sso-intro {
  border-left: 4px solid var(--linkdb-teal);
  padding: 8px 0 8px 28px;
}

.signage-sso-kicker,
.signage-sso-option-type {
  color: var(--linkdb-blue);
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.signage-sso-intro h1 {
  font-size: 44px;
  line-height: 1.08;
  margin: 14px 0 18px;
}

.signage-sso-intro > p {
  color: #5d6c80;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
  max-width: 500px;
}

.signage-sso-trust {
  border-top: 1px solid #d9e2ec;
  display: grid;
  gap: 5px;
  margin-top: 34px;
  padding-top: 22px;
}

.signage-sso-trust strong {
  font-size: 14px;
}

.signage-sso-trust span {
  color: #667487;
  font-size: 13px;
  line-height: 1.5;
}

.signage-sso-options {
  display: grid;
  gap: 12px;
}

.signage-sso-option {
  background: #ffffff;
  border: 1px solid #d5dfeb;
  border-left: 4px solid var(--linkdb-blue);
  border-radius: 8px;
  color: var(--linkdb-ink);
  display: grid;
  gap: 7px;
  min-height: 148px;
  padding: 20px 22px;
  position: relative;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.signage-sso-option.reseller {
  border-left-color: var(--linkdb-teal);
}

.signage-sso-option:hover {
  border-color: var(--linkdb-blue);
  box-shadow: 0 14px 34px rgb(21 79 158 / 12%);
  transform: translateY(-2px);
}

.signage-sso-option:focus-visible {
  outline: 3px solid rgb(0 126 194 / 28%);
  outline-offset: 3px;
}

.signage-sso-option strong {
  font-size: 20px;
}

.signage-sso-option > span:not(.signage-sso-option-type):not(.signage-sso-option-action) {
  color: #637186;
  line-height: 1.45;
  max-width: 410px;
}

.signage-sso-option-action {
  align-items: center;
  color: var(--linkdb-blue);
  display: flex;
  font-size: 14px;
  font-weight: 800;
  gap: 8px;
  margin-top: 4px;
}

.signage-sso-option-action b {
  font-size: 18px;
  line-height: 1;
}

.signage-sso-footer {
  border-top: 1px solid #d9e2ec;
}

.signage-sso-footer span:first-child {
  color: var(--linkdb-blue);
  font-weight: 800;
}

:root[data-theme="dark"] body.signage-sso-page {
  background: #07111c;
  color: #f4f8fb;
}

:root[data-theme="dark"] .signage-sso-header,
:root[data-theme="dark"] .signage-sso-footer,
:root[data-theme="dark"] .signage-sso-trust {
  border-color: #28384a;
}

:root[data-theme="dark"] .signage-sso-brand,
:root[data-theme="dark"] .signage-sso-option {
  color: #f4f8fb;
}

:root[data-theme="dark"] .signage-sso-brand span {
  border-color: #34475c;
}

:root[data-theme="dark"] .signage-sso-security,
:root[data-theme="dark"] .signage-sso-footer,
:root[data-theme="dark"] .signage-sso-intro > p,
:root[data-theme="dark"] .signage-sso-trust span,
:root[data-theme="dark"] .signage-sso-option > span:not(.signage-sso-option-type):not(.signage-sso-option-action) {
  color: #aebdd0;
}

:root[data-theme="dark"] .signage-sso-option {
  background: #101c2a;
  border-bottom-color: #2b3b4d;
  border-right-color: #2b3b4d;
  border-top-color: #2b3b4d;
}

@media (max-width: 860px) {
  .signage-sso-main {
    align-items: stretch;
    gap: 36px;
    grid-template-columns: 1fr;
    padding-top: 40px;
  }

  .signage-sso-intro h1 {
    font-size: 38px;
  }
}

@media (max-width: 560px) {
  .signage-sso-header,
  .signage-sso-footer,
  .signage-sso-main {
    padding-left: 20px;
    padding-right: 20px;
  }

  .signage-sso-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .signage-sso-brand {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .signage-sso-brand img {
    height: 23px;
    width: 164px;
  }

  .signage-sso-brand span {
    border-left: 0;
    padding-left: 0;
  }

  .signage-sso-main {
    gap: 30px;
    padding-bottom: 40px;
    padding-top: 32px;
  }

  .signage-sso-intro {
    padding-left: 20px;
  }

  .signage-sso-intro h1 {
    font-size: 32px;
  }

  .signage-sso-intro > p {
    font-size: 16px;
  }

  .signage-sso-option {
    min-height: 0;
    padding: 18px;
  }

  .signage-sso-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}

/* Shared form polish: every single-select gets the same calm, clear control. */
select:not([multiple]) {
  appearance: none;
  background-color: var(--control);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23154f9e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  border-color: color-mix(in srgb, var(--linkdb-blue) 28%, var(--line));
  border-radius: 10px;
  box-shadow: 0 1px 0 rgb(7 17 28 / 4%), inset 0 1px 0 rgb(255 255 255 / 72%);
  cursor: pointer;
  padding-right: 42px !important;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

select:not([multiple]):hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--control-hover) 72%, var(--control));
  border-color: color-mix(in srgb, var(--linkdb-blue) 54%, var(--line));
}

select:not([multiple]):focus-visible {
  border-color: var(--linkdb-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--linkdb-blue) 18%, transparent);
  outline: none;
}

select:not([multiple]):disabled {
  background-color: color-mix(in srgb, var(--panel-muted) 82%, var(--line));
  color: var(--muted);
  cursor: not-allowed;
  opacity: .72;
}

select:not([multiple]) option,
select:not([multiple]) optgroup {
  background: var(--control);
  color: var(--ink);
}

.customer-picker-search {
  background: color-mix(in srgb, var(--linkdb-teal-soft) 45%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--linkdb-teal) 34%, var(--line));
  border-radius: 10px;
  padding: 12px;
}

.customer-picker-search input {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  min-height: 42px;
  padding: 8px 10px;
}

.reseller-site-create {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 12px;
}

.reseller-site-create summary {
  color: var(--linkdb-blue);
  cursor: pointer;
  font-weight: 800;
}

.reseller-site-create form {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.reseller-site-create label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
}

.reseller-site-create input {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  min-height: 40px;
  padding: 8px 10px;
}

@media (max-width: 680px) {
  .reseller-site-create form {
    grid-template-columns: 1fr;
  }
}

/* Signage+ self-service registration -------------------------------------- */
body.signage-registration-page,
body.signage-terms-page {
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--linkdb-teal) 12%, transparent), transparent 35%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 54%, var(--bg)) 0, var(--bg) 360px);
  color: var(--ink);
  min-height: 100vh;
}

.signage-terms-back {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--linkdb-blue);
  font-size: 13px;
  font-weight: 800;
  min-height: 42px;
  padding: 10px 15px;
}

.signage-terms-main {
  margin-inline: auto;
  max-width: 940px;
  padding: 26px 28px 80px;
}

.signage-terms-article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: clamp(24px, 5vw, 54px);
}

.signage-terms-title {
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
  padding-bottom: 28px;
}

.signage-terms-title h1 {
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: -.035em;
  line-height: 1.1;
  margin: 12px 0;
}

.signage-terms-title p,
.signage-terms-article p,
.signage-terms-article address {
  color: var(--muted);
  line-height: 1.7;
}

.signage-terms-article section + section {
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  margin-top: 28px;
  padding-top: 24px;
}

.signage-terms-article h2 {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 10px;
}

.signage-terms-article p {
  margin: 10px 0 0;
}

.signage-terms-article a {
  color: var(--linkdb-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.signage-terms-article address {
  font-style: normal;
}

.signage-terms-page a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--linkdb-teal) 58%, white);
  outline-offset: 3px;
}

.signage-registration-header,
.signage-registration-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-inline: auto;
  max-width: 1180px;
  padding-inline: 28px;
}

.signage-registration-header {
  min-height: 86px;
}

.signage-registration-brand {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--ink);
  display: inline-flex;
  gap: 18px;
  min-height: 44px;
  padding: 0;
}

.signage-registration-brand:hover {
  background: transparent;
}

.signage-registration-brand img {
  display: block;
  height: 28px;
  width: auto;
}

.signage-registration-brand span {
  border-left: 1px solid var(--line);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .05em;
  padding-left: 18px;
  text-transform: uppercase;
}

.signage-registration-language {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  font-weight: 800;
  gap: 10px;
}

.signage-registration-language select {
  color: var(--ink);
  min-height: 44px;
  min-width: 142px;
  padding-inline: 42px !important;
  text-align: center;
  text-align-last: center;
}

.signage-registration-main {
  margin-inline: auto;
  max-width: 1120px;
  padding: 34px 28px 72px;
}

.signage-registration-intro {
  margin: 0 auto 32px;
  max-width: 760px;
  text-align: center;
}

.signage-registration-kicker,
.signage-registration-eyebrow {
  color: var(--linkdb-blue);
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.signage-registration-intro h1 {
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -.035em;
  line-height: 1.08;
  margin-top: 10px;
}

.signage-registration-intro p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
  margin: 14px auto 0;
  max-width: 680px;
}

.signage-registration-steps {
  counter-reset: none;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.signage-registration-steps li {
  align-items: center;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted);
  display: flex;
  gap: 11px;
  min-height: 58px;
  padding: 10px 14px;
}

.signage-registration-steps li > span {
  align-items: center;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 32px;
  font-size: 13px;
  font-weight: 900;
  height: 32px;
  justify-content: center;
}

.signage-registration-steps li strong {
  font-size: 13px;
  line-height: 1.3;
}

.signage-registration-steps li.is-active {
  background: color-mix(in srgb, var(--linkdb-teal-soft) 68%, var(--panel));
  border-color: color-mix(in srgb, var(--linkdb-teal) 62%, var(--line));
  color: var(--ink);
}

.signage-registration-steps li.is-active > span,
.signage-registration-steps li.is-complete > span {
  background: var(--linkdb-teal);
  border-color: var(--linkdb-teal);
  color: #07111c;
}

.signage-registration-error-summary {
  background: color-mix(in srgb, var(--red) 9%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--red) 48%, var(--line));
  border-left-width: 5px;
  border-radius: 12px;
  margin-bottom: 18px;
  padding: 16px 18px;
}

.signage-registration-error-summary:focus {
  outline: 3px solid color-mix(in srgb, var(--red) 24%, transparent);
  outline-offset: 2px;
}

.signage-registration-panel h2[tabindex="-1"]:focus {
  outline: none;
}

.signage-registration-error-summary strong {
  color: var(--red);
}

.signage-registration-error-summary ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.signage-registration-error-summary li + li {
  margin-top: 4px;
}

.signage-registration-panel {
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--linkdb-blue) 18%, var(--line));
  border-radius: 18px;
  box-shadow: 0 24px 70px rgb(7 17 28 / 10%);
  overflow: hidden;
}

.signage-registration-panel-head {
  align-items: end;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 30px;
  justify-content: space-between;
  padding: 24px 28px;
}

.signage-registration-panel-head h2 {
  font-size: 24px;
  line-height: 1.2;
  margin-top: 7px;
}

.signage-registration-panel-head p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  max-width: 440px;
}

.signage-registration-form {
  display: grid;
  gap: 22px;
  padding: 26px 28px 28px;
}

.signage-registration-form > fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.signage-registration-form > fieldset > legend {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 13px;
  padding: 0;
}

.signage-registration-fields {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.signage-registration-field {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  font-weight: 800;
  gap: 7px;
  min-width: 0;
}

.signage-registration-field-full {
  grid-column: 1 / -1;
}

.signage-registration-field-street {
  grid-column: span 2;
}

.signage-registration-field-house-number {
  grid-column: span 1;
}

.signage-registration-field input,
.signage-registration-field select {
  background: var(--control);
  border: 1px solid color-mix(in srgb, var(--linkdb-blue) 20%, var(--line));
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  min-height: 46px;
  padding: 10px 12px;
  width: 100%;
}

.signage-registration-field input:hover,
.signage-registration-field select:hover {
  border-color: color-mix(in srgb, var(--linkdb-blue) 48%, var(--line));
}

.signage-registration-field input:focus-visible,
.signage-registration-field select:focus-visible,
.signage-registration-plan-input:focus-visible + .signage-registration-plan-card,
.signage-registration-consents input:focus-visible,
.signage-registration-page a:focus-visible,
.signage-registration-page button:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--linkdb-blue) 24%, transparent);
  outline: 2px solid var(--linkdb-blue);
  outline-offset: 2px;
}

.signage-registration-field input[aria-invalid="true"],
.signage-registration-field select[aria-invalid="true"] {
  border-color: var(--red);
}

.signage-registration-field small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.signage-registration-email-summary {
  background: color-mix(in srgb, var(--linkdb-teal-soft) 32%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--linkdb-teal) 30%, var(--line));
  border-radius: 14px;
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
  padding: 18px;
}

.signage-registration-email-address {
  color: var(--ink);
  font-size: 16px;
  overflow-wrap: anywhere;
}

.signage-registration-email-status,
.signage-registration-email-expiry,
.signage-registration-email-request-info {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.signage-registration-email-status.is-verified {
  color: var(--green);
  font-weight: 800;
}

.signage-registration-email-status.is-expired,
.signage-registration-email-status.is-failed {
  color: var(--red);
}

.signage-registration-code-field {
  max-width: 380px;
}

.signage-registration-code-field input {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: .28em;
  text-align: center;
}

.signage-registration-email-request-info {
  font-size: 12px;
  min-height: 18px;
  padding-top: 10px;
}

.signage-registration-email-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.signage-registration-plans {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.signage-registration-plan-input {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.signage-registration-plan-card {
  background: color-mix(in srgb, var(--panel-muted) 80%, var(--panel));
  border: 2px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 9px;
  min-height: 250px;
  padding: 20px;
  position: relative;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.signage-registration-plan-card:hover {
  border-color: color-mix(in srgb, var(--linkdb-blue) 58%, var(--line));
  transform: translateY(-2px);
}

.signage-registration-plan-input:checked + .signage-registration-plan-card {
  background: color-mix(in srgb, var(--linkdb-teal-soft) 55%, var(--panel));
  border-color: var(--linkdb-teal);
  box-shadow: 0 14px 35px color-mix(in srgb, var(--linkdb-teal) 16%, transparent);
}

.signage-registration-plan-input:checked + .signage-registration-plan-card::after {
  align-items: center;
  background: var(--linkdb-teal);
  border-radius: 999px;
  color: #07111c;
  content: "✓";
  display: flex;
  font-weight: 900;
  height: 28px;
  justify-content: center;
  position: absolute;
  right: 14px;
  top: 14px;
  width: 28px;
}

.signage-registration-plan-name {
  font-size: 20px;
  padding-right: 34px;
}

.signage-registration-plan-description {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  min-height: 38px;
}

.signage-registration-plan-price {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.signage-registration-plan-price strong {
  color: var(--linkdb-blue);
  font-size: 26px;
  letter-spacing: -.03em;
}

.signage-registration-plan-price span,
.signage-registration-plan-limits,
.signage-registration-plan-tax {
  color: var(--muted);
  font-size: 12px;
}

.signage-registration-plan-limits {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.signage-registration-plan-tax {
  font-weight: 800;
}

.signage-registration-inline-status {
  background: var(--panel-muted);
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  padding: 18px;
  text-align: center;
}

.signage-registration-consents {
  background: color-mix(in srgb, var(--linkdb-teal-soft) 30%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--linkdb-teal) 28%, var(--line)) !important;
  border-radius: 14px;
  display: grid;
  gap: 12px;
  padding: 18px !important;
}

.signage-registration-consents label {
  align-items: flex-start;
  display: flex;
  gap: 11px;
  line-height: 1.5;
}

.signage-registration-consents input {
  accent-color: var(--linkdb-blue);
  flex: 0 0 20px;
  height: 20px;
  margin: 2px 0 0;
  width: 20px;
}

.signage-registration-consents a,
.signage-registration-login-link a {
  background: transparent;
  border: 0;
  color: var(--linkdb-blue);
  padding: 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.signage-registration-consents a[aria-disabled="true"] {
  color: var(--muted);
  pointer-events: none;
}

.signage-registration-consents p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

.signage-registration-legal-version {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.signage-registration-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.signage-registration-actions-end {
  justify-content: flex-end;
}

.signage-registration-actions-center {
  justify-content: center;
}

.signage-registration-primary,
.signage-registration-secondary {
  align-items: center;
  border-radius: 10px;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  min-height: 46px;
  padding: 10px 17px;
}

.signage-registration-primary {
  background: var(--linkdb-blue);
  border-color: var(--linkdb-blue);
  color: #fff;
}

.signage-registration-primary:hover {
  background: color-mix(in srgb, var(--linkdb-blue) 84%, #07111c);
  color: #fff;
}

.signage-registration-secondary {
  background: var(--control);
  color: var(--linkdb-blue);
}

.signage-registration-status-panel {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 54px 28px;
  text-align: center;
}

.signage-registration-status-panel[hidden] {
  display: none;
}

.signage-registration-status-icon {
  align-items: center;
  background: color-mix(in srgb, var(--yellow) 12%, var(--panel));
  border: 2px solid var(--yellow);
  border-radius: 999px;
  display: flex;
  height: 58px;
  justify-content: center;
  margin-bottom: 20px;
  width: 58px;
}

.signage-registration-status-icon::before {
  content: "…";
  font-size: 24px;
  font-weight: 900;
}

.signage-registration-status-icon.is-active {
  background: color-mix(in srgb, var(--green) 12%, var(--panel));
  border-color: var(--green);
  color: var(--green);
}

.signage-registration-status-icon.is-active::before {
  content: "✓";
}

.signage-registration-status-icon.is-context-required {
  background: color-mix(in srgb, var(--yellow) 12%, var(--panel));
  border-color: var(--yellow);
  color: var(--ink);
}

.signage-registration-status-icon.is-context-required::before {
  content: "QR";
  font-size: 14px;
  letter-spacing: .04em;
}

.signage-registration-status-icon.is-expired,
.signage-registration-status-icon.is-qr_expired,
.signage-registration-status-icon.is-failed,
.signage-registration-status-icon.is-payment_failed,
.signage-registration-status-icon.is-cancelled,
.signage-registration-status-icon.is-suspended,
.signage-registration-status-icon.is-past_due {
  background: color-mix(in srgb, var(--red) 10%, var(--panel));
  border-color: var(--red);
  color: var(--red);
}

.signage-registration-status-icon.is-expired::before,
.signage-registration-status-icon.is-qr_expired::before,
.signage-registration-status-icon.is-failed::before,
.signage-registration-status-icon.is-payment_failed::before,
.signage-registration-status-icon.is-cancelled::before,
.signage-registration-status-icon.is-suspended::before,
.signage-registration-status-icon.is-past_due::before {
  content: "!";
}

.signage-registration-status-panel h2 {
  font-size: 28px;
  margin-top: 10px;
}

.signage-registration-status-panel > p:not(.signage-registration-eyebrow) {
  color: var(--muted);
  line-height: 1.6;
  margin: 12px auto 24px;
  max-width: 640px;
}

.signage-registration-status-detail {
  font-size: 13px;
}

.signage-registration-login-link {
  color: var(--muted);
  font-size: 13px;
  margin: 24px 0 0;
  text-align: center;
}

.signage-registration-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  min-height: 66px;
}

.signage-registration-footer span:first-child {
  color: var(--linkdb-blue);
  font-weight: 900;
}

.signage-registration-visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (max-width: 760px) {
  .signage-registration-panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

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

  .signage-registration-field-full {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .signage-registration-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
    padding-block: 16px;
  }

  .signage-terms-main {
    padding: 18px 14px 52px;
  }

  .signage-terms-article {
    border-radius: 14px;
    padding: 24px 18px;
  }

  .signage-terms-back {
    text-align: center;
    width: 100%;
  }

  .signage-registration-header,
  .signage-registration-footer {
    padding-inline: 18px;
  }

  .signage-registration-brand {
    gap: 12px;
  }

  .signage-registration-brand img {
    height: 23px;
    max-width: 160px;
  }

  .signage-registration-brand span {
    font-size: 11px;
    padding-left: 12px;
  }

  .signage-registration-language {
    justify-content: space-between;
    width: 100%;
  }

  .signage-registration-language select {
    min-width: 160px;
  }

  .signage-registration-main {
    padding: 24px 16px 48px;
  }

  .signage-registration-intro {
    margin-bottom: 24px;
    text-align: left;
  }

  .signage-registration-intro p {
    font-size: 15px;
  }

  .signage-registration-steps {
    gap: 7px;
  }

  .signage-registration-steps li {
    justify-content: center;
    min-height: 48px;
    padding: 7px;
  }

  .signage-registration-steps li > span {
    flex-basis: 30px;
    height: 30px;
  }

  .signage-registration-steps li strong {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .signage-registration-panel {
    border-radius: 14px;
  }

  .signage-registration-panel-head,
  .signage-registration-form,
  .signage-registration-status-panel {
    padding-left: 18px;
    padding-right: 18px;
  }

  .signage-registration-panel-head h2 {
    font-size: 21px;
  }

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

  .signage-registration-field-full,
  .signage-registration-field-street,
  .signage-registration-field-house-number {
    grid-column: auto;
  }

  .signage-registration-plans {
    grid-template-columns: 1fr;
  }

  .signage-registration-plan-card {
    min-height: 220px;
  }

  .signage-registration-actions,
  .signage-registration-actions-end {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .signage-registration-primary,
  .signage-registration-secondary {
    min-height: 48px;
    width: 100%;
  }

  .signage-registration-email-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .signage-registration-email-action-row {
    flex-direction: column;
  }

  .signage-registration-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signage-registration-plan-card {
    transition: none;
  }
}

/* Direct Signage plan and customer billing */
.direct-signage-plan-admin {
  border-top: 1px solid var(--line);
  margin-top: 28px;
  padding: 28px 20px 20px;
}

.direct-signage-plan-head {
  align-items: end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 0 0 16px;
}

.direct-signage-plan-head h2,
.direct-signage-plan-head p {
  margin-bottom: 0;
}

.direct-signage-plan-language,
.customer-language-control {
  color: var(--muted);
  display: grid;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
}

.direct-signage-plan-language select,
.customer-language-control select {
  background: var(--control);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  min-height: 40px;
  min-width: 150px;
  padding: 8px 38px 8px 10px;
}

.direct-signage-plan-notice {
  align-items: flex-start;
  background: color-mix(in srgb, var(--linkdb-teal-soft) 72%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--linkdb-teal) 38%, var(--line));
  border-radius: 10px;
  display: grid;
  gap: 4px;
  margin-bottom: 18px;
  padding: 14px 16px;
}

.direct-signage-plan-notice span {
  color: var(--muted);
  line-height: 1.5;
}

.direct-signage-plan-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.direct-signage-plan-card {
  background: color-mix(in srgb, var(--panel) 92%, var(--panel-muted));
  border: 1px solid color-mix(in srgb, var(--linkdb-blue) 18%, var(--line));
  border-radius: 12px;
  box-shadow: 0 10px 28px rgb(15 23 42 / 6%);
  min-width: 0;
  padding: 18px;
}

.direct-signage-plan-card > header,
.direct-signage-current-footer {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.direct-signage-plan-card h3,
.direct-signage-plan-card h4 {
  margin: 0;
}

.direct-signage-plan-code {
  color: var(--linkdb-blue);
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.direct-plan-status,
.direct-subscription-status {
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 7px 10px;
  white-space: nowrap;
}

.direct-plan-status.is-current,
.direct-subscription-status.is-active {
  background: color-mix(in srgb, var(--green) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--green) 34%, var(--line));
  color: var(--green);
}

.direct-plan-status.is-scheduled,
.direct-subscription-status.is-trialing,
.direct-subscription-status.is-loading {
  background: color-mix(in srgb, var(--yellow) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--yellow) 32%, var(--line));
  color: var(--yellow);
}

.direct-plan-status.is-retired,
.direct-plan-status.is-superseded,
.direct-plan-status.is-unknown,
.direct-subscription-status.is-none,
.direct-subscription-status.is-cancelled,
.direct-subscription-status.is-unknown {
  background: var(--panel-muted);
  color: var(--muted);
}

.direct-subscription-status.is-past-due,
.direct-subscription-status.is-suspended,
.direct-subscription-status.is-incomplete,
.direct-subscription-status.is-error {
  background: color-mix(in srgb, var(--red) 9%, var(--panel));
  border-color: color-mix(in srgb, var(--red) 30%, var(--line));
  color: var(--red);
}

.direct-signage-current {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
}

.direct-signage-scheduled {
  background: color-mix(in srgb, var(--yellow) 5%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--yellow) 28%, var(--line));
  border-radius: 10px;
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
}

.direct-signage-scheduled > h4 {
  margin: 0;
}

.direct-signage-scheduled-list {
  display: grid;
  gap: 10px;
}

.direct-signage-scheduled-version {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.direct-signage-scheduled-version > .direct-plan-status {
  justify-self: start;
}

.direct-signage-current h4,
.direct-signage-new-version summary,
.direct-signage-plan-history-details summary {
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.direct-signage-current-metrics {
  display: grid;
  gap: 8px;
}

.direct-signage-current-metrics span {
  color: var(--muted);
}

.direct-signage-current-metrics strong {
  color: var(--ink);
}

.direct-signage-current-footer {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.direct-signage-plan-empty {
  color: var(--muted);
  margin: 0;
}

.direct-signage-plan-history-details,
.direct-signage-new-version {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 14px;
}

.direct-signage-plan-history {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.direct-signage-plan-history li {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.direct-signage-plan-history li > span:last-child {
  color: var(--muted);
  font-size: 12px;
}

.direct-signage-new-version form {
  display: grid;
  gap: 16px;
  margin-top: 14px;
}

.direct-signage-locale-grid,
.direct-signage-condition-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.direct-signage-locale-fields {
  border: 1px solid var(--line);
  border-radius: 9px;
  display: grid;
  gap: 10px;
  margin: 0;
  min-width: 0;
  padding: 12px;
}

.direct-signage-locale-fields legend {
  color: var(--linkdb-blue);
  font-size: 12px;
  font-weight: 900;
  padding: 0 5px;
}

.direct-signage-locale-fields label,
.direct-signage-condition-grid label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
}

.direct-signage-locale-fields input,
.direct-signage-locale-fields textarea,
.direct-signage-condition-grid input,
.direct-signage-condition-grid select {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  min-height: 40px;
  padding: 8px 10px;
  width: 100%;
}

.direct-signage-locale-fields textarea {
  min-height: 82px;
  resize: vertical;
}

.customer-direct-signage-panel {
  margin-bottom: 18px;
}

.customer-direct-signage-head {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.customer-direct-signage-body {
  padding: 0 20px 16px;
}

.customer-direct-signage-details {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 0;
}

.customer-direct-signage-details > div {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 9px;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px;
}

.customer-direct-signage-details dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.customer-direct-signage-details dd {
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  margin: 0;
  overflow-wrap: anywhere;
}

.customer-direct-signage-empty,
.customer-direct-signage-error {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  margin: 0;
  padding: 16px;
}

.customer-direct-capacity {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 18px;
}

.customer-direct-capacity h2 {
  font-size: 18px;
  margin: 0 0 6px;
}

.customer-direct-capacity-limits {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 14px 0;
}

.customer-direct-capacity-limits > div,
.customer-direct-capacity-pending {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
}

.customer-direct-capacity-limits dt {
  color: var(--muted);
  font-size: 12px;
}

.customer-direct-capacity-limits dd {
  font-weight: 700;
  margin: 3px 0 0;
}

.customer-direct-capacity-pending {
  color: var(--muted);
  margin: 0 0 14px;
}

.customer-direct-capacity-form {
  display: grid;
  gap: 12px;
}

.customer-direct-capacity-form label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  gap: 5px;
}

.customer-direct-capacity-form input {
  max-width: 240px;
}

.customer-direct-capacity-form .action-button {
  justify-self: start;
}

.customer-direct-capacity-payment {
  display: grid;
  gap: 12px;
  max-width: 540px;
}

.customer-direct-signage-error {
  border-color: color-mix(in srgb, var(--red) 30%, var(--line));
  color: var(--red);
}

.customer-direct-signage-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 20px 12px;
}

.customer-direct-signage-access-note {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  margin: 4px 20px 0;
  padding: 12px 0 16px;
}

.customer-direct-signage-portal-note {
  color: var(--muted);
  font-size: 13px;
  margin: 0 20px 12px;
  max-width: 760px;
}

@media (max-width: 760px) {
  .direct-signage-plan-admin {
    padding-left: 14px;
    padding-right: 14px;
  }

  .direct-signage-plan-head,
  .customer-direct-signage-head,
  .direct-signage-current-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .direct-signage-plan-language,
  .direct-signage-plan-language select,
  .customer-language-control,
  .customer-language-control select {
    width: 100%;
  }

  .direct-signage-locale-grid,
  .direct-signage-condition-grid {
    grid-template-columns: 1fr;
  }

  .direct-signage-plan-history li {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-direct-signage-actions .action-button {
    width: 100%;
  }

  .customer-direct-capacity-limits {
    grid-template-columns: 1fr;
  }

  .customer-direct-capacity-form .action-button {
    justify-self: stretch;
  }
}