:root {
  --font: Arial, Helvetica, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --size: 16px;
  --foreground: #f2f1e9;
  --background: #111312;
  --surface: #191c1a;
  --border: #3c423d;
  --control-line: #8c948b;
  --primary: #f2f1e9;
  --muted: #b6bab3;
  --ink: #181c19;
  --paper: #f2f1e9;
  --ash: #c5c9be;
  --border-radius: 0;
}

[hidden] { display: none !important; }
a { text-decoration: underline; text-underline-offset: .14em; }
a:hover { color: var(--ash); }
button:disabled, select:disabled { opacity: .5; cursor: wait; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 1px;
}
.input { background: var(--background); }
.input:focus { border-color: var(--foreground); }
.label { margin-bottom: 7px; color: var(--foreground); font-size: 13px; font-weight: 400; }
.label .muted { font-weight: 400; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; white-space: nowrap; font-weight: 400; line-height: 1.5; text-decoration: none !important; }
.button.primary, .button.primary:visited { background: var(--foreground); border-color: var(--foreground); color: var(--background); }
.button.primary:hover:not(:disabled) { background: var(--ash); border-color: var(--ash); color: var(--background); }
.button.secondary, .button.secondary:visited { background: var(--background); border-color: var(--control-line); color: var(--foreground); }
.button.secondary:hover:not(:disabled) { background: var(--surface); border-color: var(--foreground); }
.button.small { min-height: 44px; padding: 10px 12px; font-size: 13px; }
.text-button { min-height: 44px; padding: 0; border: 0; background: none; color: var(--foreground); cursor: pointer; font-size: 13px; text-decoration: underline; text-underline-offset: .14em; }
.text-button:hover { color: var(--ash); }
.text-button.text-body { font-size: var(--size); }
.danger { color: var(--foreground); }
.muted, .help { color: var(--muted); }
.mono { font: 12px/1.6 var(--mono); }

.skip-link { position: absolute; z-index: 20; top: 0; left: 1.25rem; padding: 10px 12px; transform: translateY(-120%); background: var(--foreground); color: var(--background); }
.skip-link:focus { transform: translateY(0); }
html { scroll-padding-top: 68px; }
.app-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 20px; height: 60px; padding: 0 clamp(1.25rem, 4vw, 4rem); border-bottom: 1px solid var(--border); background: var(--background); }
.brand, .brand:visited { color: var(--foreground); font-size: 1.75rem; font-weight: 500; letter-spacing: -.06em; line-height: 1; text-decoration: none; }
.brand:hover { color: var(--foreground); }
.brand-dot { color: inherit; }
.tenant-name { min-width: 0; max-width: 30vw; padding-left: 20px; border: 0; border-left: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--muted); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-header nav { display: flex; align-items: center; gap: 25px; height: 100%; margin-left: auto; }
.app-header nav > a { display: flex; align-items: center; height: 100%; border-bottom: 2px solid transparent; color: var(--muted); font-size: .8125rem; text-decoration: none; }
.app-header nav > a:hover, .app-header nav > a[aria-current] { color: var(--foreground); }
.app-header nav > a[aria-current] { border-bottom-color: var(--foreground); }
.user-name { min-width: 0; max-width: 180px; }
.page-container { min-width: 0; max-width: 1600px; margin: 0 auto; padding: 48px clamp(1.25rem, 4vw, 4rem) 72px; overflow-wrap: anywhere; }
h1 { margin: 0 0 24px; font-size: clamp(32px, 5vw, 42px); font-weight: 500; line-height: 1.04; letter-spacing: -.065em; }
h2 { margin: 0; font-size: 1.25rem; font-weight: 500; line-height: 1.5; letter-spacing: -.035em; }
.eyebrow { margin: 0 0 12px; color: var(--muted); font: 12px/1.6 var(--mono); letter-spacing: .025em; text-transform: uppercase; }
.settings-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.settings-title h1 { margin: 0; }
.settings-nav { display: flex; gap: 28px; margin-bottom: 30px; border-bottom: 1px solid var(--border); }
.settings-nav a { padding: 0 0 13px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; }
.settings-nav a:hover, .settings-nav a[aria-current] { color: var(--foreground); }
.settings-nav a[aria-current] { border-bottom-color: var(--foreground); font-weight: 400; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0 0 18px; }
.section-heading p { margin: 0; font-size: 13px; }
.table-card { overflow: auto; border: 1px solid var(--border); }
.settings-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; white-space: nowrap; }
.settings-table th { padding: 13px 18px; background: var(--surface); color: var(--muted); font: 12px/1.6 var(--mono); letter-spacing: .025em; }
.settings-table td { padding: 17px 18px; border-top: 1px solid var(--border); }
.settings-table th.actions { width: 1%; }
.settings-table .table-empty { padding: 46px 20px; color: var(--muted); text-align: center; white-space: normal; }
.row-actions { display: flex; align-items: center; gap: 18px; }
.badge { padding: 3px 7px; border: 1px solid var(--control-line); background: transparent; color: var(--foreground); font: 11px/1.6 var(--mono); }
.count { margin-left: 5px; padding: 2px 7px; background: var(--surface); color: var(--muted); font: 11px/1.6 var(--mono); }
.invitations-heading { margin-top: 45px; }
.settings-form { max-width: 720px; }
.settings-form fieldset, .form-grid > *, .section-heading > * { min-width: 0; }
.settings-form > .settings-fieldset { min-inline-size: 0; margin: 0 0 20px; padding: 16px; border: 1px solid var(--border); background: var(--surface); }
.settings-fieldset > legend { max-inline-size: 100%; padding: 0 6px; color: var(--foreground); font-size: 1.25rem; font-weight: 500; overflow-wrap: anywhere; }
.settings-fieldset > :last-child { margin-bottom: 0; }
.settings-form.narrow { max-width: 460px; }
.settings-form label { display: block; margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.help { margin: -8px 0 22px; font-size: 12px; line-height: 1.7; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 24px; }
.alert.error, .alert.success { border-color: var(--control-line); background: var(--surface); color: var(--foreground); }
.auth-card { max-width: 470px; margin: 70px auto; line-height: 1.7; }
.secret-description { margin: 0 0 24px; }
.secret-header-name { display: inline-block; margin: 2px 4px 2px 0; }
.secret-notes { max-width: 800px; margin-top: 24px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.secret-header-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: start; gap: 14px; }
.secret-header-row .text-button { margin-top: 34px; }

.connect-panel { padding: 15px 0 40px; }
.connect-panel h1 { max-width: 8em; margin-bottom: 14px; }
.intro { max-width: 36rem; margin: 0 0 30px; color: var(--muted); line-height: 1.7; }
.copy-field { display: flex; gap: 12px; }
.copy-field input { flex: 1; min-width: 0; padding: 10px 12px; background: var(--background); }
.copy-field .button { padding-inline: 12px; }
.connect-meta { display: flex; flex-wrap: wrap; gap: 3px 20px; margin-top: 10px; }
.connect-meta .help { margin: 0; }
.connection-help { margin-top: 15px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.connection-help summary { color: var(--foreground); cursor: pointer; }
.connection-help p { max-width: 750px; }
.explore-nav { margin-top: 6px; overflow-x: auto; }
.explore-nav a { flex-shrink: 0; }
.application-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.application-list > .empty-card { grid-column: 1 / -1; }
.application-card { min-width: 0; padding: 0; }
.application-card:hover, .application-card:focus-within { border-color: var(--control-line); background: var(--surface); }
.application-card h2 { height: 100%; }
.application-card a { display: flex; align-items: center; min-height: 104px; height: 100%; padding: 24px; text-decoration: none; }
.application-card a:hover { color: var(--foreground); text-decoration: underline; }
.page-description { max-width: 740px; margin: -10px 0 32px; color: var(--muted); line-height: 1.8; }
.activity-list { overflow: hidden; border: 1px solid var(--border); }
.activity-event + .activity-event, .function-card + .function-card { border-top: 1px solid var(--border); }
.activity-event summary, .function-card summary { display: flex; align-items: center; gap: 15px; padding: 20px; cursor: pointer; list-style: none; }
.activity-event summary::-webkit-details-marker, .function-card summary::-webkit-details-marker { display: none; }
.activity-event summary::after, .function-card summary::after { content: '+'; color: var(--muted); font-size: 17px; }
.activity-event[open] summary::after, .function-card[open] summary::after { content: '−'; }
.activity-event summary:hover, .function-card summary:hover { background: var(--surface); }
.event-title, .function-card summary > span:first-child { flex: 1; min-width: 0; }
.event-title strong { font: 12px/1.6 var(--mono); overflow-wrap: anywhere; }
.event-user, .function-description { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.activity-event time, .function-card time { color: var(--muted); font: 11px/1.6 var(--mono); white-space: nowrap; }
.status-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--muted); }
.status-dot.succeeded { background: var(--foreground); }
.status-dot.failed { background: var(--ash); }
.status-dot.running { background: var(--muted); }
.status-succeeded, .status-failed, .status-running { background: transparent; color: var(--foreground); border-color: var(--control-line); }
.event-detail { padding: 0 20px 22px; }
.code-block { max-height: 460px; margin: 8px 0 20px; padding: 18px; overflow: auto; border: 1px solid var(--border); background: var(--surface); color: var(--foreground); font: 12px/1.8 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.error-output { border-color: var(--control-line); }
.empty-card { padding: 60px 24px; background: var(--surface); color: var(--muted); text-align: center; }
.empty-card h2 { margin: 14px 0 10px; color: var(--foreground); font-size: 1.25rem; font-weight: 500; }
.empty-card p { margin: 0; font-size: 13px; line-height: 1.9; }
.empty-symbol { display: inline-block; width: 45px; height: 45px; border: 1px solid var(--control-line); font-size: 26px; line-height: 43px; }
.pagination-links { display: flex; justify-content: space-between; gap: 16px; margin: 22px 0; font-size: 12px; }
.file-search { display: flex; align-items: center; gap: 8px; }
.file-search .label { margin: 0 5px 0 0; }
.file-search input { width: 200px; }
.settings-table .file-path { max-width: 450px; overflow-wrap: anywhere; white-space: normal; }
.automation-info { display: grid; grid-template-columns: 100px 1fr; gap: 12px; margin: 6px 0 25px; font-size: 13px; }
.automation-info dt { color: var(--muted); }
.automation-info dd { margin: 0; overflow-wrap: anywhere; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.chat-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.chat-container { display: flex; flex: 1; flex-direction: column; width: 100%; max-width: 850px; padding-top: 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
#chat { display: flex; flex: 1; flex-direction: column; min-width: 0; }
#chat-messages { flex: 1; min-width: 0; }
.chat-message { min-width: 0; max-width: 100%; margin: 0 0 30px; overflow-wrap: anywhere; }
.chat-text { line-height: 1.75; white-space: pre-wrap; }
.chat-message--user { width: fit-content; max-width: 90%; margin-left: auto; padding: 12px 16px; border: 1px solid var(--control-line); background: var(--surface); }
.chat-message--assistant { margin-right: auto; background: transparent; }
.chat-timestamp { display: block; margin-bottom: 6px; color: var(--muted); font: 10px/1.5 var(--mono); }
.chat-message--system, #chat-error { color: var(--muted); font-size: 12px; font-style: italic; }
.chat-markdown { white-space: normal; }
.chat-markdown hr { margin: 24px 0; border: 0; border-top: 1px solid var(--border); }
.chat-markdown > :first-child { margin-top: 0; }
.chat-markdown > :last-child { margin-bottom: 0; }
.chat-markdown p, .chat-markdown ul, .chat-markdown ol, .chat-markdown blockquote, .chat-markdown pre, .chat-markdown table { margin: 0 0 12px; }
.chat-markdown h1, .chat-markdown h2, .chat-markdown h3, .chat-markdown h4, .chat-markdown h5, .chat-markdown h6 { margin: 20px 0 10px; font-size: 16px; font-weight: 500; letter-spacing: -.035em; }
.chat-markdown h1 { font-size: 20px; }
.chat-markdown h2 { font-size: 18px; }
.chat-markdown ul, .chat-markdown ol { padding-left: 24px; }
.chat-markdown blockquote { padding-left: 14px; border-left: 2px solid var(--control-line); color: var(--muted); }
.chat-markdown code { padding: 2px 4px; background: var(--surface); font: 13px/1.65 var(--mono); }
.chat-markdown pre { overflow-x: auto; padding: 12px; border: 1px solid var(--border); background: var(--surface); white-space: pre; }
.chat-markdown pre code { padding: 0; background: none; }
.chat-markdown table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 13px; }
.chat-markdown th, .chat-markdown td { padding: 6px 10px; border: 1px solid var(--border); text-align: left; }
.chat-markdown th { background: var(--surface); }
#chat-error:not([hidden]) { margin: 12px 0; }
#chat-composer { display: flex; align-items: stretch; gap: 12px; }
#chat-content { flex: 1; min-height: 86px; max-height: 40vh; max-height: 40dvh; resize: vertical; }
.chat-activity { display: flex; align-items: center; gap: 10px; min-height: 24px; margin-top: 8px; color: var(--muted); font-size: 12px; }
.chat-activity > #chat-upload { margin-left: auto; }
#chat-status::before { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; content: ''; }
#chat-status[data-state="queued"], #chat-status[data-state="running"], #chat-status[data-state="stopping"] { color: var(--foreground); }
#chat-stop { padding: 4px 0; border: 0; background: none; color: inherit; cursor: pointer; font-size: inherit; text-decoration: underline; }
#chat-stop:disabled { cursor: default; opacity: .5; }
.chat-upload-link { appearance: none; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; text-decoration: underline; }
.chat-upload-link:disabled { cursor: default; opacity: .5; }
#chat-uploads { font-size: .875rem; overflow-wrap: anywhere; }
#chat-upload-list { padding-left: 1.25rem; }
#chat-upload-list button { margin: .15rem .25rem; }

@media (max-width: 800px) {
  html { scroll-padding-top: 141px; }
  .app-header { height: auto; flex-wrap: wrap; gap: 0 12px; }
  .app-header .brand { display: flex; flex-shrink: 0; align-items: center; min-height: 44px; }
  .tenant-name { max-width: calc(100% - 80px); min-height: 44px; padding-left: 12px; font-size: 12px; }
  .app-header nav { flex: 1 0 100%; flex-wrap: wrap; gap: 0 16px; height: auto; min-width: 0; margin-left: 0; }
  .app-header nav > a { flex-shrink: 0; height: auto; min-height: 44px; }
  .settings-nav { flex-wrap: wrap; gap: 4px 20px; }
  .settings-nav a { display: flex; align-items: center; min-height: 44px; padding: 10px 0; }
  .button { min-height: 44px; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
  .text-button { min-height: 44px; }
  .input { min-height: 44px; max-width: 100%; font-size: 16px; }
  .form-actions > a, .row-actions > a, .chat-activity > a, .chat-activity > #chat-upload { display: inline-flex; align-items: center; min-height: 44px; }
  .section-heading { align-items: flex-start; }
  .activity-event time { display: none; }
}
@media (max-width: 640px) {
  h1 { font-size: clamp(40px, 12vw, 64px); }
  .page-container { padding-top: 32px; padding-bottom: 48px; }
  .brand { font-size: 1.5rem; }
  .secret-header-row { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
  .secret-header-row .text-button { justify-self: start; margin-top: 0; }
  .connect-panel { padding-top: 6px; }
  .copy-field { flex-direction: column; }
  .copy-field input { width: 100%; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .section-heading { flex-direction: column; }
  .tenant-name { max-width: 23vw; }
  .app-header nav { gap: 10px; }
  .app-header nav a, .text-button { font-size: 12px; }
  .activity-event summary, .function-card summary { gap: 9px; padding: 16px 12px; }
  .event-user .muted { display: none; }
  .event-detail { padding-inline: 12px; }
  .function-card time { display: none; }
  .file-search { flex-wrap: wrap; }
  .file-search input { width: 150px; }
  .file-search .label { flex-basis: 100%; }
  .chat-container { padding: 22px 16px max(22px, env(safe-area-inset-bottom)); }
  #chat-composer { gap: 8px; }
}
