/* mode-sub-panel — wysuwa się pod mode-switcher-row */
.mode-sub-panel {
    width: 100%;
    background: var(--color-bg-paper-main);
    border-bottom: 1px solid var(--color-border-light);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.18s ease, opacity 0.15s ease;
}

.mode-sub-panel.open {
    max-height: 200px;
    opacity: 1;
}

.mode-sub-panel-inner {
    padding: 7px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mode-sub-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

/* sub-btn — mniejszy niż mode-btn, identyczna estetyka */
.sub-btn {
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: transparent;
    border: 1px solid var(--color-border-light);
    color: var(--color-text-secondary);
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    text-align: center;
}

.sub-btn:hover {
    background: var(--color-bg-hover, #eee);
    border-color: var(--color-border-medium);
}

.sub-btn.active {
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-color: var(--color-accent);
    box-shadow: 0 2px 4px rgba(var(--color-overlay-dark), 0.2);
}

.sub-btn.active:hover {
    background: var(--color-accent-hover);
}

/* api-btn — jeszcze mniejszy */
.api-btn {
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: transparent;
    border: 1px solid var(--color-border-light);
    color: var(--color-text-muted);
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    text-align: center;
}

.api-btn:hover {
    background: var(--color-bg-hover, #eee);
    border-color: var(--color-border-medium);
    color: var(--color-text-secondary);
}

.api-btn.dim {
    opacity: 0.35;
}

.api-btn.active {
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-color: var(--color-accent);
    opacity: 1;
}

/* desktop only */
@media (max-width: 768px) {
    .mode-sub-panel { display: none !important; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .mode-sub-panel { display: none !important; }
}

/* dark themes */
body.theme-dark .mode-sub-panel,
body.theme-dark-sparks .mode-sub-panel,
body.theme-matrix .mode-sub-panel {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border) !important;
}
body.theme-dark .sub-btn,
body.theme-dark-sparks .sub-btn,
body.theme-matrix .sub-btn {
    border-color: var(--color-border) !important;
    color: var(--color-text-secondary) !important;
}
body.theme-dark .sub-btn.active,
body.theme-dark-sparks .sub-btn.active,
body.theme-matrix .sub-btn.active {
    background: var(--color-accent) !important;
    color: var(--color-accent-text) !important;
    border-color: var(--color-accent) !important;
}
body.theme-dark .api-btn,
body.theme-dark-sparks .api-btn,
body.theme-matrix .api-btn {
    border-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
}
body.theme-dark .api-btn.active,
body.theme-dark-sparks .api-btn.active,
body.theme-matrix .api-btn.active {
    background: var(--color-accent) !important;
    color: var(--color-accent-text) !important;
}