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

* { box-sizing: border-box; }
body { margin: 0; background: #f5f7fa; }
button, input, select { font: inherit; }

.app-shell { height: 100vh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.app-header { background: #ffffff; border-bottom: 1px solid #d8dee8; }
.header-row { min-height: 54px; display: grid; grid-template-columns: 204px 286px minmax(260px, 1fr) auto; align-items: center; gap: 20px; padding: 0 24px 0 0; }
.brand { height: 54px; padding: 13px 18px; border-right: 1px solid #d8dee8; font-size: 27px; font-weight: 800; letter-spacing: -.045em; color: #61707f; line-height: 1; }
.brand strong { color: #36c7bd; font-weight: 800; }
.workspace-switcher { border: 1px solid #d8dee8; border-radius: 6px; padding: 4px 13px; background: #f8fafc; display: grid; gap: 2px; position: relative; min-height: 42px; }
.label, .meta-cell span, .search-box label, dt, .eyebrow, .breadcrumb { color: #667085; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; font-weight: 750; }
.workspace-switcher select { appearance: auto; border: 0; background: transparent; color: #111a3f; font-size: 14px; font-weight: 750; line-height: 1.1; padding: 0; outline-color: #36c7bd; min-width: 0; }
.workspace-index-label { color: #667085; font-size: 11px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-copy { margin: 0; color: #667085; line-height: 1.35; font-size: 13px; max-width: 760px; }
.user-chip { justify-self: end; border: 1px solid #b7ead8; border-radius: 999px; background: #ecfdf3; color: #067647; padding: 6px 11px; font-weight: 750; font-size: 12px; white-space: nowrap; }
.metadata-bar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: #d8dee8; border-top: 1px solid #d8dee8; }
.meta-cell { background: #f8fafc; padding: 9px 18px 10px; display: grid; gap: 3px; min-height: 50px; }
.meta-cell strong { color: #111a3f; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.viewer-grid { display: grid; grid-template-columns: 272px minmax(0, 1fr); flex: 1; min-height: 0; overflow: hidden; }
.navigation-panel { min-height: 0; height: 100%; background: #f0f3f6; border-right: 1px solid #d8dee8; padding: 14px 12px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.preview-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #ffffff; overflow: hidden; }
.search-box { display: grid; gap: 7px; }
.search-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.search-box input { width: 100%; border: 1px solid #cfd8e6; border-radius: 7px; padding: 9px 10px; background: #ffffff; outline-color: #36c7bd; color: #182033; }
.search-input-row button { border: 1px solid #cfd8e6; border-radius: 7px; background: #ffffff; color: #344054; padding: 7px 9px; font-size: 12px; font-weight: 750; cursor: pointer; }
.search-input-row button:disabled { color: #98a2b3; cursor: not-allowed; }
.search-box p { margin: 0; color: #7a8597; font-size: 11px; line-height: 1.35; }
.navigation-tree { flex: 1; min-height: 0; overflow: auto; padding-right: 2px; }
.nav-tree-list { list-style: none; margin: 0; padding: 0; }
.nav-tree-list.root { display: grid; gap: 2px; }
.nav-tree-node { margin: 0; padding: 0; }
.nav-folder, .nav-item { width: 100%; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 7px; padding: 7px 8px 7px calc(8px + (var(--nav-level, 0) * 14px)); display: grid; gap: 8px; align-items: center; color: #344054; cursor: pointer; font-size: 13px; }
.nav-folder { grid-template-columns: 14px minmax(0, 1fr); font-weight: 800; color: #182033; }
.nav-item { grid-template-columns: minmax(0, 1fr) auto; }
.nav-label, .nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-chevron { color: #667085; font-size: 11px; line-height: 1; }
.nav-folder:hover, .nav-item:hover { background: #f8fafc; }
.nav-folder[aria-expanded="true"] { color: #07145f; }
.nav-item.active { background: #eaf3ff; border-color: #8bbce8; color: #07145f; font-weight: 700; }
.nav-item small, .artifact-type, .tag { background: #eef4ff; border: 1px solid #c7d7fe; border-radius: 999px; padding: 2px 7px; color: #344054; font-size: 10px; font-weight: 750; line-height: 1.4; }
.nav-empty { margin: 6px; color: #667085; font-size: 12px; line-height: 1.45; }

.artifact-context { position: sticky; top: 0; z-index: 5; border-bottom: 1px solid #dfe5ec; background: rgba(255,255,255,.98); backdrop-filter: blur(8px); padding: 10px 24px 9px; display: grid; gap: 6px; }
.artifact-context h1 { margin: 0; color: #07145f; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; }
.artifact-title-row { display: flex; gap: 10px; align-items: center; }
.artifact-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.artifact-meta div { display: flex; gap: 6px; min-width: 0; align-items: baseline; }
dd { margin: 0; color: #344054; font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.tag-list { display: flex; gap: 4px; flex-wrap: wrap; }
.muted { color: #7a8597; }

.preview-card { flex: 1; min-height: 0; background: #ffffff; padding: 42px 56px; overflow: auto; scroll-behavior: smooth; }
.document-preview { max-width: 820px; margin: 0 auto; }
.markdown-preview-card { padding-right: 32px; }
.reader-shell { width: min(100%, 1120px); min-height: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 820px) 32px; justify-content: center; align-items: start; gap: 22px; }
.reader-shell.no-reader-rail { display: block; max-width: 820px; }
.reader-shell .markdown-document { min-width: 0; width: 100%; }
.preview-card h2 { margin: 8px 0 12px; color: #07145f; font-size: 30px; line-height: 1.16; letter-spacing: -.03em; }
.document-lede { margin: 0 0 28px; color: #344054; font-size: 15px; line-height: 1.65; }
.placeholder-box { margin-top: 30px; border: 1px dashed #aab7cf; border-radius: 10px; background: #f8fafc; padding: 24px 26px; display: grid; gap: 9px; color: #475467; line-height: 1.5; }
.placeholder-box strong { color: #182033; }
.state-card { margin: 40px auto; max-width: 760px; background: #ffffff; border: 1px solid #dce3ee; border-radius: 14px; padding: 24px 28px; }
.state-action { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #36c7bd; border-radius: 8px; background: #36c7bd; color: #063b3a; padding: 8px 12px; font-weight: 800; text-decoration: none; }
.empty { color: #667085; }
.error { border-color: #fda29b; background: #fff6f5; color: #b42318; }

@media (max-width: 900px) {
  .header-row, .viewer-grid { grid-template-columns: 1fr; }
  .header-row { padding: 0 16px 14px; gap: 12px; }
  .brand { border-right: 0; padding-left: 0; }
  .metadata-bar { grid-template-columns: 1fr 1fr; }
  .viewer-grid { overflow: auto; }
  .navigation-panel { height: auto; max-height: 34vh; border-right: 0; border-bottom: 1px solid #d8dee8; }
  .preview-card { padding: 28px 22px; }
}
.markdown-document { color: #344054; font-size: 15px; line-height: 1.7; }
.markdown-document h1, .markdown-document h2, .markdown-document h3 { color: #07145f; letter-spacing: -.025em; line-height: 1.2; }
.markdown-document h1 { margin: 0 0 18px; font-size: 34px; }
.markdown-document h2 { margin: 34px 0 12px; font-size: 25px; }
.markdown-document h3 { margin: 26px 0 10px; font-size: 20px; }
.markdown-document p { margin: 0 0 16px; }
.markdown-document ul { margin: 0 0 20px 22px; padding: 0; }
.markdown-document li { margin: 5px 0; }
.markdown-document code { border: 1px solid #d8dee8; border-radius: 5px; background: #f6f8fb; padding: 1px 5px; color: #182033; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .92em; }
.markdown-document pre { overflow: auto; border: 1px solid #d8dee8; border-radius: 10px; background: #f6f8fb; padding: 16px 18px; }
.markdown-document pre code { border: 0; border-radius: 0; background: transparent; padding: 0; white-space: pre; }
.error-detail { overflow-wrap: anywhere; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 13px; }
.svg-document { max-width: 980px; }
.svg-preview-frame { margin: 30px 0 0; display: grid; gap: 12px; }
.svg-preview-frame img { display: block; width: 100%; max-height: 62vh; object-fit: contain; border: 1px solid #d8dee8; border-radius: 12px; background: #ffffff; box-shadow: 0 18px 45px rgba(16, 24, 40, .08); }
.svg-preview-frame figcaption { color: #667085; font-size: 12px; line-height: 1.5; }
.svg-preview-frame code { border: 1px solid #d8dee8; border-radius: 5px; background: #f6f8fb; padding: 1px 5px; color: #182033; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .92em; }
.markdown-embedded-svg { margin: 24px 0; display: grid; gap: 10px; }
.markdown-embedded-svg img { display: block; width: 100%; max-height: 58vh; object-fit: contain; border: 1px solid #d8dee8; border-radius: 12px; background: #ffffff; box-shadow: 0 16px 38px rgba(16, 24, 40, .08); }
.markdown-embedded-svg figcaption { color: #667085; font-size: 12px; line-height: 1.5; }
.embedded-asset-placeholder { display: inline-block; border: 1px dashed #d0d5dd; border-radius: 8px; background: #f8fafc; padding: 8px 10px; color: #667085; font-size: 13px; }
.html-document { max-width: 1040px; }
.html-sandbox-notice { margin: 22px 0 14px; border: 1px solid #b7ead8; border-radius: 10px; background: #ecfdf3; padding: 12px 14px; display: grid; gap: 5px; color: #067647; font-size: 12px; line-height: 1.5; }
.html-sandbox-notice strong { color: #075e45; }
.html-sandbox-notice code { border: 1px solid #a6e6ce; border-radius: 5px; background: #f6fffa; padding: 1px 5px; color: #075e45; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .92em; }
.html-preview-frame { display: block; width: 100%; min-height: 58vh; border: 1px solid #d8dee8; border-radius: 12px; background: #ffffff; box-shadow: 0 18px 45px rgba(16, 24, 40, .08); }
.session-actions { justify-self: end; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.logout-button, .login-form button, .secondary-action, .admin-link { border: 1px solid #36c7bd; border-radius: 8px; background: #36c7bd; color: #063b3a; padding: 7px 12px; font-weight: 800; cursor: pointer; }
.logout-button, .admin-link { background: #ffffff; color: #075e45; padding: 6px 10px; font-size: 12px; }
.admin-link { text-decoration: none; }
.fallback-banner { border-top: 1px solid #fedf89; background: #fffaeb; color: #93370d; padding: 8px 18px; font-size: 12px; font-weight: 700; }
.login-view { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(460px, 100%); background: #ffffff; border: 1px solid #d8dee8; border-radius: 18px; box-shadow: 0 20px 60px rgba(16, 24, 40, .08); padding: 28px; display: grid; gap: 14px; }
.login-brand { border-right: 0; padding: 0; height: auto; }
.login-card h1 { margin: 0; color: #07145f; font-size: 30px; letter-spacing: -.03em; }
.login-copy { margin: 0; color: #667085; line-height: 1.5; }
.login-form { display: grid; gap: 12px; }
.login-form label { display: grid; gap: 6px; color: #344054; font-size: 13px; font-weight: 750; }
.login-form input { border: 1px solid #cfd8e6; border-radius: 8px; padding: 10px 11px; outline-color: #36c7bd; }
.login-error { border: 1px solid #fda29b; border-radius: 10px; background: #fff6f5; color: #b42318; padding: 10px 12px; font-size: 13px; }
.secondary-action { background: #ffffff; color: #075e45; }

.admin-shell { min-height: 100vh; background: #f5f7fa; color: #182033; }
.admin-header { min-height: 58px; display: flex; gap: 16px; align-items: center; padding: 0 20px; background: #fff; border-bottom: 1px solid #d8dee8; }
.admin-header .brand { border-right: 0; padding: 0; height: auto; }
.admin-header span { margin-left: auto; color: #667085; font-weight: 700; }
.admin-nav { display: flex; gap: 8px; padding: 12px 20px; background: #f0f3f6; border-bottom: 1px solid #d8dee8; overflow-x: auto; }
.admin-nav button, .admin-card button { border: 1px solid #cfd8e6; border-radius: 8px; background: #fff; padding: 7px 11px; color: #344054; font-weight: 750; cursor: pointer; }
.admin-card button:first-of-type, .admin-form button, #save-sources, #start-job { border-color: #36c7bd; background: #36c7bd; color: #063b3a; }
.admin-main { padding: 20px; }
.admin-card { background: #fff; border: 1px solid #d8dee8; border-radius: 14px; padding: 18px; display: grid; gap: 14px; overflow: auto; }
.admin-card h1 { margin: 0; color: #07145f; font-size: 26px; }
.admin-card h2 { margin: 12px 0 0; color: #07145f; font-size: 18px; }
.admin-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-card input, .admin-card select { border: 1px solid #cfd8e6; border-radius: 7px; padding: 7px 9px; max-width: 100%; }
.admin-card table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-card th, .admin-card td { border-bottom: 1px solid #e4e9f1; padding: 9px; text-align: left; vertical-align: top; }
.admin-card th { color: #667085; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
.inline { display: inline-flex; gap: 6px; margin-left: 6px; }
.checks { display: grid; gap: 7px; max-width: 760px; }
.source-block { border: 1px solid #d8dee8; border-radius: 12px; padding: 12px; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.source-block legend { color: #07145f; font-weight: 800; }
.rules { flex-basis: 100%; display: grid; gap: 8px; }
.rules div { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px; background: #f8fafc; border-radius: 8px; }
.admin-badge { display: inline-block; border-radius: 999px; padding: 2px 8px; border: 1px solid #c7d7fe; background: #eef4ff; font-weight: 800; }
.admin-badge.succeeded, .admin-badge.active { background: #ecfdf3; border-color: #b7ead8; color: #067647; }
.admin-badge.failed, .admin-badge.disabled { background: #fff6f5; border-color: #fda29b; color: #b42318; }
.admin-ok { margin: 12px 20px 0; border: 1px solid #b7ead8; background: #ecfdf3; color: #067647; padding: 10px 12px; border-radius: 10px; }
.admin-detail { max-height: 340px; overflow: auto; background: #101828; color: #f2f4f7; border-radius: 10px; padding: 12px; white-space: pre-wrap; }

@media (max-width: 720px) {
  .metadata-bar { grid-template-columns: 1fr; }
  .session-actions { justify-self: stretch; }
  .search-input-row { grid-template-columns: 1fr; }
  .admin-header { flex-wrap: wrap; align-items: flex-start; padding: 12px 16px; gap: 10px; }
  .admin-header span { margin-left: 0; flex-basis: 100%; }
  .admin-nav { padding: 10px 16px; }
  .admin-main { padding: 14px; }
  .admin-card { padding: 14px; }
  .admin-card table { display: block; overflow-x: auto; white-space: nowrap; }
  .admin-form, .source-block, .rules div, .inline { display: grid; grid-template-columns: 1fr; align-items: stretch; margin-left: 0; }
  .admin-card input, .admin-card select, .admin-card button { width: 100%; }
}
.markdown-toc { margin: 0 0 28px; border: 1px solid #d8dee8; border-radius: 12px; background: #f8fafc; padding: 14px 16px; }
.markdown-toc strong { display: block; margin-bottom: 8px; color: #07145f; }
.markdown-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 5px; }
.markdown-toc .toc-level-3 { margin-left: 16px; font-size: 13px; }
.markdown-toc a, .markdown-document a { color: #075eaa; text-decoration: none; font-weight: 700; }
.markdown-toc a:hover, .markdown-document a:hover { text-decoration: underline; }
.markdown-document h2[id], .markdown-document h3[id] { scroll-margin-top: 18px; }
.markdown-table-wrap { overflow-x: auto; margin: 18px 0 24px; border: 1px solid #d8dee8; border-radius: 10px; }
.markdown-document table { width: 100%; border-collapse: collapse; font-size: 14px; }
.markdown-document th, .markdown-document td { border-bottom: 1px solid #e4e9f1; padding: 9px 11px; text-align: left; vertical-align: top; }
.markdown-document th { background: #f8fafc; color: #07145f; font-weight: 800; }
.markdown-document tr:last-child td { border-bottom: 0; }
.unresolved-markdown-link { color: #667085; text-decoration: underline dotted; }
.admin-field { display: grid; gap: 4px; color: #344054; font-size: 12px; font-weight: 750; min-width: 160px; }
.admin-field span { color: #667085; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.admin-field small { color: #667085; font-weight: 500; line-height: 1.35; max-width: 260px; }
.admin-card textarea { border: 1px solid #cfd8e6; border-radius: 7px; padding: 7px 9px; max-width: 100%; font: inherit; }
.checkbox-field { min-width: auto; align-content: start; }
.nav-folder-row { display: grid; grid-template-columns: calc(22px + (var(--nav-level, 0) * 14px)) minmax(0, 1fr); align-items: center; }
.nav-folder-toggle { width: 100%; border: 1px solid transparent; background: transparent; color: #667085; cursor: pointer; padding: 7px 0 7px calc(var(--nav-level, 0) * 14px); border-radius: 7px; }
.nav-folder { padding-left: 4px; grid-template-columns: minmax(0, 1fr) auto; }
.nav-folder.active { background: #eaf3ff; border-color: #8bbce8; color: #07145f; }
.nav-folder-overview { background: #ecfdf3; border: 1px solid #b7ead8; border-radius: 999px; padding: 1px 6px; color: #067647; font-size: 9px; font-weight: 800; }
.reader-rail-shell { position: sticky; top: 18px; z-index: 3; width: 32px; min-height: 240px; justify-self: end; }
.reader-chapter-rail { position: absolute; top: 0; right: 0; width: 32px; max-height: calc(100vh - 180px); border: 1px solid #d8dee8; border-radius: 999px; background: rgba(248,250,252,.97); box-shadow: 0 14px 35px rgba(16,24,40,.10); overflow: hidden; transition: width .16s ease, border-radius .16s ease, box-shadow .16s ease; z-index: 3; }
.reader-rail-shell:hover .reader-chapter-rail, .reader-chapter-rail:hover, .reader-chapter-rail:focus-within, .reader-chapter-rail:focus { width: 280px; border-radius: 14px; overflow-y: auto; box-shadow: 0 18px 44px rgba(16,24,40,.16); }
.reader-rail-title { display: block; opacity: 0; padding: 12px 14px 6px; color: #667085; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; white-space: nowrap; }
.reader-rail-shell:hover .reader-rail-title, .reader-chapter-rail:hover .reader-rail-title, .reader-chapter-rail:focus-within .reader-rail-title, .reader-chapter-rail:focus .reader-rail-title { opacity: 1; }
.reader-chapter-rail ol { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 2px; }
.reader-chapter-rail a { min-height: 22px; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 6px; padding: 3px 8px; color: #344054; text-decoration: none; font-size: 12px; font-weight: 700; }
.reader-rail-marker { display: block; width: 12px; height: 2px; border-radius: 999px; background: #98a2b3; }
.reader-rail-level-3 .reader-rail-marker { width: 8px; opacity: .72; }
.reader-rail-level-3 a { padding-left: 14px; font-size: 11px; font-weight: 650; }
.reader-rail-text { opacity: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-rail-shell:hover .reader-rail-text, .reader-chapter-rail:hover .reader-rail-text, .reader-chapter-rail:focus-within .reader-rail-text, .reader-chapter-rail:focus .reader-rail-text { opacity: 1; }
.reader-chapter-rail a:hover, .reader-chapter-rail a:focus { background: #eef4ff; color: #07145f; outline-color: #36c7bd; }
@media (max-width: 1100px) { .reader-shell { display: block; max-width: 820px; } .reader-rail-shell { display: none; } .markdown-preview-card { padding-right: 22px; } }

.workspace-gallery-view { min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #eef4ff 100%); color: #182033; }
.gallery-hero { display: grid; grid-template-columns: 204px minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 0 24px 18px 0; background: rgba(255,255,255,.86); border-bottom: 1px solid #d8dee8; }
.gallery-hero h1 { margin: 0; color: #07145f; font-size: 36px; letter-spacing: -.04em; }
.gallery-hero p { margin: 4px 0 0; color: #667085; }
.gallery-filters { margin: 24px auto 18px; width: min(1120px, calc(100% - 32px)); display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr) auto; gap: 12px; align-items: end; }
.gallery-search, .gallery-labels { display: grid; gap: 7px; color: #667085; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; }
.gallery-search input { border: 1px solid #cfd8e6; border-radius: 10px; padding: 11px 12px; outline-color: #36c7bd; background: #fff; color: #182033; text-transform: none; letter-spacing: 0; font-weight: 500; }
.gallery-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gallery-labels > span { flex-basis: 100%; }
.label-chip, #clear-gallery-filters { border: 1px solid #cfd8e6; border-radius: 999px; background: #fff; color: #344054; padding: 7px 10px; font-size: 12px; font-weight: 800; cursor: pointer; }
.label-chip.active { border-color: #36c7bd; background: #ecfdf3; color: #067647; }
#clear-gallery-filters { border-radius: 9px; }
.workspace-card-grid { width: min(1120px, calc(100% - 32px)); margin: 0 auto 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.workspace-card { background: #fff; border: 1px solid #d8dee8; border-radius: 18px; padding: 16px; box-shadow: 0 18px 45px rgba(16,24,40,.08); display: grid; gap: 13px; align-content: start; }
.workspace-visual { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; color: #fff; font-size: 25px; font-weight: 900; background: linear-gradient(135deg, #07145f, #36c7bd); }
.visual-knowledge { background: linear-gradient(135deg, #175cd3, #36c7bd); }
.visual-practice { background: linear-gradient(135deg, #7a2e0e, #fdb022); }
.visual-customer { background: linear-gradient(135deg, #067647, #12b76a); }
.visual-project { background: linear-gradient(135deg, #5925dc, #9e77ed); }
.visual-proposal { background: linear-gradient(135deg, #c11574, #f670c7); }
.visual-demo { background: linear-gradient(135deg, #344054, #98a2b3); }
.workspace-card-body h2 { margin: 0; color: #07145f; font-size: 22px; letter-spacing: -.025em; }
.workspace-card-body p { margin: 8px 0 0; color: #475467; line-height: 1.5; }
.workspace-card-labels { display: flex; flex-wrap: wrap; gap: 6px; }
.workspace-card-labels span { border: 1px solid #c7d7fe; border-radius: 999px; background: #eef4ff; color: #344054; padding: 3px 8px; font-size: 11px; font-weight: 800; }
.workspace-card-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; }
.open-workspace-button { border: 1px solid #36c7bd; border-radius: 10px; background: #36c7bd; color: #063b3a; padding: 10px 12px; font-weight: 900; cursor: pointer; }
.gallery-empty { grid-column: 1 / -1; border: 1px dashed #aab7cf; border-radius: 16px; background: #fff; padding: 28px; display: grid; gap: 6px; color: #667085; }
.gallery-empty strong { color: #07145f; }
@media (max-width: 900px) { .gallery-hero, .gallery-filters { grid-template-columns: 1fr; padding-left: 16px; } .gallery-hero .brand { border-right: 0; } }
.admin-busy { margin: 12px 20px 0; border: 1px solid #8bbce8; background: #eaf3ff; color: #07145f; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 800; }
.admin-card button:disabled, .admin-nav button:disabled, .logout-button:disabled { opacity: .56; cursor: wait; }
.source-block { align-items: start; }
.source-block .admin-field { min-width: min(220px, 100%); }
.rules div { border: 1px solid #e4e9f1; }

.mobile-viewer-actions,
.mobile-drawer,
.mobile-drawer-backdrop,
.mobile-chapter-nav { display: none; }

@media (max-width: 900px) {
  body.mobile-drawer-open { overflow: hidden; }
  .app-shell { height: 100dvh; }
  .header-row { grid-template-columns: minmax(0, 1fr) auto; padding: 0 14px; gap: 10px; min-height: 48px; }
  .brand { height: 48px; padding: 10px 0; font-size: 24px; }
  .workspace-switcher, .workspace-copy, .metadata-bar { display: none; }
  .session-actions { justify-self: end; gap: 6px; }
  .session-actions .user-chip { display: none; }
  .session-actions .admin-link, .session-actions .logout-button { padding: 6px 8px; font-size: 11px; }

  .mobile-viewer-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px 10px; border-bottom: 1px solid #d8dee8; background: #ffffff; position: sticky; top: 0; z-index: 8; }
  .mobile-viewer-actions button { min-width: 0; border: 1px solid #cfd8e6; border-radius: 10px; background: #f8fafc; color: #182033; padding: 8px 7px; display: grid; gap: 2px; text-align: left; cursor: pointer; }
  .mobile-viewer-actions button:disabled { opacity: .52; cursor: not-allowed; }
  .mobile-viewer-actions span { font-size: 12px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-viewer-actions small { color: #667085; font-size: 10px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .viewer-grid { display: block; flex: 1; min-height: 0; overflow: hidden; }
  .navigation-panel { display: none; }
  .preview-panel { height: 100%; min-height: 0; }
  .artifact-context { padding: 8px 14px; gap: 4px; }
  .artifact-context .breadcrumb, .artifact-meta { display: none; }
  .artifact-context h1 { font-size: 17px; }
  .artifact-title-row { justify-content: space-between; }
  .preview-card { padding: 22px 16px 32px; }
  .markdown-preview-card { padding-right: 16px; }

  .mobile-drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(16, 24, 40, .44); }
  .mobile-drawer-backdrop[hidden] { display: none; }
  .mobile-drawer { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 82dvh; min-height: min(560px, 72dvh); background: #ffffff; border-radius: 18px 18px 0 0; box-shadow: 0 -18px 60px rgba(16,24,40,.24); padding: 12px; gap: 12px; transform: translateY(105%); transition: transform .18s ease; overflow: hidden; }
  .mobile-drawer.open { transform: translateY(0); }
  .mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 8px; border-bottom: 1px solid #e4e9f1; }
  .mobile-drawer-header strong { color: #07145f; font-size: 16px; }
  .mobile-drawer-header button { border: 1px solid #cfd8e6; border-radius: 999px; background: #f8fafc; color: #344054; width: 34px; height: 34px; font-size: 22px; line-height: 1; cursor: pointer; }
  .mobile-drawer .search-box { flex: 0 0 auto; }
  .mobile-drawer .navigation-tree, .mobile-workspace-list, .mobile-chapter-drawer-content { min-height: 0; overflow: auto; }
  .mobile-overview-action { border: 1px solid #36c7bd; border-radius: 10px; background: #36c7bd; color: #063b3a; padding: 10px 12px; font-weight: 900; cursor: pointer; }
  .mobile-workspace-list { display: grid; gap: 8px; }
  .mobile-workspace-entry { border: 1px solid #d8dee8; border-radius: 12px; background: #ffffff; padding: 12px; display: grid; gap: 4px; text-align: left; color: #344054; cursor: pointer; }
  .mobile-workspace-entry.active { border-color: #36c7bd; background: #ecfdf3; }
  .mobile-workspace-entry strong { color: #07145f; }
  .mobile-workspace-entry span { color: #667085; font-size: 12px; line-height: 1.35; }

  .mobile-chapter-nav { display: none; }
  .mobile-chapter-drawer-content .mobile-chapter-nav { display: block; }
  .mobile-chapter-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .mobile-chapter-nav a { display: block; border: 1px solid #e4e9f1; border-radius: 10px; padding: 10px 11px; color: #075eaa; background: #f8fafc; text-decoration: none; font-weight: 800; }
  .mobile-chapter-level-3 a { margin-left: 16px; font-size: 13px; font-weight: 700; }
  .mobile-chapter-nav.empty { display: block; color: #667085; font-size: 13px; line-height: 1.45; }
}