:root {
  --bg: #0f1318;
  --panel: #161d25;
  --panel-2: #1f2833;
  --line: #2a3646;
  --text: #e9edf2;
  --muted: #9ca8b7;
  --accent: #37d0a3;
  --accent-2: #2ba07f;
  --warn: #f1b53b;
  --danger: #f06767;
  --ok: #58d68d;
  --radius: 14px;
  --shadow: 0 20px 45px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body { margin: 0; font-family: "IBM Plex Sans", "Segoe UI", sans-serif; color: var(--text); background: radial-gradient(circle at 20% -10%, #1c2633, #0f1318 55%); }
a { color: inherit; }
code { font-family: "JetBrains Mono", monospace; font-size: .9em; }
.button { border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #062118; padding: .62rem .9rem; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.button:hover { filter: brightness(1.05); }
.button.subtle { background: #223042; color: var(--text); }
.button.danger { background: #4b2328; color: #ffd8d8; }
.button.tiny { padding: .45rem .65rem; font-size: .8rem; }
.inline-form { display: inline; }
.muted { color: var(--muted); }
.empty-state { color: var(--muted); font-style: italic; }
.badge { border-radius: 999px; padding: .24rem .55rem; font-size: .76rem; border: 1px solid transparent; }
.badge.ok { background: rgba(88,214,141,.15); color: #aef0c9; border-color: rgba(88,214,141,.3); }
.badge.warn { background: rgba(241,181,59,.14); color: #ffe0a3; border-color: rgba(241,181,59,.28); }
.badge.muted { background: rgba(156,168,183,.12); color: #c8d1dc; border-color: rgba(156,168,183,.22); }

.login-page { min-height: 100vh; display: grid; place-items: center; }
.login-shell { width: min(480px, 92vw); }
.login-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); }
.login-panel h1 { margin: 0; font-size: 2rem; }
.login-subtitle { color: var(--muted); margin: .6rem 0 1.2rem; }
.form-error { color: #ffd1d1; background: rgba(240,103,103,.15); border: 1px solid rgba(240,103,103,.35); border-radius: 10px; padding: .75rem; }

.stack-form { display: grid; gap: .65rem; }
.stack-form label { font-size: .85rem; color: var(--muted); }
.stack-form input, .stack-form select, .stack-form textarea {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: .62rem .72rem;
}
.stack-form textarea { min-height: 150px; resize: vertical; }
.stack-form.two-col { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
.stack-form.two-col button { grid-column: 1 / -1; }
.stack-form .check-row { display: flex; gap: .5rem; align-items: center; }

.admin-page { min-height: 100vh; }
.app-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.app-shell.popup { grid-template-columns: 1fr; }
.sidebar { border-right: 1px solid var(--line); background: linear-gradient(180deg, #141c25, #111821); padding: 1.2rem; }
.brand h1 { margin: 0; }
.brand p { margin: .3rem 0 0; color: var(--muted); }
.nav-stack { margin-top: 1.2rem; display: grid; gap: .35rem; }
.nav-link { text-decoration: none; color: var(--muted); padding: .62rem .72rem; border-radius: 10px; }
.nav-link.active, .nav-link:hover { color: var(--text); background: #1f2a39; }

.main-panel { padding: 1.2rem; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.topbar-title { font-size: 1.4rem; font-weight: 700; }
.topbar-actions { display: flex; gap: .6rem; align-items: center; }
.content-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
  background: linear-gradient(180deg, rgba(22,29,37,.93), rgba(18,24,31,.9));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
}
.card h2 { margin-top: 0; }
.card.span-2 { grid-column: span 2; }
.stats-row { display: grid; gap: .7rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-tile { background: #1b2530; border: 1px solid var(--line); border-radius: 12px; padding: .8rem; }
.stat-tile span { display: block; color: var(--muted); font-size: .8rem; }
.stat-tile strong { font-size: 1.08rem; }

table { width: 100%; border-collapse: collapse; }
thead th { text-align: left; font-size: .78rem; color: var(--muted); border-bottom: 1px solid var(--line); padding: .55rem .4rem; }
tbody td { border-bottom: 1px solid rgba(42,54,70,.65); padding: .55rem .4rem; vertical-align: top; }
.code-wrap { word-break: break-all; }
.table-actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.button-row { display: flex; gap: .5rem; flex-wrap: wrap; }

.chat-log {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #131a22;
  min-height: 220px;
  max-height: 420px;
  overflow: auto;
  padding: .7rem;
  margin-bottom: .8rem;
}
.chat-item { border-bottom: 1px solid rgba(42,54,70,.4); padding: .55rem 0; }
.chat-item:last-child { border-bottom: 0; }
.chat-item .who { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.chat-item pre { margin: .35rem 0 0; white-space: pre-wrap; }

.deploy-big { font-size: 2.1rem; font-weight: 800; margin: .3rem 0; }
.deploy-meta { display: grid; gap: .45rem; margin-bottom: .8rem; }
.deploy-message { color: #e7ffd8; background: rgba(88,214,141,.14); border: 1px solid rgba(88,214,141,.35); border-radius: 10px; padding: .55rem .7rem; }
.terminal-log {
  background: #0b0f14;
  color: #d0ecde;
  border: 1px solid #1f2a33;
  border-radius: 10px;
  min-height: 320px;
  max-height: 520px;
  overflow: auto;
  padding: .7rem;
  font-family: "JetBrains Mono", monospace;
  font-size: .8rem;
}

@media (max-width: 1000px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid { grid-template-columns: 1fr; }
  .card.span-2 { grid-column: span 1; }
  .stack-form.two-col { grid-template-columns: 1fr; }
}