.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; border-radius: 999px; padding: 3px 10px; color: var(--muted); background: var(--panel-3); font-size: 12px; white-space: nowrap; }
.badge.good { color: #061b14; background: var(--good); }
.badge.warn { color: #312100; background: var(--warn); }
.badge.danger { color: #2c080c; background: var(--danger); }
.badge.blue { color: #dce7ff; background: var(--blue-soft); border: 1px solid #245bd0; }
.button-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.ghost-button, .secondary-button, .danger-button, .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border: 1px solid var(--line); border-radius: 11px; padding: 9px 15px; color: var(--text); background: transparent; font: inherit; cursor: pointer; transition: border-color .15s, background .15s, transform .15s, opacity .15s; }
.ghost-button:hover, .secondary-button:hover, .danger-button:hover, .primary-button:hover { transform: translateY(-1px); }
.primary-button { border-color: var(--blue); color: white; background: var(--blue); font-weight: 700; }
.secondary-button { background: var(--panel-2); }
.danger-button { border-color: #8d3039; color: var(--danger); background: transparent; }
.ghost-button:hover, .secondary-button:hover { border-color: var(--blue); background: var(--panel-3); }
button:disabled { opacity: .55; cursor: wait; transform: none; }
.field { display: grid; gap: 8px; }
.field > span, .field > label { color: var(--muted); font-size: 13px; }
.field input, .field select, .field textarea, .search-input { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; color: var(--text); background: #111115; font: inherit; outline: none; }
.field textarea { min-height: 100px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder, .search-input::placeholder { color: #66666f; }
.field input:focus, .field select:focus, .field textarea:focus, .search-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(27 97 255 / 18%); }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.card-header { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.card-body { padding: 24px; }
.stat-card { position: relative; min-height: 112px; padding: 20px; }
.stat-label { color: var(--muted); font-size: 13px; }
.stat-value { margin-top: 5px; font-size: 20px; font-weight: 650; }
.stat-icon { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; color: var(--cyan); background: #0b3b3a; font-size: 20px; }
.stat-icon.blue { color: var(--blue); background: #18264d; }
.stat-icon.warn { color: var(--warn); background: #3d2f12; }
.stat-icon.danger { color: var(--danger); background: #3f1d24; }
.modal-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgb(0 0 0 / 76%); }
.modal { width: min(820px, 100%); max-height: min(820px, calc(100vh - 40px)); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 30px 90px rgb(0 0 0 / 55%); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; }
.modal-body { padding: 22px; }
.toast { border: 1px solid var(--line); border-left: 4px solid var(--cyan); border-radius: 10px; padding: 12px 14px; color: var(--text); background: var(--panel); box-shadow: var(--shadow); }
.toast.error { border-left-color: var(--danger); }
.toast.success { border-left-color: var(--good); }
.spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .75s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.advanced-settings { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.advanced-settings summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 15px; color: var(--text); cursor: pointer; list-style: none; }
.advanced-settings summary::-webkit-details-marker { display: none; }
.advanced-settings summary::after { content: '+'; color: var(--blue); font-size: 20px; }
.advanced-settings[open] summary::after { content: '−'; }
.advanced-settings summary span { margin-left: auto; color: var(--muted); font-size: 12px; text-align: right; }
.advanced-settings > .form-grid { padding: 0 15px 15px; }