:root {
  --bg: #f4f5f9;
  --card: #ffffff;
  --fg: #2b2b2b;
  --fg2: #4f5b66;
  --fg3: #757575;
  --border: #dbdbdb;
  --primary: #0c2451;
  --sidebar: 264px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.layout { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh;
  background: #111111; display: flex; flex-direction: column;
}
.side-brand { padding: 18px; border-bottom: 1px solid rgba(255,255,255,0.2); }
.side-brand strong { color: #fff; font-size: 14px; }
.nav {
  flex: 1; overflow-y: auto; padding: 12px 10px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav-group { margin-bottom: 14px; }
.nav-group-label {
  display: flex; align-items: center;
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.54);
  text-transform: uppercase; letter-spacing: 0.07em; padding: 4px 10px 7px;
}
.nav-cluster { margin: 1px 0 3px; }
.nav-cluster-toggle {
  width: 100%; min-height: 34px; padding: 7px 9px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: rgba(255,255,255,0.82); display: flex; align-items: center; gap: 7px;
  font: 600 12px var(--font); text-align: left; cursor: pointer;
}
.nav-cluster-toggle:hover { background: rgba(255,255,255,0.1); color: #fff; }
.nav-cluster-toggle .material-symbols-rounded { font-size: 16px; transition: transform 140ms ease; }
.nav-cluster-toggle[aria-expanded="true"] .material-symbols-rounded { transform: rotate(90deg); }
.nav-cluster-items { padding-left: 18px; }
.nav-cluster-items[hidden] { display: none; }
.nav-item {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; padding: 8px 10px;
  border: 1px solid transparent; background: transparent; border-radius: 6px;
  cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.82); margin-bottom: 2px;
}
.nav-item:hover { background: rgba(255,255,255,0.1); color: #fff; }
.nav-item.active { background: #fff; color: #111; font-weight: 700; }
.nav-item:disabled { cursor: not-allowed; color: rgba(255,255,255,0.5); }
.nav-item:disabled:hover { background: transparent; color: rgba(255,255,255,0.5); }
.maintenance-tag {
  flex: 0 0 auto; padding: 1px 5px; border: 1px solid rgba(255,255,255,0.28); border-radius: 3px;
  color: inherit; font-size: 9px; font-weight: 700; line-height: 1.5;
}
.nav-group-label, .nav-cluster-toggle { gap: 7px; }
.nav-group-label .maintenance-tag, .nav-cluster-toggle .maintenance-tag { margin-left: auto; }
.logout-btn {
  margin: 12px; padding: 9px; border: 1px solid rgba(255,255,255,0.25);
  background: transparent; color: rgba(255,255,255,0.8); border-radius: 6px; cursor: pointer;
}
.logout-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

.main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-content: start; }
.topbar {
  grid-column: 1 / -1;
  position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--border);
  padding: 14px 28px; font-size: 14px; color: var(--primary); font-weight: 700;
}
.content { grid-column: 1; padding: 48px; max-width: 1200px; margin: 0; justify-self: center; width: 100%; line-height: 1.55; }
.content h1 { font-size: 22px; margin: 0 0 8px; color: var(--primary); }
.content h2, .content h3, .content h4, .content h5 { color: var(--primary); margin-top: 24px; }
.content p { color: var(--fg2); margin: 4px 0; }
.content code {
  background: #dfe3ee; padding: 1px 5px; border-radius: 4px; font-size: 0.92em;
}
.content ul, .content ol { padding-left: 20px; }
.content img { max-width: 100%; height: auto; border-radius: 8px; margin: 0; display: block; }
.content table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; }
.content th, .content td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.content thead th { background: #eef0f5; color: var(--primary); }
.content tbody tr:nth-child(even) { background: #fafbfd; }
.content pre {
  background: #1e2530; color: #e6e9ef; padding: 14px 16px; border-radius: 8px;
  overflow-x: auto; font-size: 12.5px; margin: 14px 0;
}
.content pre code { background: none; padding: 0; color: inherit; }
.content pre.mermaid {
  background: transparent; border: 0; padding: 4px;
  display: flex; justify-content: center; overflow-x: auto;
}

.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.auth-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 32px; width: 320px; display: flex; flex-direction: column; gap: 12px;
}
.auth-card h1 { font-size: 18px; margin: 0; color: var(--primary); }
.auth-sub { margin: 0; color: var(--fg3); font-size: 13px; }
.auth-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--fg2); }
.auth-card input {
  padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px;
}
.auth-card button {
  margin-top: 6px; padding: 10px; border: none; border-radius: 6px;
  background: var(--primary); color: #fff; font-weight: 700; cursor: pointer;
}
.auth-error { color: #b3261e; font-size: 13px; min-height: 18px; margin: 0; }
.auth-links {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border);
  color: var(--fg3); font-size: 12px;
}
.auth-links a, .auth-links a:visited {
  display: inline-flex; align-items: center; min-height: 28px; padding: 2px 4px;
  border-radius: 4px; color: var(--fg2); font-weight: 500; text-decoration: none;
}
.auth-links a:hover { color: var(--primary); background: var(--bg); }
.auth-links a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

#editForm { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
#editForm label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--fg2); }
#editForm input, #editForm textarea {
  padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 14px;
}
#editForm textarea { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.upload-row { display: flex; align-items: center; gap: 10px; }
.upload-row button {
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 6px;
  background: #fff; color: var(--primary); font-weight: 600; cursor: pointer;
}
.upload-row span { font-size: 12px; color: var(--fg3); }
#editForm button[type="submit"] {
  align-self: flex-start; padding: 9px 18px; border: none; border-radius: 6px;
  background: var(--primary); color: #fff; font-weight: 700; cursor: pointer;
}

/* 文件標題／簡介 hero 區塊（樣式參考 cdp_all_in_one_tabs.html），H1 只保留給文件標題使用 */
.doc-hero { margin-bottom: 0; }
.content .doc-hero > :last-child { margin-bottom: 0; }
.content .doc-hero h1 {
  font-size: 19px; font-weight: 750; color: #0f172a; letter-spacing: -0.02em; margin: 0 0 5px;
}
.doc-hero .doc-intro { font-size: 13px; color: #475569; line-height: 1.6; margin: 0; }
.doc-hero .doc-intro p { color: #475569; margin: 0 0 6px; }
.doc-divider { border: none; border-top: 1px solid #e5e7eb; margin: 14px 0 20px; }

.content mark, mark {
  background: #fef08a; color: inherit; padding: 0 3px; border-radius: 3px;
}

/* 側邊欄全文搜尋 */
.nav-search { padding: 12px 10px 6px; }
.nav-search input {
  width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08); color: #fff; font-size: 12.5px; font-family: inherit;
}
.nav-search input::placeholder { color: rgba(255,255,255,0.5); }
.nav-search input:focus { outline: none; border-color: rgba(255,255,255,0.5); }
.search-results { padding: 0 10px 10px; }
.search-result-item {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: rgba(255,255,255,0.82);
  cursor: pointer; font-size: 12.5px; margin-bottom: 2px; font-family: inherit;
}
.search-result-item:hover { background: rgba(255,255,255,0.1); color: #fff; }
.search-result-item:disabled { cursor: not-allowed; color: rgba(255,255,255,0.5); }
.search-result-item:disabled:hover { background: transparent; color: rgba(255,255,255,0.5); }
.search-result-item .srm-doc {
  font-size: 10px; color: rgba(255,255,255,0.5); display: block; margin-bottom: 2px;
}
.search-empty { padding: 6px 10px; font-size: 12px; color: rgba(255,255,255,0.5); }

/* 後台編輯器 — Notion 風格工具列 */
.editor-toolbar { display: flex; flex-wrap: wrap; gap: 6px; }
.editor-toolbar button {
  padding: 5px 10px; border: 1px solid var(--border); background: #fff; border-radius: 5px;
  font-size: 12.5px; cursor: pointer; color: var(--fg2); font-family: inherit;
}
.editor-toolbar button:hover { background: #eef0f5; color: var(--primary); }
.editor-toolbar button.tb-bold { font-weight: 700; }
.editor-toolbar button.tb-mark { background: #fef08a; border-color: #eab308; color: #713f12; }
.editor-toolbar .tb-sep { width: 1px; background: var(--border); margin: 2px 4px; }

/* 文件簡介編輯區、批次匯入區塊共用卡片樣式 */
.doc-intro-box, .bulk-import-box, .quick-create-box {
  border: 1px solid var(--border); border-radius: 8px; padding: 14px; background: #fafbfd;
  display: flex; flex-direction: column; gap: 8px;
}
.doc-intro-box[hidden], .bulk-import-box[hidden], .quick-create-box[hidden] { display: none; }
.doc-intro-box h3, .bulk-import-box h3, .quick-create-box h3 {
  margin: 0; font-size: 13px; color: var(--primary);
}
.doc-intro-box textarea, .bulk-import-box textarea {
  width: 100%; min-height: 70px; padding: 9px 10px; border: 1px solid var(--border);
  border-radius: 6px; font-family: inherit; font-size: 13px;
}
.bulk-import-box textarea { min-height: 140px; font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.doc-intro-box .row-actions, .bulk-import-box .row-actions, .quick-create-box .row-actions {
  display: flex; align-items: center; gap: 10px;
}
.doc-intro-box button, .bulk-import-box button, .quick-create-box button {
  align-self: flex-start; padding: 7px 14px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--primary); color: #fff; font-weight: 600; cursor: pointer; font-size: 13px;
}
.doc-intro-box span.status, .bulk-import-box span.status, .quick-create-box span.status {
  font-size: 12px; color: var(--fg3);
}
.quick-create-box { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
.quick-create-box.open { flex-direction: column; align-items: stretch; }
.quick-create-box input, .quick-create-box select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 13px;
}
.quick-create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* 歷史版本 modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex;
  align-items: flex-start; justify-content: center; padding-top: 8vh; z-index: 50;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  background: #fff; border-radius: 10px; padding: 20px; width: 560px; max-width: 92vw;
  max-height: 76vh; overflow-y: auto;
}
.modal-box h3 { margin: 0 0 4px; color: var(--primary); }
.modal-close { float: right; border: none; background: none; font-size: 18px; cursor: pointer; color: var(--fg3); }
.revision-item {
  border-bottom: 1px solid var(--border); padding: 10px 0; display: flex;
  justify-content: space-between; gap: 10px; align-items: flex-start;
}
.revision-item:last-child { border-bottom: none; }
.revision-item .rev-main { flex: 1; min-width: 0; }
.revision-item .rev-meta { font-size: 12px; color: var(--fg3); }
.revision-item .rev-snippet {
  font-size: 12.5px; color: var(--fg2); margin-top: 4px; white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.revision-item button {
  flex-shrink: 0; padding: 5px 12px; border: 1px solid var(--border); border-radius: 5px;
  background: #fff; cursor: pointer; color: var(--primary); font-weight: 600; font-size: 12.5px;
}
.revision-item button:hover { background: #eef0f5; }

/* Content component system, aligned with cdp_all_in_one_tabs.html */
.content .page-title {
  font-size: 19px; font-weight: 750; color: #0f172a; letter-spacing: -0.02em; margin: 0 0 5px;
}
.content .page-meta {
  font-size: 12px; color: #64748b; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.content .page-meta p { margin: 0; color: #64748b; }
.content .page-meta span { position: relative; }
.content .page-meta span + span { padding-left: 15px; }
.content .page-meta span + span::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 11px; background: var(--border);
}
.content .page-divider { border: none; border-top: 1px solid #e5e7eb; margin: 24px 0; height: 0; }
.content .section-label {
  font-size: 14px; font-weight: 750; color: #0f172a;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; letter-spacing: 0;
}
.content .section-mini-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: #6b7280; margin-top: 12px;
}
.content .section-mini-title.first { margin-top: 0; }
.content .page-copy { font-size: 12px; color: #475569; line-height: 1.65; }
.content .page-note { font-size: 10.5px; color: #7b8490; line-height: 1.55; }
.content .page-copy p { margin: 0 0 8px; color: inherit; }
.content .page-copy p:last-child { margin-bottom: 0; }
.content .page-copy ul, .content .page-copy ol { margin: 6px 0; padding-left: 24px; }
.content .page-copy li + li { margin-top: 3px; }
.content a:not(.content-action) { color: #006eff; }
.content-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.canvas-grid { margin: 24px 0; }
.content-grid-column { grid-column: span var(--span); min-width: 0; }
/* Front-end reading view owns all vertical rhythm through gap: 48px between
   sections, 16px between components inside a section (no per-block margins). */
.content:has(> .content-grid) { display: flex; flex-direction: column; gap: 48px; }
.content .content-grid-column { display: flex; flex-direction: column; gap: 16px; }
.content .content-grid-column > pre { margin: 0; }
/* Rich-text headings inside a block document defer to gap; H3+ keep a 12px lead like .section-mini-title. */
.content:has(> .content-grid) :is(h2, h3, h4, h5) { margin-top: 0; margin-bottom: 0; }
.content:has(> .content-grid) :is(h3, h4, h5) { margin-top: 12px; }

.content-anchor-nav {
  grid-column: 2;
  width: 240px;
  position: sticky;
  top: 62px;
  align-self: start;
  max-height: calc(100vh - 76px);
  overflow: auto;
  padding: 24px 14px 18px 4px;
}
.content-anchor-nav[hidden] { display: none; }
.content-anchor-inner {
  border-left: 1px solid #e5e7eb;
  padding-left: 12px;
  display: grid;
  gap: 8px;
}
.content-anchor-inner strong {
  color: #9ca3af;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#contentAnchorList { display: grid; gap: 2px; }
.content-anchor-link {
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: #757575;
  font: 500 11px var(--font);
  text-align: left;
  padding: 4px 2px 4px 8px;
  border-radius: 0;
  cursor: pointer;
}
.content-anchor-link.level-h3 {
  font-size: 10px;
  padding-left: 20px;
  opacity: 0.95;
}
.content-anchor-link:hover {
  color: #006EFF;
  background: rgba(0, 110, 255, 0.08);
}
.content-anchor-link.active {
  color: #006EFF;
  border-left-color: #006EFF;
  background: rgba(0, 110, 255, 0.08);
}
.content .section-label,
.content h2 { scroll-margin-top: 84px; }

.content .stream-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.content .stream-table {
  width: 100%; border: 0; border-collapse: separate; border-spacing: 0; margin: 0; font-size: 12px;
}
.content .stream-table.table-custom-widths { table-layout: fixed; }
.content .stream-table.table-custom-widths th, .content .stream-table.table-custom-widths td { overflow-wrap: anywhere; }
.content .stream-table th {
  background: var(--primary); color: #fff; padding: 9px 12px; font-size: 10.5px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border: 0; text-align: left;
}
.content .stream-table td { padding: 7px 12px; border: 0; border-bottom: 1px solid #eef0f4; vertical-align: top; }
.content .stream-table tbody tr:not(.src-head):nth-child(odd) td { background: #fff; }
.content .stream-table tbody tr:not(.src-head):nth-child(even) td { background: #f5f6f8; }
.content .stream-table tbody tr:hover td { background: var(--bg); }
.content .stream-table tbody tr.src-head td,
.content .stream-table tbody tr.src-head:nth-child(even) td,
.content .stream-table tbody tr.src-head:hover td {
  background: #e0f2fe; color: #0369a1; font-size: 11px; font-weight: 700;
}
.content .stream-table td.cell-tone-green,
.content .stream-table tbody tr:nth-child(even) td.cell-tone-green,
.content .stream-table tbody tr:hover td.cell-tone-green { background: #eaf8ef !important; color: #166534; font-weight: 600; }
.content .stream-table td.cell-tone-red,
.content .stream-table tbody tr:nth-child(even) td.cell-tone-red,
.content .stream-table tbody tr:hover td.cell-tone-red { background: #fdeeee !important; color: #991b1b; font-weight: 600; }
.dtype-tag {
  display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 4px;
  background: #f3f4f6; color: #4b5563; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.dtype-Text { background: #f0fdf4; color: #15803d; }
.dtype-Number, .dtype-Currency, .dtype-Percent { background: #eff6ff; color: #1d4ed8; }
.dtype-Date, .dtype-DateTime { background: #fef3c7; color: #92400e; }
.dtype-Boolean { background: #fdf4ff; color: #6d28d9; }
.dtype-Email { background: #fff1f2; color: #9f1239; }
.dtype-Phone { background: #f0f9ff; color: #0369a1; }
.dtype-Url { background: #f3f4f6; color: #374151; }
.text-black { color: inherit; }
.text-red { color: #c0321c; }
.text-blue { color: #2563a8; }
.text-green { color: #16834b; }
.text-note { color: #7b8490; font-size: 0.875em; line-height: 1.5; }
.inline-tag {
  display: inline; padding: 1px 5px; border: 1px solid #d9dee7; border-radius: 4px;
  background: #f3f4f6; color: #394150; font: 0.9em ui-monospace, SFMono-Regular, Menlo, monospace;
}

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.content .stat-card {
  background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px;
}
.content .stat-n { font-size: 22px; font-weight: 750; color: var(--primary); letter-spacing: -0.02em; line-height: 1.1; }
.content .stat-l { font-size: 11px; color: #6b7280; margin-top: 3px; }
.content .stat-palette-blue .stat-card { border-color: #bfd7f7; background: #f5f9ff; }
.content .stat-palette-blue .stat-n { color: #006eff; }
.content .stat-palette-green .stat-card { border-color: #b9dfcc; background: #f3fbf7; }
.content .stat-palette-green .stat-n { color: #087a4b; }
.content .stat-palette-neutral .stat-card { border-color: #d1d5db; background: #f7f8fa; }
.content .stat-palette-neutral .stat-n { color: #303844; }
.content .source-block {
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff;
}
.content .source-header { border-radius: 7px 7px 0 0; background: var(--primary); color: #fff; padding: 10px 14px; display: flex; align-items: center; gap: 9px; }
.content .source-header > .material-symbols-rounded { font-size: 20px; }
.content .source-header-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.content .source-header-copy strong { font-size: 13px; line-height: 1.25; }
.content .source-header-copy span { color: rgba(255,255,255,0.72); font-size: 9px; line-height: 1.25; }
.content .source-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.content .source-columns-1 { grid-template-columns: 1fr; }
.content .source-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.content .source-columns > section { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; min-width: 0; }
.content .source-columns > section + section { border-left: 1px solid var(--border); }
.content .source-columns > section > :last-child { margin-bottom: 0; }
/* Bare Source Block: a chrome-free split-column container (no card, header, border or inset). */
.content .source-block.source-bare { border: 0; background: transparent; border-radius: 0; overflow: visible; }
.content .source-bare .source-columns { gap: 16px; }
.content .source-bare .source-columns > section { padding: 0; }
.content .source-bare .source-columns > section + section { border-left: 0; }

.note-block {
  display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px;
  border: 1px solid var(--note-border, #d6e2f4); border-left: 3px solid var(--note-accent, #1f4e9c);
  border-radius: 0 6px 6px 0; background: var(--note-bg, #f6f9fd);
}
.note-block .note-block-icon { font-size: 16px; line-height: 1.5; color: var(--note-accent, #1f4e9c); flex: none; }
.note-block .note-block-copy { min-width: 0; flex: 1; }
.note-block .note-block-title { font-size: 12px; font-weight: 700; line-height: 1.65; color: var(--note-accent, #1f4e9c); margin-bottom: 1px; letter-spacing: 0; }
.note-block .note-block-title:empty { display: none; }
.canvas-block .note-block-title.is-title-hidden,
.canvas-column .source-column-title.is-title-hidden { display: none; }
.note-block .note-block-body { font-size: 12px; color: #475569; line-height: 1.65; }
.note-block .note-block-body p { margin: 0 0 6px; }
.note-block .note-block-body > :last-child { margin-bottom: 0; }
.note-block .note-block-body a { color: var(--note-accent, #1f4e9c); }
.note-info { --note-border: #d6e2f4; --note-bg: #f6f9fd; --note-accent: #1f4e9c; }
.note-success { --note-border: #cbe7d8; --note-bg: #f4faf7; --note-accent: #1a7a4d; }
.note-warning { --note-border: #ecdcb4; --note-bg: #fdfaf1; --note-accent: #9a6a15; }
.note-danger { --note-border: #eccdcd; --note-bg: #fdf6f6; --note-accent: #b3383a; }
.note-neutral { --note-border: #dbdee3; --note-bg: #eef0f2; --note-accent: #5b6472; }
.note-neutral .note-block-title { color: #111827; }

.steps-block { list-style: none; padding: 0; }
.steps-block .step-item { position: relative; display: flex; gap: 12px; padding: 0 0 14px; }
.steps-block .step-item:last-child { padding-bottom: 0; }
.steps-block .step-item::before {
  content: ""; position: absolute; left: 10.5px; top: 22px; bottom: 0; width: 1px; background: var(--border);
}
.steps-block .step-item:last-child::before { display: none; }
.steps-block .step-index {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff;
  font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 1;
}
.steps-block .step-copy { min-width: 0; flex: 1; padding-top: 1px; }
.steps-block .step-title { font-size: 12px; font-weight: 700; line-height: 1.65; color: #0f172a; margin-bottom: 1px; }
.steps-block .step-title:empty { display: none; }
.steps-block .step-body { font-size: 12px; color: #475569; line-height: 1.65; }
.steps-block .step-body p { margin: 0 0 6px; }
.steps-block .step-body > :last-child { margin-bottom: 0; }

.accordion-block { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
.accordion-block .accordion-item { border-bottom: 1px solid var(--border); }
.accordion-block .accordion-item:last-child { border-bottom: none; }
.accordion-block .accordion-item[open] .accordion-q { background: #eef4ff; }
.accordion-block .accordion-q {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; font-size: 12px; font-weight: 700; line-height: 1.65; color: #0f172a; background: #fff;
  transition: background 120ms ease;
}
.accordion-block .accordion-q::-webkit-details-marker { display: none; }
.accordion-block .accordion-q:hover { background: #f7f9fc; }
.accordion-block .accordion-q:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.accordion-block .accordion-q-text { flex: 1; min-width: 0; }
.accordion-block .accordion-q-icon { font-size: 20px; color: #94a3b8; transition: transform 150ms ease, color 120ms ease; flex: none; }
.accordion-block .accordion-q:hover .accordion-q-icon { color: var(--primary); }
.accordion-block .accordion-item[open] .accordion-q-icon { transform: rotate(180deg); color: var(--primary); }
.accordion-block .accordion-a { padding: 0 14px 14px; font-size: 12px; color: #475569; line-height: 1.65; animation: pm-accordion-fade 160ms ease; }
.accordion-block .accordion-a p { margin: 0 0 6px; }
.accordion-block .accordion-a > :last-child { margin-bottom: 0; }
@keyframes pm-accordion-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.accordion-editing .accordion-item { display: block; }
.accordion-editing .accordion-q { cursor: text; }
.accordion-editing .accordion-a { padding-top: 8px; animation: none; }
.list-item-remove {
  flex: none; width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 6px; background: #fff;
  color: var(--fg3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.list-item-remove:hover { background: #fdecec; color: #c53030; border-color: #f0c9c9; }
.list-item-remove .material-symbols-rounded { font-size: 16px; }
.canvas-block-stats .stat-card { position: relative; }
.canvas-block-stats .stat-remove { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; opacity: 0; transition: opacity 120ms ease; }
.canvas-block-stats .stat-card:hover .stat-remove { opacity: 1; }

.content-action {
  display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 6px;
  border: 1px solid var(--primary); background: var(--primary); color: #fff; font: 600 12px var(--font);
  text-decoration: none; cursor: pointer;
}
.content-action:hover { background: #163461; color: #fff; }
.content-action-wrap { display: flex; width: 100%; }
.content-action-wrap.action-align-left { justify-content: flex-start; }
.content-action-wrap.action-align-center { justify-content: center; }
.content-action-wrap.action-align-right { justify-content: flex-end; }
.content-action.action-blue { border-color: #006eff; color: #fff; }
.content-action.action-blue.action-solid { background: #006eff; }
.content-action.action-blue.action-solid:hover { border-color: #0058cc; background: #0058cc; }
.content-action.action-blue.action-outline { background: #fff; color: #006eff; }
.content-action.action-blue.action-outline:hover { background: #edf5ff; color: #0058cc; }
.content-action.action-neutral { border-color: #2b2b2b; color: #fff; }
.content-action.action-neutral.action-solid { background: #2b2b2b; }
.content-action.action-neutral.action-solid:hover { border-color: #111; background: #111; }
.content-action.action-neutral.action-outline { border-color: #757575; background: #fff; color: #2b2b2b; }
.content-action.action-neutral.action-outline:hover { border-color: #2b2b2b; background: #f4f5f9; color: #111; }
.content-modal-overlay {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.45); padding: 20px;
}
.content-image-zoomable { cursor: zoom-in; }
.content-mermaid-zoomable { cursor: zoom-in; }
.content-mermaid-zoomable:focus-visible {
  outline: 3px solid rgba(0, 110, 255, 0.35);
  outline-offset: 4px;
}
.content-image-overlay {
  position: fixed;
  inset: 0;
  z-index: 82;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.content-image-dialog {
  position: relative;
  max-width: min(1200px, 94vw);
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-image-dialog img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.content-mermaid-dialog {
  position: relative;
  width: min(1600px, 94vw);
  max-height: 90vh;
  overflow: auto;
  padding: 24px;
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.content-mermaid-dialog svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 720px;
  margin: auto;
}
.content-mermaid-dialog .content-image-close {
  top: 8px;
  right: 8px;
  z-index: 1;
}
.content-image-close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #0c2451;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.content-modal-overlay .modal-box {
  background: #fff; border-radius: 12px; padding: 20px 22px; max-width: 560px; width: 90vw;
  max-height: 82vh; overflow-y: auto; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.fx-page { min-width: 0; }
.fx-ctrl { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 0 0 10px; }
.fx-search {
  flex: 1 1 260px; min-width: 220px; height: 36px; padding: 7px 12px; border: 1.5px solid #d1d5db;
  border-radius: 8px; font: 13px var(--font); outline: none;
}
.fx-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(12,36,81,0.08); }
.fx-filter { display: grid; flex: 0 1 180px; min-width: 130px; gap: 3px; }
.fx-filter span { overflow: hidden; color: var(--fg3); font-size: 10px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.fx-filter select { width: 100%; height: 36px; padding: 6px 28px 6px 9px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: var(--fg); font: 12px var(--font); outline: none; }
.fx-filter select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(12,36,81,0.08); }
.fx-count { font-size: 12px; color: #6b7280; margin-left: auto; white-space: nowrap; }
.fx-wrap { overflow: auto; max-height: 68vh; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.fx-wrap .stream-table th { position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.fx-wrap .stream-table td { white-space: nowrap; }

/* Visual block editor */
.visual-editor-shell { border: 1px solid var(--border); border-radius: 8px; background: #fff; overflow: hidden; }
.visual-editor-heading {
  padding: 10px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px; color: var(--primary); font-size: 13px;
}
.visual-editor-heading span { color: var(--fg3); font-size: 11px; }
#visualEditor { background: #f7f8fb; }
.ve-modebar, .ve-rich-toolbar {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #fff; border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--fg2); position: sticky; top: 47px; z-index: 5;
}
.ve-rich-toolbar { top: 86px; flex-wrap: wrap; }
.ve-rich-toolbar button, .ve-add-grid button, .ve-block button, .source-editor-details button {
  padding: 5px 9px; border: 1px solid var(--border); border-radius: 5px; background: #fff;
  color: var(--primary); font: 600 12px var(--font); cursor: pointer;
}
.ve-rich-toolbar button:hover, .ve-block button:hover { background: #eef0f5; }
.ve-canvas { padding: 12px; }
.ve-row { border: 1px dashed #b9c2d0; border-radius: 7px; background: #eef1f6; padding: 8px; margin-bottom: 10px; }
.ve-row-tools { display: flex; justify-content: space-between; align-items: center; color: #64748b; font-size: 10px; margin-bottom: 6px; }
.ve-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.ve-column { grid-column: span var(--span); min-width: 0; border-radius: 6px; }
.ve-column-drop { min-height: 60px; }
.ve-width { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #64748b; margin: 0 0 5px; }
.ve-width input { flex: 1; }
.ve-column > select { width: 100%; padding: 6px; border: 1px dashed #aab4c4; background: #fff; color: #475569; }
.ve-block { border: 1px solid var(--border); border-radius: 7px; background: #fff; margin-bottom: 8px; overflow: hidden; }
.ve-block-head { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-bottom: 1px solid #edf0f4; color: #475569; font-size: 11px; }
.ve-block-head strong { flex: 1; }
.ve-drag { cursor: grab; color: #94a3b8; }
.ve-block-body { padding: 9px; display: grid; gap: 7px; }
.ve-block-body input, .ve-block-body select, .ve-block-body textarea, .ve-modebar select {
  width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 5px;
  font: 12px var(--font); color: var(--fg);
}
.ve-block-body textarea { min-height: 100px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ve-mermaid-preview {
  min-height: 120px; margin: 0; padding: 12px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--fg2); overflow: auto;
}
.ve-mermaid-preview svg { max-width: 100%; height: auto; }
.ve-rich { min-height: 54px; padding: 9px; border: 1px solid var(--border); border-radius: 5px; background: #fff; outline: none; }
.ve-rich:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(12,36,81,0.08); }
.ve-rich.section-label { font-size: 14px; font-weight: 750; color: #0f172a; }
.ve-rich.section-mini-title { font-size: 10px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.07em; }
.ve-image-preview { max-width: 100%; max-height: 220px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; }
.ve-table-wrap { overflow: auto; }
.ve-edit-table th, .ve-edit-table td { min-width: 110px; outline: none; }
.ve-edit-table [contenteditable="true"]:focus { box-shadow: inset 0 0 0 2px #2563a8; }
.ve-stat-list { display: grid; gap: 5px; }
.ve-fx-ctrl { display: grid; grid-template-columns: 2fr 1fr; padding: 0; }
.ve-stat-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 5px; }
.ve-add-grid { padding: 0 12px 12px; display: flex; align-items: center; gap: 6px; font-size: 11px; color: #64748b; }
.source-editor-details { border: 1px solid var(--border); border-radius: 7px; padding: 9px; color: var(--fg2); font-size: 12px; }
.source-editor-details summary { cursor: pointer; font-weight: 600; color: var(--primary); }
.source-editor-details textarea { width: 100%; margin: 9px 0; }

@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; max-height: 42vh; }
  .main { display: flex; flex-direction: column; }
  .content { padding: 18px 15px 40px; }
  .content-anchor-nav { display: none !important; }
  .content-grid-column, .ve-column { grid-column: 1 / -1; }
  .content .source-columns { grid-template-columns: 1fr; }
  .content .source-columns > section + section { border-left: 0; border-top: 1px solid var(--border); }
  .content .source-bare .source-columns > section + section { border-top: 0; }
  .visual-editor-heading { align-items: flex-start; flex-direction: column; }
}

/* Admin content studio */
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./vendor/material-symbols-rounded.ttf") format("truetype");
}
.admin-builder-body {
  --studio-ink: var(--fg);
  --studio-muted: var(--fg3);
  --studio-line: var(--border);
  --studio-panel: var(--card);
  --studio-canvas: var(--bg);
  --studio-accent: #006EFF;
  --studio-accent-hover: #0058cc;
  --studio-nav: #111111;
  --studio-soft: rgba(0,110,255,0.08);
  --studio-subtle: #fafbfd;
  --studio-action: #006EFF;
  --studio-action-hover: #0058cc;
  --studio-action-ink: #ffffff;
  --studio-success: #d0e6d4;
  --studio-error: #ffeeee;
  overflow: hidden;
  background: var(--studio-canvas);
}
.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 19px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
.builder-topbar {
  height: 58px; display: grid; grid-template-columns: minmax(180px, 1fr) auto;
  align-items: center; gap: 18px; padding: 0 16px; background: var(--studio-nav); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.2); position: relative; z-index: 30;
}
.builder-brand { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.builder-brand strong { font-size: 15px; }
.builder-brand span { font-size: 10px; color: rgba(255,255,255,0.54); text-transform: uppercase; }
.builder-project-switcher { min-width: 0; display: flex; align-items: center; gap: 10px; }
.builder-project-switcher label { color: rgba(255,255,255,0.54); font-size: 11px; white-space: nowrap; }
.builder-project-switcher select {
  width: min(560px, 100%); height: 34px; padding: 0 34px 0 11px; border: 1px solid rgba(255,255,255,0.25);
  border-radius: 5px; background: rgba(255,255,255,0.08); color: #fff; font: 12px var(--font);
}
.builder-top-actions { display: flex; align-items: center; gap: 7px; }
.builder-top-actions button { height: 34px; padding: 0 12px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 650 12px var(--font); cursor: pointer; }
.builder-top-actions .material-symbols-rounded { font-size: 17px; }
.builder-quiet-btn { border: 1px solid rgba(255,255,255,0.25); background: transparent; color: rgba(255,255,255,0.82); }
.builder-quiet-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.builder-save-btn { border: 1px solid var(--studio-action); background: var(--studio-action); color: var(--studio-action-ink); }
.builder-save-btn:hover { border-color: var(--studio-action-hover); background: var(--studio-action-hover); }
.builder-status-control { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.7); font-size: 10px; }
.builder-status-control select {
  height: 34px; padding: 0 28px 0 9px; border: 1px solid rgba(255,255,255,0.25); border-radius: 5px;
  background: rgba(255,255,255,0.08); color: #fff; font: 650 11px var(--font);
}
.builder-icon-btn { width: 34px; padding: 0 !important; border: 1px solid rgba(255,255,255,0.25); background: transparent; color: rgba(255,255,255,0.82); font-size: 17px !important; }
#saveStatus { min-width: 72px; text-align: right; font-size: 11px; color: rgba(255,255,255,0.72); }
#saveStatus[data-tone="success"] { color: var(--studio-success); }
#saveStatus[data-tone="error"] { color: var(--studio-error); }

.admin-builder-body[data-view="overview"] .editor-only,
.admin-builder-body[data-view="overview"] #editorPageSwitcher { display: none !important; }
.admin-builder-body[data-view="overview"] .builder-topbar { grid-template-columns: 1fr auto; }
.breadcrumb-bar {
  height: 36px; padding: 0 18px; border-bottom: 1px solid var(--studio-line); background: #fff;
  display: flex; align-items: center; gap: 6px; color: var(--studio-muted); font-size: 10px;
}
.breadcrumb-bar button {
  min-height: 26px; padding: 0 6px; border: 0; border-radius: 4px; background: transparent; color: var(--studio-muted);
  display: inline-flex; align-items: center; gap: 5px; font: 650 10px var(--font); cursor: pointer;
}
.breadcrumb-bar button:hover { background: var(--studio-soft); color: var(--studio-accent); }
#overviewBreadcrumb { color: var(--studio-accent); }
.admin-builder-body[data-view="overview"] #overviewBreadcrumb { background: var(--studio-soft); }
.breadcrumb-bar button .material-symbols-rounded { font-size: 15px; }
.breadcrumb-separator { font-family: "Material Symbols Rounded"; font-size: 15px; }
.breadcrumb-current { color: var(--studio-ink); font-weight: 650; }

.overview-workspace {
  height: calc(100vh - 94px); overflow-y: auto; overflow-x: hidden; display: block;
  background: var(--studio-canvas);
}
.overview-workspace[hidden], #editForm[hidden], .overview-form[hidden], .overview-detail-empty[hidden] { display: none !important; }
.overview-main { min-width: 0; padding: 32px clamp(24px, 5vw, 72px) 60px; }
.overview-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.overview-header h1 { margin: 3px 0 5px; color: var(--studio-ink); font-size: 23px; letter-spacing: 0; }
.overview-header p { margin: 0; color: var(--studio-muted); font-size: 11px; }
.overview-kicker { color: var(--studio-accent); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.08em; }
.overview-header-actions { display: flex; gap: 7px; }
.overview-header-actions button, .overview-form button {
  min-height: 34px; padding: 7px 11px; border: 1px solid var(--studio-line); border-radius: 5px; background: #fff; color: var(--studio-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; font: 650 11px var(--font); cursor: pointer;
}
.overview-header-actions button:hover, .overview-form button:hover { border-color: var(--studio-accent); color: var(--studio-accent); }
.overview-header-actions .overview-tool-button { margin-left: 5px; border-style: dashed; background: transparent; color: var(--studio-muted); }
.overview-header-actions .material-symbols-rounded, .overview-form button .material-symbols-rounded { font-size: 16px; }
.document-tree { border-top: 1px solid var(--studio-line); }
.document-tree-group { border-bottom: 1px solid var(--studio-line); }
.document-tree-document {
  width: 100%; min-height: 58px; padding: 9px 11px; border: 0; background: transparent; color: var(--studio-ink);
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; text-align: left;
}
.document-tree-document:hover { background: #f7f8fa; }
.document-tree-document.active { background: #dbeafe; box-shadow: inset 3px 0 var(--studio-accent); }
.document-tree-document.active .document-tree-copy strong { color: var(--studio-accent); }
.document-tree-document > .material-symbols-rounded { color: var(--studio-ink); font-size: 20px; }
.document-tree-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.document-tree-copy strong { overflow: hidden; color: var(--studio-ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.document-tree-titleline { min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.document-tree-titleline strong { min-width: 0; }
.document-tree-copy > span { overflow: hidden; color: var(--studio-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.document-tree-meta { display: flex; align-items: center; gap: 6px; }
.document-status-tag {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #2ca34a;
}
.document-status-tag.maintenance { background: #f0b429; }
.document-tree-branches { position: relative; margin: 0 12px 10px 26px; padding-left: 18px; }
.document-tree-branches::before { content: ""; position: absolute; top: 0; bottom: 17px; left: 5px; width: 1px; background: #c9d2dc; }
.document-tree-cluster-group { position: relative; }
.document-tree-cluster { min-height: 64px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; border-radius: 0; }
.document-tree-cluster:hover { background: #f7f8fa; }
.document-tree-cluster.active { background: #dbeafe; box-shadow: inset 3px 0 var(--studio-accent); }
.document-tree-cluster.active .document-tree-copy strong { color: var(--studio-accent); }
.document-tree-toggle, .document-tree-cluster-main { border: 0; background: transparent; color: var(--studio-muted); }
.document-tree-toggle { width: 30px; height: 64px; padding: 0; display: grid; place-items: center; }
.document-tree-toggle .material-symbols-rounded { font-size: 17px; }
.document-tree-cluster-main { min-width: 0; min-height: 64px; padding: 5px 7px 5px 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 5px; text-align: left; }
.document-tree-cluster-main > .material-symbols-rounded { color: var(--studio-accent); font-size: 17px; }
.document-tree-files { position: relative; margin-left: 58px; padding-left: 20px; }
.document-tree-files::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: #c9d2dc; }
.document-tree-files[hidden] { display: none; }
.document-tree-section { position: relative; min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.document-tree-section::before { content: ""; position: absolute; left: -14px; top: 0; bottom: 0; width: 1px; background: #c9d2dc; }
.document-tree-section::after { content: ""; position: absolute; left: -14px; top: 50%; width: 14px; height: 1px; background: #c9d2dc; }
.document-tree-section:last-child::before { bottom: 50%; }
.document-tree-section-main { min-width: 0; min-height: 64px; padding: 5px 7px 5px 17px; border: 0; background: transparent; display: flex; align-items: center; text-align: left; }
.tree-branch { display: none; }
.document-tree-section:hover { background: #f7f8fa; }
.document-tree-section.active { background: #dbeafe; box-shadow: inset 3px 0 var(--studio-accent); }
.document-tree-section.active .document-tree-copy strong { color: var(--studio-accent); }
.document-tree-actions { padding-right: 7px; display: inline-flex; align-items: center; gap: 2px; cursor: grab; }
.document-tree-drag-handle {
  min-width: 24px; height: 28px; padding: 0 2px; border-radius: 4px;
  color: var(--studio-muted); font-size: 17px; opacity: 0.72;
  display: inline-flex; align-items: center; justify-content: center;
}
.document-tree-actions:active { cursor: grabbing; }
.document-tree-document.active .document-tree-drag-handle,
.document-tree-cluster.active .document-tree-drag-handle,
.document-tree-section.active .document-tree-drag-handle {
  color: var(--studio-accent);
  background: rgba(0,110,255,0.12);
}
.document-tree-action {
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 4px; background: transparent;
  color: var(--studio-muted); display: grid; place-items: center; cursor: pointer;
}
.document-tree-document, .document-tree-cluster, .document-tree-section { cursor: grab; }
.document-tree-dragging { opacity: 0.45; }
.document-tree-drop-before { box-shadow: inset 0 2px 0 var(--studio-accent); }
.document-tree-drop-after { box-shadow: inset 0 -2px 0 var(--studio-accent); }
.document-tree-drop-inside { box-shadow: inset 0 0 0 2px rgba(0,110,255,0.45); background: #eef5ff; }
.document-tree-document.active.document-tree-dragging,
.document-tree-cluster.active.document-tree-dragging,
.document-tree-section.active.document-tree-dragging { opacity: 1; }
.document-tree-document.active.document-tree-drop-before,
.document-tree-cluster.active.document-tree-drop-before,
.document-tree-section.active.document-tree-drop-before { box-shadow: inset 3px 0 var(--studio-accent), inset 0 2px 0 var(--studio-accent); }
.document-tree-document.active.document-tree-drop-after,
.document-tree-cluster.active.document-tree-drop-after,
.document-tree-section.active.document-tree-drop-after { box-shadow: inset 3px 0 var(--studio-accent), inset 0 -2px 0 var(--studio-accent); }
.document-tree-action:hover { background: var(--studio-soft); color: var(--studio-accent); }
.document-tree-action:disabled { cursor: default; opacity: 0.28; }
.document-tree-action:disabled:hover { background: transparent; color: var(--studio-muted); }
.document-tree-action.danger:hover { background: #fff1f1; color: #c43838; }
.document-tree-action .material-symbols-rounded { font-size: 16px; }
.document-tree-no-sections, .overview-tree-empty { padding: 14px 8px; color: var(--studio-muted); font-size: 10px; }
.overview-form { padding: 22px; display: grid; gap: 11px; }
.overview-form-heading { margin: -22px -22px 7px; padding: 17px 22px; border-bottom: 1px solid var(--studio-line); display: flex; align-items: center; gap: 9px; }
.overview-form-heading > .material-symbols-rounded { color: var(--studio-accent); font-size: 21px; }
.overview-form-heading > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.overview-form-heading strong { color: var(--studio-ink); font-size: 13px; }
.overview-form-heading span { overflow: hidden; color: var(--studio-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.overview-form textarea { width: 100%; padding: 8px 9px; border: 1px solid var(--studio-line); border-radius: 5px; resize: vertical; color: var(--studio-ink); font: 12px var(--font); }
.overview-form textarea:focus { outline: 2px solid rgba(0,110,255,0.14); border-color: var(--studio-accent); }
.overview-form .overview-primary { justify-self: start; border-color: var(--studio-accent); background: var(--studio-accent); color: #fff; }
.overview-form .overview-primary:hover { border-color: var(--studio-accent-hover); background: var(--studio-accent-hover); color: #fff; }
.overview-form-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.overview-form-status { color: var(--studio-muted); font-size: 10px; }

#editForm.builder-workspace {
  display: grid; grid-template-columns: 260px minmax(520px, 1fr) 288px; gap: 0;
  max-width: none; height: calc(100vh - 94px); overflow: hidden; margin: 0;
}
.component-palette, .property-inspector {
  min-width: 0; overflow-y: auto; background: var(--studio-panel); color: var(--studio-ink);
}
.component-palette { border-right: 1px solid var(--studio-line); padding-bottom: 18px; }
.property-inspector { border-left: 1px solid var(--studio-line); }
.builder-panel-heading {
  position: sticky; top: 0; z-index: 4; padding: 16px 16px 13px; border-bottom: 1px solid var(--studio-line);
  display: flex; flex-direction: column; gap: 4px; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px);
}
.builder-panel-title { display: flex; align-items: center; gap: 8px; color: var(--studio-ink); }
.builder-panel-title .material-symbols-rounded { color: var(--studio-accent); font-size: 20px; }
.builder-panel-heading strong { font-size: 13px; letter-spacing: 0; }
.builder-panel-heading > span { padding-left: 28px; font-size: 10px; color: var(--studio-muted); }
.component-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.component-grid button {
  position: relative; min-width: 0; height: 58px; padding: 6px 9px 6px 7px; border: 1px solid var(--studio-line); border-radius: 7px; background: var(--studio-panel);
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; align-items: center; gap: 10px; text-align: left;
  color: var(--studio-ink); cursor: grab; font: 650 12px var(--font); transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease, background 120ms ease;
}
.component-grid button:hover { border-color: var(--studio-accent); background: var(--studio-soft); box-shadow: 0 3px 9px rgba(0,110,255,0.12); transform: translateY(-1px); }
.component-grid button.dragging, .layout-preset.dragging { opacity: 0.45; cursor: grabbing; }
.component-icon {
  width: 44px; height: 44px; display: grid !important; place-items: center; border: 1px solid #dfebf7;
  border-radius: 6px; background: #f6f9fd; color: var(--studio-accent); font-size: 22px !important;
}
.component-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.component-add {
  width: 28px; height: 28px; display: grid !important; place-items: center; border-radius: 6px;
  background: var(--studio-soft); color: var(--studio-accent); font-size: 19px !important; transition: background 120ms ease, color 120ms ease;
}
.component-grid button:hover .component-add { background: var(--studio-accent); color: #fff; }
.palette-section { border-top: 1px solid var(--studio-line); padding: 15px 14px; }
.palette-label, .inspector-section-title { margin-bottom: 10px; font-size: 10px; font-weight: 750; color: var(--studio-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.palette-label { display: flex; align-items: center; gap: 5px; }
.palette-label .material-symbols-rounded { color: var(--studio-accent); font-size: 14px; }
.layout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.layout-preset {
  min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 5px;
  border: 1px solid var(--studio-line); border-radius: 7px; background: var(--studio-panel); color: var(--fg2); font: 600 10px var(--font); cursor: grab;
}
.layout-preset:hover { border-color: var(--studio-accent); background: var(--studio-soft); }
.layout-icon { width: 46px; height: 18px; display: block; border: 1px solid var(--studio-muted); border-radius: 2px; }
.layout-icon.two { background: linear-gradient(90deg, transparent 48%, var(--studio-muted) 48%, var(--studio-muted) 52%, transparent 52%); }
.layout-icon.three { background: linear-gradient(90deg, transparent 31%, var(--studio-muted) 31%, var(--studio-muted) 34%, transparent 34%, transparent 65%, var(--studio-muted) 65%, var(--studio-muted) 68%, transparent 68%); }
.layout-icon.four { background: repeating-linear-gradient(90deg, transparent 0, transparent 22%, var(--studio-muted) 22%, var(--studio-muted) 25%); }

.builder-stage { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.builder-stagebar {
  height: 42px; flex: 0 0 42px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--studio-line); background: var(--studio-subtle); color: var(--studio-muted); font-size: 11px;
}
.stagebar-left { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.stage-history { display: inline-flex; align-items: center; gap: 6px; }
.stage-history button {
  height: 29px; padding: 0 10px; border: 1px solid var(--studio-line); border-radius: 5px; background: var(--studio-panel);
  color: var(--studio-ink); display: inline-flex; align-items: center; gap: 5px; font: 650 11px var(--font); cursor: pointer;
}
.stage-history button:hover:not(:disabled) { border-color: var(--studio-accent); color: var(--studio-accent); }
.stage-history button:disabled { opacity: 0.4; cursor: not-allowed; }
.stage-history .material-symbols-rounded { font-size: 17px; }
.device-switch { display: inline-flex; border: 1px solid var(--studio-line); border-radius: 5px; overflow: hidden; }
.device-switch button { width: 36px; height: 29px; padding: 0; border: 0; border-right: 1px solid var(--studio-line); background: var(--studio-panel); color: var(--studio-muted); cursor: pointer; }
.device-switch .material-symbols-rounded { font-size: 18px; }
.device-switch button:last-child { border-right: 0; }
.device-switch button.active { background: var(--studio-accent); color: #fff; }
.builder-canvas-wrap { flex: 1; overflow: auto; padding: 28px; background-color: var(--studio-canvas); background-image: radial-gradient(var(--studio-line) 0.7px, transparent 0.7px); background-size: 14px 14px; }
.builder-canvas {
  width: min(100%, 980px); min-height: calc(100vh - 156px); margin: 0 auto; background: #fff;
  border: 1px solid var(--studio-line); box-shadow: 0 8px 28px rgba(12, 36, 81, 0.12); transition: width 180ms ease;
}
.builder-canvas.accepting-drop { box-shadow: 0 0 0 3px rgba(0,110,255,0.18), 0 8px 28px rgba(12, 36, 81, 0.12); }
.builder-canvas.mobile { width: 390px; }
.builder-document.content { max-width: none; min-height: inherit; padding: 40px 48px 90px; margin: 0; }
.builder-canvas.mobile .builder-document.content { padding: 28px 22px 60px; }
.builder-canvas.mobile .content-grid-column { grid-column: 1 / -1; }
.builder-canvas.mobile .content .source-columns { grid-template-columns: 1fr; }
.builder-canvas.mobile .content .source-columns > section + section { border-left: 0; border-top: 1px solid var(--border); }
.builder-document [contenteditable="true"] { min-height: 1em; border-radius: 2px; outline: 1px dashed transparent; }
.builder-document [contenteditable="true"]:hover { outline-color: var(--studio-muted); }
.builder-document [contenteditable="true"]:focus { outline: 2px solid var(--studio-accent); background: var(--studio-soft); }
#docTitlePreview:empty::before, #docIntroPreview:empty::before { color: var(--studio-muted); pointer-events: none; }
#docTitlePreview:empty::before { content: "輸入文件標題"; }
#docIntroPreview:empty::before { content: "輸入文件詳述"; }
#docIntroPreview {
  width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#visualEditor { background: transparent; position: relative; }
.canvas-row-shell { position: relative; padding: 8px 0; }
.canvas-row-tools {
  position: absolute; right: 0; top: -18px; z-index: 8; display: none; align-items: center; gap: 7px;
  padding: 3px 5px; border: 1px solid var(--studio-line); border-radius: 4px; background: var(--studio-panel);
  color: var(--studio-muted); font-size: 9px; box-shadow: 0 3px 10px rgba(12, 36, 81, 0.1);
}
.canvas-row-shell:hover > .canvas-row-tools { display: flex; }
.builder-canvas.accepting-section-drop .canvas-row-tools { display: none !important; }
.canvas-tool-label { display: inline-flex; align-items: center; gap: 3px; }
.canvas-tool-label .material-symbols-rounded { font-size: 13px; }
.canvas-row-tools button, .canvas-block-handle button { width: 19px; height: 19px; padding: 0; border: 0; background: none; color: var(--studio-muted); cursor: pointer; }
.canvas-row-tools button .material-symbols-rounded, .canvas-block-handle button .material-symbols-rounded { font-size: 14px; }
.canvas-column { position: relative; min-height: 54px; outline: 1px dashed transparent; outline-offset: 3px; }
.canvas-column.selected-column { outline-color: var(--studio-muted); }
.canvas-column.drop-target { outline: 2px solid var(--studio-accent); background: var(--studio-soft); }
.canvas-empty-drop {
  width: 100%; min-height: 96px; padding: 14px; border: 1px dashed #cbd2da; border-radius: 7px;
  background: #f3f4f6; color: #9aa3ad;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.canvas-empty-drop .material-symbols-rounded { margin-bottom: 2px; color: #aeb6bf; font-size: 25px; }
.canvas-empty-drop strong { color: #929ba5; font-size: 11px; font-weight: 650; }
.canvas-empty-drop small { color: #a6aeb7; font-size: 9px; }
.canvas-empty-drop:hover, .canvas-column.selected-column .canvas-empty-drop { border-color: var(--studio-accent); background: var(--studio-soft); }
.canvas-block { position: relative; margin: 2px 0 10px; outline: 2px solid transparent; outline-offset: 4px; }
.canvas-block:hover { outline-color: var(--studio-accent); }
.canvas-block.selected { outline-color: var(--studio-accent); }
.canvas-block-handle {
  position: absolute; z-index: 10; left: -5px; top: -24px; display: none; align-items: center; gap: 9px;
  padding: 3px 6px; border: 1px solid var(--studio-accent); border-radius: 4px; background: var(--studio-accent); color: #fff;
  font-size: 9px; cursor: grab; box-shadow: 0 3px 10px rgba(0,110,255,0.18);
}
.canvas-block.selected > .canvas-block-handle { display: flex; }
.canvas-block-richText { min-height: 0; }
.canvas-block-sourceBlock > .canvas-block-content > .source-block { overflow: visible; }
.source-content-column { min-height: 78px; }
.source-content-column > .canvas-block { margin-top: 12px; }
.source-content-column .source-empty-drop { min-height: 72px; margin-top: 8px; }
.canvas-block-handle button { color: #fff; font-size: 13px; }
.canvas-drag-grip { cursor: grab; touch-action: none; user-select: none; }
.canvas-drag-grip:active { cursor: grabbing; }
.canvas-drop-zone {
  position: relative; z-index: 7; height: 0; margin: 0; overflow: hidden; color: transparent;
  display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; pointer-events: none;
  transition: height 100ms ease, margin 100ms ease;
}
.canvas-drop-zone.drop-target {
  height: 18px; margin: -4px 0 4px;
}
.canvas-drop-zone.drop-target::before {
  content: ""; position: absolute; left: 8px; right: 8px; height: 2px; border-radius: 2px; background: #bfd0e5;
}
.canvas-drop-zone.drop-target { color: var(--studio-accent); }
.canvas-drop-zone.drop-target::before { height: 3px !important; background: var(--studio-accent) !important; }
.canvas-drop-zone.drop-target::after { content: "放到這裡"; position: relative; padding: 1px 6px; background: #fff; }
.canvas-block-content > :first-child { margin-top: 0; }
.canvas-block-content > :last-child { margin-bottom: 0; }
.canvas-format-bar {
  position: fixed; z-index: 60; width: max-content; max-width: calc(100vw - 16px); margin: 0;
  display: flex; align-items: center; gap: 3px; padding: 5px; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px;
  background: var(--studio-nav); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.canvas-format-bar[hidden] { display: none; }
.canvas-format-bar span { padding: 0 6px; font-size: 10px; color: rgba(255,255,255,0.72); }
.canvas-format-bar button { height: 25px; min-width: 28px; padding: 0 7px; border: 0; border-radius: 3px; background: transparent; color: #fff; font: 650 10px var(--font); cursor: pointer; }
.canvas-format-bar button:hover { background: rgba(255,255,255,0.1); }
.canvas-format-bar .format-color-select {
  height: 25px; margin: 0 2px; padding: 0 20px 0 8px; border: 0; border-radius: 3px; background-color: rgba(255,255,255,0.12); color: #fff; font: 650 10px var(--font); cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath fill='%23ffffff' d='M0 0h8L4 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center;
}
.canvas-format-bar .format-color-select:hover { background-color: rgba(255,255,255,0.2); }
.canvas-format-bar .format-color-select option { color: #1f2733; }
.canvas-format-bar .format-link-select {
  height: 25px; max-width: 220px; margin: 0 2px; padding: 0 20px 0 8px; border: 0; border-radius: 3px; background-color: rgba(255,255,255,0.12); color: #fff; font: 650 10px var(--font); cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath fill='%23ffffff' d='M0 0h8L4 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center;
}
.canvas-format-bar .format-link-select:hover { background-color: rgba(255,255,255,0.2); }
.canvas-format-bar .format-link-select option, .canvas-format-bar .format-link-select optgroup { color: #1f2733; }
.content-image { width: min(100%, var(--image-max-width, 400px)); margin: 0 auto; }
.content-image img { display: block; max-width: 100%; margin-inline: auto; }
.content-image.image-ratio-square img { width: 100%; aspect-ratio: 1 / 1; }
.content-image.image-ratio-four-three img { width: 100%; aspect-ratio: 4 / 3; }
.content-image.image-ratio-sixteen-nine img { width: 100%; aspect-ratio: 16 / 9; }
.content-image.image-fit-contain img { object-fit: contain; }
.content-image.image-fit-cover img { object-fit: cover; }
.content-image-has-fallback img,
img.content-image-broken { display: none !important; }
.content-image-fallback {
  width: 100%;
  min-height: 160px;
  border: 1px dashed #c8d1dd;
  border-radius: 10px;
  background: #eef2f6;
  color: #9aa3ad;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
}
.content-image-fallback { font-size: 13px; font-weight: 500; }
.content-image.image-ratio-square .content-image-fallback { aspect-ratio: 1 / 1; min-height: 0; }
.content-image.image-ratio-four-three .content-image-fallback { aspect-ratio: 4 / 3; min-height: 0; }
.content-image.image-ratio-sixteen-nine .content-image-fallback { aspect-ratio: 16 / 9; min-height: 0; }
.content-image figcaption { margin-top: 6px; color: var(--fg3); font-size: 11px; line-height: 1.5; text-align: center; }
.canvas-image { width: 100%; display: block; }
.canvas-image-placeholder { width: 100%; min-height: 160px; border: 1px dashed var(--studio-line); background: var(--studio-subtle); color: var(--studio-muted); display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; }
.canvas-block-image figcaption { color: var(--studio-muted); }
.canvas-mermaid { min-height: 140px; }
.mermaid-code-editor { min-width: 0; width: 100%; }
.mermaid-code-toolbar { height: 28px; display: flex; align-items: center; padding: 0 5px; border: 1px solid var(--studio-line); border-bottom: 0; background: var(--studio-surface-soft); }
.mermaid-code-bold { width: 24px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--studio-ink); font: 750 12px Georgia, serif; cursor: pointer; }
.mermaid-code-bold:hover { background: var(--studio-hover); color: var(--studio-accent); }
.mermaid-code-editor .builder-field { gap: 0; }
.mermaid-code-editor textarea { border-top-left-radius: 0; border-top-right-radius: 0; }
.mermaid-node-state-list { display: grid; gap: 8px; width: 100%; }
.mermaid-node-state-row { display: grid; gap: 7px; padding-bottom: 8px; border-bottom: 1px solid var(--studio-line); }
.mermaid-node-state-row:last-child { padding-bottom: 0; border-bottom: 0; }
.mermaid-node-identity { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.mermaid-node-identity strong { color: var(--studio-ink); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.mermaid-node-identity span { overflow: hidden; color: var(--studio-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.mermaid-node-state-row .builder-field { gap: 0; }
.mermaid-node-state-row .builder-choice-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.canvas-table [contenteditable="true"]:focus { outline: 2px solid var(--studio-accent); outline-offset: -2px; }
.canvas-table th { position: relative; padding-left: 18px; }
.canvas-table th > [contenteditable="true"] { display: inline-block; min-width: 42px; padding-right: 14px; }
.canvas-table .table-column-grip {
  position: absolute; top: 50%; left: 4px; transform: translateY(-50%); font-size: 14px; color: rgba(255,255,255,0.75);
  cursor: grab; touch-action: none; user-select: none;
}
.canvas-table .table-column-grip:active { cursor: grabbing; }
.canvas-table th.table-column-drop-target { outline: 2px solid var(--studio-accent); outline-offset: -2px; }
.canvas-table .table-row-grip {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  color: var(--studio-muted); font-size: 14px; opacity: 0.72; cursor: grab; touch-action: none; user-select: none;
}
.canvas-table .table-row-grip:active { cursor: grabbing; }
.canvas-table tr.table-row-drop-target > td { outline: 2px solid var(--studio-accent); outline-offset: -2px; }
.canvas-table td.table-cell-selected { box-shadow: inset 0 0 0 2px rgba(0, 110, 255, 0.28); }
.canvas-table td.cell-tone-green { background: #eaf8ef !important; color: #166534; }
.canvas-table td.cell-tone-red { background: #fdeeee !important; color: #991b1b; }
.canvas-table .table-inline-control { position: sticky; right: 0; z-index: 2; width: 78px; min-width: 78px; max-width: 78px; padding: 4px !important; text-align: center; white-space: nowrap; background: var(--studio-subtle) !important; box-shadow: -1px 0 var(--studio-line); }
.canvas-table th.table-inline-control { z-index: 3; }
.canvas-table th > button, .canvas-table td.table-inline-control button {
  border: 0; background: transparent; color: var(--studio-muted); cursor: pointer; font: 700 11px var(--font); opacity: 0.72;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px; line-height: 1;
}
.canvas-table .material-symbols-rounded { font-size: 14px; }
.canvas-table th > button { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); color: #fff; }
.canvas-table th.table-inline-control > button {
  position: static; width: 100%; min-height: 26px; transform: none; color: var(--studio-muted); opacity: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px; line-height: 1;
}
.canvas-table th:hover > button, .canvas-table tr:hover > .table-inline-control button { opacity: 1; }
.canvas-table .table-add-row td { padding: 4px !important; text-align: center; background: var(--studio-subtle) !important; border-bottom: 0; }
.canvas-table .table-add-row button { width: 100%; min-height: 26px; margin: 0; padding: 3px 8px; border: 0; border-radius: 3px; background: transparent; color: var(--studio-muted); font: 10px var(--font); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 3px; line-height: 1; }
.canvas-table .table-add-row button:hover { background: #fff; color: var(--studio-ink); }
.inspector-note { margin: 0; color: var(--studio-muted); font-size: 10px; line-height: 1.55; }

.inspector-scroll { padding-bottom: 30px; }
.inspector-section { padding: 16px; }
.inspector-heading { padding-bottom: 10px; }
.inspector-component-title { display: flex; align-items: center; gap: 10px; }
.inspector-component-title > .material-symbols-rounded {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 7px; background: var(--studio-soft); color: var(--studio-accent); font-size: 20px;
}
.inspector-component-title > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inspector-component-title strong { color: var(--studio-ink); font-size: 13px; }
.inspector-component-title > div span { color: var(--studio-muted); font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; }
.inspector-controls { display: grid; gap: 18px; padding-top: 8px; }
.inspector-group { display: grid; gap: 10px; padding: 0; }
.inspector-group:first-child { padding-top: 0; }
.inspector-group:last-child { padding-bottom: 0; }
.inspector-group-title { font-size: 10px; font-weight: 700; letter-spacing: 0; color: var(--studio-ink); }
.inspector-hint { margin: 0; color: var(--studio-muted); font-size: 10.5px; line-height: 1.5; }
.inspector-add { width: 100%; border-style: dashed !important; color: var(--studio-accent) !important; background: var(--studio-subtle) !important; }
.inspector-add:hover { background: var(--studio-soft) !important; border-color: var(--studio-accent) !important; }
.builder-field-inline { display: flex; align-items: center; gap: 8px; }
.builder-field-inline input { flex: 1; min-width: 0; }
.builder-field-unit { flex: none; color: var(--studio-muted); font-size: 11px; }
.table-width-settings { display: grid; gap: 8px; }
.table-width-settings-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.table-width-settings-head strong { color: var(--studio-ink); font-size: 10px; font-weight: 700; }
.table-width-settings-head span { color: var(--studio-muted); font-size: 9px; }
.table-width-setting { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 6px 8px; padding: 8px; border: 1px solid var(--studio-line); border-radius: 6px; background: #fff; }
.table-width-label { grid-column: 1 / -1; overflow: hidden; color: var(--studio-muted); font-size: 9px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.table-width-setting select, .table-width-setting input { width: 100%; height: 32px; min-width: 0; padding: 0 9px; border: 1px solid var(--studio-line); border-radius: 5px; background-color: #fff; color: var(--studio-ink); font: 11px var(--font); }
.table-width-setting input:disabled { background: #f1f3f5; color: var(--studio-muted); }
.csv-filter-settings { display: grid; gap: 4px; padding: 9px; border: 1px solid var(--studio-line); border-radius: 6px; background: var(--studio-subtle); }
.csv-filter-toggle, .source-title-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 30px; gap: 10px; color: var(--studio-ink); font-size: 10px; cursor: pointer; }
#editForm .source-title-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 1px solid var(--studio-line); border-radius: 7px; background: var(--studio-subtle); font-size: 11px; font-weight: 600; }
#editForm .source-title-toggle:hover { border-color: var(--studio-accent); }
.csv-filter-toggle > span:first-child, .source-title-toggle > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csv-filter-toggle input, .source-title-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.csv-filter-switch, .source-title-switch { position: relative; width: 30px; height: 17px; border-radius: 9px; background: #c9ced6; transition: background 140ms ease; }
.csv-filter-switch::after, .source-title-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.22); transition: transform 140ms ease; }
.csv-filter-toggle input:checked + .csv-filter-switch, .source-title-toggle input:checked + .source-title-switch { background: var(--studio-accent); }
.csv-filter-toggle input:checked + .csv-filter-switch::after, .source-title-toggle input:checked + .source-title-switch::after { transform: translateX(13px); }
.csv-filter-toggle input:focus-visible + .csv-filter-switch, .source-title-toggle input:focus-visible + .source-title-switch { outline: 2px solid var(--studio-accent); outline-offset: 2px; }
.builder-field { display: flex; flex-direction: column; gap: 5px; color: var(--fg2); }
.builder-field-title { color: var(--studio-muted); font-size: 9px; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; }
.builder-field input, .builder-field select, .builder-field textarea, .builder-modal-form input, .builder-modal-form select, .advanced-tool textarea {
  width: 100%; border: 1px solid var(--studio-line); border-radius: 5px; background-color: #fff; color: var(--studio-ink); font: 12px var(--font);
}
.builder-field input, .builder-field select, .builder-modal-form input, .builder-modal-form select { height: 34px; padding: 0 10px; }
.admin-builder-body #editForm .builder-field input, .admin-builder-body #editForm .builder-field select {
  height: 34px; padding: 0 10px; border: 1px solid var(--studio-line); border-radius: 5px; color: var(--studio-ink); font: 12px var(--font);
}
.builder-field select, .builder-modal-form select, .builder-project-switcher select {
  appearance: none; -webkit-appearance: none; padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 14px, calc(100% - 11px) 14px; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
.builder-field textarea, .advanced-tool textarea { padding: 8px 9px; }
.builder-field textarea, .advanced-tool textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.builder-field input:focus, .builder-field select:focus, .builder-field textarea:focus { outline: 2px solid rgba(0,110,255,0.14); border-color: var(--studio-accent); }
.builder-field.compact { gap: 4px; }
.note-variant-swatches { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.note-variant-swatch { position: relative; width: 22px; height: 22px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(15,23,42,0.12); cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; }
.note-variant-swatch:hover { transform: scale(1.08); }
.note-variant-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--studio-accent), inset 0 0 0 1px rgba(15,23,42,0.12); }
.note-variant-swatch:focus-visible { outline: 2px solid var(--studio-accent); outline-offset: 3px; }
.note-variant-swatch-info { --swatch: #3b82f6; }
.note-variant-swatch-success { --swatch: #22a55b; }
.note-variant-swatch-warning { --swatch: #e5a50a; }
.note-variant-swatch-danger { --swatch: #dc4c4c; }
.note-variant-swatch-neutral { --swatch: #737b87; }
.builder-choice-group { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border: 1px solid var(--studio-line); border-radius: 6px; background: #f4f6f8; }
.inspector-section .builder-choice {
  min-width: 0; min-height: 32px; padding: 5px 4px; border: 0; border-radius: 0; background: transparent; font-size: 10px; font-weight: 600; white-space: nowrap;
}
.inspector-section .builder-choice + .builder-choice { border-left: 1px solid var(--studio-line); }
.inspector-section .builder-choice:hover { background: #fff; color: var(--studio-ink); }
.inspector-section .builder-choice.active { background: #fff; color: var(--studio-accent); box-shadow: inset 0 -2px var(--studio-accent); }
.inspector-section .builder-choice.active:hover { color: var(--studio-accent); }
.inspector-section button, .builder-modal-form button, .advanced-tool button {
  min-height: 34px; padding: 7px 10px; border: 1px solid var(--studio-line); border-radius: 6px; background: #fff; color: var(--studio-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; font: 600 11px var(--font); cursor: pointer;
}
.inspector-section .note-variant-swatch {
  width: 22px; height: 22px; min-height: 22px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--swatch); color: transparent;
}
.inspector-section .note-variant-swatch.active { border-color: #fff; }
.inspector-section .note-variant-swatch:hover { border-color: transparent; color: transparent; }
.inspector-section .note-variant-swatch.active:hover { border-color: #fff; }
.inspector-section button .material-symbols-rounded, .builder-modal-form button .material-symbols-rounded, .advanced-tool button .material-symbols-rounded { font-size: 16px; }
.inspector-section button:hover { border-color: var(--studio-accent); color: var(--studio-accent); }
.inspector-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.inspector-empty { padding: 44px 24px; color: var(--studio-muted); font-size: 11px; line-height: 1.6; text-align: center; }
.inspector-empty > .material-symbols-rounded { width: 42px; height: 42px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; background: var(--studio-soft); color: var(--studio-accent); font-size: 22px; }
.inspector-empty strong { color: var(--studio-ink); font-size: 12px; }
.inspector-empty p { margin: 5px 0 0; color: var(--studio-muted); }

.builder-modal {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(17, 24, 39, 0.58);
}
.builder-modal[hidden], .modal-overlay[hidden] { display: none; }
.builder-modal-box {
  width: min(780px, 94vw); max-height: 88vh; overflow: auto; background: #fff; border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}
.builder-modal-box.wide { width: min(880px, 94vw); }
.builder-modal-box.import-modal-box { width: min(660px, 92vw); max-height: 94vh; }
.builder-modal-box.history-modal-box { width: min(620px, 94vw); }
.history-modal-body { min-height: 88px; max-height: calc(88vh - 62px); padding: 8px 18px 14px; overflow-y: auto; color: var(--studio-muted); font-size: 12px; }
.history-modal-body .revision-item { padding: 12px 0; border-color: var(--studio-line); }
.history-modal-body .revision-item button { display: inline-flex; align-items: center; gap: 4px; color: var(--studio-accent); border-color: var(--studio-line); }
.history-modal-body .revision-item button:hover { border-color: var(--studio-accent); background: var(--studio-soft); }
.history-modal-body .revision-item button .material-symbols-rounded { font-size: 16px; }
.builder-modal-box.overview-settings-box { position: relative; width: min(480px, 94vw); }
.overview-settings-box > .modal-close { position: absolute; top: 13px; right: 14px; z-index: 2; }
.overview-settings-box .overview-form-heading { padding-right: 54px; }
.builder-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--studio-line); }
.builder-modal-head > div { display: flex; flex-direction: column; gap: 2px; }
.builder-modal-head strong { font-size: 14px; }
.builder-modal-head span { font-size: 10px; color: var(--studio-muted); }
.builder-modal-head button { width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--studio-muted); display: grid; place-items: center; cursor: pointer; }
.builder-modal-columns { display: grid; grid-template-columns: 1fr 1fr; }
.builder-modal-form { padding: 18px; display: grid; gap: 9px; }
.builder-modal-form + .builder-modal-form { border-left: 1px solid var(--studio-line); }
.builder-modal-form h3 { margin: 0 0 4px; font-size: 13px; color: var(--studio-ink); }
.builder-modal-form button, .advanced-tool button { justify-self: start; background: var(--studio-accent); color: #fff; border-color: var(--studio-accent); }
.advanced-tool { margin: 14px 18px; border: 1px solid var(--studio-line); border-radius: 6px; padding: 12px; }
.advanced-tool summary { cursor: pointer; color: var(--studio-ink); font-size: 12px; font-weight: 650; }
.advanced-tool textarea { margin: 12px 0 8px; }
.advanced-tool .row-actions { display: flex; align-items: center; gap: 10px; }
.advanced-tool .row-actions span { color: var(--studio-muted); font-size: 11px; }
.import-drop-zone {
  border: 1px dashed #b8c4d2;
  border-radius: 6px;
  min-height: 72px;
  padding: 10px;
  margin-bottom: 8px;
  background: #fafcff;
  display: grid;
  place-items: center;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.import-drop-zone .material-symbols-rounded { font-size: 20px; color: #7e8fa6; }
.import-drop-zone strong { font-size: 11px; color: var(--studio-ink); }
.import-drop-zone small { font-size: 9px; color: var(--studio-muted); }
.import-drop-zone:hover,
.import-drop-zone.is-dragover {
  border-color: var(--studio-accent);
  background: #eef5ff;
}
.import-drop-zone:focus-visible {
  outline: 2px solid rgba(0,110,255,0.22);
  outline-offset: 1px;
}
.admin-builder-body .modal-overlay h3 { display: flex; align-items: center; gap: 6px; }
.admin-builder-body .modal-overlay h3 .material-symbols-rounded { color: var(--studio-accent); font-size: 19px; }
.admin-builder-body .revision-item button { display: inline-flex; align-items: center; gap: 4px; }
.admin-builder-body .revision-item button .material-symbols-rounded { font-size: 15px; }

@media (max-width: 1100px) {
  #editForm.builder-workspace { grid-template-columns: 220px minmax(460px, 1fr) 250px; }
  .builder-top-actions .builder-quiet-btn { padding: 0 8px; }
  .builder-document.content { padding-inline: 34px; }
}
@media (max-width: 840px) {
  .admin-builder-body { overflow: auto; }
  .builder-topbar { height: auto; min-height: 58px; grid-template-columns: 1fr auto; padding-block: 9px; }
  .breadcrumb-bar { padding-inline: 10px; }
  .overview-workspace { height: auto; min-height: calc(100vh - 130px); grid-template-columns: 1fr; overflow: visible; }
  .overview-main { padding: 22px 14px 36px; }
  .overview-header { align-items: flex-start; flex-direction: column; }
  .document-tree-actions { gap: 0; padding-right: 2px; }
  .document-tree-action { width: 26px; }
  #editForm.builder-workspace { height: auto; min-height: calc(100vh - 128px); grid-template-columns: 86px minmax(0, 1fr); }
  .component-grid { grid-template-columns: 1fr; padding: 8px; }
  .component-grid button { height: 58px; grid-template-columns: 1fr; padding: 7px; }
  .component-grid .component-name, .component-grid .component-add { display: none !important; }
  .component-grid .component-icon { margin: auto; }
  .component-palette .builder-panel-heading span { display: none; }
  .component-palette { max-height: calc(100vh - 92px); }
  .component-palette .palette-section { padding-inline: 7px; }
  .component-palette .layout-grid, .component-palette .component-grid { grid-template-columns: 1fr; }
  .property-inspector { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--studio-line); }
  .builder-canvas-wrap { padding: 14px; }
  .builder-document.content { padding: 28px 20px 60px; }
  .content-grid-column { grid-column: 1 / -1; }
  .canvas-row-tools { display: flex; }
  .builder-modal-columns { grid-template-columns: 1fr; }
  .builder-modal-form + .builder-modal-form { border-left: 0; border-top: 1px solid var(--studio-line); }
}
@media (max-width: 640px) {
  .builder-topbar { display: flex; align-items: center; }
  .builder-brand { display: none; }
  .builder-top-actions { width: 100%; flex-wrap: wrap; justify-content: flex-end; }
}

/* Shared appearance setting */
.theme-settings { position: relative; z-index: 90; }
.theme-settings-trigger {
  min-height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--fg2); display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: 650 12px var(--font); cursor: pointer;
}
.theme-settings-trigger:hover, .theme-settings.open .theme-settings-trigger { border-color: #4a8fe7; color: #1670d2; }
.theme-settings-trigger .material-symbols-rounded { font-size: 17px; }
.theme-settings-popover {
  position: absolute; z-index: 100; right: 0; top: calc(100% + 8px); width: 256px; padding: 13px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--fg);
  box-shadow: 0 14px 34px rgba(10, 20, 34, 0.18);
}
.theme-settings-popover[hidden] { display: none; }
.theme-settings-popover > strong { display: block; margin-bottom: 9px; font-size: 12px; }
.theme-choice-group {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg);
}
.theme-choice-group button {
  min-width: 0; height: 34px; padding: 0 6px; border: 0; border-right: 1px solid var(--border);
  border-radius: 0; background: transparent; color: var(--fg2); font: 600 11px var(--font); cursor: pointer;
}
.theme-choice-group button:last-child { border-right: 0; }
.theme-choice-group button:hover { color: #1670d2; }
.theme-choice-group button.active { background: #1670d2; color: #fff; }
.sidebar-footer-actions { margin: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sidebar-footer-actions .theme-settings-trigger,
.sidebar-footer-actions .logout-btn { width: 100%; min-width: 0; min-height: 36px; margin: 0; }
.sidebar-footer-actions .theme-settings-trigger { border-color: rgba(255,255,255,0.25); background: transparent; color: rgba(255,255,255,0.8); }
.sidebar-footer-actions .theme-settings-trigger:hover { background: rgba(255,255,255,0.1); color: #fff; }
.sidebar-footer-actions .theme-settings-popover { top: auto; right: auto; bottom: calc(100% + 8px); left: 0; width: 240px; }
.builder-top-actions .theme-settings-trigger { width: 34px; padding: 0; border-color: rgba(255,255,255,0.25); background: transparent; color: rgba(255,255,255,0.82); }
.builder-top-actions .theme-settings-trigger:hover { background: rgba(255,255,255,0.1); color: #fff; }
.theme-settings-compact .theme-settings-trigger-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.theme-settings-auth { position: fixed; top: 18px; right: 18px; }
body.has-env-strip { padding-top: 0px; }
.env-badge {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 146, 60, 0.2) 100%);
  color: #7c2d12;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* Dark appearance */
:root[data-theme="dark"] {
  --bg: #15181c;
  --card: #20242a;
  --fg: #f1f3f5;
  --fg2: #cbd0d6;
  --fg3: #9aa2ac;
  --border: #3b424b;
  --primary: #9bc7ff;
}
:root[data-theme="dark"] .admin-builder-body {
  --studio-line: #3b424b;
  --studio-panel: #20242a;
  --studio-canvas: #15181c;
  --studio-accent: #69a9ff;
  --studio-accent-hover: #8abdff;
  --studio-soft: rgba(105,169,255,0.13);
  --studio-subtle: #191d22;
  --studio-success: #8fd5a4;
  --studio-error: #ffadad;
}
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .auth-card,
:root[data-theme="dark"] .modal-box,
:root[data-theme="dark"] .builder-modal-box,
:root[data-theme="dark"] .breadcrumb-bar,
:root[data-theme="dark"] .builder-canvas,
:root[data-theme="dark"] .content .stat-card,
:root[data-theme="dark"] .content .source-block,
:root[data-theme="dark"] .accordion-block,
:root[data-theme="dark"] .accordion-block .accordion-q { background: var(--card); }
:root[data-theme="dark"] .accordion-block { box-shadow: none; }
:root[data-theme="dark"] .accordion-block .accordion-q:hover { background: rgba(255,255,255,0.045); }
:root[data-theme="dark"] .accordion-block .accordion-item[open] .accordion-q { background: rgba(155,199,255,0.09); }
:root[data-theme="dark"] .auth-card button[type="submit"] { background: #2878d0; color: #fff; }
:root[data-theme="dark"] .auth-card button[type="submit"]:hover { background: #3488e3; }
:root[data-theme="dark"] .env-badge {
  background: linear-gradient(90deg, rgba(201, 127, 28, 0.2) 0%, rgba(217, 119, 6, 0.2) 100%);
  color: #fef3c7;
}
:root[data-theme="dark"] :is(input, textarea, select) { background-color: var(--card); color: var(--fg); }
:root[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--fg3); }
:root[data-theme="dark"] .content code { background: #292e35; }
:root[data-theme="dark"] .content thead th,
:root[data-theme="dark"] .content .stream-table thead th { background: #2a323c; color: #f2f5f8; }
:root[data-theme="dark"] .content tbody tr:nth-child(even),
:root[data-theme="dark"] .content .stream-table tbody tr:not(.src-head):nth-child(even) td { background: #1b1f24; }
:root[data-theme="dark"] .content .stream-table tbody tr:not(.src-head):nth-child(odd) td { background: var(--card); }
:root[data-theme="dark"] .content .stream-table-wrap { border-color: #343c46; }
:root[data-theme="dark"] .content .stream-table td { border-bottom-color: #353d47; }
:root[data-theme="dark"] .content .stream-table tbody tr:last-child td { border-bottom-color: transparent; }
:root[data-theme="dark"] .content .stream-table tbody tr.src-head td,
:root[data-theme="dark"] .content .stream-table tbody tr.src-head:nth-child(even) td,
:root[data-theme="dark"] .content .stream-table tbody tr.src-head:hover td {
  background: #17384d; color: #8ed5ff; border-bottom-color: #28566f; font-weight: 750;
}
:root[data-theme="dark"] .content .stream-table td.cell-tone-green,
:root[data-theme="dark"] .content .stream-table tbody tr:nth-child(even) td.cell-tone-green,
:root[data-theme="dark"] .content .stream-table tbody tr:hover td.cell-tone-green,
:root[data-theme="dark"] .canvas-table td.cell-tone-green {
  background: #173a2a !important; color: #8ee2ae; border-bottom-color: #28543d; font-weight: 700;
}
:root[data-theme="dark"] .content .stream-table td.cell-tone-red,
:root[data-theme="dark"] .content .stream-table tbody tr:nth-child(even) td.cell-tone-red,
:root[data-theme="dark"] .content .stream-table tbody tr:hover td.cell-tone-red,
:root[data-theme="dark"] .canvas-table td.cell-tone-red {
  background: #442326 !important; color: #ffaaa7; border-bottom-color: #653538; font-weight: 700;
}
:root[data-theme="dark"] .content :is(.doc-hero h1, .section-label, .section-mini-title, .page-title, .steps-block .step-title, .accordion-block .accordion-q) { color: var(--fg); }
:root[data-theme="dark"] .content :is(.doc-intro, .doc-intro p, .page-copy, .note-block-body, .steps-block .step-body, .accordion-block .accordion-a) { color: var(--fg2); }
:root[data-theme="dark"] .content .page-note { color: #aeb7c2; }
:root[data-theme="dark"] .content .note-info {
  --note-border: #31516f;
  --note-bg: #182a3b;
  --note-accent: #8fc5ff;
  --note-text: #c8d7e6;
}
:root[data-theme="dark"] .content .note-success {
  --note-border: #315b46;
  --note-bg: #182d24;
  --note-accent: #83d8a7;
  --note-text: #c5dfd0;
}
:root[data-theme="dark"] .content .note-warning {
  --note-border: #66532d;
  --note-bg: #332b1b;
  --note-accent: #efc66f;
  --note-text: #e2d5b8;
}
:root[data-theme="dark"] .content .note-danger {
  --note-border: #6a373c;
  --note-bg: #392326;
  --note-accent: #ff9fa4;
  --note-text: #e5c8ca;
}
:root[data-theme="dark"] .content .note-neutral {
  --note-border: #454b53;
  --note-bg: #262a2f;
  --note-accent: #b7bfc9;
  --note-text: #cfd4da;
}
:root[data-theme="dark"] .content .note-neutral .note-block-title { color: #f1f3f5; }
:root[data-theme="dark"] .content .note-block .note-block-body,
:root[data-theme="dark"] .content .note-block .note-block-body p { color: var(--note-text); }
:root[data-theme="dark"] .content .source-header {
  background: #1d3b54;
  color: #edf6ff;
  border-bottom: 1px solid #365976;
}
:root[data-theme="dark"] .content .source-header-copy span { color: #aec7dc; }
:root[data-theme="dark"] .text-note { color: #aeb7c2; }
:root[data-theme="dark"] .content :is(.page-meta, .page-meta p, .stat-l) { color: var(--fg3); }
:root[data-theme="dark"] .doc-divider { border-color: var(--border); }
:root[data-theme="dark"] .content mark,
:root[data-theme="dark"] mark { background: #6b5712; color: #fff3b0; }
:root[data-theme="dark"] .content .stat-palette-blue .stat-card { border-color: #34567b; background: #1b2a3b; }
:root[data-theme="dark"] .content .stat-palette-green .stat-card { border-color: #35634b; background: #192c23; }
:root[data-theme="dark"] .content .stat-palette-neutral .stat-card { border-color: var(--border); background: #23282e; }
:root[data-theme="dark"] .content-action.action-blue.action-outline,
:root[data-theme="dark"] .content-action.action-neutral.action-outline { background: transparent; color: #8abdff; }
:root[data-theme="dark"] .content-anchor-inner { border-color: var(--border); }

:root[data-theme="dark"] .overview-header-actions button,
:root[data-theme="dark"] .overview-form button,
:root[data-theme="dark"] .builder-field input,
:root[data-theme="dark"] .builder-field select,
:root[data-theme="dark"] .builder-field textarea,
:root[data-theme="dark"] .builder-modal-form input,
:root[data-theme="dark"] .builder-modal-form select,
:root[data-theme="dark"] .advanced-tool textarea,
:root[data-theme="dark"] .table-width-setting,
:root[data-theme="dark"] .table-width-setting select,
:root[data-theme="dark"] .table-width-setting input,
:root[data-theme="dark"] .inspector-section button,
:root[data-theme="dark"] .builder-modal-form button,
:root[data-theme="dark"] .advanced-tool button { background-color: var(--studio-panel); color: var(--studio-ink); }
:root[data-theme="dark"] .inspector-section .note-variant-swatch { background-color: var(--swatch); color: transparent; }
:root[data-theme="dark"] .builder-panel-heading { background: rgba(32,36,42,0.96); }
:root[data-theme="dark"] .component-icon { border-color: #3a526c; background: #233142; }
:root[data-theme="dark"] .document-tree-document:hover,
:root[data-theme="dark"] .document-tree-cluster:hover,
:root[data-theme="dark"] .document-tree-section:hover { background: #242a31; }
:root[data-theme="dark"] .document-tree-document.active,
:root[data-theme="dark"] .document-tree-cluster.active,
:root[data-theme="dark"] .document-tree-section.active { background: #203753; }
:root[data-theme="dark"] .document-tree-drop-inside { background: #203753; }
:root[data-theme="dark"] .document-tree-branches::before,
:root[data-theme="dark"] .document-tree-files::before,
:root[data-theme="dark"] .document-tree-section::before,
:root[data-theme="dark"] .document-tree-section::after { background: #4a535e; }
:root[data-theme="dark"] .document-tree-action.danger:hover { background: #452426; color: #ff9c9c; }
:root[data-theme="dark"] .canvas-empty-drop { border-color: #515a65; background: #252a31; color: var(--studio-muted); }
:root[data-theme="dark"] .canvas-empty-drop :is(strong, small, .material-symbols-rounded) { color: var(--studio-muted); }
:root[data-theme="dark"] .canvas-drop-zone.drop-target::after { background: var(--studio-panel); }
:root[data-theme="dark"] .table-width-setting input:disabled { background: #292e35; }
:root[data-theme="dark"] .builder-choice-group { background: #191d22; }
:root[data-theme="dark"] .inspector-section .builder-choice:hover,
:root[data-theme="dark"] .inspector-section .builder-choice.active { background: #292e35; }
:root[data-theme="dark"] .import-drop-zone { background: #1b2026; }
:root[data-theme="dark"] .import-drop-zone:hover,
:root[data-theme="dark"] .import-drop-zone.is-dragover { background: #203753; }
:root[data-theme="dark"] .content-image-fallback { border-color: #4a535e; background: #252a31; color: var(--fg3); }

:root[data-theme="dark"] .content pre.mermaid { color: #e7edf5; }
:root[data-theme="dark"] .content .mermaid .node rect,
:root[data-theme="dark"] .content .mermaid .node rect.basic.label-container { fill: #252c34 !important; stroke: #536171 !important; }
:root[data-theme="dark"] .content .mermaid .node polygon { fill: #18364d !important; stroke: #65a8f5 !important; }
:root[data-theme="dark"] .content .mermaid .cluster rect,
:root[data-theme="dark"] .content .mermaid .subgraph rect { fill: #192632 !important; stroke: #3f5368 !important; }
:root[data-theme="dark"] .content .mermaid .flowchart-link { stroke: #65a8f5 !important; }
:root[data-theme="dark"] .content .mermaid marker path,
:root[data-theme="dark"] .content .mermaid .marker { fill: #65a8f5 !important; stroke: #65a8f5 !important; }
:root[data-theme="dark"] .content .mermaid .nodeLabel,
:root[data-theme="dark"] .content .mermaid .nodeLabel p,
:root[data-theme="dark"] .content .mermaid .nodeLabel span,
:root[data-theme="dark"] .content .mermaid .label text,
:root[data-theme="dark"] .content .mermaid .cluster-label text,
:root[data-theme="dark"] .content .mermaid .cluster-label span { color: #e7edf5 !important; fill: #e7edf5 !important; }
:root[data-theme="dark"] .content .mermaid .edgeLabel,
:root[data-theme="dark"] .content .mermaid .edgeLabel p,
:root[data-theme="dark"] .content .mermaid .edgeLabel span { color: #d9eaff !important; }
:root:is(#pm-mermaid-dark, [data-theme="dark"]) .content .mermaid .node.pmSuccess :is(rect, polygon, path) { fill: #173b2a !important; stroke: #55c783 !important; }
:root:is(#pm-mermaid-dark, [data-theme="dark"]) .content .mermaid .node.pmError :is(rect, polygon, path) { fill: #492426 !important; stroke: #ef7777 !important; }
:root:is(#pm-mermaid-dark, [data-theme="dark"]) .content .mermaid .node.pmSuccess :is(.nodeLabel, .nodeLabel p, .nodeLabel span, text) { color: #b7f7cf !important; fill: #b7f7cf !important; }
:root:is(#pm-mermaid-dark, [data-theme="dark"]) .content .mermaid .node.pmError :is(.nodeLabel, .nodeLabel p, .nodeLabel span, text) { color: #ffd0d0 !important; fill: #ffd0d0 !important; }
:root[data-theme="dark"] .content .mermaid span.edgeLabel {
  border-color: #436f9d !important; background: #1d344c !important; color: #d9eaff !important;
}

@media (max-width: 640px) {
  .theme-settings-auth { top: 10px; right: 10px; }
  body.has-env-strip { padding-top: 0px; }
  .env-badge { top: 0; left: 0; right: 0; height: 28px; padding: 0 10px; font-size: 10px; }
  .theme-settings-popover { position: fixed; top: 54px; right: 10px; left: auto; }
}