:root{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* App palette (dark, restrained) */
  --bg: #000;            /* keep real black so on-black logos “disappear” */
  --panel: #0f141c;
  --panel2: #0b1017;
  --border: #1a2432;
  --border2: #223049;

  --fg: #e6edf3;
  --muted: #9fb0c0;
  --link: #7aa2ff;

  --ok: #7dffb2;
  --bad: #ff7d7d;

  --radius: 12px;
}

html, body{
  height: 100%;
}

body{
  margin: 0;
  padding: 16px;
  background: var(--bg);
  color: var(--fg);
}

a{ color: var(--link); text-decoration: none; }

/* ------------------------------------------------------------------ */
/* Basic utilities                                                     */
/* ------------------------------------------------------------------ */

.row{ display: flex; gap: 8px; align-items: center; }
.muted{ color: var(--muted); font-size: 12px; }

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

input, select, button{
  background: var(--panel2);
  color: var(--fg);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 8px 10px;
}

button{ cursor: pointer; }
button:disabled{ opacity: 0.6; cursor: not-allowed; }

table{ width: 100%; border-collapse: collapse; }

th, td{
  border-bottom: 1px solid var(--border);
  padding: 6px 8px;
  text-align: left;
  font-size: 13px;
}

th{ color: var(--muted); font-weight: 600; }

.pill{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  margin: 2px 6px 2px 0;
  font-size: 12px;
}

.ok{ color: var(--ok); }
.bad{ color: var(--bad); }

.title{
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px 0;
}

/* ------------------------------------------------------------------ */
/* Cards / panels                                                      */
/* ------------------------------------------------------------------ */

.card, .panel{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 12px;
  backdrop-filter: blur(2px);
}

.panel-title, .card-title{
  font-weight: 700;
  margin-bottom: 10px;
}

/* ------------------------------------------------------------------ */
/* App shell (after login)                                              */
/* ------------------------------------------------------------------ */

.app{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Topbar */
.topbar{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

/* Branding block (top bar) */
.brandblock{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
}

.brand-left{
  display: flex;
  align-items: center;
}

.brand-product{
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-text{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-title{
  font-weight: 800;
  letter-spacing: 0.2px;
}

.brand-slogan{
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.brand-right{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}



/* Tabs */
.tabs{ display: flex; gap: 8px; }

.tab{
  border: 1px solid var(--border2);
  background: transparent;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--fg);
}

.tab:hover{ border-color: #2d3f5d; }

.tab-active{
  background: rgba(255,255,255,0.06);
  border-color: #2d3f5d;
}

.spacer{ flex: 1; }

/* Health */
.health{ display: flex; align-items: center; gap: 6px; }

/* Main body */
.body{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 14px 0;
}

.main{ min-width: 0; }

/* Debug pre blocks (if used) */
.pre{
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px;
  overflow: auto;
}

/* ------------------------------------------------------------------ */
/* Branding (canonical; keep ONE source of truth)                      */
/* ------------------------------------------------------------------ */

/* Generic logo helper (no pill) */
.logo{
  display: block;
  width: auto;
  object-fit: contain;
  background: none;
  padding: 0;
  border: none;
  box-shadow: none;
}

/* Brand block layout: TAKS left, instance logo right */
.brandblock{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 260px;
}

.brand-left{
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-product{
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 1px solid rgba(255,255,255,0.12);
  padding-left: 14px;
  margin-left: 10px;
}

.brand-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Product logo (git) */
.logo-product{
  height: 34px;
  max-width: 180px;
  opacity: 0.98;
}

/* Instance logo (highest numbered) */
.logo-inst-single{
  height: 34px;
  max-width: 180px;
  opacity: 0.98;
}

@media (max-width: 900px){
  .logo-product{ height: 30px; max-width: 140px; }
  .logo-inst-single{ height: 30px; max-width: 140px; }
}

/* Top-right unit logo */
.logo-inst-single{
  height: 28px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Make sure session cluster aligns correctly */
.session{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 12px;
}


/* ------------------------------------------------------------------ */
/* Override: unit badge should be a square icon (not a wide banner)    */
/* ------------------------------------------------------------------ */
.logo-inst-single{
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  object-fit: contain !important;
}
/* ------------------------------------------------------------------ */
/* LLM (RenderPlan blocks)                                             */
/* ------------------------------------------------------------------ */

.llm-page{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.llm-toolbar{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
}

.llm-content{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Simple headline helpers used by LLM.js */
.h1{
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px 0;
  letter-spacing: 0.2px;
}

.h2{
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 8px 0;
  letter-spacing: 0.2px;
}

/* Button helper (if you don’t already have one elsewhere) */
.btn{
  border: 1px solid var(--border2);
  background: rgba(255,255,255,0.04);
  padding: 8px 12px;
  border-radius: 10px;
}
.btn:hover{ border-color: #2d3f5d; }

/* Error box for fetch failures */
.errorbox{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 125, 125, 0.35);
  background: rgba(255, 125, 125, 0.08);
  color: var(--fg);
}

/* Generic LLM blocks */
.llm-block{
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}

.llm-header{
  padding: 14px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
}

/* Markdown/json are rendered as plain text (no parser), so keep readable */
.llm-markdown,
.llm-json{
  margin: 0;
  white-space: pre-wrap;      /* wrap long lines */
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px;
  overflow: auto;
}

/* Card blocks (RenderPlan type: card) */
.llm-card{
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}

.llm-card-head{
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.llm-card-title{
  font-weight: 800;
  letter-spacing: 0.2px;
}

.llm-card-subtitle{
  font-size: 12px;
}

.llm-card-ingress{
  margin: 8px 0 10px 0;
  color: var(--muted);
  font-size: 12px;
}

/* Payload (grid/table/chart placeholder) */
.llm-payload{
  margin-top: 6px;
}

.llm-table{
  width: 100%;
  border-collapse: collapse;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
}

.llm-table th,
.llm-table td{
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 8px 10px;
  font-size: 13px;
}

.llm-table th{
  color: var(--muted);
  font-weight: 700;
}

.llm-table tr:last-child td{ border-bottom: none; }

/* LLM debug: keep big JSON readable */
.pre-scroll{
  max-height: 55vh;
  overflow: auto;
}

/* Onboarding create page layout */
.ob-create-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width: 1100px){
  .ob-create-grid{ grid-template-columns: 420px 1fr; align-items:start; }
}
.ob-col{ min-width:0; }
.ob-sticky{ position: sticky; top: 18px; }
.ob-box{ margin-bottom: 12px; }
.ob-actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* ------------------------------------------------------------------
   Onboarding: Create user two-column layout
   ------------------------------------------------------------------ */
.ob-create-grid{
  display:grid;
  grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr);
  gap: 12px;
  align-items: start;
}

.ob-col{ min-width: 0; }

.ob-sticky{
  position: sticky;
  top: 12px;
}

@media (max-width: 980px){
  .ob-create-grid{ grid-template-columns: 1fr; }
  .ob-sticky{ position: static; top: auto; }
}

/* ------------------------------------------------------------------
   Onboarding: fight password-manager icon reflow (layout stability)
   ------------------------------------------------------------------ */
.ob-create-grid input,
.ob-create-grid select{
  padding-right: 42px; /* reserve space for injected icons */
  box-sizing: border-box;
}

/* ------------------------------------------------------------------
   Onboarding Create User layout
   ------------------------------------------------------------------ */
.ob-create-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 1100px){
  .ob-create-grid{
    grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr);
    align-items: start;
  }
  .ob-sticky{
    position: sticky;
    top: 12px;
  }
}

/* Fight password-manager icon reflow (reserve space for injected UI) */
.ob-create-root input,
.ob-create-root select{
  padding-right: 42px;
  box-sizing: border-box;
}