*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}

.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:.5rem;font-weight:500;font-size:.875rem;transition:all .15s}
.btn-primary{background:#4f46e5;color:#fff}
.btn-primary:hover{background:#4338ca}
.btn-ghost{background:#f1f5f9;color:#334155}
.btn-ghost:hover{background:#e2e8f0}
.btn-danger{background:#fee2e2;color:#b91c1c}
.btn-danger:hover{background:#fecaca}

.card{background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card-pad{padding:1.25rem}
@media (max-width: 640px){ .card-pad{padding:1rem} }

/* Таблицы в карточках на мобильном — скроллятся горизонтально */
.card{overflow-x:auto;-webkit-overflow-scrolling:touch}

.table{width:100%;border-collapse:collapse;min-width:520px}
@media (min-width: 640px){ .table{min-width:0} }
.table th{text-align:left;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em;padding:.65rem 1rem;border-bottom:1px solid #e2e8f0;background:#f8fafc}
.table td{padding:.75rem 1rem;border-bottom:1px solid #f1f5f9;font-size:.9rem}
.table tr:hover td{background:#f8fafc}

.input,select.input,textarea.input{width:100%;border:1px solid #cbd5e1;border-radius:.5rem;padding:.55rem .75rem;font-size:.9rem;background:#fff}
.input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.15)}

.badge{display:inline-block;padding:.15rem .55rem;border-radius:9999px;font-size:.72rem;font-weight:600}
.badge-ok{background:#dcfce7;color:#166534}
.badge-warn{background:#fef3c7;color:#92400e}
.badge-bad{background:#fee2e2;color:#991b1b}
.badge-info{background:#e0e7ff;color:#3730a3}

label.field{display:block;margin-bottom:.85rem}
label.field>span{display:block;font-size:.8rem;color:#475569;margin-bottom:.25rem;font-weight:500}

/* Inline-input для быстрого редактирования прямо в таблице */
.input-inline{
  border:1px solid transparent;background:transparent;
  padding:.25rem .4rem;border-radius:.4rem;
  font-size:.9rem;outline:none;
  transition:all .15s;
}
.input-inline:hover{background:#f1f5f9;border-color:#cbd5e1}
.input-inline:focus{background:#fff;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.15)}

/* Клик по всей строке-плашке */
.row-link{cursor:pointer;transition:background .12s}
.row-link:hover td{background:#f1f5f9 !important}
.row-link:active td{background:#e2e8f0 !important}

/* Кнопки-радио для выбора мессенджера */
.msg-radio:checked + .msg-btn{background:#4f46e5;color:#fff}
.msg-radio:checked + .msg-btn{box-shadow:inset 0 0 0 2px #4338ca}

@media (max-width: 640px){
  .btn{min-height:44px;padding:.65rem .9rem;justify-content:center}
  .input,select.input,textarea.input{font-size:16px;min-height:44px}
  .input-inline{font-size:16px;min-height:40px}
  .badge{white-space:nowrap}
  label.field{margin-bottom:1rem}
  .card{max-width:100%}
}