.content-wrapper {
    min-height: 300px;
    position: relative;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(201, 94, 75, 0.25);
    outline-offset: 2px;
}

@media (max-width: 1280px) {
    :root {
        --side-rail-width: 224px;
    }
    .app-shell {
        grid-template-columns: 224px minmax(0, 1fr);
        gap: 0;
    }

    .main-panel {
        padding: 0 20px 20px;
    }

    .main-panel-topbar {
        margin: 0 -20px 12px;
        padding: 0 20px 10px;
    }

}

@media (max-width: 960px) {
    :root {
        --side-rail-width: 188px;
    }
    .container {
        padding: 0;
    }
    .app-shell {
        grid-template-columns: 188px minmax(0, 1fr);
        gap: 0;
    }
    .main-panel {
        padding: 0 16px 16px;
        border-radius: 0;
        min-height: 0;
    }
    .main-panel-topbar {
        margin: 0 -16px 12px;
        padding: 0 16px 10px;
    }
    .top-tabs {
        display: none !important;
    }
    .status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 2px;
    }
    .status-chip {
        min-width: 0;
    }

    .skills-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .skills-panel-header {
        flex-direction: column;
        align-items: stretch;
    }

    .skills-modal-actions {
        align-items: flex-start;
    }

    .market-target-switch-compact {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    :root {
        --side-rail-width: min(188px, 46vw);
    }
    .app-shell {
        grid-template-columns: 1fr;
        min-height: auto;
        height: auto;
        overflow: visible;
    }

    .side-rail {
        display: none;
    }

    .lang-fab {
        display: block;
    }

    .top-tabs {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
        margin-left: -2px;
        margin-right: -2px;
    }

    .main-panel {
        padding: 0 12px 16px;
        height: auto;
        overflow-y: visible;
    }

    .main-panel-topbar {
        position: static;
        margin: 0 0 10px;
        padding: 0;
        background: transparent;
        backdrop-filter: none;
    }

    .panel-header-refined {
        margin-left: 0;
        margin-right: 0;
        padding: 14px 0 12px;
    }

    .main-title {
        font-size: 18px;
    }

    .subtitle {
        font-size: 12px;
        margin-bottom: 0;
        line-height: 1.4;
    }

    .panel-kicker {
        display: none;
    }

    .top-tabs {
        margin: 8px 0 10px;
        gap: 5px;
    }

    .segmented-control {
        flex-direction: column;
        gap: 6px;
    }

    .status-strip {
        grid-template-columns: 1fr;
        gap: 12px;
    }

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

    .market-action-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 540px) {
    .trash-header-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .selector-header .trash-header-actions > .btn-tool,
    .selector-header .trash-header-actions > .btn-tool-compact {
        width: 100%;
        min-width: 0;
        height: 44px;
        min-height: 44px;
    }
    .top-tabs {
        gap: 5px;
        margin: 2px 0 8px;
        padding-right: 14px;
    }
    .main-panel {
        padding: 0 10px 12px;
    }

    .main-panel-topbar {
        margin-bottom: 8px;
    }
    .card {
        padding: 12px;
    }
    .session-layout {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }

    .status-strip {
        gap: var(--spacing-xs);
    }

    .status-chip {
        min-width: 100%;
    }

    .btn-add,
    .btn-tool,
    .card-action-btn,
    .btn-session-export,
    .btn-session-open,
    .btn-session-clone,
    .btn-session-refresh,
    .btn-session-delete,
    .btn-icon,
    .session-item-copy {
        min-height: 44px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .btn-icon,
    .session-item-copy {
        min-width: 36px;
    }

    .session-item {
        min-height: 79px;
        height: 79px;
        contain-intrinsic-size: 79px;
        padding: 12px 14px;
    }

    .session-item-header {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .session-item-main {
        align-items: center;
    }

    .session-item-copy {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        border-radius: 6px;
        padding: 2px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transform: translate(-3px, 0);
    }

    .session-item-copy svg {
        width: 10px;
        height: 10px;
    }

    .session-item-title {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .session-item-actions {
        margin-top: 0;
    }

    .session-item-meta {
        margin-top: 4px;
        margin-bottom: 0;
        gap: 4px;
        align-items: center;
    }

    .trash-item-body {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .trash-item-actions {
        opacity: 1;
        justify-content: flex-end;
    }

    .trash-item-cwd {
        max-width: 140px;
    }

    .card {
        padding: 8px;
    }

    .card-list {
        gap: 4px;
        margin-bottom: 4px;
    }

    .card-actions {
        gap: 8px;
    }

    .card-action-btn {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .card-action-btn svg {
        width: 18px;
        height: 18px;
    }

    .card-trailing {
        grid-auto-flow: row;
        grid-auto-columns: 1fr;
        justify-content: stretch;
        justify-items: end;
    }

    .card-trailing .card-actions {
        width: 100%;
        justify-content: flex-end;
        justify-self: end;
    }

    /* 移动端不显示配置状态 pill，节省空间 */
    .card-trailing .pill {
        display: none;
    }

    .auth-profile-item {
        padding: 10px;
    }

    .auth-profile-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .auth-profile-actions {
        justify-content: flex-start;
    }

    .auth-profile-grid {
        grid-template-columns: 1fr;
        gap: 6px;
        margin-top: 8px;
    }

    .auth-profile-row {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-bottom: 4px;
        border-bottom: 1px dashed rgba(160, 145, 130, 0.25);
    }

    .auth-profile-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .session-preview {
        border-radius: var(--radius-lg);
    }

    .skills-summary-strip {
        grid-template-columns: 1fr;
    }

    .skills-panel {
        padding: 10px;
    }

    .skills-root-box {
        font-size: 11px;
    }
}
