.treeview-playground-tabs {
    height: 100%;
    min-height: 0;
}

.treeview-playground {
    display: grid;
    grid-template-columns: minmax(18rem, 1.15fr) minmax(16rem, 0.85fr);
    gap: 1rem;
    height: 100%;
    min-height: 0;
    padding: 1rem;
    overflow: auto;
    background: var(--zen-page-background, #f4f6fa);
}

.treeview-playground__column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.treeview-playground__card {
    min-width: 0;
    padding: 0.9rem;
    border: 1px solid rgba(63, 79, 107, 0.13);
    border-radius: 0.85rem;
    background: var(--zen-panel-background, #fff);
    box-shadow: 0 0.2rem 0.8rem rgba(32, 45, 70, 0.055);
}

.treeview-playground__card--grow {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 27rem;
}

.treeview-playground__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.75rem;
}

.treeview-playground__header h2,
.treeview-playground__header h3 {
    margin: 0;
    color: var(--zen-title-color, #253047);
    font-size: 1rem;
}

.treeview-playground__header p {
    margin: 0.18rem 0 0;
    color: var(--zen-muted-text, #657089);
    font-size: 0.83rem;
}

.treeview-playground__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.7rem;
}

.treeview-playground__toolbar button {
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(46, 101, 186, 0.2);
    border-radius: 0.5rem;
    color: var(--zen-accent-strong, #174d91);
    background: rgba(46, 101, 186, 0.06);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.treeview-playground__toolbar button:hover {
    background: rgba(46, 101, 186, 0.12);
}

.treeview-playground__tree-shell {
    flex: 1 1 auto;
    min-height: 18rem;
    padding: 0.35rem;
    overflow: auto;
    border: 1px solid rgba(63, 79, 107, 0.1);
    border-radius: 0.65rem;
    background: rgba(247, 249, 252, 0.72);
}

.treeview-playground__diagnostics {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.5rem 0.8rem;
    margin: 0;
    font-size: 0.84rem;
}

.treeview-playground__diagnostics dt {
    color: var(--zen-muted-text, #657089);
}

.treeview-playground__diagnostics dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.treeview-playground__node-detail {
    min-height: 7rem;
    margin-top: 0.8rem;
    padding: 0.7rem;
    overflow: auto;
    border-radius: 0.55rem;
    color: #d8e1f3;
    background: #202938;
    font: 0.78rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre-wrap;
}

.treeview-playground__status {
    margin-top: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.55rem;
    color: var(--zen-accent-strong, #174d91);
    background: rgba(46, 101, 186, 0.08);
    font-size: 0.82rem;
}

.treeview-playground__status.is-error {
    color: #9f2f2f;
    background: rgba(181, 74, 74, 0.1);
}

.treeview-playground-code {
    height: 100%;
    min-height: 0;
    padding: 1rem;
    overflow: auto;
    background: var(--zen-page-background, #f4f6fa);
}

.treeview-playground-code pre,
.treeview-playground-code .code-preview,
.treeview-playground-code .code-js {
    min-height: 100%;
    margin: 0;
}

@media (max-width: 980px) {
    .treeview-playground {
        grid-template-columns: 1fr;
        height: auto;
    }
}