.org-page {
padding-block-start: calc(var(--header-height, 80px) + 40px);
padding-block-end: 60px;
min-height: 100vh;
background: var(--gray-light, #f5f5f5);
}

.org-page .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.org-header {
text-align: center;
margin-block-end: 40px;
}

.org-header h1 {
font-size: 2rem;
font-weight: 800;
color: var(--purple-main, #7b2d8e);
margin-block-end: 8px;
}

.org-header p {
font-size: 1rem;
color: #777;
}

/* ── Root card ── */
.org-root-card  {
max-width: 320px;
margin: 0 auto 12px;
background: linear-gradient(135deg, var(--purple-main, #7b2d8e), var(--purple-dark, #5a1f6a));
border-radius: 16px;
padding: 24px 20px 18px;
text-align: center;
color: #fff;
box-shadow: 0 8px 30px rgba(123, 45, 142, .25);
}

.org-root-card .org-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 3px solid rgba(255, 255, 255, .4);
margin: 0 auto 10px;
display: block;
}

.org-root-card .org-root-title {
font-size: 1.1rem;
font-weight: 800;
margin-block-end: 2px;
}

.org-root-card .org-root-name {
font-size: 0.9rem;
opacity: .85;
}

.org-connector {
width: 2px;
height: 28px;
background: var(--purple-light, #c9a0dc);
margin: 0 auto;
}

/* ── Grid ── */
.org-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-block-start: 12px;
}

.org-grid-row3 {
display: flex;
flex-direction: column;
gap: 16px;
margin-block-start: 16px;
}

.org-grid-row3 .org-branch-ceo {
grid-column: 2;
}

/* ── Branch card ── */
.org-branch {
background: #fff;
border-radius: 14px;
box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
overflow: hidden;
transition: box-shadow .25s;
cursor: pointer;
}

.org-branch:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
}

.org-branch.active {
box-shadow: 0 0 0 2px var(--purple-main, #7b2d8e), 0 4px 20px rgba(0, 0, 0, .1);
}

.org-branch-head  {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
user-select: none;
}

.org-branch-head .org-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--purple-light, #c9a0dc);
flex-shrink: 0;
}

.org-branch-head .info {
flex: 1;
min-width: 0;
}

.org-branch-head .info .title-text {
font-size: .92rem;
font-weight: 700;
color: var(--purple-main, #7b2d8e);
display: block;
}

.org-branch-head .info .name-text {
font-size: .82rem;
color: #777;
display: block;
margin-top: 2px;
}

.org-branch-head .toggle-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--gray-light, #f0f0f0);
flex-shrink: 0;
font-size: .7rem;
color: #888;
transition: transform .3s, background .2s;
}

.org-branch.active .org-branch-head .toggle-icon {
transform: rotate(90deg);
background: var(--purple-light, #c9a0dc);
color: #fff;
}

.org-branch-head .toggle-icon.no-children {
visibility: hidden;
}

/* ── Subtree panel (below grid, full width) ── */
.org-detail-panel {
overflow: hidden;
transition: height .4s ease;
background: #fff;
border-radius: 14px;
box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
margin-block-start: 16px;
}

.org-detail-panel.ceo-panel .org-detail-panel-inner {
max-height: min(65vh, 520px);
overflow-y: auto;
overflow-x: hidden;
}

.org-detail-panel-inner {
padding: 16px 24px 24px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 8px 20px;
}

.org-detail-panel-title {
grid-column: 1 / -1;
font-size: .95rem;
font-weight: 700;
color: var(--purple-main, #7b2d8e);
padding-bottom: 8px;
margin-bottom: 4px;
border-bottom: 2px solid var(--purple-light, #c9a0dc);
}

.org-sub-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid #f3f3f3;
cursor: pointer;
}

.org-sub-item:last-child {
border-bottom: none;
}

.org-sub-item .org-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #e8d5f0;
flex-shrink: 0;
}

.org-sub-item .sub-info {
flex: 1;
min-width: 0;
}

.org-sub-item .sub-info .sub-title {
font-size: .84rem;
font-weight: 600;
color: #444;
display: block;
}

.org-sub-item .sub-info .sub-name {
font-size: .78rem;
color: #999;
display: block;
}

.org-sub-item .sub-toggle {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f5f5f5;
font-size: .6rem;
color: #aaa;
transition: transform .3s, background .2s;
flex-shrink: 0;
}

.org-sub-item.open>.sub-toggle {
transform: rotate(90deg);
background: #e0c8ed;
color: #fff;
}

.org-sub-item .sub-toggle.no-children {
visibility: hidden;
}

.org-sub-children {
overflow: hidden;
transition: height .35s ease;
padding-inline-start: 24px;
}

.org-sub-children .org-sub-item .org-avatar {
width: 30px;
height: 30px;
border-color: #ede0f5;
}

.org-sub-children .org-sub-item .sub-title {
font-size: .8rem;
}

.org-sub-children .org-sub-item .sub-name {
font-size: .75rem;
}

/* ── Controls ── */
.org-controls {
display: flex;
justify-content: center;
gap: 8px;
margin-block-end: 20px;
}

.org-controls button {
padding: 8px 16px;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
cursor: pointer;
font-size: .85rem;
color: #555;
transition: all .2s;
font-family: inherit;
}

.org-controls button:hover {
background: var(--purple-main, #7b2d8e);
color: #fff;
border-color: var(--purple-main, #7b2d8e);
}

.org-controls button i {
margin-inline-end: 4px;
}

@media (max-width: 600px) {
.org-header h1 {
font-size: 1.4rem;
}

.org-grid {
grid-template-columns: 1fr;
}

.org-grid-row3 {
grid-template-columns: 1fr;
}

.org-grid-row3 .org-branch-ceo {
grid-column: 1;
}

.org-detail-panel-inner {
grid-template-columns: 1fr;
padding: 12px 16px 16px;
}

.org-root-card {
max-width: 260px;
padding: 18px 14px 14px;
}

.org-root-card .org-avatar {
width: 60px;
height: 60px;
}
}