.routing-login { display: grid; gap: 10px; }
.routing-login-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.routing-login-form label, .routing-settings label, .routing-field { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.routing-login input, .routing-editor input, .routing-editor select {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  outline: 0; background: rgba(3, 12, 22, .72); color: var(--text); font: inherit;
}
.routing-login input:focus, .routing-editor input:focus, .routing-editor select:focus, .routing-button:focus-visible {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(98, 233, 196, .16);
}
.routing-help { margin: 0; color: var(--muted); font-size: 11px; }
.routing-message { min-height: 24px; margin: 12px 0; color: var(--muted); font-size: 12px; }
.routing-message-success { color: var(--accent); }
.routing-message-error { color: var(--danger); }
.routing-button {
  min-height: 44px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
  background: rgba(9, 23, 39, .88); color: var(--text); font: 720 12px/1.2 inherit; transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.routing-button:hover { border-color: #3f6687; background: rgba(18, 46, 74, .9); }
.routing-button:active { transform: translateY(1px); }
.routing-button:disabled { cursor: not-allowed; opacity: .55; }
.routing-button-primary { border-color: rgba(98, 233, 196, .38); background: rgba(26, 119, 101, .72); }
.routing-button-primary:hover { background: rgba(31, 143, 119, .82); }
.routing-button-danger { border-color: rgba(255, 127, 136, .38); color: #ffabb1; }
.routing-button-quiet { color: var(--muted); }
.routing-file-button { display: inline-flex; align-items: center; justify-content: center; }
.routing-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 9px; }
.routing-metrics article { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(12, 27, 47, .84); }
.routing-metrics span { display: block; color: var(--muted); font-size: 10px; }
.routing-metrics strong { display: block; margin-top: 5px; font-size: 1.65rem; line-height: 1; }
.routing-editor { padding: 16px; }
.routing-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.routing-toolbar > div { display: flex; flex-wrap: wrap; gap: 7px; }
.routing-settings { display: grid; grid-template-columns: 180px 190px minmax(0, 1fr); align-items: end; gap: 10px; margin-top: 14px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(3, 12, 22, .36); }
.routing-settings span { align-self: center; justify-self: end; color: var(--muted); font-size: 11px; }
.routing-bulk { position: sticky; top: 8px; z-index: 4; display: flex; align-items: center; gap: 8px; margin: 12px 0; padding: 9px; border: 1px solid rgba(118, 169, 255, .35); border-radius: 10px; background: #102945; box-shadow: 0 12px 32px rgba(0, 0, 0, .22); }
.routing-bulk strong { margin-right: auto; font-size: 12px; }
.routing-list { display: grid; gap: 9px; }
.routing-card { border: 1px solid var(--line); border-radius: 13px; background: rgba(5, 16, 29, .45); }
.routing-card.is-selected { border-color: var(--blue); box-shadow: inset 0 0 0 1px rgba(118, 169, 255, .18); }
.routing-card.has-error { border-color: var(--danger); }
.routing-card-head { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.routing-select { width: 20px !important; min-height: 20px !important; accent-color: var(--accent); }
.routing-card-title { min-width: 0; flex: 1; }
.routing-card-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.routing-card-title span { color: var(--muted); font-size: 10px; }
.routing-state { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; background: rgba(98, 233, 196, .1); color: var(--accent); font-size: 9px; font-weight: 800; }
.routing-state.full { background: rgba(255, 200, 102, .1); color: var(--warn); }
.routing-state.disabled { background: rgba(145, 168, 188, .1); color: var(--muted); }
.routing-card-body { display: grid; grid-template-columns: 1fr 1.45fr 1fr 1fr; gap: 10px; padding: 12px; }
.routing-field-wide { grid-column: span 2; }
.routing-sites { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; align-items: center; }
.routing-sites label, .routing-active { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 11px; }
.routing-sites input, .routing-active input { width: 18px; min-height: 18px; accent-color: var(--accent); }
.routing-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.routing-card-foot button { min-height: 36px; padding-block: 7px; }
.routing-invalid { color: var(--danger); font-size: 10px; }
.routing-empty { padding: 28px 14px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; color: var(--muted); }
.routing-empty strong { color: var(--text); }
.routing-empty p { margin: 4px 0 0; font-size: 12px; }

@media (max-width: 860px) {
  .routing-card-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routing-settings { grid-template-columns: 1fr 1fr; }
  .routing-settings span { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 600px) {
  .routing-login-form, .routing-card-body, .routing-settings { grid-template-columns: 1fr; }
  .routing-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routing-toolbar { align-items: stretch; flex-direction: column; }
  .routing-toolbar > div { display: grid; grid-template-columns: 1fr 1fr; }
  .routing-toolbar .routing-button, .routing-file-button { width: 100%; }
  .routing-field-wide { grid-column: auto; }
  .routing-bulk { align-items: stretch; flex-wrap: wrap; }
  .routing-bulk strong { flex-basis: 100%; }
  .routing-card-head { align-items: flex-start; flex-wrap: wrap; }
  .routing-state { margin-left: 30px; }
  .routing-card-foot { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .routing-button { transition: none; } }