@media (max-width: 880px) {
    .app-shell {
        grid-template-columns: 150px minmax(0, 1fr);
    }

    .provider-workspace {
        grid-template-columns: 205px minmax(0, 1fr);
    }

    .content-area {
        padding: 16px;
    }

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

    .field-wide {
        grid-column: auto;
    }

    .assignment-row {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .assignment-selects {
        grid-column: 1 / -1;
        padding-left: 52px;
    }
}

@media (max-width: 680px) {
    .topbar {
        padding: 9px 12px;
        align-items: center;
    }

    .brand-block p,
    .runtime-badge {
        display: none;
    }

    .topbar-actions {
        min-width: 0;
        gap: 6px;
    }

    .auth-widget .tk-user-trigger {
        max-width: 100px;
    }

    #back-button {
        width: 36px;
        padding: 0;
    }

    #back-button-label {
        display: none;
    }

    body[data-product-return="true"] #back-button {
        width: auto;
        padding: 0 8px;
    }

    body[data-product-return="true"] #back-button-label {
        display: inline;
    }

    .back-icon {
        display: inline;
    }

    .app-shell {
        display: block;
    }

    .side-navigation {
        padding: 7px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .side-navigation nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nav-item {
        min-height: 40px;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .nav-symbol,
    .nav-item small,
    .side-status {
        display: none;
    }

    .content-area {
        padding: 13px;
    }

    .access-view {
        min-height: calc(100vh - 84px);
    }

    .access-panel {
        padding: 22px 8px;
    }

    .page-heading {
        min-height: auto;
        align-items: flex-start;
    }

    .page-heading h2 {
        font-size: 17px;
    }

    .provider-workspace {
        display: block;
        min-height: 0;
        overflow: visible;
    }

    .provider-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .provider-list {
        display: flex;
        gap: 4px;
        overflow-x: auto;
    }

    .provider-item {
        min-width: 174px;
    }

    .editor-heading,
    .model-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .form-actions {
        flex-wrap: wrap;
    }

    .password-row {
        grid-template-columns: minmax(0, 1fr) 48px auto;
    }

    #sync-key-button:not([hidden]) + #clear-key-button {
        grid-row: 2;
        grid-column: 3;
    }

    .inline-status {
        width: 100%;
        margin-right: 0;
    }

    .segmented-control {
        width: 100%;
    }

    .segmented-control button {
        flex: 1;
    }

    .assignment-row {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .assignment-selects {
        grid-template-columns: 1fr;
        padding-left: 0;
    }

    .settings-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .readonly-value {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .row-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .plain-table {
        border: 0;
        background: transparent;
    }

    .plain-table thead {
        display: none;
    }

    .plain-table tbody,
    .plain-table tr,
    .plain-table td {
        display: block;
        width: 100%;
    }

    .plain-table tr {
        margin-bottom: 7px;
        padding: 7px 9px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
    }

    .plain-table td {
        padding: 4px 0;
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 8px;
        border-bottom: 0;
    }

    .plain-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
    }
}

@media (max-width: 420px) {
    .page-heading {
        flex-direction: column;
        gap: 9px;
    }

    .page-heading > .button {
        width: 100%;
    }

    #provider-form,
    .models-section {
        padding: 13px;
    }

    .model-table {
        min-width: 520px;
    }

}