--slate-*/--file-*), KHÔNG hardcode hex.
   ────────────────────────────────────────────────────────────────────── */

.dc-page { display: flex; flex-direction: column; gap: 16px; }
.dc-crumbs { font-size: 12px; }
.dc-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }


.dc-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.dc-stat {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
    background: var(--slate-0); border: 1px solid var(--slate-200); border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: border-color .12s, box-shadow .12s;
}
.dc-stat:hover { border-color: var(--blue-300); }
.dc-stat-active { border-color: var(--blue-700); box-shadow: 0 0 0 3px var(--blue-50); }

.dc-stat-ico { width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.dc-stat-ico-primary { background: var(--blue-50);  color: var(--blue-700); }
.dc-stat-ico-success { background: color-mix(in srgb, var(--success-500) 14%, var(--slate-0)); color: var(--success-500); }
.dc-stat-ico-warning { background: color-mix(in srgb, var(--warning-500) 16%, var(--slate-0)); color: var(--warning-500); }
.dc-stat-ico-error   { background: color-mix(in srgb, var(--error-500) 14%, var(--slate-0));   color: var(--error-500); }
.dc-stat-ico-default { background: var(--slate-100); color: var(--slate-600); }
.dc-stat-num { font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dc-stat-label { font-size: 12px; color: var(--slate-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


.dc-filterbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 10px 12px; background: var(--slate-0); border: 1px solid var(--slate-200); border-radius: 12px;
}
.dc-search { min-width: 220px; flex: 1 1 220px; }
.dc-narrow { width: 160px; }


.dc-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 16px; align-items: start; }
.dc-sidebar { position: sticky; top: 12px; }
.dc-side-card { padding: 10px; border: 1px solid var(--slate-200); border-radius: 12px; }
.dc-side-group { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--slate-500); padding: 6px 8px; }
.dc-side-item {
    display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer;
    font-size: 13.5px; color: var(--slate-700);
}
.dc-side-item:hover { background: var(--slate-50); }
.dc-side-active { background: var(--blue-50); color: var(--blue-700); font-weight: 600; }
.dc-cat-body { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.dc-cat-body > .flex-grow-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-cat-count { font-size: 12px; color: var(--slate-500); font-variant-numeric: tabular-nums; }
.dc-cat-spacer { width: 30px; display: inline-block; }

.dc-cat-sub { padding-left: 38px; font-size: 13px; position: relative; }
.dc-cat-sub::before { content: ""; position: absolute; left: 23px; top: -2px; bottom: 50%; width: 1px; background: var(--slate-300); }
.dc-cat-sub::after  { content: ""; position: absolute; left: 23px; top: 50%; width: 9px; height: 1px; background: var(--slate-300); }
.dc-cat-sub:last-child::before { bottom: 50%; }
.dc-cat-actions { display: none; flex: none; }
.dc-side-item.dc-cat:hover .dc-cat-actions { display: inline-flex; }


.dc-main { min-width: 0; }
.dc-main-toolbar { display: flex; align-items: center; margin-bottom: 8px; }
.dc-empty { text-align: center; padding: 64px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px dashed var(--slate-300); border-radius: 12px; }
.dc-row-title { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.dc-row-main { min-width: 0; }
.dc-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dc-ver-chip {
    flex: none; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 600;
    color: var(--slate-600); background: var(--slate-100); border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}

.dc-row-org { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--blue-700); font-weight: 600; margin-top: 2px; }
.dc-row-org .mud-icon-root { font-size: 11px !important; }
.dc-row-org span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.dc-hl { font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.45; }
.dc-hl-from { color: var(--slate-700); }
.dc-hl-to { color: var(--slate-500); }
.dc-hl-to.dc-hl-warn { color: var(--warning-500); font-weight: 600; }
.dc-hl-to.dc-hl-err  { color: var(--error-500);   font-weight: 600; }


.dc-upd { display: flex; flex-direction: column; gap: 3px; }
.dc-upd-by { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--slate-700); }
.dc-upd-avatar { width: 22px !important; height: 22px !important; font-size: 10px !important; }
.dc-upd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }


.dc-quick-count { flex: none; font-size: 12px; color: var(--slate-500); font-variant-numeric: tabular-nums; }
.dc-side-active .dc-quick-count { color: var(--blue-700); }


.dc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dc-card { padding: 14px; border: 1px solid var(--slate-200); border-radius: 12px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.dc-card:hover { border-color: var(--blue-300); box-shadow: 0 4px 14px rgba(15,23,42,.08); }

.dc-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.dc-card-head-r { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.dc-card-pin { font-size: 12px; color: var(--blue-700); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.dc-card-pin .mud-icon-root { font-size: 11px !important; }
.dc-card-title { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.dc-card-title .mud-icon-root, .dc-row-title .mud-icon-root { font-size: 13px !important; }
.dc-card-code { font-size: 12px; color: var(--slate-500); margin-top: 2px; }
.dc-card-desc { font-size: 13px; color: var(--slate-600); margin-top: 8px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dc-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.dc-card-cat { font-size: 12px; color: var(--slate-700); background: var(--slate-100); border-radius: 999px; padding: 2px 9px; }
.dc-card-dept { font-size: 12px; color: var(--slate-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-card-foot { display: flex; align-items: center; margin-top: 10px; gap: 8px; }
.dc-card-foot-l { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--slate-500); min-width: 0; }
.dc-card-foot-l span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-card-av { width: 22px !important; height: 22px !important; font-size: 10px !important; }
.dc-card-stats { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; color: var(--slate-500); font-variant-numeric: tabular-nums; flex: none; }
.dc-card-stats .mud-icon-root { font-size: 11px !important; vertical-align: -3px; }


.dc-ftc { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.dc-ftc svg { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.dc-ftc-sm { width: 30px; height: 36px; }
.dc-ftc-md { width: 36px; height: 42px; }
.dc-ftc-lg { width: 48px; height: 58px; }


.dc-drawer-head { padding: 16px; border-bottom: 1px solid var(--slate-200); }
.dc-badges { display: flex; flex-wrap: wrap; gap: 4px; }


.dc-drawer-head .dc-drawer-title { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--fg-1); margin: 8px 0 4px; }


.dc-badge {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    font-size: 12px; font-weight: 600; line-height: 1.4;
    padding: 4px 9px; border-radius: 999px;
}
.dc-badge .dc-dot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; flex: none; }
.dc-badge .mud-icon-root { font-size: 11px !important; }
.dc-badge-success { background: color-mix(in srgb, var(--success-500) 14%, var(--slate-0)); color: var(--success-500); }
.dc-badge-warning { background: color-mix(in srgb, var(--warning-500) 16%, var(--slate-0)); color: var(--warning-500); }
.dc-badge-error   { background: color-mix(in srgb, var(--error-500) 14%, var(--slate-0));   color: var(--error-500); }
.dc-badge-info    { background: color-mix(in srgb, var(--info-500) 14%, var(--slate-0));    color: var(--info-500); }
.dc-badge-neutral { background: var(--slate-100); color: var(--fg-2); }
.dc-badge-brand   { background: var(--brand-soft); color: var(--brand); }


.dc-drawer-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dc-drawer-actions .dc-act-main { flex: 1; }


.dc-section { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; color: var(--fg-3); }


.dc-info-panel {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border: 1px solid var(--border-1); border-radius: 10px; overflow: hidden;
}
.dc-info-cell {
    display: flex; flex-direction: column; min-width: 0; padding: 10px 14px;
    border-right: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1);
}
.dc-info-cell:nth-child(2n) { border-right: none; }
.dc-info-cell:nth-last-child(-n+2) { border-bottom: none; }
.dc-info-lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3); }
.dc-info-val { font-size: 13.5px; color: var(--fg-1); margin-top: 3px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }


.dc-stat-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dc-stat-box { border: 1px solid var(--border-1); border-radius: 10px; padding: 10px 12px; background: var(--slate-50); }
.dc-stat-box-lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3); }
.dc-stat-box-num { font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--fg-1); margin-top: 4px; font-variant-numeric: tabular-nums; }


.dc-uploader { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--slate-900); }
.dc-up-avatar { width: 30px !important; height: 30px !important; font-size: 12px !important; }
.dc-uploader-info { min-width: 0; line-height: 1.3; }
.dc-uploader-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-uploader-sub { font-size: 12px; color: var(--slate-500); }


.dc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-tag { font-size: 12.5px; font-weight: 500; color: var(--fg-2); background: var(--slate-100); border-radius: 999px; padding: 3px 9px; }


.dc-tab-label { display: inline-flex; align-items: center; gap: 6px; }
.dc-tab-count { font-size: 12px; font-weight: 600; color: var(--fg-3); background: var(--slate-100); padding: 1px 6px; border-radius: 999px; min-width: 18px; text-align: center; }
.dc-drawer-tabs .mud-tab-active .dc-tab-count { background: var(--brand-soft); color: var(--brand); }

.dc-drawer-tabs.mud-tabs .mud-tab { text-transform: none; letter-spacing: normal; font-size: 13.5px; font-weight: 500; }
.dc-drawer-tabs.mud-tabs .mud-tab.mud-tab-active { font-weight: 600; }

.dc-drawer-tabs.mud-tabs .mud-tabs-panels { padding: 18px 20px 24px; }


.dc-drawer-foot { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border-1); }
.dc-foot-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-foot-primary { width: 100%; }



.dc-ver-head-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dc-ver-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.dc-ver-item { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.dc-ver-item::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 1px; background: var(--slate-200); }
.dc-ver-item:last-child { padding-bottom: 0; }
.dc-ver-item:last-child::before { display: none; }
.dc-ver-dot { width: 11px; height: 11px; border-radius: 999px; background: var(--slate-300); flex: none; margin-top: 3px; box-shadow: 0 0 0 3px var(--slate-0); z-index: 1; }
.dc-ver-item.is-current .dc-ver-dot { background: var(--blue-700); }
.dc-ver-body { min-width: 0; flex: 1; }
.dc-ver-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-ver-pill { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; color: var(--slate-700); background: var(--slate-100); border-radius: 6px; padding: 2px 8px; }
.dc-ver-pill.is-current { color: var(--blue-700); background: var(--blue-50); }
.dc-ver-when { font-size: 12px; color: var(--slate-500); }
.dc-ver-note { font-size: 13px; color: var(--slate-900); margin-top: 4px; }
.dc-ver-meta { font-size: 12px; color: var(--slate-500); margin-top: 4px; }
.dc-ver-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; margin-left: -6px; }


.dc-access-list { display: flex; flex-direction: column; gap: 8px; }
.dc-access-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-1); border-radius: 10px; background: var(--slate-25); opacity: .6; }
.dc-access-row.is-on { background: var(--slate-0); opacity: 1; border-color: var(--blue-300); }
.dc-access-ico { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.dc-access-ico-toan   { background: var(--blue-50); color: var(--blue-700); }
.dc-access-ico-hanche { background: color-mix(in srgb, var(--warning-500) 16%, var(--slate-0)); color: var(--warning-500); }
.dc-access-ico-mat    { background: color-mix(in srgb, var(--error-500) 14%, var(--slate-0));   color: var(--error-500); }
.dc-access-txt { flex: 1; min-width: 0; }
.dc-access-title { font-size: 13px; font-weight: 600; color: var(--slate-900); }
.dc-access-sub { font-size: 12px; color: var(--slate-500); }


.dc-activity { display: flex; flex-direction: column; gap: 10px; }
.dc-activity-row { display: flex; align-items: flex-start; gap: 10px; }
.dc-act-av { width: 28px !important; height: 28px !important; font-size: 11px !important; flex: none; }
.dc-activity-body { min-width: 0; }
.dc-activity-text { font-size: 13px; color: var(--slate-900); }
.dc-activity-when { font-size: 12px; color: var(--slate-500); margin-top: 2px; }


@media (max-width: 1280px) { .dc-stats { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1024px) {
    .dc-stats { grid-template-columns: repeat(3, 1fr); }
    .dc-shell { grid-template-columns: 1fr; }
    .dc-sidebar { position: static; }
    .dc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) { .dc-stats { grid-template-columns: repeat(2, 1fr); } .dc-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .dc-stats { grid-template-columns: 1fr; } }


@media (max-width: 600px) {
    .dc-info-panel { grid-template-columns: 1fr; }
    .dc-info-cell { border-right: none; }
    .dc-info-cell:nth-last-child(2) { border-bottom: 1px solid var(--border-1); }
}



.dc-field-label { display: block; font-size: 13px; font-weight: 500; color: var(--slate-700); margin-bottom: 6px; }
.dc-field-hint  { font-weight: 400; color: var(--slate-500); }


.dc-pick-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-pick { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-1); background: var(--slate-0); color: var(--slate-600); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dc-pick:hover { border-color: var(--blue-300); }
.dc-pick.is-on { border-color: var(--blue-700); background: var(--blue-50); color: var(--blue-700); box-shadow: 0 0 0 2px var(--blue-50); }
.dc-swatch { width: 30px; height: 30px; border-radius: 999px; border: 2px solid var(--slate-0); cursor: pointer; box-shadow: 0 0 0 1px var(--border-1); padding: 0; }
.dc-swatch.is-on { box-shadow: 0 0 0 2px var(--blue-700); }
.dc-swatch-brand   { background: var(--blue-700); }
.dc-swatch-success { background: var(--success-500); }
.dc-swatch-warning { background: var(--warning-500); }
.dc-swatch-error   { background: var(--error-500); }
.dc-swatch-info    { background: var(--info-500); }
.dc-swatch-violet  { background: var(--file-zip-fg); }
.dc-swatch-neutral { background: var(--slate-500); }


.dc-prio { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-prio-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-1); background: var(--slate-0); color: var(--slate-700); font-size: 13px; cursor: pointer; font-family: inherit; }
.dc-prio-chip:hover { border-color: var(--blue-300); }
.dc-prio-chip.is-on { background: var(--blue-50); border-color: var(--blue-700); color: var(--blue-700); font-weight: 600; }
.dc-prio-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--slate-400); flex: none; }
.dc-prio-info .dc-prio-dot    { background: var(--info-500); }
.dc-prio-warning .dc-prio-dot { background: var(--warning-500); }
.dc-prio-error .dc-prio-dot   { background: var(--error-500); }


.dc-req-recent { border: 1px solid var(--border-1); border-radius: 10px; overflow: hidden; }
.dc-req-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border-1); font-size: 12.5px; }
.dc-req-row:first-child { border-top: none; }
.dc-req-code { color: var(--slate-500); flex: none; }
.dc-req-title { color: var(--slate-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dc-req-status { font-size: 11px; border-radius: 999px; padding: 1px 8px; flex: none; }
.dc-req-success { background: color-mix(in srgb, var(--success-500) 14%, var(--slate-0)); color: var(--success-500); }
.dc-req-error   { background: color-mix(in srgb, var(--error-500) 14%, var(--slate-0));   color: var(--error-500); }
.dc-req-info    { background: var(--blue-50); color: var(--blue-700); }
.dc-req-when { color: var(--slate-500); flex: none; }


.dc-move-current { font-size: 12.5px; color: var(--slate-500); margin-bottom: 8px; }
.dc-move-target { font-size: 13px; color: var(--blue-700); margin-top: 8px; }
.dc-move-tree { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; border: 1px solid var(--border-1); border-radius: 10px; padding: 6px; }
.dc-move-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; background: transparent; border: none; cursor: pointer; font-size: 13.5px; color: var(--slate-700); font-family: inherit; }
.dc-move-row:hover { background: var(--slate-50); }
.dc-move-row.is-on { background: var(--blue-50); color: var(--blue-700); font-weight: 600; }
.dc-move-sub { padding-left: 28px; }
.dc-move-here { font-size: 11px; color: var(--slate-500); background: var(--slate-100); border-radius: 999px; padding: 1px 7px; flex: none; }


.dc-prev-banner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
    background: color-mix(in srgb, var(--success-500) 10%, var(--slate-0));
    border: 1px solid color-mix(in srgb, var(--success-500) 30%, var(--slate-0)); }
.dc-prev-banner-busy { background: var(--slate-50); border-color: var(--border-1); color: var(--slate-500); font-size: 13px; gap: 8px; }
.dc-prev-ok { color: var(--success-500); flex: none; font-size: 12px !important; }
.dc-prev-msg { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dc-prev-msg b { font-size: 13px; font-weight: 600; color: var(--slate-900); }
.dc-prev-msg span { font-size: 12px; color: var(--slate-500); }

.dc-prev-frame { margin-top: 8px; border: 1px solid var(--border-1); border-radius: 10px; overflow: hidden; }
.dc-prev-head { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--slate-50);
    border-bottom: 1px solid var(--border-1); color: var(--slate-500); }
.dc-prev-head-t { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--slate-500); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-prev-body { max-height: 360px; overflow-y: auto; padding: 16px 18px; font-size: 13.5px; line-height: 1.6;
    color: var(--slate-900); background: var(--slate-0); }
.dc-prev-body :where(h1,h2,h3,h4) { margin: .6em 0 .3em; line-height: 1.3; }
.dc-prev-body p { margin: 0 0 .5em; }
.dc-prev-body table { border-collapse: collapse; max-width: 100%; }
.dc-prev-body img { max-width: 100%; height: auto; }


.doc-html span { white-space: pre-wrap; }
.doc-html img { max-width: 100%; height: auto; }
.doc-html table { max-width: 100%; border-collapse: collapse; }


.doc-html td, .doc-html th { border: 1px solid var(--slate-400); padding: 3px 6px; vertical-align: top; }


.doc-html a { color: inherit; text-decoration: none; }
.doc-html a:hover { text-decoration: underline; }


.dc-prev-fs-dialog { display: flex; flex-direction: column; }
.dc-prev-fs-dialog .mud-dialog-title { flex: none; padding: 8px 12px;
    border-bottom: 1px solid var(--border-1); background: var(--slate-50); }
.dc-prev-fs-dialog .mud-dialog-content { flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; }
.dc-prev-fs-head { display: flex; align-items: center; gap: 10px; }


.dc-prev-page-wrap { height: 100%; overflow: auto; background: var(--slate-100); padding: 24px; }

.dc-prev-page { width: 210mm; min-height: 297mm; box-sizing: border-box; margin: 0 auto; padding: 20mm 18mm;
    background: var(--slate-0); color: var(--slate-900); font-size: 14px; line-height: 1.6;
    box-shadow: 0 1px 10px color-mix(in srgb, var(--slate-900) 16%, transparent); }
.dc-prev-page :where(h1,h2,h3,h4) { margin: .6em 0 .3em; line-height: 1.3; }
.dc-prev-page p { margin: 0 0 .5em; }
.dc-prev-page table { border-collapse: collapse; }
.dc-prev-page img { max-width: 100%; height: auto; }




.tlv-cmpbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 12px;
    background: var(--slate-50, var(--slate-100)); border: 1px solid var(--border-1); border-radius: 10px;
}
.tlv-cmpbar-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-3); }
.tlv-cmpbar-ic .mud-icon-root, .tlv-cmpbar-ic { font-size: 16px !important; color: var(--fg-3); }


.tlv-table td { vertical-align: top; }


.tlv-vcell { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.tlv-vbadge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 34px;
    padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
    color: var(--slate-0); background: var(--success-500);
}
.tlv-vbadge.is-old { background: var(--slate-100); color: var(--fg-2); }
.tlv-vno { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--fg-3); }


.tlv-filecell { display: flex; gap: 8px; align-items: flex-start; }
.tlv-file-ic .mud-icon-root, .tlv-file-ic { font-size: 18px !important; flex: none; margin-top: 1px; }
.tlv-file-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tlv-file-name { font-size: 13px; color: var(--fg-1); overflow-wrap: anywhere; line-height: 1.35; }
.tlv-file-size { font-size: 12px; color: var(--fg-3); }
.tlv-file-note { font-size: 12px; color: var(--fg-3); }


.tlv-time { display: flex; flex-direction: column; gap: 4px; }
.tlv-time-row { display: flex; gap: 8px; align-items: baseline; }
.tlv-time-lbl { flex: none; width: 58px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--fg-3); }
.tlv-time-val { font-size: 12.5px; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.tlv-time-by { color: var(--fg-3); }


.tlv-cmp-heads { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 14px; }
.tlv-cmp-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tlv-cmp-head-sub { font-size: 12px; color: var(--fg-3); }
.tlv-cmp-arrow .mud-icon-root, .tlv-cmp-arrow { font-size: 20px !important; color: var(--fg-3); }

.tlv-cmp-section-lbl { display: flex; align-items: center; gap: 10px;
    text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; color: var(--fg-3);
    margin-bottom: 8px; }
.tlv-cmp-stats { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; color: var(--fg-3);
    display: inline-flex; align-items: center; gap: 6px; }
.tlv-cmp-stat-add { font-weight: 700; color: var(--success-500); }
.tlv-cmp-stat-del { font-weight: 700; color: var(--error-500); }


.tlv-cmp-grid { border: 1px solid var(--border-1); border-radius: 10px; overflow: hidden; }
.tlv-cmp-row { display: grid; grid-template-columns: minmax(110px, 150px) 1fr 1fr;
    border-bottom: 1px solid var(--border-1); }
.tlv-cmp-row:last-child { border-bottom: none; }
.tlv-cmp-rowhead { background: var(--slate-100); font-weight: 700; font-size: 12px; color: var(--fg-2);
    text-transform: uppercase; letter-spacing: .03em; }
.tlv-cmp-row.is-changed { background: color-mix(in srgb, var(--warning-500) 9%, var(--slate-0)); }
.tlv-cmp-c1, .tlv-cmp-c2, .tlv-cmp-c3 { padding: 8px 12px; font-size: 13px; color: var(--fg-1);
    border-right: 1px solid var(--border-1); overflow-wrap: anywhere; }
.tlv-cmp-c3 { border-right: none; display: flex; align-items: center; gap: 6px; }
.tlv-cmp-c1 { color: var(--fg-3); font-size: 12.5px; }
.tlv-cmp-chg-dot .mud-icon-root, .tlv-cmp-chg-dot { font-size: 9px !important; color: var(--warning-500); flex: none; }


.tlv-diff { border: 1px solid var(--border-1); border-radius: 10px; overflow: auto; max-height: 46vh;
    background: var(--slate-0); }
.tlv-diff-line { display: flex; gap: 8px; padding: 1px 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; line-height: 1.55; }
.tlv-diff-sign { flex: none; width: 12px; text-align: center; font-weight: 700; user-select: none; }
.tlv-diff-txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.tlv-diff-equal { color: var(--fg-2); }
.tlv-diff-add { background: color-mix(in srgb, var(--success-500) 12%, var(--slate-0)); color: var(--success-500); }
.tlv-diff-remove { background: color-mix(in srgb, var(--error-500) 11%, var(--slate-0)); color: var(--error-500); }
.tlv-diff-collapsed { display: flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 5px 12px; font-size: 12px; color: var(--fg-3); background: var(--slate-50, var(--slate-100));
    border-top: 1px dashed var(--border-1); border-bottom: 1px dashed var(--border-1); }
.tlv-diff-collapsed:hover { color: var(--brand); }
.tlv-diff-collapse-ic .mud-icon-root, .tlv-diff-collapse-ic { font-size: 14px !important; }