.company-diagram {
    --company-page: #f4f8ff;
    --company-card: #ffffff;
    --company-text: #0d2342;
    --company-muted: #5b6e86;
    --company-line: #dce8f5;
    --company-accent: #0878ff;
    --company-accent-soft: #eaf4ff;
    padding-block: clamp(36px, 6vw, 72px);
    background: var(--company-page);
    border-top: 1px solid var(--company-line);
}

html[data-theme='dark'] .company-diagram {
    --company-page: #071525;
    --company-card: #0c2037;
    --company-text: #f2f7ff;
    --company-muted: #b0c1d5;
    --company-line: #25415e;
    --company-accent: #73c7ff;
    --company-accent-soft: rgb(61 151 255 / 0.14);
}

.company-diagram__header { margin-bottom: 24px; }
.company-diagram__header h2 { margin: 0; color: var(--company-text); font-size: clamp(1.35rem, 2.5vw, 1.8rem); letter-spacing: -0.035em; }
.company-diagram__header p { margin: 7px 0 0; color: var(--company-muted); }
fm-render.company-diagram__render { display: block; min-height: 120px; }
.company-diagram__state { margin: 0; color: var(--company-muted); }
.company-diagram__state--error { color: #c62d2d; }
.company-diagram__roots,
.company-diagram__children { display: grid; gap: 18px; }
.company-diagram__roots { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.company-diagram__container { min-width: 0; padding: 20px; background: var(--company-card); border: 1px solid var(--company-line); border-radius: 16px; box-shadow: 0 12px 28px rgb(7 38 77 / 0.06); }
.company-diagram__container--moving { opacity: 0.6; background: rgb(200 0 0 / 0.3); cursor: pointer; }
.company-diagram__department { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; color: var(--company-text); font-size: 1.08rem; font-weight: 800; }
.company-diagram__toggle { display: inline-grid; width: 34px; height: 34px; padding: 0; place-items: center; color: var(--company-text); background: transparent; border: 0; border-radius: 8px; cursor: pointer; transition: background-color 0.18s ease, transform 0.18s ease; }
.company-diagram__toggle:focus-visible { outline: 3px solid rgb(22 119 255 / 0.35); outline-offset: 3px; }
.company-diagram__toggle-icon { width: 11px; height: 11px; border-right: 2px solid var(--company-accent); border-bottom: 2px solid var(--company-accent); transform: rotate(45deg); transition: transform 0.18s ease; }
.company-diagram__department-label { padding: 4px 6px; border-radius: 6px; cursor: pointer; transition: color 0.18s ease, background-color 0.18s ease; }
.company-diagram__department-label:focus-visible { outline: 3px solid rgb(22 119 255 / 0.35); outline-offset: 2px; }
@media (hover: hover) {
    .company-diagram__department-label:hover { color: var(--company-accent); background: var(--company-accent-soft); }
    .company-diagram__toggle:hover { background: var(--company-accent-soft); transform: scale(1.06); }
}
.company-diagram__toggle:active { background: var(--company-accent-soft); transform: scale(0.96); }
.company-diagram__container--collapsed .company-diagram__department { margin-bottom: 0; }
.company-diagram__container--collapsed .company-diagram__content { display: none; }
.company-diagram__container--collapsed .company-diagram__toggle-icon { transform: rotate(-45deg); }
.company-diagram__boss-label { display: block; margin-bottom: 7px; color: var(--company-muted); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.company-diagram__person { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 12px; color: var(--company-text); background: var(--company-accent-soft); border: 1px solid transparent; border-radius: 12px; cursor: pointer; transition: background-color 0.18s ease, opacity 0.18s ease; }
.company-diagram__person:hover { border-color: var(--company-accent); }
.company-diagram__person:focus-visible { outline: 3px solid rgb(22 119 255 / 0.35); outline-offset: 2px; }
.company-diagram__person.company-diagram__person--moving { opacity: 0.6; background-color: rgba(200, 0, 0, 0.3); }
.company-diagram__person--boss { border-color: var(--company-line); }
.company-diagram__person--selected { border-color: var(--company-accent); box-shadow: 0 0 0 2px var(--company-accent-soft); }
.company-diagram__avatar { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; color: var(--company-accent); background: var(--company-card); border-radius: 50%; font-size: 0.74rem; font-weight: 850; }
.company-diagram__person-name { overflow: hidden; font-size: 0.9rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.company-diagram__members { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--company-line); }
.company-diagram__members > .company-diagram__children { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.company-diagram__empty-boss,
.company-diagram__empty-members { margin: 0; padding: 12px; color: var(--company-muted); background: var(--company-accent-soft); border-radius: 12px; font-size: 0.9rem; cursor: pointer; }
.company-diagram__root-user { height: fit-content; background: var(--company-card); border: 1px solid var(--company-line); box-shadow: 0 12px 28px rgb(7 38 77 / 0.06); }

@media (max-width: 991.98px) {
    .company-diagram__container { padding: 10px; }
    .company-diagram__roots,
    .company-diagram__children,
    .company-diagram__members > .company-diagram__children { grid-template-columns: 1fr; }
}