.workspace { font-size: 14px; }
.work-layout {
    --rail-width: 208px;
    --context-width: 202px;
    display: grid;
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
    min-height: 100vh;
}
.work-layout.has-context-nav { grid-template-columns: var(--rail-width) var(--context-width) minmax(0, 1fr); }
.work-layout.context-compact { --context-width: 57px; }
.work-rail {
    display: flex;
    flex-direction: column;
    align-self: start;
    position: sticky;
    top: 0;
    height: 100dvh;
    min-height: 270px;
    gap: 30px;
    padding: 20px 13px 12px;
    border-right: 1px solid var(--line);
    background: #faf9f5;
}
.work-rail { z-index: 2; }
.work-rail .brand { padding-inline: 9px; }
.context-rail {
    position: sticky;
    z-index: 1;
    top: 0;
    align-self: start;
    height: 100dvh;
    overflow-y: auto;
    padding: 20px 9px 12px;
    border-right: 1px solid var(--line);
    background: #fbfcff;
}
.context-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 18px; }
.context-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 8px; font-size: 13px; font-weight: 650; }
.context-toggle { flex: none; width: 34px; min-height: 34px; padding: 0; }
.context-rail .context-nav a { min-width: 0; }
.context-nav .rail-label { overflow-wrap: anywhere; }
.context-compact .context-title, .context-compact .context-nav .rail-label {
    position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.context-compact .context-head, .context-compact .context-nav a { justify-content: center; }
.context-compact .context-nav a { width: 100%; padding-inline: 0; }
.context-expand, .context-compact .context-collapse { display: none; }
.context-compact .context-expand { display: block; }
.work-nav { display: grid; gap: 5px; }
.work-nav a { display: flex; align-items: center; gap: 10px; min-height: 40px; border-radius: 5px; padding: 8px 10px; color: var(--muted); font-weight: 550; }
.work-nav a:hover { background: #efeee9; color: var(--text); }
.work-nav [aria-current] { background: var(--accent-soft); color: var(--accent); }
.work-nav [aria-current]:hover { background: #dce6ff; color: var(--accent); }
.work-account { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: auto; padding: 9px 0 0 9px; border-top: 1px solid var(--line); }
.account-name { min-width: 0; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.rail-exit { display: grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); }
.rail-exit:hover { background: #efeee9; color: var(--accent); }
.work-content { min-width: 0; container: workspace-content / inline-size; }
.work-content:focus, #main:focus { outline: none; }

.work-page-bar { display: flex; align-items: center; gap: 8px; min-height: 47px; padding: 6px clamp(14px, 2.5vw, 46px); border-bottom: 1px solid var(--line); background: var(--surface); }
.work-page-bar h1 { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 650; overflow-wrap: anywhere; }
.work-page-bar .icon { width: 13px; height: 13px; color: var(--muted); }
.page-context { min-width: 0; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
a.page-context:hover { color: var(--accent); text-decoration: underline; }
.builder, .admin-shell { padding: 20px clamp(14px, 2.5vw, 46px) 56px; }
.login-copy h1 { margin-top: 3px; font-size: clamp(28px, 3.3vw, 46px); line-height: 1.1; letter-spacing: -.055em; font-weight: 670; overflow-wrap: anywhere; }
.workspace h2 { font-size: 19px; line-height: 1.23; letter-spacing: -.025em; font-weight: 650; overflow-wrap: anywhere; }
.work-kicker, .work-muted { color: var(--muted); }
.work-kicker { font-size: 13px; }
.work-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.work-stack { display: grid; align-content: start; gap: 14px; }
.work-stack > button { justify-self: start; }
.work-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.work-danger { color: #a02d29; }
.work-danger:hover:not(:disabled) { border-color: #b1554e; background: #fff0ef; color: #8b2825; }
.work-field { display: grid; gap: 5px; min-width: 0; font-weight: 550; overflow-wrap: anywhere; }
.work-field small { font-size: 12px; font-weight: 400; }
.workspace :where(input:not([type=checkbox]):not([type=hidden]), select, textarea) { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #bfc8d8; border-radius: 5px; background: var(--field); color: var(--text); font-weight: 400; }
.workspace input::placeholder, .workspace textarea::placeholder { color: #626e84; }
.workspace input[readonly] { font-family: var(--mono); font-size: 12px; }
.workspace textarea { resize: vertical; }
.workspace input[type=file] { padding: 5px; }
.workspace input::file-selector-button { margin-right: 8px; padding: 5px 7px; border: 1px solid #bfc8d8; border-radius: 4px; background: white; color: var(--text); font: inherit; cursor: pointer; }
.workspace input::file-selector-button:hover { color: var(--accent); background: var(--accent-soft); }
.work-switch { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 34px; color: var(--text); cursor: pointer; }
.work-switch input { position: absolute; opacity: 0; width: 38px; height: 24px; margin: 0; cursor: inherit; }
.switch-track { position: relative; flex: none; width: 38px; height: 22px; border: 1px solid #8694ad; border-radius: 12px; background: #e0e4ec; transition: background .15s; }
.switch-track::before { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #596981; transition: transform .15s; }
.work-switch input:checked + .switch-track { background: var(--accent); border-color: var(--accent); }
.work-switch input:checked + .switch-track::before { transform: translateX(16px); background: white; }
.work-switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 3px; }
.work-switch:has(input:disabled) { opacity: .58; cursor: default; }
.work-chip { display: inline-block; padding: 3px 7px; border: 1px solid #d0d8e6; border-radius: 4px; background: #f6f7fa; color: var(--muted); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.work-good { background: #eaf6ee; color: var(--positive); border-color: #bfdccb; }

.guest-header { display: flex; align-items: center; min-height: 70px; padding-inline: clamp(16px, 5vw, 72px); border-bottom: 1px solid var(--line); background: #faf9f5; }
.login-shell { display: grid; grid-template-columns: minmax(0, 350px) minmax(0, 400px); justify-content: center; align-items: center; gap: clamp(24px, 5vw, 70px); margin: clamp(32px, 12vh, 128px) 20px; }
.login-copy h1 { margin-block: 12px; }
.login-copy p { max-width: 265px; }
.login-shell form { padding: clamp(18px, 3.3vw, 34px); gap: 18px; }
.login-shell button { justify-self: stretch; justify-content: space-between; }

.builder-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.builder-heading .work-muted { margin-top: 7px; }
.project-back { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.project-back:hover { text-decoration: underline; }
.back-icon { width: 15px; height: 15px; transform: rotate(180deg); }

.project-directory { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.directory-list { padding: 0; margin: 0; list-style: none; }
.directory-head, .directory-row { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(230px, 1.2fr) 100px 18px; gap: 16px; align-items: center; padding-inline: 17px; }
.directory-head { min-height: 42px; border-radius: var(--radius) var(--radius) 0 0; background: #f8f9fb; color: var(--muted); font-size: 13px; }
.directory-row { min-height: 74px; padding-block: 12px; border-top: 1px solid var(--line); }
.directory-row:hover { background: #f2f6ff; }
.directory-row:focus-visible { position: relative; outline-offset: -3px; }
.directory-list > li:last-child .directory-row { border-radius: 0 0 var(--radius) var(--radius); }
.directory-name { display: flex; align-items: center; gap: 12px; }
.directory-name strong { font-size: 16px; font-weight: 640; overflow-wrap: anywhere; }
.project-folder, .empty-icon { display: grid; flex: none; place-items: center; width: 37px; height: 37px; border: 1px solid #cbd8f7; border-radius: 5px; background: #eff3ff; color: var(--accent); }
.directory-date, .directory-arrow { color: var(--muted); }
.directory-date, .work-table :is(th,td) { font-variant-numeric: tabular-nums; }
.project-chips { display: flex; flex-wrap: wrap; gap: 7px 12px; }
.channel-label { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.channel-label .icon { width: 16px; height: 16px; color: var(--accent); }
.empty-builder { display: grid; justify-items: start; gap: 12px; padding: clamp(20px, 5vw, 48px); }
.empty-builder p { color: var(--muted); }
.empty-icon { margin-bottom: 5px; }

.project-metrics, .project-panes, .connections-grid { display: grid; gap: 14px; }
.project-metrics { grid-template-columns: repeat(auto-fit, minmax(min(238px, 100%), 1fr)); }
.project-panes { grid-template-columns: repeat(auto-fit, minmax(min(465px, 100%), 1fr)); align-items: start; margin-top: 16px; }
.connections-grid { grid-template-columns: repeat(auto-fit, minmax(min(490px, 100%), 1fr)); align-items: stretch; }
.project-metrics > article { display: grid; gap: 4px; padding: 17px 20px; }
.project-metrics p { font-weight: 550; }
.project-metrics strong { display: block; font-size: clamp(32px, 4vw, 49px); letter-spacing: -.06em; line-height: 1.15; font-weight: 620; font-variant-numeric: tabular-nums; }
.project-metrics small { color: var(--muted); font-size: 13px; }
.project-section, .project-intro, .admin-gateways { margin-block: 16px; }
.project-panes .project-section { margin: 0; }
.project-intro > p, .admin-card-head h2 + p { margin-top: 4px; }
.bot-heading, .list-heading { display: flex; align-items: center; gap: 8px; }
.bot-heading > .icon { color: var(--accent); }
.connection-card > header { padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.connection-card h3, .profile-linking h3 { font-size: 16px; font-weight: 650; }
.connection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(315px, 100%), 1fr)); align-items: start; gap: 18px; }
.connection-webhook { padding: 14px; border: 1px solid #d7dfec; border-radius: 5px; background: #f8fafd; }
.connection-webhook h4 { margin: 0; font-size: 14px; font-weight: 650; }
.connection-webhook p { overflow-wrap: anywhere; }
.copy-field { display: flex; flex-wrap: wrap; align-items: end; gap: 6px; }
.copy-field > .work-field { flex: 1 1 min(100%, 175px); }
.copy-field-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.copy-field-actions button { min-height: 40px; }
.copy-field-actions [data-copy] { min-width: 102px; }
.profile-linking { padding-top: 14px; border-top: 1px solid var(--line); }
.profile-linking form { max-width: 640px; }
.project-empty { padding: 14px; border: 1px dashed #c4ccda; border-radius: 5px; background: #fafbfc; color: var(--muted); }
.project-detail { margin-top: 11px; }
.project-detail code, .work-table code { overflow-wrap: anywhere; color: #324465; font-family: var(--mono); font-size: .92em; }
.workspace select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23536078' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right 9px center; background-repeat: no-repeat; }
@media (forced-colors: active) { .workspace select { appearance: auto; background-image: none; } }

.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(370px, 100%), 1fr)); align-items: start; gap: 14px; }
.admin-grid-even { align-items: stretch; }
.admin-narrow { width: min(100%, 560px); }
.admin-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-row { display: flex; align-items: end; gap: 10px; padding-block: 10px; border-top: 1px solid var(--line); }
.admin-row.work-card { padding: 14px; }
.admin-row .work-field { flex: 1; }
.gateway-row { align-items: center; }
.gateway-row strong { flex: 1; overflow-wrap: anywhere; }
.table-scroll { overflow: auto; }
.work-table { width: 100%; border-collapse: collapse; text-align: left; }
.work-table th, .work-table td { padding: 10px 11px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.work-table th { background: #f6f7fa; color: var(--muted); font-weight: 560; overflow-wrap: normal; }
.project-panes .work-table :is(th, td) { padding-inline: 8px; }
.work-table .channel-label { white-space: nowrap; }
.work-table tbody tr:last-child td { border-bottom: 0; }
.work-table tbody tr:hover { background: #fafbfe; }
.work-table a:not(.work-button) { color: var(--accent); }
.work-table a:not(.work-button):hover { text-decoration: underline; }

.work-dialog { max-width: min(430px, calc(100% - 28px)); width: 100%; padding: 22px; border: 1px solid #9baac5; border-radius: var(--radius); background: var(--surface); color: var(--text); }
.work-dialog::backdrop { background: #19264166; }
.app-dialog { max-width: min(460px, calc(100% - 28px)); }
.app-dialog-heading { display: flex; align-items: center; gap: 10px; }
.app-dialog-heading .icon { color: #8b4a15; }
.app-dialog[data-kind="notice"] .app-dialog-symbol { display: none; }
.app-dialog-content { max-height: 50dvh; overflow: auto; margin-block: 14px 20px; overflow-wrap: anywhere; }
.app-dialog-content ul { margin: 0; padding-left: 21px; }
.app-dialog-content li + li { margin-top: 6px; }
.app-dialog-actions { display: flex; justify-content: end; gap: 8px; flex-wrap: wrap; }

@media (min-width: 741px) and (max-width: 1120px) {
    .work-layout { --rail-width: 60px; }
    .work-layout:not(.context-compact) { --context-width: 172px; }
    .work-rail { align-items: center; padding-inline: 7px; }
    .work-rail .brand { padding-inline: 0; }
    .work-rail .rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .work-rail .work-nav a { width: 40px; justify-content: center; padding-inline: 0; }
    .work-account { padding-left: 0; }
}
@media (max-width: 740px) {
    .work-layout, .work-layout.has-context-nav { display: block; }
    .work-rail { position: static; height: auto; min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
    .work-rail .brand { padding-inline: 0; font-size: 18px; }
    .work-rail .work-nav { display: flex; margin-left: auto; }
    .work-rail .work-nav a { min-height: 36px; padding: 7px; }
    .work-account { margin-top: 0; border-top: 0; padding: 0; }
    .account-name { display: none; }
    .context-rail { position: static; display: flex; align-items: start; flex-direction: row-reverse; justify-content: space-between; gap: 5px; height: auto; overflow: visible; padding: 5px 9px; border-right: 0; border-bottom: 1px solid var(--line); }
    .context-head { margin-bottom: 0; padding-top: 1px; }
    .context-head .context-title { display: none; }
    .context-rail .context-nav { display: flex; flex-wrap: wrap; gap: 2px; }
    .context-rail .context-nav a { min-height: 35px; gap: 5px; padding: 6px; font-size: 13px; }
    .context-compact .context-rail .context-nav a { width: 36px; }
}
@media (max-width: 620px) {
    .work-rail .work-nav .rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .work-rail .work-nav a { justify-content: center; width: 39px; }
    .work-page-bar { min-height: 41px; }
    .login-shell { grid-template-columns: minmax(0, 430px); }
    .copy-field-actions button { min-height: 34px; }
    .work-card { padding: 14px; }
    .builder-heading { align-items: start; flex-direction: column; gap: 12px; margin-bottom: 16px; }

    .admin-row { flex-wrap: wrap; }
    .admin-row .work-field { flex-basis: 140px; }
    .gateway-row strong { flex-basis: 100%; }
    .login-shell form { padding: 18px; }
}
@container workspace-content (max-width: 880px) {
    .directory-head, .directory-row { grid-template-columns: minmax(130px, 1fr) minmax(160px, 1fr) 86px 16px; gap: 10px; }
}
@container workspace-content (max-width: 600px) {
    .directory-head { display: none; }
    .directory-row { grid-template-columns: minmax(0, 1fr) 16px; padding-inline: 12px; }
    .directory-list > li:first-child .directory-row { border-top: 0; border-radius: var(--radius) var(--radius) 0 0; }
    .directory-row .project-chips { grid-row: 2; padding-left: 49px; }
    .directory-date { grid-row: 3; padding-left: 49px; font-size: 12px; }
    .directory-arrow { grid-column: 2; grid-row: 1; }
    .work-table { min-width: 440px; }
}
@media (prefers-reduced-motion: reduce) { .switch-track, .switch-track::before { transition: none; } }