:root { color-scheme: light; font-family: Inter, "Segoe UI", sans-serif; color: #17201d; background: #f5f7f6; }
* { box-sizing: border-box; letter-spacing: 0; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
button { border: 1px solid #b9c2be; background: #fff; color: #17201d; padding: 8px 12px; border-radius: 5px; cursor: pointer; }
button:hover { background: #edf1ef; }
button.primary { background: #176b4d; border-color: #176b4d; color: #fff; }
button.danger { color: #a12b2b; border-color: #ddb8b8; }
header { height: 58px; padding: 0 max(20px, calc((100% - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; background: #17201d; color: #fff; }
header > div, header nav { display: flex; align-items: center; gap: 12px; }
header button { padding: 6px 10px; background: transparent; color: #fff; border-color: #52605b; }
.status { font-size: 12px; color: #aab5b1; }
.status.ok { color: #71d4ad; }
main { max-width: 1180px; margin: 0 auto; padding: 28px 20px 60px; }
.summary { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #d6dcda; background: #fff; }
.summary div { min-height: 82px; padding: 16px 20px; border-right: 1px solid #d6dcda; }
.summary div:last-child { border-right: 0; }
.summary span { display: block; color: #64706c; font-size: 13px; }
.summary strong { display: block; margin-top: 8px; font-size: 24px; }
section { margin-top: 34px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 12px; }
h1, h2, p { margin: 0; }
h1, h2 { font-size: 18px; font-weight: 650; }
.section-head p { color: #6b7672; font-size: 13px; margin-top: 4px; }
.table-wrap { overflow-x: auto; border-top: 1px solid #cbd2cf; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 13px 12px; border-bottom: 1px solid #e2e6e4; text-align: left; vertical-align: top; font-size: 13px; }
th { color: #63706b; font-weight: 600; background: #f1f4f2; white-space: nowrap; }
td code { display: block; white-space: nowrap; margin-bottom: 4px; }
.mapping { display: flex; align-items: center; gap: 5px; }
.mapping button { width: 22px; height: 22px; padding: 0; line-height: 18px; }
.badge { display: inline-block; padding: 3px 7px; border-radius: 4px; background: #e8ecea; color: #4d5955; font-size: 12px; }
.badge.direct, .badge.online { background: #dff3ea; color: #176b4d; }
.badge.pending { background: #fff0c7; color: #76540a; }
.badge.unavailable { background: #fde2dc; color: #963c2a; }
.badge.offline { background: #e7ebe9; color: #59655f; }
.badge.mixed { background: #fff0cc; color: #795900; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 160px; }
.row-actions button { padding: 5px 8px; font-size: 12px; }
.rows { border-top: 1px solid #cbd2cf; background: #fff; }
.rows > div { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 12px; border-bottom: 1px solid #e2e6e4; font-size: 13px; }
.rows small { color: #6b7672; }
.muted { color: #4f5b57; }
dialog { width: min(460px, calc(100% - 28px)); max-height: calc(100vh - 28px); overflow-y: auto; border: 1px solid #aeb8b4; border-radius: 7px; padding: 0; box-shadow: 0 16px 50px #17201d33; }
dialog::backdrop { background: #17201d80; }
dialog form, .token-box { display: grid; gap: 15px; padding: 22px; }
label { display: grid; gap: 6px; font-size: 13px; color: #44504c; }
input, select { width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid #aeb8b4; border-radius: 4px; background: #fff; color: #17201d; }
.compact-select { width: auto; min-width: 180px; min-height: 34px; }
.connection-details { display: grid; gap: 2px; margin-top: 5px; color: #6b7672; font-size: 12px; white-space: nowrap; }
label.check { grid-template-columns: 18px 1fr; align-items: center; }
label.check input { width: 16px; min-height: 16px; }
.actions { display: flex; justify-content: flex-end; gap: 8px; }
.error { min-height: 18px; color: #a12b2b; font-size: 13px; }
pre { padding: 12px; overflow-wrap: anywhere; white-space: pre-wrap; background: #edf1ef; border: 1px solid #d6dcda; font-size: 12px; }
#toast { position: fixed; right: 18px; bottom: 18px; max-width: 420px; padding: 10px 14px; background: #17201d; color: #fff; border-radius: 5px; opacity: 0; pointer-events: none; transition: opacity .15s; }
#toast.show { opacity: 1; }
@media (max-width: 700px) {
  .summary { grid-template-columns: repeat(2, 1fr); }
  .summary div:nth-child(2) { border-right: 0; }
  .summary div:nth-child(-n+2) { border-bottom: 1px solid #d6dcda; }
  .section-head { align-items: start; }
  header { padding: 0 14px; }
  main { padding-inline: 14px; }
}