:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e8eef8;
  background: #0a101b;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left, #172846 0, #0a101b 42rem); }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid #27354a; background: rgba(10, 16, 27, .86); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(12px); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.35rem, 4vw, 2rem); }
h2 { margin-bottom: .3rem; }
.eyebrow { margin: 0 0 .25rem; color: #6ee7c7; font-size: .68rem; font-weight: 750; letter-spacing: .16em; }
main { width: min(1180px, calc(100% - 2rem)); margin: 1.5rem auto 4rem; }
.hidden { display: none !important; }
.card { background: rgba(18, 28, 44, .96); border: 1px solid #2b3d56; border-radius: 16px; padding: 1.2rem; box-shadow: 0 14px 38px rgba(0,0,0,.2); }
#bootstrap, #login { max-width: 520px; margin: 8vh auto; }
#invitation { max-width: 520px; margin: 8vh auto; }
label { display: grid; gap: .4rem; color: #b8c4d7; font-size: .88rem; }
input, select, textarea { width: 100%; color: #f4f7fb; background: #0c1422; border: 1px solid #344864; border-radius: 9px; padding: .78rem; font: inherit; }
textarea { resize: vertical; }
button { border: 0; border-radius: 9px; padding: .76rem 1rem; color: #07130f; background: #6ee7c7; font: inherit; font-weight: 750; cursor: pointer; }
button:hover { filter: brightness(1.08); }
button:disabled { cursor: not-allowed; opacity: .55; }
button.secondary, button.quiet { color: #dbe7f6; background: #26364d; }
button.danger { color: #fff; background: #b9485b; }
form { display: grid; gap: 1rem; }
.tabs { display: flex; gap: .5rem; margin-bottom: 1.25rem; overflow-x: auto; }
.tabs .tab { background: #1c2a3e; color: #c4d1e3; }
.tabs .active { background: #6ee7c7; color: #07130f; }
.tabs .quiet { margin-left: auto; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0; }
.toolbar p { color: #91a1b7; margin-bottom: 0; }
.session-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.session-card { text-align: left; color: inherit; background: #121c2c; border: 1px solid #2b3d56; padding: 1rem; }
.session-card strong, .session-card span { display: block; }
.session-card span { color: #91a1b7; margin-top: .35rem; font-weight: 450; }
.state { display: inline-flex !important; width: fit-content; border-radius: 999px; padding: .2rem .55rem; background: #26364d; color: #bfe9de !important; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.form-grid .wide { grid-column: 1 / -1; }
.actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.meta { display: flex; flex-wrap: wrap; gap: .6rem; color: #9cacbf; margin-bottom: .8rem; }
.meta span { background: #172438; border-radius: 999px; padding: .3rem .7rem; }
.terminal-status { min-height: 1.2rem; margin: 0 0 .45rem; color: #91a1b7; font-size: .8rem; }
.terminal-controls { display: grid; gap: .55rem; margin: 0 0 .65rem; padding: .65rem; border: 1px solid #344864; border-radius: 10px; background: #101a29; }
.terminal-controls.keyboard-active { border-color: #4fbfa5; box-shadow: 0 0 0 1px #4fbfa544; }
.keyboard-status { margin: 0; color: #aebdd0; font-size: .8rem; }
.sharing { margin-top: 1rem; }
.session-agents { margin: 0 0 1rem; }
.session-agents .toolbar { margin-top: 0; }
.agent-row { display: grid; gap: .2rem; padding: .7rem; border: 1px solid #344864; border-radius: 9px; background: #101a29; overflow-wrap: anywhere; }
.agent-row small { color: #aebdd0; }
.session-files { margin-top: 1rem; }
#file-preview-panel { margin-top: 1rem; }
#file-preview-panel .toolbar { margin-top: 0; }
#file-preview-text { max-height: 24rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: .35rem 0 1rem; padding: .8rem; color: #dce7d9; background: #05080d; border: 1px solid #344864; border-radius: 9px; font: .82rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.session-changes { margin-top: 1rem; }
.session-changes .toolbar { margin-top: 0; }
.session-changes pre { max-height: 24rem; overflow: auto; margin: .35rem 0 1rem; padding: .8rem; color: #dce7d9; background: #05080d; border: 1px solid #344864; border-radius: 9px; font: .82rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 4; }
.project-files-list { display: grid; gap: .45rem; margin: .6rem 0; }
.project-file-button { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; text-align: left; color: #dbe7f6; background: #172438; overflow-wrap: anywhere; }
.project-file-button small { color: #aebdd0; }
.session-jobs { margin-top: 1rem; }
.session-jobs .toolbar { margin-top: 0; }
.job-row { display: grid; gap: .6rem; min-width: 0; padding: .8rem; border: 1px solid #344864; border-radius: 9px; background: #101a29; }
.job-auto-retry { display: flex; align-items: center; gap: .7rem; }
.job-auto-retry input { width: auto; min-width: 1.1rem; min-height: 1.1rem; }
.job-row strong, .job-row small, .job-run span { overflow-wrap: anywhere; }
.job-row small { color: #aebdd0; }
.job-runs { display: grid; gap: .35rem; color: #aebdd0; font-size: .84rem; }
.job-run { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .4rem .55rem; border-radius: 7px; background: #172438; }
.job-run button { flex: 0 0 auto; padding: .42rem .65rem; }
.job-run { flex-wrap: wrap; }
#job-approval-dialog, #job-schedule-dialog { width: min(92vw, 780px); max-height: 85vh; overflow: auto; color: inherit; background: #101a29; border: 1px solid #536987; border-radius: 12px; }
#job-approval-dialog::backdrop, #job-schedule-dialog::backdrop { background: #000b; }
#job-approval-question { max-height: 48vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
#job-snapshot-dialog { width: min(96vw, 980px); max-height: 90vh; overflow: auto; color: inherit; background: #101a29; border: 1px solid #536987; border-radius: 12px; }
#job-snapshot-dialog::backdrop { background: #000b; }
#job-snapshot-summary { overflow-wrap: anywhere; }
#job-snapshot-dialog pre { max-height: 35vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: .7rem; color: #dce7d9; background: #05080d; border: 1px solid #344864; border-radius: 9px; font: .82rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
#job-snapshot-untracked { max-height: 38vh; overflow: auto; }
.snapshot-untracked-item { border: 1px solid #344864; border-radius: 9px; padding: .6rem; margin: .5rem 0; overflow-wrap: anywhere; }
.snapshot-untracked-item small { display: block; margin: .25rem 0; }
.snapshot-untracked-item pre { max-height: 18vh; }
.job-secret { display: grid; gap: .55rem; margin-top: 1rem; padding: 1rem; border: 1px solid #e6ad54; border-radius: 9px; background: #322a1c; }
.job-secret p { margin: 0; }
.session-files .toolbar { margin-top: 0; }
#more-files { margin-top: .7rem; }
.file-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; margin-top: .7rem; }
.file-controls .wide { grid-column: 1 / -1; }
.section-heading { margin-top: 1.35rem; padding-top: 1.1rem; border-top: 1px solid #344864; }
.section-heading h4 { margin: 0 0 .25rem; }
.section-heading p { margin: 0; color: #aebdd0; }
.workspace-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: .75rem 0 .25rem; }
.workspace-breadcrumbs button { padding: .42rem .58rem; color: #9ee8dc; background: transparent; border-color: transparent; }
.workspace-breadcrumbs button:hover { background: #1b3048; }
.workspace-breadcrumbs span { color: #71839a; }
.workspace-breadcrumbs .workspace-breadcrumb-current { padding: .42rem .58rem; color: #9ee8dc; background: #14263a; border: 1px solid #31506f; border-radius: .7rem; font-weight: 750; }
.workspace-browser-list { display: grid; gap: .45rem; margin-top: .65rem; }
.workspace-browser-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .65rem .75rem; border: 1px solid #344864; border-radius: 10px; background: #101a29; }
.workspace-browser-name { min-width: 0; display: flex; align-items: center; gap: .55rem; color: #e7eef8; overflow-wrap: anywhere; }
.workspace-browser-name button { min-width: 0; padding: 0; color: #9ee8dc; text-align: left; background: transparent; border: 0; overflow-wrap: anywhere; }
.workspace-browser-name small { display: block; color: #91a1b7; }
.workspace-browser-kind { flex: 0 0 auto; width: 1.3rem; color: #8fc7ff; text-align: center; }
#workspace-browser-more { margin-top: .7rem; }
.file-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .7rem; border: 1px solid #344864; border-radius: 9px; }
.file-row small { display: block; color: #aebdd0; overflow-wrap: anywhere; }
.file-row a { color: #7dd3fc; }
.rename-session, .recovery { margin: 1rem 0; }
.access-list { display: grid; gap: .65rem; margin-top: 1rem; }
.access-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem; border: 1px solid #344864; border-radius: 9px; background: #101a29; }
.access-row p { margin: 0; color: #aebdd0; }
.access-row strong { display: block; color: #f2f6fb; }
.image-audit-card { margin-top: 1rem; }
.image-audit-row { flex-wrap: wrap; overflow-wrap: anywhere; }
.image-audit-row[data-status="clean"] { border-color: #51b99d; }
.image-audit-row[data-status="critical"] { border-color: #e06f7d; }
.image-audit-row[data-status="pending"], .image-audit-row[data-status="error"],
.image-audit-row[data-status="drift"], .image-audit-row[data-status="overdue"] { border-color: #e6ad54; }
.import-attestation { display: flex; align-items: center; gap: .65rem; }
.import-attestation input { width: auto; flex: 0 0 auto; }
#import-list .access-row { flex-wrap: wrap; overflow-wrap: anywhere; }
#invitation-result { margin-top: 1rem; }
#invitation-url { margin-bottom: .7rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#terminal-output { height: min(62vh, 720px); min-height: 320px; overflow: hidden; margin: 0; padding: .65rem; color: #dce7d9; background: #05080d; border: 1px solid #4b6587; border-radius: 12px; font-variant-ligatures: none; }
#terminal-output .xterm { height: 100%; }
#terminal-output .xterm-viewport { scrollbar-color: #415a79 #05080d; }
.composer { grid-template-columns: 1fr auto; align-items: end; margin-top: .8rem; }
.connection { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; color: #aab8ca; background: transparent; border: 1px solid transparent; font-size: .85rem; font-weight: 500; }
.connection:hover, .connection:focus-visible { border-color: #344864; background: #172438; }
#connection-dot { width: .65rem; height: .65rem; flex: 0 0 .65rem; border-radius: 50%; background: #8392a7; }
.connection[data-state="ready"] #connection-dot { background: #5ee69c; }
.connection[data-state="warning"] #connection-dot { background: #e6ad54; }
.connection[data-state="error"] #connection-dot { background: #ed6a5a; }
.tls-warning { margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid #e6ad54; border-radius: 9px; color: #ffe4ad; background: #30291c; overflow-wrap: anywhere; }
.notice { position: fixed; right: 1rem; bottom: 1rem; max-width: min(420px, calc(100% - 2rem)); padding: .85rem 1rem; background: #8f3447; border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.3); }
.docs-layout { display: grid; grid-template-columns: minmax(210px, 280px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.docs-list { display: grid; gap: .4rem; position: sticky; top: 6.5rem; max-height: calc(100vh - 8rem); overflow-y: auto; }
.docs-list button { text-align: left; color: #c8d5e7; background: #121c2c; border: 1px solid #2b3d56; }
.docs-list button.active { color: #07130f; background: #6ee7c7; }
.docs-content { min-width: 0; line-height: 1.7; font-weight: 400; }
.docs-content > :is(p, ul, ol, blockquote) { max-width: 76ch; }
.docs-content p, .docs-content li { color: #cbd8e8; font-weight: 400; }
.docs-content li { margin-bottom: .35rem; }
.docs-content h1, .docs-content h2, .docs-content h3 { scroll-margin-top: 7rem; line-height: 1.25; }
.docs-content h2 { margin-top: 2.2rem; }
.docs-content a { color: #7dd3fc; }
.docs-content pre { overflow-x: auto; padding: 1rem; border-radius: 10px; background: #080d16; }
.docs-content code { color: #cae8df; }
.docs-content :not(pre) > code { padding: .12rem .32rem; border-radius: 5px; background: #18283c; }
.docs-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.docs-content th, .docs-content td { padding: .55rem .7rem; border: 1px solid #344864; text-align: left; }
.docs-content blockquote { margin-left: 0; padding: .65rem 1rem; color: #bdc9d9; border-left: 4px solid #6ee7c7; background: #111d2d; }
.openapi-document-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .65rem; margin-top: 1.25rem; }
.openapi-document-index button { min-height: 3.4rem; text-align: left; color: #c8d5e7; background: #111d2d; border-color: #344864; }
.openapi-document-index button:hover { color: #08151b; background: #6ee7c7; }
.rendered-diagram { display: grid; gap: .55rem; margin: 1.3rem 0; padding: 1rem; overflow-x: auto; border: 1px solid #344864; border-radius: 12px; background: #0b1320; }
.rendered-diagram figcaption { color: #6ee7c7; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.diagram-svg { width: max-content; min-width: 100%; }
.diagram-svg svg { display: block; max-width: none !important; height: auto; }

/* Workspace visual system */
:root {
  --surface: #121a2b;
  --surface-raised: #192438;
  --line: #30415c;
  --muted: #a9b7ca;
  --mint: #71e8ca;
  --violet: #a995ff;
  color: #edf4ff;
  background: #090e19;
  color-scheme: dark;
}
body {
  background:
    radial-gradient(ellipse at 14% -10%, #273a64 0, transparent 40%),
    radial-gradient(ellipse at 88% 10%, #20383c 0, transparent 30%),
    linear-gradient(180deg, #0b1120, #090e19 56%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(#c8d4ff05 1px, transparent 1px), linear-gradient(90deg, #c8d4ff05 1px, transparent 1px);
  background-size: 42px 42px;
}
header.app-header {
  min-height: 84px;
  padding: .95rem clamp(1rem, 3vw, 3.25rem);
  border-bottom: 1px solid #50648045;
  background: #0b1220df;
}
.brand { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.brand-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 14px;
  box-shadow: 0 10px 28px #45d9ef35;
}
.brand h1 { font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.1; letter-spacing: -.04em; }
.brand h1 span { color: var(--mint); }
.brand .eyebrow { margin-bottom: .28rem; color: #a7b7d4; font-size: .58rem; letter-spacing: .2em; }
main { width: min(1480px, calc(100% - clamp(1rem, 4vw, 5rem))); margin: 1.6rem auto 4rem; }
h2 { letter-spacing: -.035em; }
h3 { letter-spacing: -.02em; }
p { line-height: 1.5; }
.eyebrow { color: #87dfd0; }
button { min-height: 42px; transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
button:hover:not(:disabled) { filter: none; transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(0); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, #terminal-output:focus-visible {
  outline: 2px solid #9bdcff;
  outline-offset: 3px;
}
input, select, textarea {
  min-height: 43px;
  border: 1px solid #3d506c;
  background: #0d1625;
  border-radius: 11px;
}
input::placeholder, textarea::placeholder { color: #788da7; }
button.secondary, button.quiet { background: #24354a; color: #e6efff; }
button.danger { background: #a94359; }
.card {
  background: linear-gradient(155deg, #182437ef, #111b2bed);
  border-color: #354861;
  border-radius: 20px;
  box-shadow: 0 18px 48px #02070f25;
}
.tabs {
  position: sticky;
  top: 90px;
  z-index: 4;
  align-items: center;
  gap: .25rem;
  padding: .4rem;
  border: 1px solid #32445c;
  border-radius: 16px;
  background: #131f31ee;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px #03091430;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar, .session-tabs::-webkit-scrollbar { display: none; }
.tabs .tab {
  flex: 0 0 auto;
  min-height: 42px;
  padding: .62rem .95rem;
  color: #aebfd4;
  background: transparent;
  border-radius: 11px;
  white-space: nowrap;
}
.tabs .tab:hover { background: #263850; color: #fff; }
.tabs .active, .tabs .active:hover { color: #08151b; background: var(--mint); box-shadow: 0 5px 14px #52d8bd30; }
.tabs .quiet { flex: 0 0 auto; min-height: 42px; background: transparent; white-space: nowrap; }
.tabs .quiet:hover { background: #263850; }
.connection {
  padding: .55rem .8rem;
  background: #172637;
  border: 1px solid #38516a;
  border-radius: 999px;
  white-space: nowrap;
}
.connection[data-state="ready"] { color: #b7f1dc; border-color: #3b8b70; background: #17392f; }
.connection[data-state="warning"] { color: #ffe3ad; border-color: #9d763d; background: #3a2e1e; }
.connection[data-state="error"] { color: #ffc5c5; border-color: #9e4d56; background: #3c222c; }
.header-status { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; min-width: 0; }
.provider-health { display: flex; align-items: center; gap: .4rem; }
.provider-health-chip { display: flex; align-items: center; gap: .35rem; min-height: 38px; padding: .45rem .65rem; color: #c4d0df; background: #152234; border: 1px solid #40516a; border-radius: 999px; font-size: .74rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.provider-health-chip:hover, .provider-health-chip:focus-visible { color: #fff; border-color: #7188a5; background: #203149; }
.provider-health-dot { width: .55rem; height: .55rem; flex: 0 0 .55rem; border-radius: 50%; background: #8794a8; }
.provider-health-state { color: #91a2b7; font-size: .68rem; font-weight: 600; }
.provider-health-chip[data-state="operational"] { color: #b7f1dc; border-color: #3b8b70; background: #17392f; }
.provider-health-chip[data-state="operational"] .provider-health-dot { background: #5ee69c; }
.provider-health-chip[data-state="operational"] .provider-health-state { color: #93d9bf; }
.provider-health-chip[data-state="degraded"], .provider-health-chip[data-state="maintenance"] { color: #ffe3ad; border-color: #9d763d; background: #3a2e1e; }
.provider-health-chip[data-state="degraded"] .provider-health-dot, .provider-health-chip[data-state="maintenance"] .provider-health-dot { background: #e6ad54; }
.provider-health-chip[data-state="degraded"] .provider-health-state, .provider-health-chip[data-state="maintenance"] .provider-health-state { color: #e8c98e; }
.provider-health-chip[data-state="outage"] { color: #ffc5c5; border-color: #9e4d56; background: #3c222c; }
.provider-health-chip[data-state="outage"] .provider-health-dot { background: #ed6a5a; }
.provider-health-chip[data-state="outage"] .provider-health-state { color: #efa6ab; }
.welcome-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  margin: 1.35rem 0 1.8rem;
  border: 1px solid #47617a;
  border-radius: 24px;
  background: linear-gradient(115deg, #1c3150 0%, #182c42 52%, #15372f 100%);
  box-shadow: inset 0 1px #ffffff18, 0 22px 45px #03080f36;
}
.welcome-panel h2 { max-width: 680px; margin: .25rem 0 .55rem; font-size: clamp(1.6rem, 3vw, 2.65rem); line-height: 1.12; }
.welcome-panel p:not(.eyebrow) { max-width: 640px; margin: 0; color: #b9cadd; }
.workspace-stats { display: flex; align-items: stretch; gap: .55rem; flex: 0 0 auto; }
.workspace-stats > div { min-width: 112px; padding: .85rem 1.1rem; border: 1px solid #bddbdf2b; border-radius: 16px; background: #08162250; }
.workspace-stats strong { display: block; color: #fff; font-size: 1.55rem; line-height: 1.1; }
.workspace-stats span { display: block; margin-top: .35rem; color: #b3c5d4; font-size: .78rem; }
.session-list-heading { margin: 0 0 .9rem; }
.session-list-heading h2 { margin: 0; font-size: 1.55rem; }
.session-list-heading .eyebrow { margin-bottom: .2rem; }
.session-filters { display: flex; align-items: end; flex-wrap: wrap; gap: .7rem; margin: 0 0 1.1rem; }
.session-search { flex: 1 1 310px; max-width: 440px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.session-search input { margin-top: .1rem; text-transform: none; letter-spacing: normal; font-size: .9rem; font-weight: 450; }
.filter-group { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.filter-chip, .refresh-button { min-height: 43px; padding: .62rem .8rem; border: 1px solid #354b65; color: #bdcce0; background: #1a293c; font-size: .84rem; }
.filter-chip.active { color: #0b151e; border-color: var(--mint); background: var(--mint); }
.session-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.session-card {
  display: grid;
  gap: .35rem;
  min-height: 188px;
  padding: 1rem 1.1rem;
  border: 1px solid #39516b;
  border-radius: 18px;
  background: linear-gradient(145deg, #1b2a3e, #131e2e);
  box-shadow: 0 10px 25px #02081222;
}
.session-card:hover, .session-card.selected { border-color: #78d9c5; background: linear-gradient(145deg, #223b49, #17283a); box-shadow: 0 16px 32px #02081240; }
.session-card strong { font-size: 1.12rem; line-height: 1.3; }
.session-card .session-selector { margin-top: 0; color: #a4b6cd; font: .8rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.session-card-top, .session-card-foot { display: flex !important; align-items: center; justify-content: space-between; gap: .6rem; margin: 0 !important; }
.session-card-foot { align-self: end; padding-top: .65rem; border-top: 1px solid #46576c88; font-size: .78rem; }
.session-card-foot span:last-child { color: var(--mint); }
.provider-mark { display: grid !important; place-items: center; width: 34px; height: 34px; margin: 0 !important; border-radius: 10px; color: #fff !important; background: #615091; font-size: 1rem; font-weight: 800 !important; }
.session-card[data-provider="codex"] .provider-mark { background: #2b746b; }
.session-card .state { margin: 0; color: #cdd9e9 !important; border: 1px solid #56667d; background: #28394c; }
.session-card[data-state="running"] .state { color: #a5f4d4 !important; border-color: #32755d; background: #173e35; }
.session-card[data-state="recovery_required"] .state { color: #ffe2a1 !important; border-color: #94723d; background: #3b301d; }
.session-empty { grid-column: 1 / -1; padding: 2rem; border: 1px dashed #526782; border-radius: 18px; text-align: center; color: var(--muted); background: #14223799; }
.session-empty strong { display: block; margin-bottom: .45rem; color: #eef6ff; font-size: 1.1rem; }
.session-empty p { margin: 0; }
#new-session-form { margin: 1rem 0; }
#sessions-view.workspace-open .welcome-panel,
#sessions-view.workspace-open .session-list-heading,
#sessions-view.workspace-open .session-filters,
#sessions-view.workspace-open .session-grid,
#sessions-view.workspace-open #new-session-form { display: none !important; }
#session-detail { margin-top: 2rem; scroll-margin-top: 10rem; }
#sessions-view.workspace-open #session-detail { margin-top: 1.2rem; }
.back-link { min-height: 34px; padding: .3rem 0; color: #9de5d3; background: transparent; }
.back-link:hover { color: #fff; }
.workspace-heading { margin: .5rem 0 .7rem; }
.workspace-heading h2 { margin: .2rem 0; font-size: clamp(1.55rem, 2.6vw, 2.25rem); overflow-wrap: anywhere; }
.workspace-heading .eyebrow { overflow-wrap: anywhere; }
.workspace-heading .actions { justify-content: flex-end; }
.meta { gap: .45rem; margin: .4rem 0 1rem; }
.meta span { border: 1px solid #3e5268; background: #1b2c3d; color: #d6e4f3; font-size: .78rem; }
.session-tabs {
  display: flex;
  gap: .25rem;
  margin: 0 0 1rem;
  padding: .35rem;
  overflow-x: auto;
  border: 1px solid #344a60;
  border-radius: 14px;
  background: #172536;
  scrollbar-width: none;
}
.session-tab { flex: 1 0 auto; min-height: 44px; padding: .7rem .95rem; border-radius: 10px; color: #aebfd4; background: transparent; white-space: nowrap; }
.session-tab.active, .session-tab.active:hover { color: #08151b; background: var(--mint); }
.session-tab:hover { background: #293c51; color: #fff; }
.panel-stack { display: grid; gap: 1rem; }
.panel-stack .session-agents { margin: 0; }
.console-panel { min-width: 0; padding: 1rem; border: 1px solid #3d526b; border-radius: 20px; background: #121b2b; box-shadow: 0 18px 40px #0208122e; }
.panel-intro { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: .1rem .25rem .8rem; }
.panel-intro h3 { margin: 0; font-size: 1.2rem; }
.panel-intro .eyebrow { margin-bottom: .18rem; }
.panel-intro > p { max-width: 420px; margin: 0; color: var(--muted); font-size: .8rem; text-align: right; }
#terminal-output { height: min(66vh, 760px); min-height: 340px; border-color: #49637d; border-radius: 13px; box-shadow: inset 0 0 0 1px #0006; }
#session-detail:not([data-state="running"]) #terminal-output { height: min(40vh, 400px); min-height: 240px; }
.terminal-status { margin-left: .25rem; }
.terminal-controls { border-color: #3c526d; background: #1a2a3d; }
.terminal-control-heading { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1rem; }
#keyboard-control.keyboard-toggle { flex: 0 0 11rem; width: 11rem; min-height: 44px; color: #2b220b; background: #f5d990; box-shadow: 0 3px 12px #f5d99024; }
#keyboard-control.keyboard-toggle:hover:not(:disabled) { background: #ffe5a5; }
#keyboard-control.keyboard-toggle[aria-pressed="true"] { color: #fff; background: #c94f64; box-shadow: 0 3px 12px #c94f642e; }
#keyboard-control.keyboard-toggle[aria-pressed="true"]:hover:not(:disabled) { background: #db5a70; }
.terminal-keyboard { display: grid; grid-template-columns: max-content max-content max-content; justify-content: start; align-items: end; gap: .75rem 1rem; padding-top: .35rem; border-top: 1px solid #3c526d; }
.terminal-key-group { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.terminal-keyboard button { min-width: 44px; min-height: 44px; padding: .55rem .7rem; }
.action-keys { justify-self: start; }
.arrow-pad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: .32rem; }
.arrow-pad button { min-width: 44px; width: 44px; padding: .35rem; font-size: 1.15rem; }
.arrow-up { grid-column: 2; grid-row: 1; }
.arrow-left { grid-column: 1; grid-row: 2; }
.arrow-down { grid-column: 2; grid-row: 2; }
.arrow-right { grid-column: 3; grid-row: 2; }
.composer { margin-top: .75rem; }
.composer textarea { min-height: 70px; }
.composer button { min-width: 100px; }
.session-files, .session-changes, .session-jobs, .sharing { margin-top: 0; }
.session-files .toolbar, .session-changes .toolbar, .session-jobs .toolbar { margin-top: 0; }
.access-row, .agent-row, .job-row, .file-row { border-color: #3b5069; background: #142235; border-radius: 12px; }
.docs-list button { border-color: #39516b; border-radius: 10px; background: #172538; }
.docs-list button.active { color: #08151b; background: var(--mint); }
.docs-content { background: #152134; }
.notice { z-index: 20; background: #a64558; }

@media (max-width: 640px) {
  header { position: static; }
  main { width: min(100% - 1rem, 1180px); margin-top: .75rem; }
  .toolbar { align-items: flex-start; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .composer { grid-template-columns: 1fr; }
  .file-controls { grid-template-columns: 1fr; }
  .file-controls .wide { grid-column: auto; }
  .workspace-browser-row { grid-template-columns: 1fr; }
  .workspace-browser-row .actions { padding-left: 1.85rem; }
  .job-run { align-items: flex-start; flex-direction: column; }
  #terminal-output { height: 56vh; min-height: 280px; padding: .35rem; }
  .docs-layout { grid-template-columns: 1fr; }
  .docs-list { position: static; display: flex; max-height: none; overflow-x: auto; }
  .docs-list button { min-width: 180px; }
}

@media (max-width: 980px) {
  .tabs { top: 0; }
  .workspace-heading { align-items: flex-start; flex-wrap: wrap; }
  .workspace-heading .actions { justify-content: flex-start; }
  .welcome-panel { align-items: flex-start; }
}

@media (max-width: 640px) {
  header.app-header { min-height: 68px; padding: .8rem .9rem; flex-wrap: wrap; }
  .header-status { width: 100%; justify-content: space-between; gap: .35rem; }
  .provider-health { gap: .3rem; }
  .provider-health-chip { min-height: 36px; padding: .4rem .55rem; }
  .provider-health-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .brand { gap: .55rem; }
  .brand-mark { width: 38px; height: 38px; border-radius: 11px; font-size: 1.65rem; }
  .brand h1 { font-size: 1.17rem; }
  .brand .eyebrow { max-width: 180px; font-size: .48rem; letter-spacing: .12em; }
  .connection { padding: .5rem .6rem; font-size: .74rem; }
  main { width: calc(100% - 1rem); margin: .7rem auto 2rem; }
  .tabs { position: sticky; top: 0; gap: .1rem; margin-bottom: .9rem; padding: .3rem; border-radius: 13px; }
  .tabs .tab, .tabs .quiet { min-height: 44px; padding: .6rem .75rem; font-size: .82rem; }
  .welcome-panel { flex-direction: column; gap: 1.1rem; margin: 0 0 1.4rem; padding: 1.25rem; border-radius: 18px; }
  .welcome-panel h2 { font-size: clamp(1.65rem, 7vw, 2rem); }
  .workspace-stats { width: 100%; }
  .workspace-stats > div { flex: 1 1 0; min-width: 0; }
  .session-list-heading { align-items: center; }
  .session-list-heading h2 { font-size: 1.35rem; }
  .session-list-heading #new-session-button { padding: .6rem .7rem; white-space: nowrap; }
  .session-filters { gap: .55rem; }
  .session-search { flex-basis: 100%; max-width: none; }
  .filter-group { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .15rem; }
  .filter-chip { flex: 0 0 auto; white-space: nowrap; }
  .refresh-button { width: 100%; }
  .session-grid { grid-template-columns: 1fr; }
  .session-card { min-height: 158px; }
  #session-detail { margin-top: 1.4rem; scroll-margin-top: 5rem; }
  .workspace-heading { gap: .6rem; }
  .workspace-heading .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .workspace-heading .actions button { padding: .65rem .35rem; }
  .session-tabs { margin-inline: -.1rem; }
  .session-tab { padding: .65rem .8rem; }
  .panel-intro { display: block; }
  .panel-intro > p { margin-top: .35rem; text-align: left; }
  .console-panel { padding: .6rem; border-radius: 15px; }
  #terminal-output { height: 56svh; min-height: 280px; padding: .35rem; }
  #session-detail:not([data-state="running"]) #terminal-output { height: 36svh; min-height: 220px; }
  .terminal-controls { padding: .5rem; }
  .terminal-keyboard { grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; }
  .utility-keys { grid-column: 1; grid-row: 1; }
  .arrow-pad { grid-column: 2; grid-row: 1 / span 2; }
  .action-keys { grid-column: 1; grid-row: 2; justify-self: start; }
  .terminal-keyboard button { padding: .5rem .55rem; }
  .composer button { width: 100%; }
  .card { padding: 1rem; border-radius: 16px; }
  .file-row, .access-row { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  button { transition: none !important; }
}