.document-tree-screen, .dt-toolbar, .dt-dialog-host, .dt-progress {
  --dt-surface: var(--panel-bg, #242424); --dt-bg: var(--bg-canvas, #171a1d); --dt-border: var(--panel-border, #444b53);
  --dt-text: var(--main-text-color, #f1f3f5); --dt-muted: var(--icon, #a5afb9);
}
.document-tree-screen {
  position: relative; height: calc(100vh - var(--dt-appbar-height, 53px)); min-height: 0; display: flex; flex-direction: column; color: var(--dt-text);
  background-color: var(--dt-bg);
}
.document-tree-screen[hidden], .dt-dialog-host[hidden] { display: none !important; }
body.document-tree-open { overflow: hidden; }
body.document-tree-open .main-content { display: none !important; }
body.document-tree-open header.appbar > *:not(.left):not(.dt-toolbar):not(.button-group--no-border):not(.right) { display: none !important; }
body.document-tree-open header.appbar > .dt-toolbar { display: flex; flex: 1 1 auto; min-width: 0; }
body.document-tree-open header.appbar #btn-assistant { display: none !important; }
.dt-toolbar { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 13px; box-sizing: border-box; background: var(--dt-surface); border-bottom: 1px solid var(--dt-border); }
.dt-title, .dt-tools { display: flex; align-items: center; gap: 7px; min-width: 0; }
.dt-title > .material-symbols-outlined { color: #6b7783; }
.dt-title strong { white-space: nowrap; }
.dt-select { min-width: 190px; max-width: 330px; height: 34px; padding: 0 32px 0 10px; color: var(--dt-text); background: var(--dt-bg); border: 1px solid var(--dt-border); border-radius: 9px; }
.dt-button, .dt-icon-button, .dt-mini-action, .dt-card-action, .dt-branch-toggle { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--dt-muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.dt-button { height: 34px; padding: 0 12px; border: 1px solid var(--dt-border); }
.dt-primary { color: #fff; background: #367fc2; border-color: #367fc2; }
.dt-icon-button { width: 34px; height: 34px; }
.dt-icon-button:hover, .dt-button:not(.dt-primary):hover, .dt-mini-action:hover, .dt-card-action:hover { color: var(--dt-text); background: color-mix(in srgb,var(--dt-muted) 12%,transparent); }
.dt-icon-button .material-symbols-outlined, .dt-button .material-symbols-outlined { font-size: 20px; }
.document-tree-screen.is-busy .dt-toolbar { pointer-events: none; opacity: .72; }
.dt-canvas {
  flex: 1 1 auto; min-height: 0; overflow: auto; padding: 42px 50px 120px; cursor: grab; touch-action: none;
  background-color: var(--dt-bg); background-image: radial-gradient(circle, rgba(120,130,145,.34) 1px, transparent 1px); background-size: 22px 22px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.dt-canvas::-webkit-scrollbar { display: none; }
.dt-canvas.is-panning, body.dt-canvas-panning { cursor: grabbing !important; user-select: none; }
.dt-tree {
  width: max-content; min-width: max(100%, 1600px); min-height: max(100%, 980px); box-sizing: content-box;
  display: flex; justify-content: center;
  padding-block: clamp(700px, 90vh, 1200px); padding-inline: clamp(900px, 100vw, 1800px);
  transform-origin: top center;
}
.dt-tree ul { position: relative; display: flex; justify-content: center; margin: 0; padding: 28px 0 0; list-style: none; }
.dt-tree > ul { padding-top: 0; }
.dt-tree li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 28px 60px 0; }
.dt-tree > ul > li { padding-top: 0; }
.dt-tree li::before, .dt-tree li::after {
  content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 28px;
  border-top: 1.5px solid #9aa6b3;
}
.dt-tree li::after { right: auto; left: 50%; border-left: 1.5px solid #9aa6b3; }
.dt-tree li:only-child { padding-top: 0; }
.dt-tree li:only-child::before, .dt-tree li:only-child::after { display: none; }
.dt-tree li:first-child::before, .dt-tree li:last-child::after { border: 0; }
.dt-tree li:last-child::before { border-right: 1.5px solid #9aa6b3; border-radius: 0 8px 0 0; }
.dt-tree li:first-child::after { border-radius: 8px 0 0 0; }
.dt-tree ul ul::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 28px; border-left: 1.5px solid #9aa6b3;
}
.dt-tree > ul::before { display: none; }
.dt-node-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.dt-card { position: relative; width: 300px; box-sizing: border-box; padding: 15px; color: var(--dt-text); background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: 14px; box-shadow: 0 3px 11px rgba(26,35,45,.12); cursor: default; transition: border-color .18s, box-shadow .18s, opacity .18s; }
.dt-card.has-custom-color { color: var(--dt-card-custom-text); background: var(--dt-card-custom-bg); }
.dt-card.has-custom-color .dt-card-copy small, .dt-card.has-custom-color .dt-card-heading > .material-symbols-outlined { color: color-mix(in srgb,var(--dt-card-custom-text) 72%,transparent); }
.dt-card.dt-card-has-branch { padding-bottom: 38px; }
.dt-card[draggable=true] { cursor: grab; }
.dt-card:hover { border-color: #8192a5; box-shadow: 0 8px 24px rgba(26,35,45,.17); }
.dt-card.is-isolated { border-color: #8b79c7; background: color-mix(in srgb,var(--dt-surface) 88%,#8b79c7 12%); }
.dt-card.has-custom-color.is-isolated { background: var(--dt-card-custom-bg); }
.dt-card.is-dragging { opacity: .28; }
.dt-card.dt-drop-target { outline: 3px solid rgba(54,127,194,.28); border-color: #367fc2; }
.dt-card.dt-drop-before { border-left-color: #367fc2; box-shadow: -7px 0 0 -3px #367fc2, 0 8px 24px rgba(26,35,45,.17); }
.dt-card.dt-drop-after { border-right-color: #367fc2; box-shadow: 7px 0 0 -3px #367fc2, 0 8px 24px rgba(26,35,45,.17); }
.dt-root-card { width: 330px; display: flex; align-items: center; gap: 10px; border-style: solid; }
.dt-root-card > .material-symbols-outlined { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: #6b7783; border-radius: 10px; }
.dt-card-heading { display: flex; align-items: flex-start; gap: 10px; padding-right: 18px; }
.dt-card-heading > .material-symbols-outlined { color: #768596; }
.dt-card.is-isolated .dt-card-heading > .material-symbols-outlined { color: #7964bb; }
.dt-card-copy { flex: 1; min-width: 0; display: grid; gap: 3px; }
.dt-card-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.dt-card-copy small { color: var(--dt-muted); font-size: 10.5px; }
.dt-card-actions { position: absolute; z-index: 5; top: 7px; right: 7px; display: none; gap: 1px; padding: 3px; background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: 8px; box-shadow: 0 3px 12px rgba(0,0,0,.17); }
.dt-card:hover > .dt-card-actions, .dt-card:focus-within > .dt-card-actions { display: flex; }
.dt-card-action { width: 25px; height: 25px; padding: 0; }
.dt-card-action .material-symbols-outlined { font-size: 16px; }
.dt-card-action.success { color: #25955a; }
.dt-card-action.danger:hover { color: #d43e4f; background: rgba(212,62,79,.1); }
.dt-branch-toggle {
  position: absolute; z-index: 6; left: 50%; bottom: 8px; width: 25px; height: 19px; padding: 0;
  color: #718091; background: color-mix(in srgb,var(--dt-surface) 88%,var(--dt-muted) 12%);
  border: 1px solid color-mix(in srgb,var(--dt-border) 72%,var(--dt-muted) 28%); border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1); transform: translateX(-50%); transition: color .18s, border-color .18s, background .18s;
}
.dt-branch-toggle .material-symbols-outlined { font-size: 17px; font-weight: 550; }
.dt-branch-toggle:hover { color: #367fc2; background: color-mix(in srgb,var(--dt-surface) 82%,#367fc2 18%); border-color: #367fc2; }
.dt-files { display: grid; gap: 5px; margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--dt-border); }
.dt-file { position: relative; min-width: 0; min-height: 31px; display: grid; grid-template-columns: minmax(0,1fr); align-items: center; padding: 3px 5px; border-radius: 7px; }
.dt-file[draggable="true"] { cursor: grab; }
.dt-file.is-dragging { opacity: .28; }
.dt-file::after { content: ''; position: absolute; left: 100%; top: 0; width: 13px; height: 100%; }
.dt-file:hover { background: color-mix(in srgb,var(--dt-muted) 8%,transparent); }
.dt-file-open { flex: 1; min-width: 0; display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
.dt-file-open > .material-symbols-outlined { color: #447fae; font-size: 18px; }
.dt-file-open > span:not(.material-symbols-outlined) { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.dt-file-open small { color: var(--dt-muted); font-size: 9px; }
.dt-file-actions {
  position: absolute; z-index: 8; left: calc(100% + 12px); top: 50%; display: flex; align-items: center; gap: 1px;
  padding: 3px; background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-50%); transition: opacity .14s ease, visibility 0s linear .14s;
}
.dt-file:hover .dt-file-actions, .dt-file:focus-within .dt-file-actions { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.dt-mini-action { width: 25px; height: 25px; padding: 0; color: var(--dt-muted); text-decoration: none; }
.dt-mini-action .material-symbols-outlined { font-size: 16px; }
.dt-root-hint { margin-top: 30px; padding: 9px 14px; color: var(--dt-muted); background: var(--dt-surface); border: 1px dashed var(--dt-border); border-radius: 9px; font-size: 12px; }
.dt-empty { width: min(430px,90%); display: grid; justify-items: center; gap: 10px; margin: 15vh auto; padding: 32px; color: var(--dt-muted); text-align: center; background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: 16px; box-shadow: 0 5px 24px rgba(0,0,0,.08); }
.dt-empty > .material-symbols-outlined { font-size: 40px; }
.dt-empty.error { color: #c24755; }
.dt-progress { position: fixed; z-index: 10020; right: 24px; bottom: 24px; min-width: 270px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 9px; padding: 13px; color: var(--dt-text); background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: 12px; box-shadow: 0 9px 30px rgba(0,0,0,.24); }
.dt-progress b { max-width: 210px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dt-progress span:last-child { color: #367fc2; font-size: 12px; font-weight: 700; }
.dt-zoom-controls { position: absolute; z-index: 20; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 2px; padding: 4px; color: var(--dt-text); background: color-mix(in srgb,var(--dt-surface) 94%,transparent); border: 1px solid var(--dt-border); border-radius: 11px; box-shadow: 0 5px 18px rgba(0,0,0,.18); backdrop-filter: blur(8px); }
.dt-zoom-button { appearance: none; min-width: 31px; height: 30px; display: grid; place-items: center; padding: 0 7px; color: var(--dt-muted); background: transparent; border: 0; border-radius: 7px; cursor: pointer; }
.dt-zoom-button:hover { color: var(--dt-text); background: color-mix(in srgb,var(--dt-muted) 12%,transparent); }
.dt-zoom-button:disabled { cursor: default; opacity: .38; }
.dt-zoom-button .material-symbols-outlined { font-size: 18px; }
.dt-zoom-reset { min-width: 48px; font-size: 11px; font-weight: 700; }
.dt-dialog-host { position: fixed; z-index: 10010; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(16,22,29,.52); backdrop-filter: blur(2px); }
.dt-dialog { width: min(600px,calc(100vw - 36px)); max-height: min(760px,calc(100vh - 56px)); display: flex; flex-direction: column; color: var(--dt-text); background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: 16px; box-shadow: 0 18px 60px rgba(0,0,0,.32); }
.dt-dialog > header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--dt-border); }
.dt-dialog h3, .dt-dialog h4 { margin: 0; }
.dt-dialog h3 { font-size: 15px; }.dt-dialog h4 { margin: 12px 0 7px; color: var(--dt-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.dt-dialog-body { min-height: 140px; overflow: auto; padding: 5px 16px 18px; }
.dt-name-form { display: grid; gap: 8px; padding-top: 14px; }
.dt-name-label { display: grid; gap: 7px; color: var(--dt-muted); font-size: 11px; font-weight: 700; }
.dt-name-input { width: 100%; height: 40px; box-sizing: border-box; padding: 0 12px; color: var(--dt-text); background: var(--dt-bg); border: 1px solid var(--dt-border); border-radius: 9px; outline: 0; font: inherit; }
.dt-name-input:focus { border-color: #4c8dc9; box-shadow: 0 0 0 3px rgba(76,141,201,.14); }
.dt-name-input.is-invalid { border-color: #c24755; box-shadow: 0 0 0 3px rgba(194,71,85,.12); }
.dt-name-hint { color: var(--dt-muted); font-size: 10.5px; }
.dt-name-error { color: #c24755; font-size: 11px; }
.dt-name-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.dt-style-form { display: grid; gap: 16px; padding-top: 14px; }
.dt-color-palette { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.dt-color-swatch { appearance: none; width: 27px; height: 27px; padding: 0; border: 1px solid var(--dt-border); border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); cursor: pointer; }
.dt-color-swatch:hover { outline: 2px solid rgba(54,127,194,.35); }
.dt-color-input { width: 38px; height: 28px; padding: 1px; background: transparent; border: 1px solid var(--dt-border); border-radius: 7px; }
.dt-width-range { width: 100%; accent-color: #367fc2; }
.dt-search { width: 100%; height: 38px; box-sizing: border-box; padding: 0 11px; color: var(--dt-text); background: var(--dt-bg); border: 1px solid var(--dt-border); border-radius: 9px; outline: 0; }
.dt-search:focus { border-color: #4c8dc9; box-shadow: 0 0 0 3px rgba(76,141,201,.14); }
.dt-access-list, .dt-people-results, .dt-journal { display: grid; gap: 6px; }
.dt-share-controls { display: grid; grid-template-columns: minmax(180px,1fr) auto auto; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 10px; background: var(--dt-bg); border: 1px solid var(--dt-border); border-radius: 10px; }
.dt-share-role { height: 34px; padding: 0 9px; color: var(--dt-text); background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: 8px; }
.dt-share-counter { color: var(--dt-muted); font-size: 11px; white-space: nowrap; }
.dt-button:disabled { cursor: default; opacity: .48; }
.dt-person { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 6px 8px; background: var(--dt-bg); border: 1px solid var(--dt-border); border-radius: 9px; }
.dt-person-check { width: 17px; height: 17px; flex: 0 0 auto; accent-color: #367fc2; }
.dt-avatar { width: 31px; height: 31px; display: grid; flex: 0 0 auto; place-items: center; color: #fff; background: #6b7783; border-radius: 50%; font-size: 10px; font-weight: 700; }
.dt-avatar-shell { width: 31px; height: 31px; display: grid; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; }
.dt-avatar-shell > * { grid-area: 1 / 1; }
.dt-avatar-image { width: 31px; height: 31px; display: block; object-fit: cover; border-radius: 50%; }
.dt-node-access-rail { position: absolute; z-index: 7; right: calc(100% + 10px); top: 8px; display: grid; gap: 5px; }
.dt-access-stack { appearance: none; min-width: 72px; height: 29px; display: flex; align-items: center; justify-content: flex-start; gap: 3px; padding: 3px 5px; color: var(--dt-muted); background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,.13); cursor: pointer; }
.dt-access-stack > .material-symbols-outlined { font-size: 14px; }
.dt-access-count { min-width: 10px; font-size: 9px; font-weight: 700; }
.dt-mini-avatars { display: flex; align-items: center; padding-left: 5px; }
.dt-mini-avatars > * { margin-left: -6px; border: 1.5px solid var(--dt-surface); }
.dt-avatar-more { width: 20px; height: 20px; display: grid; place-items: center; color: #fff; background: #657383; border-radius: 50%; font-size: 8px; font-weight: 700; }
.dt-access-note { margin: 10px 0 4px; padding: 9px 10px; color: var(--dt-muted); background: var(--dt-bg); border-radius: 8px; font-size: 11px; }
.dt-access-overview { display: grid; gap: 7px; padding-top: 12px; }
.dt-access-folder { appearance: none; width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: flex-start; gap: 9px; padding: 7px 10px; color: var(--dt-text); background: var(--dt-bg); border: 1px solid var(--dt-border); border-radius: 9px; text-align: left; cursor: pointer; }
.dt-access-folder > .material-symbols-outlined { color: var(--dt-muted); }
.dt-access-add-controls { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 8px; }
.dt-person-role { height: 32px; padding: 0 7px; color: var(--dt-text); background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: 7px; }
.dt-access-status { padding-top: 7px; color: #c24755; font-size: 11px; }
.dt-person-copy { flex: 1; min-width: 0; display: grid; }.dt-person-copy b,.dt-person-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-person-copy b{font-size:12px}.dt-person-copy small{color:var(--dt-muted);font-size:10px}.dt-role{color:var(--dt-muted);font-size:10px}
.dt-journal-entry { padding: 10px 11px; background: var(--dt-bg); border: 1px solid var(--dt-border); border-radius: 9px; font-size: 12px; }
.dt-journal-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }.dt-journal-head time{color:var(--dt-muted);font-size:10px}.dt-dialog-error{padding:18px;color:#c24755;text-align:center}.dt-dialog-empty,.dt-dialog-loading{padding:24px;color:var(--dt-muted);text-align:center}
[data-theme="light"] .document-tree-screen,
[data-theme="light"] .dt-toolbar,
[data-theme="light"] .dt-dialog-host,
[data-theme="light"] .dt-progress {
  --dt-surface: #ffffff; --dt-bg: #f5f7fa; --dt-border: #d7dde5; --dt-text: #263341; --dt-muted: #697a8b;
}
[data-theme="light"] body.document-tree-open header.appbar { background: #fff !important; border-bottom-color: #d7dde5 !important; }
[data-theme="light"] body.document-tree-open header.appbar .dt-toolbar,
[data-theme="light"] body.document-tree-open header.appbar .dt-toolbar button,
[data-theme="light"] body.document-tree-open header.appbar .dt-toolbar button .material-symbols-outlined { color: #697a8b !important; opacity: 1 !important; filter: none !important; }
[data-theme="light"] body.document-tree-open header.appbar .dt-toolbar .dt-primary,
[data-theme="light"] body.document-tree-open header.appbar .dt-toolbar .dt-primary .material-symbols-outlined { color: #fff !important; }
[data-theme="light"] body.document-tree-open header.appbar .dt-toolbar button:hover { color: #263341 !important; background: #edf1f5 !important; }
[data-theme="light"] body.document-tree-open header.appbar .dt-toolbar .dt-button.dt-primary,
[data-theme="light"] body.document-tree-open header.appbar .dt-toolbar .dt-button.dt-primary:hover {
  color: #fff !important; background: #2f78b9 !important; border-color: #2f78b9 !important;
  box-shadow: 0 2px 7px rgba(47,120,185,.24) !important;
}
[data-theme="light"] .dt-tree li::before, [data-theme="light"] .dt-tree li::after, [data-theme="light"] .dt-tree ul ul::before { border-color: #8e9aa7; }
@media (max-width: 900px) { .dt-title > strong { display: none; }.dt-select{min-width:130px;max-width:190px}.dt-toolbar>.dt-tools>.dt-button>span:last-child{display:none}.dt-canvas{padding:34px 24px 100px}.dt-tree li{padding-inline:48px}.dt-tools{gap:2px}.dt-share-controls,.dt-access-add-controls{grid-template-columns:1fr}.dt-share-controls>.dt-button>span:last-child{display:inline} }