* { box-sizing: border-box; }
body {
  margin: 0; font: 14px/1.45 system-ui, sans-serif;
  background: #14161a; color: #d8dbe0;
}
header {
  display: flex; align-items: center; gap: 24px;
  padding: 10px 18px; background: #1c1f26; border-bottom: 1px solid #2a2e37;
}
h1 { font-size: 16px; margin: 0; }
h3 { margin: 18px 0 8px; }
.muted { color: #7d8590; font-weight: normal; font-size: 12px; }
nav button {
  background: none; border: none; color: #9aa2ad; padding: 8px 14px;
  cursor: pointer; font-size: 14px; border-radius: 6px;
}
nav button.active, nav button:hover { background: #2c313c; color: #fff; }
main { padding: 18px; max-width: 1400px; margin: 0 auto; }
.tab { display: none; }
.tab.active { display: block; }

button {
  background: #2c313c; color: #d8dbe0; border: 1px solid #3a4150;
  border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: 13px;
}
button:hover { background: #3a4150; }
button.danger { border-color: #7a3038; color: #ff8b96; }
button.danger:hover { background: #4a262b; }
input, select, textarea {
  background: #0f1114; color: #d8dbe0; border: 1px solid #3a4150;
  border-radius: 6px; padding: 5px 9px; font-size: 13px;
}
textarea { width: 100%; font-family: ui-monospace, monospace; }

.toolbar { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.statusbar {
  display: flex; gap: 24px; padding: 10px 14px; background: #1c1f26;
  border: 1px solid #2a2e37; border-radius: 8px; margin-bottom: 14px; flex-wrap: wrap;
}
.statusbar .stat b { display: block; font-size: 16px; }
.statusbar .stat span { font-size: 12px; color: #7d8590; }

table { border-collapse: collapse; width: 100%; }
th, td {
  text-align: left; padding: 6px 10px; border-bottom: 1px solid #2a2e37;
  vertical-align: top; max-width: 420px; overflow-wrap: anywhere;
}
th { color: #9aa2ad; font-weight: 600; font-size: 12px; position: sticky; top: 0; background: #14161a; }
tbody tr:hover { background: #1c1f26; }

.badge { padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.badge.running, .badge.active { background: #16351f; color: #6fdd8b; }
.badge.exited, .badge.inactive, .badge.failed { background: #3b2124; color: #ff8b96; }

.logpane {
  background: #0b0d10; border: 1px solid #2a2e37; border-radius: 8px;
  padding: 12px; height: 420px; overflow: auto; font: 12px/1.5 ui-monospace, monospace;
  white-space: pre-wrap; margin-top: 10px;
}
.hidden { display: none !important; }

.db-layout { display: flex; gap: 16px; align-items: flex-start; }
.sidelist { width: 230px; flex-shrink: 0; }
.sidelist button {
  display: block; width: 100%; text-align: left; margin-bottom: 4px;
  background: #1c1f26; border-color: #2a2e37;
}
.sidelist button.active { border-color: #5b8cff; }
.sidelist .muted { float: right; }
#db-main { flex: 1; min-width: 0; }
.gridscroll { overflow-x: auto; max-height: 480px; overflow-y: auto; border: 1px solid #2a2e37; border-radius: 8px; }
.longcell { color: #9aa2ad; cursor: pointer; }
.longcell:hover { color: #d8dbe0; }
.longcell .len { color: #5b8cff; font-size: 11px; }
.pkcell { color: #e0b060; }
.sqlbox { margin-top: 22px; }

.findings li { margin: 4px 0; }
.findings .kind { color: #e0b060; font-size: 12px; margin-right: 8px; }

.card {
  background: #1c1f26; border: 1px solid #2a2e37; border-radius: 8px;
  padding: 14px; margin-bottom: 12px;
}
.card h3 { margin: 0 0 6px; }
.envrow { display: flex; gap: 10px; padding: 3px 0; font-family: ui-monospace, monospace; font-size: 13px; }
.envrow .key { min-width: 320px; color: #9aa2ad; }
.envrow .val { cursor: pointer; }

#modal, #login-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; z-index: 10;
}
#modal-box, .modal-box {
  background: #1c1f26; border: 1px solid #3a4150; border-radius: 10px;
  width: min(900px, 92vw); max-height: 88vh; overflow-y: auto; padding: 16px;
}
#login-modal .modal-box { width: min(340px, 92vw); }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: #9aa2ad; margin-bottom: 3px; }
.field label .type { color: #5b8cff; }
.field input { width: 100%; }
.field textarea { min-height: 140px; }
.field .counter { font-size: 11px; color: #7d8590; text-align: right; }
pre.config { background: #0b0d10; padding: 10px; border-radius: 8px; overflow-x: auto; font-size: 12px; }
details { margin-bottom: 8px; }
summary { cursor: pointer; }