:root {
  --accent: #475569;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, white);
  --bg: #f8fafc;
  --bg-start: #f8fafc;
  --bg-end: #e0f2fe;
  --topbar-bg: #ffffff;
  --topbar-text: #0f172a;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --danger: #b91c1c;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--bg-end) 58%, transparent) 0, transparent 34%),
    radial-gradient(circle at 82% 4%, color-mix(in srgb, var(--accent) 12%, transparent) 0, transparent 30%),
    linear-gradient(145deg, var(--bg-start), var(--bg-end));
  background-attachment: fixed;
  color: var(--text);
}
body.app-shell { height: 100vh; overflow: hidden; }
a { color: var(--accent); text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { border: 1px solid var(--border); background: #fff; color: var(--text); border-radius: 10px; padding: 9px 12px; cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.danger { color: var(--danger); border-color: #fecaca; }
button.link-button { border: 0; background: transparent; padding: 0; color: var(--accent); }
.hidden { display: none !important; }

.topbar { height: 58px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid color-mix(in srgb, var(--topbar-text) 10%, transparent); background: color-mix(in srgb, var(--topbar-bg) 92%, transparent); color: var(--topbar-text); padding: 0 18px; position: sticky; top: 0; z-index: 20; box-shadow: 0 10px 28px rgba(15,23,42,.04); backdrop-filter: blur(14px); }
.brand { font-weight: 800; color: var(--topbar-text); white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.topnav { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.topbar a, .topbar .link-button, .public-header .brand { color: var(--topbar-text); }
.topbar .link-button:hover, .topbar a:hover { color: color-mix(in srgb, var(--topbar-text) 74%, var(--accent)); }
.search-box { position: relative; flex: 1; max-width: 560px; }
.search-box input { width: 100%; border: 1px solid color-mix(in srgb, var(--topbar-text) 12%, var(--border)); border-radius: 999px; padding: 10px 15px; background: color-mix(in srgb, var(--topbar-bg) 72%, white); color: var(--text); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.search-box input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 34%, var(--border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); background: #fff; }
.search-results { position: absolute; top: 46px; left: 0; right: 0; background: rgba(255,255,255,.98); border: 1px solid rgba(203,213,225,.9); border-radius: 18px; box-shadow: 0 22px 60px rgba(15,23,42,.16); overflow: hidden; z-index: 80; padding: 6px; backdrop-filter: blur(14px); }
.search-result-card { display: grid !important; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; width: 100%; border: 0; border-radius: 13px !important; text-align: left; padding: 10px 11px !important; background: transparent; color: #0f172a; align-items: flex-start; transition: transform .14s ease, background .14s ease, box-shadow .14s ease; }
.search-result-card:hover { background: color-mix(in srgb, var(--accent) 8%, #fff); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15,23,42,.06); }
.search-result-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.search-result-card.is-folder .search-result-icon { color: color-mix(in srgb, var(--accent) 70%, #16a34a); }
.search-result-body { min-width: 0; display: grid; gap: 3px; }
.search-result-body strong { font-size: 13.5px; line-height: 1.25; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-body small { color: #64748b; font-size: 11.5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-excerpt { color: #475569; font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-result-body mark { background: color-mix(in srgb, var(--accent) 18%, #fef3c7); color: inherit; border-radius: 4px; padding: 0 2px; }
.search-empty-state, .search-loading { display: grid; gap: 4px; padding: 14px 15px; color: #64748b; font-size: 13px; }
.search-empty-state strong { color: #0f172a; font-size: 13.5px; }

.workspace { display: grid; grid-template-columns: 330px minmax(0, 1fr); height: calc(100vh - 58px); min-height: 0; overflow: hidden; }
.sidebar {
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  padding: 14px;
  backdrop-filter: blur(14px);
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.sidebar-collapse { white-space: nowrap; color: var(--muted); background: rgba(255,255,255,.74); }
.tree ul { list-style: none; padding-left: 18px; margin: 0; }
.tree > ul { padding-left: 0; padding-bottom: 24px; }
.tree-node.collapsed > ul { display: none; }
.tree-item { display: flex; align-items: center; gap: 4px; border-radius: 9px; padding: 4px; margin: 2px 0; }
.tree-item.active { background: var(--accent-soft); }
.tree-toggle { width: 24px; min-width: 24px; height: 24px; padding: 0; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: 999px; transition: background .15s ease, color .15s ease, transform .15s ease; }
.tree-toggle:hover { background: #fff; color: var(--accent); }
.tree-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tree-toggle-placeholder { visibility: hidden; cursor: default; }
.chevron { width: 7px; height: 7px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(45deg); transition: transform .16s ease; margin-top: -3px; }
.tree-node.collapsed > .tree-item .tree-toggle .chevron { transform: rotate(-45deg); margin-top: 0; margin-left: -2px; }
.tree-title { flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; padding: 7px; border-radius: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-title::before { content: ''; display: inline-block; width: 12px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 1.5px solid currentColor; border-radius: 3px; opacity: .45; }
.tree-node.has-children > .tree-item .tree-title::before { width: 15px; height: 11px; vertical-align: -1px; border-radius: 3px; opacity: .55; background: linear-gradient(currentColor, currentColor) 2px -1px / 7px 3px no-repeat; }
.tree-title:hover { background: #fff; }
.tree-add { padding: 5px 8px; color: var(--muted); }
.public-badge { font-size: 12px; color: var(--accent); }

.editor-pane { padding: 18px; min-width: 0; height: 100%; min-height: 0; overflow-y: auto; }
.editor-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.title-input { flex: 1; border: 1px solid var(--border); border-radius: 14px; padding: 13px 14px; font-size: 24px; font-weight: 800; background: var(--panel); min-width: 0; }
.editor-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.share-box { border: 1px solid var(--border); background: var(--panel); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.share-url-row { display: flex; gap: 8px; margin-top: 10px; }
.share-url-row input { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; }
#toolbar { background: var(--panel); border: 1px solid var(--border); border-radius: 14px 14px 0 0; }
#toolbar .ql-align[value=""]::after { content: ''; }
#toolbar .ql-formats[aria-label="Выравнивание текста"] { background: #f8fafc; border-radius: 10px; padding: 2px 3px; }

.editor { min-height: 62vh; background: var(--panel); border-radius: 0 0 14px 14px; }
.ql-container { font-size: 16px; }
.status { color: var(--muted); font-size: 13px; margin-top: 8px; }

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(420px, 100%); background: #fff; border: 1px solid rgba(15,23,42,.10); border-radius: 22px; padding: 32px; box-shadow: 0 8px 32px rgba(15,23,42,.10), 0 1px 4px rgba(15,23,42,.06); }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth-logo { height: 36px; width: auto; display: block; object-fit: contain; }
.auth-logo-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--accent, #7c8cff); color: #fff; font-size: 18px; font-weight: 780; display: grid; place-items: center; flex-shrink: 0; letter-spacing: 0; }
.auth-site-name { font-size: 15px; font-weight: 700; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-heading { margin: 0 0 6px; font-size: 22px; font-weight: 760; letter-spacing: -.03em; color: #0f172a; }
.auth-sub { margin: 0 0 20px; font-size: 14px; color: #64748b; line-height: 1.5; }
.auth-submit { width: 100%; min-height: 46px; border-radius: 13px; font-size: 15px; font-weight: 660; margin-top: 2px; }
.auth-card input { min-height: 44px; }
@media (max-width: 480px) { .auth-card { padding: 24px 20px; border-radius: 18px; } .auth-card input { font-size: 16px; } }
.stack { display: grid; gap: 14px; }
.stack label, .settings-form label { display: grid; gap: 7px; font-weight: 650; }
.stack input, .settings-form input { border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; }
.alert { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; font-size: 14px; }
.ok { background: #ecfdf5; border: 1px solid #bbf7d0; color: #166534; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }

.settings-page { max-width: 780px; margin: 0 auto; padding: 28px 18px; }
.settings-form, .note { background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--border); border-radius: 18px; padding: 18px; display: grid; gap: 14px; backdrop-filter: blur(12px); }
.note { margin-top: 18px; }
code { background: #f1f5f9; padding: 2px 5px; border-radius: 5px; }

.public-header { height: 58px; display: flex; align-items: center; padding: 0 22px; border-bottom: 1px solid color-mix(in srgb, var(--topbar-text) 10%, transparent); background: color-mix(in srgb, var(--topbar-bg) 92%, transparent); color: var(--topbar-text); box-shadow: 0 10px 28px rgba(15,23,42,.04); backdrop-filter: blur(14px); }
.public-layout { display: grid; grid-template-columns: 300px minmax(0, 900px); gap: 28px; align-items: start; max-width: 1280px; margin: 0 auto; padding: 24px; }
.public-tree { position: sticky; top: 82px; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 16px; max-height: calc(100vh - 110px); overflow: auto; }
.public-tree h2 { margin-top: 0; }
.public-tree-list { list-style: none; padding-left: 18px; margin: 0; }
.public-tree > .public-tree-list { padding-left: 0; }
.public-tree-node.collapsed > ul { display: none; }
.public-tree-row { display: flex; align-items: center; gap: 4px; border-radius: 9px; padding: 3px 0; }
.public-tree-row a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 7px; border-radius: 8px; color: var(--text); }
.public-tree-row a:hover { background: var(--accent-soft); }
.public-tree-row.is-active { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.public-tree-row.is-active a { color: var(--accent); font-weight: 750; }
.public-tree-row.is-active a::before { opacity: .75; }
.public-tree-toggle, .public-tree-toggle-placeholder { width: 24px; min-width: 24px; height: 24px; padding: 0; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: 999px; transition: background .15s ease, color .15s ease; }
.public-tree-toggle:hover { background: var(--accent-soft); color: var(--accent); }
.public-tree-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.public-tree-toggle-placeholder { visibility: hidden; }
.public-tree-node.collapsed > .public-tree-row .public-tree-toggle .chevron { transform: rotate(-45deg); margin-top: 0; margin-left: -2px; }
.public-tree-row a::before { content: ''; display: inline-block; width: 12px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 1.5px solid currentColor; border-radius: 3px; opacity: .45; }
.public-tree-node.has-children > .public-tree-row a::before { width: 15px; height: 11px; vertical-align: -1px; border-radius: 3px; opacity: .55; background: linear-gradient(currentColor, currentColor) 2px -1px / 7px 3px no-repeat; }
.public-content { min-width: 0; }
.public-article { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 24px; margin-bottom: 18px; }
.public-article img, .ql-editor img { max-width: 100%; height: auto; }
.public-article video, .ql-editor video { max-width: 100%; height: auto; border-radius: 12px; }
.updated { color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); margin-top: 24px; padding-top: 12px; }
.public-footer { color: var(--muted); text-align: center; padding: 28px; }
.public-not-found { max-width: 700px; margin: 60px auto; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 24px; }

@media (max-width: 900px) {
  .workspace, .public-layout { grid-template-columns: 1fr; }
  body.app-shell { height: auto; overflow: auto; }
  .workspace { height: auto; min-height: calc(100vh - 58px); overflow: visible; }
  .sidebar, .public-tree { position: static; height: auto; max-height: none; overflow: visible; border-right: 0; }
  .editor-header { align-items: stretch; flex-direction: column; }
  .topbar { flex-wrap: wrap; height: auto; padding: 12px; }
  .topnav { margin-left: 0; }
}

/* Autosave + safe edit mode */
button:disabled { opacity: .55; cursor: not-allowed; }
button:disabled:hover { border-color: var(--border); }
.editor-mode-hint {
  border: 1px solid var(--border);
  background: #f8fafc;
  color: var(--muted);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 14px;
}
.app-shell.is-editing .editor-mode-hint { display: none; }
.editor-shell { border-radius: 14px; }
.app-shell:not(.is-editing) #toolbar { display: none; }
.app-shell:not(.is-editing) .title-input {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding-left: 0;
}
.app-shell.is-editing .title-input { border-color: var(--border); background: var(--panel); }
.app-shell:not(.is-editing) .editor.ql-container.ql-snow {
  border-radius: 14px;
  border-top: 1px solid var(--border);
}
.app-shell.is-editing .editor.ql-container.ql-snow { border-radius: 0 0 14px 14px; }
.app-shell:not(.is-editing) .ql-editor {
  cursor: default;
  background: var(--panel);
  border-radius: 14px;
}
.app-shell.is-editing .ql-editor { background: var(--panel); }
.status {
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--muted);
  opacity: .45;
}
.app-shell.is-editing .status::before { background: var(--accent); opacity: .85; }
#editModeBtn.primary { box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 22%, transparent); }

/* Create menu + cleaner color display */
.tree-item.has-node-color {
  background: color-mix(in srgb, var(--node-color) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--node-color) 18%, transparent);
}
.tree-item.active.has-node-color {
  background: color-mix(in srgb, var(--node-color) 15%, var(--accent-soft));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--node-color) 26%, transparent);
}
.tree-item.has-node-color .tree-title:hover {
  background: color-mix(in srgb, var(--node-color) 10%, #fff);
}
.tree-node.is-folder > .tree-item .tree-title::before {
  width: 15px;
  height: 11px;
  vertical-align: -1px;
  border-radius: 3px;
  opacity: .55;
  background: linear-gradient(currentColor, currentColor) 2px -1px / 7px 3px no-repeat;
}
.tree-item.has-node-color .tree-title::before {
  color: var(--node-color);
  opacity: .85;
}
.public-tree-node.is-folder > .public-tree-row a::before {
  width: 15px;
  height: 11px;
  vertical-align: -1px;
  border-radius: 3px;
  opacity: .55;
  background: linear-gradient(currentColor, currentColor) 2px -1px / 7px 3px no-repeat;
}
.public-tree-row.has-node-color {
  background: color-mix(in srgb, var(--node-color) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--node-color) 14%, transparent);
}
.public-tree-row.has-node-color a:hover {
  background: color-mix(in srgb, var(--node-color) 9%, var(--accent-soft));
}
.public-tree-row.has-node-color a::before {
  color: var(--node-color);
  opacity: .8;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(4px);
}
.create-modal {
  width: min(560px, 100%);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 28px 90px rgba(15, 23, 42, .25);
  overflow: hidden;
}
.create-form {
  display: grid;
  gap: 18px;
  padding: 20px;
}
.create-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.create-modal-head h2 {
  margin: 0;
  font-size: 22px;
}
.create-modal-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.modal-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  font-size: 24px;
  line-height: 1;
  color: var(--muted);
}
.create-field {
  display: grid;
  gap: 8px;
}
.create-field > span {
  font-weight: 700;
  font-size: 14px;
}
.create-field input[type="text"] {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 13px;
  outline: none;
}
.create-field input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.create-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.create-type-card {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  cursor: pointer;
  background: #fff;
}
.create-type-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.create-type-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-soft);
}
.create-type-card strong {
  grid-column: 2;
}
.create-type-card small {
  grid-column: 2;
  color: var(--muted);
  line-height: 1.35;
}
.create-type-icon {
  grid-row: span 2;
  display: inline-block;
  color: var(--muted);
}
.create-type-card:has(input:checked) .create-type-icon {
  color: var(--accent);
}
.page-icon {
  width: 14px;
  height: 17px;
  border: 1.7px solid currentColor;
  border-radius: 4px;
}
.folder-icon {
  width: 18px;
  height: 13px;
  border: 1.7px solid currentColor;
  border-radius: 4px;
  background: linear-gradient(currentColor, currentColor) 2px -1px / 8px 4px no-repeat;
}
.create-hint {
  color: var(--muted);
  line-height: 1.35;
}
.create-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.create-color-chip {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip-color);
  box-shadow: inset 0 0 0 4px #fff;
}
.create-color-chip.no-color {
  position: relative;
  background:
    radial-gradient(circle at center, #ffffff 0 52%, transparent 53%),
    linear-gradient(135deg, transparent 0 43%, #94a3b8 44% 56%, transparent 57% 100%),
    #f8fafc;
  box-shadow: inset 0 0 0 4px #fff;
}
.create-color-chip.no-color::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 1.6px solid #94a3b8;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
.create-color-chip.no-color::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: #94a3b8;
  transform: translate(-50%, -50%) rotate(-42deg);
}
.create-color-chip.active {
  border-color: var(--text);
  box-shadow: inset 0 0 0 4px #fff, 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.create-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}
@media (max-width: 560px) {
  .create-type-grid { grid-template-columns: 1fr; }
  .create-modal { border-radius: 18px; }
}

/* Properties menu + custom confirmation dialog */
.tree-edit,
.tree-add {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  background: #fff;
  border-color: var(--border);
  border-radius: 10px;
  line-height: 1;
}
.tree-edit {
  font-size: 18px;
  letter-spacing: 1px;
  opacity: .86;
}
.tree-edit:hover,
.tree-add:hover {
  color: var(--accent);
  background: var(--panel);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}
.tree-item .tree-edit,
.tree-item .tree-add {
  opacity: 0;
  transform: translateX(2px);
  transition: opacity .14s ease, transform .14s ease, border-color .14s ease, color .14s ease;
}
.tree-item:hover .tree-edit,
.tree-item:hover .tree-add,
.tree-item:focus-within .tree-edit,
.tree-item:focus-within .tree-add {
  opacity: 1;
  transform: translateX(0);
}
.properties-modal { width: min(560px, 100%); }
.confirm-modal {
  width: min(460px, 100%);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 28px 90px rgba(15, 23, 42, .25);
}
.confirm-icon {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: #fee2e2;
  color: var(--danger);
  font-weight: 800;
}
.confirm-copy h2 {
  margin: 0;
  font-size: 20px;
}
.confirm-copy p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}
.confirm-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}
.confirm-actions .primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
@media (hover: none) {
  .tree-item .tree-edit,
  .tree-item .tree-add { opacity: 1; transform: none; }
}


/* Clean read-only page view before editing */
.page-view { min-width: 0; }
.page-view-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(20px, 3vw, 34px);
  box-shadow: 0 10px 32px rgba(15, 23, 42, .04);
}
.page-view-card h1 {
  margin: 0 0 22px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.page-view-content {
  color: var(--text);
  font-size: 17px;
  line-height: 1.72;
  overflow-wrap: anywhere;
}
.page-view-content > :first-child { margin-top: 0; }
.page-view-content > :last-child { margin-bottom: 0; }
.page-view-content h1,
.page-view-content h2,
.page-view-content h3,
.page-view-content h4 {
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 1.35em 0 .55em;
}
.page-view-content h1 { font-size: 2em; }
.page-view-content h2 { font-size: 1.55em; }
.page-view-content h3 { font-size: 1.25em; }
.page-view-content p { margin: .85em 0; }
.page-view-content ul,
.page-view-content ol { padding-left: 1.35em; margin: .85em 0; }
.page-view-content blockquote {
  margin: 1.1em 0;
  padding: .2em 0 .2em 1em;
  border-left: 4px solid var(--border);
  color: var(--muted);
}
.page-view-content pre {
  overflow: auto;
  border-radius: 14px;
  padding: 14px;
  background: #0f172a;
  color: #e2e8f0;
}
.page-view-content img,
.page-view-content video,
.page-view-content iframe {
  max-width: 100%;
  border-radius: 14px;
}
.page-view-content table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 12px;
}
.page-view-content th,
.page-view-content td {
  border: 1px solid var(--border);
  padding: 8px 10px;
}
.page-empty {
  color: var(--muted);
  font-style: italic;
}
.app-shell:not(.is-editing) #editorShell,
.app-shell:not(.is-editing) #editorModeHint,
.app-shell:not(.is-editing) #titleInput,
.app-shell:not(.is-editing) #saveBtn {
  display: none;
}
.app-shell.is-editing #pageView { display: none; }
.app-shell:not(.is-editing) .editor-header {
  justify-content: flex-end;
  margin-bottom: 12px;
}
.app-shell:not(.is-editing) .editor-actions { margin-left: auto; }
.app-shell.is-editing #editorShell { display: block; }

/* Import/export modal */
.io-modal { width: min(620px, 100%); }
.io-section {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  background: #f8fafc;
}
.io-section h3 {
  margin: 0 0 10px;
  font-size: 15px;
}
.io-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 9px;
}
.io-grid button {
  min-height: 44px;
  justify-content: center;
  background: #fff;
}
.io-grid button:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  color: var(--accent);
}
#ioCurrentTitle {
  color: var(--text);
  font-weight: 700;
}
@media (max-width: 560px) {
  .io-grid { grid-template-columns: 1fr; }
}

/* Server-side page file storage */
.files-modal { width: min(760px, 100%); }
.files-storage-note {
  border: 1px solid var(--border);
  background: #f8fafc;
  color: var(--muted);
  border-radius: 16px;
  padding: 12px 14px;
  line-height: 1.45;
}
.files-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.page-files-list {
  display: grid;
  gap: 10px;
  max-height: min(52vh, 520px);
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.page-files-list::-webkit-scrollbar { width: 8px; }
.page-files-list::-webkit-scrollbar-track { background: transparent; }
.page-files-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.files-empty {
  border: 1px dashed var(--border);
  border-radius: 16px;
  color: var(--muted);
  background: #f8fafc;
  padding: 18px;
  text-align: center;
}
.page-file-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  padding: 12px;
}
.page-file-badge {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  overflow: hidden;
}
.page-file-meta {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.page-file-meta strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-file-meta small {
  color: var(--muted);
}
.page-file-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.button-like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--text);
  background: #fff;
}
.button-like:hover { border-color: var(--accent); color: var(--accent); }
.subtle-danger { background: #fff; }
.page-view-content a[href^="/files/"],
.ql-editor a[href^="/files/"],
.public-article a[href^="/files/"],
.page-view-content a.dockbook-attachment,
.ql-editor a.dockbook-attachment,
.public-article a.dockbook-attachment {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background: #f8fafc;
  color: var(--text);
  font-weight: 650;
  line-height: 1.25;
  word-break: break-word;
}
.page-view-content a[href^="/files/"]::before,
.ql-editor a[href^="/files/"]::before,
.public-article a[href^="/files/"]::before,
.page-view-content a.dockbook-attachment::before,
.ql-editor a.dockbook-attachment::before,
.public-article a.dockbook-attachment::before {
  content: '';
  width: 16px;
  height: 18px;
  min-width: 16px;
  margin-right: 9px;
  border: 1.7px solid currentColor;
  border-radius: 4px;
  opacity: .55;
  background: linear-gradient(currentColor, currentColor) 4px 5px / 7px 1.5px no-repeat,
              linear-gradient(currentColor, currentColor) 4px 9px / 7px 1.5px no-repeat;
}
.page-view-content audio,
.ql-editor audio,
.public-article audio {
  width: min(100%, 520px);
}
@media (max-width: 760px) {
  .page-file-row { grid-template-columns: 44px minmax(0, 1fr); }
  .page-file-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Media resize controls */
.media-resize-toolbar {
  position: fixed;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
  backdrop-filter: blur(10px);
}
.media-resize-toolbar button {
  min-width: 34px;
  min-height: 32px;
  padding: 5px 9px;
  border-radius: 10px;
  font-weight: 750;
}
.media-resize-toolbar span {
  min-width: 46px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}
.ql-editor img,
.ql-editor video,
.ql-editor iframe,
.page-view-content img,
.page-view-content video,
.page-view-content iframe,
.public-article img,
.public-article video,
.public-article iframe {
  max-width: 100%;
  height: auto;
}
.ql-editor iframe,
.page-view-content iframe,
.public-article iframe {
  width: min(100%, 760px);
  min-height: 260px;
  border: 0;
  border-radius: 14px;
}
.ql-editor .dockbook-media-selected,
.ql-editor img.dockbook-media-selected,
.ql-editor video.dockbook-media-selected,
.ql-editor iframe.dockbook-media-selected {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 12px;
}
.dockbook-resized-media {
  display: block;
  margin: .75em 0;
}
.properties-actions {
  align-items: center;
  justify-content: flex-start;
}
.properties-actions .properties-delete-btn {
  margin-left: auto;
}
@media (max-width: 560px) {
  .media-resize-toolbar {
    left: 10px !important;
    right: 10px;
    width: auto;
    justify-content: center;
  }
  .properties-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .properties-actions .properties-delete-btn { margin-left: 0; }
}

/* Public navigation: no color strips; active/current page is shown by a soft filled pill. */
.public-page .public-tree-row.has-node-color {
  background: transparent;
  box-shadow: none;
}
.public-page .public-tree-row.has-node-color a:hover { background: var(--accent-soft); }
.public-page .public-tree-row.has-node-color a::before { color: currentColor; opacity: .55; }
.public-page .public-tree-row.is-active,
.public-page .public-tree-row.has-node-color.is-active {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.public-page .public-tree-row.is-active .public-tree-toggle {
  color: var(--accent);
}

/* Center screen notifications */
.toast-stack {
  position: fixed;
  z-index: 1500;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(226, 232, 240, .86);
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .20);
  backdrop-filter: blur(14px);
  opacity: 0;
  transform: scale(.96) translateY(10px);
  filter: blur(2px);
  animation: toast-in .34s cubic-bezier(.16, 1, .3, 1) forwards;
}
.toast::before {
  content: '';
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.toast.success::before { background: #dcfce7; box-shadow: inset 0 0 0 1px #86efac; }
.toast.danger::before { background: #fee2e2; box-shadow: inset 0 0 0 1px #fecaca; }
.toast.info::before { background: var(--accent-soft); }
.toast strong {
  display: block;
  font-size: 14px;
  line-height: 1.25;
}
.toast.is-leaving {
  pointer-events: none;
  animation: toast-out .62s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes toast-in {
  0% { opacity: 0; transform: scale(.96) translateY(12px); filter: blur(5px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes toast-out {
  0% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: scale(.985) translateY(-18px); filter: blur(9px); }
}
@media (max-width: 560px) {
  .toast-stack { top: 46%; }
}


/* Guest/public navigation must not show per-folder color marks. Only the active tracker remains. */
.public-page .public-tree-row.has-node-color,
.public-page .public-tree-row[style*="--node-color"] {
  background: transparent !important;
  box-shadow: none !important;
}
.public-page .public-tree-row.has-node-color a:hover,
.public-page .public-tree-row[style*="--node-color"] a:hover {
  background: var(--accent-soft) !important;
}
.public-page .public-tree-row.has-node-color a::before,
.public-page .public-tree-row[style*="--node-color"] a::before {
  color: currentColor !important;
  opacity: .55 !important;
}
.public-page .public-tree-row.has-node-color.is-active,
.public-page .public-tree-row[style*="--node-color"].is-active,
.public-page .public-tree-row.is-active {
  background: var(--accent-soft) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

/* Branding settings */
.brand { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-logo { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; border-radius: 7px; }
.auth-heading { display: block; }
.settings-section { display: grid; gap: 13px; }
.settings-section h2 { margin: 0 0 2px; font-size: 18px; }
.settings-muted { color: var(--muted); margin: 0; line-height: 1.45; }
.branding-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.file-card { border: 1px solid var(--border); border-radius: 16px; padding: 14px; background: #f8fafc; display: grid; gap: 10px; align-content: start; }
.file-card label { display: grid; gap: 8px; font-weight: 700; }
.file-card input[type="file"] { background: #fff; padding: 10px; border: 1px dashed #cbd5e1; border-radius: 12px; }
.file-card small { color: var(--muted); line-height: 1.4; }
.branding-preview { display: flex; align-items: center; gap: 10px; padding: 10px; background: #fff; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); font-size: 13px; }
.branding-preview img { width: 72px; height: 42px; object-fit: contain; border-radius: 8px; background: #f8fafc; }
.favicon-preview img { width: 34px; height: 34px; }
.inline-check { display: inline-flex !important; grid-template-columns: none !important; align-items: center; gap: 8px !important; font-weight: 600 !important; color: var(--muted); }
.inline-check input { width: auto; }
.settings-actions { display: flex; justify-content: flex-start; }

@media (max-width: 760px) {
  .branding-grid { grid-template-columns: 1fr; }
}


/* Theme settings: laconic gradient background and top panel color */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.theme-grid label {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: #f8fafc;
}
.theme-grid input[type="color"] {
  width: 100%;
  height: 42px;
  padding: 4px;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.theme-preview {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  min-height: 150px;
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--preview-bg-end) 60%, transparent) 0, transparent 36%),
    linear-gradient(145deg, var(--preview-bg-start), var(--preview-bg-end));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.theme-preview-topbar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: var(--preview-topbar);
  color: var(--preview-topbar-text);
  border-bottom: 1px solid rgba(15,23,42,.08);
  font-weight: 750;
}
.theme-preview-card {
  width: min(360px, calc(100% - 32px));
  margin: 24px auto;
  padding: 16px;
  border: 1px solid rgba(226,232,240,.88);
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  color: var(--text);
  text-align: center;
  box-shadow: 0 16px 46px rgba(15,23,42,.08);
}
@media (max-width: 760px) {
  .theme-grid { grid-template-columns: 1fr; }
}

/* Color wheel settings palette */
button.subtle {
  background: #fff;
  color: var(--text);
  border-color: var(--border);
}
button.subtle:hover { border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); }
.theme-actions-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.color-field {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: #f8fafc;
  display: grid;
  gap: 9px;
  min-width: 0;
}
.color-field-label {
  font-weight: 750;
  color: var(--text);
}
.color-control-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.color-swatch {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--swatch-color, #000) 22%, var(--border));
  background: var(--swatch-color, #000);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.68), 0 6px 16px rgba(15,23,42,.08);
}
.color-hex-input {
  width: 100%;
  min-width: 0;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 0 12px;
  background: #fff;
  color: var(--text);
  font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.color-picker-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 12px;
  z-index: 50;
  width: 220px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 22px 60px rgba(15,23,42,.18);
  backdrop-filter: blur(12px);
}
.color-picker-popover[hidden] { display: none; }
.color-wheel {
  display: block;
  width: 168px;
  height: 168px;
  margin: 0 auto 9px;
  cursor: crosshair;
  border-radius: 50%;
  filter: drop-shadow(0 8px 18px rgba(15,23,42,.12));
}
.color-wheel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}
.color-selected-label {
  color: var(--text);
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.brightness-control {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.brightness-range { width: 100%; accent-color: var(--accent); }
.settings-actions {
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .color-control-row { grid-template-columns: 42px minmax(0, 1fr); }
  .color-picker-popover { left: 8px; right: 8px; width: auto; }
}

/* Vortex animated background */
body {
  position: relative;
  isolation: isolate;
}
body.theme-vortex {
  background:
    radial-gradient(circle at 16% 10%, color-mix(in srgb, var(--bg-end) 60%, transparent) 0%, transparent 34%),
    radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 32%),
    linear-gradient(145deg, var(--bg-start), var(--bg-end));
}
body.theme-vortex::before,
body.theme-vortex::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity, filter;
}
body.theme-vortex > * {
  position: relative;
  z-index: 1;
}
body.theme-vortex::before {
  inset: -46vmax;
  background:
    conic-gradient(from 0deg at 50% 50%,
      color-mix(in srgb, var(--bg-start) 76%, white),
      color-mix(in srgb, var(--bg-end) 76%, white),
      color-mix(in srgb, var(--accent) 28%, transparent),
      color-mix(in srgb, var(--bg-start) 68%, white),
      color-mix(in srgb, var(--bg-end) 82%, white),
      color-mix(in srgb, var(--accent) 18%, transparent),
      color-mix(in srgb, var(--bg-start) 76%, white));
  opacity: .74;
  filter: blur(44px) saturate(1.18);
  animation: dockbook-vortex-spin 28s linear infinite;
}
body.theme-vortex::after {
  inset: -12vmax;
  background:
    radial-gradient(ellipse at 18% 24%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 34%),
    radial-gradient(ellipse at 76% 8%, color-mix(in srgb, var(--bg-end) 64%, transparent) 0%, transparent 30%),
    radial-gradient(ellipse at 56% 86%, color-mix(in srgb, var(--bg-start) 72%, transparent) 0%, transparent 38%);
  opacity: .82;
  filter: blur(18px) saturate(1.12);
  animation: dockbook-vortex-drift 18s ease-in-out infinite alternate;
}
@keyframes dockbook-vortex-spin {
  0% { transform: rotate(0deg) scale(1.02); }
  50% { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1.02); }
}
@keyframes dockbook-vortex-drift {
  0% { transform: translate3d(-2.4%, -1.2%, 0) rotate(-4deg) scale(1); }
  50% { transform: translate3d(2.2%, 1.8%, 0) rotate(3deg) scale(1.035); }
  100% { transform: translate3d(-.5%, 2.8%, 0) rotate(6deg) scale(1.055); }
}
@media (prefers-reduced-motion: reduce) {
  body.theme-vortex::before,
  body.theme-vortex::after,
  .theme-preview.is-vortex::before { animation: none !important; }
}

.theme-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.toggle-card {
  position: relative;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 12px !important;
  row-gap: 3px !important;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px !important;
  background: color-mix(in srgb, #f8fafc 88%, transparent);
  cursor: pointer;
}
.toggle-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.toggle-ui {
  grid-row: span 2;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: #cbd5e1;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.08);
  transition: background .18s ease, box-shadow .18s ease;
}
.toggle-ui::before {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  margin: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 10px rgba(15,23,42,.18);
  transition: transform .18s ease;
}
.toggle-card input:checked + .toggle-ui {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 76%, #fff);
}
.toggle-card input:checked + .toggle-ui::before {
  transform: translateX(20px);
}
.toggle-card strong { font-weight: 800; }
.toggle-card small { color: var(--muted); line-height: 1.35; }
.toggle-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, rgba(255,255,255,.84));
}
.theme-preview {
  position: relative;
  isolation: isolate;
}
.theme-preview.is-vortex {
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--preview-bg-end) 64%, transparent) 0%, transparent 34%),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 30%),
    linear-gradient(145deg, var(--preview-bg-start), var(--preview-bg-end));
}
.theme-preview.is-vortex::before {
  content: '';
  position: absolute;
  inset: -80px;
  z-index: -1;
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--preview-bg-start) 80%, white),
    color-mix(in srgb, var(--preview-bg-end) 78%, white),
    color-mix(in srgb, var(--accent) 30%, transparent),
    color-mix(in srgb, var(--preview-bg-start) 80%, white));
  opacity: .72;
  filter: blur(26px) saturate(1.2);
  animation: dockbook-vortex-spin 18s linear infinite;
}
@media (max-width: 760px) {
  .theme-mode-grid { grid-template-columns: 1fr; }
}

/* No-glass polish: rounded top bar, refined action buttons, bottom-right notifications */
.topbar,
.public-header {
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}

button {
  transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.editor-actions {
  align-items: center;
  gap: 9px;
}
.editor-actions button {
  border-radius: 999px;
  padding: 10px 14px;
  border-color: color-mix(in srgb, var(--accent) 14%, var(--border));
  background: linear-gradient(180deg, rgba(255,255,255,.98), color-mix(in srgb, var(--accent) 4%, #ffffff));
  color: color-mix(in srgb, var(--text) 86%, var(--accent));
  box-shadow: 0 8px 20px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.78);
  font-weight: 700;
}
.editor-actions button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  box-shadow: 0 12px 28px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.86);
}
.editor-actions button:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.72);
}
.editor-actions button.primary {
  border-color: color-mix(in srgb, var(--accent) 72%, #0f172a);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, #0f172a), color-mix(in srgb, var(--accent) 72%, #60a5fa));
  color: #fff;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.18);
}
.editor-actions button.danger {
  color: #dc2626;
  border-color: #fecaca;
  background: linear-gradient(180deg, #fff, #fff7f7);
}
.editor-actions button.danger:hover {
  color: #b91c1c;
  border-color: #fca5a5;
  box-shadow: 0 12px 28px rgba(220,38,38,.10), inset 0 1px 0 rgba(255,255,255,.86);
}

.toast-stack {
  left: auto;
  top: auto;
  right: 24px;
  bottom: 24px;
  transform: none;
  width: min(470px, calc(100vw - 32px));
  justify-items: end;
}
.toast {
  width: 100%;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 13px;
  padding: 18px 20px;
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .22);
}
.toast::before {
  width: 34px;
  height: 34px;
}
.toast strong {
  font-size: 15.5px;
  line-height: 1.35;
}
@media (max-width: 560px) {
  .toast-stack {
    right: 16px;
    bottom: 16px;
    width: calc(100vw - 32px);
  }
}



/* Layout/export/modal polish 20260612 */
body.has-open-modal { overflow: hidden; }

/* Возвращаем верхнюю панель к ровной форме без скругления. */
.topbar,
.public-header {
  border-radius: 0 !important;
  overflow: visible !important;
}

.workspace {
  height: calc(100vh - 58px);
}
.editor-pane {
  padding: 14px 18px 18px;
}
.editor-header {
  min-height: 44px;
  margin-bottom: 14px;
  align-items: center;
}
.app-shell:not(.is-editing) .editor-header {
  justify-content: flex-end;
}
.editor-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(226, 232, 240, .94);
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .055);
}
.editor-actions button {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: #334155;
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}
.editor-actions button:hover {
  transform: none;
  background: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: none;
}
.editor-actions button:active {
  transform: translateY(1px);
  box-shadow: none;
}
.editor-actions button.primary,
.editor-actions #editModeBtn.primary {
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 70%, #0f172a);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, #334155), color-mix(in srgb, var(--accent) 76%, #0f172a));
  box-shadow: 0 7px 16px color-mix(in srgb, var(--accent) 18%, transparent);
}
.editor-actions button.primary:hover,
.editor-actions #editModeBtn.primary:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #334155), color-mix(in srgb, var(--accent) 82%, #0f172a));
  box-shadow: 0 9px 20px color-mix(in srgb, var(--accent) 20%, transparent);
}
.editor-actions button.danger {
  color: #dc2626;
  background: #fff7f7;
  border-color: #fecaca;
}
.editor-actions button.danger:hover {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fca5a5;
  box-shadow: none;
}

/* Модальные окна всегда центрируются относительно экрана и не накапливаются друг под другом. */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  overflow: auto !important;
  background: rgba(15, 23, 42, .48) !important;
  backdrop-filter: blur(5px) !important;
}
.modal-overlay.hidden {
  display: none !important;
}
.create-modal,
.properties-modal,
.io-modal,
.files-modal,
.confirm-modal {
  margin: auto !important;
  max-height: calc(100vh - 48px) !important;
  overflow: auto !important;
}
.create-modal,
.properties-modal,
.io-modal {
  width: min(560px, calc(100vw - 40px)) !important;
}
.files-modal {
  width: min(760px, calc(100vw - 40px)) !important;
}
.confirm-modal {
  width: min(460px, calc(100vw - 40px)) !important;
}

@media (max-width: 760px) {
  .editor-header { align-items: stretch; }
  .editor-actions { width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .editor-actions button { white-space: nowrap; }
  .modal-overlay { align-items: flex-start !important; padding-top: 18px !important; }
}

/* Action layout + notification sound polish 20260612 */
.editor-pane {
  padding: 14px 18px 18px !important;
}
.page-work-card {
  min-width: 0;
  background: rgba(255, 255, 255, .90);
  border: 1px solid rgba(226, 232, 240, .96);
  border-radius: 18px;
  box-shadow: 0 16px 44px rgba(15, 23, 42, .055);
  overflow: hidden;
}
.page-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(226, 232, 240, .82);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.86));
}
.page-card-context {
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}
.page-work-card #shareBox {
  margin: 14px 18px 0;
}
.page-work-card #pageView {
  padding: clamp(18px, 2.2vw, 30px);
}
.page-work-card .page-view-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  background: transparent;
}
.page-work-card #editorShell {
  padding: 16px 18px 18px;
}
.page-work-card #titleInput {
  display: block;
  width: 100%;
  margin: 0 0 12px;
}
.page-work-card #status {
  padding: 0 18px 14px;
  margin-top: 0;
}
.app-shell:not(.is-editing) #titleInput,
.app-shell:not(.is-editing) #editorShell,
.app-shell:not(.is-editing) #editorModeHint,
.app-shell:not(.is-editing) #saveBtn {
  display: none !important;
}
.app-shell.is-editing #pageView {
  display: none !important;
}
.app-shell.is-editing #editorShell {
  display: block !important;
}
.editor-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  padding: 3px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.86) !important;
  box-shadow: none !important;
  flex-wrap: wrap !important;
}
.editor-actions button {
  min-height: 32px !important;
  padding: 6px 11px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #334155 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}
.editor-actions button:hover {
  transform: none !important;
  background: #f1f5f9 !important;
  border-color: #dbe4ef !important;
  box-shadow: none !important;
}
.editor-actions button:active {
  transform: translateY(1px) !important;
}
.editor-actions button.primary,
.editor-actions #editModeBtn.primary {
  color: #fff !important;
  border-color: color-mix(in srgb, var(--accent) 80%, #0f172a) !important;
  background: color-mix(in srgb, var(--accent) 88%, #334155) !important;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 16%, transparent) !important;
}
.editor-actions button.primary:hover,
.editor-actions #editModeBtn.primary:hover {
  background: color-mix(in srgb, var(--accent) 78%, #0f172a) !important;
}
.editor-actions button.danger {
  color: #dc2626 !important;
  background: #fff7f7 !important;
  border-color: #fecaca !important;
}
.editor-actions button.danger:hover {
  color: #b91c1c !important;
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
}
.topnav .topbar-file-button {
  border: 0;
  background: transparent;
  color: var(--topbar-text);
  border-radius: 9px;
  padding: 6px 9px;
  box-shadow: none;
  font-weight: 600;
}
.topnav .topbar-file-button:hover {
  background: color-mix(in srgb, var(--topbar-text) 7%, transparent);
  color: color-mix(in srgb, var(--topbar-text) 74%, var(--accent));
  border-color: transparent;
}
.topbar,
.public-header {
  border-radius: 0 !important;
  overflow: visible !important;
}
@media (max-width: 980px) {
  .page-card-topline { align-items: stretch; flex-direction: column; }
  .page-card-context { display: none; }
  .editor-actions { width: 100%; justify-content: flex-start !important; overflow-x: auto; flex-wrap: nowrap !important; }
  .editor-actions button { white-space: nowrap; }
}

/* Accounts/permissions + action button readability polish 20260612 */
.page-card-topline {
  align-items: center !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)) !important;
}
.page-card-context {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #334155 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: -.01em !important;
}
.page-card-context::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent);
}
.editor-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 9px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  flex-wrap: wrap !important;
}
.editor-actions button {
  min-height: 36px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, #cbd5e1) !important;
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  color: #1e293b !important;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, .72),
    0 10px 22px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  transform: translateZ(0) scale(1) !important;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease !important;
}
.editor-actions button:hover {
  transform: translateY(-1px) scale(1.035) !important;
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--accent) 6%, #f8fafc)) !important;
  border-color: color-mix(in srgb, var(--accent) 34%, #cbd5e1) !important;
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--accent) 10%, transparent),
    0 15px 32px rgba(15, 23, 42, .13),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}
.editor-actions button:active {
  transform: translateY(0) scale(.99) !important;
}
.editor-actions button.primary,
.editor-actions #editModeBtn.primary {
  color: #fff !important;
  border-color: color-mix(in srgb, var(--accent) 72%, #0f172a) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 94%, #334155), color-mix(in srgb, var(--accent) 72%, #0f172a)) !important;
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent),
    0 14px 30px color-mix(in srgb, var(--accent) 26%, transparent),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.editor-actions button.primary:hover,
.editor-actions #editModeBtn.primary:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #0f172a), color-mix(in srgb, var(--accent) 62%, #1e293b)) !important;
}
.editor-actions button.danger {
  color: #dc2626 !important;
  border-color: #fecaca !important;
  background: linear-gradient(180deg, #ffffff, #fff7f7) !important;
  box-shadow:
    0 0 0 4px rgba(254, 226, 226, .42),
    0 10px 22px rgba(127, 29, 29, .06),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.editor-actions button.danger:hover {
  color: #b91c1c !important;
  border-color: #fca5a5 !important;
  background: linear-gradient(180deg, #fff, #fef2f2) !important;
  box-shadow:
    0 0 0 5px rgba(254, 202, 202, .48),
    0 15px 32px rgba(185, 28, 28, .12),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}
.topbar,
.public-header {
  border-radius: 0 !important;
}
.topbar .topbar-file-button {
  border: 1px solid color-mix(in srgb, var(--topbar-text) 13%, transparent) !important;
  background: color-mix(in srgb, var(--topbar-bg) 78%, white) !important;
  border-radius: 999px !important;
  padding: 7px 12px !important;
  font-weight: 750 !important;
}
.topbar .topbar-file-button:hover {
  transform: translateY(-1px) scale(1.025);
  background: color-mix(in srgb, var(--accent) 9%, var(--topbar-bg)) !important;
}

.accounts-settings {
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  margin-top: 18px;
  backdrop-filter: blur(12px);
}
.settings-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.account-admin-note,
.empty-accounts {
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1e3a8a;
  border-radius: 14px;
  padding: 11px 13px;
  line-height: 1.45;
}
.account-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 13px;
  box-shadow: 0 12px 34px rgba(15,23,42,.045);
}
.account-create-card {
  background: linear-gradient(180deg, #fff, #f8fafc);
}
.account-card-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.account-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.account-card-head strong {
  display: block;
  font-size: 16px;
  color: #0f172a;
}
.account-card-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
}
.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.permission-grid.compact {
  gap: 8px;
}
.permission-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: flex-start !important;
  gap: 10px !important;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  padding: 10px;
  cursor: pointer;
}
.permission-card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, #e2e8f0);
  background: color-mix(in srgb, var(--accent) 5%, #f8fafc);
}
.permission-card input {
  margin-top: 3px;
}
.permission-card strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
}
.permission-card small {
  display: block;
  color: var(--muted);
  line-height: 1.35;
  margin-top: 2px;
  font-weight: 500;
}
.accounts-list {
  display: grid;
  gap: 12px;
}
.account-update-form {
  display: grid;
  gap: 12px;
}
.account-actions {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.account-delete-form {
  display: flex;
  justify-content: flex-end;
  margin-top: -4px;
}
.account-delete-form .danger {
  background: #fff7f7;
  border-color: #fecaca;
  color: #dc2626;
}
.account-active-toggle {
  white-space: nowrap;
}
@media (max-width: 760px) {
  .account-card-main,
  .permission-grid {
    grid-template-columns: 1fr;
  }
  .account-card-head {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Account list and calm button polish 20260612 */
.page-card-topline {
  padding: 12px 14px !important;
  gap: 14px !important;
}
.page-card-context {
  color: #475569 !important;
  font-size: 14.5px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}
.page-card-context::before {
  width: 6px !important;
  height: 6px !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent) !important;
  opacity: .78 !important;
}
.editor-actions {
  gap: 8px !important;
}
.editor-actions button {
  min-height: 34px !important;
  padding: 7px 13px !important;
  border-radius: 12px !important;
  border: 1px solid #dbe4ef !important;
  background: #ffffff !important;
  color: #334155 !important;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.64),
    0 8px 18px rgba(15,23,42,.055) !important;
  font-size: 13.5px !important;
  font-weight: 580 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}
.editor-actions button:hover {
  transform: translateY(-1px) scale(1.018) !important;
  border-color: color-mix(in srgb, var(--accent) 24%, #cbd5e1) !important;
  background: color-mix(in srgb, var(--accent) 4%, #ffffff) !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 7%, transparent),
    0 12px 24px rgba(15,23,42,.09) !important;
}
.editor-actions button.primary,
.editor-actions #editModeBtn.primary {
  color: #ffffff !important;
  border-color: color-mix(in srgb, var(--accent) 68%, #334155) !important;
  background: color-mix(in srgb, var(--accent) 86%, #334155) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent),
    0 9px 20px color-mix(in srgb, var(--accent) 18%, transparent) !important;
  font-weight: 600 !important;
}
.editor-actions button.primary:hover,
.editor-actions #editModeBtn.primary:hover {
  background: color-mix(in srgb, var(--accent) 78%, #1e293b) !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent),
    0 13px 26px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}
.editor-actions button.danger {
  color: #dc2626 !important;
  border-color: #fecaca !important;
  background: #fffafa !important;
  box-shadow:
    0 0 0 3px rgba(254,226,226,.38),
    0 8px 18px rgba(127,29,29,.045) !important;
  font-weight: 580 !important;
}
.editor-actions button.danger:hover {
  background: #fff5f5 !important;
  border-color: #fca5a5 !important;
  transform: translateY(-1px) scale(1.018) !important;
}
.topbar .topbar-file-button {
  border: 1px solid color-mix(in srgb, var(--topbar-text) 12%, transparent) !important;
  background: color-mix(in srgb, var(--topbar-bg) 72%, #ffffff) !important;
  color: var(--topbar-text) !important;
  border-radius: 12px !important;
  padding: 6px 11px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.topbar .topbar-file-button:hover {
  transform: translateY(-1px) scale(1.012) !important;
  background: color-mix(in srgb, var(--accent) 6%, var(--topbar-bg)) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.07) !important;
}

.accounts-settings {
  display: grid;
  gap: 16px;
}
.accounts-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr);
  gap: 16px;
  align-items: start;
}
.accounts-panel,
.account-create-panel {
  border: 1px solid #e2e8f0;
  background: rgba(255,255,255,.82);
  border-radius: 20px;
  box-shadow: 0 16px 42px rgba(15,23,42,.05);
  overflow: hidden;
}
.accounts-list-head,
.account-create-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid #eef2f7;
  background: linear-gradient(180deg, #fff, #fbfdff);
}
.accounts-list-head h3,
.account-create-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.accounts-list-head p,
.account-create-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.accounts-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, #f8fafc);
  color: color-mix(in srgb, var(--accent) 76%, #0f172a);
  font-size: 13px;
  font-weight: 650;
}
.accounts-table {
  display: grid;
  gap: 8px;
  padding: 12px;
}
.account-row-card {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(15,23,42,.035);
}
.account-row-card[open] {
  border-color: color-mix(in srgb, var(--accent) 22%, #dbe4ef);
  box-shadow: 0 14px 34px rgba(15,23,42,.065);
}
.account-row-summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(145px, 1fr) minmax(0, 1.2fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
}
.account-row-summary::-webkit-details-marker { display: none; }
.account-avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 10%, #f8fafc);
  color: color-mix(in srgb, var(--accent) 82%, #0f172a);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, #e2e8f0);
  font-weight: 700;
  text-transform: uppercase;
}
.account-row-title strong {
  display: block;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.account-row-title small {
  display: inline-flex;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12.5px;
}
.account-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 6px;
  background: #22c55e;
}
.account-status-dot.off { background: #94a3b8; }
.account-permission-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.account-permission-pill {
  display: inline-flex;
  align-items: center;
  max-width: 170px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-permission-pill.more {
  background: color-mix(in srgb, var(--accent) 8%, #f8fafc);
  color: color-mix(in srgb, var(--accent) 76%, #0f172a);
}
.account-row-toggle {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, #e2e8f0);
}
.account-row-card[open] .account-row-toggle::after { content: ' ↑'; }
.account-row-card:not([open]) .account-row-toggle::after { content: ' ↓'; }
.account-details-body {
  border-top: 1px solid #eef2f7;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  display: grid;
  gap: 12px;
}
.account-details-form {
  display: grid;
  gap: 12px;
}
.account-details-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.account-details-top input[type="password"],
.account-create-card input {
  width: 100%;
}
.permission-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.permission-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
.permission-card strong {
  font-weight: 650 !important;
}
.account-create-panel .account-create-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 14px;
  background: transparent;
}
.account-create-card .permission-grid {
  grid-template-columns: 1fr !important;
}
.account-create-card .permission-card small {
  display: none;
}
.account-actions button,
.account-delete-form .danger {
  font-weight: 580 !important;
  border-radius: 12px !important;
}
.account-row-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.account-delete-form {
  margin: 0 !important;
  justify-content: flex-end !important;
}
.empty-accounts {
  margin: 12px;
}
@media (max-width: 1080px) {
  .accounts-dashboard { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .account-row-summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .account-permission-pills {
    grid-column: 2 / -1;
  }
  .account-details-top,
  .permission-grid.compact {
    grid-template-columns: 1fr !important;
  }
}

/* Top navigation and guest export polish 20260612 */
.topnav {
  gap: 10px !important;
}
.topnav form {
  display: flex !important;
  margin: 0 !important;
}
.topbar .topbar-action-button,
.topbar a.topbar-action-button,
.topbar button.topbar-action-button,
.settings-shell .topbar a.topbar-action-button {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  border: 1px solid color-mix(in srgb, var(--topbar-text) 11%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--topbar-bg) 78%, #ffffff) !important;
  color: var(--topbar-text) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 7px 18px rgba(15,23,42,.045) !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}
.topbar .topbar-action-button:hover,
.topbar a.topbar-action-button:hover,
.topbar button.topbar-action-button:hover,
.settings-shell .topbar a.topbar-action-button:hover {
  transform: translateY(-1px) scale(1.025) !important;
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border)) !important;
  background: color-mix(in srgb, var(--accent) 5%, var(--topbar-bg)) !important;
  color: var(--topbar-text) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.075) !important;
}
.topbar .topbar-file-button {
  font-weight: 500 !important;
}

.editor-actions button {
  font-weight: 520 !important;
  text-shadow: none !important;
  box-shadow: 0 6px 16px rgba(15,23,42,.055) !important;
}
.editor-actions button.primary,
.editor-actions #editModeBtn.primary {
  font-weight: 560 !important;
  background: color-mix(in srgb, var(--accent) 76%, #334155) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 14%, transparent) !important;
}
.editor-actions button:hover {
  transform: translateY(-1px) scale(1.018) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.085) !important;
}

.public-header {
  gap: 16px !important;
}
.public-export-nav {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--topbar-text);
}
.public-export-nav span {
  font-size: 13px;
  color: color-mix(in srgb, var(--topbar-text) 70%, transparent);
}
.public-export-nav button {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--topbar-text) 10%, transparent);
  background: color-mix(in srgb, var(--topbar-bg) 80%, #ffffff);
  color: var(--topbar-text);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 6px 16px rgba(15,23,42,.045);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.public-export-nav button:hover {
  transform: translateY(-1px) scale(1.02);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--topbar-bg));
  box-shadow: 0 10px 22px rgba(15,23,42,.075);
}
@media (max-width: 760px) {
  .public-header { flex-wrap: wrap; height: auto; min-height: 58px; padding: 10px 16px; }
  .public-export-nav { width: 100%; margin-left: 0; justify-content: flex-start; }
  .public-export-nav span { display: none; }
  .topnav { gap: 8px !important; }
  .topbar .topbar-action-button,
  .topbar a.topbar-action-button,
  .topbar button.topbar-action-button { min-height: 36px !important; padding: 0 13px !important; }
}

/* Sidebar actions, ordering controls and public folder export update 20260612 */
.tree-toggle,
.tree-edit,
.tree-add,
.tree-reorder-btn {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease, opacity .16s ease !important;
}
.tree-toggle:hover,
.tree-edit:hover,
.tree-add:hover,
.tree-reorder-btn:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.045) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.09) !important;
}
.tree-toggle:active,
.tree-edit:active,
.tree-add:active,
.tree-reorder-btn:active:not(:disabled) {
  transform: translateY(0) scale(.98) !important;
}
.tree-item {
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease !important;
}
.tree-item:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 11%, transparent), 0 5px 14px rgba(15,23,42,.035) !important;
}
.tree-title {
  transition: background .16s ease, color .16s ease !important;
}
.tree-reorder {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.tree-reorder-btn {
  width: 24px;
  min-width: 24px;
  height: 28px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  background: rgba(255,255,255,.88);
  border: 1px solid var(--border);
  border-radius: 9px;
  line-height: 1;
  font-size: 13px;
}
.tree-reorder-btn:disabled {
  opacity: .24 !important;
  cursor: default;
  box-shadow: none !important;
}
.tree-item .tree-reorder,
.tree-item .tree-edit,
.tree-item .tree-add {
  opacity: 0;
  transform: translateX(3px);
  transition: opacity .15s ease, transform .15s ease !important;
}
.tree-item:hover .tree-reorder,
.tree-item:focus-within .tree-reorder,
.tree-item:hover .tree-edit,
.tree-item:hover .tree-add,
.tree-item:focus-within .tree-edit,
.tree-item:focus-within .tree-add,
.tree-item.active .tree-reorder,
.tree-item.active .tree-edit,
.tree-item.active .tree-add {
  opacity: 1;
  transform: translateX(0);
}
.tree-edit,
.tree-add {
  box-shadow: 0 4px 12px rgba(15,23,42,.04) !important;
}

.public-export-nav {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.public-export-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--topbar-text) 9%, transparent);
  background: color-mix(in srgb, var(--topbar-bg) 72%, #ffffff);
  box-shadow: 0 6px 16px rgba(15,23,42,.035);
}
.public-export-group small {
  padding-left: 10px;
  color: color-mix(in srgb, var(--topbar-text) 62%, transparent);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.public-export-nav .public-export-group button {
  min-height: 30px;
  padding: 0 11px;
  box-shadow: none;
  background: #fff;
}
.public-export-nav .public-export-group button:hover {
  transform: translateY(-1px) scale(1.035);
  box-shadow: 0 7px 16px rgba(15,23,42,.07);
}
@media (max-width: 760px) {
  .public-export-nav { justify-content: flex-start; gap: 6px; }
  .public-export-group { width: auto; }
  .public-export-group small { display: none; }
}
@media (max-width: 430px) {
  .tree-reorder { display: none; }
}

/* Setup, dashboard, drag-and-drop tree polish */
.no-page-selected .page-card-topline,
.no-page-selected #editorModeHint,
.no-page-selected #editorShell,
.no-page-selected #status,
.no-page-selected #shareBox { display: none !important; }
.no-page-selected .page-work-card { padding-top: 26px; }

.tree-reorder { display: none !important; }
.tree-item.tree-draggable { cursor: grab; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, outline-color .18s ease; }
.tree-item.tree-draggable:active { cursor: grabbing; }
.tree-item.is-dragging { opacity: .52; transform: scale(.985); box-shadow: 0 12px 28px rgba(15,23,42,.12); }
.tree-item.drop-before,
.tree-item.drop-after { position: relative; transform: translateX(3px); box-shadow: 0 10px 28px rgba(37,99,235,.12); }
.tree-item.drop-before::before,
.tree-item.drop-after::after { content: ''; position: absolute; left: 12px; right: 12px; height: 3px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px rgba(37,99,235,.12); pointer-events: none; }
.tree-item.drop-before::before { top: -4px; }
.tree-item.drop-after::after { bottom: -4px; }
.tree-item .tree-title::after { content: ''; display: inline-block; width: 0; height: 0; }

.setup-page { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.setup-card { width: min(560px, calc(100vw - 32px)); background: rgba(255,255,255,.94); border: 1px solid #dbe5f0; border-radius: 26px; padding: 30px; box-shadow: 0 24px 80px rgba(15,23,42,.14); }
.setup-logo-row { display: inline-flex; align-items: center; gap: 10px; color: #475569; font-weight: 700; margin-bottom: 14px; }
.setup-logo-mark { width: 32px; height: 32px; min-width: 32px; display: inline-grid; place-items: center; border-radius: 9px; background: var(--accent, #7c8cff); color: #fff; font-family: inherit; font-size: 16px; font-weight: 800; line-height: 1; letter-spacing: 0; }
.setup-card h1 { margin: 0 0 10px; font-size: 32px; letter-spacing: -.035em; color: #0f172a; }
.setup-lead { margin: 0 0 22px; color: #64748b; line-height: 1.6; }
.setup-form { display: grid; gap: 14px; }
.setup-form label { display: grid; gap: 7px; color: #334155; font-weight: 650; }
.setup-form input { width: 100%; border: 1px solid #cbd5e1; border-radius: 13px; padding: 12px 13px; font: inherit; background: #fff; color: #0f172a; outline: none; box-shadow: inset 0 1px 2px rgba(15,23,42,.04); }
.setup-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.setup-submit { min-height: 46px; border-radius: 14px; margin-top: 4px; }

.admin-account-card { margin: 16px 0 22px; border: 1px solid #dbe5f0; border-radius: 20px; padding: 18px; background: #fff; display: grid; grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.4fr) auto; gap: 16px; align-items: end; box-shadow: 0 14px 40px rgba(15,23,42,.05); }
.admin-account-copy h3 { margin: 0 0 6px; font-size: 17px; color: #0f172a; }
.admin-account-copy p { margin: 0; color: #64748b; line-height: 1.45; font-size: 13px; }
.admin-account-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.admin-account-fields label { display: grid; gap: 6px; color: #334155; font-size: 12px; font-weight: 650; }
.admin-account-fields input { border: 1px solid #cbd5e1; border-radius: 12px; padding: 10px 11px; font: inherit; min-width: 0; }
.admin-account-actions { display: flex; justify-content: flex-end; }
.account-row-toggle { min-width: max-content; }
.account-details-body { animation: account-open .18s ease both; }
@keyframes account-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 980px) {
  .admin-account-card { grid-template-columns: 1fr; }
  .admin-account-fields { grid-template-columns: 1fr; }
  .admin-account-actions { justify-content: flex-start; }
}

/* Settings tabs + calmer account management polish 20260612 */
.settings-tabs-page {
  max-width: 1180px !important;
  padding: 26px 22px 44px !important;
}
.settings-hero-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
  border-radius: 24px;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  box-shadow: 0 18px 44px rgba(15,23,42,.055);
}
.settings-hero-panel h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 740;
  color: #0f172a;
}
.settings-hero-panel p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.settings-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  color: #334155 !important;
  font-size: 14px;
  font-weight: 520;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(15,23,42,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.settings-back-link:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  box-shadow: 0 12px 28px rgba(15,23,42,.07);
}
.settings-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  margin: 0 0 16px;
  border: 1px solid rgba(203,213,225,.85);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 30px rgba(15,23,42,.045);
}
.settings-tab {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #475569;
  font-size: 14px;
  font-weight: 540;
  box-shadow: none;
  transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.settings-tab:hover {
  transform: translateY(-1px);
  background: rgba(248,250,252,.92);
  color: #0f172a;
  border-color: transparent;
}
.settings-tab.active {
  color: #0f172a;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15,23,42,.07);
}
.settings-tab-panel { animation: settingsPanelIn .18s ease both; }
@keyframes settingsPanelIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.settings-tabs-page .settings-form,
.settings-tabs-page .accounts-settings,
.settings-tabs-page .note {
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(203,213,225,.78) !important;
  border-radius: 24px !important;
  padding: 22px !important;
  box-shadow: 0 18px 48px rgba(15,23,42,.055) !important;
}
.settings-tabs-page .settings-section {
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(226,232,240,.78);
}
.settings-tabs-page .settings-section:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}
.settings-tabs-page .settings-section h2,
.settings-tabs-page .accounts-settings h2,
.settings-tabs-page .note h2 {
  font-size: 20px;
  letter-spacing: -.015em;
  font-weight: 680;
  color: #0f172a;
}
.settings-tabs-page label,
.settings-tabs-page .settings-form label {
  font-weight: 560 !important;
  color: #334155;
}
.settings-tabs-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.settings-tabs-page select,
.settings-tabs-page textarea {
  min-height: 42px;
  border-radius: 13px !important;
  border-color: #cbd5e1 !important;
  background: rgba(255,255,255,.95);
}
.settings-actions,
.account-actions {
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.settings-actions button,
.account-actions button,
.admin-account-actions button,
.account-delete-form button {
  min-height: 42px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  font-weight: 560 !important;
  line-height: 1 !important;
}
.admin-account-card {
  grid-template-columns: minmax(240px, .85fr) minmax(0, 1.6fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 18px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #fff, #fbfdff) !important;
}
.admin-account-copy h3,
.accounts-list-head h3,
.account-create-head h3 {
  font-weight: 660 !important;
  letter-spacing: -.01em;
}
.admin-account-copy p,
.accounts-list-head p,
.account-create-head p {
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.admin-account-fields {
  grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}
.admin-account-fields label {
  min-width: 0;
  font-size: 12.5px !important;
  line-height: 1.25;
}
.admin-account-fields input {
  width: 100%;
  min-width: 0;
}
.accounts-dashboard {
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr) !important;
  gap: 18px !important;
}
.accounts-panel,
.account-create-panel {
  border-radius: 24px !important;
  box-shadow: 0 16px 42px rgba(15,23,42,.045) !important;
}
.accounts-list-head,
.account-create-head {
  padding: 18px 18px 14px !important;
}
.account-row-summary {
  grid-template-columns: auto minmax(145px, 1fr) minmax(170px, 1.3fr) auto !important;
  padding: 13px !important;
}
.account-row-toggle {
  font-weight: 540 !important;
  color: #334155 !important;
  background: #f8fafc !important;
}
.account-details-top {
  grid-template-columns: minmax(260px, 1fr) minmax(180px, auto) !important;
  align-items: center !important;
}
.account-create-card .account-card-main {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
.permission-grid {
  gap: 10px !important;
}
.permission-card {
  border-radius: 14px !important;
  padding: 11px 12px !important;
}
.permission-card strong {
  font-weight: 580 !important;
}
.permission-card small {
  color: #64748b !important;
}
.empty-accounts {
  background: color-mix(in srgb, var(--accent) 7%, #f8fafc) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, #dbe5f0) !important;
  color: #334155 !important;
  font-weight: 500 !important;
  line-height: 1.45;
}
.no-page-selected .page-view-card h1,
#pageViewTitle {
  font-weight: 720;
  letter-spacing: -.025em;
}
@media (max-width: 980px) {
  .settings-hero-panel { align-items: flex-start; flex-direction: column; }
  .accounts-dashboard { grid-template-columns: 1fr !important; }
  .admin-account-card { grid-template-columns: 1fr !important; }
  .admin-account-fields { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .admin-account-actions { justify-content: flex-start !important; }
}
@media (max-width: 720px) {
  .settings-tabs { width: 100%; overflow-x: auto; }
  .settings-tab { flex: 1 0 auto; }
  .admin-account-fields,
  .account-create-card .account-card-main,
  .account-details-top { grid-template-columns: 1fr !important; }
  .account-row-summary { grid-template-columns: auto minmax(0, 1fr) !important; }
  .account-permission-pills, .account-row-toggle { grid-column: 2 / -1; }
}

/* Settings/account UI final polish 20260612 */
.settings-tabs-page {
  --field-bg: #ffffff;
  --field-border: #d8e2ee;
  --field-focus: color-mix(in srgb, var(--accent) 34%, #93c5fd);
  --soft-card: rgba(255,255,255,.92);
}

.settings-tabs-page .settings-form,
.settings-tabs-page .accounts-settings,
.settings-tabs-page .note {
  border-radius: 26px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.9)) !important;
  border: 1px solid rgba(214,226,239,.9) !important;
  box-shadow: 0 22px 60px rgba(15,23,42,.06) !important;
}

.settings-tabs-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.settings-tabs-page select,
.settings-tabs-page textarea {
  width: 100%;
  min-height: 46px !important;
  padding: 0 14px !important;
  border: 1px solid var(--field-border) !important;
  border-radius: 15px !important;
  background: var(--field-bg) !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 450 !important;
  line-height: 46px !important;
  outline: none !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.035), 0 1px 0 rgba(255,255,255,.9) !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}

.settings-tabs-page textarea {
  line-height: 1.45 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.settings-tabs-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.settings-tabs-page select:focus,
.settings-tabs-page textarea:focus {
  border-color: var(--field-focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 1px 2px rgba(15,23,42,.03) !important;
  background: #fff !important;
}

.settings-tabs-page input::placeholder {
  color: #94a3b8 !important;
  font-weight: 420 !important;
}

.settings-tabs-page label,
.settings-tabs-page .settings-form label,
.admin-account-fields label,
.account-card-main label,
.account-details-top label:not(.inline-check) {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
}

.account-admin-note {
  border: 1px solid rgba(203,213,225,.75) !important;
  background: rgba(248,250,252,.82) !important;
  color: #475569 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
}

.admin-account-card {
  margin: 16px 0 20px !important;
  display: grid !important;
  grid-template-columns: minmax(230px, .95fr) minmax(0, 1.7fr) minmax(170px, auto) !important;
  gap: 18px !important;
  align-items: end !important;
  padding: 18px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(214,226,239,.95) !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: 0 16px 42px rgba(15,23,42,.045) !important;
}
.admin-account-copy h3 {
  font-size: 16px !important;
  font-weight: 650 !important;
  letter-spacing: -.01em !important;
}
.admin-account-copy p {
  max-width: 310px;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #64748b !important;
}
.admin-account-fields {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: end !important;
}
.admin-account-actions {
  display: flex !important;
  align-items: end !important;
  justify-content: flex-end !important;
}
.admin-account-actions .primary {
  min-height: 46px !important;
  white-space: normal !important;
  line-height: 1.15 !important;
  padding: 0 18px !important;
}

.accounts-dashboard {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(350px, .75fr) !important;
  align-items: start !important;
  gap: 20px !important;
}
.accounts-panel,
.account-create-panel {
  overflow: hidden !important;
  border: 1px solid rgba(214,226,239,.95) !important;
  border-radius: 24px !important;
  background: var(--soft-card) !important;
  box-shadow: 0 16px 44px rgba(15,23,42,.045) !important;
}
.accounts-list-head,
.account-create-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 18px 20px 15px !important;
  border-bottom: 1px solid rgba(226,232,240,.78) !important;
  background: rgba(248,250,252,.56) !important;
}
.accounts-list-head h3,
.account-create-head h3 {
  margin: 0 !important;
  font-size: 17px !important;
  color: #0f172a !important;
  font-weight: 650 !important;
  letter-spacing: -.01em !important;
}
.accounts-list-head p,
.account-create-head p {
  margin: 5px 0 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 420 !important;
}
.accounts-count-badge {
  min-width: 30px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--accent) 9%, #eff6ff) !important;
  color: color-mix(in srgb, var(--accent) 75%, #1e3a8a) !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  box-shadow: none !important;
}

.accounts-table {
  padding: 14px !important;
  display: grid !important;
  gap: 12px !important;
}
.account-row-card {
  border: 1px solid rgba(214,226,239,.95) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.035) !important;
  overflow: hidden !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.account-row-card:hover {
  border-color: color-mix(in srgb, var(--accent) 18%, #dbe5f0) !important;
  box-shadow: 0 14px 32px rgba(15,23,42,.06) !important;
}
.account-row-card[open] {
  border-color: color-mix(in srgb, var(--accent) 24%, #dbe5f0) !important;
  box-shadow: 0 16px 36px rgba(15,23,42,.065) !important;
}
.account-row-summary {
  display: grid !important;
  grid-template-columns: auto minmax(135px, 1fr) minmax(170px, 1.25fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 13px 14px !important;
  cursor: pointer !important;
  list-style: none !important;
}
.account-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: color-mix(in srgb, var(--accent) 9%, #f8fafc) !important;
  color: color-mix(in srgb, var(--accent) 72%, #1e3a8a) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, #dbeafe) !important;
  font-size: 14px !important;
  font-weight: 620 !important;
  text-transform: uppercase;
}
.account-row-title strong {
  font-size: 15px !important;
  line-height: 1.2 !important;
  color: #0f172a !important;
  font-weight: 620 !important;
}
.account-row-title small {
  margin-top: 6px !important;
  display: flex !important;
  align-items: center !important;
}
.account-status-dot { display: none !important; }
.account-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  border: 1px solid #dbe5f0 !important;
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  animation: none !important;
}
.account-status-badge.is-active {
  border-color: rgba(34,197,94,.18) !important;
  background: rgba(34,197,94,.08) !important;
  color: #15803d !important;
}
.account-status-badge.is-disabled {
  border-color: #e2e8f0 !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
}
.account-permission-pills {
  gap: 6px !important;
  align-items: center !important;
}
.account-permission-pill {
  min-height: 24px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 470 !important;
  line-height: 1 !important;
}
.account-permission-pill.more {
  background: color-mix(in srgb, var(--accent) 8%, #f8fafc) !important;
  color: color-mix(in srgb, var(--accent) 78%, #334155) !important;
  font-weight: 560 !important;
}
.account-row-toggle {
  min-height: 34px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #dbe5f0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: 0 5px 14px rgba(15,23,42,.035) !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.account-row-toggle:hover {
  transform: translateY(-1px) scale(1.015);
  border-color: color-mix(in srgb, var(--accent) 22%, #dbe5f0) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.06) !important;
}
.account-row-card[open] .account-row-toggle::after { content: ' ↑'; }
.account-row-card:not([open]) .account-row-toggle::after { content: ' ↓'; }
.account-details-body {
  padding: 0 14px 14px !important;
  background: linear-gradient(180deg, rgba(248,250,252,.35), rgba(255,255,255,.96)) !important;
}
.account-details-form {
  padding: 14px 0 0 !important;
  display: grid !important;
  gap: 14px !important;
}
.account-details-top {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, .8fr) !important;
  align-items: end !important;
  gap: 12px !important;
}
.inline-check.account-active-toggle {
  min-height: 46px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid #dbe5f0 !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.03) !important;
}
.inline-check.account-active-toggle input {
  flex: 0 0 auto !important;
  width: 16px !important;
  height: 16px !important;
}
.permission-grid,
.permission-grid.compact {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.permission-card {
  min-height: 68px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 12px 13px !important;
  border: 1px solid #dbe5f0 !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: #334155 !important;
  box-shadow: 0 3px 10px rgba(15,23,42,.025) !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.permission-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 18%, #dbe5f0) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.045) !important;
}
.permission-card input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin-top: 2px !important;
  flex: 0 0 auto !important;
}
.permission-card span {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}
.permission-card strong {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 570 !important;
  line-height: 1.25 !important;
}
.permission-card small {
  color: #64748b !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}
.account-row-actions {
  margin-top: 2px !important;
  display: flex !important;
  justify-content: flex-start !important;
}
.account-delete-form {
  margin-top: 10px !important;
  display: flex !important;
  justify-content: flex-end !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(226,232,240,.78) !important;
}
.account-delete-form .danger {
  background: rgba(255,255,255,.95) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(248,113,113,.32) !important;
  box-shadow: 0 6px 16px rgba(220,38,38,.05) !important;
  font-weight: 520 !important;
}
.account-delete-form .danger:hover {
  background: #fff1f2 !important;
  border-color: rgba(248,113,113,.55) !important;
}
.account-create-panel .account-create-card {
  padding: 16px !important;
  display: grid !important;
  gap: 14px !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}
.account-create-card .account-card-main {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
.account-create-card .permission-grid {
  grid-template-columns: 1fr !important;
}
.account-create-card .permission-card {
  min-height: 58px !important;
  padding: 11px 12px !important;
}
.account-actions button,
.admin-account-actions button,
.settings-actions button {
  border-radius: 14px !important;
  font-weight: 540 !important;
  letter-spacing: 0 !important;
}
.empty-accounts {
  margin: 14px !important;
  min-height: 74px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #f8fafc, #f1f7ff) !important;
  border: 1px solid #dbeafe !important;
  color: #475569 !important;
  font-size: 14px !important;
  font-weight: 450 !important;
}

@media (max-width: 1120px) {
  .admin-account-card {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
  .admin-account-actions { justify-content: flex-start !important; }
}
@media (max-width: 900px) {
  .accounts-dashboard { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
  .settings-tabs-page { padding: 18px 12px 36px !important; }
  .admin-account-fields,
  .account-create-card .account-card-main,
  .account-details-top,
  .permission-grid,
  .permission-grid.compact {
    grid-template-columns: 1fr !important;
  }
  .account-row-summary {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }
  .account-permission-pills,
  .account-row-toggle {
    grid-column: 1 / -1 !important;
  }
}

/* Page history panel + permissions 20260612 */
.editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 380px);
  gap: 16px;
  align-items: start;
  min-height: 100%;
}
.no-page-selected .editor-layout {
  grid-template-columns: minmax(0, 1fr);
}
.no-page-selected .history-panel {
  display: none !important;
}
.history-panel {
  position: sticky;
  top: 0;
  max-height: calc(100vh - 86px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(203,213,225,.82);
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 16px 44px rgba(15,23,42,.055);
  backdrop-filter: blur(12px);
}
.history-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 15px 12px;
  border-bottom: 1px solid rgba(226,232,240,.86);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.9));
}
.history-panel-head h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 660;
  letter-spacing: -.015em;
  color: #0f172a;
}
.history-panel-head p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.35;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#historyRefreshBtn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #475569;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 18px rgba(15,23,42,.05);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
#historyRefreshBtn:hover {
  transform: translateY(-1px) rotate(12deg);
  border-color: color-mix(in srgb, var(--accent) 28%, #cbd5e1);
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
}
.history-list {
  padding: 12px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.history-list::-webkit-scrollbar { width: 8px; }
.history-list::-webkit-scrollbar-track { background: transparent; }
.history-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.history-empty {
  padding: 18px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  background: rgba(248,250,252,.78);
}
.history-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(226,232,240,.82);
}
.history-item:last-child { border-bottom: 0; }
.history-action-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 5px;
  background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 11%, transparent);
}
.history-create { background: #16a34a; box-shadow: 0 0 0 5px rgba(22,163,74,.11); }
.history-delete { background: #dc2626; box-shadow: 0 0 0 5px rgba(220,38,38,.11); }
.history-restore { background: #7c3aed; box-shadow: 0 0 0 5px rgba(124,58,237,.11); }
.history-import_html,
.history-import_pdf { background: #2563eb; box-shadow: 0 0 0 5px rgba(37,99,235,.11); }
.history-share_on,
.history-share_off { background: #0891b2; box-shadow: 0 0 0 5px rgba(8,145,178,.11); }
.history-item-body { min-width: 0; }
.history-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.history-item-top strong {
  color: #0f172a;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.25;
}
.history-item-top time {
  color: #94a3b8;
  font-size: 11.5px;
  white-space: nowrap;
}
.history-item-meta {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-excerpt {
  margin: 8px 0 0;
  color: #475569;
  font-size: 12.5px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.history-item-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 9px;
}
.history-restore-btn {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  color: #334155;
  background: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 520;
  box-shadow: 0 6px 16px rgba(15,23,42,.045);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.history-restore-btn:hover {
  transform: translateY(-1px) scale(1.025);
  border-color: color-mix(in srgb, var(--accent) 28%, #cbd5e1);
  box-shadow: 0 10px 22px rgba(15,23,42,.075);
}

@media (max-width: 1180px) {
  .editor-layout { grid-template-columns: minmax(0, 1fr); }
  .history-panel { position: static; max-height: 360px; }
}

/* Trash bin 20260615 */
.trash-modal { width: min(820px, 100%); }
.trash-note {
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, white);
  color: color-mix(in srgb, var(--text) 86%, var(--accent));
  border-radius: 16px;
  padding: 12px 14px;
  line-height: 1.45;
}
.trash-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.trash-list {
  display: grid;
  gap: 10px;
  max-height: min(58vh, 560px);
  overflow: auto;
  padding-right: 4px;
}
.trash-empty {
  border: 1px dashed var(--border);
  border-radius: 16px;
  padding: 20px;
  color: var(--muted);
  text-align: center;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}
.trash-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 13px;
  background: color-mix(in srgb, var(--panel) 92%, white);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
}
.trash-item-title {
  display: block;
  font-weight: 720;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trash-item-details {
  margin-top: 5px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}
.trash-item-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.trash-item-actions button,
.trash-toolbar button {
  font-weight: 600;
  border-radius: 12px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.trash-item-actions button:hover,
.trash-toolbar button:hover {
  transform: translateY(-1px) scale(1.015);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}
@media (max-width: 720px) {
  .trash-item { grid-template-columns: 1fr; }
  .trash-item-actions { justify-content: flex-start; }
  .trash-toolbar { align-items: stretch; flex-direction: column; }
}


/* Trash modal scroll/fixed footer polish 20260615 */
#trashOverlay.modal-overlay {
  overflow: hidden !important;
  align-items: center !important;
  justify-content: center !important;
}

.trash-modal {
  width: min(820px, calc(100vw - 40px)) !important;
  max-height: min(860px, calc(100vh - 44px)) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.trash-modal > .create-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  max-height: min(860px, calc(100vh - 44px)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 22px !important;
}

.trash-modal .create-modal-head,
.trash-modal .trash-note,
.trash-modal .trash-toolbar,
.trash-modal .create-modal-actions {
  flex: 0 0 auto !important;
}

.trash-modal .trash-list {
  flex: 1 1 auto !important;
  min-height: 160px !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 2px 8px 2px 2px !important;
  margin-right: -4px !important;
  scrollbar-gutter: stable;
}

.trash-modal .create-modal-actions {
  position: sticky !important;
  bottom: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  margin: 0 -22px -22px !important;
  padding: 14px 22px 18px !important;
  border-top: 1px solid rgba(226, 232, 240, .78) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.82), var(--panel) 42%) !important;
  z-index: 2 !important;
}

.trash-modal .create-modal-actions button {
  min-height: 40px !important;
  padding: 0 18px !important;
  border-radius: 13px !important;
}

@media (max-width: 720px) {
  .trash-modal {
    width: calc(100vw - 22px) !important;
    max-height: calc(100vh - 22px) !important;
  }
  .trash-modal > .create-form {
    max-height: calc(100vh - 22px) !important;
    padding: 18px !important;
  }
  .trash-modal .create-modal-actions {
    margin: 0 -18px -18px !important;
    padding: 12px 18px 16px !important;
  }
  .trash-modal .trash-list {
    min-height: 220px !important;
  }
}

/* Maintenance tab */
.maintenance-settings {
  overflow: hidden;
}
.maintenance-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.maintenance-stat-card {
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.86);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
  min-height: 128px;
}
.maintenance-stat-card.primary-stat {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(255, 255, 255, 0.92));
  border-color: rgba(59, 130, 246, 0.22);
}
.maintenance-stat-label {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 8px;
}
.maintenance-stat-card strong {
  display: block;
  color: #0f172a;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin-bottom: 8px;
}
.maintenance-stat-card small {
  display: block;
  color: #64748b;
  line-height: 1.35;
}
.maintenance-count-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 22px;
}
.maintenance-count-grid > div {
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 15px;
  padding: 12px;
}
.maintenance-count-grid span {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-bottom: 5px;
}
.maintenance-count-grid strong {
  color: #0f172a;
  font-size: 18px;
}
.maintenance-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.maintenance-action-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}
.maintenance-action-card h3 {
  margin: 0 0 6px;
  font-size: 15px;
  color: #0f172a;
}
.maintenance-action-card p {
  margin: 0;
  color: #64748b;
  line-height: 1.45;
  font-size: 13px;
}
.maintenance-action-card button {
  flex: 0 0 auto;
  white-space: nowrap;
}
.maintenance-note {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(239, 246, 255, 0.9);
  border: 1px solid rgba(96, 165, 250, 0.24);
  color: #334155;
  line-height: 1.55;
}
.ghost-danger {
  background: #fff;
  color: #dc2626;
  border-color: rgba(248, 113, 113, 0.42);
}
@media (max-width: 1100px) {
  .maintenance-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .maintenance-count-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .maintenance-actions-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .maintenance-overview-grid, .maintenance-count-grid { grid-template-columns: 1fr; }
  .maintenance-action-card { flex-direction: column; }
  .maintenance-action-card button { width: 100%; }
}

/* Backup / restore tab */
.backup-settings .settings-section-head { margin-bottom: 18px; }
.backup-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}
.backup-create-inline {
  flex: 0 0 auto;
  margin-top: 4px;
}
.backup-create-inline button {
  min-height: 44px;
  padding-inline: 18px;
}
.backup-message {
  margin: 0 0 16px;
}
.backup-storage-card,
.server-backups-panel {
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,252,.94));
  box-shadow: 0 18px 54px rgba(15, 23, 42, .07);
}
.backup-storage-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  margin-bottom: 18px;
}
.backup-storage-info {
  display: flex;
  gap: 14px;
  min-width: 0;
}
.backup-storage-info h3,
.server-backups-head h3 {
  margin: 0 0 6px;
  font-size: 18px;
  letter-spacing: -.015em;
}
.backup-storage-info p,
.server-backups-head p {
  margin: 0;
  color: #64748b;
  line-height: 1.55;
}
.backup-card-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(15, 116, 255, .1);
  color: #0b74ff;
  font-weight: 700;
  font-size: 21px;
}
.backup-storage-stats {
  min-width: 150px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, .26);
  background: rgba(255,255,255,.78);
  text-align: right;
}
.backup-storage-stats span {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-bottom: 4px;
}
.backup-storage-stats strong {
  color: #0f172a;
  font-size: 17px;
}
.server-backups-panel {
  overflow: hidden;
}
.server-backups-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(148, 163, 184, .22);
}
.backup-download-fresh {
  flex: 0 0 auto;
  text-decoration: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.backup-empty-state {
  display: grid;
  gap: 6px;
  margin: 18px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(239, 246, 255, .78);
  border: 1px dashed rgba(96, 165, 250, .45);
  color: #475569;
}
.backup-empty-state strong { color: #0f172a; }
.server-backup-list {
  display: grid;
  gap: 10px;
  padding: 14px;
}
.server-backup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, .25);
  background: rgba(255,255,255,.84);
}
.server-backup-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.server-backup-file-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(15, 116, 255, .10);
  color: #0b74ff;
  font-size: 13px;
  font-weight: 650;
}
.server-backup-main strong {
  display: block;
  max-width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0f172a;
  font-weight: 650;
}
.server-backup-main span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
}
.server-backup-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
.server-backup-actions form { margin: 0; }
.server-backup-actions a,
.server-backup-actions button {
  min-height: 38px;
  padding: 0 13px;
  text-decoration: none;
  font-size: 14px;
}
.backup-note { margin-top: 18px; }
@media (max-width: 980px) {
  .backup-section-head,
  .backup-storage-card,
  .server-backups-head,
  .server-backup-item {
    flex-direction: column;
    align-items: stretch;
  }
  .backup-create-inline button,
  .backup-download-fresh,
  .server-backup-actions,
  .server-backup-actions a,
  .server-backup-actions button {
    width: 100%;
  }
  .server-backup-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .server-backup-main strong { max-width: 100%; }
  .backup-storage-stats { text-align: left; }
}


/* Compact backup tab polish */
.backup-settings-compact {
  display: grid;
  gap: 18px;
}
.backup-compact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 2px 0 4px;
}
.backup-compact-title h2 {
  margin: 0 0 5px;
  font-size: 24px;
  letter-spacing: -0.025em;
}
.backup-compact-title p {
  max-width: 700px;
  margin: 0;
  line-height: 1.5;
}
.backup-compact-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.backup-compact-actions form { margin: 0; }
.backup-compact-actions a,
.backup-compact-actions button {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 520;
  white-space: nowrap;
  text-decoration: none;
}
.backup-inline-message {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(240, 253, 244, .78);
  border: 1px solid rgba(34, 197, 94, .22);
  color: #166534;
  font-size: 14px;
}
.backup-summary-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 180px)) minmax(240px, 1fr);
  gap: 10px;
}
.backup-summary-item,
.backup-summary-path {
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 16px;
  background: rgba(255,255,255,.64);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .035);
}
.backup-summary-item span,
.backup-summary-path span {
  display: block;
  margin-bottom: 5px;
  color: #64748b;
  font-size: 12px;
  font-weight: 520;
}
.backup-summary-item strong {
  color: #0f172a;
  font-size: 19px;
  letter-spacing: -.02em;
}
.backup-summary-path code,
.backup-compact-hint code {
  display: inline-flex;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 7px;
  border-radius: 8px;
  background: rgba(241, 245, 249, .9);
  color: #334155;
  font-size: 12.5px;
}
.backup-list-compact {
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, .24);
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .035);
  overflow: hidden;
}
.backup-list-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
  background: rgba(248, 250, 252, .58);
}
.backup-list-title-row h3 {
  margin: 0 0 3px;
  font-size: 17px;
  letter-spacing: -.015em;
}
.backup-list-title-row p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.35;
}
.backup-list-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(15, 116, 255, .08);
  color: #1d4ed8;
  font-size: 12.5px;
  font-weight: 520;
  white-space: nowrap;
}
.backup-list-table {
  display: grid;
  gap: 0;
  padding: 0;
}
.backup-row-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border-width: 0 0 1px;
  border-radius: 0;
  background: rgba(255,255,255,.5);
  padding: 13px 18px;
  box-shadow: none;
  transition: background .16s ease, transform .16s ease;
}
.backup-row-compact:last-child {
  border-bottom: 0;
}
.backup-row-compact:hover {
  background: rgba(248, 250, 252, .95);
}
.backup-row-compact .server-backup-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.backup-row-compact .server-backup-file-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 11px;
  font-size: 10.5px;
  font-weight: 650;
  background: rgba(15, 116, 255, .08);
  color: #2563eb;
}
.backup-row-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.backup-row-compact .server-backup-main strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 560;
  color: #0f172a;
}
.backup-row-compact .server-backup-main span {
  margin: 0;
  font-size: 12.5px;
  color: #64748b;
}
.backup-row-compact .server-backup-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
}
.backup-row-compact .server-backup-actions form { margin: 0; }
.backup-row-compact .server-backup-actions a,
.backup-row-compact .server-backup-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 520;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.backup-row-compact .server-backup-actions a:hover,
.backup-row-compact .server-backup-actions button:hover {
  transform: translateY(-1px);
}
.backup-action-link {
  color: #2563eb;
  background: rgba(37, 99, 235, .06);
  border: 1px solid rgba(37, 99, 235, .12);
}
.backup-action-primary {
  color: #fff;
  background: #0f74ff;
  border: 1px solid #0f74ff;
  box-shadow: 0 6px 14px rgba(15, 116, 255, .16);
}
.backup-action-danger {
  color: #dc2626;
  background: rgba(254, 242, 242, .76);
  border: 1px solid rgba(248, 113, 113, .34);
}
.backup-empty-compact {
  margin: 14px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(248, 250, 252, .88);
  border-color: rgba(148, 163, 184, .35);
}
.backup-compact-hint {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  color: #475569;
  background: rgba(248, 250, 252, .58);
  border: 1px solid rgba(148, 163, 184, .18);
  font-size: 13.5px;
  line-height: 1.55;
}
@media (max-width: 980px) {
  .backup-compact-head,
  .backup-compact-actions,
  .backup-list-title-row {
    flex-direction: column;
    align-items: stretch;
  }
  .backup-summary-strip {
    grid-template-columns: 1fr;
  }
  .backup-compact-actions a,
  .backup-compact-actions button {
    width: 100%;
  }
  .backup-row-compact {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .backup-row-compact .server-backup-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* Backup confirm modal polish 20260615 */
.backup-row-compact .server-backup-file-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #f8fbff, #eaf2ff);
  border: 1px solid rgba(59, 130, 246, .18);
  color: #2563eb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 16px rgba(37,99,235,.07);
}
.backup-row-compact .server-backup-file-icon svg {
  width: 21px;
  height: 21px;
  display: block;
  overflow: visible;
}
.backup-row-compact .server-backup-file-icon .backup-archive-svg * {
  vector-effect: non-scaling-stroke;
}
.backup-confirm-modal {
  position: relative;
  width: min(500px, calc(100vw - 40px));
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px 16px;
  padding: 20px;
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(148, 163, 184, .24);
  box-shadow: 0 30px 90px rgba(15,23,42,.24);
  color: #0f172a;
}
.backup-confirm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .26);
  background: rgba(248, 250, 252, .86);
  color: #64748b;
  font-size: 22px;
  line-height: 1;
}
.backup-confirm-close:hover {
  color: #0f172a;
  background: #fff;
  transform: scale(1.03);
}
.backup-confirm-icon {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  color: #dc2626;
  background: linear-gradient(135deg, rgba(254,242,242,.98), rgba(255,228,230,.78));
  border: 1px solid rgba(248, 113, 113, .26);
}
.backup-confirm-modal.is-restore .backup-confirm-icon {
  color: #2563eb;
  background: linear-gradient(135deg, rgba(239,246,255,.98), rgba(219,234,254,.78));
  border-color: rgba(37, 99, 235, .18);
}
.backup-confirm-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}
.backup-confirm-copy {
  min-width: 0;
  padding-right: 34px;
}
.backup-confirm-copy h2 {
  margin: 2px 0 7px;
  font-size: 20px;
  letter-spacing: -.02em;
}
.backup-confirm-copy p {
  margin: 0;
  color: #475569;
  line-height: 1.5;
  font-size: 14.5px;
}
.backup-confirm-copy code {
  display: block;
  max-width: 100%;
  margin-top: 12px;
  padding: 9px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 12px;
  background: rgba(248, 250, 252, .92);
  border: 1px solid rgba(148, 163, 184, .18);
  color: #334155;
  font-size: 12.5px;
}
.backup-confirm-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}
.backup-confirm-actions button {
  min-height: 38px;
  padding: 0 15px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 520;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.backup-confirm-actions button:hover {
  transform: translateY(-1px) scale(1.01);
}
.backup-confirm-actions .danger {
  color: #dc2626;
  background: rgba(254, 242, 242, .92);
  border: 1px solid rgba(248, 113, 113, .42);
  box-shadow: 0 10px 22px rgba(220, 38, 38, .08);
}
.backup-confirm-actions .primary {
  color: #fff;
  background: #0f74ff;
  border: 1px solid #0f74ff;
  box-shadow: 0 10px 22px rgba(15, 116, 255, .16);
}
.backup-confirm-actions .secondary {
  color: #334155;
  background: rgba(248, 250, 252, .88);
  border: 1px solid rgba(148, 163, 184, .28);
}
@media (max-width: 560px) {
  .backup-confirm-modal {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .backup-confirm-copy { padding-right: 30px; }
  .backup-confirm-actions { justify-content: stretch; }
  .backup-confirm-actions button { flex: 1; }
}

/* History UX polish: clean cards + preview modal 20260615 */
.history-panel {
  background: rgba(255, 255, 255, .94);
}
.history-panel-head {
  padding: 16px 16px 13px;
}
.history-panel-head h2 {
  font-size: 15.5px;
  font-weight: 620;
}
.history-panel-head p {
  max-width: 285px;
  font-size: 12.2px;
}
.history-list {
  padding: 12px 12px 14px;
}
.history-item.history-card {
  display: block;
  grid-template-columns: none;
  gap: 0;
  padding: 12px;
  margin: 0 0 10px;
  border: 1px solid rgba(203, 213, 225, .78);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .72));
  box-shadow: 0 10px 24px rgba(15, 23, 42, .035);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.history-item.history-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 22%, #cbd5e1);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .06);
}
.history-item.history-card:last-child {
  border-bottom: 1px solid rgba(203, 213, 225, .78);
  margin-bottom: 0;
}
.history-action-dot {
  display: none !important;
}
.history-label-wrap {
  min-width: 0;
}
.history-item-top {
  align-items: flex-start;
  gap: 12px;
}
.history-item-top strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 620;
}
.history-item-top time {
  padding-top: 1px;
  font-size: 11.2px;
  color: #64748b;
}
.history-item-meta {
  margin-top: 5px;
  font-size: 11.8px;
  color: #64748b;
}
.history-excerpt {
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(226, 232, 240, .88);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  color: #475569;
  font-size: 12.2px;
  line-height: 1.48;
  -webkit-line-clamp: 3;
}
.history-item-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.history-preview-btn,
.history-restore-btn {
  min-height: 31px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.history-preview-btn {
  color: #334155;
  background: rgba(248, 250, 252, .92);
  border: 1px solid rgba(148, 163, 184, .28);
  box-shadow: 0 6px 14px rgba(15, 23, 42, .035);
}
.history-restore-btn {
  color: #fff;
  background: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 82%, #0f172a);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 18%, transparent);
}
.history-preview-btn:hover,
.history-restore-btn:hover {
  transform: translateY(-1px) scale(1.018);
}
.history-preview-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 26%, #cbd5e1);
  box-shadow: 0 10px 20px rgba(15, 23, 42, .055);
}
.history-restore-btn:hover {
  box-shadow: 0 12px 24px color-mix(in srgb, var(--accent) 24%, transparent);
}
.history-preview-modal {
  width: min(980px, calc(100vw - 34px));
  max-height: min(86vh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, .78);
  border-radius: 22px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 30px 90px rgba(15, 23, 42, .26);
}
.history-preview-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(226, 232, 240, .88);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.88));
}
.history-preview-head h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 640;
  letter-spacing: -.02em;
  color: #0f172a;
}
.history-preview-head p {
  margin: 7px 0 0;
  color: #64748b;
  font-size: 13px;
}
.history-preview-body {
  padding: 18px 22px;
  overflow: auto;
  background: rgba(248, 250, 252, .55);
}
.history-preview-page {
  max-width: 820px;
  min-height: 260px;
  margin: 0 auto;
  padding: 24px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .045);
}
.history-preview-page h1 {
  margin: 0 0 18px;
  color: #0f172a;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  font-weight: 680;
  letter-spacing: -.035em;
}
.history-preview-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(226, 232, 240, .88);
  background: rgba(255, 255, 255, .96);
}
.history-preview-actions button {
  min-height: 38px;
  padding: 0 15px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 520;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.history-preview-actions button:hover {
  transform: translateY(-1px) scale(1.01);
}
.history-preview-actions .primary {
  color: #fff;
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 82%, #0f172a);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 18%, transparent);
}
@media (max-width: 760px) {
  .history-preview-modal { width: min(96vw, 980px); max-height: 90vh; }
  .history-preview-head,
  .history-preview-body,
  .history-preview-actions { padding-left: 16px; padding-right: 16px; }
  .history-preview-page { padding: 18px; }
  .history-preview-actions { flex-direction: column-reverse; align-items: stretch; }
}

/* Public link layout centering update 20260615 */
.public-page .public-layout {
  grid-template-columns: minmax(230px, 270px) minmax(0, 900px) minmax(230px, 270px) !important;
  column-gap: 28px !important;
  max-width: min(1540px, calc(100vw - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  justify-content: center !important;
}
.public-page .public-tree {
  grid-column: 1 !important;
  width: 100% !important;
  max-width: 270px !important;
  justify-self: end !important;
}
.public-page .public-content {
  grid-column: 2 !important;
  width: 100% !important;
  max-width: 900px !important;
  justify-self: center !important;
}
.public-page .public-article {
  width: 100% !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (min-width: 1540px) {
  .public-page .public-layout {
    grid-template-columns: 270px minmax(0, 920px) 270px !important;
    max-width: 1540px !important;
  }
  .public-page .public-content,
  .public-page .public-article {
    max-width: 920px !important;
  }
}
@media (max-width: 1180px) {
  .public-page .public-layout {
    grid-template-columns: minmax(210px, 250px) minmax(0, 820px) !important;
    max-width: min(1110px, calc(100vw - 24px)) !important;
    column-gap: 22px !important;
  }
  .public-page .public-tree { grid-column: 1 !important; max-width: 250px !important; }
  .public-page .public-content { grid-column: 2 !important; max-width: 820px !important; }
}
@media (max-width: 900px) {
  .public-page .public-layout {
    grid-template-columns: 1fr !important;
    max-width: min(900px, calc(100vw - 20px)) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .public-page .public-tree,
  .public-page .public-content {
    grid-column: 1 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

/* Public single-page layout update 20260615 */
.public-page .public-layout {
  grid-template-columns: minmax(220px, 280px) minmax(0, 960px) !important;
  column-gap: 24px !important;
  max-width: min(1280px, calc(100vw - 36px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 24px 18px !important;
  justify-content: center !important;
  align-items: start !important;
}
.public-page .public-tree {
  grid-column: 1 !important;
  width: 100% !important;
  max-width: 280px !important;
  justify-self: end !important;
}
.public-page .public-content {
  grid-column: 2 !important;
  width: 100% !important;
  max-width: 960px !important;
  justify-self: stretch !important;
}
.public-page .public-article {
  width: 100% !important;
  max-width: 960px !important;
  min-height: min(620px, calc(100vh - 150px));
  margin: 0 auto 18px !important;
}
.public-page .public-tree-row.is-active {
  background: color-mix(in srgb, var(--accent) 16%, white) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent) !important;
}
.public-page .public-tree-row.is-active a {
  color: var(--accent) !important;
  font-weight: 650 !important;
}
@media (min-width: 1500px) {
  .public-page .public-layout {
    grid-template-columns: 280px minmax(0, 980px) !important;
    max-width: 1300px !important;
  }
  .public-page .public-content,
  .public-page .public-article {
    max-width: 980px !important;
  }
}
@media (max-width: 1100px) {
  .public-page .public-layout {
    grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) !important;
    max-width: calc(100vw - 24px) !important;
    column-gap: 18px !important;
  }
  .public-page .public-tree { max-width: 250px !important; }
}
@media (max-width: 900px) {
  .public-page .public-layout {
    grid-template-columns: 1fr !important;
    max-width: min(940px, calc(100vw - 20px)) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .public-page .public-tree,
  .public-page .public-content,
  .public-page .public-article {
    grid-column: 1 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
  .public-page .public-article { min-height: auto; }
}

/* Public exact-centered single-page view + better nested drag targets */
.public-page .public-layout {
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 980px) minmax(240px, 1fr) !important;
  column-gap: 24px !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 24px 18px !important;
  align-items: start !important;
}
.public-page .public-tree {
  grid-column: 1 !important;
  width: min(280px, 100%) !important;
  max-width: 280px !important;
  justify-self: end !important;
}
.public-page .public-content {
  grid-column: 2 !important;
  width: 100% !important;
  max-width: 980px !important;
  justify-self: center !important;
}
.public-page .public-article {
  width: 100% !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (min-width: 1600px) {
  .public-page .public-layout {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1040px) minmax(280px, 1fr) !important;
  }
  .public-page .public-content,
  .public-page .public-article { max-width: 1040px !important; }
}
@media (max-width: 1180px) {
  .public-page .public-layout {
    grid-template-columns: minmax(210px, 260px) minmax(0, 1fr) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .public-page .public-tree { grid-column: 1 !important; max-width: 260px !important; }
  .public-page .public-content { grid-column: 2 !important; }
}
@media (max-width: 900px) {
  .public-page .public-layout {
    grid-template-columns: 1fr !important;
    max-width: min(940px, calc(100vw - 20px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .public-page .public-tree,
  .public-page .public-content,
  .public-page .public-article {
    grid-column: 1 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

.tree-item.drop-into {
  background: color-mix(in srgb, var(--accent) 14%, #ffffff) !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent), 0 10px 24px rgba(15, 23, 42, .08) !important;
  transform: scale(1.012);
}
.tree-item.drop-into .tree-title::after {
  content: 'вложить сюда';
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, #ffffff);
  color: color-mix(in srgb, var(--accent) 75%, #0f172a);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .01em;
}
.tree-draggable { cursor: grab; }
.tree-draggable:active { cursor: grabbing; }

/* Advanced editor toolbar */
#toolbar.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
  border: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
}
#toolbar.editor-toolbar .ql-formats.toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 4px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
#toolbar.editor-toolbar button,
#toolbar.editor-toolbar .ql-picker-label {
  border-radius: 9px;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
#toolbar.editor-toolbar button:hover,
#toolbar.editor-toolbar .ql-picker-label:hover {
  background: #eff6ff;
  transform: translateY(-1px);
}
#toolbar.editor-toolbar .ql-picker {
  color: var(--text);
}
#toolbar.editor-toolbar .ql-picker-options {
  border-radius: 12px;
  border-color: var(--border);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
  padding: 6px;
}
#toolbar.editor-toolbar .ql-picker-item {
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
}
#toolbar.editor-toolbar .ql-picker-item:hover {
  background: #f1f5f9;
}
#toolbar .ql-undo::after,
#toolbar .ql-redo::after,
#toolbar .ql-divider::after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 16px;
  line-height: 1;
  color: #334155;
}
#toolbar .ql-undo::after { content: '↶'; }
#toolbar .ql-redo::after { content: '↷'; }
#toolbar .ql-divider::after { content: '—'; font-weight: 700; }
#toolbar .ql-undo svg,
#toolbar .ql-redo svg,
#toolbar .ql-divider svg { display: none; }

.ql-snow .ql-picker.ql-size { width: 72px; }
.ql-snow .ql-picker.ql-font { width: 108px; }
.ql-snow .ql-picker.ql-header { width: 104px; }
.ql-snow .ql-picker.ql-lineheight { width: 112px; }
.ql-snow .ql-picker.ql-letterspacing { width: 112px; }

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before { content: 'Обычный'; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { content: 'Заголовок 1'; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: 'Заголовок 2'; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: 'Заголовок 3'; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { content: 'Заголовок 4'; }

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before { content: 'Sans'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before { content: 'Serif'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before { content: 'Mono'; }

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before { content: 'Размер'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { content: '12'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: '14'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { content: '16'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: '18'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { content: '24'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { content: '32'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="48px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before { content: '48'; }

.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item::before { content: 'Интервал'; }
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1"]::before { content: '1.0'; }
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.2"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.2"]::before { content: '1.2'; }
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.5"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.5"]::before { content: '1.5'; }
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.75"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.75"]::before { content: '1.75'; }
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="2"]::before { content: '2.0'; }

.ql-snow .ql-picker.ql-letterspacing .ql-picker-label::before,
.ql-snow .ql-picker.ql-letterspacing .ql-picker-item::before { content: 'Буквы'; }
.ql-snow .ql-picker.ql-letterspacing .ql-picker-label[data-value="0.02em"]::before,
.ql-snow .ql-picker.ql-letterspacing .ql-picker-item[data-value="0.02em"]::before { content: '+0.02'; }
.ql-snow .ql-picker.ql-letterspacing .ql-picker-label[data-value="0.04em"]::before,
.ql-snow .ql-picker.ql-letterspacing .ql-picker-item[data-value="0.04em"]::before { content: '+0.04'; }
.ql-snow .ql-picker.ql-letterspacing .ql-picker-label[data-value="0.08em"]::before,
.ql-snow .ql-picker.ql-letterspacing .ql-picker-item[data-value="0.08em"]::before { content: '+0.08'; }

.ql-font-serif { font-family: Georgia, 'Times New Roman', serif; }
.ql-font-monospace { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; }
.page-view-content .ql-font-serif,
.public-page-content .ql-font-serif { font-family: Georgia, 'Times New Roman', serif; }
.page-view-content .ql-font-monospace,
.public-page-content .ql-font-monospace { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; }

.editor .ql-editor hr,
.page-view-content hr,
.public-page-content hr,
.dockbook-divider {
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.55);
  margin: 22px 0;
}

@media (max-width: 900px) {
  #toolbar.editor-toolbar { gap: 5px; padding: 8px; }
  #toolbar.editor-toolbar .ql-formats.toolbar-group { padding: 3px; }
  .ql-snow .ql-picker.ql-header,
  .ql-snow .ql-picker.ql-font,
  .ql-snow .ql-picker.ql-lineheight,
  .ql-snow .ql-picker.ql-letterspacing { width: 92px; }
  .ql-snow .ql-picker.ql-size { width: 66px; }
}


/* Public article search and centered reader layout 20260615 */
.public-page .public-layout {
  display: grid !important;
  grid-template-columns: minmax(230px, 285px) minmax(0, 980px) minmax(230px, 285px) !important;
  column-gap: 26px !important;
  max-width: min(1580px, calc(100vw - 36px)) !important;
  margin: 0 auto !important;
  padding: 24px 18px !important;
  justify-content: center !important;
  align-items: start !important;
}
.public-page .public-tree {
  grid-column: 1 !important;
  width: 100% !important;
  max-width: 285px !important;
  justify-self: end !important;
}
.public-page .public-content {
  grid-column: 2 !important;
  width: 100% !important;
  max-width: 980px !important;
  justify-self: center !important;
}
.public-page .public-article {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  overflow: hidden;
}
.public-article-head {
  padding: 28px 32px 22px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, white), white 72%);
}
.public-article-head h1 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.public-article-kicker {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.public-article-body.ql-editor {
  padding: 28px 32px 36px !important;
  min-height: 360px;
}
.public-article > .updated {
  margin: 0 32px 26px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.public-search {
  position: relative;
  margin: 0 0 14px;
}
.public-search-input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 12px;
  background: color-mix(in srgb, white 88%, var(--bg-start));
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.public-search-input:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
  background: white;
}
.public-search-results {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: min(360px, 56vh);
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .14);
}
.public-search-result {
  display: block;
  padding: 10px 11px;
  border-radius: 11px;
  color: var(--text);
  text-decoration: none;
  transition: background .14s ease, transform .14s ease;
}
.public-search-result:hover {
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.public-search-result strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
  margin-bottom: 3px;
}
.public-search-result small,
.public-search-result span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.public-search-result span { margin-top: 4px; }
.public-search-empty {
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
@media (min-width: 1580px) {
  .public-page .public-layout {
    grid-template-columns: 285px minmax(0, 1000px) 285px !important;
    max-width: 1600px !important;
  }
  .public-page .public-content,
  .public-page .public-article { max-width: 1000px !important; }
}
@media (max-width: 1230px) {
  .public-page .public-layout {
    grid-template-columns: minmax(210px, 265px) minmax(0, 1fr) !important;
    max-width: calc(100vw - 24px) !important;
    column-gap: 20px !important;
  }
  .public-page .public-tree { max-width: 265px !important; }
  .public-page .public-content { grid-column: 2 !important; }
}
@media (max-width: 900px) {
  .public-page .public-layout {
    grid-template-columns: 1fr !important;
    max-width: min(980px, calc(100vw - 20px)) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .public-page .public-tree,
  .public-page .public-content,
  .public-page .public-article {
    grid-column: 1 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
  .public-article-head,
  .public-article-body.ql-editor { padding-left: 18px !important; padding-right: 18px !important; }
  .public-article > .updated { margin-left: 18px; margin-right: 18px; }
}

/* Public page customization controls 20260615 */
.public-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
  align-items: stretch;
}
.public-settings-grid label,
.public-page-settings .toggle-card {
  margin: 0;
}
.settings-section select,
.public-settings-grid select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 42px 0 13px;
  background: color-mix(in srgb, white 92%, var(--bg-start));
  color: var(--text);
  font: inherit;
  outline: none;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.settings-section select:focus,
.public-settings-grid select:focus {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
  background: #fff;
}
.public-toggle-card { margin-top: 14px; }
.public-settings-preview {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--preview-public-accent) 7%, white), #fff 65%);
}
.public-settings-preview aside,
.public-settings-preview article {
  border: 1px solid color-mix(in srgb, var(--preview-public-accent) 16%, var(--border));
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  padding: 13px;
}
.public-settings-preview aside { display: grid; gap: 9px; align-content: start; }
.public-settings-preview aside span {
  width: 28px;
  height: 6px;
  border-radius: 999px;
  background: var(--preview-public-accent);
}
.public-settings-preview aside strong { font-size: 12px; }
.public-settings-preview aside em {
  color: var(--preview-public-accent);
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  background: color-mix(in srgb, var(--preview-public-accent) 12%, white);
  border-radius: 10px;
  padding: 7px 9px;
}
.public-settings-preview article small {
  color: color-mix(in srgb, var(--preview-public-accent) 72%, var(--muted));
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  font-weight: 800;
}
.public-settings-preview article h3 { margin: 8px 0 8px; }
.public-settings-preview article p { margin: 0; color: var(--muted); }

/* Public page runtime customization 20260615 */
.public-page {
  --accent: var(--public-accent, #2563eb);
}
.public-page .public-layout {
  grid-template-columns: minmax(220px, var(--public-nav-width, 285px)) minmax(0, var(--public-article-width, 980px)) minmax(220px, var(--public-nav-width, 285px)) !important;
  max-width: min(calc(var(--public-nav-width, 285px) + var(--public-article-width, 980px) + var(--public-nav-width, 285px) + 72px), calc(100vw - 36px)) !important;
  column-gap: 24px !important;
  justify-content: center !important;
}
.public-page .public-tree {
  width: var(--public-nav-width, 285px) !important;
  max-width: var(--public-nav-width, 285px) !important;
  justify-self: end !important;
}
.public-page .public-content {
  width: 100% !important;
  max-width: var(--public-article-width, 980px) !important;
  justify-self: center !important;
}
.public-page .public-article {
  max-width: var(--public-article-width, 980px) !important;
}
.public-page.public-title-minimal .public-article-head {
  background: #fff !important;
  border-bottom: 0 !important;
  padding-bottom: 10px !important;
}
.public-page.public-title-minimal .public-article-body.ql-editor {
  padding-top: 18px !important;
}
.public-page.public-title-compact .public-article-head {
  padding: 20px 28px 16px !important;
}
.public-page.public-title-compact .public-article-body.ql-editor {
  padding-top: 22px !important;
  min-height: 260px;
}
.public-page.public-title-compact .public-article-head h1 { font-size: clamp(24px, 2.1vw, 34px); }
@media (max-width: 1230px) {
  .public-page .public-layout {
    grid-template-columns: minmax(210px, min(var(--public-nav-width, 285px), 280px)) minmax(0, 1fr) !important;
    max-width: calc(100vw - 24px) !important;
  }
  .public-page .public-tree { max-width: min(var(--public-nav-width, 285px), 280px) !important; }
}
@media (max-width: 900px) {
  .public-settings-grid,
  .public-settings-preview { grid-template-columns: 1fr; }
  .public-page .public-layout { grid-template-columns: 1fr !important; }
  .public-page .public-tree,
  .public-page .public-content,
  .public-page .public-article {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Per-public-link accent customization */
.public-accent-field {
  padding-top: 12px;
  margin-top: 2px;
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}
.public-accent-field .create-hint {
  max-width: 470px;
}

/* Folder overview cards */
.folder-overview {
  display: grid;
  gap: 18px;
  max-width: 1120px;
}
.folder-overview-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 9%, transparent) 0, transparent 38%),
    color-mix(in srgb, var(--panel) 94%, transparent);
}
.folder-overview-hero h2 {
  margin: 2px 0 8px;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.1;
}
.folder-overview-hero p {
  margin: 0;
  color: var(--muted);
  max-width: 720px;
}
.folder-kicker {
  margin: 0 !important;
  color: var(--accent) !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.folder-count-pill {
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, white);
  color: color-mix(in srgb, var(--accent) 72%, var(--text));
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: 750;
  font-size: 13px;
}
.folder-overview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px;
}
.folder-overview-toolbar > div {
  display: grid;
  gap: 3px;
}
.folder-overview-toolbar strong {
  font-size: 16px;
}
.folder-overview-toolbar span {
  color: var(--muted);
  font-size: 13px;
}
.folder-add-card {
  border-radius: 999px;
  padding: 9px 14px;
  background: color-mix(in srgb, var(--accent) 7%, white);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
  color: color-mix(in srgb, var(--accent) 72%, var(--text));
  font-weight: 650;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.folder-add-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 12%, transparent);
}
.folder-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.folder-child-card {
  width: 100%;
  min-height: 86px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  text-align: left;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.folder-child-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, white);
  box-shadow: 0 16px 34px rgba(15,23,42,.08);
}
.folder-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  color: var(--accent);
  position: relative;
}
.folder-child-card.is-folder .folder-card-icon::before {
  content: '';
  width: 22px;
  height: 15px;
  border: 1.8px solid currentColor;
  border-radius: 4px;
  background: linear-gradient(currentColor, currentColor) 3px -2px / 10px 4px no-repeat;
  opacity: .82;
}
.folder-child-card.is-page .folder-card-icon::before {
  content: '';
  width: 16px;
  height: 21px;
  border: 1.8px solid currentColor;
  border-radius: 4px;
  opacity: .8;
  box-shadow: inset 0 6px 0 color-mix(in srgb, currentColor 10%, transparent);
}
.folder-card-text {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.folder-card-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.folder-card-text small {
  color: var(--muted);
  font-size: 12px;
}
.folder-card-open {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--muted);
  background: #f8fafc;
  transition: transform .16s ease, background .16s ease, color .16s ease;
}
.folder-child-card:hover .folder-card-open {
  transform: translateX(2px);
  color: var(--accent);
  background: var(--accent-soft);
}
.folder-empty-state {
  min-height: 190px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 20px;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  color: var(--muted);
}
.folder-empty-state strong {
  color: var(--text);
  font-size: 18px;
}
@media (max-width: 720px) {
  .folder-overview-hero,
  .folder-overview-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .folder-count-pill { width: fit-content; }
}

/* Unified page/folder icons + emoji title controls */
.tree-title::before,
.public-tree-row a::before {
  box-sizing: border-box !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin-right: 8px !important;
  vertical-align: -3px !important;
  border: 1.6px solid currentColor !important;
  border-radius: 4px !important;
  opacity: .58 !important;
  background: transparent !important;
}
.tree-node.is-folder > .tree-item .tree-title::before,
.tree-node.has-children > .tree-item .tree-title::before,
.public-tree-node.is-folder > .public-tree-row a::before,
.public-tree-node.has-children > .public-tree-row a::before {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  border-radius: 4px !important;
  vertical-align: -3px !important;
  background:
    linear-gradient(currentColor, currentColor) 3px 3px / 7px 2px no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 10%, transparent), color-mix(in srgb, currentColor 10%, transparent)) 0 6px / 100% 10px no-repeat !important;
  clip-path: polygon(0 5px, 5px 5px, 7px 2px, 16px 2px, 16px 16px, 0 16px) !important;
}
.tree-node.is-page > .tree-item .tree-title::before,
.public-tree-node.is-page > .public-tree-row a::before {
  background:
    linear-gradient(135deg, transparent 0 50%, color-mix(in srgb, currentColor 16%, transparent) 50% 100%) top right / 6px 6px no-repeat !important;
  clip-path: none !important;
}
.tree-item.has-node-color .tree-title::before {
  color: var(--node-color);
  opacity: .88 !important;
}
.public-page .public-tree-row.has-node-color a::before,
.public-page .public-tree-row[style*="--node-color"] a::before {
  color: currentColor !important;
  opacity: .58 !important;
}
.create-type-icon,
.page-icon,
.folder-icon {
  width: 20px !important;
  height: 20px !important;
  box-sizing: border-box !important;
}
.page-icon {
  border: 1.7px solid currentColor !important;
  border-radius: 5px !important;
  background: linear-gradient(135deg, transparent 0 50%, color-mix(in srgb, currentColor 16%, transparent) 50% 100%) top right / 7px 7px no-repeat !important;
}
.folder-icon {
  border: 1.7px solid currentColor !important;
  border-radius: 5px !important;
  background:
    linear-gradient(currentColor, currentColor) 4px 3px / 8px 2px no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 10%, transparent), color-mix(in srgb, currentColor 10%, transparent)) 0 7px / 100% 12px no-repeat !important;
  clip-path: polygon(0 6px, 6px 6px, 8px 3px, 20px 3px, 20px 20px, 0 20px) !important;
}
.folder-card-icon::before {
  box-sizing: border-box !important;
}
.folder-child-card.is-folder .folder-card-icon::before,
.folder-child-card.is-page .folder-card-icon::before {
  width: 22px !important;
  height: 22px !important;
  border: 1.8px solid currentColor !important;
  border-radius: 6px !important;
  opacity: .82 !important;
  box-shadow: none !important;
}
.folder-child-card.is-folder .folder-card-icon::before {
  background:
    linear-gradient(currentColor, currentColor) 4px 4px / 9px 2px no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 10%, transparent), color-mix(in srgb, currentColor 10%, transparent)) 0 8px / 100% 14px no-repeat !important;
  clip-path: polygon(0 7px, 7px 7px, 9px 4px, 22px 4px, 22px 22px, 0 22px) !important;
}
.folder-child-card.is-page .folder-card-icon::before {
  background: linear-gradient(135deg, transparent 0 50%, color-mix(in srgb, currentColor 16%, transparent) 50% 100%) top right / 8px 8px no-repeat !important;
  clip-path: none !important;
}
.emoji-title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  position: relative;
}
.editor-header .emoji-title-wrapper {
  flex: 1;
}
.emoji-title-wrapper > input {
  flex: 1;
  min-width: 0;
}
.emoji-name-btn {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 92%, #fff);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(15,23,42,.04);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.emoji-name-btn:hover {
  transform: translateY(-1px) scale(1.03);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, #fff);
  box-shadow: 0 12px 26px rgba(15,23,42,.08);
}
.emoji-name-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 38%, transparent);
  outline-offset: 2px;
}
.emoji-picker-popover {
  position: fixed;
  z-index: 1200;
  width: min(310px, calc(100vw - 24px));
  padding: 10px;
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 98%, #fff);
  box-shadow: 0 22px 70px rgba(15,23,42,.18);
}
.emoji-picker-popover.hidden { display: none; }
.emoji-picker-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  padding: 0 2px;
}
.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
}
.emoji-picker-grid button {
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 18px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.emoji-picker-grid button:hover {
  transform: scale(1.08);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}
.emoji-picker-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  padding: 0 2px;
}
@media (max-width: 720px) {
  .emoji-title-wrapper { gap: 6px; }
  .emoji-name-btn { width: 36px; min-width: 36px; height: 36px; }
}
.app-shell:not(.is-editing) .emoji-title-wrapper-titleInput { display: none !important; }
.page-work-card .emoji-title-wrapper-titleInput { margin: 0 18px 12px; }
.page-work-card .emoji-title-wrapper-titleInput #titleInput { margin: 0; }
.editor-header .emoji-title-wrapper-titleInput { margin: 0; }

/* Folder/page icon cleanup 20260615: use SVG masks instead of clipped borders */
:root {
  --wiki-icon-folder-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 6.5h6l2 2h9v9.5a2 2 0 0 1-2 2h-15a2 2 0 0 1-2-2v-9.5a2 2 0 0 1 2-2Z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --wiki-icon-page-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.5h8l4 4v13H6z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M14 3.5v4h4' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}
.tree-title::before,
.public-tree-row a::before {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin-right: 8px !important;
  vertical-align: -3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  background-color: currentColor !important;
  opacity: .58 !important;
  clip-path: none !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: 16px 16px !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: 16px 16px !important;
}
.tree-node.is-folder > .tree-item .tree-title::before,
.tree-node.has-children > .tree-item .tree-title::before,
.public-tree-node.is-folder > .public-tree-row a::before,
.public-tree-node.has-children > .public-tree-row a::before {
  mask-image: var(--wiki-icon-folder-mask) !important;
  -webkit-mask-image: var(--wiki-icon-folder-mask) !important;
  background: currentColor !important;
  background-color: currentColor !important;
  clip-path: none !important;
}
.tree-node.is-page > .tree-item .tree-title::before,
.public-tree-node.is-page > .public-tree-row a::before {
  mask-image: var(--wiki-icon-page-mask) !important;
  -webkit-mask-image: var(--wiki-icon-page-mask) !important;
  background: currentColor !important;
  background-color: currentColor !important;
  clip-path: none !important;
}
.create-type-icon,
.page-icon,
.folder-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  background-color: currentColor !important;
  opacity: .72 !important;
  clip-path: none !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: 20px 20px !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: 20px 20px !important;
}
.folder-icon,
.create-type-card:has(input[value="folder"]) .create-type-icon,
.create-type-card.is-folder .create-type-icon {
  mask-image: var(--wiki-icon-folder-mask) !important;
  -webkit-mask-image: var(--wiki-icon-folder-mask) !important;
}
.page-icon,
.create-type-card:has(input[value="page"]) .create-type-icon,
.create-type-card.is-page .create-type-icon {
  mask-image: var(--wiki-icon-page-mask) !important;
  -webkit-mask-image: var(--wiki-icon-page-mask) !important;
}
.folder-child-card.is-folder .folder-card-icon::before,
.folder-child-card.is-page .folder-card-icon::before {
  width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  background-color: currentColor !important;
  opacity: .82 !important;
  clip-path: none !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: 22px 22px !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: 22px 22px !important;
}
.folder-child-card.is-folder .folder-card-icon::before {
  mask-image: var(--wiki-icon-folder-mask) !important;
  -webkit-mask-image: var(--wiki-icon-folder-mask) !important;
}
.folder-child-card.is-page .folder-card-icon::before {
  mask-image: var(--wiki-icon-page-mask) !important;
  -webkit-mask-image: var(--wiki-icon-page-mask) !important;
}
.public-page .public-tree-row.has-node-color a::before,
.public-page .public-tree-row[style*="--node-color"] a::before {
  color: currentColor !important;
  opacity: .58 !important;
}

/* Folder-level access controls */
.folder-permissions-section {
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 18px;
  padding: 14px;
  background: rgba(248, 250, 252, .86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.folder-permissions-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.folder-permissions-head span {
  display: block;
  font-weight: 650;
  color: #0f172a;
  margin-bottom: 3px;
}
.folder-permissions-head small,
.folder-permission-user small {
  display: block;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}
.folder-permissions-head button {
  border: 1px solid rgba(148, 163, 184, .36);
  background: rgba(255,255,255,.9);
  border-radius: 999px;
  padding: 7px 11px;
  color: #334155;
  font-weight: 500;
  cursor: pointer;
}
.folder-permissions-list {
  display: grid;
  gap: 10px;
  max-height: 300px;
  overflow: auto;
  padding-right: 4px;
}
.folder-permission-row {
  display: grid;
  grid-template-columns: minmax(140px, .8fr) 2fr;
  gap: 14px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, .78);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
}
.folder-permission-user strong {
  display: block;
  font-size: 14px;
  color: #0f172a;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder-permission-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.folder-permission-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.folder-permission-check:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, .35);
  background: #ffffff;
}
.folder-permission-check input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent, #475569);
}
.folder-permissions-empty {
  padding: 18px;
  text-align: center;
  color: #64748b;
  border: 1px dashed rgba(148, 163, 184, .44);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
}
@media (max-width: 760px) {
  .folder-permission-row { grid-template-columns: 1fr; }
}

/* 20260615 cleanup: remove broken emoji title controls */
.emoji-name-btn,
.emoji-picker-popover,
#emojiNamePicker {
  display: none !important;
}
.emoji-title-wrapper {
  display: block !important;
  width: 100% !important;
}
.emoji-title-wrapper > input {
  width: 100% !important;
}
.editor-header .emoji-title-wrapper,
.page-work-card .emoji-title-wrapper-titleInput {
  width: auto !important;
}

/* 20260615 branding delete checkbox alignment: keep checkbox and text in one clean row */
.settings-tabs-page .branding-grid .file-card label.inline-check,
.settings-tabs-page .settings-form .branding-grid .file-card label.inline-check,
.branding-grid .file-card label.inline-check {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 2px 0 0 !important;
  padding: 9px 12px !important;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.82) !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 520 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.035) !important;
  white-space: nowrap !important;
}
.settings-tabs-page .branding-grid .file-card label.inline-check input[type="checkbox"],
.settings-tabs-page .settings-form .branding-grid .file-card label.inline-check input[type="checkbox"],
.branding-grid .file-card label.inline-check input[type="checkbox"] {
  appearance: auto !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  position: static !important;
}
.settings-tabs-page .branding-grid .file-card label.inline-check:hover,
.settings-tabs-page .settings-form .branding-grid .file-card label.inline-check:hover,
.branding-grid .file-card label.inline-check:hover {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border)) !important;
  background: #fff !important;
}

/* Keep fixed SVG mask icons even when later patches contain old clipped folder icon rules */
:root {
  --wiki-icon-folder-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 6.5h6l2 2h9v9.5a2 2 0 0 1-2 2h-15a2 2 0 0 1-2-2v-9.5a2 2 0 0 1 2-2Z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --wiki-icon-page-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.5h8l4 4v13H6z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M14 3.5v4h4' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}
.tree-title::before,
.public-tree-row a::before {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin-right: 8px !important;
  vertical-align: -3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  background-color: currentColor !important;
  opacity: .58 !important;
  clip-path: none !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: 16px 16px !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: 16px 16px !important;
}
.tree-node.is-folder > .tree-item .tree-title::before,
.tree-node.has-children > .tree-item .tree-title::before,
.public-tree-node.is-folder > .public-tree-row a::before,
.public-tree-node.has-children > .public-tree-row a::before {
  mask-image: var(--wiki-icon-folder-mask) !important;
  -webkit-mask-image: var(--wiki-icon-folder-mask) !important;
}
.tree-node.is-page > .tree-item .tree-title::before,
.public-tree-node.is-page > .public-tree-row a::before {
  mask-image: var(--wiki-icon-page-mask) !important;
  -webkit-mask-image: var(--wiki-icon-page-mask) !important;
}
.create-type-icon,
.page-icon,
.folder-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  background-color: currentColor !important;
  opacity: .72 !important;
  clip-path: none !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: 20px 20px !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: 20px 20px !important;
}
.folder-icon,
.create-type-card:has(input[value="folder"]) .create-type-icon,
.create-type-card.is-folder .create-type-icon {
  mask-image: var(--wiki-icon-folder-mask) !important;
  -webkit-mask-image: var(--wiki-icon-folder-mask) !important;
}
.page-icon,
.create-type-card:has(input[value="page"]) .create-type-icon,
.create-type-card.is-page .create-type-icon {
  mask-image: var(--wiki-icon-page-mask) !important;
  -webkit-mask-image: var(--wiki-icon-page-mask) !important;
}
.folder-child-card.is-folder .folder-card-icon::before,
.folder-child-card.is-page .folder-card-icon::before {
  width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  background-color: currentColor !important;
  opacity: .82 !important;
  clip-path: none !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: 22px 22px !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: 22px 22px !important;
}
.folder-child-card.is-folder .folder-card-icon::before {
  mask-image: var(--wiki-icon-folder-mask) !important;
  -webkit-mask-image: var(--wiki-icon-folder-mask) !important;
}
.folder-child-card.is-page .folder-card-icon::before {
  mask-image: var(--wiki-icon-page-mask) !important;
  -webkit-mask-image: var(--wiki-icon-page-mask) !important;
}


/* 20260615 DataCaps action log */
.action-log-settings {
  overflow: hidden;
}
.action-log-head {
  align-items: center;
  gap: 18px;
}
.action-log-limit-badge {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: rgba(255,255,255,.82);
  color: #64748b;
  font-size: 12px;
  font-weight: 560;
  box-shadow: 0 8px 18px rgba(15,23,42,.035);
}
.action-log-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 18px;
}
.action-log-summary > div {
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.82));
}
.action-log-summary span {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-bottom: 4px;
}
.action-log-summary strong {
  color: #0f172a;
  font-size: 22px;
  font-weight: 680;
}
.action-log-empty {
  padding: 28px;
  border: 1px dashed color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  color: #64748b;
  text-align: center;
}
.action-log-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(68vh, 720px);
  overflow: auto;
  padding-right: 4px;
}
.action-log-entry {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 28px rgba(15,23,42,.045);
}
.action-log-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, white);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  font-weight: 650;
}
.action-log-body {
  min-width: 0;
}
.action-log-row-main,
.action-log-row-meta,
.action-log-details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.action-log-row-main {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.action-log-row-main strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 640;
}
.action-log-row-main time {
  color: #94a3b8;
  font-size: 12px;
  white-space: nowrap;
}
.action-log-row-meta {
  color: #64748b;
  font-size: 13px;
}
.action-log-actor {
  color: #334155;
  font-weight: 560;
}
.action-log-target {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.action-log-details {
  margin-top: 7px;
  color: #94a3b8;
  font-size: 12px;
}
.action-log-details span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid rgba(226,232,240,.75);
}
@media (max-width: 760px) {
  .action-log-summary { grid-template-columns: 1fr; }
  .action-log-row-main { align-items: flex-start; flex-direction: column; }
  .action-log-entry { grid-template-columns: 32px minmax(0, 1fr); padding: 12px; }
  .action-log-avatar { width: 32px; height: 32px; border-radius: 12px; }
}

/* File manager polish */
.files-modal {
  width: min(1080px, calc(100vw - 32px));
}
.files-modal .create-form {
  max-height: min(86vh, 820px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.files-storage-note {
  flex: 0 0 auto;
}
.file-manager-toolbar {
  display: grid;
  grid-template-columns: auto auto minmax(320px, 1fr);
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.file-manager-controls {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 180px 170px;
  gap: 8px;
  align-items: center;
}
.file-manager-search-wrap { min-width: 0; }
.file-manager-search,
.file-manager-select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  padding: 0 12px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.file-manager-search:focus,
.file-manager-select:focus {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.file-manager-stats {
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #f8fafc;
  color: var(--muted);
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
}
.page-files-list {
  flex: 1 1 auto;
  min-height: 260px;
  max-height: none;
  overflow: auto;
  padding-right: 8px;
}
.file-manager-row {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: start;
}
.file-manager-badge {
  border: 0;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.file-manager-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .10);
}
.file-manager-meta small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-manager-actions button,
.file-manager-actions .button-like {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 520;
}
.file-warning {
  color: #b91c1c;
  font-weight: 650;
}
.file-inline-preview {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  margin-top: 2px;
  padding-top: 12px;
  display: grid;
  place-items: start;
}
.file-inline-preview img,
.file-inline-preview video {
  max-width: min(100%, 620px);
  max-height: 360px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #f8fafc;
}
.file-inline-preview audio {
  width: min(100%, 520px);
}
.file-inline-preview a {
  color: var(--accent);
  font-weight: 650;
}
.file-preview-generic {
  width: 86px;
  height: 86px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  font-weight: 800;
  letter-spacing: .05em;
}
@media (max-width: 940px) {
  .file-manager-toolbar { grid-template-columns: 1fr; }
  .file-manager-controls { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .file-manager-row { grid-template-columns: 44px minmax(0, 1fr); }
  .file-manager-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* File manager compact/neat layout fix */
.files-modal {
  width: min(980px, calc(100vw - 36px));
}
.files-modal .create-form {
  max-height: min(84vh, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.files-modal .create-modal-head {
  flex: 0 0 auto;
}
.files-storage-note {
  flex: 0 0 auto;
  padding: 12px 14px;
  border-radius: 16px;
  line-height: 1.45;
}
.file-manager-toolbar {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin: 4px 0 0;
}
.file-manager-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.file-manager-context {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.file-manager-context strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 720;
}
.file-manager-context span {
  color: var(--muted);
  font-size: 12.5px;
}
.file-manager-main-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.file-manager-main-actions .primary,
.file-manager-main-actions button {
  min-height: 38px;
  border-radius: 12px;
  font-weight: 600;
}
.file-manager-controls {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) 172px 172px !important;
  gap: 10px !important;
  align-items: center;
}
.file-manager-search,
.file-manager-select {
  height: 40px !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--panel) 96%, #fff) !important;
}
.file-manager-stats {
  min-height: 34px !important;
  margin-top: 2px;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--accent) 4%, #f8fafc) !important;
  font-weight: 560;
}
.page-files-list {
  flex: 1 1 auto;
  min-height: 240px;
  overflow: auto;
  padding: 8px 8px 4px 0;
  display: grid;
  gap: 10px;
  align-content: start;
}
.page-file-row.file-manager-row {
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 12px 14px;
  align-items: start;
  padding: 14px !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--panel) 98%, #fff) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .035);
}
.file-manager-badge {
  width: 48px !important;
  height: 48px !important;
  border-radius: 15px !important;
  font-size: 10.5px !important;
  letter-spacing: .03em !important;
}
.file-manager-meta {
  gap: 4px !important;
  padding-top: 1px;
}
.file-manager-name-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.file-manager-name-line strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
}
.file-manager-name-line span {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, #f8fafc);
  color: color-mix(in srgb, var(--accent) 74%, var(--text));
  font-size: 11px;
  font-weight: 650;
}
.file-manager-detail-line,
.file-manager-state-line {
  min-width: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-manager-state-line {
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
}
.file-manager-actions {
  grid-column: 2 / 3;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding-top: 4px;
}
.file-manager-actions button,
.file-manager-actions .button-like {
  min-height: 34px !important;
  padding: 7px 11px !important;
  border-radius: 11px !important;
  font-size: 12.5px !important;
  font-weight: 560 !important;
  box-shadow: none !important;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.file-manager-actions button:hover,
.file-manager-actions .button-like:hover {
  transform: translateY(-1px);
}
.file-inline-preview {
  grid-column: 1 / -1 !important;
  margin-top: 0 !important;
  padding: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px;
  background: #f8fafc;
}
.file-inline-preview img,
.file-inline-preview video {
  max-width: min(100%, 700px) !important;
  max-height: 420px !important;
}
.files-modal .create-modal-actions {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  margin-top: 10px;
  padding-top: 12px;
  background: linear-gradient(to top, rgba(255,255,255,.98), rgba(255,255,255,.86));
}

/* Clearer media resize controls for images, GIFs, videos and iframes */
.media-resize-toolbar {
  gap: 8px !important;
  padding: 7px !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 56px rgba(15, 23, 42, .20) !important;
}
.media-resize-title {
  min-width: auto !important;
  padding: 0 4px 0 6px;
  color: var(--text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.media-resize-presets {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 4px;
  border-left: 1px solid var(--border);
}
.media-resize-toolbar button {
  min-width: 36px !important;
  min-height: 32px !important;
  border-radius: 11px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}
.media-resize-toolbar .media-resize-preset {
  min-width: 44px !important;
  color: var(--muted);
  background: #f8fafc;
}
.media-resize-toolbar .media-resize-preset:hover,
.media-resize-toolbar button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--accent);
}
.media-resize-toolbar span#mediaSizeLabel {
  min-width: 48px !important;
  color: var(--accent) !important;
}
.ql-editor video.dockbook-media-selected,
.ql-editor img.dockbook-media-selected,
.ql-editor iframe.dockbook-media-selected {
  cursor: nwse-resize;
}
.page-view-content .dockbook-resized-media,
.public-article .dockbook-resized-media,
.ql-editor .dockbook-resized-media {
  max-width: 100%;
  height: auto;
}
@media (max-width: 900px) {
  .file-manager-topline { align-items: stretch; flex-direction: column; }
  .file-manager-main-actions { justify-content: flex-start; }
  .file-manager-controls { grid-template-columns: 1fr !important; }
  .file-manager-actions { grid-column: 1 / -1; }
  .page-file-row.file-manager-row { grid-template-columns: 48px minmax(0, 1fr) !important; }
}
@media (max-width: 560px) {
  .files-modal { width: calc(100vw - 18px); }
  .file-manager-actions { grid-column: 1 / -1; }
  .media-resize-toolbar {
    flex-wrap: wrap;
    justify-content: center;
  }
}



/* Reference v9 target stylesheet */

:root{
  --accent:#7c8cff;
  --accent-2:#9ad9bf;
  --ink:#151827;
  --muted:#768097;
  --line:rgba(31,41,55,.10);
  --panel:#ffffff;
  --soft:#f5f7fb;
  --side:#22264b;
  --side-2:#161a35;
  --shadow:0 28px 70px rgba(30,41,59,.14);
  --shadow-soft:0 12px 32px rgba(30,41,59,.08);
  --r-lg:34px;
  --r-md:24px;
  --r-sm:16px;
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{
  font-family:var(--font);color:var(--ink);background:
  radial-gradient(circle at 12% 8%, color-mix(in srgb,var(--accent) 18%, transparent), transparent 28%),
  radial-gradient(circle at 86% 16%, rgba(154,217,191,.36), transparent 30%),
  radial-gradient(circle at 76% 88%, color-mix(in srgb,var(--accent) 10%, transparent), transparent 27%),
  linear-gradient(140deg,#eef3f8 0%,#f8fafc 48%,#eef3f7 100%);
  overflow:hidden;
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.52;background-image:
  linear-gradient(90deg,rgba(79,94,122,.06) 1px,transparent 1px),
  linear-gradient(0deg,rgba(79,94,122,.055) 1px,transparent 1px);
  background-size:40px 40px;mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.5) 66%,transparent)}
button,input,textarea{font:inherit}.shell{height:100vh;padding:22px;display:grid;grid-template-columns:388px minmax(0,1fr);gap:22px;position:relative;z-index:1}
/* sidebar */
.sidebar{border-radius:var(--r-lg);background:
  radial-gradient(circle at 14% 10%, color-mix(in srgb,var(--accent) 28%, transparent), transparent 32%),
  linear-gradient(180deg,var(--side),var(--side-2));color:#fff;padding:22px 18px;display:flex;flex-direction:column;min-height:0;box-shadow:var(--shadow)}
.brand{height:46px;display:flex;align-items:center;gap:12px;margin:2px 4px 24px}.brand-mark{width:38px;height:38px;border-radius:15px;background:#fff;color:var(--side);display:grid;place-items:center;font-weight:900;letter-spacing:-.04em;box-shadow:0 10px 24px rgba(0,0,0,.2)}
.brand-title{font-weight:850;letter-spacing:-.04em;line-height:1}.brand-sub{font-size:12px;color:rgba(255,255,255,.58);margin-top:4px}
.sidebar-tools{display:grid;grid-template-columns:1fr 44px;gap:10px;margin:0 4px 12px}.sidebar-primary{height:44px;border:0;border-radius:16px;background:#fff;color:#202744;font-weight:850;letter-spacing:-.02em;box-shadow:0 14px 30px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;gap:8px}.sidebar-primary svg,.sidebar-collapse svg{width:18px;height:18px;stroke:currentColor}.sidebar-collapse{width:44px;height:44px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.72);display:grid;place-items:center}.side-section{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:rgba(255,255,255,.45);padding:0 12px;margin:0 0 8px}.tree-card{margin-top:0;border-radius:22px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.10);padding:10px;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.tree-filter{height:36px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.56);display:flex;align-items:center;gap:8px;padding:0 11px;margin-bottom:10px;font-size:12px}
.tree-filter svg{width:15px;height:15px;stroke:currentColor}
.tree{min-height:0;overflow:auto;padding:2px 3px 0 0}
.tree::-webkit-scrollbar{width:6px}
.tree::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:999px}
.tree-list,.tree-list ul{list-style:none;margin:0;padding:0}
.tree-node ul{margin-left:10px;padding-left:12px;border-left:1px solid rgba(255,255,255,.10)}
.tree-item{min-height:36px;display:grid;grid-template-columns:18px 22px minmax(0,1fr) auto;align-items:center;gap:8px;border-radius:13px;color:rgba(255,255,255,.68);padding:6px 8px;margin:2px 0;font-size:12.5px;font-weight:660;position:relative;line-height:1.16}
.tree-item:hover{background:rgba(255,255,255,.08);color:#fff}
.tree-item.active{background:#fff;color:#22264b;box-shadow:0 10px 20px rgba(0,0,0,.15)}
.tree-toggle{width:18px;height:18px;border:0;border-radius:7px;background:transparent;color:inherit;display:grid;place-items:center;padding:0;opacity:.72}
.tree-toggle svg{width:13px;height:13px;stroke:currentColor;transition:transform .15s ease}
.tree-node.collapsed>.tree-item .tree-toggle svg{transform:rotate(-90deg)}
.tree-node.collapsed>ul{display:none}
.tree-toggle-placeholder{width:18px;height:18px}
.node-icon{width:22px;height:22px;border-radius:8px;display:grid;place-items:center;position:relative;flex:0 0 auto}
.node-icon svg{width:14px;height:14px;stroke:currentColor}
.node-icon.folder{background:color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.10));color:#fff}
.tree-item.active .node-icon.folder{background:color-mix(in srgb,var(--accent) 18%,#fff);color:var(--accent)}
.node-icon.page{background:rgba(255,255,255,.09);color:rgba(255,255,255,.68)}
.tree-item.active .node-icon.page{background:#eef1ff;color:#606fe9}
.tree-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-title small{display:block;font-size:9.5px;line-height:1;color:rgba(255,255,255,.40);font-weight:700;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-item.active .tree-title small{color:#7a8296}
.tree-meta{display:flex;align-items:center;gap:5px}
.node-pill{height:19px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.10);color:rgba(255,255,255,.54);font-size:10px;font-weight:850;display:inline-flex;align-items:center}
.tree-item.active .node-pill{background:color-mix(in srgb,var(--accent) 13%,#fff);color:var(--accent)}
.tree-actions{display:flex;align-items:center;gap:2px;opacity:0;transform:translateX(4px);transition:.15s}
.tree-item:hover .tree-actions,.tree-item.active .tree-actions{opacity:1;transform:none}
.tree-action{width:23px;height:23px;border:0;border-radius:8px;background:rgba(255,255,255,.10);color:inherit;display:grid;place-items:center;padding:0}
.tree-item.active .tree-action{background:#eef1ff}
.tree-action svg{width:12px;height:12px;stroke:currentColor}
.tree-group-label{display:flex;align-items:center;justify-content:space-between;margin:10px 8px 5px;color:rgba(255,255,255,.38);font-size:9.5px;font-weight:850;text-transform:uppercase;letter-spacing:.12em}.side-footer{margin-top:auto;padding-top:14px;display:grid;gap:10px}.upgrade{border-radius:22px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.10);padding:14px}.upgrade b{font-size:14px}.upgrade p{margin:5px 0 12px;color:rgba(255,255,255,.56);font-size:12px;line-height:1.35}.upgrade .mini{height:34px;border:0;border-radius:13px;background:#fff;color:#202744;font-weight:820;padding:0 12px}
/* main frame */
.workspace{min-width:0;display:grid;grid-template-rows:68px minmax(0,1fr);gap:18px}.topbar{height:68px;border-radius:28px;background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.78);box-shadow:var(--shadow-soft);display:grid;grid-template-columns:minmax(270px,430px) minmax(160px,1fr) max-content;gap:16px;align-items:center;padding:10px 12px 10px 18px;backdrop-filter:blur(18px)}.search{height:44px;border-radius:16px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--muted);font-size:14px}.search svg{width:18px;height:18px;stroke:currentColor}.crumbs{min-width:0;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crumbs b{color:var(--ink)}.actions{
  height:48px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:nowrap;
}
.icon-btn{
  width:42px;
  height:42px;
  min-width:42px;
  max-width:42px;
  padding:0;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  color:#4a556b;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 42px;
  line-height:0;
  box-shadow:0 4px 12px rgba(15,23,42,.04);
}
.icon-btn svg{
  width:19px;
  height:19px;
  display:block;
  flex:0 0 19px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon-btn.primary{
  border:0;
  color:#fff;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 82%,#151827));
  box-shadow:0 12px 24px color-mix(in srgb,var(--accent) 26%,transparent);
}
.avatar{
  width:42px;
  height:42px;
  min-width:42px;
  flex:0 0 42px;
  border-radius:15px;
  background:linear-gradient(135deg,#fee2e2,#e0e7ff);
  border:3px solid #fff;
  box-shadow:0 6px 14px rgba(15,23,42,.08);
}
/* content */
.board{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 304px;gap:18px}.main-scroll{min-width:0;min-height:0;overflow:auto;padding:0 2px 4px}.hero{min-height:150px;border-radius:34px;background:
  radial-gradient(circle at 86% 24%, rgba(255,255,255,.36), transparent 20%),
  linear-gradient(135deg,color-mix(in srgb,var(--accent) 90%,#1d2448),color-mix(in srgb,var(--accent-2) 55%,#ffffff));color:#fff;padding:24px 26px;display:grid;grid-template-columns:1fr auto;align-items:end;box-shadow:var(--shadow-soft);overflow:hidden;position:relative}.hero:after{content:"";position:absolute;right:-70px;top:-68px;width:260px;height:260px;border-radius:42%;background:rgba(255,255,255,.15);box-shadow:-28px 36px 0 rgba(255,255,255,.08);transform:rotate(20deg)}.hero .kicker{font-size:13px;color:rgba(255,255,255,.72);font-weight:780}.hero h1{margin:8px 0 8px;font-size:34px;letter-spacing:-.055em;line-height:1}.hero p{margin:0;color:rgba(255,255,255,.74);font-size:14px}.hero .hero-actions{position:relative;z-index:1;display:flex;gap:10px}.pill-btn{height:42px;border:0;border-radius:15px;background:#fff;color:#202744;font-weight:850;padding:0 15px;display:inline-flex;align-items:center;gap:8px;box-shadow:0 12px 26px rgba(0,0,0,.12)}.pill-btn.dark{background:rgba(17,24,39,.72);color:#fff}.stats{margin-top:18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.stat{height:116px;border-radius:26px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.86);padding:18px;box-shadow:0 12px 28px rgba(15,23,42,.055)}.stat .num{font-size:28px;font-weight:880;letter-spacing:-.05em;margin-top:10px}.stat .label{font-size:12px;color:var(--muted);font-weight:740}.stat.accent{background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--accent) 11%,#fff));border-color:color-mix(in srgb,var(--accent) 18%,#fff)}.editor-card{margin-top:18px;border-radius:34px;background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.88);box-shadow:var(--shadow-soft);overflow:hidden}.editor-head{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start;padding:24px 24px 16px;border-bottom:1px solid var(--line)}.title h2{font-size:28px;letter-spacing:-.05em;margin:0 0 7px}.meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:12px}.chip{height:28px;border-radius:999px;background:var(--soft);border:1px solid var(--line);padding:0 10px;display:inline-flex;align-items:center;gap:6px;font-weight:720}.editor-tools{display:flex;gap:8px;align-items:center;justify-content:flex-end}.tool{width:38px;height:38px;border-radius:13px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:#5e687e}.tool svg{width:17px;height:17px;stroke:currentColor}.editor-body{padding:22px 26px 30px}.content-block{max-width:820px;line-height:1.75;font-size:15.5px;color:#2b3141}.content-block h3{font-size:21px;letter-spacing:-.035em;margin:0 0 10px}.content-block p{margin:0 0 14px}.callout{margin-top:18px;border-radius:22px;background:color-mix(in srgb,var(--accent) 8%,#fff);border:1px solid color-mix(in srgb,var(--accent) 16%,#fff);padding:16px 18px;display:flex;gap:12px;align-items:flex-start}.callout .mark{width:34px;height:34px;border-radius:13px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:900;box-shadow:0 12px 22px color-mix(in srgb,var(--accent) 24%,transparent)}
/* right */
.right-panel{min-width:0;min-height:0;display:flex;flex-direction:column;gap:14px}.panel-card{background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.88);border-radius:30px;box-shadow:var(--shadow-soft);padding:18px}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.panel-title h3{margin:0;font-size:15px;letter-spacing:-.025em}.panel-title span{font-size:12px;color:var(--muted);font-weight:750}.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.quick{height:82px;border:1px solid var(--line);border-radius:22px;background:#fff;padding:13px;text-align:left}.quick .qicon{width:30px;height:30px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,#fff);color:var(--accent);display:grid;place-items:center;margin-bottom:9px}.quick svg{width:16px;height:16px;stroke:currentColor}.quick b{font-size:12px}.history{display:grid;gap:10px}.history-item{border-radius:20px;background:#fff;border:1px solid var(--line);padding:12px}.history-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.history-top b{font-size:13px}.history-top span{font-size:11px;color:var(--muted)}.history-item p{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.35}.activity{display:grid;gap:10px}.activity-row{display:flex;gap:10px;align-items:center}.activity-dot{width:36px;height:36px;border-radius:14px;background:var(--soft);display:grid;place-items:center;color:var(--accent);font-weight:900}.activity-row b{display:block;font-size:13px}.activity-row span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
@media(max-width:1160px){.shell{grid-template-columns:230px 1fr;padding:16px}.board{grid-template-columns:1fr}.right-panel{display:grid;grid-template-columns:1fr 1fr}.stats{grid-template-columns:repeat(2,1fr)}}

/* v9 workspace polish */
.main-scroll{scrollbar-width:thin;scrollbar-color:rgba(31,41,55,.18) transparent}
.editor-card{
  border-radius:30px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.86);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.editor-toolbar{
  height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border-bottom:1px solid rgba(31,41,55,.08);
  background:linear-gradient(180deg,#fff,rgba(248,250,252,.86));
}
.toolbar-left,.toolbar-right{
  display:flex;
  align-items:center;
  gap:6px;
}
.format-btn{
  height:34px;
  min-width:34px;
  border:1px solid rgba(31,41,55,.08);
  border-radius:12px;
  background:#fff;
  color:#566176;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  font-size:12px;
  font-weight:800;
}
.format-btn svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.format-btn.accent{
  background:color-mix(in srgb,var(--accent) 13%,#fff);
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 18%,#fff);
}
.editor-paper{
  padding:28px 34px 34px;
  min-height:420px;
}
.editor-paper h2{
  margin:0 0 14px;
  font-size:28px;
  line-height:1.12;
  letter-spacing:-.045em;
}
.editor-paper p{
  margin:0 0 16px;
  color:#4d586e;
  font-size:15px;
  line-height:1.68;
}
.info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:20px 0;
}
.info-card{
  border-radius:20px;
  background:#f7f9fc;
  border:1px solid rgba(31,41,55,.07);
  padding:16px;
}
.info-card b{
  display:block;
  font-size:13px;
  margin-bottom:6px;
}
.info-card span{
  color:#737e94;
  font-size:13px;
  line-height:1.45;
}
.callout{
  margin-top:20px;
  border-radius:22px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,#fff);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,#fff),#fff);
  padding:16px;
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:12px;
  color:#4c566b;
}
.callout .mark{
  width:36px;
  height:36px;
  border-radius:14px;
  background:var(--accent);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
}
.right-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:0;
}
.panel-card{
  border-radius:26px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 10px 24px rgba(15,23,42,.055);
  padding:16px;
}
.panel-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.panel-title h3{
  margin:0;
  font-size:15px;
  letter-spacing:-.025em;
}
.panel-title span{
  color:#8a93a5;
  font-size:11px;
  font-weight:820;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.quick-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.quick{
  min-height:76px;
  border:1px solid rgba(31,41,55,.08);
  border-radius:20px;
  background:#fff;
  color:#30394d;
  padding:12px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  text-align:left;
}
.qicon{
  width:30px;
  height:30px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:color-mix(in srgb,var(--accent) 12%,#fff);
  color:var(--accent);
}
.qicon svg{
  width:15px;
  height:15px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.quick b{
  font-size:12px;
}
.history{
  display:grid;
  gap:9px;
}
.history-item{
  border-radius:18px;
  background:#f7f9fc;
  border:1px solid rgba(31,41,55,.06);
  padding:12px;
}
.history-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:5px;
}
.history-top b{
  font-size:12px;
}
.history-top span{
  color:#8a94a7;
  font-size:11px;
  font-weight:760;
}
.history-item p{
  margin:0;
  color:#707b91;
  font-size:12px;
  line-height:1.38;
}
.activity{
  display:grid;
  gap:10px;
}
.activity-row{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.activity-dot{
  width:32px;
  height:32px;
  border-radius:13px;
  background:color-mix(in srgb,var(--accent) 12%,#fff);
  color:var(--accent);
  display:grid;
  place-items:center;
  font-weight:900;
}
.activity-row b{
  display:block;
  font-size:12px;
}
.activity-row span{
  display:block;
  margin-top:2px;
  color:#7b8599;
  font-size:12px;
}
@media (max-width:1180px){
  .board{grid-template-columns:minmax(0,1fr)}
  .right-panel{display:none}
}




/* Real app bridge for reference v9 */
body.app-shell .brand-mark{overflow:hidden;text-decoration:none}body.app-shell .brand-logo{width:100%;height:100%;object-fit:cover;display:block;border-radius:15px}body.app-shell .brand{text-decoration:none;color:#fff}.brand>span:last-child{min-width:0}.brand-title{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-primary span{font-weight:900}.sidebar-collapse svg,.sidebar-primary svg{stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}.shell>.workspace{min-width:0}.search input{border:0;background:transparent;outline:0;flex:1;min-width:0;color:var(--ink);height:100%}.search .search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30}.search{position:relative}.actions form{margin:0;display:flex}.actions .icon-btn{text-decoration:none}.page-work-card{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin:0!important;min-height:0!important}.page-card-topline,.share-box,#pageViewTitle,.editor-mode-hint,.status{display:none!important}.page-view,.page-view-card,.page-view-content{display:block!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin:0!important;min-height:0!important}.page-view-card{width:100%!important}.tree-title{font:inherit;line-height:1.16}.tree-title::before{content:none!important}.node-icon svg,.workspace-card-icon svg,.qicon svg,.page-menu-btn svg{stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}.tree-edit,.tree-add{width:23px;height:23px;border:0;border-radius:8px;background:rgba(255,255,255,.10);color:inherit;display:grid;place-items:center;padding:0;opacity:0;transform:translateX(4px);transition:.15s;font-size:13px}.tree-item:hover .tree-edit,.tree-item:hover .tree-add,.tree-item.active .tree-edit,.tree-item.active .tree-add{opacity:1;transform:none}.tree-item.active .tree-edit,.tree-item.active .tree-add{background:#eef1ff}.public-badge{height:19px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.10);color:rgba(255,255,255,.54);font-size:10px;font-weight:850;display:inline-flex;align-items:center}.tree-item.active .public-badge{background:color-mix(in srgb,var(--accent) 13%,#fff);color:var(--accent)}#tree:empty:before,#tree>ul:empty:before{content:'Пока нет страниц\AСоздайте первый раздел или страницу';white-space:pre-line;display:grid;place-items:center;min-height:190px;padding:24px;text-align:center;color:rgba(255,255,255,.54);font-size:13px;line-height:1.55}.main-scroll>.page-work-card{overflow:visible}.dc-document-content{color:#4d586e;font-size:15px;line-height:1.68}.dc-document-content img,.dc-document-content video{max-width:100%;height:auto;border-radius:14px}.page-empty{color:#768097!important;font-size:14px!important;line-height:1.6!important}.workspace-card{cursor:pointer}.workspace-card:focus-visible,.quick:focus-visible,.format-btn:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.history-panel{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important}.history-panel-head{display:none!important}.history-list{display:grid;gap:9px}.history-card,.history-item,.history-empty{border-radius:18px!important;background:#f7f9fc!important;border:1px solid rgba(31,41,55,.06)!important;padding:12px!important;box-shadow:none!important;color:#707b91!important;font-size:12px!important;line-height:1.38!important}.history-card-title{font-size:12px!important;color:#151827!important}.history-card-meta,.history-card-preview{font-size:12px!important;color:#707b91!important}.panel-title button{width:34px;height:34px;border-radius:12px;border:1px solid var(--line);background:#fff;color:#667085;display:grid;place-items:center}.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}.info-card{border-radius:20px;background:#f7f9fc;border:1px solid rgba(31,41,55,.07);padding:16px}.info-card b{display:block;font-size:13px;margin-bottom:6px}.info-card span{color:#737e94;font-size:13px;line-height:1.45}
body.app-shell.is-editing .page-card-topline{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important;margin-bottom:14px!important;border-radius:26px!important;background:rgba(255,255,255,.86)!important;border:1px solid rgba(255,255,255,.82)!important;box-shadow:var(--shadow-soft)!important;padding:12px!important}.editor-actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important;justify-content:flex-end!important}.editor-actions button{height:38px;border-radius:13px;border:1px solid rgba(31,41,55,.08);background:#fff;color:#334155;font-size:12px;font-weight:820;padding:0 12px}.editor-actions .primary{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 82%,#151827));color:#fff;border:0}body.app-shell.is-editing #pageView{display:none!important}body.app-shell.is-editing .editor-mode-hint,body.app-shell.is-editing .status{display:block!important;margin:8px 4px;color:#768097;font-size:12px}.editor-shell{margin:0!important;border-radius:30px!important;background:rgba(255,255,255,.92)!important;border:1px solid rgba(255,255,255,.86)!important;box-shadow:var(--shadow-soft)!important;overflow:hidden!important}.title-input{width:100%!important;min-height:68px!important;border:0!important;border-bottom:1px solid rgba(31,41,55,.08)!important;border-radius:0!important;background:#fff!important;padding:0 24px!important;font-size:30px!important;font-weight:850!important;letter-spacing:-.045em!important}.editor-shell .editor-toolbar{border-radius:0!important}.editor{min-height:420px!important;background:#fff!important;border-radius:0!important}.ql-toolbar.editor-toolbar{height:auto;min-height:54px;align-items:center;justify-content:flex-start}.ql-container.editor{font-size:16px}.ql-editor{min-height:420px}.modal-overlay{z-index:2000}
@media(max-width:1160px){.shell{grid-template-columns:230px 1fr;padding:16px}.brand-sub,.side-footer{display:none}.board{grid-template-columns:minmax(0,1fr)}.right-panel{display:none}}

/* view/edit visibility fixes */
body.app-shell .editor-shell.readonly{display:none!important}
body.app-shell.is-editing .editor-shell{display:block!important}
body.app-shell .share-box:not(.hidden){display:block!important;margin:0 0 14px!important;border-radius:22px!important;background:rgba(255,255,255,.9)!important;border:1px solid rgba(31,41,55,.08)!important;box-shadow:var(--shadow-soft)!important;padding:14px!important}
body.app-shell .share-url-row{display:flex!important;gap:8px!important;margin-top:10px!important}
body.app-shell .share-url-row input{flex:1!important;border:1px solid var(--line)!important;border-radius:14px!important;padding:0 12px!important;min-height:38px!important}


/* DataCaps step17 — hard remove old orange theme and force reference v9 palette/layout.
   This block exists because the application previously injected saved orange theme variables and had
   high-specificity Orange Light Grid CSS inside public/app.css. */
:root {
  --accent: #7c8cff !important;
  --accent-2: #9ad9bf !important;
  --ink: #151827 !important;
  --muted: #768097 !important;
  --line: rgba(31,41,55,.10) !important;
  --panel: #ffffff !important;
  --soft: #f5f7fb !important;
  --side: #22264b !important;
  --side-2: #161a35 !important;
  --shadow: 0 28px 70px rgba(30,41,59,.14) !important;
  --shadow-soft: 0 12px 32px rgba(30,41,59,.08) !important;
  --topbar-bg: rgba(255,255,255,.76) !important;
  --topbar-text: #151827 !important;
}

body.app-shell {
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb,#7c8cff 18%, transparent), transparent 28%),
    radial-gradient(circle at 86% 16%, rgba(154,217,191,.36), transparent 30%),
    radial-gradient(circle at 76% 88%, color-mix(in srgb,#7c8cff 10%, transparent), transparent 27%),
    linear-gradient(140deg,#eef3f8 0%,#f8fafc 48%,#eef3f7 100%) !important;
  color: #151827 !important;
}

body.app-shell::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: .52 !important;
  background-image:
    linear-gradient(90deg,rgba(79,94,122,.06) 1px,transparent 1px),
    linear-gradient(0deg,rgba(79,94,122,.055) 1px,transparent 1px) !important;
  background-size: 40px 40px !important;
  mask-image: linear-gradient(to bottom,#000,rgba(0,0,0,.5) 66%,transparent) !important;
  z-index: 0 !important;
}

body.app-shell .shell {
  height: 100vh !important;
  padding: 22px !important;
  display: grid !important;
  grid-template-columns: 388px minmax(0,1fr) !important;
  gap: 22px !important;
  position: relative !important;
  z-index: 1 !important;
}

body.app-shell .shell > .sidebar,
body.app-shell aside.sidebar {
  border: 0 !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 14% 10%, color-mix(in srgb,#7c8cff 28%, transparent), transparent 32%),
    linear-gradient(180deg,#22264b,#161a35) !important;
  color: #fff !important;
  padding: 22px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: auto !important;
  box-shadow: 0 28px 70px rgba(30,41,59,.14) !important;
  backdrop-filter: none !important;
}

body.app-shell .shell > .workspace,
body.app-shell main.workspace {
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: 68px minmax(0,1fr) !important;
  grid-template-columns: none !important;
  gap: 18px !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.app-shell .topbar {
  height: 68px !important;
  min-height: 68px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.76) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow: 0 12px 32px rgba(30,41,59,.08) !important;
  display: grid !important;
  grid-template-columns: minmax(270px,430px) minmax(160px,1fr) max-content !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 10px 12px 10px 18px !important;
  backdrop-filter: blur(18px) !important;
  position: static !important;
  top: auto !important;
  color: #151827 !important;
}

body.app-shell .topbar::before,
body.app-shell .topbar::after,
body.app-shell .brand::before {
  content: none !important;
  display: none !important;
}

body.app-shell .brand,
body.app-shell .brand:visited {
  height: 46px !important;
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 2px 4px 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  text-decoration: none !important;
}

body.app-shell .brand-mark {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: #22264b !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.2) !important;
}

body.app-shell .brand-logo { width:100% !important; height:100% !important; object-fit:cover !important; border-radius:15px !important; }
body.app-shell .brand-title { color:#fff !important; font-weight:850 !important; letter-spacing:-.04em !important; line-height:1 !important; }
body.app-shell .brand-sub { display:block !important; font-size:12px !important; color:rgba(255,255,255,.58) !important; margin-top:4px !important; }

body.app-shell .sidebar-primary {
  height: 44px !important;
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: #202744 !important;
  font-weight: 850 !important;
  letter-spacing: -.02em !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 12px !important;
}

body.app-shell .sidebar-collapse {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.72) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  box-shadow: none !important;
}

body.app-shell .tree-card {
  margin-top: 0 !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  padding: 10px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.app-shell .tree-item.active { background:#fff !important; color:#22264b !important; box-shadow:0 10px 20px rgba(0,0,0,.15) !important; }
body.app-shell .tree-item:hover { background:rgba(255,255,255,.08) !important; color:#fff !important; }
body.app-shell .tree-item { color:rgba(255,255,255,.68) !important; min-height:36px !important; border-radius:13px !important; }

body.app-shell .search {
  height:44px !important;
  border-radius:16px !important;
  border:1px solid rgba(31,41,55,.10) !important;
  background:#fff !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:0 14px !important;
  color:#768097 !important;
  font-size:14px !important;
}

body.app-shell .actions { display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:8px !important; }
body.app-shell .icon-btn { width:42px !important; height:42px !important; min-width:42px !important; max-width:42px !important; padding:0 !important; border:1px solid rgba(31,41,55,.10) !important; border-radius:15px !important; background:#fff !important; color:#4a556b !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; box-shadow:0 4px 12px rgba(15,23,42,.04) !important; }
body.app-shell .icon-btn.primary { border:0 !important; color:#fff !important; background:linear-gradient(135deg,#7c8cff,color-mix(in srgb,#7c8cff 82%,#151827)) !important; box-shadow:0 12px 24px color-mix(in srgb,#7c8cff 26%,transparent) !important; }

body.app-shell .board { min-height:0 !important; display:grid !important; grid-template-columns:minmax(0,1fr) 304px !important; gap:18px !important; }
body.app-shell .main-scroll { min-width:0 !important; min-height:0 !important; overflow:auto !important; padding:0 2px 4px !important; }
body.app-shell .right-panel { display:flex !important; flex-direction:column !important; gap:14px !important; min-height:0 !important; }

@media(max-width:1160px){
  body.app-shell .shell{grid-template-columns:230px 1fr !important; padding:16px !important;}
  body.app-shell .board{grid-template-columns:1fr !important;}
  body.app-shell .right-panel{display:grid !important; grid-template-columns:1fr 1fr !important;}
}

/* DataCaps step18 — tree icon alignment + folder/page color accents.
   Target: left tree only. Fixes shifted icons caused by old pseudo-icons and text glyph buttons. */
body.app-shell .sidebar #tree.tree,
body.app-shell .sidebar .tree {
  padding: 8px !important;
  overflow: auto !important;
}

body.app-shell .sidebar .tree ul {
  list-style: none !important;
  margin: 0 !important;
  padding-left: 13px !important;
  border-left: 1px solid rgba(255,255,255,.10) !important;
}

body.app-shell .sidebar .tree > ul {
  padding-left: 0 !important;
  border-left: 0 !important;
}

body.app-shell .sidebar .tree-node > ul {
  margin-left: 17px !important;
  padding-left: 13px !important;
}

body.app-shell .sidebar .tree-node.collapsed > ul {
  display: none !important;
}

body.app-shell .sidebar .tree-item {
  --tree-type-color: rgba(255,255,255,.42);
  position: relative !important;
  min-height: 38px !important;
  display: grid !important;
  grid-template-columns: 18px 24px minmax(0,1fr) auto auto auto !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 2px 0 !important;
  padding: 6px 7px !important;
  border-radius: 14px !important;
  color: rgba(255,255,255,.72) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.app-shell .sidebar .tree-node.is-folder > .tree-item {
  --tree-type-color: #7c8cff;
}

body.app-shell .sidebar .tree-node.is-page > .tree-item {
  --tree-type-color: #9ad9bf;
}

body.app-shell .sidebar .tree-item::before {
  content: '' !important;
  position: absolute !important;
  left: 3px !important;
  top: 9px !important;
  bottom: 9px !important;
  width: 3px !important;
  border-radius: 999px !important;
  background: var(--node-color, var(--tree-type-color)) !important;
  opacity: .42 !important;
  transform: none !important;
}

body.app-shell .sidebar .tree-item.has-node-color::before {
  opacity: .92 !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--node-color) 13%, transparent) !important;
}

body.app-shell .sidebar .tree-item:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.app-shell .sidebar .tree-item.active {
  background: #fff !important;
  color: #22264b !important;
  border-color: rgba(255,255,255,.98) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.14) !important;
}

body.app-shell .sidebar .tree-item.active::before {
  opacity: 1 !important;
  top: 8px !important;
  bottom: 8px !important;
}

body.app-shell .sidebar .tree-toggle,
body.app-shell .sidebar .tree-toggle-placeholder {
  grid-column: 1 !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: currentColor !important;
  box-shadow: none !important;
  opacity: .76 !important;
  transform: none !important;
}

body.app-shell .sidebar .tree-toggle-placeholder {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.app-shell .sidebar .tree-toggle:hover {
  background: rgba(255,255,255,.12) !important;
  opacity: 1 !important;
  transform: none !important;
}

body.app-shell .sidebar .tree-item.active .tree-toggle:hover {
  background: rgba(34,38,75,.06) !important;
}

body.app-shell .sidebar .chevron {
  width: 7px !important;
  height: 7px !important;
  border-right: 1.7px solid currentColor !important;
  border-bottom: 1.7px solid currentColor !important;
  transform: rotate(45deg) !important;
  margin: -3px 0 0 0 !important;
  display: block !important;
  opacity: 1 !important;
}

body.app-shell .sidebar .tree-node.collapsed > .tree-item .tree-toggle .chevron {
  transform: rotate(-45deg) !important;
  margin: 0 0 0 -2px !important;
}

body.app-shell .sidebar .node-icon {
  grid-column: 2 !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  border-radius: 9px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--tree-type-color) !important;
  background: color-mix(in srgb, var(--tree-type-color) 16%, rgba(255,255,255,.10)) !important;
  border: 1px solid color-mix(in srgb, var(--tree-type-color) 18%, transparent) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.app-shell .sidebar .tree-item.has-node-color .node-icon {
  color: var(--node-color) !important;
  background: color-mix(in srgb, var(--node-color) 17%, rgba(255,255,255,.10)) !important;
  border-color: color-mix(in srgb, var(--node-color) 30%, transparent) !important;
}

body.app-shell .sidebar .tree-item.active .node-icon {
  color: var(--tree-type-color) !important;
  background: color-mix(in srgb, var(--tree-type-color) 13%, #fff) !important;
  border-color: color-mix(in srgb, var(--tree-type-color) 18%, #fff) !important;
}

body.app-shell .sidebar .tree-item.active.has-node-color .node-icon {
  color: var(--node-color) !important;
  background: color-mix(in srgb, var(--node-color) 13%, #fff) !important;
  border-color: color-mix(in srgb, var(--node-color) 24%, #fff) !important;
}

body.app-shell .sidebar .node-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* The JS already renders .node-icon; old CSS pseudo-icons caused doubled and shifted icons. */
body.app-shell .sidebar .tree-title::before,
body.app-shell .sidebar .tree-title::after {
  content: none !important;
  display: none !important;
}

body.app-shell .sidebar .tree-title {
  grid-column: 3 !important;
  min-width: 0 !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: inherit !important;
  display: block !important;
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 12.5px !important;
  font-weight: 720 !important;
  line-height: 26px !important;
  box-shadow: none !important;
}

body.app-shell .sidebar .tree-title:hover {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}

body.app-shell .sidebar .public-badge {
  grid-column: auto !important;
  height: 19px !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.62) !important;
  border: 0 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 19px !important;
}

body.app-shell .sidebar .tree-item.active .public-badge {
  background: color-mix(in srgb, var(--node-color, var(--tree-type-color)) 12%, #fff) !important;
  color: var(--node-color, var(--tree-type-color)) !important;
}

body.app-shell .sidebar .tree-edit,
body.app-shell .sidebar .tree-add {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: currentColor !important;
  display: grid !important;
  place-items: center !important;
  opacity: 0 !important;
  transform: translateX(3px) !important;
  box-shadow: none !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

body.app-shell .sidebar .tree-item:hover .tree-edit,
body.app-shell .sidebar .tree-item:hover .tree-add,
body.app-shell .sidebar .tree-item:focus-within .tree-edit,
body.app-shell .sidebar .tree-item:focus-within .tree-add,
body.app-shell .sidebar .tree-item.active .tree-edit,
body.app-shell .sidebar .tree-item.active .tree-add {
  opacity: .82 !important;
  transform: none !important;
}

body.app-shell .sidebar .tree-edit:hover,
body.app-shell .sidebar .tree-add:hover {
  opacity: 1 !important;
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.10) !important;
  transform: none !important;
  box-shadow: none !important;
}

body.app-shell .sidebar .tree-item.active .tree-edit:hover,
body.app-shell .sidebar .tree-item.active .tree-add:hover {
  background: rgba(34,38,75,.06) !important;
  border-color: rgba(34,38,75,.08) !important;
}

body.app-shell .sidebar .tree-edit svg,
body.app-shell .sidebar .tree-add svg {
  width: 13px !important;
  height: 13px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.app-shell .sidebar .tree-item.has-node-color {
  background: color-mix(in srgb, var(--node-color) 7%, transparent) !important;
  border-color: color-mix(in srgb, var(--node-color) 13%, transparent) !important;
}

body.app-shell .sidebar .tree-item.has-node-color:hover {
  background: color-mix(in srgb, var(--node-color) 10%, rgba(255,255,255,.06)) !important;
  border-color: color-mix(in srgb, var(--node-color) 22%, transparent) !important;
}

body.app-shell .sidebar .tree-item.active.has-node-color {
  background: #fff !important;
  border-color: color-mix(in srgb, var(--node-color) 28%, #fff) !important;
}

/* Empty tree keeps the same visual center after grid row fixes. */
body.app-shell .sidebar #tree:empty::before,
body.app-shell .sidebar #tree > ul:empty::before {
  min-height: 190px !important;
  padding: 24px !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(255,255,255,.54) !important;
  text-align: center !important;
}



/* DataCaps step19 — article view + readable tree + history fix.
   Selected pages are articles now; dashboard cards stay only for the main/welcome screen. */

/* --- Tree readability and accents --- */
body.app-shell .tree-card {
  padding: 10px !important;
  overflow: hidden !important;
}
body.app-shell .tree > ul,
body.app-shell #tree > ul {
  padding-right: 2px !important;
}
body.app-shell .tree-item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 18px 24px minmax(0, 1fr) auto auto auto !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 38px !important;
  margin: 2px 0 !important;
  padding: 6px 8px !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.72) !important;
  line-height: 1.16 !important;
}
body.app-shell .tree-item::before,
body.app-shell .tree-item::after,
body.app-shell .tree-item.has-node-color::before,
body.app-shell .tree-item.has-node-color::after {
  content: none !important;
  display: none !important;
}
body.app-shell .tree-item:hover {
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
body.app-shell .tree-item.active {
  background: #fff !important;
  color: #22264b !important;
  border-color: rgba(255,255,255,.96) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.14) !important;
}
body.app-shell .tree-item.has-node-color:not(.active) {
  background: color-mix(in srgb, var(--node-color) 5%, rgba(255,255,255,.045)) !important;
  border-color: color-mix(in srgb, var(--node-color) 16%, rgba(255,255,255,.08)) !important;
}
body.app-shell .tree-item.active.has-node-color {
  background: #fff !important;
  border-color: color-mix(in srgb, var(--node-color) 22%, #fff) !important;
}
body.app-shell .tree-toggle,
body.app-shell .tree-toggle-placeholder {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  color: currentColor !important;
  opacity: .72 !important;
}
body.app-shell .tree-toggle:hover {
  background: rgba(255,255,255,.10) !important;
  opacity: 1 !important;
}
body.app-shell .tree-item.active .tree-toggle:hover {
  background: rgba(31,41,55,.06) !important;
}
body.app-shell .tree-toggle .chevron {
  width: 7px !important;
  height: 7px !important;
  border-right: 1.7px solid currentColor !important;
  border-bottom: 1.7px solid currentColor !important;
  transform: rotate(45deg) !important;
  margin: -2px 0 0 0 !important;
  opacity: .85 !important;
}
body.app-shell .tree-node.collapsed > .tree-item .tree-toggle .chevron {
  transform: rotate(-45deg) !important;
  margin: 0 0 0 -2px !important;
}
body.app-shell .node-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 9px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
body.app-shell .node-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
body.app-shell .node-icon.folder {
  color: #c9d0ff !important;
  background: rgba(124,140,255,.16) !important;
  border-color: rgba(124,140,255,.18) !important;
}
body.app-shell .node-icon.page {
  color: rgba(255,255,255,.72) !important;
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.08) !important;
}
body.app-shell .tree-item.has-node-color .node-icon {
  color: var(--node-color) !important;
  background: color-mix(in srgb, var(--node-color) 14%, rgba(255,255,255,.08)) !important;
  border-color: color-mix(in srgb, var(--node-color) 22%, rgba(255,255,255,.08)) !important;
}
body.app-shell .tree-item.active .node-icon.folder,
body.app-shell .tree-item.active .node-icon.page {
  color: var(--accent) !important;
  background: #eef1ff !important;
  border-color: rgba(124,140,255,.14) !important;
}
body.app-shell .tree-item.active.has-node-color .node-icon {
  color: var(--node-color) !important;
  background: color-mix(in srgb, var(--node-color) 12%, #fff) !important;
  border-color: color-mix(in srgb, var(--node-color) 22%, #fff) !important;
}
body.app-shell .tree-title {
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  display: block !important;
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 12.5px !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
}
body.app-shell .tree-title::before,
body.app-shell .tree-title::after {
  content: none !important;
  display: none !important;
}
body.app-shell .public-badge {
  height: 19px !important;
  max-width: 54px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.58) !important;
  border: 0 !important;
  font-size: 9.5px !important;
  font-weight: 850 !important;
  line-height: 19px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.app-shell .tree-item.active .public-badge {
  background: color-mix(in srgb, var(--accent) 13%, #fff) !important;
  color: var(--accent) !important;
}
body.app-shell .tree-edit,
body.app-shell .tree-add {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: currentColor !important;
  display: grid !important;
  place-items: center !important;
  opacity: .58 !important;
  transform: none !important;
  box-shadow: none !important;
}
body.app-shell .tree-edit:hover,
body.app-shell .tree-add:hover {
  opacity: 1 !important;
  background: rgba(255,255,255,.10) !important;
}
body.app-shell .tree-item.active .tree-edit:hover,
body.app-shell .tree-item.active .tree-add:hover {
  background: rgba(31,41,55,.06) !important;
}
body.app-shell .tree-edit svg,
body.app-shell .tree-add svg {
  width: 13px !important;
  height: 13px !important;
  display: block !important;
}

/* --- Selected page as an article, not a dashboard --- */
body.app-shell:not(.no-page-selected) .main-scroll {
  padding: 0 2px 8px !important;
}
body.app-shell:not(.no-page-selected) .page-work-card,
body.app-shell:not(.no-page-selected) .page-view,
body.app-shell:not(.no-page-selected) .page-view-card,
body.app-shell:not(.no-page-selected) .page-view-content {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body.app-shell:not(.no-page-selected) #pageViewTitle,
body.app-shell:not(.no-page-selected) .page-card-topline,
body.app-shell:not(.no-page-selected) .editor-mode-hint,
body.app-shell:not(.no-page-selected) .status {
  display: none !important;
}
body.app-shell:not(.no-page-selected) .dc-article-shell {
  width: min(980px, 100%) !important;
  margin: 0 auto !important;
  min-height: calc(100vh - 140px) !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  box-shadow: var(--shadow-soft) !important;
  overflow: hidden !important;
}
body.app-shell:not(.no-page-selected) .dc-article-head {
  padding: 34px 42px 24px !important;
  border-bottom: 1px solid rgba(31,41,55,.075) !important;
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.84)) !important;
}
body.app-shell:not(.no-page-selected) .dc-article-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  color: #6e7890 !important;
  font-size: 12px !important;
  font-weight: 820 !important;
  letter-spacing: -.01em !important;
}
body.app-shell:not(.no-page-selected) .dc-article-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: var(--accent) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent) !important;
}
body.app-shell:not(.no-page-selected) .dc-article-head h1 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: clamp(38px, 4.4vw, 58px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.065em !important;
  font-weight: 900 !important;
}
body.app-shell:not(.no-page-selected) .dc-article-head p {
  max-width: 720px !important;
  margin: 14px 0 0 !important;
  color: #68748b !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}
body.app-shell:not(.no-page-selected) .dc-article-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 20px !important;
}
body.app-shell:not(.no-page-selected) .dc-article-meta span {
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(31,41,55,.08) !important;
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 780 !important;
}
body.app-shell:not(.no-page-selected) .dc-article-body {
  padding: 38px 42px 52px !important;
  color: #2f394d !important;
  font-size: 16px !important;
  line-height: 1.78 !important;
}
body.app-shell:not(.no-page-selected) .dc-article-body > :first-child { margin-top: 0 !important; }
body.app-shell:not(.no-page-selected) .dc-article-body h1,
body.app-shell:not(.no-page-selected) .dc-article-body h2,
body.app-shell:not(.no-page-selected) .dc-article-body h3 {
  color: #111827 !important;
  letter-spacing: -.035em !important;
  line-height: 1.16 !important;
}
body.app-shell:not(.no-page-selected) .dc-article-body h2 { font-size: 28px !important; margin: 30px 0 12px !important; }
body.app-shell:not(.no-page-selected) .dc-article-body h3 { font-size: 22px !important; margin: 26px 0 10px !important; }
body.app-shell:not(.no-page-selected) .dc-article-body p { margin: 0 0 16px !important; }
body.app-shell:not(.no-page-selected) .dc-article-body img,
body.app-shell:not(.no-page-selected) .dc-article-body video,
body.app-shell:not(.no-page-selected) .dc-article-body iframe {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 18px !important;
}
body.app-shell:not(.no-page-selected) .dc-article-body blockquote {
  margin: 20px 0 !important;
  padding: 14px 18px !important;
  border-left: 4px solid var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 7%, #fff) !important;
  border-radius: 16px !important;
}
body.app-shell:not(.no-page-selected) .page-empty {
  margin: 0 !important;
  color: #7b8499 !important;
  font-style: italic !important;
}
body.app-shell:not(.no-page-selected) .folder-overview {
  margin: 0 !important;
}

/* --- History panel: no clipped buttons / no horizontal overflow --- */
body.app-shell .board {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 340px) !important;
  gap: 18px !important;
  overflow: hidden !important;
}
body.app-shell .right-panel,
body.app-shell .history-panel {
  min-width: 0 !important;
  max-width: 340px !important;
  overflow: hidden !important;
}
body.app-shell .right-panel .panel-card {
  overflow: hidden !important;
}
body.app-shell .history-list {
  overflow-x: hidden !important;
  max-height: min(420px, calc(100vh - 360px)) !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}
body.app-shell .history-item.history-card,
body.app-shell .history-card,
body.app-shell .history-item {
  max-width: 100% !important;
  overflow: hidden !important;
}
body.app-shell .history-item-top,
body.app-shell .history-item-top strong,
body.app-shell .history-label-wrap,
body.app-shell .history-item-body {
  min-width: 0 !important;
}
body.app-shell .history-item-top strong {
  white-space: normal !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}
body.app-shell .history-item-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 10px !important;
  justify-content: stretch !important;
}
body.app-shell .history-preview-btn,
body.app-shell .history-restore-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 11.5px !important;
}

@media (max-width: 1280px) {
  body.app-shell .board { grid-template-columns: minmax(0,1fr) !important; }
  body.app-shell .right-panel { display: none !important; }
}


/* DataCaps step20 — article width + tree alignment + page-to-folder refresh. */

/* Article should use the same working width as the main screen left workspace, not a narrow centered card. */
body.app-shell:not(.no-page-selected) .main-scroll {
  padding: 0 0 8px !important;
}
body.app-shell:not(.no-page-selected) .dc-article-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: calc(100vh - 140px) !important;
}
body.app-shell:not(.no-page-selected) .dc-article-head {
  padding: 38px 44px 26px !important;
}
body.app-shell:not(.no-page-selected) .dc-article-body {
  padding: 38px 44px 56px !important;
  max-width: none !important;
}
body.app-shell:not(.no-page-selected) .dc-article-body > * {
  max-width: 980px !important;
}
body.app-shell:not(.no-page-selected) .dc-article-body > table,
body.app-shell:not(.no-page-selected) .dc-article-body > .ql-table,
body.app-shell:not(.no-page-selected) .dc-article-body > img,
body.app-shell:not(.no-page-selected) .dc-article-body > video,
body.app-shell:not(.no-page-selected) .dc-article-body > iframe,
body.app-shell:not(.no-page-selected) .dc-article-body > .folder-overview {
  max-width: 100% !important;
}

/* Tree: readable working layout. Keep accents only on icons/badges, not as a thick colored row. */
body.app-shell .sidebar .tree {
  overflow-x: hidden !important;
}
body.app-shell .sidebar .tree-item {
  display: grid !important;
  grid-template-columns: 18px 22px minmax(0, 1fr) auto auto auto !important;
  align-items: center !important;
  column-gap: 8px !important;
  min-width: 0 !important;
  padding: 6px 8px !important;
}
body.app-shell .sidebar .tree-item::before,
body.app-shell .sidebar .tree-item::after,
body.app-shell .sidebar .tree-item.has-node-color::before,
body.app-shell .sidebar .tree-item.has-node-color::after {
  content: none !important;
  display: none !important;
}
body.app-shell .sidebar .tree-item.has-node-color:not(.active) {
  background: transparent !important;
  border-color: transparent !important;
  color: rgba(255,255,255,.72) !important;
}
body.app-shell .sidebar .tree-item.has-node-color:not(.active):hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
body.app-shell .sidebar .tree-title {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: left !important;
  outline: none !important;
}
body.app-shell .sidebar .tree-title:focus,
body.app-shell .sidebar .tree-title:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
body.app-shell .sidebar .tree-title:focus-visible {
  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
body.app-shell .sidebar .public-badge {
  max-width: 58px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.app-shell .sidebar .node-icon {
  grid-column: auto !important;
  box-shadow: none !important;
}
body.app-shell .sidebar .tree-item.has-node-color .node-icon {
  color: var(--node-color) !important;
  background: color-mix(in srgb, var(--node-color) 16%, rgba(255,255,255,.10)) !important;
}
body.app-shell .sidebar .tree-item.active.has-node-color .node-icon {
  color: var(--node-color) !important;
  background: color-mix(in srgb, var(--node-color) 14%, #fff) !important;
}
body.app-shell .sidebar .tree-edit,
body.app-shell .sidebar .tree-add {
  position: static !important;
  transform: none !important;
  justify-self: end !important;
  opacity: 0 !important;
}
body.app-shell .sidebar .tree-item:hover .tree-edit,
body.app-shell .sidebar .tree-item:hover .tree-add,
body.app-shell .sidebar .tree-item:focus-within .tree-edit,
body.app-shell .sidebar .tree-item:focus-within .tree-add,
body.app-shell .sidebar .tree-item.active .tree-edit,
body.app-shell .sidebar .tree-item.active .tree-add {
  opacity: 1 !important;
}
body.app-shell .sidebar .tree-node ul {
  margin-left: 10px !important;
  padding-left: 12px !important;
}

/* Folder article: same width as article, but content cards may use full body width. */
body.app-shell:not(.no-page-selected) .dc-folder-article .dc-article-body > * {
  max-width: 100% !important;
}

@media (max-width: 1280px) {
  body.app-shell:not(.no-page-selected) .dc-article-shell { width: 100% !important; }
}

/* files manager preview */
#filesOverlay.files-modal-layer{
  position:fixed;
  inset:0;
  z-index:2400;
  display:grid;
  place-items:center;
  padding:28px;
  background:rgba(12,18,34,.46);
  backdrop-filter:blur(16px);
}
.files-modal{
  width:min(1180px,calc(100vw - 56px));
  height:min(780px,calc(100vh - 56px));
  border-radius:34px;
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb,var(--accent) 13%,transparent), transparent 28%),
    linear-gradient(180deg,#fff,rgba(248,250,252,.97));
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 38px 100px rgba(15,23,42,.34);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
}
.files-head{
  min-height:86px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  padding:22px 24px 18px;
  border-bottom:1px solid rgba(31,41,55,.08);
}
.files-title{
  min-width:0;
}
.files-title .eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  color:#7a8498;
  font-size:12px;
  font-weight:790;
  margin-bottom:7px;
}
.files-title .eyebrow:before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 12%,transparent);
}
.files-title h2{
  margin:0;
  font-size:27px;
  line-height:1.05;
  letter-spacing:-.045em;
}
.files-title p{
  margin:7px 0 0;
  color:#788298;
  font-size:13px;
}
.files-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.file-head-btn{
  height:42px;
  border:1px solid rgba(31,41,55,.09);
  border-radius:15px;
  background:#fff;
  color:#4d586d;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 13px;
  font-size:13px;
  font-weight:830;
  white-space:nowrap;
}
.file-head-btn svg,
.files-close svg,
.files-search svg,
.file-card-action svg,
.file-list-action svg,
.files-nav-icon svg,
.upload-card svg,
.storage-icon svg{
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.file-head-btn svg{width:16px;height:16px}
.file-head-btn.primary{
  border:0;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 82%,#141827));
  color:#fff;
  box-shadow:0 12px 24px color-mix(in srgb,var(--accent) 22%,transparent);
}
.files-close{
  width:42px;
  height:42px;
  border:1px solid rgba(31,41,55,.09);
  border-radius:15px;
  background:#fff;
  color:#677187;
  display:grid;
  place-items:center;
}
.files-close svg{width:18px;height:18px}
.files-body{
  min-height:0;
  display:grid;
  grid-template-columns:236px minmax(0,1fr) 270px;
  gap:0;
}
.files-side{
  min-height:0;
  padding:18px;
  border-right:1px solid rgba(31,41,55,.08);
  background:linear-gradient(180deg,rgba(247,249,252,.72),rgba(255,255,255,.62));
  display:flex;
  flex-direction:column;
  gap:16px;
}
.files-nav{
  display:grid;
  gap:6px;
}
.files-nav-label{
  margin:2px 8px 4px;
  color:#8993a6;
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.files-nav-item{
  height:40px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:#667085;
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:0 8px;
  text-align:left;
  font-size:13px;
  font-weight:760;
}
.files-nav-item.active{
  background:#fff;
  color:#20283a;
  box-shadow:0 8px 18px rgba(15,23,42,.055);
}
.files-nav-icon{
  width:30px;
  height:30px;
  border-radius:12px;
  background:#f1f4f8;
  color:#768097;
  display:grid;
  place-items:center;
}
.files-nav-item.active .files-nav-icon{
  background:color-mix(in srgb,var(--accent) 12%,#fff);
  color:var(--accent);
}
.files-nav-icon svg{width:15px;height:15px}
.files-count{
  color:#97a0b2;
  font-size:11px;
  font-weight:830;
}
.upload-card{
  margin-top:auto;
  border-radius:22px;
  border:1px dashed color-mix(in srgb,var(--accent) 30%,rgba(31,41,55,.13));
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,#fff),#fff);
  padding:15px;
  color:#5a657a;
}
.upload-card .upload-icon{
  width:38px;
  height:38px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:#fff;
  box-shadow:0 10px 22px color-mix(in srgb,var(--accent) 20%,transparent);
  margin-bottom:10px;
}
.upload-card svg{width:18px;height:18px}
.upload-card b{
  display:block;
  font-size:13px;
  letter-spacing:-.02em;
}
.upload-card p{
  margin:5px 0 0;
  color:#808a9e;
  font-size:12px;
  line-height:1.4;
}
.files-main{
  min-width:0;
  min-height:0;
  padding:18px;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  gap:14px;
}
.files-toolbar{
  display:grid;
  grid-template-columns:minmax(240px,1fr) auto;
  align-items:center;
  gap:12px;
}
.files-search{
  height:44px;
  border-radius:16px;
  border:1px solid rgba(31,41,55,.08);
  background:#fff;
  color:#7a8498;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 13px;
  font-size:13px;
  box-shadow:0 8px 18px rgba(15,23,42,.035);
}
.files-search svg{width:17px;height:17px}
.files-view{
  height:44px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(31,41,55,.08);
  padding:4px;
  display:flex;
  gap:4px;
}
.files-view button{
  width:36px;
  height:34px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#8a94a8;
  display:grid;
  place-items:center;
}
.files-view button.active{
  background:color-mix(in srgb,var(--accent) 12%,#fff);
  color:var(--accent);
}
.files-view svg{
  width:16px;
  height:16px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.file-tags{
  display:flex;
  align-items:center;
  gap:8px;
  overflow:auto;
  padding-bottom:2px;
}
.file-tag{
  height:32px;
  border:1px solid rgba(31,41,55,.08);
  border-radius:999px;
  background:#fff;
  color:#707a8f;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:780;
  white-space:nowrap;
}
.file-tag.active{
  border-color:color-mix(in srgb,var(--accent) 20%,#fff);
  background:color-mix(in srgb,var(--accent) 10%,#fff);
  color:var(--accent);
}
.files-grid{
  min-height:0;
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-content:start;
  gap:12px;
  padding:1px 4px 4px 0;
}
.files-grid::-webkit-scrollbar{width:6px}
.files-grid::-webkit-scrollbar-thumb{background:rgba(31,41,55,.14);border-radius:999px}
.file-card{
  min-width:0;
  min-height:176px;
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(31,41,55,.075);
  box-shadow:0 10px 22px rgba(15,23,42,.045);
  padding:12px;
  display:grid;
  grid-template-rows:88px auto;
  gap:10px;
}
.file-preview{
  border-radius:18px;
  background:
    radial-gradient(circle at 78% 20%, color-mix(in srgb,var(--accent) 20%,transparent), transparent 28%),
    linear-gradient(135deg,#f2f5f9,#fff);
  border:1px solid rgba(31,41,55,.055);
  display:grid;
  place-items:center;
  overflow:hidden;
  color:var(--accent);
}
.file-preview.image{
  background:
    linear-gradient(135deg,rgba(124,140,255,.20),rgba(154,217,191,.20)),
    linear-gradient(135deg,#e9eef8,#fff);
}
.file-preview.video{
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.84),transparent 24%),
    linear-gradient(135deg,#1f2649,#38406c);
  color:#fff;
}
.file-preview.doc{
  background:linear-gradient(135deg,#fff,#f4f7fb);
}
.file-preview svg{
  width:30px;
  height:30px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.file-card-info{
  min-width:0;
}
.file-name-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:8px;
}
.file-name{
  min-width:0;
  color:#20283a;
  font-size:13px;
  font-weight:830;
  letter-spacing:-.02em;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.file-meta{
  margin-top:4px;
  color:#8a94a7;
  font-size:11px;
  font-weight:690;
}
.file-card-actions{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:10px;
}
.file-card-action{
  height:30px;
  min-width:30px;
  border:1px solid rgba(31,41,55,.075);
  border-radius:11px;
  background:#f8fafc;
  color:#657085;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 8px;
  font-size:11px;
  font-weight:800;
}
.file-card-action.primary{
  background:color-mix(in srgb,var(--accent) 12%,#fff);
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 18%,#fff);
}
.file-card-action svg{width:14px;height:14px}
.files-info{
  min-height:0;
  padding:18px;
  border-left:1px solid rgba(31,41,55,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.70),rgba(247,249,252,.76));
  display:flex;
  flex-direction:column;
  gap:14px;
}
.info-panel{
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(31,41,55,.075);
  box-shadow:0 10px 22px rgba(15,23,42,.045);
  padding:15px;
}
.info-panel h3{
  margin:0 0 12px;
  font-size:14px;
  letter-spacing:-.025em;
}
.storage-box{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:11px;
  align-items:center;
}
.storage-icon{
  width:38px;
  height:38px;
  border-radius:15px;
  background:color-mix(in srgb,var(--accent) 12%,#fff);
  color:var(--accent);
  display:grid;
  place-items:center;
}
.storage-icon svg{width:18px;height:18px}
.storage-box b{
  display:block;
  font-size:13px;
}
.storage-box span{
  display:block;
  margin-top:2px;
  color:#858fa3;
  font-size:12px;
}
.storage-bar{
  margin-top:13px;
  height:8px;
  border-radius:999px;
  background:#eef2f7;
  overflow:hidden;
}
.storage-bar i{
  display:block;
  height:100%;
  width:48%;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 45%,#9ad9bf));
  border-radius:999px;
}
.selected-file{
  display:grid;
  gap:10px;
}
.selected-preview{
  height:122px;
  border-radius:20px;
  background:
    radial-gradient(circle at 76% 22%, color-mix(in srgb,var(--accent) 18%,transparent), transparent 30%),
    linear-gradient(135deg,#eef2fb,#fff);
  border:1px solid rgba(31,41,55,.06);
  display:grid;
  place-items:center;
  color:var(--accent);
}
.selected-preview svg{
  width:38px;
  height:38px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.selected-meta{
  display:grid;
  gap:7px;
}
.meta-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#7d879b;
  font-size:12px;
}
.meta-line b{
  color:#30394d;
  font-size:12px;
}
.info-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:2px;
}
.info-action{
  height:36px;
  border:1px solid rgba(31,41,55,.08);
  border-radius:14px;
  background:#fff;
  color:#566176;
  font-size:12px;
  font-weight:820;
}
.info-action.primary{
  border:0;
  background:var(--accent);
  color:#fff;
}
.recent-list{
  display:grid;
  gap:8px;
}
.recent-row{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:9px;
  align-items:center;
}
.recent-icon{
  width:32px;
  height:32px;
  border-radius:12px;
  background:#f2f5f9;
  color:#7c879b;
  display:grid;
  place-items:center;
}
.recent-icon svg{
  width:15px;
  height:15px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.recent-row b{
  display:block;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#30394d;
  font-size:12px;
}
.recent-row span{
  display:block;
  margin-top:2px;
  color:#919bad;
  font-size:11px;
}
@media(max-width:1180px){
  .files-body{grid-template-columns:210px minmax(0,1fr)}
  .files-info{display:none}
  .files-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}



/* Step21 real app bindings for files manager v1 */
#filesOverlay.files-modal-layer.hidden{display:none!important}
#filesOverlay.files-modal-layer:not(.hidden){display:grid!important}
#filesOverlay.files-modal-layer{place-items:center!important;overflow:hidden!important}
.files-modal-v1{font-family:var(--font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif)}
.files-modal-v1 button,.files-modal-v1 input{font:inherit}
.files-modal-v1 .files-search input{border:0;background:transparent;outline:0;min-width:0;flex:1;height:100%;color:var(--ink);font-size:13px}
.files-modal-v1 .upload-card{border-style:dashed;text-align:left;cursor:pointer;width:100%;display:block}
.files-modal-v1 .upload-card.is-dragover{transform:translateY(-1px);border-color:var(--accent);box-shadow:0 14px 30px color-mix(in srgb,var(--accent) 18%,transparent)}
.files-modal-v1 .file-manager-stats.files-stats{min-height:34px;border:1px solid rgba(31,41,55,.08);border-radius:999px;background:#fff;color:#7a8498;display:flex;align-items:center;padding:0 12px;font-size:12px;font-weight:780;width:max-content;max-width:100%}
.files-modal-v1 .file-preview img{width:100%;height:100%;object-fit:cover;display:block}
.files-modal-v1 .file-preview video{width:100%;height:100%;object-fit:cover;display:block;border:0}
.files-modal-v1 .file-preview audio{width:calc(100% - 18px)}
.files-modal-v1 .file-preview a{color:var(--accent);font-size:12px;font-weight:820;text-decoration:none}
.files-modal-v1 .file-preview-generic{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,#fff);color:var(--accent);font-size:12px;font-weight:900;letter-spacing:.04em}
.files-modal-v1 .file-page-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files-modal-v1 .file-card{cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.files-modal-v1 .file-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(15,23,42,.08)}
.files-modal-v1 .file-card.selected{border-color:color-mix(in srgb,var(--accent) 34%,#fff);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent),0 16px 34px rgba(15,23,42,.08)}
.files-modal-v1 .file-card-action.danger{color:#c45d5d;background:#fff7f7;border-color:rgba(196,93,93,.18)}
.files-modal-v1 .file-card-action:disabled,.files-modal-v1 .info-action:disabled{opacity:.45;cursor:not-allowed}
.files-modal-v1 .files-empty-v1{grid-column:1/-1;min-height:260px;border-radius:24px;background:#fff;border:1px dashed rgba(31,41,55,.14);color:#7a8498;display:grid;place-items:center;text-align:center;padding:24px;font-size:13px;font-weight:740}
.files-modal-v1 .files-hidden-close{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
.files-modal-v1 .selected-preview.image img{width:100%;height:100%;object-fit:cover;border-radius:20px}
.files-modal-v1 .selected-preview.video video{width:100%;height:100%;object-fit:cover;border-radius:20px}
.files-modal-v1 .selected-preview audio{width:90%}
.files-modal-v1 .selected-preview a{color:var(--accent);font-size:12px;font-weight:820;text-decoration:none}
.files-modal-v1 .files-list-view{grid-template-columns:1fr!important}
.files-modal-v1 .files-list-view .file-card{min-height:auto;grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto;align-items:center}
.files-modal-v1 .files-list-view .file-preview{height:82px}
#filesOverlay .create-modal,#filesOverlay .create-form{display:contents!important}
@media(max-width:860px){
  .files-modal{width:calc(100vw - 24px);height:calc(100vh - 24px)}
  .files-body{grid-template-columns:1fr}.files-side,.files-info{display:none}.files-grid{grid-template-columns:1fr}
  .files-head{grid-template-columns:1fr;gap:12px}.files-head-actions{justify-content:flex-start;flex-wrap:wrap}
}



/* DataCaps step22 — files modal layout hard fix.
   The old modal CSS had .files-modal width/max-height/overflow with !important.
   This block overrides it with #filesOverlay specificity and restores the v1 reference layout. */

#filesOverlay.files-modal-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2400 !important;
  display: grid !important;
  place-items: center !important;
  padding: 28px !important;
  overflow: hidden !important;
  background: rgba(12,18,34,.46) !important;
  backdrop-filter: blur(16px) !important;
}

#filesOverlay.files-modal-layer.hidden {
  display: none !important;
}

#filesOverlay .files-modal.files-modal-v1 {
  width: min(1180px, calc(100vw - 56px)) !important;
  height: min(780px, calc(100vh - 56px)) !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 620px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 28%),
    linear-gradient(180deg,#fff,rgba(248,250,252,.97)) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow: 0 38px 100px rgba(15,23,42,.34) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0,1fr) !important;
}

#filesOverlay .files-modal-v1 .files-head {
  min-height: 86px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 20px !important;
  align-items: center !important;
  padding: 22px 24px 18px !important;
  border-bottom: 1px solid rgba(31,41,55,.08) !important;
}

#filesOverlay .files-modal-v1 .files-title h2 {
  margin: 0 !important;
  font-size: 27px !important;
  line-height: 1.05 !important;
  letter-spacing: -.045em !important;
  color: #151827 !important;
}

#filesOverlay .files-modal-v1 .files-title p {
  margin: 7px 0 0 !important;
  max-width: 640px !important;
  color: #788298 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

#filesOverlay .files-modal-v1 .files-head-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: max-content !important;
}

#filesOverlay .files-modal-v1 .file-head-btn,
#filesOverlay .files-modal-v1 .files-close {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 15px !important;
  white-space: nowrap !important;
}

#filesOverlay .files-modal-v1 .files-body {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 236px minmax(0,1fr) 270px !important;
  gap: 0 !important;
  overflow: hidden !important;
}

#filesOverlay .files-modal-v1 .files-side {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 18px !important;
  border-right: 1px solid rgba(31,41,55,.08) !important;
  background: linear-gradient(180deg,rgba(247,249,252,.72),rgba(255,255,255,.62)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

#filesOverlay .files-modal-v1 .files-nav {
  display: grid !important;
  gap: 6px !important;
}

#filesOverlay .files-modal-v1 .files-nav-item {
  height: 40px !important;
  min-height: 40px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #667085 !important;
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

#filesOverlay .files-modal-v1 .files-nav-item.active {
  background: #fff !important;
  color: #20283a !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.055) !important;
}

#filesOverlay .files-modal-v1 .files-main {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 18px !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0,1fr) !important;
  gap: 12px !important;
  background: rgba(255,255,255,.25) !important;
}

#filesOverlay .files-modal-v1 .files-toolbar {
  display: grid !important;
  grid-template-columns: minmax(260px,1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

#filesOverlay .files-modal-v1 .files-search {
  min-width: 0 !important;
  height: 44px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

#filesOverlay .files-modal-v1 .files-search input {
  min-width: 0 !important;
  width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
}

#filesOverlay .files-modal-v1 .file-tags {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 0 2px !important;
  scrollbar-width: none !important;
}

#filesOverlay .files-modal-v1 .file-tags::-webkit-scrollbar {
  display: none !important;
}

#filesOverlay .files-modal-v1 .file-manager-stats.files-stats {
  min-height: 32px !important;
  width: max-content !important;
  max-width: 100% !important;
  align-self: start !important;
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(31,41,55,.08) !important;
  color: #7a8498 !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

#filesOverlay .files-modal-v1 .files-grid {
  min-height: 0 !important;
  height: 100% !important;
  overflow: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  align-content: start !important;
  gap: 12px !important;
  padding: 1px 4px 4px 0 !important;
}

#filesOverlay .files-modal-v1 .files-grid.files-list-view {
  grid-template-columns: 1fr !important;
}

#filesOverlay .files-modal-v1 .files-empty-v1 {
  grid-column: 1 / -1 !important;
  min-height: 100% !important;
  height: 100% !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 30%),
    #fff !important;
  border: 1px dashed rgba(31,41,55,.16) !important;
  color: #7a8498 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: center !important;
  padding: 30px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 720 !important;
}

#filesOverlay .files-modal-v1 .files-empty-v1::before {
  content: '' !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(currentColor,currentColor) 16px 16px / 16px 2px no-repeat,
    linear-gradient(currentColor,currentColor) 16px 23px / 16px 2px no-repeat,
    linear-gradient(currentColor,currentColor) 16px 30px / 10px 2px no-repeat,
    color-mix(in srgb, var(--accent) 12%, #fff) !important;
  color: var(--accent) !important;
  margin-bottom: 8px !important;
}

#filesOverlay .files-modal-v1 .files-empty-v1 b {
  color: #30394d !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

#filesOverlay .files-modal-v1 .files-empty-v1 span {
  max-width: 360px !important;
  color: #7a8498 !important;
}

#filesOverlay .files-modal-v1 .file-card {
  min-width: 0 !important;
  min-height: 176px !important;
  border-radius: 24px !important;
  background: #fff !important;
  border: 1px solid rgba(31,41,55,.075) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.045) !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-rows: 88px auto !important;
  gap: 10px !important;
}

#filesOverlay .files-modal-v1 .files-list-view .file-card {
  min-height: auto !important;
  grid-template-columns: 120px minmax(0,1fr) !important;
  grid-template-rows: auto !important;
}

#filesOverlay .files-modal-v1 .files-info {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 18px !important;
  border-left: 1px solid rgba(31,41,55,.08) !important;
  background: linear-gradient(180deg,rgba(255,255,255,.70),rgba(247,249,252,.76)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

#filesOverlay .files-modal-v1 .info-panel {
  border-radius: 24px !important;
  background: #fff !important;
  border: 1px solid rgba(31,41,55,.075) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.045) !important;
  padding: 15px !important;
}

#filesOverlay .files-modal-v1 .selected-preview {
  height: 122px !important;
  border-radius: 20px !important;
}

#filesOverlay .files-modal-v1 .upload-card {
  margin-top: auto !important;
  border-radius: 22px !important;
  border: 1px dashed color-mix(in srgb,var(--accent) 30%,rgba(31,41,55,.13)) !important;
  background: linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,#fff),#fff) !important;
  padding: 15px !important;
  color: #5a657a !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

@media (max-width: 1180px) {
  #filesOverlay .files-modal.files-modal-v1 {
    width: calc(100vw - 24px) !important;
    height: calc(100vh - 24px) !important;
    min-height: 0 !important;
  }
  #filesOverlay .files-modal-v1 .files-body {
    grid-template-columns: 210px minmax(0,1fr) !important;
  }
  #filesOverlay .files-modal-v1 .files-info {
    display: none !important;
  }
  #filesOverlay .files-modal-v1 .files-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width: 760px) {
  #filesOverlay.files-modal-layer {
    padding: 10px !important;
    align-items: start !important;
  }
  #filesOverlay .files-modal.files-modal-v1 {
    width: calc(100vw - 20px) !important;
    height: calc(100vh - 20px) !important;
    border-radius: 26px !important;
  }
  #filesOverlay .files-modal-v1 .files-head {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
  }
  #filesOverlay .files-modal-v1 .files-head-actions {
    justify-content: start !important;
    overflow-x: auto !important;
  }
  #filesOverlay .files-modal-v1 .files-body {
    grid-template-columns: 1fr !important;
  }
  #filesOverlay .files-modal-v1 .files-side {
    display: none !important;
  }
  #filesOverlay .files-modal-v1 .files-grid {
    grid-template-columns: 1fr !important;
  }
}

/* DataCaps step23 — notifications above modal blur.
   Keep toast stack in the topmost visual layer when files/trash/properties modals are open. */
:root {
  --dc-toast-z: 2147483000;
}

#toastStack.toast-stack,
body > #toastStack.toast-stack {
  position: fixed !important;
  z-index: var(--dc-toast-z) !important;
  right: 24px !important;
  bottom: 24px !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: min(470px, calc(100vw - 32px)) !important;
  display: grid !important;
  justify-items: end !important;
  gap: 10px !important;
  pointer-events: none !important;
  isolation: isolate !important;
  contain: layout style !important;
}

#toastStack.toast-stack .toast {
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(226,232,240,.92) !important;
  box-shadow:
    0 28px 80px rgba(15,23,42,.26),
    0 0 0 1px rgba(255,255,255,.68) inset !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

/* Modals stay below notifications. These values are intentionally lower than --dc-toast-z. */
.modal-overlay,
.create-overlay,
.properties-overlay,
#filesOverlay.files-modal-layer,
#trashOverlay,
#propertiesOverlay,
#importExportOverlay {
  z-index: 2400 !important;
}

.media-resize-toolbar {
  z-index: 2600 !important;
}

@media (max-width: 560px) {
  #toastStack.toast-stack,
  body > #toastStack.toast-stack {
    right: 16px !important;
    bottom: 16px !important;
    width: calc(100vw - 32px) !important;
  }
}

/* DataCaps step24 — button hover feedback + right column clipping fix. */
:root {
  --dc-motion-fast: 140ms;
  --dc-motion: 180ms;
  --dc-hover-shadow: 0 14px 30px rgba(15,23,42,.12);
  --dc-hover-shadow-soft: 0 10px 22px rgba(15,23,42,.09);
}

/* Consistent interactive feedback. */
body.app-shell :is(
  button,
  .icon-btn,
  .dc-action-btn,
  .topbar-action-button,
  .sidebar-primary,
  .sidebar-collapse,
  .tree-toggle,
  .tree-action,
  .tree-edit,
  .tree-add,
  .workspace-card,
  .quick,
  .format-btn,
  .page-menu-btn,
  .panel-title button,
  #historyRefreshBtn,
  .history-preview-btn,
  .history-restore-btn,
  .file-head-btn,
  .files-close,
  .files-nav-item,
  .file-tag,
  .file-card-action,
  .info-action,
  .modal-close,
  .button-like
) {
  transition:
    transform var(--dc-motion) cubic-bezier(.2,.8,.2,1),
    box-shadow var(--dc-motion) ease,
    border-color var(--dc-motion) ease,
    background var(--dc-motion) ease,
    color var(--dc-motion) ease,
    opacity var(--dc-motion-fast) ease !important;
}

body.app-shell :is(
  .icon-btn,
  .dc-action-btn,
  .topbar-action-button,
  .sidebar-primary,
  .sidebar-collapse,
  .tree-action,
  .tree-edit,
  .tree-add,
  .workspace-card,
  .quick,
  .format-btn,
  .page-menu-btn,
  .panel-title button,
  #historyRefreshBtn,
  .history-preview-btn,
  .history-restore-btn,
  .file-head-btn,
  .files-close,
  .files-nav-item,
  .file-tag,
  .file-card-action,
  .info-action,
  .button-like
):hover:not(:disabled) {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--accent) 28%, rgba(31,41,55,.10)) !important;
  box-shadow: var(--dc-hover-shadow-soft) !important;
}

body.app-shell :is(
  .workspace-card,
  .quick,
  .panel-card .history-preview-btn,
  .panel-card .history-restore-btn,
  .file-card-action,
  .files-nav-item,
  .file-tag
):hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 7%, #fff) !important;
  color: color-mix(in srgb, var(--accent) 72%, #202638) !important;
}

body.app-shell :is(
  .sidebar-primary,
  .icon-btn.primary,
  .dc-action-btn.primary,
  .format-btn.accent,
  .history-restore-btn,
  .file-head-btn.primary,
  .file-card-action.primary,
  .info-action.primary
):hover:not(:disabled) {
  transform: translateY(-2px) scale(1.015) !important;
  box-shadow: var(--dc-hover-shadow) !important;
  filter: saturate(1.06) brightness(1.01) !important;
}

body.app-shell :is(button, .icon-btn, .dc-action-btn, .topbar-action-button, .quick, .workspace-card, .format-btn, .file-card-action):active:not(:disabled) {
  transform: translateY(0) scale(.985) !important;
  box-shadow: 0 5px 14px rgba(15,23,42,.08) !important;
}

body.app-shell :is(button, a, .quick, .workspace-card, .format-btn, .icon-btn, .dc-action-btn, .file-card-action, .history-preview-btn, .history-restore-btn):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, #fff) !important;
  outline-offset: 3px !important;
}

/* More obvious feedback for right-column cards. */
body.app-shell .right-panel .quick:hover:not(:disabled) .qicon,
body.app-shell .right-panel .activity-row:hover .activity-dot {
  transform: scale(1.06) !important;
  background: color-mix(in srgb, var(--accent) 18%, #fff) !important;
}

body.app-shell .right-panel .qicon,
body.app-shell .right-panel .activity-dot {
  transition: transform var(--dc-motion) cubic-bezier(.2,.8,.2,1), background var(--dc-motion) ease, color var(--dc-motion) ease !important;
}

/* Right side panel: do not crop quick actions/history when reading an article. */
body.app-shell .board {
  min-height: 0 !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

body.app-shell .right-panel {
  min-width: 0 !important;
  max-width: 340px !important;
  height: calc(100vh - 112px) !important;
  max-height: calc(100vh - 112px) !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  padding: 0 6px 26px 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(31,41,55,.18) transparent !important;
}

body.app-shell .right-panel::-webkit-scrollbar { width: 6px !important; }
body.app-shell .right-panel::-webkit-scrollbar-thumb {
  background: rgba(31,41,55,.16) !important;
  border-radius: 999px !important;
}

body.app-shell .right-panel .panel-card,
body.app-shell .history-panel {
  flex: 0 0 auto !important;
  overflow: visible !important;
}

body.app-shell .right-panel .quick-grid {
  overflow: visible !important;
}

body.app-shell .history-list {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

body.app-shell .history-item.history-card,
body.app-shell .history-card,
body.app-shell .history-item {
  overflow: visible !important;
}

body.app-shell .history-item-actions {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 8px !important;
  width: 100% !important;
}

body.app-shell .history-preview-btn,
body.app-shell .history-restore-btn {
  min-width: 0 !important;
  width: 100% !important;
  justify-content: center !important;
}

/* Keep hover motion accessible. */
@media (prefers-reduced-motion: reduce) {
  body.app-shell :is(button, a, .icon-btn, .dc-action-btn, .topbar-action-button, .quick, .workspace-card, .format-btn, .file-card-action) {
    transition: none !important;
  }
  body.app-shell :is(button, .icon-btn, .dc-action-btn, .topbar-action-button, .quick, .workspace-card, .format-btn, .file-card-action):hover:not(:disabled),
  body.app-shell :is(button, .icon-btn, .dc-action-btn, .topbar-action-button, .quick, .workspace-card, .format-btn, .file-card-action):active:not(:disabled) {
    transform: none !important;
  }
}

@media (max-width: 1280px) {
  body.app-shell .right-panel {
    display: none !important;
  }
}

/* DataCaps step25 — right panel scroll containment fix.
   The previous hover patch gave the right column a viewport-based height. In the real
   shell this could overflow below the visible board, so the Activity card became
   unreachable. Now the board owns the height and the right column scrolls inside it. */
body.app-shell .workspace {
  min-height: 0 !important;
  overflow: hidden !important;
}

body.app-shell .board {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

body.app-shell .main-scroll {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.app-shell .right-panel {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 8px 92px 0 !important;
  box-sizing: border-box !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(31,41,55,.20) transparent !important;
}

body.app-shell .right-panel::-webkit-scrollbar { width: 7px !important; }
body.app-shell .right-panel::-webkit-scrollbar-track { background: transparent !important; }
body.app-shell .right-panel::-webkit-scrollbar-thumb {
  background: rgba(31,41,55,.18) !important;
  border-radius: 999px !important;
}

body.app-shell .right-panel .panel-card,
body.app-shell .right-panel .history-panel {
  flex: 0 0 auto !important;
  overflow: visible !important;
}

body.app-shell .right-panel > :last-child {
  margin-bottom: 20px !important;
}

/* Keep history buttons visible but prevent the card from forcing horizontal scroll. */
body.app-shell .right-panel .history-item,
body.app-shell .right-panel .history-card,
body.app-shell .right-panel .history-item.history-card {
  max-width: 100% !important;
  overflow: visible !important;
}

body.app-shell .right-panel .history-item-actions {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  width: 100% !important;
}

body.app-shell .right-panel .history-preview-btn,
body.app-shell .right-panel .history-restore-btn {
  min-width: 0 !important;
  width: 100% !important;
  white-space: nowrap !important;
}

/* Hover transforms should not make the whole right panel jump or clip vertically. */
body.app-shell .right-panel .panel-card:hover,
body.app-shell .right-panel .history-panel:hover {
  transform: none !important;
}

@media (max-width: 1280px) {
  body.app-shell .right-panel {
    display: none !important;
  }
}



/* DataCaps step26 — move activity into workspace and make history scroll internally. */
:root {
  --dc-right-panel-gap: 14px;
}

/* The right side contains quick actions + history only. It should not scroll as one long column. */
body.app-shell .right-panel.history-panel {
  min-height: 0 !important;
  max-height: calc(100vh - var(--dc-pad, 22px) * 2 - var(--dc-topbar-space, 90px)) !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: var(--dc-right-panel-gap) !important;
  padding-bottom: 0 !important;
}

body.app-shell .right-panel.history-panel > .panel-card {
  min-height: 0 !important;
}

body.app-shell .right-panel.history-panel > .panel-card:not(.history-card-panel) {
  overflow: visible !important;
}

body.app-shell .history-card-panel {
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

body.app-shell .history-card-panel .panel-title {
  flex: 0 0 auto !important;
  margin-bottom: 12px !important;
}

body.app-shell #historyList.history-list,
body.app-shell .history-card-panel .history-list {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 4px 4px 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(31,41,55,.18) transparent !important;
}

body.app-shell #historyList.history-list::-webkit-scrollbar {
  width: 6px !important;
}
body.app-shell #historyList.history-list::-webkit-scrollbar-thumb {
  background: rgba(31,41,55,.16) !important;
  border-radius: 999px !important;
}

/* Activity is now part of the workspace, not the right column. */
body.app-shell .workspace-activity-strip {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 16px !important;
}

body.app-shell .dc-article-shell .workspace-activity-strip,
body.app-shell .dc-folder-article .workspace-activity-strip {
  margin: 18px 0 0 !important;
  max-width: 680px !important;
}

body.app-shell .workspace-activity-item {
  min-height: 74px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(31,41,55,.075) !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.045) !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
}

body.app-shell .workspace-activity-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 15px !important;
  background: color-mix(in srgb, var(--accent, #7c8cff) 12%, #fff) !important;
  color: var(--accent, #7c8cff) !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 900 !important;
  font-size: 18px !important;
}

body.app-shell .workspace-activity-item b {
  display: block !important;
  color: #1f2535 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
}

body.app-shell .workspace-activity-item span:not(.workspace-activity-icon) {
  display: block !important;
  color: #7b8498 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body.app-shell .workspace-activity-item:hover {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--accent, #7c8cff) 22%, #fff) !important;
  box-shadow: 0 14px 30px rgba(15,23,42,.07) !important;
}

@media (max-width: 1280px) {
  body.app-shell .workspace-activity-strip {
    grid-template-columns: 1fr !important;
  }
}


/* DataCaps step27 — right panel management + ghost status text. */
body.app-shell .management-panel .panel-title h3 {
  letter-spacing: -.035em !important;
}

body.app-shell .management-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.app-shell .management-action {
  min-height: 72px !important;
  height: auto !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-rows: 30px auto !important;
  align-content: space-between !important;
  text-align: left !important;
}

body.app-shell .management-action b {
  color: #1f2535 !important;
  font-size: 12px !important;
  line-height: 1.18 !important;
  white-space: normal !important;
}

body.app-shell .management-action .qicon {
  margin: 0 !important;
  transition: transform .18s ease, background .18s ease, color .18s ease !important;
}

body.app-shell .management-action:hover:not(:disabled) .qicon {
  transform: scale(1.06) !important;
  background: color-mix(in srgb, var(--accent, #7c8cff) 18%, #fff) !important;
}

body.app-shell .management-action.danger .qicon {
  background: #fff1f2 !important;
  color: #e05d68 !important;
}

body.app-shell .management-action.danger:hover:not(:disabled) {
  border-color: rgba(224,93,104,.24) !important;
  box-shadow: 0 14px 28px rgba(224,93,104,.10) !important;
}

body.app-shell .management-action.danger:hover:not(:disabled) .qicon {
  background: #ffe4e6 !important;
  color: #cf3f4c !important;
}

/* The old activity cards are intentionally replaced by one ghost status line in the workspace. */
body.app-shell .workspace-status-ghost {
  margin: 0 0 16px !important;
  padding: 0 4px !important;
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #7b8498 !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  font-weight: 640 !important;
  opacity: .88 !important;
}

body.app-shell .dc-article-shell .workspace-status-ghost,
body.app-shell .dc-folder-article .workspace-status-ghost {
  margin: 16px 0 0 !important;
}

body.app-shell .workspace-status-ghost strong {
  color: #5c667b !important;
  font-weight: 820 !important;
}

body.app-shell .workspace-status-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  flex: 0 0 8px !important;
  background: #9ad9bf !important;
  box-shadow: 0 0 0 5px rgba(154,217,191,.18) !important;
}

body.app-shell .workspace-status-ghost.is-warning .workspace-status-dot {
  background: #f59e0b !important;
  box-shadow: 0 0 0 5px rgba(245,158,11,.16) !important;
}

body.app-shell .workspace-status-ghost.is-warning strong {
  color: #9a5b05 !important;
}

/* Keep right column predictable: management stays compact, history scrolls inside its own card. */
body.app-shell .right-panel.history-panel {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

body.app-shell .history-card-panel {
  min-height: 0 !important;
}

body.app-shell #historyList.history-list {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-right: 4px !important;
}

@media (max-width: 1280px) {
  body.app-shell .management-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1160px) {
  body.app-shell .management-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* DataCaps step28 — edit action is explicit, no instant autosave + cleaner edit layout. */
body.app-shell .management-action {
  user-select: none;
}
body.app-shell .management-action[disabled] {
  opacity: .48 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
body.app-shell .management-action.is-save-action {
  border-color: color-mix(in srgb, var(--accent) 28%, #fff) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, #fff), #fff) !important;
}
body.app-shell .management-action.is-save-action .qicon {
  background: var(--accent) !important;
  color: #fff !important;
}
body.app-shell .management-action.is-save-action b {
  color: var(--accent) !important;
}

/* Actions are now in the right management panel, so the old inline toolbar must not reappear and distort edit mode. */
body.app-shell.is-editing .page-card-topline,
body.app-shell.is-editing .editor-actions,
body.app-shell.is-editing #saveBtn {
  display: none !important;
}
body.app-shell.is-editing .main-scroll {
  min-height: 0 !important;
  overflow: auto !important;
  padding: 0 2px 4px !important;
}
body.app-shell.is-editing .page-work-card {
  display: block !important;
  width: 100% !important;
  min-height: 100% !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.app-shell.is-editing #pageView,
body.app-shell.is-editing #editorModeHint {
  display: none !important;
}
body.app-shell.is-editing #status {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  margin: 0 0 10px !important;
  padding: 0 4px !important;
  color: #7a8498 !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  background: transparent !important;
  border: 0 !important;
}
body.app-shell.is-editing #status::before {
  content: '' !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent) !important;
  flex: 0 0 auto !important;
}
body.app-shell.is-editing #editorShell {
  display: block !important;
  width: 100% !important;
  min-height: calc(100vh - 132px) !important;
  margin: 0 !important;
  border-radius: 34px !important;
  border: 1px solid rgba(255,255,255,.86) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: var(--shadow-soft) !important;
  overflow: hidden !important;
}
body.app-shell.is-editing .title-input {
  min-height: 82px !important;
  padding: 0 30px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(31,41,55,.08) !important;
  background: linear-gradient(180deg,#fff,rgba(248,250,252,.84)) !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: -.06em !important;
  color: #111827 !important;
}
body.app-shell.is-editing #toolbar.editor-toolbar,
body.app-shell.is-editing .ql-toolbar.editor-toolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
  min-height: 56px !important;
  height: auto !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(31,41,55,.08) !important;
  background: rgba(248,250,252,.96) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
}
body.app-shell.is-editing #editor.editor,
body.app-shell.is-editing .editor.ql-container.ql-snow {
  min-height: calc(100vh - 285px) !important;
  border: 0 !important;
  background: #fff !important;
}
body.app-shell.is-editing .ql-editor {
  min-height: calc(100vh - 285px) !important;
  padding: 28px 34px 42px !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
  color: #263044 !important;
}

/* Status line in view mode: clear ghost text, not a separate activity card. */
body.app-shell .workspace-status-ghost {
  margin: 0 !important;
  min-height: 38px !important;
  padding: 0 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #8590a5 !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}
body.app-shell .workspace-status-ghost strong {
  color: #647086 !important;
  font-weight: 850 !important;
}
body.app-shell .workspace-status-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #9ad9bf !important;
  box-shadow: 0 0 0 5px rgba(154,217,191,.18) !important;
  flex: 0 0 auto !important;
}
body.app-shell .workspace-status-ghost.is-warning .workspace-status-dot {
  background: #f59e0b !important;
  box-shadow: 0 0 0 5px rgba(245,158,11,.16) !important;
}

/* Step29 — management buttons redesign + home create menu. */
body.app-shell .home-create-panel {
  display: none !important;
}

body.app-shell.no-page-selected .home-create-panel {
  display: block !important;
}

body.app-shell.no-page-selected .management-panel {
  display: none !important;
}

body.app-shell .management-panel .panel-title,
body.app-shell .home-create-panel .panel-title {
  margin-bottom: 14px !important;
}

body.app-shell .management-panel .panel-title span,
body.app-shell .home-create-panel .panel-title span {
  display: none !important;
}

body.app-shell .management-list {
  display: grid !important;
  gap: 8px !important;
}

body.app-shell .management-list .management-action {
  min-height: 54px !important;
  width: 100% !important;
  padding: 9px 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(31,41,55,.075) !important;
  background: rgba(255,255,255,.92) !important;
  color: #202638 !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: left !important;
  box-shadow: 0 7px 16px rgba(15,23,42,.035) !important;
  cursor: pointer !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--accent) 22%, #fff) !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.075) !important;
  background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--accent) 5%, #fff)) !important;
}

body.app-shell .management-list .management-action:active:not(:disabled) {
  transform: translateY(0) scale(.99) !important;
}

body.app-shell .management-list .management-action:disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
}

body.app-shell .management-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  background: color-mix(in srgb, var(--accent) 12%, #fff) !important;
  color: var(--accent) !important;
}

body.app-shell .management-icon svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.app-shell .management-action b {
  display: block !important;
  font-size: 12.5px !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  color: #202638 !important;
}

body.app-shell .management-action small {
  display: block !important;
  margin-top: 3px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #8993a8 !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 720 !important;
}

body.app-shell .management-action.is-editing-action {
  border-color: color-mix(in srgb, var(--accent) 24%, #fff) !important;
  background: color-mix(in srgb, var(--accent) 7%, #fff) !important;
}

body.app-shell .management-action.danger {
  border-color: rgba(255,104,118,.18) !important;
}

body.app-shell .management-action.danger .management-icon {
  background: #fff0f2 !important;
  color: #ef5f6f !important;
}

body.app-shell .management-action.danger:hover:not(:disabled) {
  border-color: rgba(255,104,118,.36) !important;
  background: linear-gradient(135deg, #fff, #fff7f8) !important;
}

/* Home page: return a creation menu to the right column. */
body.app-shell .home-create-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.app-shell .home-create-grid .create-action {
  min-height: 82px !important;
  border-radius: 22px !important;
  background: #fff !important;
  border: 1px solid rgba(31,41,55,.075) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.035) !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease !important;
}

body.app-shell .home-create-grid .create-action:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--accent) 22%, #fff) !important;
  background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--accent) 5%, #fff)) !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.075) !important;
}

body.app-shell .home-create-grid .create-action:active:not(:disabled) {
  transform: translateY(0) scale(.99) !important;
}

body.app-shell .home-create-grid .create-action .qicon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 14px !important;
  margin-bottom: 10px !important;
}

body.app-shell .home-create-grid .create-action .qicon svg {
  width: 17px !important;
  height: 17px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.app-shell .home-create-grid .create-action b {
  font-size: 12.5px !important;
  letter-spacing: -.02em !important;
}

@media (max-width: 1280px) {
  body.app-shell .management-list .management-action {
    min-height: 50px !important;
  }
}



/* DataCaps step30 — clean home lower block + article status alignment. */
/* 2) Article header no longer uses duplicate status pills. */
body.app-shell:not(.no-page-selected) .dc-article-meta,
body.app-shell:not(.no-page-selected) .page-badges {
  display: none !important;
}

/* 3) Page status is a ghost line inside the article header, aligned with “Статья / Папка”. */
body.app-shell:not(.no-page-selected) .dc-article-head .dc-article-status-row {
  margin-top: 18px !important;
  display: flex !important;
  align-items: center !important;
}

body.app-shell:not(.no-page-selected) .dc-article-head .workspace-status-ghost {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #7b8498 !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  font-weight: 640 !important;
}

body.app-shell:not(.no-page-selected) .dc-article-head .workspace-status-ghost strong {
  color: #5c667b !important;
  font-weight: 820 !important;
}

body.app-shell:not(.no-page-selected) .dc-article-head .workspace-status-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  flex: 0 0 8px !important;
  background: #9ad9bf !important;
  box-shadow: 0 0 0 5px rgba(154,217,191,.18) !important;
}

body.app-shell:not(.no-page-selected) .dc-article-head .workspace-status-ghost.is-warning .workspace-status-dot {
  background: #f59e0b !important;
  box-shadow: 0 0 0 5px rgba(245,158,11,.16) !important;
}

/* Keep the article body visually separated after status moved into the header. */
body.app-shell:not(.no-page-selected) .dc-article-head {
  padding-bottom: 28px !important;
}

body.app-shell:not(.no-page-selected) .dc-article-body {
  padding-top: 42px !important;
}


/* DataCaps step31 — cleaner management buttons. */
body.app-shell .management-panel {
  padding: 16px !important;
}

body.app-shell .management-panel .panel-title {
  margin-bottom: 12px !important;
}

body.app-shell .management-panel .panel-title h3 {
  font-size: 15px !important;
  line-height: 1.15 !important;
  letter-spacing: -.03em !important;
}

body.app-shell .management-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.app-shell .management-list .management-action {
  width: 100% !important;
  min-height: 74px !important;
  height: 74px !important;
  padding: 12px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(31,41,55,.08) !important;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 38%),
    #fff !important;
  color: #202638 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 32px minmax(0, 1fr) !important;
  align-items: start !important;
  justify-items: start !important;
  gap: 7px !important;
  text-align: left !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.04) !important;
  cursor: pointer !important;
  transform: translateZ(0) !important;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--accent) 24%, #fff) !important;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
    linear-gradient(135deg, #fff, color-mix(in srgb, var(--accent) 5%, #fff)) !important;
  box-shadow: 0 16px 30px rgba(15,23,42,.085) !important;
}

body.app-shell .management-list .management-action:active:not(:disabled) {
  transform: translateY(0) scale(.99) !important;
  box-shadow: 0 7px 14px rgba(15,23,42,.055) !important;
}

body.app-shell .management-list .management-action:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent) !important;
  outline-offset: 3px !important;
}

body.app-shell .management-action .management-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 13px !important;
  display: grid !important;
  place-items: center !important;
  background: color-mix(in srgb, var(--accent) 11%, #fff) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

body.app-shell .management-action:hover:not(:disabled) .management-icon {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}

body.app-shell .management-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.app-shell .management-action > span:last-child {
  min-width: 0 !important;
  width: 100% !important;
  display: block !important;
}

body.app-shell .management-action b {
  display: block !important;
  max-width: 100% !important;
  color: #202638 !important;
  font-size: 12.5px !important;
  line-height: 1.14 !important;
  letter-spacing: -.025em !important;
  font-weight: 850 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

body.app-shell .management-action small {
  display: none !important;
}

body.app-shell .management-action.is-editing-action,
body.app-shell .management-action.is-save-action {
  border-color: color-mix(in srgb, var(--accent) 22%, #fff) !important;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 42%),
    color-mix(in srgb, var(--accent) 5%, #fff) !important;
}

body.app-shell .management-action.is-editing-action .management-icon,
body.app-shell .management-action.is-save-action .management-icon {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}

body.app-shell .management-action.is-editing-action b,
body.app-shell .management-action.is-save-action b {
  color: var(--accent) !important;
}

body.app-shell .management-action.danger {
  border-color: rgba(255,104,118,.18) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,104,118,.08), transparent 42%),
    #fff !important;
}

body.app-shell .management-action.danger .management-icon {
  background: #fff0f2 !important;
  color: #ef5f6f !important;
}

body.app-shell .management-action.danger:hover:not(:disabled) {
  border-color: rgba(255,104,118,.34) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,104,118,.14), transparent 42%),
    linear-gradient(135deg, #fff, #fff8f9) !important;
}

body.app-shell .management-action.danger:hover:not(:disabled) .management-icon {
  background: #ef5f6f !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(239,95,111,.18) !important;
}

@media (max-width: 1280px) {
  body.app-shell .management-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-shell .management-list .management-action {
    min-height: 70px !important;
    height: 70px !important;
    padding: 11px !important;
  }
}


/* DataCaps step32 — management panel as a clean command list.
   Fixes the cramped 2x3 tiles: labels no longer wrap or overlap, actions read as a menu. */
body.app-shell .management-panel {
  padding: 16px !important;
  border-radius: 26px !important;
}

body.app-shell .management-panel .panel-title {
  margin: 0 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

body.app-shell .management-panel .panel-title h3 {
  font-size: 15px !important;
  line-height: 1.15 !important;
  letter-spacing: -.03em !important;
}

body.app-shell .management-panel .panel-title span {
  display: none !important;
}

body.app-shell .management-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}

body.app-shell .management-list .management-action {
  width: 100% !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 7px 9px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(31,41,55,.075) !important;
  background: rgba(255,255,255,.92) !important;
  color: #202638 !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0,1fr) 18px !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 10px !important;
  text-align: left !important;
  box-shadow: 0 7px 16px rgba(15,23,42,.035) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease !important;
}

body.app-shell .management-list .management-action::after {
  content: '›' !important;
  display: grid !important;
  place-items: center !important;
  color: #a3acbd !important;
  font-size: 20px !important;
  line-height: 1 !important;
  transition: transform .16s ease, color .16s ease !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--accent) 25%, #fff) !important;
  background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--accent) 5%, #fff)) !important;
  box-shadow: 0 12px 24px rgba(15,23,42,.075) !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled)::after {
  transform: translateX(2px) !important;
  color: var(--accent) !important;
}

body.app-shell .management-list .management-action:active:not(:disabled) {
  transform: translateY(0) scale(.99) !important;
  box-shadow: 0 6px 12px rgba(15,23,42,.045) !important;
}

body.app-shell .management-list .management-action:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent) !important;
  outline-offset: 3px !important;
}

body.app-shell .management-action .management-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 13px !important;
  display: grid !important;
  place-items: center !important;
  background: color-mix(in srgb, var(--accent) 11%, #fff) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

body.app-shell .management-action:hover:not(:disabled) .management-icon {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 9px 18px color-mix(in srgb, var(--accent) 20%, transparent) !important;
}

body.app-shell .management-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.app-shell .management-action > span:last-child {
  min-width: 0 !important;
  width: 100% !important;
  display: block !important;
  align-self: center !important;
}

body.app-shell .management-action b {
  display: block !important;
  max-width: 100% !important;
  color: #202638 !important;
  font-size: 13px !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
  font-weight: 860 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.app-shell .management-action small {
  display: none !important;
}

body.app-shell .management-action.is-editing-action,
body.app-shell .management-action.is-save-action {
  border-color: color-mix(in srgb, var(--accent) 25%, #fff) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, #fff), #fff) !important;
}

body.app-shell .management-action.is-editing-action .management-icon,
body.app-shell .management-action.is-save-action .management-icon {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 9px 18px color-mix(in srgb, var(--accent) 20%, transparent) !important;
}

body.app-shell .management-action.is-editing-action b,
body.app-shell .management-action.is-save-action b {
  color: var(--accent) !important;
}

body.app-shell .management-action.danger {
  border-color: rgba(255,104,118,.18) !important;
  background: #fff !important;
}

body.app-shell .management-action.danger .management-icon {
  background: #fff0f2 !important;
  color: #ef5f6f !important;
}

body.app-shell .management-action.danger::after {
  color: rgba(239,95,111,.42) !important;
}

body.app-shell .management-action.danger:hover:not(:disabled) {
  border-color: rgba(239,95,111,.32) !important;
  background: linear-gradient(135deg, #fff, #fff8f9) !important;
}

body.app-shell .management-action.danger:hover:not(:disabled) .management-icon {
  background: #ef5f6f !important;
  color: #fff !important;
  box-shadow: 0 9px 18px rgba(239,95,111,.18) !important;
}

body.app-shell .management-action.danger:hover:not(:disabled)::after {
  color: #ef5f6f !important;
}

body.app-shell .management-action[disabled] {
  cursor: default !important;
  opacity: .52 !important;
  transform: none !important;
  box-shadow: none !important;
}

body.app-shell .management-action[disabled]::after {
  opacity: .35 !important;
}

/* step37 — settings overlay over current workspace */
.settings-modal-layer {
  z-index: 1180 !important;
  padding: 28px !important;
  background: rgba(12, 18, 34, .46) !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
}

.settings-modal {
  width: min(1120px, calc(100vw - 56px)) !important;
  height: min(820px, calc(100vh - 56px)) !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow: 0 38px 100px rgba(15,23,42,.34) !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.settings-modal-head {
  min-height: 88px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 20px !important;
  align-items: center !important;
  padding: 22px 24px 18px !important;
  border-bottom: 1px solid rgba(31,41,55,.08) !important;
}

.settings-modal-title { min-width: 0 !important; }
.settings-modal-title .eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #7a8498 !important;
  font-size: 12px !important;
  font-weight: 790 !important;
  margin-bottom: 7px !important;
}
.settings-modal-title .eyebrow::before {
  content: '' !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent) !important;
}
.settings-modal-title h2 {
  margin: 0 !important;
  color: #151827 !important;
  font-size: 28px !important;
  line-height: 1.05 !important;
  letter-spacing: -.05em !important;
  font-weight: 900 !important;
}
.settings-modal-title p {
  margin: 7px 0 0 !important;
  max-width: 720px !important;
  color: #788298 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.settings-modal-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.settings-modal-btn,
.settings-close {
  height: 42px !important;
  border: 1px solid rgba(31,41,55,.09) !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: #4d586d !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 13px !important;
  font-size: 13px !important;
  font-weight: 830 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.045) !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease !important;
}

.settings-close {
  width: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  color: #677187 !important;
}

.settings-modal-btn:hover,
.settings-close:hover {
  transform: translateY(-1px) !important;
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 28%, #fff) !important;
  box-shadow: 0 12px 24px rgba(15,23,42,.075) !important;
}

.settings-modal-btn svg,
.settings-close svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.settings-frame-shell {
  min-height: 0 !important;
  background: #f8fafc !important;
  overflow: hidden !important;
}

.settings-frame {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border: 0 !important;
  background: #f8fafc !important;
}

body.has-open-modal .settings-modal-layer:not(.hidden) ~ .toast-stack,
body.has-open-modal #toastStack {
  z-index: 4000 !important;
}

@media (max-width: 860px) {
  .settings-modal-layer { padding: 14px !important; }
  .settings-modal {
    width: calc(100vw - 28px) !important;
    height: calc(100vh - 28px) !important;
    border-radius: 26px !important;
  }
  .settings-modal-head {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .settings-modal-actions { justify-content: flex-start !important; flex-wrap: wrap !important; }
}

/* DataCaps step38 — settings scroll + management command list restore */
body.app-shell .settings-modal-layer:not(.hidden) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: auto !important;
  padding: 20px !important;
  overscroll-behavior: contain !important;
}

body.app-shell .settings-modal {
  width: min(1180px, calc(100vw - 40px)) !important;
  height: min(900px, calc(100dvh - 40px)) !important;
  max-height: calc(100dvh - 40px) !important;
  border-radius: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.app-shell .settings-modal-head {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  padding: 18px 22px 16px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
}

body.app-shell .settings-modal-title h2 {
  font-size: 26px !important;
}

body.app-shell .settings-modal-title p {
  max-width: 760px !important;
  font-size: 12.5px !important;
  line-height: 1.42 !important;
}

body.app-shell .settings-frame-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #f7f9fc !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(31,41,55,.22) transparent !important;
}

body.app-shell .settings-frame-shell::-webkit-scrollbar {
  width: 8px !important;
}

body.app-shell .settings-frame-shell::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(31,41,55,.20) !important;
}

body.app-shell .settings-frame {
  width: 100% !important;
  min-height: 100% !important;
  height: 1400px;
  display: block !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Restore the right management block to the clean command-list, not the old tiles/grid. */
body.app-shell .home-create-panel {
  display: none !important;
}

body.app-shell.no-page-selected .home-create-panel {
  display: block !important;
}

body.app-shell.no-page-selected .management-panel {
  display: none !important;
}

body.app-shell:not(.no-page-selected) .management-panel {
  display: block !important;
}

body.app-shell .management-panel {
  padding: 16px !important;
  border-radius: 26px !important;
}

body.app-shell .management-panel .panel-title {
  margin: 0 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

body.app-shell .management-panel .panel-title h3 {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  letter-spacing: -.03em !important;
}

body.app-shell .management-panel .panel-title span,
body.app-shell .home-create-panel .panel-title span {
  display: none !important;
}

body.app-shell .management-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}

body.app-shell .management-list .management-action {
  width: 100% !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 7px 9px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(31,41,55,.075) !important;
  background: rgba(255,255,255,.94) !important;
  color: #202638 !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) 18px !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: left !important;
  box-shadow: 0 7px 16px rgba(15,23,42,.035) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease !important;
}

body.app-shell .management-list .management-action::after {
  content: '›' !important;
  display: grid !important;
  place-items: center !important;
  color: #a3acbd !important;
  font-size: 20px !important;
  line-height: 1 !important;
  transition: transform .16s ease, color .16s ease !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--accent) 25%, #fff) !important;
  background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--accent) 5%, #fff)) !important;
  box-shadow: 0 12px 24px rgba(15,23,42,.075) !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled)::after {
  transform: translateX(2px) !important;
  color: var(--accent) !important;
}

body.app-shell .management-list .management-action:active:not(:disabled) {
  transform: translateY(0) scale(.99) !important;
}

body.app-shell .management-action .management-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 13px !important;
  display: grid !important;
  place-items: center !important;
  background: color-mix(in srgb, var(--accent) 11%, #fff) !important;
  color: var(--accent) !important;
}

body.app-shell .management-action:hover:not(:disabled) .management-icon {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 9px 18px color-mix(in srgb, var(--accent) 20%, transparent) !important;
}

body.app-shell .management-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.app-shell .management-action > span:last-child {
  min-width: 0 !important;
  display: block !important;
}

body.app-shell .management-action b {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #202638 !important;
  font-size: 13px !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
  font-weight: 860 !important;
}

body.app-shell .management-action small {
  display: none !important;
}

body.app-shell .management-action.is-editing-action,
body.app-shell .management-action.is-save-action {
  border-color: color-mix(in srgb, var(--accent) 25%, #fff) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, #fff), #fff) !important;
}

body.app-shell .management-action.is-editing-action .management-icon,
body.app-shell .management-action.is-save-action .management-icon {
  background: var(--accent) !important;
  color: #fff !important;
}

body.app-shell .management-action.is-editing-action b,
body.app-shell .management-action.is-save-action b {
  color: var(--accent) !important;
}

body.app-shell .management-action.danger {
  border-color: rgba(255,104,118,.18) !important;
  background: #fff !important;
}

body.app-shell .management-action.danger .management-icon {
  background: #fff0f2 !important;
  color: #ef5f6f !important;
}

body.app-shell .management-action.danger::after {
  color: rgba(239,95,111,.42) !important;
}

body.app-shell .management-action.danger:hover:not(:disabled) {
  border-color: rgba(239,95,111,.32) !important;
  background: linear-gradient(135deg, #fff, #fff8f9) !important;
}

body.app-shell .management-action.danger:hover:not(:disabled) .management-icon {
  background: #ef5f6f !important;
  color: #fff !important;
}

body.app-shell .management-action[disabled] {
  cursor: default !important;
  opacity: .52 !important;
  transform: none !important;
  box-shadow: none !important;
}

@media (max-width: 860px) {
  body.app-shell .settings-modal-layer:not(.hidden) { padding: 12px !important; }
  body.app-shell .settings-modal {
    width: calc(100vw - 24px) !important;
    height: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 24px !important;
  }
  body.app-shell .settings-modal-head {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  body.app-shell .settings-modal-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}



/* DataCaps step39 — clean settings customization.
   Remove old visual theme controls from the settings UI and make settings background plain. */
body.settings-shell {
  background: #f6f8fb !important;
  background-image: none !important;
  background-attachment: initial !important;
  color: #151827 !important;
}

body.settings-shell::before,
body.settings-shell::after,
body.settings-shell.theme-vortex::before,
body.settings-shell.theme-vortex::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  background: none !important;
}

body.settings-shell > * {
  position: relative !important;
  z-index: auto !important;
}

body.settings-shell .settings-tabs-page {
  background: #f6f8fb !important;
  background-image: none !important;
}

body.settings-shell .settings-hero-panel,
body.settings-shell .settings-tabs,
body.settings-shell .settings-tabs-page .settings-form,
body.settings-shell .settings-tabs-page .accounts-settings,
body.settings-shell .settings-tabs-page .note,
body.settings-shell .settings-tabs-page .settings-section,
body.settings-shell .account-admin-note,
body.settings-shell .admin-account-card,
body.settings-shell .accounts-panel,
body.settings-shell .account-create-card {
  background-image: none !important;
}

body.settings-shell .settings-hero-panel,
body.settings-shell .settings-tabs-page .settings-form,
body.settings-shell .settings-tabs-page .accounts-settings,
body.settings-shell .settings-tabs-page .note {
  background: #fff !important;
}

body.settings-shell .settings-tab-panel[hidden],
body.settings-shell .appearance-settings,
body.settings-shell [data-name="accent_color"],
body.settings-shell [data-name="background_color_start"],
body.settings-shell [data-name="background_color_end"],
body.settings-shell [data-name="topbar_color"],
body.settings-shell [data-name="topbar_text_color"],
body.settings-shell .theme-preview,
body.settings-shell .theme-mode-grid,
body.settings-shell .theme-actions-inline {
  display: none !important;
}

body.settings-shell .settings-actions {
  margin-top: 4px !important;
}


/* DataCaps step40 — settings header/background alignment fix.
   The settings page now has no inner topbar strip; the hero is the first visual block. */
body.settings-shell {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
  background: #f6f8fb !important;
  background-image: none !important;
  background-attachment: initial !important;
}

body.settings-shell > header.topbar {
  display: none !important;
}

body.settings-shell .settings-tabs-page {
  width: min(1180px, calc(100% - 44px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 24px 0 48px !important;
  min-height: 100vh !important;
  background: #f6f8fb !important;
  background-image: none !important;
}

body.settings-shell .settings-hero-panel {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  background: #fff !important;
  background-image: none !important;
}

body.settings-shell .settings-tabs {
  background: #fff !important;
  background-image: none !important;
}

body.settings-shell .settings-tabs-page::before,
body.settings-shell .settings-tabs-page::after,
body.settings-shell .settings-hero-panel::before,
body.settings-shell .settings-hero-panel::after,
body.settings-shell .settings-tabs::before,
body.settings-shell .settings-tabs::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

body.app-shell .settings-frame-shell {
  background: #f6f8fb !important;
  overflow: auto !important;
}

body.app-shell .settings-frame {
  background: #f6f8fb !important;
}

/* DataCaps step41 — final management tile polish.
   Возвращаем аккуратные плитки 2×3, но без переносов и без старой тяжёлой командной ленты. */
body.app-shell .management-panel {
  padding: 16px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  box-shadow: 0 14px 32px rgba(15,23,42,.065) !important;
}

body.app-shell .management-panel .panel-title {
  margin: 0 0 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body.app-shell .management-panel .panel-title h3 {
  margin: 0 !important;
  color: #151827 !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  letter-spacing: -.035em !important;
  font-weight: 900 !important;
}

body.app-shell .management-panel .panel-title span {
  display: none !important;
}

body.app-shell .management-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.app-shell .management-list .management-action {
  width: 100% !important;
  height: 78px !important;
  min-height: 78px !important;
  padding: 12px !important;
  border-radius: 21px !important;
  border: 1px solid rgba(31,41,55,.075) !important;
  background:
    radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 42%),
    rgba(255,255,255,.96) !important;
  color: #202638 !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.04) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 34px minmax(0,1fr) !important;
  align-items: start !important;
  justify-items: start !important;
  gap: 8px !important;
  text-align: left !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transform: translateZ(0) !important;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease !important;
}

body.app-shell .management-list .management-action::after {
  content: none !important;
  display: none !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--accent) 26%, #fff) !important;
  background:
    radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 44%),
    linear-gradient(135deg, #fff, color-mix(in srgb, var(--accent) 5%, #fff)) !important;
  box-shadow: 0 16px 30px rgba(15,23,42,.085) !important;
}

body.app-shell .management-list .management-action:active:not(:disabled) {
  transform: translateY(0) scale(.99) !important;
  box-shadow: 0 7px 14px rgba(15,23,42,.055) !important;
}

body.app-shell .management-list .management-action:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent) !important;
  outline-offset: 3px !important;
}

body.app-shell .management-list .management-action:disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.035) !important;
}

body.app-shell .management-action .management-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  background: color-mix(in srgb, var(--accent) 11%, #fff) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

body.app-shell .management-action:hover:not(:disabled) .management-icon {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}

body.app-shell .management-icon svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.app-shell .management-action > span:last-child {
  min-width: 0 !important;
  width: 100% !important;
  display: block !important;
  align-self: end !important;
}

body.app-shell .management-action b {
  display: block !important;
  max-width: 100% !important;
  color: #202638 !important;
  font-size: 12.5px !important;
  line-height: 1.12 !important;
  letter-spacing: -.028em !important;
  font-weight: 900 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.app-shell .management-action small {
  display: none !important;
}

body.app-shell .management-action.is-editing-action,
body.app-shell .management-action.is-save-action {
  border-color: color-mix(in srgb, var(--accent) 28%, #fff) !important;
  background:
    radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 44%),
    color-mix(in srgb, var(--accent) 6%, #fff) !important;
}

body.app-shell .management-action.is-editing-action .management-icon,
body.app-shell .management-action.is-save-action .management-icon {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}

body.app-shell .management-action.is-editing-action b,
body.app-shell .management-action.is-save-action b {
  color: var(--accent) !important;
}

body.app-shell .management-action.danger {
  border-color: rgba(239,95,111,.18) !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(239,95,111,.08), transparent 44%),
    #fff !important;
}

body.app-shell .management-action.danger .management-icon {
  background: #fff0f2 !important;
  color: #ef5f6f !important;
}

body.app-shell .management-action.danger:hover:not(:disabled) {
  border-color: rgba(239,95,111,.34) !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(239,95,111,.14), transparent 44%),
    linear-gradient(135deg, #fff, #fff8f9) !important;
}

body.app-shell .management-action.danger:hover:not(:disabled) .management-icon {
  background: #ef5f6f !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(239,95,111,.18) !important;
}

/* На главной остаётся отдельное меню создания, оно не наследует стили управления. */
body.app-shell.no-page-selected .management-panel {
  display: none !important;
}

body.app-shell.no-page-selected .home-create-panel {
  display: block !important;
}

@media (max-width: 1280px) {
  body.app-shell .management-panel {
    padding: 14px !important;
  }

  body.app-shell .management-list {
    gap: 9px !important;
  }

  body.app-shell .management-list .management-action {
    height: 74px !important;
    min-height: 74px !important;
    padding: 11px !important;
  }

  body.app-shell .management-action b {
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-shell .management-list .management-action,
  body.app-shell .management-action .management-icon {
    transition: none !important;
  }
}



/* DataCaps step42 — icon-only management grid + save check state.
   Управление: только иконки, подпись появляется при наведении. */
body.app-shell .management-panel {
  padding: 16px !important;
  border-radius: 28px !important;
  overflow: visible !important;
}

body.app-shell .management-panel .panel-title {
  margin: 0 0 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body.app-shell .management-panel .panel-title h3 {
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}

body.app-shell .management-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow: visible !important;
}

body.app-shell .management-list .management-action {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 20px !important;
  border: 1px solid rgba(31,41,55,.075) !important;
  background: rgba(255,255,255,.96) !important;
  color: var(--accent) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.04) !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  text-align: center !important;
  cursor: pointer !important;
  transform: translateZ(0) !important;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--accent) 26%, #fff) !important;
  background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--accent) 6%, #fff)) !important;
  box-shadow: 0 16px 30px rgba(15,23,42,.085) !important;
}

body.app-shell .management-list .management-action:active:not(:disabled) {
  transform: translateY(0) scale(.98) !important;
  box-shadow: 0 7px 14px rgba(15,23,42,.055) !important;
}

body.app-shell .management-list .management-action:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent) !important;
  outline-offset: 3px !important;
}

body.app-shell .management-action .management-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  background: color-mix(in srgb, var(--accent) 11%, #fff) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

body.app-shell .management-action:hover:not(:disabled) .management-icon {
  background: var(--accent) !important;
  color: #fff !important;
  transform: scale(1.04) !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}

body.app-shell .management-icon svg {
  width: 19px !important;
  height: 19px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.app-shell .management-action > span:last-child {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.app-shell .management-list .management-action::after {
  content: attr(aria-label) !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 8px) !important;
  z-index: 30 !important;
  transform: translateX(-50%) translateY(5px) scale(.96) !important;
  max-width: 190px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(18,24,43,.94) !important;
  color: #fff !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.18) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .14s ease, transform .14s ease !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled)::after,
body.app-shell .management-list .management-action:focus-visible::after {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

body.app-shell .management-action.is-editing-action,
body.app-shell .management-action.is-save-action {
  border-color: color-mix(in srgb, #35c46b 30%, #fff) !important;
  background: linear-gradient(135deg, #fff, color-mix(in srgb, #35c46b 8%, #fff)) !important;
}

body.app-shell .management-action.is-editing-action .management-icon,
body.app-shell .management-action.is-save-action .management-icon {
  background: #35c46b !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(53,196,107,.22) !important;
}

body.app-shell .management-action.is-editing-action:hover:not(:disabled),
body.app-shell .management-action.is-save-action:hover:not(:disabled) {
  border-color: rgba(53,196,107,.40) !important;
  background: linear-gradient(135deg, #fff, color-mix(in srgb, #35c46b 12%, #fff)) !important;
}

body.app-shell .management-action.danger {
  border-color: rgba(239,95,111,.16) !important;
  background: rgba(255,255,255,.96) !important;
  color: #ef5f6f !important;
}

body.app-shell .management-action.danger .management-icon {
  background: #fff0f2 !important;
  color: #ef5f6f !important;
}

body.app-shell .management-action.danger:hover:not(:disabled) {
  border-color: rgba(239,95,111,.34) !important;
  background: linear-gradient(135deg, #fff, #fff8f9) !important;
}

body.app-shell .management-action.danger:hover:not(:disabled) .management-icon {
  background: #ef5f6f !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(239,95,111,.18) !important;
}

body.app-shell .management-list .management-action:disabled {
  opacity: .46 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.035) !important;
}

@media (max-width: 1280px) {
  body.app-shell .management-list { gap: 9px !important; }
  body.app-shell .management-action .management-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-shell .management-list .management-action,
  body.app-shell .management-action .management-icon,
  body.app-shell .management-list .management-action::after {
    transition: none !important;
  }
}

/* DataCaps step43 — compact icon toolbar, search halo fix, scroll performance pass.
   Управление теперь не плитки, а настоящая компактная панель иконок. */

/* 1) Search: one clean focus halo on the outer search shell only. */
body.app-shell .topbar .search.search-box,
body.app-shell .search.search-box {
  position: relative !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(31,41,55,.10) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.035) !important;
  outline: 0 !important;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease !important;
}

body.app-shell .topbar .search.search-box:focus-within,
body.app-shell .search.search-box:focus-within {
  border-color: color-mix(in srgb, var(--accent) 34%, rgba(31,41,55,.10)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent), 0 10px 22px rgba(15,23,42,.055) !important;
  background: #fff !important;
}

body.app-shell .topbar .search.search-box input,
body.app-shell .search.search-box input,
body.app-shell .search-box input,
body.app-shell .search-box input:focus,
body.app-shell .search input,
body.app-shell .search input:focus {
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: var(--ink) !important;
}

body.app-shell .topbar .search.search-box svg,
body.app-shell .search.search-box svg {
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
}

/* 2) Management: compact icon toolbar, not empty cards. */
body.app-shell .management-panel {
  padding: 16px 16px 17px !important;
  border-radius: 28px !important;
  overflow: visible !important;
}

body.app-shell .management-panel .panel-title {
  margin: 0 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body.app-shell .management-panel .panel-title h3 {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}

body.app-shell .management-panel .panel-title span {
  display: none !important;
}

body.app-shell .management-list {
  display: grid !important;
  grid-template-columns: repeat(6, 40px) !important;
  justify-content: start !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: visible !important;
  min-height: 40px !important;
}

body.app-shell .management-list .management-action {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(31,41,55,.085) !important;
  background: rgba(255,255,255,.96) !important;
  color: var(--accent) !important;
  box-shadow: 0 7px 16px rgba(15,23,42,.035) !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  cursor: pointer !important;
  transform: none !important;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease, color .14s ease !important;
}

body.app-shell .management-action .management-icon {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  border-radius: inherit !important;
  display: grid !important;
  place-items: center !important;
  background: color-mix(in srgb, var(--accent) 10%, #fff) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease !important;
}

body.app-shell .management-icon svg {
  width: 19px !important;
  height: 19px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.app-shell .management-action > span:last-child {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled),
body.app-shell .management-list .management-action:focus-visible {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--accent) 34%, #fff) !important;
  background: #fff !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.09) !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled) .management-icon,
body.app-shell .management-list .management-action:focus-visible .management-icon {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 10px 18px color-mix(in srgb, var(--accent) 22%, transparent) !important;
  transform: scale(1.02) !important;
}

body.app-shell .management-list .management-action:active:not(:disabled) {
  transform: translateY(0) scale(.96) !important;
  box-shadow: 0 6px 14px rgba(15,23,42,.06) !important;
}

body.app-shell .management-list .management-action:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 46%, transparent) !important;
  outline-offset: 3px !important;
}

/* Tooltip under icon. */
body.app-shell .management-list .management-action::after {
  content: attr(aria-label) !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 8px) !important;
  bottom: auto !important;
  z-index: 80 !important;
  transform: translateX(-50%) translateY(-4px) scale(.96) !important;
  max-width: 190px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(18,24,43,.94) !important;
  color: #fff !important;
  font-size: 11.5px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.18) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .14s ease, transform .14s ease !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled)::after,
body.app-shell .management-list .management-action:focus-visible::after {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* Editor mode: pencil action becomes a green save check. */
body.app-shell .management-action.is-editing-action,
body.app-shell .management-action.is-save-action {
  border-color: rgba(53,196,107,.28) !important;
  color: #24a95b !important;
}

body.app-shell .management-action.is-editing-action .management-icon,
body.app-shell .management-action.is-save-action .management-icon {
  background: #35c46b !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(53,196,107,.22) !important;
}

body.app-shell .management-action.is-editing-action:hover:not(:disabled),
body.app-shell .management-action.is-save-action:hover:not(:disabled) {
  border-color: rgba(53,196,107,.42) !important;
}

body.app-shell .management-action.danger {
  border-color: rgba(239,95,111,.16) !important;
  color: #ef5f6f !important;
}

body.app-shell .management-action.danger .management-icon {
  background: #fff0f2 !important;
  color: #ef5f6f !important;
}

body.app-shell .management-action.danger:hover:not(:disabled) {
  border-color: rgba(239,95,111,.34) !important;
}

body.app-shell .management-action.danger:hover:not(:disabled) .management-icon {
  background: #ef5f6f !important;
  color: #fff !important;
  box-shadow: 0 10px 18px rgba(239,95,111,.18) !important;
}

body.app-shell .management-list .management-action:disabled {
  opacity: .42 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 3) Smoother scrolling: reduce costly effects on scroll containers and repeated cards. */
body.app-shell .main-scroll,
body.app-shell .right-panel,
body.app-shell #historyList.history-list,
body.app-shell .tree {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  scroll-behavior: auto !important;
  will-change: scroll-position !important;
  contain: layout paint style !important;
}

body.app-shell .main-scroll {
  background-attachment: local !important;
}

/* Backdrop blur on large scrolling panels is expensive. Keep the same light look with solid translucency. */
body.app-shell .main-scroll .article-page,
body.app-shell .main-scroll .page-focus,
body.app-shell .panel-card,
body.app-shell .management-panel,
body.app-shell .history-card-panel,
body.app-shell .home-create-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Avoid animating whole cards while scrolling; keep feedback on buttons/icons only. */
body.app-shell .right-panel .panel-card:hover,
body.app-shell .right-panel .history-card-panel:hover,
body.app-shell .main-scroll .article-page:hover,
body.app-shell .main-scroll .page-focus:hover {
  transform: none !important;
}

body.app-shell .history-item,
body.app-shell .history-card,
body.app-shell .tree-item,
body.app-shell .workspace-card,
body.app-shell .quick {
  will-change: auto !important;
}

@media (max-width: 1420px) {
  body.app-shell .management-list {
    grid-template-columns: repeat(3, 40px) !important;
    gap: 9px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-shell .management-list .management-action,
  body.app-shell .management-action .management-icon,
  body.app-shell .management-list .management-action::after,
  body.app-shell .search.search-box {
    transition: none !important;
  }
}



/* DataCaps step44 — management as balanced tiles + settings scroll performance.
   Возвращаем управление к нормальным плиткам и убираем тяжёлые эффекты из настроек. */

/* Management panel: compact readable tiles, not a tiny icon strip and not oversized cards. */
body.app-shell .management-panel {
  padding: 16px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(255,255,255,.84) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.055) !important;
  overflow: visible !important;
}

body.app-shell .management-panel .panel-title {
  margin: 0 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body.app-shell .management-panel .panel-title h3 {
  margin: 0 !important;
  color: #151827 !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  letter-spacing: -.035em !important;
  font-weight: 900 !important;
}

body.app-shell .management-panel .panel-title span {
  display: none !important;
}

body.app-shell .management-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  overflow: visible !important;
  min-height: 0 !important;
  align-items: stretch !important;
}

body.app-shell .management-list .management-action {
  position: relative !important;
  width: 100% !important;
  height: 58px !important;
  min-width: 0 !important;
  min-height: 58px !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(31,41,55,.075) !important;
  background: rgba(255,255,255,.97) !important;
  color: #1f2636 !important;
  box-shadow: 0 7px 16px rgba(15,23,42,.035) !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 10px !important;
  overflow: visible !important;
  text-align: left !important;
  cursor: pointer !important;
  transform: translateZ(0) !important;
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    border-color .14s ease,
    background .14s ease,
    color .14s ease !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled),
body.app-shell .management-list .management-action:focus-visible {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--accent) 28%, #fff) !important;
  background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--accent) 5%, #fff)) !important;
  box-shadow: 0 13px 26px rgba(15,23,42,.075) !important;
}

body.app-shell .management-list .management-action:active:not(:disabled) {
  transform: translateY(0) scale(.99) !important;
  box-shadow: 0 6px 13px rgba(15,23,42,.05) !important;
}

body.app-shell .management-list .management-action:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent) !important;
  outline-offset: 3px !important;
}

body.app-shell .management-action .management-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  background: color-mix(in srgb, var(--accent) 10%, #fff) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled) .management-icon,
body.app-shell .management-list .management-action:focus-visible .management-icon {
  background: var(--accent) !important;
  color: #fff !important;
  transform: scale(1.02) !important;
  box-shadow: 0 9px 18px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

body.app-shell .management-icon svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.app-shell .management-action > span:last-child {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: auto !important;
  white-space: normal !important;
  border: 0 !important;
  display: block !important;
  min-width: 0 !important;
}

body.app-shell .management-action b {
  display: block !important;
  max-width: 100% !important;
  color: #202638 !important;
  font-size: 12.5px !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
  font-weight: 900 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.app-shell .management-action small {
  display: none !important;
}

/* Tooltip only helps users who need clarification; it no longer replaces the labels. */
body.app-shell .management-list .management-action::after {
  content: attr(aria-label) !important;
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  bottom: calc(100% + 7px) !important;
  z-index: 80 !important;
  transform: translateX(-50%) translateY(4px) scale(.96) !important;
  max-width: 190px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(18,24,43,.94) !important;
  color: #fff !important;
  font-size: 11.5px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.16) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .14s ease, transform .14s ease !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled)::after,
body.app-shell .management-list .management-action:focus-visible::after {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* Editing mode: first action becomes green Save. */
body.app-shell .management-action.is-editing-action,
body.app-shell .management-action.is-save-action {
  border-color: rgba(53,196,107,.24) !important;
  background: linear-gradient(135deg, #fff, color-mix(in srgb, #35c46b 7%, #fff)) !important;
}

body.app-shell .management-action.is-editing-action .management-icon,
body.app-shell .management-action.is-save-action .management-icon {
  background: #35c46b !important;
  color: #fff !important;
  box-shadow: 0 9px 18px rgba(53,196,107,.20) !important;
}

body.app-shell .management-action.is-editing-action b,
body.app-shell .management-action.is-save-action b {
  color: #18924a !important;
}

body.app-shell .management-action.is-editing-action:hover:not(:disabled),
body.app-shell .management-action.is-save-action:hover:not(:disabled) {
  border-color: rgba(53,196,107,.38) !important;
  background: linear-gradient(135deg, #fff, color-mix(in srgb, #35c46b 10%, #fff)) !important;
}

body.app-shell .management-action.danger {
  border-color: rgba(239,95,111,.15) !important;
  background: #fff !important;
  color: #ef5f6f !important;
}

body.app-shell .management-action.danger .management-icon {
  background: #fff0f2 !important;
  color: #ef5f6f !important;
}

body.app-shell .management-action.danger b {
  color: #202638 !important;
}

body.app-shell .management-action.danger:hover:not(:disabled) {
  border-color: rgba(239,95,111,.32) !important;
  background: linear-gradient(135deg, #fff, #fff8f9) !important;
}

body.app-shell .management-action.danger:hover:not(:disabled) .management-icon {
  background: #ef5f6f !important;
  color: #fff !important;
  box-shadow: 0 9px 18px rgba(239,95,111,.18) !important;
}

body.app-shell .management-list .management-action:disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: 0 7px 16px rgba(15,23,42,.025) !important;
}

@media (max-width: 1420px) {
  body.app-shell .management-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  body.app-shell .management-list .management-action {
    height: 56px !important;
    min-height: 56px !important;
    padding: 9px 10px !important;
    gap: 9px !important;
  }
  body.app-shell .management-action b {
    font-size: 12px !important;
  }
}

/* Settings performance: remove expensive animated/blurred layers while preserving layout. */
body.app-shell .settings-modal-layer:not(.hidden) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(18,24,43,.46) !important;
  will-change: auto !important;
}

body.app-shell .settings-modal {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 24px 60px rgba(15,23,42,.30) !important;
  contain: layout paint style !important;
}

body.app-shell .settings-frame-shell,
body.app-shell .settings-frame {
  background: #f6f8fb !important;
  background-image: none !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: auto !important;
  will-change: auto !important;
}

body.settings-shell,
body.settings-shell .settings-tabs-page {
  background: #f6f8fb !important;
  background-image: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: auto !important;
}

body.settings-shell *,
body.settings-shell *::before,
body.settings-shell *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-property: color, background-color, border-color, opacity !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.settings-shell .settings-hero-panel,
body.settings-shell .settings-tabs,
body.settings-shell .settings-form,
body.settings-shell .settings-section,
body.settings-shell .accounts-panel,
body.settings-shell .accounts-settings,
body.settings-shell .admin-account-card,
body.settings-shell .account-create-card,
body.settings-shell .note {
  box-shadow: 0 8px 18px rgba(15,23,42,.035) !important;
  transform: none !important;
  contain: content !important;
}

body.settings-shell .settings-tabs-page {
  padding-bottom: 72px !important;
}

@media (prefers-reduced-motion: reduce) {
  body.app-shell .management-list .management-action,
  body.app-shell .management-action .management-icon,
  body.app-shell .management-list .management-action::after {
    transition: none !important;
  }
}


/* DataCaps step45 — icon-only management, stable search halo, real settings scroll, edge alignment. */

/* Search: remove the double inner halo for good. */
body.app-shell .topbar .search.search-box,
body.app-shell .topbar .search-box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 1px solid rgba(31,41,55,.10) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.035) !important;
  outline: none !important;
  overflow: visible !important;
}
body.app-shell .topbar .search.search-box:focus-within,
body.app-shell .topbar .search-box:focus-within {
  border-color: color-mix(in srgb, var(--accent) 34%, rgba(31,41,55,.10)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent), 0 10px 22px rgba(15,23,42,.055) !important;
}
body.app-shell .topbar .search.search-box input,
body.app-shell .topbar .search-box input,
body.app-shell .topbar .search.search-box input:focus,
body.app-shell .topbar .search-box input:focus {
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  appearance: none !important;
}
body.app-shell .topbar .search.search-box input:focus-visible,
body.app-shell .topbar .search-box input:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

/* Management: icon-only, but as a neat 3 x 2 tile block, not oversized empty cards. */
body.app-shell .management-panel {
  padding: 18px !important;
  border-radius: 28px !important;
  overflow: visible !important;
}
body.app-shell .management-panel .panel-title {
  margin: 0 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
body.app-shell .management-panel .panel-title h3 {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}
body.app-shell .management-panel .panel-title span { display: none !important; }
body.app-shell .management-list {
  display: grid !important;
  grid-template-columns: repeat(3, 56px) !important;
  grid-auto-rows: 56px !important;
  gap: 10px !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
  min-height: 0 !important;
}
body.app-shell .management-list .management-action {
  position: relative !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(31,41,55,.08) !important;
  background: rgba(255,255,255,.96) !important;
  color: var(--accent) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.04) !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  text-align: center !important;
  cursor: pointer !important;
  transform: none !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease !important;
}
body.app-shell .management-action .management-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 15px !important;
  display: grid !important;
  place-items: center !important;
  background: color-mix(in srgb, var(--accent) 11%, #fff) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease !important;
}
body.app-shell .management-icon svg {
  width: 19px !important;
  height: 19px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
body.app-shell .management-action > span:last-child,
body.app-shell .management-action b,
body.app-shell .management-action small {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
body.app-shell .management-list .management-action:hover:not(:disabled),
body.app-shell .management-list .management-action:focus-visible {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--accent) 32%, #fff) !important;
  background: #fff !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.09) !important;
}
body.app-shell .management-list .management-action:hover:not(:disabled) .management-icon,
body.app-shell .management-list .management-action:focus-visible .management-icon {
  background: var(--accent) !important;
  color: #fff !important;
  transform: scale(1.04) !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}
body.app-shell .management-list .management-action:active:not(:disabled) {
  transform: translateY(0) scale(.96) !important;
}
body.app-shell .management-list .management-action:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent) !important;
  outline-offset: 3px !important;
}
body.app-shell .management-list .management-action::after {
  content: attr(aria-label) !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 8px) !important;
  z-index: 120 !important;
  transform: translateX(-50%) translateY(4px) scale(.96) !important;
  padding: 7px 10px !important;
  max-width: 210px !important;
  border-radius: 999px !important;
  background: rgba(18,24,43,.95) !important;
  color: #fff !important;
  font-size: 11.5px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.18) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .14s ease, transform .14s ease !important;
}
body.app-shell .management-list .management-action:hover:not(:disabled)::after,
body.app-shell .management-list .management-action:focus-visible::after {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}
body.app-shell .management-action.is-editing-action,
body.app-shell .management-action.is-save-action {
  border-color: rgba(53,196,107,.26) !important;
  color: #25a957 !important;
}
body.app-shell .management-action.is-editing-action .management-icon,
body.app-shell .management-action.is-save-action .management-icon {
  background: #35c46b !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(53,196,107,.22) !important;
}
body.app-shell .management-action.danger {
  border-color: rgba(239,95,111,.18) !important;
  color: #ef5f6f !important;
}
body.app-shell .management-action.danger .management-icon {
  background: #fff0f2 !important;
  color: #ef5f6f !important;
}
body.app-shell .management-action.danger:hover:not(:disabled) {
  border-color: rgba(239,95,111,.36) !important;
}
body.app-shell .management-action.danger:hover:not(:disabled) .management-icon {
  background: #ef5f6f !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(239,95,111,.18) !important;
}
body.app-shell .management-action[disabled] {
  opacity: .46 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.025) !important;
}

/* Settings overlay: fixed modal, the iframe itself scrolls under the mouse wheel. */
body.app-shell .settings-modal-layer:not(.hidden) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 20px !important;
  background: rgba(18,24,43,.46) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.app-shell .settings-modal {
  width: min(1180px, calc(100vw - 40px)) !important;
  height: min(900px, calc(100dvh - 40px)) !important;
  max-height: calc(100dvh - 40px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  border-radius: 32px !important;
  contain: none !important;
}
body.app-shell .settings-modal-head {
  min-height: 0 !important;
  flex: 0 0 auto !important;
}
body.app-shell .settings-frame-shell {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #f6f8fb !important;
  overscroll-behavior: contain !important;
}
body.app-shell .settings-frame {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  border: 0 !important;
  background: #f6f8fb !important;
  overflow: auto !important;
}

/* Edge/panel alignment: avoid cut rounded corners and phantom strips on the right column. */
body.app-shell .workspace,
body.app-shell .board,
body.app-shell .right-panel,
body.app-shell .main-scroll {
  min-height: 0 !important;
}
body.app-shell .board {
  align-items: start !important;
  overflow: visible !important;
}
body.app-shell .right-panel {
  overflow: visible !important;
  padding: 0 2px 12px 0 !important;
  gap: 14px !important;
}
body.app-shell .right-panel .panel-card {
  overflow: visible !important;
}
body.app-shell .main-scroll {
  padding-right: 2px !important;
}
body.app-shell .page-work-card,
body.app-shell .page-view-card,
body.app-shell .panel-card {
  backface-visibility: hidden !important;
}

@media (max-width: 1420px) {
  body.app-shell .management-list {
    grid-template-columns: repeat(3, 52px) !important;
    grid-auto-rows: 52px !important;
    gap: 9px !important;
  }
  body.app-shell .management-list .management-action {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }
  body.app-shell .management-action .management-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-shell .management-list .management-action,
  body.app-shell .management-action .management-icon,
  body.app-shell .management-list .management-action::after {
    transition: none !important;
  }
}


/* DataCaps step46 — final management reset.
   Icon-only controls, but real compact tiles: no text, no giant empty card inside a card. */
body.app-shell .management-panel {
  padding: 18px !important;
  border-radius: 28px !important;
  overflow: visible !important;
}
body.app-shell .management-panel .panel-title {
  margin: 0 0 14px !important;
  min-height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
body.app-shell .management-panel .panel-title h3 {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}
body.app-shell .management-panel .panel-title span { display: none !important; }

body.app-shell .management-list {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 50px !important;
  gap: 10px !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  overflow: visible !important;
  min-height: 0 !important;
}

body.app-shell .management-list .management-action {
  position: relative !important;
  width: auto !important;
  height: 50px !important;
  min-width: 0 !important;
  min-height: 50px !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 17px !important;
  border: 1px solid rgba(31,41,55,.085) !important;
  background: rgba(255,255,255,.95) !important;
  color: var(--accent) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.04) !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  cursor: pointer !important;
  transform: translateZ(0) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease, color .14s ease !important;
}

body.app-shell .management-action .management-icon {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: inherit !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  color: currentColor !important;
  box-shadow: none !important;
  transform: none !important;
}
body.app-shell .management-icon svg {
  width: 21px !important;
  height: 21px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.app-shell .management-action > span:last-child,
body.app-shell .management-action b,
body.app-shell .management-action small {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled),
body.app-shell .management-list .management-action:focus-visible {
  transform: translateY(-2px) translateZ(0) !important;
  border-color: color-mix(in srgb, var(--accent) 30%, #fff) !important;
  background: color-mix(in srgb, var(--accent) 10%, #fff) !important;
  color: var(--accent) !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.085) !important;
}
body.app-shell .management-list .management-action:active:not(:disabled) {
  transform: translateY(0) scale(.97) translateZ(0) !important;
}
body.app-shell .management-list .management-action:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 38%, transparent) !important;
  outline-offset: 3px !important;
}

body.app-shell .management-action::after {
  content: attr(aria-label) !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 8px) !important;
  z-index: 3000 !important;
  transform: translateX(-50%) translateY(4px) scale(.96) !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(18,24,43,.96) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.20) !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  font-weight: 830 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .14s ease, transform .14s ease !important;
}
body.app-shell .management-action:hover:not(:disabled)::after,
body.app-shell .management-action:focus-visible::after {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* Save state: edit pencil becomes a green confirmation tile. */
body.app-shell .management-action.is-editing-action,
body.app-shell .management-action.is-save-action {
  border-color: rgba(53,196,107,.28) !important;
  background: linear-gradient(135deg, #35c46b, #20b45b) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(53,196,107,.20) !important;
}
body.app-shell .management-action.is-editing-action:hover:not(:disabled),
body.app-shell .management-action.is-save-action:hover:not(:disabled),
body.app-shell .management-action.is-editing-action:focus-visible,
body.app-shell .management-action.is-save-action:focus-visible {
  border-color: rgba(53,196,107,.34) !important;
  background: linear-gradient(135deg, #3fd576, #23bd61) !important;
  color: #fff !important;
}
body.app-shell .management-action.is-editing-action .management-icon,
body.app-shell .management-action.is-save-action .management-icon {
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.app-shell .management-action.danger {
  border-color: rgba(239,95,111,.18) !important;
  background: #fffafa !important;
  color: #ef5f6f !important;
}
body.app-shell .management-action.danger:hover:not(:disabled),
body.app-shell .management-action.danger:focus-visible {
  border-color: rgba(239,95,111,.34) !important;
  background: #fff0f2 !important;
  color: #ef5f6f !important;
}
body.app-shell .management-action[disabled] {
  opacity: .46 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.025) !important;
}

/* Search focus: one halo only, no inner input glow. */
body.app-shell .topbar .search.search-box {
  box-shadow: 0 8px 18px rgba(15,23,42,.035) !important;
}
body.app-shell .topbar .search.search-box:focus-within {
  border-color: color-mix(in srgb, var(--accent) 28%, #fff) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent), 0 8px 18px rgba(15,23,42,.035) !important;
}
body.app-shell .topbar .search.search-box input,
body.app-shell .topbar .search.search-box input:focus,
body.app-shell .topbar .search.search-box input:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  body.app-shell .management-list .management-action,
  body.app-shell .management-action::after {
    transition: none !important;
  }
}


/* DataCaps step47 — final icon-only management squares.
   Goal: no text, no stretched pills, no nested circle: six compact square icon buttons. */
body.app-shell .management-panel {
  padding: 18px !important;
  border-radius: 28px !important;
  overflow: visible !important;
}

body.app-shell .management-panel .panel-title {
  margin: 0 0 14px !important;
  min-height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body.app-shell .management-panel .panel-title h3 {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}

body.app-shell .management-panel .panel-title span {
  display: none !important;
}

body.app-shell .management-list {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, 54px) !important;
  grid-auto-rows: 54px !important;
  justify-content: center !important;
  align-content: start !important;
  gap: 12px !important;
  overflow: visible !important;
}

body.app-shell .management-list .management-action {
  position: relative !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 17px !important;
  border: 1px solid rgba(31,41,55,.085) !important;
  background: rgba(255,255,255,.96) !important;
  color: var(--accent) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.045) !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  cursor: pointer !important;
  text-align: center !important;
  transform: translateZ(0) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease, color .14s ease !important;
}

body.app-shell .management-list .management-action::before,
body.app-shell .management-list .management-action > span:last-child,
body.app-shell .management-list .management-action b,
body.app-shell .management-list .management-action small {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.app-shell .management-action .management-icon {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  color: currentColor !important;
  box-shadow: none !important;
  transform: none !important;
}

body.app-shell .management-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled),
body.app-shell .management-list .management-action:focus-visible {
  transform: translateY(-2px) translateZ(0) !important;
  border-color: color-mix(in srgb, var(--accent) 30%, #fff) !important;
  background: color-mix(in srgb, var(--accent) 10%, #fff) !important;
  color: var(--accent) !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.09) !important;
}

body.app-shell .management-list .management-action:active:not(:disabled) {
  transform: translateY(0) scale(.96) translateZ(0) !important;
}

body.app-shell .management-list .management-action:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 38%, transparent) !important;
  outline-offset: 3px !important;
}

body.app-shell .management-action::after {
  content: attr(aria-label) !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 9px) !important;
  z-index: 4000 !important;
  transform: translateX(-50%) translateY(4px) scale(.96) !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(18,24,43,.96) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.20) !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  font-weight: 830 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .14s ease, transform .14s ease !important;
}

body.app-shell .management-action:hover:not(:disabled)::after,
body.app-shell .management-action:focus-visible::after {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* Editor mode: the edit button becomes a green save check. */
body.app-shell .management-action.is-editing-action,
body.app-shell .management-action.is-save-action {
  border-color: rgba(53,196,107,.28) !important;
  background: linear-gradient(135deg, #35c46b, #20b45b) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(53,196,107,.22) !important;
}

body.app-shell .management-action.is-editing-action:hover:not(:disabled),
body.app-shell .management-action.is-save-action:hover:not(:disabled),
body.app-shell .management-action.is-editing-action:focus-visible,
body.app-shell .management-action.is-save-action:focus-visible {
  border-color: rgba(53,196,107,.34) !important;
  background: linear-gradient(135deg, #3fd576, #23bd61) !important;
  color: #fff !important;
}

body.app-shell .management-action.danger {
  border-color: rgba(239,95,111,.20) !important;
  background: #fffafa !important;
  color: #ef5f6f !important;
}

body.app-shell .management-action.danger:hover:not(:disabled),
body.app-shell .management-action.danger:focus-visible {
  border-color: rgba(239,95,111,.34) !important;
  background: #fff0f2 !important;
  color: #ef5f6f !important;
}

body.app-shell .management-action[disabled] {
  opacity: .45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.025) !important;
}

/* Keep the panel itself compact after the square-button reset. */
body.app-shell .right-panel .management-panel.panel-card {
  min-height: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  body.app-shell .management-list .management-action,
  body.app-shell .management-action::after {
    transition: none !important;
  }
}


/* DataCaps step48 — compact icon-only management panel.
   Keeps icon-only logic, removes the heavy empty-card feeling, fixes spacing and tooltips. */
body.app-shell .management-panel.panel-card,
body.app-shell .right-panel .management-panel.panel-card {
  padding: 18px 18px 20px !important;
  border-radius: 27px !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body.app-shell .management-panel .panel-title {
  margin: 0 0 13px !important;
  min-height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body.app-shell .management-panel .panel-title h3 {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}

body.app-shell .management-panel .panel-title span {
  display: none !important;
}

body.app-shell .management-list {
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, 52px) !important;
  grid-auto-rows: 52px !important;
  gap: 11px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

body.app-shell .management-list .management-action {
  position: relative !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(31,41,55,.085) !important;
  background: rgba(255,255,255,.96) !important;
  color: var(--accent) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.045), inset 0 1px 0 rgba(255,255,255,.92) !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  cursor: pointer !important;
  text-align: center !important;
  transform: translateZ(0) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease, color .14s ease !important;
}

/* Hide text labels visually but keep them for tooltip/accessibility. */
body.app-shell .management-list .management-action > span:not(.management-icon),
body.app-shell .management-list .management-action b,
body.app-shell .management-list .management-action small {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.app-shell .management-action .management-icon {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: inherit !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  color: currentColor !important;
  box-shadow: none !important;
  transform: none !important;
}

body.app-shell .management-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.05 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled),
body.app-shell .management-list .management-action:focus-visible {
  transform: translateY(-2px) translateZ(0) !important;
  border-color: color-mix(in srgb, var(--accent) 30%, #fff) !important;
  background: color-mix(in srgb, var(--accent) 9%, #fff) !important;
  color: var(--accent) !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.96) !important;
}

body.app-shell .management-list .management-action:active:not(:disabled) {
  transform: translateY(0) scale(.96) translateZ(0) !important;
}

body.app-shell .management-list .management-action:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 38%, transparent) !important;
  outline-offset: 3px !important;
}

body.app-shell .management-action::after {
  content: attr(aria-label) !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 9px) !important;
  z-index: 4500 !important;
  transform: translateX(-50%) translateY(4px) scale(.96) !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(18,24,43,.96) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.20) !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  font-weight: 830 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .14s ease, transform .14s ease !important;
}

body.app-shell .management-action:hover:not(:disabled)::after,
body.app-shell .management-action:focus-visible::after {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* Editor mode: the edit action is Save and uses a green check. */
body.app-shell .management-action.is-editing-action,
body.app-shell .management-action.is-save-action {
  border-color: rgba(53,196,107,.26) !important;
  background: linear-gradient(135deg, #35c46b, #20b45b) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(53,196,107,.20), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

body.app-shell .management-action.is-editing-action:hover:not(:disabled),
body.app-shell .management-action.is-save-action:hover:not(:disabled),
body.app-shell .management-action.is-editing-action:focus-visible,
body.app-shell .management-action.is-save-action:focus-visible {
  border-color: rgba(53,196,107,.34) !important;
  background: linear-gradient(135deg, #3fd576, #23bd61) !important;
  color: #fff !important;
}

body.app-shell .management-action.danger {
  border-color: rgba(239,95,111,.20) !important;
  background: #fffafa !important;
  color: #ef5f6f !important;
}

body.app-shell .management-action.danger:hover:not(:disabled),
body.app-shell .management-action.danger:focus-visible {
  border-color: rgba(239,95,111,.34) !important;
  background: #fff0f2 !important;
  color: #ef5f6f !important;
}

body.app-shell .management-action[disabled] {
  opacity: .42 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.025) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.app-shell .management-list .management-action,
  body.app-shell .management-action::after {
    transition: none !important;
  }
}


/* DataCaps step49 — topbar cleanup, history clamp, management squares.
   Fixes requested UI details without touching settings. */

/* 2) Шапка: убрать старую цветовую плашку/аватар справа. */
body.app-shell .topbar .actions .avatar {
  display: none !important;
}

/* 3) Управление: нормальные квадратные icon-only плитки, без текста и без внутренних кружков. */
body.app-shell .right-panel .management-panel.panel-card,
body.app-shell .management-panel.panel-card,
body.app-shell .management-panel {
  padding: 18px !important;
  border-radius: 28px !important;
  overflow: visible !important;
}

body.app-shell .management-panel .panel-title {
  margin: 0 0 14px !important;
  min-height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body.app-shell .management-panel .panel-title h3 {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}

body.app-shell .management-panel .panel-title span { display: none !important; }

body.app-shell .management-list {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 10px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  overflow: visible !important;
}

body.app-shell .management-list .management-action {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(31,41,55,.085) !important;
  background: rgba(255,255,255,.96) !important;
  color: var(--accent) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.045), inset 0 1px 0 rgba(255,255,255,.96) !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  cursor: pointer !important;
  text-align: center !important;
  transform: translateZ(0) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease, color .14s ease !important;
}

body.app-shell .management-list .management-action > span:not(.management-icon),
body.app-shell .management-list .management-action b,
body.app-shell .management-list .management-action small {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.app-shell .management-action .management-icon {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  color: currentColor !important;
  box-shadow: none !important;
  transform: none !important;
}

body.app-shell .management-icon svg {
  width: 25px !important;
  height: 25px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.05 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled),
body.app-shell .management-list .management-action:focus-visible {
  transform: translateY(-2px) translateZ(0) !important;
  border-color: color-mix(in srgb, var(--accent) 32%, #fff) !important;
  background: color-mix(in srgb, var(--accent) 9%, #fff) !important;
  color: var(--accent) !important;
  box-shadow: 0 16px 30px rgba(15,23,42,.095), inset 0 1px 0 rgba(255,255,255,.98) !important;
}

body.app-shell .management-list .management-action:active:not(:disabled) {
  transform: translateY(0) scale(.97) translateZ(0) !important;
}

body.app-shell .management-list .management-action:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 38%, transparent) !important;
  outline-offset: 3px !important;
}

body.app-shell .management-action::after {
  content: attr(aria-label) !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 9px) !important;
  z-index: 4500 !important;
  transform: translateX(-50%) translateY(4px) scale(.96) !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(18,24,43,.96) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.20) !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  font-weight: 830 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .14s ease, transform .14s ease !important;
}

body.app-shell .management-action:hover:not(:disabled)::after,
body.app-shell .management-action:focus-visible::after {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

body.app-shell .management-action.is-editing-action,
body.app-shell .management-action.is-save-action {
  border-color: rgba(53,196,107,.28) !important;
  background: linear-gradient(135deg, #35c46b, #20b45b) !important;
  color: #fff !important;
  box-shadow: 0 14px 26px rgba(53,196,107,.20), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

body.app-shell .management-action.is-editing-action:hover:not(:disabled),
body.app-shell .management-action.is-save-action:hover:not(:disabled),
body.app-shell .management-action.is-editing-action:focus-visible,
body.app-shell .management-action.is-save-action:focus-visible {
  border-color: rgba(53,196,107,.36) !important;
  background: linear-gradient(135deg, #3fd576, #23bd61) !important;
  color: #fff !important;
}

body.app-shell .management-action.danger {
  border-color: rgba(239,95,111,.22) !important;
  background: #fffafa !important;
  color: #ef5f6f !important;
}

body.app-shell .management-action.danger:hover:not(:disabled),
body.app-shell .management-action.danger:focus-visible {
  border-color: rgba(239,95,111,.36) !important;
  background: #fff0f2 !important;
  color: #ef5f6f !important;
}

body.app-shell .management-action[disabled] {
  opacity: .42 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.025) !important;
}

/* 4) История: длинный текст не должен раздвигать карточку и съезжать на кнопки. */
body.app-shell .history-card-panel {
  overflow: hidden !important;
}

body.app-shell #historyList.history-list,
body.app-shell .history-card-panel .history-list {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  padding-right: 4px !important;
  scrollbar-gutter: stable !important;
}

body.app-shell .right-panel .history-item.history-card,
body.app-shell .right-panel .history-card,
body.app-shell .right-panel .history-item {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  gap: 8px !important;
  padding: 14px !important;
  border-radius: 18px !important;
}

body.app-shell .right-panel .history-item-body,
body.app-shell .right-panel .history-label-wrap {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body.app-shell .right-panel .history-item-top {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 8px !important;
}

body.app-shell .right-panel .history-item-top strong {
  max-width: 100% !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}

body.app-shell .right-panel .history-item-top time {
  white-space: nowrap !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

body.app-shell .right-panel .history-item-meta {
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.app-shell .right-panel .history-excerpt {
  max-width: 100% !important;
  max-height: 54px !important;
  margin: 2px 0 0 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

body.app-shell .right-panel .history-item-actions {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
  margin-top: 2px !important;
}

body.app-shell .right-panel .history-preview-btn,
body.app-shell .right-panel .history-restore-btn {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (prefers-reduced-motion: reduce) {
  body.app-shell .management-list .management-action,
  body.app-shell .management-action::after {
    transition: none !important;
  }
}

/* DataCaps step50 — centered expressive management icons + active article links. */
body.app-shell .management-panel,
body.app-shell .right-panel .management-panel.panel-card {
  --management-button: 70px;
  padding: 20px 22px 24px !important;
}

body.app-shell .management-list {
  display: grid !important;
  grid-template-columns: repeat(3, var(--management-button)) !important;
  grid-auto-rows: var(--management-button) !important;
  justify-content: center !important;
  align-content: center !important;
  gap: 14px !important;
  padding: 8px 0 0 !important;
}

body.app-shell .management-list .management-action {
  width: var(--management-button) !important;
  height: var(--management-button) !important;
  min-width: var(--management-button) !important;
  min-height: var(--management-button) !important;
  max-width: var(--management-button) !important;
  max-height: var(--management-button) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.93) !important;
  border: 1px solid rgba(31,41,55,.10) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.9) !important;
  overflow: visible !important;
  transform: translateZ(0) !important;
}

body.app-shell .management-list .management-action > span:not(.management-icon),
body.app-shell .management-list .management-action b,
body.app-shell .management-list .management-action small {
  display: none !important;
}

body.app-shell .management-action .management-icon {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: inherit !important;
  box-shadow: none !important;
  color: #7182ff !important;
}

body.app-shell .management-icon svg {
  width: 34px !important;
  height: 34px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform-origin: 50% 50% !important;
}

body.app-shell .management-action[data-dc-action="edit"] .management-icon svg { transform: translate(-1px, 1px) rotate(-7deg) scale(1.06) !important; }
body.app-shell .management-action[data-dc-action="properties"] .management-icon svg { transform: scale(1.04) !important; }
body.app-shell .management-action[data-dc-action="share"] .management-icon svg { transform: translate(1px, 0) rotate(-10deg) scale(1.04) !important; }
body.app-shell .management-action[data-dc-action="import"] .management-icon svg { transform: translate(0, 1px) scale(1.05) !important; }
body.app-shell .management-action[data-dc-action="export"] .management-icon svg { transform: translate(0, -1px) scale(1.05) !important; }
body.app-shell .management-action[data-dc-action="delete"] .management-icon svg { transform: scale(1.04) !important; }

body.app-shell .management-list .management-action:hover:not(:disabled),
body.app-shell .management-list .management-action:focus-visible {
  background: rgba(255,255,255,.98) !important;
  border-color: rgba(113,130,255,.36) !important;
  box-shadow: 0 14px 30px rgba(113,130,255,.18), inset 0 1px 0 rgba(255,255,255,.95) !important;
  transform: translateY(-2px) translateZ(0) !important;
}

body.app-shell .management-action.is-save-action .management-icon,
body.app-shell .management-action.is-editing-action .management-icon {
  color: #18b26b !important;
}

body.app-shell .management-action.is-save-action,
body.app-shell .management-action.is-editing-action {
  background: linear-gradient(180deg, rgba(238,255,247,.98), rgba(255,255,255,.96)) !important;
  border-color: rgba(24,178,107,.28) !important;
}

body.app-shell .management-action.danger {
  background: rgba(255,246,247,.94) !important;
  border-color: rgba(255,92,118,.26) !important;
}

body.app-shell .management-action.danger .management-icon {
  color: #ff5c76 !important;
}

body.app-shell .management-action.danger:hover:not(:disabled),
body.app-shell .management-action.danger:focus-visible {
  border-color: rgba(255,92,118,.42) !important;
  box-shadow: 0 14px 30px rgba(255,92,118,.16), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body.app-shell .dc-article-body a,
body.app-shell .dc-document-content a,
body.app-shell .page-view-content a,
body.app-shell .ql-editor a {
  color: #6172ff !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 3px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
}

body.app-shell .dc-article-body a:hover,
body.app-shell .dc-document-content a:hover,
body.app-shell .page-view-content a:hover,
body.app-shell .ql-editor a:hover {
  color: #4958de !important;
  text-decoration-thickness: 2px !important;
}

@media (max-width: 1320px) {
  body.app-shell .management-panel,
  body.app-shell .right-panel .management-panel.panel-card {
    --management-button: 64px;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.app-shell .management-list { gap: 12px !important; }
  body.app-shell .management-icon svg { width: 31px !important; height: 31px !important; }
}



/* DataCaps step51 — management icon centering reset.
   Fixes high-specificity hover/focus rules that were painting a background inside the icon span.
   Buttons stay as square tiles; only the SVG icon is centered and enlarged. */
body.app-shell .right-panel .management-panel.panel-card,
body.app-shell .management-panel.panel-card,
body.app-shell .management-panel {
  padding: 18px 20px 22px !important;
}

body.app-shell .management-list {
  --management-button: 68px !important;
  display: grid !important;
  grid-template-columns: repeat(3, var(--management-button)) !important;
  grid-auto-rows: var(--management-button) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 0 0 !important;
}

body.app-shell .management-list button.management-action,
body.app-shell .management-list .management-action,
body.app-shell .management-list .management-action.is-editing-action,
body.app-shell .management-list .management-action.is-save-action {
  position: relative !important;
  width: var(--management-button) !important;
  height: var(--management-button) !important;
  min-width: var(--management-button) !important;
  min-height: var(--management-button) !important;
  max-width: var(--management-button) !important;
  max-height: var(--management-button) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.94) !important;
  color: #7182ff !important;
  border: 1px solid rgba(31,41,55,.10) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.95) !important;
  overflow: visible !important;
  transform: translateZ(0) !important;
}

body.app-shell .management-list .management-action > span:not(.management-icon),
body.app-shell .management-list .management-action b,
body.app-shell .management-list .management-action small {
  display: none !important;
}

/* Kill every older inner icon chip, including hover/focus/is-save variants with higher specificity. */
body.app-shell .management-list .management-action .management-icon,
body.app-shell .management-list .management-action:hover:not(:disabled) .management-icon,
body.app-shell .management-list .management-action:focus-visible .management-icon,
body.app-shell .management-list .management-action.is-editing-action .management-icon,
body.app-shell .management-list .management-action.is-save-action .management-icon,
body.app-shell .management-list .management-action.danger .management-icon,
body.app-shell .management-list .management-action.danger:hover:not(:disabled) .management-icon,
body.app-shell .management-list .management-action.danger:focus-visible .management-icon {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: inherit !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  color: currentColor !important;
  overflow: visible !important;
}

body.app-shell .management-list .management-action .management-icon::before,
body.app-shell .management-list .management-action .management-icon::after {
  content: none !important;
  display: none !important;
}

body.app-shell .management-list .management-action .management-icon svg,
body.app-shell .management-icon svg {
  position: static !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: block !important;
  margin: 0 !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.35 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
}

/* Slightly different visual weights per icon, but still geometrically centered. */
body.app-shell .management-action[data-dc-action="edit"] .management-icon svg {
  width: 34px !important;
  height: 34px !important;
  stroke-width: 2.25 !important;
}
body.app-shell .management-action[data-dc-action="properties"] .management-icon svg {
  width: 31px !important;
  height: 31px !important;
  stroke-width: 2.45 !important;
}
body.app-shell .management-action[data-dc-action="share"] .management-icon svg {
  width: 33px !important;
  height: 33px !important;
  stroke-width: 2.25 !important;
}
body.app-shell .management-action[data-dc-action="import"] .management-icon svg,
body.app-shell .management-action[data-dc-action="export"] .management-icon svg {
  width: 32px !important;
  height: 32px !important;
  stroke-width: 2.35 !important;
}
body.app-shell .management-action[data-dc-action="delete"] .management-icon svg {
  width: 31px !important;
  height: 31px !important;
  stroke-width: 2.35 !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled),
body.app-shell .management-list .management-action:focus-visible {
  background: rgba(255,255,255,.99) !important;
  color: #6172ff !important;
  border-color: rgba(97,114,255,.34) !important;
  box-shadow: 0 14px 30px rgba(97,114,255,.15), inset 0 1px 0 rgba(255,255,255,.98) !important;
  transform: translateY(-2px) translateZ(0) !important;
}

body.app-shell .management-list .management-action.is-editing-action,
body.app-shell .management-list .management-action.is-save-action {
  color: #18b26b !important;
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(24,178,107,.24) !important;
}

body.app-shell .management-list .management-action.danger {
  color: #ff5c76 !important;
  background: rgba(255,250,251,.96) !important;
  border-color: rgba(255,92,118,.24) !important;
}

body.app-shell .management-list .management-action.danger:hover:not(:disabled),
body.app-shell .management-list .management-action.danger:focus-visible {
  color: #f0445f !important;
  border-color: rgba(255,92,118,.42) !important;
  box-shadow: 0 14px 30px rgba(255,92,118,.14), inset 0 1px 0 rgba(255,255,255,.98) !important;
}

@media (max-width: 1450px) {
  body.app-shell .management-list {
    --management-button: 64px !important;
    gap: 11px !important;
  }
  body.app-shell .management-list .management-action .management-icon svg,
  body.app-shell .management-icon svg {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }
}


/* DataCaps step52 — management compact + history stable */
body.app-shell .right-panel .panel-title .eyebrow,
body.app-shell .history-panel-head .eyebrow,
body.app-shell #historySubtitle {
  max-width: 148px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  line-height: 1.12 !important;
}

/* History: header only shows retention info; content stays clickable even during refresh. */
body.app-shell .history-list.is-refreshing {
  opacity: .72 !important;
  pointer-events: auto !important;
}

body.app-shell .history-card,
body.app-shell .history-item {
  min-height: 0 !important;
  overflow: visible !important;
  display: block !important;
  pointer-events: auto !important;
}

body.app-shell .history-item-body {
  min-width: 0 !important;
  display: grid !important;
  gap: 8px !important;
}

body.app-shell .history-item-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: start !important;
}

body.app-shell .history-label-wrap,
body.app-shell .history-item-meta {
  min-width: 0 !important;
}

body.app-shell .history-label-wrap strong {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.18 !important;
  max-width: 100% !important;
}

body.app-shell .history-item-meta {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.app-shell .history-item-top time {
  white-space: nowrap !important;
  font-size: 11px !important;
  color: #758097 !important;
}

body.app-shell .history-excerpt {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.55) !important;
  line-height: 1.38 !important;
  pointer-events: none !important;
}

body.app-shell .history-item-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  position: relative !important;
  z-index: 3 !important;
}

body.app-shell .history-preview-btn,
body.app-shell .history-restore-btn {
  min-width: 0 !important;
  width: 100% !important;
  height: 34px !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Management: compact, balanced, less massive. */
body.app-shell .management-panel {
  padding: 16px !important;
}

body.app-shell .management-list {
  display: grid !important;
  grid-template-columns: repeat(3, 58px) !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

body.app-shell .management-list .management-action {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  padding: 0 !important;
  border-radius: 18px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(31,41,55,.08) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.045) !important;
  transform: none !important;
  overflow: visible !important;
}

body.app-shell .management-list .management-action::before {
  content: none !important;
}

body.app-shell .management-action .management-icon {
  position: static !important;
  inset: auto !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--accent, #7c8cff) !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: none !important;
  transform: none !important;
}

body.app-shell .management-action .management-icon svg {
  width: 27px !important;
  height: 27px !important;
  stroke-width: 2.2 !important;
}

body.app-shell .management-action > span:last-child,
body.app-shell .management-action b,
body.app-shell .management-action small {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled),
body.app-shell .management-list .management-action:focus-visible {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--accent, #7c8cff) 28%, #fff) !important;
  box-shadow: 0 14px 26px rgba(15,23,42,.075) !important;
}

body.app-shell .management-action.is-save-action .management-icon {
  color: #19a974 !important;
}

body.app-shell .management-action.danger {
  background: rgba(255,246,247,.94) !important;
  border-color: rgba(255,99,120,.22) !important;
}

body.app-shell .management-action.danger .management-icon {
  color: #ff5c73 !important;
}

body.app-shell .management-list .management-action::after {
  content: attr(aria-label) !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 8px) !important;
  transform: translate(-50%, 4px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 50 !important;
  white-space: nowrap !important;
  max-width: 220px !important;
  padding: 7px 9px !important;
  border-radius: 9px !important;
  background: rgba(17,24,39,.94) !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  box-shadow: 0 12px 24px rgba(15,23,42,.20) !important;
  transition: opacity .14s ease, transform .14s ease !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled)::after,
body.app-shell .management-list .management-action:focus-visible::after {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

/* DataCaps step55 — isolated history renderer reset.
   Bypasses old .history-card/.history-item skeleton rules and keeps versions clickable. */
body.app-shell .history-card-panel {
  overflow: hidden !important;
}

body.app-shell #historyList.history-list.revision-list,
body.app-shell .history-card-panel #historyList.revision-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  min-height: 0 !important;
  max-height: min(500px, calc(100vh - 320px)) !important;
  padding: 0 5px 12px 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
  pointer-events: auto !important;
}

body.app-shell #historyList.revision-list.is-refreshing {
  opacity: .82 !important;
  pointer-events: auto !important;
}

body.app-shell .revision-card,
body.app-shell .revision-empty {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  border-radius: 18px !important;
  border: 1px solid rgba(31,41,55,.08) !important;
  background: rgba(247,249,252,.94) !important;
  color: #111827 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

body.app-shell .revision-empty {
  padding: 15px !important;
  color: #7a8499 !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

body.app-shell .revision-card {
  display: grid !important;
  gap: 9px !important;
  padding: 14px !important;
}

body.app-shell .revision-card-head {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 10px !important;
  align-items: start !important;
}

body.app-shell .revision-card-titlebox {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

body.app-shell .revision-card-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: #172033 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.22 !important;
  white-space: normal !important;
}

body.app-shell .revision-card-meta {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #6c768c !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

body.app-shell .revision-card-time {
  white-space: nowrap !important;
  color: #6f7a90 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

body.app-shell .revision-card-excerpt {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.72) !important;
  color: #647086 !important;
  font-size: 12px !important;
  line-height: 1.38 !important;
  overflow-wrap: anywhere !important;
  pointer-events: none !important;
}

body.app-shell .revision-card-actions {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  position: relative !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}

body.app-shell .revision-preview-btn,
body.app-shell .revision-restore-btn {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(31,41,55,.10) !important;
  background: rgba(255,255,255,.94) !important;
  color: #4b5567 !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  box-shadow: 0 6px 14px rgba(15,23,42,.035) !important;
}

body.app-shell .revision-restore-btn {
  border-color: rgba(124,140,255,.30) !important;
  background: #7c8cff !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(124,140,255,.18) !important;
}

body.app-shell .revision-preview-btn:hover,
body.app-shell .revision-preview-btn:focus-visible,
body.app-shell .revision-restore-btn:hover,
body.app-shell .revision-restore-btn:focus-visible {
  transform: translateY(-1px) !important;
  outline: none !important;
}

body.app-shell .revision-preview-btn:hover,
body.app-shell .revision-preview-btn:focus-visible {
  border-color: rgba(124,140,255,.26) !important;
  color: #5567ff !important;
}

body.app-shell .revision-restore-btn:hover,
body.app-shell .revision-restore-btn:focus-visible {
  filter: brightness(1.03) !important;
}

/* DataCaps step56 — explicit history rollback controls. */
body.app-shell .history-card-panel,
body.app-shell .side-card:has(#historyList) {
  overflow: hidden !important;
}

body.app-shell #historyList.history-list.revision-list-v2,
body.app-shell .history-card-panel #historyList.revision-list-v2 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: min(520px, calc(100vh - 320px)) !important;
  padding: 0 6px 14px 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
  pointer-events: auto !important;
}

body.app-shell #historyList.revision-list-v2 .revision-card,
body.app-shell #historyList.revision-list-v2 .history-card,
body.app-shell #historyList.revision-list-v2 .history-item {
  display: none !important;
}

body.app-shell .revision-restore-card {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(31,41,55,.08) !important;
  background: rgba(247,249,252,.96) !important;
  color: #111827 !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.035) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease !important;
}

body.app-shell .revision-restore-card:hover,
body.app-shell .revision-restore-card:focus-visible {
  transform: translateY(-1px) !important;
  border-color: rgba(124,140,255,.28) !important;
  background: #fff !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.07) !important;
  outline: none !important;
}

body.app-shell .revision-restore-head {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 10px !important;
  align-items: start !important;
}

body.app-shell .revision-restore-titlebox {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

body.app-shell .revision-restore-title {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #172033 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.22 !important;
}

body.app-shell .revision-restore-meta {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #6c768c !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

body.app-shell .revision-restore-time {
  white-space: nowrap !important;
  color: #6f7a90 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

body.app-shell .revision-restore-excerpt {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.74) !important;
  color: #647086 !important;
  font-size: 12px !important;
  line-height: 1.38 !important;
  overflow-wrap: anywhere !important;
  pointer-events: none !important;
}

body.app-shell .revision-restore-actions {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  pointer-events: auto !important;
}

body.app-shell .revision-restore-preview,
body.app-shell .revision-restore-apply {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(31,41,55,.10) !important;
  background: rgba(255,255,255,.96) !important;
  color: #4b5567 !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  box-shadow: 0 6px 14px rgba(15,23,42,.035) !important;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease !important;
}

body.app-shell .revision-restore-apply {
  border-color: rgba(124,140,255,.30) !important;
  background: #7c8cff !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(124,140,255,.18) !important;
}

body.app-shell .revision-restore-preview:hover,
body.app-shell .revision-restore-preview:focus-visible,
body.app-shell .revision-restore-apply:hover,
body.app-shell .revision-restore-apply:focus-visible {
  transform: translateY(-1px) !important;
  outline: none !important;
}

body.app-shell .revision-restore-preview:hover,
body.app-shell .revision-restore-preview:focus-visible {
  border-color: rgba(124,140,255,.28) !important;
  color: #5567ff !important;
}

body.app-shell .revision-restore-apply:hover,
body.app-shell .revision-restore-apply:focus-visible {
  filter: brightness(1.03) !important;
}

body.app-shell .history-panel-head #historySubtitle,
body.app-shell #historySubtitle {
  white-space: normal !important;
}



/* DataCaps step57 — management panel orbital polish.
   Minimal visual-only update: no JS behavior changes. */
body.app-shell .right-panel .management-panel,
body.app-shell .management-panel.panel-card,
body.app-shell .management-panel {
  position: relative !important;
  overflow: visible !important;
  padding: 18px 18px 20px !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(124,140,255,.12), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(154,217,191,.14), transparent 32%),
    rgba(255,255,255,.86) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 16px 36px rgba(15,23,42,.075) !important;
}

body.app-shell .management-panel::before {
  content: '' !important;
  position: absolute !important;
  inset: 10px !important;
  border-radius: 22px !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(124,140,255,.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(124,140,255,.045) 1px, transparent 1px) !important;
  background-size: 18px 18px !important;
  opacity: .45 !important;
  mask-image: radial-gradient(circle at 50% 50%, #000 0 45%, transparent 86%) !important;
}

body.app-shell .management-panel .panel-title,
body.app-shell .management-panel h3,
body.app-shell .management-panel .panel-title-row {
  position: relative !important;
  z-index: 2 !important;
}

body.app-shell .management-panel .panel-title {
  margin-bottom: 12px !important;
}

body.app-shell .management-list {
  --mg-size: 62px !important;
  --mg-gap: 12px !important;
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(3, var(--mg-size)) !important;
  grid-auto-rows: var(--mg-size) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: var(--mg-gap) !important;
  width: fit-content !important;
  margin: 14px auto 0 !important;
  padding: 0 !important;
}

body.app-shell .management-list .management-action,
body.app-shell .management-list button.management-action,
body.app-shell .management-list .management-action.is-editing-action,
body.app-shell .management-list .management-action.is-save-action {
  --mg-accent: var(--accent, #7c8cff);
  position: relative !important;
  width: var(--mg-size) !important;
  height: var(--mg-size) !important;
  min-width: var(--mg-size) !important;
  min-height: var(--mg-size) !important;
  max-width: var(--mg-size) !important;
  max-height: var(--mg-size) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 19px !important;
  display: grid !important;
  place-items: center !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,250,255,.90)) !important;
  border: 1px solid rgba(31,41,55,.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 9px 18px rgba(15,23,42,.055) !important;
  overflow: visible !important;
  transform: translateZ(0) !important;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease !important;
  cursor: pointer !important;
}

body.app-shell .management-list .management-action[data-dc-action="properties"] { --mg-accent: #8b9aff; }
body.app-shell .management-list .management-action[data-dc-action="share"] { --mg-accent: #7c8cff; }
body.app-shell .management-list .management-action[data-dc-action="import"] { --mg-accent: #6586ff; }
body.app-shell .management-list .management-action[data-dc-action="export"] { --mg-accent: #6d7df7; }
body.app-shell .management-list .management-action[data-dc-action="delete"] { --mg-accent: #ff5c73; }

body.app-shell .management-list .management-action::before {
  content: '' !important;
  position: absolute !important;
  inset: 6px !important;
  border-radius: 15px !important;
  background: radial-gradient(circle at 36% 28%, color-mix(in srgb, var(--mg-accent) 18%, transparent), transparent 62%) !important;
  opacity: .78 !important;
  pointer-events: none !important;
  transition: opacity .16s ease, transform .16s ease !important;
}

body.app-shell .management-list .management-action::after {
  content: attr(aria-label) !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 9px) !important;
  transform: translate(-50%, 5px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 80 !important;
  white-space: nowrap !important;
  max-width: 220px !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  background: rgba(17,24,39,.94) !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 720 !important;
  letter-spacing: -.01em !important;
  box-shadow: 0 12px 24px rgba(15,23,42,.20) !important;
  transition: opacity .14s ease, transform .14s ease !important;
}

body.app-shell .management-list .management-action .management-icon,
body.app-shell .management-list .management-action:hover:not(:disabled) .management-icon,
body.app-shell .management-list .management-action:focus-visible .management-icon,
body.app-shell .management-list .management-action.is-editing-action .management-icon,
body.app-shell .management-list .management-action.is-save-action .management-icon,
body.app-shell .management-list .management-action.danger .management-icon,
body.app-shell .management-list .management-action.danger:hover:not(:disabled) .management-icon,
body.app-shell .management-list .management-action.danger:focus-visible .management-icon {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  width: 35px !important;
  height: 35px !important;
  min-width: 35px !important;
  min-height: 35px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--mg-accent) !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
}

body.app-shell .management-list .management-action .management-icon::before,
body.app-shell .management-list .management-action .management-icon::after {
  content: none !important;
  display: none !important;
}

body.app-shell .management-list .management-action .management-icon svg,
body.app-shell .management-icon svg {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 4px 7px color-mix(in srgb, var(--mg-accent) 18%, transparent)) !important;
  transform-origin: 50% 50% !important;
  transition: transform .16s ease, filter .16s ease !important;
}

/* Make icons feel hand-placed/asymmetric without breaking centering. */
body.app-shell .management-action[data-dc-action="edit"] .management-icon svg { transform: translate(-1px, 1px) rotate(-8deg) scale(1.03) !important; }
body.app-shell .management-action[data-dc-action="properties"] .management-icon svg { transform: translate(0, 0) scale(1.08) !important; }
body.app-shell .management-action[data-dc-action="share"] .management-icon svg { transform: translate(1px, 0) rotate(-10deg) scale(1.04) !important; }
body.app-shell .management-action[data-dc-action="import"] .management-icon svg { transform: translate(0, 1px) scale(1.06) !important; }
body.app-shell .management-action[data-dc-action="export"] .management-icon svg { transform: translate(0, -1px) scale(1.06) !important; }
body.app-shell .management-action[data-dc-action="delete"] .management-icon svg { transform: translate(0, 0) scale(1.03) !important; }

body.app-shell .management-list .management-action > span:not(.management-icon),
body.app-shell .management-action b,
body.app-shell .management-action small {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled),
body.app-shell .management-list .management-action:focus-visible {
  transform: translateY(-3px) scale(1.015) !important;
  border-color: color-mix(in srgb, var(--mg-accent) 34%, #fff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 17px 30px rgba(15,23,42,.10),
    0 0 0 5px color-mix(in srgb, var(--mg-accent) 8%, transparent) !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled)::before,
body.app-shell .management-list .management-action:focus-visible::before {
  opacity: 1 !important;
  transform: scale(1.08) !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled)::after,
body.app-shell .management-list .management-action:focus-visible::after {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled) .management-icon svg,
body.app-shell .management-list .management-action:focus-visible .management-icon svg {
  filter: drop-shadow(0 7px 10px color-mix(in srgb, var(--mg-accent) 24%, transparent)) !important;
}

body.app-shell .management-list .management-action:active:not(:disabled) {
  transform: translateY(-1px) scale(.985) !important;
}

body.app-shell .management-action.is-save-action,
body.app-shell .management-action.is-editing-action {
  --mg-accent: #22c98a !important;
  border-color: rgba(34,201,138,.24) !important;
  background: linear-gradient(145deg, rgba(248,255,252,.98), rgba(236,255,247,.92)) !important;
}

body.app-shell .management-action.is-save-action .management-icon,
body.app-shell .management-action.is-editing-action .management-icon {
  color: #16a66f !important;
}

body.app-shell .management-action.danger {
  --mg-accent: #ff5c73 !important;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,246,248,.94)) !important;
  border-color: rgba(255,99,120,.25) !important;
}

body.app-shell .management-action.danger .management-icon {
  color: #ff526c !important;
}

body.app-shell .management-list .management-action:disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
  filter: grayscale(.18) !important;
  transform: none !important;
}

@media (max-width: 1450px) {
  body.app-shell .management-list { --mg-size: 58px !important; --mg-gap: 10px !important; }
  body.app-shell .management-list .management-action .management-icon,
  body.app-shell .management-list .management-action:hover:not(:disabled) .management-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; }
  body.app-shell .management-list .management-action .management-icon svg,
  body.app-shell .management-icon svg { width: 31px !important; height: 31px !important; min-width: 31px !important; min-height: 31px !important; }
}

/* DataCaps step58 — management stable icon grid rollback.
   This intentionally cancels the experimental/orbital styling from step57. */
body.app-shell .management-panel,
body.app-shell .right-panel .management-panel,
body.app-shell .management-panel.panel-card {
  overflow: visible !important;
}

body.app-shell .management-list {
  --mg-size: 56px !important;
  --mg-gap: 11px !important;
  display: grid !important;
  grid-template-columns: repeat(3, var(--mg-size)) !important;
  grid-auto-rows: var(--mg-size) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: var(--mg-gap) !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 14px auto 0 !important;
  padding: 0 !important;
}

body.app-shell .management-list .management-action,
body.app-shell .management-list button.management-action,
body.app-shell .management-list .management-action.is-editing-action,
body.app-shell .management-list .management-action.is-save-action,
body.app-shell .management-list .management-action.danger {
  --mg-accent: var(--accent, #7c8cff);
  position: relative !important;
  width: var(--mg-size) !important;
  height: var(--mg-size) !important;
  min-width: var(--mg-size) !important;
  min-height: var(--mg-size) !important;
  max-width: var(--mg-size) !important;
  max-height: var(--mg-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(31,41,55,.09) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.055) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  cursor: pointer !important;
  transform: none !important;
  filter: none !important;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease !important;
}

body.app-shell .management-list .management-action[data-dc-action="properties"] { --mg-accent: #7c8cff !important; }
body.app-shell .management-list .management-action[data-dc-action="share"] { --mg-accent: #7c8cff !important; }
body.app-shell .management-list .management-action[data-dc-action="import"] { --mg-accent: #7c8cff !important; }
body.app-shell .management-list .management-action[data-dc-action="export"] { --mg-accent: #7c8cff !important; }
body.app-shell .management-list .management-action[data-dc-action="delete"],
body.app-shell .management-list .management-action.danger { --mg-accent: #ff5c73 !important; }

body.app-shell .management-list .management-action::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: color-mix(in srgb, var(--mg-accent) 7%, transparent) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .14s ease !important;
  transform: none !important;
}

body.app-shell .management-list .management-action::after {
  content: attr(aria-label) !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 8px) !important;
  transform: translate(-50%, 4px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 2000 !important;
  white-space: nowrap !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  background: rgba(17,24,39,.94) !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 720 !important;
  box-shadow: 0 12px 24px rgba(15,23,42,.20) !important;
  transition: opacity .14s ease, transform .14s ease !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled),
body.app-shell .management-list .management-action:focus-visible {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--mg-accent) 32%, rgba(31,41,55,.09)) !important;
  box-shadow: 0 14px 24px rgba(15,23,42,.085), 0 0 0 4px color-mix(in srgb, var(--mg-accent) 9%, transparent) !important;
  outline: none !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled)::before,
body.app-shell .management-list .management-action:focus-visible::before { opacity: 1 !important; }

body.app-shell .management-list .management-action:hover:not(:disabled)::after,
body.app-shell .management-list .management-action:focus-visible::after {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

body.app-shell .management-list .management-action:active:not(:disabled) {
  transform: translateY(0) scale(.985) !important;
}

body.app-shell .management-list .management-action .management-icon,
body.app-shell .management-list .management-action:hover:not(:disabled) .management-icon,
body.app-shell .management-list .management-action:focus-visible .management-icon,
body.app-shell .management-list .management-action.is-editing-action .management-icon,
body.app-shell .management-list .management-action.is-save-action .management-icon,
body.app-shell .management-list .management-action.danger .management-icon,
body.app-shell .management-list .management-action.danger:hover:not(:disabled) .management-icon,
body.app-shell .management-list .management-action.danger:focus-visible .management-icon {
  position: static !important;
  inset: auto !important;
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
  min-height: 31px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--mg-accent) !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  z-index: 2 !important;
}

body.app-shell .management-list .management-action .management-icon::before,
body.app-shell .management-list .management-action .management-icon::after {
  content: none !important;
  display: none !important;
}

body.app-shell .management-list .management-action .management-icon svg,
body.app-shell .management-icon svg {
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
  min-height: 31px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: none !important;
  transform: none !important;
  transform-origin: center !important;
}

body.app-shell .management-action[data-dc-action="edit"] .management-icon svg,
body.app-shell .management-action[data-dc-action="properties"] .management-icon svg,
body.app-shell .management-action[data-dc-action="share"] .management-icon svg,
body.app-shell .management-action[data-dc-action="import"] .management-icon svg,
body.app-shell .management-action[data-dc-action="export"] .management-icon svg,
body.app-shell .management-action[data-dc-action="delete"] .management-icon svg {
  transform: none !important;
}

body.app-shell .management-action.is-save-action,
body.app-shell .management-action.is-editing-action {
  --mg-accent: #22b981 !important;
  border-color: rgba(34,185,129,.24) !important;
  background: rgba(248,255,252,.96) !important;
}

body.app-shell .management-action.is-save-action .management-icon,
body.app-shell .management-action.is-editing-action .management-icon { color: #16a66f !important; }

body.app-shell .management-action.danger {
  border-color: rgba(255,92,115,.24) !important;
  background: rgba(255,247,249,.96) !important;
}
body.app-shell .management-action.danger .management-icon { color: #ff526c !important; }

body.app-shell .management-list .management-action > span:not(.management-icon),
body.app-shell .management-action b,
body.app-shell .management-action small {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 1280px) {
  body.app-shell .management-list { --mg-size: 54px !important; --mg-gap: 10px !important; }
  body.app-shell .management-list .management-action .management-icon,
  body.app-shell .management-list .management-action:hover:not(:disabled) .management-icon { width: 29px !important; height: 29px !important; min-width: 29px !important; min-height: 29px !important; }
  body.app-shell .management-list .management-action .management-icon svg,
  body.app-shell .management-icon svg { width: 29px !important; height: 29px !important; min-width: 29px !important; min-height: 29px !important; }
}

/* DataCaps step60 — management orb dock.
   Новый вариант панели: компактные круглые icon-only кнопки в спокойном dock-контейнере.
   Без текста внутри; подписи только в tooltip. */
body.app-shell .right-panel .management-panel,
body.app-shell .management-panel.panel-card,
body.app-shell .management-panel {
  padding: 18px 18px 20px !important;
  border-radius: 28px !important;
  overflow: visible !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80)) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.07) !important;
}

body.app-shell .management-panel .panel-head,
body.app-shell .management-panel .right-card-head,
body.app-shell .management-panel > header {
  margin-bottom: 12px !important;
}

body.app-shell .management-list {
  --mg-size: 46px !important;
  --mg-gap: 10px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 10px auto 0 !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-columns: repeat(3, var(--mg-size)) !important;
  grid-auto-rows: var(--mg-size) !important;
  gap: var(--mg-gap) !important;
  justify-content: center !important;
  align-items: center !important;
  border: 1px solid rgba(31,41,55,.075) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(124,140,255,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(248,250,252,.72)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 10px 24px rgba(15,23,42,.045) !important;
  overflow: visible !important;
}

body.app-shell .management-list .management-action,
body.app-shell .management-list button.management-action,
body.app-shell .management-list .management-action.is-editing-action,
body.app-shell .management-list .management-action.is-save-action,
body.app-shell .management-list .management-action.danger {
  --mg-accent: var(--accent, #7c8cff) !important;
  position: relative !important;
  width: var(--mg-size) !important;
  height: var(--mg-size) !important;
  min-width: var(--mg-size) !important;
  min-height: var(--mg-size) !important;
  max-width: var(--mg-size) !important;
  max-height: var(--mg-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid color-mix(in srgb, var(--mg-accent) 18%, rgba(31,41,55,.08)) !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.98), rgba(255,255,255,.72) 48%, color-mix(in srgb, var(--mg-accent) 7%, #fff) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 8px 18px rgba(15,23,42,.065) !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  cursor: pointer !important;
  transform: none !important;
  filter: none !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

body.app-shell .management-list .management-action[data-dc-action="edit"],
body.app-shell .management-list .management-action[data-dc-action="properties"],
body.app-shell .management-list .management-action[data-dc-action="share"],
body.app-shell .management-list .management-action[data-dc-action="import"],
body.app-shell .management-list .management-action[data-dc-action="export"] {
  --mg-accent: #7283ff !important;
}

body.app-shell .management-list .management-action[data-dc-action="delete"],
body.app-shell .management-list .management-action.danger {
  --mg-accent: #ff5c73 !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.98), rgba(255,255,255,.76) 48%, rgba(255,92,115,.10) 100%) !important;
  border-color: rgba(255,92,115,.24) !important;
}

body.app-shell .management-list .management-action::before {
  content: '' !important;
  position: absolute !important;
  inset: -5px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--mg-accent) 22%, transparent), transparent 68%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .16s ease !important;
  transform: none !important;
}

body.app-shell .management-list .management-action::after {
  content: attr(aria-label) !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 10px) !important;
  transform: translate(-50%, 5px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 2500 !important;
  white-space: nowrap !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  background: rgba(17,24,39,.94) !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 760 !important;
  box-shadow: 0 12px 24px rgba(15,23,42,.20) !important;
  transition: opacity .14s ease, transform .14s ease !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled),
body.app-shell .management-list .management-action:focus-visible {
  transform: translateY(-2px) scale(1.035) !important;
  border-color: color-mix(in srgb, var(--mg-accent) 42%, rgba(31,41,55,.08)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 14px 26px rgba(15,23,42,.10),
    0 0 0 5px color-mix(in srgb, var(--mg-accent) 10%, transparent) !important;
  outline: none !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled)::before,
body.app-shell .management-list .management-action:focus-visible::before {
  opacity: 1 !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled)::after,
body.app-shell .management-list .management-action:focus-visible::after {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

body.app-shell .management-list .management-action:active:not(:disabled) {
  transform: translateY(0) scale(.98) !important;
}

body.app-shell .management-list .management-action .management-icon,
body.app-shell .management-list .management-action:hover:not(:disabled) .management-icon,
body.app-shell .management-list .management-action:focus-visible .management-icon,
body.app-shell .management-list .management-action.is-editing-action .management-icon,
body.app-shell .management-list .management-action.is-save-action .management-icon,
body.app-shell .management-list .management-action.danger .management-icon,
body.app-shell .management-list .management-action.danger:hover:not(:disabled) .management-icon,
body.app-shell .management-list .management-action.danger:focus-visible .management-icon {
  position: static !important;
  inset: auto !important;
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  min-height: 29px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--mg-accent) !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  z-index: 2 !important;
}

body.app-shell .management-list .management-action .management-icon::before,
body.app-shell .management-list .management-action .management-icon::after {
  content: none !important;
  display: none !important;
}

body.app-shell .management-list .management-action .management-icon svg,
body.app-shell .management-icon svg {
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  min-height: 29px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.35 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 5px 10px color-mix(in srgb, currentColor 14%, transparent)) !important;
  transform-origin: center !important;
}

body.app-shell .management-action[data-dc-action="edit"] .management-icon svg { transform: translate(-1px, 1px) scale(1.02) !important; }
body.app-shell .management-action[data-dc-action="properties"] .management-icon svg { transform: scale(1.06) !important; }
body.app-shell .management-action[data-dc-action="share"] .management-icon svg { transform: translate(1px, 0) scale(1.02) !important; }
body.app-shell .management-action[data-dc-action="import"] .management-icon svg { transform: translate(0, 1px) scale(1.04) !important; }
body.app-shell .management-action[data-dc-action="export"] .management-icon svg { transform: translate(0, -1px) scale(1.04) !important; }
body.app-shell .management-action[data-dc-action="delete"] .management-icon svg { transform: scale(1.02) !important; }

body.app-shell .management-action.is-save-action,
body.app-shell .management-action.is-editing-action {
  --mg-accent: #20b87d !important;
  border-color: rgba(32,184,125,.28) !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.98), rgba(255,255,255,.76) 48%, rgba(32,184,125,.11) 100%) !important;
}

body.app-shell .management-action.is-save-action .management-icon,
body.app-shell .management-action.is-editing-action .management-icon {
  color: #16a66f !important;
}

body.app-shell .management-list .management-action > span:not(.management-icon),
body.app-shell .management-action b,
body.app-shell .management-action small {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 1280px) {
  body.app-shell .management-list { --mg-size: 44px !important; --mg-gap: 9px !important; padding: 10px !important; }
  body.app-shell .management-list .management-action .management-icon,
  body.app-shell .management-list .management-action:hover:not(:disabled) .management-icon { width: 27px !important; height: 27px !important; min-width: 27px !important; min-height: 27px !important; }
  body.app-shell .management-list .management-action .management-icon svg,
  body.app-shell .management-icon svg { width: 27px !important; height: 27px !important; min-width: 27px !important; min-height: 27px !important; }
}

/* DataCaps step61 — management panel try.
   A fuller mini-widget: subtitle + compact inner pad + icon-only action buttons.
   Appended both to app.css and custom/app-custom.css because custom loads last. */
body.app-shell .right-panel .management-panel,
body.app-shell .management-panel.panel-card,
body.app-shell .management-panel {
  position: relative !important;
  overflow: hidden !important;
  padding: 18px 18px 20px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 88% 18%, rgba(124,140,255,.13), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82)) !important;
  border: 1px solid rgba(255,255,255,.76) !important;
  box-shadow: 0 18px 44px rgba(15,23,42,.075) !important;
}

body.app-shell .management-panel::before {
  content: '' !important;
  position: absolute !important;
  right: 16px !important;
  top: 16px !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 20px !important;
  background:
    linear-gradient(90deg, rgba(124,140,255,.10) 1px, transparent 1px),
    linear-gradient(0deg, rgba(124,140,255,.08) 1px, transparent 1px) !important;
  background-size: 12px 12px !important;
  opacity: .28 !important;
  pointer-events: none !important;
  transform: rotate(7deg) !important;
}

body.app-shell .management-panel .management-title,
body.app-shell .management-panel .panel-title {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.app-shell .management-panel .panel-title h3 {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  letter-spacing: -.035em !important;
  color: #171a27 !important;
  font-weight: 900 !important;
}

body.app-shell .management-subtitle {
  display: block !important;
  margin: 5px 0 0 !important;
  color: #8490a5 !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  font-weight: 720 !important;
  letter-spacing: -.01em !important;
}

body.app-shell .management-count {
  align-self: flex-start !important;
  display: inline-flex !important;
  height: 22px !important;
  padding: 0 8px !important;
  align-items: center !important;
  border-radius: 999px !important;
  background: rgba(124,140,255,.09) !important;
  color: #7782a1 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  white-space: nowrap !important;
}

body.app-shell .management-list {
  --mg-size: 58px !important;
  --mg-gap: 10px !important;
  position: relative !important;
  z-index: 2 !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-columns: repeat(3, var(--mg-size)) !important;
  grid-auto-rows: var(--mg-size) !important;
  gap: var(--mg-gap) !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 36% 18%, rgba(124,140,255,.08), transparent 34%),
    rgba(248,250,252,.72) !important;
  border: 1px solid rgba(31,41,55,.075) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 16px 34px rgba(15,23,42,.06) !important;
}

body.app-shell .management-list .management-action,
body.app-shell .management-list button.management-action,
body.app-shell .management-list .management-action.is-editing-action,
body.app-shell .management-list .management-action.is-save-action,
body.app-shell .management-list .management-action.danger {
  --mg-accent: #7382ff;
  position: relative !important;
  width: var(--mg-size) !important;
  height: var(--mg-size) !important;
  min-width: var(--mg-size) !important;
  min-height: var(--mg-size) !important;
  max-width: var(--mg-size) !important;
  max-height: var(--mg-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(31,41,55,.09) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.86)) !important;
  color: var(--mg-accent) !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 10px 22px rgba(15,23,42,.07) !important;
  cursor: pointer !important;
  overflow: visible !important;
  transform: translateZ(0) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease !important;
}

body.app-shell .management-list .management-action[data-dc-action="edit"] { --mg-accent: #7382ff !important; }
body.app-shell .management-list .management-action[data-dc-action="properties"] { --mg-accent: #6c7aff !important; }
body.app-shell .management-list .management-action[data-dc-action="share"] { --mg-accent: #6375ff !important; }
body.app-shell .management-list .management-action[data-dc-action="import"] { --mg-accent: #6d80ff !important; }
body.app-shell .management-list .management-action[data-dc-action="export"] { --mg-accent: #6d80ff !important; }
body.app-shell .management-list .management-action[data-dc-action="delete"],
body.app-shell .management-list .management-action.danger { --mg-accent: #ff5c73 !important; }

body.app-shell .management-list .management-action:hover:not(:disabled),
body.app-shell .management-list .management-action:focus-visible {
  transform: translateY(-3px) !important;
  border-color: color-mix(in srgb, var(--mg-accent) 40%, rgba(31,41,55,.08)) !important;
  color: var(--mg-accent) !important;
  background:
    radial-gradient(circle at 34% 22%, color-mix(in srgb, var(--mg-accent) 12%, transparent), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.88)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 16px 30px rgba(15,23,42,.105),
    0 0 0 5px color-mix(in srgb, var(--mg-accent) 10%, transparent) !important;
  outline: none !important;
}

body.app-shell .management-list .management-action:active:not(:disabled) {
  transform: translateY(-1px) scale(.97) !important;
}

body.app-shell .management-list .management-action .management-icon,
body.app-shell .management-list .management-action:hover:not(:disabled) .management-icon,
body.app-shell .management-list .management-action:focus-visible .management-icon,
body.app-shell .management-list .management-action.is-editing-action .management-icon,
body.app-shell .management-list .management-action.is-save-action .management-icon,
body.app-shell .management-list .management-action.danger .management-icon,
body.app-shell .management-list .management-action.danger:hover:not(:disabled) .management-icon,
body.app-shell .management-list .management-action.danger:focus-visible .management-icon {
  position: static !important;
  inset: auto !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--mg-accent) !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

body.app-shell .management-list .management-action .management-icon::before,
body.app-shell .management-list .management-action .management-icon::after {
  content: none !important;
  display: none !important;
}

body.app-shell .management-list .management-action .management-icon svg,
body.app-shell .management-icon svg {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 6px 12px color-mix(in srgb, currentColor 16%, transparent)) !important;
  transform-origin: center !important;
}

body.app-shell .management-action[data-dc-action="edit"] .management-icon svg { transform: translate(-1px, 1px) scale(1.05) !important; }
body.app-shell .management-action[data-dc-action="properties"] .management-icon svg { transform: scale(1.08) !important; }
body.app-shell .management-action[data-dc-action="share"] .management-icon svg { transform: translate(1px, 0) scale(1.06) !important; }
body.app-shell .management-action[data-dc-action="import"] .management-icon svg { transform: translate(0, 1px) scale(1.05) !important; }
body.app-shell .management-action[data-dc-action="export"] .management-icon svg { transform: translate(0, -1px) scale(1.05) !important; }
body.app-shell .management-action[data-dc-action="delete"] .management-icon svg { transform: scale(1.04) !important; }

body.app-shell .management-list .management-action::after {
  content: attr(aria-label) !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 8px) !important;
  transform: translate(-50%, 6px) !important;
  padding: 6px 9px !important;
  border-radius: 9px !important;
  background: #111827 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .16s ease, transform .16s ease !important;
  z-index: 50 !important;
  box-shadow: 0 12px 24px rgba(15,23,42,.18) !important;
}

body.app-shell .management-list .management-action:hover:not(:disabled)::after,
body.app-shell .management-list .management-action:focus-visible::after {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

body.app-shell .management-action.is-save-action,
body.app-shell .management-action.is-editing-action {
  --mg-accent: #20b87d !important;
  border-color: rgba(32,184,125,.30) !important;
}

body.app-shell .management-list .management-action > span:not(.management-icon),
body.app-shell .management-action b,
body.app-shell .management-action small {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 1280px) {
  body.app-shell .management-list { --mg-size: 54px !important; --mg-gap: 9px !important; padding: 10px !important; }
  body.app-shell .management-list .management-action .management-icon,
  body.app-shell .management-list .management-action:hover:not(:disabled) .management-icon { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; }
  body.app-shell .management-list .management-action .management-icon svg,
  body.app-shell .management-icon svg { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; }
  body.app-shell .management-count { display: none !important; }
}

/* Step64 — targeted management widget rebuild. Scoped only to right management panel. */
body.app-shell .management-panel-v2 {
  padding: 22px !important;
  border-radius: 28px !important;
  overflow: visible !important;
}
body.app-shell .management-panel-v2 .management-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
}
body.app-shell .management-panel-v2 .management-head h3 {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
  color: #161b2d !important;
}
body.app-shell .management-panel-v2 .management-head p {
  margin: 7px 0 0 !important;
  color: #7a859c !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}
body.app-shell .management-panel-v2 .management-board {
  display: grid !important;
  grid-template-columns: 1.24fr 1fr 1fr !important;
  grid-auto-rows: 68px !important;
  gap: 9px !important;
  padding: 10px !important;
  border-radius: 23px !important;
  border: 1px solid rgba(31,41,55,.075) !important;
  background:
    radial-gradient(circle at 14% 12%, rgba(124,140,255,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.82)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 30px rgba(15,23,42,.045) !important;
}
body.app-shell .management-panel-v2 .management-action {
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  padding: 11px 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(31,41,55,.085) !important;
  background: rgba(255,255,255,.92) !important;
  color: #6677ff !important;
  box-shadow: 0 8px 19px rgba(15,23,42,.055) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease !important;
}
body.app-shell .management-panel-v2 .management-action::before {
  content: '' !important;
  position: absolute !important;
  inset: -45% !important;
  background: radial-gradient(circle at 35% 30%, rgba(124,140,255,.18), transparent 38%) !important;
  opacity: 0 !important;
  transition: opacity .16s ease !important;
  pointer-events: none !important;
}
body.app-shell .management-panel-v2 .management-action:hover,
body.app-shell .management-panel-v2 .management-action:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(124,140,255,.32) !important;
  box-shadow: 0 14px 30px rgba(124,140,255,.14), 0 8px 18px rgba(15,23,42,.05) !important;
  outline: none !important;
}
body.app-shell .management-panel-v2 .management-action:hover::before,
body.app-shell .management-panel-v2 .management-action:focus-visible::before { opacity: 1 !important; }
body.app-shell .management-panel-v2 .management-action:active { transform: translateY(0) scale(.985) !important; }
body.app-shell .management-panel-v2 .management-icon {
  position: relative !important;
  z-index: 1 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: none !important;
  color: currentColor !important;
}
body.app-shell .management-panel-v2 .management-icon svg {
  width: 26px !important;
  height: 26px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
body.app-shell .management-panel-v2 .management-copy {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
  text-align: left !important;
}
body.app-shell .management-panel-v2 .management-copy b {
  color: #161b2d !important;
  font-size: 13px !important;
  line-height: 1.05 !important;
  letter-spacing: -.025em !important;
  font-weight: 880 !important;
  white-space: nowrap !important;
}
body.app-shell .management-panel-v2 .management-copy small {
  color: #8a95aa !important;
  font-size: 10.5px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}
body.app-shell .management-panel-v2 .management-primary {
  grid-row: span 2 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: 14px !important;
  background: linear-gradient(145deg, rgba(124,140,255,.12), rgba(255,255,255,.92)) !important;
  border-color: rgba(124,140,255,.20) !important;
}
body.app-shell .management-panel-v2 .management-primary .management-icon {
  width: 38px !important;
  height: 38px !important;
}
body.app-shell .management-panel-v2 .management-primary .management-icon svg {
  width: 34px !important;
  height: 34px !important;
  stroke-width: 2.05 !important;
}
body.app-shell .management-panel-v2 .management-primary .management-copy b { font-size: 14px !important; }
body.app-shell .management-panel-v2 .management-primary.is-save-action,
body.app-shell .management-panel-v2 .management-primary.is-editing-action {
  color: #22a06b !important;
  background: linear-gradient(145deg, rgba(34,160,107,.13), rgba(255,255,255,.94)) !important;
  border-color: rgba(34,160,107,.28) !important;
}
body.app-shell .management-panel-v2 .management-danger,
body.app-shell .management-panel-v2 .management-action.danger {
  color: #ff5f74 !important;
  border-color: rgba(255,95,116,.22) !important;
  background: linear-gradient(145deg, rgba(255,95,116,.08), rgba(255,255,255,.94)) !important;
}
body.app-shell .management-panel-v2 .management-danger:hover,
body.app-shell .management-panel-v2 .management-action.danger:hover,
body.app-shell .management-panel-v2 .management-danger:focus-visible {
  border-color: rgba(255,95,116,.38) !important;
  box-shadow: 0 14px 30px rgba(255,95,116,.12), 0 8px 18px rgba(15,23,42,.05) !important;
}
body.app-shell .management-panel-v2 .management-note {
  margin: 11px 2px 0 !important;
  color: #8a95aa !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}
@media (max-width: 1380px) {
  body.app-shell .management-panel-v2 .management-board {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 58px !important;
  }
  body.app-shell .management-panel-v2 .management-primary {
    grid-row: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
  }
  body.app-shell .management-panel-v2 .management-copy small { display: none !important; }
  body.app-shell .management-panel-v2 .management-copy b { font-size: 12.5px !important; }
  body.app-shell .management-panel-v2 .management-icon,
  body.app-shell .management-panel-v2 .management-primary .management-icon { width: 27px !important; height: 27px !important; min-width: 27px !important; }
  body.app-shell .management-panel-v2 .management-icon svg,
  body.app-shell .management-panel-v2 .management-primary .management-icon svg { width: 25px !important; height: 25px !important; }
}

/* Step65 — restore right history + safer management widget.
   This intentionally overrides only the right rail management/history area. */
body.app-shell .right-panel.history-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  min-height: 0 !important;
  overflow: visible !important;
}
body.app-shell.no-page-selected .right-panel.history-panel .management-panel,
body.app-shell.no-page-selected .right-panel.history-panel .history-card-panel {
  display: none !important;
}
body.app-shell:not(.no-page-selected) .right-panel.history-panel .home-create-panel {
  display: none !important;
}
body.app-shell:not(.no-page-selected) .right-panel.history-panel .management-panel-v65,
body.app-shell:not(.no-page-selected) .right-panel.history-panel .history-card-panel {
  display: flex !important;
}

body.app-shell .right-panel .management-panel-v65 {
  padding: 18px !important;
  border-radius: 28px !important;
  overflow: visible !important;
  flex-direction: column !important;
  gap: 13px !important;
  background: rgba(255,255,255,.88) !important;
}
body.app-shell .management-panel-v65 .management-head {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 3px !important;
  margin: 0 !important;
}
body.app-shell .management-panel-v65 .management-head h3 {
  margin: 0 !important;
  color: #151827 !important;
  font-size: 15px !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  font-weight: 900 !important;
}
body.app-shell .management-panel-v65 .management-head p {
  margin: 4px 0 0 !important;
  color: #7d879c !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  font-weight: 720 !important;
}
body.app-shell .management-panel-v65 .management-board {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 68px !important;
  gap: 9px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.app-shell .management-panel-v65 .management-action {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 68px !important;
  min-height: 68px !important;
  padding: 8px 6px 7px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(31,41,55,.085) !important;
  background: rgba(255,255,255,.96) !important;
  color: #6f7cff !important;
  display: grid !important;
  grid-template-rows: 30px minmax(0,1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 4px !important;
  overflow: hidden !important;
  box-shadow: 0 9px 20px rgba(15,23,42,.055) !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease !important;
}
body.app-shell .management-panel-v65 .management-action::before {
  content: '' !important;
  position: absolute !important;
  inset: auto 14px 7px 14px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  opacity: .16 !important;
  transform: scaleX(.62) !important;
  transition: opacity .16s ease, transform .16s ease !important;
}
body.app-shell .management-panel-v65 .management-action:hover,
body.app-shell .management-panel-v65 .management-action:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(124,140,255,.34) !important;
  background: #fff !important;
  box-shadow: 0 14px 28px rgba(124,140,255,.13), 0 8px 16px rgba(15,23,42,.045) !important;
  outline: none !important;
}
body.app-shell .management-panel-v65 .management-action:hover::before,
body.app-shell .management-panel-v65 .management-action:focus-visible::before {
  opacity: .34 !important;
  transform: scaleX(1) !important;
}
body.app-shell .management-panel-v65 .management-action:active {
  transform: translateY(0) scale(.985) !important;
}
body.app-shell .management-panel-v65 .management-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
  color: currentColor !important;
  transform: none !important;
}
body.app-shell .management-panel-v65 .management-icon svg {
  width: 27px !important;
  height: 27px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
body.app-shell .management-panel-v65 .management-copy {
  min-width: 0 !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  position: relative !important;
  z-index: 1 !important;
}
body.app-shell .management-panel-v65 .management-copy b {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #182033 !important;
  font-size: 10.5px !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
  font-weight: 850 !important;
}
body.app-shell .management-panel-v65 .management-copy small {
  display: none !important;
}
body.app-shell .management-panel-v65 .management-primary {
  color: #6677ff !important;
  border-color: rgba(124,140,255,.20) !important;
  background: linear-gradient(145deg, rgba(124,140,255,.08), rgba(255,255,255,.96)) !important;
}
body.app-shell .management-panel-v65 .management-primary.is-save-action,
body.app-shell .management-panel-v65 .management-primary.is-editing-action {
  color: #22a06b !important;
  border-color: rgba(34,160,107,.28) !important;
  background: linear-gradient(145deg, rgba(34,160,107,.10), rgba(255,255,255,.96)) !important;
}
body.app-shell .management-panel-v65 .management-primary.is-save-action .management-copy b,
body.app-shell .management-panel-v65 .management-primary.is-editing-action .management-copy b {
  color: #16734e !important;
}
body.app-shell .management-panel-v65 .management-danger,
body.app-shell .management-panel-v65 .management-action.danger {
  color: #ff5f74 !important;
  border-color: rgba(255,95,116,.22) !important;
  background: linear-gradient(145deg, rgba(255,95,116,.08), rgba(255,255,255,.96)) !important;
}
body.app-shell .management-panel-v65 .management-danger .management-copy b,
body.app-shell .management-panel-v65 .management-action.danger .management-copy b {
  color: #d84f62 !important;
}

body.app-shell .history-card-panel {
  display: flex !important;
  flex-direction: column !important;
  min-height: 260px !important;
  max-height: calc(100vh - 410px) !important;
  padding: 18px !important;
  border-radius: 28px !important;
  overflow: hidden !important;
}
body.app-shell .history-card-panel .panel-title {
  flex: 0 0 auto !important;
  margin-bottom: 12px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr) 38px !important;
  align-items: center !important;
  gap: 10px !important;
}
body.app-shell .history-card-panel .panel-title h3 {
  margin: 0 !important;
  white-space: nowrap !important;
}
body.app-shell .history-card-panel #historySubtitle {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  max-height: 2.4em !important;
  color: #8a95aa !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
}
body.app-shell .history-card-panel #historyRefreshBtn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 14px !important;
}
body.app-shell #historyList.history-list,
body.app-shell #historyList.history-list.revision-list,
body.app-shell #historyList.history-list.revision-list-v2 {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: 10px !important;
  padding: 0 6px 12px 0 !important;
  pointer-events: auto !important;
}
body.app-shell .revision-restore-card {
  pointer-events: auto !important;
  cursor: pointer !important;
}
body.app-shell .revision-restore-excerpt {
  -webkit-line-clamp: 2 !important;
}
body.app-shell .revision-restore-actions {
  pointer-events: auto !important;
}
body.app-shell .revision-restore-preview,
body.app-shell .revision-restore-apply {
  pointer-events: auto !important;
}
@media (max-width: 1380px) {
  body.app-shell .management-panel-v65 .management-board {
    grid-auto-rows: 64px !important;
  }
  body.app-shell .management-panel-v65 .management-action {
    height: 64px !important;
    min-height: 64px !important;
  }
  body.app-shell .management-panel-v65 .management-copy b {
    font-size: 10px !important;
  }
  body.app-shell .history-card-panel {
    max-height: calc(100vh - 390px) !important;
  }
}



/* Step66 — management buttons clean-up.
   Fixes inner blue block on hover, removes underline strips, centers icon-only buttons. */
body.app-shell .management-panel-v65 {
  padding: 18px 18px 20px !important;
  gap: 14px !important;
}
body.app-shell .management-panel-v65 .management-board {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: 62px !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.app-shell .management-panel-v65 .management-action,
body.app-shell .management-panel-v65 .management-action:hover,
body.app-shell .management-panel-v65 .management-action:focus-visible,
body.app-shell .management-panel-v65 .management-action:active {
  position: relative !important;
  width: 100% !important;
  height: 62px !important;
  min-height: 62px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 18px !important;
  display: grid !important;
  place-items: center !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  overflow: visible !important;
}
body.app-shell .management-panel-v65 .management-action::before,
body.app-shell .management-panel-v65 .management-action::after,
body.app-shell .management-panel-v65 .management-action:hover::before,
body.app-shell .management-panel-v65 .management-action:hover::after,
body.app-shell .management-panel-v65 .management-action:focus-visible::before,
body.app-shell .management-panel-v65 .management-action:focus-visible::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  height: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.app-shell .management-panel-v65 .management-copy,
body.app-shell .management-panel-v65 .management-copy b,
body.app-shell .management-panel-v65 .management-copy small {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}
body.app-shell .management-panel-v65 .management-icon,
body.app-shell .management-panel-v65 .management-action:hover .management-icon,
body.app-shell .management-panel-v65 .management-action:focus-visible .management-icon,
body.app-shell .management-panel-v65 .management-primary .management-icon,
body.app-shell .management-panel-v65 .management-primary:hover .management-icon,
body.app-shell .management-panel-v65 .management-danger .management-icon,
body.app-shell .management-panel-v65 .management-danger:hover .management-icon,
body.app-shell .management-panel-v65 .management-action.danger .management-icon,
body.app-shell .management-panel-v65 .management-action.danger:hover .management-icon {
  position: static !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: currentColor !important;
  transform: none !important;
}
body.app-shell .management-panel-v65 .management-icon svg,
body.app-shell .management-panel-v65 .management-action:hover .management-icon svg,
body.app-shell .management-panel-v65 .management-action:focus-visible .management-icon svg {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  display: block !important;
  margin: 0 !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform: none !important;
}
body.app-shell .management-panel-v65 .management-action {
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(31,41,55,.09) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.045) !important;
}
body.app-shell .management-panel-v65 .management-action:hover,
body.app-shell .management-panel-v65 .management-action:focus-visible {
  background: #fff !important;
  border-color: rgba(124,140,255,.30) !important;
  box-shadow: 0 14px 28px rgba(124,140,255,.13), 0 8px 16px rgba(15,23,42,.045) !important;
  transform: translateY(-2px) !important;
}
body.app-shell .management-panel-v65 .management-action:active {
  transform: translateY(0) scale(.985) !important;
}
body.app-shell .management-panel-v65 .management-primary {
  color: #6677ff !important;
  border-color: rgba(124,140,255,.20) !important;
  background: rgba(255,255,255,.96) !important;
}
body.app-shell .management-panel-v65 .management-primary.is-save-action,
body.app-shell .management-panel-v65 .management-primary.is-editing-action {
  color: #22a06b !important;
  border-color: rgba(34,160,107,.28) !important;
  background: rgba(245,255,250,.96) !important;
}
body.app-shell .management-panel-v65 .management-danger,
body.app-shell .management-panel-v65 .management-action.danger {
  color: #ff5f74 !important;
  border-color: rgba(255,95,116,.24) !important;
  background: rgba(255,247,249,.96) !important;
}
body.app-shell .management-panel-v65 .management-danger:hover,
body.app-shell .management-panel-v65 .management-action.danger:hover,
body.app-shell .management-panel-v65 .management-danger:focus-visible,
body.app-shell .management-panel-v65 .management-action.danger:focus-visible {
  border-color: rgba(255,95,116,.40) !important;
  box-shadow: 0 14px 28px rgba(255,95,116,.12), 0 8px 16px rgba(15,23,42,.045) !important;
}
@media (max-width: 1380px) {
  body.app-shell .management-panel-v65 .management-board { grid-auto-rows: 60px !important; gap: 9px !important; }
  body.app-shell .management-panel-v65 .management-action { height: 60px !important; min-height: 60px !important; }
  body.app-shell .management-panel-v65 .management-icon,
  body.app-shell .management-panel-v65 .management-action:hover .management-icon { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; }
  body.app-shell .management-panel-v65 .management-icon svg { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; }
}


/* ======================================================================
   Step78 — Public page visual polish + accent color support
   Scope: public pages only.
   ====================================================================== */

:root {
  --public-accent-current: var(--public-accent, var(--accent));
}

body.public-page {
  min-height: 100vh !important;
  color: #151827 !important;
  background:
    radial-gradient(720px 520px at 82% 12%, color-mix(in srgb, var(--public-accent-current) 10%, transparent), transparent 70%),
    radial-gradient(560px 520px at 12% 24%, rgba(184, 198, 255, .24), transparent 72%),
    linear-gradient(145deg, var(--bg-start), var(--bg-end)) !important;
}

body.public-page::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  background-image:
    linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.74), rgba(0,0,0,.30) 58%, transparent 100%) !important;
}

body.public-page .public-header {
  height: 64px !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  background: rgba(255,255,255,.74) !important;
  border-bottom: 1px solid rgba(31,41,55,.075) !important;
  box-shadow: 0 12px 30px rgba(15,23,42,.045) !important;
  backdrop-filter: blur(16px) !important;
}

body.public-page .public-header .brand {
  min-width: 0 !important;
  color: #151827 !important;
  font-size: 15px !important;
  font-weight: 860 !important;
  letter-spacing: -.025em !important;
}

body.public-page .public-header .brand-logo {
  width: 32px !important;
  height: 32px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.08) !important;
}

body.public-page .public-layout {
  width: min(100%, 1440px) !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 26px 28px 42px !important;
  display: grid !important;
  grid-template-columns: minmax(250px, var(--public-nav-width, 285px)) minmax(0, var(--public-article-width, 980px)) !important;
  gap: 28px !important;
  align-items: start !important;
  justify-content: center !important;
}

body.public-page .public-tree {
  position: sticky !important;
  top: 88px !important;
  max-height: calc(100vh - 112px) !important;
  overflow: auto !important;
  padding: 18px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  background:
    radial-gradient(180px 150px at 88% 0%, color-mix(in srgb, var(--public-accent-current) 10%, transparent), transparent 70%),
    rgba(255,255,255,.86) !important;
  box-shadow: 0 22px 54px rgba(15,23,42,.075) !important;
  backdrop-filter: blur(14px) !important;
  scrollbar-gutter: stable !important;
}

body.public-page .public-tree h2 {
  margin: 0 0 16px !important;
  color: #151827 !important;
  font-size: 24px !important;
  line-height: 1.05 !important;
  font-weight: 890 !important;
  letter-spacing: -.045em !important;
}

body.public-page .public-search {
  margin: 0 0 16px !important;
  position: relative !important;
}

body.public-page .public-search::before {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  width: 15px !important;
  height: 15px !important;
  transform: translateY(-50%) !important;
  border-radius: 50% !important;
  border: 2px solid color-mix(in srgb, var(--public-accent-current) 52%, #9aa4b5) !important;
  opacity: .75 !important;
  pointer-events: none !important;
}

body.public-page .public-search::after {
  content: "" !important;
  position: absolute !important;
  left: 27px !important;
  top: calc(50% + 8px) !important;
  width: 7px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--public-accent-current) 52%, #9aa4b5) !important;
  transform: rotate(45deg) !important;
  opacity: .75 !important;
  pointer-events: none !important;
}

body.public-page .public-search-input {
  width: 100% !important;
  height: 42px !important;
  padding: 0 14px 0 42px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(31,41,55,.10) !important;
  background: rgba(255,255,255,.88) !important;
  color: #151827 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}

body.public-page .public-search-input:focus {
  outline: none !important;
  border-color: color-mix(in srgb, var(--public-accent-current) 38%, rgba(31,41,55,.12)) !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--public-accent-current) 12%, transparent),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body.public-page .public-tree-list {
  list-style: none !important;
  padding-left: 14px !important;
  margin: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

body.public-page .public-tree > .public-tree-list {
  padding-left: 0 !important;
}

body.public-page .public-tree-node > ul {
  margin-top: 4px !important;
  padding-left: 20px !important;
  border-left: 1px solid rgba(31,41,55,.07) !important;
}

body.public-page .public-tree-row {
  min-height: 34px !important;
  display: grid !important;
  grid-template-columns: 22px 24px minmax(0, 1fr) !important;
  gap: 6px !important;
  align-items: center !important;
  padding: 4px 6px !important;
  border-radius: 14px !important;
  transition: background .16s ease, box-shadow .16s ease, color .16s ease !important;
}

body.public-page .public-tree-row:hover {
  background: color-mix(in srgb, var(--public-accent-current) 8%, rgba(255,255,255,.82)) !important;
}

body.public-page .public-tree-row.is-active {
  background: color-mix(in srgb, var(--public-accent-current) 16%, #fff) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--public-accent-current) 24%, transparent),
    0 8px 18px color-mix(in srgb, var(--public-accent-current) 10%, transparent) !important;
}

body.public-page .public-tree-toggle,
body.public-page .public-tree-toggle-placeholder {
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  background: transparent !important;
  color: #7a8499 !important;
  padding: 0 !important;
  border-radius: 8px !important;
}

body.public-page .public-tree-toggle:hover {
  background: rgba(255,255,255,.70) !important;
  color: var(--public-accent-current) !important;
}

body.public-page .public-tree-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
  color: color-mix(in srgb, var(--public-accent-current) 72%, #7a8499) !important;
  background: color-mix(in srgb, var(--public-accent-current) 10%, #fff) !important;
}

body.public-page .public-tree-icon svg {
  width: 14px !important;
  height: 14px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.public-page .public-tree-row a {
  min-width: 0 !important;
  padding: 0 !important;
  color: #384155 !important;
  font-size: 13px !important;
  line-height: 1.24 !important;
  font-weight: 650 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.public-page .public-tree-row a:hover {
  background: transparent !important;
  color: var(--public-accent-current) !important;
}

body.public-page .public-tree-row.is-active a {
  color: var(--public-accent-current) !important;
  font-weight: 850 !important;
}

body.public-page .public-content {
  min-width: 0 !important;
  display: grid !important;
  gap: 22px !important;
}

body.public-page .public-article {
  min-height: min(640px, calc(100vh - 140px)) !important;
  padding: 0 !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  background: rgba(255,255,255,.90) !important;
  box-shadow: 0 24px 64px rgba(15,23,42,.085) !important;
  backdrop-filter: blur(14px) !important;
}

body.public-page .public-article-head {
  padding: 34px 36px 24px !important;
  border-bottom: 1px solid rgba(31,41,55,.075) !important;
  background:
    radial-gradient(360px 220px at 92% 8%, color-mix(in srgb, var(--public-accent-current) 13%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.84)) !important;
}

body.public-page .public-article-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
  color: #7a8499 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

body.public-page .public-article-kicker::before {
  content: "" !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: var(--public-accent-current) !important;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--public-accent-current) 12%, transparent) !important;
}

body.public-page .public-article h1 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: clamp(32px, 4vw, 54px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.055em !important;
  font-weight: 910 !important;
}

body.public-page .public-article-body {
  padding: 34px 36px 54px !important;
  color: #354054 !important;
  font-size: 16px !important;
  line-height: 1.78 !important;
}

body.public-page .public-article-body h1,
body.public-page .public-article-body h2,
body.public-page .public-article-body h3 {
  color: #151827 !important;
  letter-spacing: -.035em !important;
}

body.public-page .public-article-body a {
  color: var(--public-accent-current) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 3px !important;
}

body.public-page .public-article-body blockquote {
  border-left: 4px solid var(--public-accent-current) !important;
  background: color-mix(in srgb, var(--public-accent-current) 6%, #fff) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  color: #4b5567 !important;
}

body.public-page .public-article-body img,
body.public-page .public-article-body video {
  border-radius: 18px !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.10) !important;
}

body.public-page .updated {
  margin: 0 !important;
  padding: 16px 36px 24px !important;
  border-top: 1px solid rgba(31,41,55,.075) !important;
  color: #7a8499 !important;
  font-size: 12px !important;
  background: rgba(250,252,255,.72) !important;
}

body.public-page .public-footer {
  color: #758096 !important;
  font-size: 14px !important;
}

body.public-page .public-export-nav {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: #6b7280 !important;
}

body.public-page .public-export-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 38px !important;
  padding: 3px 5px 3px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(31,41,55,.085) !important;
  background: rgba(255,255,255,.76) !important;
}

body.public-page .public-export-group small {
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

body.public-page .public-export-nav button {
  min-height: 30px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: #fff !important;
  color: #1f2937 !important;
  font-size: 12.5px !important;
  font-weight: 780 !important;
  box-shadow: 0 6px 14px rgba(15,23,42,.05) !important;
}

body.public-page .public-export-nav button:hover {
  transform: none !important;
  border-color: color-mix(in srgb, var(--public-accent-current) 28%, rgba(31,41,55,.08)) !important;
  color: var(--public-accent-current) !important;
  background: color-mix(in srgb, var(--public-accent-current) 5%, #fff) !important;
}

body.public-page .public-search-results {
  position: absolute !important;
  z-index: 20 !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(31,41,55,.08) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.13) !important;
  padding: 6px !important;
  max-height: 360px !important;
  overflow: auto !important;
}

body.public-page .public-search-result {
  width: 100% !important;
  display: grid !important;
  gap: 3px !important;
  text-align: left !important;
  border: 0 !important;
  border-radius: 13px !important;
  padding: 10px 11px !important;
  background: transparent !important;
  color: #1f2937 !important;
}

body.public-page .public-search-result:hover {
  background: color-mix(in srgb, var(--public-accent-current) 8%, #fff) !important;
}

@media (max-width: 980px) {
  body.public-page .public-header {
    height: auto !important;
    min-height: 64px !important;
    align-items: flex-start !important;
    padding: 14px 16px !important;
    flex-wrap: wrap !important;
  }

  body.public-page .public-export-nav {
    width: 100% !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  body.public-page .public-layout {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
  }

  body.public-page .public-tree {
    position: static !important;
    max-height: none !important;
  }

  body.public-page .public-article-head,
  body.public-page .public-article-body {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  body.public-page .updated {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}


/* ======================================================================
   Step79 — center public article reading page.
   Centers the public page card/content while keeping the navigation on the left.
   ====================================================================== */

body.public-page .public-layout {
  grid-template-columns:
    minmax(250px, var(--public-nav-width, 285px))
    minmax(620px, var(--public-article-width, 900px)) !important;
  justify-content: center !important;
  align-items: start !important;
}

body.public-page .public-content {
  width: 100% !important;
  max-width: var(--public-article-width, 900px) !important;
  justify-self: center !important;
}

body.public-page .public-article {
  width: 100% !important;
  max-width: var(--public-article-width, 900px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.public-page .public-article-head {
  text-align: center !important;
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  padding-top: 42px !important;
  padding-bottom: 30px !important;
}

body.public-page .public-article-kicker {
  justify-content: center !important;
}

body.public-page .public-article h1 {
  text-align: center !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.public-page .public-article-body {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
  min-height: 360px !important;
}

body.public-page .public-article-body:empty::before {
  content: "Содержимое страницы появится здесь." !important;
  display: block !important;
  color: #8a94a8 !important;
  font-size: 14px !important;
  font-style: italic !important;
}

body.public-page .updated {
  text-align: center !important;
}

body.public-page .public-footer {
  max-width: var(--public-article-width, 900px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 980px) {
  body.public-page .public-layout {
    grid-template-columns: 1fr !important;
  }

  body.public-page .public-content,
  body.public-page .public-article {
    max-width: none !important;
  }

  body.public-page .public-article-body {
    max-width: none !important;
  }
}


/* ======================================================================
   Step80 — Public tree cleanup
   Fixes duplicated icons, heavy active row, and uneven spacing in public navigation.
   ====================================================================== */

/* Old public tree icon pseudo-elements conflict with the new real SVG icons. */
body.public-page .public-tree-row a::before,
body.public-page .public-tree-row a::after,
body.public-page .public-tree-node.has-children > .public-tree-row a::before,
body.public-page .public-tree-node.has-children > .public-tree-row a::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  background: none !important;
  opacity: 0 !important;
}

/* Cleaner tree card proportions. */
body.public-page .public-tree {
  padding: 20px 18px 18px !important;
  border-radius: 26px !important;
}

body.public-page .public-tree h2 {
  margin: 0 0 18px !important;
  font-size: 25px !important;
}

/* Search field: calmer icon and better spacing. */
body.public-page .public-search {
  margin-bottom: 18px !important;
}

body.public-page .public-search::before {
  left: 16px !important;
  width: 14px !important;
  height: 14px !important;
  border-width: 2px !important;
  border-color: color-mix(in srgb, var(--public-accent-current) 56%, #9aa4b5) !important;
}

body.public-page .public-search::after {
  left: 28px !important;
  top: calc(50% + 7px) !important;
  width: 7px !important;
  background: color-mix(in srgb, var(--public-accent-current) 56%, #9aa4b5) !important;
}

body.public-page .public-search-input {
  height: 42px !important;
  padding-left: 44px !important;
  border-radius: 17px !important;
}

/* Tree list: remove visual clutter and use a stable row grid. */
body.public-page .public-tree-list {
  display: grid !important;
  gap: 4px !important;
  padding-left: 0 !important;
}

body.public-page .public-tree-node > ul {
  margin: 4px 0 0 12px !important;
  padding-left: 14px !important;
  border-left: 1px solid color-mix(in srgb, var(--public-accent-current) 10%, rgba(31,41,55,.08)) !important;
}

/* Every row gets the same geometry: toggle, one icon, title. */
body.public-page .public-tree-row {
  min-height: 34px !important;
  display: grid !important;
  grid-template-columns: 22px 24px minmax(0, 1fr) !important;
  column-gap: 6px !important;
  align-items: center !important;
  padding: 4px 8px !important;
  border-radius: 15px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

body.public-page .public-tree-row:hover {
  background: color-mix(in srgb, var(--public-accent-current) 6%, #fff) !important;
  border-color: color-mix(in srgb, var(--public-accent-current) 10%, transparent) !important;
}

/* Active state: lighter, not a heavy orange pill. */
body.public-page .public-tree-row.is-active {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--public-accent-current) 11%, #fff),
      color-mix(in srgb, var(--public-accent-current) 7%, #fff)
    ) !important;
  border-color: color-mix(in srgb, var(--public-accent-current) 22%, transparent) !important;
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--public-accent-current) 76%, #fff),
    0 8px 18px color-mix(in srgb, var(--public-accent-current) 7%, transparent) !important;
}

/* Toggle/chevron: one small control, aligned with the icon. */
body.public-page .public-tree-toggle,
body.public-page .public-tree-toggle-placeholder {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 9px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.public-page .public-tree-toggle .chevron {
  width: 7px !important;
  height: 7px !important;
  border-right: 1.8px solid currentColor !important;
  border-bottom: 1.8px solid currentColor !important;
  transform: rotate(45deg) translateY(-1px) !important;
  color: #7d8798 !important;
}

body.public-page .public-tree-node.collapsed > .public-tree-row .public-tree-toggle .chevron {
  transform: rotate(-45deg) translateX(-1px) !important;
}

body.public-page .public-tree-toggle:hover {
  background: rgba(255,255,255,.70) !important;
  color: var(--public-accent-current) !important;
}

/* Single icon per item. */
body.public-page .public-tree-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  color: color-mix(in srgb, var(--public-accent-current) 62%, #8a94a8) !important;
  background: color-mix(in srgb, var(--public-accent-current) 8%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--public-accent-current) 12%, transparent) !important;
}

body.public-page .public-tree-row.is-active .public-tree-icon {
  color: var(--public-accent-current) !important;
  background: #fff !important;
  border-color: color-mix(in srgb, var(--public-accent-current) 20%, transparent) !important;
  box-shadow: 0 5px 12px color-mix(in srgb, var(--public-accent-current) 10%, transparent) !important;
}

body.public-page .public-tree-icon svg {
  width: 13px !important;
  height: 13px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Title text alignment. */
body.public-page .public-tree-row a {
  min-width: 0 !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #404a5f !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.public-page .public-tree-row a:hover {
  background: transparent !important;
  color: color-mix(in srgb, var(--public-accent-current) 84%, #1f2937) !important;
}

body.public-page .public-tree-row.is-active a {
  color: color-mix(in srgb, var(--public-accent-current) 88%, #101828) !important;
  font-weight: 850 !important;
}

/* Deeper nodes should not become visually oversized. */
body.public-page .public-tree-node .public-tree-node .public-tree-row {
  min-height: 32px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

body.public-page .public-tree-node .public-tree-node .public-tree-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  border-radius: 9px !important;
}

body.public-page .public-tree-node .public-tree-node .public-tree-icon svg {
  width: 12px !important;
  height: 12px !important;
}


/* ======================================================================
   Step81 — Public page: clean tree, search and header
   ====================================================================== */

/* Header: make it a soft rounded command bar instead of a flat strip. */
body.public-page .public-header {
  height: auto !important;
  min-height: 66px !important;
  margin: 12px auto 0 !important;
  width: min(calc(100% - 32px), 1540px) !important;
  padding: 10px 14px 10px 18px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(31,41,55,.075) !important;
  background: rgba(255,255,255,.84) !important;
  box-shadow: 0 18px 44px rgba(15,23,42,.065) !important;
  backdrop-filter: blur(16px) !important;
}

body.public-page .public-header .brand {
  color: #151827 !important;
  font-size: 15px !important;
  font-weight: 880 !important;
  letter-spacing: -.03em !important;
}

body.public-page .public-export-nav {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body.public-page .public-export-nav > span {
  color: #7a8499 !important;
  font-size: 12px !important;
  font-weight: 720 !important;
  letter-spacing: .01em !important;
}

body.public-page .public-export-group {
  min-height: 40px !important;
  padding: 4px 5px 4px 12px !important;
  gap: 5px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(31,41,55,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 8px 18px rgba(15,23,42,.045) !important;
}

body.public-page .public-export-group small {
  color: #667085 !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}

body.public-page .public-export-nav button {
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid transparent !important;
  color: #172033 !important;
  font-size: 12px !important;
  font-weight: 840 !important;
  box-shadow: none !important;
}

body.public-page .public-export-nav button:hover {
  background: color-mix(in srgb, var(--public-accent-current) 7%, #fff) !important;
  border-color: color-mix(in srgb, var(--public-accent-current) 18%, rgba(31,41,55,.08)) !important;
  color: color-mix(in srgb, var(--public-accent-current) 78%, #172033) !important;
}

/* Layout after rounded header. */
body.public-page .public-layout {
  padding-top: 24px !important;
}

/* Tree card: remove warm color smear/stripes and keep it neutral. */
body.public-page .public-tree {
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(31,41,55,.075) !important;
  box-shadow: 0 22px 52px rgba(15,23,42,.07) !important;
}

body.public-page .public-tree::before,
body.public-page .public-tree::after {
  content: none !important;
  display: none !important;
}

/* Search: label must not overlap the input. */
body.public-page .public-search {
  display: grid !important;
  gap: 8px !important;
  margin: 0 0 16px !important;
}

body.public-page .public-search label,
body.public-page .public-search .sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #2b3446 !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
}

body.public-page .public-search::before {
  left: 15px !important;
  top: auto !important;
  bottom: 14px !important;
  transform: none !important;
  width: 13px !important;
  height: 13px !important;
  border-color: color-mix(in srgb, var(--public-accent-current) 46%, #8a94a8) !important;
}

body.public-page .public-search::after {
  left: 26px !important;
  top: auto !important;
  bottom: 11px !important;
  width: 7px !important;
  background: color-mix(in srgb, var(--public-accent-current) 46%, #8a94a8) !important;
}

body.public-page .public-search-input {
  height: 42px !important;
  padding-left: 42px !important;
  border-radius: 16px !important;
  font-size: 13.5px !important;
}

/* Tree rows: normal neutral tree, no color stripes or heavy active pill. */
body.public-page .public-tree-node > ul {
  margin: 4px 0 0 12px !important;
  padding-left: 14px !important;
  border-left: 1px solid rgba(31,41,55,.08) !important;
}

body.public-page .public-tree-row {
  grid-template-columns: 20px 23px minmax(0,1fr) !important;
  min-height: 32px !important;
  padding: 4px 7px !important;
  border-radius: 13px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.public-page .public-tree-row:hover {
  background: rgba(248,250,252,.78) !important;
  border-color: rgba(31,41,55,.055) !important;
  box-shadow: none !important;
}

body.public-page .public-tree-row.is-active {
  background: rgba(248,250,252,.96) !important;
  border-color: rgba(31,41,55,.08) !important;
  box-shadow: none !important;
}

/* Explicitly remove Step80 active color strip. */
body.public-page .public-tree-row.is-active::before,
body.public-page .public-tree-row.is-active::after {
  content: none !important;
  display: none !important;
}

body.public-page .public-tree-toggle,
body.public-page .public-tree-toggle-placeholder {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
}

body.public-page .public-tree-toggle .chevron {
  width: 6px !important;
  height: 6px !important;
  color: #8a94a8 !important;
}

body.public-page .public-tree-icon {
  width: 23px !important;
  height: 23px !important;
  min-width: 23px !important;
  min-height: 23px !important;
  border-radius: 9px !important;
  color: #7d8798 !important;
  background: #f5f7fb !important;
  border: 1px solid rgba(31,41,55,.07) !important;
  box-shadow: none !important;
}

body.public-page .public-tree-row.is-active .public-tree-icon {
  color: color-mix(in srgb, var(--public-accent-current) 62%, #667085) !important;
  background: color-mix(in srgb, var(--public-accent-current) 7%, #fff) !important;
  border-color: color-mix(in srgb, var(--public-accent-current) 16%, rgba(31,41,55,.07)) !important;
  box-shadow: none !important;
}

body.public-page .public-tree-icon svg {
  width: 12.5px !important;
  height: 12.5px !important;
}

body.public-page .public-tree-row a {
  color: #344054 !important;
  font-size: 12.8px !important;
  font-weight: 720 !important;
  line-height: 1.22 !important;
}

body.public-page .public-tree-row.is-active a {
  color: #172033 !important;
  font-weight: 840 !important;
}

body.public-page .public-tree-row a:hover {
  color: color-mix(in srgb, var(--public-accent-current) 72%, #172033) !important;
}

/* Remove all legacy pseudo icons/marks again, loaded last. */
body.public-page .public-tree-row a::before,
body.public-page .public-tree-row a::after,
body.public-page .public-tree-node.has-children > .public-tree-row a::before,
body.public-page .public-tree-node.has-children > .public-tree-row a::after {
  content: none !important;
  display: none !important;
}

/* Mobile header stacks cleanly. */
@media (max-width: 980px) {
  body.public-page .public-header {
    width: calc(100% - 24px) !important;
    margin-top: 10px !important;
    border-radius: 20px !important;
    align-items: center !important;
  }

  body.public-page .public-export-nav {
    width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }

  body.public-page .public-export-group {
    flex: 0 0 auto !important;
  }
}


/* ======================================================================
   Step83 — compact public header
   Fixes the oversized empty public header from Step82.
   ====================================================================== */

body.public-page .public-header {
  width: min(calc(100% - 32px), 1440px) !important;
  min-height: 54px !important;
  height: 54px !important;
  margin: 10px auto 0 !important;
  padding: 7px 10px 7px 16px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(31,41,55,.075) !important;
  box-shadow: 0 12px 30px rgba(15,23,42,.055) !important;
  backdrop-filter: blur(16px) !important;
}

body.public-page .public-header .brand {
  height: 38px !important;
  min-width: 180px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #151827 !important;
  font-size: 14px !important;
  font-weight: 880 !important;
  letter-spacing: -.025em !important;
  white-space: nowrap !important;
}

body.public-page .public-export-nav {
  margin-left: auto !important;
  height: 40px !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

body.public-page .public-export-nav > span {
  margin-right: 2px !important;
  color: #7a8499 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

body.public-page .public-export-group {
  height: 38px !important;
  min-height: 38px !important;
  padding: 4px 5px 4px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(31,41,55,.08) !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 6px 14px rgba(15,23,42,.04) !important;
}

body.public-page .public-export-group small {
  color: #667085 !important;
  font-size: 11.5px !important;
  font-weight: 760 !important;
  white-space: nowrap !important;
}

body.public-page .public-export-nav button {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: rgba(255,255,255,.96) !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

body.public-page .public-export-nav button:hover {
  transform: none !important;
  color: color-mix(in srgb, var(--public-accent-current) 78%, #111827) !important;
  background: color-mix(in srgb, var(--public-accent-current) 7%, #fff) !important;
  border-color: color-mix(in srgb, var(--public-accent-current) 20%, rgba(31,41,55,.08)) !important;
}

body.public-page .public-layout {
  padding-top: 20px !important;
}

/* On narrow screens, keep the bar readable instead of stretching into a huge block. */
@media (max-width: 980px) {
  body.public-page .public-header {
    width: calc(100% - 20px) !important;
    height: auto !important;
    min-height: 54px !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  body.public-page .public-header .brand {
    min-width: 0 !important;
  }

  body.public-page .public-export-nav {
    width: 100% !important;
    height: auto !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  body.public-page .public-export-group {
    flex: 0 0 auto !important;
  }
}


/* ======================================================================
   Step84 — Public header brand/logo polish
   Shows the configured customization logo on public pages and fixes title alignment.
   ====================================================================== */

body.public-page .public-header {
  height: 58px !important;
  min-height: 58px !important;
  width: min(calc(100% - 32px), 1440px) !important;
  margin: 10px auto 0 !important;
  padding: 8px 10px 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82)) !important;
  border: 1px solid rgba(31,41,55,.075) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.06) !important;
  backdrop-filter: blur(16px) !important;
}

body.public-page .public-header .brand.public-brand,
body.public-page .public-brand {
  height: 42px !important;
  min-width: 0 !important;
  max-width: 420px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 5px 12px 5px 6px !important;
  border-radius: 17px !important;
  color: #151827 !important;
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(31,41,55,.055) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88) !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

body.public-page .public-brand:hover {
  background: rgba(255,255,255,.82) !important;
  border-color: color-mix(in srgb, var(--public-accent-current) 16%, rgba(31,41,55,.055)) !important;
}

body.public-page .public-brand-logo {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 13px !important;
  color: color-mix(in srgb, var(--public-accent-current) 78%, #172033) !important;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), transparent 44%),
    color-mix(in srgb, var(--public-accent-current) 12%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--public-accent-current) 16%, rgba(31,41,55,.08)) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.07) !important;
}

body.public-page .public-brand-logo img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

body.public-page .public-brand-logo span {
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
}

body.public-page .public-brand-text {
  min-width: 0 !important;
  max-width: 350px !important;
  color: #151827 !important;
  font-size: 14px !important;
  font-weight: 880 !important;
  letter-spacing: -.025em !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Keep export controls centered relative to the new brand block. */
body.public-page .public-export-nav {
  height: 42px !important;
  margin-left: auto !important;
  align-items: center !important;
}

body.public-page .public-export-group {
  height: 38px !important;
  min-height: 38px !important;
}

/* Remove previous raw brand-logo styles that expected an img directly in .brand. */
body.public-page .public-header .brand-logo {
  width: auto !important;
  height: auto !important;
}

@media (max-width: 760px) {
  body.public-page .public-header {
    height: auto !important;
    min-height: 58px !important;
    width: calc(100% - 20px) !important;
    padding: 10px !important;
    align-items: center !important;
  }

  body.public-page .public-brand {
    max-width: 100% !important;
  }

  body.public-page .public-brand-text {
    max-width: 220px !important;
  }
}


/* ======================================================================
   Step85 — Public brand polish
   Removes the small nested pill effect and makes the logo/title sit naturally
   inside the public header.
   ====================================================================== */

body.public-page .public-header {
  height: 58px !important;
  min-height: 58px !important;
  padding: 8px 12px 8px 18px !important;
  align-items: center !important;
}

body.public-page .public-header .brand.public-brand,
body.public-page .public-brand {
  height: 42px !important;
  max-width: 460px !important;
  padding: 0 !important;
  gap: 11px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.public-page .public-brand:hover {
  background: transparent !important;
  border-color: transparent !important;
}

body.public-page .public-brand-logo {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 14px !important;
  color: color-mix(in srgb, var(--public-accent-current) 78%, #172033) !important;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.95), transparent 48%),
    color-mix(in srgb, var(--public-accent-current) 10%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--public-accent-current) 18%, rgba(31,41,55,.08)) !important;
  box-shadow:
    0 8px 18px rgba(15,23,42,.075),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

body.public-page .public-brand-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 3px !important;
  border-radius: 12px !important;
  background: transparent !important;
}

body.public-page .public-brand-logo span {
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: translateY(.5px) !important;
}

body.public-page .public-brand-text {
  max-width: 380px !important;
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 880 !important;
  letter-spacing: -.03em !important;
  line-height: 1.05 !important;
  transform: translateY(.5px) !important;
}

body.public-page .public-export-nav {
  height: 42px !important;
}

@media (max-width: 760px) {
  body.public-page .public-brand-logo {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  body.public-page .public-brand-text {
    max-width: 230px !important;
    font-size: 14px !important;
  }
}


/* ======================================================================
   Step86 — Public page scroll + brand alignment
   Fixes:
   - public page could not scroll to the bottom;
   - logo/title looked vertically misaligned in the public header.
   ====================================================================== */

/* Restore normal document scrolling for public pages. */
html:has(body.public-page) {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.public-page {
  height: auto !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 48px !important;
}

body.public-page .public-layout,
body.public-page .public-content,
body.public-page .public-article {
  overflow: visible !important;
}

body.public-page .public-content {
  min-height: auto !important;
}

body.public-page .public-article {
  min-height: auto !important;
  margin-bottom: 26px !important;
}

/* Keep the navigation independently scrollable, but do not lock the full page. */
body.public-page .public-tree {
  max-height: calc(100vh - 96px) !important;
  overflow: auto !important;
}

/* Brand alignment: logo and title sit on one optical center line. */
body.public-page .public-header {
  display: flex !important;
  align-items: center !important;
}

body.public-page .public-header .brand.public-brand,
body.public-page .public-brand {
  height: 42px !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  transform: none !important;
}

body.public-page .public-brand-logo {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 34px !important;
  margin: 0 !important;
  transform: none !important;
  line-height: 1 !important;
}

body.public-page .public-brand-logo img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  padding: 3px !important;
  margin: 0 !important;
  transform: none !important;
}

body.public-page .public-brand-logo span {
  display: block !important;
  line-height: 1 !important;
  transform: translateY(0) !important;
}

body.public-page .public-brand-text {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 880 !important;
  letter-spacing: -.03em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transform: translateY(0) !important;
}

/* Export controls should share the same center line as the brand. */
body.public-page .public-export-nav {
  display: flex !important;
  align-items: center !important;
  height: 42px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.public-page .public-export-group {
  display: inline-flex !important;
  align-items: center !important;
  height: 38px !important;
  min-height: 38px !important;
}


/* ======================================================================
   Step87 — Public page: single scrollbar
   Step86 restored page scrolling, but both html and body could scroll.
   This forces exactly one document scrollbar and disables inner body scroll.
   ====================================================================== */

html.public-root,
html:has(body.public-page) {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
}

html.public-root body.public-page,
body.public-page {
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  max-height: none !important;
}

/* Do not create a second full-page scrolling container. */
body.public-page .public-layout,
body.public-page .public-content,
body.public-page .public-article,
body.public-page .public-article-body {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Only the left navigation may have its own internal scrollbar. */
body.public-page .public-tree {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(100vh - 96px) !important;
}

/* Remove scrollbar styling from any accidental page-level wrapper. */
body.public-page .public-layout::-webkit-scrollbar,
body.public-page .public-content::-webkit-scrollbar,
body.public-page .public-article::-webkit-scrollbar,
body.public-page .public-article-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}


/* ======================================================================
   Step88 — Public article text should match admin/article view.
   Public page previously centered/justified article text too aggressively.
   This restores normal left-aligned reading flow like in the editor/admin page.
   ====================================================================== */

body.public-page .public-article-body,
body.public-page .public-article-body.ql-editor {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 34px 36px 54px !important;
  text-align: left !important;
  color: #354054 !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;
}

/* Force common Quill/content blocks back to the same left reading flow.
   This fixes the stretched/centered look from public pages. */
body.public-page .public-article-body p,
body.public-page .public-article-body div,
body.public-page .public-article-body li,
body.public-page .public-article-body blockquote,
body.public-page .public-article-body pre {
  text-align: left !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;
}

body.public-page .public-article-body .ql-align-center,
body.public-page .public-article-body .ql-align-right,
body.public-page .public-article-body .ql-align-justify {
  text-align: left !important;
}

/* Headings should sit like in the admin article: left, readable, not centered. */
body.public-page .public-article-body h1,
body.public-page .public-article-body h2,
body.public-page .public-article-body h3,
body.public-page .public-article-body h4 {
  text-align: left !important;
  color: #151827 !important;
  letter-spacing: -.03em !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.public-page .public-article-body h2 {
  font-size: 28px !important;
  line-height: 1.15 !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

body.public-page .public-article-body h2:not(:first-child) {
  margin-top: 62px !important;
}

body.public-page .public-article-body p {
  margin: 0 0 18px !important;
}

body.public-page .public-article-body ol,
body.public-page .public-article-body ul {
  margin: 0 0 18px !important;
  padding-left: 24px !important;
  text-align: left !important;
}

body.public-page .public-article-body li {
  padding-left: 0 !important;
  margin: 0 0 8px !important;
}

/* Quill list internals sometimes use extra spans/pseudo layout; normalize spacing. */
body.public-page .public-article-body .ql-ui {
  display: none !important;
}

body.public-page .public-article-body img {
  display: block !important;
  max-width: 100% !important;
  margin: 20px 0 !important;
}
/* video/iframe centering (incl. resized + captioned) is owned by the
   .dockbook-video-file/.dockbook-video-embed/.dockbook-has-caption rules
   below, same as admin read mode — this selector must not also claim
   `margin` for video, or its higher (body.public-page) specificity wins
   and pins video to the left edge on the public page only. */

/* Keep article card centered, but not the text column inside it. */
body.public-page .public-content,
body.public-page .public-article {
  justify-self: center !important;
}

@media (max-width: 980px) {
  body.public-page .public-article-body,
  body.public-page .public-article-body.ql-editor {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}


/* ======================================================================
   Step89 — Public article rounded top + restore Quill numbering/lists.
   ====================================================================== */

/* Round the visible top of the public article/card. */
body.public-page .public-article {
  border-radius: 30px !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
}

body.public-page .public-article-head {
  border-radius: 30px 30px 0 0 !important;
  overflow: hidden !important;
}

/* If an image/table at the beginning touches the top area, keep the card rounded. */
body.public-page .public-article > :first-child {
  border-top-left-radius: 30px !important;
  border-top-right-radius: 30px !important;
}

/* Preserve editor formatting in public mode.
   Step88 hid .ql-ui and forced all list text to plain left flow, which removed
   Quill numbering/bullets. Restore Quill list UI and counters. */
body.public-page .public-article-body .ql-ui {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Let Quill's own list system render ordered/bullet/check lists. */
body.public-page .public-article-body li[data-list] > .ql-ui::before {
  display: inline-block !important;
  visibility: visible !important;
}

/* Restore normal Quill list layout instead of flattening it. */
body.public-page .public-article-body ol,
body.public-page .public-article-body ul {
  margin: 0 0 18px !important;
  padding-left: 1.5em !important;
}

body.public-page .public-article-body li {
  margin: 0 0 8px !important;
  padding-left: .25em !important;
}

/* Quill list items need their pseudo UI to sit before the text. */
body.public-page .public-article-body li > .ql-ui {
  position: static !important;
  margin-left: 0 !important;
  margin-right: .35em !important;
}

/* Do not erase saved alignment classes from the editor.
   Keep article default left, but respect explicit editor alignment. */
body.public-page .public-article-body {
  text-align: left !important;
}

body.public-page .public-article-body .ql-align-center {
  text-align: center !important;
}

body.public-page .public-article-body .ql-align-right {
  text-align: right !important;
}

body.public-page .public-article-body .ql-align-justify {
  text-align: justify !important;
}

/* Keep headings left unless user explicitly aligned them in the editor. */
body.public-page .public-article-body h1:not(.ql-align-center):not(.ql-align-right):not(.ql-align-justify),
body.public-page .public-article-body h2:not(.ql-align-center):not(.ql-align-right):not(.ql-align-justify),
body.public-page .public-article-body h3:not(.ql-align-center):not(.ql-align-right):not(.ql-align-justify),
body.public-page .public-article-body h4:not(.ql-align-center):not(.ql-align-right):not(.ql-align-justify),
body.public-page .public-article-body p:not(.ql-align-center):not(.ql-align-right):not(.ql-align-justify),
body.public-page .public-article-body div:not(.ql-align-center):not(.ql-align-right):not(.ql-align-justify) {
  text-align: left !important;
}

/* If browser/Quill fallback renders classic HTML lists, keep their markers visible. */
body.public-page .public-article-body ol:not(.ql-list),
body.public-page .public-article-body ol {
  list-style-position: outside !important;
}

body.public-page .public-article-body ul:not(.ql-list),
body.public-page .public-article-body ul {
  list-style-position: outside !important;
}

/* Avoid the public CSS from visually centering list content. */
body.public-page .public-article-body ol li,
body.public-page .public-article-body ul li {
  text-align: inherit !important;
}


/* ======================================================================
   Step90 — Public article list markers
   Restores visible numbering/bullets in public articles even when Quill's
   .ql-ui marker spans are missing or hidden by previous public styles.
   ====================================================================== */

/* Use our own stable markers for public article lists. */
body.public-page .public-article-body ol,
body.public-page .public-article-body.ql-editor ol {
  list-style: none !important;
  counter-reset: public-article-ol !important;
  padding-left: 0 !important;
  margin: 0 0 18px !important;
}

body.public-page .public-article-body ul,
body.public-page .public-article-body.ql-editor ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 0 18px !important;
}

body.public-page .public-article-body ol > li,
body.public-page .public-article-body.ql-editor ol > li {
  position: relative !important;
  counter-increment: public-article-ol !important;
  padding-left: 2.05em !important;
  margin: 0 0 8px !important;
  text-align: left !important;
}

body.public-page .public-article-body ul > li,
body.public-page .public-article-body.ql-editor ul > li {
  position: relative !important;
  padding-left: 1.55em !important;
  margin: 0 0 8px !important;
  text-align: left !important;
}

body.public-page .public-article-body ol > li::before,
body.public-page .public-article-body.ql-editor ol > li::before {
  content: counter(public-article-ol) "." !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  min-width: 1.35em !important;
  text-align: right !important;
  color: #354054 !important;
  font: inherit !important;
  font-weight: 500 !important;
}

body.public-page .public-article-body ul > li::before,
body.public-page .public-article-body.ql-editor ul > li::before {
  content: "•" !important;
  position: absolute !important;
  left: .35em !important;
  top: 0 !important;
  color: #354054 !important;
  font: inherit !important;
  font-weight: 700 !important;
}

/* Quill saved markup often uses <li data-list="ordered"> inside <ol>.
   Hide Quill's internal UI marker to avoid duplicated markers; our marker above is stable. */
body.public-page .public-article-body li > .ql-ui,
body.public-page .public-article-body.ql-editor li > .ql-ui,
body.public-page .public-article-body li > .ql-ui::before,
body.public-page .public-article-body.ql-editor li > .ql-ui::before {
  display: none !important;
  content: none !important;
}

/* Respect Quill's data-list type if mixed lists are saved inside an <ol>. */
body.public-page .public-article-body li[data-list="bullet"],
body.public-page .public-article-body.ql-editor li[data-list="bullet"] {
  counter-increment: none !important;
  padding-left: 1.55em !important;
}

body.public-page .public-article-body li[data-list="bullet"]::before,
body.public-page .public-article-body.ql-editor li[data-list="bullet"]::before {
  content: "•" !important;
  left: .35em !important;
  min-width: auto !important;
  text-align: left !important;
  font-weight: 700 !important;
}

body.public-page .public-article-body li[data-list="ordered"]::before,
body.public-page .public-article-body.ql-editor li[data-list="ordered"]::before {
  content: counter(public-article-ol) "." !important;
}

/* Checklists should not become numbered. */
body.public-page .public-article-body li[data-list="checked"],
body.public-page .public-article-body li[data-list="unchecked"],
body.public-page .public-article-body.ql-editor li[data-list="checked"],
body.public-page .public-article-body.ql-editor li[data-list="unchecked"] {
  counter-increment: none !important;
  padding-left: 1.9em !important;
}

body.public-page .public-article-body li[data-list="checked"]::before,
body.public-page .public-article-body.ql-editor li[data-list="checked"]::before {
  content: "✓" !important;
  left: 0 !important;
  width: 1.25em !important;
  height: 1.25em !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--public-accent-current) 10%, #fff) !important;
  color: color-mix(in srgb, var(--public-accent-current) 76%, #172033) !important;
  font-weight: 800 !important;
}

body.public-page .public-article-body li[data-list="unchecked"]::before,
body.public-page .public-article-body.ql-editor li[data-list="unchecked"]::before {
  content: "" !important;
  left: 0 !important;
  top: .28em !important;
  width: .9em !important;
  height: .9em !important;
  border-radius: 5px !important;
  border: 1.5px solid #9aa4b5 !important;
  background: #fff !important;
}

/* Nested list reset. Basic support for second-level lists. */
body.public-page .public-article-body ol ol,
body.public-page .public-article-body.ql-editor ol ol {
  counter-reset: public-article-ol-nested !important;
  margin-top: 8px !important;
}

body.public-page .public-article-body ol ol > li,
body.public-page .public-article-body.ql-editor ol ol > li {
  counter-increment: public-article-ol-nested !important;
}

body.public-page .public-article-body ol ol > li::before,
body.public-page .public-article-body.ql-editor ol ol > li::before {
  content: counter(public-article-ol-nested, lower-alpha) "." !important;
}


/* ======================================================================
   Step91 — Public page sticky header + navigation
   Header and public tree now stay with the reader while the article scrolls.
   ====================================================================== */

html.public-root,
html:has(body.public-page) {
  scroll-padding-top: 82px !important;
}

body.public-page .public-header {
  position: sticky !important;
  top: 8px !important;
  z-index: 80 !important;
  margin-top: 8px !important;
  transform: translateZ(0) !important;
  will-change: transform !important;
}

body.public-page .public-layout {
  padding-top: 20px !important;
}

/* Left public tree follows the scroll and sits below the sticky header. */
body.public-page .public-tree {
  position: sticky !important;
  top: 86px !important;
  z-index: 40 !important;
  max-height: calc(100vh - 108px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}

/* Keep article/content under the sticky header, not above it. */
body.public-page .public-content,
body.public-page .public-article {
  position: relative !important;
  z-index: 1 !important;
}

/* When export controls overflow on smaller screens, keep the header usable. */
body.public-page .public-export-nav {
  min-width: 0 !important;
}

@media (max-width: 980px) {
  html.public-root,
  html:has(body.public-page) {
    scroll-padding-top: 16px !important;
  }

  body.public-page .public-header {
    position: static !important;
    top: auto !important;
  }

  body.public-page .public-tree {
    position: static !important;
    top: auto !important;
    max-height: none !important;
  }
}


/* ======================================================================
   Step92 — Public nav hard fix
   Sticky was unreliable because previous scroll-root fixes changed the scroll container.
   This uses fixed header/tree on desktop and reserves layout space explicitly.
   ====================================================================== */

/* Make the page use one scroll root, while the fixed header/tree follow the viewport. */
html.public-root,
html:has(body.public-page) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}

body.public-page {
  overflow-y: visible !important;
  overflow-x: hidden !important;
}

/* Reserve vertical space for the fixed public header. */
body.public-page.public-fixed-nav-ready {
  padding-top: 76px !important;
}

body.public-page .public-header.is-public-fixed {
  position: fixed !important;
  top: 8px !important;
  left: 50% !important;
  right: auto !important;
  z-index: 200 !important;
  width: min(calc(100% - 32px), 1440px) !important;
  margin: 0 !important;
  transform: translateX(-50%) translateZ(0) !important;
  will-change: transform !important;
}

/* Keep the grid column reserved even when the tree itself is fixed. */
body.public-page .public-layout {
  grid-template-columns:
    minmax(250px, var(--public-fixed-tree-width, var(--public-nav-width, 285px)))
    minmax(620px, var(--public-article-width, 900px)) !important;
}

body.public-page .public-tree {
  grid-column: 1 !important;
}

body.public-page .public-content {
  grid-column: 2 !important;
}

/* Fixed left navigation follows the viewport while reading. */
body.public-page .public-tree.is-public-fixed {
  position: fixed !important;
  z-index: 120 !important;
  margin: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
  transform: translateZ(0) !important;
  will-change: transform !important;
}

/* Remove old sticky rules from Step91 so they do not fight fixed mode. */
body.public-page .public-header:not(.is-public-fixed) {
  position: relative !important;
  top: auto !important;
}

body.public-page .public-tree:not(.is-public-fixed) {
  position: relative !important;
  top: auto !important;
}

/* Mobile/tablet: no fixed blocks, normal flow. */
@media (max-width: 980px) {
  body.public-page.public-fixed-nav-ready {
    padding-top: 0 !important;
  }

  body.public-page .public-header.is-public-fixed,
  body.public-page .public-tree.is-public-fixed {
    position: static !important;
    transform: none !important;
    width: auto !important;
    left: auto !important;
    top: auto !important;
    max-height: none !important;
  }

  body.public-page .public-layout {
    grid-template-columns: 1fr !important;
  }

  body.public-page .public-tree,
  body.public-page .public-content {
    grid-column: auto !important;
  }
}


/* ======================================================================
   Step93 — File manager simplification
   Goal: less bulky, fewer duplicated controls, clearer focus:
   left filters -> files -> selected file.
   ====================================================================== */

#filesOverlay.files-modal-layer {
  padding: 26px !important;
}

#filesOverlay .files-modal.files-modal-v1 {
  width: min(1120px, calc(100vw - 52px)) !important;
  height: min(720px, calc(100vh - 52px)) !important;
  min-height: 560px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(360px 220px at 86% 4%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.97)) !important;
  box-shadow: 0 32px 84px rgba(15,23,42,.30) !important;
}

/* Header: compact and readable. */
#filesOverlay .files-modal-v1 .files-head {
  min-height: 72px !important;
  padding: 18px 22px 14px !important;
  gap: 16px !important;
}

#filesOverlay .files-modal-v1 .files-title .eyebrow {
  font-size: 11px !important;
  margin-bottom: 4px !important;
}

#filesOverlay .files-modal-v1 .files-title h2 {
  font-size: 24px !important;
  line-height: 1.04 !important;
  letter-spacing: -.04em !important;
}

#filesOverlay .files-modal-v1 .files-title p {
  margin-top: 6px !important;
  max-width: 560px !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}

/* Refresh is secondary icon-only; Upload remains the primary action. */
#filesOverlay .files-modal-v1 #pageFilesRefreshBtn.file-head-refresh {
  width: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  font-size: 0 !important;
  gap: 0 !important;
  color: #667085 !important;
}

#filesOverlay .files-modal-v1 #pageFilesRefreshBtn.file-head-refresh svg {
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
}

#filesOverlay .files-modal-v1 .file-head-btn.primary {
  height: 42px !important;
  padding: 0 16px !important;
}

#filesOverlay .files-modal-v1 .files-close {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
}

/* Three clear areas, with more room for the file list. */
#filesOverlay .files-modal-v1 .files-body {
  grid-template-columns: 198px minmax(0,1fr) 236px !important;
}

/* Left panel: compact filters, no oversized dropzone. */
#filesOverlay .files-modal-v1 .files-side {
  padding: 16px 14px !important;
  gap: 12px !important;
  background: rgba(248,250,252,.70) !important;
}

#filesOverlay .files-modal-v1 .files-nav-label {
  margin: 0 8px 6px !important;
  font-size: 10px !important;
  letter-spacing: .10em !important;
}

#filesOverlay .files-modal-v1 .files-nav {
  gap: 4px !important;
}

#filesOverlay .files-modal-v1 .files-nav-item {
  height: 36px !important;
  min-height: 36px !important;
  grid-template-columns: 28px minmax(0,1fr) auto !important;
  gap: 7px !important;
  padding: 0 8px !important;
  border-radius: 13px !important;
  font-size: 12.5px !important;
  font-weight: 760 !important;
}

#filesOverlay .files-modal-v1 .files-nav-item.active {
  box-shadow: 0 8px 18px rgba(15,23,42,.05) !important;
}

#filesOverlay .files-modal-v1 .files-nav-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 11px !important;
}

#filesOverlay .files-modal-v1 .files-count {
  font-size: 10.5px !important;
}

/* Make upload a compact action card instead of a heavy block. */
#filesOverlay .files-modal-v1 .upload-card {
  margin-top: auto !important;
  min-height: 72px !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px !important;
  border-radius: 18px !important;
}

#filesOverlay .files-modal-v1 .upload-card .upload-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 14px !important;
  margin: 0 !important;
}

#filesOverlay .files-modal-v1 .upload-card b {
  font-size: 12.5px !important;
}

#filesOverlay .files-modal-v1 .upload-card p {
  margin-top: 3px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

/* Main area: one search + one count + grid. Hide duplicate filters and view buttons. */
#filesOverlay .files-modal-v1 .files-main {
  padding: 16px !important;
  grid-template-rows: auto auto minmax(0,1fr) !important;
  gap: 10px !important;
}

#filesOverlay .files-modal-v1 .files-toolbar {
  grid-template-columns: minmax(0,1fr) !important;
  gap: 0 !important;
}

#filesOverlay .files-modal-v1 .files-view,
#filesOverlay .files-modal-v1 .file-tags {
  display: none !important;
}

#filesOverlay .files-modal-v1 .files-search {
  height: 42px !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.035) !important;
}

#filesOverlay .files-modal-v1 .file-manager-stats.files-stats {
  min-height: 28px !important;
  width: max-content !important;
  padding: 0 10px !important;
  font-size: 11.5px !important;
  background: rgba(248,250,252,.88) !important;
}

/* Smaller cards with the same affordances. */
#filesOverlay .files-modal-v1 .files-grid {
  gap: 10px !important;
  padding-right: 4px !important;
}

#filesOverlay .files-modal-v1 .file-card {
  min-height: 150px !important;
  grid-template-rows: 70px auto !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.04) !important;
}

#filesOverlay .files-modal-v1 .file-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(15,23,42,.07) !important;
}

#filesOverlay .files-modal-v1 .file-card.selected {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent),
    0 12px 24px rgba(15,23,42,.07) !important;
}

#filesOverlay .files-modal-v1 .file-preview {
  border-radius: 16px !important;
}

#filesOverlay .files-modal-v1 .file-name {
  font-size: 12.5px !important;
}

#filesOverlay .files-modal-v1 .file-meta {
  margin-top: 3px !important;
  font-size: 10.8px !important;
  line-height: 1.25 !important;
}

#filesOverlay .files-modal-v1 .file-card-actions {
  margin-top: 8px !important;
  gap: 5px !important;
}

#filesOverlay .files-modal-v1 .file-card-action {
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 10px !important;
  padding: 0 7px !important;
  font-size: 10.8px !important;
}

#filesOverlay .files-modal-v1 .file-card-action svg {
  width: 13px !important;
  height: 13px !important;
}

/* Right panel: show only storage + selected file; Recent was noisy here. */
#filesOverlay .files-modal-v1 .files-info {
  padding: 16px 14px !important;
  gap: 12px !important;
  background: rgba(248,250,252,.70) !important;
}

#filesOverlay .files-modal-v1 .files-info .info-panel {
  padding: 13px !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.04) !important;
}

#filesOverlay .files-modal-v1 .files-info .info-panel:nth-of-type(3) {
  display: none !important;
}

#filesOverlay .files-modal-v1 .info-panel h3 {
  margin-bottom: 10px !important;
  font-size: 13px !important;
}

#filesOverlay .files-modal-v1 .storage-box {
  grid-template-columns: 34px minmax(0,1fr) !important;
  gap: 10px !important;
}

#filesOverlay .files-modal-v1 .storage-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 13px !important;
}

#filesOverlay .files-modal-v1 .storage-bar {
  height: 7px !important;
  margin-top: 10px !important;
}

#filesOverlay .files-modal-v1 .selected-preview {
  height: 96px !important;
  border-radius: 18px !important;
}

#filesOverlay .files-modal-v1 .selected-preview.image img,
#filesOverlay .files-modal-v1 .selected-preview.video video {
  border-radius: 18px !important;
}

#filesOverlay .files-modal-v1 .selected-meta {
  gap: 6px !important;
}

#filesOverlay .files-modal-v1 .meta-line {
  gap: 8px !important;
  font-size: 11.5px !important;
}

#filesOverlay .files-modal-v1 .meta-line b {
  font-size: 11.5px !important;
}

#filesOverlay .files-modal-v1 .info-action {
  height: 34px !important;
  border-radius: 13px !important;
  font-size: 11.8px !important;
}

/* Responsive: keep the simplified version predictable. */
@media (max-width: 1180px) {
  #filesOverlay .files-modal-v1 .files-body {
    grid-template-columns: 188px minmax(0,1fr) !important;
  }
}

@media (max-width: 760px) {
  #filesOverlay.files-modal-layer {
    padding: 10px !important;
  }

  #filesOverlay .files-modal.files-modal-v1 {
    width: calc(100vw - 20px) !important;
    height: calc(100vh - 20px) !important;
    min-height: 0 !important;
    border-radius: 24px !important;
  }

  #filesOverlay .files-modal-v1 .files-head {
    padding: 16px !important;
  }

  #filesOverlay .files-modal-v1 .files-body {
    grid-template-columns: 1fr !important;
  }

  #filesOverlay .files-modal-v1 .files-side,
  #filesOverlay .files-modal-v1 .files-info {
    display: none !important;
  }
}


/* ======================================================================
   Step94 — File manager performance + intuitive drag upload
   ====================================================================== */

/* Remove the current-page filter from the UI. */
#filesOverlay .files-modal-v1 [data-file-scope="current"],
#filesOverlay .files-modal-v1 [data-count="current"] {
  display: none !important;
}

#filesOverlay .files-modal-v1 .files-title p {
  max-width: 680px !important;
}

/* Less expensive scrolling: video previews are lightweight, cards are contained. */
#filesOverlay .files-modal-v1 .files-grid {
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  transform: translateZ(0) !important;
}

#filesOverlay .files-modal-v1 .file-card {
  contain: layout paint style !important;
  content-visibility: auto !important;
  contain-intrinsic-size: 154px 180px !important;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease !important;
  transform: none !important;
  will-change: auto !important;
}

#filesOverlay .files-modal-v1 .file-card:hover {
  transform: none !important;
}

#filesOverlay .files-modal-v1 .file-preview,
#filesOverlay .files-modal-v1 .file-preview img,
#filesOverlay .files-modal-v1 .selected-preview img {
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

#filesOverlay .files-modal-v1 .file-preview video {
  display: none !important;
}

#filesOverlay .files-modal-v1 .file-preview-video-lite {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 72% 22%, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(135deg, #20273d, #0f172a) !important;
  color: #fff !important;
}

#filesOverlay .files-modal-v1 .file-video-play {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
}

#filesOverlay .files-modal-v1 .file-video-play svg {
  width: 21px !important;
  height: 21px !important;
  fill: currentColor !important;
  stroke: none !important;
  margin-left: 2px !important;
}

#filesOverlay .files-modal-v1 .file-video-label {
  position: absolute !important;
  left: 10px !important;
  bottom: 9px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,.72) !important;
}

/* Make per-card actions calmer; the right panel remains the primary action area. */
#filesOverlay .files-modal-v1 .file-card-actions {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(3px) !important;
  transition: opacity .12s ease, transform .12s ease !important;
}

#filesOverlay .files-modal-v1 .file-card:hover .file-card-actions,
#filesOverlay .files-modal-v1 .file-card.selected .file-card-actions,
#filesOverlay .files-modal-v1 .file-card:focus-within .file-card-actions {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

#filesOverlay .files-modal-v1 .file-card-action.primary {
  min-width: 28px !important;
  width: 28px !important;
  padding: 0 !important;
  font-size: 0 !important;
}

#filesOverlay .files-modal-v1 .file-card-action.primary svg {
  margin: 0 !important;
}

/* Compact upload card on the left. */
#filesOverlay .files-modal-v1 .upload-card {
  min-height: 116px !important;
  padding: 14px !important;
  align-content: center !important;
}

#filesOverlay .files-modal-v1 .upload-card p {
  max-width: 120px !important;
}

/* Yandex.Disk-like drag overlay over the whole file manager. */
#filesOverlay .files-modal-v1 {
  position: relative !important;
}

#filesOverlay .files-drop-overlay-v94 {
  position: absolute !important;
  inset: 0 !important;
  z-index: 80 !important;
  display: grid !important;
  place-items: center !important;
  padding: 28px !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 48%),
    rgba(248,250,252,.72) !important;
  backdrop-filter: blur(10px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .14s ease, visibility .14s ease !important;
}

#filesOverlay .files-drop-overlay-v94.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#filesOverlay .files-drop-card-v94 {
  width: min(460px, 100%) !important;
  min-height: 240px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 12px !important;
  text-align: center !important;
  border-radius: 34px !important;
  border: 2px dashed color-mix(in srgb, var(--accent) 38%, #c7d2fe) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 26px 70px rgba(15,23,42,.16) !important;
}

#filesOverlay .files-drop-icon-v94 {
  width: 64px !important;
  height: 64px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 24px !important;
  color: #fff !important;
  background: var(--accent) !important;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 25%, transparent) !important;
}

#filesOverlay .files-drop-icon-v94 svg {
  width: 30px !important;
  height: 30px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#filesOverlay .files-drop-card-v94 b {
  color: #111827 !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  letter-spacing: -.035em !important;
}

#filesOverlay .files-drop-card-v94 span {
  max-width: 320px !important;
  color: #667085 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* Reduce paint work while dragging. */
#filesOverlay.is-file-dragging-v94 .files-grid,
#filesOverlay.is-file-dragging-v94 .files-info,
#filesOverlay.is-file-dragging-v94 .files-side {
  pointer-events: none !important;
}


/* ======================================================================
   Step95 — File manager polish after Step94
   Fixes the right selected panel, garbled/long names, card density and scroll jank.
   ====================================================================== */

/* Main grid: smaller cards, fewer expensive shadows while scrolling. */
#filesOverlay .files-modal-v1 .files-grid {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important;
  gap: 12px !important;
  padding-right: 8px !important;
  align-content: start !important;
  scroll-behavior: auto !important;
}

#filesOverlay .files-modal-v1 .file-card {
  min-height: 178px !important;
  border-radius: 20px !important;
  padding: 10px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.045) !important;
}

#filesOverlay .files-modal-v1 .file-card.selected {
  border-color: color-mix(in srgb, var(--accent) 28%, rgba(31,41,55,.08)) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.065) !important;
}

#filesOverlay .files-modal-v1 .file-preview {
  height: 86px !important;
  min-height: 86px !important;
  border-radius: 16px !important;
  margin-bottom: 9px !important;
}

#filesOverlay .files-modal-v1 .file-card-info {
  display: grid !important;
  gap: 8px !important;
}

#filesOverlay .files-modal-v1 .file-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: #182033 !important;
  font-size: 13px !important;
  line-height: 1.22 !important;
  font-weight: 860 !important;
  word-break: break-word !important;
}

#filesOverlay .files-modal-v1 .file-meta {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: #7a8499 !important;
  font-size: 11.3px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
}

#filesOverlay .files-modal-v1 .file-state-meta {
  color: #8b95a7 !important;
}

/* Hide noisy page path row from older rendered cards if it appears. */
#filesOverlay .files-modal-v1 .file-page-meta {
  display: none !important;
}

/* Actions: less clutter; selected file panel is the main action area. */
#filesOverlay .files-modal-v1 .file-card-actions {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 0 !important;
  background: transparent !important;
}

#filesOverlay .files-modal-v1 .file-card-action {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 11px !important;
}

#filesOverlay .files-modal-v1 .file-card-action svg {
  width: 14px !important;
  height: 14px !important;
}

/* Left upload card: no broken vertical text. */
#filesOverlay .files-modal-v1 .upload-card {
  min-height: 104px !important;
  padding: 14px 12px !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0,1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  text-align: left !important;
}

#filesOverlay .files-modal-v1 .upload-card .upload-icon {
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
}

#filesOverlay .files-modal-v1 .upload-card b {
  display: block !important;
  font-size: 12.5px !important;
  line-height: 1.15 !important;
}

#filesOverlay .files-modal-v1 .upload-card p {
  max-width: none !important;
  margin: 5px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.28 !important;
}

/* Right panel: selected file must not overlap preview/meta. */
#filesOverlay .files-modal-v1 .files-info {
  min-width: 230px !important;
}

#filesOverlay .files-modal-v1 .info-panel {
  padding: 16px !important;
  border-radius: 22px !important;
}

#filesOverlay .files-modal-v1 .selected-file {
  display: grid !important;
  gap: 12px !important;
}

#filesOverlay .files-modal-v1 .selected-preview {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  max-height: 132px !important;
  min-height: 96px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  margin: 0 !important;
}

#filesOverlay .files-modal-v1 .selected-preview img,
#filesOverlay .files-modal-v1 .selected-preview video,
#filesOverlay .files-modal-v1 .selected-preview .file-preview-video-lite {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

#filesOverlay .files-modal-v1 .selected-meta {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#filesOverlay .files-modal-v1 .selected-meta .meta-line {
  display: grid !important;
  grid-template-columns: 68px minmax(0,1fr) !important;
  gap: 8px !important;
  align-items: start !important;
  min-width: 0 !important;
}

#filesOverlay .files-modal-v1 .selected-meta .meta-line span {
  color: #8791a4 !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
}

#filesOverlay .files-modal-v1 .selected-meta .meta-line b {
  min-width: 0 !important;
  color: #1d2536 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  text-align: right !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

#filesOverlay .files-modal-v1 #fileSelectedName {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-align: right !important;
}

/* Make selected actions predictable and not oversized. */
#filesOverlay .files-modal-v1 .info-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 9px !important;
}

#filesOverlay .files-modal-v1 .info-action {
  min-height: 36px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* Header/search: reduce dead space. */
#filesOverlay .files-modal-v1 .files-search-row {
  gap: 10px !important;
}

#filesOverlay .files-modal-v1 .files-search {
  height: 42px !important;
}

#filesOverlay .files-modal-v1 .file-manager-stats {
  margin: 10px 0 12px !important;
}

/* Keep heavy video selected previews lightweight too. */
#filesOverlay .files-modal-v1 .selected-preview .file-video-play {
  width: 46px !important;
  height: 46px !important;
}

/* Drag overlay remains on top and clearer. */
#filesOverlay .files-drop-card-v94 {
  min-height: 220px !important;
  border-radius: 30px !important;
}


/* ======================================================================
   Step96 — File cards layout fix
   Fixes text/preview overlap in the file manager cards.
   ====================================================================== */

#filesOverlay .files-modal-v1 .files-grid {
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}

/* Card becomes a normal grid, not a pile of overlapping absolute blocks. */
#filesOverlay .files-modal-v1 .file-card {
  position: relative !important;
  min-height: 236px !important;
  height: 236px !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-rows: 86px minmax(76px, 1fr) 32px !important;
  gap: 9px !important;
  align-content: start !important;
  overflow: hidden !important;
  border-radius: 20px !important;
}

/* Preview is always the first row and never covers metadata. */
#filesOverlay .files-modal-v1 .file-preview {
  position: relative !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 86px !important;
  min-height: 86px !important;
  max-height: 86px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

#filesOverlay .files-modal-v1 .file-preview img,
#filesOverlay .files-modal-v1 .file-preview video,
#filesOverlay .files-modal-v1 .file-preview .file-preview-video-lite {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: inherit !important;
}

/* Info is the second row and gets clipped cleanly instead of slipping under preview/actions. */
#filesOverlay .files-modal-v1 .file-card-info {
  grid-row: 2 / span 2 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 32px !important;
  gap: 7px !important;
  overflow: hidden !important;
}

#filesOverlay .files-modal-v1 .file-name-row {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#filesOverlay .files-modal-v1 .file-name-row > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
  overflow: hidden !important;
}

#filesOverlay .files-modal-v1 .file-name {
  margin: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.22 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

#filesOverlay .files-modal-v1 .file-meta {
  margin: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
  font-size: 11.5px !important;
}

/* Actions are a normal bottom row, not absolute over content. */
#filesOverlay .files-modal-v1 .file-card-actions {
  position: static !important;
  grid-row: 2 !important;
  align-self: end !important;
  display: flex !important;
  gap: 7px !important;
  justify-content: flex-start !important;
  min-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: none !important;
}

#filesOverlay .files-modal-v1 .file-card:hover .file-card-actions,
#filesOverlay .files-modal-v1 .file-card.selected .file-card-actions,
#filesOverlay .files-modal-v1 .file-card:focus-within .file-card-actions {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#filesOverlay .files-modal-v1 .file-card-action {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 12px !important;
}

/* Image thumbnails should not be vertically stretched into the text zone. */
#filesOverlay .files-modal-v1 .file-preview.image-preview,
#filesOverlay .files-modal-v1 .file-preview.file-image,
#filesOverlay .files-modal-v1 .file-preview.is-image {
  background: #f8fafc !important;
}

/* Keep scroll smooth: no hover transforms and lighter shadows. */
#filesOverlay .files-modal-v1 .file-card,
#filesOverlay .files-modal-v1 .file-card:hover,
#filesOverlay .files-modal-v1 .file-card.selected {
  transform: none !important;
  will-change: auto !important;
}

/* Right selected panel remains stable. */
#filesOverlay .files-modal-v1 .selected-preview {
  position: relative !important;
  z-index: 0 !important;
}


/* ======================================================================
   Step97 — File cards cleaner layout + playable selected video
   ====================================================================== */

/* Cards should not look like tall empty boxes. */
#filesOverlay .files-modal-v1 .files-grid {
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)) !important;
  gap: 13px !important;
}

#filesOverlay .files-modal-v1 .file-card {
  min-height: 188px !important;
  height: 188px !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-rows: 86px minmax(0, 1fr) !important;
  gap: 8px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.90) !important;
}

#filesOverlay .files-modal-v1 .file-card.selected {
  min-height: 204px !important;
  height: 204px !important;
}

/* Preview is compact and never overlaps text. */
#filesOverlay .files-modal-v1 .file-preview {
  grid-row: 1 !important;
  width: 100% !important;
  height: 86px !important;
  min-height: 86px !important;
  max-height: 86px !important;
  margin: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #f7f9fc !important;
}

#filesOverlay .files-modal-v1 .file-preview img,
#filesOverlay .files-modal-v1 .file-preview .file-preview-video-lite {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

/* Lightweight video preview in grid: clickable selector, not a fake disabled player. */
#filesOverlay .files-modal-v1 .file-preview-video-lite {
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  text-align: left !important;
}

#filesOverlay .files-modal-v1 .file-preview-video-lite:hover .file-video-play {
  transform: scale(1.04) !important;
  background: rgba(255,255,255,.26) !important;
}

#filesOverlay .files-modal-v1 .file-video-play {
  transition: transform .14s ease, background .14s ease !important;
}

/* Info: fixed clean text area. */
#filesOverlay .files-modal-v1 .file-card-info {
  grid-row: 2 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

#filesOverlay .files-modal-v1 .file-name-row,
#filesOverlay .files-modal-v1 .file-name-row > div {
  min-width: 0 !important;
  overflow: hidden !important;
}

#filesOverlay .files-modal-v1 .file-name {
  display: block !important;
  max-width: 100% !important;
  margin: 0 0 5px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #182033 !important;
  font-size: 13px !important;
  line-height: 1.22 !important;
  font-weight: 860 !important;
}

#filesOverlay .files-modal-v1 .file-meta {
  display: block !important;
  max-width: 100% !important;
  margin: 0 0 3px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #7c879a !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
}

/* Actions are no longer a reserved row that creates empty bottom space.
   They float only when the card is selected/hovered. */
#filesOverlay .files-modal-v1 .file-card-actions {
  position: absolute !important;
  left: 10px !important;
  right: auto !important;
  bottom: 10px !important;
  z-index: 5 !important;
  display: flex !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(4px) !important;
  transition: opacity .14s ease, transform .14s ease !important;
}

#filesOverlay .files-modal-v1 .file-card:hover .file-card-actions,
#filesOverlay .files-modal-v1 .file-card.selected .file-card-actions,
#filesOverlay .files-modal-v1 .file-card:focus-within .file-card-actions {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

#filesOverlay .files-modal-v1 .file-card-action {
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  min-height: 29px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 8px 16px rgba(15,23,42,.08) !important;
}

#filesOverlay .files-modal-v1 .file-card-action svg {
  width: 14px !important;
  height: 14px !important;
}

/* Selected video in the right panel is a real player. */
#filesOverlay .files-modal-v1 .selected-preview video {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  background: #111827 !important;
  border-radius: inherit !important;
}

/* Make right selected preview a bit larger for video/images, without breaking meta. */
#filesOverlay .files-modal-v1 .selected-preview {
  max-height: 150px !important;
  min-height: 110px !important;
}

/* If selected card is taller because actions are visible, keep text away from buttons. */
#filesOverlay .files-modal-v1 .file-card.selected .file-card-info {
  padding-bottom: 32px !important;
}

/* Keep unselected cards visually calm. */
#filesOverlay .files-modal-v1 .file-card:not(.selected):not(:hover) {
  box-shadow: 0 8px 20px rgba(15,23,42,.04) !important;
}


/* ======================================================================
   Step98 — File manager selected panel polish
   Focus: make the right panel readable and remove the awkward stacked filename.
   ====================================================================== */

/* Slightly more breathing room for content and right panel. */
#filesOverlay .files-modal-v1 .files-layout {
  grid-template-columns: 200px minmax(0, 1fr) 250px !important;
}

#filesOverlay .files-modal-v1 .files-info {
  min-width: 250px !important;
  width: 250px !important;
}

#filesOverlay .files-modal-v1 .info-panel {
  padding: 16px !important;
  border-radius: 24px !important;
}

/* Selected file panel: preview, filename, details, actions. */
#filesOverlay .files-modal-v1 .selected-file {
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  gap: 12px !important;
  min-width: 0 !important;
}

#filesOverlay .files-modal-v1 .selected-preview {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 118px !important;
  max-height: 150px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #101828 !important;
}

#filesOverlay .files-modal-v1 .selected-preview img,
#filesOverlay .files-modal-v1 .selected-preview video,
#filesOverlay .files-modal-v1 .selected-preview .file-preview-video-lite {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

/* The name is the main title under preview, not a cramped value in a 2-col row. */
#filesOverlay .files-modal-v1 .selected-meta {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#filesOverlay .files-modal-v1 .selected-meta .meta-line:first-child {
  display: block !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid rgba(31,41,55,.07) !important;
}

#filesOverlay .files-modal-v1 .selected-meta .meta-line:first-child span {
  display: none !important;
}

#filesOverlay .files-modal-v1 #fileSelectedName {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-align: left !important;
  color: #111827 !important;
  font-size: 13.5px !important;
  line-height: 1.22 !important;
  font-weight: 900 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Other meta rows: compact readable rows. */
#filesOverlay .files-modal-v1 .selected-meta .meta-line:not(:first-child) {
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: baseline !important;
  min-width: 0 !important;
}

#filesOverlay .files-modal-v1 .selected-meta .meta-line:not(:first-child) span {
  color: #8791a4 !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

#filesOverlay .files-modal-v1 .selected-meta .meta-line:not(:first-child) b {
  min-width: 0 !important;
  color: #1d2536 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Selected actions. */
#filesOverlay .files-modal-v1 .info-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 9px !important;
  margin-top: 2px !important;
}

#filesOverlay .files-modal-v1 .info-action {
  min-height: 38px !important;
  border-radius: 15px !important;
  font-size: 12.5px !important;
  font-weight: 850 !important;
}

/* Left upload card: make it more like an action, not a broken text block. */
#filesOverlay .files-modal-v1 .upload-card {
  grid-template-columns: 42px minmax(0, 1fr) !important;
  min-height: 118px !important;
  border-radius: 22px !important;
}

#filesOverlay .files-modal-v1 .upload-card b {
  font-size: 12.5px !important;
  line-height: 1.18 !important;
}

#filesOverlay .files-modal-v1 .upload-card p {
  font-size: 10.8px !important;
  line-height: 1.24 !important;
}

/* Cards: keep selected action row readable without making the whole card awkward. */
#filesOverlay .files-modal-v1 .file-card.selected {
  height: 208px !important;
  min-height: 208px !important;
}

#filesOverlay .files-modal-v1 .file-card:not(.selected) {
  height: 188px !important;
  min-height: 188px !important;
}

#filesOverlay .files-modal-v1 .file-card.selected .file-card-info {
  padding-bottom: 34px !important;
}

/* A little less "heavy" selected border. */
#filesOverlay .files-modal-v1 .file-card.selected {
  border-color: color-mix(in srgb, var(--accent) 24%, rgba(31,41,55,.09)) !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.065) !important;
}

/* Keep the video label from fighting with the card title. */
#filesOverlay .files-modal-v1 .file-video-label {
  left: 11px !important;
  bottom: 9px !important;
  font-size: 10.5px !important;
  opacity: .78 !important;
}

/* Responsive fallback for narrower widths. */
@media (max-width: 1280px) {
  #filesOverlay .files-modal-v1 .files-layout {
    grid-template-columns: 190px minmax(0, 1fr) 235px !important;
  }

  #filesOverlay .files-modal-v1 .files-info {
    min-width: 235px !important;
    width: 235px !important;
  }
}


/* ======================================================================
   Step99 — File manager upload card cleanup
   Fixes the left upload/drop card text wrapping into a narrow vertical column.
   ====================================================================== */

#filesOverlay .files-modal-v1 .upload-card {
  min-height: 128px !important;
  padding: 16px 14px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  border-radius: 24px !important;
}

#filesOverlay .files-modal-v1 .upload-card .upload-icon {
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  border-radius: 17px !important;
}

#filesOverlay .files-modal-v1 .upload-card b {
  display: block !important;
  max-width: 140px !important;
  color: #3b465a !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 880 !important;
  text-align: center !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

#filesOverlay .files-modal-v1 .upload-card p {
  display: block !important;
  max-width: 142px !important;
  margin: 0 !important;
  color: #7a8499 !important;
  font-size: 0 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

#filesOverlay .files-modal-v1 .upload-card p::before {
  content: "PDF, PNG, JPG, MP4, DOCX" !important;
  display: block !important;
  color: #7a8499 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
}

/* Make the left filter column a bit cleaner with the fixed upload card. */
#filesOverlay .files-modal-v1 .files-side-nav {
  gap: 7px !important;
}

#filesOverlay .files-modal-v1 .files-side {
  padding-bottom: 18px !important;
}

/* Drag state: clear, but not oversized. */
#filesOverlay .files-modal-v1 .upload-card.is-dragover {
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%),
    rgba(255,255,255,.92) !important;
  border-color: color-mix(in srgb, var(--accent) 42%, #c7d2fe) !important;
}


/* ======================================================================
   Step100 — File card actions should not cover title/meta text
   Moves hover/selected actions into the preview area and keeps card text clear.
   ====================================================================== */

/* Give the grid a small inner left gap so cards are not clipped by the viewport edge. */
#filesOverlay .files-modal-v1 #pageFilesList.files-grid {
  padding-left: 2px !important;
  padding-top: 2px !important;
}

/* Keep cards compact, but stop enlarging selected cards just because actions are visible. */
#filesOverlay .files-modal-v1 .file-card,
#filesOverlay .files-modal-v1 .file-card.selected,
#filesOverlay .files-modal-v1 .file-card:not(.selected) {
  height: 190px !important;
  min-height: 190px !important;
  display: grid !important;
  grid-template-rows: 86px minmax(0, 1fr) !important;
  gap: 8px !important;
  overflow: hidden !important;
}

/* Text area must stay clean and never reserve/receive floating buttons. */
#filesOverlay .files-modal-v1 .file-card-info,
#filesOverlay .files-modal-v1 .file-card.selected .file-card-info,
#filesOverlay .files-modal-v1 .file-card:hover .file-card-info {
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

#filesOverlay .files-modal-v1 .file-name-row {
  overflow: hidden !important;
}

/* Actions now live on top of the preview, not over title/metas. */
#filesOverlay .files-modal-v1 .file-card-actions {
  position: absolute !important;
  left: 14px !important;
  top: 68px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 8 !important;
  display: flex !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(4px) !important;
  transition: opacity .14s ease, transform .14s ease !important;
}

#filesOverlay .files-modal-v1 .file-card:hover .file-card-actions,
#filesOverlay .files-modal-v1 .file-card.selected .file-card-actions,
#filesOverlay .files-modal-v1 .file-card:focus-within .file-card-actions {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* Make action buttons readable over image/video previews. */
#filesOverlay .files-modal-v1 .file-card-action {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(31,41,55,.07) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.13) !important;
  backdrop-filter: blur(8px) !important;
}

#filesOverlay .files-modal-v1 .file-card-action:hover {
  background: #fff !important;
  border-color: color-mix(in srgb, var(--accent) 20%, rgba(31,41,55,.08)) !important;
}

#filesOverlay .files-modal-v1 .file-card-action.danger {
  background: rgba(255,247,249,.96) !important;
  border-color: rgba(239,102,117,.20) !important;
}

/* Preview itself should remain the only area under the floating actions. */
#filesOverlay .files-modal-v1 .file-preview {
  position: relative !important;
  z-index: 1 !important;
}

/* Metadata lines: a little tighter, so compact card still breathes. */
#filesOverlay .files-modal-v1 .file-name {
  margin-bottom: 5px !important;
}

#filesOverlay .files-modal-v1 .file-meta {
  margin-bottom: 3px !important;
}

/* Hide tooltips flicker spacing impact; native title stays. */
#filesOverlay .files-modal-v1 .file-card-action[title] {
  line-height: 1 !important;
}


/* ======================================================================
   Step101 — File card action buttons positioning hard-fix
   The action buttons were still clipped because .file-card-info could act as
   the absolute-positioning container. Force the card itself to be the container
   and place actions inside the preview area.
   ====================================================================== */

#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card {
  position: relative !important;
  overflow: hidden !important;
  height: 190px !important;
  min-height: 190px !important;
  padding: 10px !important;
}

/* Important: info must not become the positioning context for action buttons. */
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-card-info,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card.selected .file-card-info,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card:hover .file-card-info {
  position: static !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

/* Actions are pinned to the lower-left of the preview, not the card bottom. */
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-card-actions,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card.selected .file-card-actions,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card:hover .file-card-actions,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card:focus-within .file-card-actions {
  position: absolute !important;
  left: 16px !important;
  top: 72px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  transform: none !important;
}

/* Only show actions on hover/selected/focus, but keep them fully inside card. */
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-card-actions {
  opacity: 0 !important;
  pointer-events: none !important;
}

#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card:hover .file-card-actions,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card.selected .file-card-actions,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card:focus-within .file-card-actions {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Buttons are visible over bright images and dark videos. */
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-card-action {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  display: inline-grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(31,41,55,.08) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.16) !important;
  backdrop-filter: blur(10px) !important;
}

#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-card-action.danger {
  background: rgba(255,247,249,.98) !important;
  border-color: rgba(239,102,117,.22) !important;
}

/* Preview stays behind the actions. */
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-preview {
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

/* Text starts below preview and never intersects action buttons. */
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-name-row {
  position: relative !important;
  z-index: 2 !important;
  overflow: hidden !important;
}

#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-name {
  margin-top: 0 !important;
  margin-bottom: 5px !important;
}

/* Keep selected card same height as others. */
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card.selected {
  height: 190px !important;
  min-height: 190px !important;
}


/* ======================================================================
   Step102 — real fix: action buttons live inside preview
   Previous fixes tried to position actions from inside the text block. This was
   fragile and caused clipping. Now JS moves .file-card-actions into .file-preview.
   ====================================================================== */

/* Card height stays compact and stable. */
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card.selected,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card:not(.selected) {
  height: 190px !important;
  min-height: 190px !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: 86px minmax(0, 1fr) !important;
  gap: 8px !important;
}

/* Text block contains only text now. No actions, no clipping fight. */
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-card-info {
  position: static !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-name-row,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-name-row > div {
  overflow: hidden !important;
  min-width: 0 !important;
}

/* Preview is the action container. */
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-preview {
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

/* Hard override: action buttons are INSIDE preview, pinned above preview bottom. */
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-preview > .file-card-actions,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card.selected .file-preview > .file-card-actions,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card:hover .file-preview > .file-card-actions,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card:focus-within .file-preview > .file-card-actions {
  position: absolute !important;
  left: 8px !important;
  right: auto !important;
  top: auto !important;
  bottom: 8px !important;
  z-index: 30 !important;
  width: auto !important;
  height: 28px !important;
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  transform: none !important;
}

/* Visibility state. */
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-preview > .file-card-actions {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .14s ease !important;
}

#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card:hover .file-preview > .file-card-actions,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card.selected .file-preview > .file-card-actions,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card:focus-within .file-preview > .file-card-actions {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Buttons are fully visible on dark video and light image previews. */
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-preview > .file-card-actions .file-card-action {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(31,41,55,.08) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.18) !important;
  backdrop-filter: blur(10px) !important;
}

#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-preview > .file-card-actions .file-card-action svg {
  width: 14px !important;
  height: 14px !important;
}

#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-preview > .file-card-actions .file-card-action.danger {
  background: rgba(255,247,249,.98) !important;
  border-color: rgba(239,102,117,.24) !important;
}

/* Add a subtle fade behind actions so they are readable without looking heavy. */
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-preview::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 42px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, transparent, rgba(15,23,42,.18)) !important;
  transition: opacity .14s ease !important;
}

#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card:hover .file-preview::after,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card.selected .file-preview::after,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card:focus-within .file-preview::after {
  opacity: 1 !important;
}

/* Keep the video play button centered and not fighting the action buttons. */
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-video-play {
  z-index: 2 !important;
}

/* Text always starts below preview. */
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-name {
  margin-top: 0 !important;
  margin-bottom: 5px !important;
}

#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-meta {
  margin-bottom: 3px !important;
}


/* ======================================================================
   Step103 — File actions moved to selected-file right panel
   Cards are now selection-only. Insert/link/download/delete live in the
   "Выбранный файл" panel.
   ====================================================================== */

/* Hide any old per-card action controls from previous builds. */
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-card-actions,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-preview > .file-card-actions,
#filesOverlay .files-modal-v1 .file-card-actions {
  display: none !important;
}

/* Since cards no longer carry action buttons, make them cleaner and equal-height. */
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card.selected,
#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card:not(.selected) {
  height: 174px !important;
  min-height: 174px !important;
  grid-template-rows: 86px minmax(0, 1fr) !important;
  cursor: pointer !important;
}

#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card .file-preview::after {
  display: none !important;
}

#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card:hover {
  border-color: color-mix(in srgb, var(--accent) 16%, rgba(31,41,55,.08)) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.055) !important;
}

#filesOverlay .files-modal-v1 #pageFilesList.files-grid .file-card.selected {
  border-color: color-mix(in srgb, var(--accent) 34%, rgba(31,41,55,.08)) !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.065) !important;
}

/* Right selected panel actions become the only action area. */
#filesOverlay .files-modal-v1 .file-selected-actions-v103,
#filesOverlay .files-modal-v1 .info-actions.file-selected-actions-v103 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 9px !important;
  margin-top: 4px !important;
}

#filesOverlay .files-modal-v1 .file-selected-actions-v103 .info-action {
  min-height: 38px !important;
  height: 38px !important;
  border-radius: 15px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  display: inline-grid !important;
  place-items: center !important;
}

#filesOverlay .files-modal-v1 .file-selected-actions-v103 .info-action.danger {
  color: #ef6675 !important;
  border: 1px solid rgba(239,102,117,.18) !important;
  background: rgba(255,247,249,.96) !important;
}

#filesOverlay .files-modal-v1 .file-selected-actions-v103 .info-action.danger:hover:not(:disabled) {
  color: #e25264 !important;
  border-color: rgba(239,102,117,.34) !important;
  background: #fff6f8 !important;
}

#filesOverlay .files-modal-v1 .file-selected-actions-v103 .info-action:disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
}

/* Right panel can fit four actions comfortably. */
#filesOverlay .files-modal-v1 .selected-file {
  gap: 11px !important;
}

#filesOverlay .files-modal-v1 .selected-preview {
  max-height: 142px !important;
  min-height: 108px !important;
}

/* Clarify card behavior: selected card is a source, right panel is where actions happen. */
#filesOverlay .files-modal-v1 .file-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  box-shadow: inset 0 0 0 0 transparent !important;
  transition: box-shadow .14s ease !important;
}

#filesOverlay .files-modal-v1 .file-card.selected::after {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}


/* ======================================================================
   Step109 — recovery guard
   Restores stable app runtime from Step103 and neutralizes broken editor-toolbar
   classes if a browser keeps stale CSS/classes from Step105-Step108.
   ====================================================================== */

body.app-shell #toolbar.editor-toolbar.is-editor-toolbar-fixed-v105,
body.app-shell #toolbar.editor-toolbar.is-editor-toolbar-floating-v106,
body.app-shell .ql-toolbar.editor-toolbar.is-editor-toolbar-fixed-v105,
body.app-shell .ql-toolbar.editor-toolbar.is-editor-toolbar-floating-v106 {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: 100% !important;
  transform: none !important;
  animation: none !important;
}

body.app-shell .editor-toolbar-sticky-placeholder,
body.app-shell .editor-toolbar-sticky-placeholder.is-active {
  display: none !important;
  height: 0 !important;
}

body.app-shell .editor-shell.has-floating-editor-toolbar-v106,
body.app-shell .editor-shell.has-fixed-editor-toolbar-v105 {
  padding-top: 0 !important;
}


/* ======================================================================
   Step113 — editor toolbar portal
   Fixed, aligned, no scroll handler, no shaking.
   ====================================================================== */

/* Hide bottom editing status text. */
body.app-shell.is-editing .status,
body.app-shell.is-editing .status::before,
body.app-shell.is-editing .editor-mode-hint {
  display: none !important;
}

/* Neutralize all broken sticky/fixed artifacts from Step110-112 if browser keeps classes. */
body.app-shell .editor-toolbar-sticky-placeholder,
body.app-shell .editor-toolbar-sticky-placeholder.is-active,
body.app-shell .editor-toolbar-dock-placeholder-v111,
body.app-shell .editor-toolbar-dock-placeholder-v111.is-active {
  display: none !important;
  height: 0 !important;
}

body.app-shell .editor-shell.has-floating-editor-toolbar-v106,
body.app-shell .editor-shell.has-fixed-editor-toolbar-v105,
body.app-shell .editor-shell.has-docked-editor-toolbar-v111 {
  padding-top: 0 !important;
}

/* Placeholder keeps the title/text from jumping when toolbar is moved to portal. */
body.app-shell .editor-toolbar-placeholder-v113 {
  display: none !important;
  height: 0 !important;
}

body.app-shell.is-editing .editor-toolbar-placeholder-v113.is-active {
  display: block !important;
}

/* The portal itself is fixed and aligned by CSS variables set on editorShell. */
body.app-shell .editor-toolbar-portal-v113 {
  position: fixed !important;
  left: var(--editor-toolbar-left-v113, 16px) !important;
  top: 92px !important;
  width: var(--editor-toolbar-width-v113, calc(100vw - 32px)) !important;
  z-index: 4300 !important;
  display: none !important;
  pointer-events: none !important;
}

body.app-shell.is-editing .editor-toolbar-portal-v113.is-visible {
  display: block !important;
  pointer-events: auto !important;
}

/* The real toolbar when it is inside the portal. */
body.app-shell .editor-toolbar-portal-v113 > #toolbar.editor-toolbar,
body.app-shell .editor-toolbar-portal-v113 > .ql-toolbar.editor-toolbar {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 20px !important;
  border: 1px solid rgba(31,41,55,.10) !important;
  background: rgba(255,255,255,.965) !important;
  box-shadow: 0 18px 48px rgba(15,23,42,.16) !important;
  backdrop-filter: blur(16px) !important;
  max-height: 132px !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  transform: translateZ(0) !important;
}

/* Normal toolbar state before/after editing. */
body.app-shell #editorShell > #toolbar.editor-toolbar,
body.app-shell #editorShell > .ql-toolbar.editor-toolbar {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  z-index: 1 !important;
}

/* Hard override old classes if the actual toolbar still has them. */
body.app-shell #toolbar.editor-toolbar.is-editor-toolbar-fixed-v105,
body.app-shell #toolbar.editor-toolbar.is-editor-toolbar-floating-v106,
body.app-shell #toolbar.editor-toolbar.is-editor-toolbar-docked-v111,
body.app-shell .ql-toolbar.editor-toolbar.is-editor-toolbar-fixed-v105,
body.app-shell .ql-toolbar.editor-toolbar.is-editor-toolbar-floating-v106,
body.app-shell .ql-toolbar.editor-toolbar.is-editor-toolbar-docked-v111 {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  transform: none !important;
  animation: none !important;
}

/* Mobile: do not portal. Toolbar stays fixed at bottom in original DOM. */
@media (max-width: 760px) {
  body.app-shell .editor-toolbar-portal-v113 {
    display: none !important;
  }

  body.app-shell.is-editing #editorShell > #toolbar.editor-toolbar,
  body.app-shell.is-editing #editorShell > .ql-toolbar.editor-toolbar {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    width: auto !important;
    max-height: 42vh !important;
    overflow: auto !important;
    z-index: 2600 !important;
    border-radius: 22px !important;
    border: 1px solid rgba(31,41,55,.10) !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 22px 60px rgba(15,23,42,.22) !important;
  }

  body.app-shell.is-editing .ql-editor {
    padding-bottom: 180px !important;
  }
}


/* ======================================================================
   Step114 — toolbar portal width fix
   Step113 wrote width variables to #editorShell while the portal lives under body,
   so the portal used fallback full viewport width. This narrows it to editorShell.
   ====================================================================== */

body.app-shell .editor-toolbar-portal-v113 {
  left: var(--editor-toolbar-left-v114, var(--editor-toolbar-left-v113, 16px)) !important;
  width: var(--editor-toolbar-width-v114, var(--editor-toolbar-width-v113, min(1040px, calc(100vw - 32px)))) !important;
  max-width: min(1040px, calc(100vw - 32px)) !important;
  right: auto !important;
}

/* Make the toolbar feel like a compact floating editor control, not a full topbar. */
body.app-shell .editor-toolbar-portal-v113 > #toolbar.editor-toolbar,
body.app-shell .editor-toolbar-portal-v113 > .ql-toolbar.editor-toolbar {
  width: 100% !important;
  max-width: 100% !important;
  padding: 8px 10px !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
  border-radius: 18px !important;
}

/* If the editor itself is wide, keep controls readable without stretching groups too much. */
body.app-shell .editor-toolbar-portal-v113 > #toolbar.editor-toolbar .ql-formats.toolbar-group,
body.app-shell .editor-toolbar-portal-v113 > .ql-toolbar.editor-toolbar .ql-formats.toolbar-group {
  flex: 0 0 auto !important;
}

/* Ensure cached Step112 fixed toolbar does not win over portal mode. */
body.app-shell.is-editing .editor-toolbar-portal-v113 > #toolbar.editor-toolbar,
body.app-shell.is-editing .editor-toolbar-portal-v113 > .ql-toolbar.editor-toolbar {
  position: static !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
}


/* ======================================================================
   Step115 — title input is not covered by floating toolbar
   Step114 fixed toolbar width, but the fixed toolbar still covered titleInput.
   We reserve space ABOVE the title while toolbar is in the portal.
   ====================================================================== */

/* The placeholder was after titleInput, so it reserved space in the wrong place.
   Hide it and reserve space on the editor shell before the title instead. */
body.app-shell.is-editing .editor-toolbar-placeholder-v113,
body.app-shell.is-editing .editor-toolbar-placeholder-v113.is-active {
  display: none !important;
  height: 0 !important;
}

/* Desktop: push the title and editor content below the fixed toolbar. */
@media (min-width: 761px) {
  body.app-shell.is-editing #editorShell.editor-shell {
    padding-top: calc(var(--editor-toolbar-reserve-v113, 92px) + 18px) !important;
    overflow: visible !important;
  }

  body.app-shell.is-editing #titleInput.title-input {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 0 !important;
  }

  body.app-shell .editor-toolbar-portal-v113 {
    top: 92px !important;
  }

  body.app-shell .editor-toolbar-portal-v113 > #toolbar.editor-toolbar,
  body.app-shell .editor-toolbar-portal-v113 > .ql-toolbar.editor-toolbar {
    max-height: 132px !important;
  }
}

/* Mobile keeps bottom toolbar; no title padding needed there. */
@media (max-width: 760px) {
  body.app-shell.is-editing #editorShell.editor-shell {
    padding-top: 0 !important;
  }
}


/* ======================================================================
   Step116 — toolbar dropdowns should not be clipped
   Fixed portal toolbar must allow Quill picker dropdowns to escape the toolbar.
   ====================================================================== */

/* The portal itself must not clip dropdowns. */
body.app-shell .editor-toolbar-portal-v113,
body.app-shell.is-editing .editor-toolbar-portal-v113.is-visible {
  overflow: visible !important;
}

/* The toolbar inside the portal must not use overflow:auto, otherwise picker menus
   are cut to the toolbar height. */
body.app-shell .editor-toolbar-portal-v113 > #toolbar.editor-toolbar,
body.app-shell .editor-toolbar-portal-v113 > .ql-toolbar.editor-toolbar,
body.app-shell.is-editing .editor-toolbar-portal-v113 > #toolbar.editor-toolbar,
body.app-shell.is-editing .editor-toolbar-portal-v113 > .ql-toolbar.editor-toolbar {
  overflow: visible !important;
  max-height: none !important;
}

/* Let every toolbar group/picker be a valid positioning context, without clipping. */
body.app-shell .editor-toolbar-portal-v113 .ql-formats,
body.app-shell .editor-toolbar-portal-v113 .toolbar-group,
body.app-shell .editor-toolbar-portal-v113 .ql-picker,
body.app-shell .editor-toolbar-portal-v113 .ql-picker-label {
  overflow: visible !important;
}

/* Quill dropdown panels: render above the editor content and stay readable. */
body.app-shell .editor-toolbar-portal-v113 .ql-picker.ql-expanded {
  z-index: 4600 !important;
}

body.app-shell .editor-toolbar-portal-v113 .ql-picker.ql-expanded .ql-picker-options,
body.app-shell #toolbar.editor-toolbar .ql-picker.ql-expanded .ql-picker-options {
  z-index: 4700 !important;
  margin-top: 7px !important;
  min-width: max-content !important;
  max-height: min(340px, calc(100vh - 170px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-radius: 14px !important;
  border: 1px solid rgba(31,41,55,.10) !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 18px 44px rgba(15,23,42,.18) !important;
  backdrop-filter: blur(14px) !important;
}

/* Options need enough tap/click area and should not visually collapse. */
body.app-shell .editor-toolbar-portal-v113 .ql-picker-options .ql-picker-item,
body.app-shell #toolbar.editor-toolbar .ql-picker-options .ql-picker-item {
  min-height: 28px !important;
  padding: 6px 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* Keep the letter-spacing dropdown from looking like an unknown "Буквы" control. */
body.app-shell #toolbar.editor-toolbar .ql-letter-spacing .ql-picker-label::before,
body.app-shell .editor-toolbar-portal-v113 .ql-letter-spacing .ql-picker-label::before {
  content: "Межбукв." !important;
}

body.app-shell #toolbar.editor-toolbar .ql-letter-spacing.ql-expanded .ql-picker-label::before,
body.app-shell .editor-toolbar-portal-v113 .ql-letter-spacing.ql-expanded .ql-picker-label::before {
  content: "Межбукв." !important;
}

/* The opened picker should be above neighboring toolbar groups. */
body.app-shell .editor-toolbar-portal-v113 .ql-picker.ql-expanded,
body.app-shell #toolbar.editor-toolbar .ql-picker.ql-expanded {
  position: relative !important;
}

/* Mobile bottom toolbar: dropdowns should also escape upward/downward without being cut. */
@media (max-width: 760px) {
  body.app-shell.is-editing #editorShell > #toolbar.editor-toolbar,
  body.app-shell.is-editing #editorShell > .ql-toolbar.editor-toolbar {
    overflow: visible !important;
    max-height: none !important;
  }

  body.app-shell.is-editing #editorShell > #toolbar.editor-toolbar .ql-picker.ql-expanded .ql-picker-options,
  body.app-shell.is-editing #editorShell > .ql-toolbar.editor-toolbar .ql-picker.ql-expanded .ql-picker-options {
    max-height: 240px !important;
  }
}


/* ======================================================================
   Step119 — remove broken interval/letter-spacing controls + no jump on edit
   ====================================================================== */

/* Hide old controls even if a cached template still renders them. */
body.app-shell #toolbar.editor-toolbar .ql-lineheight,
body.app-shell #toolbar.editor-toolbar .ql-letterspacing,
body.app-shell .editor-toolbar-portal-v113 .ql-lineheight,
body.app-shell .editor-toolbar-portal-v113 .ql-letterspacing {
  display: none !important;
}

/* If the paragraph group becomes empty after hiding these controls, remove its visual shell. */
body.app-shell #toolbar.editor-toolbar .toolbar-group[aria-label="Абзац"]:empty,
body.app-shell .editor-toolbar-portal-v113 .toolbar-group[aria-label="Абзац"]:empty {
  display: none !important;
}

/* Keep the portal toolbar compact after removing one group. */
body.app-shell .editor-toolbar-portal-v113 > #toolbar.editor-toolbar,
body.app-shell .editor-toolbar-portal-v113 > .ql-toolbar.editor-toolbar {
  gap: 6px !important;
}


/* ======================================================================
   Step128 — selective Word-like numbering
   Only selected headings are numbered. Ordered lists under a numbered heading
   become 1.1 / 1.2; nested lists become 1.1.1.
   ====================================================================== */

.dockbook-editor-meta {
  display: none !important;
}

body.app-shell .editor-selective-numbering-tools-v128 {
  gap: 6px !important;
  align-items: center !important;
}

body.app-shell .editor-selective-numbering-btn-v128 {
  min-width: 68px !important;
  height: 32px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(31,41,55,.10) !important;
  background: #fff !important;
  color: #536079 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  padding: 0 10px !important;
  white-space: nowrap !important;
}

body.app-shell .editor-selective-numbering-btn-v128:hover:not(:disabled) {
  color: var(--accent) !important;
  border-color: color-mix(
    in srgb,
    var(--accent) 34%,
    rgba(31,41,55,.10)
  ) !important;
  background: color-mix(in srgb, var(--accent) 5%, #fff) !important;
}

body.app-shell .editor-selective-numbering-btn-v128.active {
  color: var(--accent) !important;
  border-color: color-mix(
    in srgb,
    var(--accent) 44%,
    rgba(31,41,55,.12)
  ) !important;
  background: color-mix(in srgb, var(--accent) 10%, #fff) !important;
}

body.app-shell .editor-selective-numbering-btn-v128:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}

/* Number only headings that carry the persisted Quill class format. */
.dockbook-selective-numbering h1[data-heading-number]::before,
.dockbook-selective-numbering h2[data-heading-number]::before,
.dockbook-selective-numbering h3[data-heading-number]::before,
.dockbook-selective-numbering h4[data-heading-number]::before {
  content: attr(data-heading-number) ". " !important;
  color: currentColor !important;
  font-weight: 900 !important;
  opacity: .96 !important;
}

/* Disable obsolete numbering output from the previous experimental builds. */
.dockbook-word-numbering:not(.dockbook-selective-numbering)
  [data-heading-number]::before,
.dockbook-word-numbering:not(.dockbook-selective-numbering)
  [data-list-number]::before,
.dockbook-heading-numbered:not(.dockbook-selective-numbering)
  [data-heading-number]::before {
  content: none !important;
}

/* Remove the native/Quill marker only when our section-aware number exists.
   Each surface (editor / admin read / public) is addressed explicitly,
   together with its own root class, so this always outranks that surface's
   native marker rule regardless of source order — no revert, no :not(). */
.ql-editor.dockbook-selective-numbering li[data-list-number],
.dc-article-body.dockbook-selective-numbering li[data-list-number],
body.public-page .public-article-body.dockbook-selective-numbering li[data-list-number] {
  position: relative !important;
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;

  /* Text begins here. The number is positioned immediately to its left. */
  padding-left: 0 !important;
  margin-left: 3.35em !important;
  text-indent: 0 !important;
}

.ql-editor.dockbook-selective-numbering li[data-list-number]::marker,
.dc-article-body.dockbook-selective-numbering li[data-list-number]::marker,
body.public-page .public-article-body.dockbook-selective-numbering li[data-list-number]::marker {
  content: "" !important;
}

.ql-editor.dockbook-selective-numbering li[data-list-number] > .ql-ui,
.ql-editor.dockbook-selective-numbering li[data-list-number] > .ql-ui::before,
.ql-editor.dockbook-selective-numbering li[data-list-number] > .ql-ui::after {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  content: none !important;
}

/* No fixed-width marker: this removes the large gap seen in Step127.
   body.public-page prefix on the public selector is required to outrank
   the Step90 public counter marker (content: counter(public-article-ol)),
   which is more specific than a bare .dockbook-selective-numbering rule. */
.ql-editor.dockbook-selective-numbering li[data-list-number]::before,
.dc-article-body.dockbook-selective-numbering li[data-list-number]::before,
body.public-page .public-article-body.dockbook-selective-numbering li[data-list-number]::before {
  content: attr(data-list-number) ". " !important;
  position: absolute !important;
  right: calc(100% + .42em) !important;
  left: auto !important;
  top: 0 !important;
  width: max-content !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: currentColor !important;
  font-weight: 650 !important;
  opacity: .94 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Reset Quill's parent list padding so it does not add a second large indent. */
.dockbook-selective-numbering
  ol:has(> li[data-list-number]) {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Nested list level: a small predictable step, not a giant jump. */
.dockbook-selective-numbering
  li.ql-indent-1[data-list-number] {
  margin-left: 5.05em !important;
}

.dockbook-selective-numbering
  li.ql-indent-2[data-list-number] {
  margin-left: 6.75em !important;
}

.dockbook-selective-numbering
  li.ql-indent-3[data-list-number] {
  margin-left: 8.45em !important;
}

.dockbook-selective-numbering
  li[data-list-number] {
  margin-top: .14em !important;
  margin-bottom: .14em !important;
}

.dockbook-selective-numbering
  ol,
.dockbook-selective-numbering
  ul {
  margin-top: .28em !important;
  margin-bottom: .28em !important;
}

/* Old tests may have left headings inside list items. Do not show a list marker there. */
.dockbook-selective-numbering li:has(> h1),
.dockbook-selective-numbering li:has(> h2),
.dockbook-selective-numbering li:has(> h3),
.dockbook-selective-numbering li:has(> h4) {
  list-style: none !important;
}

.dockbook-selective-numbering li:has(> h1)::before,
.dockbook-selective-numbering li:has(> h2)::before,
.dockbook-selective-numbering li:has(> h3)::before,
.dockbook-selective-numbering li:has(> h4)::before {
  content: none !important;
  display: none !important;
}

@media (max-width: 760px) {
  body.app-shell .editor-selective-numbering-btn-v128 {
    min-width: 56px !important;
    padding: 0 8px !important;
  }
}


/* ======================================================================
   Step129 — clean selective-numbering button
   ====================================================================== */

/* Remove the obsolete start button even if an old cached template renders it. */
body.app-shell #headingNumberStartBtn {
  display: none !important;
}

body.app-shell .editor-selective-numbering-tools-v128 {
  min-width: 0 !important;
  gap: 0 !important;
  padding: 0 !important;
}

body.app-shell .editor-selective-numbering-btn-v128 {
  width: 118px !important;
  min-width: 118px !important;
  height: 34px !important;
  padding: 4px 10px 4px 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex: 0 0 118px !important;

  border: 1px solid rgba(31,41,55,.10) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #536079 !important;
  box-shadow: none !important;

  font-size: 12px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

body.app-shell .editor-selective-numbering-icon-v129 {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 8px !important;
  background: color-mix(in srgb, var(--accent) 10%, #fff) !important;
  color: var(--accent) !important;

  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body.app-shell .editor-selective-numbering-label-v129 {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: inherit !important;
}

body.app-shell .editor-selective-numbering-btn-v128:hover:not(:disabled) {
  border-color: color-mix(
    in srgb,
    var(--accent) 32%,
    rgba(31,41,55,.10)
  ) !important;
  background: color-mix(in srgb, var(--accent) 4%, #fff) !important;
  color: var(--accent) !important;
  transform: none !important;
}

body.app-shell .editor-selective-numbering-btn-v128.active {
  border-color: color-mix(
    in srgb,
    var(--accent) 44%,
    rgba(31,41,55,.10)
  ) !important;
  background: color-mix(in srgb, var(--accent) 8%, #fff) !important;
  color: var(--accent) !important;
}

body.app-shell
  .editor-selective-numbering-btn-v128.active
  .editor-selective-numbering-icon-v129 {
  background: var(--accent) !important;
  color: #fff !important;
}

body.app-shell .editor-selective-numbering-btn-v128:disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
}

@media (max-width: 760px) {
  body.app-shell .editor-selective-numbering-btn-v128 {
    width: 108px !important;
    min-width: 108px !important;
    flex-basis: 108px !important;
  }
}


/* ======================================================================
   Step130 — title clipping + stable editor interactions/hotkeys
   ====================================================================== */

/* The previous 1.05 line-height and zero vertical padding clipped heavy glyphs. */
body.app-shell.is-editing #titleInput.title-input,
body.app-shell.is-editing .title-input {
  min-height: 96px !important;
  height: auto !important;
  padding: 14px 30px 16px !important;
  box-sizing: border-box !important;
  line-height: 1.16 !important;
  overflow: visible !important;
  text-rendering: geometricPrecision !important;
}

/* Keep read/view headings from clipping heavy Cyrillic glyphs too. */
body.app-shell .dc-article-head h1,
body.app-shell .page-focus h1,
body.app-shell .editor-paper > h2 {
  line-height: 1.14 !important;
  padding-top: .04em !important;
  padding-bottom: .08em !important;
  overflow: visible !important;
}

/* Selection should remain clearly visible on double click. */
body.app-shell.is-editing .ql-editor ::selection,
body.app-shell.is-editing #titleInput::selection {
  background: color-mix(in srgb, var(--accent) 34%, transparent) !important;
  color: inherit !important;
}


/* ======================================================================
   Step131 — title clipping + excessive top gap fix
   ====================================================================== */

/* View mode article header: heavy Cyrillic glyphs were clipped by line-height 1.02
   from an older high-specificity rule. Force a safer rhythm. */
body.app-shell:not(.no-page-selected) .dc-article-head {
  padding-top: 30px !important;
  padding-bottom: 14px !important;
  overflow: visible !important;
}

body.app-shell:not(.no-page-selected) .dc-article-head h1,
body.app-shell #pageViewTitle.page-title,
body.app-shell #pageViewTitle {
  display: block !important;
  line-height: 1.24 !important;
  padding-top: .10em !important;
  padding-bottom: .14em !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  text-wrap: balance !important;
  letter-spacing: -.052em !important;
}

/* Compact distance between article header and body.
   Previously dc-article-body had an additional 42px top padding after the header,
   and empty leading paragraphs made the gap look huge. */
body.app-shell:not(.no-page-selected) .dc-article-body {
  padding-top: 20px !important;
}

/* Remove vertical space from hidden meta/empty first blocks if old content still has them. */
body.app-shell:not(.no-page-selected) .dc-article-body > .dockbook-editor-meta:first-child,
body.app-shell:not(.no-page-selected) .dc-article-body > [data-dockbook-meta]:first-child,
body.app-shell.is-editing .ql-editor > .dockbook-editor-meta:first-child,
body.app-shell.is-editing .ql-editor > [data-dockbook-meta]:first-child {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Edit mode title: single-line input is prone to clipping bold glyphs,
   so use a normal line-height with controlled height instead of a tall empty area. */
body.app-shell.is-editing #titleInput.title-input,
body.app-shell.is-editing .title-input {
  min-height: 76px !important;
  height: 76px !important;
  padding: 6px 30px 10px !important;
  line-height: normal !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* The Step115 reserve was too aggressive for the current fixed-toolbar portal and
   could create a large empty area in the editor. Keep only a compact safe reserve. */
@media (min-width: 761px) {
  body.app-shell.is-editing #editorShell.editor-shell {
    padding-top: 18px !important;
  }

  body.app-shell .editor-toolbar-portal-v113 {
    top: 86px !important;
  }
}


/* ======================================================================
   Step134 — recovery after Step133 black screen
   Safe build from Step131. No toolbar hide JS, no MutationObserver.
   Keeps toolbar visible and reserves enough space so title is not covered.
   ====================================================================== */

/* Удаляем возможные следы Step132/Step133 из кэша браузера. */
body.app-shell .editor-toolbar-toggle-v132,
body.app-shell .editor-toolbar-toggle-v132.is-visible,
body.app-shell .editor-toolbar-toggle-v132.is-collapsed {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.app-shell.editor-toolbar-collapsed-v132 {
  /* класс мог остаться в localStorage/кэше, но в этом билде он не должен менять layout */
}

/* Toolbar всегда видим в режиме редактирования. */
body.app-shell.is-editing .editor-toolbar-portal-v113,
body.app-shell.is-editing .editor-toolbar-portal-v113.is-visible {
  display: block !important;
  pointer-events: auto !important;
}

/* Главный фикс из Step132 без JS: резервируем место под toolbar, чтобы он не закрывал название. */
@media (min-width: 761px) {
  body.app-shell.is-editing #editorShell.editor-shell {
    padding-top: calc(var(--editor-toolbar-reserve-v113, 92px) + 22px) !important;
  }

  body.app-shell .editor-toolbar-portal-v113 {
    top: 86px !important;
  }
}

/* Подстраховка от обрезания заголовка. */
body.app-shell.is-editing #titleInput.title-input,
body.app-shell.is-editing .title-input,
body.app-shell #pageViewTitle.page-title,
body.app-shell #pageViewTitle {
  line-height: 1.24 !important;
  overflow: visible !important;
}


/* ======================================================================
   Step135 — image/media captions
   ====================================================================== */

body.app-shell .editor-media-caption-btn-v135 {
  min-width: 78px !important;
  height: 32px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(31,41,55,.10) !important;
  background: #fff !important;
  color: #536079 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  padding: 0 10px !important;
  white-space: nowrap !important;
}

body.app-shell .editor-media-caption-btn-v135:hover {
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 34%, rgba(31,41,55,.10)) !important;
  background: color-mix(in srgb, var(--accent) 5%, #fff) !important;
}

.media-resize-toolbar .media-caption-toolbar-btn-v135 {
  min-width: 74px !important;
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 9%, #fff) !important;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
}

.ql-editor figure.dockbook-caption-figure,
.dc-article-body figure.dockbook-caption-figure,
.public-article-body figure.dockbook-caption-figure,
.public-article figure.dockbook-caption-figure,
.page-view-content figure.dockbook-caption-figure {
  max-width: 100% !important;
  margin: 18px 0 22px !important;
  padding: 0 !important;
  border: 0 !important;
  color: inherit !important;
}

.ql-editor figure.dockbook-caption-figure > img,
.ql-editor figure.dockbook-caption-figure > video,
.ql-editor figure.dockbook-caption-figure > iframe,
.dc-article-body figure.dockbook-caption-figure > img,
.dc-article-body figure.dockbook-caption-figure > video,
.dc-article-body figure.dockbook-caption-figure > iframe,
.public-article-body figure.dockbook-caption-figure > img,
.public-article-body figure.dockbook-caption-figure > video,
.public-article-body figure.dockbook-caption-figure > iframe,
.public-article figure.dockbook-caption-figure > img,
.public-article figure.dockbook-caption-figure > video,
.public-article figure.dockbook-caption-figure > iframe,
.page-view-content figure.dockbook-caption-figure > img,
.page-view-content figure.dockbook-caption-figure > video,
.page-view-content figure.dockbook-caption-figure > iframe {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

figure.dockbook-caption-figure > figcaption.dockbook-media-caption {
  color: #667085 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 680 !important;
  letter-spacing: -.01em !important;
}

figure.dockbook-caption-bottom,
figure.dockbook-caption-top {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

figure.dockbook-caption-top > figcaption.dockbook-media-caption {
  order: -1 !important;
}

figure.dockbook-caption-bottom > figcaption.dockbook-media-caption,
figure.dockbook-caption-top > figcaption.dockbook-media-caption {
  max-width: min(100%, 860px) !important;
  padding: 0 4px !important;
}

figure.dockbook-caption-left,
figure.dockbook-caption-right {
  display: grid !important;
  grid-template-columns: minmax(130px, 240px) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
}

figure.dockbook-caption-right {
  grid-template-columns: minmax(0, 1fr) minmax(130px, 240px) !important;
}

figure.dockbook-caption-left > figcaption.dockbook-media-caption {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

figure.dockbook-caption-left > img,
figure.dockbook-caption-left > video,
figure.dockbook-caption-left > iframe {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

figure.dockbook-caption-right > img,
figure.dockbook-caption-right > video,
figure.dockbook-caption-right > iframe {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

figure.dockbook-caption-right > figcaption.dockbook-media-caption {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.ql-editor figure.dockbook-caption-figure:has(.dockbook-media-selected) {
  outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent) !important;
  outline-offset: 6px !important;
  border-radius: 18px !important;
}

/* Caption modal */
.media-caption-modal-v135 {
  width: min(560px, calc(100vw - 28px));
  border-radius: 28px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(31,41,55,.10);
  box-shadow: 0 32px 90px rgba(15,23,42,.24);
  overflow: hidden;
}

.media-caption-head-v135 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 14px;
  align-items: start;
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(31,41,55,.08);
}

.media-caption-head-v135 h2 {
  margin: 0;
  color: #111827;
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -.04em;
}

.media-caption-head-v135 p {
  margin: 7px 0 0;
  color: #768097;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.media-caption-form-v135 {
  display: grid;
  gap: 16px;
  padding: 18px 24px 22px;
}

.media-caption-form-v135 label,
.media-caption-form-v135 fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.media-caption-form-v135 label > span,
.media-caption-form-v135 legend {
  color: #334155;
  font-size: 12px;
  font-weight: 860;
  letter-spacing: -.01em;
}

.media-caption-form-v135 textarea {
  width: 100%;
  resize: vertical;
  min-height: 92px;
  border-radius: 16px;
  border: 1px solid rgba(31,41,55,.12);
  background: #fff;
  color: #111827;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  outline: none;
}

.media-caption-form-v135 textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 46%, rgba(31,41,55,.12));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

.media-caption-position-grid-v135 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.media-caption-position-grid-v135 label {
  display: block;
}

.media-caption-position-grid-v135 input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.media-caption-position-grid-v135 span {
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(31,41,55,.10);
  background: #f8fafc;
  color: #526079;
  font-size: 12px;
  font-weight: 820;
  cursor: pointer;
}

.media-caption-position-grid-v135 input:checked + span {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 42%, rgba(31,41,55,.10));
  background: color-mix(in srgb, var(--accent) 9%, #fff);
}

.media-caption-actions-v135 {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  margin-top: 2px;
}

.media-caption-actions-v135 button {
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(31,41,55,.10);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.media-caption-actions-v135 button.primary {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.media-caption-actions-v135 button.secondary {
  color: #526079;
  background: #fff;
}

.media-caption-actions-v135 button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  figure.dockbook-caption-left,
  figure.dockbook-caption-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  figure.dockbook-caption-right > figcaption.dockbook-media-caption,
  figure.dockbook-caption-left > figcaption.dockbook-media-caption {
    order: 2 !important;
  }

  .media-caption-position-grid-v135 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-caption-actions-v135 {
    grid-template-columns: 1fr 1fr;
  }

  .media-caption-actions-v135 span {
    display: none;
  }
}


/* ======================================================================
   Step136 — safe caption layout without figure wrapping
   ====================================================================== */

.ql-editor p.dockbook-media-caption,
.dc-article-body p.dockbook-media-caption,
.public-article-body p.dockbook-media-caption,
.public-article p.dockbook-media-caption,
.page-view-content p.dockbook-media-caption {
  max-width: min(100%, 860px) !important;
  color: #667085 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 680 !important;
  letter-spacing: -.01em !important;
  padding: 0 4px !important;
}

.ql-editor p.dockbook-caption-bottom,
.dc-article-body p.dockbook-caption-bottom,
.public-article-body p.dockbook-caption-bottom,
.public-article p.dockbook-caption-bottom,
.page-view-content p.dockbook-caption-bottom {
  margin: 6px 0 18px !important;
}

.ql-editor p.dockbook-caption-top,
.dc-article-body p.dockbook-caption-top,
.public-article-body p.dockbook-caption-top,
.public-article p.dockbook-caption-top,
.page-view-content p.dockbook-caption-top {
  margin: 18px 0 8px !important;
}

/* Left/right captions are implemented as floats so the media remains in its
   normal Quill paragraph and cannot disappear from unknown wrappers. */
.ql-editor p.dockbook-caption-left,
.dc-article-body p.dockbook-caption-left,
.public-article-body p.dockbook-caption-left,
.public-article p.dockbook-caption-left,
.page-view-content p.dockbook-caption-left {
  float: left !important;
  width: min(240px, 36%) !important;
  margin: 4px 16px 10px 0 !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgba(248,250,252,.92) !important;
  border: 1px solid rgba(31,41,55,.08) !important;
}

.ql-editor p.dockbook-caption-right,
.dc-article-body p.dockbook-caption-right,
.public-article-body p.dockbook-caption-right,
.public-article p.dockbook-caption-right,
.page-view-content p.dockbook-caption-right {
  float: right !important;
  width: min(240px, 36%) !important;
  margin: 4px 0 10px 16px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgba(248,250,252,.92) !important;
  border: 1px solid rgba(31,41,55,.08) !important;
}

.ql-editor img.dockbook-has-caption,
.ql-editor video.dockbook-has-caption,
.ql-editor iframe.dockbook-has-caption,
.dc-article-body img.dockbook-has-caption,
.dc-article-body video.dockbook-has-caption,
.dc-article-body iframe.dockbook-has-caption,
.public-article-body img.dockbook-has-caption,
.public-article-body video.dockbook-has-caption,
.public-article-body iframe.dockbook-has-caption {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Old Step135 figure captions remain readable if a page already saved them,
   but new captions no longer create figure wrappers. */
figure.dockbook-caption-figure {
  clear: both !important;
}

@media (max-width: 760px) {
  .ql-editor p.dockbook-caption-left,
  .ql-editor p.dockbook-caption-right,
  .dc-article-body p.dockbook-caption-left,
  .dc-article-body p.dockbook-caption-right,
  .public-article-body p.dockbook-caption-left,
  .public-article-body p.dockbook-caption-right,
  .public-article p.dockbook-caption-left,
  .public-article p.dockbook-caption-right,
  .page-view-content p.dockbook-caption-left,
  .page-view-content p.dockbook-caption-right {
    float: none !important;
    width: auto !important;
    margin: 8px 0 12px !important;
  }
}


/* ======================================================================
   Step138 — captions fixed: Apply works, top/bottom only, centered + size
   ====================================================================== */

.media-caption-position-grid-v135,
.media-caption-size-grid-v138 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px;
}

.media-caption-size-grid-v138 label {
  display: block;
}

.media-caption-size-grid-v138 input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.media-caption-size-grid-v138 span {
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(31,41,55,.10);
  background: #f8fafc;
  color: #526079;
  font-size: 12px;
  font-weight: 820;
  cursor: pointer;
}

.media-caption-size-grid-v138 input:checked + span {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 42%, rgba(31,41,55,.10));
  background: color-mix(in srgb, var(--accent) 9%, #fff);
}

/* All new captions are centered. */
.ql-editor p.dockbook-media-caption,
.dc-article-body p.dockbook-media-caption,
.public-article-body p.dockbook-media-caption,
.public-article p.dockbook-media-caption,
.page-view-content p.dockbook-media-caption,
figure.dockbook-caption-figure > figcaption.dockbook-media-caption {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  width: auto !important;
  max-width: min(100%, 860px) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Existing left/right captions from previous builds are displayed as centered captions. */
.ql-editor p.dockbook-caption-left,
.ql-editor p.dockbook-caption-right,
.dc-article-body p.dockbook-caption-left,
.dc-article-body p.dockbook-caption-right,
.public-article-body p.dockbook-caption-left,
.public-article-body p.dockbook-caption-right,
.public-article p.dockbook-caption-left,
.public-article p.dockbook-caption-right,
.page-view-content p.dockbook-caption-left,
.page-view-content p.dockbook-caption-right {
  float: none !important;
  width: auto !important;
  margin: 6px auto 18px !important;
  padding: 0 4px !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
}

/* Caption size presets. */
.dockbook-media-caption.dockbook-caption-size-small {
  font-size: 12px !important;
}

.dockbook-media-caption.dockbook-caption-size-normal {
  font-size: 13px !important;
}

.dockbook-media-caption.dockbook-caption-size-large {
  font-size: 15px !important;
}

.dockbook-media-caption.dockbook-caption-size-xlarge {
  font-size: 17px !important;
}

/* Center media with captions. */
.ql-editor img.dockbook-has-caption,
.ql-editor video.dockbook-has-caption,
.ql-editor iframe.dockbook-has-caption,
.dc-article-body img.dockbook-has-caption,
.dc-article-body video.dockbook-has-caption,
.dc-article-body iframe.dockbook-has-caption,
.public-article-body img.dockbook-has-caption,
.public-article-body video.dockbook-has-caption,
.public-article-body iframe.dockbook-has-caption,
.page-view-content img.dockbook-has-caption,
.page-view-content video.dockbook-has-caption,
.page-view-content iframe.dockbook-has-caption {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Old figure captions are also forced into centered vertical layout. */
figure.dockbook-caption-left,
figure.dockbook-caption-right,
figure.dockbook-caption-bottom,
figure.dockbook-caption-top {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  clear: both !important;
}

figure.dockbook-caption-top > figcaption.dockbook-media-caption {
  order: -1 !important;
}

figure.dockbook-caption-left > figcaption.dockbook-media-caption,
figure.dockbook-caption-right > figcaption.dockbook-media-caption {
  order: 2 !important;
}

figure.dockbook-caption-left > img,
figure.dockbook-caption-left > video,
figure.dockbook-caption-left > iframe,
figure.dockbook-caption-right > img,
figure.dockbook-caption-right > video,
figure.dockbook-caption-right > iframe {
  grid-column: auto !important;
  grid-row: auto !important;
}


/* ======================================================================
   Step139 — view/editor formatting parity + robust captions
   ====================================================================== */

/* The article view should follow the same rhythm as the editor. */
.dc-article-body,
.public-article-body,
.page-view-content .dc-article-body {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.dc-article-body p,
.public-article-body p {
  margin: 0 0 12px !important;
  line-height: 1.72 !important;
}

.dc-article-body h1,
.public-article-body h1 {
  margin: 28px 0 14px !important;
  line-height: 1.14 !important;
}

.dc-article-body h2,
.public-article-body h2 {
  margin: 34px 0 14px !important;
  line-height: 1.18 !important;
}

.dc-article-body h3,
.public-article-body h3 {
  margin: 26px 0 12px !important;
  line-height: 1.22 !important;
}

.dc-article-body h4,
.public-article-body h4 {
  margin: 22px 0 10px !important;
  line-height: 1.24 !important;
}

.dc-article-body blockquote,
.public-article-body blockquote {
  margin: 14px 0 18px !important;
  padding: 10px 16px !important;
  border-left: 4px solid color-mix(in srgb, var(--accent) 36%, rgba(31,41,55,.10)) !important;
  color: #526079 !important;
  background: rgba(248,250,252,.78) !important;
  border-radius: 0 14px 14px 0 !important;
}

.dc-article-body pre,
.public-article-body pre {
  margin: 14px 0 18px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background: #111827 !important;
  color: #f8fafc !important;
  overflow: auto !important;
}

/* Alignment classes saved by Quill. */
.dc-article-body .ql-align-center,
.public-article-body .ql-align-center { text-align: center !important; }

.dc-article-body .ql-align-right,
.public-article-body .ql-align-right { text-align: right !important; }

.dc-article-body .ql-align-justify,
.public-article-body .ql-align-justify { text-align: justify !important; }

/* Quill indentation classes in view mode. */
.dc-article-body .ql-indent-1:not(li),
.public-article-body .ql-indent-1:not(li) { padding-left: 3em !important; }

.dc-article-body .ql-indent-2:not(li),
.public-article-body .ql-indent-2:not(li) { padding-left: 6em !important; }

.dc-article-body .ql-indent-3:not(li),
.public-article-body .ql-indent-3:not(li) { padding-left: 9em !important; }

.dc-article-body .ql-indent-4:not(li),
.public-article-body .ql-indent-4:not(li) { padding-left: 12em !important; }

.dc-article-body .ql-indent-5:not(li),
.public-article-body .ql-indent-5:not(li) { padding-left: 15em !important; }

.dc-article-body .ql-indent-6:not(li),
.public-article-body .ql-indent-6:not(li) { padding-left: 18em !important; }

.dc-article-body .ql-indent-7:not(li),
.public-article-body .ql-indent-7:not(li) { padding-left: 21em !important; }

.dc-article-body .ql-indent-8:not(li),
.public-article-body .ql-indent-8:not(li) { padding-left: 24em !important; }

/* Lists: keep classic browser markers in view, but also support Quill data-list. */
.dc-article-body ol,
.dc-article-body ul,
.public-article-body ol,
.public-article-body ul {
  margin: 8px 0 16px !important;
  padding-left: 1.55em !important;
  list-style-position: outside !important;
}

.dc-article-body li,
.public-article-body li {
  margin: 4px 0 6px !important;
  padding-left: .25em !important;
  line-height: 1.65 !important;
}

.dc-article-body li > .ql-ui,
.public-article-body li > .ql-ui {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dc-article-body li[data-list="bullet"],
.public-article-body li[data-list="bullet"],
.dc-article-body li.dockbook-view-list-bullet,
.public-article-body li.dockbook-view-list-bullet {
  list-style-type: disc !important;
}

.dc-article-body li[data-list="ordered"],
.public-article-body li[data-list="ordered"],
.dc-article-body li.dockbook-view-list-ordered,
.public-article-body li.dockbook-view-list-ordered {
  list-style-type: decimal !important;
}

.dc-article-body li.ql-indent-1,
.public-article-body li.ql-indent-1 { margin-left: 3em !important; }

.dc-article-body li.ql-indent-2,
.public-article-body li.ql-indent-2 { margin-left: 6em !important; }

.dc-article-body li.ql-indent-3,
.public-article-body li.ql-indent-3 { margin-left: 9em !important; }

.dc-article-body li.ql-indent-4,
.public-article-body li.ql-indent-4 { margin-left: 12em !important; }

/* Captions: protected block, centered, top/bottom only. */
.ql-editor p.dockbook-media-caption,
.dc-article-body p.dockbook-media-caption,
.public-article-body p.dockbook-media-caption,
.public-article p.dockbook-media-caption,
.page-view-content p.dockbook-media-caption {
  display: block !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  clear: both !important;
  user-select: text !important;
  cursor: default !important;
  max-width: min(100%, 860px) !important;
  padding: 0 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Do not let previous left/right captions keep float layout. */
.ql-editor p.dockbook-caption-left,
.ql-editor p.dockbook-caption-right,
.dc-article-body p.dockbook-caption-left,
.dc-article-body p.dockbook-caption-right,
.public-article-body p.dockbook-caption-left,
.public-article-body p.dockbook-caption-right,
.public-article p.dockbook-caption-left,
.public-article p.dockbook-caption-right,
.page-view-content p.dockbook-caption-left,
.page-view-content p.dockbook-caption-right {
  float: none !important;
  width: auto !important;
  margin: 6px auto 18px !important;
  text-align: center !important;
}

/* Keep caption close to media. */
.ql-editor p.dockbook-caption-bottom,
.dc-article-body p.dockbook-caption-bottom,
.public-article-body p.dockbook-caption-bottom,
.page-view-content p.dockbook-caption-bottom {
  margin-top: 6px !important;
  margin-bottom: 18px !important;
}

.ql-editor p.dockbook-caption-top,
.dc-article-body p.dockbook-caption-top,
.public-article-body p.dockbook-caption-top,
.page-view-content p.dockbook-caption-top {
  margin-top: 18px !important;
  margin-bottom: 8px !important;
}

/* Caption size presets in every surface. */
.dockbook-media-caption.dockbook-caption-size-small { font-size: 12px !important; }
.dockbook-media-caption.dockbook-caption-size-normal { font-size: 13px !important; }
.dockbook-media-caption.dockbook-caption-size-large { font-size: 15px !important; }
.dockbook-media-caption.dockbook-caption-size-xlarge { font-size: 17px !important; }

/* Center media when it belongs to a caption. */
.ql-editor img.dockbook-has-caption,
.ql-editor video.dockbook-has-caption,
.ql-editor iframe.dockbook-has-caption,
.dc-article-body img.dockbook-has-caption,
.dc-article-body video.dockbook-has-caption,
.dc-article-body iframe.dockbook-has-caption,
.public-article-body img.dockbook-has-caption,
.public-article-body video.dockbook-has-caption,
.public-article-body iframe.dockbook-has-caption,
.page-view-content img.dockbook-has-caption,
.page-view-content video.dockbook-has-caption,
.page-view-content iframe.dockbook-has-caption {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Better spacing around media paragraphs. */
.ql-editor p:has(> img),
.ql-editor p:has(> video),
.ql-editor p:has(> iframe),
.dc-article-body p:has(> img),
.dc-article-body p:has(> video),
.dc-article-body p:has(> iframe),
.public-article-body p:has(> img),
.public-article-body p:has(> video),
.public-article-body p:has(> iframe) {
  margin-top: 14px !important;
  margin-bottom: 8px !important;
}

/* Header excerpt no longer gets glued block text; keep it readable if long. */
.dc-article-head p {
  overflow-wrap: anywhere !important;
}


/* ======================================================================
   Step140 — caption carrier visual model
   Visual captions are generated from data-caption-text on the media paragraph.
   There is no editable caption text node in the Quill document anymore.
   ====================================================================== */

/* Old caption paragraphs are no longer the source of truth. If any remain
   before JS migrates them, hide them so they cannot look like body text. */
.ql-editor p.dockbook-media-caption,
.dc-article-body p.dockbook-media-caption,
.public-article-body p.dockbook-media-caption,
.public-article p.dockbook-media-caption,
.page-view-content p.dockbook-media-caption {
  display: none !important;
}

/* Carrier paragraph controls both media and generated caption. */
.ql-editor p.dockbook-caption-carrier-v140,
.dc-article-body p.dockbook-caption-carrier-v140,
.public-article-body p.dockbook-caption-carrier-v140,
.public-article p.dockbook-caption-carrier-v140,
.page-view-content p.dockbook-caption-carrier-v140 {
  display: block !important;
  text-align: center !important;
  margin: 14px auto 18px !important;
  clear: both !important;
  line-height: 1.4 !important;
}

.ql-editor p.dockbook-caption-carrier-v140 > img,
.ql-editor p.dockbook-caption-carrier-v140 > video,
.ql-editor p.dockbook-caption-carrier-v140 > iframe,
.dc-article-body p.dockbook-caption-carrier-v140 > img,
.dc-article-body p.dockbook-caption-carrier-v140 > video,
.dc-article-body p.dockbook-caption-carrier-v140 > iframe,
.public-article-body p.dockbook-caption-carrier-v140 > img,
.public-article-body p.dockbook-caption-carrier-v140 > video,
.public-article-body p.dockbook-caption-carrier-v140 > iframe,
.public-article p.dockbook-caption-carrier-v140 > img,
.public-article p.dockbook-caption-carrier-v140 > video,
.public-article p.dockbook-caption-carrier-v140 > iframe,
.page-view-content p.dockbook-caption-carrier-v140 > img,
.page-view-content p.dockbook-caption-carrier-v140 > video,
.page-view-content p.dockbook-caption-carrier-v140 > iframe {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Generated caption. Not editable, not deletable by Backspace as text. */
.ql-editor p.dockbook-caption-carrier-v140::before,
.ql-editor p.dockbook-caption-carrier-v140::after,
.dc-article-body p.dockbook-caption-carrier-v140::before,
.dc-article-body p.dockbook-caption-carrier-v140::after,
.public-article-body p.dockbook-caption-carrier-v140::before,
.public-article-body p.dockbook-caption-carrier-v140::after,
.public-article p.dockbook-caption-carrier-v140::before,
.public-article p.dockbook-caption-carrier-v140::after,
.page-view-content p.dockbook-caption-carrier-v140::before,
.page-view-content p.dockbook-caption-carrier-v140::after {
  color: #667085 !important;
  font-weight: 680 !important;
  letter-spacing: -.01em !important;
  line-height: 1.45 !important;
  text-align: center !important;
  white-space: pre-wrap !important;
  max-width: min(100%, 860px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 4px !important;
}

.ql-editor p.dockbook-caption-carrier-v140.dockbook-caption-top::before,
.dc-article-body p.dockbook-caption-carrier-v140.dockbook-caption-top::before,
.public-article-body p.dockbook-caption-carrier-v140.dockbook-caption-top::before,
.public-article p.dockbook-caption-carrier-v140.dockbook-caption-top::before,
.page-view-content p.dockbook-caption-carrier-v140.dockbook-caption-top::before {
  content: attr(data-caption-text) !important;
  display: block !important;
  margin-bottom: 8px !important;
}

.ql-editor p.dockbook-caption-carrier-v140.dockbook-caption-bottom::after,
.dc-article-body p.dockbook-caption-carrier-v140.dockbook-caption-bottom::after,
.public-article-body p.dockbook-caption-carrier-v140.dockbook-caption-bottom::after,
.public-article p.dockbook-caption-carrier-v140.dockbook-caption-bottom::after,
.page-view-content p.dockbook-caption-carrier-v140.dockbook-caption-bottom::after {
  content: attr(data-caption-text) !important;
  display: block !important;
  margin-top: 8px !important;
}

/* Size presets for generated captions. */
.dockbook-caption-carrier-v140.dockbook-caption-size-small::before,
.dockbook-caption-carrier-v140.dockbook-caption-size-small::after {
  font-size: 12px !important;
}

.dockbook-caption-carrier-v140.dockbook-caption-size-normal::before,
.dockbook-caption-carrier-v140.dockbook-caption-size-normal::after {
  font-size: 13px !important;
}

.dockbook-caption-carrier-v140.dockbook-caption-size-large::before,
.dockbook-caption-carrier-v140.dockbook-caption-size-large::after {
  font-size: 15px !important;
}

.dockbook-caption-carrier-v140.dockbook-caption-size-xlarge::before,
.dockbook-caption-carrier-v140.dockbook-caption-size-xlarge::after {
  font-size: 17px !important;
}

/* The media itself stays selectable/resizable. The caption is generated
   visually, so it cannot be edited as normal text. */
.ql-editor p.dockbook-caption-carrier-v140:has(.dockbook-media-selected) {
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent) !important;
  outline-offset: 8px !important;
  border-radius: 16px !important;
}


/* ======================================================================
   Step141 — captions persistence, video and modal layering
   ====================================================================== */

/* Toolbar must never cover settings/history/share/file/caption modals. */
body.has-open-modal .editor-toolbar-portal-v113,
body.has-open-modal .editor-toolbar-portal-v113.is-visible,
body.has-open-modal .media-resize-toolbar,
body.has-open-modal .media-resize-toolbar.is-visible {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.has-open-modal .ql-tooltip {
  z-index: 10 !important;
}

/* Modals should be above everything editor-related. */
body.app-shell .modal-overlay,
.modal-overlay:not(.hidden) {
  z-index: 9000 !important;
}

body.app-shell .modal,
body.app-shell .media-caption-modal-v135,
.modal-overlay:not(.hidden) > * {
  z-index: 9001 !important;
}

/* Uploaded videos and video links should have stable dimensions, unless the
   media resize toolbar has set an explicit width (.dockbook-resized-media) —
   that inline width must win so video resize behaves like image resize. */
.ql-editor video.dockbook-video-file,
.dc-article-body video.dockbook-video-file,
.public-article-body video.dockbook-video-file,
.page-view-content video.dockbook-video-file {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 14px auto !important;
  border-radius: 16px !important;
  background: #111827 !important;
}
.ql-editor video.dockbook-video-file:not(.dockbook-resized-media),
.dc-article-body video.dockbook-video-file:not(.dockbook-resized-media),
.public-article-body video.dockbook-video-file:not(.dockbook-resized-media),
.page-view-content video.dockbook-video-file:not(.dockbook-resized-media) {
  width: min(100%, 760px) !important;
}

.ql-editor iframe.dockbook-video-embed,
.dc-article-body iframe.dockbook-video-embed,
.public-article-body iframe.dockbook-video-embed,
.page-view-content iframe.dockbook-video-embed {
  display: block !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 260px !important;
  margin: 14px auto !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #111827 !important;
}
.ql-editor iframe.dockbook-video-embed:not(.dockbook-resized-media),
.dc-article-body iframe.dockbook-video-embed:not(.dockbook-resized-media),
.public-article-body iframe.dockbook-video-embed:not(.dockbook-resized-media),
.page-view-content iframe.dockbook-video-embed:not(.dockbook-resized-media) {
  width: min(100%, 760px) !important;
}

@media (max-width: 760px) {
  .ql-editor iframe.dockbook-video-embed,
  .dc-article-body iframe.dockbook-video-embed,
  .public-article-body iframe.dockbook-video-embed,
  .page-view-content iframe.dockbook-video-embed {
    min-height: 190px !important;
  }
}


/* ======================================================================
   Step142 — save/undo/toolbar polish
   ====================================================================== */

/* Center toolbar within the editor page when its width is capped. */
body.app-shell .editor-toolbar-portal-v113 {
  left: var(--editor-toolbar-left-v114, var(--editor-toolbar-left-v113, 16px)) !important;
  width: var(--editor-toolbar-width-v114, var(--editor-toolbar-width-v113, min(1040px, calc(100vw - 32px)))) !important;
  max-width: min(1040px, calc(100vw - 32px)) !important;
  right: auto !important;
}

/* When any modal is open, hide editor controls completely behind it. */
body.has-open-modal .editor-toolbar-portal-v113,
body.has-open-modal .editor-toolbar-portal-v113.is-visible,
body.has-open-modal #editorToolbarPortalV113,
body.has-open-modal .media-resize-toolbar,
body.has-open-modal .media-resize-toolbar.is-visible,
body.has-open-modal .ql-tooltip {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Extra persistence classes for captions. They mirror data-caption-* so captions
   can be rebuilt if data attributes are stripped by a sanitizer. */
.dockbook-caption-source-v142 {
  --dockbook-caption-source: 1;
}

.dockbook-caption-carrier-v140.dockbook-caption-pos-top::before {
  content: attr(data-caption-text) !important;
  display: block !important;
  margin-bottom: 8px !important;
}

.dockbook-caption-carrier-v140.dockbook-caption-pos-bottom::after {
  content: attr(data-caption-text) !important;
  display: block !important;
  margin-top: 8px !important;
}


/* ======================================================================
   Step143 — rounded page edges while scrolling
   ====================================================================== */

/* The page/editor card used overflow:visible for the floating toolbar. During
   scroll that made the white content visually square on the right edge. Keep the
   functional overflow, but draw a rounded clipping mask/edge above the content. */
body.app-shell:not(.no-page-selected) .dc-article-shell,
body.app-shell.is-editing #editorShell.editor-shell,
body.app-shell .dc-folder-article,
body.app-shell .page-focus,
body.app-shell .page-work-card {
  position: relative !important;
  border-radius: 30px !important;
  background-clip: padding-box !important;
  isolation: isolate !important;
}

/* Create a clean rounded edge without clipping toolbar dropdowns. */
body.app-shell:not(.no-page-selected) .dc-article-shell::after,
body.app-shell.is-editing #editorShell.editor-shell::after,
body.app-shell .dc-folder-article::after,
body.app-shell .page-focus::after,
body.app-shell .page-work-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 30 !important;

  /* Inner rim hides the square white edge that appears while the document scrolls. */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.84),
    inset 0 0 0 2px rgba(31,41,55,.025) !important;
}

/* A tiny right-side fade masks the content edge beside the scrollbar, while
   keeping the scrollbar itself outside the article card. */
body.app-shell:not(.no-page-selected) .dc-article-shell::before,
body.app-shell.is-editing #editorShell.editor-shell::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 24px !important;
  border-radius: 0 30px 30px 0 !important;
  pointer-events: none !important;
  z-index: 29 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.96) 72%, rgba(255,255,255,.98)) !important;
}

/* Keep actual content above the base card, but below the visual rounded mask. */
body.app-shell:not(.no-page-selected) .dc-article-shell > *,
body.app-shell.is-editing #editorShell.editor-shell > *,
body.app-shell .dc-folder-article > *,
body.app-shell .page-focus > *,
body.app-shell .page-work-card > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Do not let the mask sit above the fixed editor toolbar portal or modals. */
body.app-shell .editor-toolbar-portal-v113,
body.app-shell .modal-overlay,
body.app-shell .media-resize-toolbar {
  z-index: 4500 !important;
}

/* In edit mode the floating toolbar must stay above the card rim. */
body.app-shell .editor-toolbar-portal-v113 {
  z-index: 4600 !important;
}

/* Scrollbars get a softer track so they don't visually cut the rounded card. */
body.app-shell ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

body.app-shell ::-webkit-scrollbar-track {
  background: transparent;
}

body.app-shell ::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

/* Firefox */
body.app-shell {
  scrollbar-color: rgba(100,116,139,.36) transparent;
}

@media (max-width: 760px) {
  body.app-shell:not(.no-page-selected) .dc-article-shell,
  body.app-shell.is-editing #editorShell.editor-shell,
  body.app-shell .dc-folder-article,
  body.app-shell .page-focus,
  body.app-shell .page-work-card {
    border-radius: 24px !important;
  }

  body.app-shell:not(.no-page-selected) .dc-article-shell::before,
  body.app-shell.is-editing #editorShell.editor-shell::before {
    width: 16px !important;
    border-radius: 0 24px 24px 0 !important;
  }
}


/* ======================================================================
   Step144 — public page spacing and image frame cleanup
   ====================================================================== */

/* Public article should not inherit editor selection outlines. The orange frame
   came from a saved .dockbook-media-selected class and ql-editor selection rules. */
body.public-page .public-article-body .dockbook-media-selected,
body.public-page .public-article-body .dockbook-media-selected:focus,
body.public-page .public-article-body .dockbook-media-selected:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

body.public-page .public-article-body p.dockbook-caption-carrier-v140,
body.public-page .public-article-body p.dockbook-caption-carrier-v140:focus,
body.public-page .public-article-body p.dockbook-caption-carrier-v140:focus-within,
body.public-page .public-article-body p.dockbook-caption-carrier-v140:focus-visible,
body.public-page .public-article-body p.dockbook-caption-carrier-v140:has(.dockbook-media-selected) {
  outline: none !important;
  outline-offset: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Images on public pages are content, not editable cards: no accidental frame. */
body.public-page .public-article-body img,
body.public-page .public-article-body video,
body.public-page .public-article-body iframe {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

body.public-page .public-article-body a:has(> img),
body.public-page .public-article-body a:has(> video),
body.public-page .public-article-body a:has(> iframe),
body.public-page .public-article-body a:has(> img):focus,
body.public-page .public-article-body a:has(> img):focus-visible {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Hide empty editor blocks in public output. They create the big blank spaces
   between sections after copying from the editor/Word. */
body.public-page .public-article-body p:empty,
body.public-page .public-article-body p:has(> br:only-child),
body.public-page .public-article-body .dockbook-empty-block-v144 {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/* Make public rhythm closer to the editor and remove huge gaps before headings. */
body.public-page .public-article-body {
  line-height: 1.66 !important;
}

body.public-page .public-article-body p {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

body.public-page .public-article-body ol,
body.public-page .public-article-body ul {
  margin-top: 6px !important;
  margin-bottom: 12px !important;
}

body.public-page .public-article-body li {
  margin-top: 3px !important;
  margin-bottom: 5px !important;
}

body.public-page .public-article-body h1,
body.public-page .public-article-body h2,
body.public-page .public-article-body h3,
body.public-page .public-article-body h4 {
  clear: both !important;
}

body.public-page .public-article-body h2 {
  margin-top: 24px !important;
  margin-bottom: 12px !important;
}

body.public-page .public-article-body h3 {
  margin-top: 20px !important;
  margin-bottom: 10px !important;
}

body.public-page .public-article-body h4 {
  margin-top: 16px !important;
  margin-bottom: 8px !important;
}

body.public-page .public-article-body p + h2,
body.public-page .public-article-body ol + h2,
body.public-page .public-article-body ul + h2,
body.public-page .public-article-body blockquote + h2 {
  margin-top: 22px !important;
}

body.public-page .public-article-body p + h3,
body.public-page .public-article-body ol + h3,
body.public-page .public-article-body ul + h3 {
  margin-top: 18px !important;
}

/* Caption carrier should be compact and centered without card-like border. */
body.public-page .public-article-body p.dockbook-caption-carrier-v140 {
  margin: 12px auto 18px !important;
  padding: 0 !important;
  text-align: center !important;
}

body.public-page .public-article-body p.dockbook-caption-carrier-v140::before,
body.public-page .public-article-body p.dockbook-caption-carrier-v140::after {
  color: #667085 !important;
  text-align: center !important;
  font-weight: 680 !important;
}

/* If old figure captions exist, keep them clean too. */
body.public-page .public-article-body figure.dockbook-caption-figure,
body.public-page .public-article-body figure.dockbook-caption-figure:focus,
body.public-page .public-article-body figure.dockbook-caption-figure:focus-within {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}


/* ======================================================================
   Step145 — layout polish: card edges, history header, article badge
   ====================================================================== */

/* 1) Card edges.
   Step143 kept overflow visible for the toolbar, but in view mode this can make
   card corners look square/cut while scrolling. View cards can safely clip. */
body.app-shell:not(.is-editing) .dc-article-shell,
body.app-shell:not(.is-editing) .dc-folder-article,
body.app-shell:not(.is-editing) .page-focus,
body.app-shell:not(.is-editing) .page-work-card {
  overflow: hidden !important;
  border-radius: 30px !important;
  background-clip: padding-box !important;
}

/* In edit mode keep dropdowns/toolbars free, but draw a cleaner rim. */
body.app-shell.is-editing #editorShell.editor-shell {
  border-radius: 30px !important;
  background-clip: padding-box !important;
}

/* The right fade from Step143 was too visible on some backgrounds. Make it softer
   and keep it strictly inside the rounded card. */
body.app-shell:not(.no-page-selected) .dc-article-shell::before,
body.app-shell.is-editing #editorShell.editor-shell::before {
  width: 14px !important;
  opacity: .56 !important;
  border-radius: 0 30px 30px 0 !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.62) 76%,
    rgba(255,255,255,.82)
  ) !important;
}

/* Reduce the heavy-looking lower shadow line on rounded cards. */
body.app-shell:not(.no-page-selected) .dc-article-shell,
body.app-shell .page-focus,
body.app-shell .page-work-card {
  box-shadow:
    0 18px 54px rgba(15,23,42,.055),
    0 1px 0 rgba(255,255,255,.82) inset !important;
}

/* 2) Article type badge/kicker.
   The badge in the article header looked vertically uneven and too close to the
   corner. Use a real inline-flex pill with stable dot alignment. */
body.app-shell:not(.no-page-selected) .dc-article-head {
  padding: 28px 30px 22px !important;
}

body.app-shell:not(.no-page-selected) .dc-article-head .dc-article-kicker {
  min-height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: #7a8499 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
}

body.app-shell:not(.no-page-selected) .dc-article-head .dc-article-dot {
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  min-height: 9px !important;
  display: block !important;
  border-radius: 999px !important;
  margin: 0 !important;
  background: var(--accent) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent) !important;
}

body.app-shell:not(.no-page-selected) .dc-article-head h1 {
  margin-top: 0 !important;
}

/* 3) History panel header.
   The "хранится до 60 версий" label was squeezed and looked like broken text.
   Give the title, retention label, and refresh button explicit columns. */
body.app-shell #historyPanel .history-card-panel {
  padding: 18px !important;
  border-radius: 26px !important;
}

body.app-shell #historyPanel .history-card-panel > .panel-title {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 40px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  margin: 0 0 12px !important;
}

body.app-shell #historyPanel .history-card-panel > .panel-title h3 {
  margin: 0 !important;
  color: #151b2d !important;
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  white-space: nowrap !important;
}

body.app-shell #historyPanel #historySubtitle {
  justify-self: start !important;
  min-width: 0 !important;
  max-width: 118px !important;
  display: block !important;
  color: #8a94a8 !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  word-spacing: .08em !important;
  white-space: normal !important;
  text-align: left !important;
}

body.app-shell #historyPanel #historyRefreshBtn {
  justify-self: end !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  display: inline-grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(31,41,55,.09) !important;
  background: rgba(255,255,255,.92) !important;
  color: #526079 !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.07) !important;
  line-height: 1 !important;
  font-size: 16px !important;
}

body.app-shell #historyPanel #historyRefreshBtn:hover {
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 28%, rgba(31,41,55,.09)) !important;
  background: color-mix(in srgb, var(--accent) 5%, #fff) !important;
}

/* Make history items less cramped under the header. */
body.app-shell #historyPanel .history-list {
  margin-top: 6px !important;
}

body.app-shell #historyPanel .history-empty {
  border-radius: 16px !important;
  line-height: 1.35 !important;
}

/* 4) Right column cards should not visually touch or cast harsh clipped shadows. */
body.app-shell #historyPanel .panel-card {
  background-clip: padding-box !important;
}

body.app-shell #historyPanel .management-panel-v65 {
  margin-bottom: 14px !important;
  border-radius: 28px !important;
}

/* Small screens: do not force the retention label into an unreadable 2-word stack. */
@media (max-width: 1320px) {
  body.app-shell #historyPanel .history-card-panel > .panel-title {
    grid-template-columns: 1fr 38px !important;
    row-gap: 4px !important;
  }

  body.app-shell #historyPanel .history-card-panel > .panel-title h3 {
    grid-column: 1 !important;
  }

  body.app-shell #historyPanel #historySubtitle {
    grid-column: 1 !important;
    max-width: none !important;
    font-size: 8.5px !important;
  }

  body.app-shell #historyPanel #historyRefreshBtn {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
  }
}

/* Batch1: welcome page — clean, permission-aware */
.dc-welcome-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dc-welcome-feature { border-radius: 20px; background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.80); box-shadow: 0 4px 14px rgba(15,23,42,.05); padding: 18px; display: grid; gap: 8px; align-content: start; }
.dc-welcome-feature svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dc-welcome-feature b { font-size: 14px; font-weight: 760; color: #1e293b; }
.dc-welcome-feature span { font-size: 13px; color: #64748b; line-height: 1.45; }
@media (max-width: 900px) { .dc-welcome-features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .dc-welcome-features { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .dc-welcome-feature { transition: none; } }

/* ==========================================================
   Batch 2 - Design System Cohesion
   CSS-only scoped overrides, appended to app.css.
   No JS / EJS / server.js changes.
   !important only where step24 patches require it.
   ========================================================== */

/* --- 1. Design Tokens ------------------------------------ */
:root {
  --dc-text-xs:    .75rem;
  --dc-text-sm:    .875rem;
  --dc-text-base:  1rem;
  --dc-text-lg:    1.125rem;
  --dc-text-xl:    1.25rem;
  --dc-text-2xl:   1.5rem;
  --dc-text-3xl:   1.875rem;
  --dc-lh-heading: 1.3;
  --dc-lh-body:    1.72;
  --dc-max-prose:  68ch;
  --dc-radius-xs:  6px;
  --dc-radius-sm:  8px;
  --dc-radius-md:  14px;
  --dc-radius-lg:  20px;
  --dc-shadow-xs:  0 1px 2px rgba(15,23,42,.05);
  --dc-shadow-sm:  0 2px 8px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --dc-shadow-md:  0 6px 20px rgba(15,23,42,.09), 0 2px 6px rgba(15,23,42,.04);
  --dc-ease:       cubic-bezier(.4,0,.2,1);
  --dc-ease-out:   cubic-bezier(0,0,.2,1);
  --dc-motion-slow: 280ms;

  /* --dc-toast-z, --dc-hover-shadow(-soft), --dc-right-panel-gap,
     --dc-text-*, --dc-lh-*, --dc-max-prose already defined above/below in
     this file's own token blocks (step23/step24/Batch2) — reused as-is,
     not redeclared here. Only --dc-shadow-modal was genuinely missing
     (modal box-shadow previously supplied by custom/app-custom.css). */
  --dc-shadow-modal: 0 24px 56px rgba(15,23,42,.16), 0 8px 20px rgba(15,23,42,.08);
}

/* --- 2. Reading typography - .dc-document-content -------- */
.dc-document-content,
.dc-article-body {
  font-size: var(--dc-text-base);
  line-height: var(--dc-lh-body);
  color: var(--text);
  max-width: var(--dc-max-prose);
}

.dc-document-content h1,
.dc-article-body h1,
.dc-document-content h2,
.dc-article-body h2,
.dc-document-content h3,
.dc-article-body h3,
.dc-document-content h4,
.dc-article-body h4 {
  line-height: var(--dc-lh-heading);
  letter-spacing: -.02em;
  color: #0f172a;
  margin-top: 1.5em;
  margin-bottom: .45em;
}

.dc-document-content h1,
.dc-article-body h1 {
  font-size: var(--dc-text-3xl);
  font-weight: 800;
}

.dc-document-content h2,
.dc-article-body h2 {
  font-size: var(--dc-text-2xl);
  font-weight: 760;
}

.dc-document-content h3,
.dc-article-body h3 {
  font-size: var(--dc-text-xl);
  font-weight: 720;
}

.dc-document-content h4,
.dc-article-body h4 {
  font-size: var(--dc-text-lg);
  font-weight: 680;
}

.dc-document-content p,
.dc-article-body p {
  margin: 0 0 1em;
}

.dc-document-content ul,
.dc-document-content ol,
.dc-article-body ul,
.dc-article-body ol {
  padding-left: 1.5em;
  margin: 0 0 1em;
}

.dc-document-content li,
.dc-article-body li {
  margin-bottom: .4em;
}

.dc-document-content blockquote,
.dc-article-body blockquote {
  border-left: 3px solid var(--accent);
  margin: 1.25em 0;
  padding: .6em 1em;
  color: var(--muted);
  font-style: italic;
  background: var(--accent-soft);
  border-radius: 0 var(--dc-radius-sm) var(--dc-radius-sm) 0;
}

.dc-document-content pre,
.dc-article-body pre {
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-radius: var(--dc-radius-sm);
  padding: .9em 1.1em;
  overflow-x: auto;
  font-size: var(--dc-text-sm);
  line-height: 1.6;
}

.dc-document-content code,
.dc-article-body code {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .9em;
}

.dc-document-content pre code,
.dc-article-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

.dc-document-content hr,
.dc-article-body hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

/* --- 3. Sidebar / tree visual cohesion ------------------- */
.sidebar .tree-item {
  border-radius: var(--dc-radius-sm);
  transition: background 140ms ease, box-shadow 140ms ease;
}

.sidebar .tree-title {
  font-size: var(--dc-text-sm);
  color: #334155;
  border-radius: var(--dc-radius-sm);
  transition: background 140ms ease, color 140ms ease;
}

.sidebar .tree-title:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.sidebar .tree-item.active .tree-title {
  color: var(--accent);
  font-weight: 660;
}

.sidebar .tree-toggle {
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

/* --- 4. Topbar / icon-btn hover + focus ------------------ */
body.app-shell .icon-btn:not(.primary):hover:not(:disabled) {
  color: var(--accent) !important;
  background: rgba(71,85,105,.07) !important;
}

.topbar a:focus-visible,
.topbar .link-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--dc-radius-xs);
}

/* --- 5. Welcome cards ------------------------------------ */
.dc-welcome-feature {
  border-radius: var(--dc-radius-lg);
  box-shadow: var(--dc-shadow-sm);
  transition: box-shadow 140ms ease, transform 140ms ease;
}

.dc-welcome-feature:hover {
  box-shadow: var(--dc-shadow-md);
  transform: translateY(-3px);
}

/* --- 6. Editor visual cohesion --------------------------- */
.editor-shell {
  border-radius: var(--dc-radius-md);
  box-shadow: var(--dc-shadow-sm);
}

#toolbar {
  border-radius: var(--dc-radius-md) var(--dc-radius-md) 0 0;
}

.title-input {
  border-radius: var(--dc-radius-md);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.title-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(71,85,105,.12);
}

.editor-mode-hint {
  border-radius: var(--dc-radius-sm);
}

.status {
  font-size: var(--dc-text-sm);
}

/* --- 7. Public page typography --------------------------- */
.public-article {
  border-radius: var(--dc-radius-lg);
  box-shadow: var(--dc-shadow-sm);
}

.public-article h1,
.public-article h2,
.public-article h3,
.public-article h4 {
  line-height: var(--dc-lh-heading);
  letter-spacing: -.02em;
  color: #0f172a;
  margin-top: 1.5em;
  margin-bottom: .45em;
}

.public-article h1 {
  font-size: var(--dc-text-3xl);
  font-weight: 800;
}

.public-article h2 {
  font-size: var(--dc-text-2xl);
  font-weight: 760;
}

.public-article h3 {
  font-size: var(--dc-text-xl);
  font-weight: 720;
}

.public-article p {
  font-size: var(--dc-text-base);
  line-height: var(--dc-lh-body);
  margin: 0 0 1em;
  color: var(--text);
}

.public-article ul,
.public-article ol {
  padding-left: 1.5em;
  margin: 0 0 1em;
  line-height: var(--dc-lh-body);
}

.public-article li {
  margin-bottom: .4em;
}

.public-article blockquote {
  border-left: 3px solid var(--accent);
  margin: 1.25em 0;
  padding: .6em 1em;
  color: var(--muted);
  font-style: italic;
  background: var(--accent-soft);
  border-radius: 0 var(--dc-radius-sm) var(--dc-radius-sm) 0;
}

.public-article pre {
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-radius: var(--dc-radius-sm);
  padding: .9em 1.1em;
  overflow-x: auto;
  font-size: var(--dc-text-sm);
  line-height: 1.6;
}

.public-article code {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .9em;
}

.public-article pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

.public-content .ql-editor,
.public-content .dc-article-body,
.public-content .page-view-content {
  max-width: var(--dc-max-prose);
}

/* --- 8. Public header / nav micro-polish ----------------- */
.public-header .brand {
  font-weight: 800;
  letter-spacing: -.03em;
  transition: opacity 140ms ease;
}

.public-header .brand:hover {
  opacity: .76;
}

.public-tree {
  border-radius: var(--dc-radius-lg);
  box-shadow: var(--dc-shadow-sm);
}

.public-tree-row a {
  font-size: var(--dc-text-sm);
  border-radius: var(--dc-radius-sm);
  transition: background 140ms ease, color 140ms ease;
}

.public-tree-toggle {
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

/* --- 9. focus-visible sweep ------------------------------ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(71,85,105,.12);
}

.auth-card button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 13px;
}

.public-article a:focus-visible,
.public-footer a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.tree-toggle:focus-visible,
.public-tree-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 999px;
}

.settings-page a:focus-visible,
.settings-page button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--dc-radius-sm);
}

/* --- 10. prefers-reduced-motion sweep -------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .dc-welcome-feature,
  .dc-welcome-feature:hover,
  .sidebar .tree-item,
  .sidebar .tree-title,
  .sidebar .tree-toggle,
  .public-tree-row a,
  .public-tree-toggle,
  .public-header .brand,
  .title-input {
    transition: none;
    transform: none;
  }

  body.app-shell button,
  body.app-shell .icon-btn,
  body.app-shell .dc-action-btn,
  body.app-shell .workspace-card,
  body.app-shell .quick,
  body.app-shell .format-btn,
  body.app-shell .file-card-action {
    transition: none !important;
  }

  body.app-shell button:hover,
  body.app-shell .icon-btn:hover,
  body.app-shell .dc-action-btn:hover,
  body.app-shell .workspace-card:hover,
  body.app-shell .quick:hover,
  body.app-shell button:active,
  body.app-shell .icon-btn:active,
  body.app-shell .workspace-card:active {
    transform: none !important;
  }
}

/* end Batch 2 */

/* ==========================================================
   Batch 3 - Visible Structural Redesign
   CSS-only scoped overrides, appended to app.css.
   No JS / EJS / server.js changes.
   !important only where existing patches must be overridden.
   ========================================================== */

/* --- 1. Dark sidebar base -------------------------------- */
.sidebar {
  background: #1e2739 !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
  backdrop-filter: none !important;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1);
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.2);
}

/* --- 2. Brand area on dark sidebar ----------------------- */
.sidebar a.brand,
.sidebar .brand {
  color: rgba(248,250,252,.92) !important;
  padding: 4px 4px 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar .brand-mark {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: none !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 9px !important;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
}
.sidebar .brand-logo {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px;
}
.sidebar .brand-title {
  color: rgba(248,250,252,.9) !important;
  font-size: 14.5px;
  font-weight: 760;
  letter-spacing: -.025em;
  line-height: 1.15;
}
.sidebar .brand-sub {
  color: rgba(248,250,252,.35) !important;
  font-size: 11px;
  margin-top: 2px;
}

/* --- 3. Sidebar tools layout ----------------------------- */
.sidebar-tools {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  margin-top: 6px;
}
.sidebar-tools .sidebar-primary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent) !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 650;
}
.sidebar-tools .sidebar-primary svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar .sidebar-collapse {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: rgba(248,250,252,.42) !important;
  border-radius: 10px;
}
.sidebar .sidebar-collapse:hover {
  background: rgba(255,255,255,.12) !important;
  color: rgba(248,250,252,.76) !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* --- 4. Tree on dark sidebar ----------------------------- */
.sidebar .tree-title {
  color: rgba(248,250,252,.72);
}
.sidebar .tree-title:hover {
  background: rgba(255,255,255,.07) !important;
  color: rgba(248,250,252,.96) !important;
}
.sidebar .tree-toggle {
  color: rgba(248,250,252,.36) !important;
}
.sidebar .tree-toggle:hover {
  background: rgba(255,255,255,.08) !important;
  color: rgba(248,250,252,.82) !important;
}
.sidebar .tree-item.active {
  background: color-mix(in srgb, var(--accent) 20%, #1e2739) !important;
  box-shadow: none !important;
}
.sidebar .tree-item.active .tree-title {
  color: color-mix(in srgb, var(--accent) 65%, #fff) !important;
  font-weight: 650;
}
.sidebar .public-badge {
  color: rgba(165,180,252,.78);
}

/* node-color items on dark sidebar */
.sidebar .tree-item.has-node-color {
  background: color-mix(in srgb, var(--node-color) 14%, rgba(255,255,255,.04)) !important;
  box-shadow: none !important;
}
.sidebar .tree-item.active.has-node-color {
  background: color-mix(in srgb, var(--node-color) 22%, rgba(255,255,255,.06)) !important;
}

/* edit / add context buttons on dark sidebar */
.sidebar .tree-edit,
.sidebar .tree-add {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: rgba(248,250,252,.42) !important;
}
.sidebar .tree-edit:hover,
.sidebar .tree-add:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(248,250,252,.82) !important;
}

/* --- 5. Side footer on dark sidebar ---------------------- */
.sidebar .side-footer {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 10px;
  margin-top: 8px;
}
.sidebar .upgrade b {
  color: rgba(248,250,252,.72);
}
.sidebar .upgrade p {
  color: rgba(248,250,252,.36);
  font-size: 12px;
  line-height: 1.45;
  margin: 4px 0 6px;
}
.sidebar .upgrade a.mini {
  color: rgba(165,180,252,.78);
}
.sidebar .upgrade a.mini:hover {
  color: rgba(199,210,254,.96);
}

/* --- 6. Content reading zone max-width ------------------- */
.page-view-card {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.editor-paper {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 40px 48px;
}
.dc-article-shell {
  max-width: 820px;
  margin: 0 auto;
}
.dc-article-head h1 {
  font-size: clamp(26px, 3.5vw, 44px);
  letter-spacing: -.04em;
  line-height: 1.12;
  margin: 0 0 10px;
}
.dc-article-head p {
  color: #64748b;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 18px;
}

/* --- 7. Welcome screen layout + hero -------------------- */
.dc-welcome-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.dc-welcome-feature {
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(226,232,240,.8) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.06) !important;
  padding: 20px 18px !important;
  display: grid;
  gap: 8px;
  align-content: start;
}
.dc-welcome-feature svg {
  width: 22px;
  height: 22px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dc-welcome-feature b {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}
.dc-welcome-feature span {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

/* --- 8. Public page flat documentation layout ------------ */
.public-layout {
  grid-template-columns: var(--public-nav-width, 280px) minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.public-tree {
  position: sticky !important;
  top: 58px !important;
  height: calc(100vh - 58px) !important;
  max-height: none !important;
  overflow-y: auto !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
  background: rgba(248,250,252,.98) !important;
  padding: 20px 14px 24px !important;
}
.public-tree h2 {
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin: 0 0 10px;
  padding: 0 7px;
}

/* --- 9. Public article flat reading surface -------------- */
.public-article {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 40px clamp(24px, 5vw, 64px) 60px !important;
  max-width: 820px;
  margin: 0 auto;
}
.public-article h1 {
  font-size: clamp(26px, 3.5vw, 44px) !important;
  letter-spacing: -.04em !important;
  line-height: 1.12 !important;
  margin: 0 0 20px !important;
  color: #0f172a;
}
.public-content {
  min-width: 0;
}

/* --- 10. Public tree search box -------------------------- */
.public-search-input {
  background: rgba(255,255,255,.86);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  width: 100%;
  color: var(--text);
}
.public-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(71,85,105,.1);
}

/* --- 11. Topbar: solid, not frosted on dark sidebar bg -- */
body.app-shell .topbar {
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid rgba(226,232,240,.9) !important;
}

/* --- 12. Public page mobile ----------------------------- */
@media (max-width: 900px) {
  .public-layout {
    grid-template-columns: 1fr !important;
  }
  .public-tree {
    position: static !important;
    height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .public-article {
    padding: 24px 20px 40px !important;
  }
  .dc-welcome-features {
    grid-template-columns: 1fr !important;
  }
}

/* ======================================================================
   heading-list-css-final-v1 — Final list-numbering override.
   Root cause: on the public page the article root carries all three
   classes at once ("public-article-body ql-editor dockbook-selective-numbering"),
   so Step90's counter rule (body.public-page .public-article-body.ql-editor
   li[data-list="ordered"]::before) and the earlier dockbook-selective-numbering
   override land on the exact same specificity (0,4,3) and the tie was
   decided by source order alone — fragile. Adding .ql-editor to the public
   selector here raises it to (0,5,3), so this wins deterministically
   regardless of where it sits in the file. Scoped strictly to
   li[data-list-number]; plain list items (no data-list-number) are
   untouched by this block.
   ====================================================================== */

.ql-editor.dockbook-selective-numbering li[data-list-number],
.dc-article-body.dockbook-selective-numbering li[data-list-number],
body.public-page .public-article-body.ql-editor.dockbook-selective-numbering li[data-list-number] {
  list-style: none !important;
}

.ql-editor.dockbook-selective-numbering li[data-list-number] > .ql-ui,
.dc-article-body.dockbook-selective-numbering li[data-list-number] > .ql-ui,
body.public-page .public-article-body.ql-editor.dockbook-selective-numbering li[data-list-number] > .ql-ui {
  display: none !important;
}

.ql-editor.dockbook-selective-numbering li[data-list-number]::before,
.dc-article-body.dockbook-selective-numbering li[data-list-number]::before,
body.public-page .public-article-body.ql-editor.dockbook-selective-numbering li[data-list-number]::before {
  content: attr(data-list-number) ". " !important;
}

/* end Batch 3 */

/* ======================================================================
   Public page mobile parity — decisive final override.
   Several earlier public-layout patches share the same specificity
   (body.public-page .public-layout = 0,2,1) with conflicting/partial
   breakpoints (760/900/980px) and a >=620px minmax() content track from
   the fixed-nav feature. Depending on which one happened to sit last, a
   narrow viewport could keep the desktop 2-column grid, leaving the
   article squeezed next to a still-visible sidebar with a horizontal
   scrollbar and a large empty gap.
   This block matches that same specificity and is physically last in the
   file, so it wins deterministically. Switching .public-layout to
   display:block (instead of fighting grid-template-columns/grid-column
   overrides one by one) makes every earlier grid-column/minmax rule moot,
   so the sidebar and article simply stack in DOM order — the sidebar
   becomes a compact block above the article, full width, no overlap.
   Scoped to body.public-page only; admin shell/read mode is untouched. */
@media (max-width: 900px) {
  body.public-page .public-layout {
    display: block !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }
  body.public-page .public-tree {
    position: static !important;
    grid-column: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    left: auto !important;
    top: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }
  body.public-page .public-content {
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.public-page .public-article,
  body.public-page .public-article-body {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* ======================================================================
   Public page mobile/tablet — fixed-nav kill switch.
   Root cause: the fixed-nav feature (Step92) toggles position:fixed via
   `.is-public-fixed` on .public-header/.public-tree, driven by JS at a
   981px breakpoint. The "decisive final override" above resets
   `.public-layout`/`.public-tree`/`.public-content` on <=900px, but never
   targets the combined `body.public-page .public-tree.is-public-fixed`
   / `body.public-page .public-header.is-public-fixed` selectors — those
   have higher specificity (0,3,1 vs 0,2,1) than the plain reset, so if
   the fixed classes are ever present the tree stays position:fixed at a
   desktop-computed left/top, reading as a sidebar stuck top-right with a
   large empty gap above the article (from the fixed header's reserved
   padding-top). This block matches the same higher specificity, is
   scoped strictly to body.public-page, sits after everything else in the
   file, and raises the breakpoint to 1100px to match the JS desktop
   query (min-width: 1101px) so JS and CSS never disagree about which
   mode is active. Desktop (>=1101px) is untouched. */
@media (max-width: 1100px) {
  body.public-page,
  body.public-page.public-fixed-nav-ready {
    padding-top: 0 !important;
    overflow-x: hidden !important;
  }

  body.public-page .public-header,
  body.public-page .public-header.is-public-fixed,
  body.public-page .public-tree,
  body.public-page .public-tree.is-public-fixed {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    z-index: auto !important;
  }

  body.public-page .public-layout {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow-x: hidden !important;
  }

  body.public-page .public-tree {
    display: block !important;
    margin: 0 0 12px !important;
    overflow: visible !important;
  }

  body.public-page .public-content,
  body.public-page .public-article,
  body.public-page .public-article-body {
    grid-column: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
  }

  body.public-page .public-article-head,
  body.public-page .public-article-body,
  body.public-page .public-article-body.ql-editor {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.public-page .public-export-nav {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  body.public-page .public-article-body img,
  body.public-page .public-article-body video,
  body.public-page .public-article-body iframe {
    max-width: 100% !important;
  }
}

/* ======================================================================
   Public mobile navigation/readability final v1
   Replaces four overlapping/duplicated emergency hotfix blocks that were
   applied directly on the live server (readability pass, "strong
   readability override v2", "viewport force v1" x2 duplicated verbatim,
   "final small override") — all removed and consolidated here as the
   single source of truth. Structural mobile fixes (grid->block layout,
   is-public-fixed reset) stay in the "decisive final override" and
   "fixed-nav kill switch" blocks above; this block only owns sizing/
   spacing for the header, export controls, tree/search card and article
   text. One breakpoint (1100px) shared with the fixed-nav switch above,
   so JS/CSS/readability never disagree about which mode is active.
   Scoped to body.public-page only. Variant B (CSS-only compact tree
   card) was chosen over wrapping the tree in <details>/<summary>: the
   markup is shared verbatim between desktop and mobile (views/public.ejs
   has no separate mobile template), so a collapsible-nav element would
   need extra desktop-only marker/cursor resets to avoid changing the
   desktop look — not worth the risk for a CSS-only pass. */
@media (max-width: 1100px) {
  /* --- Header: stay on one row, brand doesn't push export controls off-screen --- */
  body.public-page .public-header {
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  body.public-page .public-brand {
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }

  body.public-page .public-brand-text {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 40vw !important;
  }

  /* --- Export controls: one compact scrollable row instead of two desktop groups --- */
  body.public-page .public-export-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 2px !important;
  }

  body.public-page .public-export-nav > span {
    display: none !important;
  }

  body.public-page .public-export-group {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
  }

  body.public-page .public-export-group small {
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  body.public-page .public-export-nav button {
    min-height: 40px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  /* --- Tree/search: compact bounded card, not a full-height desktop panel --- */
  body.public-page .public-tree {
    max-height: 42vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 0 12px !important;
    padding: 14px !important;
  }

  body.public-page .public-tree h2 {
    margin: 0 0 10px !important;
  }

  body.public-page .public-search-input {
    font-size: 16px !important;
    height: 44px !important;
  }

  body.public-page .public-tree-row {
    min-height: 44px !important;
  }

  body.public-page .public-tree-row a {
    font-size: 15.5px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  /* --- Article: large readable text, article starts higher (tighter head padding) --- */
  body.public-page .public-article-head {
    padding: 20px 16px 16px !important;
  }

  body.public-page .public-article-head h1 {
    font-size: 28px !important;
    line-height: 1.18 !important;
  }

  body.public-page .public-article-body,
  body.public-page .public-article-body.ql-editor {
    padding: 18px 16px 28px !important;
    font-size: 21px !important;
    line-height: 1.6 !important;
  }

  body.public-page .public-article-body p,
  body.public-page .public-article-body li,
  body.public-page .public-article-body div {
    font-size: 21px !important;
    line-height: 1.6 !important;
  }

  body.public-page .public-article-body h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  body.public-page .public-article-body h2 {
    font-size: 25px !important;
    line-height: 1.22 !important;
    margin-bottom: 12px !important;
  }

  body.public-page .public-article-body h2:not(:first-child) {
    margin-top: 28px !important;
  }

  body.public-page .public-article-body h3 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 420px) {
  body.public-page .public-article-head {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.public-page .public-article-body,
  body.public-page .public-article-body.ql-editor {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.public-page .public-brand-text {
    max-width: 32vw !important;
  }
}

/* ======================================================================
   Public mobile navigation placement final v2
   Root cause: .public-page .public-tree (line ~4573, an old desktop
   3-column layout rule, specificity 0,2,0) sets
   `max-width: 270px !important; justify-self: end !important;`. No
   body.public-page-scoped rule (0,2,1, which normally wins) ever
   overrode justify-self/max-width for .public-tree specifically — the
   "fixed-nav kill switch" and "readability final v1" blocks above only
   set display/margin/padding/overflow on it. Modern browsers honor
   justify-self on plain block boxes, not just grid items, so even after
   .public-layout switched to display:block at <=1100px, .public-tree
   kept right-aligning itself inside a 270px box: sidebar-on-the-right,
   large empty gap on the left, tree not full width. This block closes
   that exact gap. Export button sizing is restated (not changed) from
   the "readability final v1" block since it's the same fix pass/
   breakpoint. Article/content rules are intentionally not touched here
   — they were never affected by this leak and readability is already
   correct. */
@media (max-width: 1100px) {
  body.public-page .public-tree,
  body.public-page .public-tree.is-public-fixed {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 10px 0 !important;
  }

  body.public-page .public-header {
    padding: 8px 10px !important;
    margin-bottom: 6px !important;
  }

  body.public-page .public-tree {
    padding: 12px !important;
  }

  body.public-page .public-export-nav button {
    min-height: 40px !important;
    font-size: 14px !important;
  }
}

/* ======================================================================
   Public mobile header — visual upgrade v1
   Root cause: body.public-page .public-header (line ~16865, unconditional
   — not media-scoped) fixes `height: 58px !important` and a tight
   `padding: 8px 10px 8px 12px !important`. The two prior mobile passes
   ("readability final v1", "placement final v2") only ever touched
   padding/flex-wrap on the header, never `height`/`min-height`, so the
   58px fixed height stayed in force on mobile too — a floating pill
   sized for a desktop toolbar, not a mobile app bar. This block frees
   the height and gives the header, brand mark and export buttons more
   breathing room. Brand stays left (unchanged flex order); export nav
   stays right (`margin-left: auto` from the unconditional base rule is
   untouched) and keeps its horizontal-scroll fallback from the
   "readability final v1" block. Scoped to body.public-page,
   @media (max-width: 1100px) only — desktop (>=1101px) keeps the
   original 58px pill untouched. */
@media (max-width: 1100px) {
  body.public-page .public-header {
    height: auto !important;
    min-height: 68px !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
  }

  body.public-page .public-brand {
    height: 48px !important;
  }

  body.public-page .public-brand-logo {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex: 0 0 38px !important;
  }

  body.public-page .public-export-nav {
    gap: 10px !important;
  }

  body.public-page .public-export-group {
    gap: 8px !important;
  }

  body.public-page .public-export-nav button {
    min-height: 44px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
  }
}

/* ======================================================================
   Public mobile bottom nav v3
   Root cause of v1's regression: `.public-export-nav`/`.public-mobile-
   nav-toggle` were nested inside <header class="public-header">, and
   body.public-page .public-header has an UNCONDITIONAL (not media-scoped)
   `backdrop-filter: blur(16px)` (Step-era rule, ~line 16879) plus
   `position: sticky` + `transform: translateZ(0)` (Step91, ~line 17620).
   Both backdrop-filter and transform establish a new containing block for
   `position: fixed` descendants per spec — so the "fixed" export nav and
   burger were actually fixed relative to the header box, not the
   viewport, which is why they stayed pinned near the top instead of
   docking to the bottom.
   Fix: views/public.ejs now renders a real top-level `.public-mobile-
   bottom-bar` as a sibling of <header> (not nested in it), containing a
   NEW `.public-mobile-export-nav` (buttons share `data-public-export`
   actions with the desktop nav — same public/public.js handler, same
   export URLs, not a second feature) and the burger button. The original
   `.public-export-nav` inside <header> is simply hidden on mobile here;
   its DOM position and desktop behavior are untouched.
   `.public-tree` off-canvas sheet behavior (hidden by default, revealed
   via `public-mobile-nav-open` on <body>) is unchanged from v1 — that
   part was never affected by the header containing-block bug, since
   .public-tree is not nested inside <header>. */
body.public-page .public-mobile-bottom-bar,
body.public-page .public-mobile-nav-backdrop {
  display: none;
}

@media (max-width: 1100px) {
  /* Reserve room at the bottom so the fixed bar never covers the article end. */
  body.public-page {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Compact header: brand only on mobile, no room wasted at the top. */
  body.public-page .public-header {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 10px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body.public-page .public-layout {
    padding-top: 8px !important;
    margin-top: 0 !important;
  }

  /* Desktop export nav stays in <header> but is hidden on mobile — its
     job is taken over visually by .public-mobile-export-nav below. */
  body.public-page .public-export-nav {
    display: none !important;
  }

  /* The bottom bar itself: a direct child of <body>, so position:fixed
     here is relative to the real viewport, not a transformed ancestor. */
  body.public-page .public-mobile-bottom-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 8px calc(8px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(8px + env(safe-area-inset-left, 0px)) !important;
    background: rgba(255,255,255,.96) !important;
    border-top: 1px solid rgba(31,41,55,.12) !important;
    box-shadow: 0 -12px 36px rgba(15,23,42,.12) !important;
    backdrop-filter: blur(16px) !important;
    z-index: 205 !important;
  }

  body.public-page .public-mobile-export-nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    overflow-x: auto !important;
  }

  body.public-page .public-mobile-export-nav .public-export-group {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
  }

  body.public-page .public-mobile-export-nav button {
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  /* Burger: right segment of the same bar, always on top so it also
     works as the sheet's close affordance while open. */
  body.public-page .public-mobile-nav-toggle {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    flex: 0 0 58px !important;
    width: 58px !important;
    min-height: 52px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: rgba(15,23,42,.06) !important;
    color: #151827 !important;
    position: relative !important;
    z-index: 225 !important;
  }

  body.public-page .public-mobile-nav-toggle span:first-child {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  body.public-page .public-mobile-nav-toggle span:last-child {
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
  }

  body.public-page .public-mobile-nav-toggle[aria-expanded="true"] {
    color: var(--public-accent-current, var(--accent)) !important;
    background: color-mix(in srgb, var(--public-accent-current, var(--accent)) 14%, transparent) !important;
  }

  /* Backdrop dims the page while the sheet is open — also a direct
     <body> child, so inset:0 covers the real viewport. */
  body.public-page .public-mobile-nav-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15,23,42,.45) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 220ms ease !important;
    z-index: 215 !important;
  }

  body.public-mobile-nav-open .public-mobile-nav-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Tree/search: off-canvas bottom sheet, hidden until toggled open. */
  body.public-page .public-tree {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 70vh !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -18px 50px rgba(15,23,42,.22) !important;
    transform: translateY(110%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: transform 220ms ease, opacity 220ms ease !important;
    z-index: 220 !important;
  }

  body.public-mobile-nav-open .public-tree {
    transform: translateY(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   Article view / right panel / modal system / management buttons
   Moved from custom/app-custom.css (PHASE 2.2 clean split — that file no
   longer covers admin shell; admin shell now lives solely in
   custom/admin-clean.css). This content is unchanged in behaviour, only
   relocated, and its token references (--shadow-*, --motion-*) were
   remapped to this file's own existing --dc-* tokens instead of
   introducing a second parallel token family.
   ══════════════════════════════════════════════════════════════════════ */

/* Background-image reset for article/editor/panel surfaces (not the
   admin shell itself — sidebar/topbar/board backgrounds are owned by
   custom/admin-clean.css). */
body.app-shell .page-work-card,
body.app-shell .page-view,
body.app-shell #pageView,
body.app-shell .page-view-card,
body.app-shell .dc-article-shell,
body.app-shell .dc-folder-article,
body.app-shell .editor-shell,
body.app-shell .editor-card,
body.app-shell .editor-paper,
body.app-shell .right-panel,
body.app-shell .history-panel {
  background-image: none !important;
}

@media (min-width: 1180px) {
  body.app-shell:not(.no-page-selected) .board {
    grid-template-columns: minmax(0, 1fr) clamp(318px, 20vw, 350px) !important;
    gap: 18px !important;
    align-items: start !important;
  }
}

body.app-shell:not(.no-page-selected) .main-scroll {
  padding: 18px 18px 28px 0 !important;
  min-width: 0 !important;
  background: transparent !important;
}

body.app-shell:not(.no-page-selected) .page-work-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.app-shell:not(.no-page-selected) .page-view,
body.app-shell:not(.no-page-selected) #pageView {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

body.app-shell:not(.no-page-selected) .page-view-card,
body.app-shell:not(.no-page-selected) .dc-article-shell,
body.app-shell:not(.no-page-selected) .dc-folder-article {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 22px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: var(--dc-shadow-md) !important;
  overflow: hidden !important;
}

body.app-shell:not(.no-page-selected) .dc-article-head {
  padding: 32px 38px 26px !important;
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
}

body.app-shell:not(.no-page-selected) .dc-article-head > p:first-of-type {
  display: none !important;
}

body.app-shell:not(.no-page-selected) .dc-article-head h1 {
  max-width: 960px !important;
  font-size: clamp(34px, 3vw, 52px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.04em !important;
}

body.app-shell:not(.no-page-selected) .dc-article-body,
body.app-shell:not(.no-page-selected) .page-view-content {
  max-width: none !important;
  padding: 32px 38px 42px !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #334155 !important;
}

body.app-shell:not(.no-page-selected) .dc-article-body p,
body.app-shell:not(.no-page-selected) .page-view-content p {
  margin: 0 0 1rem !important;
}

body.app-shell:not(.no-page-selected) .dc-article-body h2,
body.app-shell:not(.no-page-selected) .page-view-content h2 {
  margin: 1.45em 0 0.65em !important;
  font-size: clamp(24px, 2vw, 30px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  color: #0f172a !important;
}

body.app-shell:not(.no-page-selected) .page-card-topline,
body.app-shell:not(.no-page-selected) .editor-actions {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body.app-shell.is-editing .editor-shell,
body.app-shell.is-editing .editor-card,
body.app-shell.is-editing .editor-paper {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.app-shell:not(.no-page-selected) .right-panel,
body.app-shell:not(.no-page-selected) .history-panel {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.app-shell:not(.no-page-selected) .right-panel > *,
body.app-shell:not(.no-page-selected) .history-panel > *,
body.app-shell:not(.no-page-selected) .panel-card,
body.app-shell:not(.no-page-selected) .history-card-panel {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: var(--dc-shadow-sm) !important;
}

body.app-shell:not(.no-page-selected) .management-panel,
body.app-shell:not(.no-page-selected) .management-panel-v65,
body.app-shell:not(.no-page-selected) .home-create-panel {
  background: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
  box-shadow: var(--dc-shadow-sm) !important;
}

body.app-shell:not(.no-page-selected) .management-panel *,
body.app-shell:not(.no-page-selected) .management-panel-v65 * {
  text-shadow: none !important;
}

body.app-shell:not(.no-page-selected) .management-board,
body.app-shell:not(.no-page-selected) .quick-grid,
body.app-shell:not(.no-page-selected) .home-create-grid {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 10px !important;
}

body.app-shell .modal-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  cursor: pointer !important;
}
body.app-shell .modal-close:hover {
  background: rgba(15, 23, 42, 0.07) !important;
  color: #1e293b !important;
}
body.app-shell .modal-close:active {
  transform: scale(0.88) !important;
  background: rgba(15, 23, 42, 0.11) !important;
}
body.app-shell .modal-close:focus-visible {
  outline: 2px solid var(--accent, #7c8cff) !important;
  outline-offset: 2px !important;
}
body.app-shell .files-close:hover {
  background: rgba(15, 23, 42, 0.05) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}
body.app-shell .files-close:active {
  transform: scale(0.93) !important;
}
body.app-shell .files-close:focus-visible {
  outline: 2px solid var(--accent, #7c8cff) !important;
  outline-offset: 2px !important;
}

body.app-shell .create-modal,
body.app-shell .files-modal,
body.app-shell .confirm-modal {
  box-shadow: var(--dc-shadow-modal) !important;
}

@keyframes dc-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dc-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

body.app-shell .modal-overlay:not(.hidden) {
  animation: dc-overlay-in var(--dc-motion) var(--dc-ease) both;
}

body.app-shell .modal-overlay:not(.hidden) .create-modal,
body.app-shell .modal-overlay:not(.hidden) .files-modal,
body.app-shell .modal-overlay:not(.hidden) .confirm-modal {
  animation: dc-modal-in var(--dc-motion) var(--dc-ease) both;
}

body.app-shell .management-action {
  transition:
    transform    var(--dc-motion-fast) var(--dc-ease),
    box-shadow   var(--dc-motion-fast) var(--dc-ease),
    border-color var(--dc-motion-fast) var(--dc-ease) !important;
}

body.app-shell .management-action:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: var(--dc-shadow-md) !important;
}

body.app-shell .management-action:active:not(:disabled) {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: var(--dc-shadow-xs) !important;
}

@starting-style {
  body.app-shell:not(.no-page-selected) .dc-article-shell,
  body.app-shell:not(.no-page-selected) .page-view-card {
    opacity: 0;
    transform: translateY(6px);
  }
}

body.app-shell:not(.no-page-selected) .dc-article-shell,
body.app-shell:not(.no-page-selected) .page-view-card {
  transition:
    opacity   var(--dc-motion) var(--dc-ease),
    transform var(--dc-motion) var(--dc-ease);
}

@media (prefers-reduced-motion: reduce) {
  body.app-shell .dc-article-shell,
  body.app-shell .page-view-card,
  body.app-shell .modal-close,
  body.app-shell .files-close,
  body.app-shell .management-action {
    transition: none !important;
    animation: none !important;
  }

  body.app-shell .modal-overlay:not(.hidden),
  body.app-shell .modal-overlay:not(.hidden) .create-modal,
  body.app-shell .modal-overlay:not(.hidden) .files-modal,
  body.app-shell .modal-overlay:not(.hidden) .confirm-modal {
    animation: none !important;
  }

  body.app-shell .management-action:hover:not(:disabled),
  body.app-shell .management-action:active:not(:disabled) {
    transform: none !important;
  }
}

@media (max-width: 1179px) {
  body.app-shell:not(.no-page-selected) .main-scroll {
    padding: 18px 16px 26px !important;
  }

  body.app-shell:not(.no-page-selected) .page-view-card,
  body.app-shell:not(.no-page-selected) .dc-article-shell,
  body.app-shell:not(.no-page-selected) .dc-folder-article,
  body.app-shell:not(.no-page-selected) .page-card-topline,
  body.app-shell:not(.no-page-selected) .editor-actions,
  body.app-shell.is-editing .editor-shell,
  body.app-shell.is-editing .editor-card,
  body.app-shell.is-editing .editor-paper {
    width: 100% !important;
    max-width: none !important;
  }

  body.app-shell:not(.no-page-selected) .dc-article-head,
  body.app-shell:not(.no-page-selected) .dc-article-body,
  body.app-shell:not(.no-page-selected) .page-view-content {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}


/* DataCaps branding v11 — generated initial marks */
.auth-logo-mark,
.setup-logo-mark,
.public-brand-logo > span {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-transform: none;
  font-variant: normal;
  font-feature-settings: normal;
}

/* DataCaps onboarding v16 — language choice, initial administrator, and login */
body.onboarding-shell {
  min-height: 100vh;
  margin: 0;
  color: #111827;
  background:
    radial-gradient(circle at 78% 12%, rgba(116,132,255,.16), transparent 28rem),
    radial-gradient(circle at 22% 82%, rgba(129,140,248,.10), transparent 24rem),
    linear-gradient(145deg, #f8fafc 0%, #f1f5fb 55%, #eef1ff 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.onboarding-shell *, body.onboarding-shell *::before, body.onboarding-shell *::after { box-sizing: border-box; }
.onboarding-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
}
.onboarding-card {
  width: min(620px, 100%);
  padding: 30px;
  border: 1px solid rgba(211,220,234,.96);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 28px 90px rgba(39,52,84,.13);
}
.onboarding-card.language-step { width: min(560px,100%); }
.onboarding-card.auth-onboarding-card { width: min(460px,100%); }
.onboarding-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #202a40;
  font-size: 14px;
  font-weight: 800;
}
.onboarding-logo, .onboarding-logo-mark {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
}
.onboarding-logo { object-fit: contain; background: #fff; }
.onboarding-logo-mark {
  display: grid;
  place-items: center;
  color: #fff;
  background: #7484ff;
  font-size: 18px;
  font-weight: 850;
}
.onboarding-progress {
  display: flex;
  gap: 7px;
  margin-top: 28px;
}
.onboarding-progress span {
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: #e0e5ef;
}
.onboarding-progress span.active { background: #7484ff; }
.onboarding-heading { margin: 24px 0 22px; }
.onboarding-step-label {
  display: block;
  margin-bottom: 8px;
  color: #7484ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.onboarding-heading h1 {
  margin: 0;
  color: #111827;
  font-size: 30px;
  line-height: 1.12;
  font-weight: 850;
  letter-spacing: -.035em;
}
.onboarding-heading p {
  margin: 10px 0 0;
  color: #6d7b92;
  font-size: 14px;
  line-height: 1.6;
}
.onboarding-heading p span, .language-hint span { color: #98a3b6; }
.language-choice-form, .onboarding-form { display: grid; gap: 14px; }
.language-choice {
  position: relative;
  min-height: 74px;
  display: grid;
  grid-template-columns: 44px 1fr 20px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.language-choice:hover, .language-choice.selected {
  border-color: #9eaaff;
  background: #f8f9ff;
  box-shadow: 0 0 0 3px rgba(116,132,255,.10);
}
.language-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.language-code {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #6676f5;
  background: #eef0ff;
  font-size: 12px;
  font-weight: 850;
}
.language-choice > span:nth-of-type(2) { display: grid; gap: 3px; }
.language-choice strong { color: #1b2539; font-size: 14px; }
.language-choice small { color: #8290a6; font-size: 11.5px; }
.language-choice i {
  width: 18px;
  height: 18px;
  border: 2px solid #cad3e2;
  border-radius: 50%;
}
.language-choice.selected i { border: 5px solid #7484ff; }
.language-hint {
  margin: 2px 0 0;
  color: #76839a;
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
}
.onboarding-form label {
  display: grid;
  gap: 7px;
  color: #344157;
  font-size: 12.5px;
  font-weight: 720;
}
.onboarding-form input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #ccd7e6;
  border-radius: 11px;
  color: #111827;
  background: #fff;
  outline: none;
  font: inherit;
}
.onboarding-form input:focus {
  border-color: #96a4ff;
  box-shadow: 0 0 0 3px rgba(116,132,255,.12);
}
.onboarding-password-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
}
.onboarding-back {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  color: #64728a;
  text-decoration: none;
  font-size: 13px;
  font-weight: 720;
}
.onboarding-submit {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #7484ff;
  border-radius: 11px;
  color: #fff;
  background: #7484ff;
  box-shadow: 0 9px 20px rgba(116,132,255,.22);
  font-size: 13px;
  font-weight: 780;
  cursor: pointer;
}
.language-choice-form > .onboarding-submit { width: 100%; margin-top: 2px; }
.onboarding-alert {
  margin: -6px 0 16px;
  padding: 11px 13px;
  border: 1px solid #ffc8cf;
  border-radius: 11px;
  color: #9f2938;
  background: #fff1f3;
  font-size: 12.5px;
}
@media (max-width: 640px) {
  .onboarding-page { padding: 14px; }
  .onboarding-card { padding: 22px; border-radius: 19px; }
  .onboarding-heading h1 { font-size: 26px; }
  .onboarding-password-grid { grid-template-columns: 1fr; }
  .onboarding-actions { align-items: stretch; flex-direction: column-reverse; }
  .onboarding-actions .onboarding-submit, .onboarding-actions .onboarding-back { width: 100%; justify-content: center; }
}

/* DataCaps first-run restrained ambient background v55
   One clean implementation only: no grid, dots, rain, rings or decorative panels. */
body.onboarding-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 58rem 42rem at -8% 8%, rgba(124, 140, 255, .18), transparent 68%),
    radial-gradient(ellipse 54rem 40rem at 108% 6%, rgba(91, 186, 255, .15), transparent 70%),
    radial-gradient(ellipse 56rem 44rem at 92% 108%, rgba(165, 133, 255, .13), transparent 70%),
    radial-gradient(ellipse 48rem 38rem at 8% 104%, rgba(102, 216, 201, .10), transparent 72%),
    linear-gradient(145deg, #f8fafc 0%, #f4f7fb 48%, #f4f3fb 100%);
}

body.onboarding-shell::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: -24%;
  pointer-events: none;
  opacity: .78;
  filter: blur(82px) saturate(112%);
  background:
    radial-gradient(ellipse 28% 22% at 18% 30%, rgba(124, 140, 255, .28), transparent 74%),
    radial-gradient(ellipse 26% 20% at 82% 24%, rgba(83, 184, 255, .22), transparent 74%),
    radial-gradient(ellipse 30% 22% at 76% 82%, rgba(160, 130, 255, .20), transparent 76%),
    radial-gradient(ellipse 25% 20% at 20% 80%, rgba(101, 214, 198, .16), transparent 76%);
  transform: translate3d(-1.5%, -1%, 0) scale(1.04);
  animation: dc-v55-ambient-drift 34s cubic-bezier(.45,.05,.55,.95) infinite alternate;
  will-change: transform;
}

body.onboarding-shell::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 42rem 36rem at 50% 49%,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.70) 44%,
    rgba(255,255,255,.18) 72%,
    transparent 100%
  );
}

body.onboarding-shell .onboarding-page {
  position: relative;
  z-index: 0;
}

body.onboarding-shell .onboarding-page::before,
body.onboarding-shell .onboarding-page::after {
  content: none !important;
  display: none !important;
}

body.onboarding-shell .onboarding-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: rgba(255, 255, 255, .985);
  border-color: rgba(205, 215, 231, .92);
  box-shadow:
    0 30px 78px rgba(42, 54, 86, .15),
    0 1px 0 rgba(255,255,255,.92) inset;
  animation: dc-v55-card-enter .62s cubic-bezier(.16, 1, .3, 1) both;
}

body.onboarding-shell .onboarding-card::before,
body.onboarding-shell .onboarding-card::after {
  content: none !important;
  display: none !important;
}

body.onboarding-shell .language-choice {
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

body.onboarding-shell .language-choice:hover {
  transform: translateY(-1px);
}

body.onboarding-shell .language-choice:active {
  transform: translateY(0);
}

body.onboarding-shell .onboarding-submit {
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    box-shadow .18s ease,
    filter .18s ease;
}

body.onboarding-shell .onboarding-submit:hover {
  transform: translateY(-1px);
  filter: saturate(1.04);
  box-shadow: 0 12px 24px rgba(116,132,255,.28);
}

body.onboarding-shell .onboarding-submit:active {
  transform: translateY(0);
}

@keyframes dc-v55-ambient-drift {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1.03);
  }
  48% {
    transform: translate3d(2.5%, 2%, 0) scale(1.08);
  }
  100% {
    transform: translate3d(-1%, 3%, 0) scale(1.05);
  }
}

@keyframes dc-v55-card-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.985);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (max-width: 640px) {
  body.onboarding-shell {
    background:
      radial-gradient(ellipse 34rem 28rem at -16% 4%, rgba(124, 140, 255, .17), transparent 70%),
      radial-gradient(ellipse 32rem 26rem at 116% 10%, rgba(91, 186, 255, .13), transparent 72%),
      radial-gradient(ellipse 32rem 28rem at 92% 110%, rgba(165, 133, 255, .11), transparent 72%),
      linear-gradient(145deg, #f8fafc 0%, #f4f7fb 52%, #f5f3fb 100%);
  }

  body.onboarding-shell::before {
    inset: -34%;
    opacity: .66;
    filter: blur(68px) saturate(108%);
  }

  body.onboarding-shell::after {
    background: radial-gradient(
      ellipse 24rem 32rem at 50% 48%,
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,.62) 48%,
      transparent 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  body.onboarding-shell::before,
  body.onboarding-shell .onboarding-card,
  body.onboarding-shell .language-choice,
  body.onboarding-shell .onboarding-submit {
    animation: none !important;
    transition: none !important;
  }

  body.onboarding-shell .language-choice:hover,
  body.onboarding-shell .language-choice:active,
  body.onboarding-shell .onboarding-submit:hover,
  body.onboarding-shell .onboarding-submit:active {
    transform: none !important;
  }
}

/* DataCaps first-run inline wizard v56
   Both setup steps live in one document; only the final account form submits. */
body.onboarding-shell .onboarding-wizard {
  width: min(620px, 100%);
  transition: width .34s cubic-bezier(.2,.8,.2,1);
}
body.onboarding-shell .onboarding-wizard.language-step {
  width: min(560px, 100%);
}
body.onboarding-shell .onboarding-stage {
  position: relative;
  overflow: hidden;
  transition: height .42s cubic-bezier(.2,.8,.2,1);
}
body.onboarding-shell .onboarding-panel {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(42px,0,0);
  transition:
    opacity .34s ease,
    transform .42s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear .42s;
  will-change: transform, opacity;
}
body.onboarding-shell .onboarding-panel.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0,0,0);
  transition-delay: 0s;
}
body.onboarding-shell .onboarding-panel.is-entering-left {
  visibility: visible;
  transform: translate3d(-42px,0,0);
}
body.onboarding-shell .onboarding-panel.is-entering-right {
  visibility: visible;
  transform: translate3d(42px,0,0);
}
body.onboarding-shell .onboarding-panel.is-exiting-left {
  visibility: visible;
  opacity: 0;
  transform: translate3d(-42px,0,0);
}
body.onboarding-shell .onboarding-panel.is-exiting-right {
  visibility: visible;
  opacity: 0;
  transform: translate3d(42px,0,0);
}
body.onboarding-shell .onboarding-progress span {
  transition: width .28s ease, background-color .28s ease, opacity .28s ease;
}
body.onboarding-shell .onboarding-progress span.active {
  width: 34px;
  opacity: 1;
}
body.onboarding-shell .onboarding-back {
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
}
body.onboarding-shell .onboarding-back:hover {
  color: #3f4d66;
  background: rgba(116,132,255,.08);
  transform: translateX(-2px);
}
body.onboarding-shell .onboarding-back:active {
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  body.onboarding-shell .onboarding-wizard,
  body.onboarding-shell .onboarding-stage,
  body.onboarding-shell .onboarding-panel,
  body.onboarding-shell .onboarding-progress span,
  body.onboarding-shell .onboarding-back {
    transition: none !important;
  }
}

/* =====================================================================
   DataCaps compact fuzzy search v60
   Minimal suggestions under the existing top-bar field. No filters,
   no modal chrome, no empty search screen.
   ===================================================================== */
body.app-shell .topbar #searchLauncher.search-box {
  position: relative !important;
  cursor: text !important;
}
body.app-shell .topbar #searchLauncher #searchInput {
  cursor: text !important;
  padding-right: 94px !important;
}
body.app-shell .topbar #searchLauncher #searchInput::-webkit-search-cancel-button {
  display: none !important;
}
body.app-shell .topbar #searchLauncher .dc-search-top-clear {
  position: absolute !important;
  right: 58px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #8b94a5 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 3 !important;
}
body.app-shell .topbar #searchLauncher .dc-search-top-clear:hover {
  background: rgba(31, 41, 55, .07) !important;
  color: #3e4656 !important;
}
body.app-shell .topbar #searchLauncher .dc-search-top-clear.hidden {
  display: none !important;
}

body.app-shell #searchOverlay.dc-search-suggestions {
  position: fixed !important;
  left: var(--dc-search-left, 24px) !important;
  top: var(--dc-search-top, 72px) !important;
  width: var(--dc-search-width, 460px) !important;
  max-width: calc(100vw - 20px) !important;
  height: auto !important;
  max-height: var(--dc-search-max-height, 460px) !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 2200 !important;
}
body.app-shell #searchOverlay.dc-search-suggestions.hidden {
  display: none !important;
}
body.app-shell #searchOverlay .dc-search-suggestions-panel {
  width: 100% !important;
  max-height: var(--dc-search-max-height, 460px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  border: 1px solid rgba(31, 41, 55, .11) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .985) !important;
  box-shadow: 0 16px 42px rgba(31, 41, 55, .14), 0 3px 10px rgba(31, 41, 55, .06) !important;
  backdrop-filter: blur(16px) saturate(1.04) !important;
  animation: dc-compact-search-in .14s cubic-bezier(.2, .8, .2, 1) both !important;
}
body.app-shell #searchOverlay .dc-search-compact-meta {
  min-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  padding: 6px 12px !important;
  border-bottom: 1px solid rgba(31, 41, 55, .07) !important;
  color: #8b94a6 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}
body.app-shell #searchOverlay .dc-search-compact-results {
  min-height: 0 !important;
  max-height: min(420px, calc(var(--dc-search-max-height, 460px) - 30px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 5px !important;
}
body.app-shell #searchOverlay .dc-search-compact-result {
  width: 100% !important;
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 20px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 9px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #202838 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
body.app-shell #searchOverlay .dc-search-compact-result:hover,
body.app-shell #searchOverlay .dc-search-compact-result.active {
  background: #f2f4ff !important;
}
body.app-shell #searchOverlay .dc-search-compact-icon {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: #eef1ff !important;
  color: #6f7df4 !important;
}
body.app-shell #searchOverlay .dc-search-compact-icon.is-folder {
  background: #eef7ff !important;
  color: #4c8bc8 !important;
}
body.app-shell #searchOverlay .dc-search-compact-icon svg {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
body.app-shell #searchOverlay .dc-search-compact-content {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
body.app-shell #searchOverlay .dc-search-compact-content strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #202838 !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
body.app-shell #searchOverlay .dc-search-compact-detail {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #8a93a5 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
body.app-shell #searchOverlay mark {
  padding: 0 !important;
  border-radius: 2px !important;
  background: #fff0a8 !important;
  color: inherit !important;
}
body.app-shell #searchOverlay .dc-search-compact-arrow {
  width: 20px !important;
  height: 20px !important;
  display: grid !important;
  place-items: center !important;
  color: #a7afbf !important;
  opacity: 0 !important;
  transform: translateX(-3px) !important;
  transition: opacity .12s ease, transform .12s ease !important;
}
body.app-shell #searchOverlay .dc-search-compact-result:hover .dc-search-compact-arrow,
body.app-shell #searchOverlay .dc-search-compact-result.active .dc-search-compact-arrow {
  opacity: 1 !important;
  transform: translateX(0) !important;
}
body.app-shell #searchOverlay .dc-search-compact-arrow svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
body.app-shell #searchOverlay .dc-search-compact-empty {
  min-height: 76px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 14px 15px !important;
}
body.app-shell #searchOverlay .dc-search-compact-empty strong {
  color: #303849 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
body.app-shell #searchOverlay .dc-search-compact-empty span {
  color: #8a93a5 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}
body.app-shell #searchOverlay .dc-search-compact-loading {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 9px !important;
}
body.app-shell #searchOverlay .dc-search-compact-loading span {
  height: 42px !important;
  display: block !important;
  border-radius: 9px !important;
  background: linear-gradient(90deg, #f4f5f8 20%, #eceef4 50%, #f4f5f8 80%) !important;
  background-size: 200% 100% !important;
  animation: dc-compact-search-loading 1.05s linear infinite !important;
}
@keyframes dc-compact-search-in {
  from { opacity: 0; transform: translateY(-4px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dc-compact-search-loading {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@media (max-width: 760px) {
  body.app-shell .topbar #searchLauncher #searchInput {
    padding-right: 52px !important;
  }
  body.app-shell .topbar #searchLauncher kbd {
    display: none !important;
  }
  body.app-shell .topbar #searchLauncher .dc-search-top-clear {
    right: 12px !important;
  }
  body.app-shell #searchOverlay.dc-search-suggestions {
    left: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-shell #searchOverlay .dc-search-suggestions-panel,
  body.app-shell #searchOverlay .dc-search-compact-loading span {
    animation: none !important;
  }
}