nodewarden/webapp/src/styles/management.css

.stack {
  @apply grid gap-3;
}

.domain-rules-route {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr);
}

.import-export-page {
  @apply grid gap-3;
}

.import-export-panels {
  @apply grid items-start gap-3;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.backup-grid {
  @apply grid items-start gap-3 p-0.5;
  grid-template-columns: 280px 280px minmax(0, 1fr);
}

.backup-operations-sidebar,
.backup-destination-sidebar,
.backup-detail-panel {
  @apply min-w-0 rounded-2xl border bg-panel p-3 shadow-soft;
  border-color: var(--line);
}

.backup-actions-stack {
  @apply grid gap-2.5;
}

.backup-recommendations-disclosure {
  @apply mt-3;
}

.backup-recommendations-summary {
  @apply flex cursor-pointer list-none items-center justify-between gap-3 rounded-xl border px-3 py-2.5;
  border-color: var(--line);
  background: #f8fafc;
  color: #0f172a;
}

.backup-recommendations-summary::-webkit-details-marker {
  display: none;
}

.backup-recommendations-summary > span:first-child {
  @apply grid min-w-0 gap-0.5;
}

.backup-recommendations-summary strong {
  @apply text-sm;
}

.backup-recommendations-summary small {
  @apply text-xs font-semibold;
  color: #64748b;
}

.backup-recommendations-summary-icon {
  @apply h-2.5 w-2.5 shrink-0;
  border-right: 2px solid #365fa8;
  border-bottom: 2px solid #365fa8;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease-out-soft);
}

.backup-recommendations-disclosure[open] .backup-recommendations-summary-icon {
  transform: rotate(225deg) translate(-1px, -1px);
}

.backup-recommendations-body {
  @apply pt-2.5;
}

.backup-option-field {
  @apply inline-flex items-center gap-2;
}

.backup-option-label {
  @apply m-0 inline-flex cursor-pointer items-center gap-2 text-[15px] font-bold;
  color: #0f172a;
}

.backup-option-label input[type='checkbox'] {
  @apply m-0 h-[22px] w-[22px] shrink-0;
}

.backup-help-wrap {
  @apply relative inline-flex items-center;
}

.backup-help-trigger {
  @apply inline-flex h-[22px] w-[22px] shrink-0 cursor-pointer items-center justify-center rounded-full p-0 text-[13px] font-extrabold leading-none;
  border: 1px solid #bfd1f3;
  background: #eef4ff;
  color: #1d4ed8;
}

.backup-help-trigger:hover,
.backup-help-trigger:focus-visible {
  border-color: #7ea4ef;
  background: #e1ecff;
  outline: none;
}

.backup-help-bubble {
  @apply invisible pointer-events-none absolute px-3 py-2.5 text-[13px] leading-[1.55] opacity-0;
  left: 50%;
  top: calc(100% + 10px);
  z-index: 30;
  width: min(320px, calc(100vw - 40px));
  border: 1px solid #d5dce7;
  @apply rounded-xl;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.14);
  color: #475467;
  transform: translate(-50%, -4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.backup-help-bubble::before {
  content: '';
  @apply absolute h-2.5 w-2.5;
  left: 50%;
  top: -6px;
  background: #ffffff;
  border-left: 1px solid #d5dce7;
  border-top: 1px solid #d5dce7;
  transform: translateX(-50%) rotate(45deg);
}

.backup-help-wrap:hover .backup-help-bubble,
.backup-help-wrap:focus-within .backup-help-bubble,
.backup-help-wrap.open .backup-help-bubble {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.backup-recommendation-list {
  @apply grid gap-2;
}

.backup-recommendation-group + .backup-recommendation-group {
  @apply mt-3;
}

.backup-recommendation-group-title {
  @apply m-0 mb-2 text-sm font-bold;
  color: #0f172a;
}

.backup-recommendation-row {
  @apply flex items-center justify-between gap-3;
}

.backup-recommendation-linked {
  @apply grid gap-1;
}

.backup-recommendation-linked-item {
  @apply flex items-center justify-between gap-3 text-xs;
  color: #475467;
}

.backup-recommendation-card {
  @apply grid gap-3 rounded-xl p-3.5;
  border: 1px solid var(--line);
  background: #f8fbff;
}

.backup-recommendation-header {
  @apply flex items-start justify-between gap-3;
}

.backup-recommendation-actions {
  @apply flex flex-wrap gap-2;
}

.backup-recommendation-steps {
  @apply grid gap-2;
}

.backup-recommendation-step {
  color: #475467;
  line-height: 1.5;
}

.backup-recommendation-inline-note {
  color: #475467;
  line-height: 1.5;
}

.backup-recommendation-dav-list {
  @apply grid gap-2;
}

.backup-recommendation-dav-item {
  @apply grid gap-1 rounded-[10px] bg-white px-3 py-2.5;
  border: 1px solid var(--line);
}

.backup-recommendation-dav-item code {
  overflow-wrap: anywhere;
}

.backup-destination-list {
  @apply grid gap-2;
}

.backup-destination-item {
  @apply grid w-full cursor-pointer gap-1.5 rounded-xl bg-white p-3 text-left;
  border: 1px solid var(--line);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.backup-destination-item:hover {
  border-color: #93c5fd;
  background: #f8fbff;
}

.backup-destination-item.active {
  border-color: var(--primary);
  background: #eff6ff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.backup-destination-top {
  @apply flex items-center justify-between gap-3;
}

.backup-destination-name {
  @apply font-bold;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.backup-destination-type {
  @apply whitespace-nowrap rounded-full px-2 py-0.5 text-xs;
  background: #e2e8f0;
  color: #334155;
}

.backup-destination-meta {
  @apply text-[13px] leading-[1.4];
  color: #64748b;
}

.backup-destination-addbar {
  @apply mt-2.5;
}

.backup-add-chooser {
  @apply mt-2.5 flex flex-wrap gap-2;
}

.backup-name-row {
  @apply mb-2 grid items-end gap-2.5;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.backup-name-field {
  @apply m-0;
  grid-column: 1 / span 3;
}

.backup-type-field {
  @apply m-0;
  grid-column: 4;
}

.backup-detail-schedule-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.backup-interval-row {
  @apply grid items-start gap-2.5;
  grid-template-columns: minmax(0, 1fr) 86px;
}

.backup-interval-presets {
  @apply grid gap-[3px];
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.backup-interval-preset {
  @apply h-[22px] cursor-pointer rounded-full text-xs font-bold;
  border: 1px solid #cdd7e6;
  background: #f8fafc;
  color: #475569;
  transition:
    border-color var(--dur-fast) var(--ease-smooth),
    background-color var(--dur-fast) var(--ease-smooth),
    color var(--dur-fast) var(--ease-smooth),
    transform var(--dur-fast) var(--ease-out-soft),
    box-shadow var(--dur-fast) var(--ease-out-soft);
}

.backup-interval-preset:hover:not(:disabled) {
  border-color: #2563eb;
  color: #2563eb;
  background: #eff6ff;
}

.backup-interval-preset.active {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

.backup-interval-preset:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.backup-inline-suffix-wrap {
  @apply relative w-full;
}

.backup-inline-suffix {
  @apply pointer-events-none absolute right-3 top-1/2 text-[13px] font-bold;
  transform: translateY(-50%);
  color: #64748b;
}

.backup-schedule-attachments-row {
  @apply mb-1;
}

.backup-divider {
  @apply my-3.5 h-px;
  background: var(--line);
}

.backup-browser-path {
  @apply mb-2.5 flex items-center gap-2 rounded-[10px] px-3 py-2.5;
  border: 1px solid var(--line);
  background: #f8fafc;
  overflow-wrap: anywhere;
}

.backup-browser-path strong {
  color: #0f172a;
}

.backup-browser-nav {
  @apply mb-2.5;
}

.backup-browser-list {
  @apply overflow-hidden rounded-xl border bg-white;
  border: 1px solid var(--line);
}

.backup-browser-pagination {
  @apply mt-2.5 flex items-center justify-end gap-2.5;
}

.backup-browser-page-indicator {
  @apply min-w-12 text-center text-[13px] font-bold;
  color: #64748b;
}

.backup-browser-row + .backup-browser-row {
  border-top: 1px solid var(--line);
}

.backup-browser-row {
  @apply grid items-center gap-2.5 px-3 py-2.5;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.backup-browser-entry {
  @apply inline-flex cursor-pointer items-center gap-2 border-0 bg-transparent p-0 text-left;
  color: #0f172a;
}

.backup-browser-entry.file {
  cursor: default;
}

.backup-browser-name {
  @apply font-bold;
  overflow-wrap: anywhere;
}

.backup-browser-meta {
  @apply grid justify-items-end gap-1 text-right text-[13px];
  color: #64748b;
}

.backup-browser-actions {
  justify-content: flex-end;
}

.backup-browser-empty {
  @apply rounded-xl px-3.5 py-[18px] text-center;
  border: 1px dashed var(--line);
  color: #64748b;
}

.backup-inline-note {
  @apply m-0 mb-3 leading-[1.5];
  color: #64748b;
}

.import-export-panel h3 {
  @apply m-0 mb-1.5;
}

.field-grid {
  @apply grid gap-2.5;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.totp-grid {
  @apply mb-3.5 grid gap-3.5;
  grid-template-columns: 220px 1fr;
}

.totp-qr {
  @apply grid min-h-[220px] place-items-center rounded-[10px] bg-white p-2;
  border: 1px solid var(--line);
}

.totp-qr svg {
  @apply h-[180px] w-[180px];
}

.totp-qr img {
  @apply h-[180px] w-[180px] rounded-lg bg-white;
}

.totp-secret-input-wrap {
  @apply relative;
}

.totp-secret-input {
  padding-right: 84px;
}

.totp-secret-actions {
  @apply absolute right-2 top-1/2 inline-flex items-center gap-1;
  transform: translateY(-50%);
}

.totp-secret-icon-btn {
  @apply h-8 w-8 min-w-8 gap-0 rounded-lg p-0;
}

.totp-secret-icon-btn .btn-icon {
  @apply m-0;
}

.section-head {
  @apply mb-2.5 flex items-center justify-between;
}

.flush-title {
  @apply m-0;
}

.section-title-flush {
  @apply mt-0;
}

.section-note {
  @apply mt-1;
}

.empty-comfortable {
  @apply min-h-20;
}

.actions {
  @apply flex flex-wrap gap-2;
}

.muted-inline {
  @apply self-center text-sm;
  color: var(--muted);
}

.settings-field-note {
  @apply mb-2;
}

.settings-modules-grid {
  @apply grid gap-3;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-module {
  @apply min-w-0;
}

.settings-module h3 {
  @apply mb-4 mt-0 text-base font-extrabold;
  color: var(--text);
}

.settings-module-placeholder {
  @apply flex min-h-[150px] flex-col items-center justify-center gap-3 text-base font-extrabold;
  color: var(--muted);
}

.settings-module-placeholder svg {
  color: var(--primary-strong);
}

.settings-module .field:last-child,
.session-timeout-fields .field {
  @apply mb-0;
}

.session-timeout-fields {
  @apply grid gap-3;
}

.sensitive-actions-grid {
  @apply grid gap-3;
}

.sensitive-action {
  @apply rounded-lg border p-3.5;
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

.sensitive-action h4 {
  @apply mb-1 mt-0 text-base font-extrabold;
  color: var(--text);
}

.recovery-code-card {
  @apply mb-0 mt-2.5 rounded-lg border p-3;
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.recovery-code-value {
  @apply font-extrabold tracking-[0.08em];
}

.api-key-warning-panel,
.api-key-credentials-panel {
  @apply rounded-lg p-3.5;
}

.api-key-warning-panel {
  @apply mb-3.5 mt-3;
  border: 1px solid color-mix(in srgb, var(--danger) 24%, transparent);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}

.api-key-warning-title {
  @apply mb-2 font-extrabold;
  color: var(--danger);
}

.api-key-warning-body {
  @apply leading-[1.55];
  color: var(--text);
}

.api-key-credentials-panel {
  @apply mb-2.5;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}

.api-key-credentials-title {
  @apply mb-2.5 flex items-center gap-2 font-extrabold;
  color: var(--primary);
}

.api-key-credential-row {
  @apply grid grid-cols-[minmax(0,1fr)_auto] gap-2;
}

.create-menu-wrap {
  @apply relative;
}

.create-menu {
  @apply absolute left-0 z-20 w-[220px] overflow-hidden rounded-xl border;
  top: calc(100% + 6px);
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  transform-origin: bottom left;
  animation: menu-in 190ms var(--ease-out-strong) both;
}

.create-menu-item {
  @apply flex w-full cursor-pointer items-center gap-2 border-0 px-3 py-[11px] text-left font-semibold;
  border: none;
  background: #fff;
  transition:
    background-color var(--dur-fast) var(--ease-smooth),
    color var(--dur-fast) var(--ease-smooth),
    transform var(--dur-fast) var(--ease-out-soft);
}

.create-menu-item:hover {
  background: #f1f5f9;
  transform: translateX(2px);
}

.website-row {
  @apply mb-2 grid items-center gap-2 rounded-[18px] border p-1.5;
  grid-template-columns: auto minmax(0, 1fr) minmax(96px, 120px) auto;
  border-color: transparent;
  background: color-mix(in srgb, var(--panel) 84%, transparent);
  transition:
    border-color var(--dur-fast) var(--ease-smooth),
    background-color var(--dur-fast) var(--ease-smooth),
    box-shadow var(--dur-fast) var(--ease-out-soft),
    transform 220ms var(--ease-out-soft),
    opacity var(--dur-fast) var(--ease-smooth);
}

.website-order-actions {
  @apply grid gap-1;
}

.website-order-btn {
  @apply h-[22px] w-7 min-w-7 gap-0 rounded-[8px] p-0;
  color: var(--muted);
}

.website-order-btn:hover:not(:disabled) {
  color: var(--primary-strong);
}

.website-order-btn:disabled {
  @apply opacity-35;
}

.website-match-select {
  @apply h-12 py-2.5 pr-[30px] text-[13px] leading-[1.2];
}

.website-match-select option {
  @apply text-[13px];
}

.website-row .btn {
  @apply w-auto justify-self-start;
}

@media (max-width: 760px) {
  .website-row {
    grid-template-columns: auto minmax(88px, 1fr) minmax(72px, 84px) auto;
    @apply items-center;
  }

  .website-row .website-remove-btn {
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0;
    gap: 0;
    border-radius: 999px;
    font-size: 0;
  }

  .website-row .website-remove-btn .btn-icon {
    margin: 0;
  }
}

.cf-check {
  @apply mb-0;
}

.cf-check.view {
  @apply m-0;
}

.cf-check input[type='checkbox'] {
  @apply h-[22px] w-[22px];
}

.star-on {
  background: #eef4ff;
}

.detail-actions {
  @apply my-3 flex items-center justify-between;
}

.detail-delete-btn {
  @apply ml-auto;
}

.send-options {
  @apply grid gap-2;
  color: #3a4a64;
}

.send-options label {
  @apply inline-flex items-center gap-2;
}

.local-error {
  @apply mt-2.5 flex flex-wrap items-center gap-2 font-semibold;
  color: #b42318;
}

.status-ok {
  @apply mb-2.5 mt-0.5 font-bold;
  color: #0f766e;
}

.restore-progress-card {
  @apply mb-3 mt-2 rounded-xl border px-4 py-3.5;
  border-color: #d7e2f1;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
}

.restore-progress-overlay {
  @apply fixed inset-0 z-[1250] grid place-items-center p-5;
  background: rgba(15, 23, 42, 0.30);
}

.restore-progress-modal {
  @apply m-0 w-[min(520px,100%)];
}

.restore-progress-head {
  @apply mb-3 flex items-start justify-between gap-3;
}

.restore-progress-kicker {
  @apply text-xs font-semibold;
  letter-spacing: 0.02em;
  color: #64748b;
}

.restore-progress-title {
  @apply mb-0.5 mt-1 text-xl leading-[1.2];
}

.restore-progress-subtitle {
  @apply m-0 text-[13px];
  color: #6b7280;
}

.restore-progress-elapsed {
  @apply shrink-0 rounded-[10px] px-2 py-1.5 text-center text-[13px] font-semibold;
  min-width: 88px;
  background: #f8fbff;
  border: 1px solid #d7e2f1;
  color: #475569;
}

.restore-progress-meter {
  @apply h-1.5 overflow-hidden rounded-full;
  background: #e7eef8;
}

.restore-progress-meter-bar {
  @apply block h-full rounded-[inherit];
  background: #3a71d8;
  transition: width 280ms ease;
}

.restore-progress-current {
  @apply mt-3 rounded-[10px] px-3 py-2.5;
  background: #f8fbff;
  border: 1px solid #d7e2f1;
}

.restore-progress-current strong {
  @apply block text-sm;
  color: #0f172a;
}

.restore-progress-current p {
  @apply m-0 mt-1 text-[13px] leading-[1.45];
  color: #64748b;
}

.restore-progress-list {
  @apply m-0 mt-3 grid list-none gap-1.5 p-0;
}

.restore-progress-item {
  @apply flex min-h-[30px] items-center gap-2 text-[13px] font-medium;
  color: #64748b;
}

.restore-progress-item.active {
  color: #1d4ed8;
}

.restore-progress-item.done {
  color: #475569;
}

.restore-progress-dot {
  @apply h-2 w-2 shrink-0 rounded-full;
  background: #cbd5e1;
}

.restore-progress-item.active .restore-progress-dot {
  background: #1d4ed8;
}

.restore-progress-item.done .restore-progress-dot {
  background: #94a3b8;
}

.kv-line strong {
  overflow-wrap: anywhere;
}

.check-line {
  @apply mb-3 flex items-center gap-2;
  color: #334155;
}

.table {
  @apply w-full;
  border-collapse: collapse;
}

.table th,
.table td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
  font-size: 14px;
}

.table td::before {
  @apply hidden;
}

.table th {
  color: #667085;
}

.input.small {
  @apply w-[120px];
}

.invite-toolbar {
  @apply mb-2.5 flex flex-wrap items-center justify-between gap-2.5;
}

.invite-create-group {
  @apply items-end;
}

.invite-hours-field {
  @apply m-0;
}

.invite-hours-field > span {
  @apply mb-1.5 text-xs font-semibold;
  color: #5f6f85;
}

.admin-pagination {
  @apply mt-3 items-center;
}

.trusted-cell {
  @apply inline-flex items-center gap-1.5;
}

.device-status-pill {
  @apply inline-flex h-[26px] min-w-[58px] items-center justify-center rounded-full px-2.5 text-xs font-bold leading-none;
}

.device-status-pill.online {
  background: #dcfce7;
  color: #166534;
}

.device-status-pill.offline {
  background: #e2e8f0;
  color: #475569;
}

.section-heading-row {
  @apply mb-3.5 flex items-center justify-between gap-3;
}

.section-heading-row h3 {
  @apply mb-0;
}

.domain-rules-page {
  @apply grid min-h-0 gap-3.5;
  height: 100%;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr);
}

.domain-rules-toolbar {
  @apply flex flex-wrap items-start justify-between gap-3;
}

.domain-rules-toolbar-copy {
  max-width: 760px;
}

.domain-rules-toolbar-title {
  @apply text-base font-bold;
  color: var(--text);
}

.domain-rules-toolbar-copy p {
  @apply mt-1.5 text-sm leading-6;
  color: var(--muted-strong);
}

.domain-rules-grid {
  min-height: 0;
  grid-template-columns: minmax(380px, 1fr) minmax(420px, 1.08fr);
}

.domain-rules-custom,
.domain-rules-global {
  @apply flex min-h-0 flex-col rounded-2xl border bg-panel shadow-soft;
  border-color: var(--line);
}

.domain-rules-heading-actions {
  @apply flex flex-wrap items-center justify-end gap-2;
}

.domain-rules-filter {
  width: min(240px, 100%);
}

.domain-rules-table {
  @apply grid min-h-0 flex-1 content-start gap-2 overflow-auto pr-0.5;
  overflow-anchor: none;
}

.domain-rule-row {
  @apply grid items-center gap-2.5 rounded-md px-2.5 py-2.5;
  grid-template-columns: 18px minmax(0, 1fr) auto auto;
  border: 1px solid var(--line);
  background: var(--panel);
}

.domain-rule-row > input[type='checkbox'] {
  align-self: center;
}

.domain-rule-readonly-row {
  grid-template-columns: 18px minmax(0, 1fr) auto;
}

.domain-rule-editing-row {
  @apply items-start;
  grid-template-columns: minmax(360px, 1fr) auto;
  column-gap: 12px;
}

.domain-rule-domains {
  display: block;
  line-height: 20px;
  min-width: 0;
  max-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    max-height 180ms var(--ease-out-soft),
    opacity 140ms var(--ease-smooth);
}

.domain-rule-row-expanded {
  @apply items-start;
}

.domain-rule-row-expanded > input[type='checkbox'],
.domain-rule-row-expanded .domain-rule-expand-btn,
.domain-rule-row-expanded .domain-rule-row-actions {
  margin-top: 1px;
}

.domain-rule-row-expanded .domain-rule-domains {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.domain-rule-domains-expanded {
  max-height: 220px;
}

.domain-rule-expand-btn {
  @apply flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border-0 p-0;
  background: transparent;
  color: var(--muted-strong);
  transition:
    background-color var(--dur-fast) var(--ease-smooth),
    color var(--dur-fast) var(--ease-smooth),
    transform var(--dur-fast) var(--ease-out-soft);
}

.domain-rule-expand-btn:hover {
  background: var(--panel-soft);
  color: var(--primary);
  transform: translateY(-1px);
}

.domain-rule-main {
  width: 100%;
  min-width: 0;
}

.domain-rule-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  align-items: center;
}

.domain-rule-input-piece {
  position: relative;
  min-width: 0;
  @apply flex items-center;
}

.domain-rule-inline-input {
  width: 100%;
  min-width: 0;
  padding-right: 52px;
}

.domain-rule-inline-input.domain-rule-input-invalid {
  border-color: rgba(217, 45, 87, 0.78);
  background: color-mix(in srgb, var(--danger) 5%, var(--panel));
  box-shadow: 0 0 0 3px rgba(217, 45, 87, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.domain-rule-inline-input.domain-rule-input-invalid:focus {
  border-color: rgba(217, 45, 87, 0.86);
  box-shadow: 0 0 0 4px rgba(217, 45, 87, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.domain-rule-operator {
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  color: var(--muted);
  font-weight: 700;
  pointer-events: none;
}

.domain-rule-input-piece:nth-child(even) .domain-rule-operator {
  display: none;
}

.domain-rule-mini-btn,
.domain-rule-icon-btn {
  @apply h-9 w-9 justify-center p-0;
}

.domain-rule-input-remove {
  @apply absolute top-1/2 flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-full border-0 p-0;
  right: 1rem;
  background: var(--panel-soft);
  color: var(--primary);
  transition:
    background-color var(--dur-fast) var(--ease-smooth),
    color var(--dur-fast) var(--ease-smooth),
    transform var(--dur-fast) var(--ease-out-soft);
}

.domain-rule-input-remove:hover {
  background: color-mix(in srgb, var(--danger) 12%, var(--panel));
  color: var(--danger);
  transform: translateY(-50%) scale(1.04);
}

.domain-rule-row-actions {
  @apply flex items-center self-center gap-2;
}

.domain-rule-row-actions .btn {
  white-space: nowrap;
}

.domain-rule-editing-row .domain-rule-row-actions {
  align-self: start;
  padding-top: 6px;
}

.domain-rule-new-row {
  @apply mb-2;
  background: var(--panel-soft);
}

@media (max-width: 1180px) {
  .route-stage-fixed {
    overflow: auto;
  }

  .domain-rules-route {
    height: auto;
    overflow: visible;
    grid-template-rows: auto;
  }

  .domain-rules-page {
    height: auto;
    overflow: visible;
  }

  .domain-rules-grid {
    grid-auto-rows: minmax(320px, min(54vh, 560px));
  }

  .domain-rules-table {
    max-height: none;
  }
}

@media (max-width: 560px) {
  .domain-rules-page {
    height: auto;
  }

  .domain-rules-grid {
    grid-auto-rows: auto;
  }

  .domain-rules-table {
    max-height: 56vh;
  }

  .domain-rule-editing-row {
    grid-template-columns: 1fr;
  }

  .domain-rule-inputs {
    grid-template-columns: 1fr;
  }

  .domain-rule-operator {
    display: none;
  }

  .domain-rule-editing-row .domain-rule-row-actions {
    padding-top: 0;
  }
}