:root {
  color-scheme: dark;
  --bg: #080b12;
  --surface: #101520;
  --surface-2: #161c29;
  --surface-3: #1d2534;
  --line: rgba(255, 255, 255, 0.09);
  --text: #f5f7fb;
  --muted: #9aa5b5;
  --accent: #7c8cff;
  --accent-2: #5968e8;
  --success: #4bd18b;
  --warning: #f5be5b;
  --danger: #ff6b7a;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 15% -10%, rgba(124, 140, 255, 0.16), transparent 35%),
    radial-gradient(circle at 90% 5%, rgba(67, 217, 170, 0.08), transparent 30%),
    var(--bg);
  color: var(--text);
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small-text { font-size: .8rem; }
.wide { width: 100%; }

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  width: min(460px, 100%);
  padding: 42px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(16, 21, 32, .88);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  text-align: center;
}
.login-card h1 { margin: 8px 0 12px; font-size: clamp(2rem, 6vw, 3rem); }
.login-card p { line-height: 1.6; }
.fine-print { margin: 20px 0 0; color: var(--muted); font-size: .8rem; }

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--accent), #9e79ff);
  color: white;
  font-weight: 900;
  font-size: 1.5rem;
  box-shadow: 0 15px 40px rgba(124, 140, 255, .3);
}
.brand-mark.small { width: 38px; height: 38px; border-radius: 12px; font-size: 1rem; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  border-right: 1px solid var(--line);
  background: rgba(10, 13, 21, .82);
  backdrop-filter: blur(18px);
}
.brand-row { display: flex; align-items: center; gap: 12px; padding: 0 8px 24px; }
.brand-row strong { display: block; }
.brand-row span { color: var(--muted); font-size: .75rem; }
.nav-list { display: grid; gap: 7px; }
.nav-item {
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--muted);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: .18s ease;
}
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.045); }
.nav-item.active { color: white; background: linear-gradient(135deg, rgba(124,140,255,.22), rgba(124,140,255,.08)); }
.sidebar-footer { margin-top: auto; display: grid; gap: 12px; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 10px; min-width: 0; }
.user-chip img { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-3); }
.user-chip div { min-width: 0; }
.user-chip strong, .user-chip span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip span { color: var(--muted); font-size: .75rem; text-transform: capitalize; }

.main-content { padding: 28px clamp(18px, 3vw, 44px) 60px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.7rem, 3vw, 2.35rem); }
h2 { margin-bottom: 0; font-size: 1.1rem; }
.eyebrow { margin: 0 0 6px; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.button, .icon-button, .file-button {
  border: 1px solid transparent;
  border-radius: 11px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: .18s ease;
}
.button:disabled, .icon-button:disabled { opacity: .45; cursor: not-allowed; }
.button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 25px rgba(89,104,232,.25); }
.button.primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.button.ghost, .icon-button, .file-button { border-color: var(--line); background: rgba(255,255,255,.035); }
.button.ghost:hover, .icon-button:hover, .file-button:hover { background: rgba(255,255,255,.075); }
.button.danger-outline { border-color: rgba(255,107,122,.35); background: rgba(255,107,122,.06); color: #ff9aa5; }
.icon-button { width: 42px; padding: 0; font-size: 1.1rem; }
.file-button input { display: none; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .78rem;
  color: var(--muted);
  background: rgba(255,255,255,.03);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.success { color: var(--success); }
.pill.warning { color: var(--warning); }
.pill.danger { color: var(--danger); }

.view { display: none; }
.view.active { display: block; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card, .panel {
  border: 1px solid var(--line);
  border-radius: 17px;
  background: linear-gradient(155deg, rgba(24,31,45,.86), rgba(13,18,28,.92));
  box-shadow: 0 12px 35px rgba(0,0,0,.14);
}
.metric-card { padding: 20px; min-height: 128px; display: flex; flex-direction: column; }
.metric-label { color: var(--muted); font-size: .8rem; }
.metric-card strong { margin-top: auto; font-size: 1.75rem; }
.metric-detail { color: var(--muted); font-size: .78rem; margin-top: 4px; }
.panel { overflow: hidden; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.panel-header.compact { padding: 16px; }
.panel-header.wrap { flex-wrap: wrap; }
.two-column-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.details-list { margin: 0; padding: 10px 22px 20px; }
.details-list div { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.details-list div:last-child { border-bottom: 0; }
.details-list dt { color: var(--muted); }
.details-list dd { margin: 0; overflow-wrap: anywhere; }

.compact-log-list, .log-list { padding: 8px 20px 20px; }
.log-entry { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.log-entry:last-child { border-bottom: 0; }
.log-time { color: var(--muted); font-size: .75rem; }
.log-entry strong { font-size: .86rem; }
.log-entry p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.log-entry.error strong { color: var(--danger); }
.log-entry.warning strong { color: var(--warning); }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; }

select, input, textarea {
  width: 100%;
  color: var(--text);
  background: #0d121d;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  outline: none;
}
select:focus, input:focus, textarea:focus { border-color: rgba(124,140,255,.7); box-shadow: 0 0 0 3px rgba(124,140,255,.12); }
.filter-row select, .filter-row input { width: auto; min-width: 140px; }
textarea { resize: vertical; line-height: 1.5; }

.chat-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; height: calc(100vh - 145px); min-height: 560px; }
.chat-list-panel, .chat-panel { height: 100%; }
.chat-channel-list { padding: 8px; overflow-y: auto; max-height: calc(100% - 75px); }
.chat-channel-button { width: 100%; border: 0; border-radius: 11px; padding: 12px; display: flex; gap: 10px; text-align: left; color: var(--text); background: transparent; cursor: pointer; }
.chat-channel-button:hover { background: rgba(255,255,255,.045); }
.chat-channel-button.active { background: rgba(124,140,255,.14); }
.channel-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: var(--surface-3); color: var(--accent); font-weight: 800; }
.chat-channel-button strong, .chat-channel-button span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-channel-button span { color: var(--muted); font-size: .75rem; margin-top: 3px; }
.chat-panel { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; overflow: hidden; min-height: 0; }
.chat-header { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.chat-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.path-label { display: block; margin-top: 5px; color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
.live-job-panel { margin: 14px 20px 0; padding: 15px; border: 1px solid rgba(124,140,255,.24); border-radius: 14px; background: rgba(124,140,255,.07); display: grid; gap: 12px; max-height: min(210px, 28vh); overflow: auto; min-height: 0; overscroll-behavior: contain; }
.live-job-panel.hidden { display: none; }
.live-job-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.live-job-header > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.live-job-header strong { overflow-wrap: anywhere; }
.live-response { padding: 12px; border-radius: 10px; background: rgba(0,0,0,.22); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.live-response.hidden { display: none; }
.activity-list { display: grid; gap: 8px; }
.activity-item { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 9px; align-items: start; padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,.035); }
.activity-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-3); }
.activity-copy strong, .activity-copy span { display: block; }
.activity-copy span { margin-top: 3px; color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.activity-time { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.job-usage { color: var(--muted); font-size: .72rem; }
.chat-messages { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 13px; min-height: 0; overscroll-behavior: contain; }
.message { max-width: min(780px, 88%); padding: 13px 15px; border-radius: 15px; background: var(--surface-3); line-height: 1.52; overflow-wrap: anywhere; white-space: pre-wrap; }
.message.user { align-self: flex-end; background: linear-gradient(145deg, rgba(124,140,255,.30), rgba(89,104,232,.18)); }
.message.assistant { align-self: flex-start; }
.message.system { align-self: center; max-width: 94%; color: var(--warning); background: rgba(245,190,91,.08); border: 1px solid rgba(245,190,91,.18); }
.message-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 7px; color: var(--muted); font-size: .72rem; }
.message-meta strong { color: var(--text); }
.message-usage { margin-top: 9px; color: var(--muted); font-size: .68rem; }
.chat-composer { border-top: 1px solid var(--line); padding: 14px; background: rgba(7,10,17,.35); }
.chat-composer textarea { min-height: 82px; }
.composer-footer { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.composer-footer .muted { margin-right: auto; }
.empty-state { min-height: 250px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); text-align: center; padding: 30px; }
.empty-state strong { color: var(--text); }

.section-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.channel-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.channel-card { padding: 20px; }
.channel-card-header { display: flex; justify-content: space-between; gap: 16px; }
.channel-card h3 { margin: 0; }
.channel-card p { margin: 7px 0 0; color: var(--muted); font-size: .82rem; }
.channel-card dl { margin: 18px 0; display: grid; gap: 8px; }
.channel-card dl div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.channel-card dt { color: var(--muted); }
.channel-card dd { margin: 0; overflow-wrap: anywhere; }
.card-actions { display: flex; justify-content: flex-end; gap: 8px; }

.modal { width: min(650px, calc(100% - 30px)); padding: 0; border: 1px solid var(--line); border-radius: 18px; color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.modal::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(5px); }
.modal-header { display: flex; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 20px; }
.form-grid label, .stack-form label { display: grid; gap: 7px; color: var(--muted); font-size: .82rem; }
.full-width { grid-column: 1 / -1; }
.toggle-row { display: flex !important; align-items: center; gap: 10px !important; }
.toggle-row input { width: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); }

.updates-grid { align-items: start; }
.warning-box { margin: 20px; padding: 15px; border-radius: 12px; border: 1px solid rgba(245,190,91,.25); background: rgba(245,190,91,.07); }
.warning-box p { margin: 6px 0 0; color: var(--muted); line-height: 1.5; }
.stack-form { padding: 0 20px 20px; display: grid; gap: 15px; }
.release-catalog-section { display: grid; gap: 12px; padding: 0 20px 20px; }
.subsection-heading h3 { margin: 0 0 5px; }
.subsection-heading p { margin: 0; line-height: 1.45; }
.release-catalog-list { display: grid; gap: 10px; }
.release-catalog-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
}
.release-catalog-card > div { min-width: 0; display: grid; gap: 6px; }
.release-catalog-card strong, .release-catalog-card span, .release-catalog-card small { overflow-wrap: anywhere; }
.release-catalog-card > div > span:not(.pill), .release-catalog-card small { color: var(--muted); }
.release-catalog-card.invalid { border-color: rgba(255,113,133,.25); }
.section-divider { display: flex; align-items: center; gap: 10px; margin: 0 20px 18px; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.section-divider::before, .section-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.update-status-card { padding: 22px; }
.update-status-card strong { display: block; font-size: 1.1rem; }
.update-status-card p { color: var(--muted); line-height: 1.5; }

.toast-container { position: fixed; right: 18px; bottom: 18px; z-index: 20; display: grid; gap: 10px; }
.toast { min-width: 260px; max-width: 420px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); box-shadow: var(--shadow); animation: toast-in .2s ease; }
.toast.error { border-color: rgba(255,107,122,.35); }
.toast.success { border-color: rgba(75,209,139,.35); }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } }

@media (max-width: 1000px) {
  .metrics-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .two-column-grid, .channel-card-grid { grid-template-columns: 1fr; }
  .chat-layout { grid-template-columns: 240px minmax(0,1fr); }
}

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; width: auto; height: auto; padding: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand-row { padding-bottom: 12px; }
  .nav-list { grid-template-columns: repeat(6, minmax(88px,1fr)); overflow-x: auto; }
  .nav-item { text-align: center; padding: 10px 8px; font-size: .78rem; }
  .sidebar-footer { display: none; }
  .release-catalog-card { align-items: stretch; flex-direction: column; }
  .main-content { padding-top: 18px; }
  .chat-layout { display: flex; flex-direction: column; height: auto; }
  .chat-list-panel { height: auto; max-height: 260px; }
  .chat-panel { height: 70vh; min-height: 520px; }
  .topbar { align-items: flex-start; }
  .chat-header { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
  .metrics-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .full-width { grid-column: auto; }
  .section-toolbar, .composer-footer { align-items: stretch; flex-direction: column; }
  .composer-footer .muted { margin-right: 0; }
  .message { max-width: 95%; }
}

.update-preview-list { display: grid; gap: 14px; padding: 0 20px 20px; }
.update-preview-card { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.update-preview-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.update-preview-header h3 { margin: 9px 0 4px; font-size: 1rem; overflow-wrap: anywhere; }
.update-preview-header p { margin: 0; color: var(--muted); }
.preview-details { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 16px; margin: 16px 0; }
.preview-details div { min-width: 0; }
.preview-details dt { color: var(--muted); font-size: .72rem; }
.preview-details dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.preview-details .full-detail { grid-column: 1 / -1; }
.preview-details code, .backup-path code, .backup-card code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; }
.preview-warnings { padding: 10px 12px; border-radius: 10px; background: rgba(245,190,91,.08); border: 1px solid rgba(245,190,91,.2); }
.preview-warnings p { margin: 0; color: var(--warning); font-size: .78rem; }
.preview-warnings p + p { margin-top: 6px; }
.preview-files { margin: 14px 0; }
.preview-files summary { cursor: pointer; color: var(--muted); }
.preview-files pre { max-height: 260px; overflow: auto; padding: 12px; border-radius: 10px; background: #080c14; color: var(--muted); font-size: .72rem; white-space: pre; }
.compact-empty { min-height: 130px; padding: 18px; }
.update-status-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.deployment-progress { height: 9px; overflow: hidden; margin: 18px 0; border-radius: 999px; background: rgba(255,255,255,.07); }
.deployment-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #66d7ff); transition: width .35s ease; }
.deployment-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.deployment-step { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .8rem; }
.deployment-step-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--line); }
.deployment-step.completed { color: var(--text); }
.deployment-step.completed .deployment-step-dot { background: var(--success); border-color: var(--success); }
.deployment-step.running { color: var(--warning); }
.deployment-step.running .deployment-step-dot { background: var(--warning); border-color: var(--warning); box-shadow: 0 0 0 4px rgba(245,190,91,.12); }
.deployment-step.failed { color: var(--danger); }
.deployment-step.failed .deployment-step-dot { background: var(--danger); border-color: var(--danger); }
.backup-path { display: grid; gap: 5px; }
.backup-path strong { font-size: .75rem; color: var(--text); }
.backup-path code { overflow-wrap: anywhere; }
.backup-panel { margin-top: 16px; }
.backup-panel .panel-header p { margin: 6px 0 0; }
.backup-list { display: grid; gap: 10px; padding: 0 20px 20px; }
.backup-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.backup-card > div { display: grid; gap: 4px; min-width: 0; }
.backup-card span { color: var(--muted); font-size: .76rem; }
.backup-card code { color: var(--muted); overflow-wrap: anywhere; }
.small-text { font-size: .72rem; }

@media (max-width: 620px) {
  .update-preview-header, .backup-card { flex-direction: column; align-items: stretch; }
  .preview-details { grid-template-columns: 1fr; }
  .preview-details .full-detail { grid-column: auto; }
}

/* Update 03: conversation archive, export, information, and management */
.conversation-modal { width: min(920px, calc(100% - 30px)); max-height: min(900px, calc(100vh - 30px)); }
.conversation-dialog-body { padding: 20px; overflow-y: auto; max-height: calc(100vh - 120px); display: grid; gap: 16px; }
.conversation-summary, .conversation-section { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.022); }
.conversation-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.conversation-metrics article { padding: 13px; border-radius: 11px; background: rgba(255,255,255,.035); min-width: 0; }
.conversation-metrics span { display: block; color: var(--muted); font-size: .72rem; }
.conversation-metrics strong { display: block; margin-top: 5px; font-size: 1.15rem; overflow-wrap: anywhere; }
.conversation-details { margin-top: 15px; }
.conversation-details div { grid-template-columns: 130px minmax(0,1fr); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.section-heading h3 { margin: 3px 0 0; }
.section-heading p { margin: 7px 0 0; }
.archive-create-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; margin-top: 15px; }
.maintenance-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.conversation-archive-list { display: grid; gap: 10px; margin-top: 14px; }
.conversation-archive-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.026); }
.conversation-archive-card > div:first-child { min-width: 0; display: grid; gap: 4px; }
.conversation-archive-card strong { overflow-wrap: anywhere; }
.conversation-archive-card span, .conversation-archive-card small { color: var(--muted); }
.conversation-archive-card span { font-size: .76rem; }
.conversation-archive-card small { font-size: .68rem; }
.archive-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.archive-actions .button { padding: 8px 10px; text-decoration: none; }

@media (max-width: 760px) {
  .conversation-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .archive-create-row { grid-template-columns: 1fr; }
  .conversation-archive-card { align-items: stretch; flex-direction: column; }
  .archive-actions { justify-content: flex-start; }
}

@media (max-width: 460px) {
  .conversation-metrics { grid-template-columns: 1fr; }
  .section-heading { flex-direction: column; }
}


/* Update 04: dashboard roles and per-channel permissions */
.access-layout { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); align-items: start; }
.access-description { margin: 7px 0 0; line-height: 1.45; }
.access-user-list { display: grid; gap: 10px; padding: 14px 18px 20px; }
.access-user-card { display: grid; grid-template-columns: minmax(220px, 1.3fr) minmax(240px, 1fr) auto; align-items: center; gap: 15px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.access-user-card.disabled { opacity: .62; }
.access-user-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.access-user-identity img { width: 42px; height: 42px; border-radius: 50%; background: var(--surface-3); }
.access-user-identity > div { min-width: 0; }
.access-user-identity strong, .access-user-identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-user-identity span { margin-top: 3px; color: var(--muted); font-size: .74rem; }
.access-user-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.role-badge { display: inline-flex; align-items: center; width: max-content; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.role-badge.owner { color: #f0b7ff; border-color: rgba(213,126,255,.35); background: rgba(213,126,255,.08); }
.role-badge.administrator { color: #9fb0ff; border-color: rgba(124,140,255,.38); background: rgba(124,140,255,.09); }
.role-badge.operator { color: var(--success); border-color: rgba(75,209,139,.32); background: rgba(75,209,139,.07); }
.role-badge.viewer { color: var(--muted); background: rgba(255,255,255,.035); }
.role-guide { display: grid; gap: 10px; padding: 18px 20px 8px; }
.role-guide article { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.022); }
.role-guide p { margin: 9px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.access-warning { margin-top: 12px; }
.access-modal { width: min(820px, calc(100% - 30px)); max-height: calc(100vh - 30px); overflow-y: auto; }
.input-action-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; }
.success-text { color: var(--success); }
.danger-text { color: var(--danger); }
.channel-permission-editor { padding: 0 20px 20px; }
.channel-permission-editor h3 { margin: 3px 0 0; }
.channel-permission-editor p { margin: 7px 0 0; line-height: 1.45; }
.access-channel-permissions { display: grid; gap: 8px; margin-top: 14px; max-height: 310px; overflow-y: auto; }
.channel-permission-row { display: grid; grid-template-columns: minmax(0,1fr) 190px; gap: 14px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.022); }
.channel-permission-row strong, .channel-permission-row small { display: block; }
.channel-permission-row small { margin-top: 3px; color: var(--muted); }

@media (max-width: 1050px) {
  .access-layout { grid-template-columns: 1fr; }
  .access-user-card { grid-template-columns: minmax(0,1fr) auto; }
  .access-user-meta { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 700px) {
  .access-user-card { grid-template-columns: 1fr; align-items: stretch; }
  .access-user-meta { grid-column: auto; grid-row: auto; }
  .access-user-card .card-actions { justify-content: flex-start; }
  .channel-permission-row { grid-template-columns: 1fr; }
  .input-action-row { grid-template-columns: 1fr; }
}

/* Update 05: DM history and verification controls */
.chat-list-group-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 12px 6px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.chat-list-group-label span {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  text-align: center;
  background: rgba(255,255,255,.05);
}
.channel-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-3);
}
.card-pill-stack { display: grid; justify-items: end; gap: 7px; }
.verification-panel {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.verification-panel.success {
  color: var(--success);
  border-color: rgba(75,209,139,.3);
  background: rgba(75,209,139,.07);
}
.verification-panel.danger {
  color: var(--danger);
  border-color: rgba(255,107,122,.3);
  background: rgba(255,107,122,.07);
}
.verification-panel.neutral { color: var(--muted); }

/* Update 06: health monitoring and expanded audit logs */
.health-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.health-value.success { color: #6ee7a8; }
.health-value.warning { color: #f6c85f; }
.health-value.danger { color: #ff8c8c; }
.health-issues { display: grid; gap: .75rem; margin-bottom: 1rem; }
.health-issue { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; padding: .9rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.025); }
.health-issue.warning { border-color: rgba(246, 200, 95, .42); }
.health-issue.critical { border-color: rgba(255, 100, 100, .48); }
.health-issue p { margin: .25rem 0 0; color: var(--muted); line-height: 1.45; }
.health-history { display: grid; gap: .45rem; }
.health-history-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) 110px repeat(3, minmax(100px, 1fr)); gap: .75rem; align-items: center; padding: .7rem .8rem; border-bottom: 1px solid var(--border); }
.health-history-row:last-child { border-bottom: 0; }
.audit-filters { display: grid; grid-template-columns: repeat(4, minmax(135px, 1fr)); width: min(100%, 1000px); }
.audit-filters button { min-height: 40px; }
.log-content { min-width: 0; }
.log-title-row { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.log-details { margin-top: .65rem; }
.log-details summary { cursor: pointer; color: var(--accent); }
.log-details pre { white-space: pre-wrap; overflow-wrap: anywhere; background: rgba(0,0,0,.25); padding: .75rem; border-radius: 10px; max-height: 320px; overflow: auto; }
.checkbox-row { display: flex !important; flex-direction: row !important; align-items: center; gap: .65rem; }
.checkbox-row input { width: auto; }
select[multiple] { min-height: 130px; }
.empty-state.compact { min-height: 120px; }

@media (max-width: 1150px) {
  .health-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audit-filters { grid-template-columns: repeat(2, minmax(135px, 1fr)); }
  .health-history-row { grid-template-columns: 1fr 100px 1fr; }
  .health-history-row span:nth-child(n+4) { display: none; }
}

@media (max-width: 700px) {
  .health-metrics, .audit-filters { grid-template-columns: 1fr; }
  .health-history-row { grid-template-columns: 1fr auto; }
  .health-history-row span:nth-child(n+3) { display: none; }
}

/* Update 07: workspace profiles and automatic DM workspaces */
.workspace-layout { align-items: start; }
.workspace-profile-grid { grid-template-columns: 1fr; }
.workspace-profile-card { box-shadow: none; }
.workspace-profile-card code,
.warning-box code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.workspace-modal textarea { resize: vertical; min-height: 70px; }

/* Update 09.5 — command-center redesign */
:root {
  --bg: #060914;
  --surface: #0d1322;
  --surface-2: #111a2d;
  --surface-3: #18243b;
  --surface-4: #223150;
  --line: rgba(170, 190, 230, 0.12);
  --line-strong: rgba(170, 190, 230, 0.24);
  --text: #f7f9ff;
  --muted: #94a3bc;
  --accent: #7b8cff;
  --accent-2: #5f6df2;
  --cyan: #4ad9e8;
  --success: #45d499;
  --warning: #ffc968;
  --danger: #ff7185;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

body {
  background:
    radial-gradient(circle at 85% -15%, rgba(75, 217, 232, 0.12), transparent 31rem),
    radial-gradient(circle at 13% 2%, rgba(123, 140, 255, 0.20), transparent 35rem),
    linear-gradient(180deg, #080d1a 0, var(--bg) 42rem);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

.app-shell { grid-template-columns: 286px minmax(0, 1fr); }
.sidebar {
  padding: 22px 15px;
  border-right-color: rgba(161, 182, 227, .13);
  background: linear-gradient(180deg, rgba(11, 17, 31, .96), rgba(7, 11, 21, .93));
  box-shadow: 20px 0 70px rgba(0,0,0,.18);
}
.brand-row { padding: 0 11px 28px; }
.brand-mark {
  background: linear-gradient(145deg, #82a3ff, #7868f7 56%, #4ad9e8);
  box-shadow: 0 16px 42px rgba(95, 109, 242, .34);
}
.brand-row strong { letter-spacing: -.02em; font-size: 1.03rem; }
.brand-row span { margin-top: 3px; }

.nav-list { gap: 5px; }
.nav-item {
  position: relative;
  min-height: 46px;
  padding: 0 13px 0 47px;
  border: 1px solid transparent;
  font-weight: 680;
  letter-spacing: -.01em;
}
.nav-item::before {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: #b7c4dd;
  font-size: .83rem;
  font-weight: 850;
}
.nav-item[data-view="overview"]::before { content: "⌂"; }
.nav-item[data-view="health"]::before { content: "♥"; }
.nav-item[data-view="nodes"]::before { content: "⌘"; }
.nav-item[data-view="chats"]::before { content: "✦"; }
.nav-item[data-view="channels"]::before { content: "#"; }
.nav-item[data-view="workspaces"]::before { content: "▣"; }
.nav-item[data-view="access"]::before { content: "◎"; }
.nav-item[data-view="logs"]::before { content: "≡"; }
.nav-item[data-view="updates"]::before { content: "⇧"; }
.nav-item:hover { border-color: rgba(170,190,230,.08); }
.nav-item.active {
  border-color: rgba(123,140,255,.22);
  background: linear-gradient(135deg, rgba(123,140,255,.21), rgba(74,217,232,.06));
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 12px 32px rgba(0,0,0,.14);
}
.nav-item.active::before { background: rgba(123,140,255,.22); color: #fff; }

.sidebar-footer { padding-top: 18px; border-top: 1px solid var(--line); }
.user-chip { border-radius: 14px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }

.main-content { padding: 25px clamp(18px, 3vw, 48px) 72px; }
.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  margin: -25px calc(clamp(18px, 3vw, 48px) * -1) 26px;
  padding: 20px clamp(18px, 3vw, 48px) 17px;
  border-bottom: 1px solid rgba(170,190,230,.10);
  background: linear-gradient(180deg, rgba(6,9,20,.94), rgba(6,9,20,.76));
  backdrop-filter: blur(18px);
}
.topbar h1 { letter-spacing: -.045em; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.topbar-context { color: var(--muted); font-size: .76rem; }

.metric-card, .panel {
  border-color: rgba(170,190,230,.13);
  background: linear-gradient(155deg, rgba(18,28,48,.88), rgba(9,15,28,.95));
  box-shadow: 0 18px 56px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.025);
}
.metric-card {
  position: relative;
  overflow: hidden;
  min-height: 138px;
  padding: 21px;
}
.metric-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -45px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123,140,255,.14), transparent 68%);
}
.metric-card strong { letter-spacing: -.045em; }
.panel-header { background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); }

.button, .icon-button, .file-button { border-radius: 12px; font-weight: 720; }
.button.primary { background: linear-gradient(135deg, #8296ff, #6574f3 62%, #4dcbdc); }
.button.ghost, .icon-button, .file-button { background: rgba(147,171,218,.045); }
.button.ghost:hover, .icon-button:hover, .file-button:hover { border-color: var(--line-strong); background: rgba(147,171,218,.09); }

.pill { font-weight: 720; background: rgba(8,13,25,.58); }
.pill.success { background: rgba(69,212,153,.07); }
.pill.warning { background: rgba(255,201,104,.07); }
.pill.danger { background: rgba(255,113,133,.07); }

.section-toolbar {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(17,26,45,.55);
  backdrop-filter: blur(10px);
}

.chat-layout { gap: 16px; }
.chat-sidebar, .chat-panel { min-height: calc(100vh - 160px); }
.chat-sidebar { background: rgba(9,15,28,.88); }
.chat-channel-list { padding: 8px; }
.chat-list-group-label { margin: 14px 10px 6px; letter-spacing: .08em; }
.chat-channel-button {
  border: 1px solid transparent;
  min-height: 58px;
  border-radius: 13px;
  padding: 9px 10px;
}
.chat-channel-button:hover { border-color: var(--line); background: rgba(255,255,255,.035); }
.chat-channel-button.active {
  border-color: rgba(123,140,255,.30);
  background: linear-gradient(135deg, rgba(123,140,255,.18), rgba(74,217,232,.055));
}
.chat-header { min-height: 83px; background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); }
.chat-messages { padding: 22px; }
.message-bubble { border: 1px solid rgba(170,190,230,.10); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.chat-composer {
  margin: 0 16px 16px;
  min-height: 0;
  border: 1px solid var(--line-strong);
  border-radius: 17px;
  background: rgba(12,19,34,.94);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.chat-composer textarea { min-height: 76px; }

.workspace-identity-panel {
  margin: 14px 18px 0;
  padding: 16px 17px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(230px,.7fr);
  gap: 16px;
  border: 1px solid rgba(74,217,232,.20);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(74,217,232,.07), rgba(123,140,255,.09));
  max-height: 142px;
  overflow: auto;
  min-height: 0;
  overscroll-behavior: contain;
}
.workspace-identity-copy { min-width: 0; }
.workspace-agent-badge {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(74,217,232,.11);
  color: #80e9f3;
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.workspace-identity-copy strong { display: block; font-size: .98rem; line-height: 1.4; }
.workspace-identity-copy p { margin: 7px 0 0; color: var(--muted); line-height: 1.5; font-size: .83rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.starter-prompt-list { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; gap: 7px; max-height: 104px; overflow-y: auto; min-width: 0; overscroll-behavior: contain; }
.starter-prompt {
  border: 1px solid rgba(170,190,230,.17);
  border-radius: 999px;
  padding: 7px 10px;
  color: #dbe5fa;
  background: rgba(7,12,24,.46);
  cursor: pointer;
  font-size: .73rem;
  transition: .16s ease;
}
.starter-prompt:hover { transform: translateY(-1px); border-color: rgba(123,140,255,.45); background: rgba(123,140,255,.11); }

.live-job-panel {
  border-color: rgba(123,140,255,.27);
  background: linear-gradient(135deg, rgba(123,140,255,.09), rgba(74,217,232,.035));
}
.activity-item { border: 1px solid rgba(170,190,230,.07); }

.workspace-purpose-summary {
  margin: 0 20px 14px;
  padding: 14px;
  border: 1px solid rgba(74,217,232,.16);
  border-radius: 13px;
  background: rgba(74,217,232,.045);
}
.workspace-purpose-summary span { display: block; color: #74dfe9; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.workspace-purpose-summary strong { display: block; margin-top: 6px; line-height: 1.45; }
.workspace-purpose-summary p { margin: 7px 0 0; color: var(--muted); line-height: 1.5; font-size: .82rem; }
.workspace-starter-preview { margin: 0 20px 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.workspace-starter-preview span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.025); font-size: .7rem; }

.form-grid label > span { font-weight: 690; }
input, select, textarea {
  border-color: rgba(170,190,230,.15);
  background: rgba(5,10,21,.58);
}
input:focus, select:focus, textarea:focus { border-color: rgba(123,140,255,.58); box-shadow: 0 0 0 3px rgba(123,140,255,.10); }
label small { color: var(--muted); line-height: 1.4; }
.modal { border-color: rgba(170,190,230,.18); background: linear-gradient(155deg, #121c30, #090f1d); box-shadow: 0 30px 100px rgba(0,0,0,.58); }
.modal::backdrop { background: rgba(2,5,12,.72); backdrop-filter: blur(7px); }

.verification-panel { border-radius: 14px; }
.channel-card dl, .workspace-profile-card dl { background: rgba(0,0,0,.06); }
.log-entry:hover { background: rgba(255,255,255,.018); }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 84px minmax(0, 1fr); }
  .sidebar { padding-inline: 10px; }
  .brand-row { justify-content: center; padding-inline: 0; }
  .brand-row > div:last-child, .nav-item span, .user-chip > div, .sidebar-footer .button { display: none; }
  .nav-item { padding: 0; }
  .nav-item::before { left: 50%; transform: translate(-50%,-50%); }
  .user-chip { justify-content: center; padding: 8px; border: 0; background: transparent; }
  .workspace-identity-panel { grid-template-columns: 1fr; }
  .starter-prompt-list { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar {
    position: fixed;
    z-index: 60;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 70px;
    padding: 7px 8px max(7px, env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--line);
    background: rgba(7,11,21,.95);
  }
  .brand-row, .sidebar-footer { display: none; }
  .nav-list { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px; overflow-x: auto; }
  .nav-item { min-width: 58px; min-height: 52px; }
  .nav-item::before { top: 17px; }
  .nav-item span { display: block; padding-top: 28px; font-size: .59rem; text-align: center; white-space: nowrap; }
  .main-content { padding: 15px 12px 96px; }
  .topbar { margin: -15px -12px 18px; padding: 15px 13px 13px; }
  .topbar-context { display: none; }
  .topbar h1 { font-size: 1.55rem; }
  .workspace-identity-panel { margin-inline: 10px; }
  .chat-composer { margin-inline: 9px; }
  .chat-messages { padding: 13px; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .metric-card { min-height: 112px; }
}

@media (max-width: 480px) {
  .metrics-grid { grid-template-columns: 1fr; }
  .topbar-actions .pill { padding-inline: 8px; font-size: .66rem; }
  .workspace-identity-panel { padding: 13px; }
  .starter-prompt { width: 100%; text-align: left; border-radius: 11px; }
}

/* Update 10: approvals, diffs, snapshots, and rollback */
.change-record-list {
  display: grid;
  gap: 12px;
}

.change-record-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(14, 27, 49, 0.72);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.change-record-card.pending {
  border-color: rgba(250, 204, 21, 0.38);
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.05);
}

.change-record-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.change-record-header > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.change-record-header strong {
  font-size: 1rem;
}

.change-record-header span:not(.pill),
.change-record-meta {
  color: var(--muted);
  font-size: 0.82rem;
}

.change-record-meta {
  display: flex;
  gap: 8px 16px;
  flex-wrap: wrap;
}

.change-review-modal {
  width: min(1080px, calc(100vw - 32px));
  max-height: min(900px, calc(100vh - 32px));
}

.change-review-body {
  padding: 0 22px 22px;
  display: grid;
  gap: 16px;
  overflow: auto;
}

.change-file-list {
  display: grid;
  gap: 7px;
}

.change-file-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  background: rgba(7, 14, 28, 0.65);
  border-radius: 10px;
  padding: 9px 11px;
}

.change-file-row code {
  overflow-wrap: anywhere;
  color: #dbeafe;
}

.change-diff {
  margin: 0;
  padding: 16px;
  min-height: 180px;
  max-height: 50vh;
  overflow: auto;
  white-space: pre;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #050b16;
  color: #d7e3f5;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  tab-size: 2;
}

@media (max-width: 720px) {
  .change-record-header {
    display: grid;
  }
  .change-file-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .change-file-row .pill:last-child {
    grid-column: 2;
    justify-self: start;
  }
}

/* Update 10.1 — visual polish and responsive control surfaces */
:root {
  --bg: #050a12;
  --surface: #0b1421;
  --surface-2: #101c2d;
  --surface-3: #17263b;
  --surface-4: #203653;
  --line: rgba(159, 188, 222, .14);
  --line-strong: rgba(159, 188, 222, .28);
  --border: var(--line);
  --text: #f5f9ff;
  --muted: #91a4bc;
  --accent: #77a7ff;
  --accent-2: #5e7cf4;
  --cyan: #43d6d0;
  --success: #4ed69a;
  --warning: #f6c968;
  --danger: #ff7185;
  --shadow: 0 28px 90px rgba(0, 0, 0, .42);
}

html { scrollbar-color: rgba(119, 167, 255, .38) rgba(5, 10, 18, .35); }
body {
  min-width: 320px;
  background:
    radial-gradient(circle at 82% -8%, rgba(67, 214, 208, .13), transparent 31rem),
    radial-gradient(circle at 8% 0, rgba(94, 124, 244, .22), transparent 38rem),
    linear-gradient(160deg, #07111f 0, var(--bg) 46rem);
}
body::before {
  opacity: .24;
  background-size: 40px 40px;
  background-image:
    linear-gradient(rgba(177, 207, 242, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(177, 207, 242, .022) 1px, transparent 1px);
}

::selection { color: white; background: rgba(94, 124, 244, .55); }
:focus-visible { outline: 2px solid #8fbcff; outline-offset: 3px; }
.button:focus-visible, .nav-item:focus-visible, .icon-button:focus-visible,
.file-button:focus-visible, .starter-prompt:focus-visible { outline-offset: 2px; }

.login-screen { position: relative; overflow: hidden; }
.login-screen::before, .login-screen::after {
  content: "";
  position: absolute;
  width: min(52vw, 680px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}
.login-screen::before { left: -18%; top: -35%; border: 1px solid rgba(119,167,255,.13); box-shadow: 0 0 100px rgba(94,124,244,.12); }
.login-screen::after { right: -22%; bottom: -45%; border: 1px solid rgba(67,214,208,.11); box-shadow: 0 0 100px rgba(67,214,208,.08); }
.login-card {
  position: relative;
  isolation: isolate;
  width: min(500px, 100%);
  padding: clamp(32px, 6vw, 52px);
  border-color: rgba(159,188,222,.2);
  border-radius: 30px;
  background: linear-gradient(155deg, rgba(17,30,49,.94), rgba(7,14,25,.95));
  box-shadow: 0 34px 110px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.055);
}
.login-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(119,167,255,.07), transparent 38%, rgba(67,214,208,.035));
}
.login-brand-stage { position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin: 0 auto 6px; }
.login-brand-stage .brand-mark { position: relative; z-index: 2; }
.brand-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(119,167,255,.24); }
.orbit-one { width: 92px; height: 92px; }
.orbit-two { width: 112px; height: 112px; border-color: rgba(67,214,208,.13); border-style: dashed; }
.login-lead { max-width: 390px; margin: 0 auto 20px; color: #b1c1d5; line-height: 1.65; }
.login-capabilities { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; }
.login-capabilities span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.025); font-size: .69rem; }

.brand-mark { background: linear-gradient(145deg, #8ab8ff, #667ef2 54%, #43d6d0); box-shadow: 0 18px 48px rgba(94,124,244,.35); }
.app-shell { grid-template-columns: 278px minmax(0, 1fr); }
.sidebar { border-right-color: rgba(159,188,222,.12); background: linear-gradient(180deg, rgba(9,18,31,.98), rgba(5,11,20,.96)); }
.brand-row { position: relative; }
.brand-row::after { content: "CONTROL PLANE"; position: absolute; left: 61px; bottom: 10px; color: rgba(145,164,188,.6); font-size: .55rem; font-weight: 800; letter-spacing: .16em; }
.nav-item::before { content: attr(data-icon) !important; }
.nav-item { color: #9dafc5; }
.nav-item:hover { color: #ecf5ff; border-color: rgba(119,167,255,.13); transform: translateX(2px); }
.nav-item.active { color: white; border-color: rgba(119,167,255,.28); background: linear-gradient(100deg, rgba(94,124,244,.23), rgba(67,214,208,.065)); }
.nav-item.active::after { content: ""; position: absolute; inset: 8px auto 8px -1px; width: 3px; border-radius: 5px; background: linear-gradient(#91baff, #43d6d0); box-shadow: 0 0 14px rgba(119,167,255,.7); }

.topbar { min-height: 91px; }
.topbar h1 { font-weight: 760; }
.topbar-context { padding-right: 12px; border-right: 1px solid var(--line); letter-spacing: .025em; }
.pill::before { box-shadow: 0 0 9px currentColor; }

.metric-card, .panel { border-color: var(--line); background: linear-gradient(150deg, rgba(16,29,48,.92), rgba(7,14,25,.96)); }
.metric-card { border-radius: 20px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.metric-card:hover { transform: translateY(-2px); border-color: rgba(119,167,255,.24); box-shadow: 0 22px 58px rgba(0,0,0,.27), inset 0 1px rgba(255,255,255,.04); }
.metric-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: linear-gradient(transparent, rgba(119,167,255,.78), transparent); opacity: .7; }
.metric-label { color: #a2b4c9; font-weight: 680; letter-spacing: .02em; }
.metric-card strong { position: relative; z-index: 1; }
.panel { border-radius: 20px; }
.panel-header { padding: 21px 23px; }
.panel-header h2 { font-size: 1.08rem; letter-spacing: -.02em; }

.button, .icon-button, .file-button { min-height: 43px; border-radius: 12px; }
.button.primary { background: linear-gradient(115deg, #799fff, #6579ef 58%, #42c7c8); box-shadow: 0 12px 30px rgba(82,104,224,.28), inset 0 1px rgba(255,255,255,.2); }
.button.primary:hover:not(:disabled) { box-shadow: 0 15px 36px rgba(82,104,224,.36), inset 0 1px rgba(255,255,255,.24); }
.button.danger-outline:hover:not(:disabled) { border-color: rgba(255,113,133,.58); background: rgba(255,113,133,.11); }

input, select, textarea { min-height: 44px; border-radius: 12px; background: rgba(3,9,17,.68); }
textarea { min-height: 84px; }
input:hover, select:hover, textarea:hover { border-color: rgba(159,188,222,.25); }
input:focus, select:focus, textarea:focus { border-color: rgba(119,167,255,.68); box-shadow: 0 0 0 3px rgba(119,167,255,.12), 0 10px 28px rgba(0,0,0,.16); }

.section-toolbar { border-radius: 17px; background: linear-gradient(105deg, rgba(16,29,48,.72), rgba(8,17,29,.7)); }
.channel-card { transition: transform .18s ease, border-color .18s ease; }
.channel-card:hover { transform: translateY(-2px); border-color: rgba(119,167,255,.22); }
.channel-card dl { padding: 12px; border: 1px solid rgba(159,188,222,.07); border-radius: 12px; }
.details-list div { border-color: rgba(159,188,222,.1); }
.log-entry { padding-inline: 4px; border-radius: 9px; }

.chat-layout { grid-template-columns: 310px minmax(0, 1fr); }
.chat-channel-button { position: relative; }
.chat-channel-button.active::after { content: ""; position: absolute; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.channel-icon { background: linear-gradient(145deg, rgba(119,167,255,.17), rgba(67,214,208,.08)); border: 1px solid rgba(119,167,255,.14); }
.chat-panel { background: linear-gradient(155deg, rgba(12,23,39,.96), rgba(5,12,22,.98)); }
.chat-messages { background: radial-gradient(circle at 50% 10%, rgba(119,167,255,.035), transparent 50%); }
.message { border: 1px solid rgba(159,188,222,.1); box-shadow: 0 9px 26px rgba(0,0,0,.14); }
.message.user { border-color: rgba(119,167,255,.22); background: linear-gradient(145deg, rgba(94,124,244,.34), rgba(51,94,151,.22)); }
.message.assistant { background: linear-gradient(145deg, rgba(25,42,65,.92), rgba(16,29,47,.92)); }
.chat-composer { border-color: rgba(119,167,255,.25); background: linear-gradient(145deg, rgba(13,24,41,.98), rgba(7,15,27,.98)); }
.chat-composer:focus-within { border-color: rgba(119,167,255,.52); box-shadow: 0 22px 50px rgba(0,0,0,.3), 0 0 0 3px rgba(119,167,255,.07); }

.modal { border-radius: 22px; }
.modal-header { align-items: center; }
.toast { border-color: rgba(159,188,222,.2); background: rgba(14,26,43,.96); backdrop-filter: blur(16px); }
.change-record-card { border-color: var(--line); background: linear-gradient(145deg, rgba(16,30,50,.83), rgba(8,17,30,.91)); }
.change-file-row { border-color: var(--line); }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 82px minmax(0, 1fr); }
  .brand-row::after { display: none; }
  .nav-item:hover { transform: none; }
}

@media (max-width: 760px) {
  .sidebar { height: calc(68px + env(safe-area-inset-bottom)); }
  .nav-list { grid-template-columns: repeat(10, minmax(62px, 1fr)); }
  .nav-item { min-width: 62px; }
  .main-content { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .topbar { min-height: 78px; }
  .metrics-grid { gap: 10px; }
  .metric-card { border-radius: 16px; }
  .panel { border-radius: 17px; }
  .chat-panel { min-height: 580px; height: calc(100dvh - 190px); }
  .chat-actions { width: 100%; }
  .chat-actions .button { flex: 1 1 auto; }
  .modal { max-height: calc(100dvh - 20px); }
}

@media (max-width: 520px) {
  .login-card { padding: 30px 22px; border-radius: 24px; }
  .login-brand-stage { transform: scale(.88); margin-bottom: -2px; }
  .metrics-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 104px; }
  .topbar-actions { align-items: flex-end; }
  .section-toolbar { padding: 12px; }
  .details-list div, .channel-card dl div { grid-template-columns: 1fr; gap: 4px; }
  .channel-card-header, .update-preview-header { display: grid; }
  .card-actions { justify-content: stretch; flex-wrap: wrap; }
  .card-actions .button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}