:root {
  color-scheme: dark;
  --bg: #07111f;
  --bg-deep: #040b14;
  --panel: #0c1a2b;
  --panel-2: #102237;
  --panel-3: #142b43;
  --border: #203a55;
  --border-soft: rgba(148, 180, 213, 0.15);
  --text: #eaf3ff;
  --muted: #91a7bd;
  --muted-2: #647b92;
  --teal: #36e3c1;
  --teal-dark: #0d403d;
  --blue: #63a8ff;
  --amber: #f7bd57;
  --violet: #a68bff;
  --red: #ff7d8c;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }

.loading-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: radial-gradient(circle at 45% 30%, #123253 0, transparent 34%), var(--bg-deep);
  color: var(--muted);
}

.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(54, 227, 193, 0.16);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--teal), #4aa5ff);
  color: #04201f;
  font-weight: 900;
  letter-spacing: -0.06em;
  box-shadow: 0 12px 30px rgba(54, 227, 193, 0.22);
}

.brand-mark.large { width: 62px; height: 62px; border-radius: 18px; font-size: 20px; }

.brand-row { display: flex; align-items: center; gap: 14px; }
.brand-row strong { display: block; font-size: 15px; letter-spacing: 0.02em; }
.brand-row span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(440px, 1.2fr) minmax(420px, 0.8fr); }
.auth-hero {
  padding: 48px clamp(44px, 7vw, 110px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at 15% 12%, rgba(48, 116, 181, 0.42), transparent 35%),
    radial-gradient(circle at 85% 76%, rgba(32, 184, 155, 0.17), transparent 30%),
    linear-gradient(145deg, #07111f, #0a1c2f);
  border-right: 1px solid var(--border-soft);
}

.hero-copy { max-width: 720px; margin: 80px 0; }
.eyebrow { color: var(--teal); font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.hero-copy h1 { margin: 18px 0 22px; max-width: 760px; font-size: clamp(43px, 5.3vw, 76px); line-height: 1.02; letter-spacing: -0.05em; }
.hero-copy > p { max-width: 650px; margin: 0; color: #abc1d8; font-size: 18px; line-height: 1.65; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.hero-points span { padding: 10px 13px; border: 1px solid var(--border); border-radius: 999px; color: #c9d9ea; background: rgba(12, 29, 47, 0.62); font-size: 13px; }
.auth-foot { color: var(--muted-2); font-size: 12px; }

.auth-panel {
  padding: 36px;
  display: grid;
  place-items: center;
  background: var(--bg-deep);
}

.auth-card { width: min(430px, 100%); }
.auth-heading h2 { margin: 12px 0 8px; font-size: 34px; letter-spacing: -0.03em; }
.auth-heading p { margin: 0; color: var(--muted); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 30px 0 24px; padding: 5px; background: #0a1624; border: 1px solid var(--border-soft); border-radius: 12px; }
.auth-tab { border: 0; border-radius: 8px; padding: 10px 12px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 700; }
.auth-tab.active { color: var(--text); background: var(--panel-3); box-shadow: 0 5px 14px rgba(0,0,0,.16); }

label { display: grid; gap: 8px; color: #c6d5e5; font-size: 13px; font-weight: 700; }
.auth-card form { display: grid; gap: 18px; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 13px;
  background: #091728;
  color: var(--text);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(54, 227, 193, .12); background: #0b1b2d; }
input:disabled { opacity: .65; cursor: not-allowed; }
textarea { resize: vertical; min-height: 90px; }

.button { border: 1px solid transparent; border-radius: 10px; padding: 10px 15px; cursor: pointer; font-weight: 800; transition: transform .15s ease, filter .15s ease, border-color .15s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .55; cursor: wait; transform: none; }
.button.primary { background: var(--teal); color: #05201c; box-shadow: 0 10px 24px rgba(54, 227, 193, .16); }
.button.primary:hover { filter: brightness(1.06); }
.button.ghost { background: transparent; color: #c8d8e8; border-color: var(--border); }
.button.ghost:hover { border-color: #426384; background: rgba(255,255,255,.025); }
.button.wide { width: 100%; padding-block: 13px; }
.text-button { border: 0; padding: 4px; background: transparent; color: var(--teal); cursor: pointer; font-weight: 750; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); cursor: pointer; }
.icon-button:hover { background: var(--panel-3); border-color: #3a5c7c; }

.form-message { min-height: 18px; margin: -4px 0 0; color: var(--red); font-size: 13px; line-height: 1.45; }
.form-message.success { color: var(--teal); }
.security-note { margin-top: 24px; padding: 13px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(54, 227, 193, .15); border-radius: 11px; background: rgba(20, 83, 73, .16); color: #b7cabf; font-size: 12px; }
.security-note p { margin: 0; }
.shield-icon { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: rgba(54,227,193,.16); color: var(--teal); font-weight: 900; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 25px 18px; display: flex; flex-direction: column; background: #06101c; border-right: 1px solid var(--border-soft); z-index: 20; }
.brand-row.compact { padding: 0 8px 24px; }
.main-nav { display: grid; gap: 6px; margin-top: 14px; }
.nav-item { display: flex; align-items: center; gap: 12px; border: 1px solid transparent; border-radius: 10px; padding: 11px 13px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; font-weight: 700; }
.nav-item span { width: 20px; color: #7690a9; font-size: 17px; text-align: center; }
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.025); }
.nav-item.active { color: var(--text); background: linear-gradient(90deg, rgba(54,227,193,.14), rgba(54,227,193,.045)); border-color: rgba(54,227,193,.15); }
.nav-item.active span { color: var(--teal); }
.sidebar-footer { margin-top: auto; padding: 18px 8px 0; border-top: 1px solid var(--border-soft); color: var(--muted-2); }
.sidebar-footer small { display: block; margin-top: 9px; }
.environment-badge { display: flex; align-items: center; gap: 8px; color: #9fc7bb; font-size: 12px; font-weight: 750; }
.environment-badge span { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px rgba(54,227,193,.8); }

.workspace { min-width: 0; }
.topbar { height: 82px; padding: 0 30px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border-soft); background: rgba(7,17,31,.94); position: sticky; top: 0; z-index: 15; backdrop-filter: blur(14px); }
.topbar h1 { margin: 3px 0 0; font-size: 22px; letter-spacing: -0.02em; }
.breadcrumb { margin: 0; color: var(--muted-2); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 5px 11px 5px 5px; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(255,255,255,.02); }
.user-chip > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--panel-3); color: var(--teal); font-size: 12px; font-weight: 900; }
.user-chip strong, .user-chip small { display: block; }
.user-chip strong { font-size: 12px; }
.user-chip small { margin-top: 2px; color: var(--muted); font-size: 10px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }

.content { padding: 30px; max-width: 1600px; margin: 0 auto; }
.page { display: none; }
.page.active { display: block; animation: pageIn .22s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.welcome-panel { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 25px 27px; border: 1px solid var(--border); border-radius: 18px; background: radial-gradient(circle at 85% 10%, rgba(54,227,193,.12), transparent 30%), linear-gradient(135deg, #0d2035, #0b1929); box-shadow: var(--shadow); }
.welcome-panel h2 { margin: 10px 0 7px; font-size: 28px; letter-spacing: -.03em; }
.welcome-panel p { margin: 0; color: var(--muted); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 20px 0; }
.metric-card { min-width: 0; display: flex; align-items: center; gap: 15px; padding: 19px; border: 1px solid var(--border-soft); border-radius: 15px; background: var(--panel); }
.metric-icon { flex: 0 0 auto; width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; font-size: 13px; font-weight: 900; }
.metric-icon.teal { color: var(--teal); background: rgba(54,227,193,.11); }
.metric-icon.blue { color: var(--blue); background: rgba(99,168,255,.12); }
.metric-icon.amber { color: var(--amber); background: rgba(247,189,87,.12); }
.metric-icon.violet { color: var(--violet); background: rgba(166,139,255,.12); }
.metric-card p { margin: 0 0 3px; color: var(--muted); font-size: 12px; font-weight: 700; }
.metric-card strong { display: block; font-size: 25px; letter-spacing: -.03em; white-space: nowrap; }
.metric-card span { display: block; margin-top: 3px; color: var(--muted-2); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.two-column { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 20px; }
.panel { border: 1px solid var(--border-soft); border-radius: 15px; background: var(--panel); overflow: hidden; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 19px 20px; border-bottom: 1px solid var(--border-soft); }
.panel-header h3 { margin: 0; font-size: 15px; }
.panel-header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.list-stack { display: grid; }
.organization-row { display: flex; align-items: center; gap: 13px; padding: 15px 20px; border-bottom: 1px solid var(--border-soft); }
.organization-row:last-child { border-bottom: 0; }
.org-avatar { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; background: var(--panel-3); color: var(--teal); font-weight: 900; }
.org-main { min-width: 0; }
.org-main strong, .org-main span { display: block; }
.org-main strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-main span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.organization-row .status-pill { margin-left: auto; }

.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 850; text-transform: capitalize; white-space: nowrap; }
.status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-pill.active, .status-pill.connected, .status-pill.current { color: #62e4c6; background: rgba(54,227,193,.1); }
.status-pill.trial, .status-pill.pending, .status-pill.planned { color: var(--amber); background: rgba(247,189,87,.1); }
.status-pill.suspended, .status-pill.error, .status-pill.payment_due { color: var(--red); background: rgba(255,125,140,.1); }
.status-pill.cancelled, .status-pill.not_connected { color: #90a3b5; background: rgba(144,163,181,.1); }

.timeline { padding: 5px 20px; }
.timeline-item { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-marker { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(54,227,193,.08); }
.timeline-marker.warning { background: var(--amber); box-shadow: 0 0 0 4px rgba(247,189,87,.08); }
.timeline-marker.error { background: var(--red); box-shadow: 0 0 0 4px rgba(255,125,140,.08); }
.timeline-content strong { display: block; font-size: 12px; }
.timeline-content p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.timeline-content time { display: block; margin-top: 5px; color: var(--muted-2); font-size: 10px; }
.timeline.expanded { padding: 4px 22px; }

.page-actions { min-height: 54px; margin-bottom: 19px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.page-actions h2 { margin: 0; font-size: 25px; letter-spacing: -.03em; }
.page-actions p { margin: 6px 0 0; color: var(--muted); }
.table-panel { min-height: 330px; }
.table-tools { display: flex; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--border-soft); }
.search-field { position: relative; display: block; flex: 1; max-width: 400px; }
.search-field span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 17px; }
.search-field input { padding-left: 38px; }
.table-tools select { width: 180px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 18px; border-bottom: 1px solid var(--border-soft); text-align: left; white-space: nowrap; }
th { color: var(--muted-2); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
td { color: #cbd9e6; font-size: 12px; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: rgba(255,255,255,.018); }
.table-org { display: flex; align-items: center; gap: 10px; }
.table-org strong, .table-org small { display: block; }
.table-org strong { color: var(--text); }
.table-org small { margin-top: 3px; color: var(--muted-2); }
.row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.row-button { border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; background: transparent; color: #bacada; cursor: pointer; font-size: 11px; font-weight: 700; }
.row-button:hover { border-color: var(--teal); color: var(--teal); }
.empty-state { min-height: 250px; padding: 50px 20px; display: grid; place-items: center; align-content: center; text-align: center; color: var(--muted); }
.empty-state > div { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--panel-3); color: var(--teal); font-size: 20px; }
.empty-state h3 { margin: 13px 0 5px; color: var(--text); font-size: 16px; }
.empty-state p { margin: 0; font-size: 12px; }
.compact-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.health-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.health-card { padding: 20px; border: 1px solid var(--border-soft); border-radius: 15px; background: var(--panel); }
.health-title { display: flex; align-items: center; gap: 9px; }
.health-title h3 { margin: 0; color: var(--muted); font-size: 12px; }
.health-dot { width: 8px; height: 8px; border-radius: 50%; }
.health-dot.ok { background: var(--teal); box-shadow: 0 0 10px rgba(54,227,193,.7); }
.health-dot.neutral { background: var(--amber); }
.health-card strong { display: block; margin-top: 20px; font-size: 19px; }
.health-card p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.system-details dl { margin: 0; }
.system-details dl div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 20px; border-bottom: 1px solid var(--border-soft); }
.system-details dl div:last-child { border-bottom: 0; }
.system-details dt { color: var(--muted); }
.system-details dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; padding: 28px; display: grid; place-items: center; background: rgba(2,8,14,.78); backdrop-filter: blur(7px); }
.modal { width: min(720px, 100%); max-height: calc(100vh - 56px); overflow-y: auto; border: 1px solid #2a4866; border-radius: 18px; background: #0b1929; box-shadow: 0 28px 100px rgba(0,0,0,.52); }
.modal-header { padding: 21px 23px; display: flex; align-items: start; justify-content: space-between; border-bottom: 1px solid var(--border-soft); }
.modal-header h2 { margin: 8px 0 0; font-size: 24px; }
.modal form { padding: 22px 23px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.span-two { grid-column: 1 / -1; }
.slug-field { display: flex; align-items: stretch; }
.slug-field input { min-width: 0; border-radius: 10px 0 0 10px; }
.slug-field span { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--border); border-left: 0; border-radius: 0 10px 10px 0; background: #0d2135; color: var(--muted); font-size: 11px; white-space: nowrap; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 17px; }

/* Central AI configuration */
.config-heading { align-items: end; }
.config-heading .eyebrow { display: block; margin-bottom: 8px; }
.organization-picker { width: min(300px, 100%); }
.config-boundary { margin-bottom: 18px; padding: 15px 17px; display: flex; align-items: center; gap: 13px; border: 1px solid rgba(54,227,193,.2); border-radius: 13px; background: rgba(54,227,193,.06); }
.config-boundary > span { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: rgba(54,227,193,.11); }
.config-boundary div { min-width: 0; }
.config-boundary strong { display: block; font-size: 13px; }
.config-boundary p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.config-boundary .button { margin-left: auto; white-space: nowrap; text-decoration: none; }
.config-tabs { display: flex; gap: 7px; margin: 0 0 19px; padding: 5px; overflow-x: auto; border: 1px solid var(--border-soft); border-radius: 12px; background: #081523; }
.config-tab { flex: 0 0 auto; padding: 10px 13px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 800; }
.config-tab.active { color: var(--text); border-color: rgba(54,227,193,.2); background: rgba(54,227,193,.1); }
.config-section { display: none; }
.config-section.active { display: block; animation: pageIn .2s ease; }
.config-loading { padding: 50px 20px; text-align: center; color: var(--muted); }
.config-metrics { margin-top: 0; }
.config-checklist { display: grid; }
.config-check-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 15px 19px; border-bottom: 1px solid var(--border-soft); }
.config-check-row:last-child { border-bottom: 0; }
.config-check-row .check-state { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); background: var(--panel-3); font-weight: 900; }
.config-check-row.done .check-state { color: #05201c; background: var(--teal); }
.config-check-row strong, .config-check-row small { display: block; }
.config-check-row strong { font-size: 12px; }
.config-check-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.config-check-row a { text-decoration: none; }
.section-actions { min-height: 58px; margin-bottom: 15px; display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.section-actions h3 { margin: 0; font-size: 22px; }
.section-actions p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.config-form-grid { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.knowledge-list { display: grid; gap: 14px; margin-top: 15px; }
.knowledge-card { border: 1px solid var(--border-soft); border-radius: 15px; background: var(--panel); overflow: hidden; }
.knowledge-card > header { display: flex; align-items: center; gap: 12px; padding: 16px 19px; border-bottom: 1px solid var(--border-soft); }
.knowledge-number, .step-number { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; color: var(--teal); background: rgba(54,227,193,.1); font-size: 11px; font-weight: 900; }
.knowledge-card h3 { margin: 0; font-size: 14px; }
.knowledge-card header small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.knowledge-card header .status-pill { margin-left: auto; }
.knowledge-body { padding: 17px 19px; }
.knowledge-body textarea { min-height: 120px; line-height: 1.55; }
.knowledge-actions { margin-top: 10px; display: flex; justify-content: flex-end; gap: 8px; }
.small-button { padding: 7px 11px; font-size: 11px; }
.table-title strong, .table-title small { display: block; }
.table-title small { max-width: 360px; margin-top: 3px; color: var(--muted); white-space: normal; line-height: 1.4; }
.tag-list { display: flex; gap: 5px; }
.tag { padding: 4px 7px; border-radius: 999px; background: var(--panel-3); color: #b9cadb; font-size: 9px; }
.workflow-list { display: grid; gap: 16px; }
.workflow-card { border: 1px solid var(--border-soft); border-radius: 15px; background: var(--panel); overflow: hidden; }
.workflow-head { padding: 18px 20px; display: flex; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--border-soft); }
.workflow-head h3 { margin: 0; font-size: 16px; }
.workflow-head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.approval-path { padding: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.approval-step { padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: #091827; }
.approval-step h4 { margin: 12px 0 6px; font-size: 13px; }
.approval-step p { min-height: 47px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.approval-step footer { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--teal); font-size: 10px; font-weight: 800; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.preview-grid .span-two { grid-column: 1 / -1; }
.preview-body { padding: 17px 20px; }
.preview-section { padding: 0 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.preview-section:last-child { padding: 0; margin: 0; border: 0; }
.preview-section h4 { margin: 0 0 6px; color: var(--teal); font-size: 11px; }
.preview-section p { margin: 0; color: #c4d4e3; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.preview-product-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.preview-product-grid span { padding: 8px 10px; border-radius: 9px; background: var(--panel-3); font-size: 11px; }
.question-preview { padding: 10px 20px; }
.question-preview > div { padding: 10px 0; display: grid; grid-template-columns: 27px 1fr; gap: 9px; border-bottom: 1px solid var(--border-soft); }
.question-preview > div:last-child { border: 0; }
.question-preview span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: var(--teal); background: var(--panel-3); font-size: 10px; font-weight: 900; }
.question-preview p { margin: 4px 0 0; color: #cbd9e6; font-size: 11px; }
.check-field { display: flex; align-items: center; gap: 9px; }
.check-field input { width: auto; }
.history-list { padding: 18px 22px; }
.history-item { padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
.history-item:last-child { border: 0; }
.history-item header { display: flex; justify-content: space-between; gap: 12px; }
.history-item time { color: var(--muted); font-size: 10px; }
.history-item p { margin: 8px 0 0; color: #c2d1df; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.small-modal { width: min(620px, 100%); }

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 130; max-width: 390px; padding: 13px 16px; border: 1px solid rgba(54,227,193,.28); border-radius: 11px; background: #0d2b2b; color: #c9fff2; box-shadow: var(--shadow); font-size: 12px; font-weight: 700; }
.toast.error { border-color: rgba(255,125,140,.32); background: #341821; color: #ffd6dc; }
.mobile-only { display: none; }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-column { grid-template-columns: 1fr; }
  .auth-shell { grid-template-columns: 1fr 480px; }
  .auth-hero { padding-inline: 44px; }
  .hero-copy h1 { font-size: 48px; }
}

@media (max-width: 820px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-hero { min-height: 330px; padding: 30px; }
  .hero-copy { margin: 46px 0; }
  .hero-copy h1 { font-size: 39px; }
  .hero-copy > p, .auth-foot { display: none; }
  .auth-panel { padding: 42px 24px; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: -270px; transition: left .2s ease; box-shadow: var(--shadow); }
  .sidebar.open { left: 0; }
  .mobile-only { display: grid; }
  .topbar { padding: 0 17px; }
  .user-chip div, .topbar .button.ghost { display: none; }
  .content { padding: 20px 16px; }
  .health-grid { grid-template-columns: 1fr; }
}

@media (max-width: 590px) {
  .auth-hero { min-height: 260px; }
  .hero-copy { margin: 34px 0 6px; }
  .hero-copy h1 { font-size: 32px; }
  .hero-points { display: none; }
  .topbar { height: 72px; }
  .topbar-actions { gap: 6px; }
  .welcome-panel { align-items: stretch; flex-direction: column; }
  .welcome-panel .button { width: 100%; }
  .metric-grid, .compact-metrics { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .span-two { grid-column: auto; }
  .table-tools { flex-direction: column; }
  .search-field, .table-tools select { width: 100%; max-width: none; }
  .modal-backdrop { padding: 0; }
  .modal { max-height: 100vh; height: 100vh; border: 0; border-radius: 0; }
  .config-heading, .section-actions, .config-boundary { align-items: stretch; flex-direction: column; }
  .organization-picker { width: 100%; }
  .config-boundary .button { margin-left: 0; text-align: center; }
  .config-form-grid, .preview-grid, .approval-path { grid-template-columns: 1fr; }
  .preview-grid .span-two { grid-column: auto; }
  .knowledge-actions { flex-wrap: wrap; }
}

.ai-panel-body{padding:22px}.ai-panel-body p{line-height:1.6;color:#526174}.ai-toggle{display:flex!important;align-items:center;gap:12px}.ai-toggle input{width:20px!important;height:20px;flex:0 0 20px;accent-color:#0f766e}.ai-actions{display:flex;gap:10px;flex-wrap:wrap}.ai-mode{padding:14px;background:#eaf7f2;border-radius:10px;color:#145c49;font-weight:600}.ai-usage{margin-top:20px}.config-form-grid small{font-size:12px;line-height:1.5;color:#64748b}.ai-usage .metric-card strong{font-size:21px}.ai-panel-body h3{margin-top:0}

.config-form-grid .form-span{grid-column:1/-1}

#private-general-form,.private-modal-body{padding:22px}#private-product-rows small{display:block}#private-products-root .table-panel{margin-top:22px}#private-variants>.form-grid{margin-bottom:16px}#private-preview-result>p:first-of-type{white-space:pre-wrap}#private-products-root textarea{width:100%}.private-products-modal .modal{width:min(900px,100%)}.private-products-modal .modal form{padding:0}.private-products-modal fieldset{border:1px solid var(--border-soft);border-radius:10px}.private-products-modal .form-grid{min-width:0}.private-products-modal .form-grid>*{min-width:0}.private-products-modal textarea{width:100%}

#private-guidance-form{padding:22px;display:grid;gap:18px}#private-guidance-form textarea{width:100%}#private-guidance-form .section-actions{margin:0}#private-product-sync{white-space:nowrap;color:var(--text-muted);font-size:12px}.shared-product-description{white-space:pre-wrap;min-width:180px;max-width:440px;overflow-wrap:anywhere}.private-advanced,.advanced-config{margin:18px 0}.private-advanced>summary,.advanced-config>summary{cursor:pointer;color:var(--text-muted)}.private-advanced>.form-grid{margin-top:16px}.preview-reply{white-space:pre-wrap}

.workflow-instructions-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px}.workflow-stage-list h3{margin-bottom:12px}.workflow-stage-button{display:flex;flex-direction:column;text-align:left;width:100%;gap:5px;border:1px solid transparent;background:transparent;color:inherit;padding:12px;border-radius:9px;cursor:pointer}.workflow-stage-button small{opacity:.7}.workflow-stage-button.active{background:#eaf1ff;border-color:#93b4ef;color:#17396c}.workflow-history-text,.preview-reply{white-space:pre-wrap;overflow-wrap:anywhere}.workflow-preview{margin-top:20px}.workflow-preview summary{cursor:pointer;font-weight:600;margin-bottom:12px}#workflow-history-result details{padding:12px 0;border-bottom:1px solid #dce4ef}[data-instruction-panel][hidden]{display:none!important}@media(max-width:800px){.workflow-instructions-layout{grid-template-columns:1fr}#workflow-stage-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Focused, console-only layout. */
.simple-console { line-height: 1.5; }
.simple-console .content { max-width: 1250px; padding: 32px; }
.simple-console .sidebar { overflow-y: auto; }
.simple-console .brand-row.compact { gap: 10px; }
.simple-console .brand-row.compact strong { font-size: 14px; }
.simple-console .simple-advanced-nav { margin: 28px 0 20px; }
.simple-console summary { cursor: pointer; color: var(--muted); font-size: 14px; font-weight: 650; }
.simple-console summary:hover { color: var(--text); }
.simple-console summary:focus-visible, .simple-console a:focus-visible, .simple-console button:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.simple-advanced-nav summary { padding: 8px 13px; }
.simple-advanced-nav nav { display: grid; gap: 4px; padding-top: 8px; }
.simple-advanced-nav .nav-item { font-size: 13px; }
.simple-sidebar-note { padding: 16px 13px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--border-soft); }
.simple-sidebar-note strong { color: var(--text); font-size: 12px; }
.simple-sidebar-note p { margin: 7px 0 12px; }
.simple-sidebar-note a { color: var(--teal); text-decoration: none; }
.simple-console .sidebar-footer { padding-top: 12px; }
.simple-console #version-label { display: none; }
.simple-console .page-actions { align-items: center; margin-bottom: 26px; }
.simple-console .page-actions h2 { font-size: 28px; }
.simple-console .page-actions p { font-size: 14px; }
.simple-console .button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 13px; }
.simple-company-list .table-tools { padding: 0 0 22px; border: 0; background: transparent; gap: 14px; }
.simple-company-list .search-field { flex: 1; max-width: 400px; }
.simple-company-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.simple-company-card { padding: 26px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); min-width: 0; }
.simple-company-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.simple-company-card .org-avatar { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; }
.simple-company-card h3 { margin: 22px 0 6px; font-size: 22px; overflow-wrap: anywhere; }
.simple-company-card p { margin: 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.simple-company-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.simple-back { margin-bottom: 10px; padding-left: 0; font-size: 13px; }
.simple-console .organization-picker { min-width: 180px; }
.simple-company-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 26px; }
#simple-company-status { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.simple-console .simple-main-tabs { flex-wrap: wrap; overflow: visible; padding: 6px; gap: 5px; margin-bottom: 16px; }
.simple-console .simple-main-tabs .config-tab { flex: 1 1 auto; font-size: 13px; min-height: 42px; }
.simple-console .simple-advanced-settings { margin: 0 0 28px; padding: 0; background: transparent; border: 0; }
.simple-advanced-settings summary { padding: 8px 0; }
.simple-console .simple-advanced-settings .config-tabs { flex-wrap: wrap; margin-top: 10px; }
.simple-console .simple-advanced-settings .config-tab { font-size: 13px; }
.simple-help { color: var(--muted); font-size: 14px; margin: 6px 0 20px; }
.simple-section-intro { margin: 0 0 22px; }
.simple-section-intro h3 { margin: 0 0 5px; font-size: 21px; }
.simple-section-intro p { color: var(--muted); margin: 0; font-size: 14px; }
.simple-action-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.simple-action-card { text-align: left; background: var(--panel); padding: 22px; border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; cursor: pointer; }
.simple-action-card:hover { background: var(--panel-2); border-color: #54758d; }
.simple-action-icon { color: var(--teal); font-size: 23px; line-height: 1; }
.simple-action-card strong { font-size: 16px; }
.simple-action-card > span:not(.simple-action-icon) { color: var(--muted); font-size: 14px; }
.simple-action-card small { color: var(--teal); margin-top: auto; padding-top: 8px; font-size: 12px; font-weight: 650; }
.simple-secondary-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-top: 1px solid var(--border-soft); }
.simple-secondary-actions strong { font-size: 14px; }
.simple-secondary-actions p { color: var(--muted); margin: 4px 0 0; font-size: 13px; }
.simple-secondary-actions .button { flex-shrink: 0; }
.simple-console .simple-form-advanced { margin: 20px 0; padding: 14px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.simple-form-advanced .form-grid { margin-top: 20px; }
.simple-console #organization-form label small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.simple-console .auth-hero .hero-copy h1 { font-size: clamp(36px,4vw,58px); }
.simple-owner-setup { margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.simple-owner-setup .auth-tabs { margin-top: 12px; }
@media (max-width: 1100px) { .simple-company-card-actions { flex-direction: column; } }
@media (max-width: 820px) { .simple-console .content { padding: 24px 18px; } }
@media (max-width: 590px) {
  .simple-company-grid, .simple-action-grid { grid-template-columns: 1fr; }
  .simple-company-card { padding: 22px; }
  .simple-console .page-actions, .simple-console .config-heading { align-items: stretch; flex-direction: column; }
  .simple-console .organization-picker { width: 100%; }
  .simple-company-list .table-tools { flex-direction: column; align-items: stretch; }
  .simple-company-list .search-field { max-width: none; }
  .simple-console .simple-main-tabs .config-tab { flex: 1 1 42%; padding: 9px; }
  .simple-secondary-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
  .simple-console .topbar-actions { gap: 7px; }
  .simple-console #logout-button { display: inline-flex; min-height: 36px; padding: 7px; font-size: 11px; }
  .simple-console .user-chip { display: none; }
}