:root {
   color-scheme: dark;
   --bg: #0b1020;
   --panel: #121a2c;
   --panel-2: #172238;
   --border: #2b3b57;
   --text: #e8eef8;
   --muted: #9aabc2;
   --accent: #4c8dff;
   --danger: #d34d65;
   --success: #3bb273;
}

* { box-sizing: border-box; }
body {
   margin: 0;
   min-height: 100vh;
   background: var(--bg);
   color: var(--text);
   font: 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; }
code, pre, .secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.topbar, .toolbar {
   display: flex;
   align-items: center;
   gap: .5rem;
   padding: .65rem 1rem;
   border-bottom: 1px solid var(--border);
   background: #0d1424;
}
.topbar { justify-content: space-between; }
.version { margin-left: .35rem; color: var(--muted); }
.toolbar { flex-wrap: wrap; }
.search-form { display: flex; gap: .4rem; margin-left: auto; min-width: min(420px, 100%); }
.search-form input { flex: 1; }

.layout, .login-shell { width: min(1500px, 100%); margin: 0 auto; padding: 1rem; }
.login-shell { min-height: calc(100vh - 55px); display: grid; place-items: center; }
.panel {
   background: var(--panel);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 1rem;
   box-shadow: 0 12px 36px rgba(0,0,0,.18);
}
.login-panel { width: min(430px, 100%); }
.form-panel { width: min(820px, 100%); }
.detail-panel { width: min(1000px, 100%); }
.table-panel { width: 100%; }
.panel h1 { margin: 0 0 1rem; font-size: 1.2rem; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; }

.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 30px;
   padding: .3rem .65rem;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: var(--panel-2);
   color: var(--text);
   text-decoration: none;
   cursor: pointer;
   white-space: nowrap;
}
.button:hover { border-color: var(--accent); }
.button.primary { background: var(--accent); border-color: var(--accent); color: white; }
.button.danger { background: #3b1720; border-color: var(--danger); }
.button.tiny { min-height: 25px; padding: .15rem .45rem; font-size: 12px; }

input, select {
   width: 100%;
   min-height: 34px;
   border: 1px solid var(--border);
   border-radius: 6px;
   padding: .4rem .55rem;
   background: #0d1526;
   color: var(--text);
}
input:focus, select:focus { outline: 2px solid color-mix(in srgb, var(--accent), transparent 50%); border-color: var(--accent); }
label { display: grid; gap: .25rem; color: var(--muted); }
.checkbox { display: flex; align-items: center; gap: .5rem; color: var(--text); }
.checkbox input { width: auto; min-height: auto; }

.stack-form { display: grid; gap: .8rem; }
.grid-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.grid-form .checkbox, .grid-form .actions { grid-column: 1 / -1; }
.actions, .git-actions, .inline-form, .row-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.inline-form { flex: 1; }
.inline-form input { min-width: 260px; }

.table-scroll { overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.data-table th, .data-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.data-table th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.row-actions form { display: inline; }
.status { display: inline-block; padding: .15rem .4rem; border-radius: 999px; font-size: 11px; }
.status.ok { background: rgba(59,178,115,.18); color: #78dda5; }
.status.bad { background: rgba(211,77,101,.18); color: #ff8ca0; }

.alert { margin-bottom: .8rem; padding: .65rem .8rem; border: 1px solid var(--border); border-radius: 6px; }
.alert.error { border-color: var(--danger); background: rgba(211,77,101,.12); }
.alert.success { border-color: var(--success); background: rgba(59,178,115,.12); }
.status-box, .secret { padding: .75rem; background: #080d18; border: 1px solid var(--border); border-radius: 6px; overflow: auto; }
dl { display: grid; grid-template-columns: 140px 1fr; gap: .5rem; }
dt { color: var(--muted); }
dd { margin: 0; }

@media (max-width: 760px) {
   .grid-form { grid-template-columns: 1fr; }
   .search-form { order: 2; width: 100%; margin-left: 0; }
   dl { grid-template-columns: 1fr; }
}